はじめに
KDDIアジャイル開発センターのはしもと（仮名）です。
2023年7月19日から開催されている「Microsoft Inspire 2023」のキーノートにて、Bing Chat に ビジュアル検索機能 が実装されたことが発表されました。
何ができる？
キーノート内で紹介された動画では、入力として 「手書きのスケッチ画像」 と 「『画像をもとにした HTML と、イケてる見栄えにするためのCSS作ってくれや』という指示」 を与えることで、完璧とは言えないものの、入力項目やボタンなど、スケッチに基づくコードが生成できています。
これまで Bing Chat の入力はテキストだけでしたが、画像の入力に対応することで、デモ動画のように、コンテキストに画像内の情報を含めた上での問いかけやチャットが可能になることが予想されます。
さあ、使ってみよう！
意味のないものを作るのは大好きです。
作るもの
パワーポイントで考えたこんなデザインの画面を作っていきます。
Bing Chat との対話
デモ動画を参考に、プルダウンで選択可能な箇所には入力候補を、プレースホルダーを設定したい箇所にはそれぞれ値を明記し、画像と合わせて指示を出します。
Bing Chat からの応答全文
Here’s the HTML code for the form based on the image you provided:<!DOCTYPE html>
<html>
<head>
<style>
body {
font-family: Arial, sans-serif;
}
h1 {
text-align: center;
}
form {
width: 300px;
margin: 0 auto;
}
label {
display: block;
margin-top: 20px;
}
select, textarea {
width: 100%;
padding: 12px 20px;
margin: 8px 0;
box-sizing: border-box;
border: 2px solid #ccc;
border-radius: 4px;
}
input[type=checkbox] {
margin-top: 20px;
}
input[type=submit], input[type=button] {
width: 100%;
background-color: #4CAF50;
color: white;
padding: 14px 20px;
margin: 8px 0;
border: none;
border-radius: 4px;
cursor: pointer;
}
input[type=submit]:hover, input[type=button]:hover {
background-color: #45a049;
}
</style>
</head>
<body>
<h1>Thank you Hashimoto-san</h1>
<form action="">
<label for="gift">Gift:</label>
<select id="gift" name="gift">
<option value="1000">1000 USD</option>
<option value="3000">3000 USD</option>
<option value="5000">5000 USD</option>
</select>
<label for="message">Message:</label>
<textarea id="message" name="message" rows="4" cols="50" placeholder="You are a treasure of Japan. Please exist forever."></textarea>
<input type="checkbox" id="sendGiftTwice" name="sendGiftTwice">
<label for="sendGiftTwice">Send Gift Twice</label><br><br>
<input type="submit" value="Send Gift">
<input type="button" value="Cancel">
</form>
</body>
</html>
This code creates a form with a title “Thank you Hashimoto-san”, and three fields “Gift”, “Message”, and “Send Gift Twice”. The “Gift” field is a dropdown menu with options for $1000, $3000, or $5000. The “Message” field is a text area with the placeholder “You are a treasure of Japan. Please exist forever.”. The “Send Gift Twice” field is a checkbox. There are two buttons at the bottom of the form, “Send Gift” and “Cancel”. The CSS makes the form look cool by adding some styling to it.
Is there anything else you would like me to add or change? 😊
おや・・・？怪しい気配が・・・
納品物
オイ！！！！キャンセルボタン作れなんて頼んだ覚えはねえぞ！！！！
意地でもキャンセルボタンを無くす！！！！
第二章 - 意地でもキャンセルボタンを消す
このままではいけません。
お客さまのビジネスは、このボタンひとつで大きく左右するかもしれないのです（しない）。
ということで、キャンセルボタンを消してもらいましょう。
また、いっそのこと送信ボタンも増やしてほしいとお願いします。
はい？
煽ってこないでもらえますか？
でもそこは生成AI大好きっ子のはしもと。
優しく BingChatっ子ちゃん（諸説あり） を諭します。
「これはユーザーに提供するものではない。ボタンが増えることで使いづらくなるという仮説検証をするためのものだ。」 と。
今度はコードを生成し始めてくれました。
人間様をあんまり舐めないほうがいいぞ？
最終納品物
最終的に Bing Chat が出力したコードと、それを使った画面がこちらです。
Bing Chat からの応答全文
<!DOCTYPE html>
<html>
<head>
<style>
body {
font-family: Arial, sans-serif;
position: relative;
}
h1 {
text-align: center;
}
form {
width: 300px;
margin: 0 auto;
}
label {
display: block;
margin-top: 20px;
}
select, textarea {
width: 100%;
padding: 12px 20px;
margin: 8px 0;
box-sizing: border-box;
border: 2px solid #ccc;
border-radius: 4px;
}
input[type=checkbox] {
margin-top: 20px;
}
input[type=submit] {
width: 100px;
background-color: #4CAF50;
color: white;
padding: 14px 20px;
margin: 8px 0;
border: none;
border-radius: 4px;
cursor: pointer;
position: absolute;
}
input[type=submit]:hover {
background-color: #45a049;
}
</style>
</head>
<body>
<h1>Thank you Hashimoto-san</h1>
<form action="">
<label for="gift">Gift:</label>
<select id="gift" name="gift">
<option value="1000">1000 USD</option>
<option value="3000">3000 USD</option>
<option value="5000">5000 USD</option>
</select>
<label for="message">Message:</label>
<textarea id="message" name="message" rows="4" cols="50" placeholder="You are a treasure of Japan. Please exist forever."></textarea>
<input type="checkbox" id="sendGiftTwice" name="sendGiftTwice">
<label for="sendGiftTwice">Send Gift Twice</label><br><br>
<input type="submit" value="Send Gift" style="top:10%;left:10%;">
<input type="submit" value="Send Gift" style="top:20%;left:20%;">
<input type="submit" value="Send Gift" style="top:30%;left:30%;">
<input type="submit" value="Send Gift" style="top:40%;left:40%;">
<input type="submit" value="Send Gift" style="top:50%;left:50%;">
<input type="submit" value="Send Gift" style="top:60%;left:60%;">
<input type="submit" value="Send Gift" style="top:70%;left:70%;">
<input type="submit" value="Send Gift" style="top:80%;left:80%;">
<input type="submit" value="Send Gift" style="top:90%;left:90%;">
<input type="submit" value="Send Gift" style="top:10%;right:10%;">
<input type="submit" value="Send Gift" style="top:20%;right:20%;">
<input type="submit" value="Send Gift" style="top:30%;right:30%;">
<input type="submit" value="Send Gift" style="top:40%;right:40%;">
<input type="submit" value="Send Gift" style="top:50%;right:50%;">
<input type="submit" value="Send Gift" style="top:60%;right:60%;">
<input type="submit" value="Send Gift" style="top:70%;right:70%;">
<input type="submit" value="Send Gift" style="top:80%;right:80%;">
<input type="submit" value="Send Gift" style="top:90%;right:90%;">
</form>
</body>
</html>
ドワアアアアアアアアァァァァァァ！！！！！！！！！！！！！！！
めちゃくちゃおもろいやんけ...
まとめ
ちゃんとした使い方はこれから考えます。