腾讯云开发者社区

现在基于gpt做自己项目的问答机器人，效果非常的好。可以把自己的文档上传上去，让机器人根据文档来进行回答。

想要实现智能AI问答功能，现在大部分都是基于向量数据库的形式。

整体的流程就是：上传文档===>openai向量接口 ====> 存入向量数据库

访客咨询：  咨询问题 ====> openai向量接口  ====>搜索向量数据库  ====> 组织prompt 到 openai的chat接口

下面的源码是前端逻辑，实现的界面以及问答的聊天对话效果，发送回复以及流式输出

 效果图的前端源码

<template>
    <div class="chatpdf">
        <div class="pannel">
            <div class="fileList">
                <div class="fileTitle" v-bind:class="{'active': collect==item.name}" @click="selectCollect(item.name)" v-for="(item,index) in collects">
                <svg t="1682317088056" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="1403" width="16" height="16"><path d="M512 64c259.2 0 469.333333 200.576 469.333333 448s-210.133333 448-469.333333 448a484.48 484.48 0 0 1-232.725333-58.88l-116.394667 50.645333a42.666667 42.666667 0 0 1-58.517333-49.002666l29.76-125.013334C76.629333 703.402667 42.666667 611.477333 42.666667 512 42.666667 264.576 252.8 64 512 64z m0 64C287.488 128 106.666667 300.586667 106.666667 512c0 79.573333 25.557333 155.434667 72.554666 219.285333l5.525334 7.317334 18.709333 24.192-26.965333 113.237333 105.984-46.08 27.477333 15.018667C370.858667 878.229333 439.978667 896 512 896c224.512 0 405.333333-172.586667 405.333333-384S736.512 128 512 128z m-157.696 341.333333a42.666667 42.666667 0 1 1 0 85.333334 42.666667 42.666667 0 0 1 0-85.333334z m159.018667 0a42.666667 42.666667 0 1 1 0 85.333334 42.666667 42.666667 0 0 1 0-85.333334z m158.997333 0a42.666667 42.666667 0 1 1 0 85.333334 42.666667 42.666667 0 0 1 0-85.333334z" fill="#ffffff" p-id="1404"></path></svg>
                {{item.name}}</div>
            </div>
        </div>
        <div class="chatpdfBox">
            <div class="chatpdfLine">
                <div class="chatpdfLineScroll">
                    <h1>欢迎使用知识库AI</h1>
                    <h2>由 AI 支持的网页版 Copilot</h2>
                    <div class="chatpdfRow " v-bind:class="{'chatpdfAsk': item.type=='ask'}" v-for="(item,index) in msgList">
                        <div class="chatpdfContent" v-html="html(item.content)"></div>
                    </div>
                </div>
            </div>
            <div class="chatpdfArea">
                <button @click="clearHistory">
                    <svg t="1682398861245" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="1371" width="20" height="20"><path d="M883.2 403.2l-147.2-44.8 57.6-224c0-6.4 0-19.2-6.4-25.6-6.4-6.4-12.8-12.8-19.2-12.8L627.2 57.6c-6.4 0-19.2 0-25.6 0C595.2 70.4 588.8 76.8 588.8 83.2L524.8 300.8 358.4 256c-6.4 0-19.2 0-25.6 0S320 275.2 320 281.6l-89.6 320C211.2 684.8 128 768 128 768c-6.4 6.4-12.8 19.2-6.4 32 0 12.8 12.8 19.2 25.6 25.6l524.8 140.8c0 0 6.4 0 6.4 0 6.4 0 19.2-6.4 25.6-12.8 6.4-6.4 83.2-89.6 115.2-179.2 32-83.2 89.6-326.4 89.6-332.8C908.8 422.4 896 409.6 883.2 403.2zM755.2 748.8c-25.6 57.6-70.4 115.2-89.6 147.2l-70.4-19.2c32-38.4 70.4-96 89.6-160 6.4-19.2-6.4-32-25.6-38.4-19.2-6.4-32 6.4-38.4 25.6-19.2 70.4-76.8 134.4-96 153.6l-57.6-12.8c32-38.4 70.4-96 83.2-153.6 6.4-19.2-6.4-32-25.6-38.4-19.2-6.4-32 6.4-38.4 25.6-19.2 64-70.4 128-89.6 153.6l-64-19.2c32-38.4 70.4-96 89.6-153.6 6.4-19.2-6.4-32-25.6-38.4C384 608 364.8 620.8 364.8 633.6c-19.2 64-70.4 128-96 153.6l-57.6-19.2c32-38.4 70.4-96 83.2-153.6l76.8-294.4 166.4 44.8c6.4 0 19.2 0 25.6 0C569.6 364.8 576 358.4 582.4 352L640 128l83.2 19.2-57.6 224c-6.4 19.2 6.4 32 19.2 38.4L832 454.4C819.2 524.8 780.8 691.2 755.2 748.8z" p-id="1372" fill="#ffffff"></path><path d="M364.8 473.6C364.8 492.8 371.2 505.6 390.4 512l339.2 96c0 0 6.4 0 6.4 0 12.8 0 25.6-6.4 32-25.6 6.4-19.2-6.4-32-19.2-38.4L409.6 448C390.4 448 371.2 454.4 364.8 473.6z" p-id="1373" fill="#ffffff"></path>
                    </svg>
                </button>
                <textarea @keydown.prevent.enter="sendAsk"  v-model="askContent"></textarea>
            </div>
        </div>
    </div>
</template>

<script>
    import MarkdownIt from 'markdown-it';
    import hljs from 'highlight.js';
    import 'highlight.js/styles/monokai-sublime.css';
    export default {
      name: 'ChatPage',
        data() {
          return {
              apiPost:"http://127.0.0.1:8083",
              collects:[],
              collect:"test",
            askContent:"",
            msgList:[
                {type:"ask",content:"自建私有数据知识库 · 与知识库AI聊天"},
                {type:"answer",content:"我是知识库机器人，一个专门响应人类指令的大模型"},
            ],
          }
        },
        methods: {
            sendAsk(){
                if(this.askContent=="") return;
                let msg={
                    'type':'ask',
                    'content':this.askContent,
                }
                this.msgList.push(msg);
                let data=JSON.stringify(this.msgList);
                localStorage.setItem("data_"+this.collect,data);
                this.scrollBottom();
                this.getReplyFromApi();
            },
            selectCollect(name){
                this.collect=name;
                this.msgList=[];
                this.getHistory();
            },
            getCollects(){
                let _this=this;
                fetch(this.apiPost+'/collects', {
                    method: 'get',
                })
                .then((response) => response.json())
                .then((response) => {
                    console.log(response);
                    _this.collects=response.result.collections;
                })
            },
            getReplyFromApi(){
                let _this=this;
                let msg={
                    'type':'answer',
                    'content':"正在为你生成答案...",
                }
                _this.msgList.push(msg);
                
                
                let i=0;
                var xhr = new XMLHttpRequest();
                xhr.open("GET", this.apiPost+"/"+this.collect+"/searchStream?keywords="+_this.askContent);
                xhr.setRequestHeader("Content-Type", "text/html");
                xhr.onprogress = function(event) {
                    console.log(i,event.currentTarget.responseText);
                    _this.msgList[_this.msgList.length-1].content=event.currentTarget.responseText;
                    _this.scrollBottom();
                };
                xhr.onreadystatechange = () => {
                  if (xhr.readyState === XMLHttpRequest.DONE) {
                    let data=JSON.stringify(this.msgList);
                    localStorage.setItem("data_"+this.collect,data);
                  }
                };
                xhr.send();
                this.askContent="";
            },
            getHistory(name){
                let str=localStorage.getItem("data_"+this.collect);
                if(!str) return;
                let data=JSON.parse(str);
                this.msgList=data;
            },
            //滚动到底部
            scrollBottom:function(){
                var _this=this;
                this.$nextTick(function(){
                    var container = _this.$el.querySelector(".chatpdfLine");
                    container.scrollTop = 999999999;
                });
            },
             html(sourceStr) {
              const md = new MarkdownIt({
                highlight: function (str, lang) {
                  if (lang && hljs.getLanguage(lang)) {
                    try {
                      return '<pre class="hljs"><code>' +
                             hljs.highlight(lang, str, true).value +
                             '</code></pre>';
                    } catch (__) {}
                  }
        
                  return '<pre class="hljs"><code>' + md.utils.escapeHtml(str) + '</code></pre>';
                }
              });
        
              return md.render(sourceStr);
            },
            clearHistory(){
                localStorage.removeItem("data_"+this.collect);
                this.msgList=[];
            },
            getQuery(key) {
                // 获取所有参数
                var query = window.location.search.substring(1);
                var hash = window.location.hash.substring(1);
                // 如果锚点后面有参数，把锚点后面的参数加入到search参数中
                if(hash.indexOf("?") > -1){
                    query += "&" + hash.split("?")[1];
                }
                var key_values = query.split("&");
                var params = {};
                // 遍历参数并存入params对象
                key_values.map(function (key_val){
                    var key_val_arr = key_val.split("=");
                    params[key_val_arr[0]] = key_val_arr[1];
                });
                // 如果找到了key对应的参数，返回对应值
                if(typeof params[key]!="undefined"){
                    return params[key];
                }
                // 如果没找到，返回空字符串
                return "";
            }
        },
        mounted: function () {
            let collect=this.getQuery("collect");
            if(collect){
                this.collect=collect;
            }
            this.getCollects();
            this.getHistory();
        }
    }
</script>

<style>
    .chatpdf{
        display: flex;
        height: 100vh;
        flex-direction: row;
    }
    .chatpdf .pannel{
        width: 255px;
        background-color: rgb(0, 21, 41);
        display: none;
    }
    .chatpdfBox{
        display: flex;
        flex-direction: column;
        flex: 1;
        background: linear-gradient(to bottom right,#dbe6fb, #f3f4f8);
        background-size: cover;
        background-attachment: fixed;
    }
    .chatpdfHeader{
        font-size: 18px;
        padding: 10px;
        text-align: center;
        width: 100%;
    }
    .chatpdfLine{
        flex: 1;
        width: 100%;
        overflow-y: auto;
    }
    .chatpdfLine h1{
        color: #111111;
        text-align: center;
        margin-top: 80px;
        margin-bottom: 20px;
        font-size: 36px;
    }
    .chatpdfLine h2{
        color: #1e1e1e;
        text-align: center;
        font-size: 20px;
        font-weight: 400;
    }
    .chatpdfLineScroll{
        max-width: 1000px;
        margin: 0 auto;
    }
    .chatpdfRow{
        margin: 20px 10px;
        display: flex;
    }
    .chatpdfAsk{
        justify-content: flex-end;
    }
    .chatpdfContent{
        line-height: 23px;
        display: inline-block;
        border-radius: 8px;
        padding: 12px 15px;
        max-width: 700px;
        background: rgba(255, 255, 255, 0.6);
        font-size: 14px;
        box-shadow:  0px 0.3px 0.9px rgba(0, 0, 0, 0.12), 0px 1.6px 3.6px rgba(0, 0, 0, 0.16);
    }
    .chatpdfAsk .chatpdfContent{
        background: linear-gradient(90deg, #2870EA 10.79%, #1B4AEF 87.08%);;
        color: #fff;
    }
    .chatpdfContent pre{
        padding: 10px;
    }
    .chatpdfArea{
        display: flex;
        margin-bottom: 10px;
        max-width: 1000px;
        margin: 0 auto;
        width: 98%;
        margin-bottom: 15px;
        transition: all 0.3s,height 0s;
        
    }
    .chatpdfArea textarea{
        flex: 1;
        border: none;
        resize: none;
        outline: none;
        padding: 0px 5px;
        height: 40px;
        line-height: 35px;
        color: #404040;
        border-radius: 10px;
        box-shadow: 0px 0.3px 0.9px rgba(0, 0, 0, 0.12), 0px 1.6px 3.6px rgba(0, 0, 0, 0.08);
    }
    .chatpdfArea:hover{
        border-color: #4096ff;
    }
    .chatpdfArea button{
        height: 40px;
        color: #fff;
        background: linear-gradient(90deg, #1B4AEF 10.79%, #2870EA 87.08%);
        box-shadow: 0 2px 0 rgba(5, 145, 255, 0.1);
        border: none;
        padding: 0 20px;
        border-radius: 15px;
        cursor: pointer;
        box-shadow: 0px 0.3px 0.9px rgba(0, 0, 0, 0.12), 0px 1.6px 3.6px rgba(0, 0, 0, 0.08);
        margin-right: 10px;
    }
    .chatpdfArea button:hover{
        background-color: #388aff;
    }
    .chatpdf .fileTitle{
        background-color: #1677ff;
        color: #fff;
        border-radius: 8px;
        padding: 10px;
        margin: 10px;
        font-size: 14px;
        cursor: pointer;
        display: flex;
    }
    .chatpdf .fileTitle svg{
        margin-right: 5px;
    }
    .chatpdf .fileTitle.active{
        background-color: #66a6ff;
    }
    @media (max-width: 768px) {
        .pannel{
            display: none;
        }
    }
</style>