readsensei/ptocode

Put in the picture and convert it to clean HTML/Tailwind/JS code；支持代理中转；free-gpt4apikey;放入图片并将其转换为干净的 HTML/Tailwind/JS 代码,视觉识别，免费使用，图片转页面.;screenshot-to-code

• ​ English 中文
• [free-gpt4apikey]
• Follow me on Twitter!
• 加群640541448领取免费gpt4,dall-e-3

PtoCode（图片转代码）

这是一个简单的应用，能将屏幕截图转化为HTML/Tailwind CSS代码。它使用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 backend
echo "OPENAI_API_KEY=sk-your-key" > .env
poetry install
poetry shell
poetry run uvicorn main:app --reload --port 7001

运行前端:

cd frontend
yarn
yarn dev

打开 http://localhost:3000来使用应用程序。

如果你希望在不同的端口运行后端，需要更新frontend/.env.local中的VITE_WS_BACKEND_URL。

为了调试目的，如果你不想浪费GPT4-Vision的调用次数，你可以在模拟模式下运行后端（这将会播放一个预先录制的响应）：

Docker

如果你的系统上已经安装了Docker，在根目录下，运行以下命令：

<BASH>echo "OPENAI_API_KEY=sk-your-key" > .env
docker-compose up -d --build

应用程序将在 http://localhost:3000上运行。注意，你不能使用这个设置来开发应用程序，因为文件的改变不会触发重建。

常见问题解答

• 我如何提供反馈? 对于反馈、功能请求和报告错误，可以开一个问题反馈或在 qq群 上联系我。

托管版本

🆕 在此处尝试 (自带你的OpenAI密钥 - 你的密钥必须具有对GPT-4 Vision的访问权限。查看 FAQ 部分获取详细信息).