0
点赞
收藏
分享

微信扫一扫

调用第三方接口——支付宝付款

夹胡碰 2024-05-13 阅读 21
人工智能

AI仿站源码教程

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

Supported stacks:
HTML + Tailwind
React + Tailwind
Vue + Tailwind
Bootstrap
Ionic + Tailwind
SVG
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。

举报

相关推荐

0 条评论