More than 1 year has passed since last update.

Visual Search in Bing Chat で手描き画像をもとに HTML/CSS の生成！（Bard だけじゃなく Bing Chat でもマルチモーダルの画像入力）

Last updated at 2023-07-20Posted at 2023-07-19

はじめに

最近、Googleさんの Bard で使えるようになったことが話題になっていた「マルチモーダルの画像入力」。

●Google製AI「Bard」に画像認識や読み上げ機能 - PC Watch
　https://pc.watch.impress.co.jp/docs/news/1516442.html

それよりも、ずいぶんと前の話になりますが、 ChatGPT の GPT-4 が発表された際にも、「GPT-4 はマルチモーダルに対応していること・そのマルチモーダルを使ったデモ動画」が話題になっていたりもしました（※ 現状の ChatGPT の GPT-4 で、マルチモーダルの画像入力はユーザが使える状態にはなっていないけれど...）。

そのマルチモーダルの画像入力が、Bing Chat でも「Visual Search in Bing Chat」として使えるようになったようです！

今回試したものの概要

今回の「Visual Search in Bing Chat」のお試しの概要を以下に示します。

具体的には、Microsoft の公式デモ動画でも行われていた、手描きの画像をもとに HTML/CSS を生成するというものです。

公式の内容を少し簡素化していたり、変えた部分があったりします（詳細は、以下で書いていきます）。

Bing Chat関連の新しい話題

以下の 7月18日付の Microsoft公式のブログ記事で、Bing Chat Enterprise などに関する発表が行われました。

●Bing Chat Enterprise と Microsoft 365 Copilot の価格を発表 - マイクロソフト公式ブログ
https://blogs.microsoft.com/ja/blog/2023/07/18/furthering-our-ai-ambitions-announcing-bing-chat-enterprise-and-microsoft-365-copilot-pricing/

（今回の本題とはずれますが、記事で紹介されている Bing Chat Enterprise は、プレビュー版が既に使えるようになっているという話があり、これについては実際に有効化して使ってみた話を記事に書いていますので、よろしければご覧ください）

Visual Search in Bing Chat

その中に、Bing Chat で画像を入力に使える機能の「Visual Search in Bing Chat」の話も出ていました。Visual Search in Bing Chat は、デスクトップと Bing モバイルアプリ上ですでに展開が始まっています。

これが、今回の記事のトピックです。

Visual Search in Bing Chat を試す

自分の環境で使えるかを確認してみる

Visual Search in Bing Chat が展開済みとのことで、自分の環境で確認してみました。
確認した環境は、Mac版の Edge と iPhone版の Bing アプリです。

Mac版の Edge

Mac版の Edge を見てみます。
以下のとおり、テキストボックスの右のほうに、画像を入力できるアイコンがありました。

iPhone版の Bing アプリ

iPhone版の Bing アプリを見てみます。
そうすると、Mac版の Edge で確認した時と同様に、画像を入力できるアイコンがありました（※ これをタップすると、カメラが起動しました）。

画像入力を使ってみる

それでは、実際に画像入力を試していきます。

今回参考にした公式デモについて少し補足

冒頭にも書いたとおり、今回試す内容は公式のデモの内容をもとにしています。そこで、公式デモについて少し触れておきます。

公式のデモでは、手描きの画像をもとに、HTML・CSS を生成しています。以下は、その「入力画像＋プロンプト」と、Bing Chat 　が生成した HTML/CSS を表示させた際の様子です。

英語で書かれたプロンプトの指示の概要は以下のようになっていました。

画像をもとに HTML を生成
CSS を適用して cool な見た目に
プロジェクトは AAA・BBB・CCC を設定できる
Priority は high・mediums・low の 3つ

公式の事例を簡素化したバージョンで試してみる

それでは、自分で試してみます。

まず、用意した手描き画像は、以下のとおりです。
紙にペンで描いたものを、スマホで写真に撮りました。それを、Mac版の Edge の Bing Chat で使っています。

そして、プロンプトは以下のとおりです。

「この画像をもとにして HTML のコードを生成してください。CSS をつかってカッコ良い見た目にしてください。「Priority」は「high, medium, low」を選択できるようにしてください。」

そして、Bing Chat のレスポンスを抜粋して掲載すると、このような感じです。

上記のキャプチャ画像では部分的にしか見えない、Bing Chat によって生成されたコード全体は以下のとおりです。

<html>
<head>
<style>
  body {
    font-family: Arial, sans-serif;
    background-color: #f0f0f0;
  }
  h1 {
    text-align: center;
    color: #333333;
  }
  form {
    width: 500px;
    margin: 0 auto;
    padding: 20px;
    border: 1px solid #cccccc;
    background-color: #ffffff;
  }
  label {
    display: block;
    margin-bottom: 10px;
  }
  input, select, textarea {
    width: 100%;
    box-sizing: border-box;
    font-size: 16px;
    padding: 10px;
    border: 1px solid #cccccc;
  }
  button {
    display: inline-block;
    width: 100px;
    margin-right: 10px;
    padding: 10px;
    font-size: 16px;
    color: #ffffff;
    background-color: #333333;
    border: none;
    cursor: pointer;
  }
</style>
</head>
<body>
<h1>Project Management</h1>
<form>
  <label for="project-name">Project Name</label>
  <input type="text" id="project-name" name="project-name" required>
  
  <label for="priority">Priority</label>
  <select id="priority" name="priority">
    <option value="high">High</option>
    <option value="medium">Medium</option>
    <option value="low">Low</option>
  </select>

  <label for="description">Description</label>
  <textarea id="description" name="description" rows="5"></textarea>

  <button type="submit">Submit</button>
  <button type="reset">Clear</button>
</form>
</body>
</html>