devbox
木道寻08
这个屌丝很懒，什么也没留下！
关注作者
热门标签
热门文章
当前位置:   article > 正文

个人开发实现AI套壳网站快速搭建（Vue+elementUI+SpringBoot）_如何做一个ai问答前端网页

作者：木道寻08 | 2024-07-24 10:56:04

赞

踩

如何做一个ai问答前端网页

目录

一、效果展示

二、项目概述

三、手把手快速搭建实现本项目

3.1 前端实现

3.2 后端方向

五、后续开发计划

一、效果展示

默认展示

一般对话展示：

代码对话展示：

二、项目概述

        本项目是一个基于Web的智能对话服务平台，通过后端与第三方AI公司的API接口对接，为前端用户提供了一个简洁、直观的聊天界面。该项目的核心价值在于其便捷性与普适性，让用户能够轻松接入高质量的AI对话服务，无论是寻求信息咨询、娱乐互动，还是情感陪伴，都能获得即时响应与个性化体验。

技术模块：

1.前端：采用Vue框架+elementUi框架+HTML本地存储信息

2.后端：采用SpringBoot框架进行数据响应

三、手把手快速搭建实现本项目

3.1 前端实现

前置准备工作：创建一个新的Vue模板，并导入axios

npm install 'axios'

导入elementUI

npm i element-ui -S

Vue中main.js 进行配置

  1. import Vue from 'vue'
  2. import App from './App.vue'
  3. import router from './router'
  4. import ElementUI from 'element-ui';
  5. import 'element-ui/lib/theme-chalk/index.css';
  6.  
  7. Vue.config.productionTip = false
  8.  
  9. Vue.use(ElementUI);
  10.  
  11. new Vue({
  12.   router,
  13.   render: h => h(App)
  14. }).$mount('#app')

本项目为了简单化，将项目整体仅设置为了一个Vue主视图（App.vue）

template:

  1. <template>
  2.   <div id="Chat">
  3.     <el-container>
  4.       <el-aside width="200px">
  5.  
  6.         <!-- 添加导航 -->
  7.         <el-row class="tac" >
  8.           <el-col :span="12" style="width: 100%;">
  9.             <h1>个人工具网站</h1>
  10.             <el-menu default-active="2" class="el-menu-vertical-demo" @open="handleOpen" @close="handleClose">
  11.               <el-submenu index="1">
  12.                 <template slot="title">
  13.                   <i class="el-icon-location"></i>
  14.                   <span>人工智能助手</span>
  15.                 </template>
  16.                 <el-menu-item-group>
  17.                   <el-menu-item index="1-1">通义千问</el-menu-item>
  18.                   <el-menu-item index="1-2">文言一心</el-menu-item>
  19.                   <el-menu-item index="1-2">GPT</el-menu-item>
  20.                 </el-menu-item-group>               
  21.               </el-submenu>
  22.               <el-menu-item index="2">
  23.                 <i class="el-icon-menu"></i>
  24.                 <span slot="title">知识星球</span>
  25.               </el-menu-item>
  26.               <el-menu-item index="3" >
  27.                 <i class="el-icon-document"></i>
  28.                 <span slot="title">工具集合</span>
  29.               </el-menu-item>
  30.               <el-menu-item index="4">
  31.                 <i class="el-icon-setting"></i>
  32.                 <span slot="title">素材集合</span>
  33.               </el-menu-item>
  34.             </el-menu>
  35.           </el-col>
  36.         </el-row>
  37.  
  38.       </el-aside>
  39.       <el-container>
  40.         <el-header>
  41.           <h3>通义千问-API套壳网站</h3>
  42.         </el-header>
  43.         <el-main>
  44.           <div id="ChatLayOut">
  45.             <!-- 对话内容列举 -->
  46.             <div v-for="(msg, index) in messages" :key="index" id="ChatBubble">
  47.               <img :src="getImageUrl(msg.sender)" id="chatImage">
  48.               <!-- <p id="ChatContent">{{ msg.sender }}: {{ msg.content }}</p> -->
  49.               <div class="chat-content-wrap">
  50.                 <!-- 使用预处理后的消息内容 -->
  51.                 <div v-html="preprocessMessageContent(msg.sender+':'+msg.content) "></div>
  52.               </div>
  53.  
  54.             </div>
  55.           </div>
  56.  
  57.         </el-main>
  58.         <el-footer>
  59.           <!-- 使用flex布局使元素水平排列 -->
  60.           <div style="display: flex; align-items: center;">
  61.             <!-- 将输入框放入表单中 -->
  62.             <form @submit.prevent="onFormSubmit" style="margin-left: 30%; width: 500px; margin-right: 10px;">
  63.               <el-input id="DialogTextCSS" v-model="message" :placeholder="DialogText" :disabled="flag"
  64.                 style="flex-grow: 1; "></el-input>
  65.             </form>
  66.             <!-- 提交按钮 -->
  67.             <el-button type="primary" @click="sendMessage" style="width:90px ;">提交</el-button>
  68.             <!-- 清空按钮 -->
  69.             <el-button type="danger" @click="deleteMessage">清空本地聊天记录</el-button>
  70.           </div>
  71.  
  72.           <div>COPYRIGHT: CSDN-ALPHAMILK</div>
  73.           <div>version : 测试版</div>
  74.         </el-footer>
  75.       </el-container>
  76.     </el-container>
  77.   </div>
  78. </template>

JavaScript:

  1. <script>
  2. import axios from 'axios';
  3.  
  4.  
  5. export default {
  6.   data() {
  7.     return {
  8.       message: '',
  9.       messages: [],
  10.       Identify: '',
  11.       senderType: '', // 新增一个变量来标识发送者类型
  12.       flag:false,
  13.       DialogText:'请您输入内容',
  14.     }
  15.   },
  16.   mounted() {
  17.     // 页面加载时从localStorage读取消息
  18.     const savedMessages = JSON.parse(localStorage.getItem('messages'));
  19.     if(savedMessages===null){
  20.       this.messages.push({sender: "AI", content: "欢迎使用通义千问API的套壳网站，请您通过输入内容到下方的文本框并提交即可开启聊天"});
  21.     }
  22.     if (savedMessages) {
  23.       this.messages = savedMessages;
  24.     }
  25.  
  26.   },
  27.   methods: {
  28.     scrollToBottom() {
  29.   this.$nextTick(() => {
  30.     // 尝试手动触发一次重绘，看是否有助于解决滚动问题
  31.     const chatLayout = this.$el.querySelector('#ChatLayOut');
  32.     if (chatLayout) {
  33.       // 强制浏览器重绘
  34.       void chatLayout.offsetHeight; 
  35.  
  36.       setTimeout(() => {
  37.         console.log('scrollHeight:', chatLayout.scrollHeight);
  38.         window.scrollTop = chatLayout.scrollHeight;
  39.         console.log('scrollTop after setting:', chatLayout.scrollTop);
  40.       }, 100); // 增加延时时间以确保元素尺寸和内容更新完成
  41.     }
  42.   });
  43. },
  44.  
  45.     sendMessage() {
  46.       if (this.message.trim() !== '') {
  47.         // 设置身份为用户
  48.         this.senderType = '用户';
  49.         this.messages.push({sender: this.senderType, content: this.message});
  50.         localStorage.setItem('messages', JSON.stringify(this.messages)); // 保存消息到localStorage
  51.  
  52.         //禁用对话框
  53.         this.flag = true;
  54.         this.DialogText = '请您耐心等待AI的回答';
  55.  
  56.         // //进行滚动操作,滚动到最新消息
  57.         // this.scrollToBottom(); 
  58.  
  59.  
  60.         // 调用接口获取AI生成的内容
  61.         axios.get('http://localhost:8080/Test/Chat',
  62.           {
  63.             params:{
  64.               message : this.message
  65.             }
  66.           }
  67.  
  68.         ).then((response) => {
  69.           // 设置身份为AI
  70.           this.senderType = 'AI';
  71.           this.messages.push({sender: this.senderType, content: response.data});
  72.           localStorage.setItem('messages', JSON.stringify(this.messages));
  73.           
  74.           //解除对话框
  75.           this.flag = false;
  76.           this.DialogText = '请您输入内容';
  77.         });
  78.         this.message = ''; // 清空输入框
  79.       }else{
  80.         alert("输入不能为空噢!");
  81.       }
  82.  
  83.     },
  84.     deleteMessage(){
  85.       localStorage.removeItem("messages");
  86.       this.messages = [];
  87.       this.messages.push({sender: "AI", content: "欢迎使用通义千问API的套壳网站，请您通过输入内容到下方的文本框并提交即可开启聊天"});
  88.  
  89.     },
  90.     getImageUrl(sender) {
  91.       if (sender === 'AI') {
  92.         return 'https://img.alicdn.com/imgextra/i3/O1CN01sffRIx1nb3dXCKdFC_!!6000000005107-2-tps-1024-1024.png';
  93.       } else {
  94.         return 'https://bpic.51yuansu.com/pic3/cover/00/94/68/58dcd742dd10d_610.jpg?x-oss-process=image/resize,h_360,m_lfit/sharpen,100';
  95.       }
  96.     },
  97.  
  98.     onFormSubmit() {
  99.       this.sendMessage();
  100.     },
  101.  
  102. preprocessMessageContent(content) {
  103.   const codeBlockRegex = /```(.*?)```/gs;
  104.   const sortTextRegex = /\*\*(.*?)\*\*/gs;
  105.  
  106.   let tempContent = content.replace(sortTextRegex, `<p class="sort-text">$1</p>`);
  107.   let processedContent = tempContent.replace(codeBlockRegex, `<pre class="code-block"><code>$1</code></pre>`);
  108.   let segments = processedContent.split(/```.*?```/gs); // 分割代码块
  109.   
  110.   segments = segments.filter(segment => segment.trim());
  111.  
  112.   
  113.   let finalContent = segments.map((segment) => {
  114.     return `<p class="content-common">${segment}</p>`;
  115.   }).join('');
  116.  
  117.   return finalContent;
  118. }
  119.   },
  120.   handleOpen(key, keyPath) {
  121.         console.log(key, keyPath);
  122.       },
  123.       handleClose(key, keyPath) {
  124.         console.log(key, keyPath);
  125.       }
  126.  
  127. }
  128.  
  129. </script>

css:

  1. <style>
  2.   .el-header, .el-footer {
  3.     background-color: #B3C0D1;
  4.     color: #333;
  5.     text-align: center;
  6.     line-height: 60px;
  7.   }
  8.   
  9.   .el-aside {
  10.     background-color: #D3DCE6;
  11.     color: #333;
  12.     text-align: center;
  13.     line-height: 200px;
  14.     box-shadow: 0 2px 4px rgba(0, 0, 0, .12), 0 0 6px rgba(0, 0, 0, .04)
  15.   }
  16.   
  17.   .el-main {
  18.     background-color: #E9EEF3;
  19.     color: #333;
  20.     text-align: center;
  21.     line-height: 160px;
  22.     height: 1000px;
  23.   }
  24.   
  25.   body > .el-container {
  26.     margin-bottom: 40px;
  27.   }
  28.   
  29.   .el-container:nth-child(5) .el-aside,
  30.   .el-container:nth-child(6) .el-aside {
  31.     line-height: 260px;
  32.   }
  33.   
  34.   .el-container:nth-child(7) .el-aside {
  35.     line-height: 320px;
  36.   }
  37.  
  38.  #ChatBubble{
  39.   
  40.   position: relative;
  41.   padding: 10px;
  42.   border-radius: 10px;
  43.   margin-bottom: 30px;
  44.   max-width: 70%;
  45.   background-color: white;
  46.   line-height: normal;
  47.  }
  48. /* 用户和AI的不同样式 */
  49. #ChatBubble.user {
  50.   background-color: #E0F2F7; /* 用户气泡颜色 */
  51.   float: left;
  52.   clear: both;
  53.   margin-right: 30px;
  54. }
  55.  
  56. #ChatBubble.AI {
  57.   background-color: #ECEFF1; /* AI气泡颜色 */
  58.   float: right;
  59.   clear: both;
  60.   margin-left: 30px;
  61. }
  62.  
  63. /* 指向箭头，这里仅示例用户气泡右边的箭头 */
  64. #ChatBubble.user::after {
  65.   content: "";
  66.   position: absolute;
  67.   top: 50%;
  68.   right: -15px;
  69.   transform: translateY(-50%);
  70.   border-style: solid;
  71.   border-width: 10px 15px 10px 0;
  72.   border-color: transparent #E0F2F7;
  73. }
  74.  
  75.  
  76. /* 可能需要清除浮动，避免布局问题 */
  77. #dialog-display::after {
  78.   content: "";
  79.   display: block;
  80.   clear: both;
  81. }
  82.  
  83. #chatImage{
  84.   float: left;
  85.   margin-top: 17px;
  86.   margin-right: 10px;
  87.   height: 30px;
  88.   width: 30px;
  89.   background-color:#faeeee;
  90. }
  91.  
  92.  
  93.  #Topic{
  94.   background-color: #f6f6fe;
  95.   border-radius: 10px;
  96.   height: 60px;
  97.  }
  98.  
  99. #chat{
  100.  height: 56px;
  101.  width: 100%;
  102.  background-color: pink;
  103.  
  104. }
  105. .el-footer{
  106.   background-color: #f7f8fc;
  107. }
  108. .el-main{
  109.   background-color: #f7f8fc;
  110. }
  111. #ChatContent { 
  112.   line-height: 1.5; /* 或者根据需要调整 */
  113.    padding: 0; /* 取消内边距 */ 
  114.   } 
  115.  
  116. #ChatLayOut{
  117.   margin-left: 20%;
  118. }
  119.  
  120. .el-header{
  121.   background-color: #333;
  122. }
  123. h3{
  124.   color: #E9EEF3;
  125. }
  126.  
  127. .el-aside{
  128.   background: white;
  129.   box-shadow: 0 2px 4px rgba(0, 0, 0, .12), 0 0 6px rgba(0, 0, 0, .04);
  130.  
  131.   /* 实现右边border-radi */
  132.   border-top-right-radius: 30px;
  133. }
  134. /* 明亮风格的代码块，文字及行号全部左对齐 */
  135. .code-block {
  136.   background-color: #f8f8f8; /* 明亮背景 */
  137.   color: #333; /* 深色文字 */
  138.   font-family: 'Courier New', monospace; /* 适合代码的字体 */
  139.   white-space: pre-wrap; /* 保留空格和换行 */
  140.   border-radius: 5px; /* 边角圆润 */
  141.   overflow-x: auto; /* 横向滚动条，如果需要 */
  142.   line-height: 1.5;
  143.   padding: 10px;
  144.   position: relative; /* 为行号预留位置 */
  145. }
  146.  
  147. /* 显示所有行的行号，确保向左对齐 */
  148. .code-block::before {
  149.   content: counter(line);
  150.   counter-increment: line;
  151.   position: absolute; /* 行号绝对定位 */
  152.   left: 0; /* 行号紧贴左侧 */
  153.   margin-left: 15px; /* 与代码内容的距离，可根据需要调整 */
  154.   text-align: left; /* 行号左对齐 */
  155.   width: 30px; /* 行号宽度 */
  156.   color: #666; /* 行号颜色，可调整 */
  157.   display: block; /* 每行前面均显示 */
  158.   line-height: inherit; /* 继承代码块的行高 */
  159. }
  160.  
  161. /* 确保代码内容也左对齐 */
  162. .code-block code {
  163.   display: block; /* 确保代码块内代码作为独立块显示 */
  164.   padding-left: 45px; /* 为代码内容预留行号和额外的间距 */
  165.   text-align: left; /* 确保代码文本左对齐 */
  166. }
  167.  
  168.  
  169. .content-common {
  170.   /* 为普通文本内容定义样式 */
  171.   margin-bottom: 10px; /* 示例：增加段落间距 */
  172.   line-height: 1.5; /* 示例：调整行高 */
  173. }
  174.  
  175. .el-col-12 {
  176.   width: 100%;
  177. }
  178.  
  179. .sort-text {
  180.   font-weight: bold; /* 设置为粗体 */
  181.   text-align: left; /* 文本左对齐 */
  182.   line-height: normal; /* 行高设置为正常，确保与未加样式时的文本行高一致 */
  183. }
  184.  
  185. </style>

最后配置端口为8081(在vue.config.js文件下)：

  1. const { defineConfig } = require('@vue/cli-service')
  2. module.exports = {
  3.   devServer: {
  4.     port: 8081, // 将端口设置为你想要的端口号
  5.   },
  6. };

运行：在控制台启动程序

npm run serve

打开浏览器：前端的配置改为(localhost:8081)

3.2 后端方向

创建一个SpringBoot项目

在项目pom.xml文件导入以下依赖：

  1.         <!-- https://mvnrepository.com/artifact/com.alibaba/dashscope-sdk-java -->
  2.         <dependency>
  3.             <groupId>com.alibaba</groupId>
  4.             <artifactId>dashscope-sdk-java</artifactId>
  5.             <version>2.8.2</version>
  6.         </dependency>
  7.         <!--okhttp3 依赖-->
  8.         <dependency>
  9.             <groupId>com.squareup.okhttp3</groupId>
  10.             <artifactId>okhttp</artifactId>
  11.             <version>4.9.3</version>
  12.         </dependency>

由于后端功能十分简单，仅需要一个Utils和一个Controller即可

Utils：(注意：这里要填自己申请的APIKey(十分简单，一毛钱就能开通))

  1. @Component
  2. public class AICHAT {
  3.     public static String callWithMessage(String message)
  4.             throws NoApiKeyException, ApiException, InputRequiredException {
  5.         Generation gen = new Generation();
  6.         Constants.apiKey="xxxxxx";//TODO：这里填写自己申请的APIKEY
  7.         MessageManager msgManager = new MessageManager(10);
  8.         Message systemMsg =
  9.                 Message.builder().role(Role.SYSTEM.getValue()).content("You are a helpful assistant.").build();
  10.         Message userMsg = Message.builder().role(Role.USER.getValue()).content(message).build();//这里填写对话内容
  11.         msgManager.add(systemMsg);
  12.         msgManager.add(userMsg);
  13.         QwenParam param =
  14.                 QwenParam.builder().model(Generation.Models.QWEN_TURBO).messages(msgManager.get())
  15.                         .resultFormat(QwenParam.ResultFormat.MESSAGE)
  16.                         .topP(0.8)
  17.                         .enableSearch(true)
  18.                         .build();
  19.         GenerationResult result = gen.call(param);
  20.         String Message = extractContentFromResult(result);
  21.         System.out.println(Message);
  22.         return Message;
  23.     }
  24.  
  25. //    仅获取JSON结果中message字段的信息
  26.     public static String extractContentFromResult(GenerationResult result) {
  27.         if (result != null && result.getOutput() != null && !result.getOutput().getChoices().isEmpty()) {
  28.             Message message = result.getOutput().getChoices().get(0).getMessage();
  29.             return message.getContent();
  30.         }
  31.         return null; // 或者返回一个默认值
  32.     }
  33.  
  34. }

ChatController:

  1. @RestController
  2. @RequestMapping("/Test")
  3. @CrossOrigin
  4. public class ChatController {
  5.     @Autowired
  6.     AICHAT aichat;
  7.     @GetMapping("/Chat")
  8.     public String GetParameter(String message) {
  9.  
  10.         try {
  11.             if (message != null) {
  12.                 String AiResponse = null;
  13.                 try {
  14.                     AiResponse = aichat.callWithMessage(message);
  15.                 } catch (ApiException | NoApiKeyException | InputRequiredException e) {
  16.                     System.out.println(e.getMessage());
  17.                 }
  18.                 return AiResponse;
  19.             }
  20.         } catch (Exception e) {
  21.             return "出错了>_<"+e.getMessage();
  22.         }
  23.         return  null;
  24.     }
  25.     
  26. }

 启动(Application)：

前后端联调测试：

五、后续开发计划

后续改进计划：

后续将会修改许多的bug，并加入许多新的功能，一步步将其打造成一个能够实现商业化的，满足普通人可以使用的通用网站。关注后即可获取最新的动态

1.加入多个可用个人免费的API，让切换AI模型能够方便快捷

2.加入用户管理，满足以后实现商业化的一步

3.加入动画效果，让聊天更生动

4.加入语音输入功能，与语音输出功能。实现外语教师功能

5.将项目通过nginx部署到服务器上

 .......

本文内容由网友自发贡献，转载请注明出处：https://www.wpsshop.cn/w/木道寻08/article/detail/874233
推荐阅读
相关标签

Copyright © 2003-2013 www.wpsshop.cn 版权所有，并保留所有权利。

  

闽ICP备14008679号