draw-a-ui
这是一个使用 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 密钥。
注意,这使用的是 Next.js 14,要求
node
版本大于 18.17。了解更多。
echo "OPENAI_API_KEY=sk-your-key" > .env.local
npm install
npm run dev
使用浏览器打开 http://localhost:3000 查看结果。