AI仿站源码教程

AI仿站源码教程

随着AI技术的不断发展，仿站技术已经越来越成熟，通过AI一键仿站，开发者们可以更快速、更高效地搭建网站。传统的前端开发过程中，需要大量的手工编码和设计，而AI仿站技术可以通过截图或视频，自动分析网站结构和样式，然后生成相应的代码。这一创新极大地减轻了开发者的工作负担，提高了开发效率，同时也降低了开发成本。随着AI时代的到来，AI一键仿站将成为前端开发的重要工具，为开发者们带来更加便利和高效的开发体验。

特性

Supported stacks:
HTML + Tailwind
React + Tailwind
Vue + Tailwind
Bootstrap
Ionic + Tailwind
SVG

Supported AI models:

GPT-4 Turbo (Apr 2024) – Best model
GPT-4 Vision (Nov 2023) – Good model that’s better than GPT-4 Turbo on some inputs
Claude 3 Sonnet – Faster, and on par or better than GPT-4 vision for many inputs
DALL-E 3 for image generation

效果展示

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

运行后端（我使用 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

如果要使用 Anthropic，请使用 Anthropic 中的 API 密钥添加 to。ANTHROPIC_API_KEYbackend/.env

运行前端：

cd frontend
yarn
yarn dev

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

如果您希望在其他端口上运行后端，VITE_WS_BACKEND_URL请在frontend/.env.local

出于调试目的，如果您不想浪费 GPT4-Vision 积分，您可以在模拟模式下运行后端（流式传输预先录制的响应）：

MOCK=true poetry run uvicorn main:app --reload --port 7001

如果系统上安装了 Docker，请在根目录中运行：

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

该应用程序将在 http://localhost:5173 启动并运行。请注意，您不能使用此设置开发应用程序，因为文件更改不会触发重新生成。

常见问题
我在设置后端时遇到错误。我该如何解决？ 试试这个。如果仍然不起作用。

cd backend
mkdir backend # yes, inside backend
mv *.py backend/
poetry install
poetry shell
cd backend # yes, backend/backend
poetry run uvicorn main:app --reload --port 7000

而且东西保持不变。frontend

我想一个更简单的解决方案是做mv pyproject.toml ../
如何获取 OpenAI API 密钥？请参阅OpenAI
如何配置 OpenAI 代理？- 如果您无法直接访问 OpenAI API（例如由于国家/地区限制），您可以尝试 VPN，也可以将 OpenAI 基本 URL 配置为使用代理：在设置对话框的 UI 中或直接在 UI 中设置OPENAI_BASE_URL。确保 URL 的路径中有“v1”，因此它应该如下所示：backend/.envhttps://xxx.xxxxx.xxx/v1
如何更新前端连接到的后端主机？- 配置前面的VITE_HTTP_BACKEND_URL和VITE_WS_BACKEND_URL/.env.local 例如，设置 VITE_HTTP_BACKEND_URL=http://124.10.20.1:7001
运行后端时看到 UTF-8 错误？- 在 Windows 上，使用记事本 ++ 打开 .env 文件，然后转到编码并选择 UTF-8。