GoogleCloudコンソールのVertex AIチャットをstreamlitで実装したら事業メンバーとの検討が急に進んだ話

# はじめに

生成AIを活用したチャットサービスを検討する機会があったのですが、その際に開発側も事業側も一緒になって生成AIを実際に触りながら検討しようという初期フェーズで起こったことと感じたことをまとめたものです。

## 起こったこと

GoogleCloudのコンソールでは、Vertex AIのメニューからチャットが利用できるようになっています。本件ではGeminiの利用とGeminiが持つグラウンディング機能を活用したものを想定しており、それらもちゃんと設定できるようになっているので、 
**「何も作らなくてもすぐ動きを試せますよ！」** 
と利用方法を案内したのですが、事業部メンバーにはあまり利用してもらえませんでした。

GoogleCloudを利用している人であれば見慣れたこの画面です。


![vertexaistudio.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3489259/47c42d5e-79bf-3ec9-b1c3-3d973b4c7b6b.png)

<!--
<img src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3489259/47c42d5e-79bf-3ec9-b1c3-3d973b4c7b6b.png" width=50%>
-->

そこで、ほぼ同じ内容のチャットアプリをUIコンポーネントが整っているstreamlitで実装してGoogleCloud上にデプロイして展開したところ一転して事業メンバーも触っていただけるようになり検討が急速に進みました。


![streamlit.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3489259/7424ff28-cbd3-7c8d-a6fa-144b1fc65f52.png)


<!--
<img src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3489259/7424ff28-cbd3-7c8d-a6fa-144b1fc65f52.png" width=50%>
-->

## 感じたこと

GoogleCloudコンソールの方が開発者からするとよっぽど使いやすいのですが、ちょっとした見た目や操作感であったり、使う人が誰かとか目的で評価や印象ががらっと変わってしまうということをまさに体験し、単にUIに限らずUXなどデザインの大切さというものを改めて感じたということです。

弊社の開発体制ではデザイナーも含めてサービスデザインから行うことが多くなっており、相手が何を課題と感じるのか、何がその人に刺さるのかというのをサービスを利用するユーザのみに限らず開発に関わる様々な関係部署の方とのやりとりの中でも強く意識するようになりました。

https://note.com/kddi_agile/n/na12aa05207b5

特に生成AIを活用したサービスの場合、細かく仕様を決めても生成AI次第なところがあり、どう活用するのか、プロンプトを与えるのかというところはアイデア勝負なところが大きいと感じています。そのため、よりお客様に近い事業メンバーなどと一緒になって触ったりアイデアを出しながら開発できるような開発環境作りも重要だと考えています。


# 【参考】Streamlit版の構築

今回作ったチャットアプリは最初の説明の通り、GoogleCloudコンソールのVertexAIチャットでできることを実装しただけのものではありますが、認証の追加やGoogleCloudへのデプロイなど事業メンバーが触れるように最低限の提供に必要な部分の一通りを備えており、いくつかポイントを説明します。

まとめたレポジトリはこちらで公開しているので似たような話があればご活用ください。細かい部分はレポジトリ内のREADMEにも記載しています。

https://github.com/k1life/streamlit-vertex-ai

<!--
今回はあくまでもVertex AIのチャット機能を実装することを目的としていますのでLangChain等を使った本格的な開発には触れません。

また、そもそもGoogle AI Studioでもよかったんじゃない？となりますが、今回利用したかったグラウンディング機能は非構造データソースを利用したパターンであったため、こちらも対象外としました。
-->


## 実装のポイント

- Geminiのグラウンディング機能の使い方
- 認証の追加
- GoogleCloudへのデプロイ

### Geminiのグラウンディング機能の使い方

今回利用したかったグラウンディング機能はデータソースを利用するパターンになります。使い方について以下のまとめがわかりやすいです。

https://iret.media/100974

上記記事でも記載されている通りデータソースの作成にあたって注意する点は以下です

- 非構造で作成したデータソースのみ利用できる
- agent builderでデータソースだけ作成して指定してもNGで、そのデータソースを利用する検索アプリを作成してそのIDを指定する必要があります
- 検索アプリを作成する場合にEnterpriseエディションを有効にする

グラウンディング機能の実装方法は公式も参考にください。

https://cloud.google.com/vertex-ai/generative-ai/docs/model-reference/grounding?hl=ja



### 認証の追加

クラウド上にデプロイして展開するにあたって事業メンバーに指摘をうけそうだったのであわせて対応しました。展開するクラウド環境によって色々な方法があるかと思いますが、簡易でよかったのとクラウド環境との依存が少ないものが良かったので、streamlitで提供されている`streamlit_authenticator`で実装しています。

https://book.st-hakky.com/data-science/data-science-streamlit-basic-auth/

### GoogleCloudへのデプロイ

簡単な方法としては、Google App Engine（以下、GAE）かCloud runかと思いましたが今回はGAEを利用しました。注意点は以下です。

- streamlitはwebsocketが利用されるためGAEにデプロイする場合はflexが必要です
- flex環境は0スケールしないので固定で１台以上の費用がかかるので注意

詳細はこちらの記事がわかりやすいです。

https://sanshonoki.hatenablog.com/entry/2024/06/30/110626

# おわりに

今回は生成AIアプリ開発の検討フェーズにおける事業メンバーとの連携で起こったこと、感じたことをまとめました。特にUXという観点はサービスを利用するお客様についてだけでなく、サービス検討時には検討に関わる様々な関係部署のメンバーに対してもこの観点を意識することで開発全体をよりスムーズに進められると思います。

本件現在はLangChainを活用したアプリケーションの開発を行っています。Geminiのグラウンディング機能はプレビュー扱いになっていることもあり、LangChainにはまだ実装されていないので、LangChainからうまく使う方法がわからず困っています。。何かよい方法があったら教えてください。

Geminiのグラウンディング機能は、先日のGenerative AI Summit Tokyo '24 Fallなどでも紹介されていますが、根拠情報からしか回答を返却しなくするようなHigh Fidelity (高信頼性) モードなどが公開される予定で今後の機能成長に非常に期待しています。

https://sreake.com/blog/generative-ai-summit-tokyo-24-fall-2/#Google_Search_%E3%81%A7%E3%83%8F%E3%83%AB%E3%82%B7%E3%83%8D%E3%83%BC%E3%82%B7%E3%83%A7%E3%83%B3%E3%81%AB%E7%AB%8B%E3%81%A1%E5%90%91%E3%81%8B%E3%81%88%EF%BC%81%E3%80%9CGemini_%E3%81%AE%E3%82%B0%E3%83%A9%E3%82%A6%E3%83%B3%E3%83%87%E3%82%A3%E3%83%B3%E3%82%B0%E6%A9%9F%E8%83%BD%E5%BE%B9%E5%BA%95%E6%B4%BB%E7%94%A8