Microsoft製の VSCode拡張機能「Vision for Copilot Preview」で GitHub Copilot での画像入力を軽く試す【なんでもCopilot】

この記事は、Adventar の「[なんでもCopilot Advent Calendar 2024](https://adventar.org/calendars/10228)」の 23日目の記事です。

## はじめに
この記事は、以下の公式ブログ記事内で見かけた、Microsoft製の VSCode の拡張機能「Vision for Copilot Preview」に関するものです。
（以下の記事自体の主題は、GitHub Copilot の無償版提供に関するもの）

●Announcing a free GitHub Copilot for VS Code
　https://code.visualstudio.com/blogs/2024/12/18/free-github-copilot

上記の記事内の「A vision for the future」という項目のところで、「Vision for Copilot Preview」の情報を見かけたのので、それを軽く試してみて記事も書いてみました。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/50868/e7ed7686-1064-12ce-6907-11ee8c3b2248.png)

### VSCode拡張機能「Vision for Copilot Preview」
マーケットプレイス上の「Vision for Copilot Preview」のページを見てみます。

●Vision for Copilot Preview - Visual Studio Marketplace
　https://marketplace.visualstudio.com/items?itemName=ms-vscode.vscode-copilot-vision

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/50868/11a03ba3-fb54-66ae-b268-a3439e5b5112.png)

概要説明などが掲載されています。
また、GitHub のリポジトリは以下となるようです。

●microsoft/vscode-copilot-vision: Exploration into leveraging vision capabilities of an LLM
　https://github.com/microsoft/vscode-copilot-vision

#### コマンドなど
VSCode上でも拡張機能のページを見てみました。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/50868/a331e0d8-51e3-1b73-b6d8-2bbc265ffe15.png)

利用可能なコマンドとしては、以下の記載がありました。

- Set a Provider and Model
- Set Current Model's API Key
- Remove Current Model's API Key
- Troubleshoot (screenshots the VS Code window and sends it to chat)

これを見ると、GitHub Copilot が標準で画像入力を受け付けるのではなく、別途自分が用意した APIキーを使って API を利用する構成のようです。

また以下の設定の部分を見ると、モデルのプロバイダーとして現状で選べるのは「OpenAI、Anthropic、Gemini」になるようです。

```
copilot.vision.provider: The selected provider (currently limted to OpenAI, Anthropic, and Gemini).
copilot.vision.model: The model for the currently selected provider.
```

## 実際に使ってみる
実際に試してみます。

### 設定コマンドを実行してみる
まずは、VSCode のコマンドパレットから設定用のコマンドを実行してみます。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/50868/8adc84d6-ea1d-d83e-bd2e-d0f879bc8ef9.png)

#### プロバイダーとモデルの設定
プロバーダーは、記事執筆時点では以下が出てきました。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/50868/962f040a-5551-fee5-e6e4-03d898d2e86e.png)

そして、プロバイダーを選んだ後のモデル設定の画面は以下です。

デフォルトで gpt-4o が設定されているようで、それが入力欄に表示されつつ説明書きにいくつかのモデルが例示されていました。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/50868/5aba5c4b-d5cb-ca2d-bc17-f2f41f8b2a4a.png)

とりあえず、プロバイダー「OpenAI」・モデル「gpt-4o」で設定してみました。

その後に、APIキーの入力を求められたので、自分の OpenAI のアカウントで設定している APIキーを入力しました。

### 画像を入力してみる
それでは以下のキャプチャ画像を入力として用い、VSCode上での GitHub Copilot を用いたお試しをやってみます。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/50868/5e57e533-da6d-034f-0187-b96070917e56.png)

GitHub Copilot Chat を開いて、画像を添付します。
そして、「この画像は何？」というシンプルなプロンプトを入れてみました。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/50868/33de9237-fea3-a0a3-259a-179043f01769.png)

それを送信すると、以下のように「Vision」という名称での回答が返ってきました。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/50868/dc5b0421-4554-f8c9-b816-2f182d63b126.png)

回答で返ってきた内容は、以下のとおりです。

> この画像は、Visual Studio Codeのウェブページのスクリーンショットです。「A vision for the future」というタイトルがあり、GitHub Copilotの新しい機能についてのプレビューが紹介されています。「Vision Copilot Preview extension」という拡張機能をインストールして、GitHub Copilotにスクリーンショットやマークアップに基づくインターフェースの生成を依頼できると説明されています。

画像の説明が行われていることが確認できました。

### 確認をいくつか
上記が API経由で処理されたものか、また「Vision for Copilot Preview」を有効にしていない場合はどうなるかをそれぞれ試してみます。

#### API が利用されたかを確認
[OpenAI API の「Usage: Activity」のページ](https://platform.openai.com/usage/activity)を見てみます。

以下のとおり、記事執筆時点での gpt-4o の API利用のログが残っていました。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/50868/ac6548dc-4b01-336c-3527-f329d00d98e0.png)

#### 「Vision for Copilot Preview」が有効ではない場合
あとは、「Vision for Copilot Preview」を無効化した状態で、どんな回答が返ってくるかを試してみました。

結果は以下のように、GitHub Copilot が回答する形となり、画像内容は回答できないという内容になりました。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/50868/a0643d38-1925-edab-d243-350f2574debf.png)

## その他
### 公式のデモ動画の環境
その他、自分が「Vision for Copilot Preview」の公式情報を見た動画では、以下のような `@vision` という内容を付与してプロンプトを入力しているようでした（こちらは、キャプチャ画像左上のアイコン的に、インサイダービルドで利用しているもののようです ⇒ 自分が今回使っているのは安定版です）。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/50868/e86d3840-6d79-ba97-423a-744515534ba9.png)

### 他の API
プロバイダー・モデルのところで Gemini を使えば、ある程度は画像入力の処理も無料枠でできたりするかも？ 

●Gemini モデル  |  Gemini API  |  Google AI for Developers
　https://ai.google.dev/gemini-api/docs/models/gemini?hl=ja

#### 【2024/12/28追記】
その後、 Gemini 2.0 Flash との組み合わせも試して、以下の記事を書いてみました。

●Microsoft製の「Vision for Copilot Preview」と Gemini 2.0 Flash の組み合わせ：GitHub Copilot での画像入力【GitHub dockyard-2】 - Qiita
　https://qiita.com/youtoy/items/f5fb3e7e937edf94f180