Open
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
I would appreciate any assistance in resolving this issue. Thank you!
Metadata
Metadata
Assignees
Labels
No labels