项目地址：https://screenshottocode.com/

这个简单的应用程序将屏幕截图转换为代码（HTML/Tailwind CSS、React、Bootstrap 或 Vue）。它使用 GPT-4 Vision 生成代码，并使用 DALL-E 3 生成外观相似的图像。您现在还可以输入 URL 来克隆实时网站！

项目实践

开始使用

带上您自己的 OpenAI 密钥 -您的密钥必须有权访问 GPT-4 Vision

本地

该应用程序有一个 React/Vite 前端和一个 FastAPI 后端。您将需要一个能够访问 GPT-4 Vision API 的 OpenAI API 密钥。运行后端（我使用 Poetry 进行包管理 -pip install poetry如果你没有它）：cd backendecho "OPENAI_API_KEY=sk-your-key" > .envpoetry installpoetry shellpoetry run uvicorn main:app --reload --port 7001

运行前端：

cd frontendyarnyarn dev

打开http://localhost:5173以使用该应用程序。如果您希望在不同端口上运行后端，请更新 VITE_WS_BACKEND_URLfrontend/.env.local出于调试目的，如果您不想浪费 GPT4-Vision 积分，您可以在模拟模式下运行后端（该模式会传输预先录制的响应）：MOCK=true poetry run uvicorn main:app --reload --port 7001

配置

• 如果需要使用代理，您可以配置 OpenAI 基本 URL：在backend/.env设置对话框中或直接在 UI 中设置 OPENAI_BASE_URL

Docker

如果您的系统上安装了 Docker，请在根目录中运行：echo "OPENAI_API_KEY=sk-your-key" > .envdocker-compose up -d --build该应用程序将在http://localhost:5173启动并运行。请注意，您无法使用此设置开发应用程序，因为文件更改不会触发重建。

托管版本

    以上就是本篇文章【AI从截图直接生成代码、前端程序员的福音】的全部内容了，欢迎阅览 ！ 文章地址：http://w.yusign.com/news/5053.html 
     资讯      企业新闻      行情      企业黄页      同类资讯      首页      网站地图      返回首页 述古往 http://w.yusign.com/mobile/ , 查看更多