草庐IT

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

showswoller 2023-10-27 原文

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

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

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

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

  1. ruby - 使用 ruby​​ 将 HTML 转换为纯文本并维护结构/格式 - 2

    我想将html转换为纯文本。不过,我不想只删除标签,我想智能地保留尽可能多的格式。为插入换行符标签,检测段落并格式化它们等。输入非常简单,通常是格式良好的html(不是整个文档,只是一堆内容,通常没有anchor或图像)。我可以将几个正则表达式放在一起,让我达到80%,但我认为可能有一些现有的解决方案更智能。 最佳答案 首先,不要尝试为此使用正则表达式。很有可能你会想出一个脆弱/脆弱的解决方案,它会随着HTML的变化而崩溃,或者很难管理和维护。您可以使用Nokogiri快速解析HTML并提取文本:require'nokogiri'h

  2. ruby - 如何将脚本文件的末尾读取为数据文件(Perl 或任何其他语言) - 2

    我正在寻找执行以下操作的正确语法(在Perl、Shell或Ruby中):#variabletoaccessthedatalinesappendedasafileEND_OF_SCRIPT_MARKERrawdatastartshereanditcontinues. 最佳答案 Perl用__DATA__做这个:#!/usr/bin/perlusestrict;usewarnings;while(){print;}__DATA__Texttoprintgoeshere 关于ruby-如何将脚

  3. ruby - capybara field.has_css?匹配器 - 2

    我在MiniTest::Spec和Capybara中使用以下规范:find_field('Email').must_have_css('[autofocus]')检查名为“电子邮件”的字段是否具有autofocus属性。doc说如下:has_css?(path,options={})ChecksifagivenCSSselectorisonthepageorcurrentnode.据我了解,字段“Email”是一个节点,因此调用must_have_css绝对有效!我做错了什么? 最佳答案 通过JonasNicklas得到了答案:No

  4. ruby-on-rails - Rails HTML 请求渲染 JSON - 2

    在我的Controller中,我通过以下方式在我的index方法中支持HTML和JSON:respond_todo|format|format.htmlformat.json{renderjson:@user}end在浏览器中拉起它时,它会自然地以HTML呈现。但是,当我对/user资源进行内容类型为application/json的curl调用时(因为它是索引方法),我仍然将HTML作为响应。如何获取JSON作为响应?我还需要说明什么? 最佳答案 您应该将.json附加到请求的url,提供的格式在routes.rb的路径中定义。这

  5. ruby-on-rails - 使用 Sublime Text 3 突出显示 HTML 背景语法中的 ERB? - 2

    所以我在关注Railscast,我注意到在html.erb文件中,ruby代码有一个微弱的背景高亮效果,以区别于其他代码HTML文档。我知道Ryan使用TextMate。我正在使用SublimeText3。我怎样才能达到同样的效果?谢谢! 最佳答案 为SublimeText安装ERB包。假设您安装了SublimeText包管理器*,只需点击cmd+shift+P即可获得命令菜单,然后键入installpackage并选择PackageControl:InstallPackage获取包管理器菜单。在该菜单中,键入ERB并在看到包时选择

  6. ruby - 寻找通过阅读代码确定编程语言的ruby gem? - 2

    几个月前,我读了一篇关于ruby​​gem的博客文章,它可以通过阅读代码本身来确定编程语言。对于我的生活,我不记得博客或gem的名称。谷歌搜索“ruby编程语言猜测”及其变体也无济于事。有人碰巧知道相关gem的名称吗? 最佳答案 是这个吗:http://github.com/chrislo/sourceclassifier/tree/master 关于ruby-寻找通过阅读代码确定编程语言的rubygem?,我们在StackOverflow上找到一个类似的问题:

  7. ruby-on-rails - Ruby url 到 html 链接转换 - 2

    我正在使用Rails构建一个简单的聊天应用程序。当用户输入url时,我希望将其输出为html链接(即“url”)。我想知道在Ruby中是否有任何库或众所周知的方法可以做到这一点。如果没有,我有一些不错的正则表达式示例代码可以使用... 最佳答案 查看auto_linkRails提供的辅助方法。这会将所有URL和电子邮件地址变成可点击的链接(htmlanchor标记)。这是文档中的代码示例。auto_link("Gotohttp://www.rubyonrails.organdsayhellotodavid@loudthinking.

  8. ruby-on-rails - capybara ::ElementNotFound:无法找到 xpath "/html" - 2

    我正在学习http://ruby.railstutorial.org/chapters/static-pages上的RubyonRails教程并遇到以下错误StaticPagesHomepageshouldhavethecontent'SampleApp'Failure/Error:page.shouldhave_content('SampleApp')Capybara::ElementNotFound:Unabletofindxpath"/html"#(eval):2:in`text'#./spec/requests/static_pages_spec.rb:7:in`(root)'

  9. css - 用 watir 检查标签类? - 2

    我有一个div,它根据表单是否正确提交而改变。我想知道是否可以检查类的特定元素?开始元素看起来像这样。如果输入不正确,添加错误类。 最佳答案 试试这个:browser.div(:id=>"myerrortest").class_name更多信息:http://watir.github.com/watir-webdriver/doc/Watir/HTMLElement.html#class_name-instance_method另一种选择是只查看具有您期望的类的div是否存在browser.div((:id=>"myerrortes

  10. Unity 热更新技术 | (三) Lua语言基本介绍及下载安装 - 2

    ?博客主页:https://xiaoy.blog.csdn.net?本文由呆呆敲代码的小Y原创,首发于CSDN??学习专栏推荐:Unity系统学习专栏?游戏制作专栏推荐:游戏制作?Unity实战100例专栏推荐:Unity实战100例教程?欢迎点赞?收藏⭐留言?如有错误敬请指正!?未来很长,值得我们全力奔赴更美好的生活✨------------------❤️分割线❤️-------------------------

随机推荐