Upgrade to Pro — share decks privately, control downloads, hide ads and more …

Semantic Kernel を使って ChatGPT Plugins をアプリに組み込んでみよう

Kazuki
June 01, 2023

Semantic Kernel を使って ChatGPT Plugins をアプリに組み込んでみよう

以下のイベントの発表資料です。
https://dotnet-communities.connpass.com/event/277869/

Kazuki

June 01, 2023
Tweet

Other Decks in Technology

Transcript

  1. Semantic Kernel を使って ChatGPT plugins を
    自分のアプリに組み込む方法
    日本マイクロソフト
    シニア クラウドソリューション アーキテクト エンジニアリング
    大田 一希

    View Slide

  2. 自己紹介
    日本マイクロソフト
    クラウド ソリューション アーキテクト エンジニアリング
    大田 一希 (Kazuki Ota)
    好きな技術:C# (20 年以上ほぼ一筋)、Azure PaaS 系サービス
    苦手な言語:変数に型のない言語全般
    SNS や Blog:
    Twitter: @okazuki (https://twitter.com/okazuki)
    GitHub: @runceel (https://github.com/runceel)
    Zenn: https://zenn.dev/okazuki
    Qiita: https://qiita.com/okazuki
    Hatena: https://blog.okazuki.jp
    趣味:プログラミング、ゲーム(スマブラ: 2495時間, モンハン 1785時間、ティアキン 80時間)
    好きな食べ物:🍖🍣
    出身地:広島

    View Slide

  3. もくじ
     Semantic Kernel の全体像をざっくり
     Semantic Kernel で ChatGPT Plugins を呼ぶ方法
     まとめ

    View Slide

  4. Semantic Kernel の全体像をざっくり

    View Slide

  5. Semantic Kernel とは
    • 全体概要については以下の動画の 2:19:00 あたりから始まる、ちょまどさん
    の「Azure OpenAI Service と OpenAI (本家) + Semantic Kernel (LLM 用
    SDK) 入門セッション (C#)」見てください。
    • JAZUG: Global Azure 2023 [Room C+D]
    https://www.youtube.com/watch?v=LQhihic-PCg

    View Slide

  6. Semantic Kernel とは
    LLM を使うアプリを作る際に必要な機能の詰め合わせ
    ◼ コア機能 (a.k.a 分類に困った機能)
    • プロンプト生成のためのテンプレート エンジン
    • 変数の埋め込み、関数の呼び出し結果の埋め込みが可能
    • プラグイン機能 (少し前まで Skill という名前でした)
    • 組み込みのプラグイン (MSGraph、Bing、OpenAPI、etc...)
    • 自作のプロンプトや C# の関数で作るプラグイン
    • 関数のオーケストレーション機能
    ◼ Connectors
    • 外部サービスとの接続機能
    ◼ Memories
    • データの永続化・検索機能
    ◼ Planner
    • やりたいことを達成するための関数を自動で選んでくれる機能

    View Slide

  7. Semantic Kernel 全体像
    Kernel
    KernelBuilder
    Plugin
    関数
    関数
    関数
    関数
    Plugin
    関数
    関数
    関数
    関数
    自作Plugin
    関数
    関数
    関数
    関数
    Memories
    Azure Cognitive Search、Sqlite、
    Qdrant、PostgreSQL、Pinecone、
    CosmosDB、etc
    外部サービス
    組み込みPlugin
    テキスト、ドキュメント、MS Graph API、
    OpenAPI、ChatGPT Plugins、etc
    Connector
    生成 データ保存先
    使うものを登録
    AI サービス
    テキスト、チャット、画像
    Embedding
    Azure OpenAI Service
    OpenAI
    Others...
    Plugins
    使用するAIサービス
    使う
    使う
    セットアップが終わった Kernel に対して
    以下のようなことが出来る
    • 実行したい関数を選んで実行
    • 実行したい複数の関数をつなげて実行
    • AI サービスを直接呼び出す
    • Memory にデータを登録
    • Memory からデータを取得

    View Slide

  8. Semantic Kernel 全体像
    Kernel
    KernelBuilder
    Plugin
    関数
    関数
    関数
    関数
    Plugin
    関数
    関数
    関数
    関数
    自作Plugin
    関数
    関数
    関数
    関数
    Memory
    Azure Cognitive Search、Sqlite、
    Qdrant、PostgreSQL、Pinecone、
    CosmosDB、etc
    Planner
    Plan
    外部サービス
    組み込みPlugin
    テキスト、ドキュメント、MS Graph API、
    OpenAPI、ChatGPT Plugins、etc
    Connector
    生成 データ保存先
    使うものを登録
    Pluginの
    関数一覧から
    最適なものを
    AIを使って選択
    AI サービス
    テキスト、チャット、画像
    Embedding
    Azure OpenAI Service
    OpenAI
    Others...
    作成
    Plan 達成に
    必要な関数を参照
    Plugins
    使用するAIサービス
    使う
    使う

    View Slide

  9. Semantic Kernel 全体像
    Kernel
    KernelBuilder
    Plugin
    関数
    関数
    関数
    関数
    Plugin
    関数
    関数
    関数
    関数
    自作Plugin
    関数
    関数
    関数
    関数
    Memory
    Azure Cognitive Search、Sqlite、
    Qdrant、PostgreSQL、Pinecone、
    CosmosDB、etc
    Planner
    Plan
    外部サービス
    組み込みPlugin
    テキスト、ドキュメント、MS Graph API、
    OpenAPI、ChatGPT Plugins、etc
    Connector
    生成 データ保存先
    使うものを登録
    Pluginの
    関数一覧から
    最適なものを
    AIを使って選択
    AI サービス
    テキスト、チャット、画像
    Embedding
    Azure OpenAI Service
    OpenAI
    Others...
    作成
    Plan 達成に
    必要な関数を参照
    Plugins
    使用するAIサービス
    使う
    使う
    今日やりたいことが
    組み込みである!

    View Slide

  10. 作ってみました
    自作 TODO ChatGPT Plugins を組み込んだアプリのデモ
    runceel/ChatGPTPlugins-SemanticKernel (github.com)

    View Slide

  11. 頑張った点
     ChatGPT Plugins を作る
     参考: Introduction - OpenAI API
     作った Plugin の説明文を丁寧に記載する
     正しい Plugin が選択されるようにプロンプトを組み立てる
     正しい回答が返ってくるようにプロンプトを組み立てる

    View Slide

  12. ポイント1: ChatGPT Plugins のマニフェスト
    Description に使い方をきちんと書かないとダメ
    openapi: 3.0.1 info: title: TodoPlugin version: '1.0' servers: - url: https://localhost:7062 paths: /todos: get: tags: - TodoPlugin description: 全てのTODOを返します。 operationId: getTodos responses: '200': description: O
    {
    "schema_version": "v1",
    "name_for_human": "TODO リスト (no auth)",
    "name_for_model": "TODO list",
    "description_for_human": "TODOリストの表示と追加が出来ます。",
    "description_for_model": "TODOリストの管理が出来るプラグインです。TODOの一覧表示と追加が出来ます。",
    "auth": {
    "type": "none"
    },
    "api": {
    "type": "openapi",
    "url": "https://localhost:7062/swagger/v1/swagger.yaml"
    },
    "logo_url": "http://localhost:5003/logo.png",
    "contact_email": "[email protected]",
    "legal_info_url": "http://example.com/legal"
    }
    name_for_model と description_for_model を見て
    AI が使うプラグインを選ぶ

    View Slide

  13. ポイント2: OpenAPI の定義
    Description に使い方をきちんと書かないとダメ
    openapi: 3.0.1 info: title: TodoPlugin version: '1.0' servers: - url: https://localhost:7062 paths: /todos: get: tags: - TodoPlugin description: 全てのTODOを返します。 operationId: getTodos responses: '200': description: O
    openapi: 3.0.1
    info:
    title: TodoPlugin
    version: '1.0'
    servers:
    - url: https://localhost:7062
    paths:
    /todos:
    get:
    tags:
    - TodoPlugin
    description: 全てのTODOを返します。
    operationId: getTodos
    responses:
    '200':
    description: OK
    content:
    application/json:
    schema:
    type: array
    items:
    $ref: '#/components/schemas/TodoItem'
    post:
    tags:
    - TodoPlugin
    description: TODOを作成します。
    operationId: createTodo
    requestBody:
    description: 'TODO Item. { "text": "Todo item title" }'
    content:
    application/json:
    schema:
    $ref: '#/components/schemas/TodoItem'
    required: true
    responses:
    '200':
    description: OK
    components:
    schemas:
    TodoItem:
    required:
    - Text
    type: object
    properties:
    text:
    minLength: 1
    type: string
    description: TODO のタイトル
    additionalProperties: false
    description: TODO Item
    Description を見て AI が呼び出すべき
    処理と渡すべきパラメーターを決める

    View Slide

  14. Kernel への ChatGPT Plugins の読み込み
    IKernel の ImportChatGptPluginSkillFromUrlAsync メソッドで Kernel に登録可能
    await kernel.ImportChatGptPluginSkillFromUrlAsync(
    "Todos",
    new Uri("https://localhost:7062/.well-known/ai-plugin.json"),
    new HttpClient());
    ai-plugins.json と OpenAPI の定義を読み込んで
    Semantic Kernel の Plugins として登録

    View Slide

  15. プラグインを使ったチャットを成立させる処理の流れ
    1. ユーザーの入力メッセージが何をしたいのか意図を確認する
    2. 意図を元に適切なプラグインがあるか ActionPlanner を使って探す
    3. 適切なプラグインがある場合は実行をする
    4. プラグインを実行した結果を含めたプロンプトを使って回答を生成

    View Slide

  16. プラグインを使うためのフロー
    1. ユーザーの入力メッセージが何をしたいのか意図を確認する
    プロンプト力が求められる…

    View Slide

  17. プラグインを使うためのフロー
    2. 意図を元に適切なプラグインがあるか ActionPlanner を使って探す
    3. 適切なプラグインがある場合は実行をする


    View Slide

  18. プラグインを使うためのフロー
    4. プラグインを実行した結果を含めて回答を生成
    プロンプト力が求められる…
    この部分で 2, 3 の処理を呼び出し結果を埋め込んでいる

    View Slide

  19. 苦労した点、もっと考えないといけない点
    苦労した点
     Planner が呼び出すべきプラグインを正しく選定出来るような文章を組むのが大変
     Planner が内部で使用しているプロンプトが英語なので英語になりがち
     Planner のプロンプトは差し替え可能なので日本語を使ってくれる Planner はプロンプト力があれば作れる
    もっと考えないといけない点
     ChatGPT Plugins を呼ぶ場合はユーザーの明示的な同意が必要なようにするべき
     呼ぶ前にユーザーがボタンを押すなどの明示的なアクションが必要
     特に更新系の場合はユーザーの明示的なアクションがないと怖くて使えない
     Semantic Kernel の Copilot Chat というサンプル アプリは確認プロセスを実装しているので参考になる
    semantic-kernel/samples/apps/copilot-chat-app at main
     チャット履歴が長くなってくると思った通りに動かなくなりがち…
     例: プラグインから取得した情報とチャットの履歴の間で矛盾が起きたら間違う可能性が上がる
     ユーザー認証はどうする?

    View Slide

  20. まとめ
     簡単な ChatGPT Plugins を作って Semantic Kernel で使ってみた
     プロンプト力が無いと思った結果を出すのが大変…
     GPT 4 で試してみたい
     ある程度やることを絞らないと使い物になるものを作るのは難しそう…
     AI にユーザーがやりたいことを要約してもらってから処理をするのが良さそう
     1 回のチャットのやり取りで N 回 AI に処理してもらう
     ユーザーが結構待たされることになるので UI での工夫が必要になりそう
     「考え中…」の表示やストリーミングに対応して生成結果をパラパラと表示する
     Semantic Kernel の Copilot Chat サンプルが参考になる
     semantic-kernel/samples/apps/copilot-chat-app at main

    View Slide

  21. 参考: Copilot Chat の画面
     a

    View Slide

  22. © Copyright Microsoft Corporation. All rights reserved.

    View Slide