AI 工具包

歡迎來到 Flutter AI 工具包！

AI 工具包是一組與 AI 聊天相關的元件，可以輕鬆地將 AI 聊天視窗新增到您的 Flutter 應用中。AI 工具包圍繞抽象的 LLM 提供商 API 進行組織，以便輕鬆替換您希望聊天提供商使用的 LLM 提供商。開箱即用，它支援兩種 LLM 提供商整合：Google Gemini AI 和 Firebase Vertex AI。

• 多輪聊天：在多次互動中保持上下文。
• 流式響應：即時顯示 AI 生成的響應。
• 富文字顯示：支援聊天訊息中的格式化文字。
• 語音輸入：允許使用者使用語音輸入提示。
• 多媒體附件：支援傳送和接收各種媒體型別。
• 自定義樣式：提供廣泛的自定義選項，以匹配您的應用設計。
• 聊天序列化/反序列化：在應用會話之間儲存和檢索對話。
• 自定義響應元件：引入專門的 UI 元件來呈現 LLM 響應。
• 可插拔的 LLM 支援：實現一個簡單的介面來插入您自己的 LLM。
• 跨平臺支援：相容 Android、iOS、Web 和 macOS 平臺。

這是託管 AI 工具包的線上演示

此演示的原始碼可在 GitHub 上的倉庫中找到。

或者，您可以在 Firebase Studio 中開啟它，這是一個在雲中執行的 Google 全棧 AI 工作區和 IDE

1. 安裝

   將以下依賴項新增到您的 pubspec.yaml 檔案中

   yaml

   dependencies:
     flutter_ai_toolkit: ^latest_version
     google_generative_ai: ^latest_version # you might choose to use Gemini,
     firebase_core: ^latest_version        # or Vertex AI or both

2. Gemini AI 配置

   該工具包支援 Google Gemini AI 和 Firebase Vertex AI 作為 LLM 提供商。要使用 Google Gemini AI，請從 Gemini AI Studio 獲取 API 金鑰。請注意不要將此金鑰提交到您的原始碼倉庫中，以防止未經授權的訪問。

   您還需要選擇一個特定的 Gemini 模型名稱，用於建立 Gemini 模型例項。以下示例使用 gemini-2.0-flash，但您可以從不斷擴充套件的模型集中進行選擇。

   dart

   import 'package:google_generative_ai/google_generative_ai.dart';
   import 'package:flutter_ai_toolkit/flutter_ai_toolkit.dart';
   
   // ... app stuff here
   
   class ChatPage extends StatelessWidget {
     const ChatPage({super.key});
   
     @override
     Widget build(BuildContext context) => Scaffold(
           appBar: AppBar(title: const Text(App.title)),
           body: LlmChatView(
             provider: GeminiProvider(
               model: GenerativeModel(
                 model: 'gemini-2.0-flash',
                 apiKey: 'GEMINI-API-KEY',
               ),
             ),
           ),
         );
   }

   GenerativeModel 類來自 google_generative_ai 包。AI 工具包在此包的基礎上構建了 GeminiProvider，它將 Gemini AI 插入到 LlmChatView 中，LlmChatView 是一個頂層元件，可為您的使用者提供基於 LLM 的聊天對話。

   有關完整示例，請檢視 GitHub 上的 gemini.dart。

3. Vertex AI 配置

   雖然 Gemini AI 對快速原型開發很有用，但生產應用的推薦解決方案是 Firebase 中的 Vertex AI。這消除了客戶端應用中對 API 金鑰的需求，並將其替換為更安全的 Firebase 專案。要在您的專案中使用 Vertex AI，請按照使用 Firebase SDK 中的 Vertex AI 開始使用 Gemini API 文件中描述的步驟操作。

   完成後，使用 flutterfire CLI 工具將新的 Firebase 專案整合到您的 Flutter 應用中，如將 Firebase 新增到您的 Flutter 應用文件中所述。

   按照這些說明操作後，您就可以在 Flutter 應用中使用 Firebase Vertex AI 了。首先初始化 Firebase

   dart

   import 'package:firebase_core/firebase_core.dart';
   import 'package:firebase_vertexai/firebase_vertexai.dart';
   import 'package:flutter_ai_toolkit/flutter_ai_toolkit.dart';
   
   // ... other imports
   
   import 'firebase_options.dart'; // from `flutterfire config`
   
   void main() async {
     WidgetsFlutterBinding.ensureInitialized();
     await Firebase.initializeApp(options: DefaultFirebaseOptions.currentPlatform);
     runApp(const App());
   }
   
   // ...app stuff here

   在您的 Flutter 應用中正確初始化 Firebase 後，您現在可以建立 Vertex 提供商的例項了

   dart

   class ChatPage extends StatelessWidget {
     const ChatPage({super.key});
   
     @override
     Widget build(BuildContext context) => Scaffold(
           appBar: AppBar(title: const Text(App.title)),
           // create the chat view, passing in the Vertex provider
           body: LlmChatView(
             provider: VertexProvider(
               chatModel: FirebaseVertexAI.instance.generativeModel(
                 model: 'gemini-2.0-flash',
               ),
             ),
           ),
         );
   }

   FirebaseVertexAI 類來自 firebase_vertexai 包。AI 工具包構建了 VertexProvider 類，以將 Vertex AI 暴露給 LlmChatView。請注意，您提供了一個模型名稱（您有多種選項可供選擇），但您不提供 API 金鑰。所有這些都作為 Firebase 專案的一部分進行處理。

   有關完整示例，請檢視 GitHub 上的 vertex.dart。

4. 設定裝置許可權

   為了讓您的使用者能夠利用語音輸入和媒體附件等功能，請確保您的應用具有必要的許可權

   • 網路訪問：要在 macOS 上啟用網路訪問，請將以下內容新增到您的 *.entitlements 檔案中

     xml

     <plist version="1.0">
       <dict>
         ...
         <key>com.apple.security.network.client</key>
         <true/>
       </dict>
     </plist>

     要在 Android 上啟用網路訪問，請確保您的 AndroidManifest.xml 檔案包含以下內容

     xml

     <manifest xmlns:android="http://schemas.android.com/apk/res/android">
         ...
         <uses-permission android:name="android.permission.INTERNET"/>
     </manifest>

   • 麥克風訪問：根據 record 包的許可權設定說明進行配置。

   • 檔案選擇：遵循 file_selector 外掛的說明。

   • 影像選擇：要在裝置上拍照或選擇照片，請參閱 image_picker 外掛的安裝說明。

   • Web 照片：要在 Web 上拍照，請根據 camera 外掛的設定說明配置應用。

要執行倉庫中的示例應用，您需要替換 example/lib/gemini_api_key.dart 和 example/lib/firebase_options.dart 檔案，這兩個檔案都只是佔位符。它們是啟用 example/lib 資料夾中的示例專案所必需的。

gemini_api_key.dart

大多數示例應用都依賴 Gemini API 金鑰，因此要使它們正常工作，您需要將 API 金鑰插入 example/lib/gemini_api_key.dart 檔案中。您可以在 Gemini AI Studio 中獲取 API 金鑰。

firebase_options.dart

要使用 Vertex AI 示例應用，請將您的 Firebase 配置詳細資訊放入 example/lib/firebase_options.dart 檔案中。您可以使用 flutterfire CLI 工具完成此操作，如將 Firebase 新增到您的 Flutter 應用文件中在 example 目錄中所述。

在此過程中，當您使用此軟體包時，請提交問題和功能請求，並提交您想貢獻的程式碼。我們希望得到您的反饋和貢獻，以確保 AI 工具包對您的實際應用來說盡可能強大和有用。