前端新手小白的第一个AI全栈项目---AI聊天室

前言

ok,大家好。- ̗̀(๑ᵔ⌔ᵔ๑)最近也是想做自己的第一个前后端分离的项目,刚好最近学了一点AI接口的实现。想着用接口做一个自己的ai聊天室并且尝试一下全栈式开发。中间真的解决了很多问题,也是成功之后也是想要将实现过程分享一下,真的很有成就感!♡⸜(˶˃ ᵕ ˂˶)⸝♡,下面是我的功能实现后的截图:

image.png

项目流程真的很简单:

  • 用户点击提交之后,将发送网络请求给服务器
  • 服务器收到响应之后调用接口然后返回给前端
  • 再渲染到页面上就完成啦

    仔细想想为什么感觉没啥功能,自己却研究写了一个上午下载.jpg

算了,纠结无用。开始接下来的主题!下面是项目目录:

image.png

  • 分为前端客户端client
  • 后端为server服务器(简单介绍一下这些文件)
    1. .env是我用来保管我的openAI接口密钥的
    2. app.mjs是主要的服务器功能模块
    3. 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

注册之后,打开这里

image.png

image.png

image.png
拿到api key之后就可以替换掉我内容里的这个位置,就可以啦~
image.png

结语

讲实话,以前只会一些基本的js和css。从来没有接触过全栈的开发方式,第一次做真的是焦头烂额,不过在成功之后真的很有成就感♡⸜(˶˃ ᵕ ˂˶)⸝♡,同时也希望这篇文章也能给和我有同样境地的小伙伴一些帮助。
最后,如果还喜欢这篇文章的话,就点个关注或者是赞吧。谢谢- ̗̀(๑ᵔ⌔ᵔ๑)

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

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

相关文章

基于CNN卷积神经网络的MQAM调制识别matlab仿真

目录 1.算法运行效果图预览 2.算法运行软件版本 3.部分核心程序 4.算法理论概述 4.1 CNN模型结构 4.2 损失函数与优化 4.3 训练与测试 5.算法完整程序工程 1.算法运行效果图预览 (完整程序运行后无水印) 2.算法运行软件版本 matlab2022a 3.部分核心程序 &#xff0…

d3dx9_42.dll找不到怎么正确处理?教学级修复d3dx9_42.dll的方法分享

d3dx9_42.dll找不到?别着急,这只是普普通通的dll文件找不到而已,它可能因为各种原因而导致丢失,我们只要直接对d3dx9_42.dll进行修复就可以了。下面我们一起来了解一下d3dx9_42.dll找不到的正确处理方法。 一.d3dx9_42.dll找不到是…

深度学习方法在谣言检测中的研究现状

摘要 管理社交媒体上的谣言,减少谣言对社会的危害。许多研究使用深度学习方法来检测开放网络中的谣言。为了从多个角度全面梳理谣言检测的研究现状,本文从特征选择、模型结构和研究方法三个角度分析了这一高度集中的工作。从特征选择的角度,将…

七天速通javaSE:第二天 基础:标识符与数据类型

文章目录 前言一、注释与标识符1. 注释2. 标识符2.1 标识符2.2 关键字 二、数据类型1. 语言类型2. 数据类型2.1 基本数据类型2.2引用数据类型 三、类型转换1. 自动转换2. 强制转换(不建议) 四、代码规范 前言 今天将学习Java语法的基础,认识…

DHCP详解:概念、架构、原理、搭建过程、常用命令与实战案例

一、DHCP概述 1.1 DHCP的定义 DHCP(Dynamic Host iguration Protocol,动态主机配置协议)是一种网络管理协议,用于自动分配IP地址以及其他网络配置参数(如子网掩码、网关地址、DNS服务器等)。通过DHCP&…

c语言学习记录(十)———函数

文章目录 前言一、函数的基本用法二、函数的参数传递1.基本方式2 数组在函数中的传参 前言 一个学习C语言的小白~ 有问题评论区或私信指出~ 提示:以下是本篇文章正文内容,下面案例可供参考 一、函数的基本用法 函数是一个完成特定功能的代码模块&…

中国电子学会青少年编程等级考试真题下载

全国青少年软件编程等级考试真题下载,有答案解析 1. 图形化Scratch一级下载 链接:https://pan.baidu.com/s/1C9DR9-hT1RUY3417Yc8RZQ?pwdg8ac 提取码:g8ac 2.图形化Scratch二级下载 链接:https://pan.baidu.com/s/1HI7GaI4ii…

EtherCAT主站IGH -- 0 -- 该EtherCAT主站IGH专栏后续安排

EtherCAT主站IGH -- 0 -- 该EtherCAT主站IGH专栏后续安排 0 IGH视频欣赏及源代码链接:1 该EtherCAT主站IGH专栏后续安排1.1 介绍IGH文件和函数:1.2 介绍IGH主要结构体:1.3 在Ubuntu系统环境搭建自己的EtherCAT主站:1.4 使用Wireshark监控并分析EtherCAT数据:1.5 介绍…

海外代理IP哪个可靠?如何测试代理的稳定性?

在数字化时代,互联网已成为我们日常生活的重要组成部分。然而,随着网络活动的增加,我们面临的安全威胁也随之增加。 黑客攻击、数据泄露、网络钓鱼等安全事件频发,严重威胁着我们的个人隐私和网络安全。代理服务器在当今的互联网世…

深入学习Java1415新特性

一、超实用的Java14新特性 1.Java14新特性概述 2.环境安装 3.超实用新特性

PyCharm:功能强大的Python IDE的下载与安装

目录 1. PyCharm2. PyCharm下载3. PyCharm安装4. PyCharm的Python配置1. PyCharm 是一款由JetBrains公司开发的Python集成开发环境(IDE)。它提供了一整套强大的工具和功能,帮助Python开发人员提高工作效率,简化编程流程。PyCharm主要具有以下特点和功能: 编码协助:PyCha…

LLM大模型算法学习资源持续整理

文章目录 waytoagiLLM101llm-coursellm-cookbook waytoagi 飞书文档写的AGI知识库。 https://www.waytoagi.com/ LLM101 karpathy更新中的大模型教程: https://github.com/karpathy/LLM101n llm-course Course to get into Large Language Models (LLMs) wi…

node mySql 实现数据的导入导出,以及导入批量插入的sql语句

node 实现导出, 在导出excel中包含图片(附件) node 实现导出, 在导出excel中包含图片(附件)-CSDN博客https://blog.csdn.net/snows_l/article/details/139999392?spm1001.2014.3001.5502 一、效果 如图: 二、导入 …

iOS 实现类似抖音滚动效果

效果图 思路 整体上我们使用tableView实现,为了预留内容的缓冲,我们将tableView 的contentinset设置为上面一个屏幕的高度,下面一个屏幕的高度,左右为0,这样保证我们滚动过去的时候 都是准备好的内容 然后就是滑动效果…

25届最近4年中国科学技术大学自动化考研院校分析

中国科学技术大学 目录 一、学校学院专业简介 二、考试科目指定教材 三、近4年考研分数情况 四、近4年招生录取情况 五、最新一年分数段图表 六、历年真题PDF 七、初试大纲复试大纲 八、学费&奖学金&就业方向 一、学校学院专业简介 二、考试科目指定教材 1、…

Qt高分辨率自适应后,获取当前设备像素比

qt常用的高分辨率自适应,在main中设置之后,我们的软件界面就可以根据当前显示器的分辨率,自动缩放了。(QCoreApplication::setAttribute(Qt::AA_EnableHighDpiScaling);) 但与此同时,qt一些桌面屏幕类获取…

在 PHP 框架(如 Laravel 或 Symfony)中,如何实现高效的路由配置和控制器管理?

在 Laravel 和 Symfony 这样的 PHP 框架中,实现高效的路由配置和控制器管理通常可以通过以下步骤完成: 路由配置:在框架的路由文件中,定义各个 URL 路由的对应关系。你可以指定路由的请求方法、URL 格式和处理该请求的控制器方法…

Java:从嵌入式到云时代的编程语言传奇

Java,自1995年面世以来,已成为全球最受欢迎的编程语言之一。起初,Sun Microsystems公司为了解决嵌入式设备编程的难题,开发了Oak语言,这便是Java的前身。随着互联网的兴起,Oak更名为Java,并迅速…

React小记(四)_路由的基本使用

react-router V6 1、React-router 的三个版本 1、React-router 服务端使用2、React-router-dom 浏览器端使用3、React-router-native React-native 混合开发使用2、基本使用 基本使用步骤如下:1、选择路由模式 history/hash 包裹在想要使用路由的组件外面包裹的好处…

ONLYOFFICE 8.1版本桌面编辑器测评:超越想象的办公体验!

在当今数字化办公时代,一个功能强大、操作便捷的办公套件对于提高工作效率至关重要。ONLYOFFICE 8.1作为一款备受瞩目的办公软件,凭借其全面的功能、优异的性能和出色的用户体验,为用户带来了超越想象的办公体验。下面,我们将对ON…