大家好，很高兴又见面了，我是'高级前端进阶'，由我带着大家一起关注前端前沿、深入前端底层技术，大家一起进步，也欢迎大家关注、点赞、收藏、转发!
什么是 tldraw
tldraw 是一款协作数字白板，可在 tldraw.com 上体验。 它的编辑器、用户界面和其他底层库都是开源的，可以在这个存储库中使用， tldraw 也已经发布在了 npm 上。 开发者可以使用 tldraw 为产品创建嵌入式白板，或作为构建自己无限画布应用程序的基础。
import { Tldraw } from '@tldraw/tldraw'
import '@tldraw/tldraw/tldraw.css'
// 引入相应的库
export default function () {
return (
<div style={{ position: 'fixed', inset: 0 }}>
<Tldraw />
</div>
)
}目前 tldraw 在Github上通过 MIT 协议开源，有超过28.4k的star、1.6k的fork、是一个值得关注的优质前端开源项目。
什么是 draw-a-ui
而 draw-a-ui 是一个使用 tldraw 和 gpt-4-vision api 并根据绘制的线框生成 html 和 css 的应用程序的工具。GPT-4 Vision 结合视觉数据理解自然语言的能力使其有别于传统的人工智能模型， draw-a-ui 项目还可以识别图像内的空间位置。 借助 GPT-4 Vision API，用户可以通过视觉数据的镜头更深入地探究世界。
draw-a-ui 的工作原理是获取当前画布 SVG，然后将其转换为 PNG，接着将该 png 发送到 gpt-4-vision，并附有指令以返回带有 tailwind 的单个 html 文件。
比如下面动图所示的应用开发效果：
不过值得一提的是，draw-a-ui 项目目前还不是很成熟，不适用于生产用途，也没有任何身份验证。大家如果感兴趣，可以在 http://www. 平台进行体验。
目前 draw-a-ui 在 Github 上通过 MIT 协议开源，有超过 11.8k 的 star、1.3k 的 fork、是一个值得关注的前端向优质 AI 开源项目。
如何使用 draw-a-ui
draw-a-ui 目前是一个 Next.js 应用程序。 首先，在项目的根目录中运行以下命令将获得一个能够访问 GPT-4 Vision API 的 OpenAI API 密钥。
请注意，该项目需要使用 Next.js 14 并且需要高于v 18.17 的 Node 版本。
echo 'OPENAI_API_KEY=sk-your-key' > .env.local
// 需要有自己的openai的key、没有可以申请
npm install
// 安装依赖
npm run dev
// 启动开发服务器用浏览器打开 http://localhost:3000 查看真实运行效果页面。
参考资料
https://github.com/SawyerHood/draw-a-ui/tree/cc9cf808218288e88b106d3b9bc05c25fc32b942
https://www./
https://twitter.com/zsviczian/status/1726830508938772673
https://github.com/tldraw/tldraw
