LLM ChatBots 3.0: ادغام LLM ها با عناصر رابط کاربری پویا

Summarize this content to 400 words in Persian Lang

مدل های زبان بزرگ (LLM) به طور قابل توجهی چت بات ها و هوش مصنوعی مکالمه را متحول کرده اند و تعاملات را طبیعی تر و شهودی تر می کنند. با این حال، هنوز مناطقی وجود دارد که بهبودها می توانند اثربخشی آنها را افزایش دهند.

بیایید به یک تعامل معمولی با یک چت بات سنتی نگاه کنیم:

User: I’m looking for warm travel destinations in Europe.

وارد حالت تمام صفحه شوید

از حالت تمام صفحه خارج شوید

AI: Great! I can help with that. Which country are you interested in?
1. Spain
2. Italy
3. Greece

وارد حالت تمام صفحه شوید

از حالت تمام صفحه خارج شوید

User: 2

وارد حالت تمام صفحه شوید

از حالت تمام صفحه خارج شوید

AI: Excellent choice. What type of accommodation do you prefer?
1. Hotel
2. Hostel
3. Airbnb

وارد حالت تمام صفحه شوید

از حالت تمام صفحه خارج شوید

کاربران اغلب نیاز دارند که بر اساس پاسخ های LLM انتخاب کنند یا انتخاب کنند.
انتخاب گزینه ها مستلزم تایپ متن یا استفاده از سیستم های شماره گذاری است.
این فرآیند می تواند خسته کننده باشد، به خصوص با انتخاب های متعدد یا در دستگاه های تلفن همراه.

ایجاد رابط کاربری پویا با LLMبا نگاهی به همین مشکل از منظر کاربرپسندتر، با الهام از عناصر رابط کاربری معمولی مورد استفاده در وب (دکمه‌ها، نمادها و غیره)، می‌توانیم همین عناصر را در خود چت ادغام کنیم. نتیجه می تواند چیزی شبیه به این باشد.

ما همین سوال را می‌پرسیم و به‌جای اینکه فقط فهرست یا امتیاز کشورها را دریافت کنیم، گزینه‌هایی مانند این دریافت می‌کنیم:

انتخاب یک مورد یا چند مورد، سپس یک پاسخ خودکار با انتخاب LLM را آغاز می کند، بنابراین “می داند” چه چیزی را انتخاب کرده ایم، در مورد زیر “لیسبون، پرتغال”.

می توانید آن را در اینجا امتحان کنید: https://fluidchat.vercel.app

لطفاً توجه داشته باشید که این برنامه هنوز در حال توسعه است و از gpt-4o-mini استفاده می کند که گاهی اوقات کدهای صحیحی را برای برخی از نمادها تولید نمی کند.

تفاوت های اصلی با مکالمات چت مبتنی بر متن:

نسل رابط کاربری پویاLLM می تواند عناصر رابط کاربری مانند دکمه ها، چک باکس ها و منوهای کشویی را تولید کند.

انتخاب های تعاملی: کاربران می توانند به جای تایپ کردن پاسخ ها، مستقیماً از طریق رابط کاربری انتخاب کنند.

زمینه مکالمه: تعاملات UI به طور یکپارچه در تاریخچه مکالمه ادغام می شوند.

سازگار با موبایل: این رابط طوری طراحی شده است که به راحتی در دستگاه های دسکتاپ و موبایل قابل استفاده باشد.

تفاوت این رویکرد با Artifact (Claude) و Canvas (OpenAI)Aritafcts در اصطلاحات آنتروپیک و Canvas در اصطلاحات OpenAI راه هایی را برای ارائه اطلاعات مانند HTML، SVG، React و غیره به روشی فوق العاده دوستانه معرفی می کنند. با این حال، آنها هنوز راهی برای گرفتن اطلاعات، به عنوان مثال ورودی کاربر، ارائه نمی دهند.

شیرجه عمیق فنی

برای فعال کردن این نسل رابط کاربری پویا، ما یک زبان نشانه گذاری سفارشی بسیار ساده را برای چند عنصر پیاده سازی کرده ایم. این زبان به LLM اجازه می‌دهد تا نه تنها متن، بلکه دستورالعمل‌هایی را برای ارائه عناصر UI تولید کند.

زبان نشانه گذاری به گونه ای طراحی شده است که از زبان های برنامه نویسی معمولی متمایز باشد. این تمایز بسیار مهم است زیرا وقتی LLM قطعه‌های واقعی کد را به عنوان بخشی از مکالمه تولید می‌کند، از سردرگمی جلوگیری می‌کند.

در اینجا جدولی وجود دارد که برخی از عناصر زبان نشانه گذاری سفارشی ما را نشان می دهد:

برای انجام این کار، باید آن را در دو طرف پیاده سازی کنیم: سمت LLM (از طریق درخواست) و سمت مشتری که این عناصر UI را تفسیر و نمایش می دهد.

سمت LLM

در اینجا یک دستور ساده وجود دارد که به LLM می گوید که چه زمانی و چگونه از این عناصر استفاده کند.

You are an AI assistant capable of presenting options for user selection and using Font Awesome icons. When appropriate, use the following formats:

وارد حالت تمام صفحه شوید

از حالت تمام صفحه خارج شوید

1. [SINGLE_SELECT] for single-choice options
2. [MULTI_SELECT] for multiple-choice options
3. [CHOICE] for general choice options

وارد حالت تمام صفحه شوید

از حالت تمام صفحه خارج شوید

Present the options in a numbered list format. Use Font Awesome icons by wrapping the icon name in double curly braces, like {{icon-name}}. Examples:

وارد حالت تمام صفحه شوید

از حالت تمام صفحه خارج شوید

وارد حالت تمام صفحه شوید

از حالت تمام صفحه خارج شوید

وارد حالت تمام صفحه شوید

از حالت تمام صفحه خارج شوید

وارد حالت تمام صفحه شوید

از حالت تمام صفحه خارج شوید

سمت مشتریو در سمت کلاینت (رابط چت) باید این عناصر را نیز ادغام کنیم.

// Render different types of content
const renderContent = () => {
if (typeof message.content === ‘string’) {
return <p>{message.content}</p>;
}
if (Array.isArray(message.content)) {
return message.content.map((item, index) => (
<div key={index}>
{item.text && <p>{item.text}</p>}
{item.options && renderOptions(item.options, item.type)}
</div>
));
}
return null;
};

وارد حالت تمام صفحه شوید

از حالت تمام صفحه خارج شوید

// Render interactive UI elements
const renderOptions = (options, type) => {
switch (type) {
case ‘single-select’:
// Render single-select buttons
case ‘multi-select’:
// Render multi-select buttons with confirm
default:
return null;
}
};

وارد حالت تمام صفحه شوید

از حالت تمام صفحه خارج شوید

بهبودهای بصری: یک چیز خوب برای داشتن

پیاده سازی شرح داده شده در بالا نه تنها به عناصر ورودی محدود می شود، بلکه می تواند از تجسم غنی مانند نمایش فونت عالی، علامت گذاری و غیره نیز پشتیبانی کند. برخی از این عناصر بصری قبلاً توسط تمام رابط های اصلی چت بات پشتیبانی می شوند.

به عنوان مثال، می‌توانیم زبان نشانه‌گذاری خود را به گونه‌ای گسترش دهیم که مشخصات آیکون‌ها را نیز شامل شود:

وارد حالت تمام صفحه شوید

از حالت تمام صفحه خارج شوید

این می تواند به صورت دکمه هایی با نمادهای متنی و نماینده نمایش داده شود و تجربه کاربر را بیشتر بهبود بخشد.

بعد چه است

رویکرد روانی که در اینجا معرفی می‌شود، تازه آغاز الگوهای جدید UI برای تعامل بین LLM و کاربران است که تعامل را روان‌تر می‌کند، به‌ویژه زمانی که ورودی زیادی از کاربر مورد نیاز است (بر خلاف مکالمات ساده اطلاعاتی).

همچنین جالب خواهد بود که ببینیم چگونه تعامل صوتی تکامل می یابد، به ویژه با پخش API های صوتی. با این حال، Imho، تعامل متنی هرگز کاربردی نخواهد داشت، به خصوص در برنامه های کاربردی با محتوا که بیش از حد نویز برای گوش دادن هستند. ما قبلاً مورد دوم را از منوهای خط تلفن تجربه می کنیم که گاهی اوقات ممکن است شبیه شکنجه باشد 🙂

User: I'm looking for warm travel destinations in Europe.

AI: Great! I can help with that. Which country are you interested in?
1. Spain
2. Italy
3. Greece

User: 2

AI: Excellent choice. What type of accommodation do you prefer?
1. Hotel
2. Hostel
3. Airbnb

You are an AI assistant capable of presenting options for user selection and using Font Awesome icons. When appropriate, use the following formats:

1. [SINGLE_SELECT] for single-choice options
2. [MULTI_SELECT] for multiple-choice options
3. [CHOICE] for general choice options

Present the options in a numbered list format. Use Font Awesome icons by wrapping the icon name in double curly braces, like {{icon-name}}. Examples:

[SINGLE_SELECT]
1. {{fa-home}} Home
2. {{fa-user}} Profile
3. {{fa-cog}} Settings

[MULTI_SELECT]
1. {{fa-pizza-slice}} Pizza
2. {{fa-hamburger}} Burger
3. {{fa-ice-cream}} Ice Cream

[CHOICE]
1. {{fa-car}} Drive
2. {{fa-bicycle}} Cycle
3. {{fa-walking}} Walk

// Render different types of content
const renderContent = () => {
  if (typeof message.content === 'string') {
    return <p>{message.content}</p>;
  }
  if (Array.isArray(message.content)) {
    return message.content.map((item, index) => (
      <div key={index}>
        {item.text && <p>{item.text}</p>}
        {item.options && renderOptions(item.options, item.type)}
      </div>
    ));
  }
  return null;
};

// Render interactive UI elements
const renderOptions = (options, type) => {
  switch (type) {
    case 'single-select':
      // Render single-select buttons
    case 'multi-select':
      // Render multi-select buttons with confirm
    default:
      return null;
  }
};

[CHOICE:Small{icon:pizza-sm},Medium{icon:pizza-md},Large{icon:pizza-lg}]