serverless / serverless/examples

Unable to Retrieve Bot Response: ERR_NAME_NOT_RESOLVED and 403 Forbidden Error in Flask Application deployment on AWS

Open
#782 0 comments 0 reactions 0 assignees View on GitHub

Nobody has claimed this yet.

Dominant language
JavaScript
Stars
11.5k
Forks
4.4k
Avg merge
2h 55m
Merged PRs (30d)
3

Description

Description:
I'm encountering an issue with my Flask application where I'm unable to retrieve a response from the bot when sending a query through the index.html page. Here are the details:

Problem:
When I enter a query in the input field on the index.html page and click "Send," the request is made to the "/get" endpoint in my Flask application, but I'm not receiving any response from the bot.

Steps to reproduce:
Open the index.html page in a browser.
Enter a query in the input field.
Click "Send."
Check the browser console for any errors.

Error messages:
Failed to load resource: net::ERR_NAME_NOT_RESOLVED
Failed to load resource: the server responded with a status of 403 (Forbidden)Expected behavior:
After sending a query, I should receive a response from the bot displayed in the chat area on the index.html page.

Environment details:
Operating system: Windows
Browser: Google
Python version: 3.12

Here are the main project files:
app.py

import constants
import nltk
import ssl
import tempfile
import random
from sklearn.feature_extraction.text import TfidfVectorizer
from sklearn.metrics.pairwise import cosine_similarity
import string
import sys
import warnings
import requests
import awsgi
import json
from flask import Flask, render_template,jsonify

try:
    _create_unverified_https_context = ssl._create_unverified_context
except AttributeError:
    pass
else:
    ssl._create_default_https_context = _create_unverified_https_context

# Use a temporary directory for NLTK data
temp_dir = tempfile.mkdtemp()
nltk.data.path.append(temp_dir)

# Download necessary NLTK resources
nltk.download('punkt', download_dir=temp_dir)



def get_formalities_reply(formality):
    if any(remove_punctuation_marks(formality).lower() in remove_punctuation_marks(greet).lower() for greet in constants.GREETING_INPUTS):
        return random.choice(constants.GREETING_REPLIES)
    elif any(remove_punctuation_marks(formality).lower() in remove_punctuation_marks(thanks).lower() for thanks in constants.THANKS_INPUTS):
        return random.choice(constants.THANKS_REPLIES)

def get_lemmatized_tokens(text):
    normalized_tokens = nltk.word_tokenize(remove_punctuation_marks(text.lower()))
    return [nltk.stem.WordNetLemmatizer().lemmatize(normalized_token) for normalized_token in normalized_tokens]

corpus = open('corpus.txt', 'r', errors='ignore').read().lower()
documents = nltk.sent_tokenize(corpus)

def get_query_reply(query):    
    documents.append(query)
    tfidf_results = TfidfVectorizer(tokenizer=get_lemmatized_tokens, stop_words='english').fit_transform(documents)
    cosine_similarity_results = cosine_similarity(tfidf_results[-1], tfidf_results).flatten()
    best_index = cosine_similarity_results.argsort()[-2]
    documents.remove(query)
    if cosine_similarity_results[best_index] == 0:
        return "I am sorry! I don't understand you..."
    else:
        return documents[best_index]

def remove_punctuation_marks(text):
    punctuation_marks = dict((ord(punctuation_mark), None) for punctuation_mark in string.punctuation)
    return text.translate(punctuation_marks)



app = Flask(__name__)
#app.static_folder = 'static'
def get_headers():
    return {
        "Access-Control-Allow-Credentials": "true",
        "Access-Control-Allow-Origin": "*",
        "Content-Type": "application/json"
    }



@app.route("/")
def home():
    print("Attempting to render index.html")  # Debugging statement
    return render_template("index.html")
    #return "<!doctype html>\n<html lang=en>\n<title>Test TIle</title>\n<h1>Test heading</h1>\n<p>Test message</p>\n"
 


@app.route("/get")
def get_bot_response():
    print("Inside get_bot_response function")  # Add this line
    user_text = request.args.get('msg')
    print("Received message:", user_text)  # Print the user's message
    bot_response = get_query_reply(user_text)
    print("Bot's response:", bot_response)  # Print the bot's response
    headers = get_headers()  # Get the headers
    return jsonify(bot_response), 200, headers 


  
def lambda_handler(event, context):
    print("Event is: ",event)
    print("Context is: ",context)
    if event == {}:
        #event = {}
        #event['httpMethod'] = 'GET'
        #event['path'] = '/'
        #event['queryStringParameters'] = {}
        #event_data=json.dumps(event)
        #print("Event_data is: ",event_data)
        #event = {'httpMethod':'GET','path':'/','queryStringParameters':{}}
        
        print("Event now is: ",event)
        print("App is: ",app)
        return awsgi.response(app, event, context)
        headers = get_headers()
        response['headers'] = get_headers()  # Add headers to the response
        return response
        
    else:
        event = {'httpMethod':'GET','path':'/','queryStringParameters':{}}
        return awsgi.response(app, event, context)
        headers = get_headers()
        response['headers'] = get_headers()  # Add headers to the response
        return response

Main file index.html :

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <title>Payactiv</title>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <link rel="shortcut icon" href="#" />
<style>
:root {
    --body-bg: linear-gradient(135deg, #f5f7fa 0%, #c3cfe2 100%);
    --msger-bg: #fff;
    --border: 2px solid #ddd;
    --left-msg-bg: #ececec;
    --right-msg-bg: #579ffb;
  }
  
  html {
    box-sizing: border-box;
  }
  
  *,
  *:before,
  *:after {
    margin: 0;
    padding: 0;
    box-sizing: inherit;
  }
  
  body {
    display: flex;
    justify-content: center;
    align-items: center;
    height: 100vh;
    background-image: var(--body-bg);
    font-family: Helvetica, sans-serif;
  }
  
  .msger {
    display: flex;
    flex-flow: column wrap;
    justify-content: space-between;
    width: 100%;
    max-width: 867px;
    margin: 25px 10px;
    height: calc(100% - 50px);
    border: var(--border);
    border-radius: 5px;
    background: var(--msger-bg);
    box-shadow: 0 15px 15px -5px rgba(0, 0, 0, 0.2);
  }
  
  .msger-header {
    /* display: flex; */
    font-size: medium;
    justify-content: space-between;
    padding: 10px;
    text-align: center;
    border-bottom: var(--border);
    background: #eee;
    color: #666;
  }
  
  .msger-chat {
    flex: 1;
    overflow-y: auto;
    padding: 10px;
  }
  .msger-chat::-webkit-scrollbar {
    width: 6px;
  }
  .msger-chat::-webkit-scrollbar-track {
    background: #ddd;
  }
  .msger-chat::-webkit-scrollbar-thumb {
    background: #bdbdbd;
  }
  .msg {
    display: flex;
    align-items: flex-end;
    margin-bottom: 10px;
  }
  
  .msg-img {
    width: 50px;
    height: 50px;
    margin-right: 10px;
    background: #ddd;
    background-repeat: no-repeat;
    background-position: center;
    background-size: cover;
    border-radius: 50%;
  }
  .msg-bubble {
    max-width: 450px;
    padding: 15px;
    border-radius: 15px;
    background: var(--left-msg-bg);
  }
  .msg-info {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 10px;
  }
  .msg-info-name {
    margin-right: 10px;
    font-weight: bold;
  }
  .msg-info-time {
    font-size: 0.85em;
  }
  
  .left-msg .msg-bubble {
    border-bottom-left-radius: 0;
  }
  
  .right-msg {
    flex-direction: row-reverse;
  }
  .right-msg .msg-bubble {
    background: var(--right-msg-bg);
    color: #fff;
    border-bottom-right-radius: 0;
  }
  .right-msg .msg-img {
    margin: 0 0 0 10px;
  }
  
  .msger-inputarea {
    display: flex;
    padding: 10px;
    border-top: var(--border);
    background: #eee;
  }
  .msger-inputarea * {
    padding: 10px;
    border: none;
    border-radius: 3px;
    font-size: 1em;
  }
  .msger-input {
    flex: 1;
    background: #ddd;
  }
  .msger-send-btn {
    margin-left: 10px;
    background: #579ffb;
    color: #fff;
    font-weight: bold;
    cursor: pointer;
    transition: background 0.23s;
  }
  .msger-send-btn:hover {
    background: rgb(0, 180, 50);
  }
  
  .msger-chat {
    background-color: #fcfcfe;
     }

</style>
  <script src="https://code.jquery.com/jquery-3.7.1.min.js" integrity="sha256-/JqT3SQfawRcv/BIHPThkBvs0OEvtFFmqPF/lYI/Cxo=" crossorigin="anonymous"></script>
</head>

<body>
  <!-- partial:index.partial.html -->
  <section class="msger">
    <header class="msger-header">
      <div class="msger-header-title">
        </i> Chat </i>
      </div>
    </header>

    <main class="msger-chat">
      <div class="msg left-msg">
        <div class="msg-img" style="background-image: url(https://image.flaticon.com/icons/svg/327/327779.svg)"></div>

        <div class="msg-bubble">
          <div class="msg-info">
            <div class="msg-info-name">Marty</div>
            <div class="msg-info-time"></div>
          </div>

          <div class="msg-text">
            Hi, I am Marty.          </div>
          <div class="msg-text">
           How may I help you?          </div>
        </div>
      </div>

    </main>

    <form class="msger-inputarea">
      <input type="text" class="msger-input" id="textInput" placeholder="Enter your message...">
      <button type="submit" class="msger-send-btn">Send</button>
    </form>
  </section>
  <!-- partial -->
  <script src='https://use.fontawesome.com/releases/v5.0.13/js/all.js'></script>
  <script>
    const msgerForm = get(".msger-inputarea");
    const msgerInput = get(".msger-input");
    const msgerChat = get(".msger-chat");


    // Icons made by Freepik from www.flaticon.com
    const BOT_IMG = "https://image.flaticon.com/icons/svg/327/327779.svg";
    const PERSON_IMG = "https://image.flaticon.com/icons/svg/145/145867.svg";
    const BOT_NAME = "Marty";
    const PERSON_NAME = "You";

    msgerForm.addEventListener("submit", event => {
      event.preventDefault();

      const msgText = msgerInput.value;
      if (!msgText) return;

      appendMessage(PERSON_NAME, PERSON_IMG, "right", msgText);
      msgerInput.value = "";
      botResponse(msgText);
    });

    function appendMessage(name, img, side, text) {
           const msgHTML = `
<div class="msg ${side}-msg">
  <div class="msg-img" style="background-image: url(${img})"></div>

  <div class="msg-bubble">
    <div class="msg-info">
      <div class="msg-info-name">${name}</div>
      <div class="msg-info-time">${formatDate(new Date())}</div>
    </div>

    <div class="msg-text">${text}</div>
  </div>
</div>
;

      msgerChat.insertAdjacentHTML("beforeend", msgHTML);
      msgerChat.scrollTop += 500;
    }

    function botResponse(rawText) {
    // Bot Response
    $.get("/get", { msg: rawText }).done(function (data) {
        console.log(rawText);
        console.log(data);
        const msgText = data;
        appendMessage(PERSON_NAME, PERSON_IMG, "right", rawText); // Append user's message
        appendMessage(BOT_NAME, BOT_IMG, "left", msgText); // Append bot's response
    });

    }


    // Utils
    function get(selector, root = document) {
      return root.querySelector(selector);
    }

    function formatDate(date) {
      const h = "0" + date.getHours();
      const m = "0" + date.getMinutes();

      return `${h.slice(-2)}:${m.slice(-2)}`;
    }

  </script>

</body>

</html>

It works fine on SAM remote invoke, but when I entered the URL provided by sam deploy --guided after building it using sam build to get the page displayed on the browser, the page displays the user-entered message appropriately. However, there is no response. I get the following error:
Sam-cli commands:
sam build
sam deploy --guided
sam remote invoke
error

I would appreciate any assistance in resolving this issue. Thank you!

Contributor guide

No contributing guide indexed for this repository

First steps

  1. Read the whole issue, then the project's contributing guide.
  2. Comment on the issue to say you are picking it up — it saves two people doing the same work.
  3. Fork the repository and make your change on a branch.
  4. Open a pull request that references the issue number.

Research direction

Start with app.py's /get route and index.html's botResponse function, then reproduce the deployed request using the SAM deploy URL while inspecting the browser Network and Console output. Compare the deployed behavior with the working SAM remote invocation; done means the deployed page's request receives and displays a bot response without the reported errors.

Written by the indexing model from the issue text.

Assessment

Tech stack
aws, flask, javascript, python
Domain
api, backend, cloud, web-dev
Issue type
Bug
Difficulty
4/5
Estimated time
3-5 days
Activity status
Stale
Clarity
Needs clarification
Newbie friendliness
25/100

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.