绘制用户界面

这是一个使用 tldraw 和 gpt-4-vision api 根据您绘制的线框生成 html 的应用程序。

我目前正在开发draw-a-ui 的托管版本。您可以在draw-a-ui.com加入候补名单。它的核心将始终是开源的并可在此处获取。

其工作原理是获取当前画布 SVG，将其转换为 PNG，然后将该 png 发送到 gpt-4-vision，并附有指令以返回带有 tailwind 的单个 html 文件。

免责声明：这是一个演示，不适用于生产用途。它没有任何身份验证，因此如果部署它，您就会破产。

入门

这是一个 Next.js 应用程序。首先，在项目的根目录中运行以下命令。您将需要一个能够访问 GPT-4 Vision API 的 OpenAI API 密钥。

node请注意，这使用 Next.js 14 并且需要高于 18.17的版本。在这里阅读更多内容。

echo "OPENAI_API_KEY=sk-your-key" > .env.local
npm install
npm run dev

用浏览器打开http://localhost:3000查看结果。