Bard に入力フォームを描いてもらう

2023年7月14日 20:26

Google Bard がアップデートされて、画像認識ができるようになったということなので、少し触ってみました。写真をアップロードして説明して貰うのは色々な人がやっているので、手描きのフォームから入力フォームの生成をやってみることに。（現在英語のみ対応なので英語でやっています）。

まず iPad の「フリーボード」というアプリ上で以下のような手描きのフォームを描きました。ものすごくヘタですが…。

さて、雑な図ですが、なんとなく利用者登録っぽいことをしているのだなということはわかります。この図を Bard にアップロードして「Exaplain this image」とお願いします。

すると以下のような答が返って来ました

The image you sent me is a sketch of a user registration form. The form has four fields:

User Reg: This is the title of the form.
Name: This field is for the user's name.
Age: This field is for the user's age.
Phone: This field is for the user's phone number.

The form also has a submit button labeled "Sign Up."

This form is a simple example of a user registration form. It would be used to collect basic information from users who want to create an account on a website or service. The information collected from the form could then be used to identify the user, verify their age, and contact them if necessary.

Here are some additional thoughts about the form:

The form is very simple and easy to understand.
The form only collects the most basic information necessary to register a user.
The form could be easily modified to collect additional information, such as email address, gender, or location.

I hope this helps to explain the form.

単に書かれている文字を認識しているだけでなく、フォームの目的やそれぞれのフィールドの意味なども認識していることがわかります。

そこで、この結果に対して
"Could you generate a mock-up web page that represents this form in HTML?"
→「このフォームを表すモックアップページを HTML で生成してもらえますか？」
とお願いしてみました。

すると、以下のような結果が得られました。
（実際は途中でフォーマットに関するリクエストを1回入れています）。

<!DOCTYPE html>
<html>
<head>
<title>User Registration Form</title>
<style>
body {
  background-color: #ffffff;
  color: #000000;
  font-family: sans-serif;
}

form {
  width: 500px;
  margin: 0 auto;
}

input {
  width: 100%;
  padding: 10px;
  border: 1px solid #000000;
}

label {
  font-weight: bold;
}

button {
  width: 100px;
  margin-top: 10px;
}

h1 {
  text-align: center;
}
</style>
</head>
<body>
<h1>User Registration Form</h1>
<form action="/submit" method="post">
<label for="name">Name:</label>
<input type="text" name="name" id="name">
<br>
<label for="age">Age:</label>
<input type="number" name="age" id="age">
<br>
<label for="phone">Phone:</label>
<input type="tel" name="phone" id="phone">
<br>
<input type="submit" value="Sign Up">
</form>
</body>
</html>

この HTML ファイルを表示してみると次のような図になります。

それぞれのフィールドは入力できますし、"Sign Up"ボタンを押すこともできます（もちろん押すとエラーになりますけれど）。

CSS やテンプレートを別途用意しておけば、お気楽に一揃いのページを揃えられそうです。

（トップ画像は "Google Bard and the Bard of Avon" で生成した画像です）。

この記事が気に入ったらサポートをしてみませんか？