AI聊天系统

前言

这是一个编者独自开发的AI聊天，从前端到后端，皆是。同时我们实现了前后端分离以及AI模型训练。接下来，让我们进一步学习吧！

资源下载

怎么做？

关于api

首先，我们专门为大众提供了一个可以免费调用无限次数的开放api接口：https://api.haust633.cn/ai/chata

详情见api接口文档

关于前端

我们使用了Vue3.0进行开发，制作出一个相对美化整洁的前端页面。

其次增加了对后端接口的更高级的适配，支持现阶段所有公司AI接口的直接调用

AI回复时加载图标，我们使用loading作为标记：

// 添加AI回复的加载图标
        const loadingAiMessage = {
          text: '',
          type: 'ai',
          loading: true,
        };

我们使用axios对接口进行调用：

axios.post('https://api.haust633.cn/ai/chata', payload)
          .then(response => {
            if (response.data.code === 100) {
              alert('Error: ' + response.data.msg);
              this.loading = false;
              return;
            }
            // 更新加载中的AI消息为实际的AI回复
            const aiMessage = {
              html: marked(response.data.data[0].message.content),
              type: 'ai',
              loading: false,
            };
            this.messages = this.messages.map((msg, index) => {
              if (msg.loading && msg.type === 'ai') {
                return { ...msg, ...aiMessage };
              }
              return msg;
            });
            this.loading = false;
            this.conversationHistory.push({
              role:"assistant",
              content:response.data.data[0].message.content
            })
          })

关于后端

这里我们不再赘述，详情见后端apidoc

本文内容禁止商用！