Beautiful UI؛ قطعههای آمادهی رابط کاربری برای ایجنتها
فرانتاند
هوش مصنوعیخلاصهٔ کاملتر
سایت beautifului.dev یه گالری از قطعههای آمادهی رابط کاربریه که مخصوص اپهای ایجنتی جمع شده، یعنی اپهایی که یه مدل هوش مصنوعی توشون قدمبهقدم کار انجام میده و کاربر باید ببینه چی داره اتفاق میافته. تو صفحهی اصلی ۲۰ کامپوننت شمارهگذاریشده کنار دموی زندهشون چیده شده و ادعای سایت اینه که همهشون کپیپیستان.
بخش زیادی از اینها برای لحظهایه که ایجنت مشغوله و کاربر منتظر: لودر پیکسلی با شمارندهی زمان سپریشده، پنل Thinking که مرحلههای استدلال و جستوجو و کدنویسی رو باز و بسته میکنه، متن استریمشدهای که وسطش منبع و اکشن و سؤال بعدی نشون میده، چیپهای فشرده برای فراخوانی ابزار و ویرایش کد، و ردیفهای تسک با وضعیت زندهی running و failed و completed.
دستهی دوم سراغ جایی میره که ایجنت باید از آدم اجازه بگیره یا نتیجهی کارش رو نشون بده: کارت Approval برای پرسیدن قبل از اقدام، کارت پیشنهاد همراه یه نوار درجهی اطمینان، کارتهای Context که تکههای بازیابیشده رو با فایل منبعشون (مثلاً یه PDF یا CSV) و تعداد کاراکترشون نشون میدن، و جدول diff که ویرایشهای پیشنهادی مدل رو روی دادهی جدولی هایلایت میکنه.
بقیهی مجموعه چیزهای آشناترن ولی با چاشنی ایجنت: نوار پرامپت با منبعهای @ و دستورهای /، انتخاب مدل و دیکتهی صوتی؛ جدول رکورد شبیه CRM با تگ و مرتبسازی؛ فیلتر با چیپ وضعیت؛ سایدبار و سرچ فرمانی؛ فلوچارت با تریگر و شرط؛ بلوک کدی که خطبهخط استریم میشه؛ و انتخاب یه پاراگراف از متن و سپردنش به ایجنت برای بازنویسی.
دربارهی پشت صحنه تقریباً هیچی گفته نشده: نه فریمورک، نه لایسنس، نه روش نصب، و تنها سرنخ فنی یه فایل نمونه به اسم churn.ts با برچسب TypeScriptه. پس فعلاً بیشتر به درد ایده گرفتن از الگوهای تعاملی میخوره تا اضافه کردن یه دیپندنسی تازه به پروژه. سایت یه خبرنامه هم داره که کامپوننتهای تازه رو موقع انتشار میفرسته.
نکات کلیدی:
- ۲۰ کامپوننت شمارهگذاریشده، هر کدوم با دموی زنده روی صفحهی اصلی.
- تمرکز روی حالتهای خاص ایجنت: Thinking، Approval، Tool Chips و Task Rows.
- کارت پیشنهاد نوار درجهی اطمینان داره و کارتهای Context فایل منبع هر تکه رو ذکر میکنن.
- تنها نشونهی فنی، یه نمونهی TypeScript به اسم churn.tsه؛ فریمورک و لایسنس اعلام نشده.
