前端新手小白的第一个AI全栈项目---AI聊天室
前言
ok,大家好。- ̗̀(๑ᵔ⌔ᵔ๑)最近也是想做自己的第一个前后端分离的项目,刚好最近学了一点AI接口的实现。想着用接口做一个自己的ai聊天室并且尝试一下全栈式开发。中间真的解决了很多问题,也是成功之后也是想要将实现过程分享一下,真的很有成就感!♡⸜(˶˃ ᵕ ˂˶)⸝♡,下面是我的功能实现后的截图:
项目流程真的很简单:
- 用户点击提交之后,将发送网络请求给服务器
- 服务器收到响应之后调用接口然后返回给前端
- 再渲染到页面上就完成啦
仔细想想为什么感觉没啥功能,自己却研究写了一个上午
算了,纠结无用。开始接下来的主题!下面是项目目录:
- 分为前端客户端client
- 后端为server服务器(简单介绍一下这些文件)
.env
是我用来保管我的openAI接口密钥的app.mjs
是主要的服务器功能模块chat.mjs
是我的openAI封装的功能模块
Client
客户端Client HTML-CSS
首先是聊天室的html
结构和css样式
设置:
jcode
客户端Client JS
客户端的js主要实现的功能就是
- 拿到用户输入的数据,发送给服务器端,
- 拿到返回的结果然后渲染。
因为调用接口返回结果中间需要2-3秒的等待时间,用户可能不知道已经发送过请求而疯狂点击发送按钮,我选择了让用户点击之后禁用按钮的点击,直到前端拿到了后端返回的结果后才可以再次点击发送。
jcode
Server
后端框架
这里我使用的是Koa框架,Koa 是一个现代化的、轻量级的 Node.js Web 应用框架。
下面是使用流程
- 创建一个Koa的Web服务对象
- 使用@koa/cors 中间件解决跨域问题
- 使用koa-router中间件来监听当前端口的网络请求
- 使用@koa/bodyparser 来解析请求头的内容
跨域问题
这里简单讲一下什么是跨域问题,跨域问题就是不同源网站进行跨源访问时触发的浏览器安全机制,叫做同源策略。所有要解决跨源就需要服务器进行请求设置,允许哪些网站可以访问。这里我使用@koa/cors来解决跨域问题。
Koa使用中间件是直接通过Web服务对象.use()就可以直接将中间件挂载在服务对象上,十分方便。
下面是我的端口监听
router.post('/ai', async ctx => {// es6 对象解构let { value } = ctx.request.body;try {// 这里的aiChat是我封装的ai接口const response = await aiChat(client, value);// 成功拿到数据就返回状态码200ctx.response.body = {status: 200,res: response};} catch (err) {// 失败就返回状态码500ctx.response.body = {status: 500,error: err.message}}
})
这里是我封装在chat.mjs的aiChat接口功能接口,这里使用的是es6的es module导出,
app.mjs也都是使用的import导入
export default async (client, prompt) => {// 文生图 AIGCconst response = await client.chat.completions.create({model: 'gpt-3.5-turbo', // 适合聊天的模型 很多种messages: [{role: 'user',content: prompt}],//只生成一条信息n: 1})// console.log(response.choices[0].message.content);return response.choices[0].message.content;
};
下面是我的完整app.mjs代码,点击
jcode
密钥的获取
这里当然不可能上传我的密钥啦,如果有小伙伴对我这个有兴趣想实现的话。可以通过下面这个国内的openai代理商拿到openai的密钥,第一次注册会免费送1$的token哦,足够了。- ̗̀(๑ᵔ⌔ᵔ๑)
网址:https://gpt302.saaslink.net/79WE5l
注册之后,打开这里
拿到api key之后就可以替换掉我内容里的这个位置,就可以啦~
结语
讲实话,以前只会一些基本的js和css。从来没有接触过全栈的开发方式,第一次做真的是焦头烂额,不过在成功之后真的很有成就感♡⸜(˶˃ ᵕ ˂˶)⸝♡,同时也希望这篇文章也能给和我有同样境地的小伙伴一些帮助。
最后,如果还喜欢这篇文章的话,就点个关注或者是赞吧。谢谢- ̗̀(๑ᵔ⌔ᵔ๑)
相关文章:

前端新手小白的第一个AI全栈项目---AI聊天室
前言 ok,大家好。- ̗̀(๑ᵔ⌔ᵔ๑)最近也是想做自己的第一个前后端分离的项目,刚好最近学了一点AI接口的实现。想着用接口做一个自己的ai聊天室并且尝试一下全栈式开发。中间真的解决了很多问题,也是成功之后也是想要将实现过程分享一下&a…...

金升阳电源被制裁,广州顶源电源模块可以完美替换
广州顶源电子科技股份有限公司,座落于国家高新技术开发区---广州科学城,是一家集研发、生产、销售及服务于一体的DC-DC,AC-DC电源的生产厂家。 公司通过了IATF16949汽车认证及ISO9001:2015质量管理体系认证。拥有专家级研发团队,产品研发经过…...

《数据赋能:一本书讲透数字化营销与运营》—— 从正确的数据观开始
基于数据打通的“全链路”营销是当下的“时髦”,应用它的前提是什么?深度营销和运营的关键数据如何获得?如何利用数据进行更精准的营销投放?如何利用数据优化投放的效果?如何促进消费者的转化,以及激活留存…...
JDK 24:Leyden
Project Leyden 发布了其首个早期版本(24-leyden2-8 2024/6/20)。初始版本专注于缩短 Java 应用程序的启动时间。 1.特点 提前编译 Java 方法,以便在应用程序在生产运行中启动时立即本地执行它们;提前解析常量池条目可以让 AOT 编译器生成更好的代码&a…...
对于图片转3d人脸方面的研究
1.一个开源的可以运行的项目(face3d/README.md at master yfeng95/face3d GitHub) 在配置好环境后,让我们一个一个py文件运行它(我将给出中文注释) 1)1_pipeline.py 将一个3d头像的mat文件转换为jpg…...
.NET C# 八股文 代码阅读(一)
.NET C# 八股文 代码阅读(一) 目录 .NET C# 八股文 代码阅读(一)1 两种获10000个数的方式,哪种效率更高?为什么?2 请说出以下代码AB谁先打印,AB打印的值分别为多少?3 关于…...

C++用Crow实现一个简单的Web程序,实现动态页面,向页面中输入数据并展示
Crow是一个轻量级、快速的C微框架,用于构建Web应用程序和RESTful API。 将处理前端页面的POST请求以添加数据的逻辑添加到 /submit 路由中,并添加了一个新的路由 / 用于返回包含输入框、按钮和表格的完整页面。当用户向表格添加数据时,JavaS…...

南信大尹志聪教授为一作在顶级综合性期刊《Natl. Sci. Rev.》发文:传统梅雨停摆,江南缘何不再多烟雨?
文章简介 论文名称:Traditional Meiyu–Baiu has been suspended by global warming 第一作者及单位:尹志聪(教授|南京信息工程大学大气科学学院) 通讯作者及单位:王会军(院士|南京信息工程大学大气科学学院) 文章发…...

程序员如何用ChatGPT解决常见编程问题:实例解析
引言 在现代编程的世界中,技术进步日新月异,程序员们面临着各种各样的挑战和问题。解决这些问题的过程中,找到合适的工具至关重要。ChatGPT作为一种先进的人工智能语言模型,能够帮助程序员迅速、高效地解决常见的编程问题。本文将…...

初识 SpringMVC,运行配置第一个Spring MVC 程序
1. 初识 SpringMVC,运行配置第一个Spring MVC 程序 文章目录 1. 初识 SpringMVC,运行配置第一个Spring MVC 程序1.1 什么是 MVC 2. Spring MVC 概述2.1 Spring MVC 的作用: 3. 运行配置第一个 Spring MVC 程序3.1 第一步:创建Mave…...

STM32F1+HAL库+FreeTOTS学习1——FreeRTOS入门
STM32F1HAL库FreeTOTS学习1——FreeRTOS入门 裸机开发与操作系统嵌入式操作系统简介FreeRTOS简介FreeRTOS的几个重要概念任务调度器任务状态状态列表 裸机开发与操作系统 在以往的嵌入式学习中,我们最常用的就是裸机开发,所谓裸机开发就是指在没有操作系…...

杭州代理记账报税全程托管专业实力全面指南
杭州代理记税报税服务可以为企业提供全程托管财务管理解决方案,确保企业的财务工作专业、高效、合规。以下是杭州代理记税报税服务全面指南: https://www.9733.cn/news/detail/185.html 一、代理记账报税服务的内容 基础服务: 每日记…...

PHP 界的扛把子 Swoole 异步通信利器
大家好,我是码农先森。 引言 我今天主要介绍的内容是包括但不仅限于 Swoole ,也有一部分 Go 语言的内容。 为什么要介绍 Swoole ? 先说一说背景吧,我们项目组之前要为《香港 01》开发一个积分系统的项目,这个系统的主要功能包…...

40.连接假死-空闲检测-发送心跳
连接假死情况 1.网络设备出现故障,例如网卡,机房等。底层的TCP连接已经断开,但应用程序没有感知到,仍然占着资源。 2.公网网络不稳定,出现丢包。若果连续出现丢包,这时现象就是客户端数据发不出去,服务端也一直收不到数据,就这么一直耗着。 3.应用程序线程阻塞,无法…...

hdfs高可用文件系统架构
1、整体架构 2、角色简介 2.1、namenode NameNode 是 HDFS 集群中的核心组件,负责管理文件系统的元数据、处理客户端请求、管理数据块、确保数据完整性和高可用性。由于其重要性,NameNode 的性能和可靠性直接影响整个 HDFS 集群的性能和可靠性。在生产…...

从官方源码精简出第1个FreeRTOS程序
一、下载官方源码 1、打开百度搜索freerots,找到官网:FreeRTOS官网 2、将源码解压到没有中文目录的路径下 二、删减目录 1、删除FreeRTOS-Plus和tools 2、删除FreeRTOS/Demo下除CORTEX_STM32F103_Keil外的所有文件 3、删除FreeRTOS\Source\portable下除RVDS和MemM…...

谷歌上搞下来的,无需付费,可以收藏!
在数字化时代,我们越来越依赖于智能设备来获取信息和知识。中国智谋App正是这样一款应用,它将中国古代的智慧与谋略书籍带入了我们的移动设备,让我们能够随时随地学习和领悟。而且提供文言文的原文和译文。 软件下载方式:谷歌上搞…...

宿主机无法通过ip连接wsl2解决方案
文章目录 原因排查网络模式win11防火墙关闭wsl ubuntu防火墙 如果之前能连接现在连接不上可以参考该方案 原因排查 网络模式win11防火墙(win11新增了Hyper-V防火墙)wsl2 ubuntu防火墙 网络模式 wsl2的默认网络模式是NAT,建议修改为镜像模式。在C:\Users\<User…...
Ruby编程语言学习
学习Ruby编程语言,你可以按照以下步骤进行: ### 1. 基础知识入门 #### 安装Ruby - 访问Ruby官网(https://www.ruby-lang.org/)下载适合你操作系统的版本。 - 对于Linux用户,可以使用包管理器安装。 #### 学习资源 -…...

Redis实战—基于setnx的分布式锁与Redisson
本博客为个人学习笔记,学习网站与详细见:黑马程序员Redis入门到实战 P56 - P63 目录 分布式锁介绍 基于SETNX的分布式锁 SETNX锁代码实现 修改业务代码 SETNX锁误删问题 SETNX锁原子性问题 Lua脚本 编写脚本 代码优化 总结 Redisson 前言…...
web vue 项目 Docker化部署
Web 项目 Docker 化部署详细教程 目录 Web 项目 Docker 化部署概述Dockerfile 详解 构建阶段生产阶段 构建和运行 Docker 镜像 1. Web 项目 Docker 化部署概述 Docker 化部署的主要步骤分为以下几个阶段: 构建阶段(Build Stage):…...

stm32G473的flash模式是单bank还是双bank?
今天突然有人stm32G473的flash模式是单bank还是双bank?由于时间太久,我真忘记了。搜搜发现,还真有人和我一样。见下面的链接:https://shequ.stmicroelectronics.cn/forum.php?modviewthread&tid644563 根据STM32G4系列参考手…...

23-Oracle 23 ai 区块链表(Blockchain Table)
小伙伴有没有在金融强合规的领域中遇见,必须要保持数据不可变,管理员都无法修改和留痕的要求。比如医疗的电子病历中,影像检查检验结果不可篡改行的,药品追溯过程中数据只可插入无法删除的特性需求;登录日志、修改日志…...

页面渲染流程与性能优化
页面渲染流程与性能优化详解(完整版) 一、现代浏览器渲染流程(详细说明) 1. 构建DOM树 浏览器接收到HTML文档后,会逐步解析并构建DOM(Document Object Model)树。具体过程如下: (…...

Java面试专项一-准备篇
一、企业简历筛选规则 一般企业的简历筛选流程:首先由HR先筛选一部分简历后,在将简历给到对应的项目负责人后再进行下一步的操作。 HR如何筛选简历 例如:Boss直聘(招聘方平台) 直接按照条件进行筛选 例如:…...
laravel8+vue3.0+element-plus搭建方法
创建 laravel8 项目 composer create-project --prefer-dist laravel/laravel laravel8 8.* 安装 laravel/ui composer require laravel/ui 修改 package.json 文件 "devDependencies": {"vue/compiler-sfc": "^3.0.7","axios": …...
【Nginx】使用 Nginx+Lua 实现基于 IP 的访问频率限制
使用 NginxLua 实现基于 IP 的访问频率限制 在高并发场景下,限制某个 IP 的访问频率是非常重要的,可以有效防止恶意攻击或错误配置导致的服务宕机。以下是一个详细的实现方案,使用 Nginx 和 Lua 脚本结合 Redis 来实现基于 IP 的访问频率限制…...
深入理解Optional:处理空指针异常
1. 使用Optional处理可能为空的集合 在Java开发中,集合判空是一个常见但容易出错的场景。传统方式虽然可行,但存在一些潜在问题: // 传统判空方式 if (!CollectionUtils.isEmpty(userInfoList)) {for (UserInfo userInfo : userInfoList) {…...

Cilium动手实验室: 精通之旅---13.Cilium LoadBalancer IPAM and L2 Service Announcement
Cilium动手实验室: 精通之旅---13.Cilium LoadBalancer IPAM and L2 Service Announcement 1. LAB环境2. L2公告策略2.1 部署Death Star2.2 访问服务2.3 部署L2公告策略2.4 服务宣告 3. 可视化 ARP 流量3.1 部署新服务3.2 准备可视化3.3 再次请求 4. 自动IPAM4.1 IPAM Pool4.2 …...

springboot 日志类切面,接口成功记录日志,失败不记录
springboot 日志类切面,接口成功记录日志,失败不记录 自定义一个注解方法 import java.lang.annotation.ElementType; import java.lang.annotation.Retention; import java.lang.annotation.RetentionPolicy; import java.lang.annotation.Target;/***…...