Upload folder using huggingface_hub

.env.example

@@ -0,0 +1 @@
+GROQ_API_KEY=your_groq_api_key_here

.gitignore

@@ -0,0 +1,7 @@
+.env
+__pycache__/
+*.pyc
+.pytest_cache/
+.venv/
+venv/
+*.log

Dockerfile

@@ -0,0 +1,11 @@
+FROM python:3.10
+
+WORKDIR /app
+
+COPY . /app
+
+RUN pip install --no-cache-dir -r requirements.txt
+
+EXPOSE 7860
+
+CMD ["uvicorn", "main:app", "--host", "0.0.0.0", "--port", "7860"]

README.md

@@ -1,12 +1,92 @@
+# PredictLab: Machine Learning Portfolio Web App
+
+![FastAPI](https://img.shields.io/badge/FastAPI-005571?style=for-the-badge&logo=fastapi)
+![Groq](https://img.shields.io/badge/Groq-Llama%203-f15a24?style=for-the-badge)
+![scikit-learn](https://img.shields.io/badge/scikit--learn-%23F7931E.svg?style=for-the-badge&logo=scikit-learn&logoColor=white)
+
+A premium, production-ready full-stack machine learning portfolio application built with FastAPI and customized with an elegant Dark Modern Medical/Tech UI. It showcases predictive models (Pima Diabetes, Stroke Risk, House Price) and automatically integrates a Llama 3-powered AI Assistant to contextualize predictions for users.
+
+---
+
+## 📸 Screenshots
+
+*(Add screenshots of your application here — e.g., the homepage grid and one of the prediction forms with the Chatbot open).*
+
+---
+
+## ✨ Features
+
+- **Three Integrated Machine Learning Models**: Built-in support for Diabetes (SVM), Stroke Risk (Classification), and House Price (Regression) prediction models.
+- **Graceful Fallbacks**: The application handles missing models fluidly, displaying visually pleasing error placeholders while keeping the rest of the application fully functional.
+- **Premium UI & UX**: Gorgeous dashboard styling using a combination of Tailwind CSS and custom, deeply customized animations. Includes robust micro-interactions and async fetch routines for seamless loading.
+- **Context-Aware Groq AI Assistant**: A globally persistent chatbot that understands what page you are on, the exact medical inputs provided, what the model predicted, and gently provides domain expertise based on Llama 3 logic via the Groq API.
+- **Fully Responsive**: Looks flawless on Desktop, Tablet, and Mobile.
+- **No Page-Reload Architecture**: Entirely JS-fetch driven forms.
+
+---
+
+## 🚀 Setup Instructions
+
+1. **Clone the repository:**
+   ```bash
+   git clone <repo>
+   cd ml-portfolio
+   ```
+
+2. **Install dependencies:**
+   It is recommended to run this within a clean Python Virtual Environment.
+   ```bash
+   pip install -r requirements.txt
+   ```
+
+3. **Configure Environment Variables:**
+   ```bash
+   cp .env.example .env
+   ```
+   Open `.env` and configure your API keys:
+   `GROQ_API_KEY=your_key_here`
+
+4. **Add Trained `.sav` Models:**
+   Place your pre-trained models within the `/models` directory using the following exact filenames:
+   - `diabetes_model.sav` & `diabetes_scaler.sav`
+   - `stroke_model.sav`
+   - `house_model.sav`
+   If these are omitted, the application will simply show "Model not loaded" for those respective predictors.
+
+5. **Start the Uvicorn Server:**
+   ```bash
+   uvicorn main:app --reload
+   ```
+
+6. **View the Application:**
+   Open [http://localhost:8000](http://localhost:8000) in your modern web browser.
+
 ---
-title: Predict Ai
-emoji: 🏢
-colorFrom: blue
-colorTo: yellow
-sdk: docker
-pinned: false
-license: mit
-short_description: 'PredictLab is a full-stack Machine Learning web application '
+
+## 🛠️ How to Add New Models
+
+1. **Create an HTML UI**: Duplicate an existing prediction page in `templates/` and link it in `base.html`. Make sure it submits required payload features.
+2. **Update loader config**: Edit `models/loader.py` to recognize your newly appended `.sav` file.
+3. **Register Route in `main.py`**: Add a new asynchronous API route under `/predict/yours` handling your specific inference transformation arrays.
+
 ---
 
-Check out the configuration reference at https://huggingface.co/docs/hub/spaces-config-reference
+## 📁 Folder Structure
+
+```text
+ml-portfolio/
+├── main.py                   # Main FastAPI App, Routes, and Groq Chat implementation.
+├── requirements.txt          # Python dependencies.
+├── README.md                 # Project instructions.
+├── .env                      # Secrets & API Keys.
+├── models/                   # Contains ML assets and custom scikit model loader block.
+│   └── loader.py             
+├── templates/                # Jinja2 Layout Files.
+│   ├── base.html             # The global layout, includes Navbar and universal AI Chat widget.
+│   ├── index.html            # Landing Dashboard.
+│   ├── diabetes.html         # Diabetes prediction form layout.
+│   ├── stroke.html           # Stroke prediction layout.
+│   └── house.html            # House price prediction interface.
+└── static/                   
+    └── style.css             # Vanilla CSS enhancements overriding standard Tailwind styling for a premium aesthetic.
+```

main.py

@@ -0,0 +1,186 @@
+from fastapi import FastAPI, Request
+from fastapi.responses import HTMLResponse, JSONResponse
+from fastapi.staticfiles import StaticFiles
+from fastapi.templating import Jinja2Templates
+from pydantic import BaseModel
+from typing import Optional, Any
+from groq import Groq
+import os
+from dotenv import load_dotenv
+import numpy as np
+import pandas as pd
+
+# Internal model loader
+from models.loader import load_models
+
+# Load environment vars
+load_dotenv()
+
+app = FastAPI(title="PredictLab ML Portfolio")
+try:
+    groq_client = Groq(api_key=os.getenv("GROQ_API_KEY"))
+except Exception as e:
+    print(f"Failed to initialize Groq client: {e}")
+    groq_client = None
+
+# Mount static and templates
+app.mount("/static", StaticFiles(directory="static"), name="static")
+templates = Jinja2Templates(directory="templates")
+
+# Load models safely
+models, scalers = load_models()
+
+# Route: Homepage
+@app.get("/", response_class=HTMLResponse)
+async def read_root(request: Request):
+    return templates.TemplateResponse("index.html", {"request": request})
+
+# Route: Diabetes Predictor
+@app.get("/diabetes", response_class=HTMLResponse)
+async def read_diabetes(request: Request):
+    return templates.TemplateResponse("diabetes.html", {"request": request})
+
+# Route: Stroke Predictor
+@app.get("/stroke", response_class=HTMLResponse)
+async def read_stroke(request: Request):
+    return templates.TemplateResponse("stroke.html", {"request": request})
+
+# Route: Heart Predictor
+@app.get("/heart", response_class=HTMLResponse)
+async def read_heart(request: Request):
+    return templates.TemplateResponse("heart.html", {"request": request})
+
+# Prediction Endpoints
+@app.post("/predict/diabetes")
+async def predict_diabetes(data: dict):
+    if not models.get("diabetes"):
+        return JSONResponse(status_code=500, content={"error": "Diabetes model not loaded yet. Coming soon!"})
+    try:
+        # Construct DataFrame with exactly the same column names the scaler/model expects
+        df = pd.DataFrame([{
+            "Pregnancies": float(data["pregnancies"]),
+            "Glucose": float(data["glucose"]),
+            "BloodPressure": float(data["blood_pressure"]),
+            "SkinThickness": float(data["skin_thickness"]),
+            "Insulin": float(data["insulin"]),
+            "BMI": float(data["bmi"]),
+            "DiabetesPedigreeFunction": float(data["dpf"]),
+            "Age": float(data["age"])
+        }])
+        
+        arr = df
+        if scalers.get("diabetes"):
+            arr = scalers["diabetes"].transform(arr)
+            
+        prediction = models["diabetes"].predict(arr)[0]
+        label = "Diabetic" if prediction == 1 else "Not Diabetic"
+        return {"prediction": int(prediction), "label": label, "confidence": None}
+    except Exception as e:
+        import traceback
+        traceback.print_exc()
+        return JSONResponse(status_code=400, content={"error": str(e)})
+
+@app.post("/predict/stroke")
+async def predict_stroke(data: dict):
+    if not models.get("stroke"):
+        return JSONResponse(status_code=500, content={"error": "Stroke risk model not loaded yet. Coming soon!"})
+    try:
+        df = pd.DataFrame([{
+            "gender": str(data["gender"]),
+            "age": float(data["age"]),
+            "hypertension": int(data["hypertension"]),
+            "heart_disease": int(data["heart_disease"]),
+            "ever_married": str(data["ever_married"]),
+            "work_type": str(data["work_type"]),
+            "Residence_type": str(data["residence_type"]),
+            "avg_glucose_level": float(data["avg_glucose_level"]),
+            "bmi": float(data["bmi"]),
+            "smoking_status": str(data["smoking_status"])
+        }])
+        
+        prediction = models["stroke"].predict(df)[0]
+        label = "High Stroke Risk" if prediction == 1 else "Low Stroke Risk"
+        return {"prediction": int(prediction), "label": label, "confidence": None}
+    except Exception as e:
+        import traceback
+        traceback.print_exc()
+        return JSONResponse(status_code=400, content={"error": str(e)})
+
+@app.post("/predict/heart")
+async def predict_heart(data: dict):
+    if not models.get("heart"):
+        return JSONResponse(status_code=500, content={"error": "Heart disease model not loaded yet. Coming soon!"})
+    try:
+        features = [
+            float(data["age"]),
+            int(data["sex"]),
+            int(data["cp"]),
+            float(data["trestbps"]),
+            float(data["chol"]),
+            int(data["fbs"]),
+            int(data["restecg"]),
+            float(data["thalach"]),
+            int(data["exang"]),
+            float(data["oldpeak"]),
+            int(data["ca"]),
+            int(data["thal"])
+        ]
+        
+        arr = np.array(features).reshape(1, -1)
+        if scalers.get("heart"):
+            arr = scalers["heart"].transform(arr)
+        prediction = models["heart"].predict(arr)[0]
+        label = "Disease Detected" if prediction == 1 else "No Disease Detected"
+        return {"prediction": int(prediction), "label": label}
+    except Exception as e:
+        import traceback
+        traceback.print_exc()
+        return JSONResponse(status_code=400, content={"error": str(e)})
+
+# Groq Context Data Setup
+class ChatContext(BaseModel):
+    current_page: str
+    inputs: Optional[dict] = {}
+    prediction: Optional[Any] = None
+
+class ChatPayload(BaseModel):
+    message: str
+    context: ChatContext
+
+# Route: Chatbot
+@app.post("/chat")
+async def chat(payload: ChatPayload):
+    if groq_client is None:
+        return JSONResponse(status_code=500, content={"error": "Groq client not configured or missing API key."})
+    
+    try:
+        system_prompt = f"""You are an intelligent assistant embedded in a machine learning portfolio app. You help users understand their prediction results.
+
+Current context:
+- Page: {payload.context.current_page}
+- User inputs: {payload.context.inputs}
+- Model prediction: {payload.context.prediction}
+
+Your responsibilities:
+1. Explain the prediction result in plain, simple language
+2. Answer questions about the medical condition or real estate topic
+3. Clarify what each input field means and how it affects the result
+4. Provide helpful, accurate domain information
+5. Always recommend consulting a licensed professional for medical/financial decisions
+6. Be warm, concise, and non-alarmist
+
+Keep all responses under 130 words unless the user asks for more detail.
+Never provide a definitive medical diagnosis. Always encourage professional consultation."""
+
+        response = groq_client.chat.completions.create(
+            model="llama-3.1-8b-instant",
+            messages=[
+                {"role": "system", "content": system_prompt},
+                {"role": "user", "content": payload.message}
+            ],
+            max_tokens=300,
+            temperature=0.7
+        )
+        return {"reply": response.choices[0].message.content}
+    except Exception as e:
+        return JSONResponse(status_code=500, content={"error": str(e)})

models/heart_model.pkl

@@ -0,0 +1,3 @@
+version https://git-lfs.github.com/spec/v1
+oid sha256:2500e3086a76226ca87e10e7da1479c76fa5e09e2a3a924a1817fcbf2926d095
+size 979

models/loader.py

@@ -0,0 +1,45 @@
+import pickle
+import joblib
+import os
+import logging
+
+BASE = os.path.dirname(__file__)
+
+def load_models():
+    models, scalers = {}, {}
+    files = {
+        "diabetes": ("diabetes_model.sav", "diabetes_scaler.sav"),
+        "stroke":   ("stroke_model.pkl",   None),
+        "heart":    ("heart_model.pkl",     None),
+    }
+    for name, (model_file, scaler_file) in files.items():
+        try:
+            filepath = os.path.join(BASE, model_file)
+            try:
+                models[name] = joblib.load(filepath)
+            except Exception:
+                with open(filepath, "rb") as f:
+                    models[name] = pickle.load(f)
+            logging.info(f"✅ Loaded {name} model")
+        except FileNotFoundError:
+            logging.warning(f"⚠️  {name} model not found — skipping")
+            models[name] = None
+        except Exception as e:
+            logging.error(f"❌ Error loading {name} model: {e}")
+            models[name] = None
+
+        if scaler_file:
+            try:
+                scalerpath = os.path.join(BASE, scaler_file)
+                try:
+                    scalers[name] = joblib.load(scalerpath)
+                except Exception:
+                    with open(scalerpath, "rb") as f:
+                        scalers[name] = pickle.load(f)
+            except FileNotFoundError:
+                scalers[name] = None
+            except Exception as e:
+                logging.error(f"❌ Error loading {name} scaler: {e}")
+                scalers[name] = None
+
+    return models, scalers

models/stroke_model.pkl

@@ -0,0 +1,3 @@
+version https://git-lfs.github.com/spec/v1
+oid sha256:025203c947fec195bf1769feffc2c6ecd891c80ced68bda799e35799491d042b
+size 273440

requirements.txt

@@ -0,0 +1,10 @@
+fastapi
+uvicorn
+scikit-learn
+pandas
+numpy
+joblib
+jinja2
+python-multipart
+groq
+python-dotenv

static/style.css

@@ -0,0 +1,447 @@
+/* Premium Dark Tech Theme */
+@import url('https://fonts.googleapis.com/css2?family=Syne:wght@400;600;700;800&family=DM+Sans:wght@400;500;700&family=JetBrains+Mono:wght@400;700&display=swap');
+
+:root {
+  --bg-dark: #0a0f1e;
+  --surface-dark: #111827;
+  --border-dark: #1f2937;
+  --primary-cyan: #06b6d4;
+  --success-emerald: #10b981;
+  --danger-rose: #f43f5e;
+  --text-primary: #f1f5f9;
+  --text-muted: #94a3b8;
+}
+
+body {
+  font-family: 'DM Sans', sans-serif;
+  background-color: var(--bg-dark);
+  background-image: 
+    radial-gradient(circle at 15% 50%, rgba(6, 182, 212, 0.08), transparent 35%),
+    radial-gradient(circle at 85% 30%, rgba(168, 85, 247, 0.08), transparent 35%),
+    radial-gradient(circle at 50% 80%, rgba(16, 185, 129, 0.05), transparent 40%);
+  background-attachment: fixed;
+  color: var(--text-primary);
+  margin: 0;
+  padding: 0;
+  -webkit-font-smoothing: antialiased;
+}
+
+h1, h2, h3, h4, h5, h6, .display-font {
+  font-family: 'Syne', sans-serif;
+}
+
+.mono-font {
+  font-family: 'JetBrains Mono', monospace;
+}
+
+/* Custom Gradients & Animations */
+.hero-gradient-text {
+  background: linear-gradient(to right, #ffffff, var(--primary-cyan));
+  -webkit-background-clip: text;
+  background-clip: text;
+  -webkit-text-fill-color: transparent;
+}
+
+.card-hover {
+  transition: transform 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275), box-shadow 0.4s ease, border-color 0.4s ease, background 0.4s ease;
+}
+
+.card-hover:hover {
+  transform: translateY(-8px) scale(1.02);
+  box-shadow: 0 20px 40px -10px rgba(6, 182, 212, 0.3), 0 0 20px rgba(168, 85, 247, 0.15) inset;
+  border-color: rgba(6, 182, 212, 0.6);
+  background: rgba(17, 24, 39, 0.85);
+}
+
+.glass-card {
+  background: rgba(17, 24, 39, 0.55);
+  backdrop-filter: blur(20px);
+  -webkit-backdrop-filter: blur(20px);
+  border: 1px solid rgba(255, 255, 255, 0.08);
+  box-shadow: 0 8px 32px 0 rgba(0, 0, 0, 0.3);
+  position: relative;
+  overflow: hidden;
+}
+
+.glass-card::before {
+  content: '';
+  position: absolute;
+  top: 0; left: 0; right: 0;
+  height: 2px;
+  background: linear-gradient(90deg, transparent, rgba(6, 182, 212, 0.3), transparent);
+  opacity: 0;
+  transition: opacity 0.4s;
+}
+
+.glass-card:hover::before {
+  opacity: 1;
+}
+
+/* Inputs */
+.floating-input {
+  background-color: var(--surface-dark);
+  border: 1px solid var(--border-dark);
+  color: var(--text-primary);
+  transition: all 0.3s ease;
+}
+
+.floating-input:focus {
+  border-color: var(--primary-cyan);
+  box-shadow: 0 0 0 2px rgba(6, 182, 212, 0.2);
+  outline: none;
+}
+
+/* Buttons */
+.btn-primary {
+  background: linear-gradient(135deg, #06b6d4 0%, #0891b2 100%);
+  color: white;
+  transition: all 0.3s ease;
+  position: relative;
+  overflow: hidden;
+}
+
+.btn-primary:hover {
+  box-shadow: 0 0 15px rgba(6, 182, 212, 0.5);
+  transform: translateY(-1px);
+}
+
+/* Base HTML & Chatbot */
+.backdrop-blur-nav {
+  backdrop-filter: blur(12px);
+  background-color: rgba(10, 15, 30, 0.8);
+  border-bottom: 1px solid var(--border-dark);
+}
+
+/* Chatbot Styles */
+#chat-widget {
+  position: fixed;
+  bottom: 2rem;
+  right: 2rem;
+  z-index: 50;
+  font-family: 'DM Sans', sans-serif;
+  perspective: 1000px;
+}
+
+#chat-toggle {
+  width: 65px;
+  height: 65px;
+  border-radius: 50%;
+  background: linear-gradient(135deg, var(--primary-cyan), #0056b3, #0891b2, var(--primary-cyan));
+  background-size: 300% 300%;
+  color: white;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  box-shadow: 0 0 25px rgba(6, 182, 212, 0.6), 0 0 50px rgba(6, 182, 212, 0.2);
+  cursor: pointer;
+  transition: all 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);
+  border: 2px solid rgba(255, 255, 255, 0.2);
+  animation: gradientShift 5s ease infinite, pulseGlow 2s infinite;
+}
+
+@keyframes gradientShift { 0% { background-position: 0% 50% } 50% { background-position: 100% 50% } 100% { background-position: 0% 50% } }
+@keyframes pulseGlow { 0% { box-shadow: 0 0 15px rgba(6, 182, 212, 0.4); } 50% { box-shadow: 0 0 35px rgba(6, 182, 212, 0.8), 0 0 55px rgba(6, 182, 212, 0.4); } 100% { box-shadow: 0 0 15px rgba(6, 182, 212, 0.4); } }
+
+#chat-toggle:hover {
+  transform: scale(1.1) rotate(5deg);
+}
+
+#chat-panel {
+  position: absolute;
+  bottom: 90px;
+  right: 0;
+  width: calc(100vw - 4rem);
+  max-width: 400px;
+  height: 70vh;
+  max-height: 580px;
+  background: rgba(17, 24, 39, 0.65);
+  backdrop-filter: blur(20px);
+  -webkit-backdrop-filter: blur(20px);
+  border: 1px solid rgba(6, 182, 212, 0.3);
+  border-radius: 1.5rem;
+  box-shadow: 0 30px 60px rgba(0, 0, 0, 0.8), 0 0 20px rgba(6, 182, 212, 0.1) inset;
+  display: flex;
+  flex-direction: column;
+  overflow: hidden;
+  transition: opacity 0.4s cubic-bezier(0.19, 1, 0.22, 1), transform 0.4s cubic-bezier(0.19, 1, 0.22, 1);
+  opacity: 0;
+  transform: translateY(40px) scale(0.9) rotateX(-5deg);
+  pointer-events: none;
+  transform-origin: bottom right;
+}
+
+@media (max-width: 640px) {
+  #chat-widget {
+    bottom: 1rem;
+    right: 1rem;
+  }
+  #chat-panel {
+    bottom: 80px;
+    width: calc(100vw - 2rem);
+    height: 75vh;
+  }
+  #chat-toggle {
+    width: 55px;
+    height: 55px;
+  }
+}
+
+#chat-panel.open {
+  opacity: 1;
+  transform: translateY(0) scale(1) rotateX(0deg);
+  pointer-events: auto;
+}
+
+#chat-header {
+  padding: 1.25rem;
+  border-bottom: 1px solid rgba(6, 182, 212, 0.2);
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  background: linear-gradient(90deg, rgba(6, 182, 212, 0.15) 0%, rgba(17, 24, 39, 0) 100%);
+  position: relative;
+}
+
+#chat-header::before {
+  content: '';
+  position: absolute;
+  top: 0;
+  left: 0;
+  width: 100%;
+  height: 2px;
+  background: linear-gradient(90deg, transparent, var(--primary-cyan), transparent);
+}
+
+#chat-messages {
+  flex: 1;
+  padding: 1.5rem;
+  overflow-y: auto;
+  display: flex;
+  flex-direction: column;
+  gap: 1.25rem;
+  scrollbar-width: thin;
+  scrollbar-color: rgba(6, 182, 212, 0.5) transparent;
+}
+
+#chat-messages::-webkit-scrollbar {
+  width: 6px;
+}
+#chat-messages::-webkit-scrollbar-track {
+  background: transparent;
+}
+#chat-messages::-webkit-scrollbar-thumb {
+  background-color: rgba(6, 182, 212, 0.5);
+  border-radius: 20px;
+}
+
+.chat-bubble {
+  max-width: 85%;
+  padding: 0.9rem 1.2rem;
+  border-radius: 1.2rem;
+  font-size: 0.95rem;
+  line-height: 1.5;
+  word-wrap: break-word;
+  animation: messageSlideIn 0.3s cubic-bezier(0.2, 0.8, 0.2, 1) forwards;
+  opacity: 0;
+  transform: translateY(10px);
+}
+
+@keyframes messageSlideIn {
+  to { opacity: 1; transform: translateY(0); }
+}
+
+.chat-user {
+  align-self: flex-end;
+  background: linear-gradient(135deg, var(--primary-cyan), #0056b3);
+  color: #fff;
+  border-bottom-right-radius: 0.25rem;
+  box-shadow: 0 5px 15px rgba(6, 182, 212, 0.3);
+}
+
+.chat-bot {
+  align-self: flex-start;
+  background: rgba(255, 255, 255, 0.05);
+  color: var(--text-primary);
+  border-bottom-left-radius: 0.25rem;
+  border: 1px solid rgba(255, 255, 255, 0.1);
+  backdrop-filter: blur(10px);
+}
+
+#chat-input-area {
+  padding: 1.25rem;
+  border-top: 1px solid rgba(6, 182, 212, 0.2);
+  display: flex;
+  gap: 0.75rem;
+  background: rgba(0, 0, 0, 0.2);
+}
+
+#chat-input {
+  flex: 1;
+  background-color: rgba(0, 0, 0, 0.4);
+  border: 1px solid rgba(255, 255, 255, 0.1);
+  color: white;
+  padding: 0.75rem 1.25rem;
+  border-radius: 2rem;
+  outline: none;
+  transition: all 0.3s ease;
+  font-size: 0.95rem;
+}
+
+#chat-input:focus {
+  border-color: var(--primary-cyan);
+  background-color: rgba(6, 182, 212, 0.05);
+  box-shadow: 0 0 0 2px rgba(6, 182, 212, 0.2);
+}
+
+#chat-send {
+  background: linear-gradient(135deg, var(--primary-cyan), #0891b2);
+  color: white;
+  border: none;
+  border-radius: 50%;
+  width: 46px;
+  height: 46px;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  cursor: pointer;
+  transition: all 0.2s;
+  box-shadow: 0 4px 10px rgba(6, 182, 212, 0.4);
+}
+
+#chat-send:active {
+  transform: scale(0.95);
+}
+
+/* Online indicator for bot */
+.online-dot {
+  width: 8px;
+  height: 8px;
+  background-color: var(--success-emerald);
+  border-radius: 50%;
+  box-shadow: 0 0 8px var(--success-emerald);
+  animation: blink 2s infinite;
+}
+
+@keyframes blink { 0%, 100% { opacity: 1; } 50% { opacity: 0.5; } }
+
+/* Typing indicator */
+.typing-indicator {
+  display: none;
+  align-self: flex-start;
+  background-color: #1f2937;
+  padding: 0.5rem 1rem;
+  border-radius: 1rem;
+  border-bottom-left-radius: 0.25rem;
+}
+
+.typing-indicator span {
+  width: 6px;
+  height: 6px;
+  background-color: var(--text-muted);
+  border-radius: 50%;
+  display: inline-block;
+  margin: 0 2px;
+  animation: typing 1.4s infinite cubic-bezier(0.2, 0.8, 0.2, 1);
+}
+.typing-indicator span:nth-child(2) { animation-delay: 0.2s; }
+.typing-indicator span:nth-child(3) { animation-delay: 0.4s; }
+
+@keyframes typing {
+  0%, 100% { transform: scale(1); opacity: 0.5; }
+  50% { transform: scale(1.5); opacity: 1; }
+}
+
+/* Results */
+.result-card {
+  animation: slideIn 0.5s ease forwards;
+}
+
+@keyframes slideIn {
+  from { opacity: 0; transform: translateY(20px); }
+  to { opacity: 1; transform: translateY(0); }
+}
+
+/* Spinner */
+.loader-spinner {
+  border: 3px solid rgba(255,255,255,0.1);
+  border-top-color: white;
+  border-radius: 50%;
+  width: 20px;
+  height: 20px;
+  animation: spin 1s linear infinite;
+  display: none;
+}
+
+@keyframes spin { 0% { transform: rotate(0deg); } 100% { transform: rotate(360deg); } }
+
+/* New Hero Title Styles */
+.hero-gradient-text-new {
+  background: linear-gradient(90deg, #06b6d4, #a855f7, #ffffff, #06b6d4);
+  background-size: 300% 100%;
+  -webkit-background-clip: text;
+  background-clip: text;
+  -webkit-text-fill-color: transparent;
+  animation: gradientSweep 6s linear infinite;
+  text-shadow: 0 0 20px rgba(6, 182, 212, 0.4), 0 0 40px rgba(6, 182, 212, 0.2);
+}
+
+@keyframes gradientSweep {
+  0% { background-position: 0% 50%; }
+  100% { background-position: 100% 50%; }
+}
+
+/* Typewriter Effect Container */
+.typewriter-text {
+  overflow: hidden;
+  white-space: nowrap;
+  display: inline-block;
+  border-right: 3px solid rgba(255, 255, 255, 0.8);
+  animation: typingEffect 3s steps(40, end), blinkCursor 0.75s step-end infinite;
+}
+
+@keyframes typingEffect {
+  from { width: 0; }
+  to { width: 100%; }
+}
+
+@keyframes blinkCursor {
+  from, to { border-color: transparent; }
+  50% { border-color: rgba(255, 255, 255, 0.8); }
+}
+
+@media (max-width: 1024px) {
+  .typewriter-text {
+    white-space: normal;
+    animation: none;
+    border-right: none;
+    width: 100%;
+  }
+}
+
+/* Line 2 Animation */
+.delayed-fade-in {
+  opacity: 0;
+  transform: translateY(10px);
+  animation: fadeUpIn 1s cubic-bezier(0.2, 0.8, 0.2, 1) forwards;
+  animation-delay: 3s; /* Wait for typewriter to finish */
+}
+
+@keyframes fadeUpIn {
+  to { opacity: 1; transform: translateY(0); }
+}
+
+.highlight-cyan-glow {
+  position: relative;
+  display: inline-block;
+}
+.highlight-cyan-glow::after {
+  content: '';
+  position: absolute;
+  bottom: 0px;
+  left: 0;
+  width: 100%;
+  height: 2px;
+  background-color: var(--primary-cyan);
+  box-shadow: 0 0 8px var(--primary-cyan), 0 0 12px var(--primary-cyan);
+  border-radius: 2px;
+}

templates/base.html

@@ -0,0 +1,230 @@
+<!doctype html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>{% block title %}PredictLab{% endblock %}</title>
+    <!-- Tailwind CSS CDN -->
+    <script src="https://cdn.tailwindcss.com"></script>
+    <!-- Custom CSS -->
+    <link rel="stylesheet" href="/static/style.css" />
+    <!-- Font Awesome -->
+    <link
+      rel="stylesheet"
+      href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css"
+    />
+  </head>
+  <body data-page="{% block page_name %}home{% endblock %}">
+    <!-- Sticky Navbar -->
+    <nav class="fixed top-0 w-full z-40 backdrop-blur-nav">
+      <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
+        <div class="flex items-center justify-between h-16">
+          <div class="flex-shrink-0">
+            <a
+              href="/"
+              class="text-2xl font-bold display-font text-white flex items-center gap-2"
+            >
+              <i class="fa-solid fa-flask text-cyan-400"></i> PredictLab
+            </a>
+          </div>
+          <div class="hidden md:block">
+            <div class="ml-10 flex items-baseline space-x-4">
+              <a
+                href="/"
+                class="text-gray-300 hover:text-white px-3 py-2 rounded-md text-sm font-medium transition-colors"
+                >Home</a
+              >
+              <a
+                href="/diabetes"
+                class="text-gray-300 hover:text-white px-3 py-2 rounded-md text-sm font-medium transition-colors"
+                >Diabetes</a
+              >
+              <a
+                href="/stroke"
+                class="text-gray-300 hover:text-white px-3 py-2 rounded-md text-sm font-medium transition-colors"
+                >Stroke</a
+              >
+              <a
+                href="/heart"
+                class="text-gray-300 hover:text-white px-3 py-2 rounded-md text-sm font-medium transition-colors"
+                >Heart Disease</a
+              >
+            </div>
+          </div>
+        </div>
+      </div>
+    </nav>
+
+    <!-- Main Content -->
+    <main class="pt-24 pb-12 min-h-screen flex flex-col items-center">
+      {% block content %}{% endblock %}
+    </main>
+
+    <!-- Footer -->
+    <footer
+      class="border-t border-gray-800 py-8 text-center text-gray-500 text-sm mt-auto w-full"
+    >
+      Built with FastAPI + Groq Llama 3 + scikit-learn
+    </footer>
+
+    <!-- Chatbot Widget -->
+    <div id="chat-widget" class="z-50">
+      <!-- Toggle Button -->
+      <button
+        id="chat-toggle"
+        class="fixed bottom-4 right-4 sm:bottom-6 sm:right-6 w-16 h-16 rounded-full bg-gradient-to-br from-cyan-400 to-blue-600 flex items-center justify-center text-white shadow-lg transition-transform hover:scale-110"
+      >
+        <i class="fa-solid fa-robot text-2xl"></i>
+      </button>
+
+      <!-- Chat Panel -->
+      <div
+        id="chat-panel"
+        class="fixed bottom-20 right-4 sm:bottom-24 sm:right-6 w-[90vw] max-w-md h-[70vh] sm:h-[80vh] bg-[rgba(17,24,39,0.65)] backdrop-blur-lg rounded-xl shadow-2xl flex flex-col opacity-0 pointer-events-none transition-all transform translate-y-10 sm:translate-y-0"
+      >
+        <div
+          id="chat-header"
+          class="flex justify-between items-center p-4 border-b border-cyan-500/20 bg-gradient-to-r from-cyan-500/20 to-transparent rounded-t-xl"
+        >
+          <div
+            class="font-bold display-font text-white flex items-center gap-3"
+          >
+            <div class="relative">
+              <i class="fa-solid fa-robot text-cyan-400 text-xl"></i>
+              <div class="absolute -bottom-1 -right-1 online-dot"></div>
+            </div>
+            <span>Llama 3 AI Assistant</span>
+          </div>
+          <button
+            id="close-chat"
+            class="text-gray-400 hover:text-white transition-colors"
+          >
+            <i class="fa-solid fa-xmark"></i>
+          </button>
+        </div>
+
+        <div
+          id="chat-messages"
+          class="flex-1 overflow-y-auto p-3 flex flex-col gap-2"
+        >
+          <div class="chat-bubble chat-bot">
+            Hello! I'm here to help you understand your machine learning
+            predictions.
+          </div>
+          <div class="typing-indicator" id="typing-indicator">
+            <span></span><span></span><span></span>
+          </div>
+        </div>
+
+        <div
+          id="chat-input-area"
+          class="flex gap-2 p-3 border-t border-cyan-500/20"
+        >
+          <input
+            type="text"
+            id="chat-input"
+            placeholder="Ask a question..."
+            autocomplete="off"
+            class="flex-1 rounded-full p-2 bg-[rgba(0,0,0,0.4)] text-white outline-none border border-gray-700 focus:border-cyan-400 focus:ring-1 focus:ring-cyan-400 transition-all"
+          />
+          <button
+            id="chat-send"
+            class="w-12 h-12 rounded-full bg-gradient-to-br from-cyan-400 to-blue-600 flex items-center justify-center text-white shadow hover:scale-95 transition-transform"
+          >
+            <i class="fa-solid fa-paper-plane"></i>
+          </button>
+        </div>
+      </div>
+    </div>
+
+    <!-- Chatbot Logic -->
+    <script>
+      window.chatContext = {
+        current_page: document.body.dataset.page || "home",
+        inputs: {},
+        prediction: null,
+      };
+
+      const chatToggle = document.getElementById("chat-toggle");
+      const chatPanel = document.getElementById("chat-panel");
+      const closeChat = document.getElementById("close-chat");
+      const chatMessages = document.getElementById("chat-messages");
+      const chatInput = document.getElementById("chat-input");
+      const chatSend = document.getElementById("chat-send");
+      const typingIndicator = document.getElementById("typing-indicator");
+
+      function toggleChat() {
+        chatPanel.classList.toggle("open");
+        if (chatPanel.classList.contains("open")) chatInput.focus();
+      }
+
+      chatToggle.addEventListener("click", toggleChat);
+      closeChat.addEventListener("click", () =>
+        chatPanel.classList.remove("open"),
+      );
+
+      function appendMessage(sender, text) {
+        const div = document.createElement("div");
+        div.className = `chat-bubble ${sender === "user" ? "chat-user" : "chat-bot"}`;
+        div.textContent = text;
+        chatMessages.insertBefore(div, typingIndicator);
+        chatMessages.scrollTop = chatMessages.scrollHeight;
+      }
+
+      function showTypingIndicator() {
+        typingIndicator.style.display = "flex";
+        chatMessages.scrollTop = chatMessages.scrollHeight;
+      }
+      function hideTypingIndicator() {
+        typingIndicator.style.display = "none";
+      }
+
+      async function sendChatMessage(userMessage) {
+        if (!userMessage.trim()) return;
+        appendMessage("user", userMessage);
+        chatInput.value = "";
+        showTypingIndicator();
+        try {
+          const res = await fetch("/chat", {
+            method: "POST",
+            headers: { "Content-Type": "application/json" },
+            body: JSON.stringify({
+              message: userMessage,
+              context: window.chatContext,
+            }),
+          });
+          if (res.ok) {
+            const data = await res.json();
+            hideTypingIndicator();
+            appendMessage("bot", data.reply);
+          } else {
+            hideTypingIndicator();
+            appendMessage(
+              "bot",
+              "Sorry, I had trouble connecting to the network.",
+            );
+          }
+        } catch (err) {
+          hideTypingIndicator();
+          appendMessage("bot", "Error connecting to AI service.");
+        }
+      }
+
+      chatSend.addEventListener("click", () =>
+        sendChatMessage(chatInput.value),
+      );
+      chatInput.addEventListener("keypress", (e) => {
+        if (e.key === "Enter") sendChatMessage(chatInput.value);
+      });
+
+      window.onPredictionComplete = function (page, inputs, prediction) {
+        window.chatContext = { current_page: page, inputs, prediction };
+        sendChatMessage(
+          "I just got a prediction result. Can you explain what this means?",
+        );
+      };
+    </script>
+
+    {% block scripts %}{% endblock %}
+  </body>
+</html>

templates/diabetes.html

@@ -0,0 +1,191 @@
+{% extends "base.html" %} {% block title %}Diabetes Predictor - PredictLab{%
+endblock %} {% block page_name %}diabetes{% endblock %} {% block content %}
+<div class="w-full max-w-4xl mx-auto px-4 sm:px-6">
+  <div class="mb-10">
+    <h1 class="text-4xl font-bold mb-4 flex items-center gap-3">
+      <div
+        class="w-12 h-12 rounded-lg bg-cyan-900/30 text-cyan-400 flex items-center justify-center text-2xl"
+      >
+        <i class="fa-solid fa-stethoscope"></i>
+      </div>
+      Pima Diabetes Predictor
+    </h1>
+    <p class="text-gray-400">
+      Predicts the likelihood of diabetes in females of Pima Indian heritage
+      using a Support Vector Machine (Linear Kernel).
+    </p>
+  </div>
+
+  <!-- Form & Result Grid -->
+  <div class="grid grid-cols-1 lg:grid-cols-5 gap-8">
+    <!-- Form Section -->
+    <div
+      class="lg:col-span-3 bg-[#111827] border border-[#1f2937] rounded-2xl p-6 sm:p-8 relative"
+    >
+      <form id="prediction-form" class="space-y-6">
+        <div class="grid grid-cols-1 sm:grid-cols-2 gap-6">
+          {% for field in [ {'label':'Pregnancies
+          (0-17)','id':'pregnancies','min':0,'max':25,'step':1,'placeholder':'2'},
+          {'label':'Glucose
+          (0-200)','id':'glucose','min':0,'max':300,'placeholder':'120'},
+          {'label':'Blood Pressure
+          (0-122)','id':'blood_pressure','min':0,'max':200,'placeholder':'70'},
+          {'label':'Skin Thickness
+          (0-99)','id':'skin_thickness','min':0,'max':150,'placeholder':'20'},
+          {'label':'Insulin
+          (0-846)','id':'insulin','min':0,'max':1000,'placeholder':'80'},
+          {'label':'BMI
+          (0.0-67.1)','id':'bmi','min':0,'max':100,'step':0.1,'placeholder':'32.0'},
+          {'label':'Diabetes Pedigree
+          (0.0-2.5)','id':'dpf','min':0,'max':5,'step':0.01,'placeholder':'0.5'},
+          {'label':'Age
+          (21-81)','id':'age','min':1,'max':120,'placeholder':'45'} ] %}
+          <div>
+            <label class="block text-sm font-medium text-gray-400 mb-2"
+              >{{ field.label }}</label
+            >
+            <input
+              type="number"
+              id="{{ field.id }}"
+              required
+              min="{{ field.min }}"
+              max="{{ field.max }}"
+              {%
+              if
+              field.step
+              %}
+              step="{{ field.step }}"
+              {%
+              endif
+              %}
+              class="w-full floating-input rounded-xl p-3"
+              placeholder="{{ field.placeholder }}"
+            />
+          </div>
+          {% endfor %}
+        </div>
+
+        <div class="pt-4">
+          <button
+            type="submit"
+            class="w-full btn-primary py-4 rounded-xl font-bold flex items-center justify-center gap-3 text-lg"
+          >
+            <span id="btn-text">Run Prediction</span>
+            <div id="btn-spinner" class="loader-spinner"></div>
+          </button>
+        </div>
+      </form>
+    </div>
+
+    <!-- Result Section -->
+    <div class="lg:col-span-2 flex flex-col gap-4">
+      <div
+        id="result-container"
+        class="hidden flex-1 flex flex-col items-center justify-center bg-[#111827] border border-[#1f2937] rounded-2xl p-8 result-card text-center"
+      >
+        <!-- JS Injected -->
+      </div>
+
+      <div
+        id="placeholder-container"
+        class="flex-1 flex flex-col items-center justify-center bg-[#111827]/50 border border-dashed border-[#1f2937] rounded-2xl p-8 text-center"
+      >
+        <i class="fa-solid fa-chart-bar text-4xl text-gray-600 mb-4"></i>
+        <h3 class="text-xl font-bold text-gray-500 mb-2">Awaiting Data</h3>
+        <p class="text-sm text-gray-600">
+          Fill out the form to generate a prediction.
+        </p>
+      </div>
+    </div>
+  </div>
+</div>
+{% endblock %} {% block scripts %}
+<script>
+  document
+    .getElementById("prediction-form")
+    .addEventListener("submit", async (e) => {
+      e.preventDefault();
+
+      const btnText = document.getElementById("btn-text");
+      const btnSpinner = document.getElementById("btn-spinner");
+      const submitBtn = e.target.querySelector('button[type="submit"]');
+      const resContainer = document.getElementById("result-container");
+      const placeholder = document.getElementById("placeholder-container");
+
+      // Collect inputs dynamically
+      const inputs = [
+        "pregnancies",
+        "glucose",
+        "blood_pressure",
+        "skin_thickness",
+        "insulin",
+        "bmi",
+        "dpf",
+        "age",
+      ];
+      const data = {};
+      inputs.forEach((id) => (data[id] = document.getElementById(id).value));
+
+      // UI Loading
+      btnText.textContent = "Processing...";
+      btnSpinner.style.display = "block";
+      submitBtn.disabled = true;
+      resContainer.classList.add("hidden");
+      placeholder.classList.remove("hidden");
+
+      try {
+        const response = await fetch("/predict/diabetes", {
+          method: "POST",
+          headers: { "Content-Type": "application/json" },
+          body: JSON.stringify(data),
+        });
+        const result = await response.json();
+
+        placeholder.classList.add("hidden");
+        resContainer.classList.remove("hidden");
+
+        if (response.ok) {
+          const isRisk = result.label === "Diabetic";
+          const colorClass = isRisk ? "text-rose-500" : "text-emerald-500";
+          const bgClass = isRisk ? "bg-rose-500/10" : "bg-emerald-500/10";
+          const borderClass = isRisk
+            ? "border-rose-500/30"
+            : "border-emerald-500/30";
+          const icon = isRisk ? "fa-triangle-exclamation" : "fa-shield-heart";
+
+          resContainer.className = `flex-1 flex flex-col items-center justify-center border-2 rounded-2xl p-8 result-card text-center ${bgClass} ${borderClass}`;
+          resContainer.innerHTML = `
+                <div class="w-20 h-20 rounded-full flex items-center justify-center mb-6 bg-[#111827] border ${borderClass}">
+                    <i class="fa-solid ${icon} text-4xl ${colorClass}"></i>
+                </div>
+                <div class="text-sm font-bold text-gray-400 uppercase tracking-widest mb-2">Prediction Result</div>
+                <h2 class="text-3xl font-extrabold ${colorClass} mb-4">${result.label}</h2>
+                <p class="text-sm text-gray-400">Our AI assistant will explain what this indicates.</p>
+            `;
+
+          if (window.onPredictionComplete) {
+            window.onPredictionComplete("diabetes", data, result.label);
+          }
+        } else {
+          resContainer.className =
+            "flex-1 flex flex-col items-center justify-center bg-gray-900 border-2 border-gray-700 rounded-2xl p-8 result-card text-center";
+          resContainer.innerHTML = `
+                <div class="text-gray-400 mb-4"><i class="fa-solid fa-circle-exclamation text-4xl"></i></div>
+                <h2 class="text-xl font-bold text-white mb-2">Prediction Unavailable</h2>
+                <p class="text-gray-400 text-sm">${result.error || "An error occurred."}</p>
+            `;
+        }
+      } catch (error) {
+        placeholder.classList.add("hidden");
+        resContainer.classList.remove("hidden");
+        resContainer.className =
+          "flex-1 flex flex-col items-center justify-center bg-rose-900/10 border-2 border-rose-900/30 rounded-2xl p-8 result-card text-center";
+        resContainer.innerHTML = `<h2 class="text-xl font-bold text-rose-500 mb-2">Network Error</h2><p class="text-gray-400 text-sm">Could not connect to the server.</p>`;
+      } finally {
+        btnText.textContent = "Run Prediction";
+        btnSpinner.style.display = "none";
+        submitBtn.disabled = false;
+      }
+    });
+</script>
+{% endblock %}

templates/heart.html

@@ -0,0 +1,209 @@
+{% extends "base.html" %} {% block title %}Heart Disease Predictor -
+PredictLab{% endblock %} {% block page_name %}heart{% endblock %} {% block
+content %}
+<div class="w-full max-w-5xl mx-auto px-4 sm:px-6">
+  <div class="mb-10 text-center">
+    <h1 class="text-4xl font-bold mb-4 flex items-center justify-center gap-3">
+      <div
+        class="w-12 h-12 rounded-lg bg-pink-900/30 text-pink-500 flex items-center justify-center text-2xl"
+      >
+        <i class="fa-solid fa-heart-pulse"></i>
+      </div>
+      Heart Disease Predictor
+    </h1>
+    <p class="text-gray-400 max-w-2xl mx-auto">
+      Calculates the likelihood of heart disease using a logistic regression
+      model trained on comprehensive biometrics.
+    </p>
+  </div>
+
+  <div
+    class="bg-[#111827] border border-[#1f2937] rounded-2xl p-6 sm:p-10 mb-8 relative shadow-2xl"
+  >
+    <form id="prediction-form" class="space-y-6">
+      <div class="grid grid-cols-1 sm:grid-cols-2 md:grid-cols-3 gap-6">
+        {% for field in [
+        {'label':'Age','id':'age','type':'number','min':1,'max':120,'step':1,'placeholder':'52'},
+        {'label':'Sex','id':'sex','type':'select','options':[{'label':'Male','value':'1'},{'label':'Female','value':'0'}]},
+        {'label':'Chest Pain Type
+        (0-3)','id':'cp','type':'select','options':[{'label':'0: Typical
+        Angina','value':'0'},{'label':'1: Atypical
+        Angina','value':'1'},{'label':'2: Non-anginal
+        pain','value':'2'},{'label':'3: Asymptomatic','value':'3'}]},
+        {'label':'Resting Blood
+        Pressure','id':'trestbps','type':'number','min':50,'max':250,'placeholder':'125'},
+        {'label':'Cholesterol
+        (mg/dl)','id':'chol','type':'number','min':100,'max':600,'placeholder':'212'},
+        {'label':'Fasting Blood Sugar >
+        120','id':'fbs','type':'select','options':[{'label':'False','value':'0'},{'label':'True','value':'1'}]},
+        {'label':'Resting ECG
+        (0-2)','id':'restecg','type':'select','options':[{'label':'0:
+        Normal','value':'0'},{'label':'1: ST-T wave
+        alt','value':'1'},{'label':'2: LV Hypertrophy','value':'2'}]},
+        {'label':'Maximum Heart
+        Rate','id':'thalach','type':'number','min':50,'max':250,'placeholder':'168'},
+        {'label':'Exercise Induced
+        Angina','id':'exang','type':'select','options':[{'label':'No','value':'0'},{'label':'Yes','value':'1'}]},
+        {'label':'ST Depression
+        (Oldpeak)','id':'oldpeak','type':'number','min':0,'max':10,'step':0.1,'placeholder':'1.0'},
+        {'label':'Major Vessels
+        (0-4)','id':'ca','type':'number','min':0,'max':4,'step':1,'placeholder':'2'},
+        {'label':'Thalassemia
+        (0-3)','id':'thal','type':'select','options':[{'label':'1:
+        Normal','value':'1'},{'label':'2: Fixed
+        defect','value':'2'},{'label':'3: Reversable
+        defect','value':'3'},{'label':'0: Other','value':'0'}]} ] %}
+        <div>
+          <label class="block text-sm font-medium text-gray-400 mb-2"
+            >{{ field.label }}</label
+          >
+          {% if field.type == 'number' %}
+          <input
+            type="number"
+            id="{{ field.id }}"
+            required
+            min="{{ field.min | default('') }}"
+            max="{{ field.max | default('') }}"
+            {%
+            if
+            field.step
+            %}
+            step="{{ field.step }}"
+            {%
+            endif
+            %}
+            class="w-full floating-input rounded-xl p-3"
+            placeholder="{{ field.placeholder | default('') }}"
+          />
+          {% elif field.type == 'select' %}
+          <select
+            id="{{ field.id }}"
+            required
+            class="w-full floating-input rounded-xl p-3 appearance-none"
+          >
+            {% for option in field.options %}
+            <option value="{{ option.value }}">{{ option.label }}</option>
+            {% endfor %}
+          </select>
+          {% endif %}
+        </div>
+        {% endfor %}
+      </div>
+
+      <div class="pt-8">
+        <button
+          type="submit"
+          class="w-full md:w-auto md:px-16 btn-primary py-4 rounded-xl font-bold flex items-center justify-center gap-3 text-lg mx-auto"
+        >
+          <span id="btn-text">Detect Anomalies</span>
+          <div id="btn-spinner" class="loader-spinner"></div>
+        </button>
+      </div>
+    </form>
+  </div>
+
+  <!-- Result -->
+  <div id="result-container" class="hidden flex flex-col gap-4">
+    <!-- Injected via JS -->
+  </div>
+</div>
+{% endblock %} {% block scripts %}
+<script>
+  document
+    .getElementById("prediction-form")
+    .addEventListener("submit", async (e) => {
+      e.preventDefault();
+
+      const btnText = document.getElementById("btn-text");
+      const btnSpinner = document.getElementById("btn-spinner");
+      const submitBtn = e.target.querySelector('button[type="submit"]');
+      const resContainer = document.getElementById("result-container");
+
+      // Collect all inputs dynamically
+      const inputs = [
+        "age",
+        "sex",
+        "cp",
+        "trestbps",
+        "chol",
+        "fbs",
+        "restecg",
+        "thalach",
+        "exang",
+        "oldpeak",
+        "ca",
+        "thal",
+      ];
+      const data = {};
+      inputs.forEach((id) => (data[id] = document.getElementById(id).value));
+
+      // UI Loading
+      btnText.textContent = "Processing...";
+      btnSpinner.style.display = "block";
+      submitBtn.disabled = true;
+      resContainer.classList.add("hidden");
+
+      try {
+        const response = await fetch("/predict/heart", {
+          method: "POST",
+          headers: { "Content-Type": "application/json" },
+          body: JSON.stringify(data),
+        });
+        const result = await response.json();
+
+        resContainer.classList.remove("hidden");
+
+        if (response.ok) {
+          const isRisk = result.prediction === 1;
+          const colorClass = isRisk ? "text-pink-500" : "text-emerald-500";
+          const bgClass = isRisk ? "bg-pink-500/10" : "bg-emerald-500/10";
+          const borderClass = isRisk
+            ? "border-pink-500/30"
+            : "border-emerald-500/30";
+          const icon = isRisk ? "fa-heart-crack" : "fa-heart-circle-check";
+
+          resContainer.innerHTML = `
+                <div class="w-full rounded-2xl p-8 result-card border-2 flex items-center justify-between ${bgClass} ${borderClass} shadow-xl backdrop-blur-sm">
+                    <div class="flex items-center gap-6">
+                        <div class="w-16 h-16 rounded-full flex items-center justify-center bg-[#0a0f1e] border ${borderClass}">
+                            <i class="fa-solid ${icon} text-3xl ${colorClass}"></i>
+                        </div>
+                        <div>
+                            <div class="text-sm font-bold text-gray-400 uppercase tracking-widest mb-1">Diagnostic Complete</div>
+                            <h2 class="text-3xl font-extrabold ${colorClass}">${result.label}</h2>
+                        </div>
+                    </div>
+                    <div class="text-right hidden sm:block">
+                        <p class="text-sm text-gray-400 max-w-xs">Analysis generated by Logistic Regression parameters. Open Chatbot for breakdown.</p>
+                    </div>
+                </div>
+            `;
+
+          if (window.onPredictionComplete) {
+            window.onPredictionComplete("heart", data, result.label);
+          }
+        } else {
+          resContainer.innerHTML = `
+                <div class="w-full rounded-2xl p-6 bg-[#0a0f1e] border border-gray-700 result-card text-center shadow-lg">
+                    <h2 class="text-lg font-bold text-white mb-2">Model Offline</h2>
+                    <p class="text-gray-400 text-sm">${result.error || "An error occurred."}</p>
+                </div>
+            `;
+        }
+      } catch (error) {
+        resContainer.classList.remove("hidden");
+        resContainer.innerHTML = `
+            <div class="w-full rounded-2xl p-6 bg-rose-900/10 border border-rose-900/30 result-card text-center">
+                <h2 class="text-lg font-bold text-pink-500">Error</h2>
+                <p class="text-gray-400">Network connection failed.</p>
+            </div>
+        `;
+      } finally {
+        btnText.textContent = "Detect Anomalies";
+        btnSpinner.style.display = "none";
+        submitBtn.disabled = false;
+        resContainer.scrollIntoView({ behavior: "smooth", block: "end" });
+      }
+    });
+</script>
+{% endblock %}

templates/index.html

@@ -0,0 +1,108 @@
+{% extends "base.html" %} {% block title %}PredictLab - ML Portfolio{% endblock
+%} {% block page_name %}home{% endblock %} {% block content %}
+<div class="max-w-7xl mx-auto w-full px-4 sm:px-6 lg:px-8">
+  <!-- Hero Section -->
+  <div class="text-center py-16 mb-8 flex flex-col items-center">
+    <h1
+      class="text-3xl sm:text-4xl md:text-5xl lg:text-6xl xl:text-7xl font-extrabold hero-gradient-text-new mb-6 text-center mx-auto break-words"
+    >
+      From raw data to real insights.
+    </h1>
+    <p
+      class="text-lg sm:text-xl text-gray-400 w-full sm:max-w-3xl mx-auto mt-2"
+    >
+      Clinical-grade health risk predictions — enhanced with
+      <span class="highlight-cyan-glow font-semibold text-white"
+        >Llama 3 AI intelligence</span
+      >.
+    </p>
+  </div>
+
+  <!-- Models Grid -->
+  <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-8">
+    <!-- Diabetes Card -->
+    <div
+      class="glass-card card-hover flex flex-col h-full rounded-2xl p-6 shadow-lg"
+    >
+      <div class="flex items-center justify-between mb-4">
+        <div
+          class="w-12 h-12 rounded-lg bg-cyan-900/30 text-cyan-400 flex items-center justify-center text-2xl"
+        >
+          <i class="fa-solid fa-stethoscope"></i>
+        </div>
+        <span
+          class="bg-emerald-900/30 text-emerald-400 text-xs font-bold px-3 py-1 rounded-full border border-emerald-800/50"
+        >
+          89% Accuracy
+        </span>
+      </div>
+      <h3 class="text-2xl font-bold mb-2 text-white">Diabetes Scan</h3>
+      <p class="text-sm text-cyan-400 font-mono mb-4">
+        <span class="text-amber-400">⚡</span> SVM &middot; Linear Kernel
+      </p>
+      <p class="text-gray-400 text-sm flex-grow mb-6">
+        Enter your health metrics and instantly know your diabetes risk —
+        powered by an SVM trained on real clinical data.
+      </p>
+      <a
+        href="/diabetes"
+        class="mt-auto w-full btn-primary text-center py-3 rounded-xl font-bold"
+        >Try Model &rarr;</a
+      >
+    </div>
+
+    <!-- Stroke Risk Card -->
+    <div
+      class="bg-[#111827] border border-[#1f2937] rounded-2xl p-6 card-hover flex flex-col h-full shadow-2xl"
+    >
+      <div class="flex items-center justify-between mb-4">
+        <div
+          class="w-12 h-12 rounded-lg bg-purple-900/30 text-purple-500 flex items-center justify-center text-2xl"
+        >
+          <i class="fa-solid fa-brain"></i>
+        </div>
+      </div>
+      <h3 class="text-2xl font-bold mb-2">Stroke Risk</h3>
+      <p class="text-sm text-cyan-400 font-mono mb-4">
+        🌲 Random Forest Ensemble • 88.3% Accuracy
+      </p>
+      <p class="text-gray-400 text-sm flex-grow mb-6">
+        Assess your stroke risk in seconds. Trained on real clinical data across
+        demographics, lifestyle, and medical history.
+      </p>
+      <a
+        href="/stroke"
+        class="mt-auto w-full btn-primary text-center py-3 rounded-xl font-bold"
+        >Try Model &rarr;</a
+      >
+    </div>
+
+    <!-- Heart Disease Card -->
+    <div
+      class="bg-[#111827] border border-[#1f2937] rounded-2xl p-6 card-hover flex flex-col h-full shadow-2xl"
+    >
+      <div class="flex items-center justify-between mb-4">
+        <div
+          class="w-12 h-12 rounded-lg bg-pink-900/30 text-pink-500 flex items-center justify-center text-2xl"
+        >
+          <i class="fa-solid fa-heart-pulse"></i>
+        </div>
+      </div>
+      <h3 class="text-2xl font-bold mb-2">CardioScan</h3>
+      <p class="text-sm text-cyan-400 font-mono mb-4">
+        📈 Logistic Regression • 91% Accuracy
+      </p>
+      <p class="text-gray-400 text-sm flex-grow mb-6">
+        Enter your cardiac test results for an instant heart disease risk
+        assessment — powered by Logistic Regression trained on real clinical
+        data across 13 key markers.
+      </p>
+      <a
+        href="/heart"
+        class="mt-auto w-full btn-primary text-center py-3 rounded-xl font-bold"
+        >Try Model &rarr;</a
+      >
+    </div>
+  </div>
+</div>
+{% endblock %}

templates/stroke.html

@@ -0,0 +1,292 @@
+{% extends "base.html" %} {% block title %}Stroke Risk Predictor - PredictLab{%
+endblock %} {% block page_name %}stroke{% endblock %} {% block content %}
+<div class="w-full max-w-5xl mx-auto px-4 sm:px-6 lg:px-8">
+  <div class="mb-10 text-center">
+    <h1
+      class="text-4xl sm:text-5xl md:text-6xl font-bold mb-4 flex items-center justify-center gap-3 flex-wrap"
+    >
+      <div
+        class="w-12 h-12 rounded-lg bg-red-900/30 text-red-500 flex items-center justify-center text-2xl"
+      >
+        <i class="fa-solid fa-brain"></i>
+      </div>
+      Stroke Risk Predictor
+    </h1>
+    <p class="text-gray-400 max-w-full sm:max-w-2xl mx-auto">
+      Classifies stroke probability based on demographics and clinical features
+      using a Random Forest model.
+    </p>
+  </div>
+
+  <!-- Form Section -->
+  <div
+    class="bg-[#111827] border border-[#1f2937] rounded-2xl p-6 sm:p-10 mb-8 relative shadow-xl"
+  >
+    <form
+      id="prediction-form"
+      class="space-y-6 max-w-full lg:max-w-3xl mx-auto"
+    >
+      <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6">
+        <div>
+          <label class="block text-sm font-medium text-gray-400 mb-2"
+            >Age</label
+          >
+          <input
+            type="number"
+            id="age"
+            required
+            min="0"
+            max="120"
+            step="0.1"
+            class="w-full floating-input rounded-xl p-3"
+            placeholder="e.g. 55"
+          />
+        </div>
+
+        <div>
+          <label class="block text-sm font-medium text-gray-400 mb-2"
+            >Average Glucose Level</label
+          >
+          <input
+            type="number"
+            id="avg_glucose_level"
+            required
+            min="0"
+            max="300"
+            step="0.1"
+            class="w-full floating-input rounded-xl p-3"
+            placeholder="e.g. 105.2"
+          />
+        </div>
+
+        <div>
+          <label class="block text-sm font-medium text-gray-400 mb-2"
+            >BMI</label
+          >
+          <input
+            type="number"
+            id="bmi"
+            required
+            min="0"
+            max="100"
+            step="0.1"
+            class="w-full floating-input rounded-xl p-3"
+            placeholder="e.g. 28.5"
+          />
+        </div>
+
+        <div>
+          <label class="block text-sm font-medium text-gray-400 mb-2"
+            >Gender</label
+          >
+          <select
+            id="gender"
+            required
+            class="w-full floating-input rounded-xl p-3 appearance-none"
+          >
+            <option value="Female">Female</option>
+            <option value="Male">Male</option>
+            <option value="Other">Other</option>
+          </select>
+        </div>
+
+        <div>
+          <label class="block text-sm font-medium text-gray-400 mb-2"
+            >Hypertension</label
+          >
+          <select
+            id="hypertension"
+            required
+            class="w-full floating-input rounded-xl p-3 appearance-none"
+          >
+            <option value="0">No</option>
+            <option value="1">Yes</option>
+          </select>
+        </div>
+
+        <div>
+          <label class="block text-sm font-medium text-gray-400 mb-2"
+            >Heart Disease</label
+          >
+          <select
+            id="heart_disease"
+            required
+            class="w-full floating-input rounded-xl p-3 appearance-none"
+          >
+            <option value="0">No</option>
+            <option value="1">Yes</option>
+          </select>
+        </div>
+
+        <div>
+          <label class="block text-sm font-medium text-gray-400 mb-2"
+            >Ever Married</label
+          >
+          <select
+            id="ever_married"
+            required
+            class="w-full floating-input rounded-xl p-3 appearance-none"
+          >
+            <option value="No">No</option>
+            <option value="Yes">Yes</option>
+          </select>
+        </div>
+
+        <div>
+          <label class="block text-sm font-medium text-gray-400 mb-2"
+            >Work Type</label
+          >
+          <select
+            id="work_type"
+            required
+            class="w-full floating-input rounded-xl p-3 appearance-none"
+          >
+            <option value="Private">Private</option>
+            <option value="Self-employed">Self-employed</option>
+            <option value="Govt_job">Govt_job</option>
+            <option value="children">Children</option>
+            <option value="Never_worked">Never_worked</option>
+          </select>
+        </div>
+
+        <div>
+          <label class="block text-sm font-medium text-gray-400 mb-2"
+            >Residence Type</label
+          >
+          <select
+            id="residence_type"
+            required
+            class="w-full floating-input rounded-xl p-3 appearance-none"
+          >
+            <option value="Rural">Rural</option>
+            <option value="Urban">Urban</option>
+          </select>
+        </div>
+
+        <div class="md:col-span-2 lg:col-span-3">
+          <label class="block text-sm font-medium text-gray-400 mb-2"
+            >Smoking Status</label
+          >
+          <select
+            id="smoking_status"
+            required
+            class="w-full floating-input rounded-xl p-3 appearance-none"
+          >
+            <option value="Unknown">Unknown</option>
+            <option value="formerly smoked">Formerly smoked</option>
+            <option value="never smoked">Never smoked</option>
+            <option value="smokes">Smokes</option>
+          </select>
+        </div>
+      </div>
+
+      <div class="pt-6 text-center">
+        <button
+          type="submit"
+          class="w-full md:w-auto md:px-12 btn-primary py-4 rounded-xl font-bold flex items-center justify-center gap-3 mx-auto"
+        >
+          <span id="btn-text">Assess Risk Level</span>
+          <div id="btn-spinner" class="loader-spinner"></div>
+        </button>
+      </div>
+    </form>
+  </div>
+
+  <!-- Result Banner -->
+  <div
+    id="result-container"
+    class="hidden mb-12 max-w-full lg:max-w-3xl mx-auto"
+  >
+    <!-- Injected via JS -->
+  </div>
+</div>
+{% endblock %}
+
+{% block scripts %}
+<script>
+  document
+    .getElementById("prediction-form")
+    .addEventListener("submit", async (e) => {
+      e.preventDefault();
+
+      const btnText = document.getElementById("btn-text");
+      const btnSpinner = document.getElementById("btn-spinner");
+      const submitBtn = e.target.querySelector('button[type="submit"]');
+      const resContainer = document.getElementById("result-container");
+
+      // Collect inputs dynamically
+      const inputs = [
+        "age",
+        "avg_glucose_level",
+        "bmi",
+        "gender",
+        "hypertension",
+        "heart_disease",
+        "ever_married",
+        "work_type",
+        "residence_type",
+        "smoking_status"
+      ];
+      const data = {};
+      inputs.forEach((id) => (data[id] = document.getElementById(id).value));
+
+      // UI Loading
+      btnText.textContent = "Processing...";
+      btnSpinner.style.display = "block";
+      submitBtn.disabled = true;
+      resContainer.classList.add("hidden");
+
+      try {
+        const response = await fetch("/predict/stroke", {
+          method: "POST",
+          headers: { "Content-Type": "application/json" },
+          body: JSON.stringify(data),
+        });
+        const result = await response.json();
+
+        resContainer.classList.remove("hidden");
+
+        if (response.ok) {
+          const isRisk = result.label === "High Stroke Risk";
+          const colorClass = isRisk ? "text-rose-500" : "text-emerald-500";
+          const bgClass = isRisk ? "bg-rose-500/10" : "bg-emerald-500/10";
+          const borderClass = isRisk
+            ? "border-rose-500/30"
+            : "border-emerald-500/30";
+          const icon = isRisk ? "fa-brain" : "fa-shield-heart";
+
+          resContainer.className = `flex-1 flex flex-col items-center justify-center border-2 rounded-2xl p-8 result-card text-center ${bgClass} ${borderClass} mb-12 max-w-full lg:max-w-3xl mx-auto`;
+          resContainer.innerHTML = `
+                <div class="w-20 h-20 rounded-full flex items-center justify-center mb-6 bg-[#111827] border ${borderClass}">
+                    <i class="fa-solid ${icon} text-4xl ${colorClass}"></i>
+                </div>
+                <div class="text-sm font-bold text-gray-400 uppercase tracking-widest mb-2">Prediction Result</div>
+                <h2 class="text-3xl font-extrabold ${colorClass} mb-4">${result.label}</h2>
+                <p class="text-sm text-gray-400">Our AI assistant will explain what this indicates.</p>
+            `;
+
+          if (window.onPredictionComplete) {
+            window.onPredictionComplete("stroke", data, result.label);
+          }
+        } else {
+          resContainer.className =
+            "flex-1 flex flex-col items-center justify-center bg-gray-900 border-2 border-gray-700 rounded-2xl p-8 result-card text-center mb-12 max-w-full lg:max-w-3xl mx-auto";
+          resContainer.innerHTML = `
+                <div class="text-gray-400 mb-4"><i class="fa-solid fa-circle-exclamation text-4xl"></i></div>
+                <h2 class="text-xl font-bold text-white mb-2">Prediction Unavailable</h2>
+                <p class="text-gray-400 text-sm">${result.error || "An error occurred."}</p>
+            `;
+        }
+      } catch (error) {
+        resContainer.classList.remove("hidden");
+        resContainer.className =
+          "flex-1 flex flex-col items-center justify-center bg-rose-900/10 border-2 border-rose-900/30 rounded-2xl p-8 result-card text-center mb-12 max-w-full lg:max-w-3xl mx-auto";
+        resContainer.innerHTML = `<h2 class="text-xl font-bold text-rose-500 mb-2">Network Error</h2><p class="text-gray-400 text-sm">Could not connect to the server.</p>`;
+      } finally {
+        btnText.textContent = "Assess Risk Level";
+        btnSpinner.style.display = "none";
+        submitBtn.disabled = false;
+      }
+    });
+</script>
+{% endblock %}