建立一个政务服务问答系统的demo展示

最新推荐文章于 2024-07-30 16:49:30 发布

spider文

最新推荐文章于 2024-07-30 16:49:30 发布

阅读量978

点赞数 14

文章标签： html5 前端前端框架后端自然语言处理

本文链接：https://blog.csdn.net/m0_73639297/article/details/138450026

版权

数据采集、清洗、导入知识库前端和后端开发，及api接口建立

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Alchat 政务</title>
  <style>
    /* 整体样式 */
    body {
      font-family: Arial, sans-serif;
      margin: 0;
      padding: 0;
    }

    /* 左侧菜单样式 */
    .left-menu {
      background-color:white;
      padding: 20px;
      width: 150px;
      height: 100vh;
      float: left;
    }

    .left-menu h2 {
      margin-top: 0;
    }

    .left-menu ul {
      list-style-type: none;
      padding: 0;
    }

    .left-menu li {
      padding: 10px 0;
      cursor: pointer;
    }
/* 常用服务样式 */
    .services-menu {
      background-color:white;
      padding: 20px;
      width: 150px;
      height: 100vh;
      overflow-y: auto;
      float: left;
    }

    .services-menu h2 {
      margin-top: 0;
    }

    .services-menu ul {
      list-style-type: none;
      padding: 0;
    }

    .services-menu li {
      padding: 10px 0;
      cursor: pointer;
      border-bottom: 1px solid #ccc;
    }

    .services-menu li:hover {
      background-color: #d3d3d3;
      color: #2196F3;
    }
    .left-menu li:hover {
      background-color: #e0e0e0;
      color:#2196F3;
    }

    /* 聊天框样式 */
    .chat-container {
      float: left;
      width: 700px;
      height: 100vh;
      background-color: #f8f8f8;
      padding: 20px;
      box-sizing: border-box;
    }

    .chat-history {
      height: 70%;
      overflow-y: scroll;
      border: 1px solid #ccc;
      padding: 10px;
      margin-bottom: 10px;
    }

    /* 聊天框中的消息样式 */
    .chat-message {
      margin-bottom: 10px;
      padding: 10px;
      border-radius: 5px;
      background-color: #fff;
      /* 当消息为用户输入时，背景色为白色 */
      /* 当消息为助理回复时，设置文本居右对齐 */

      &.chat-message {
        text-align: right; /* 将文本居右对齐 */
        border-radius: 0 0 5px 5px; /* 设置边框圆角 */
        background-color: #b3e5fc; /* 设置背景色为浅蓝色 */
      }
    }
    /* 将聊天输入框设置为可Flex布局，并在下方添加一个用于隐藏边框的矩形块 */
    .chat-input {
      display: flex; /* 设置flex布局 */
      align-items: center; /* 设置子元素与主轴垂直对齐 */
      margin-top: 10px; /* 设置上边距 */
      &.chat-input{
        background-color:white; /* 当消息为助理回复时，背景色为灰色 */
        text-align: left; /* 将文本居左对齐 */
        border-radius: 5px 5px 0 0; /* 设置边框圆角 */
      }
    }
    .chat-input input { /* 选择聊天输入框中的文本 */
      flex-grow: 1; /* 设置文本占主轴剩余空间的比例 */
      padding: 10px; /* 设置内边距 */
      border: 1px solid #ccc; /* 设置边框 */
      border-radius: 3px; /* 设置边框圆角 */
    }

    /* 语音输入样式 */
    .voice-input {
      display: flex;
      align-items: center;
      margin-top: 10px;
    }
    .chat-input button { /* 选择聊天输入框中的按钮 */
      margin-left: 10px; /* 设置按钮左侧边距 */
      padding: 10px 20px; /* 设置按钮的内边距和高度 */
      background-color: #4CAF50; /* 设置按钮背景色为绿色 */
      color: white; /* 设置按钮文本颜色为白色 */
      border: none; /* 设置按钮无边框 */
      border-radius: 3px; /* 设置按钮边框圆角 */
      cursor: pointer; /* 设置鼠标悬停时按钮的指针样式为手型 */
    }
    .voice-input button {
      margin-left: 10px;
      padding: 10px 15px;
      background-color: #2196F3;
      color: white;
      border: none;
      border-radius: 3px;
      cursor: pointer;
    }
    .language-select {
      display: flex;
      align-items: center;
      margin-top: 10px;
    }

    .language-select select {
      padding: 5px;
      border: 1px solid #ccc;
      border-radius: 3px;
    }
  </style>
</head>
<body>
  <div class="left-menu">
    <h1>政务</h1>
    <h1>AI chat</h1>
    <ul>
      <li>首页</li>
      <li>办事指南查询</li>
      <li>政策法规查询</li>
      <li>在线预约</li>
      <li>在线申报</li>
      <li>查询与回访</li>
      <li>在线支付</li>
      <li>在线评价</li>
      <li>投诉举报</li>
      <li>用户反馈</li>
      <li>办事网点</li>
    </ul>
  </div>
  <div class="services-menu ">
    <h3>常用服务样式</h3>
    <ul>
      <li>行政审批</li>
      <li>税务登记</li>
      <li>社会保障服务</li>
      <li>户籍管理</li>
      <li>工商注册登记</li>
      <li>质量监督检查</li>
      <li>安全生产许可</li>
      <li>土地使用权审批</li>
      <li>建筑许可</li>
      <li>消防验收</li>
      <li>计量认证</li>
  </div>
  <div class="chat-container">
    <div class="chat-history">
      <!-- 聊天记录将在这里显示 -->
    </div>
    <div class="chat-input">
      <input type="text" placeholder="输入消息..." id="chat-input">
      <button onclick="sendMessage()">发送</button>
    </div>
    <div class="voice-input">
      <button onclick="startVoiceInput()">语音输入</button>
    </div>
    <div class="language-select">
      <select id="language-select">
        <option value="zh">中文</option>
        <option value="en">English</option>
        <option value="es">Español</option>
      </select>
    </div>
  </div>

  <script>
    const chatHistory = document.querySelector('.chat-history');
    const chatInput = document.getElementById('chat-input');
    const languageSelect = document.getElementById('language-select');

    function sendMessage() {
  const message = chatInput.value.trim();
  if (message !== '') {
    const messageElement = document.createElement('div');
    messageElement.textContent = message;
    messageElement.classList.add('chat-message', 'chat-input');
    chatHistory.appendChild(messageElement);
    chatInput.value = '';

    // 向后端发送用户的消息
    fetch('http://10.10.47.17:5000/api/chat', {
      method: 'POST',
      headers: {
        'Content-Type': 'application/json',
      },
      body: JSON.stringify({ question: message }),
    })
    .then(response => response.json())
    .then(data => {
      const responseElement = document.createElement('div');
      responseElement.textContent = data.answer;
      responseElement.classList.add('chat-message');
      chatHistory.appendChild(responseElement);
    })
    .catch(error => {
      console.error('Error:', error);
    });
  }
}


    function startVoiceInput() {
      // 在这里添加语音输入的逻辑
      console.log('开始语音输入');
    }

    function changeChatLanguage() {
      const selectedLanguage = languageSelect.value;
      // 在这里添加切换聊天语言的逻辑
      console.log(`切换聊天语言为: ${selectedLanguage}`);
    }

    languageSelect.addEventListener('change', changeChatLanguage);
  </script>
</body>
</html>

from flask import Flask, request, jsonify
from flask_cors import CORS
import jieba
import pandas as pd

df = pd.read_csv('C:\\Users\\14774\\Documents\\lawzhidao_filter.csv')
questions = df['title'].tolist()
answers = df['reply'].tolist()

df2 = pd.read_csv('C:\\Users\\14774\\Documents\\baoxianzhidao_filter.csv')
questions2 = df2['title'].tolist()
answers2= df2['reply'].tolist()

app = Flask(__name__)
CORS(app, resources={r"/api/*": {"origins": "*"}})

# 定义知识库
knowledge_base = [
    ("政务服务是什么", "政务服务是政府提供的一种服务"),
    ("天气预报", "明天的天气将会是晴朗的"),
    ("经济发展", "我国的经济发展将继续保持稳定增长"),
    ("郎志杰是谁","郎志杰同学是云南民族大学化学专业的一名杰出大学生。他聪明好学，勤奋努力，在学术上表现出色。他热爱化学，对实验研究充满热情，具有较强的实践能力。在校期间，他积极参与各类学术活动，取得了优异的成绩。他还关心他人，乐于助人，具有良好的团队协作精神。他的求知欲和上进心让人敬佩，相信他在未来的学习和工作中一定会有所作为。"),
    ("梁正涛是谁", "梁正涛是个帅币，贵州大学计算机科学与技术学院的学生")
]

for i in range(len(questions2)):
    knowledge_base.append((questions2[i], answers2[i]))
for i in range(len(questions)):
    knowledge_base.append((questions[i], answers[i]))
    
@app.route('/api/chat', methods=['POST'])
def answer_question():
    # 获取前端发送的问题
    user_input = request.json['question']

    # 使用jieba进行分词
    words = jieba.cut(user_input)
    
    # 初始化默认回复
    response = "抱歉，我无法回答您的问题。"
    for question, answer in knowledge_base:
        if user_input in question:
            response = answer
            return jsonify({'answer': response})  
    
    # 遍历分词结果，查找知识库中的匹配项
    for word in words:
        for question, answer in knowledge_base:
            if word in question:
                response = answer
                break
        
    
    # 返回答案给前端
    return jsonify({'answer': response})

if __name__ == '__main__':
    app.run(host='0.0.0.0', port=5000)

政务服务未来趋势

spider文

关注

14
点赞
踩
16

收藏

觉得还不错? 一键收藏
0
评论
建立一个政务服务问答系统的demo展示

【代码】建立一个政务服务问答系统的demo展示。
复制链接

扫一扫