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

abi/screenshot-to-code

菜单

开发者指南

相关源文件

本文档为希望为“截图生成代码”应用程序做出贡献或修改其代码的开发者提供了全面的指导。它涵盖了开发环境的设置、项目结构的理解、核心系统的使用以及常见开发任务的实现。有关评估工具的信息，请参阅评估系统，有关前端组件的详细信息，请参阅前端架构。

设置开发环境

先决条件

要开发“截图生成代码”应用程序，您需要

  • Node.js (>=14.18.0)
  • Python (^3.10)
  • Poetry 用于 Python 包管理
  • Yarn 用于 Node.js 包管理
  • 至少以下一项的 API 密钥
    • OpenAI API 密钥 (GPT-4o)
    • Anthropic API 密钥 (Claude)
    • Google AI Studio API 密钥 (Gemini)

后端设置

或者，您可以使用 start 脚本

用于在不使用 AI 积分的情况下进行调试

来源： README.md50-78 backend/pyproject.toml8-24 backend/start.py1-5

前端设置

使用生产设置运行前端

构建用于生产的前端

来源： README.md62-68 frontend/package.json6-13

Docker 设置

对于容器化开发环境

注意：在 Docker 模式下，文件更改不会触发重新构建。

来源： README.md80-89

项目架构

开发工作流程图

来源： README.md41-78 backend/.pre-commit-config.yaml1-25 backend/pyproject.toml8-32 frontend/package.json5-79

项目结构图

来源： frontend/package.json15-52 backend/pyproject.toml8-24

核心系统实现

代码生成过程

代码生成过程是应用程序的核心工作流程，将用户输入连接到 AI 生成的代码。

来源： README.md5-17 frontend/src/lib/stacks.ts1-23 backend/prompts/types.py1-22

技术栈系统实现

该应用程序支持多种技术栈。添加新栈需要协调前端和后端的更改。

栈在两个位置定义，必须保持同步

  1. 前端：frontend/src/lib/stacks.ts 定义了 Stack 枚举和描述
  2. 后端：backend/prompts/types.py 定义了 Stack 类型和 SystemPrompts 类型

当前支持的技术栈

  • HTML_TAILWIND
  • HTML_CSS
  • REACT_TAILWIND
  • BOOTSTRAP
  • VUE_TAILWIND
  • IONIC_TAILWIND
  • SVG

来源： frontend/src/lib/stacks.ts1-23 backend/prompts/types.py1-22

测试

运行测试

项目包含前端和后端的测试设置

前端测试

前端使用 Jest 进行测试，配置在 package.json 中。

后端测试

后端使用 pytest 进行测试，依赖项在 pyproject.toml 的 dev 部分定义。

来源： frontend/package.json13 backend/pyproject.toml26-28

编写测试

在为应用程序编写测试时，请遵循以下指南

  1. 前端测试:

    • React 组件的单元测试
    • Zustand 存储的状态管理测试
    • API 交互的集成测试

  2. 后端测试:

    • API 端点测试
    • LLM 服务测试
    • Prompt 生成测试
    • 实用函数测试

  3. 端到端测试:

    • 该项目包含用于端到端测试的 Puppeteer
    • 测试应涵盖从屏幕截图到生成代码的完整工作流程

来源： frontend/package.json53-75 backend/pyproject.toml26-28

配置

环境变量

后端环境变量

在后端目录中创建一个 .env 文件，其中包含以下变量

可变目的必填
OPENAI_API_KEYOpenAI 服务的 API 密钥可选*
ANTHROPIC_API_KEYAnthropic Claude 的 API 密钥可选*
OPENAI_BASE_URLOpenAI API 的自定义 URL（用于代理）可选
MOCK设置为“true”以在模拟模式下运行可选

*实际功能至少需要 OPENAI_API_KEY 或 ANTHROPIC_API_KEY 中的一个。

前端环境变量

前端环境变量通过 .env.local 管理

可变目的默认
VITE_WS_BACKEND_URLWebSocket 端点ws://:7001
VITE_HTTP_BACKEND_URLHTTP 端点http://:7001

来源： README.md50-96

预提交钩子

项目使用 pre-commit hook 来确保代码质量。这些 hook 在 .pre-commit-config.yaml 中定义，包括

  • end-of-file-fixer: 确保文件以换行符结尾
  • check-yaml: 验证 YAML 文件
  • check-added-large-files: 防止提交大文件

安装 pre-commit hook

来源： backend/.pre-commit-config.yaml1-25

常见开发任务

添加新的 AI 模型

要集成新的 AI 模型

  1. 在 LLM 抽象层中创建新的流式函数
  2. 实现新模型的 API 客户端
  3. 在前端 UI 中添加模型选项
  4. 创建特定于模型的 prompt 模板
  5. 更新 WebSocket handler 以支持新模型

添加新的技术栈

添加新的技术栈

  1. 更新 frontend/src/lib/stacks.ts 和 backend/prompts/types.py 中有关新栈的内容
  2. 创建特定于新栈的系统 prompt
  3. 将栈添加到前端下拉选项中，并附有适当的描述
  4. 使用各种屏幕截图测试该栈，以确保正确的代码生成

来源： frontend/src/lib/stacks.ts1-23 backend/prompts/types.py1-22

项目工作流程图

来源： README.md41-96 frontend/package.json6-13 backend/pyproject.toml26-28 backend/.pre-commit-config.yaml1-25

故障排除

常见开发问题及解决方案

问题解决方案
后端设置错误检查 Python 版本 (3.10+) 并确保 Poetry 已正确安装
OpenAI API 错误验证 .env 文件中的 API 密钥格式和有效性
前端连接错误确保后端正在运行并且 VITE_WS_BACKEND_URL 正确
UTF-8 错误与 .env在 Windows 上，使用 notepad++ 打开 .env 文件并将编码设置为 UTF-8
代理配置在 backend/.env 中设置 OPENAI_BASE_URL，URL 路径中包含“v1”

来源： README.md91-98

其他资源