Blazor WebAssembly で Azure OpenAI Service のフロントエンドを開発

2023/09/18
★★★

Azure OpenAI Service

Azure OpenAI Service を使用すると、OpenAI で提供されているモデルを API 経由で簡単に利用できます。 C# でコードを書く場合、以下のライブラリの選択肢があります。もちろん、HttpClient を使って、REST API へ直接という選択肢もありますが、、、。

これから始める場合は、まず、Azure OpenAI client library for .NET を使用することが良いかもしれません。Semantic Kernel は、できることが多いので、最初は何をどう使ってよいのか混乱するかもしれません。

どちらを使うべきかは、別の機会で書きたいと思います。

Azure OpenAI Service の UI 開発

Azure OpenAI Service は、API による提供なので、UI は、自身で開発する必要があります。OpenAI や Bing Chat みたいな UI を開発したいのであれば、SPA での開発が必要ですね。

となると、React が思い浮かぶと思いますが、Blazor WebAssembly という選択肢もあります。 Blazor WebAssembly を使用すると、SAP を C# で書くことができます。フロントエンドを C# で書ける!!

React で開発したとき、フロントエンドを TypeScript で書いて、バックエンドを C# で書いたことがありますが、だんだんフロントエンドも C# で書けないかな、書くことができたらなと考えるようになります。Blazor WebAssembly では、これが実現できます。理想的ですね。ただし、Blazor WebAssembly なりのお作法は色々と覚える必要はあります。この辺りの苦労は、別で書きたいと思います。

Blazor WebAssembly Chat UI

今回、勉強もかねてフロントエンドに Blazor WebAssembly を使用して、カスタムの API を経由して、Azure OpenAI Service へメッセージの送信を行うサンプルコードを書いてみました。

Blazor WebAssembly Chat UI

Blazor WebAssembly は、あまり触ったことなかったですが、都度都度、調べながら作ることができました。Bing Chat の力も借りました。Bing Chat(GPT-4) の力を借りて、GPT へのアクセスのコードを書きました。

いったん書いてみたというレベルなので、コードの説明は、別の機会にしたいと思いますが、現状のコードは、以下の GitHub リポジトリに公開しています。

一番苦労したのは、Bootstrap まわりだったりもします。このあたりの苦労も別で書きたいです。

以上、参考までに。

コメント (0)

コメントの投稿