gemini-2.0-flash-expでMultimodal Live APIを使ってみようとしたらAPIが2つもありハマった話


1週間以上迷子になる羽目になりました。

## サンプルを参考に実装してみるも上手くいかない

2024年12月に「gemini-2.0-flash-exp」が提供され、Multimodal Live APIが使用できるとの記事が公開されました。
https://developers.googleblog.com/en/the-next-chapter-of-the-gemini-era-for-developers/

どんなことができるかは、クイックデモがあるのでご覧いただけたらと思います。
https://www.youtube.com/watch?v=9hE5-98ZeCg

記事にもリンクがあるのですが、Githubに[サンプルコード](https://github.com/google-gemini/multimodal-live-api-web-console)がプッシュされておりサクッと触れるようになっています。このままでも良いですが、我々の方でカスタマイズしたものを作ってみたかったので、真似て実装をしていきましたが、動作が安定しませんでした。（公式のサンプルでも同じ現象がおきました）

起きた事象はこちら:

| パターン | テキスト入力 | 音声入力 | 画面共有 | ステータス      |
| ---- | ------ | ---- | ---- | ---------- |
| 1    | する     | しない  | なし   | 安定         |
| 2    | しない    | する   | なし   | 不安定（切断される） |
| 3    | する     | しない  | する   | 不安定（切断される） |
| 4    | しない    | する   | する   | 不安定（切断される） |

細かな話をしますと、入力の送信には2パターンの型が存在します。テキストを送信するための`client_content` と、音声と画像（画面共有）を送信する `realtime_input` です。

※補足: 画面共有の実態は、任意のタイミングによるスクリーンショットをAIに送っており、リアルタイムに動画をストリーミングしているわけではありません。

`realtime_input` が実行されていると、なぜか急に切断されるという現象に当たり、画面共有ありきで実装を考えていた我々は「試用だし、こんなものかもしれないね」と現状確認もできたところで終えようとしてました。

## Geminiを使うAPIが2つ存在することに気づく

最近出たばかりのものもあり、情報は少ないながらも、Issueくらい誰か立ててもおかしくないなと探し回っていると、ある記事で使っているURLが違うことに気づきます。

[Node.js から Gemini API in Vertex AI の Multimodal Live API にアクセスする](https://zenn.dev/k2wanko/articles/5deaca0fda911c)

```
サンプルにあったURL:
`wss://generativelanguage.googleapis.com/ws/google.ai.generativelanguage.v1alpha.GenerativeService.BidiGenerateContent`

記事で使用しているURL:
`wss://us-central1-aiplatform.googleapis.com/ws/google.cloud.aiplatform.v1beta1.LlmBidiService/BidiGenerateContent`

```

※サンプルにあったURLの記載箇所: https://github.com/google-gemini/multimodal-live-api-web-console/blob/main/src/App.tsx#L31

ご存知でしたか？Geminiを使用するAPIは2つあります。

1つは、「Google AI Studio」 で Gemini API キーを取得し呼び出す方法です。API キーをURLクエリとして送信することで認証します。

```sh
curl -X POST \
	"https://generativelanguage.googleapis.com/v1beta/models/gemini-1.5-flash:generateContent?key=${GEMINI_API_KEY}" \
    -H 'Content-Type: application/json' \
    -d '{
		"contents": [{
			"parts":[{"text": "Write a story about a magic backpack."}]
		}]
	 }'
```

もう1つは、「Vertex AI」 で Gemini API を呼び出す方法です。`gcloud auth` を使用して、一時発行したトークンをBearer認証に使用します。

```sh
curl -X POST \
	"https://${REGION}-aiplatform.googleapis.com/v1/projects/${PROJECT_ID}/locations/${REGION}/publishers/google/models/gemini-1.5-flash-002:generateContent"
	-H "Authorization: Bearer $(gcloud auth print-access-token)" \
	-H "Content-Type: application/json" \
	-d '{
		"contents": {
			"role": "user",
			"parts": [
				{ "text": "What\'s a good name for a flower shop that specializes in selling bouquets of dried flowers?" }
			]
		}
	}'
```

### (蛇足)なおこれからは...

これらについては既に統合の流れがGoogleに起きており、しばらくしたら統合されるのだと思います。
正式な発表はありませんが、ドキュメントに「Google Gen AI SDKs」というのが立ち上がっており、統合インターフェースを提供すると記載されています。

> Google Gen AI SDK は、Gemini Developer API と Gemini Enterprise API（Vertex AI）の両方を通じて Gemini 2.0 への統合インターフェースを提供します。
https://ai.google.dev/gemini-api/docs/sdks?hl=ja


また見慣れない単語がページに載っていますが...

Gemini Developer APIとは Google AI で提供しているAPIのことであり（ https://ai.google.dev/gemini-api/docs?hl=ja ）、Gemini Enterprise APIとは、カッコでVertex AIのことを示しているように書かれていることから、Vertex AIで提供しているAPIのことかもしれないが、具体的にどれのことを言っているか定かでないです。

## Multimodal Live API のドキュメントも2つある

:::note warn
Googleのドキュメントは英語のページを自動的に全て日本語に翻訳してくれているわけではないです。「このページは Cloud Translation API によって翻訳されました。」とページ上部に書かれているので、英語ソースのドキュメント全てが日本語でも読めるようになっていると思ってしまいがちですが、英語ページと日本語ページで展開されているドキュメントには実は差があります（サイドバーのページ数が明らかに違う）。なので、英語ページを参照するよう気をつけましょう。
:::

似たようなページが2つある...

Google AIの方のドキュメント: https://ai.google.dev/api/multimodal-live
Vertex AIの方のドキュメント: https://cloud.google.com/vertex-ai/generative-ai/docs/model-reference/multimodal-live

似たページ構成になっているが、よくみるとデモのリンクが違う...

Google AIの方: https://github.com/google-gemini/multimodal-live-api-web-console
![スクリーンショット 2025-01-24 15.26.19.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/128655/60550b51-f7d5-2474-690d-9c72047d3960.png)


Vertex AIの方: https://github.com/GoogleCloudPlatform/generative-ai/tree/main/gemini/multimodal-live-api/websocket-demo-app
![スクリーンショット 2025-01-24 15.25.46.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/128655/86cca545-9a5d-fe49-6a75-fcfd2a904c89.png)



## Vertex AI 側のやり方で試してみる

Vertex AIの方のデモコードは、生のJSで書かれているものの、あらかた一緒のコードであることは読み取れたのと、試しにローカルで検証してみたところ接続が切断される現象は起きなかったので、こちらのURLで実装しなおしてみたところ、自分たちのコードでも切断されることがなくなりました。

おわり