图像生成

相关源文件

• backend/image_generation/__init__.py
• backend/image_generation/core.py
• backend/image_generation/replicate.py
• backend/llm.py
• backend/routes/generate_code.py
• backend/run_image_generation_evals.py

本文档提供了 screenshot-to-code 应用程序中图像生成系统的详细技术概述。该系统负责识别 AI 生成代码中的占位符图像，并根据 alt 文本描述用 AI 生成的图像替换它们。

系统概览

图像生成系统是在代码生成后运行的可选后处理步骤。启用后，它会扫描 HTML 中的占位符图像（特别是 URL 以“https://placehold.co”开头的图像），提取其 alt 文本作为提示，然后生成真实图像进行替换。

来源： backend/image_generation/core.py96-158 backend/image_generation/replicate.py5-65

与代码生成的集成

图像生成过程在 AI 生成 HTML 代码后触发。代码生成的 WebSocket 处理程序调用 perform_image_generation()，该函数确定要使用的图像模型并触发图像生成过程。

来源： backend/routes/generate_code.py41-73 backend/routes/generate_code.py418-436

支持的图像生成模型

该系统支持两种不同的图像生成模型

1. DALL-E 3 (OpenAI)：在提供 OpenAI API 密钥时为默认选项
2. Flux Schnell (Replicate)：在提供 Replicate API 密钥时使用（如果两者都可用，则优先于 DALL-E）

perform_image_generation() 函数中包含模型选择逻辑

来源： backend/routes/generate_code.py41-73

核心功能

图像生成过程

负责图像生成的主要函数是 core.py 中的 generate_images()

功能	目的
generate_images()	处理 HTML 以查找和替换占位符图像的主要入口点
process_tasks()	并行创建和运行图像生成任务
generate_image_dalle()	使用 DALL-E 3 生成图像
generate_image_replicate()	使用 Replicate 的 Flux 模型生成图像
call_replicate()	向 Replicate 的服务发出 API 调用
perform_image_generation()	WebSocket 处理程序中的集成点

来源： backend/image_generation/core.py96-158 backend/image_generation/core.py10-36 backend/image_generation/core.py39-52 backend/image_generation/core.py55-67 backend/image_generation/replicate.py5-65 backend/routes/generate_code.py41-73

HTML 处理逻辑

图像生成系统按照以下步骤处理 HTML

1. 使用 BeautifulSoup 解析 HTML
2. 查找 HTML 中的所有 <img> 标签
3. 过滤 URL 以“https://placehold.co”开头的图像
4. 从每个占位符图像中提取 alt 属性
5. 使用 alt 文本作为提示生成新图像
6. 将占位符 URL 替换为生成的图像 URL
7. 根据占位符尺寸保留宽度和高度属性

来源： backend/image_generation/core.py96-158

图像缓存

该系统实现了一个缓存机制，以避免在代码更新过程中重复生成相同的图像

1. 将一个 image_cache 字典传递给 generate_images() 函数
2. 它将图像 alt 文本映射到先前生成的图像 URL
3. 对于缓存中已有的 alt 文本，将跳过新图像生成
4. 缓存会在一个会话中持续存在，并在代码更新之间保持不变
5. 这提高了性能并确保了跨代码迭代的图像一致性

来源： backend/routes/generate_code.py204-210 backend/image_generation/core.py100-137

API 参数

DALL-E 3 配置

使用 DALL-E 3 时，系统使用以下参数

参数	值	描述
model	"dall-e-3"	特定的 DALL-E 模型版本
quality	"standard"	图像质量设置
style	"natural"	图像风格设置
n	1	要生成的图像数量
size	"1024x1024"	图像尺寸

来源： backend/image_generation/core.py39-52

Flux 配置

通过 Replicate 使用 Flux Schnell 时，系统使用以下参数

参数	值	描述
num_outputs	1	要生成的图像数量
aspect_ratio	"1:1"	图像纵横比
output_format	"png"	图像格式
output_quality	100	质量设置（最大值）

来源： backend/image_generation/core.py55-67 backend/image_generation/replicate.py5-65

错误处理

图像生成系统包含强大的错误处理机制，以确保即使图像生成失败，代码生成过程也能继续进行

1. 图像生成过程中的错误将被捕获并记录
2. 如果图像生成失败，占位符将保持不变
3. 该过程将继续处理其他图像，确保部分成功
4. API 特定错误（身份验证、速率限制等）将得到妥善处理

来源： backend/image_generation/core.py10-36 backend/image_generation/replicate.py22-65

评估工具

代码库包含一个独立的评估工具（run_image_generation_evals.py），该工具允许使用一组标准提示来测试和比较不同图像生成模型的输出。

来源： backend/run_image_generation_evals.py1-86