diff --git a/README.md b/README.md index b85ecca72..4124161a1 100644 --- a/README.md +++ b/README.md @@ -1,13 +1,4 @@ -# 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. +# Chatbot Deployment with Python and JavaScript Clone repo and create a virtual environment ``` @@ -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 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..fddcd9645 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', @@ -88,4 +88,4 @@ class Chatbox { const chatbox = new Chatbox(); -chatbox.display(); \ No newline at end of file +chatbox.display(); 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
-
-
-
- +
+
+
+
- +
+
-
- - - \ No newline at end of file + +