山东大学软件学院创新实训——项目记录（六）

基于RAG技术的心理健康大模型的开发及应用  

老师您好！这个项目记录（六）之前误删了，现在将其重发一遍！

二、心灵对话页面功能实现

 1.停止生成对话功能

前端在底部部分添加一个停止生成的按钮，显示条件为正在加载对话。

<button v-if="convLoading" @click.stop.prevent="stopChat" id="stopChat"
                            class="btn relative btn-neutral border-0 md:border">
                      <div class="flex w-full items-center justify-center gap-2">
                        <svg stroke="currentColor" fill="none" stroke-width="1.5" viewBox="0 0 24 24"
                             stroke-linecap="round" stroke-linejoin="round" class="h-3 w-3" height="1em" width="1em"
                             xmlns="http://www.w3.org/2000/svg">
                          <rect x="3" y="3" width="18" height="18" rx="2" ry="2"></rect>
                        </svg>停止生成
                      </div>
                    </button>

前端展示：

功能实现：

这里将flag设置为false，在触发send函数时，会检测到flag的值。

stopChat() {
      //停止生成对话的逻辑，中途更改flag值，不会进行展示东西
      this.flag = false
      console.log("这是假的")

    },

前端展示：

2.重新生成内容

vue组件：按键显示条件不在加载对话，对话长度大于0

<button v-if="!convLoading && conversation.length > 0" @click.stop.prevent="chatRepeat"
                            id="chatRepeat" class="btn flex justify-center gap-2 btn-neutral border-0 md:border">
                      <svg stroke="currentColor" fill="none" stroke-width="1.5" viewBox="0 0 24 24" stroke-linecap="round"
                           stroke-linejoin="round" class="h-3 w-3" height="1em" width="1em"
                           xmlns="http://www.w3.org/2000/svg">
                        <polyline points="1 4 1 10 7 10"></polyline>
                        <polyline points="23 20 23 14 17 14"></polyline>
                        <path d="M20.49 9A9 9 0 0 0 5.64 5.64L1 10m22 4l-4.64 4.36A9 9 0 0 1 3.51 15"></path>
                      </svg>
                      <p class="none">重新生成</p>
                    </button>

js实现功能：详细看注释

 //重新获取函数值
    chatRepeat() {
      //正在生成中
      if (this.convLoading) {
        return
      }

      var that = this;
      this.convLoading = true;

      //获取最后的值
      var rconv = this.conversation[this.conversation.length - 1];

      //这里的index应该不用加
      this.index = rconv["idx"]

      //这里再次获取值,将调用send（）
      var msg = this.conversation[this.conversation.length - 2]
      //对象用，进行打印
      // console.log("repeat" , msg["spcontenteech"])

      //之后将this.conversation的值减少
      this.conversation = this.conversation.slice(0,this.conversation.length - 1)
      // console.log("repeat" + this.index)
      //之后进行回答用户的问题

        this.flag = true
        fetchChatCompletion(msg["content"]).then(result => {
          //异步的过程，直接进行赋值等一系列的操作
          if(this.flag){
            const conv = {
              "idx": that.index, // 注意这里我们使用了 that.index 而不是 this.index
              "loading": false, // 假设我们在获取结果后立即设置 loading 为 false
              "speaker": "assistant",
              "suitable": [0],
              "contents": [result] // 直接将结果添加到 contents 数组中
            };
            //这里出错了
            // conv.contents.push(result)
            that.conversation.push(conv); // 在这里将 conv 添加到 conversation 中
            that.index = that.index + 1; // 更新索引
            console.log(conv); // 打印整个 conv 对象以检查
            //加载完成
            conv["loading"] = false;
            this.convLoading = false;
          }else {
            const conv = {
              "idx": that.index, // 注意这里我们使用了 that.index 而不是 this.index
              "loading": false, // 假设我们在获取结果后立即设置 loading 为 false
              "speaker": "aiassistant",
              "suitable": [0],
              "contents": ["停止生成"] // 直接将结果添加到 contents 数组中
            };
            //这里出错了
            // conv.contents.push(result)
            that.conversation.push(conv); // 在这里将 conv 添加到 conversation 中
            that.index = that.index + 1; // 更新索引
            console.log(conv); // 打印整个 conv 对象以检查
            //加载完成
            conv["loading"] = false;
            this.convLoading = false;
          }

              })


    },

 功能展示：

 点击重新生成：

3.清除对话内容实现：

 <!--清除对话内容-->
                <a v-if="conversations.length > 0" @click.stop.prevent="clearConversations"
                   class="flex py-3 px-3 items-center gap-3 rounded-md hover:bg-gray-500/10 transition-colors duration-200 text-white cursor-pointer text-sm">
                  <svg stroke="currentColor" fill="none" stroke-width="2" viewBox="0 0 24 24" stroke-linecap="round"
                       stroke-linejoin="round" class="h-4 w-4" height="1em" width="1em" xmlns="http://www.w3.org/2000/svg">
                    <polyline points="3 6 5 6 21 6"></polyline>
                    <path d="M19 6v14a2 2 0 0 1-2 2H7a2 2 0 0 1-2-2V6m3 0V4a2 2 0 0 1 2-2h4a2 2 0 0 1 2 2v2">
                    </path>
                    <line x1="10" y1="11" x2="10" y2="17"></line>
                    <line x1="14" y1="11" x2="14" y2="17"></line>
                  </svg>
                  清除对话
                </a>

触发代码：

    clearConversations() {
//多次对话清空
      this.conversations = []
//清空本次对话内容
      this.conversation = []
//深拷贝
      this.saveConversations();
    },

前端展示： 

点击清除对话按钮： 

4.页面加入导航栏

在侧边栏加入以下代码：

在router中进行添加路由：