project started

README.md

@@ -0,0 +1,32 @@
+# flask-chatterbot
+
+#### A web implementation of [ChatterBot](https://github.com/gunthercox/ChatterBot) using Flask.
+
+## Local Setup:
+ 1. Ensure that Python, Flask, SQLAlchemy, and ChatterBot are installed (either manually, or run `pip install -r requirements.txt`).
+ 2. Run *app.py*
+ 3. Demo will be live at [http://localhost:5000/](http://localhost:5000/)
+
+## How do I deploy this to a web server?
+If you do not have a dedicated server, I highly recommend using [PythonAnywhere](https://www.pythonanywhere.com/), [AWS](https://aws.amazon.com/getting-started/projects/deploy-python-application/) or [Heroku](https://devcenter.heroku.com/articles/getting-started-with-python#introduction) to host your application.
+
+### Deploying on PythonAnywhere
+Here is a quick 5 minute video on how to get setup: https://youtu.be/VP0HvbunaRo
+
+### Deploying on Heroku
+If you are deploying on Heroku, you will have to change the database adapter from `chatterbot.storage.SQLStorageAdapter` to `chatterbot.storage.MongoDatabaseAdapter` since SQLite3 isn't supported. To do this simply change the following line:
+
+`english_bot = ChatBot("English Bot", storage_adapter="chatterbot.storage.SQLStorageAdapter")`
+
+... to use the MongoDB adapter:
+
+```
+english_bot = ChatBot("English Bot", 
+                     storage_adapter = "chatterbot.storage.MongoDatabaseAdapter",
+                     database = mongodb_name,
+                     database_uri = mongodb_uri)
+```
+... where `mongodb_name` is the name of the database you wish to connect to and `mongodb_uri` is the URI of a remote instance of MongoDB.
+
+## License
+This source is free to use, but ChatterBot does have a license which still applies and can be found on the [LICENSE](https://github.com/gunthercox/ChatterBot/blob/master/LICENSE) page.

app.py

@@ -0,0 +1,26 @@
+from flask import Flask, render_template, request
+from chatterbot import ChatBot
+from chatterbot.trainers import ChatterBotCorpusTrainer
+
+app = Flask(__name__)
+
+english_bot = ChatBot("Chatterbot", storage_adapter="chatterbot.storage.SQLStorageAdapter")
+
+# english_bot.set_trainer(ChatterBotCorpusTrainer)
+# english_bot.train("chatterbot.corpus.english")
+
+
+@app.route("/")
+def home():
+    return render_template("chat.html")
+
+@app.route("/get")
+def get_bot_response():
+    userText = request.args.get('messageText')
+    print(request.args)
+    print(userText)
+    return str(english_bot.get_response(userText))
+
+
+if __name__ == "__main__":
+    app.run()

requirements.txt

@@ -0,0 +1,6 @@
+# Used by pip to install required python packages
+# Usage: pip install -r requirements.txt
+
+Flask>=0.11
+chatterbot>=0.7.1
+SQLAlchemy>=1.1.11

static/style.css

@@ -0,0 +1,81 @@
+body {
+    font-family: Garamond;
+}
+
+h1 {
+    color: black;
+    margin-bottom: 0;
+    margin-top: 0;
+    text-align: center;
+    font-size: 40px;
+}
+
+h3 {
+    color: black;
+    font-size: 20px;
+    margin-top: 3px;
+    text-align: center;
+}
+
+#chatbox {
+    margin-left: auto;
+    margin-right: auto;
+    width: 40%;
+    margin-top: 60px;
+}
+
+#userInput {
+    margin-left: auto;
+    margin-right: auto;
+    width: 40%;
+    margin-top: 60px;
+}
+
+#textInput {
+    width: 87%;
+    border: none;
+    border-bottom: 3px solid #009688;
+    font-family: monospace;
+    font-size: 17px;
+}
+
+#buttonInput {
+    padding: 3px;
+    font-family: monospace;
+    font-size: 17px;
+}
+
+.userText {
+    color: white;
+    font-family: monospace;
+    font-size: 17px;
+    text-align: right;
+    line-height: 30px;
+}
+
+.userText span {
+    background-color: #009688;
+    padding: 10px;
+    border-radius: 2px;
+}
+
+.botText {
+    color: white;
+    font-family: monospace;
+    font-size: 17px;
+    text-align: left;
+    line-height: 30px;
+}
+
+.botText span {
+    background-color: #EF5350;
+    padding: 10px;
+    border-radius: 2px;
+}
+
+#tidbit {
+    position:absolute;
+    bottom:0;
+    right:0;
+    width: 300px;
+}

templates/chat.html

@@ -0,0 +1,135 @@
+<!DOCTYPE html>
+<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: #fff;
+			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 {
+			/* Permalink - use to edit and share this gradient: http://colorzilla.com/gradient-editor/#608f95+0,008588+9,0c2449+52,1a1e3b+100 */
+			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>紫鵑</strong></small><font color="white"> 岂曰无衣？ </font><small><strong>与子</strong></small><font color="white"> 同袍..</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> 同我讲话吧。</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 <span class="glyphicon glyphicon-hand-up"></span></button>
+                                    </span>
+                                </div>
+                            </form>
+                        </div>
+                    </div>
+                </div>
+
+            </div>
+        </div>
+
+        <script src="http://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>
+        $(function() {
+            $('#chatbot-form-btn').click(function(e) {
+                e.preventDefault();
+                $('#chatbot-form').submit();
+            });
+
+            $('#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 class="media-body">' + message + '<hr/></div></div></div></li>');
+                $.ajax({
+                    type: "get",
+                    url: "/get",
+                    data: {messageText: message},
+                    success: function(response) {
+                        console.log(response)
+                        $('#messageText').val('');
+
+                        var answer = response
+                        const chatPanel = document.getElementById("chatPanel");
+                        $(".media-list").append('<li class="media"><div class="media-body"><div class="media"><div class="media-body">' + answer + '<hr/></div></div></div></li>');
+			$(".fixed-panel").stop().animate({ scrollTop: $(".fixed-panel")[0].scrollHeight}, 1000);
+
+                    },
+                    error: function(error) {
+                        console.log(error);
+                    }
+                });
+            });
+        });
+        </script>
+    </body>
+</html>

templates/index.html

@@ -0,0 +1,42 @@
+<!DOCTYPE html>
+<html>
+  <head>
+    <link rel="stylesheet" type="text/css" href="/static/style.css">
+    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
+  </head>
+  <body>
+    <h1>Shopping Assistant</h1>
+    <h3>Intelligent guidance to your desired shopping item through conversion</h3>
+    <div>
+      <div id="chatbox">
+        <p class="botText"><span>吖!</span></p>
+      </div>
+      <div id="userInput">
+        <input id="textInput" type="text" name="msg" placeholder="Message">
+        <input id="buttonInput" type="submit" value="Send">
+      </div>
+      <script>
+        function getBotResponse() {
+          var rawText = $("#textInput").val();
+          var userHtml = '<p class="userText"><span>' + rawText + '</span></p>';
+          $("#textInput").val("");
+          $("#chatbox").append(userHtml);
+          document.getElementById('userInput').scrollIntoView({block: 'start', behavior: 'smooth'});
+          $.get("/get", { msg: rawText }).done(function(data) {
+            var botHtml = '<p class="botText"><span>' + data + '</span></p>';
+            $("#chatbox").append(botHtml);
+            document.getElementById('userInput').scrollIntoView({block: 'start', behavior: 'smooth'});
+          });
+        }
+        $("#textInput").keypress(function(e) {
+            if(e.which == 13) {
+                getBotResponse();
+            }
+        });
+        $("#buttonInput").click(function() {
+          getBotResponse();
+        })
+      </script>
+    </div>
+  </body>
+</html>