llm.pdf

Transcript

1. LLMをつくってみる
2. どうやって作る？
3. Vercel AI SDK https://ai-sdk.dev/
4. Vercel AI SDK https://ai-sdk.dev/docs/foundations/providers-and-models
5. Vercel AI SDK https://ai-sdk.dev/docs/foundations/streaming
6. 3 データ出力を逐次的に、公立よく扱うためのデータ構 3 データ全体（ファイル一個）をそれより細かく分割された単位の連続した 流れを表現する ストリームとは
7. 用意するもの E フロント（React' E ストリーミングで表& E バックエンド（Hono' E AI SDKでモデル選択
8. 用意するもの E フロント（React' E ストリーミングで表& E バックエンド（Hono' E AI SDKでモデル選択 ライブラリ E ai-sdk/openaS E ai-sdk/reac` E aS E zor E aiの依存関係として必要
9. モデルの選択 1 2 3 4 5 6 7 8 9 import from const { createOpenAI } ; model ({ baseURL , 　 apiKey process.env. , }). ( ); "@ai-sdk/openai" "https://models.github.ai/inference" "openai/gpt-4o-mini" = : : createOpenAI chat OPENAI_API_KEY
10. リクエスト 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 import from import from const async const await const return { createOpenAI } ; { streamText } ; model ({ baseURL , 　 apiKey process.env. , }). ( ); app. ( , (c) { { messages } c.req. (); result ({ model, system , messages, }); result. (); }); "@ai-sdk/openai" "ai" "https://models.github.ai/inference" "openai/gpt-4o-mini" "/api/chat" "You are a helpful assistant." = : : => = = : createOpenAI chat post json streamText toDataStream OPENAI_API_KEY
11. リクエスト（Hono） 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 import from import from import from const async const await const return { createOpenAI } ; { stream } ; { streamText } ; model ({ baseURL , 　 apiKey process.env. , }). ( ); app. ( , (c) { { messages } c.req. (); result ({ model, system , messages, }); c. ( , ); (c, (stream) stream. (result. ())); }); "@ai-sdk/openai" "hono/streaming" "ai" "https://models.github.ai/inference" "openai/gpt-4o-mini" "/api/chat" "You are a helpful assistant." "Content-Encoding" "Identity" = : : => = = : => createOpenAI chat post json streamText header stream pipe toDataStream OPENAI_API_KEY
12. 表示側 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 import from export default function const return div div div form input button button form div { useChat } ; () { { messages, input, handleInputChange, handleSubmit } ({ api , }); ( < > {messages. ((message) ( < key={message.id}> {message.role } {message.content} </ > ))} < onSubmit={handleSubmit}> < name="prompt" placeholder="質問を入力してください" value={input} onChange={handleInputChange} /> < type="submit">送信</ > </ > </ > ); } "@ai-sdk/react" "http://localhost:5173/api/chat" "user" "User: " "AI: " Chat useChat map = : => === ? :
13. 紹介
14. LLMはローカルでも動かせる ・モデルをダウンロード ・サーバーを立ち上げる ・https://ollama.com/
15. モデル選択（OpenAi） 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 import from import from import from const async const await const return { createOpenAI } ; { stream } ; { streamText } ; model ({ baseURL , 　 apiKey process.env. , }). ( ); app. ( , (c) { { messages } c.req. (); result ({ model, system , messages, }); c. ( , ); (c, (stream) stream. (result. ())); }); "@ai-sdk/openai" "hono/streaming" "ai" "https://models.github.ai/inference" "openai/gpt-4o-mini" "/api/chat" "You are a helpful assistant." "Content-Encoding" "Identity" = : : => = = : => createOpenAI chat post json streamText header stream pipe toDataStream OPENAI_API_KEY
16. モデル選択（ollama） 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 // import { createOpenAI } from "@ai-sdk/openai"; import from import from import from const async const await const return { createOllama } ; { stream } ; { streamText } ; model ({ baseURL , }). ( ); app. ( , (c) { { messages } c.req. (); result ({ model, system , messages, }); c. ( , ); (c, (stream) stream. (result. ())); }); "ollama-ai-provider" "hono/streaming" "ai" "http://localhost:11434/api" "phi3" "/api/chat" "You are a helpful assistant." "Content-Encoding" "Identity" = : => = = : => createOllama chat post json streamText header stream pipe toDataStream
17. Chrome拡張機能 ・ローカルで動くLLMならChrome拡張機能に組み込める