uniapp开发小程序实现AI聊天打字机功能

uni-app官网

 一、创建uni-app

我用的是vue-cli命令行创建uniapp项目。

踩坑1：执行命令报错了

npm ERR! Darwin 20.6.0
npm ERR! argv "/Users/zhuzhu/.nvm/versions/node/v6.2.0/bin/node" "/Users/zhuzhu/.nvm/versions/node/v6.2.0/bin/npm" "install"
npm ERR! node v6.2.0
npm ERR! npm  v3.8.9

npm ERR! This request requires auth credentials. Run `npm login` and repeat the request.
npm ERR! 
npm ERR! If you need help, you may report this error at:
npm ERR!     <https://github.com/npm/npm/issues>

npm ERR! Please include the following file with any support request:
npm ERR!     /Users/zhuzhu/Downloads/uni-preset-vue-vite/npm-debug.log

解决：直接访问官网的gitee，下载模板，然后npm install，之后在npm run XX运行你想要的程序就好啦。

二、开发聊天功能

实现思路

之前开发的是网页版的，现在要改成小程序，接口是算法已经写好的，直接拿来了。前端这块实现最重要的是success回调里的代码，接口返回的是流式（如图一），然后前端通过截取最后一次对话内容，通过startTyping方法实现打字机效果

图一

上代码（样式和方法可直接copy用）

<template>
    <view class="main-dislogue">
        <view class="header-suspension">
            <view class="record-btn">悬浮</view>
        </view>
        <view class="content" ref="QAContent">
          <scroll-view id="scrollpage" :scroll-top="scrollTop" :scroll-y="true">
                 <view v-for="item in dest" :key="item.id" id="msglistview">
                  <view class="ask" v-if="item.flag != 1">
                      <view class="ask-text">
                          <view class="ask-desc" style="word-break: break-all;">
                            {{ item.content }}
                          </view>
                      </view>
                      <text class="ask-bulge"></text>
                      <view class="ask-avatar">
                          <image class="ask-sex" v-if="sex == 1" src="/static/boy.png" fit="contain"></image>
                          <image class="ask-sex" v-if="sex == 2" src="/static/girl.png" fit="contain"></image>
                      </view>
                  </view>
                  <view class="answer">
                      <view class="answer-avatar">
                          <image class="answer-ai" src="/static/ai.png" fit="contain"></image>
                      </view>
                      <text class="answer-bulge"></text>
                      <view class="answer-text">
                          <view class="answer-desc" ref="copyAiContent">{{item.ai_content}}</view>
                      </view>
                  </view>
              </view>
            </scroll-view>
        </view>
        <view class="bottom">
            <input :cursorSpacing="20" class="bottom-input" name="name" placeholder="请输入" v-model="value"/>
            <button class="bottom-button" type="primary" :disabled="isSend" @click="handleSend">发送</button>
        </view>
    </view>
</template>

<style>
.main-dislogue {
  height: calc(100vh - 70px);
  background: #f5f5f5;
  display: flex;
  flex-direction: column;
}

/* 头部悬浮 */
.header-suspension {
  width: 100rpx;
  height: 300rpx;
  /* pointer-events: none; */
  z-index: 100;
  position: fixed;
  right: 10rpx;
  bottom: 300rpx;
}
.head-image {
  width: 74rpx;
  height: 74rpx;
  z-index: 99;
  background: #d4d4d4;
  border-radius: 50%;
  padding: 6rpx;
  box-shadow: 0px 2rpx 20rpx rgba(0, 0, 0, 0.5);
}
.record-btn {
  width: 74rpx;
  height: 74rpx;
  background: #FFFFFF;
  border-radius: 50%;
  font-size: 26rpx;
  text-align: center;
  padding: 6rpx;
  box-shadow: 0px 2rpx 20rpx rgba(0, 0, 0, 0.5);
  color: #4A90E2;
  margin-top: 29rpx;
}

/* 内容 */
.content {
    padding: 12rpx;
    padding-bottom: 100px;
    background: #f5f5f5;
}
/* #scrollpage {

} */

/* 问 */
.ask {
    display: flex;
    justify-content: flex-end;
    width: 100%;
    margin-top: 6rpx;
}
.ask-avatar {
    width: 120rpx;
    margin-top: 20rpx;
}
.ask-sex {
    width: 100rpx;
    height: 100rpx;
}
.ask-bulge {
    position: relative;
    top: 41rpx;
    right: 23rpx;
    display: block;
    width: 0;
    height: 0;
    border: 15rpx solid #38a579;
    transform: rotate(45deg);
}
.ask-text {
    z-index: 1;
}
.ask-desc {
    background: #38a579;
    border-radius: 13rpx;
    padding: 15rpx;
    line-height: 58rpx;
    margin-top: 27rpx;
    white-space: pre-line;
    word-break: break-all;
    color: #fff;
    margin-left: 124rpx;
}

/* 答 */
.answer {
    display: flex;
    justify-content: flex-start;
    margin-top: 6rpx;
}
.answer-avatar {
    width: 120rpx;
    margin-top: 20rpx;
}
.answer-ai {
  width: 100rpx;
  height: 100rpx;
}
.answer-bulge {
    position: relative;
    top: 41rpx;
    left: 23rpx;
    display: block;
    width: 0;
    height: 0;
    border: 15rpx solid #ffffff;
    transform: rotate(45deg);
}
.answer-text {
    z-index: 1;
}
.answer-desc {
    margin-right: 88rpx;
    border-radius: 13rpx;
    line-height: 58rpx;
    background: #fff;
    margin-top: 27rpx;
    tab-size: 12rpx;
    padding: 15rpx;
    white-space: pre-wrap;
    box-shadow: 0rpx 5rpx 47rpx 0rpx #97979773;
}

/* 尾部 */
.bottom {
    border-top: 2rpx solid #CCCCCC;
    background: #f5f5f5;
    display: flex;
    padding: 10rpx;
    padding-bottom: 50rpx;


    position: fixed;
    bottom: 0;
    z-index: 99;
    width: 100%;
}
.bottom-input {
    flex: 1;
    font-size: 35rpx;
    border-radius: 10rpx;
    background: #FFFFFF;
    padding: 17rpx;

}
.bottom-button {
  width: 190rpx;
  height: 80rpx;
  font-size: 14px;
  line-height: 80rpx;
  margin-left: 20rpx;
  background: #4A90E2 !important;
}
</style>

<script>
import Api from "@/utils/api.js";
import base from '@/utils/base.js';
const BASE_URL = base.baseUrl;
const recorderManager = uni.getRecorderManager()

export default {
    data() {
        return {
            sex: "",
            birthDate: "",
            generateRecordsFlag: false,
            dest: [],
            dialogue_code: "",
            value: "",
            isSend: false,
            scrollTop: 0,
            currentText: "",
            isSpeaking: false
        }
    },
    onLoad(option) {
        this.sex = option.sex;
        this.birthDate = option.birthDate;
        this.dialogue_code = option.dialogue_code;
    },
    onReady() {
        let _this = this;
        uni.getStorage({
            key: 'gpt_h5_dialogue',
            success: function (res) {
                let list = res.data || "";
                if (list.length) {
                    this.dest = JSON.parse(list);
                    if (this.dest.length >= 2) {
                        this.generateRecordsFlag = true;
                    }
                } else {
                    setTimeout(() => {
                        _this.handleSend();

                    }, 500)
                }
            }
        });
    },
    methods: {
        // 年龄转换
        ageCalculation(date) {
            var today = new Date();

            // 获取出生日期
            var birthDate = new Date(date); // 假设出生日期为1990年1月1日

            // 计算年龄
            var age = today.getFullYear() - birthDate.getFullYear();
            var m = today.getMonth(), d = today.getDate();
            if (m < birthDate.getMonth()) {
                age--;
            } else if (m === birthDate.getMonth() && d < birthDate.getDate()) {
                age--;
            }
            return age;
        },
        // 发送聊天
        async handleSend() {
            this.preEventSource && this.preEventSource?.close();

            if (this.dest.length != 0 && !this.value) {
                return;
            }

            let _this = this;
            let { prompt, model } = await Api.getPromptList({ type: 1 });
            let sex = this.sex == 1 ? "男" : "女";
            let age = this.ageCalculation(this.birthDate);
            prompt = prompt.replace('{age}', `${age}岁`).replace('{sex}', `${sex}性`);
            let obj = {
                ai_content: "...",
                chat_model: model,
                content: prompt,
                create_time: "2024-01-05T06:55:29.000Z",
                dialogue_code: this.dialogue_code,
                id: 450,
                req_time: "2024-01-05T06:55:30.000Z",
                res_time: null,
                tags: null,
                user_code: "00468",
                flag: 1
            };
            const diaObj = {
                content: this.value,
                ai_content: "...",
                chat_model: model,
                create_time: new Date(),
                dialogue_code: this.dialogue_code,
                id: Date.now(),
                tags: null,
                user_code: "00468",
                loading: false,
                flag: 2
            };
            if (this.dest.length == 0) {
                // 第一次
                this.dest.push(obj);
            } else {
                this.dest.push(diaObj);
            }
            let params = {
                "dialogue_code": this.dialogue_code,
                "content": this.value || this.dest[0].content,
                "chat_model": model
            }

            this.isSend = true;
            _this.scrollToBottom();

            let ai_content = "", startFlag = false;
            this.value = ""; // 置空输入框
            // 从这往上可以忽略，这是我业务逻辑，不必关注。重点是uni.request success回调内容

            uni.request({
                url: `${BASE_URL}/hmgpt/dialogue`,
                data: params,
                method: "POST",
                headers: {
                    "Content-Type": 'application/json',
                },
                success: (res) => {
                    let str = JSON.stringify(res.data);

                    // 将字符串按"data: ["分割，然后取最后一个部分  
                    const lastDataSection = str.split("data: [").pop();

                    // 截取最后一个JSON对象的部分  
                    const lastJsonString = lastDataSection.split("]")[0].replace(/\\/g, '');

                    // 解析JSON字符串  
                    const lastJsonObject = JSON.parse(lastJsonString);

                    // 获取ai_content的值  
                    const lastAiContent = lastJsonObject.ai_content;

                    console.log(lastAiContent, 'lastAiContent');

                    ai_content = lastAiContent;

                    if (lastAiContent == "") {
                        // 返回空，则默认提示
                        ai_content = "目前公司GPU服务器有限，会因为调试需要临时中断出现服务不可用，请稍后重试。";
                    }
                    _this.dest[_this.dest.length - 1].ai_content = "";

                    if (!startFlag) {
                        startFlag = true
                        startTyping();
                    }
                }
            });


            function startTyping() {
                let currentIndex = 0;
                const typingSpeed = 100; // 打字速度，单位：毫秒

                const timer = setInterval(() => {
                    _this.dest[_this.dest.length - 1].ai_content += ai_content[currentIndex];
                    currentIndex++;
                    _this.scrollToBottom();

                    if (currentIndex >= ai_content.length) {
                        clearInterval(timer);
                        _this.isSend = false;
                    }
                }, typingSpeed);


                uni.setStorage({
                    key: 'gpt_h5_dialogue',
                    data: JSON.stringify(_this.dest),
                    success: function () { }
                });
            }
        },
        // 滚动至聊天底部
        scrollToBottom() {
            this.$nextTick(() => {
                const query = uni.createSelectorQuery();
                query.select('#scrollpage').boundingClientRect();
                query.exec(res => {
                    this.scrollTop = res[0].height;
                    uni.pageScrollTo({
                        scrollTop: res[0].height + 170, // 将滚动位置设置为顶部
                        duration: 300 // 滚动到顶部的动画时长，单位为毫秒
                    });
                })
            })
        }
    },
}
</script>

效果图

打字机效果可以自行试试哈，整体页面大概是这个样子