Upload 19 files

app/backend/main.py

@@ -0,0 +1,665 @@
+"""
+Production-Ready FastAPI Backend for DeBERTa Emotion Detection
+Optimized for 710MB model with efficient tokenization and inference
+"""
+
+from fastapi import FastAPI, HTTPException, Request
+from fastapi.middleware.cors import CORSMiddleware
+from fastapi.responses import JSONResponse
+from pydantic import BaseModel, Field, field_validator
+from contextlib import asynccontextmanager
+import torch
+import torch.nn as nn
+from transformers import DebertaV2Model, DebertaV2Tokenizer
+import uvicorn
+import logging
+import time
+from typing import Dict, List, Optional
+import gc
+import psutil
+import os
+import json
+import httpx
+from dotenv import load_dotenv
+import warnings
+
+# Suppress HuggingFace deprecation warning
+warnings.filterwarnings('ignore', category=FutureWarning, module='huggingface_hub')
+
+# ==================== LOGGING SETUP ====================
+logging.basicConfig(
+    level=logging.INFO,
+    format='%(asctime)s - %(name)s - %(levelname)s - %(message)s'
+)
+logger = logging.getLogger(__name__)
+
+# ==================== ENVIRONMENT SETUP ====================
+load_dotenv()  # Load from .env file
+TMDB_API_KEY = os.getenv('TMDB_API_KEY', '')
+TMDB_BASE_URL = "https://api.themoviedb.org/3"
+TMDB_IMAGE_BASE_URL = "https://image.tmdb.org/t/p/w500"
+
+# ==================== CONFIGURATION ====================
+class Config:
+    MODEL_PATH = "./../../models/"  # Path to your saved model
+    MAX_LENGTH = 128
+    DEVICE = "cuda" if torch.cuda.is_available() else "cpu"
+    BATCH_SIZE = 8  # For batch predictions
+    MAX_TEXT_LENGTH = 5000  # Character limit for input
+    
+    EMOTION_CLASSES = ['anger', 'fear', 'joy', 'love', 'neutral', 'sadness', 'surprise']
+    
+    # Emotion to Genre Mapping (4 genres per emotion)
+    EMOTION_GENRE_MAP = {
+        'anger': ['Action', 'Crime', 'Thriller', 'Revenge-Drama'],
+        'fear': ['Horror', 'Thriller', 'Mystery', 'Supernatural'],
+        'joy': ['Comedy', 'Adventure', 'Family', 'Animation', 'Musical'],
+        'love': ['Romance', 'Rom-Com', 'Emotional Drama', 'Fantasy'],
+        'neutral': ['Documentary', 'Drama', 'Biography', 'Slice-of-Life'],
+        'sadness': ['Drama', 'Romance', 'Indie', 'Healing-Stories'],
+        'surprise': ['Mystery', 'Sci-Fi', 'Fantasy', 'Twist-Thriller']
+    }
+    
+    # Performance settings
+    TORCH_THREADS = 4
+    USE_HALF_PRECISION = False  # FP16 for GPU
+
+config = Config()
+
+# Set torch threads for CPU inference
+torch.set_num_threads(config.TORCH_THREADS)
+
+# ==================== MODEL DEFINITION ====================
+class DeBERTaEmotionClassifier(nn.Module):
+    """DeBERTa model for emotion classification"""
+    def __init__(self, config_dict: Dict, num_labels: int):
+        super().__init__()
+        from transformers import DebertaV2Config
+        deberta_config = DebertaV2Config(**config_dict)
+        self.deberta = DebertaV2Model(deberta_config)
+        self.dropout = nn.Dropout(0.1)
+        self.classifier = nn.Linear(deberta_config.hidden_size, num_labels)
+    
+    def forward(self, input_ids, attention_mask):
+        outputs = self.deberta(input_ids=input_ids, attention_mask=attention_mask)
+        sequence_output = outputs.last_hidden_state
+        cls_output = sequence_output[:, 0, :]
+        cls_output = self.dropout(cls_output)
+        logits = self.classifier(cls_output)
+        return logits
+
+# ==================== MODEL MANAGER ====================
+class ModelManager:
+    """Singleton class to manage model loading and inference"""
+    _instance = None
+    
+    def __new__(cls):
+        if cls._instance is None:
+            cls._instance = super().__new__(cls)
+            cls._instance.initialized = False
+        return cls._instance
+    
+    def __init__(self):
+        if not self.initialized:
+            self.model = None
+            self.tokenizer = None
+            self.initialized = True
+    
+    def load_model(self):
+        """Load model and tokenizer with error handling"""
+        try:
+            logger.info(f"Loading model on device: {config.DEVICE}")
+            start_time = time.time()
+            
+            # Load config from local file
+            logger.info("Loading model config...")
+            config_path = os.path.join(config.MODEL_PATH, "config.json")
+            if not os.path.exists(config_path):
+                raise FileNotFoundError(f"Model config not found at {config_path}")
+            
+            with open(config_path, 'r') as f:
+                model_config = json.load(f)
+            
+            # Load tokenizer from local files or fallback to HuggingFace
+            logger.info("Loading tokenizer...")
+            tokenizer_files = {
+                'vocab.json': os.path.join(config.MODEL_PATH, 'vocab.json'),
+                'merges.txt': os.path.join(config.MODEL_PATH, 'merges.txt')
+            }
+            if os.path.exists(tokenizer_files['vocab.json']):
+                logger.info("Loading tokenizer from local files...")
+                self.tokenizer = DebertaV2Tokenizer(vocab_file=tokenizer_files['vocab.json'])
+            else:
+                logger.info("Downloading tokenizer from HuggingFace...")
+                self.tokenizer = DebertaV2Tokenizer.from_pretrained("microsoft/deberta-v3-base")
+            
+            # Load model architecture from config
+            logger.info("Loading model architecture from config...")
+            self.model = DeBERTaEmotionClassifier(config_dict=model_config, num_labels=len(config.EMOTION_CLASSES))
+            
+            # Load trained weights: prefer full model file (safetensors) then fall back to checkpoint
+            safetensors_path = os.path.join(config.MODEL_PATH, "model.safetensors")
+            classifier_path = os.path.join(config.MODEL_PATH, "classifier.pt")
+
+            # Helper to map keys that were saved without proper prefixes
+            def _normalize_state_dict_keys(state_dict: Dict[str, torch.Tensor]) -> Dict[str, torch.Tensor]:
+                """
+                Normalize state dict keys to match the model architecture:
+                - Add 'deberta.' prefix to encoder/embedding keys if missing
+                - Add 'classifier.' prefix to weight/bias keys if they're classifier weights
+                """
+                if not state_dict:
+                    return state_dict
+                
+                mapped = {}
+                first_key = next(iter(state_dict.keys()), None)
+                
+                for k, v in state_dict.items():
+                    # Check if this is a classifier weight/bias (2D/1D tensor from Linear layer)
+                    # Classifier: weight [7, 768], bias [7]
+                    if k in ['weight', 'bias']:
+                        # Verify this is classifier-sized (num_classes=7, hidden_size=768)
+                        if k == 'weight' and len(v.shape) == 2 and v.shape[0] == 7 and v.shape[1] == 768:
+                            mapped['classifier.weight'] = v
+                        elif k == 'bias' and len(v.shape) == 1 and v.shape[0] == 7:
+                            mapped['classifier.bias'] = v
+                        else:
+                            mapped[k] = v
+                    # Add deberta prefix to encoder/embedding keys if missing
+                    elif k.startswith("deberta."):
+                        # Already has prefix
+                        mapped[k] = v
+                    elif k.startswith("embeddings.") or k.startswith("encoder.") or k.startswith("rel_embeddings") or k.startswith("LayerNorm") or k.startswith("word_embeddings"):
+                        # Encoder/embedding key without prefix
+                        mapped[f"deberta.{k}"] = v
+                    else:
+                        # Keep as-is (dropout, etc.)
+                        mapped[k] = v
+                
+                return mapped
+
+            # 1) Try safetensors full-model file (fast and safe if present)
+            if os.path.exists(safetensors_path):
+                try:
+                    logger.info("Loading full trained model from safetensors...")
+                    try:
+                        from safetensors.torch import load_file
+                    except Exception as ie:
+                        logger.error("safetensors package not available: %s", ie)
+                        raise
+
+                    state = load_file(safetensors_path)
+                    # state is a dict of tensors; adjust keys if necessary
+                    mapped = _normalize_state_dict_keys(state)
+                    load_res = self.model.load_state_dict(mapped, strict=False)
+                    logger.info("Loaded safetensors model (missing: %s, unexpected: %s)", getattr(load_res, 'missing_keys', []), getattr(load_res, 'unexpected_keys', []))
+                except Exception as e:
+                    logger.error("Error loading safetensors model: %s", e, exc_info=True)
+                    # fall through to try checkpoint
+
+            # 2) Fallback: try classic PyTorch checkpoint
+            if os.path.exists(classifier_path):
+                try:
+                    logger.info("Loading trained checkpoint (torch) ...")
+                    # In recent PyTorch versions the default weights_only may block some globals. Use weights_only=False
+                    checkpoint = torch.load(classifier_path, map_location=config.DEVICE, weights_only=False)
+
+                    # checkpoint might be a dict containing different keys depending on how it was saved
+                    if isinstance(checkpoint, dict):
+                        # Common key names used in training scripts
+                        if 'model_state_dict' in checkpoint:
+                            sd = checkpoint['model_state_dict']
+                        elif 'state_dict' in checkpoint:
+                            sd = checkpoint['state_dict']
+                        elif 'classifier_state_dict' in checkpoint or 'dropout_state_dict' in checkpoint:
+                            # old style: only classifier saved
+                            if 'classifier_state_dict' in checkpoint:
+                                try:
+                                    self.model.classifier.load_state_dict(checkpoint['classifier_state_dict'])
+                                except Exception:
+                                    # try flexible load with key normalization
+                                    normalized = _normalize_state_dict_keys(checkpoint['classifier_state_dict'])
+                                    self.model.load_state_dict(normalized, strict=False)
+                            if 'dropout_state_dict' in checkpoint:
+                                try:
+                                    self.model.dropout.load_state_dict(checkpoint['dropout_state_dict'])
+                                except Exception:
+                                    logger.warning('Could not load dropout state dict')
+                            sd = None
+                        else:
+                            sd = checkpoint
+
+                        if sd:
+                            # sd may contain keys without proper prefixes
+                            mapped = _normalize_state_dict_keys(sd)
+                            load_res = self.model.load_state_dict(mapped, strict=False)
+                            logger.info("Loaded checkpoint (missing: %s, unexpected: %s)", getattr(load_res, 'missing_keys', []), getattr(load_res, 'unexpected_keys', []))
+                    else:
+                        # Not a dict: cannot handle
+                        logger.warning("Checkpoint loaded but is not a dict, skipping")
+
+                except Exception as e:
+                    logger.error("Error loading checkpoint: %s", e, exc_info=True)
+                    raise
+            else:
+                logger.warning(f"No trained model found at {safetensors_path} or {classifier_path}, using base model")
+            
+            # Move to device
+            self.model.to(config.DEVICE)
+            self.model.eval()
+            
+            # Apply half precision for GPU
+            if config.USE_HALF_PRECISION:
+                self.model.half()
+                logger.info("Applied FP16 precision")
+            
+            # Optimize for inference
+            if config.DEVICE == "cuda":
+                torch.backends.cudnn.benchmark = True
+            
+            load_time = time.time() - start_time
+            logger.info(f"Model loaded successfully in {load_time:.2f}s")
+            logger.info(f"Memory usage: {psutil.Process().memory_info().rss / 1024 ** 2:.2f} MB")
+            
+            return True
+            
+        except FileNotFoundError as e:
+            logger.error(f"Model files not found: {e}")
+            raise HTTPException(status_code=500, detail=f"Model files not found: {str(e)}")
+        except Exception as e:
+            logger.error(f"Error loading model: {e}", exc_info=True)
+            raise HTTPException(status_code=500, detail=f"Failed to load model: {str(e)}")
+    
+    @torch.no_grad()
+    def predict(self, text: str) -> Dict:
+        """Run inference on input text"""
+        try:
+            if not self.model or not self.tokenizer:
+                raise ValueError("Model not loaded")
+            
+            start_time = time.time()
+            
+            # Tokenize
+            encoding = self.tokenizer(
+                text,
+                add_special_tokens=True,
+                max_length=config.MAX_LENGTH,
+                padding='max_length',
+                truncation=True,
+                return_attention_mask=True,
+                return_tensors='pt'
+            )
+            
+            input_ids = encoding['input_ids'].to(config.DEVICE)
+            attention_mask = encoding['attention_mask'].to(config.DEVICE)
+            
+            # Apply half precision if enabled
+            if config.USE_HALF_PRECISION:
+                input_ids = input_ids.half().long()  # Convert back to long for embeddings
+            
+            # Inference
+            with torch.cuda.amp.autocast(enabled=config.USE_HALF_PRECISION):
+                logits = self.model(input_ids, attention_mask)
+            
+            # Get probabilities
+            probs = torch.softmax(logits, dim=-1)
+            confidence, predicted_class = torch.max(probs, dim=-1)
+            
+            # Convert to CPU and numpy
+            probs_np = probs.cpu().float().numpy()[0]
+            predicted_idx = predicted_class.item()
+            confidence_score = confidence.item()
+            
+            # Create emotion probability dict
+            emotion_probs = {
+                emotion: float(probs_np[i]) 
+                for i, emotion in enumerate(config.EMOTION_CLASSES)
+            }
+            
+            inference_time = time.time() - start_time
+            
+            return {
+                "emotion": config.EMOTION_CLASSES[predicted_idx],
+                "confidence": confidence_score,
+                "all_probabilities": emotion_probs,
+                "inference_time_ms": round(inference_time * 1000, 2)
+            }
+            
+        except Exception as e:
+            logger.error(f"Prediction error: {e}", exc_info=True)
+            raise HTTPException(status_code=500, detail=f"Prediction failed: {str(e)}")
+    
+    def cleanup(self):
+        """Cleanup resources"""
+        try:
+            if self.model:
+                del self.model
+            if self.tokenizer:
+                del self.tokenizer
+            gc.collect()
+            if torch.cuda.is_available():
+                torch.cuda.empty_cache()
+            logger.info("Model resources cleaned up")
+        except Exception as e:
+            logger.error(f"Cleanup error: {e}")
+
+# ==================== LIFESPAN MANAGEMENT ====================
+model_manager = ModelManager()
+
+@asynccontextmanager
+async def lifespan(app: FastAPI):
+    """Manage application lifecycle"""
+    # Startup
+    logger.info("Starting application...")
+    try:
+        model_manager.load_model()
+        logger.info("Application ready")
+    except Exception as e:
+        logger.error(f"Startup failed: {e}")
+        raise
+    
+    yield
+    
+    # Shutdown
+    logger.info("Shutting down application...")
+    model_manager.cleanup()
+    logger.info("Application stopped")
+
+# ==================== FASTAPI APP ====================
+app = FastAPI(
+    title="Emotion Detection API",
+    description="DeBERTa v3 based emotion detection for 7 emotion classes",
+    version="1.0.0",
+    lifespan=lifespan
+)
+
+# CORS middleware
+app.add_middleware(
+    CORSMiddleware,
+    allow_origins=["*"],  # Configure appropriately for production
+    allow_credentials=True,
+    allow_methods=["*"],
+    allow_headers=["*"],
+)
+
+# ==================== REQUEST/RESPONSE MODELS ====================
+class PredictionRequest(BaseModel):
+    text: str = Field(..., min_length=1, max_length=config.MAX_TEXT_LENGTH)
+    
+    @field_validator('text')
+    @classmethod
+    def validate_text(cls, v):
+        if not v or not v.strip():
+            raise ValueError('Text cannot be empty or whitespace only')
+        return v.strip()
+
+class PredictionResponse(BaseModel):
+    emotion: str
+    confidence: float
+    all_probabilities: Dict[str, float]
+    inference_time_ms: float
+    text_length: int
+
+class HealthResponse(BaseModel):
+    status: str
+    device: str
+    model_loaded: bool
+    memory_mb: float
+
+class BatchPredictionRequest(BaseModel):
+    texts: List[str] = Field(..., min_length=1, max_length=10)
+    
+    @field_validator('texts')
+    @classmethod
+    def validate_texts(cls, v):
+        cleaned = [t.strip() for t in v if t and t.strip()]
+        if not cleaned:
+            raise ValueError('At least one valid text required')
+        if len(cleaned) > 10:
+            raise ValueError('Maximum 10 texts allowed per batch')
+        return cleaned
+
+# ==================== MOVIE MODELS ====================
+class MovieItem(BaseModel):
+    id: int
+    title: str
+    poster_path: Optional[str] = None
+    vote_average: float
+    release_date: Optional[str] = None
+
+class GenreMovies(BaseModel):
+    genre: str
+    movies: List[MovieItem]
+
+class RecommendationResponse(BaseModel):
+    emotion: str
+    confidence: float
+    recommendations: List[GenreMovies]
+
+# ==================== ENDPOINTS ====================
+@app.get("/", response_model=Dict)
+async def root():
+    """Root endpoint"""
+    return {
+        "message": "Emotion Detection API",
+        "version": "1.0.0",
+        "endpoints": {
+            "predict": "/predict",
+            "batch_predict": "/batch_predict",
+            "health": "/health",
+            "emotions": "/emotions"
+        }
+    }
+
+@app.get("/health", response_model=HealthResponse)
+async def health_check():
+    """Health check endpoint"""
+    try:
+        memory_mb = psutil.Process().memory_info().rss / 1024 ** 2
+        return HealthResponse(
+            status="healthy",
+            device=config.DEVICE,
+            model_loaded=model_manager.model is not None,
+            memory_mb=round(memory_mb, 2)
+        )
+    except Exception as e:
+        logger.error(f"Health check failed: {e}")
+        raise HTTPException(status_code=500, detail="Health check failed")
+
+@app.get("/emotions", response_model=Dict)
+async def get_emotions():
+    """Get list of supported emotions"""
+    return {
+        "emotions": config.EMOTION_CLASSES,
+        "count": len(config.EMOTION_CLASSES)
+    }
+
+@app.post("/predict", response_model=PredictionResponse)
+async def predict_emotion(request: PredictionRequest):
+    """Predict emotion for single text"""
+    try:
+        logger.info(f"Prediction request: {len(request.text)} chars")
+        
+        result = model_manager.predict(request.text)
+        
+        return PredictionResponse(
+            emotion=result["emotion"],
+            confidence=result["confidence"],
+            all_probabilities=result["all_probabilities"],
+            inference_time_ms=result["inference_time_ms"],
+            text_length=len(request.text)
+        )
+        
+    except HTTPException:
+        raise
+    except Exception as e:
+        logger.error(f"Prediction endpoint error: {e}", exc_info=True)
+        raise HTTPException(status_code=500, detail=str(e))
+
+@app.post("/batch_predict")
+async def batch_predict_emotion(request: BatchPredictionRequest):
+    """Predict emotions for multiple texts"""
+    try:
+        logger.info(f"Batch prediction request: {len(request.texts)} texts")
+        
+        results = []
+        for text in request.texts:
+            result = model_manager.predict(text)
+            results.append({
+                "text": text[:100] + "..." if len(text) > 100 else text,
+                "emotion": result["emotion"],
+                "confidence": result["confidence"],
+                "all_probabilities": result["all_probabilities"]
+            })
+        
+        return {
+            "count": len(results),
+            "predictions": results
+        }
+        
+    except Exception as e:
+        logger.error(f"Batch prediction error: {e}", exc_info=True)
+        raise HTTPException(status_code=500, detail=str(e))
+
+@app.post("/recommendations", response_model=RecommendationResponse)
+async def get_movie_recommendations(request: PredictionRequest):
+    """
+    Predict emotion and fetch movie recommendations based on detected emotion.
+    Maps emotion to genres and fetches 12 most popular movies per genre from TMDB.
+    """
+    try:
+        logger.info(f"Recommendation request: {len(request.text)} chars")
+        
+        # 1. Detect emotion
+        emotion_result = model_manager.predict(request.text)
+        detected_emotion = emotion_result["emotion"]
+        confidence = emotion_result["confidence"]
+        
+        logger.info(f"Detected emotion: {detected_emotion} (confidence: {confidence})")
+        
+        # 2. Get mapped genres for this emotion
+        genres = config.EMOTION_GENRE_MAP.get(detected_emotion, [])
+        if not genres:
+            raise HTTPException(status_code=400, detail=f"No genres mapped for emotion: {detected_emotion}")
+        
+        # 3. Fetch movies for these genres
+        movies_by_genre = await fetch_movies_by_genres(genres, limit=12)
+        
+        # 4. Format response
+        recommendations = []
+        for genre in genres:
+            if genre in movies_by_genre:
+                recommendations.append(GenreMovies(
+                    genre=genre,
+                    movies=movies_by_genre[genre]
+                ))
+        
+        return RecommendationResponse(
+            emotion=detected_emotion,
+            confidence=confidence,
+            recommendations=recommendations
+        )
+        
+    except HTTPException:
+        raise
+    except Exception as e:
+        logger.error(f"Recommendation error: {e}", exc_info=True)
+        raise HTTPException(status_code=500, detail=f"Failed to get recommendations: {str(e)}")
+
+# ==================== ERROR HANDLERS ====================
+@app.exception_handler(Exception)
+async def global_exception_handler(request: Request, exc: Exception):
+    """Global exception handler"""
+    logger.error(f"Unhandled exception: {exc}", exc_info=True)
+    return JSONResponse(
+        status_code=500,
+        content={
+            "error": "Internal server error",
+            "detail": str(exc),
+            "path": str(request.url)
+        }
+    )
+
+# ==================== TMDB MOVIE FETCHING ====================
+async def fetch_movies_by_genres(genres: List[str], limit: int = 12) -> Dict[str, List[MovieItem]]:
+    """
+    Fetch movies from TMDB API for given genres.
+    Returns dict with genre as key and list of MovieItem as value.
+    """
+    if not TMDB_API_KEY:
+        logger.error("TMDB_API_KEY not configured")
+        raise HTTPException(status_code=500, detail="Movie service not configured. Please set TMDB_API_KEY environment variable.")
+    
+    movies_by_genre = {}
+    
+    async with httpx.AsyncClient(timeout=10.0) as client:
+        for genre in genres:
+            try:
+                logger.info(f"Fetching movies for genre: {genre}")
+                
+                # Get genre ID from genre name
+                genres_response = await client.get(
+                    f"{TMDB_BASE_URL}/genre/movie/list",
+                    params={"api_key": TMDB_API_KEY}
+                )
+                genres_response.raise_for_status()
+                genres_data = genres_response.json()
+                
+                genre_id = None
+                for g in genres_data.get("genres", []):
+                    if g["name"].lower() == genre.lower():
+                        genre_id = g["id"]
+                        break
+                
+                if not genre_id:
+                    logger.warning(f"Genre '{genre}' not found in TMDB")
+                    continue
+                
+                # Fetch movies for this genre, sorted by popularity (descending)
+                movies_response = await client.get(
+                    f"{TMDB_BASE_URL}/discover/movie",
+                    params={
+                        "api_key": TMDB_API_KEY,
+                        "with_genres": genre_id,
+                        "sort_by": "popularity.desc",
+                        "page": 1,
+                        "language": "en-US"
+                    }
+                )
+                movies_response.raise_for_status()
+                movies_data = movies_response.json()
+                
+                # Parse movies
+                movie_list = []
+                for movie in movies_data.get("results", [])[:limit]:
+                    movie_list.append(MovieItem(
+                        id=movie.get("id"),
+                        title=movie.get("title", "Unknown"),
+                        poster_path=movie.get("poster_path"),
+                        vote_average=movie.get("vote_average", 0.0),
+                        release_date=movie.get("release_date", "N/A")
+                    ))
+                
+                if movie_list:
+                    movies_by_genre[genre] = movie_list
+                    logger.info(f"Fetched {len(movie_list)} movies for genre: {genre}")
+                else:
+                    logger.warning(f"No movies found for genre: {genre}")
+                    
+            except httpx.HTTPError as e:
+                logger.error(f"HTTP error fetching movies for {genre}: {e}")
+            except Exception as e:
+                logger.error(f"Error fetching movies for {genre}: {e}", exc_info=True)
+    
+    return movies_by_genre
+
+# ==================== MAIN ====================
+if __name__ == "__main__":
+    uvicorn.run(
+        "main:app",
+        host="0.0.0.0",
+        port=8000,
+        reload=False,
+        log_level="info",
+        access_log=True
+    )

app/backend/requirements.txt

@@ -0,0 +1,9 @@
+fastapi==0.104.1
+uvicorn==0.24.0
+torch==2.2.0
+transformers>=4.35.2
+safetensors>=0.4.16
+python-dotenv==1.0.0
+httpx==0.25.1
+pydantic==2.5.0
+psutil==5.9.6

app/backend/runtime.txt

@@ -0,0 +1 @@
+python-3.12

app/frontend/.gitignore

@@ -0,0 +1,24 @@
+# Logs
+logs
+*.log
+npm-debug.log*
+yarn-debug.log*
+yarn-error.log*
+pnpm-debug.log*
+lerna-debug.log*
+
+node_modules
+dist
+dist-ssr
+*.local
+
+# Editor directories and files
+.vscode/*
+!.vscode/extensions.json
+.idea
+.DS_Store
+*.suo
+*.ntvs*
+*.njsproj
+*.sln
+*.sw?

app/frontend/eslint.config.js

@@ -0,0 +1,29 @@
+import js from '@eslint/js'
+import globals from 'globals'
+import reactHooks from 'eslint-plugin-react-hooks'
+import reactRefresh from 'eslint-plugin-react-refresh'
+import { defineConfig, globalIgnores } from 'eslint/config'
+
+export default defineConfig([
+  globalIgnores(['dist']),
+  {
+    files: ['**/*.{js,jsx}'],
+    extends: [
+      js.configs.recommended,
+      reactHooks.configs['recommended-latest'],
+      reactRefresh.configs.vite,
+    ],
+    languageOptions: {
+      ecmaVersion: 2020,
+      globals: globals.browser,
+      parserOptions: {
+        ecmaVersion: 'latest',
+        ecmaFeatures: { jsx: true },
+        sourceType: 'module',
+      },
+    },
+    rules: {
+      'no-unused-vars': ['error', { varsIgnorePattern: '^[A-Z_]' }],
+    },
+  },
+])

app/frontend/index.html

@@ -0,0 +1,13 @@
+<!doctype html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <link rel="icon" type="image/svg+xml" href="/vite.svg" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>frontend</title>
+  </head>
+  <body>
+    <div id="root"></div>
+    <script type="module" src="/src/main.jsx"></script>
+  </body>
+</html>

app/frontend/package.json

@@ -0,0 +1,32 @@
+{
+  "name": "frontend",
+  "private": true,
+  "version": "0.0.0",
+  "type": "module",
+  "scripts": {
+    "dev": "vite",
+    "build": "vite build",
+    "lint": "eslint .",
+    "preview": "vite preview"
+  },
+  "dependencies": {
+    "lucide-react": "^0.553.0",
+    "react": "^19.2.0",
+    "react-dom": "^19.2.0"
+  },
+  "devDependencies": {
+    "@eslint/js": "^9.39.1",
+    "@tailwindcss/postcss": "^4.1.17",
+    "@types/react": "^19.2.2",
+    "@types/react-dom": "^19.2.2",
+    "@vitejs/plugin-react": "^5.1.0",
+    "autoprefixer": "^10.4.21",
+    "eslint": "^9.39.1",
+    "eslint-plugin-react-hooks": "^5.2.0",
+    "eslint-plugin-react-refresh": "^0.4.24",
+    "globals": "^16.5.0",
+    "postcss": "^8.5.6",
+    "tailwindcss": "^4.1.17",
+    "vite": "^7.2.2"
+  }
+}

app/frontend/postcss.config.js

@@ -0,0 +1,7 @@
+// postcss.config.js (New Way for Tailwind v4)
+export default {
+  plugins: {
+    '@tailwindcss/postcss': {}, // <-- This is the correct plugin
+    autoprefixer: {},
+  },
+}

app/frontend/src/App.css

@@ -0,0 +1,42 @@
+#root {
+  max-width: 1280px;
+  margin: 0 auto;
+  padding: 2rem;
+  text-align: center;
+}
+
+.logo {
+  height: 6em;
+  padding: 1.5em;
+  will-change: filter;
+  transition: filter 300ms;
+}
+.logo:hover {
+  filter: drop-shadow(0 0 2em #646cffaa);
+}
+.logo.react:hover {
+  filter: drop-shadow(0 0 2em #61dafbaa);
+}
+
+@keyframes logo-spin {
+  from {
+    transform: rotate(0deg);
+  }
+  to {
+    transform: rotate(360deg);
+  }
+}
+
+@media (prefers-reduced-motion: no-preference) {
+  a:nth-of-type(2) .logo {
+    animation: logo-spin infinite 20s linear;
+  }
+}
+
+.card {
+  padding: 2em;
+}
+
+.read-the-docs {
+  color: #888;
+}

app/frontend/src/App.jsx

@@ -0,0 +1,385 @@
+import React, { useState, useEffect, useRef } from 'react';
+import { Send, Loader2, Heart, Frown, Smile, Zap, Meh, AlertCircle, TrendingUp, Moon, Sun } from 'lucide-react';
+import MovieCarousel from './components/MovieCarousel';
+
+const EmotionDetector = () => {
+  const [text, setText] = useState('');
+  const [result, setResult] = useState(null);
+  const [movies, setMovies] = useState(null);
+  const [loading, setLoading] = useState(false);
+  const [error, setError] = useState(null);
+  const [apiHealth, setApiHealth] = useState(null);
+  const [isDark, setIsDark] = useState(true);
+  const textareaRef = useRef(null);
+
+  // API endpoint - change this to your deployed backend URL
+  const API_URL = 'http://localhost:8000';
+
+  // Emotion configurations with colors and icons
+  const emotionConfig = {
+    joy: { color: '#FFD700', gradient: 'from-yellow-400 to-amber-500', icon: Smile, emoji: '😊' },
+    love: { color: '#FF69B4', gradient: 'from-pink-400 to-rose-500', icon: Heart, emoji: '❤️' },
+    surprise: { color: '#9370DB', gradient: 'from-purple-400 to-violet-500', icon: Zap, emoji: '😲' },
+    neutral: { color: '#94A3B8', gradient: 'from-slate-400 to-gray-500', icon: Meh, emoji: '😐' },
+    sadness: { color: '#4682B4', gradient: 'from-blue-400 to-cyan-600', icon: Frown, emoji: '😢' },
+    anger: { color: '#DC143C', gradient: 'from-red-500 to-orange-600', icon: AlertCircle, emoji: '😠' },
+    fear: { color: '#8B4513', gradient: 'from-amber-700 to-orange-800', icon: TrendingUp, emoji: '😨' }
+  };
+
+  // Check API health on mount
+  useEffect(() => {
+    checkHealth();
+  }, []);
+
+  const checkHealth = async () => {
+    try {
+      const response = await fetch(`${API_URL}/health`);
+      if (response.ok) {
+        const data = await response.json();
+        setApiHealth(data);
+      }
+    } catch (err) {
+      console.error('Health check failed:', err);
+    }
+  };
+
+  const handleSubmit = async (e) => {
+    e.preventDefault();
+    
+    if (!text.trim()) {
+      setError('Please enter some text');
+      return;
+    }
+
+    if (text.length > 5000) {
+      setError('Text too long (max 5000 characters)');
+      return;
+    }
+
+    setLoading(true);
+    setError(null);
+    setResult(null);
+    setMovies(null);
+
+    try {
+      // Call the new /recommendations endpoint
+      const response = await fetch(`${API_URL}/recommendations`, {
+        method: 'POST',
+        headers: {
+          'Content-Type': 'application/json',
+        },
+        body: JSON.stringify({ text: text.trim() }),
+      });
+
+      if (!response.ok) {
+        const errorData = await response.json();
+        throw new Error(errorData.detail || 'Prediction failed');
+      }
+
+      const data = await response.json();
+      setResult({
+        emotion: data.emotion,
+        confidence: data.confidence,
+      });
+      setMovies(data.recommendations);
+      
+    } catch (err) {
+      setError(err.message || 'Failed to connect to server');
+      console.error('Prediction error:', err);
+    } finally {
+      setLoading(false);
+    }
+  };
+
+  const handleTextChange = (e) => {
+    setText(e.target.value);
+    setError(null);
+  };
+
+  const handleClear = () => {
+    setText('');
+    setResult(null);
+    setMovies(null);
+    setError(null);
+    textareaRef.current?.focus();
+  };
+
+  const tryExample = (exampleText) => {
+    setText(exampleText);
+    setError(null);
+    setResult(null);
+    setMovies(null);
+  };
+
+  const exampleTexts = [
+    "I'm so excited about my vacation next week!",
+    "This situation makes me really frustrated and angry.",
+    "I miss my family so much, feeling lonely today.",
+    "You mean everything to me, I love you.",
+    "I'm worried about the exam results tomorrow.",
+    "Just another regular day at work.",
+    "Wow! I can't believe this just happened!"
+  ];
+
+  // Dark theme: Blade Runner 2049 - Neon pink/purple cyberpunk
+  // Light theme: Joker 2019 - Neon orange suit inspired
+  const bgLight = 'bg-gradient-to-br from-orange-50 via-amber-50 to-red-50';
+  const bgDark = 'bg-gradient-to-br from-slate-950 via-purple-950 to-slate-950';
+  
+  const headerLight = 'bg-gradient-to-r from-orange-500 via-red-500 to-orange-600 border-orange-400';
+  const headerDark = 'bg-gradient-to-r from-fuchsia-900 via-purple-900 to-violet-900 border-fuchsia-600';
+  
+  const cardLight = 'bg-white border-orange-400 shadow-lg';
+  const cardDark = 'bg-slate-900/80 border-fuchsia-500 shadow-2xl shadow-fuchsia-500/20';
+
+  const sortedEmotions = result 
+    ? Object.entries(result.all_probabilities || {}).sort((a, b) => b[1] - a[1])
+    : [];
+
+  return (
+    <div className={`min-h-screen transition-colors duration-300 ${isDark ? bgDark : bgLight}`}>
+      {/* Header */}
+      <div className={`border-b backdrop-blur-sm shadow-md ${isDark ? headerDark : headerLight}`}>
+        <div className="max-w-6xl mx-auto px-4 py-4 sm:px-6 lg:px-8">
+          <div className="flex items-center justify-between">
+            <div className="flex items-center space-x-3">
+              <div className={`w-10 h-10 rounded-xl flex items-center justify-center ${isDark ? 'bg-gradient-to-br from-fuchsia-500 to-purple-600' : 'bg-gradient-to-br from-orange-500 to-red-600'}`}>
+                <Heart className="w-6 h-6 text-white" />
+              </div>
+              <div>
+                <h1 className={`text-2xl font-bold ${isDark ? 'text-transparent bg-clip-text bg-gradient-to-r from-fuchsia-400 to-cyan-400' : 'text-transparent bg-clip-text bg-gradient-to-r from-orange-600 to-red-600'}`}>
+                  MoodFlix
+                </h1>
+                <p className={`text-xs ${isDark ? 'text-fuchsia-300' : 'text-orange-700'}`}>Emotion-based Movie Recommendations</p>
+              </div>
+            </div>
+            
+            <div className="flex items-center space-x-4">
+              {apiHealth && (
+                <div className={`hidden sm:flex items-center space-x-2 px-3 py-1 rounded-full border ${isDark ? 'bg-cyan-950/50 border-cyan-600' : 'bg-orange-50 border-orange-400'}`}>
+                  <div className="w-2 h-2 bg-green-500 rounded-full animate-pulse"></div>
+                  <span className={`text-xs font-medium ${isDark ? 'text-cyan-400' : 'text-orange-700'}`}>
+                    API Online
+                  </span>
+                </div>
+              )}
+              
+              {/* Theme Toggle */}
+              <button
+                onClick={() => setIsDark(!isDark)}
+                className={`p-2 rounded-lg transition-all ${isDark ? 'bg-fuchsia-900/50 hover:bg-fuchsia-800 text-cyan-300 border border-fuchsia-600' : 'bg-orange-300 hover:bg-orange-400 text-gray-900 border border-orange-500'}`}
+              >
+                {isDark ? <Sun className="w-5 h-5" /> : <Moon className="w-5 h-5" />}
+              </button>
+            </div>
+          </div>
+        </div>
+      </div>
+
+      {/* Main Content */}
+      <div className="max-w-6xl mx-auto px-4 py-6 sm:px-6 lg:px-8 sm:py-8">
+        <div className="grid grid-cols-1 lg:grid-cols-3 gap-6">
+          
+          {/* Left Column - Input */}
+          <div className="lg:col-span-2 space-y-6">
+            {/* Input Card */}
+            <div className={`rounded-2xl border-2 overflow-hidden ${isDark ? cardDark : cardLight}`}>
+              <div className="p-6">
+                <h2 className={`text-lg font-semibold mb-4 ${isDark ? 'text-white' : 'text-gray-900'}`}>
+                  How are you feeling?
+                </h2>
+                
+                <form onSubmit={handleSubmit} className="space-y-4">
+                  <div className="relative">
+                    <textarea
+                      ref={textareaRef}
+                      value={text}
+                      onChange={handleTextChange}
+                      placeholder="Share your thoughts or feelings... (e.g., 'I'm feeling amazing today!')"
+                      className={`w-full h-32 sm:h-40 px-4 py-3 border-2 rounded-xl focus:ring-4 transition-all resize-none ${
+                        isDark
+                          ? 'bg-slate-800 border-fuchsia-500 focus:border-cyan-400 focus:ring-fuchsia-500/20 text-white placeholder-slate-500'
+                          : 'bg-white border-orange-400 focus:border-red-500 focus:ring-orange-200 text-gray-900 placeholder-gray-400'
+                      }`}
+                      disabled={loading}
+                    />
+                    <div className={`absolute bottom-3 right-3 text-xs ${isDark ? 'text-gray-500' : 'text-gray-500'}`}>
+                      {text.length} / 5000
+                    </div>
+                  </div>
+
+                  {error && (
+                    <div className={`flex items-center space-x-2 p-3 border rounded-lg ${isDark ? 'bg-red-950/50 border-red-600' : 'bg-red-50 border-red-300'}`}>
+                      <AlertCircle className={`w-4 h-4 flex-shrink-0 ${isDark ? 'text-red-400' : 'text-red-600'}`} />
+                      <p className={`text-sm ${isDark ? 'text-red-300' : 'text-red-700'}`}>{error}</p>
+                    </div>
+                  )}
+
+                  <div className="flex flex-col sm:flex-row gap-3">
+                    <button
+                      type="submit"
+                      disabled={loading || !text.trim()}
+                      className={`flex-1 flex items-center justify-center space-x-2 px-6 py-3 rounded-xl font-medium shadow-lg hover:shadow-xl transform hover:scale-[1.02] transition-all disabled:opacity-50 disabled:cursor-not-allowed disabled:transform-none ${
+                        isDark
+                          ? 'bg-gradient-to-r from-fuchsia-600 to-purple-600 text-white hover:from-fuchsia-700 hover:to-purple-700 border border-fuchsia-500'
+                          : 'bg-gradient-to-r from-orange-500 to-red-500 text-white hover:from-orange-600 hover:to-red-600 border border-orange-400'
+                      }`}
+                    >
+                      {loading ? (
+                        <>
+                          <Loader2 className="w-5 h-5 animate-spin" />
+                          <span>Analyzing & Finding Movies...</span>
+                        </>
+                      ) : (
+                        <>
+                          <Send className="w-5 h-5" />
+                          <span>Detect & Suggest</span>
+                        </>
+                      )}
+                    </button>
+                    
+                    <button
+                      type="button"
+                      onClick={handleClear}
+                      disabled={loading}
+                      className={`px-6 py-3 rounded-xl font-medium transition-colors disabled:opacity-50 ${
+                        isDark
+                          ? 'bg-slate-800 text-slate-200 hover:bg-slate-700 border border-fuchsia-500'
+                          : 'bg-orange-200 text-gray-800 hover:bg-orange-300 border border-orange-400'
+                      }`}
+                    >
+                      Clear
+                    </button>
+                  </div>
+                </form>
+              </div>
+            </div>
+
+            {/* Results Card */}
+            {result && (
+              <div className={`rounded-2xl border-2 overflow-hidden animate-fadeIn ${isDark ? cardDark : cardLight}`}>
+                <div className="p-6 space-y-6">
+                  {/* Primary Emotion */}
+                  <div>
+                    <h2 className={`text-lg font-semibold mb-4 ${isDark ? 'text-white' : 'text-gray-900'}`}>
+                      Your Emotion
+                    </h2>
+                    <div className={`relative p-6 rounded-xl bg-gradient-to-r ${emotionConfig[result.emotion].gradient} overflow-hidden`}>
+                      <div className="absolute top-0 right-0 text-8xl opacity-10">
+                        {emotionConfig[result.emotion].emoji}
+                      </div>
+                      <div className="relative">
+                        <div className="flex items-center space-x-3 mb-2">
+                          {React.createElement(emotionConfig[result.emotion].icon, {
+                            className: "w-8 h-8 text-white"
+                          })}
+                          <h3 className="text-3xl font-bold text-white capitalize">
+                            {result.emotion}
+                          </h3>
+                        </div>
+                        <p className="text-white/90 text-lg">
+                          Confidence: {(result.confidence * 100).toFixed(1)}%
+                        </p>
+                      </div>
+                    </div>
+                  </div>
+                </div>
+              </div>
+            )}
+
+            {/* Movies Carousels */}
+            {movies && movies.length > 0 && (
+              <div className="space-y-4 animate-fadeIn">
+                <h2 className={`text-2xl font-bold ${isDark ? 'text-white' : 'text-gray-900'}`}>
+                  Movies For You
+                </h2>
+                {movies.map((genreMovies, idx) => (
+                  <MovieCarousel
+                    key={idx}
+                    genre={genreMovies.genre}
+                    movies={genreMovies.movies}
+                    isDark={isDark}
+                  />
+                ))}
+              </div>
+            )}
+          </div>
+
+          {/* Right Column - Examples & Info */}
+          <div className="space-y-6">
+            {/* Try Examples */}
+            <div className={`rounded-2xl border-2 p-6 overflow-hidden ${isDark ? cardDark : cardLight}`}>
+              <h2 className={`text-lg font-semibold mb-4 ${isDark ? 'text-white' : 'text-gray-900'}`}>
+                Try Examples
+              </h2>
+              <div className="space-y-2">
+                {exampleTexts.map((example, idx) => (
+                  <button
+                    key={idx}
+                    onClick={() => tryExample(example)}
+                    disabled={loading}
+                    className={`w-full text-left px-3 py-2 text-sm rounded-lg transition-colors disabled:opacity-50 border ${
+                      isDark
+                        ? 'text-slate-300 hover:bg-fuchsia-900/30 hover:text-fuchsia-200 border-fuchsia-600'
+                        : 'text-gray-700 hover:bg-orange-100 hover:text-orange-700 border-orange-300'
+                    }`}
+                  >
+                    "{example.length > 60 ? example.slice(0, 60) + '...' : example}"
+                  </button>
+                ))}
+              </div>
+            </div>
+
+            {/* Emotion Legend */}
+            <div className={`rounded-2xl border-2 p-6 overflow-hidden ${isDark ? cardDark : cardLight}`}>
+              <h2 className={`text-lg font-semibold mb-4 ${isDark ? 'text-white' : 'text-gray-900'}`}>
+                Emotions We Detect
+              </h2>
+              <div className="space-y-3">
+                {Object.entries(emotionConfig).map(([emotion, config]) => (
+                  <div key={emotion} className="flex items-center space-x-3">
+                    <div className={`w-10 h-10 rounded-lg bg-gradient-to-r ${config.gradient} flex items-center justify-center text-xl`}>
+                      {config.emoji}
+                    </div>
+                    <div>
+                      <p className={`font-medium capitalize ${isDark ? 'text-white' : 'text-gray-900'}`}>
+                        {emotion}
+                      </p>
+                    </div>
+                  </div>
+                ))}
+              </div>
+            </div>
+
+            {/* Info Card */}
+            <div className={`rounded-2xl border-2 p-6 text-white overflow-hidden ${isDark ? 'bg-gradient-to-br from-fuchsia-900 to-purple-900 border-fuchsia-600' : 'bg-gradient-to-br from-orange-500 to-red-600 border-orange-400'}`}>
+              <h3 className="font-semibold mb-2">About MoodFlix</h3>
+              <p className="text-sm text-white/90">
+                AI-powered emotion detection meets cinema. Share your feelings and discover movies that match your mood. Powered by DeBERTa v3 and TMDB.
+              </p>
+            </div>
+          </div>
+        </div>
+      </div>
+
+      <style jsx>{`
+        @keyframes fadeIn {
+          from {
+            opacity: 0;
+            transform: translateY(10px);
+          }
+          to {
+            opacity: 1;
+            transform: translateY(0);
+          }
+        }
+        
+        .animate-fadeIn {
+          animation: fadeIn 0.3s ease-out;
+        }
+      `}</style>
+    </div>
+  );
+};
+
+export default EmotionDetector;

app/frontend/src/components/MovieCard.jsx

@@ -0,0 +1,72 @@
+import React from 'react';
+import { Star, Calendar } from 'lucide-react';
+
+const MovieCard = ({ movie, isDark = false }) => {
+  const posterUrl = movie.poster_path
+    ? `https://image.tmdb.org/t/p/w500${movie.poster_path}`
+    : 'https://via.placeholder.com/300x450?text=No+Image';
+
+  const releaseYear = movie.release_date
+    ? new Date(movie.release_date).getFullYear()
+    : 'N/A';
+
+  return (
+    <div
+      className={`flex-shrink-0 w-40 rounded-lg overflow-hidden shadow-lg transform transition-all duration-300 hover:scale-105 hover:shadow-2xl cursor-pointer ${
+        isDark
+          ? 'bg-gray-800 border border-purple-600'
+          : 'bg-white border border-yellow-300'
+      }`}
+    >
+      {/* Poster Image */}
+      <div className="relative overflow-hidden h-64 bg-gradient-to-br from-gray-300 to-gray-400">
+        <img
+          src={posterUrl}
+          alt={movie.title}
+          className="w-full h-full object-cover"
+          loading="lazy"
+        />
+        {/* Rating Badge */}
+        <div
+          className={`absolute top-2 right-2 flex items-center space-x-1 px-2 py-1 rounded-full backdrop-blur-sm ${
+            isDark
+              ? 'bg-purple-600/90'
+              : 'bg-yellow-400/90'
+          }`}
+        >
+          <Star className="w-3 h-3 fill-current" />
+          <span className={`text-xs font-bold ${isDark ? 'text-white' : 'text-gray-900'}`}>
+            {movie.vote_average.toFixed(1)}
+          </span>
+        </div>
+      </div>
+
+      {/* Card Content */}
+      <div className={`p-3 ${isDark ? 'bg-gray-900' : 'bg-white'}`}>
+        {/* Title */}
+        <h3
+          className={`text-sm font-bold line-clamp-2 mb-2 ${
+            isDark ? 'text-white' : 'text-gray-900'
+          }`}
+          title={movie.title}
+        >
+          {movie.title}
+        </h3>
+
+        {/* Release Year */}
+        <div className="flex items-center space-x-1">
+          <Calendar className={`w-3 h-3 ${isDark ? 'text-purple-400' : 'text-yellow-600'}`} />
+          <span
+            className={`text-xs ${
+              isDark ? 'text-gray-400' : 'text-gray-600'
+            }`}
+          >
+            {releaseYear}
+          </span>
+        </div>
+      </div>
+    </div>
+  );
+};
+
+export default MovieCard;

app/frontend/src/components/MovieCarousel.jsx

@@ -0,0 +1,95 @@
+import React, { useRef } from 'react';
+import { ChevronLeft, ChevronRight } from 'lucide-react';
+import MovieCard from './MovieCard';
+
+const MovieCarousel = ({ genre, movies, isDark = false }) => {
+  const scrollContainerRef = useRef(null);
+
+  const scroll = (direction) => {
+    if (scrollContainerRef.current) {
+      const scrollAmount = 400;
+      if (direction === 'left') {
+        scrollContainerRef.current.scrollBy({ left: -scrollAmount, behavior: 'smooth' });
+      } else {
+        scrollContainerRef.current.scrollBy({ left: scrollAmount, behavior: 'smooth' });
+      }
+    }
+  };
+
+  return (
+    <div
+      className={`rounded-xl overflow-hidden ${
+        isDark
+          ? 'bg-gradient-to-r from-gray-900 via-purple-900 to-gray-900 border border-purple-700'
+          : 'bg-gradient-to-r from-yellow-50 via-green-50 to-yellow-50 border border-green-300'
+      }`}
+    >
+      {/* Genre Header */}
+      <div className={`px-6 py-4 flex items-center justify-between ${isDark ? 'bg-gray-800/50' : 'bg-green-100/50'}`}>
+        <h2
+          className={`text-2xl font-bold capitalize ${
+            isDark
+              ? 'text-transparent bg-clip-text bg-gradient-to-r from-purple-400 to-pink-400'
+              : 'text-transparent bg-clip-text bg-gradient-to-r from-green-700 to-yellow-700'
+          }`}
+        >
+          {genre}
+        </h2>
+        <span
+          className={`text-sm font-semibold px-3 py-1 rounded-full ${
+            isDark ? 'bg-purple-600 text-white' : 'bg-yellow-300 text-gray-900'
+          }`}
+        >
+          {movies.length} movies
+        </span>
+      </div>
+
+      {/* Carousel Container */}
+      <div className="relative group">
+        {/* Left Arrow */}
+        <button
+          onClick={() => scroll('left')}
+          className={`absolute left-2 top-1/2 -translate-y-1/2 z-10 p-2 rounded-full opacity-0 group-hover:opacity-100 transform transition-all duration-300 ${
+            isDark
+              ? 'bg-purple-600 hover:bg-purple-700 text-white'
+              : 'bg-yellow-400 hover:bg-yellow-500 text-gray-900'
+          }`}
+        >
+          <ChevronLeft className="w-5 h-5" />
+        </button>
+
+        {/* Scrollable Container */}
+        <div
+          ref={scrollContainerRef}
+          className="flex gap-4 overflow-x-auto scroll-smooth px-6 py-4 scrollbar-hide"
+          style={{ scrollBehavior: 'smooth', scrollbarWidth: 'none', msOverflowStyle: 'none' }}
+        >
+          {movies.map((movie) => (
+            <MovieCard key={movie.id} movie={movie} isDark={isDark} />
+          ))}
+        </div>
+
+        {/* Right Arrow */}
+        <button
+          onClick={() => scroll('right')}
+          className={`absolute right-2 top-1/2 -translate-y-1/2 z-10 p-2 rounded-full opacity-0 group-hover:opacity-100 transform transition-all duration-300 ${
+            isDark
+              ? 'bg-purple-600 hover:bg-purple-700 text-white'
+              : 'bg-yellow-400 hover:bg-yellow-500 text-gray-900'
+          }`}
+        >
+          <ChevronRight className="w-5 h-5" />
+        </button>
+      </div>
+
+      {/* Custom Scrollbar Hide */}
+      <style jsx>{`
+        div::-webkit-scrollbar {
+          display: none;
+        }
+      `}</style>
+    </div>
+  );
+};
+
+export default MovieCarousel;

app/frontend/src/index.css

@@ -0,0 +1,2 @@
+/* src/index.css (New Way for Tailwind v4) */
+@import "tailwindcss";

app/frontend/src/main.jsx

@@ -0,0 +1,10 @@
+import React from 'react'
+import ReactDOM from 'react-dom/client'
+import App from './App.jsx'
+import './index.css'
+
+ReactDOM.createRoot(document.getElementById('root')).render(
+  <React.StrictMode>
+    <App />
+  </React.StrictMode>,
+)

app/frontend/tailwind.config.js

@@ -0,0 +1,11 @@
+/** @type {import('tailwindcss').Config} */
+module.exports = {
+  content: [
+    "./src/**/*.{js,jsx,ts,tsx}",
+    "./public/index.html"
+  ],
+  theme: {
+    extend: {},
+  },
+  plugins: [],
+}

app/frontend/vite.config.js

@@ -0,0 +1,16 @@
+import { defineConfig } from 'vite'
+import react from '@vitejs/plugin-react'
+
+export default defineConfig({
+  plugins: [react()],
+  server: {
+    port: 3000,
+    proxy: {
+      '/api': {
+        target: 'http://localhost:8000',
+        changeOrigin: true,
+        rewrite: (path) => path.replace(/^\/api/, '')
+      }
+    }
+  }
+})