Merge branch 'optimize-for-deployment'

.pre-commit-config.yaml

@@ -19,5 +19,5 @@ repos:
         args: ["--maxfail=1", "-q"]
         language: system
         types: [python]
-        # always_run: true  # disable this for now to check whether it is good or not?
         pass_filenames: false
+        stages: [pre-push]

backend/app.py

@@ -2,6 +2,7 @@
 import urllib.parse
 from collections import Counter
 from collections.abc import Callable
+from contextlib import asynccontextmanager
 from datetime import datetime
 from io import BytesIO
 from typing import Literal
@@ -26,8 +27,17 @@
 
 mpl.use("Agg")  # Use a non-GUI backend for rendering plots
 
+
+@asynccontextmanager
+async def lifespan(_app: FastAPI):
+    # Load model on startup to cache it
+    load_model(model_uri=MLFLOW_MODEL_URI)
+    yield
+
+
 app = FastAPI(
     title="YouTube Comment Sentiment Analyser - API",
+    lifespan=lifespan,
 )
 
 app.add_middleware(

dvc.yaml

@@ -32,6 +32,5 @@ stages:
       - ml/comment_sentiment/evaluation.py
     params:
       - evaluation
-      - mlflow
     outs:
       - mlflow_run_info.json

frontend/.env.example

@@ -1 +1,2 @@
 VITE_YOUTUBE_API_KEY=
+VITE_API_URL=

frontend/nginx.conf

@@ -10,18 +10,6 @@ server {
         try_files $uri /index.html;
     }
 
-    # Proxy API requests to the FastAPI backend
-    location /api/ {
-        # TODO: use envs in vue app to avoid this
-        # Change with deployed backend url (if not using this in docker compose)
-        proxy_pass http://backend:8000/;
-        proxy_http_version 1.1;
-        proxy_set_header Upgrade $http_upgrade;
-        proxy_set_header Connection 'upgrade';
-        proxy_set_header Host $host;
-        proxy_cache_bypass $http_upgrade;
-    }
-
     # Optionally, add gzip compression for better performance
     gzip on;
     gzip_types text/plain text/css application/json application/javascript text/xml application/xml application/xml+rss text/javascript;

frontend/src/components/SentimentPieChart.vue

@@ -18,13 +18,16 @@ const pieChartUrl = ref(null);
 
 watchEffect(async () => {
   try {
-    const response = await fetch("/api/sentiment-count-plot", {
-      method: "POST",
-      headers: {
-        "Content-Type": "application/json",
-      },
-      body: JSON.stringify(props.sentimentCount),
-    });
+    const response = await fetch(
+      `${import.meta.env.VITE_API_URL}/sentiment-count-plot`,
+      {
+        method: "POST",
+        headers: {
+          "Content-Type": "application/json",
+        },
+        body: JSON.stringify(props.sentimentCount),
+      }
+    );
 
     if (response.ok) {
       const imgBlob = await response.blob();

frontend/src/components/VideoUrlInputForm.vue

@@ -14,7 +14,9 @@ const videoUrl = ref(null);
 
 async function handleSubmit() {
   try {
-    const response = await fetch(`/api/validate-yt-url?url=${videoUrl.value}`);
+    const response = await fetch(
+      `${import.meta.env.VITE_API_URL}/validate-yt-url?url=${videoUrl.value}`
+    );
     const data = await response.json();
     console.log(data);
 

frontend/src/components/YTVideoDetailsCard.vue

@@ -68,7 +68,7 @@ function formatPublishedAt(publishedAt) {
 watchEffect(async () => {
   console.log("Fecthing videos details...");
   const response = await fetch(
-    `/api/youtube/video-details?video_id=${props.videoId}`,
+    `${import.meta.env.VITE_API_URL}/youtube/video-details?video_id=${props.videoId}`,
     {
       headers: {
         "X-API-KEY": import.meta.env.VITE_YOUTUBE_API_KEY,

frontend/src/lib/youtubeComments.js

@@ -8,7 +8,7 @@ export async function getVideoComments(
 ) {
   try {
     const response = await fetch(
-      `/api/youtube/video-comments?video_id=${videoId}&max_comments=${maxComments}&order=${order}`,
+      `${import.meta.env.VITE_API_URL}/youtube/video-comments?video_id=${videoId}&max_comments=${maxComments}&order=${order}`,
       {
         headers: {
           "X-API-KEY": import.meta.env.VITE_YOUTUBE_API_KEY,
@@ -32,7 +32,7 @@ export async function getVideoComments(
  */
 export async function predictCommentsSentiments(comments) {
   try {
-    const response = await fetch("/api/predict", {
+    const response = await fetch(`${import.meta.env.VITE_API_URL}/predict`, {
       method: "POST",
       headers: {
         "Content-Type": "application/json",

frontend/vite.config.js

@@ -9,13 +9,6 @@ export default defineConfig({
   server: {
     port: 3000,
     strictPort: true,
-    proxy: {
-      "/api": {
-        target: "http://localhost:8000", // Backend api base url
-        changeOrigin: true,
-        rewrite: (path) => path.replace(/^\/api/, ""),
-      },
-    },
   },
   plugins: [vue(), vueDevTools()],
   resolve: {

ml/comment_sentiment/evaluation.py

@@ -120,17 +120,6 @@ def store_mllfow_run_info(run: mlflow.ActiveRun) -> None:
         json.dump(info, f, indent=2)
 
 
-def setup_mlflow() -> None:
-    logger.info("Setting up mlflow configs...")
-    logger.critical("Mlflow tracking URI is {!r}", MLFLOW_TRACKING_URI.get())
-
-    logger.info(
-        "Following run comes under experiment {!r}.",
-        params.mlflow.experiment_name,
-    )
-    mlflow.set_experiment(params.mlflow.experiment_name)
-
-
 def main() -> None:
     import os
     import time
@@ -160,7 +149,7 @@ def main() -> None:
 
     report, cm = evaluate(pipeline, test_df["text"], test_df["target"])
 
-    setup_mlflow()
+    logger.critical("Mlflow tracking URI is {!r}", MLFLOW_TRACKING_URI.get())
     with mlflow.start_run() as run:
         logger.critical("Started new mlflow run: {!r}", run.info.run_id)
         log_confusion_matrix(cm, "test")

params.yaml

@@ -26,9 +26,3 @@ pipeline:
 
 evaluation:
   train_vec_path: models/train_vec_data.pkl
-
-mlflow:
-  # For local run: mlflow will store artifacts in this directory
-  # For cloud run: specify URL below
-  tracking_uri: ./mlruns
-  experiment_name: exp1-arv-testing