You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
401 lines
12 KiB
401 lines
12 KiB
{% load static %}
|
|
<!DOCTYPE html>
|
|
<html lang="en">
|
|
<head>
|
|
<meta charset="UTF-8">
|
|
|
|
<meta charset="utf-8">
|
|
|
|
<title>VoiceBot-Prototyp</title>
|
|
<link rel="stylesheet" href="{% static "css/bootstrap.min.css" %}">
|
|
<link rel="stylesheet" href="{% static "css/css/common-page.css" %}">
|
|
<link rel="stylesheet" href="{% static "css/font-awesome-4.7.0/css/font-awesome.min.css" %}">
|
|
<link rel="stylesheet" href="{% static "css/toastr.css" %}">
|
|
<link rel="stylesheet" href="{% static "css/css/chat.css" %}">
|
|
<link rel="stylesheet" href="{% static "css/css/home.css" %}">
|
|
<link href="https://fonts.googleapis.com/css2?family=Montserrat&family=Source+Sans+Pro:wght@600&display=swap">
|
|
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
|
|
|
|
<link rel="stylesheet" href="{% static "css/custom.css" %}">
|
|
<script src="{% static "script/jquery-1.10.2.js" %}"></script>
|
|
|
|
<script src="{% static "script/bootstrap.min.js" %}"></script>
|
|
<script src="{% static "script/toastr.js" %}"></script>
|
|
|
|
</head>
|
|
|
|
<body>
|
|
<div class="header">
|
|
<div class="logo">
|
|
<a href="https://www.digitalakademie-bw.de"><img
|
|
src="https://www.digitalakademie-bw.de/wp-content/uploads/2018/04/digitalakademie_logo-1.png"
|
|
alt="Digitalakademie@bw"></a>
|
|
<!--Menu-->
|
|
<div class="inner_header">
|
|
<div class="logo_container">
|
|
|
|
<h1>Prototyp<span>VoiceBot</span></h1>
|
|
</div>
|
|
<!--Navigation-->
|
|
<ul class="navigation">
|
|
<a href="">
|
|
<li>Home</li>
|
|
</a>
|
|
<a href="ueber">
|
|
<li>Über</li>
|
|
</a>
|
|
<a href="kontakt">
|
|
<li>Kontakt</li>
|
|
</a>
|
|
<a href="https://www.digitalakademie-bw.de/" target="_blank">
|
|
<li>DA@bw</li>
|
|
</a>
|
|
|
|
</ul>
|
|
</div>
|
|
<!--End Menu-->
|
|
</div>
|
|
<!-- CHAT BAR BLOCK -->
|
|
<div class="chat-bar-collapsible">
|
|
<button id="chat-button" type="button" class="collapsible">Starte das Voicebot!
|
|
<i id="chat-icon" style="color: #fff;" class="fa fa-fw fa-comments-o"></i>
|
|
</button>
|
|
|
|
<div class="content">
|
|
<div class="full-chat-block">
|
|
<!-- Message Container -->
|
|
<div class="outer-container">
|
|
<div class="chat-container">
|
|
<input type="hidden" id="userId">
|
|
<!-- Messages -->
|
|
<div class="col-md-12">
|
|
<div class="row" id="MessageContent">
|
|
</div>
|
|
</div>
|
|
|
|
<!-- User input box -->
|
|
<div class="chat-bar-input-block">
|
|
<div id="userInput">
|
|
<input id="Message" class="input-box" type="text" name="msg"
|
|
placeholder="Geben Sie hier Ihre Frage ein ">
|
|
<p></p>
|
|
</div>
|
|
|
|
<div class="chat-bar-icons">
|
|
<i id="chat-icon" style="color: #333;" class="fa fa-fw fa-send"
|
|
onclick="Reply()"></i>
|
|
<i id="chat-icon" style="color: crimson;" class="fa fa-microphone"
|
|
onclick="myFunction2()"></i>
|
|
|
|
</div>
|
|
</div>
|
|
|
|
<div id="chat-bar-bottom">
|
|
<p></p>
|
|
</div>
|
|
|
|
</div>
|
|
</div>
|
|
|
|
</div>
|
|
</div>
|
|
|
|
</div>
|
|
|
|
|
|
<script>
|
|
toastr.options.positionClass = 'toast-bottom-left';
|
|
var pref='{{request.path}}';
|
|
pref =pref.replace("chatbot/", "prodae_")+'#';
|
|
var sesid = pref+ Math.random().toString(36).substr(2, 9) + Math.random().toString(36).substr(2, 9);
|
|
sesid =sesid.substr(1)
|
|
console.log(sesid)
|
|
$("#userId").val(sesid);
|
|
sessionStorage.setItem("chatbot.sessionid", sesid);
|
|
|
|
var msgText = $('#Message');
|
|
$("#Message").keypress(function (e) {
|
|
if (e.which == 13) {
|
|
Reply();
|
|
}
|
|
});
|
|
function Reply() {
|
|
var msg = msgText.val()
|
|
if (msg == '') {
|
|
toastr.error("Message can not be empty")
|
|
return;
|
|
}
|
|
|
|
var data = {
|
|
"msg": msg, "userId":$("#userId").val(), "startcontext": ""
|
|
}
|
|
$.ajax({
|
|
url: '/chatbot/chatbot',
|
|
data: JSON.stringify(data),
|
|
method: 'POST',
|
|
success: function (res) {
|
|
drawMessage(res)
|
|
|
|
},
|
|
error: function (err) {
|
|
if (err.desc == null)
|
|
err.desc = "Something went wrong"
|
|
toastr.error(err.desc)
|
|
}
|
|
})
|
|
}
|
|
|
|
|
|
function isObject(obj) {
|
|
return (typeof obj === "object" && obj !== null) || typeof obj === "function";
|
|
}
|
|
var intentbutton = document.getElementsByClassName('btn-ortena');
|
|
|
|
function toCorona(){
|
|
var cdata = document.getElementById("chatbot-button").dataset;
|
|
var sessionId = sessionStorage.getItem("ortena.sessionid");
|
|
user = "corona_" + cdata.chat + "#" + sessionId;
|
|
|
|
}
|
|
function toOrtena(){
|
|
var cdata = document.getElementById("chatbot-button").dataset;
|
|
var sessionId = sessionStorage.getItem("ortena.sessionid");
|
|
user = cdata.system + "_" + cdata.chat + "#" + sessionId;
|
|
}
|
|
|
|
|
|
function myFunction(intent_message) {
|
|
|
|
console.log(intent_message)
|
|
"$('.btn-ortena').data('intent');"
|
|
var msg = intent_message;
|
|
|
|
if (msg == '') {
|
|
toastr.error("Message can not be empty")
|
|
return;
|
|
}
|
|
|
|
var data = {
|
|
"msg": msg, "userId":$("#userId").val()
|
|
}
|
|
$.ajax({
|
|
url: '/chatbot/chatbot',
|
|
data: JSON.stringify(data),
|
|
method: 'POST',
|
|
success: function (res) {
|
|
drawAnswer(res)
|
|
},
|
|
error: function (err) {
|
|
if (err.desc == null)
|
|
err.desc = "Something went wrong"
|
|
toastr.error(err.desc)
|
|
}
|
|
})
|
|
|
|
}
|
|
for (var i = 0; i < intentbutton.length; i++) {
|
|
intentbutton[i].addEventListener('click', myFunction);
|
|
}
|
|
|
|
var msgContent = $('#MessageContent');
|
|
|
|
function drawMessage(res) {
|
|
msgContent.append("<div class='col-md-6 owner-message'><p>"+res.ques+"</p></div>");
|
|
drawAnswer(res)
|
|
}
|
|
function drawAnswer(res) {
|
|
|
|
var q= jQuery("<div></div>")
|
|
q.addClass("col-md-6").addClass("guest-message")
|
|
|
|
if (Array.isArray(res.res)) {
|
|
q.append("<p>"+paint(res.res[0])+"</p>")
|
|
} else q.append("<p>"+paint(res.res)+"</p>");
|
|
|
|
|
|
|
|
msgText.val('')
|
|
|
|
|
|
q.appendTo(msgContent)
|
|
console.log('res.res[0]', res.res[1])
|
|
if (Array.isArray(res.res)) {
|
|
botVoice(res.res[1])
|
|
} else botVoice(res.res);
|
|
|
|
}
|
|
|
|
jQuery(document.body).on('click', '.btn-abfallja', function (e) {
|
|
var el= jQuery(this).parent().parent().parent().parent();
|
|
jQuery(el).find(".abfallja").show()
|
|
jQuery(el).find(".abfallnein").hide()
|
|
});
|
|
jQuery(document.body).on('click', '.btn-abfallnein', function (e) {
|
|
var el= jQuery(this).parent().parent().parent().parent();
|
|
jQuery(el).find(".abfallnein").show()
|
|
jQuery(el).find(".abfallja").hide()
|
|
});
|
|
function paintStrukturierteAntwort(obj) {
|
|
|
|
let xstr="";
|
|
var items = obj["atwst"];
|
|
|
|
items.sort(function (a, b) {
|
|
return a.pgx - b.pgx;
|
|
});
|
|
if (items.length > 0) {
|
|
|
|
xstr += "<div class=\"chatbot-card chatbot-card--antwst\">";
|
|
|
|
items.forEach(function (item) {
|
|
let typ = item.typ;
|
|
if (!typ) typ = "atwst"
|
|
xstr += paintItem(item, typ)
|
|
|
|
})
|
|
xstr+="</div>";
|
|
}
|
|
|
|
return xstr;
|
|
}
|
|
function paintItem(item, typ) {
|
|
let xstr = "<div class=\"chatbot-card--" + typ + "\">";
|
|
let xcls = "accordion"
|
|
if (Number(item.pgx) < 1)
|
|
xcls = "selection"
|
|
|
|
if (item.titel)
|
|
xstr+="<div class=\"chatbot-card__header\"><div class=\"chatbot-card__title\">" + item.titel + "</div></div>"
|
|
xstr+="<div class=\"chatbot-card__body\">"
|
|
if (item.intro)
|
|
xstr+="<div class=\"chatbot-intro\">" + item.intro + "</div>"
|
|
if (item.btn && item.btn.length > 0) {
|
|
|
|
xstr+="<div class=\"chatbot-card__" + xcls + "\"><nav><ul class=\"" + xcls + "__items\">"
|
|
let btn = item.btn;
|
|
btn.sort(function (a, b) {
|
|
return Number(a.lfnr) - Number(b.lfnr);
|
|
});
|
|
btn.forEach(function (element) {
|
|
xstr+="<li class=\"" + xcls + "__item\"><button class=\"btn-kora\" data-intent=\"" + element.bint + "\""
|
|
xstr+=" onclick=\"myFunction('" + element.bint + "')\">" + element.bzn + "</button></li>"
|
|
|
|
});
|
|
xstr+="</ul></nav></div>";
|
|
}
|
|
xstr+="</div>";
|
|
xstr+="</div>";
|
|
|
|
return xstr;
|
|
}
|
|
function paint (val) {
|
|
let str = "";
|
|
if (val) {
|
|
if (Array.isArray(val)) {
|
|
if (val.length) {
|
|
|
|
val.forEach(function (t) {
|
|
str = str + paint(t);
|
|
});
|
|
|
|
}
|
|
} else if (isObject(val)) {
|
|
if(val["atwst"])
|
|
{
|
|
|
|
return paintStrukturierteAntwort(val);}
|
|
|
|
else
|
|
return val;
|
|
} else
|
|
return val;
|
|
}
|
|
|
|
return str;
|
|
}
|
|
|
|
function paintItemBtn(item, typ) {
|
|
let xstr = "<div class=\"chatbot-card--" + typ + "\">";
|
|
let xcls = typ
|
|
let intro =jQuery(item).data(typ)
|
|
let titel=jQuery(item).text()
|
|
if (titel)
|
|
xstr+="<div class=\"chatbot-card__header\"><div class=\"chatbot-card__title\">" + titel + "</div></div>"
|
|
xstr+="<div class=\"chatbot-card__body\">"
|
|
if (intro)
|
|
xstr+="<div class=\"chatbot-intro\">" + intro + "</div>"
|
|
xstr+="</div>";
|
|
xstr+="</div>";
|
|
|
|
return xstr;
|
|
}
|
|
const voice = document.querySelector(".voice");
|
|
const voice2text = document.querySelector(".voice2text");
|
|
|
|
const SpeechRecognition = window.SpeechRecognition || window.webkitSpeechRecognition;
|
|
const recorder = new SpeechRecognition();
|
|
recorder.lang = 'de-DE';
|
|
|
|
function addHumanText(text) {
|
|
text= 'Du: ' + text
|
|
const chatContainer = document.createElement("div");
|
|
chatContainer.classList.add("chat-container");
|
|
const chatBox = document.createElement("p");
|
|
chatBox.classList.add("voice2text");
|
|
const chatText = document.createTextNode(text);
|
|
chatBox.appendChild(chatText);
|
|
chatContainer.appendChild(chatBox);
|
|
return chatContainer;
|
|
}
|
|
|
|
function addBotText(text) {
|
|
text = 'Elisa: ' + text
|
|
const chatContainer1 = document.createElement("div");
|
|
chatContainer1.classList.add("chat-container");
|
|
chatContainer1.classList.add("darker");
|
|
const chatBox1 = document.createElement("p");
|
|
chatBox1.classList.add("voice2text");
|
|
const chatText1 = document.createTextNode(text);
|
|
chatBox1.appendChild(chatText1);
|
|
chatContainer1.appendChild(chatBox1);
|
|
return chatContainer1;
|
|
}
|
|
|
|
function botVoice(message) {
|
|
const speech = new SpeechSynthesisUtterance();
|
|
console.log(message)
|
|
speech.text = message
|
|
speech.volume = 1;
|
|
speech.rate = 1;
|
|
speech.pitch = 1;
|
|
window.speechSynthesis.speak(speech);
|
|
|
|
}
|
|
|
|
/* Button start*/
|
|
function myFunction2 (){
|
|
recorder.start();
|
|
console.log('Ready to receive the voice.');
|
|
}
|
|
|
|
recorder.onresult = function (event) {
|
|
for (var i = event.resultIndex; i < event.results.length; ++i) {
|
|
if (event.results[i].isFinal) {
|
|
Message.value += event.results[i][0].transcript;
|
|
}
|
|
}
|
|
}
|
|
|
|
</script>
|
|
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
|
|
<script src="{% static "script/responses.js" %}"></script>
|
|
<script src="{% static "script/chat.js" %}"></script>
|
|
|
|
|
|
|
|
|
|
<!--Button-Mic-->
|
|
|
|
|
|
</body>
|
|
</html>
|
|
|