GPT4-Vision APIを使ったアプリ　draw-a-uiを試す

gpt4-vison API を使った作例として公開してされている、ポンチ絵をhtmlに変換するアプリdraw-a-uiを試してみました。

アプリの機能

まずはgithubの説明にしたがってアプリを起動してみます。

$ git clone https://github.com/SawyerHood/draw-a-ui
$ cd araw-a-ui

$ npm install
$ npm run dev

あとは、ブラウザでhttp://localhost:3000を開くとアプリ画面が表示されます。

ドローソフトの要領でざっとしたポンチ絵を描いてから、Make Realボタンを押すと…

サクッとGPT-4 Visionで生成されたhtmlのプレビューが表示されます

良い感じのhtmlのソースが生成されています

GPT4-vision API呼び出し部分

それでは、このアプリのAPIの呼び出し部分のソースファイルroute.tsを眺めてみます。

まずはシステムプロンプトの定義部分。ユーザーが作ったポンチ絵をtailwind cssフレームワークを使って、htmlへの変換することを指示しているシンプルな内容です。

const systemPrompt = `You are an expert tailwind developer. 
 A user will provide you with a low-fidelity wireframe of an application 
 and you will return a single html file that uses tailwind to create the website. Use creative license to make the application more fleshed out.
 if you need to insert an image, 
 use placehold.co to create a placeholder image. Respond only with the html file.`;

APIにPOSTするbody。ユーザーが描いたイメージとプロンプトを渡すだけ。ここもとてもシンプル。

body: GPT4VCompletionRequest = {
    model: "gpt-4-vision-preview",
    max_tokens: 4096,
    messages: [
      {
        role: "system",
        content: systemPrompt,
      },
      {
        role: "user",
        content: [
          {
            type: "image_url",
            image_url: image,
          },
          "Turn this into a single html file using tailwind.",
        ],
      },
    ],
  };

今回のレベルであれば、もはやAPIからでなくともお絵描きソフトとChat GPTでも行える処理だとは思いますが、魔法のように簡単に実現できていて、無限の可能性を感じるというか、末恐ろしいというか😅

とても勉強になりました。
現場からは以上です。