Screenshot to Code 由 React/Vite 开发前端和FastAPI开发后端。 同时需要一个能够访问 GPT-4 Vision 的 OpenAI API key。 首先启动后端(使用Poetry来管理依赖): cd backend echo "OPENAI_API_KEY=sk-your-key" > .env poetry install poetry shell poetry run uvicorn main:app --reload --port 7001 启动前...
它就是screenshot-to-code。 而这个项目刚上线也就一周左右,在GitHub上就已经有17.3k的Star。它可以纳入本周爆火项目之一了! 项目介绍 screenshot-to-code的功能实现是借助gpt-4-vision-preview模型,直接给你的屏幕截图转换为HTML/Tailwind CSS,并利用DALL-E 3的图像生成能力,生成外观相似的图像。 说的通俗易懂...
git clone https://github.com/abi/screenshot-to-code 进入软件目录:cd screenshot-to-code 进入后台目录:cd backend 设置GPT-4 的 API key:echo "OPENAI_API_KEY=sk-your-key" > .env 安装Poetry 依赖包管理器:pip install poetry 安装依赖包:
现在，screenshot-to-code工具已经支持了Claude Sonnet 3.5和GPT-4o两大功能！► 前后端安装步骤 项目使用React/Vite作为前端框架，需要获取OpenAI和Anthropic API密钥，采用Poetry进行依赖管理，并通过命令启动后端服务。进入后端目录：cd backend创建.env文件并设置API密钥：echo "OPENAI_API_KEY=sk-your-key" > ...
运行后端程序：进入backend目录，设置OPENAI_API_KEY环境变量，并安装依赖。然后启动uvicorn服务器，指定主模块和端口。若需使用Anthropic功能，请在backend/.env中添加ANTHROPIC_API_KEY。运行前端程序：进入frontend目录，安装依赖并启动开发服务器。成功后，在浏览器中访问 出于调试目的，若您不希望消耗GPT4-Vision的...
screenshot-to-code 应用程序可以将屏幕截图转换为代码(HTML/Tailwind CSS、React、Bootstrap 或 Vue)。 它使用了 GPT-4 Vision 生成代码,并使用 DALL-E 3 生成类似的图像,所以需要设置 OPENAI_API_KEY。 你还可以通过输入网站的 URL 来克隆一个在线网站。
AI 偶尔也会犯迷糊,但 Screenshot-to-Code 支持手动调整生成代码,事半功倍。 如何使用 Screenshot-to-Code? 1. 环境准备 下载代码,安装依赖(或者直接使用托管版)。 2. 获取 API Key 需要OpenAI 或 Anthropic 的 API Key 支持。 3. 上传设计稿
Screenshot to Code 由 React/Vite 开发前端和 FastAPI 开发后端。 同时需要一个能够访问 GPT-4 Vision 的 OpenAI 的密钥。 首先启动后端(使用 Poetry 来管理依赖): cd backend echo"OPENAI_API_KEY=sk-your-key">.env poetry install poetry shell
Getting an OpenAI API key with GPT4-Vision model accessYou don't need a ChatGPT Pro account. Screenshot to code uses API keys from your OpenAI developer account. In order to get access to the GPT4 Vision model, log into your OpenAI account and then, follow these instructions:Open...
How do I get an OpenAI API key?Seehttps://github.com/abi/screenshot-to-code/blob/main/Troubleshooting.md How can I provide feedback?For feedback, feature requests and bug reports, open an issue or ping me onTwitter. 📚 Examples ...