昨日、マイクロソフト主催のMicrosoft Inspireにて、Bing Chat の更新内容が発表されました。
その中でも、特に Bing Chat の「Visual Search in Chat」の機能が気になったので、早速試してみました。
Bing Chat 新機能の概要
Visual Search in Chatは、画像から文脈を解釈し答えを返してくれる生成AI機能です。
旅行先で見かけた建築物について知りたいときや、冷蔵庫の中身からレシピを考えたいときなど、
Bing Chatに画像をアップロードするだけで、ウェブの知識を活用して回答される、とのことです。
バックエンドで動くモデルは、OpenAIのGPT-4モデルのようです。
デモでは、手書きの絵からHTML/CSSのコードを生成する例が紹介されました。
このデモで使われていたのは、英語で書かれたプロンプトや画面イメージでした。
これが日本語でも使えたら非常に嬉しいです。
今回は、このVisual Search in Chatを使って、画面イメージから、HTML/CSSを生成してみます。
画面イメージから、HTML/CSSを生成してみる
それでは、実際に試してみましょう。
画像ファイルをアップロードしてプロンプトで指示する
まずは、Bing Chatに画面イメージを渡し、要件とコードを生成してもらいたい旨を伝えます。
Bing Chatに渡したプロンプトと画面イメージは以下の通りです。
入力
プロンプト
この画像を基にHTMLコードを生成してください。
# 概要
この画像は、TODO管理システムの入力画面のイメージです。
# デザイン
- CSSを利用して、全体をモダンなイメージにする。
- フォームの幅は、最大900pxとする。
- ただし、フォームの外側に枠を設けて、それに最大幅を指定する
画面イメージ
結果
以下のように、Bing Chatから回答が返ってきます。
得られた結果のHTMLは、以下のようにブラウザで表示されます。
簡単なプロンプトと画面イメージを渡しただけで、ここまでできるのは驚きです。
「詳細」のフィールドも、他のフィールドと違い、複数行入力ができるテキストエリアとして、出力してくれています。
ただ、「キャンセルボタン」が不足していますね。 これは修正が必要です。
レイアウトを修正させる
入力
プロンプト
以下の点を修正してください。 - 「キャンセル」ボタンがないため、追加する。 - ボタンは横に並べる。
結果
キャンセルボタンは、自動的に赤にしてくれました。
ひとまず、見た目は、元の指示したイメージに近い状態になりましたね。
仕様／デザインをカスタマイズする
次に、入力フィールドの仕様を追加したり、デザインもカスタマイズしてみます。
入力
プロンプト
フォームの情報を追加で指定します。 再度、HTMLコードを生成してください。 # 詳細 - 「タイトル」のフィールドは、入力が必須である。 - 「期限」のフィールドは、カレンダーから選択する。 - 「担当者」のフィールドは、担当者A、担当者B、担当者Cから選択可能とする。 # デザイン - フォームの枠に、シャドウを付ける。 - 各入力フィールドに、シャドウを付ける。 - 入力が必須のフィールドは、項目名の後ろに赤字で「（必須）」と付ける。
結果
大方、イメージ通り、修正されていますね！
「期限」フィールドのレイアウトが崩れてしまっています。 これは、修正を依頼しましょう。
内容をブラッシュアップする
入力
プロンプト
以下の点を修正してください。 - 「期限」フィールドも、他のフィールドと同じように、横幅を広げる。
結果
入力フィールドのカスタマイズもされました。
「タイトル」は、「登録する」ボタンを押下すると、きちんと必須入力としてブロックされます。
「期限」も、カレンダーから選択可能なフィールドに変更になりました。
「担当者」も、ドロップダウンリストになっていますね。
おっと、よく見たら、画面タイトルが抜けていました。 これを追加してもらいましょう。
入力
プロンプト
以下の点を修正してください。 - 画面タイトルがありませんでした。フォームの上部に「TODO登録」とタイトルを追加してください。 - 画面タイトルは、センタリングしてください。
結果
ばっちり、いいですね。 たったこれだけの作業で、このフォームが出来上がるのは素晴らしいです。
今回生成されたHTML/CSS
最終的に生成されたHTML/CSSは、以下です。
<!DOCTYPE html> <html> <head> <style> .form-container { max-width: 900px; margin: 0 auto; padding: 20px; border: 1px solid #ccc; box-shadow: 0 4px 8px 0 rgba(0,0,0,0.2); } .form-container input[type="text"], .form-container input[type="date"], .form-container textarea, .form-container select { width: 100%; padding: 12px 20px; margin: 8px 0; box-sizing: border-box; border: 2px solid #ccc; border-radius: 4px; box-shadow: inset 0 1px 3px rgba(0,0,0,0.2); } .form-container input[type="submit"] { width:49%; background-color:#4CAF50; color:white; padding:14px 20px; margin:8px 0; border:none; border-radius:4px; cursor:pointer } .form-container input[type="submit"]:hover { background-color:#45a049 } .form-container input[type="reset"] { width:49%; background-color:#f44336; color:white; padding:14px 20px; margin:8px 0; border:none; border-radius:4px; cursor:pointer } .form-container input[type="reset"]:hover { background-color:#e53935 } .required::after { content:"（必須）"; color:red } </style> </head> <body> <div class="form-container"> <h1 style="text-align:center">TODO登録</h1> <form action="/action_page.php"> <label for="title" class="required">タイトル</label> <input type="text" id="title" name="title" required> <label for="details">詳細</label> <textarea id="details" name="details"></textarea> <label for="deadline">期限</label> <input type="date" id="deadline" name="deadline"> <label for="person-in-charge">担当者</label> <select id="person-in-charge" name="person-in-charge"> <option value="">選択してください</option> <option value="担当者A">担当者A</option> <option value="担当者B">担当者B</option> <option value="担当者C">担当者C</option> </select> <input type="reset" value="キャンセル"> <input type="submit" value="登録する"> </form> </div> </body> </html>
使ってみた所感
今回、上記のような出力結果になりましたが、同じ画像・同じ指示をしても、その都度で結果は変わります。
これ自体は、GPT-4の性質ではありますが、何度か試している中でも、フォームが不足したり、デザインが違ったり、という状況がありました。
しかし、そのような点を踏まえても、今回のように画像の内容を認識し、言葉で指示を出していけるのは、可能性の大きさを感じるものでした。
まとめ
今回、マイクロソフトのBing Chatの新機能、Visual Search in Chatを使って、画面イメージからHTML/CSSのコードを生成してみました。
結果、非常に簡単な画面のイメージ画像と、プロンプトだけで、実際のHTML/CSSが生成されるのは、強力だと思いました。
この機能を活用すれば、画面開発の実装を効率化したり、画面開発の経験が浅くても簡単にWeb画面を作ることができそうです。
生成AIの進歩は、ほんとうに速く、面白いですね。それではまた👋
Acroquest Technologyでは、キャリア採用を行っています。少しでも上記に興味を持たれた方は、是非以下のページをご覧ください。 www.wantedly.com
- ディープラーニング等を使った自然言語／画像／音声／動画解析の研究開発
- Elasticsearch等を使ったデータ収集／分析／可視化
- マイクロサービス、DevOps、最新のOSSやクラウドサービスを利用する開発プロジェクト
- 書籍・雑誌等の執筆や、社内外での技術の発信・共有によるエンジニアとしての成長
