对话小系统（智能图书助手）

文章说明

现在GPT的功能十分强大，是否可以利用开源的接口来实现自己的智能小助手呢，我想到可以提供一些能力接口，然后对问询内容进行意图识别，采用指定接口进行业务逻辑处理，然后将内容呈现给用户，这样的较为智能的小助手，感觉还是蛮不错的

目前采用的是网页的形式呈现，也可以考虑采用语音播报的形式，形成初级的智能助手；当然，这方面还需要继续研究了

核心代码

前端页面中可以配置接口、意图，以及相应的对话接口；框架的逻辑为采用GPT识别用户输入的内容，将指定的意图列表传给它，让它来分辨目前的对话，当前问询内容属于哪个意图，然后再采用配置的处理接口进行业务处理；在问询过程中会记录一些上下文信息，然后在后续的业务处理过程中可以使用到

目前的对话页面代码展示

<script setup>
import {nextTick, onBeforeMount, onMounted, reactive, ref} from 'vue';
import BookDetail from "@/showPage/BookDetail.vue";
import BookSearchResult from "@/showPage/BookSearchResult.vue";
import BookBorrowHistoryList from "@/showPage/BookBorrowHistoryList.vue";
import BookCurrentBorrowList from "@/showPage/BookCurrentBorrowList.vue";
import BookBorrowHistoryChart from "@/showPage/BookBorrowHistoryChart.vue";
import {handleIntention} from "@/util/handleIntention";

const data = reactive({
  messages: [],
  newMessageText: "",
});

onBeforeMount(() => {
  data.messages.push({
    sender: 'system',
    intentionName: "初始提示信息",
    text: '我是智能图书助手，有什么可以帮您的吗？',
  });
});

const sendMessage = () => {
  if (data.newMessageText.trim() !== '') {
    data.messages.push({
      sender: 'user',
      text: data.newMessageText,
    });
    const messageItem = handleIntention(data.newMessageText);
    messageItem.sender = "system";
    data.messages.push(messageItem);
    nextTick(() => {
      scrollToBottom();
    });
    data.newMessageText = '';
  }
};

const chatMain = ref();

function scrollToBottom() {
  if (chatMain.value) {
    chatMain.value.scrollTop = chatMain.value.scrollHeight;
  }
}

onMounted(() => {
  scrollToBottom();
});
</script>

<template>
  <div class="chat-container">
    <header class="chat-header">
      <h2>对话记录</h2>
    </header>
    <main ref="chatMain" class="chat-main">
      <ul class="message-list">
        <template v-for="(message, index) in data.messages" :key="index">
          <li v-if="message.sender === 'user'" class="message user-message">
            <div class="message-content">{{ message.text }}</div>
            <img alt="Avatar" class="avatar" src="@/img/1.jpg"/>
          </li>
          <li v-if="message.sender !== 'user'" class="message system-message">
            <img alt="Avatar" class="avatar" src="@/img/2.jpg"/>
            <template v-if="message.intentionName === '初始提示信息' || message.intentionName === '其他意图'">
              <div class="message-content">{{ message.text }}</div>
            </template>
            <template v-if="message.intentionName === '查询书籍具体信息'">
              <BookDetail :available="message.available" :book-author="message.bookAuthor"
                          :book-brief="message.bookBrief" :book-name="message.bookName"/>
            </template>
            <template v-if="message.intentionName === '查询书籍'">
              <BookSearchResult :books="message.books"/>
            </template>
            <template v-if="message.intentionName === '查询借阅历史'">
              <BookBorrowHistoryList :borrowHistory="message.borrowHistory"/>
            </template>
            <template v-if="message.intentionName === '查询当前借阅情况'">
              <BookCurrentBorrowList :currentBorrows="message.currentBorrows"/>
            </template>
            <template v-if="message.intentionName === '查询借阅历史图表展示'">
              <BookBorrowHistoryChart :borrowHistory="message.borrowHistory"/>
            </template>
          </li>
        </template>
      </ul>
    </main>
    <footer class="chat-footer">
      <textarea v-model="data.newMessageText" @keyup.enter="sendMessage" placeholder="输入信息..." rows="3"
                class="message-input"></textarea>
      <button @click="sendMessage">发送</button>
    </footer>
  </div>
</template>

<style lang="scss" scoped>
.chat-container {
  display: flex;
  flex-direction: column;
  height: 100%;
  width: 100%;
  margin: auto;
  background-color: #f4f4f4;
  border-radius: 8px;
  overflow: hidden;

  .chat-header {
    background-color: #3498db;
    color: white;
    padding: 1rem;
    text-align: center;
  }

  .chat-main {
    flex-grow: 1;
    padding: 1rem;
    overflow-y: auto;
    overflow-x: hidden;
    background-color: #fff;

    &::-webkit-scrollbar {
      background-color: transparent;
      height: 0.5rem;
      width: 0.5rem;
    }

    &::-webkit-scrollbar-thumb {
      background-color: #7f8c8daa;
      border-radius: 0.5rem;
    }

    .message-list {
      list-style-type: none;
      margin: 0;
      padding: 0;

      .message {
        display: flex;
        align-items: flex-start;
        margin-bottom: 1rem;
        word-break: break-all;

        .avatar {
          width: 40px;
          height: 40px;
          border-radius: 50%;
          margin-right: 0.5rem;
        }

        .message-content {
          max-width: 70%;
          padding: 0.5rem;
          border-radius: 8px;
          font-size: 1rem;
        }
      }

      .user-message {
        justify-content: flex-end;

        .avatar {
          margin-left: 0.5rem;
        }

        .message-content {
          background-color: #e74c3c;
          color: white;
        }
      }

      .system-message {
        justify-content: flex-start;

        .message-content {
          background-color: #3498db;
          color: white;
        }
      }
    }
  }

  .chat-footer {
    display: flex;
    padding: 1rem;
    background-color: #fff;
    box-shadow: 0 -2px 10px rgba(0, 0, 0, 0.1);

    .message-input {
      flex-grow: 1;
      padding: 0.5rem;
      border: 1px solid #ddd;
      border-radius: 4px;
      margin-right: 0.5rem;
      resize: none;
      min-height: 48px;
      font-size: 1rem;
      line-height: 1.5;
      font-family: 'Arial', 'Helvetica Neue', Helvetica, sans-serif;
      font-weight: 400;
      letter-spacing: 0.02em;

      &:focus {
        outline: none;
        border-color: #3498db;
        box-shadow: 0 0 5px rgba(52, 152, 219, 0.5);
      }
    }

    button {
      padding: 0.5rem 1rem;
      background-color: #3498db;
      color: white;
      border: none;
      border-radius: 4px;
      cursor: pointer;
      transition: background-color 0.3s;
      min-height: 48px;
      display: flex;
      align-items: center;
      justify-content: center;

      &:hover {
        background-color: #2980b9;
      }
    }
  }
}
</style>

其中本demo的部分代码采用GPT生成，感觉生成的页面样式上还蛮不错的

效果展示

系统首页

意图管理

接口管理

源码下载

对话型系统