はじめに

これまで設計書からプログラム、構成図からIaCなど、GPT4-Vで画像を使ったケースを取り扱ってきました。今回は画面設計書みたいなものから画面のコードを生成させてみたいと思います。

なお、生成するコードはSvelteコンポーネントです。

画面設計書

本当は日本語が良かったのですが、日本語OCRの精度に不安があったので英語で記載しました。なお、英語もChatGPTで日本語をもとに翻訳したものをそのままいれています。

DallePanel.svleteというSvelteコンポーネントについて、画面の構成と、動作に関する説明などを右側にいれています。右側の説明は画像にいれなくてもプロンプトに入れてもいいかなと思いましたが、とりあえず画像です。
ともすればfigmaとかでもいいじゃないかっていう話もありますが、動作含めて画像にすることを今回試します。

説明の内容は日本語（翻訳前）だと以下です。

input_filedには、textareaとbuttonがあります。buttonはtextareaの下部に表示されます。右寄せです。buttonには"post"と表示します。"post"ボタンを押すとpostRequest()関数が呼び出されます。
postRequest関数が実行されるとdisplay_filedが表示されます。さらにbutonが非表示になります。
display_filedには、4つのdiv領域があります。４分割です。それぞれのdiv領域はクリックすることができ、selectImage(どのdiv領域かのパラメータ)関数が呼び出されます。

GPT4-Vのシステムプロンプト

画像に合わせて入れたシステムプロンプトは以下です。

system_prompt = f"""\
You are an expert Svelte engineer. \
What is depicted is the specification for a Svelte component that you should create next. \
After carefully considering the depicted content, please create DallePanel.svelte. \
For any ambiguous areas, please complement and implement in the best form based on your past experience. \
Additionally, although there are no specific design instructions, please prepare a stylesheet with a modern, sophisticated, and simple design.
"""

同じく日本語だと以下の内容です。（翻訳前）

あなたはSvelteのエキスパートエンジニアです。描かれているものは、これから作成すべきSveltekコンポーネントの仕様です。
描かれている内容を吟味した上で、DallePanel.svelteを作成してください。なお、あいまいな箇所はこれまでのあなたの経験のもと最善となる形で補完して実装してください。
またデザインに関する指定はないのですが、近代的で洗練された簡素なデザインでスタイルシートは用意してください。

生成された画面コード

上述の画像とシステムプロンプトで作成されたSvelteコードは以下です。（全文)

<!-- DallePanel.svelte -->
<script>
  let displayFieldVisible = false;

  function postRequest() {
    // Placeholder for the actual post request logic
    displayFieldVisible = true;
  }

  function selectImage(divArea) {
    // Placeholder for the actual select image logic
    console.log(`Div area ${divArea} selected`);
  }
</script>

<style>
  .container {
    padding: 50px;
    font-family: Arial, sans-serif;
  }

  .input-field {
    margin-bottom: 50px;
  }

  .textarea {
    width: calc(100% - 50px);
    height: 150px;
    margin-bottom: 10px;
  }

  .button {
    display: block;
    width: 100px;
    margin-left: auto;
    padding: 10px;
    background-color: #007bff;
    color: white;
    border: none;
    border-radius: 5px;
    cursor: pointer;
  }

  .display-field {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    grid-gap: 50px;
    visibility: hidden;
  }

  .display-field.visible {
    visibility: visible;
  }

  .image-div {
    border: 1px solid #007bff;
    height: 200px;
    cursor: pointer;
  }
</style>

<div class="container">
  <div class="input-field">
    <textarea class="textarea"></textarea>
    {#if !displayFieldVisible}
      <button class="button" on:click={postRequest}>Post</button>
    {/if}
  </div>
  <div class="display-field {displayFieldVisible ? 'visible' : ''}">
    <div class="image-div" on:click={() => selectImage(1)}></div>
    <div class="image-div" on:click={() => selectImage(2)}></div>
    <div class="image-div" on:click={() => selectImage(3)}></div>
    <div class="image-div" on:click={() => selectImage(4)}></div>
  </div>
</div>

動作確認

実行してみます。適当なSvelte実行環境を用意して上記のDallePanel.svelteを読み込んでみました。クリック実行の際にコンソールログが出力されるようになっていたので、開発者コンソールも右側に表示しています。

まずはエラーも出ずに動いたところで👏。
その上で、以下の2点はきちんと動作しています。いいですね。

ボタンがクリックされたら非表示になる
4つの領域をクリックしたら関数が実行されるようになっている

一方で、以下の点がダメでした。

ボタンとテキストエリアの表示箇所が少しずれている
細かく見るとマージン指定が少し違う

まとめ

お遊びレベルの画面設計書をいれてコードを生成させてみました。
なんとなくは生成されたものの、細かい観点はやはり人間系で直さないとならないレベルかなという状況です。

人によってはこのレベルのコードならpptxなどを書く方が時間かかりそうではありますが、GPTがある程度生成したものを人間が完成させる、という使い方なら使い道がありそうです。

そのためには、このレベルの画面設計書であればこのレベルのコードが生成できるといった見極めもいりますし、場合によっては画面設計書の記載そのものを変えないとダメそうではあります。このあたりは今後モデルの精度が上がれば無視できるようにはなりそうではあります。

現時点(2024/4)の精度だと、熟練者の方は、これだったら1から作った方がよい、となりそうなレベルですが、一方で1からはちょっと辛いというケースだと、現時点でも土台として使えそうですね〇

GPT4-Vで画面設計書から画面を生成させる

はじめに

画面設計書

GPT4-Vのシステムプロンプト

生成された画面コード

動作確認

まとめ