Index.html form doesn't seem to work

Fleker commented 6 years ago

Trying my model out using the built-in text field in index.html, it doesn't seem to work as expected. I probably won't do more work on it until the morning, but here's a few odd issues I noticed.

The name parameter is what is sent to the server as a key. I think you want "Enter your message" to be a placeholder attribute
app.py doesn't have a way to handle what is sent from this file, so it crashes. Maybe check the parameters of the request and handle it through Facebook or through the form

2018-02-23T07:50:40.817086+00:00 app[web.1]: TypeError: 'NoneType' object has no attribute '__getitem__'
2018-02-23T07:50:40.817084+00:00 app[web.1]:     response =  pred(str(request.json['message']))

adeshpande3 commented 6 years ago

Hi, so this may or may not have been the right approach, but I don't really use the index.html file for anything. What happens is the Express server that we made here represents the behavior of the FB Messenger bot. Once it receives a message, then it will send a request to 'https://flask-server-seq2seq-chatbot.herokuapp.com/prediction' and that it handled by line 56 in app.py. So I never really use index.html, I just had that as more of a way to test whether or not I created the Flask server correctly.

So as for the errors you mentioned, sorry I'm not exactly sure on how to fix them.

Don't think that answered your question (and please let me know if I'm totally off base with something because I'm not as familiar with Flask, servers, etc), but just wanted to let you in on my thinking process.

Fleker commented 6 years ago

I wanted to use it as an intermediary to verify my model is valid. Here's how I support the index.html form while also supporting the chatbot call:

    if request.form != None and 'message' in request.form:
        msg = request.form['message']
        response =  pred(str(msg))
        return jsonify(response)
    else: # Through chatbot
        ...

tap222 commented 6 years ago

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 3.2 Final//EN">
<title>405 Method Not Allowed</title>
<h1>Method Not Allowed</h1>
<p>The method is not allowed for the requested URL.</p>

@Fleker , I am getting this error when connecting to messenger as i have inserted your piece of code in app.py which you have shared above .It is perfectly fine when i am launching in heroku or run index.html you can check link https://mighty-dusk-78515.herokuapp.com/

Fleker commented 6 years ago

This is my whole prediction method:

@app.route('/prediction', methods=['POST', 'GET'])
def prediction():
    if request.form != None and 'message' in request.form:
        msg = request.form['message']
        response =  pred(str(msg))
        return jsonify(response)
    else: # Through chatbot
        response =  pred(str(request.json['message']))
        return jsonify(response)

tap222 commented 6 years ago

Thank you for sharing the code let me try and I will let you know.

tap222 commented 6 years ago

Thanks it's working

tap222 commented 6 years ago

@Fleker hey, I am trying to replace index.html with this one but I am not getting desired result as I am not getting result index.html shared by @adeshpande3 , can you please look into it.

<!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>Flask Chatterbot Example</h1>
    <h3>LSTM implementation of using Flask.</h3>
    <div>
      <div id="chatbox">
        <p class="botText"><span>Hi! I'm your Assistant</span></p>
      </div>
      <div id="userInput">
        <input id="textInput" type="text" name="message" 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'});
          $.getJSON("/prediction",{message:$("#textInput").val()}).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>

Paradoxdruid commented 5 years ago

I used the app route from @Fleker

@app.route('/prediction', methods=['POST', 'GET'])
def prediction():
    if request.form != None and 'message' in request.form:
        msg = request.form['message']
        response =  pred(str(msg))
        return jsonify(response)
    else: # Through chatbot
        response =  pred(str(request.json['message']))
        return jsonify(response)

and then had to modify the index.html file on line 10 to the following:

<input type=text name="message" value="" maxlength="100">

That allows me to interactively use index.html to see predictions.

Thank you so much for this tutorial and project, @adeshpande3 !

G-Slient commented 5 years ago

I used the app route from @Fleker
@app.route('/prediction', methods=['POST', 'GET'])
def prediction():
    if request.form != None and 'message' in request.form:
        msg = request.form['message']
        response =  pred(str(msg))
        return jsonify(response)
    else: # Through chatbot
        response =  pred(str(request.json['message']))
        return jsonify(response)
and then had to modify the index.html file on line 10 to the following:
<input type=text name="message" value="" maxlength="100">
That allows me to interactively use index.html to see predictions.

Thank you so much for this tutorial and project, @adeshpande3 !

Thank you for ur response. It worked

adeshpande3 / Chatbot-Flask-Server

Index.html form doesn't seem to work #3