この記事は、「GitHub dockyard Advent Calendar 2024」の 22日目に、後から記事を書いて登録したものです。ちなみに、このカレンダーに登録した記事としては 2つ目で、1つ目に登録した記事では以下の内容を書いていました。

●GitHub Copilot の「Copilot Edits」で直接の部分的なコード書きかえを行ってもらう（機能の有効化の話も）【GitHub dockyard】 - Qiita
　https://qiita.com/youtoy/items/5249b5f7a1acabda5f01

記事執筆時点では 12/28 になっているのですが、後から記事を書いて過去の日付で登録してみました。

はじめに

今回の内容は、以下の記事を書く際に扱っていた「Vision for Copilot Preview」の話です。

●Microsoft製の VSCode拡張機能「Vision for Copilot Preview」で GitHub Copilot での画像入力を軽く試す【なんでもCopilot】 - Qiita
　https://qiita.com/youtoy/items/76a198c391cb79a05299

上記の記事で「Vision for Copilot Preview」を試した時は、GPT-4o の API を組み合わせて使っていました。

今回の記事の内容

今回の記事の内容は、以下の記事で扱った「Gemini 2.0 Flash」と上記の「Vision for Copilot Preview」が絡む話です。

●第3弾（Gemini 2.0 Flash編）：AIは「からあげ」と「とり天」を見分けられるのか【からあげ帝国-2】 - Qiita
　https://qiita.com/youtoy/items/389c6ef7f284017ce35a

上で登場していた Vision for Copilot Preview は、VSCode での GitHub Copilot で画像入力に対応するというものです。そこでは、生成AI を API経由で利用して、画像の入力に対応できるようにする形なのですが、上で紹介した記事を書いた際には GPT-4o を使いました。

今回の記事では、それを Gemini 2.0 Flash にしてみます。

実際に試していく

それでは、Vision for Copilot Preview ＋ Gemini 2.0 Flash の組み合わせを試していきます。

Vision for Copilot Preview自体の話は、前に書いた記事をご覧ください。

Vision for Copilot Preview の設定

それでは、Vision for Copilot Preview で Gemini 2.0 Flash を使うための設定を行います。コマンドパレットから、プロバイダー・モデルの設定を進めていきます。

具体的には、前の記事で書いた以下の部分の内容になります。

ここで、以下のプロバイダーの選択では「Gemini」を選びます。さらにモデルの指定では gemini-2.0-flash-exp を指定します。

それらを進めることで、設定が完了しました。

念のため、VSCode の設定用の JSON を見てみると、以下の画像のように Gemini 2.0 Flash を使うための設定が書きこまれていることが確認できました。

Vision for Copilot Preview ＋ Gemini 2.0 Flash を使ってみる

それでは、### Vision for Copilot Preview ＋ Gemini 2.0 Flash の組み合わせで試してみます。

画像入力でのお試し1

画像入力で、Qiita の記事を書くために用意した以下の画像を使ってみました。

プロンプトは「@vision この画面は何で、何が書いてある？それと、あなたが誰かも、最後の1文で教えて。」という内容で、その回答は以下となりました。

この画面は、LINEアプリのチャット画面です。画面上部には「L Bot Notify のテスト」と表示されており、これはLINE Bot Notifyのテスト用チャットであることがわかります。チャット履歴には、LINE Bot Notifyからのメッセージや、Channel ID・Channel secretを使って送られたメッセージ、Node-REDからの送信メッセージなどが表示されています。私は、この画像と文章を解析できるAIです。

画像の内容や、画像内の文字情報を読み取って作られた回答が返ってきました。

画像入力でのお試し2

さらに「@vision この見た目をHTML＋CSSで作って」というプロンプトも試してみました。

生成された HTML＋CSS の表示結果は以下のとおりです。

ざっくりと、元のイメージに近い感じの内容を出力してくれています。

上記のソースコードとなる HTML・CSS は以下のとおりです。

<!DOCTYPE html>
<html lang="ja">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>LINE Chat UI</title>
    <link rel="stylesheet" href="style.css">
</head>
<body>
    <div class="container">
      <header>
        <div class="header-left">
          <div class="back-button"><</div>
          <div class="star">★</div>
          <div class="title">L Bot Notify のテスト</div>
        </div>
        <div class="header-right">
          <div class="search-button">Q</div>
          <div class="list-button">目</div>
          <div class="menu-button">=</div>
        </div>
      </header>
        <div class="chat-area">
            <div class="date-separator">昨日</div>
            <div class="chat-message">
                <div class="icon">👤</div>
                <div class="message-bubble">
                   LINE Bot Notify!
                  <div class="time">23:19</div>
                </div>
            </div>
             <div class="chat-message">
                <div class="icon">👤</div>
                <div class="message-bubble">
                   LINE Bot Notify からのプッシュ!
                  <div class="time">23:20</div>
                </div>
            </div>
            <div class="date-separator">今日</div>
              <div class="chat-message">
                <div class="icon">👤</div>
                <div class="message-bubble">
                   Channel ID ・ Channel secret で <br> プッシュ!
                  <div class="time">12:53</div>
                </div>
            </div>
        </div>
    </div>
</body>
</html>

body {
    font-family: sans-serif;
    margin: 0;
    background-color: #e8f0ff;
    color: #333;
}

.container {
  max-width: 600px; /* Adjust max width for responsiveness */
  margin: 0 auto;
  padding: 10px;
}

header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 10px;
  background-color: #fff;
  border-bottom: 1px solid #ccc;
}

.header-left{
  display: flex;
  align-items: center;
}

.header-left .back-button{
  font-size: 1.5em;
  margin-right: 5px;
}
.header-left .star{
  margin-right: 5px;
}
.header-right{
  display: flex;
  font-size: 1.5em;
}

.header-right div {
  margin-left: 10px;
}

.chat-area {
    padding: 10px;
}

.date-separator {
    text-align: center;
    margin: 20px 0 10px;
    font-size: 0.9em;
    color: #777;
    background-color: #fff;
    padding: 5px 10px;
    border-radius: 15px;
    display: inline-block;
}

.chat-message {
    display: flex;
    margin-bottom: 10px;
    align-items: flex-start;
}

.icon {
    width: 30px;
    height: 30px;
    background-color: #cce0ff;
    border-radius: 50%;
    text-align: center;
    line-height: 30px;
    font-size: 1.2em;
    margin-right: 10px;
    color: #99b3e6;
}

.message-bubble {
    background-color: #fff;
    border-radius: 20px;
    padding: 10px 15px;
    position: relative;
    max-width: 80%; /* Limit bubble width */
    display: inline-block;
}

.time {
    font-size: 0.75em;
    color: #999;
    text-align: right;
     margin-top: 5px;
    margin-left: 5px;
}

上記の内容以外に、以下のような説明も出力されていました。

Explanation:

HTML:
The container div provides a wrapper with max width and margin.
The header div creates the top part, and inside we have the header-left and header-right for content alignment.
The chat-area div holds the chat messages.
date-separator is for the "昨日" and "今日" labels.
Each chat-message contains a user icon and message-bubble.
The time is placed inside the bubble.

CSS:
The body styling sets basic font, removes margin, and gives a light blue background color.
The container controls width, and margin of the entire chat.
The header styling with flexbox aligns and style the content.
The header-left, header-right is for content alignment
The chat-area gives some padding.
The date-separator is styled to center and style the date.
The chat-message uses display: flex to position the icon and message.
The icon is styled as a circular placeholder.
The message-bubble is styled with rounded corners and white background, display: inline-block allows the bubble to resize according to content.
The time styling provides correct size, color and position.

How to Run:
Save the HTML code as index.html.
Save the CSS code as style.css in the same folder as index.html.
Open index.html in your web browser.

Feel free to adjust the styling (e.g., colors, fonts, sizes) to better match your exact requirements. If you have other requests or modifications, just ask!

2つのお試しをやってみましたが、無事に Vision for Copilot Preview と Gemini 2.0 Flash の組み合わせを試すことができました。