Fixes

.github/workflows/ci-cd.yaml

@@ -0,0 +1,48 @@
+name: CI/CD Pipeline
+
+on:
+    push:
+        branches: [master]
+
+env:
+    DOCKER_USERNAME: ${{ secrets.DOCKER_USERNAME }}
+    DOCKER_PASSWORD: ${{ secrets.DOCKER_PASSWORD }}
+    BACKEND_IMAGE_NAME: my-backend
+    FRONTEND_IMAGE_NAME: my-frontend
+    SSH_HOST: ${{ secrets.SSH_HOST }}
+    SSH_USER: ${{ secrets.SSH_USER }}
+    SSH_KEY: ${{ secrets.SSH_KEY }}
+
+jobs:
+    build-and-push:
+        runs-on: ubuntu-latest
+
+        steps:
+            - uses: actions/checkout@v3
+
+            - name: Build and Push Backend Image
+              run: |
+                  docker build -t ${{ env.DOCKER_USERNAME }}/${{ env.BACKEND_IMAGE_NAME }} ./backend
+                  docker login -u ${{ env.DOCKER_USERNAME }} -p ${{ env.DOCKER_PASSWORD }}
+                  docker push ${{ env.DOCKER_USERNAME }}/${{ env.BACKEND_IMAGE_NAME }}
+
+            - name: Build and Push Frontend Image
+              run: |
+                  docker build -t ${{ env.DOCKER_USERNAME }}/${{ env.FRONTEND_IMAGE_NAME }} ./frontend
+                  docker push ${{ env.DOCKER_USERNAME }}/${{ env.FRONTEND_IMAGE_NAME }}
+
+    deploy:
+        needs: build-and-push
+        runs-on: ubuntu-latest
+
+        steps:
+            - name: Deploy to SSH Host
+              env:
+                  SSH_KEY: ${{ env.SSH_KEY }}
+              run: |
+                  ssh ${{ env.SSH_USER }}@${{ env.SSH_HOST }} '
+                    docker pull ${{ env.DOCKER_USERNAME }}/${{ env.BACKEND_IMAGE_NAME }}
+                    docker pull ${{ env.DOCKER_USERNAME }}/${{ env.FRONTEND_IMAGE_NAME }}
+                    docker-compose down
+                    docker-compose up -d
+                  '

server/index.js

@@ -1,5 +1,7 @@
 import express from "express";
 import cors from "cors";
+import morgan from "morgan"; // Import morgan
+import rateLimit from "express-rate-limit"; // Import express-rate-limit
 import { getTextGemini } from "./gemini.js";
 import { getImageTitan } from "./aws.js";
 
@@ -9,6 +11,22 @@ const port = 5000;
 app.use(cors());
 app.use(express.json());
 
+// Custom Morgan format to log request bodies
+morgan.token("body", (req) => JSON.stringify(req.body));
+
+const loggerFormat = ":method :url :status :response-time ms - :res[content-length] :body";
+
+app.use(morgan(loggerFormat));
+
+const limiter = rateLimit({
+    windowMs: 60 * 1000, // 1 minute
+    max: 10, // Limit each IP to 10 requests per windowMs
+    message: "Too many requests from this IP, please try again after a minute",
+});
+
+// Apply the rate limiter to all requests
+app.use(limiter);
+
 app.post("/interact", async (req, res) => {
     let userInput = req.body.input;
     const temperature = req.body.temperature || 0.5;
@@ -24,7 +42,9 @@ app.post("/interact", async (req, res) => {
         res.json({ textResponse, imageResponse });
     } catch (error) {
         console.error(error);
-        res.status(500).json({ error: "An error occurred while interacting with the Gemini Pro model" });
+        res.status(500).json({
+            error: "An error occurred while interacting with the Gemini Pro model",
+        });
     }
 });
 

server/package.json

@@ -14,6 +14,8 @@
         "@google-cloud/vertexai": "^0.5.0",
         "cors": "^2.8.5",
         "dotenv": "^16.4.5",
-        "express": "^4.18.3"
+        "express": "^4.18.3",
+        "express-rate-limit": "^7.2.0",
+        "morgan": "^1.10.0"
     }
 }

src/App.js

@@ -1,11 +1,12 @@
-import React, { useState } from "react";
+import React, { useState, useRef, useEffect } from "react";
 import { Box, TextField, Button, Container, CircularProgress } from "@mui/material";
 import ReactMarkdown from "react-markdown";
 
 function App() {
     const [input, setInput] = useState("");
     const [chatHistory, setChatHistory] = useState([]);
     const [isModelResponding, setIsModelResponding] = useState(false);
+    const chatContainerRef = useRef(null);
 
     const handleSubmit = async () => {
         if (input.trim()) {
@@ -45,9 +46,15 @@ function App() {
         }
     };
 
+    useEffect(() => {
+        if (chatContainerRef.current) {
+            chatContainerRef.current.scrollTop = chatContainerRef.current.scrollHeight;
+        }
+    }, [chatHistory]);
+
     return (
-        <Container maxWidth="md" style={{ display: "flex", flexDirection: "column", height: "100vh" }}>
-            <Box flex={1} overflow="auto" padding={2} display="flex" flexDirection="column">
+        <Container maxWidth="md" style={{ display: "flex", flexDirection: "column", height: "95vh" }}>
+            <Box flex={1} overflow="auto" padding={2} display="flex" flexDirection="column" ref={chatContainerRef}>
                 {chatHistory.map((chat, index) => (
                     <Box key={index} display="flex" flexDirection="column" marginBottom={2}>
                         <Box alignSelf="flex-end" bgcolor="#d4edda" color="#155724" padding={1} borderRadius={2}>