当前位置： 首页 > news >正文

最新AI系统ChatGPT网站H5系统源码，支持Midjourney绘画

news 2025/9/23 11:55:15

一、前言

SparkAi创作系统是基于ChatGPT进行开发的Ai智能问答系统和Midjourney绘画系统，支持OpenAI-GPT全模型+国内AI全模型。本期针对源码系统整体测试下来非常完美，那么如何搭建部署AI创作ChatGPT？小编这里写一个详细图文教程吧。已支持GPT语音对话、GPT-4-Turbo模型、DALL-E3文生图、GPT-4-1106-Preview多模态模型。支持GPT-4图片对话能力上传图片，ChatFile文档对话总结、Midjourney绘画动态全功能。

《SparkAI系统文档》

https://bx5gkpqv57j.feishu.cn/docx/EOWUdQ04no9PoBxyp6Ecg3AAnhf

系统架构技术栈

  • 前端：Vite4 + Vue3 + TS + Naive-UI

  • 管理端：Vite4 + Vue3 + Element-Plus

  • 服务端：Nodejs + NestJs

  • 数据库：=Mysql5.7 + Redis

  • 额外数据存储：阿里云oss | 腾讯云cos | chevereto图床 任选其一

①新增OpenAI的TTS语音对话功能

支持电脑PC浏览器和手机端使用（调整用户端语音交互，语音输入则语音回复，文本输入则文本回复）

②ChatFile文档对话总结 

③DALL-E3文生图（支持直接对话绘画）

④新增已支持GPT-4图片对话能力（上传图片并识图理解对话）

1.1AI模型提问

1.2人工智能AI绘画

  • 支持同步官方图片重新生成指令
  • 支持绘画过程中实时预览缩略图以及同步实时进度显示
  • 支持Midjourney局部重绘（Vary Region）在线编辑功能
  • 支持同步官方 Vary 指令 单张图片对比加强 Vary(Strong) | Vary(Subtle)
  • 支持绘画Pan调整:⬆️上、⬇️下、⬅️左、➡️右全方向偏移调整图片
  • 支持绘画提升功能：⏫Upscale(Creative)、⏫Upscale(Subtle)、⏫Upscale(4x)、⏫Upscale(2x)等图片调整动作
  • 支持同步MJ图片外延、图片放大、自定义缩放功能： Zoom Out 1.5x、 Zoom Out 2x、↔️Make Square
  • 支持MJ最新V6 Beta绘画模型（V6 Beta模型：能够处理更长的提示词，人物效果更加真实，构图、色调、光影更加细腻）

移动端页面：

1.1 程序核心功能

已支持 OpenAI GPT全模型 + 国内AI全模型 + 绘画池系统 + MJ局部编辑重绘功能+OpenAI TTS语音对话功能 + 文档对话总结功能 + Midjourney绘画动态全功能！

  • AI提问：程序已支持GPT3.5，GPT4.0提问、OpenAIGPT全模型+国内AI全模型、支持GPT联网提问
  • 已支持OpenAIGPT全模型+国内AI全模型，已支持国内AI模型 百度文心一言、微软Azure、阿里云通义千问模型、清华智谱AIChatGLM、科大讯飞星火大模型、腾讯混元大模型等
  • ChatFile文档上传对话功能以及总结对话
  • 新增知识库接入（对接百度千帆知识库），用户端动态显示知识库插件并通过插件的方式选择与知识库对话，可自定义训练内容回答和文档总结，上传文档作为知识库内容用于特定场景对话回答，比如企业文化规章制度、产品说明文档、客服等等各行业知识库等
  • 新增支持MJ最新V6绘画模型（V6模型：能够处理更长的提示词，人物效果更加真实，构图、色调、光影更加细腻）
  • AI绘画：Midjourney绘画（全自定义调参）、Midjourney以图生图、Dall-E3绘画
  • Midjourney绘画动态全功能、绘画过程中实时预览缩略图以及同步实时进度显示
  • 支持最新GPT-4多模态模型、OpenAI GPT-4-Turbo-With-Vision-128K模型
  • 已支持GPT-4图片对话能力（上传图片并识图理解对话）可同时支持5张图同时上传对话
  • 对话插件系统，后续逐步增加插件功能，扩展AI能力
  • 新增KEY支持单独配置消耗费率，比如GPT4-32K比GPT4成本更高应该消耗更多的额度次数
  • 微信公众号+邮箱+手机号注册登录
  • 一键智能思维导图生成
  • 应用广场，支持用户前台自定义添加私密或共享
  • AI绘画广场（画廊）
  • 邀请+代理分销模式、用户每日签到功能、会话记录同步保存
  • 支持对接微信官方支付、易支付、码支付、虎皮椒支付等，自定义聚合会员套餐
  • 其他核心功能、后续其他免费版本功能更新

1.2 更新日志

【V5.0.0】更新功能（2024.01.18号更新）

  1. 重构Midjourney绘画功能，新增支持MJ动态全功能：

  • 新增支持绘画Pan调整:上、下、左、右全方向偏移调整图片

  • 新增支持绘画提升功能：Upscale(Creative)、Upscale(Subtle)、Upscale(4x)、Upscale(2x)等图片调整动作

  • 新增支持同步MJ图片外延、图片放大、自定义缩放功能：Zoom Out 1.5x、Zoom Out 2x、Make Square

2. 新增绘画过程中实时预览缩略图以及同步实时进度显示

3. 调整按钮为根据当前图片状态全动态显示，兼容未来MJ官方可能新增的功能

4. 新增绘制命令显示，绘画状态跟踪、连续大量绘画时方便追踪串联上下级

5. 修复适配MJ官方更新导致V5版本局部重绘功能失效的问题

6. 新增PC浏览器功能菜单栏默认名称显示、调整前端UI主题为紫色以及UI美化、管理后台菜单栏UI优化

7. 调整应用工作台为对话模式，支持持续使用

8. 调整单用户可以同时进行5个任务

9. 优化提交绘画时检查是否有返回错误，避免空等超时；优化绘图失败时，可能未退还余额的问题

10. 优化PDF文档总结对话上传文档时校验额度并扣费，避免恶意上传;上传失败消息提示

11. 优化拉黑和锁定用户时强制用户登出

二、系统模块演示

快速体验

官方演示站：

  • 系统用户端：https://ai.sparkaigf.com
  • 管理后端：https://ai.sparkaigf.com/sparkai/admin
  • 测试账号密码：admin 123456

三、系统功能模块

3.1AI提问

3.2Prompt应用

3.2.1Prompt应用

3.2.2自定义Prompt应用

支持用户自定义创建Prompt应用

3.3 支持Midjourney绘画

3.3.2文生图

3.3.2以图生图

3.4Dall-E3绘画

可直接对话文生图

3.5智能思维导图生成

3.6AI画廊

3.7系统后台管理系统

其他和后台页面太多功能，就不展示了，直接访问演示站点和演示后台。 

四、搭建部署教程

4.1基础env环境配置

在代码中我们提供了基础 环境变量文件配置文件 env.example ，使用前先去掉后缀改为 .env 文件即可，我们在env环境配置文件只需要配置如下东西。

  • 授权码授权ip配置

  • 邮件服务配置

  • mysql数据库 这三项是基础配置、mysql与授权是必须的、在配置mysql与授权的情况下项目才可以启动成功、邮件服务可以后续追加。

4.2env文件代码

# 服务器ip
SPARK_AI_HOST=
# 授权码
SPARK_AI_KEY=# mysql
DB_HOST=localhost
DB_PORT=3306
DB_USER=数据库用户名
DB_PASS=数据库密码
DB_DATABASE=数据库名
DB_LOG=false
DB_SYNC=true#  mailer 邮件服务
MAILER_HOST=smtp.163.com
MAILER_PORT=465
MAILER_USER=发信邮箱
MAILER_PASS=邮箱发信密钥
MAILER_FROM=发信邮箱# Redis
REDIS_PORT=6379
REDIS_HOST=127.0.0.1
REDIS_PASSWORD=
REDIS_DB=0# jwt token
JWT_SECRET=chat-spark
# jwt token 过期时间
JWT_EXPIRESIN=7d
# 接口文档前缀
SWAGGERPREFIX=/docs
# 自定义端口
PORT=9520

五、环境安装

前置条件：

  1. 国内或者海外服务器均可，最低配置2H2G起，建议2H4G甚至更高

  2. 宝塔安装成功

所需环境：

  • Nginx >= 1.19.8
  • MySQL >= 5.7或者MySQL 8.0
  • PHP-7.4（非系统需要环境）
  • PM2管理器 5.5
  • Redis 7.0.11
  • Node版本：>=v16.14.1

注意1：

使用mysql8.0版本，需要重置root密码才能创建数据库

注意2：

同步服务器端口刀宝塔运维面板（重要）

5.1Node版本

使用PM2切换Node版本（必须）

切换Node版本为：v16.19.1（大于v16.14.1）

5.2安装pnpm模块

如果安装不上淘宝源的ssl证书2024.1.22过期了，可能无法安装，切换为官方源，单独安装pnpm模块

5.2.1先设置npm为官方源

npm config set registry https://registry.npmjs.org/

5.2.2单独安装pnpm

npm install -g pnpm

5.3安装Redis

六、部署跑起来

6.1新建站点

进入宝塔 - > 网站 -> 添加站点

6.2开启HTTPS

6.2.1使用自己的ssl证书

6.2.2Let's Encrypt 证书申请

如果没有证书，就使用宝塔提供免费证书，申请 Let's Encrypt

6.3上传系统源码

删除宝塔创建站点生成的默认文件

将程序上传并解压到网站根目录下

6.3.1配置.env文件

在宝塔直接双击 .env.example 文件编辑，或在终端vim编辑

配置完成后将文件后缀删掉、文件名字就是 .env

6.3.2 检查验证Node相关环境

此时再次打开终端、确定我们需要是否有node相关环境

node -v
npm -v
pnpm -v

6.4启动项目

6.4.1开启端口

宝塔面板安全开启 9520 端口和 3306 端口

6.4.2安装依赖

使用终端切换到网站目录

cd /www/wwwroot/网站目录

或直接在网站根目录下输入ssh终端

使用 pnpm i 命令安装依赖

pnpm i

6.4.3启动项目

使用 pnpm start 命令启动项目

pnpm start

6.4.4查看启动日志

输入 pm2 log 查看详细日志、看到下图表示成功！

pm2 log

6.4.5添加反向代理

添加 9520 端口反向代理，宝塔安全需要开启该端口，不然无法访问

七、使用系统

部署完成！此时通过域名即可访问系统了

7.1管理后台

默认前台地址为域名地址 默认后台地址则为：

https://域名地址/sparkai/admin

默认超级管理员账号为：

super ，spark123

7.2修改超级管理员默认密码

登录后，请先修改超级管理员默认密码

7.3搭建完成

八、后台配置&系统版本更新

8.1后台配置

系统配置教程和其他教程请前往系统详情部署文档或博客原教程。

https://www.idcyli.com

8.2系统版本更新

系统版本更新教程请前往系统详情部署文档或博客原教程。

相关文章：

最新AI系统ChatGPT网站H5系统源码，支持Midjourney绘画

一、前言 SparkAi创作系统是基于ChatGPT进行开发的Ai智能问答系统和Midjourney绘画系统，支持OpenAI-GPT全模型国内AI全模型。本期针对源码系统整体测试下来非常完美，那么如何搭建部署AI创作ChatGPT？小编这里写一个详细图文教程吧。已支持GPT…...

编程日记 2024/3/5 20:20:01

【服务器数据恢复】昆腾存储中raid5磁盘阵列数据恢复案例

服务器数据恢复环境&故障： 10个磁盘柜，每个磁盘柜配24块硬盘。9个磁盘柜用于存储数据，1个磁盘柜用于存储元数据。 元数据存储中24块硬盘，组建了9组RAID1阵列1组RAID10阵列，4个全局热备硬盘。 数据存储中&#xff0…...

编程日记 2024/3/5 20:19:00

企业微信变更主体怎么改？

企业微信变更主体有什么作用？现在很多公司都用企业微信来加客户，有时候辛辛苦苦积累了很多客户，但是公司却因为各种各样的原因需要注销，那么就需要通过企业微信变更主体的方法，把企业微信绑定的公司更改为最新的。企业…...

编程日记 2024/3/5 20:17:59

常用生理眼电信号整理合集 (EOG)

目录 Sleep-EDF Sleep-EDF expanded Sleep-EDF 这些信号是从白人男性和女性（21-35 岁）中获得的，没有任何药物治疗；它们包含水平 EOG、FpzCz 和 PzOz EEG，每个采样频率为 100 Hz。 sc* 记录还包含颏下肌电图包络、口鼻…...

编程日记 2024/3/5 20:16:58

【场景题】让你设计一个订单号生成服务，该怎么做？

方案 当设计订单号生成服务时，我们需要考虑唯一性、数据量、可读性、基因法、可扩展性、高性能和高可用性等多个方面。根据这些考虑，一个简单的订单号生成服务设计方案可以采取以下措施： 使用Snowflake算法或第三方分布式ID生成器&#xff…...

编程日记 2024/3/5 20:15:56

使用GraphView实现简单的绘图工具

ShapeItem代码： ShapeItem::ShapeItem(ShapeType type) {m_type type;m_lt QPointF(0, 0);m_rb QPointF(0, 0);m_deleteEnable false;m_bll BllData::getInstance();connect(m_bll, &BllData::deleteShapeEnableSignal, this, &ShapeItem::deleteShap…...

编程日记 2024/3/5 20:14:55

javaWebssh教师荣誉库管理系统myeclipse开发mysql数据库MVC模式java编程计算机网页设计

一、源码特点 java ssh在线授课辅导系统是一套完善的web设计系统（系统采用ssh框架进行设计开发），对理解JSP java编程开发语言有帮助，系统具有完整的源代码和数据库，系统主要采用B/S模式开发。开发环境为TOMCAT7.0…...

编程日记 2024/3/5 20:13:54

Android minigbm框架普法

Android minigbm框架普法 引言 假设存在这么一个场景，我的GPU的上层实现走的不是标准的Mesa接口，且GPU也没有提专门配套的gralloc和hwcompoer实现。那么我们的Android要怎么使用到EGL和GLES库呢，并且此GPU驱动是支持drm实现的，也有…...

编程日记 2024/3/5 20:12:53

01、MongoDB -- 下载、安装、配置文件等配置 及 副本集配置

目录 MongoDB -- 下载、安装、配置 及 副本集配置启动命令启动 mongodb 的服务器（单机和副本集）启动单机模式的 mongodb 服务器启动副本集的 3 个副本节点（mongodb 服务器） 启动 mongodb 的客户端 MongoDB 下载MongoDB 安装1、解压…...

编程日记 2024/3/5 20:10:51

uniapp中导入css和scss的区别

在项目中编写了一个基础的公共样式 common.scss文件 想要将其 导入到app.vue文件中 第一次使用的是import url(static/common.scss); 编译直接报错，无法识别这个文件 原因是 使用import url()是CSS中用于导入外部样式表的语法，但它不适用于导入SCS…...

编程日记 2024/3/5 20:09:50

RabbitMQ-TTL/死信队列/延迟队列高级特性

文章目录 TTL死信队列消息成为死信的三种情况队列如何绑定死信交换机 延迟队列RabbitMQ如何实现延迟队列 总结来源B站黑马程序员 TTL TTLTTL(Time To Live):存活时间/过期时间当信息到达存活时间后，还没有被消费，会被自动清除。RabbitMQ可以对消息设置过…...

编程日记 2024/3/5 20:07:47

docker安装php7.4安装（swoole）

容器 docker pull centos:centos7 docker run -dit -p9100:9100 --name“dade” --privilegedtrue centos:centos7 /usr/sbin/init 一、安装前库文件和工具准备 1、首先安装 EPEL 源 yum -y install epel-release2.安装 REMI 源 yum -y install http://rpms.remirepo.net/en…...

编程日记 2024/3/5 20:04:44

身份证识别系统（安卓）

设计内容与要求： 通过手机摄像头捕获身份证信息，将身份证上的姓名、性别、出生年月、身份证号码保存在数据库中。1）所开发Apps软件至少需由3-5个以上功能性界面组成。要求：界面美观整洁、方便应用；可以使用Android原生…...

编程日记 2024/3/5 20:02:41

Python教程——最后一波来喽

提示：文章写完后，目录可以自动生成，如何生成可参考右边的帮助文档 文章目录 1.使用__slots__2. property3.多重继承 4.定制类5.枚举类6.错误处理7.调试8. 文档测试9.单元测试10. 文件读写11. StringIO和BytesIO12. 操作文件和目录13.序列化14…...

编程日记 2024/3/5 19:58:37

学生管理系统（python实现）

新增学生显示学生查找学生删除学生存档到文件 约定好数据的存储格式： 约定把数据保存在和py文件同级目录中，文件名为record.txt 文件内容按照行文本的方式来表示 首先这是一个文本文件，里面包含了很多行，每一行代表一个学生 …...

编程日记 2024/3/5 19:57:36

Java读取文件

读取文件为String 、访问链接直接跳转html 环境：SpringMVC 、前端jsp InputStreamReader FileInputStream fileInputStream new FileInputStream(formatFile.getHtmlpath());InputStreamReader reader new InputStreamReader(fileInputStream, StandardCharsets…...

编程日记 2024/3/5 19:48:26

曾桂华:车载座舱音频体验探究与思考| 演讲嘉宾公布

智能车载音频 I 分论坛将于3月27日同期举办！ 我们正站在一个前所未有的科技革新的交汇点上，重塑我们出行体验的变革正在悄然发生。当人工智能的磅礴力量与车载音频相交融，智慧、便捷与未来的探索之旅正式扬帆起航。 在驾驶的旅途中&#xff0…...

编程日记 2024/3/5 19:45:22

面试题HTML+CSS+网络+浏览器篇

文章目录 Css预处理sass less是什么？为什么使用他们怎么转换 less 为 css？重绘和回流是什么http 是什么？有什么特点HTTP 协议和 HTTPS 区别什么是 CSRF 攻击HTML5 新增的内容有哪些Css3 新增的特性flex VS grid清除浮动的方式有哪些&#xff…...

编程日记 2024/3/5 19:44:20

wordpress外贸独立站

WordPress外贸电商主题 简洁实用的wordpress外贸电商主题，适合做外贸跨境的电商公司官网使用。 https://www.jianzhanpress.com/?p5025 华强北面3C数码WordPress外贸模板 电脑周边、3C数码产品行业的官方网站使用，用WordPress外贸模板快速搭建外贸网…...

编程日记 2024/3/5 19:41:16

[python] 构建数据流水线（pipeline）

Plum 是一个用于构建数据流水线（pipeline）的 Python 库，它旨在简化和优化数据处理流程，使得数据流转和处理变得更加清晰、高效和可维护。下面我将更详细地介绍 Plum 的特点、功能和使用方法。 Plum 的主要特点和功能：…...

编程日记 2024/3/5 19:40:15

使用VSCode开发Django指南

使用VSCode开发Django指南 一、概述 Django 是一个高级 Python 框架，专为快速、安全和可扩展的 Web 开发而设计。Django 包含对 URL 路由、页面模板和数据处理的丰富支持。 本文将创建一个简单的 Django 应用，其中包含三个使用通用基本模板的页面。在此…...

编程新知 2025/9/17 21:27:15

TDengine 快速体验（Docker 镜像方式）

简介 TDengine 可以通过安装包、Docker 镜像 及云服务快速体验 TDengine 的功能，本节首先介绍如何通过 Docker 快速体验 TDengine，然后介绍如何在 Docker 环境下体验 TDengine 的写入和查询功能。如果你不熟悉 Docker，请使用 安装包的方式快…...

编程新知 2025/9/23 4:46:28

【SpringBoot】100、SpringBoot中使用自定义注解+AOP实现参数自动解密

在实际项目中，用户注册、登录、修改密码等操作，都涉及到参数传输安全问题。所以我们需要在前端对账户、密码等敏感信息加密传输，在后端接收到数据后能自动解密。 1、引入依赖 <dependency><groupId>org.springframework.boot</groupId><artifactId...

编程新知 2025/9/14 23:47:44

跨链模式：多链互操作架构与性能扩展方案

跨链模式&#xff1a;多链互操作架构与性能扩展方案 ——构建下一代区块链互联网的技术基石 一、跨链架构的核心范式演进 1. 分层协议栈&#xff1a;模块化解耦设计 现代跨链系统采用分层协议栈实现灵活扩展&#xff08;H2Cross架构&#xff09;&#xff1a; 适配层&#xf…...

编程新知 2025/8/30 10:09:32

Cloudflare 从 Nginx 到 Pingora：性能、效率与安全的全面升级

在互联网的快速发展中&#xff0c;高性能、高效率和高安全性的网络服务成为了各大互联网基础设施提供商的核心追求。Cloudflare 作为全球领先的互联网安全和基础设施公司&#xff0c;近期做出了一个重大技术决策&#xff1a;弃用长期使用的 Nginx&#xff0c;转而采用其内部开发…...

编程新知 2025/8/29 10:31:59

html-＜abbr＞ 缩写或首字母缩略词

定义与作用 <abbr> 标签用于表示缩写或首字母缩略词&#xff0c;它可以帮助用户更好地理解缩写的含义&#xff0c;尤其是对于那些不熟悉该缩写的用户。 title 属性的内容提供了缩写的详细说明。当用户将鼠标悬停在缩写上时&#xff0c;会显示一个提示框。 示例&#x…...

编程新知 2025/9/22 16:09:02

Android第十三次面试总结（四大 组件基础）

Activity生命周期和四大启动模式详解 一、Activity 生命周期 Activity 的生命周期由一系列回调方法组成&#xff0c;用于管理其创建、可见性、焦点和销毁过程。以下是核心方法及其调用时机&#xff1a; ​onCreate()​​ ​调用时机​&#xff1a;Activity 首次创建时调用。​…...

编程新知 2025/9/13 10:07:19

Hive 存储格式深度解析：从 TextFile 到 ORC，如何选对数据存储方案？

在大数据处理领域&#xff0c;Hive 作为 Hadoop 生态中重要的数据仓库工具&#xff0c;其存储格式的选择直接影响数据存储成本、查询效率和计算资源消耗。面对 TextFile、SequenceFile、Parquet、RCFile、ORC 等多种存储格式&#xff0c;很多开发者常常陷入选择困境。本文将从底…...

编程新知 2025/9/16 2:04:37

sipsak：SIP瑞士军刀！全参数详细教程！Kali Linux教程！

简介 sipsak 是一个面向会话初始协议 (SIP) 应用程序开发人员和管理员的小型命令行工具。它可以用于对 SIP 应用程序和设备进行一些简单的测试。 sipsak 是一款 SIP 压力和诊断实用程序。它通过 sip-uri 向服务器发送 SIP 请求&#xff0c;并检查收到的响应。它以以下模式之一…...

编程新知 2025/9/22 18:06:18

C++.OpenGL （20/64）混合（Blending）

混合（Blending） 透明效果核心原理 #mermaid-svg-SWG0UzVfJms7Sm3e {font-family:"trebuchet ms",verdana,arial,sans-serif;font-size:16px;fill:#333;}#mermaid-svg-SWG0UzVfJms7Sm3e .error-icon{fill:#552222;}#mermaid-svg-SWG0UzVfJms7Sm3e .error-text{fill…...

编程新知 2025/7/6 20:05:42