From b8a9c0246da242bf3b5201d82a54200148cdc60c Mon Sep 17 00:00:00 2001 From: Onkar Limkar Date: Tue, 20 Jun 2023 15:26:51 +0530 Subject: [PATCH 1/4] first commit --- get_response.py | 12 +++++ server.js | 89 +++++++++++++++++++++++++++++++++++ standalone-frontend/app.js | 4 +- standalone-frontend/base.html | 56 ++++++++++++---------- 4 files changed, 134 insertions(+), 27 deletions(-) create mode 100644 get_response.py create mode 100644 server.js diff --git a/get_response.py b/get_response.py new file mode 100644 index 000000000..607d8f5b6 --- /dev/null +++ b/get_response.py @@ -0,0 +1,12 @@ +from chat import get_response +import sys + +# Access command-line arguments +args = sys.argv[1:] + +# Check if any arguments were provided +if len(args) > 0: + process_var = args[0] + print(get_response(args[0])) +else: + print("No command-line argument provided.") diff --git a/server.js b/server.js new file mode 100644 index 000000000..f1cdc4ca2 --- /dev/null +++ b/server.js @@ -0,0 +1,89 @@ +const { exec } = require("child_process"); +const express = require("express"); +const cors = require('cors') +const app = express(); + + +// vvimp +const corsOpts = { + origin: '*', + + methods: [ + 'GET', + 'POST', + ], + + allowedHeaders: [ + 'Content-Type', + ], + }; + + app.use(cors(corsOpts)); + +// Define the path to your Python script +const pythonScriptPath = "get_response.py"; + +// Create a function to execute the command and process the output +const executeScript = async (argument) => { + try { + const { stdout, stderr } = await new Promise((resolve, reject) => { + exec( + `python ${pythonScriptPath} ${argument}`, + (error, stdout, stderr) => { + if (error) { + reject(error); + } else { + resolve({ stdout, stderr }); + } + } + ); + }); + + // Process the output + const output = stdout.trim(); + + // Use the output outside the exec function + console.log("This is the output:", output); + + return output; + } catch (error) { + console.error("Error executing Python script:", error); + + return "error has occured..."; + } +}; + +// Call the function t`o execute the script pass the argument +executeScript("hi"); + +app.set("view engine", "ejs"); + +app.use(express.json()); + +app.get("/", (req, res) => { + res.render("base"); +}); + +app.post("/request", async (req, res) => { + console.log(req); + + // Access the message from the request body + const message = req.body.message; + + // Process the message (example: convert to uppercase) + const answer = await executeScript(message); + + // Create the response object + const response = { + answer: answer + }; + + // Send the response as JSON + res.json(response); + + +}); + +app.listen(3000, () => { + console.log("server is listening on port 3000"); +}); diff --git a/standalone-frontend/app.js b/standalone-frontend/app.js index 6bdf287d1..12b7b9cbb 100644 --- a/standalone-frontend/app.js +++ b/standalone-frontend/app.js @@ -46,7 +46,7 @@ class Chatbox { let msg1 = { name: "User", message: text1 } this.messages.push(msg1); - fetch('http://127.0.0.1:5000/predict', { + fetch('http://localhost:3000/request', { method: 'POST', body: JSON.stringify({ message: text1 }), mode: 'cors', @@ -56,6 +56,8 @@ class Chatbox { }) .then(r => r.json()) .then(r => { + console.log(typeof r, r); + let msg2 = { name: "Sam", message: r.answer }; this.messages.push(msg2); this.updateChatText(chatbox) diff --git a/standalone-frontend/base.html b/standalone-frontend/base.html index c2c3b5c39..ee79b4f06 100644 --- a/standalone-frontend/base.html +++ b/standalone-frontend/base.html @@ -1,39 +1,43 @@ - + - - + + Chatbot - - -
-
+ + +
+
-
-
- image -
-
-

Chat support

-

Hi. My name is Sam. How can I help you?

-
+
+
+ image
-
-
-
-
- - +
+

Chat support

+

+ Hi. My name is Bot. How can I help you? +

+
+
+
+
+
+ + +
- +
+
-
- - - \ No newline at end of file + + From 6b20b98048acc99ff556ae2055ad023327ea2bc8 Mon Sep 17 00:00:00 2001 From: Onkar Balasaheb Limkar <59679498+Onkar26@users.noreply.github.com> Date: Tue, 20 Jun 2023 15:51:32 +0530 Subject: [PATCH 2/4] Update app.js --- standalone-frontend/app.js | 4 +--- 1 file changed, 1 insertion(+), 3 deletions(-) diff --git a/standalone-frontend/app.js b/standalone-frontend/app.js index 12b7b9cbb..fddcd9645 100644 --- a/standalone-frontend/app.js +++ b/standalone-frontend/app.js @@ -56,8 +56,6 @@ class Chatbox { }) .then(r => r.json()) .then(r => { - console.log(typeof r, r); - let msg2 = { name: "Sam", message: r.answer }; this.messages.push(msg2); this.updateChatText(chatbox) @@ -90,4 +88,4 @@ class Chatbox { const chatbox = new Chatbox(); -chatbox.display(); \ No newline at end of file +chatbox.display(); From bdf456698c262037b0a480c8803e324e33097626 Mon Sep 17 00:00:00 2001 From: Onkar Balasaheb Limkar <59679498+Onkar26@users.noreply.github.com> Date: Tue, 20 Jun 2023 16:41:59 +0530 Subject: [PATCH 3/4] Update README.md --- README.md | 26 ++++++++------------------ 1 file changed, 8 insertions(+), 18 deletions(-) diff --git a/README.md b/README.md index b85ecca72..82007845b 100644 --- a/README.md +++ b/README.md @@ -1,14 +1,5 @@ # Chatbot Deployment with Flask and JavaScript -In this tutorial we deploy the chatbot I created in [this](https://github.com/python-engineer/pytorch-chatbot) tutorial with Flask and JavaScript. - -This gives 2 deployment options: -- Deploy within Flask app with jinja2 template -- Serve only the Flask prediction API. The used html and javascript files can be included in any Frontend application (with only a slight modification) and can run completely separate from the Flask App then. - -## Initial Setup: -This repo currently contains the starter files. - Clone repo and create a virtual environment ``` $ git clone https://github.com/python-engineer/chatbot-deployment.git @@ -38,15 +29,14 @@ the following command to test it in the console. $ (venv) python chat.py ``` -Now for deployment follow my tutorial to implement `app.py` and `app.js`. +## Node setup: + +for this node must be installed in the system + +$ npm init -## Watch the Tutorial -[![Alt text](https://img.youtube.com/vi/a37BL0stIuM/hqdefault.jpg)](https://youtu.be/a37BL0stIuM) -[https://youtu.be/a37BL0stIuM](https://youtu.be/a37BL0stIuM) +$ npm install express cors ejs child_process -## Note -In the video we implement the first approach using jinja2 templates within our Flask app. Only slight modifications are needed to run the frontend separately. I put the final frontend code for a standalone frontend application in the [standalone-frontend](/standalone-frontend) folder. -## Credits: -This repo was used for the frontend code: -https://github.com/hitchcliff/front-end-chatjs +to run server use command +$ node server.js From 8e149bcb1ffb3f4b07a53cd5c0a44a8d453641ef Mon Sep 17 00:00:00 2001 From: Onkar Balasaheb Limkar <59679498+Onkar26@users.noreply.github.com> Date: Tue, 20 Jun 2023 16:42:27 +0530 Subject: [PATCH 4/4] Update README.md --- README.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/README.md b/README.md index 82007845b..4124161a1 100644 --- a/README.md +++ b/README.md @@ -1,4 +1,4 @@ -# Chatbot Deployment with Flask and JavaScript +# Chatbot Deployment with Python and JavaScript Clone repo and create a virtual environment ```