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

Hafsa-221 · 2024-04-23T04:32:07Z

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

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

The text was updated successfully, but these errors were encountered:

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

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

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

Hafsa-221 commented Apr 23, 2024 •

edited

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

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

Comments

Hafsa-221 commented Apr 23, 2024 • edited

Hafsa-221 commented Apr 23, 2024 •

edited