【JavaScript+自然语言处理+HTML+CSS】实现Web端的智能聊天问答客服实战(附源码 超详细必看)

news2025/1/15 10:30:15

需要源码请点赞关注收藏后评论区留言私信~~~

智能客服的部署方式比较多样化,可以作为组件嵌入到其他应用程序,也可以部署到定制网站,下面分别介绍如何新创建智能客服应用,从而使其能够集成为网站功能的一部分,以及如何将通过PyCharm训练后的智能客服部署到网站

一、智能聊天问答客服简介

QA问答是Question-and-Answer的缩写,根据用户提出的问题检索答案,并用用户可以理解的自然语言回答用户,问答型客服注重一问一答处理,侧重知识的推理。 从应用领域视角,可将问答系统分为限定域问答系统和开放域问答系统。 根据支持问答系统产生答案的文档库、知识库,以及实现的技术分类,可分为自然语言的数据库问答系统、对话式问答系统、阅读理解系统、基于常用问题集的问答系统、基于知识库的问答系统等。

客服设计 

问题处理

问题处理流程识别问题中包含的信息,判断问题的主题信息和主题范畴归属,比如是属于一般类问题还是属于特定主题类问题,然后提取与主题相关的关键信息,比如人物信息、地点信息和时间信息等。

问题映射

根据用户咨询的问题,进行问题映射消除歧义。通过字符串相似度匹配和同义词表等解决映射问题,根据需要执行拆分和合并操作。

查询构建

通过对输入问题进行处理,将问题转化为计算机可以理解的查询语言,然后查询知识图谱或者数据库,通过检索获得相应备选答案。

知识推理

根据问题属性进行推理,问题基本属性如果属于知识图谱或者数据库中的已知定义信息,则可以从知识图谱或者数据库中查找,直接返回答案。如果问题属性是未定义类问题,则需要通过机器算法推理生成答案。

消岐排序

根据知识图谱中查询返回的一个或者多个备选答案,结合问题属性进行消歧处理和优先级排序,输出最佳答案。

二、效果展示

界面如下

界面的下方可由用户输入对应问题 下方系统会给出一些问题的概括 作者可以选择以获得更好的回答 

 

 

 

 

三、代码

部分代码如下 需要全部代码请点赞关注收藏后评论区留言私信


<!DOCTYPE html>
<html lang="en">
<head>
	<title>智能医疗客服</title>
	<meta charset="UTF-8">
	<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, minimum-scale=1">
	<link href="https://fonts.googleapis.com/css?family=Roboto" rel="stylesheet">
	<link rel="stylesheet" type="text/css" href="static/jquery.css">
	<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" >
	<link rel="stylesheet" type="text/css" href="static/chatbot.css">
	<style>
        @import url('./static/css/style.css');
        @import url('./static/css/font.css');
    </style> 
           <!-- 设置网站的定制化显示样式内嵌式CSS -->
       <style>
        .button1 {
          border: none;
          color: white;
          background-color:blue;
          padding: 5px 16px;
          text-align: center;
          text-decoration: none;
          display: block;
          font-size: 20px;
          margin: 1px 1px;
          cursor: pointer;
          font-family:kaiti;
          position: absolute;
          left: 200px;

        }
        .button2 {
          border: none;
          color: white;
          background-color:blue;
          padding: 5px 16px;
          text-align: center;
          text-decoration: none;
          display: inline-block;
          font-size: 20px;
          margin: 1px 1px;
          cursor: pointer;
          font-family:kaiti;
          position: absolute;
          left: 350px;

        }
        .button3 {
          border: none;
          color: white;
          background-color:blue;
          padding: 5px 16px;
          text-align: center;
          text-decoration: none;
          display: inline-block;
          font-size: 20px;
          margin: 1px 1px;
          cursor: pointer;
          font-family:kaiti;
          position: absolute;
          left: 500px;

        }
        .button4 {
          border: none;
          color: white;
          background-color:blue;
          padding: 5px 16px;
          text-align: center;
          text-decoration: none;
          display: inline-block;
          font-size: 20px;
          margin: 1px 1px;
          cursor: pointer;
          font-family:kaiti;
          position: absolute;
          left: 650px;

        }

        .button:hover {
          background-color: purple;
          color: white;
        }

        .bot-header{
          background-color: white;
          padding: 10px;
          text-align: center;
          font-size: 40px;
          font-family:kaiti;
          font-weight: bold;
          letter-spacing: 5px;
        }

        .bot-menu{
          text-align: center;
          font-size: 20px;
          font-family:kaiti;
        }
        </style>
    
       
</head>
<body>
	
    <div class="container">
      <div class="bot-header">
        智能客服对话系统

      </div>

      <div id="bot-menu">
        <button  class="button1">功能概要</button>
        <button class="button2">服务一览</button>
        <button class="button3">常见问题</button>
        <button class="button4">用户注册</button>
        <hr>
        <br>

      </div>
&nbsp;&nbsp;</a>
      <a id="summary">&#x25BC;提升效率&#x25BC;&nbsp;&nbsp;</a>
      <a id="summary">&#x25BC;节约成本&#x25BC;&nbsp;&nbsp;</a>
      <a id="summary">&#x25BC;自我学习&#x25BC;&nbsp;&nbsp;</a>
      </ul>
      </div>
    </div> 
    

    
    <section id="chatbot">
	    <div class="vertical-align">
	        <div class="container">
	            <div class="row">
	                <div class="col-sm-9 col-sm-offset-2 col-xs-offset-0">
	                    <div class="interaction no-border">
	                        <div id="chatdialog" class="chatbotForm">
	                            <form action="" method="GET" class="hidden">
	                                <select message_interaction="尊敬的客户,您好!我是智能客服,请选择选项继续对话。" name="greeting">
	                                    <option value="noproblem">没有问题</option>
	                                    <option value="continue">请继续</option>
	                                </select>
	                                <input type="text" name="name" message_interaction="请输入您的姓名。 | 感谢您的惠顾,您的姓名。">
	                                <input type="text" message_interaction="您好, {name}:0。 很高兴能够为您服务。接下来请输入您要咨询的信息类型。" data-no-answer="true">
	                                <select name="selectquery" message_interaction="请问您要咨询哪类信息?" multiple>
	                                    <option value="新冠传播途径">新冠传播途径</option>
	                                    <option value="新冠预防方法">新冠预防方法</option>
	                                    <option value="新冠疫苗有效性">新冠疫苗有效性</option>
	                                    <option value="新冠潜伏期">新冠潜伏期</option>
	                                </select>
	                                <select name="querymedical" recallFunction="storeState" message_interaction="很好,您是一位医学工作者吗?">
	                                    <option value="yes">是</option>
	                                    <option value="no">否</option>
	                                </select>
	                                <div data-conv-fork="querymedical">
ut message_interaction="请输入您的电子邮箱" emailRegex="^[a-zA-Z0-9.!#$%&’*_{|}~-]+@[a-zA-Z0-9_]+\.[a-zA-Z0-9_]+(?:\.[a-zA-Z0-9-]+)*" id="email" type="email" name="email" required placeholder="What's your e-mail?">
	                                <input message_interaction="请输入您的家庭住址" type="address"  id="address" name="address" >
									<select message_interaction="请选择您期望使用的搜索平台:">
											<option value="baidu" recallFunction="baidu">baidu</option>
											<option value="cnki" recallFunction="cnki">cnki</option>
									</select>
	                                <select name="search" message_interaction="您希望我们使用指定的搜索引擎帮您查询信息吗?">
	                                    <option value="yes" recallFunction="searchPrimary">是</option>
	                                    <option value="no" recallFunction="searchSecondary">否</option>
	                                </select>
	                                <select message_interaction="感谢您使用智能客服平台服务。" id="">
	                                    <option value="">非常感谢,欢迎继续下次光临。</option>
	                                </select>
	                            </form>
	                        </div>
	                    </div>
	                </div>
	            </div>
	        </div>
	    </div>
	</section>
	
	<script type="text/javascript" src="static/jquery-1.12.3.min.js"></script>
	<script type="text/javascript" src="static/autosize.min.js"></script>
	<script type="text/javascript" src="static/jquery.js"></script>

	<script>
		function baidu(status, ready) {
			window.open("https://www.baidu.com");
			ready();
		}
		function cnki(status, ready) {
			window.open("https://www.cnki.net");
			ready();
		}
		var statusTo = false;
		var statusFrom = false;
		function storeState(status, ready) {
			statusTo = status.current;
			ready();
		}
	
</body>
</html>

创作不易 觉得有帮助请点赞关注收藏~~~

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.coloradmin.cn/o/70126.html

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈,一经查实,立即删除!

相关文章

给你讲明白MySQL的乐观锁和悲观锁

乐观锁与悲观锁是一种广义上的概念。不管是 Java 语言&#xff0c;也或者是其他语言以及数据库都有这类概念对应的实际应用。想要学习乐观锁和悲观锁就要学习他们的基本知识&#xff0c;那么下面我们来学习一下。 锁 生活中&#xff1a;锁在我们身边无处不在&#xff0c;比如我…

PMO项目经理必备的简洁解决问题方案和报告模板

项目经理虽然有责无权&#xff0c;他的权力更多来源于汇报的权力和影响力&#xff0c;作为项目经理和PMO难免经常会进行报告或者是提供方案建议&#xff0c;能够最短时间的讲明白问题和建议才会更多的获得机会&#xff0c;那么如何才能简明扼要的把你的方案和报告说清楚呢&…

基于jsp+mysql+ssm基金信息管理系统-计算机毕业设计

项目介绍 本基金信息管理系统主要包括系统基金信息管理模块、用户管理模块、基金收藏管理、登录模块、和退出模块等多个模块,系统采用了jsp的mvc框架,SSM(springMvcspringMybatis)框架进行开发,本系统是独立的运行&#xff0c;不依附于其他系统&#xff0c;可移植&#xff0c;…

图扑软件数字孪生污水处理厂

随着人工智能、大数据、云计算、物联网和5G等新技术不断融入水务行业的各个环节&#xff0c;智慧水务已逐渐成为传统水务领域转型升级的重要方向。 图扑软件依托自主研发的 HT for Web 产品&#xff0c;并结合视频融合、BIM、5G、物联网、云计算及大数据等先进技术&#xff0c;…

IIS反向代理 设置IIS跨域访问

概念说明 浏览器的同源策略限制了对某些资源的跨域访问&#xff0c;其目的是保障用户数据安全&#xff0c;但同时也阻止了部分合理的跨域请求。为了绕过同源策略的限制&#xff0c;人们提出了多种跨域访问方案。 解决步骤 打开IIS&#xff0c;选中当前站点 -》右侧找到HTTP响…

手写js-防抖,节流

防抖 debounce 函数所做的事情就是&#xff0c;在用户停止某个操作一段时间之后才执行相应的监听函数&#xff0c;而不是在用户操作的过程当中&#xff0c;浏览器触发多少次事件&#xff0c;就执行多少次监听函数。 以最后一次操作为准开始计时器 应用场景: 登录、发短信等按钮…

JAVA SCRIPT设计模式--结构型--设计模式之Bridge桥接模式(7)

JAVA SCRIPT设计模式是本人根据GOF的设计模式写的博客记录。使用JAVA SCRIPT语言来实现主体功能&#xff0c;所以不可能像C&#xff0c;JAVA等面向对象语言一样严谨&#xff0c;大部分程序都附上了JAVA SCRIPT代码&#xff0c;代码只是实现了设计模式的主体功能&#xff0c;不代…

Linux 之七 内核架构、API/ABI 介绍、文件层次结构、Kernel 源码文件

Linux 内核最早是在 1991 年由芬兰大学生林纳斯托瓦兹为自己的个人电脑开发的&#xff0c;并在 GNU 通用公共许可证第 2 版&#xff08;也包含了其他兼容许可证&#xff09;之下发布的一种开源的类 Unix 操作系统宏内核。 注意&#xff0c;我们通常说的 Linux 系统是 Linux Ker…

FineReport数据图表制作教程-密码控件

1. 概述 1.1 版本 报表服务器版本 功能变更 11.0 -- 1.2 应用场景 1.2.1 填报控件 填报报表中可以通过该控件输入密码信息&#xff0c;录入密码&#xff0c;如下图所示&#xff1a; 1.2.2 参数控件 参数面板处可以通过该控件输入密码信息&#xff0c;键入查询参数&#…

WebRTC GCC 拥塞控制算法(TFB-GCC)

目录 一. 前言 二. TFB-GCC原理 1. 接收端记录并反馈收包情况 &#xff08;1&#xff09;transport-wide sequence nunmber &#xff08;2&#xff09;RTCP RTPFB TW 报文 2. 发送端结合包接收反馈情况进行带宽预估拥塞控制 &#xff08;1&#xff09;基于延时梯度的带宽…

新手必看!jenkins邮件发送配置,一教就会!

最近刚学习jenkins&#xff0c;在配置邮件发送的时候&#xff0c;踩了很多坑&#xff0c;各种百度查询&#xff0c;调试了大半天&#xff0c;终于成功解决 &#xff01;特此记录&#xff01; 遇到最让我头痛的问题&#xff0c;就是明明控制台显示邮件发送成功&#xff0c;但是…

【STM32笔记】HAL库低功耗模式配置(ADC唤醒无法使用的解决方案)

【STM32笔记】HAL库低功耗模式配置&#xff08;ADC唤醒无法使用的解决方案&#xff09; 理论转载&#xff1a; leung-manwah.blog.csdn.net/article/details/114675725 一、低功耗模式简介 系统提供了多个低功耗模式&#xff0c;可在 CPU 不需要运行时&#xff08;例如等待外…

Python实现PSO粒子群优化循环神经网络LSTM分类模型项目实战

说明&#xff1a;这是一个机器学习实战项目&#xff08;附带数据代码文档视频讲解&#xff09;&#xff0c;如需数据代码文档视频讲解可以直接到文章最后获取。 1.项目背景 PSO是粒子群优化算法&#xff08;Particle Swarm Optimization&#xff09;的英文缩写&#xff0c;是一…

配置别名 配置alias

Linux: ~/.bashrc MAC bash 的配置文件是 ~/.bash_profile zsh的配置文件是~/.zsh 查看一下你的shell类型 terminal->performance->shells open with 方案是 1. 创建新的文件存放alias cd ~ vi .myalias edit .myalias esc :wq保存 2. add config to ~/.zshrc …

Java数据结构与Java算法学习Day09---并查集(简略笔记记录)

目录 并查集的功能&#xff1a; 1.1并查集结构 136 1.2并查集API设计 137 1.3并查集代码的实现 137 1.3.1UF&#xff08;int N&#xff09;构造方法实现 1.3.2并查集代码测试 138 1.4并查集应用案例 139 1.5UF_Tree算法优化 139 1.5.1UF_tree API设计 1.5.2优化后的…

git基本操作

目录 1 git命令与状态 1.1 常用git命令 1.2 不那么常用的git命令 1.3 常见状态 2 一些概念 2.1 版本控制 2.2 git简介 2.3 开源许可协议 3 常见git操作 3.1 下载git 3.2 安装git 3.3 配置用户信息 3.4 初始化仓库 3.5 查看git仓库状态 3.6 将文件…

手机软件测试用例设计

实例讲解手机软件测试用例设计 实例讲解手机软件测试用例设计,测试伴随在整个手机软件开发的各个阶段中&#xff0c;测试质量的高低直接关系到手机软件的可用性&#xff0c;友好性&#xff0c;可靠性。可以说&#xff0c;测试环节是手机软件开发的重要环节&#xff0c;是整个开…

JavaScript大作业:基于HTML实现紫色化妆品包装设计公司企业网站

&#x1f389;精彩专栏推荐 &#x1f4ad;文末获取联系 ✍️ 作者简介: 一个热爱把逻辑思维转变为代码的技术博主 &#x1f482; 作者主页: 【主页——&#x1f680;获取更多优质源码】 &#x1f393; web前端期末大作业&#xff1a; 【&#x1f4da;毕设项目精品实战案例 (10…

Linux与Nginx

Linux 一、Linux的概述&#xff1a; Linux是基于Unix的&#xff0c;Linux是一种自由和开放源码的操作系统&#xff0c;存在着许多不同的Linux版本&#xff0c;但它们都使用了Linux内核。Linux可安装在各种计算机硬件设备中&#xff0c;比如手机、平板电脑、路由器、台式计算机…

前端学习教程-SVG描边属性

前端学习教程-SVG描边属性&#xff0c;SVG提供了大量的笔画属性&#xff0c;实现各种各样的描边效果。我们来介绍一下&#xff1a; stroke&#xff1a;笔画属性&#xff0c; stroke-width&#xff1a;笔画宽度属性&#xff0c; stroke-linecap&#xff1a;笔画线帽属性&…