tldraw make real：利用AI一键从原型图到生成真实可用的代码
一款名为"tldraw"的协作白板应用发布了一个名为"Make Real"的功能原型，可以让用户通过绘制软件图像并利用AI将其变为真实可用的代码。
"Make Real"功能使用OpenAI的GPT-4V API将矢量绘图转化为可运行的Tailwind CSS和JavaScript代码，可以复制用户界面，甚至创建类似Breakout的简单游戏。
用户可以在线体验"Make Real"的实时演示，需要提供OpenAI的API密钥。我推荐大家github克隆仓库，本地部署。
"Make Real"通过生成绘制组件的base64编码PNG图像，然后将其传递给GPT-4 Vision，使用系统提示和指令将图像转换为使用Tailwind的文件。
上周我写过实例，用 AI 搭建博客网站——GPTs、Tldraw、v0.dev 的综合运用，当时我没有OpenAI API key，所以没有用上tldraw make real，这周我有了API key，赶紧使用，发觉“Make Real”是真好用。
tldraw 官推有很多案例，有兴趣的伙伴，建议关注它的官推。
tldraw在github上关于make-real有2个仓库，make-real和make-real-starter。
make-real
地址：https://github.com/tldraw/make-real
make-real-starter
地址：https://github.com/tldraw/make-real-starter
建议新手先看make-real-starter的首页（有详细的安装步骤），克隆仓库选make-real（更新更快）。
我一开始克隆make-real-starter后部署，但运行不起来，换成make-real的就好了。
make-real案例分享：
1. 点击一下切换图片
2. 复制Poe网页
3. 复制小红书网页
复制后的网页刷新一下，还会有别的图片出现，我查了下，原来是它代码里链接了unsplash。
4. 写一个评价页面
我试了下，完美复现
5. 内嵌网页
我试了下，完美复现，可以输入我的域名，看到网页。
6. 在线钢琴
我试了下，可以生成网页钢琴，可以弹奏，就是琴键看着有点怪。
7. 链接高德天气API
我在2个实例，设置GPTs Actions 链接第三方API文章里，做了一个GPTs，是链接高德天气API，当时还是花了不少时间来链接的，主要不是开发人员，OpenAPI规范文件对于我来说比较难写。但是我今天试了make real再稍微改下，就可以直接成功运行了，而这是10分钟内的事。
我的原型图是左图，提供了高德天气API链接。make real很快生成右侧图片内容。
复制代码到vs code里，添加我的高德天气API key，运行出错。
咨询GITHUB COPILOT，很快得到修改后的代码。
修改后，运行成功了。
操作就是这么丝滑，对于非开发人员，简直难以想象。
8. 还有些其他案例，我觉得也很有意思。
tldraw和LCM相结合
不在电脑上画，笔记本上画也行
我在使用OpenAI API key中遇到的一个非常大的坑，就是我的GPT plus账号和OpenAI API账号被封了。原因是我的网络直连了API请求。
好多个月和GPT对话的记录都没有了，让我很难受。
朋友，记得GPT plus账号和OpenAI API一定不要对应同一个OpenAI账号。
现在我来讲下解决办法。
向OpenAI 发出请求时，请检索克隆下来的make-real-main文件夹里的api.openai.com，将https://api.openai.com/v1 替换为 https://gateway.ai.cloudflare.com/v1/ACCOUNT_TAG/GATEWAY/openai 。
这个方法是参考Barret李靖在即刻网站的分享。
新建网关（下图我已创建了一个），点击openapi-proxy API Endpoints，可以看到ACCOUNT_TAG。
更多OpenAI · Cloudflare AI Gateway docs请看这里：
https://developers.cloudflare.com/ai-gateway/providers/openai
总结一下：
介绍了tldraw和make real项目，这是一种利用AI技术将原型图转化为真实可用代码的工具。
描述了如何部署和使用make-real和make-real-starter两个项目仓库。
展示了使用tldraw创建原型图，并利用make real将原型图转化为真实可用代码的过程。
分析了在使用过程中可能遇到的一些问题，比如在使用高德天气API时可能会遇到的运行错误。
提供了解决上述问题的方法，比如向OpenAI发出请求时，检索下载下来的make-real-main文件夹里的api.openai.com，将其替换为特定的网址。
强调了利用tldraw make real，只需画出一个界面，按下一个按钮，就能得到一个工作网站，大大简化了从设计原型到实现工作网站的过程。
以下是一些我之前写的关于GPT的文章，你可能会对它们感兴趣：