跳到主內容

使用者體驗

使用者在您的應用中體驗 AI Toolkit 的方式。

LlmChatView 小部件是 AI Toolkit 所提供的互動式聊天體驗的入口點。託管一個 LlmChatView 例項即可啟用一系列使用者體驗功能,無需額外編寫任何程式碼。

  • 多行文字輸入:允許使用者貼上長文字,或在輸入時插入新行。
  • 語音輸入:允許使用者透過語音輸入提示詞,以方便使用。
  • 多媒體輸入:使使用者能夠拍攝照片、傳送影像和其他型別的檔案,並以連結形式附加線上資源的 URL。
  • 影像縮放:使使用者能夠縮放影像縮圖。
  • 複製到剪貼簿:允許使用者將訊息或大語言模型(LLM)回覆的文字複製到剪貼簿。
  • 訊息編輯:允許使用者編輯最近一條訊息,以便重新提交給大語言模型(LLM)。
  • Material 和 Cupertino:適配兩種設計語言的最佳實踐。

多行文字輸入

#

當用戶完成提示詞的編寫後,可以選擇多種提交方式,具體取決於他們所使用的平臺。

  • 移動端:點選提交按鈕
  • Web 端:按下 Enter 鍵或點選提交按鈕
  • 桌面端:按下 Enter 鍵或點選提交按鈕

此外,聊天檢視支援帶有嵌入換行符的文字提示。如果使用者已有包含換行符的文字,他們可以像往常一樣將其貼上到提示文字框中。

如果他們希望在輸入過程中手動嵌入換行符,也可以進行操作。執行該操作的手勢因平臺而異:

  • 移動端:點選虛擬鍵盤上的回車(Return)鍵
  • Web 端:按下 Shift+Enter
  • 桌面端:按下 Shift+Enter

這些選項外觀如下:

Web 和桌面端:

Screenshot of entering text on
desktop

移動端:

Screenshot of entering text on
mobile

語音輸入

#

除了文字輸入外,聊天檢視還支援透過點選“麥克風”按鈕進行錄音輸入,該按鈕在未輸入任何文字時顯示。

點選麥克風按鈕開始錄音

Screenshot of entering
text

點選停止按鈕,將使用者的語音輸入轉換為文字

轉換後的文字可以像普通文字一樣進行編輯、補充和提交。

Screenshot of entered
voice

多媒體輸入

#

Textfield containing "Testing, testing, one, two,
three"

聊天檢視還可以接收影像和檔案作為輸入,並傳遞給底層的大語言模型(LLM)。使用者可以點選文字輸入框左側的加號按鈕,從拍攝照片相簿附加檔案新增連結圖示中進行選擇。

Screenshot of the 4
icons

拍攝照片按鈕允許使用者使用裝置的攝像頭拍照。

Selfie image

選擇相簿按鈕,讓使用者可以從裝置的相簿中上傳照片。

Download image from
gallery

選擇附加檔案按鈕,讓使用者從裝置上選擇任何型別的檔案,例如 PDF 或 TXT 檔案。

選擇新增連結按鈕,讓使用者輸入網頁或線上檔案的連結。

一旦選擇了照片、影像、檔案或連結,它就會變成一個附件,並作為與當前活動提示相關聯的縮圖顯示。

Thumbnails of images

使用者可以透過點選縮圖上的 X 按鈕來移除附件。

影像縮放

#

使用者可以透過點選影像縮圖進行縮放檢視。

Zoomed image

按下 Esc 鍵或在影像外任意位置點選即可關閉放大檢視。

複製到剪貼簿

#

使用者可以透過多種方式複製聊天記錄中的任何文字提示或大語言模型(LLM)的回覆。在桌面或 Web 端,使用者可以使用滑鼠選擇螢幕上的文字,並按常規方式將其複製到剪貼簿。

Copy to clipboard

此外,在每條提示或回覆的底部,使用者可以在滑鼠懸停時點擊出現的複製按鈕。

Select the copy button

在移動平臺上,使用者可以長按提示或回覆,然後選擇“複製”選項。

Long tap to see the copy
button

訊息編輯

#

如果使用者想要編輯上一條提示並讓大語言模型(LLM)重新處理,可以這樣做:在桌面端,使用者可以點選最新提示旁邊與複製按鈕並排的編輯按鈕。

How to edit prompt

在移動裝置上,使用者可以長按最新提示並訪問編輯選項。

How to access edit
menu

一旦使用者點選編輯按鈕,他們將進入編輯模式。該模式會從聊天曆史記錄中移除使用者上一條提示和大語言模型(LLM)的上一條回覆,將提示文字放入文字框中,並提供一個“編輯中”指示器。

How to exit editing
mode

在編輯模式下,使用者可以根據需要修改提示並提交,讓大語言模型(LLM)正常生成回覆。或者,如果他們改變主意,可以點選“編輯中”指示器旁邊的 X 按鈕來取消編輯,並恢復之前的大語言模型(LLM)回覆。

Material 和 Cupertino 設計

#

LlmChatView 小部件託管在 Material 應用中時,它會使用 Material 設計語言提供的功能,例如 Material 的 TextField。同樣,當託管在 Cupertino 應用中時,它會使用相應的功能,例如 CupertinoTextField

Cupertino example app

需要注意的是,雖然聊天檢視同時支援 Material 和 Cupertino 應用型別,但它不會自動採用關聯的主題。相反,主題需透過 LlmChatViewstyle 屬性進行設定,具體說明請參考自定義樣式文件。