Skip to content

2
2020-077
Commit 8b4801c3 authored by G.M. Amashi S. Bastiansz's avatar G.M. Amashi S. Bastiansz 🎯
Browse files
Options

New HTML form is integrated to the product to get the GIF result

parent 6fdc02d2
Hide whitespace changes
Inline Side-by-side
Showing with 91 additions and 85 deletions
api.py
View file @ 8b4801c3
......@@ -56,7 +56,7 @@ def response(msg):
# message = request.get_json()
# responseGIF = processInput(message['message'])
print(msg)
responseGIF = processInput(msg)
# response = {
# "gifPath": responseGIF
......@@ -136,7 +136,7 @@ def allowed_file(filename):
# route to redirect Sign Translation page
@app.route('/tts')
def textToSignEngine():
return render_template('chatbot.html')
return render_template('textToSign.html')
# route to redirect Contact Us page
......
static/styles/chatbot-test.css
View file @ 8b4801c3
......@@ -5,11 +5,6 @@
outline: 0;
}
body {
background-color: #e74c3c;
font-family: Arial;
}
.chat {
width: 300px;
height: 500px;
......
templates/textToSign.html
View file @ 8b4801c3
......@@ -39,12 +39,22 @@
<link rel="shortcut icon" href="static/images/EasyTalkFavicon_v1.png" type="image/x-icon">
<link rel="icon" href="static/images/EasyTalkFavicon_v1.png" type="image/x-icon">
<link rel="stylesheet" href="static/styles/chatbot-test.css"/>
<script>window.console = window.console || function(t) {};</script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/prefixfree/1.0.7/prefixfree.min.js"></script>
<script>
if (document.location.search.match(/type=embed/gi)) {
window.parent.postMessage("resize", "*");
}
</script>
<script src="chrome-extension://mooikfkahbdckldjjndioackbalphokd/assets/prompt.js"></script>
</head>
<body>
<!-- header -->
<header class="fixed-top">
<!-- navbar -->
<!--<header class="fixed-top">
<div class="navigation w-100">
<div class="container">
<nav class="navbar navbar-expand-lg navbar-dark p-0">
......@@ -80,58 +90,33 @@
</nav>
</div>
</div>
</header>
</header>-->
<!-- /header -->
<!-- page title -->
<section class="page-title-section overlay" data-background="static/images/backgrounds/page-title.jpg">
<div class="container">
<div class="row">
<div class="col-md-8">
<ul class="list-inline custom-breadcrumb">
<li class="list-inline-item"><a class="h2 text-primary font-secondary" href="tts">English to SSL Translator</a></li>
</ul>
<br/>
<p class="text-lighten">Now you can translate any English text to SSL only by entering it here!!</p>
</div>
</div>
</div>
</section>
<!-- /page title -->
<!-- Text Translator -->
<section class="section">
<div class="container">
<div class="row">
<div class="col-12">
<h2 class="section-title text-center" style="margin-top: -5%;">Let's Start!!</h2>
<div id="chatbox">
<p class="botText">
<span>Enter the sentence you need to translate into SSL</span>
</p>
</div>
<br/>
<form id="form" class="justify-content-center" method="POST">
<div class="form-row align-items-center">
<div class="col-auto" id="userInput">
<label class="sr-only" for="userTextInput">Enter Your Text</label>
<input type="text" class="form-control-mb-2" id="userTextInput" placeholder="Enter any text" style="height: 80%; width:100%" name="msg"/>
</div>
<div class="col-auto">
<button type="submit" class="btn btn-primary mb-2" id="userButtonInput" style="height: 75%;">Translate to Sign</button>
<div class="chat">
<div class="messages">
<div class="message">
<div class="bot">
Welcome to Text to Sign Language Translator!! Now you can enter any phrase you need to translate into sign language
<br/>
Make sure to enter phrase like "Good Morning" or "Sorry"
</div>
</div>
</form>
</div>
</div>
</div>
</section>
</div>
<div class="input">
<form action="#" id="chat" method="post">
<input class="text" contenteditable="" placeholder="Type your message here...">
</form>
</div>
</div>
<!-- /Text Translator -->
<!-- footer -->
<footer>
<!-- copyright -->
<!--<footer>
<div class="copyright py-4 bg-footer">
<div class="container">
<div class="row">
......@@ -154,7 +139,7 @@
</div>
</div>
</div>
</footer>
</footer>-->
<!-- /footer -->
<!-- jQuery -->
......@@ -173,38 +158,64 @@
<!-- Main Script -->
<script src="static/js/script.js"></script>
<script>
$("#userTextInput").keypress(function(e){
if(e.which == 13){
//getResponseSign();
}
});
$("userButtonInput").click(function(){
//getResponseSign();
});
$("#form").on("submit", function (e) {
var message = $("#userTextInput").val();
e.preventDefault();
$.ajax({
//url: "http://127.0.0.1:5000/tts/response/",
url: "http://localhost:3000/tts/response/",
data: JSON.stringify({ message: message }),
method: "POST",
contentType: "application/json",
success: function (message) {
var text = $("#userTextInput").val();
var userHtml = '<p class="userText"><span>' + text + "</span></p>";
$("#userTextInput").val("");
$("#chatbox").append(userHtml);
document
.getElementById("userInput")
.scrollIntoView({ block: "start", behavior: "smooth" });
},
<script src="https://cpwebassets.codepen.io/assets/common stopExecutionOnTimeout-157cd5b220a5c80d4ff8e0e70ac069bffd87a61252088146915e8726e5d9f147.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
<script id="rendered-js">
(function() {
var app;
$(document).ready(function() {
return app.init();
});
app = {
init: function() {
return this.bind_events();
},
bind_events: function() {
return $(document).on("submit", "#chat", function(e) {
app.send_message();
return e.preventDefault();
});
});
</script>
},
send_message: function() {
var msg;
msg = $(".text").val().trim();
if (msg) {
$(".text").val("");
$(".messages").append("<div class='message'><div class='you'>" + msg + "</div></div>");
return this.check(msg);
}
},
check: function(msg) {
var keyword;
if (msg != null) {
return this.get_gif(msg);
} else {
return this.bot_post("Wrong syntax ''gif me keyword''.");
}
},
bot_post: function(msg) {
return $(".messages").append("<div class='message'><div class='bot'>" + msg + "</div></div>");
},
get_gif: function(keyword) {
console.log(keyword)
return $.get(`http://localhost:3000/tts/get/${keyword}` , function(data) {
var index;
console.log(data)
return app.bot_post("<img src='" + data.gifPublicUrl + "' alt='' />");
});
}
};
}).call(this);
</script>
</body>
</html>
\ No newline at end of file
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment