配置

相关源文件

• .gitattributes
• .gitignore
• LICENSE
• backend/config.py
• backend/routes/home.py
• frontend/src/components/TermsOfServiceDialog.tsx
• frontend/src/components/ui/progress.tsx
• frontend/src/config.ts

本页面介绍了 Screenshot-to-Code 应用程序的配置系统。它涵盖了如何配置前端和后端组件，包括环境变量、API 密钥和调试选项。有关测试应用程序的信息，请参阅测试。

概述

Screenshot-to-Code 使用基于环境变量的配置系统。应用程序需要特定的 API 密钥才能运行，特别是用于访问 AI 模型。配置分为前端和后端系统，每个系统都有自己的配置文件和环境变量要求。

来源：backend/config.py8-16 frontend/src/config.ts1-12

后端配置

后端配置通过 backend/config.py 文件管理，该文件主要从环境变量加载设置。

核心配置选项

配置变量	环境变量	默认	描述
NUM_VARIANTS	不适用	2	要生成的代码变体数量
OPENAI_API_KEY	OPENAI_API_KEY	无	OpenAI 服务的 API 密钥
ANTHROPIC_API_KEY	ANTHROPIC_API_KEY	无	Anthropic Claude 的 API 密钥
GEMINI_API_KEY	GEMINI_API_KEY	无	Google Gemini 的 API 密钥
OPENAI_BASE_URL	OPENAI_BASE_URL	无	OpenAI API 的自定义基础 URL
REPLICATE_API_KEY	REPLICATE_API_KEY	无	Replicate (图像生成) 的 API 密钥

来源：backend/config.py6-16

调试配置

配置变量	环境变量	默认	描述
SHOULD_MOCK_AI_RESPONSE	MOCK	否	当为 True 时，流式传输模拟响应而不是调用实际 API
IS_DEBUG_ENABLED	IS_DEBUG_ENABLED	否	启用调试模式
DEBUG_DIR	DEBUG_DIR	""	调试日志目录
IS_PROD	IS_PROD	否	指示生产环境

来源：backend/config.py18-25

来源：backend/config.py1-25

前端配置

前端配置通过 frontend/src/config.ts 文件管理，该文件使用 Vite 的环境变量系统从环境变量加载设置。

配置选项

配置变量	环境变量	默认	描述
IS_RUNNING_ON_CLOUD	VITE_IS_DEPLOYED	false	指示应用程序是否部署到云端
WS_BACKEND_URL	VITE_WS_BACKEND_URL	"ws://127.0.0.1:7001"	用于后端通信的 WebSocket URL
HTTP_BACKEND_URL	VITE_HTTP_BACKEND_URL	"http://127.0.0.1:7001"	用于后端通信的 HTTP URL
PICO_BACKEND_FORM_SECRET	VITE_PICO_BACKEND_FORM_SECRET	null	表单提交的密钥

来源：frontend/src/config.ts1-12

来源：frontend/src/config.ts1-12 frontend/src/components/TermsOfServiceDialog.tsx12-28

设置配置

要设置 Screenshot-to-Code 的配置，您需要为前端和后端创建环境变量文件。

后端配置设置

1. 在项目的根目录中创建 .env 文件
2. 添加您的 AI 提供商所需的 API 密钥

OPENAI_API_KEY=your_openai_api_key
ANTHROPIC_API_KEY=your_anthropic_api_key
GEMINI_API_KEY=your_gemini_api_key
REPLICATE_API_KEY=your_replicate_api_key

3. 可选配置调试设置

MOCK=False
IS_DEBUG_ENABLED=True
DEBUG_DIR=debug_logs

4. 用于生产部署

IS_PROD=True

来源：backend/config.py8-25 .gitignore12-13

前端配置设置

1. 在 frontend 目录中创建 .env.local 文件
2. 配置后端 URL 和部署状态

VITE_IS_DEPLOYED=false
VITE_WS_BACKEND_URL=ws://127.0.0.1:7001
VITE_HTTP_BACKEND_URL=http://127.0.0.1:7001

3. 用于表单提交功能（可选）

VITE_PICO_BACKEND_FORM_SECRET=your_form_secret

来源：frontend/src/config.ts1-12 .gitignore12-13

配置流程

下图说明了配置值如何在 Screenshot-to-Code 系统中流动

来源：backend/config.py1-25 frontend/src/config.ts1-12

开发与生产配置

Screenshot-to-Code 对开发和生产环境使用不同的配置设置。

开发模式

在开发模式下

• 默认后端 URL 指向 localhost
• 可以启用调试选项
• 可以使用模拟响应以避免使用 API 积分

生产模式

在生产模式下

• IS_PROD 标志设置为 True
• IS_RUNNING_ON_CLOUD 标志设置为 true
• 后端 URL 指向已部署的服务
• 调试选项通常被禁用

来源：backend/config.py18-25 frontend/src/config.ts1-12

调试配置

该应用程序包含一些专门用于调试目的的配置选项

1. 模拟 AI 响应：将 MOCK=True 设置为 `True` 将使系统返回模拟响应，而不是调用 OpenAI API，这对于开发和测试非常有用。

2. 调试日志：当 IS_DEBUG_ENABLED 设置为 True 时，系统将生成额外的日志以帮助故障排除。

3. 调试目录：DEBUG_DIR 设置指定调试日志的存储位置。

这些选项在开发过程中特别有用，可以避免过多的 API 使用并诊断问题。

来源：backend/config.py18-22

必需与可选配置

某些配置值是应用程序正常运行所必需的，而其他则是可选的

所需配置

• AI 模型 API 密钥：代码生成功能至少需要 OPENAI_API_KEY、ANTHROPIC_API_KEY 或 GEMINI_API_KEY 中的一个。

可选配置

• 图像生成：仅当您想使用图像生成功能时才需要 REPLICATE_API_KEY。
• 调试选项：所有与调试相关的配置都是可选的。
• 自定义 OpenAI URL：仅当您使用自定义 OpenAI API 端点时才需要 OPENAI_BASE_URL。
• 表单密钥：仅当使用服务条款对话框功能时才需要 PICO_BACKEND_FORM_SECRET。

来源：backend/config.py8-16 frontend/src/config.ts11-12

安全考量

配置系统在设计时考虑了安全性

1. 环境变量：敏感信息（如 API 密钥）存储在环境变量中，而不是代码中。

2. Git 排除：.gitignore 文件明确排除了 .env 和 .env.local 文件，以防止意外将敏感信息提交到仓库。

3. 默认安全值：未设置时，配置值默认为安全选项，例如 API 密钥为 None，功能标志为 False。

来源：.gitignore12-13 backend/config.py8-16 frontend/src/config.ts1-12