爆火的截图生成代码项目核心功能竟然只是一条 Prompt
screenshot-to-code 这个项目可以将屏幕截图转换为 HTML/Tailwind CSS 代码。它使用 GPT-4 Vision 生成代码,使用 DALL-E 3 生成图片。
项目地址:github.com/abi/screenshot-to-code
这个项目最近爆火,短短几天时间,在 Github 上已经有 14.9K 的 Star。
花了 5 分钟看了下项目的源码,没想到竟然如此简单!核心原理竟然只有一条 Prompt,然后借助了gpt-4-vision-preview
模型,交给 GPT 来完成识图+写代码的工作,最后再把代码中的 img 标签提取出来,调用 DALL-E 3 模型转换为图片。
下图是调用 gpt-4-vision-preview
模型接口
提示语模板在这里:
提示语代码看 backend/prompts.py。
下面是翻译为中文后的 Prompt:
复制代码
至于生成图片,就更简单了,直接从生成好的 HTML 中提取出 img
标签,再次调用 DALL-E 3 接口生成图片,替换进去。
你可以把上面那个 Prompt 直接拷贝下来发送给 ChatGPT 来实现截图生成代码功能
版权声明: 本文为 InfoQ 作者【mylxsw】的原创文章。
原文链接:【http://xie.infoq.cn/article/5e49c376fc6bb0963e6a2d07d】。
本文遵守【CC-BY 4.0】协议,转载请保留原文出处及本版权声明。
评论