feat: Implement web application for phishing URL detection with new UI, integrated model training, and prediction endpoints, removing old artifacts.

Dockerfile

@@ -1,22 +1,30 @@
-FROM python:3.11-slim
+# Use official Python runtime as a parent image
+FROM python:3.9-slim
 
+# Set working directory
 WORKDIR /app
 
-# Build tools for scipy / sklearn
-RUN apt-get update && \
-    apt-get install -y gcc g++ build-essential && \
-    rm -rf /var/lib/apt/lists/*
+# Install system dependencies (git is often needed for DagsHub/MLflow)
+RUN apt-get update && apt-get install -y git && rm -rf /var/lib/apt/lists/*
 
+# Copy requirements file first to leverage Docker cache
 COPY requirements.txt .
 
-RUN pip install --upgrade pip
-
-# Install awscli separately
-RUN pip install --no-cache-dir awscli
-
-# Install project dependencies
+# Install Python dependencies
 RUN pip install --no-cache-dir -r requirements.txt
 
+# Copy the rest of the application code
 COPY . .
 
-CMD ["python", "app.py"]
+# Create necessary directories for potential output
+RUN mkdir -p final_model prediction_output validation_output
+
+# Expose the port that Hugging Face Spaces expects (7860)
+EXPOSE 7860
+
+# Define environment variable for ensuring stdout is flushed immediately
+ENV PYTHONUNBUFFERED=1
+
+# Command to run the application
+# Note: We bind to 0.0.0.0 to enable external access within the container network
+CMD ["uvicorn", "app:app", "--host", "0.0.0.0", "--port", "7860"]

app.py

@@ -1,98 +1,603 @@
-import os, certifi, sys
+import os
+import sys
+import pandas as pd
+import numpy as np
+import joblib
+from pathlib import Path
+from datetime import datetime
+from typing import Optional
 
-from networksecurity.utils.ml_utils.model.estimator import NetworkModel
+from fastapi import FastAPI, File, UploadFile, Request, HTTPException, Form
+from fastapi.responses import HTMLResponse, FileResponse, JSONResponse
+from fastapi.staticfiles import StaticFiles
+from fastapi.templating import Jinja2Templates
+from fastapi.middleware.cors import CORSMiddleware
 
-ca = certifi.where()
+import uvicorn
+import mlflow
+import dagshub
+import shutil
+from networksecurity.pipeline.training_pipeline import TrainingPipeline
 
-from dotenv import load_dotenv 
-load_dotenv()
-mong_db_url = os.getenv("MONGODB_URL_KEY")
-print(mong_db_url)
+# ============================================================
+# Configuration
+# ============================================================
 
-import pymongo 
-from networksecurity.exception.exception import NetworkSecurityException
-from networksecurity.logging.logger import logging
-from networksecurity.pipeline.training_pipeline import TraningPipeline
+APP_TITLE = "Network Security - Phishing Detection"
+APP_DESCRIPTION = "ML-powered phishing URL detection system"
+APP_VERSION = "1.0.0"
 
-from fastapi.middleware.cors import CORSMiddleware
-from fastapi import FastAPI, File, UploadFile, Request
-from uvicorn import run as app_run
-from fastapi.responses import Response
-from starlette.responses import RedirectResponse
-import pandas as pd
+# Project Links
+GITHUB_URL = "https://github.com/Inder-26/NetworkSecurity"
+DAGSHUB_URL = "https://dagshub.com/Inder-26/NetworkSecurity"
+LINKEDIN_URL = "https://linkedin.com/in/inderjeet"  # Update with your actual LinkedIn
+
+# Model Paths
+MODEL_PATH = "final_model/model.pkl"
+PREPROCESSOR_PATH = "final_model/preprocessor.pkl"
+
+# Initialize DagsHub
+try:
+    dagshub.init(repo_owner="Inder-26", repo_name="NetworkSecurity", mlflow=True)
+except Exception as e:
+    print(f"⚠️ Error initializing DagsHub: {e}")
+
+# Feature Columns (30 features)
+FEATURE_COLUMNS = [
+    "having_IP_Address", "URL_Length", "Shortining_Service", "having_At_Symbol",
+    "double_slash_redirecting", "Prefix_Suffix", "having_Sub_Domain", "SSLfinal_State",
+    "Domain_registeration_length", "Favicon", "port", "HTTPS_token", "Request_URL",
+    "URL_of_Anchor", "Links_in_tags", "SFH", "Submitting_to_email", "Abnormal_URL",
+    "Redirect", "on_mouseover", "RightClick", "popUpWidnow", "Iframe", "age_of_domain",
+    "DNSRecord", "web_traffic", "Page_Rank", "Google_Index", "Links_pointing_to_page",
+    "Statistical_report"
+]
+
+# Feature descriptions for UI
+FEATURE_INFO = {
+    "having_IP_Address": {"group": "URL Structure", "desc": "IP address in URL"},
+    "URL_Length": {"group": "URL Structure", "desc": "Length of URL"},
+    "Shortining_Service": {"group": "URL Structure", "desc": "URL shortening service used"},
+    "having_At_Symbol": {"group": "URL Structure", "desc": "@ symbol in URL"},
+    "double_slash_redirecting": {"group": "URL Structure", "desc": "// redirecting"},
+    "Prefix_Suffix": {"group": "URL Structure", "desc": "Prefix/suffix in domain"},
+    "having_Sub_Domain": {"group": "URL Structure", "desc": "Subdomain presence"},
+    "SSLfinal_State": {"group": "Security", "desc": "SSL certificate state"},
+    "Domain_registeration_length": {"group": "Domain", "desc": "Domain registration length"},
+    "Favicon": {"group": "Security", "desc": "Favicon loaded from external"},
+    "port": {"group": "Security", "desc": "Non-standard port"},
+    "HTTPS_token": {"group": "Security", "desc": "HTTPS token in domain"},
+    "Request_URL": {"group": "Page Content", "desc": "External request URLs"},
+    "URL_of_Anchor": {"group": "Page Content", "desc": "Anchor URL analysis"},
+    "Links_in_tags": {"group": "Page Content", "desc": "Links in meta/script tags"},
+    "SFH": {"group": "Page Content", "desc": "Server Form Handler"},
+    "Submitting_to_email": {"group": "Page Content", "desc": "Form submits to email"},
+    "Abnormal_URL": {"group": "URL Structure", "desc": "Abnormal URL pattern"},
+    "Redirect": {"group": "Page Behavior", "desc": "Redirect count"},
+    "on_mouseover": {"group": "Page Behavior", "desc": "onMouseOver events"},
+    "RightClick": {"group": "Page Behavior", "desc": "Right-click disabled"},
+    "popUpWidnow": {"group": "Page Behavior", "desc": "Pop-up windows"},
+    "Iframe": {"group": "Page Behavior", "desc": "Iframe usage"},
+    "age_of_domain": {"group": "Domain", "desc": "Domain age"},
+    "DNSRecord": {"group": "Domain", "desc": "DNS record exists"},
+    "web_traffic": {"group": "Domain", "desc": "Web traffic ranking"},
+    "Page_Rank": {"group": "Domain", "desc": "Google PageRank"},
+    "Google_Index": {"group": "Domain", "desc": "Indexed by Google"},
+    "Links_pointing_to_page": {"group": "Domain", "desc": "External links count"},
+    "Statistical_report": {"group": "Security", "desc": "In statistical reports"}
+}
+
+# Actual Model Metrics from DagsHub experiments
+MODEL_METRICS = {
+    "model_name": "Random Forest",
+    "accuracy": 0.0,
+    "f1_score": 0.0,
+    "precision": 0.0,
+    "recall": 0.0,
+    "training_date": "N/A"
+}
+
+# All model comparison data
+ALL_MODELS = []
+
+def get_latest_metrics():
+    """Fetch latest metrics from DagsHub/MLflow"""
+    global MODEL_METRICS, ALL_MODELS
+    try:
+        # Search for all successful runs
+        runs = mlflow.search_runs()
+        
+        if runs.empty:
+            print("⚠️ No MLflow runs found.")
+            return
+
+        # Process all runs for the table
+        all_models_data = []
+        best_f1 = -1
+        best_run = None
+
+        for _, run in runs.iterrows():
+            # Extract metrics
+            accuracy = run.get("metrics.test_accuracy", 0) # Fallback if specific metric missing
+            f1 = run.get("metrics.test_f1", 0)
+            precision = run.get("metrics.test_precision", 0)
+            recall = run.get("metrics.test_recall", 0)
+            
+            # Extract tags/params
+            model_name = run.get("tags.model_name", run.get("params.model_name", "Unknown Model"))
+            
+            # Check if this is the best model so far
+            if f1 > best_f1:
+                best_f1 = f1
+                best_run = {
+                     "model_name": model_name,
+                    "accuracy": round(accuracy, 4),
+                    "f1_score": round(f1, 4),
+                    "precision": round(precision, 4),
+                    "recall": round(recall, 4),
+                    "training_date": run.get("start_time", datetime.now()).strftime("%Y-%m-%d") if isinstance(run.get("start_time"), datetime) else str(run.get("start_time"))[:10]
+                }
 
-from networksecurity.utils.main_utils.utils import load_object
+            all_models_data.append({
+                "name": model_name,
+                "accuracy": round(accuracy, 4),
+                "f1": round(f1, 4),
+                "precision": round(precision, 4),
+                "recall": round(recall, 4),
+                "best": False # Will set best later
+            })
+        
+        # Update global variables
+        if best_run:
+            MODEL_METRICS = best_run
+            # Mark the best model in the list
+            for m in all_models_data:
+                if m["name"] == best_run["model_name"] and m["f1"] == best_run["f1_score"]:
+                    m["best"] = True
+            
+            ALL_MODELS = sorted(all_models_data, key=lambda x: x['f1'], reverse=True)
+            print(f"✅ Metrics updated from MLflow. Best model: {best_run['model_name']}")
 
-client = pymongo.MongoClient(mong_db_url, tlsCAFile=ca)
+    except Exception as e:
+        print(f"❌ Error fetching MLflow metrics: {e}")
 
-from networksecurity.constant.training_pipeline import DATA_INGESTION_COLLECTION_NAME
-from networksecurity.constant.training_pipeline import DATA_INGESTION_DATABASE_NAME
+# Fetch initial metrics
+get_latest_metrics()
 
-database = client[DATA_INGESTION_DATABASE_NAME]
-collection = database[DATA_INGESTION_COLLECTION_NAME]
+# ============================================================
+# Initialize FastAPI App
+# ============================================================
 
-app = FastAPI(title="Network Security Prediction API")
-origins = ["*"]
+app = FastAPI(
+    title=APP_TITLE,
+    description=APP_DESCRIPTION,
+    version=APP_VERSION,
+    docs_url="/api/docs",
+    redoc_url="/api/redoc"
+)
 
+# CORS Middleware
 app.add_middleware(
     CORSMiddleware,
-    allow_origins=origins,
+    allow_origins=["*"],
     allow_credentials=True,
     allow_methods=["*"],
     allow_headers=["*"],
 )
 
-from fastapi.templating import Jinja2Templates
+# Static Files and Templates
+app.mount("/static", StaticFiles(directory="static"), name="static")
 templates = Jinja2Templates(directory="templates")
 
-@app.get("/")
-async def index():
-    return RedirectResponse(url="/docs")
-
+# ============================================================
+# Load Models
+# ============================================================
 
-@app.get("/train", tags=["train"])
-async def train_route():
+def load_models():
+    """Load the trained model and preprocessor"""
     try:
-        training_pipeline = TraningPipeline()
-        training_pipeline.run_pipeline()
-        return Response(content="Training successful !!")
-
+        if os.path.exists(MODEL_PATH) and os.path.exists(PREPROCESSOR_PATH):
+            model = joblib.load(MODEL_PATH)
+            preprocessor = joblib.load(PREPROCESSOR_PATH)
+            print("✅ Models loaded successfully!")
+            return model, preprocessor
+        else:
+            print("⚠️ Model files not found. Running in demo mode.")
+            return None, None
     except Exception as e:
-        logging.error(f"Training failed: {e}")
-        raise NetworkSecurityException(e, sys)
+        print(f"❌ Error loading models: {e}")
+        return None, None
+
+model, preprocessor = load_models()
+
+# ============================================================
+# Utility Functions
+# ============================================================
+
+def generate_sample_data(n_samples: int = 5) -> pd.DataFrame:
+    """Generate sample input data for testing"""
+    np.random.seed(42)
+    data = {}
+    for col in FEATURE_COLUMNS:
+        data[col] = np.random.choice([-1, 0, 1], size=n_samples)
+    return pd.DataFrame(data)
+
+def predict_single(features: dict) -> dict:
+    """Make prediction for a single sample"""
+    if model is None or preprocessor is None:
+        # Demo mode - return random prediction
+        prediction = np.random.choice([0, 1])
+        confidence = np.random.uniform(0.7, 0.99)
+    else:
+        df = pd.DataFrame([features])
+        X_transformed = preprocessor.transform(df)
+        prediction = model.predict(X_transformed)[0]
+        
+        try:
+            proba = model.predict_proba(X_transformed)[0]
+            confidence = float(max(proba))
+        except:
+            confidence = 0.95
+    
+    return {
+        "prediction": int(prediction),
+        "label": "Phishing" if prediction == 0 else "Legitimate",
+        "confidence": round(confidence * 100, 2),
+        "is_threat": prediction == 0
+    }
+
+def predict_batch(df: pd.DataFrame) -> tuple:
+    """Make predictions for batch data"""
+    X = df[FEATURE_COLUMNS]
+    
+    if model is None or preprocessor is None:
+        # Demo mode
+        predictions = np.random.choice([0, 1], size=len(df))
+        confidence = np.random.uniform(0.7, 0.99, size=len(df))
+    else:
+        X_transformed = preprocessor.transform(X)
+        predictions = model.predict(X_transformed)
+        
+        try:
+            probabilities = model.predict_proba(X_transformed)
+            confidence = np.max(probabilities, axis=1)
+        except:
+            confidence = np.ones(len(predictions)) * 0.95
+    
+    return predictions, confidence
+
+# ============================================================
+# Routes
+# ============================================================
+
+@app.get("/", response_class=HTMLResponse)
+async def home(request: Request):
+    """Home page with upload interface"""
+    # Refresh metrics on page load
+    get_latest_metrics()
+    
+    return templates.TemplateResponse(
+        "index.html",
+        {
+            "request": request,
+            "title": APP_TITLE,
+            "github_url": GITHUB_URL,
+            "dagshub_url": DAGSHUB_URL,
+            "linkedin_url": LINKEDIN_URL,
+            "metrics": MODEL_METRICS,
+            "all_models": ALL_MODELS,
+            "feature_count": len(FEATURE_COLUMNS),
+            "features": FEATURE_COLUMNS,
+            "feature_info": FEATURE_INFO
+        }
+    )
+
+
+@app.get("/manual", response_class=HTMLResponse)
+async def manual_input(request: Request):
+    """Manual input form page"""
+    return templates.TemplateResponse(
+        "single_predict.html",
+        {
+            "request": request,
+            "title": "Manual Prediction",
+            "features": FEATURE_COLUMNS,
+            "feature_info": FEATURE_INFO,
+            "github_url": GITHUB_URL,
+            "dagshub_url": DAGSHUB_URL,
+            "linkedin_url": LINKEDIN_URL
+        }
+    )
+
 
+@app.get("/health")
+async def health_check():
+    """Health check endpoint"""
+    return {
+        "status": "healthy",
+        "model_loaded": model is not None,
+        "preprocessor_loaded": preprocessor is not None,
+        "version": APP_VERSION
+    }
+
+
+@app.get("/api/features")
+async def get_features():
+    """Return list of required features"""
+    return {
+        "features": FEATURE_COLUMNS,
+        "count": len(FEATURE_COLUMNS),
+        "info": FEATURE_INFO
+    }
+
+
+@app.get("/api/metrics")
+async def get_metrics():
+    """Return model performance metrics"""
+    return {
+        "best_model": MODEL_METRICS,
+        "all_models": ALL_MODELS
+    }
+
+
+@app.get("/download/sample")
+async def download_sample():
+    """Download sample CSV file"""
+    sample_path = "valid_data/test.csv"
+    
+    if not os.path.exists(sample_path):
+        # Fallback if specific file not found
+        return JSONResponse(status_code=404, content={"message": "Sample file not found at valid_data/test.csv"})
+    
+    return FileResponse(
+        sample_path,
+        media_type="text/csv",
+        filename="sample_phishing_data.csv"
+    )
 
 
 @app.post("/predict")
-async def predict_route(request: Request, file: UploadFile = File(...)):
+async def predict(request: Request, file: UploadFile = File(...)):
+    """Handle file upload and return predictions"""
+    
+    # Validate file type
+    if not file.filename.endswith('.csv'):
+        raise HTTPException(
+            status_code=400,
+            detail="Please upload a CSV file"
+        )
+    
     try:
+        # Read uploaded file
         df = pd.read_csv(file.file)
-        logging.info(f"Uploaded file shape: {df.shape}")
-        logging.info(f"Uploaded columns: {df.columns.tolist()}")
+        original_df = df.copy()
+        
+        # Validate columns
+        missing_cols = set(FEATURE_COLUMNS) - set(df.columns)
+        if missing_cols:
+            raise HTTPException(
+                status_code=400,
+                detail=f"Missing columns: {', '.join(sorted(missing_cols))}"
+            )
+        
+        # Make predictions
+        predictions, confidence = predict_batch(df)
+        
+        # Map predictions to labels
+        prediction_labels = ["⚠️ Phishing" if p == 0 else "🔒 Legitimate" for p in predictions]
+        
+        # Create results dataframe
+        results_df = original_df.copy()
+        results_df["Prediction"] = predictions
+        results_df["Label"] = prediction_labels
+        results_df["Confidence"] = (confidence * 100).round(2)
+        
+        # Save results
+        os.makedirs("prediction_output", exist_ok=True)
+        timestamp = datetime.now().strftime("%Y%m%d_%H%M%S")
+        output_filename = f"predictions_{timestamp}.csv"
+        output_path = f"prediction_output/{output_filename}"
+        results_df.to_csv(output_path, index=False)
+        
+        # Calculate summary
+        total = len(predictions)
+        # 0 is Phishing (mapped from -1), 1 is Legitimate
+        phishing_count = int(np.sum(predictions == 0))
+        legitimate_count = total - phishing_count
+        
+        # Prepare display columns (show first 5 features + results)
+        display_columns = FEATURE_COLUMNS[:5] + ["Prediction", "Label", "Confidence"]
+        
+        return templates.TemplateResponse(
+            "predict.html",
+            {
+                "request": request,
+                "title": "Prediction Results",
+                "results": results_df.to_dict(orient="records"),
+                "summary": {
+                    "total": total,
+                    "phishing": phishing_count,
+                    "legitimate": legitimate_count,
+                    "phishing_percent": round(phishing_count / total * 100, 1) if total > 0 else 0
+                },
+                "output_filename": output_filename,
+                "columns": display_columns,
+                "github_url": GITHUB_URL,
+                "dagshub_url": DAGSHUB_URL,
+                "linkedin_url": LINKEDIN_URL
+            }
+        )
+        
+    except HTTPException:
+        raise
+    except Exception as e:
+        raise HTTPException(
+            status_code=500,
+            detail=f"Prediction error: {str(e)}"
+        )
+
+
+@app.post("/api/predict/single")
+async def predict_single_api(request: Request):
+    """Handle single prediction from form (API)"""
+    try:
+        form_data = await request.form()
+        
+        # Build feature dictionary
+        features = {}
+        for col in FEATURE_COLUMNS:
+            value = form_data.get(col, "0")
+            try:
+                features[col] = int(value) if value else 0
+            except ValueError:
+                features[col] = 0
+        
+        # Make prediction
+        result = predict_single(features)
+
+        def convert_numpy(obj):
+            if isinstance(obj, dict):
+                return {k: convert_numpy(v) for k, v in obj.items()}
+            elif isinstance(obj, list):
+                return [convert_numpy(v) for v in obj]
+            elif hasattr(obj, 'item'):  # Numpy scalars
+                return obj.item()
+            elif hasattr(obj, 'tolist'):  # Numpy arrays
+                return obj.tolist()
+            return obj
+        
+        # Ensure result is JSON serializable
+        clean_result = convert_numpy(result)
+        
+        return JSONResponse(clean_result)
+        
+    except Exception as e:
+        print(f"Prediction Error: {e}") # Log error to console
+        raise HTTPException(status_code=500, detail=str(e))
 
-        preprocessor = load_object("final_model/preprocessor.pkl")
-        final_model = load_object("final_model/model.pkl")
 
-        network_model = NetworkModel(
-            preprocessor=preprocessor,
-            model=final_model
+@app.post("/predict/single", response_class=HTMLResponse)
+async def predict_single_form(request: Request):
+    """Handle single prediction from form (HTML response)"""
+    try:
+        form_data = await request.form()
+        
+        # Build feature dictionary
+        features = {}
+        for col in FEATURE_COLUMNS:
+            value = form_data.get(col, "0")
+            try:
+                features[col] = int(value) if value else 0
+            except ValueError:
+                features[col] = 0
+        
+        # Make prediction
+        result = predict_single(features)
+        
+        return templates.TemplateResponse(
+            "single_predict.html",
+            {
+                "request": request,
+                "title": "Prediction Result",
+                "features": FEATURE_COLUMNS,
+                "feature_info": FEATURE_INFO,
+                "result": result,
+                "input_values": features,
+                "github_url": GITHUB_URL,
+                "dagshub_url": DAGSHUB_URL,
+                "linkedin_url": LINKEDIN_URL
+            }
         )
-        print(df.iloc[0])
-        y_pred = network_model.predict(df)
-        print(y_pred)
-        df["prediction_column"] = y_pred
-        print(df["prediction_column"])
+        
+    except Exception as e:
+        raise HTTPException(status_code=500, detail=str(e))
 
-        os.makedirs("prediction_output", exist_ok=True)
-        df.to_csv("prediction_output/output.csv", index=False)
-        table_html = df.to_html(classes='table table-striped')
 
-        return templates.TemplateResponse("table.html", {"request": request, "table": table_html})
+@app.get("/download/results/{filename}")
+async def download_results(filename: str):
+    """Download prediction results"""
+    file_path = f"prediction_output/{filename}"
+    if os.path.exists(file_path):
+        return FileResponse(
+            file_path,
+            media_type="text/csv",
+            filename=filename
+        )
+    raise HTTPException(status_code=404, detail="File not found")
 
 
+@app.post("/api/reload-model")
+async def reload_model():
+    """Force reload of the model and metrics"""
+    global model, preprocessor
+    try:
+        model, preprocessor = load_models()
+        get_latest_metrics()
+        
+        status = "success" if model is not None else "failed"
+        return {
+            "status": status,
+            "message": "Model reload attempted",
+            "model_loaded": model is not None,
+            "metrics_updated": True
+        }
     except Exception as e:
-        logging.error(f"Prediction failed: {e}")
-        raise NetworkSecurityException(e, sys)
+        raise HTTPException(status_code=500, detail=str(e))
+
+
+@app.post("/api/train")
+async def train_model():
+    """Trigger model training"""
+    try:
+        pipeline = TrainingPipeline()
+        pipeline.run_pipeline()
+        
+        # Reload model and metrics
+        global model, preprocessor
+        model, preprocessor = load_models()
+        get_latest_metrics()
+        
+        return {
+            "status": "success",
+            "message": "Training completed successfully"
+        }
+    except Exception as e:
+        raise HTTPException(status_code=500, detail=str(e))
+
+
+# ============================================================
+# Error Handlers
+# ============================================================
+
+@app.exception_handler(404)
+async def not_found_handler(request: Request, exc):
+    return templates.TemplateResponse(
+        "index.html",
+        {
+            "request": request,
+            "title": APP_TITLE,
+            "error": "Page not found",
+            "github_url": GITHUB_URL,
+            "dagshub_url": DAGSHUB_URL,
+            "linkedin_url": LINKEDIN_URL,
+            "metrics": MODEL_METRICS,
+            "all_models": ALL_MODELS,
+            "feature_count": len(FEATURE_COLUMNS),
+            "features": FEATURE_COLUMNS,
+            "feature_info": FEATURE_INFO
+        },
+        status_code=404
+    )
+
+
+# ============================================================
+# Run Server
+# ============================================================
 
 if __name__ == "__main__":
-    app_run(app, host="0.0.0.0", port=8080)
+    uvicorn.run(
+        "app:app",
+        host="0.0.0.0",
+        port=8000,
+        reload=False
+    )

networksecurity/components/model_trainer.py

@@ -42,12 +42,8 @@ from sklearn.metrics import (
 )
 
 # ---------------- Dagshub + MLflow ----------------
-if os.getenv("ENABLE_DAGSHUB", "false") == "true":
-    dagshub.init(
-    repo_owner="Inder-26",
-    repo_name="NetworkSecurity",
-    mlflow=True,
-)
+dagshub.init(repo_owner="Inder-26",repo_name="NetworkSecurity",mlflow=True)
+
 
 
 # ---------------- Helper: log visual artifacts ----------------
@@ -175,7 +171,7 @@ class ModelTrainer:
             self.data_transformation_artifact.transformed_object_file_path
         )
 
-        final_model_dir = os.path.join(os.getcwd(), "final_models")
+        final_model_dir = os.path.join(os.getcwd(), "final_model")
         os.makedirs(final_model_dir, exist_ok=True)
 
         save_object(
@@ -187,7 +183,7 @@ class ModelTrainer:
             preprocessor,
         )
 
-        logging.info(f"Final model and preprocessor saved in final_models")
+        logging.info(f"Final model and preprocessor saved in final_model")
         y_train_pred = best_model.predict(X_train)
         y_test_pred = best_model.predict(X_test)
 

networksecurity/pipeline/training_pipeline.py

@@ -24,7 +24,7 @@ from networksecurity.entity.artifact_entity import (
     ModelTrainerArtifact,
 )
 
-class TraningPipeline:
+class TrainingPipeline:
     def __init__(self):
         try:
             self.training_pipeline_config = TrainingPipelineConfig()
@@ -111,7 +111,7 @@ class TraningPipeline:
             raise NetworkSecurityException(e, sys)
 
 
-    ## Local final_models is pushed to S3
+    ## Local final_model is pushed to S3
     def sync_saved_model_dir_to_s3(self):
         try:
             aws_bucket_url = (

prediction_output/output.csv

@@ -1,13 +0,0 @@
-having_IP_Address,URL_Length,Shortining_Service,having_At_Symbol,double_slash_redirecting,Prefix_Suffix,having_Sub_Domain,SSLfinal_State,Domain_registeration_length,Favicon,port,HTTPS_token,Request_URL,URL_of_Anchor,Links_in_tags,SFH,Submitting_to_email,Abnormal_URL,Redirect,on_mouseover,RightClick,popUpWidnow,Iframe,age_of_domain,DNSRecord,web_traffic,Page_Rank,Google_Index,Links_pointing_to_page,Statistical_report,prediction
-1,-1,1,1,1,-1,1,1,1,1,1,-1,-1,1,1,0,1,1,0,1,1,1,1,1,1,-1,-1,1,1,1,1.0
--1,-1,-1,1,-1,1,1,1,-1,1,1,-1,1,1,0,1,1,-1,0,1,1,1,1,-1,-1,1,1,-1,1,1,1.0
--1,-1,-1,1,-1,-1,0,0,1,1,1,-1,-1,-1,1,-1,1,-1,1,1,1,1,1,1,1,-1,-1,1,0,1,0.0
--1,-1,1,1,1,-1,1,1,1,1,1,1,-1,0,1,1,1,1,0,1,1,1,1,1,1,1,-1,1,1,1,1.0
-1,1,1,1,1,-1,0,-1,-1,1,1,1,1,0,0,1,1,1,0,1,1,1,1,-1,1,1,-1,1,0,1,1.0
-1,-1,1,1,1,1,0,-1,-1,1,1,1,1,0,0,-1,1,1,0,1,1,1,1,1,1,1,-1,1,0,1,1.0
-1,1,1,1,1,-1,0,1,-1,-1,1,1,1,0,-1,1,1,1,0,-1,1,-1,1,-1,1,1,-1,1,0,1,1.0
-1,-1,1,1,1,-1,-1,-1,1,1,1,1,-1,-1,0,-1,1,1,0,1,1,1,1,-1,-1,-1,-1,1,0,1,0.0
-1,-1,1,-1,1,-1,-1,1,1,-1,-1,1,-1,0,0,0,-1,1,0,-1,1,-1,-1,1,1,1,-1,1,0,1,1.0
-1,1,1,1,1,-1,0,-1,-1,1,1,1,1,-1,0,1,1,1,0,1,1,1,1,-1,-1,-1,-1,1,0,1,0.0
-1,-1,1,1,1,-1,-1,1,1,1,1,1,-1,0,-1,-1,1,1,0,1,1,1,1,1,1,1,-1,1,0,1,1.0
--1,1,-1,1,1,-1,0,1,-1,1,1,1,1,0,1,-1,1,1,0,1,1,1,1,1,1,1,-1,1,0,1,0.0

requirements.txt

@@ -115,3 +115,4 @@ waitress==3.0.2
 werkzeug==3.1.4
 yarl==1.22.0
 zipp==3.23.0
+aiofiles==23.2.1

static/css/style.css

@@ -0,0 +1,1456 @@
+/* ============================================
+   Design System & Variables
+   ============================================ */
+
+:root {
+  /* Colors */
+  --primary: #4f46e5; /* Indigo 600 */
+  --primary-dark: #4338ca;
+  --primary-light: #818cf8;
+
+  --secondary: #ec4899; /* Pink 500 */
+
+  --gray-50: #f9fafb;
+  --gray-100: #f3f4f6;
+  --gray-200: #e5e7eb;
+  --gray-300: #d1d5db;
+  --gray-400: #9ca3af;
+  --gray-500: #6b7280;
+  --gray-600: #4b5563;
+  --gray-700: #374151;
+  --gray-800: #1f2937;
+  --gray-900: #111827;
+
+  --white: #ffffff;
+
+  --success: #10b981; /* Emerald 500 */
+  --danger: #ef4444; /* Red 500 */
+  --warning: #f59e0b; /* Amber 500 */
+  --info: #3b82f6; /* Blue 500 */
+
+  /* Typography */
+  --font-sans: "Inter", system-ui, -apple-system, sans-serif;
+
+  /* Spacing & Layout */
+  --container-width: 1200px;
+  --header-height: 70px;
+
+  /* Effects */
+  --radius: 0.5rem;
+  --radius-lg: 1rem;
+  --shadow-sm: 0 1px 2px 0 rgba(0, 0, 0, 0.05);
+  --shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1),
+    0 2px 4px -1px rgba(0, 0, 0, 0.06);
+  --shadow-md: 0 10px 15px -3px rgba(0, 0, 0, 0.1),
+    0 4px 6px -2px rgba(0, 0, 0, 0.05);
+  --shadow-lg: 0 20px 25px -5px rgba(0, 0, 0, 0.1),
+    0 10px 10px -5px rgba(0, 0, 0, 0.04);
+
+  --transition: all 0.3s ease;
+}
+
+/* ============================================
+   Reset & Base
+   ============================================ */
+
+* {
+  margin: 0;
+  padding: 0;
+  box-sizing: border-box;
+}
+
+body {
+  font-family: var(--font-sans);
+  background-color: var(--gray-50);
+  color: var(--gray-800);
+  line-height: 1.6;
+  min-height: 100vh;
+  display: flex;
+  flex-direction: column;
+}
+
+h1,
+h2,
+h3,
+h4,
+h5,
+h6 {
+  line-height: 1.2;
+  color: var(--gray-900);
+}
+
+a {
+  text-decoration: none;
+  color: inherit;
+  transition: var(--transition);
+}
+
+ul {
+  list-style: none;
+}
+
+/* ============================================
+   Layout
+   ============================================ */
+
+.container {
+  max-width: var(--container-width);
+  margin: 0 auto;
+  padding: 0 1.5rem;
+}
+
+.main-content {
+  flex: 1;
+  padding: 3rem 0;
+}
+
+/* Header */
+.header {
+  height: var(--header-height);
+  background: var(--white);
+  border-bottom: 1px solid var(--gray-200);
+  position: sticky;
+  top: 0;
+  z-index: 100;
+}
+
+.header-content {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  height: 100%;
+}
+
+.logo {
+  display: flex;
+  align-items: center;
+  gap: 0.75rem;
+  font-size: 1.25rem;
+  font-weight: 700;
+  color: var(--primary);
+}
+
+.logo i {
+  font-size: 1.5rem;
+}
+
+.nav-links {
+  display: flex;
+  gap: 2rem;
+}
+
+.nav-link {
+  display: flex;
+  align-items: center;
+  gap: 0.5rem;
+  color: var(--gray-600);
+  font-weight: 500;
+  font-size: 0.95rem;
+}
+
+.nav-link:hover {
+  color: var(--primary);
+}
+
+/* Footer */
+.footer {
+  background: var(--white);
+  border-top: 1px solid var(--gray-200);
+  padding: 2rem 0;
+  margin-top: auto;
+}
+
+.footer-content {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+}
+
+.footer-logo {
+  display: flex;
+  align-items: center;
+  gap: 0.5rem;
+  font-weight: 600;
+  margin-bottom: 0.5rem;
+}
+
+.footer-left p {
+  color: var(--gray-500);
+  font-size: 0.9rem;
+}
+
+.footer-tech {
+  display: flex;
+  gap: 1rem;
+  margin-top: 0.5rem;
+}
+
+.footer-tech span {
+  display: flex;
+  align-items: center;
+  gap: 0.25rem;
+  font-size: 0.8rem;
+  color: var(--gray-500);
+  background: var(--gray-100);
+  padding: 0.1rem 0.5rem;
+  border-radius: 999px;
+}
+
+.footer-right {
+  display: flex;
+  gap: 1.5rem;
+  font-size: 1.25rem;
+  color: var(--gray-400);
+}
+
+.footer-right a:hover {
+  color: var(--primary);
+  transform: translateY(-2px);
+}
+
+/* ============================================
+   Components
+   ============================================ */
+
+/* Buttons */
+.btn {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  gap: 0.5rem;
+  padding: 0.75rem 1.5rem;
+  border-radius: var(--radius);
+  font-weight: 600;
+  cursor: pointer;
+  border: none;
+  transition: var(--transition);
+}
+
+.btn-sm {
+  padding: 0.4rem 0.8rem;
+  font-size: 0.875rem;
+}
+
+.btn-lg {
+  padding: 1rem 2rem;
+  font-size: 1.125rem;
+}
+
+.btn-block {
+  width: 100%;
+}
+
+.btn-primary {
+  background: var(--primary);
+  color: white;
+  box-shadow: 0 4px 6px -1px rgba(79, 70, 229, 0.4);
+}
+
+.btn-primary:hover {
+  background: var(--primary-dark);
+  transform: translateY(-2px);
+  box-shadow: 0 6px 8px -1px rgba(79, 70, 229, 0.5);
+}
+
+.btn-outline {
+  background: transparent;
+  border: 2px solid var(--primary);
+  color: var(--primary);
+}
+
+.btn-outline:hover {
+  background: var(--gray-50);
+  transform: translateY(-1px);
+}
+
+.btn-secondary {
+  background: var(--secondary);
+  color: white;
+}
+
+/* Cards */
+.card {
+  background: var(--white);
+  border-radius: var(--radius-lg);
+  border: 1px solid var(--gray-200);
+  box-shadow: var(--shadow-sm);
+  transition: var(--transition);
+  height: 100%;
+  margin-bottom: 2rem;
+}
+
+.card:hover {
+  box-shadow: var(--shadow-md);
+  transform: translateY(-2px);
+}
+
+.card-header {
+  padding: 1.5rem;
+  border-bottom: 1px solid var(--gray-100);
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+}
+
+.card-header h2 {
+  font-size: 1.25rem;
+  font-weight: 600;
+  margin: 0;
+  display: flex;
+  align-items: center;
+  gap: 0.75rem;
+}
+
+.card-body {
+  padding: 1.5rem;
+}
+
+/* Forms */
+.form-group {
+  margin-bottom: 1.5rem;
+}
+
+.form-label {
+  display: block;
+  font-weight: 600;
+  margin-bottom: 0.5rem;
+  color: var(--gray-700);
+}
+
+.form-control {
+  width: 100%;
+  padding: 0.75rem;
+  border: 1px solid var(--gray-300);
+  border-radius: var(--radius);
+  transition: var(--transition);
+  font-family: inherit;
+}
+
+.form-control:focus {
+  outline: none;
+  border-color: var(--primary);
+  box-shadow: 0 0 0 3px rgba(79, 70, 229, 0.1);
+}
+
+/* ============================================
+   Page Specific: Home
+   ============================================ */
+
+/* Hero */
+.hero {
+  background: radial-gradient(circle at top right, #e0e7ff, #f3f4f6);
+  padding: 5rem 0;
+  text-align: center;
+}
+
+.hero-content {
+  max-width: 800px;
+  margin: 0 auto;
+}
+
+.hero-badge {
+  display: inline-flex;
+  align-items: center;
+  gap: 0.5rem;
+  background: white;
+  padding: 0.5rem 1rem;
+  border-radius: 9999px;
+  font-size: 0.875rem;
+  font-weight: 600;
+  color: var(--primary);
+  box-shadow: var(--shadow-sm);
+  margin-bottom: 1.5rem;
+}
+
+.hero h1 {
+  font-size: 3.5rem;
+  font-weight: 800;
+  letter-spacing: -0.025em;
+  margin-bottom: 1.5rem;
+  background: linear-gradient(135deg, var(--gray-900) 50%, var(--primary));
+  -webkit-background-clip: text;
+  background-clip: text;
+  -webkit-text-fill-color: transparent;
+}
+
+.hero-subtitle {
+  font-size: 1.25rem;
+  color: var(--gray-600);
+  margin-bottom: 3rem;
+  line-height: 1.6;
+}
+
+.hero-stats {
+  display: grid;
+  grid-template-columns: repeat(4, 1fr);
+  gap: 1.5rem;
+}
+
+.stat-card {
+  background: white;
+  padding: 1.5rem;
+  border-radius: var(--radius-lg);
+  box-shadow: var(--shadow);
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  gap: 0.5rem;
+}
+
+.stat-icon {
+  font-size: 1.5rem;
+  color: var(--primary);
+  margin-bottom: 0.25rem;
+}
+
+.stat-value {
+  font-size: 1.5rem;
+  font-weight: 700;
+  color: var(--gray-900);
+}
+
+.stat-label {
+  font-size: 0.875rem;
+  color: var(--gray-500);
+}
+
+/* Upload Interface */
+.upload-zone {
+  border: 2px dashed var(--gray-300);
+  border-radius: var(--radius-lg);
+  padding: 3rem 1.5rem;
+  background: var(--gray-50);
+  transition: var(--transition);
+  cursor: pointer;
+  position: relative;
+  margin-bottom: 1.5rem;
+}
+
+.upload-zone:hover,
+.upload-zone.dragover {
+  border-color: var(--primary);
+  background: #eef2ff;
+}
+
+.upload-content {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  gap: 0.75rem;
+  color: var(--gray-500);
+}
+
+.upload-content i {
+  font-size: 3rem;
+  color: var(--gray-400);
+  margin-bottom: 0.5rem;
+}
+
+.upload-content p {
+  font-weight: 600;
+  color: var(--gray-800);
+  margin: 0;
+}
+
+#file-input {
+  position: absolute;
+  width: 100%;
+  height: 100%;
+  top: 0;
+  left: 0;
+  opacity: 0;
+  cursor: pointer;
+}
+
+.file-info {
+  display: none;
+  align-items: center;
+  padding: 1rem;
+  background: #eff6ff;
+  border: 1px solid #bfdbfe;
+  border-radius: var(--radius);
+  color: #1e40af;
+  margin-bottom: 1.5rem;
+}
+
+.file-info i {
+  font-size: 1.5rem;
+  margin-right: 0.75rem;
+}
+
+.btn-remove {
+  margin-left: auto;
+  background: none;
+  border: none;
+  color: #60a5fa;
+  cursor: pointer;
+  padding: 0.25rem;
+}
+
+.btn-remove:hover {
+  color: #1d4ed8;
+}
+
+/* Features List */
+.features-grid {
+  display: grid;
+  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
+  gap: 2rem;
+}
+
+.feature-group h4 {
+  display: flex;
+  align-items: center;
+  gap: 0.5rem;
+  font-size: 1rem;
+  margin-bottom: 1rem;
+  color: var(--gray-700);
+  padding-bottom: 0.5rem;
+  border-bottom: 1px solid var(--gray-200);
+}
+
+.feature-group ul {
+  display: flex;
+  flex-direction: column;
+  gap: 0.5rem;
+}
+
+.feature-group li {
+  font-size: 0.875rem;
+  color: var(--gray-600);
+  display: flex;
+  align-items: center;
+}
+
+.feature-group li::before {
+  content: "•";
+  color: var(--primary);
+  margin-right: 0.5rem;
+}
+
+.feature-group code {
+  background: var(--gray-100);
+  padding: 0.1rem 0.3rem;
+  border-radius: 4px;
+  font-size: 0.8em;
+  color: var(--gray-800);
+}
+
+.feature-note {
+  background: #fffbeb;
+  border: 1px solid #fde68a;
+  border-radius: var(--radius);
+  padding: 1rem;
+  margin-top: 2rem;
+  display: flex;
+  align-items: center;
+  gap: 0.75rem;
+  color: #92400e;
+  font-size: 0.9rem;
+}
+
+/* ============================================
+   Rest of the file (Result Cards, Tables)
+   ============================================ */
+/* ... (Appending the previous file content here in the tool calling) ... */
+
+/* [PREVIOUSLY EXISTING STYLES BELOW] */
+
+/* ============================================
+   Manual Input Page
+   ============================================ */
+
+.manual-page .page-header {
+  text-align: center;
+  margin-bottom: 2rem;
+}
+
+.manual-page .page-header h1 {
+  font-size: 2rem;
+  color: var(--gray-900);
+  margin-bottom: 0.5rem;
+}
+
+.manual-page .page-header p {
+  color: var(--gray-600);
+}
+
+/* Result Card */
+.result-card {
+  display: flex;
+  align-items: center;
+  gap: 1.5rem;
+  padding: 1.5rem 2rem;
+  border-radius: var(--radius-lg);
+  margin-bottom: 2rem;
+  animation: slideDown 0.3s ease;
+}
+
+.result-card.result-safe {
+  background: linear-gradient(135deg, #d1fae5, #a7f3d0);
+  border: 2px solid var(--success);
+}
+
+.result-card.result-danger {
+  background: linear-gradient(135deg, #fee2e2, #fecaca);
+  border: 2px solid var(--danger);
+}
+
+.result-icon {
+  font-size: 3rem;
+}
+
+.result-safe .result-icon {
+  color: var(--success);
+}
+.result-danger .result-icon {
+  color: var(--danger);
+}
+
+.result-content h2 {
+  font-size: 1.5rem;
+  margin-bottom: 0.25rem;
+}
+
+.result-action {
+  margin-left: auto;
+}
+
+/* Quick Actions */
+.quick-actions {
+  display: flex;
+  gap: 0.75rem;
+  margin-bottom: 2rem;
+  flex-wrap: wrap;
+}
+
+/* Feature Groups */
+.feature-groups {
+  display: flex;
+  flex-direction: column;
+  gap: 1.5rem;
+}
+
+.feature-group-card {
+  background: var(--white);
+  border-radius: var(--radius-lg);
+  box-shadow: var(--shadow-md);
+  overflow: hidden;
+}
+
+.group-header {
+  display: flex;
+  align-items: center;
+  gap: 0.75rem;
+  padding: 1rem 1.5rem;
+  background: var(--gray-50);
+  border-bottom: 1px solid var(--gray-200);
+}
+
+.group-header i {
+  color: var(--primary);
+  font-size: 1.25rem;
+}
+
+.group-header h3 {
+  font-size: 1rem;
+  font-weight: 600;
+  color: var(--gray-800);
+}
+
+.inputs-grid {
+  display: grid;
+  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
+  gap: 1rem;
+  padding: 1.5rem;
+}
+
+.input-item {
+  display: flex;
+  flex-direction: column;
+  gap: 0.5rem;
+}
+
+.input-item label {
+  font-size: 0.8rem;
+  font-weight: 600;
+  color: var(--gray-700);
+  font-family: monospace;
+}
+
+/* Radio Button Group */
+.radio-group {
+  display: flex;
+  gap: 0.5rem;
+}
+
+.radio-label {
+  flex: 1;
+}
+
+.radio-label input {
+  display: none;
+}
+
+.radio-btn {
+  display: block;
+  padding: 0.5rem;
+  text-align: center;
+  border-radius: var(--radius);
+  font-weight: 600;
+  font-size: 0.875rem;
+  cursor: pointer;
+  transition: var(--transition);
+  border: 2px solid transparent;
+}
+
+.radio-btn.danger {
+  background: #fef2f2;
+  color: var(--danger);
+  border-color: #fecaca;
+}
+
+.radio-btn.warning {
+  background: #fffbeb;
+  color: var(--warning);
+  border-color: #fde68a;
+}
+
+.radio-btn.success {
+  background: #f0fdf4;
+  color: var(--success);
+  border-color: #bbf7d0;
+}
+
+.radio-label input:checked + .radio-btn.danger {
+  background: var(--danger);
+  color: white;
+  border-color: var(--danger);
+}
+
+.radio-label input:checked + .radio-btn.warning {
+  background: var(--warning);
+  color: white;
+  border-color: var(--warning);
+}
+
+.radio-label input:checked + .radio-btn.success {
+  background: var(--success);
+  color: white;
+  border-color: var(--success);
+}
+
+/* Form Actions */
+.form-actions {
+  text-align: center;
+  margin-top: 2rem;
+}
+
+/* Legend */
+.legend-card {
+  background: var(--gray-100);
+  border-radius: var(--radius-lg);
+  padding: 1.5rem;
+  margin-top: 2rem;
+}
+
+.legend-card h4 {
+  display: flex;
+  align-items: center;
+  gap: 0.5rem;
+  margin-bottom: 1rem;
+  color: var(--gray-700);
+}
+
+.legend-items {
+  display: flex;
+  gap: 2rem;
+  flex-wrap: wrap;
+}
+
+.legend-item {
+  display: flex;
+  align-items: center;
+  gap: 0.75rem;
+}
+
+.legend-badge {
+  padding: 0.25rem 0.75rem;
+  border-radius: var(--radius);
+  font-weight: 600;
+  font-size: 0.875rem;
+}
+
+.legend-badge.danger {
+  background: var(--danger);
+  color: white;
+}
+.legend-badge.warning {
+  background: var(--warning);
+  color: white;
+}
+.legend-badge.success {
+  background: var(--success);
+  color: white;
+}
+
+/* ============================================
+   Model Comparison Table
+   ============================================ */
+
+.models-table-container {
+  overflow-x: auto;
+}
+
+.models-table {
+  width: 100%;
+  border-collapse: collapse;
+}
+
+.models-table th,
+.models-table td {
+  padding: 1rem;
+  text-align: left;
+  border-bottom: 1px solid var(--gray-200);
+}
+
+.models-table th {
+  background: var(--gray-50);
+  font-weight: 600;
+  font-size: 0.75rem;
+  text-transform: uppercase;
+  letter-spacing: 0.05em;
+  color: var(--gray-600);
+}
+
+.models-table tr.best-model {
+  background: linear-gradient(90deg, rgba(16, 185, 129, 0.1), transparent);
+}
+
+.model-name {
+  display: flex;
+  align-items: center;
+  gap: 0.5rem;
+  font-weight: 600;
+}
+
+.trophy-icon {
+  color: #fbbf24;
+}
+
+.metric-bar {
+  position: relative;
+  height: 24px;
+  background: var(--gray-100);
+  border-radius: var(--radius);
+  overflow: hidden;
+  min-width: 100px;
+}
+
+.metric-fill {
+  position: absolute;
+  left: 0;
+  top: 0;
+  height: 100%;
+  background: var(--primary);
+  opacity: 0.2;
+  transition: width 0.5s ease;
+}
+
+.metric-fill.f1 {
+  background: var(--success);
+}
+.metric-fill.precision {
+  background: var(--info);
+}
+.metric-fill.recall {
+  background: var(--secondary);
+}
+
+.metric-bar span {
+  position: relative;
+  z-index: 1;
+  display: flex;
+  align-items: center;
+  height: 100%;
+  padding: 0 0.75rem;
+  font-weight: 600;
+  font-size: 0.8rem;
+}
+
+.badge {
+  display: inline-flex;
+  align-items: center;
+  gap: 0.25rem;
+  padding: 0.25rem 0.75rem;
+  border-radius: 9999px;
+  font-size: 0.75rem;
+  font-weight: 600;
+}
+
+.badge-success {
+  background: rgba(16, 185, 129, 0.1);
+  color: var(--success);
+}
+
+.badge-secondary {
+  background: var(--gray-100);
+  color: var(--gray-600);
+}
+
+/* ============================================
+   Pipeline Steps
+   ============================================ */
+
+.pipeline-steps {
+  display: flex;
+  align-items: flex-start;
+  justify-content: space-between;
+  gap: 0.5rem;
+  flex-wrap: wrap;
+}
+
+.pipeline-step {
+  flex: 1;
+  min-width: 140px;
+  text-align: center;
+  padding: 1rem;
+  position: relative;
+}
+
+.step-number {
+  position: absolute;
+  top: 0;
+  right: 1rem;
+  width: 24px;
+  height: 24px;
+  background: var(--primary);
+  color: white;
+  border-radius: 50%;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  font-size: 0.75rem;
+  font-weight: 700;
+}
+
+.step-icon {
+  width: 60px;
+  height: 60px;
+  margin: 0 auto 1rem;
+  background: linear-gradient(135deg, var(--primary), var(--secondary));
+  border-radius: var(--radius-lg);
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  color: white;
+  font-size: 1.5rem;
+}
+
+.pipeline-step h4 {
+  font-size: 0.9rem;
+  margin-bottom: 0.5rem;
+  color: var(--gray-800);
+}
+
+.pipeline-step p {
+  font-size: 0.75rem;
+  color: var(--gray-500);
+}
+
+.pipeline-arrow {
+  display: flex;
+  align-items: center;
+  color: var(--gray-300);
+  font-size: 1.5rem;
+  padding-top: 2rem;
+}
+
+@media (max-width: 768px) {
+  .pipeline-arrow {
+    display: none;
+  }
+
+  .pipeline-steps {
+    flex-direction: column;
+  }
+
+  .pipeline-step {
+    width: 100%;
+  }
+}
+
+/* ============================================
+   Prediction Options
+   ============================================ */
+
+.prediction-options {
+  margin-bottom: 3rem;
+}
+
+.section-title {
+  display: flex;
+  align-items: center;
+  gap: 0.75rem;
+  font-size: 1.25rem;
+  margin-bottom: 1.5rem;
+  color: var(--gray-800);
+}
+
+.section-title i {
+  color: var(--primary);
+}
+
+.options-grid {
+  display: grid;
+  grid-template-columns: repeat(2, 1fr);
+  gap: 2rem;
+}
+
+@media (max-width: 768px) {
+  .options-grid {
+    grid-template-columns: 1fr;
+  }
+}
+
+.upload-card,
+.manual-card,
+.train-card {
+  padding: 2rem;
+  text-align: center;
+}
+
+.train-card {
+  grid-column: 1 / -1;
+}
+
+.card-icon {
+  width: 80px;
+  height: 80px;
+  margin: 0 auto 1.5rem;
+  background: linear-gradient(135deg, var(--primary), var(--secondary));
+  border-radius: 50%;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  color: white;
+  font-size: 2rem;
+}
+
+.upload-card,
+.manual-card,
+.train-card {
+  padding: 2rem;
+  text-align: center;
+}
+
+.upload-card h3,
+.manual-card h3,
+.train-card h3 {
+  font-size: 1.25rem;
+  margin-bottom: 0.5rem;
+  color: var(--gray-800);
+}
+
+.upload-card p,
+.manual-card p,
+.train-card p {
+  color: var(--gray-500);
+  margin-bottom: 1.5rem;
+}
+
+.manual-preview {
+  background: var(--gray-50);
+  border-radius: var(--radius);
+  padding: 1rem;
+  margin-bottom: 1.5rem;
+  text-align: left;
+}
+
+.feature-preview {
+  display: flex;
+  justify-content: space-between;
+  padding: 0.5rem 0;
+  border-bottom: 1px solid var(--gray-200);
+}
+
+.feature-name {
+  font-family: monospace;
+  font-size: 0.8rem;
+  color: var(--gray-700);
+}
+
+.feature-values {
+  font-size: 0.75rem;
+  color: var(--gray-500);
+}
+
+.more-features {
+  text-align: center;
+  padding-top: 0.75rem;
+  color: var(--primary);
+  font-size: 0.875rem;
+  font-weight: 500;
+}
+
+.btn-secondary {
+  background: var(--secondary);
+  color: white;
+}
+
+.btn-secondary:hover {
+  background: #7c3aed;
+}
+
+/* ============================================
+   Animations
+   ============================================ */
+
+@keyframes slideDown {
+  from {
+    opacity: 0;
+    transform: translateY(-20px);
+  }
+  to {
+    opacity: 1;
+    transform: translateY(0);
+  }
+}
+
+/* ============================================
+   Notifications
+   ============================================ */
+.notification {
+    position: fixed;
+    top: 20px;
+    right: 20px;
+    background: white;
+    padding: 1rem 1.5rem;
+    border-radius: var(--radius);
+    box-shadow: var(--shadow-lg);
+    display: flex;
+    align-items: center;
+    gap: 0.75rem;
+    z-index: 1000;
+    transform: translateX(120%);
+    transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1);
+    border-left: 4px solid var(--info);
+    max-width: 400px;
+}
+
+.notification.show {
+    transform: translateX(0);
+}
+
+.notification-success {
+    border-left-color: var(--success);
+}
+.notification-success i {
+    color: var(--success);
+}
+
+.notification-error {
+    border-left-color: var(--danger);
+}
+.notification-error i {
+    color: var(--danger);
+}
+
+.notification-info {
+    border-left-color: var(--info);
+}
+.notification-info i {
+    color: var(--info);
+}
+
+/* ============================================
+   Modal
+   ============================================ */
+.modal-overlay {
+    position: fixed;
+    top: 0;
+    left: 0;
+    width: 100%;
+    height: 100%;
+    background: rgba(0, 0, 0, 0.5);
+    backdrop-filter: blur(4px);
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    z-index: 2000;
+    opacity: 0;
+    visibility: hidden;
+    transition: all 0.3s ease;
+}
+
+.modal-overlay.show {
+    opacity: 1;
+    visibility: visible;
+}
+
+.modal-content {
+    background: white;
+    padding: 2.5rem;
+    border-radius: var(--radius-lg);
+    box-shadow: var(--shadow-lg);
+    max-width: 500px;
+    width: 90%;
+    text-align: center;
+    position: relative;
+    transform: scale(0.9);
+    transition: transform 0.3s cubic-bezier(0.34, 1.56, 0.64, 1);
+}
+
+.modal-overlay.show .modal-content {
+    transform: scale(1);
+}
+
+.close-modal {
+    position: absolute;
+    top: 1rem;
+    right: 1rem;
+    background: none;
+    border: none;
+    font-size: 1.5rem;
+    color: var(--gray-400);
+    cursor: pointer;
+    transition: var(--transition);
+}
+
+.close-modal:hover {
+    color: var(--danger);
+    transform: rotate(90deg);
+}
+
+.modal-icon {
+    font-size: 4rem;
+    margin-bottom: 1.5rem;
+    color: var(--success);
+}
+
+.modal-title {
+    font-size: 1.5rem;
+    font-weight: 700;
+    color: var(--gray-900);
+    margin-bottom: 1rem;
+}
+
+.modal-message {
+    color: var(--gray-600);
+    line-height: 1.6;
+    margin-bottom: 2rem;
+}
+
+.modal-actions {
+    display: flex;
+    justify-content: center;
+    gap: 1rem;
+}
+
+/* ============================================
+   Results Page
+   ============================================ */
+.results-header {
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    margin-bottom: 2rem;
+    flex-wrap: wrap;
+    gap: 1rem;
+}
+
+.results-title h1 {
+    font-size: 2rem;
+    margin-bottom: 0.5rem;
+    display: flex;
+    align-items: center;
+    gap: 0.75rem;
+}
+
+.results-title h1 i {
+    color: var(--primary);
+}
+
+.summary-grid {
+    display: grid;
+    grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
+    gap: 1.5rem;
+    margin-bottom: 2rem;
+}
+
+.summary-card {
+    background: white;
+    padding: 1.5rem;
+    border-radius: var(--radius);
+    box-shadow: var(--shadow-sm);
+    display: flex;
+    align-items: center;
+    gap: 1.5rem;
+    position: relative;
+    overflow: hidden;
+    transition: var(--transition);
+}
+
+.summary-card:hover {
+    transform: translateY(-5px);
+    box-shadow: var(--shadow-md);
+}
+
+.summary-icon {
+    width: 60px;
+    height: 60px;
+    border-radius: 50%;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    font-size: 1.5rem;
+    flex-shrink: 0;
+}
+
+.summary-card.total .summary-icon { background: var(--gray-100); color: var(--gray-600); }
+.summary-card.safe .summary-icon { background: #dcfce7; color: var(--success); }
+.summary-card.danger .summary-icon { background: #fee2e2; color: var(--danger); }
+.summary-card.threat .summary-icon { background: #e0e7ff; color: var(--primary); }
+
+.summary-info {
+    display: flex;
+    flex-direction: column;
+}
+
+.summary-value {
+    font-size: 1.75rem;
+    font-weight: 700;
+    color: var(--gray-900);
+    line-height: 1.2;
+}
+
+.summary-label {
+    font-size: 0.875rem;
+    color: var(--gray-500);
+}
+
+.summary-percent {
+    position: absolute;
+    top: 1rem;
+    right: 1rem;
+    font-size: 0.875rem;
+    font-weight: 600;
+    opacity: 0.8;
+}
+
+.summary-card.safe .summary-percent { color: var(--success); }
+.summary-card.danger .summary-percent { color: var(--danger); }
+
+/* Threat Visualization */
+.threat-visual {
+    padding: 1rem 0;
+}
+
+.threat-bar-container {
+    height: 24px;
+    background: var(--gray-100);
+    border-radius: 12px;
+    overflow: hidden;
+    margin-bottom: 1.5rem;
+}
+
+.threat-bar {
+    display: flex;
+    height: 100%;
+}
+
+.threat-segment {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    color: white;
+    font-size: 0.75rem;
+    font-weight: 600;
+    transition: width 1s ease-out;
+}
+
+.threat-segment.safe { background: var(--success); }
+.threat-segment.danger { background: var(--danger); }
+
+.threat-message {
+    background: var(--gray-50);
+    padding: 1rem;
+    border-radius: var(--radius);
+}
+
+.threat-message i {
+    
+    font-size: 1.25rem;
+    margin-right: 0.75rem;
+    vertical-align: middle;
+}
+
+.message-safe i { color: var(--success); }
+.message-warning i { color: var(--warning); }
+.message-danger i { color: var(--danger); }
+
+/* Results Table */
+.table-wrapper {
+    overflow-x: auto;
+}
+
+.results-table {
+    width: 100%;
+    border-collapse: collapse;
+}
+
+.results-table th,
+.results-table td {
+    padding: 1rem;
+    text-align: left;
+    border-bottom: 1px solid var(--gray-200);
+}
+
+.results-table th {
+    background: var(--gray-50);
+    font-weight: 600;
+    color: var(--gray-700);
+    white-space: nowrap;
+}
+
+.results-table tr:hover {
+    background: var(--gray-50);
+}
+
+.results-table .col-index {
+    width: 60px;
+    color: var(--gray-400);
+}
+
+.label-badge {
+    display: inline-block;
+    padding: 0.25rem 0.75rem;
+    border-radius: 20px;
+    font-size: 0.75rem;
+    font-weight: 600;
+}
+
+.label-badge.success { background: #dcfce7; color: var(--success); }
+.label-badge.danger { background: #fee2e2; color: var(--danger); }
+
+.confidence-bar {
+    display: flex;
+    align-items: center;
+    gap: 0.5rem;
+    width: 120px;
+}
+
+.confidence-fill {
+    height: 6px;
+    border-radius: 3px;
+    background: var(--primary);
+    flex-grow: 1;
+}
+
+.bottom-actions {
+    display: flex;
+    justify-content: center;
+    gap: 1.5rem;
+    margin-top: 3rem;
+    flex-wrap: wrap;
+}

static/js/main.js

@@ -0,0 +1,271 @@
+// ============================================
+// Network Security - Main JavaScript
+// ============================================
+
+document.addEventListener('DOMContentLoaded', function() {
+    initFileUpload();
+    initTrainingHandler();
+    initAnimations();
+    initDynamicWidths();
+});
+
+// ============================================
+// Training Handler
+// ============================================
+
+function initTrainingHandler() {
+    const trainBtn = document.getElementById('train-btn');
+    if (!trainBtn) return;
+
+    // Create Modal HTML if not exists
+    if (!document.getElementById('success-modal')) {
+        const modalHtml = `
+            <div id="success-modal" class="modal-overlay">
+                <div class="modal-content">
+                    <button class="close-modal">&times;</button>
+                    <div class="modal-icon">
+                        <i class="fas fa-check-circle"></i>
+                    </div>
+                    <h3 class="modal-title">Training Successful!</h3>
+                    <p class="modal-message">
+                        Model has been trained successfully. You can inspect the detailed metrics and experiments on DagsHub.
+                    </p>
+                    <div class="modal-actions">
+                        <a href="https://dagshub.com/Inder-26/NetworkSecurity/experiments" target="_blank" class="btn btn-primary">
+                            <i class="fas fa-external-link-alt"></i>
+                            Check Experiments
+                        </a>
+                    </div>
+                </div>
+            </div>
+        `;
+        document.body.insertAdjacentHTML('beforeend', modalHtml);
+        
+        // Modal Close Logic
+        document.querySelector('.close-modal').addEventListener('click', () => {
+             document.getElementById('success-modal').classList.remove('show');
+             // Optional: reload page when modal is closed to refresh any data
+             // window.location.reload(); 
+        });
+    }
+
+    trainBtn.addEventListener('click', async function() {
+        if (!confirm('Are you sure you want to start model training? This may take a few minutes.')) {
+            return;
+        }
+
+        const originalText = trainBtn.innerHTML;
+        trainBtn.disabled = true;
+        trainBtn.innerHTML = '<i class="fas fa-spinner fa-spin"></i> Training in Progress...';
+        
+        try {
+            showNotification('Training started. Please wait...', 'info');
+            
+            const response = await fetch('/api/train', {
+                method: 'POST'
+            });
+            
+            const data = await response.json();
+            
+            if (response.ok) {
+                // Show Modal
+                const modal = document.getElementById('success-modal');
+                modal.classList.add('show');
+                
+                // Reset button
+                 trainBtn.disabled = false;
+                 trainBtn.innerHTML = originalText;
+                 
+            } else {
+                throw new Error(data.detail || 'Training failed');
+            }
+        } catch (error) {
+            console.error('Training Error:', error);
+            showNotification(`Training failed: ${error.message}`, 'error');
+            trainBtn.disabled = false;
+            trainBtn.innerHTML = originalText;
+        }
+    });
+}
+
+// ============================================
+// File Upload Handling
+// ============================================
+
+function initFileUpload() {
+    const uploadZone = document.getElementById('upload-zone');
+    const fileInput = document.getElementById('file-input');
+    const fileInfo = document.getElementById('file-info');
+    const fileName = document.getElementById('file-name');
+    const removeBtn = document.getElementById('remove-file');
+    const submitBtn = document.getElementById('submit-btn');
+    const form = document.getElementById('upload-form');
+
+    if (!uploadZone) return;
+
+    // Drag and drop
+    ['dragenter', 'dragover', 'dragleave', 'drop'].forEach(eventName => {
+        uploadZone.addEventListener(eventName, preventDefaults, false);
+    });
+
+    function preventDefaults(e) {
+        e.preventDefault();
+        e.stopPropagation();
+    }
+
+    ['dragenter', 'dragover'].forEach(eventName => {
+        uploadZone.addEventListener(eventName, () => {
+            uploadZone.classList.add('dragover');
+        }, false);
+    });
+
+    ['dragleave', 'drop'].forEach(eventName => {
+        uploadZone.addEventListener(eventName, () => {
+            uploadZone.classList.remove('dragover');
+        }, false);
+    });
+
+    uploadZone.addEventListener('drop', handleDrop, false);
+
+    function handleDrop(e) {
+        const dt = e.dataTransfer;
+        const files = dt.files;
+        
+        if (files.length > 0) {
+            fileInput.files = files;
+            handleFileSelect(files[0]);
+        }
+    }
+
+    // File input change
+    fileInput.addEventListener('change', function(e) {
+        if (e.target.files.length > 0) {
+            handleFileSelect(e.target.files[0]);
+        }
+    });
+
+    function handleFileSelect(file) {
+        if (!file.name.endsWith('.csv')) {
+            showNotification('Please upload a CSV file', 'error');
+            return;
+        }
+
+        fileName.textContent = file.name;
+        uploadZone.style.display = 'none';
+        fileInfo.style.display = 'flex';
+        submitBtn.disabled = false;
+    }
+
+    // Remove file
+    if (removeBtn) {
+        removeBtn.addEventListener('click', function() {
+            fileInput.value = '';
+            uploadZone.style.display = 'block';
+            fileInfo.style.display = 'none';
+            submitBtn.disabled = true;
+        });
+    }
+
+    // Form submit
+    if (form) {
+        form.addEventListener('submit', function(e) {
+            submitBtn.innerHTML = '<i class="fas fa-spinner fa-spin"></i> Analyzing...';
+            submitBtn.disabled = true;
+        });
+    }
+}
+
+// ============================================
+// Notifications
+// ============================================
+
+function showNotification(message, type = 'info') {
+    const notification = document.createElement('div');
+    notification.className = `notification notification-${type}`;
+    notification.innerHTML = `
+        <i class="fas fa-${type === 'error' ? 'exclamation-circle' : 'info-circle'}"></i>
+        <span>${message}</span>
+    `;
+    
+    document.body.appendChild(notification);
+    
+    setTimeout(() => {
+        notification.classList.add('show');
+    }, 100);
+    
+    setTimeout(() => {
+        notification.classList.remove('show');
+        setTimeout(() => notification.remove(), 300);
+    }, 3000);
+}
+
+// ============================================
+// Animations
+// ============================================
+
+function initAnimations() {
+    // Animate elements on scroll
+    const observerOptions = {
+        threshold: 0.1,
+        rootMargin: '0px 0px -50px 0px'
+    };
+
+    const observer = new IntersectionObserver((entries) => {
+        entries.forEach(entry => {
+            if (entry.isIntersecting) {
+                entry.target.classList.add('animate-in');
+                observer.unobserve(entry.target);
+            }
+        });
+    }, observerOptions);
+
+    document.querySelectorAll('.card').forEach(card => {
+        observer.observe(card);
+    });
+
+    // Animate metric circles
+    document.querySelectorAll('.metric-circle').forEach(circle => {
+        const progress = circle.style.getPropertyValue('--progress');
+        circle.style.setProperty('--progress', '0');
+        
+        setTimeout(() => {
+            circle.style.transition = 'all 1s ease-out';
+            circle.style.setProperty('--progress', progress);
+        }, 300);
+    });
+}
+
+function initDynamicWidths() {
+    const dynamicElements = document.querySelectorAll('[data-width]');
+    
+    dynamicElements.forEach(el => {
+        const width = el.getAttribute('data-width');
+        if (width) {
+            // Apply immediately if it's not an animated element, or let CSS transitions handle it
+            // We set it as a style property so the browser sees it as valid CSS
+            setTimeout(() => {
+                el.style.width = `${width}%`;
+            }, 100); // Small delay to ensure transitions work if present
+        }
+    });
+}
+
+// ============================================
+// Utility Functions
+// ============================================
+
+function formatNumber(num) {
+    return new Intl.NumberFormat().format(num);
+}
+
+function debounce(func, wait) {
+    let timeout;
+    return function executedFunction(...args) {
+        const later = () => {
+            clearTimeout(timeout);
+            func(...args);
+        };
+        clearTimeout(timeout);
+        timeout = setTimeout(later, wait);
+    };
+}

templates/index.html

@@ -0,0 +1,341 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>{{ title }}</title>
+    <link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css" rel="stylesheet">
+    <link href="https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700;800&display=swap" rel="stylesheet">
+    <link rel="stylesheet" href="/static/css/style.css">
+</head>
+<body>
+    <!-- Header -->
+    <header class="header">
+        <div class="container">
+            <div class="header-content">
+                <a href="/" class="logo">
+                    <i class="fas fa-shield-alt"></i>
+                    <span>Network Security</span>
+                </a>
+                <nav class="nav-links">
+                    <a href="/manual" class="nav-link">
+                        <i class="fas fa-keyboard"></i>
+                        <span>Manual Input</span>
+                    </a>
+                    <a href="{{ github_url }}" target="_blank" class="nav-link">
+                        <i class="fab fa-github"></i>
+                        <span>GitHub</span>
+                    </a>
+                    <a href="{{ dagshub_url }}" target="_blank" class="nav-link">
+                        <i class="fas fa-flask"></i>
+                        <span>DagsHub</span>
+                    </a>
+                </nav>
+            </div>
+        </div>
+    </header>
+
+    <!-- Hero Section -->
+    <section class="hero">
+        <div class="container">
+            <div class="hero-content">
+                <div class="hero-badge">
+                    <i class="fas fa-robot"></i>
+                    <span>ML-Powered Security</span>
+                </div>
+                <h1>🛡️ Phishing URL Detection</h1>
+                <p class="hero-subtitle">
+                    Protect your network with AI-powered threat detection. 
+                    Analyze URLs using 30 security features and machine learning.
+                </p>
+                <div class="hero-stats">
+                    <div class="stat-card">
+                        <div class="stat-icon">
+                            <i class="fas fa-brain"></i>
+                        </div>
+                        <div class="stat-info">
+                            <span class="stat-value">{{ metrics.model_name }}</span>
+                            <span class="stat-label">Best Model</span>
+                        </div>
+                    </div>
+                    <div class="stat-card">
+                        <div class="stat-icon">
+                            <i class="fas fa-bullseye"></i>
+                        </div>
+                        <div class="stat-info">
+                            <span class="stat-value">{{ "%.1f"|format(metrics.f1_score * 100) }}%</span>
+                            <span class="stat-label">F1 Score</span>
+                        </div>
+                    </div>
+                    <div class="stat-card">
+                        <div class="stat-icon">
+                            <i class="fas fa-columns"></i>
+                        </div>
+                        <div class="stat-info">
+                            <span class="stat-value">{{ feature_count }}</span>
+                            <span class="stat-label">Features</span>
+                        </div>
+                    </div>
+                    <div class="stat-card">
+                        <div class="stat-icon">
+                            <i class="fas fa-layer-group"></i>
+                        </div>
+                        <div class="stat-info">
+                            <span class="stat-value">5</span>
+                            <span class="stat-label">ML Models</span>
+                        </div>
+                    </div>
+                </div>
+            </div>
+        </div>
+    </section>
+
+    <!-- Main Content -->
+    <main class="main-content">
+        <div class="container">
+            
+            <!-- Prediction Options -->
+            <div class="prediction-options">
+                <h2 class="section-title">
+                    <i class="fas fa-magic"></i>
+                    Choose Prediction Method
+                </h2>
+                <div class="options-grid">
+                     <!-- Train Model -->
+                    <div class="card train-card">
+                         <div class="card-icon">
+                            <i class="fas fa-hammer"></i>
+                        </div>
+                        <h3>Train New Model</h3>
+                        <p>Trigger a new training pipeline to update the model</p>
+                         <button id="train-btn" class="btn btn-warning btn-block">
+                            <i class="fas fa-play"></i>
+                            Start Training
+                        </button>
+                    </div>
+
+                    <!-- Upload CSV -->
+                    <div class="card upload-card">
+                        <div class="card-icon">
+                            <i class="fas fa-file-upload"></i>
+                        </div>
+                        <h3>Batch Prediction</h3>
+                        <p>Upload a CSV file containing URL features for bulk analysis</p>
+                        <form id="upload-form" action="/predict" method="post" enctype="multipart/form-data">
+                             <div id="upload-zone" class="upload-zone">
+                                <div class="upload-content">
+                                    <i class="fas fa-cloud-upload-alt"></i>
+                                    <p>Drag & Drop CSV file here</p>
+                                    <span>or click to browse</span>
+                                </div>
+                                <input type="file" name="file" id="file-input" accept=".csv" required>
+                            </div>
+                            <div id="file-info" class="file-info">
+                                <i class="fas fa-file-csv"></i>
+                                <span id="file-name">filename.csv</span>
+                                <button type="button" id="remove-file" class="btn-remove">
+                                    <i class="fas fa-times"></i>
+                                </button>
+                            </div>
+                            <button type="submit" id="submit-btn" class="btn btn-primary btn-block" disabled>
+                                <i class="fas fa-search"></i>
+                                Analyze File
+                            </button>
+                        </form>
+                    </div>
+
+                    <!-- Manual Input -->
+                    <div class="card manual-card">
+                        <div class="card-icon">
+                            <i class="fas fa-keyboard"></i>
+                        </div>
+                        <h3>Manual Input</h3>
+                        <p>Enter URL features manually to check for phishing</p>
+                        <div class="manual-preview">
+                            <div class="feature-preview">
+                                <span class="feature-name">having_IP_Address</span>
+                                <span class="feature-values">-1 / 0 / 1</span>
+                            </div>
+                            <div class="feature-preview">
+                                <span class="feature-name">URL_Length</span>
+                                <span class="feature-values">-1 / 0 / 1</span>
+                            </div>
+                            <div class="feature-preview">
+                                <span class="feature-name">SSLfinal_State</span>
+                                <span class="feature-values">-1 / 0 / 1</span>
+                            </div>
+                            <div class="more-features">
+                                <span>+ 27 more features</span>
+                            </div>
+                        </div>
+                        <a href="/manual" class="btn btn-secondary btn-block">
+                            <i class="fas fa-edit"></i>
+                            Open Manual Input
+                        </a>
+                    </div>
+                </div>
+            </div>
+
+            <!-- Model Performance Comparison (Removed as per user request to reduce clutter) -->
+            <!-- Real-time stats are shown in the Hero section -->
+            
+            <!-- Features Section -->
+            <div class="card features-card">
+                <div class="card-header">
+                    <i class="fas fa-list-check"></i>
+                    <h2>Required Features (30 Columns)</h2>
+                </div>
+                <div class="card-body">
+                    <div class="features-grid">
+                        <div class="feature-group">
+                            <h4><i class="fas fa-link"></i> URL Structure</h4>
+                            <ul>
+                                <li><code>having_IP_Address</code></li>
+                                <li><code>URL_Length</code></li>
+                                <li><code>Shortining_Service</code></li>
+                                <li><code>having_At_Symbol</code></li>
+                                <li><code>double_slash_redirecting</code></li>
+                                <li><code>Prefix_Suffix</code></li>
+                                <li><code>having_Sub_Domain</code></li>
+                                <li><code>Abnormal_URL</code></li>
+                            </ul>
+                        </div>
+                        <div class="feature-group">
+                            <h4><i class="fas fa-lock"></i> Security</h4>
+                            <ul>
+                                <li><code>SSLfinal_State</code></li>
+                                <li><code>HTTPS_token</code></li>
+                                <li><code>port</code></li>
+                                <li><code>Favicon</code></li>
+                                <li><code>Statistical_report</code></li>
+                            </ul>
+                        </div>
+                        <div class="feature-group">
+                            <h4><i class="fas fa-code"></i> Page Content</h4>
+                            <ul>
+                                <li><code>Request_URL</code></li>
+                                <li><code>URL_of_Anchor</code></li>
+                                <li><code>Links_in_tags</code></li>
+                                <li><code>SFH</code></li>
+                                <li><code>Submitting_to_email</code></li>
+                            </ul>
+                        </div>
+                        <div class="feature-group">
+                            <h4><i class="fas fa-mouse-pointer"></i> Page Behavior</h4>
+                            <ul>
+                                <li><code>Redirect</code></li>
+                                <li><code>on_mouseover</code></li>
+                                <li><code>RightClick</code></li>
+                                <li><code>popUpWidnow</code></li>
+                                <li><code>Iframe</code></li>
+                            </ul>
+                        </div>
+                        <div class="feature-group">
+                            <h4><i class="fas fa-globe"></i> Domain Info</h4>
+                            <ul>
+                                <li><code>Domain_registeration_length</code></li>
+                                <li><code>age_of_domain</code></li>
+                                <li><code>DNSRecord</code></li>
+                                <li><code>web_traffic</code></li>
+                                <li><code>Page_Rank</code></li>
+                                <li><code>Google_Index</code></li>
+                                <li><code>Links_pointing_to_page</code></li>
+                            </ul>
+                        </div>
+                    </div>
+                    <div class="feature-note">
+                        <i class="fas fa-info-circle"></i>
+                        <div>
+                            <strong>Value Range:</strong> All features should be integers with values: 
+                            <code>-1</code> (Phishing indicator), 
+                            <code>0</code> (Suspicious), or 
+                            <code>1</code> (Legitimate indicator)
+                        </div>
+                    </div>
+                </div>
+            </div>
+
+            <!-- How It Works -->
+            <div class="card how-it-works-card">
+                <div class="card-header">
+                    <i class="fas fa-cogs"></i>
+                    <h2>How It Works</h2>
+                </div>
+                <div class="card-body">
+                    <div class="pipeline-steps">
+                        <div class="pipeline-step">
+                            <div class="step-number">1</div>
+                            <div class="step-icon"><i class="fas fa-database"></i></div>
+                            <h4>Data Ingestion</h4>
+                            <p>Raw data pulled from MongoDB and split into train/test sets</p>
+                        </div>
+                        <div class="pipeline-arrow"><i class="fas fa-arrow-right"></i></div>
+                        <div class="pipeline-step">
+                            <div class="step-number">2</div>
+                            <div class="step-icon"><i class="fas fa-check-double"></i></div>
+                            <h4>Validation</h4>
+                            <p>Schema validation & KS drift detection</p>
+                        </div>
+                        <div class="pipeline-arrow"><i class="fas fa-arrow-right"></i></div>
+                        <div class="pipeline-step">
+                            <div class="step-number">3</div>
+                            <div class="step-icon"><i class="fas fa-random"></i></div>
+                            <h4>Transformation</h4>
+                            <p>KNN Imputation & target mapping</p>
+                        </div>
+                        <div class="pipeline-arrow"><i class="fas fa-arrow-right"></i></div>
+                        <div class="pipeline-step">
+                            <div class="step-number">4</div>
+                            <div class="step-icon"><i class="fas fa-robot"></i></div>
+                            <h4>Model Training</h4>
+                            <p>5 models evaluated, best selected by F1 score</p>
+                        </div>
+                        <div class="pipeline-arrow"><i class="fas fa-arrow-right"></i></div>
+                        <div class="pipeline-step">
+                            <div class="step-number">5</div>
+                            <div class="step-icon"><i class="fas fa-rocket"></i></div>
+                            <h4>Deployment</h4>
+                            <p>Model served via FastAPI on Hugging Face</p>
+                        </div>
+                    </div>
+                </div>
+            </div>
+
+        </div>
+    </main>
+
+    <!-- Footer -->
+    <footer class="footer">
+        <div class="container">
+            <div class="footer-content">
+                <div class="footer-left">
+                    <div class="footer-logo">
+                        <i class="fas fa-shield-alt"></i>
+                        <span>Network Security</span>
+                    </div>
+                    <p>Built with ❤️ by <strong>Inderjeet</strong></p>
+                    <p class="footer-tech">
+                        <span><i class="fab fa-python"></i> Python</span>
+                        <span><i class="fas fa-bolt"></i> FastAPI</span>
+                        <span><i class="fas fa-chart-line"></i> MLflow</span>
+                        <span><i class="fas fa-database"></i> MongoDB</span>
+                    </p>
+                </div>
+                <div class="footer-right">
+                    <a href="https://github.com/Inder-26/NetworkSecurity" target="_blank" title="GitHub">
+                        <i class="fab fa-github"></i>
+                    </a>
+                    <a href="https://dagshub.com/inder-26/NetworkSecurity" target="_blank" title="DagsHub">
+                        <i class="fas fa-flask"></i>
+                    </a>
+                    <a href="https://www.linkedin.com/in/inderjeet-singh-26n/" target="_blank" title="LinkedIn">
+                        <i class="fab fa-linkedin"></i>
+                    </a>
+                </div>
+            </div>
+        </div>
+    </footer>
+
+    <script src="/static/js/main.js"></script>
+</body>
+</html>

templates/predict.html

@@ -1,21 +1,230 @@
 <!DOCTYPE html>
-<html>
+<html lang="en">
 <head>
-    <title>Data Table</title>
-    <style>
-        table {
-            border-collapse: collapse;
-            width: 100%;
-        }
-        th, td {
-            border: 1px solid black;
-            padding: 8px;
-            text-align: left;
-        }
-    </style>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>{{ title }} - Network Security</title>
+    <link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css" rel="stylesheet">
+    <link href="https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700;800&display=swap" rel="stylesheet">
+    <link rel="stylesheet" href="/static/css/style.css">
 </head>
 <body>
-    <h2>Predicted Data</h2>
-    {{ table | safe }}
+    <!-- Header -->
+    <header class="header">
+        <div class="container">
+            <div class="header-content">
+                <a href="/" class="logo">
+                    <i class="fas fa-shield-alt"></i>
+                    <span>Network Security</span>
+                </a>
+                <nav class="nav-links">
+                    <a href="/" class="nav-link">
+                        <i class="fas fa-home"></i>
+                        <span>Home</span>
+                    </a>
+                    <a href="{{ github_url }}" target="_blank" class="nav-link">
+                        <i class="fab fa-github"></i>
+                        <span>GitHub</span>
+                    </a>
+                    <a href="{{ dagshub_url }}" target="_blank" class="nav-link">
+                        <i class="fas fa-flask"></i>
+                        <span>DagsHub</span>
+                    </a>
+                </nav>
+            </div>
+        </div>
+    </header>
+
+    <main class="main-content results-page">
+        <div class="container">
+            
+            <!-- Results Header -->
+            <div class="results-header">
+                <div class="results-title">
+                    <h1><i class="fas fa-chart-pie"></i> Prediction Results</h1>
+                    <p>Analysis complete for {{ summary.total }} URLs</p>
+                </div>
+                <div class="results-actions">
+                    <a href="/download/results/{{ output_filename }}" class="btn btn-primary">
+                        <i class="fas fa-download"></i> Download CSV
+                    </a>
+                    <a href="/" class="btn btn-outline">
+                        <i class="fas fa-plus"></i> New Analysis
+                    </a>
+                </div>
+            </div>
+
+            <!-- Summary Cards -->
+            <div class="summary-grid">
+                <div class="summary-card total">
+                    <div class="summary-icon">
+                        <i class="fas fa-list-ol"></i>
+                    </div>
+                    <div class="summary-info">
+                        <span class="summary-value">{{ summary.total }}</span>
+                        <span class="summary-label">Total URLs Analyzed</span>
+                    </div>
+                </div>
+                
+                <div class="summary-card safe">
+                    <div class="summary-icon">
+                        <i class="fas fa-check-circle"></i>
+                    </div>
+                    <div class="summary-info">
+                        <span class="summary-value">{{ summary.legitimate }}</span>
+                        <span class="summary-label">Legitimate URLs</span>
+                    </div>
+                    <div class="summary-percent">{{ ((summary.legitimate / summary.total) * 100)|round(1) }}%</div>
+                </div>
+                
+                <div class="summary-card danger">
+                    <div class="summary-icon">
+                        <i class="fas fa-exclamation-triangle"></i>
+                    </div>
+                    <div class="summary-info">
+                        <span class="summary-value">{{ summary.phishing }}</span>
+                        <span class="summary-label">Phishing URLs</span>
+                    </div>
+                    <div class="summary-percent">{{ summary.phishing_percent }}%</div>
+                </div>
+                
+                <div class="summary-card threat">
+                    <div class="summary-icon">
+                        <i class="fas fa-shield-alt"></i>
+                    </div>
+                    <div class="summary-info">
+                        <span class="summary-value">
+                            {% if summary.phishing_percent < 20 %}Low
+                            {% elif summary.phishing_percent < 50 %}Medium
+                            {% else %}High
+                            {% endif %}
+                        </span>
+                        <span class="summary-label">Threat Level</span>
+                    </div>
+                </div>
+            </div>
+
+            <!-- Threat Visualization -->
+            <div class="card threat-card">
+                <div class="card-header">
+                    <i class="fas fa-tachometer-alt"></i>
+                    <h2>Threat Assessment</h2>
+                </div>
+                <div class="card-body">
+                    <div class="threat-visual">
+                        <div class="threat-bar-container">
+                            <div class="threat-bar">
+                                <div class="threat-segment safe" data-width="{{ ((summary.legitimate / summary.total) * 100)|round(1) }}">
+                                    <span>{{ summary.legitimate }} Safe</span>
+                                </div>
+                                <div class="threat-segment danger" data-width="{{ summary.phishing_percent }}">
+                                    <span>{{ summary.phishing }} Threats</span>
+                                </div>
+                            </div>
+                        </div>
+                        <div class="threat-message">
+                            {% if summary.phishing_percent < 20 %}
+                            <div class="message-safe">
+                                <i class="fas fa-shield-alt"></i>
+                                <p><strong>Low Risk:</strong> The majority of URLs appear to be legitimate. Continue with normal operations.</p>
+                            </div>
+                            {% elif summary.phishing_percent < 50 %}
+                            <div class="message-warning">
+                                <i class="fas fa-exclamation-circle"></i>
+                                <p><strong>Moderate Risk:</strong> Some URLs show phishing characteristics. Review flagged URLs before accessing.</p>
+                            </div>
+                            {% else %}
+                            <div class="message-danger">
+                                <i class="fas fa-skull-crossbones"></i>
+                                <p><strong>High Risk:</strong> Many URLs are potentially malicious. Avoid clicking on flagged links.</p>
+                            </div>
+                            {% endif %}
+                        </div>
+                    </div>
+                </div>
+            </div>
+
+            <!-- Results Table -->
+            <div class="card table-card">
+                <div class="card-header">
+                    <i class="fas fa-table"></i>
+                    <h2>Detailed Results</h2>
+                    <span class="record-count">{{ summary.total }} records</span>
+                </div>
+                <div class="card-body">
+                    <div class="table-wrapper">
+                        <table class="results-table">
+                            <thead>
+                                <tr>
+                                    <th class="col-index">#</th>
+                                    {% for col in columns %}
+                                    <th>{{ col }}</th>
+                                    {% endfor %}
+                                </tr>
+                            </thead>
+                            <tbody>
+                                {% for row in results %}
+                                <tr class="{{ 'row-danger' if row.Prediction == 1 else 'row-safe' }}">
+                                    <td class="col-index">{{ loop.index }}</td>
+                                    {% for col in columns %}
+                                    <td>
+                                        {% if col == 'Label' %}
+                                        <span class="label-badge {{ 'danger' if 'Phishing' in row[col] else 'success' }}">
+                                            {{ row[col] }}
+                                        </span>
+                                        {% elif col == 'Confidence' %}
+                                        <div class="confidence-bar">
+                                            <div class="confidence-fill" data-width="{{ row[col] }}"></div>
+                                            <span>{{ row[col] }}%</span>
+                                        </div>
+                                        {% elif col == 'Prediction' %}
+                                        <span class="prediction-value {{ 'danger' if row[col] == 1 else 'success' }}">
+                                            {{ row[col] }}
+                                        </span>
+                                        {% else %}
+                                        {{ row[col] }}
+                                        {% endif %}
+                                    </td>
+                                    {% endfor %}
+                                </tr>
+                                {% endfor %}
+                            </tbody>
+                        </table>
+                    </div>
+                </div>
+            </div>
+
+            <!-- Actions -->
+            <div class="bottom-actions">
+                <a href="/" class="btn btn-primary btn-lg">
+                    <i class="fas fa-redo"></i> Analyze More URLs
+                </a>
+                <a href="/download/results/{{ output_filename }}" class="btn btn-outline btn-lg">
+                    <i class="fas fa-file-csv"></i> Export Full Report
+                </a>
+                <a href="/manual" class="btn btn-outline btn-lg">
+                    <i class="fas fa-keyboard"></i> Try Manual Input
+                </a>
+            </div>
+
+        </div>
+    </main>
+
+    <!-- Footer -->
+    <footer class="footer">
+        <div class="container">
+            <div class="footer-content">
+                <div class="footer-left">
+                    <p>Built with ❤️ by <strong>Inderjeet</strong></p>
+                </div>
+                <div class="footer-right">
+                    <a href="{{ github_url }}" target="_blank"><i class="fab fa-github"></i></a>
+                    <a href="{{ dagshub_url }}" target="_blank"><i class="fas fa-flask"></i></a>
+                </div>
+            </div>
+        </div>
+    </footer>
+
+    <script src="/static/js/main.js"></script>
 </body>
 </html>

templates/single_predict.html

@@ -0,0 +1,436 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>{{ title }} - Network Security</title>
+    <link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css" rel="stylesheet">
+    <link href="https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700;800&display=swap" rel="stylesheet">
+    <link rel="stylesheet" href="/static/css/style.css">
+</head>
+<body>
+    <!-- Header -->
+    <header class="header">
+        <div class="container">
+            <div class="header-content">
+                <a href="/" class="logo">
+                    <i class="fas fa-shield-alt"></i>
+                    <span>Network Security</span>
+                </a>
+                <nav class="nav-links">
+                    <a href="/" class="nav-link">
+                        <i class="fas fa-home"></i>
+                        <span>Home</span>
+                    </a>
+                    <a href="{{ github_url }}" target="_blank" class="nav-link">
+                        <i class="fab fa-github"></i>
+                        <span>GitHub</span>
+                    </a>
+                    <a href="{{ dagshub_url }}" target="_blank" class="nav-link">
+                        <i class="fas fa-flask"></i>
+                        <span>DagsHub</span>
+                    </a>
+                </nav>
+            </div>
+        </div>
+    </header>
+
+    <main class="main-content manual-page">
+        <div class="container">
+            
+            <!-- Page Header -->
+            <div class="page-header">
+                <h1><i class="fas fa-keyboard"></i> Manual Feature Input</h1>
+                <p>Enter the 30 feature values to predict if a URL is phishing or legitimate</p>
+            </div>
+
+            <!-- Result Display (if prediction was made) -->
+            {% if result %}
+            <div class="result-card {{ 'result-danger' if result.is_threat else 'result-safe' }}">
+                <div class="result-icon">
+                    {% if result.is_threat %}
+                    <i class="fas fa-exclamation-triangle"></i>
+                    {% else %}
+                    <i class="fas fa-check-circle"></i>
+                    {% endif %}
+                </div>
+                <div class="result-content">
+                    <h2>{{ result.label }}</h2>
+                    <p>Confidence: <strong>{{ result.confidence }}%</strong></p>
+                </div>
+                <div class="result-action">
+                    <a href="/manual" class="btn btn-outline">
+                        <i class="fas fa-redo"></i> New Prediction
+                    </a>
+                </div>
+            </div>
+            {% endif %}
+
+            <!-- Input Form -->
+            <form id="manual-form" action="/predict/single" method="post" class="manual-form">
+                
+                <!-- Quick Actions -->
+                <div class="quick-actions">
+                    <button type="button" class="btn btn-outline btn-sm" onclick="fillSample('legitimate')">
+                        <i class="fas fa-check"></i> Fill Legitimate Sample
+                    </button>
+                    <button type="button" class="btn btn-outline btn-sm" onclick="fillSample('phishing')">
+                        <i class="fas fa-bug"></i> Fill Phishing Sample
+                    </button>
+                    <button type="button" class="btn btn-outline btn-sm" onclick="clearForm()">
+                        <i class="fas fa-eraser"></i> Clear All
+                    </button>
+                </div>
+
+                <!-- Feature Groups -->
+                <div class="feature-groups">
+                    
+                    <!-- URL Structure -->
+                    <div class="feature-group-card">
+                        <div class="group-header">
+                            <i class="fas fa-link"></i>
+                            <h3>URL Structure</h3>
+                        </div>
+                        <div class="inputs-grid">
+                            <div class="input-item">
+                                <label for="having_IP_Address">having_IP_Address</label>
+                                <div class="radio-group">
+                                    <label class="radio-label">
+                                        <input type="radio" name="having_IP_Address" value="-1" {{ 'checked' if input_values and input_values.having_IP_Address == -1 }}>
+                                        <span class="radio-btn danger">-1</span>
+                                    </label>
+                                    <label class="radio-label">
+                                        <input type="radio" name="having_IP_Address" value="0" {{ 'checked' if not input_values or input_values.having_IP_Address == 0 }}>
+                                        <span class="radio-btn warning">0</span>
+                                    </label>
+                                    <label class="radio-label">
+                                        <input type="radio" name="having_IP_Address" value="1" {{ 'checked' if input_values and input_values.having_IP_Address == 1 }}>
+                                        <span class="radio-btn success">1</span>
+                                    </label>
+                                </div>
+                            </div>
+                            <div class="input-item">
+                                <label for="URL_Length">URL_Length</label>
+                                <div class="radio-group">
+                                    <label class="radio-label">
+                                        <input type="radio" name="URL_Length" value="-1" {{ 'checked' if input_values and input_values.URL_Length == -1 }}>
+                                        <span class="radio-btn danger">-1</span>
+                                    </label>
+                                    <label class="radio-label">
+                                        <input type="radio" name="URL_Length" value="0" {{ 'checked' if not input_values or input_values.URL_Length == 0 }}>
+                                        <span class="radio-btn warning">0</span>
+                                    </label>
+                                    <label class="radio-label">
+                                        <input type="radio" name="URL_Length" value="1" {{ 'checked' if input_values and input_values.URL_Length == 1 }}>
+                                        <span class="radio-btn success">1</span>
+                                    </label>
+                                </div>
+                            </div>
+                            <div class="input-item">
+                                <label for="Shortining_Service">Shortining_Service</label>
+                                <div class="radio-group">
+                                    <label class="radio-label">
+                                        <input type="radio" name="Shortining_Service" value="-1">
+                                        <span class="radio-btn danger">-1</span>
+                                    </label>
+                                    <label class="radio-label">
+                                        <input type="radio" name="Shortining_Service" value="0" checked>
+                                        <span class="radio-btn warning">0</span>
+                                    </label>
+                                    <label class="radio-label">
+                                        <input type="radio" name="Shortining_Service" value="1">
+                                        <span class="radio-btn success">1</span>
+                                    </label>
+                                </div>
+                            </div>
+                            <div class="input-item">
+                                <label for="having_At_Symbol">having_At_Symbol</label>
+                                <div class="radio-group">
+                                    <label class="radio-label">
+                                        <input type="radio" name="having_At_Symbol" value="-1">
+                                        <span class="radio-btn danger">-1</span>
+                                    </label>
+                                    <label class="radio-label">
+                                        <input type="radio" name="having_At_Symbol" value="0" checked>
+                                        <span class="radio-btn warning">0</span>
+                                    </label>
+                                    <label class="radio-label">
+                                        <input type="radio" name="having_At_Symbol" value="1">
+                                        <span class="radio-btn success">1</span>
+                                    </label>
+                                </div>
+                            </div>
+                            <div class="input-item">
+                                <label for="double_slash_redirecting">double_slash_redirecting</label>
+                                <div class="radio-group">
+                                    <label class="radio-label">
+                                        <input type="radio" name="double_slash_redirecting" value="-1">
+                                        <span class="radio-btn danger">-1</span>
+                                    </label>
+                                    <label class="radio-label">
+                                        <input type="radio" name="double_slash_redirecting" value="0" checked>
+                                        <span class="radio-btn warning">0</span>
+                                    </label>
+                                    <label class="radio-label">
+                                        <input type="radio" name="double_slash_redirecting" value="1">
+                                        <span class="radio-btn success">1</span>
+                                    </label>
+                                </div>
+                            </div>
+                            <div class="input-item">
+                                <label for="Prefix_Suffix">Prefix_Suffix</label>
+                                <div class="radio-group">
+                                    <label class="radio-label">
+                                        <input type="radio" name="Prefix_Suffix" value="-1">
+                                        <span class="radio-btn danger">-1</span>
+                                    </label>
+                                    <label class="radio-label">
+                                        <input type="radio" name="Prefix_Suffix" value="0" checked>
+                                        <span class="radio-btn warning">0</span>
+                                    </label>
+                                    <label class="radio-label">
+                                        <input type="radio" name="Prefix_Suffix" value="1">
+                                        <span class="radio-btn success">1</span>
+                                    </label>
+                                </div>
+                            </div>
+                            <div class="input-item">
+                                <label for="having_Sub_Domain">having_Sub_Domain</label>
+                                <div class="radio-group">
+                                    <label class="radio-label">
+                                        <input type="radio" name="having_Sub_Domain" value="-1">
+                                        <span class="radio-btn danger">-1</span>
+                                    </label>
+                                    <label class="radio-label">
+                                        <input type="radio" name="having_Sub_Domain" value="0" checked>
+                                        <span class="radio-btn warning">0</span>
+                                    </label>
+                                    <label class="radio-label">
+                                        <input type="radio" name="having_Sub_Domain" value="1">
+                                        <span class="radio-btn success">1</span>
+                                    </label>
+                                </div>
+                            </div>
+                            <div class="input-item">
+                                <label for="Abnormal_URL">Abnormal_URL</label>
+                                <div class="radio-group">
+                                    <label class="radio-label">
+                                        <input type="radio" name="Abnormal_URL" value="-1">
+                                        <span class="radio-btn danger">-1</span>
+                                    </label>
+                                    <label class="radio-label">
+                                        <input type="radio" name="Abnormal_URL" value="0" checked>
+                                        <span class="radio-btn warning">0</span>
+                                    </label>
+                                    <label class="radio-label">
+                                        <input type="radio" name="Abnormal_URL" value="1">
+                                        <span class="radio-btn success">1</span>
+                                    </label>
+                                </div>
+                            </div>
+                        </div>
+                    </div>
+
+                    <!-- Security Features -->
+                    <div class="feature-group-card">
+                        <div class="group-header">
+                            <i class="fas fa-lock"></i>
+                            <h3>Security Features</h3>
+                        </div>
+                        <div class="inputs-grid">
+                            {% for feature in ['SSLfinal_State', 'HTTPS_token', 'port', 'Favicon', 'Statistical_report'] %}
+                            <div class="input-item">
+                                <label for="{{ feature }}">{{ feature }}</label>
+                                <div class="radio-group">
+                                    <label class="radio-label">
+                                        <input type="radio" name="{{ feature }}" value="-1">
+                                        <span class="radio-btn danger">-1</span>
+                                    </label>
+                                    <label class="radio-label">
+                                        <input type="radio" name="{{ feature }}" value="0" checked>
+                                        <span class="radio-btn warning">0</span>
+                                    </label>
+                                    <label class="radio-label">
+                                        <input type="radio" name="{{ feature }}" value="1">
+                                        <span class="radio-btn success">1</span>
+                                    </label>
+                                </div>
+                            </div>
+                            {% endfor %}
+                        </div>
+                    </div>
+
+                    <!-- Page Content Features -->
+                    <div class="feature-group-card">
+                        <div class="group-header">
+                            <i class="fas fa-code"></i>
+                            <h3>Page Content</h3>
+                        </div>
+                        <div class="inputs-grid">
+                            {% for feature in ['Request_URL', 'URL_of_Anchor', 'Links_in_tags', 'SFH', 'Submitting_to_email'] %}
+                            <div class="input-item">
+                                <label for="{{ feature }}">{{ feature }}</label>
+                                <div class="radio-group">
+                                    <label class="radio-label">
+                                        <input type="radio" name="{{ feature }}" value="-1">
+                                        <span class="radio-btn danger">-1</span>
+                                    </label>
+                                    <label class="radio-label">
+                                        <input type="radio" name="{{ feature }}" value="0" checked>
+                                        <span class="radio-btn warning">0</span>
+                                    </label>
+                                    <label class="radio-label">
+                                        <input type="radio" name="{{ feature }}" value="1">
+                                        <span class="radio-btn success">1</span>
+                                    </label>
+                                </div>
+                            </div>
+                            {% endfor %}
+                        </div>
+                    </div>
+
+                    <!-- Page Behavior Features -->
+                    <div class="feature-group-card">
+                        <div class="group-header">
+                            <i class="fas fa-mouse-pointer"></i>
+                            <h3>Page Behavior</h3>
+                        </div>
+                        <div class="inputs-grid">
+                            {% for feature in ['Redirect', 'on_mouseover', 'RightClick', 'popUpWidnow', 'Iframe'] %}
+                            <div class="input-item">
+                                <label for="{{ feature }}">{{ feature }}</label>
+                                <div class="radio-group">
+                                    <label class="radio-label">
+                                        <input type="radio" name="{{ feature }}" value="-1">
+                                        <span class="radio-btn danger">-1</span>
+                                    </label>
+                                    <label class="radio-label">
+                                        <input type="radio" name="{{ feature }}" value="0" checked>
+                                        <span class="radio-btn warning">0</span>
+                                    </label>
+                                    <label class="radio-label">
+                                        <input type="radio" name="{{ feature }}" value="1">
+                                        <span class="radio-btn success">1</span>
+                                    </label>
+                                </div>
+                            </div>
+                            {% endfor %}
+                        </div>
+                    </div>
+
+                    <!-- Domain Features -->
+                    <div class="feature-group-card">
+                        <div class="group-header">
+                            <i class="fas fa-globe"></i>
+                            <h3>Domain Information</h3>
+                        </div>
+                        <div class="inputs-grid">
+                            {% for feature in ['Domain_registeration_length', 'age_of_domain', 'DNSRecord', 'web_traffic', 'Page_Rank', 'Google_Index', 'Links_pointing_to_page'] %}
+                            <div class="input-item">
+                                <label for="{{ feature }}">{{ feature }}</label>
+                                <div class="radio-group">
+                                    <label class="radio-label">
+                                        <input type="radio" name="{{ feature }}" value="-1">
+                                        <span class="radio-btn danger">-1</span>
+                                    </label>
+                                    <label class="radio-label">
+                                        <input type="radio" name="{{ feature }}" value="0" checked>
+                                        <span class="radio-btn warning">0</span>
+                                    </label>
+                                    <label class="radio-label">
+                                        <input type="radio" name="{{ feature }}" value="1">
+                                        <span class="radio-btn success">1</span>
+                                    </label>
+                                </div>
+                            </div>
+                            {% endfor %}
+                        </div>
+                    </div>
+
+                </div>
+
+                <!-- Submit Button -->
+                <div class="form-actions">
+                    <button type="submit" class="btn btn-primary btn-lg">
+                        <i class="fas fa-search"></i>
+                        Predict URL Safety
+                    </button>
+                </div>
+
+            </form>
+
+            <!-- Legend -->
+            <div class="legend-card">
+                <h4><i class="fas fa-info-circle"></i> Value Legend</h4>
+                <div class="legend-items">
+                    <div class="legend-item">
+                        <span class="legend-badge danger">-1</span>
+                        <span>Indicates phishing characteristic</span>
+                    </div>
+                    <div class="legend-item">
+                        <span class="legend-badge warning">0</span>
+                        <span>Suspicious / Unknown</span>
+                    </div>
+                    <div class="legend-item">
+                        <span class="legend-badge success">1</span>
+                        <span>Indicates legitimate characteristic</span>
+                    </div>
+                </div>
+            </div>
+
+        </div>
+    </main>
+
+    <!-- Footer -->
+    <footer class="footer">
+        <div class="container">
+            <div class="footer-content">
+                <div class="footer-left">
+                    <p>Built with ❤️ by <strong>Inderjeet</strong></p>
+                </div>
+                <div class="footer-right">
+                    <a href="{{ github_url }}" target="_blank"><i class="fab fa-github"></i></a>
+                    <a href="{{ dagshub_url }}" target="_blank"><i class="fas fa-flask"></i></a>
+                </div>
+            </div>
+        </div>
+    </footer>
+
+    <script src="/static/js/main.js"></script>
+    <script>
+        // Sample data for quick fill
+        const samples = {
+            legitimate: {
+                having_IP_Address: 1, URL_Length: 1, Shortining_Service: 1, having_At_Symbol: 1,
+                double_slash_redirecting: 1, Prefix_Suffix: 1, having_Sub_Domain: 1, SSLfinal_State: 1,
+                Domain_registeration_length: 1, Favicon: 1, port: 1, HTTPS_token: 1, Request_URL: 1,
+                URL_of_Anchor: 1, Links_in_tags: 1, SFH: 1, Submitting_to_email: 1, Abnormal_URL: 1,
+                Redirect: 0, on_mouseover: 1, RightClick: 1, popUpWidnow: 1, Iframe: 1, age_of_domain: 1,
+                DNSRecord: 1, web_traffic: 1, Page_Rank: 1, Google_Index: 1, Links_pointing_to_page: 1,
+                Statistical_report: 1
+            },
+            phishing: {
+                having_IP_Address: -1, URL_Length: -1, Shortining_Service: -1, having_At_Symbol: -1,
+                double_slash_redirecting: -1, Prefix_Suffix: -1, having_Sub_Domain: -1, SSLfinal_State: -1,
+                Domain_registeration_length: -1, Favicon: -1, port: -1, HTTPS_token: -1, Request_URL: -1,
+                URL_of_Anchor: -1, Links_in_tags: -1, SFH: -1, Submitting_to_email: -1, Abnormal_URL: -1,
+                Redirect: 0, on_mouseover: -1, RightClick: -1, popUpWidnow: -1, Iframe: -1, age_of_domain: -1,
+                DNSRecord: -1, web_traffic: -1, Page_Rank: -1, Google_Index: -1, Links_pointing_to_page: -1,
+                Statistical_report: -1
+            }
+        };
+
+        function fillSample(type) {
+            const data = samples[type];
+            for (const [name, value] of Object.entries(data)) {
+                const radio = document.querySelector(`input[name="${name}"][value="${value}"]`);
+                if (radio) radio.checked = true;
+            }
+        }
+
+        function clearForm() {
+            document.querySelectorAll('input[value="0"]').forEach(radio => radio.checked = true);
+        }
+    </script>
+</body>
+</html>

test.py

@@ -0,0 +1,119 @@
+import requests
+import os
+import pandas as pd
+import io
+
+BASE_URL = "http://127.0.0.1:8000"
+
+def print_status(component, status, message=""):
+    symbol = "✅" if status else "❌"
+    print(f"{symbol} {component}: {message}")
+
+def test_health():
+    try:
+        response = requests.get(f"{BASE_URL}/")
+        if response.status_code == 200:
+            print_status("Health Check", True, "Server is reachable")
+        else:
+            print_status("Health Check", False, f"Status Code {response.status_code}")
+    except Exception as e:
+        print_status("Health Check", False, f"Connection Failed: {str(e)}")
+
+def test_training():
+    print("\n[ Testing Training Endpoint ]")
+    try:
+        # Note: This might take a while if actual training happens
+        response = requests.post(f"{BASE_URL}/api/train")
+        if response.status_code == 200:
+            data = response.json()
+            print_status("Training", True, data.get("message", "Training started"))
+        else:
+            print_status("Training", False, f"Failed with {response.status_code}: {response.text}")
+    except Exception as e:
+        print_status("Training", False, str(e))
+
+def test_single_prediction():
+    print("\n[ Testing Single Prediction ]")
+    # Sample legitimate-looking data (mostly 1s or 0s depending on feature encoding)
+    data = {
+        "having_IP_Address": 1,
+        "URL_Length": 1,
+        "Shortining_Service": 1,
+        "having_At_Symbol": 1,
+        "double_slash_redirecting": 1,
+        "Prefix_Suffix": 1,
+        "having_Sub_Domain": 1,
+        "SSLfinal_State": 1,
+        "Domain_registeration_length": 1,
+        "Favicon": 1,
+        "port": 1,
+        "HTTPS_token": 1,
+        "Request_URL": 1,
+        "URL_of_Anchor": 1,
+        "Links_in_tags": 1,
+        "SFH": 1,
+        "Submitting_to_email": 1,
+        "Abnormal_URL": 1,
+        "Redirect": 1,
+        "on_mouseover": 1,
+        "RightClick": 1,
+        "popUpWidnow": 1,
+        "Iframe": 1,
+        "age_of_domain": 1,
+        "DNSRecord": 1,
+        "web_traffic": 1,
+        "Page_Rank": 1,
+        "Google_Index": 1,
+        "Links_pointing_to_page": 1,
+        "Statistical_report": 1
+    }
+    
+    try:
+        response = requests.post(f"{BASE_URL}/api/predict/single", data=data)
+        if response.status_code == 200:
+            result = response.json()
+            print_status("Single Predict", True, f"Prediction: {result.get('prediction')} (Safe: {result.get('is_safe')})")
+        else:
+            print_status("Single Predict", False, f"Status {response.status_code}: {response.text}")
+    except Exception as e:
+        print_status("Single Predict", False, str(e))
+
+def test_batch_prediction():
+    print("\n[ Testing Batch Prediction ]")
+    # Create dummy CSV
+    df = pd.DataFrame([{
+        "having_IP_Address": 1, "URL_Length": 1, "Shortining_Service": 1, "having_At_Symbol": 1,
+        "double_slash_redirecting": 1, "Prefix_Suffix": 1, "having_Sub_Domain": 1, "SSLfinal_State": 1,
+        "Domain_registeration_length": 1, "Favicon": 1, "port": 1, "HTTPS_token": 1, "Request_URL": 1,
+        "URL_of_Anchor": 1, "Links_in_tags": 1, "SFH": 1, "Submitting_to_email": 1, "Abnormal_URL": 1,
+        "Redirect": 1, "on_mouseover": 1, "RightClick": 1, "popUpWidnow": 1, "Iframe": 1, "age_of_domain": 1,
+        "DNSRecord": 1, "web_traffic": 1, "Page_Rank": 1, "Google_Index": 1, "Links_pointing_to_page": 1,
+        "Statistical_report": 1
+    }] * 5) # 5 rows
+    
+    csv_buffer = io.StringIO()
+    df.to_csv(csv_buffer, index=False)
+    csv_buffer.seek(0)
+    
+    files = {'file': ('test_batch.csv', csv_buffer.getvalue(), 'text/csv')}
+    
+    try:
+        response = requests.post(f"{BASE_URL}/predict", files=files)
+        if response.status_code == 200:
+            # It returns a template, so checking text length or specific marker
+            if "Prediction Results" in response.text or "table" in response.text:
+                print_status("Batch Predict", True, "Received HTML response with results")
+            else:
+                print_status("Batch Predict", True, f"Response received (Length: {len(response.text)})")
+        else:
+            print_status("Batch Predict", False, f"Status {response.status_code}")
+    except Exception as e:
+        print_status("Batch Predict", False, str(e))
+
+if __name__ == "__main__":
+    print("🚀 Starting Unified Verification...")
+    test_health()
+    test_training()
+    test_single_prediction()
+    test_batch_prediction()
+    print("\n✨ Verification Complete")