Implementing a chat box

- Creating a basic HTML page with a box that links with aws lambda - Still working on building out that lambda.
senderic · May 19, 2024 · 659af6b · 659af6b
1 parent db90311
commit 659af6b
Show file tree

Hide file tree

Showing 3 changed files with 116 additions and 0 deletions.
diff --git a/.github/workflows/deploy_lambda.yml b/.github/workflows/deploy_lambda.yml
@@ -0,0 +1,36 @@
+name: Deploy Lambda Function
+
+on:
+  push:
+    branches:
+      - chat-box  # Trigger the workflow on push to the main branch
+
+jobs:
+  build-and-deploy:
+    runs-on: ubuntu-latest  # Set the runner to Ubuntu
+
+    steps:
+    - name: Checkout code
+      uses: actions/checkout@v2  # Checks out your repository under $GITHUB_WORKSPACE
+
+    - name: Set up Node.js
+      uses: actions/setup-node@v2
+      with:
+        node-version: '14'  # Set this to the Node.js version you are using
+
+    - name: Install dependencies
+      run: npm install  # Install dependencies defined in package.json
+
+    - name: Zip Lambda function
+      run: zip -r function.zip .  # Zip all files in the project directory including node_modules
+
+    - name: Configure AWS credentials
+      uses: aws-actions/configure-aws-credentials@v1
+      with:
+        aws-access-key-id: ${{ secrets.AWS_ACCESS_KEY_ID }}  # Set up your AWS credentials as secrets
+        aws-secret-access-key: ${{ secrets.AWS_SECRET_ACCESS_KEY }}
+        aws-region: us-east-1  # Your Lambda function's AWS region
+
+    - name: Deploy to AWS Lambda
+      run: aws lambda update-function-code --function-name my-lambda-function --zip-file fileb://function.zip
+      # Replace 'my-lambda-function' with your actual Lambda function name
diff --git a/chat.html b/chat.html
@@ -0,0 +1,51 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Chatbot Page</title>
+    <style>
+        body { font-family: Arial, sans-serif; }
+        #chat-box { width: 300px; height: 400px; border: 1px solid black; margin: 20px; padding: 10px; overflow-y: scroll; }
+        #user-input { width: 280px; }
+    </style>
+</head>
+<body>
+    <h1>Welcome to My Chatbot</h1>
+    <div id="chat-box"></div>
+    <input type="text" id="user-input" placeholder="Type a message...">
+    <button onclick="sendMessage()">Send</button>
+
+    <script>
+        function sendMessage() {
+            const chatBox = document.getElementById('chat-box');
+            const userInput = document.getElementById('user-input');
+            const message = userInput.value;
+            userInput.value = '';  // Clear input field
+
+            // Display user message
+            chatBox.innerHTML += '<div>User: ' + message + '</div>';
+
+            // Send a POST request to the chatbot backend
+            fetch('https://aws.ericsender.com/hello', {
+                method: 'POST',
+                headers: {
+                    'Content-Type': 'application/json'  // Ensuring the content type is set to application/json
+                },
+                body: JSON.stringify({ message: message })  // Send the user message in the request body
+            })
+            .then(response => response.json())  // Parse the JSON response from the server
+            .then(data => {
+                // Display the bot response
+                chatBox.innerHTML += '<div>Bot: ' + data.reply + '</div>';
+                chatBox.scrollTop = chatBox.scrollHeight;  // Scroll to bottom
+            })
+            .catch(error => {
+                console.error('Error:', error);
+                chatBox.innerHTML += '<div>Bot: Error fetching response</div>';
+            });
+
+        }
+    </script>
+</body>
+</html>
diff --git a/package.json b/package.json
@@ -0,0 +1,29 @@
+{
+  "name": "lambda-openai-chatbot",
+  "version": "1.0.0",
+  "description": "A Lambda function to handle requests and interact with OpenAI's API.",
+  "main": "index.js",
+  "scripts": {
+    "test": "echo \"No tests specified\" && exit 0"
+  },
+  "dependencies": {
+    "openai": "^2.0.1"  // Make sure to check for the latest version on npm
+  },
+  "author": "",
+  "license": "ISC"
+}
+{
+  "name": "lambda-openai-chatbot",
+  "version": "1.0.0",
+  "description": "A Lambda function to handle requests and interact with OpenAI's API.",
+  "main": "index.js",
+  "scripts": {
+    "test": "echo \"No tests specified\" && exit 0"
+  },
+  "dependencies": {
+    "openai": "^2.0.1"  // Make sure to check for the latest version on npm
+  },
+  "author": "",
+  "license": "ISC"
+}
+