在 Devin 中试用 DeepWiki 处理私有仓库
DeepWiki

abi/screenshot-to-code

菜单

系统架构

相关源文件

本文档详细概述了Screenshot-to-Code应用程序的系统架构，解释了组件如何交互以将截图转换为功能代码。它涵盖了核心系统设计、通信模式和主要子系统。有关前端组件的更具体细节，请参阅前端架构，有关后端API的详细信息，请参阅后端架构。

系统概览

Screenshot-to-Code遵循客户端-服务器架构，组件之间具有实时通信

来源: README.md40-42 frontend/src/lib/stacks.ts3-11 backend/main.py7-26

核心组件

  1. React 前端: 提供用于上传截图、管理应用程序状态和显示生成代码的用户界面
  2. FastAPI 后端: 处理请求，与 AI 模型交互，并流式传输生成的代码
  3. AI 模型: 外部服务（OpenAI、Claude、Gemini），根据截图输入生成代码

应用程序状态

应用程序通过几个不同的状态运行，这些状态控制着 UI 的流程

状态管理描述界面组件
初始应用程序加载时的初始状态开始面板
编码中代码生成中带有加载指示器的预览面板
代码就绪代码生成完成带有预览和代码的预览面板

来源: frontend/src/types.ts22-26 frontend/src/App.tsx53-57 frontend/src/App.tsx171-227

后端架构

后端使用 FastAPI 构建，提供 API 端点和用于实时代码生成的 WebSocket 连接。

来源: backend/main.py7-26 backend/prompts/types.py4-22

main.py 文件配置了 FastAPI 应用程序，并包含了必要的路由

来源: backend/main.py11-26

前端架构

前端使用 React 构建，并使用 Zustand 进行状态管理。App 组件是主入口点，负责管理应用程序状态并根据当前状态渲染不同的 UI 组件。

来源: frontend/src/App.tsx27-394 frontend/src/types.ts22-26

状态管理

前端使用两个 Zustand store 进行状态管理

  1. useAppStore: 管理应用程序范围的状态

  2. useProjectStore: 管理项目范围的状态

来源: frontend/src/App.tsx28-50 frontend/src/App.tsx52-57

WebSocket 通信流程

WebSocket 通信是应用程序的核心，它支持实时代码生成和结果流式传输。

来源: frontend/src/generateCode.ts20-74 frontend/src/App.tsx169-228

WebSocket 响应类型

后端通过 WebSocket 发送不同类型的响应

类型目的处理函数
chunk生成的代码的增量片段appendCommitCode()
status状态更新消息appendExecutionConsole()
setCode设置整个代码setCommitCode()
error错误消息显示 toast 通知

来源: frontend/src/generateCode.ts14-18 frontend/src/generateCode.ts39-50

代码生成过程

下图说明了端到端的代码生成过程

来源: frontend/src/App.tsx232-247 frontend/src/App.tsx169-228 frontend/src/generateCode.ts20-74

关键函数

  1. doCreate: 从截图初始化代码生成

  2. doGenerateCode: 准备参数并启动 WebSocket 连接

  3. generateCode: 建立 WebSocket 连接并处理响应

来源: frontend/src/App.tsx232-247 frontend/src/App.tsx169-227 frontend/src/generateCode.ts20-74

配置与设置

该应用程序使用Settings接口来管理用户配置

设置描述默认值
openAiApiKeyOpenAI API 密钥null
anthropicApiKeyAnthropic API 密钥null
openAiBaseURL自定义 OpenAI API 端点null
isImageGenerationEnabled启用图像生成true
editorTheme代码编辑器的主题EditorTheme.COBALT
generatedCodeConfig技术栈Stack.HTML_TAILWIND
codeGenerationModel要使用的 AI 模型CodeGenerationModel.CLAUDE_3_5_SONNET

设置使用usePersistedState hook存储在浏览器的本地存储中

来源: frontend/src/types.ts9-20 frontend/src/App.tsx60-74

支持的技术栈

该应用程序支持在Stack枚举中定义的多项技术栈

栈组件描述
HTML_TAILWINDHTML, Tailwind带有 Tailwind CSS 的 HTML
HTML_CSSHTML, CSS带有常规 CSS 的 HTML
REACT_TAILWINDReact, Tailwind带有 Tailwind CSS 的 React
VUE_TAILWINDVue, Tailwind带有 Tailwind CSS 的 Vue
BOOTSTRAPBootstrapBootstrap 组件
IONIC_TAILWINDIonic, Tailwind带有 Tailwind CSS 的 Ionic
SVGSVGSVG 图形

每个堆栈对应后端中的一个特定系统提示模板

来源： frontend/src/lib/stacks.ts3-23 backend/prompts/types.py4-22

错误处理

该应用程序实现了 WebSocket 通信的错误处理

错误代码常量含义行为
4333USER_CLOSE_WEB_SOCKET_CODE用户取消显示取消消息，调用 onCancel
4332APP_ERROR_WEB_SOCKET_CODE后端错误调用 onCancel
非 1000不适用连接错误显示错误提示，调用 onCancel
1000不适用正常关闭调用 onComplete

来源： frontend/src/constants.ts2-3 frontend/src/generateCode.ts53-67

总结

Screenshot-to-Code 系统采用基于 WebSocket 的架构，可实现 AI 生成代码的实时流式传输。React 前端负责管理应用程序状态和用户交互，而 FastAPI 后端则与 AI 模型接口，将屏幕截图转换为跨多种技术栈的功能代码。这种架构为用户提供了响应式的体验，并在代码生成过程中提供即时反馈。

来源： README.md40-42 frontend/src/App.tsx27-394 backend/main.py7-26