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を開くとアプリ画面が表示されます。
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でも行える処理だとは思いますが、魔法のように簡単に実現できていて、無限の可能性を感じるというか、末恐ろしいというか😅
とても勉強になりました。
現場からは以上です。
この記事が気に入ったらサポートをしてみませんか?