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

相关文章

Elasticsearch 在 Java 中的使用教程

《Elasticsearch在Java中的使用教程》Elasticsearch是一个分布式搜索和分析引擎,基于ApacheLucene构建,能够实现实时数据的存储、搜索、和分析,它广泛应用于全文... 目录1. Elasticsearch 简介2. 环境准备2.1 安装 Elasticsearch2.2 J

Linux系统中卸载与安装JDK的详细教程

《Linux系统中卸载与安装JDK的详细教程》本文详细介绍了如何在Linux系统中通过Xshell和Xftp工具连接与传输文件,然后进行JDK的安装与卸载,安装步骤包括连接Linux、传输JDK安装包... 目录1、卸载1.1 linux删除自带的JDK1.2 Linux上卸载自己安装的JDK2、安装2.1

Linux卸载自带jdk并安装新jdk版本的图文教程

《Linux卸载自带jdk并安装新jdk版本的图文教程》在Linux系统中,有时需要卸载预装的OpenJDK并安装特定版本的JDK,例如JDK1.8,所以本文给大家详细介绍了Linux卸载自带jdk并... 目录Ⅰ、卸载自带jdkⅡ、安装新版jdkⅠ、卸载自带jdk1、输入命令查看旧jdkrpm -qa

Java使用Curator进行ZooKeeper操作的详细教程

《Java使用Curator进行ZooKeeper操作的详细教程》ApacheCurator是一个基于ZooKeeper的Java客户端库,它极大地简化了使用ZooKeeper的开发工作,在分布式系统... 目录1、简述2、核心功能2.1 CuratorFramework2.2 Recipes3、示例实践3

Python实现无痛修改第三方库源码的方法详解

《Python实现无痛修改第三方库源码的方法详解》很多时候,我们下载的第三方库是不会有需求不满足的情况,但也有极少的情况,第三方库没有兼顾到需求,本文将介绍几个修改源码的操作,大家可以根据需求进行选择... 目录需求不符合模拟示例 1. 修改源文件2. 继承修改3. 猴子补丁4. 追踪局部变量需求不符合很

springboot简单集成Security配置的教程

《springboot简单集成Security配置的教程》:本文主要介绍springboot简单集成Security配置的教程,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,... 目录集成Security安全框架引入依赖编写配置类WebSecurityConfig(自定义资源权限规则

MySQL Workbench 安装教程(保姆级)

《MySQLWorkbench安装教程(保姆级)》MySQLWorkbench是一款强大的数据库设计和管理工具,本文主要介绍了MySQLWorkbench安装教程,文中通过图文介绍的非常详细,对大... 目录前言:详细步骤:一、检查安装的数据库版本二、在官网下载对应的mysql Workbench版本,要是

基于Flask框架添加多个AI模型的API并进行交互

《基于Flask框架添加多个AI模型的API并进行交互》:本文主要介绍如何基于Flask框架开发AI模型API管理系统,允许用户添加、删除不同AI模型的API密钥,感兴趣的可以了解下... 目录1. 概述2. 后端代码说明2.1 依赖库导入2.2 应用初始化2.3 API 存储字典2.4 路由函数2.5 应

通过Docker Compose部署MySQL的详细教程

《通过DockerCompose部署MySQL的详细教程》DockerCompose作为Docker官方的容器编排工具,为MySQL数据库部署带来了显著优势,下面小编就来为大家详细介绍一... 目录一、docker Compose 部署 mysql 的优势二、环境准备与基础配置2.1 项目目录结构2.2 基

Linux安装MySQL的教程

《Linux安装MySQL的教程》:本文主要介绍Linux安装MySQL的教程,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教... 目录linux安装mysql1.Mysql官网2.我的存放路径3.解压mysql文件到当前目录4.重命名一下5.创建mysql用户组和用户并修