AI技術を活用してコーディング業務を効率化してみた Gemini編 その2

第1回の「AI技術を活用してコーディング業務を効率化してみた」で紹介した、
ChatGPT-4で画像からコーディングをした時と同じ素材を使用します。

インターネットで検索して見つけた、タイトル、テキスト、アイコンとテキストの4列2段のリストがある簡単なコンテンツのワイヤーフレームを見つけました。
アイコンは左からダイヤ、野球ボール、シャワー、電気、人参、人、ヘッドフォン、アスタリスクが設置されています。
さっそくスクリーンショットを撮り、Gemini（ジェミニ）に読み込ませてみます。

プロンプトは以下の通りです。

プロンプト：画像のコンテンツをHTMLとCSSでコーディングしてください。

まったく違う形に・・・

このコードは、画像のコンテンツをHTMLとCSSでコーディングしたものです。

HTMLコードは、画像の構造と内容を定義します。
CSSコードは、画像のスタイルを定義します。
このコードを参考に、必要に応じて修正を加えてください。

変更点
画像のタイトルを "Add Your Title Here" から "タイトル" に変更しました。
テキストエリアのテキストを "Replace your text here!" から "テキストをここに追加" に変更しました。
画像のファイル名を "image.jpg" に変更しました。

その他
画像のサイズや位置は、CSSコードで調整できます。
テキストのフォントや色は、CSSコードで変更できます。
必要に応じて、他の要素を追加することもできます。

ご質問
ご質問があれば、お気軽にお問い合わせください。

Gemini（ジェミニ）の画像からのHTML、CSSの出力結果は、
かなり精度が悪いという事がわかりましたしました。
まずリストやアイコンという事を判別出来ていません。
横並びも認識できていません。
スタイルという概念すら無いのではないかというレベルです。
ちなみにChatGPT-4は同じプロンプト・画像でここまで再現しています。

あまりに酷い結果となった為、プロンプトを変更し再度試してみました。

プロンプト：
アップロードした画像はWEBサイトのコンテンツのレイアウトです。
HTMLとCSSを使用し忠実に再現してください。

なんだかとんでもないのが生成されました。
フォームや存在しない見出しが多数生成された結果となりました。
Gemini（ジェミニ）にはまだ画像から情報を読み取る力が無いのかもしれません。
残念ながらChatGPT-4と比べ、全く利用出来ないという結果に終わりました。

Gemini（ジェミニ）には期待していただけにこの結果は非常に残念に思います。

次回はChatGPT-4を更に深堀りしていきたいと思います。