Langchain-Chatchat 结合 Qwen 实现本地知识库前端开发

Langchain-Chatchat 结合 Qwen 实现本地知识库前端开发

在上一篇文章当中，我们已经通过 Langchain-Chatchat+Qwen-14b-int4 完成了本地知识库的搭建。本文重点介绍如何通过 Vue 和 API 接口来定制聊天页面，达成类似 GPT 或其他大模型的显示效果。

1. 知识库启动与配置

确保后端服务已正常启动。在 /Langchain-Chatchat/configs/serve_config 文件中可以修改 API 的相关端口：

API_SERVER = {
    "host": DEFAULT_BIND_HOST,
    "port": 6006,
}

# fastchat openai_api server
FSCHAT_OPENAI_API = {
    "host": DEFAULT_BIND_HOST,
    "port": 20000,
}

访问对应端口会跳转到接口的文档页面，可以看到相关接口的路径和参数，支持在线调试。我们要用的核心接口为 /chat/knowledge_base_chat（知识库问答）。

2. 前端页面实现

分析类似的聊天页面，大致分为聊天消息列表和聊天输入框两部分。

2.1 消息列表组件

先完成消息列表的渲染逻辑：

<div class="chatBox" ref="chatBox">
  <template v-for="(item, index) in msglist">
    <div class="chatUser" v-if="item.role == 'user'">
      <div class="chatContent">
        <!-- 用户头像 -->
        <svg></svg>
        <div class="chatContent-content">
          {{ item.content }}
        </div>
      </div>
    </div>
    <div class="chatAssistant" v-if="item.role == 'assistant'">
      <div class="chatContent">
        <!-- 机器人头像 -->
        <svg></svg>
        <div class="chatContent-content">
          {{ item.content }}
        </div>
      </div>
    </div>
  </template>
</div>

2.2 聊天输入框

实现输入框及回车发送逻辑：

<div class="chatArea">
  <el-input 
    ref="inputDiv" 
    class="chatpdfArea-textarea" 
    type="textarea" 
    autosize 
    placeholder="请输入对话内容，按 Ctrl+Enter 换行"
    v-model="askContent" 
    :rows="1" 
    @keydown.enter.native="messageSendlisten($event)"
  >
  </el-input>
  <svg></svg>
</div>

Enter 键直接将输入框文字插入到消息列表并发送，Ctrl+Enter 换行：

messageSendlisten(event) {
  if (event. == ) {
     (!event.) {
      event.();
      ..({
        : ,
        : .
      });
      . = ;
      .();
    }  {
       dIndex = event..; 
      . = ..(, dIndex) +  + ..(dIndex);
      .$nextTick( { 
        event.. = dIndex + ;
        event.. = dIndex + ;
      });
    }
  }
},