AI仿站源码教程

2024-05-12 12:36
文章标签 ai 源码 教程 仿站

本文主要是介绍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。

这篇关于AI仿站源码教程的文章就介绍到这儿,希望我们推荐的文章对编程师们有所帮助!



http://www.chinasem.cn/article/982643

相关文章

如何为Yarn配置国内源的详细教程

《如何为Yarn配置国内源的详细教程》在使用Yarn进行项目开发时,由于网络原因,直接使用官方源可能会导致下载速度慢或连接失败,配置国内源可以显著提高包的下载速度和稳定性,本文将详细介绍如何为Yarn... 目录一、查询当前使用的镜像源二、设置国内源1. 设置为淘宝镜像源2. 设置为其他国内源三、还原为官方

Maven的使用和配置国内源的保姆级教程

《Maven的使用和配置国内源的保姆级教程》Maven是⼀个项目管理工具,基于POM(ProjectObjectModel,项目对象模型)的概念,Maven可以通过一小段描述信息来管理项目的构建,报告... 目录1. 什么是Maven?2.创建⼀个Maven项目3.Maven 核心功能4.使用Maven H

Java 正则表达式URL 匹配与源码全解析

《Java正则表达式URL匹配与源码全解析》在Web应用开发中,我们经常需要对URL进行格式验证,今天我们结合Java的Pattern和Matcher类,深入理解正则表达式在实际应用中... 目录1.正则表达式分解:2. 添加域名匹配 (2)3. 添加路径和查询参数匹配 (3) 4. 最终优化版本5.设计思

IDEA自动生成注释模板的配置教程

《IDEA自动生成注释模板的配置教程》本文介绍了如何在IntelliJIDEA中配置类和方法的注释模板,包括自动生成项目名称、包名、日期和时间等内容,以及如何定制参数和返回值的注释格式,需要的朋友可以... 目录项目场景配置方法类注释模板定义类开头的注释步骤类注释效果方法注释模板定义方法开头的注释步骤方法注

Python虚拟环境终极(含PyCharm的使用教程)

《Python虚拟环境终极(含PyCharm的使用教程)》:本文主要介绍Python虚拟环境终极(含PyCharm的使用教程),具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,... 目录一、为什么需要虚拟环境?二、虚拟环境创建方式对比三、命令行创建虚拟环境(venv)3.1 基础命令3

使用Node.js制作图片上传服务的详细教程

《使用Node.js制作图片上传服务的详细教程》在现代Web应用开发中,图片上传是一项常见且重要的功能,借助Node.js强大的生态系统,我们可以轻松搭建高效的图片上传服务,本文将深入探讨如何使用No... 目录准备工作搭建 Express 服务器配置 multer 进行图片上传处理图片上传请求完整代码示例

python连接本地SQL server详细图文教程

《python连接本地SQLserver详细图文教程》在数据分析领域,经常需要从数据库中获取数据进行分析和处理,下面:本文主要介绍python连接本地SQLserver的相关资料,文中通过代码... 目录一.设置本地账号1.新建用户2.开启双重验证3,开启TCP/IP本地服务二js.python连接实例1.

Python 安装和配置flask, flask_cors的图文教程

《Python安装和配置flask,flask_cors的图文教程》:本文主要介绍Python安装和配置flask,flask_cors的图文教程,本文通过图文并茂的形式给大家介绍的非常详细,... 目录一.python安装:二,配置环境变量,三:检查Python安装和环境变量,四:安装flask和flas

Spring Security基于数据库的ABAC属性权限模型实战开发教程

《SpringSecurity基于数据库的ABAC属性权限模型实战开发教程》:本文主要介绍SpringSecurity基于数据库的ABAC属性权限模型实战开发教程,本文给大家介绍的非常详细,对大... 目录1. 前言2. 权限决策依据RBACABAC综合对比3. 数据库表结构说明4. 实战开始5. MyBA

Java调用C++动态库超详细步骤讲解(附源码)

《Java调用C++动态库超详细步骤讲解(附源码)》C语言因其高效和接近硬件的特性,时常会被用在性能要求较高或者需要直接操作硬件的场合,:本文主要介绍Java调用C++动态库的相关资料,文中通过代... 目录一、直接调用C++库第一步:动态库生成(vs2017+qt5.12.10)第二步:Java调用C++