Angular + Google Gemini

1. 2024/05/18
將 Google Gemini 整合至 Angular
成為互動式 AI 應用程式
洪堃能
Kun-Neng Hung

2. Gemini 介紹
● Google DeepMind 開發的生成式 AI 模型
● 開發者可以使用 Gemini 1.0 Pro 與 Gemini 1.0 Pro Vision 模型，透過 API
將文字、影像等不同模態的資料融合在一起，打造創新的互動應用
○ 撰寫創意文章
○ 轉換結構化資料
○ 擷取圖文資訊，提供摘要
○ 生成程式碼
○ 翻譯

4. Google AI Studio
● 大型語言模型（LLM）
只處理文字輸入和輸出的生成式模型
● Gemini 模型
除了 LLM 的功能，能處理不只是文字資料，還有圖片和音訊

6. 在 Google AI Studio 平台
1. 設定 Gemini API 金鑰
2. 設定模型參數
3. 測試提示（prompt）的回應結果

7. 1. 設定 Gemini API 金鑰

8. Gemini API「即付即用」方案

10. 設定模型參數 (1/2)
● Stop sequence
擷取直到包含該字串的回應，用來中斷繼續生成文字
● Safty settings
設定不同層度的封鎖等級
○ 騷擾
○ 仇恨
○ 性、暴力
○ 危害物品

11. 設定模型參數 (2/2)
● Temperature (0 ~ 1)
若需要較明確的回應，就降低該值（較尖銳的機率分佈，使生成的
結果較有預測性）；若需要較富創意的回應，就增加該值（較平滑的
概率分佈，使生成的結果更加多樣化）
● Top K (>= 1)
指定要選出可能性最高的 top-K 個 tokens
● Top P (0 ~ 1)
依序累加在 Top K 中的每個 token 的機率值，直到該數值等於
top-P 值。越小的 top-P 值表示越少隨機回應；較大的 top-P 值代
表較隨機的回應

12. 關於 token
● 當我們向 LLM 模型輸入一段文字時，會先被拆解成一串串的 token
● 一個字元代表一個 token 嗎？
● 不同模型有不同的 tokenization 方式
● 為什麼要計算 token 數？
A: 模型在執行任務時，會根據所使用的 token 數來收費
計算 token 數量
GenerativeModel.countTokens(request: string): Promise<CountTokensResponse>
Tokenizer
https://platform.openai.com/tokenizer

13. 1. 模型根據 temperature 決定下一個候選 token 的機率分佈：
我 喜歡 A
B
D
C
0.4
0.3
0.2
E 0.05
0.05
A
B
D
C
0.7
0.15
0.12
E 0.01
0.02
temperature
<
2. top-K = 3 ：考慮機率排名前三名的 token （即 A 、 B 和 C ）
3. top-P = 0.8 ：累加機率排名前 80% 的 token （即 A 和 B ）
4. 模型會考慮 A 和 B 為候選 token

14. 在平台上測試提示（prompt）的回應結果
● Chat prompt
建立多輪對話，有前後文的推論關聯，類似聊天機
器人
● Freeform prompt
根據純文字產生文字，提示越明確，回應內容越明
確。
● Structured prompt
在設定對應關係後（讓 AI 學習），根據給定的提示
生成相關結果。

15. 在 Angular 專案整合 Gemini API
● 安裝開發套件（Node.js 版本 v18 以上）
npm install @google/generative-ai
● 初始化生成模型
const genAI = new GoogleGenerativeAI(environment.API_KEY);
const model = genAI.getGenerativeModel({
model: modelType,
...genConfig
});
‘gemini-pro’ 文字輸入
‘gemini-pro-vision’ 多模態輸入

16. 範例1：透過純文字產生文字
● 場景：輸入內容為提示文字
● 模型：gemini-pro
● 方法：generateContent()
● 回應：文字
輸入框
發送按鈕
回應文字區
1. 安裝 ngx-markdown 套件
2. 以 markdown 元件包裹回應

18. 範例2：透過文字和圖片輸入產生文字（多模態）
● 場景：輸入內容包含提示文字和圖片
● 模型：gemini-pro-vision
● 方法：generateContent()
● 回應：文字
輸入框
發送按鈕
回應文字區
圖片選取與預覽

20. 範例3：建立多輪對話（聊天）
● 場景：輸入內容為提示文字
● 模型：gemini-pro
● 方法：
○ startChat() 初始化聊天狀態
○ sendMessage() 傳送使用者訊息
● 對話角色：
○ user 提供提示的角色，為 sendMessage() 呼叫的預設角色
○ model 提供回應的角色
訊息區
發送按鈕
輸入區

22. 展示 & 原始碼
StackBlitz GitHub

23. References
● Build AI-Powered Angular Apps with Google Gemini
● Learn Prompting
https://learnprompting.org/zh-tw/docs