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。

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.hqwc.cn/news/691479.html

如若内容造成侵权/违法违规/事实不符,请联系编程知识网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

深度学习之GAN网络

目录 关于GAN网络 关于生成模型和判别模型 GAN网路的特性和搭建步骤(以手写字体识别数据集为例) 搭建步骤 特性 GAN的目标函数(损失函数) 目标函数原理 torch.nn.BCELoss(实际应用的损失函数) 代码…

【电子学会】2023年12月图形化一级 -- 魔法变变变

魔法变变变 1. 准备工作 (1)删除默认角色小猫,添加角色Wizard、Wizard Hat、Bananas; (2)添加背景Theater; (3)为角色Bananas添加任意五个造型,如下图所示。 2. 功能实现 (1)设置角色的位置、大小和方向,如下图所示; (2)按下空格键,魔法师换成“wizard-b…

WHAT - CSS Animationtion 动画系列(一)

目录 一、介绍二、animation-name三、animation-duration四、animation-timing-function4.1 介绍4.2 具体实践:抛物线 五、animation-delay六、animation-iteration-count七、animation-direction八、animation-fill-mode九、animation-play-state 今天我们主要学习…

基于鹈鹕优化算法POA的复杂城市地形下无人机避障三维航迹规划,可以修改障碍物及起始点(Matlab代码)

复杂城市地形下无人机避障三维航迹规划是指在城市等高密度区域内,通过无人机的传感器和导航系统来实现飞行路径的规划和调整,从而避免无人机与建筑物、其他无人机、地面障碍物等发生碰撞和冲突。具体来说,无人机需要实时感知周围环境&#xf…

QuickBooks 2024 for Mac 激活版:智慧管理,财务无忧

想要轻松掌控财务,实现高效管理吗?QuickBooks 2024 for Mac,您的智慧财务管理专家,为您带来前所未有的便利和体验。无论是账务、工资还是销售和库存,它都能一手搞定。直观易用的界面,让您轻松上手&#xff…

ctfshow web274

web274 thinkphp框架序列化漏洞 EXP <?php namespace think; abstract class Model{protected $append[];private $data[];function __construct(){$this->append["lin">["ctf","show"]];$this->data["lin">new Req…

5.10.4 Vision Transformer的条件位置编码(CPE)

用于视觉 Transformer 的条件位置编码&#xff08;CPE&#xff09;方案与之前预定义且独立于输入标记的固定或可学习位置编码不同&#xff0c;CPE 是动态生成的&#xff0c;并以输入标记的局部邻域为条件。 CPE 可以轻松泛化到比模型在训练期间见过的输入序列更长的输入序列。…

使用Ollama本地部署 Llama3大模型!最简单的方法,无需GPU也能使用

文章目录 前言一、安装Ollama客户端二、安装webUI1、安装Docker Desktop2、安装webUI3、设置语言4、下载模型 总结 前言 开源大模型领域当前最强的无疑是 LLaMA 3&#xff01;Meta 这次不仅免费公布了两个性能强悍的大模型&#xff08;8B 和 70B&#xff09;&#xff0c;还计划…

《QT实用小工具·六十三》QT实现微动背景,界面看似静态实则动态

1、概述 源码放在文章末尾 该项目实现了微动背景&#xff0c;界面看似静态实则动态&#xff0c;风动&#xff0c;幡动&#xff0c;仁者心动&#xff0c;所以到底是什么在动&#xff1f;哈哈~ 界面会偷偷一点一点改动文字颜色的颜色填充。 虽然是动态&#xff0c;但是慢到难以…

【牛客】SQL201 查找薪水记录超过15条的员工号emp_no以及其对应的记录次数t

1、描述 有一个薪水表&#xff0c;salaries简况如下&#xff1a; 请你查找薪水记录超过15条的员工号emp_no以及其对应的记录次数t&#xff0c;以上例子输出如下&#xff1a; 2、题目建表 drop table if exists salaries ; CREATE TABLE salaries ( emp_no int(11) NOT N…

当代 Qt 正确的 安装方法 及 多版本切换

此文写于 20240511 首先去网站Index of /official_releases/online_installers下载一个安装器 安装器有什么用? 可以浏览安装版本 安装组件 安装器版本越能 能装的东西越多 现在只能选Qt5 和 Qt6 至于你公司用的Qt4 我也没招 见招时再拆招 安装器 默认国外源 可以换国内…

Go-Zero自定义goctl实战:定制化模板,加速你的微服务开发效率(四)

前言 上一篇文章带你实现了Go-Zero和goctl&#xff1a;解锁微服务开发的神器&#xff0c;快速上手指南&#xff0c;本文将继续深入探讨Go-Zero的强大之处&#xff0c;并介绍如何使用goctl工具实现模板定制化&#xff0c;并根据实际项目业务需求进行模板定制化实现。 通过本文…