wkiv363
/
voicebot
1
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity
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.
2 Commits
1 Branch
0 Tags
90 MiB
Tree: 37b8b121d8
Branches Tags
${ item.name }
Create tag ${ searchTerm }
Create branch ${ searchTerm }
from '37b8b121d8'
${ noResults }
voicebot/containercontent/opt/chatbot_engine/templates/template_ae.html

402 lines
12 KiB
Raw Normal View History

voicbot
3 years ago
{% 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>
.
3 years ago
<a href="ueber">
voicbot
3 years ago
<li>Über</li>
</a>
.
3 years ago
<a href="kontakt">
voicbot
3 years ago
<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>