Spaces:
Configuration error
Configuration error
| <html> | |
| <head lang="en"> | |
| <meta charset="UTF-8"> | |
| <meta name="viewport" content="width=device-width, initial-scale=1.0"> | |
| <title>Chatbot</title> | |
| <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script> | |
| <link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet"> | |
| <link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.6.3/css/font-awesome.min.css" rel="stylesheet"> | |
| <style type="text/css"> | |
| .fixed-panel { | |
| min-height: 400px; | |
| max-height: 400px; | |
| background-color: #19313c; | |
| color: white; | |
| overflow: auto; | |
| } | |
| .media-list { | |
| overflow: auto; | |
| clear: both; | |
| display: table; | |
| overflow-wrap: break-word; | |
| word-wrap: break-word; | |
| word-break: normal; | |
| line-break: strict; | |
| } | |
| .panel { | |
| margin-bottom: 20px; | |
| background-color: #fff; | |
| border: 6px solid transparent; | |
| border-radius: 25px; | |
| -webkit-box-shadow: 0 1px 1px rgba(0,0,0,.05); | |
| box-shadow: 0 1px 1px rgba(0,0,0,.05); | |
| } | |
| .panel-info { | |
| border-color: #0c2735; | |
| } | |
| .panel-info>.panel-heading { | |
| color: white; | |
| background-color: #0c2735; | |
| border-color: #0c2735; | |
| } | |
| .panel-footer { | |
| padding: 10px 15px; | |
| background-color: #0c2735; | |
| border-top: 1px solid #0c2735; | |
| border-bottom-right-radius: 3px; | |
| border-bottom-left-radius: 3px | |
| } | |
| body { | |
| background: rgb(96,143,149); /* Old browsers */ | |
| background: -moz-linear-gradient(-45deg, rgba(96,143,149,1) 0%, rgba(0,133,136,1) 9%, rgba(12,36,73,1) 52%, rgba(26,30,59,1) 100%); /* FF3.6-15 */ | |
| background: -webkit-linear-gradient(-45deg, rgba(96,143,149,1) 0%,rgba(0,133,136,1) 9%,rgba(12,36,73,1) 52%,rgba(26,30,59,1) 100%); /* Chrome10-25,Safari5.1-6 */ | |
| background: linear-gradient(135deg, rgba(96,143,149,1) 0%,rgba(0,133,136,1) 9%,rgba(12,36,73,1) 52%,rgba(26,30,59,1) 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */ | |
| filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#608f95', endColorstr='#1a1e3b',GradientType=1 ); /* IE6-9 fallback on horizontal gradient */ | |
| } | |
| </style> | |
| </head> | |
| <body> | |
| <div class="container background-color: rgb(255,0,255);"> | |
| <div class="row"> | |
| <h3 class="text-center"><small><strong>Artificial</strong></small><font color="white"> Intelligence!!! </font><small><strong>Here</strong></small><font color="white"> I am..</font></h3> | |
| | |
| <div class="col-md-4 col-md-offset-4"> | |
| <div id="chatPanel" class="panel panel-info"> | |
| <div class="panel-heading"> | |
| <strong><span class="glyphicon glyphicon-globe"></span> Talk with Me !!! (You: Green / Bot: White) </strong> | |
| </div> | |
| <div class="panel-body fixed-panel"> | |
| <ul class="media-list"> | |
| </ul> | |
| </div> | |
| <div class="panel-footer"> | |
| <form method="post" id="chatbot-form"> | |
| <div class="input-group"> | |
| <input type="text" class="form-control" placeholder="Enter Message" name="messageText" id="messageText" autofocus/> | |
| <span class="input-group-btn"> | |
| <button class="btn btn-info" type="button" id="chatbot-form-btn">Send</button> | |
| <button class="btn btn-info" type="button" id="chatbot-form-btn-clear">Clear</button> | |
| <button class="btn btn-info" type="button" id="chatbot-form-btn-voice">Voice</button> | |
| </span> | |
| </div> | |
| </form> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| <script src="https://code.jquery.com/jquery-1.12.4.min.js"></script> | |
| <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script> | |
| <script> | |
| var exports = {}; | |
| </script> | |
| <script src="https://unpkg.com/speech-to-text@0.7.4/lib/index.js"></script> | |
| <script> | |
| $(function() { | |
| var synth = window.speechSynthesis; | |
| var msg = new SpeechSynthesisUtterance(); | |
| var voices = synth.getVoices(); | |
| msg.voice = voices[0]; | |
| msg.rate = 1; | |
| msg.pitch = 1; | |
| $('#chatbot-form-btn').click(function(e) { | |
| e.preventDefault(); | |
| $('#chatbot-form').submit(); | |
| }); | |
| $('#chatbot-form-btn-clear').click(function(e) { | |
| e.preventDefault(); | |
| $('#chatPanel').find('.media-list').html(''); | |
| }); | |
| $('#chatbot-form-btn-voice').click(function(e) { | |
| e.preventDefault(); | |
| var onAnythingSaid = function (text) { | |
| console.log('Interim text: ', text); | |
| }; | |
| var onFinalised = function (text) { | |
| console.log('Finalised text: ', text); | |
| $('#messageText').val(text); | |
| }; | |
| var onFinishedListening = function () { | |
| // $('#chatbot-form-btn').click(); | |
| }; | |
| try { | |
| var listener = new SpeechToText(onAnythingSaid, onFinalised, onFinishedListening); | |
| listener.startListening(); | |
| setTimeout(function () { | |
| listener.stopListening(); | |
| if ($('#messageText').val()) { | |
| $('#chatbot-form-btn').click(); | |
| } | |
| }, 5000); | |
| } catch (error) { | |
| console.log(error); | |
| } | |
| }); | |
| $('#chatbot-form').submit(function(e) { | |
| e.preventDefault(); | |
| var message = $('#messageText').val(); | |
| $(".media-list").append('<li class="media"><div class="media-body"><div class="media"><div style = "text-align:right; color : #2EFE2E" class="media-body">' + message + '<hr/></div></div></div></li>'); | |
| $.ajax({ | |
| type: "POST", | |
| url: "/ask", | |
| data: $(this).serialize(), | |
| success: function(response) { | |
| $('#messageText').val(''); | |
| var answer = response.answer; | |
| const chatPanel = document.getElementById("chatPanel"); | |
| $(".media-list").append('<li class="media"><div class="media-body"><div class="media"><div style = "color : white" class="media-body">' + answer + '<hr/></div></div></div></li>'); | |
| $(".fixed-panel").stop().animate({ scrollTop: $(".fixed-panel")[0].scrollHeight}, 1000); | |
| msg.text = answer; | |
| speechSynthesis.speak(msg); | |
| }, | |
| error: function(error) { | |
| console.log(error); | |
| } | |
| }); | |
| }); | |
| }); | |
| </script> | |
| </body> | |
| </html> | |