Screen-to-Code是一款高效工具，凭借其尖端的AI技术，能够将屏幕截图、模型以及Figma设计迅速转化为整洁、实用的代码。目前，该工具已支持Claude Sonnet 3.5和领先的GPT-4o模型。
Screen-to-Code的技术支持涵盖了多种框架与语言：
- 结合了Tailwind框架的HTML与CSS应用。
- React与Tailwind的协同工作。
- Vue与同样运用Tailwind的协同创作。
- 使用Bootstrap搭建的项目。
- 采用Ionic并辅以Tailwind的强大组合。
- SVG图形与设计的支持。
Screen-to-Code的功能特性还包括支持的AI模型：
- Claude Sonnet 3.5，此为首选模型。
- GPT-4o，同样具有卓越表现。
- 对于图像生成，还支持DALL-E 3或通过Replicate使用的Flux Schnell。
该应用集成了React/Vite前端与FastAPI后端，提供了强大的功能与灵活性。
关于密钥信息：
- OpenAI API密钥，用于访问GPT-4。
- Anthropic密钥（可选），用于额外的功能支持。
- 建议同时使用这两种密钥，以便比较不同模型的结果差异。
若您希望尝试使用Ollama开源模型运行此应用（因质量欠佳，不推荐），请参考相关指南。
后端运行说明：我们推荐使用Poetry进行包管理（请通过pip install poetry进行安装）。
您还可以在加载前端后点击齿轮图标，通过设置对话框来配置密钥。
前端启动方法：在浏览器中打开localhost:5173即可使用该应用。
若需在其他端口上运行后端，请在frontend/.env.local文件中更新VITE_WS_BACKEND_URL。
为了调试目的，如不想消耗GPT4-Vision积分，您可选择在模拟模式下运行后端（流式传输预先录制的响应）。
若您的系统安装了Docker，请在根目录运行相关指令，应用将在localhost:5173上启动并运行。
注意：在开发过程中如遇到后端设置问题，可尝试相应的解决措施。如依然无法解决，建议提出问题以获取帮助。
关于OpenAI API密钥的获取及OpenAI代理的配置方法，请参照相关指南进行操作。
调整前端连接的后端主机，可在front/.env.local文件中配置VITE_HTTP_BACKEND_URL和VITE_WS_BACKEND_URL。例如，设置VITE_HTTP_BACKEND_URL为124.10.20.1:7001。
若在运行后端时遇到UTF-8错误，特别是在Windows系统上，请使用notepad++打开.env文件，转到编码设置并选择UTF-8格式。