对话小系统（智能图书助手）
- 文章说明
- 核心代码
- 效果展示
- 源码下载
文章说明
现在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生成，感觉生成的页面样式上还蛮不错的
效果展示
系统首页
意图管理
接口管理
源码下载
对话型系统
