使用截图生成前端布局的GPT4技术解析-优快云博客

本文链接：https://blog.youkuaiyun.com/weixin_30230009/article/details/134486587

本文介绍了如何利用gpt-4-vision-preview识别截图，并结合提示词生成相似布局的前端项目。核心逻辑是将截图转为base64字符串，通过websocket发送到fastapi构建的backend，然后由gpt-4-vision生成HTML代码。前端基于react+tailwindcss，后端使用gpt-4-vision和提示词，借助placehold.co服务处理图片资源，最终通过DALL3生成图片。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

前两天，在群里看见一个视频，视频中，作者截图twitter首页，然后使用截图直接生成与截图布局非常相近的前端项目，效果还是比较惊艳的。

今天陪老婆回老家，路上clone这个项目的代码到本地，学习了一下，整体还是很直观的。

项目github：https://github.com/abi/screenshot-to-code

进入项目，就可以看见它的README.md中给出的效果，因为视频号放视频很麻烦，就截图示意一下。

本文主要是学习一下作者是怎么实现截图到相似布局这个核心功能的，当然看完后，我也学到一些其他编程技巧，一同记录一下。

截图到布局的核心逻辑

一句话总结：使用gpt-4-vision-preview识别图片并配合提示词，直接让GPT4生成相应的HTML代码。

项目分为frontend和backend，frontend最核心的就是将你的截图转成base64字符串然后通过websocket发送给backend接口。

frontend是react+tailwindcss来开发的，海外很多人都用这套（我现在也用这套为主），核心代码如下：

// src/generateCode.ts

// 生成代码
export function generateCode(
  params: CodeGenerationParams,
  onChange: (chunk: string) => void,
  onSetCode: (code: string) => void,
  onStatusUpdate: (status: string) => void,
  onComplete: () => void
) {
  const wsUrl = `${WS_BACKEND_URL}/generate-code`;
  console.log("Connecting to backend @ ", wsUrl);

  // 实例化 websocket 对象
  const ws = new WebSocket(wsUrl);