首页 > Ai资讯 > Ai教程 > 目前最高效的【仿站神器】!截图就能复制网站,完全开源

目前最高效的【仿站神器】!截图就能复制网站,完全开源

发布时间:2024年04月28日

一个简单的工具,可使用 AI 将屏幕截图、模型和 Figma 设计转换为干净、实用的代码。

支持的堆栈:

  • HTML + 顺风
  • 反应 + 顺风
  • Vue + 顺风
  • 引导程序
  • 离子 + 顺风
  • 静止无功发生器

支持的AI模型:

  • GPT-4 Turbo(2024 年 4 月)- 最佳型号
  • GPT-4 Vision(2023 年 11 月)- 在某些输入上比 GPT-4 Turbo 更好的好模型
  • Claude 3 Sonnet – 对于许多输入来说,速度更快,并且与 GPT-4 视觉相当或更好
  • 用于图像生成的 DALL-E 3

我们还刚刚添加了实验性支持,用于拍摄正在运行的网站的视频/屏幕记录并将其转变为功能原型。

开源项目:【GitHub

网盘下载:【点击下载

安装教程:

该应用程序有一个 React/Vite 前端和一个 FastAPI 后端。如果您想使用 Claude Sonnet 或实验性视频支持,您将需要一个能够访问 GPT-4 Vision API 的 OpenAI API 密钥或一个 Anthropic 密钥。

运行后端(我使用 Poetry 进行包管理 –pip install poetry如果你没有它):

Plain text
Copy to clipboard
Open code in new window
EnlighterJS 3 Syntax Highlighter
cd backend
echo "OPENAI_API_KEY=sk-your-key" > .env
poetry install
poetry shell
poetry run uvicorn main:app --reload --port 7001
cd backend
echo "OPENAI_API_KEY=sk-your-key" > .env
poetry install
poetry shell
poetry run uvicorn main:app --reload --port 7001
cd backend
echo "OPENAI_API_KEY=sk-your-key" > .env
poetry install
poetry shell
poetry run uvicorn main:app --reload --port 7001

如果您想使用 Anthropic,请将与您的 Anthropic 的 API 密钥一起ANTHROPIC_API_KEY添加。backend/.env

运行前端:

Plain text
Copy to clipboard
Open code in new window
EnlighterJS 3 Syntax Highlighter
cd frontend
yarn
yarn dev
cd frontend
yarn
yarn dev
cd frontend
yarn
yarn dev

打开http://localhost:5173以使用该应用程序。

如果您希望在不同端口上运行后端,请更新 VITE_WS_BACKEND_URLfrontend/.env.local

出于调试目的,如果您不想浪费 GPT4-Vision 积分,您可以在模拟模式下运行后端(该模式会传输预先录制的响应):

Plain text
Copy to clipboard
Open code in new window
EnlighterJS 3 Syntax Highlighter
MOCK=true poetry run uvicorn main:app --reload --port 7001
MOCK=true poetry run uvicorn main:app --reload --port 7001
MOCK=true poetry run uvicorn main:app --reload --port 7001

Docker 一键安装命令:

Plain text
Copy to clipboard
Open code in new window
EnlighterJS 3 Syntax Highlighter
echo "OPENAI_API_KEY=sk-your-key" > .env
docker-compose up -d --build
echo "OPENAI_API_KEY=sk-your-key" > .env
docker-compose up -d --build
echo "OPENAI_API_KEY=sk-your-key" > .env
docker-compose up -d --build

如果你想要了解关于智能工具类的内容,可以查看 智汇宝库,这是一个提供智能工具的网站。
在这你可以找到各种智能工具的相关信息,了解智能工具的用法以及最新动态。