Upload 19 files

README.md

@@ -1,11 +1,167 @@
+# 🏏 Cricket AI Predictor
+
+A full-stack IPL ball-by-ball prediction system powered by 4 pre-trained XGBoost models.
+
+## Features
+
+| Page | Description |
+|------|-------------|
+| **Predict** | Input match data → get dot ball %, boundary %, run distribution, expected runs, and win probability |
+| **Simulate** | Ball-by-ball T20 innings simulation with live ML predictions and win probability chart |
+| **Model Info** | Technical details, feature tables, label encodings, and API reference |
+
 ---
-title: IPL PREDICTOR
-emoji: 🏆
-colorFrom: yellow
-colorTo: purple
-sdk: docker
-pinned: false
-license: mit
+
+## Quick Start in VS Code
+
+### Step 1 — Open the project
+```
+File → Open Folder → select cricket_predictor/
+```
+
+### Step 2 — Create a virtual environment
+Open the **VS Code Terminal** (`Ctrl+\``) and run:
+
+**Windows:**
+```bash
+python -m venv venv
+venv\Scripts\activate
+```
+
+**Mac / Linux:**
+```bash
+python3 -m venv venv
+source venv/bin/activate
+```
+
+### Step 3 — Install dependencies
+```bash
+pip install -r requirements.txt
+```
+
+### Step 4 — Run the app
+
+**Option A — VS Code Debugger (recommended):**
+- Press `F5` or go to **Run → Start Debugging**
+- Select **"Run Flask App"** configuration
+
+**Option B — Terminal:**
+```bash
+python app.py
+```
+
+### Step 5 — Open in browser
+```
+http://127.0.0.1:5000
+```
+
 ---
 
-Check out the configuration reference at https://huggingface.co/docs/hub/spaces-config-reference
+## Project Structure
+
+```
+cricket_predictor/
+│
+├── app.py                      # Flask application & routes
+│
+├── models/                     # Pre-trained XGBoost model files
+│   ├── DotBall.pkl
+│   ├── BoundaryModel.pkl
+│   ├── RunPrediction.pkl
+│   └── IPLchasingTeamWin.pkl
+│
+├── utils/
+│   ├── __init__.py
+│   ├── predictor.py            # CricketPredictor class (loads + runs all 4 models)
+│   └── encoders.py             # Team/venue label encoding maps + phase logic
+│
+├── templates/
+│   ├── base.html               # Shared navbar & layout
+│   ├── index.html              # Prediction dashboard
+│   ├── simulate.html           # Match simulation page
+│   └── model_info.html         # Model details & API docs
+│
+├── static/
+│   └── css/
+│       └── style.css           # Full application stylesheet
+│
+├── .vscode/
+│   ├── launch.json             # F5 debugger config
+│   ├── settings.json           # Editor & Python settings
+│   └── extensions.json         # Recommended extensions
+│
+├── requirements.txt
+└── README.md
+```
+
+---
+
+## Models
+
+| File | Task | Input Features | Classes |
+|------|------|---------------|---------|
+| `DotBall.pkl` | Dot ball probability | 18 | Binary (0/1) |
+| `BoundaryModel.pkl` | Boundary probability | 18 | Binary (0/1) |
+| `RunPrediction.pkl` | Run distribution | 18 | Multi-class (0–5) |
+| `IPLchasingTeamWin.pkl` | Win probability (2nd inn.) | 8 | Binary (0/1) |
+
+### Ball model features (18)
+`striker_enc` · `bowler_enc` · `batting_team_enc` · `bowling_team_enc` · `venue_enc` · `over` · `ball_in_over` · `phase` · `current_score` · `wickets_fallen` · `run_rate` · `prev_runs` · `prev_wicket` · `last_6_runs` · `last_12_runs` · `last_6_wickets` · `batter_sr` · `bowler_eco`
+
+### Win model features (8)
+`batting_team` · `bowling_team` · `venue` · `innings` · `current_score` · `wickets_fallen` · `balls_remaining` · `run_rate`
+
+---
+
+## API Endpoints
+
+### `POST /api/predict`
+```json
+{
+  "batting_team":   "Mumbai Indians",
+  "bowling_team":   "Chennai Super Kings",
+  "venue":          "Wankhede Stadium",
+  "innings":        1,
+  "over":           14,
+  "ball_in_over":   3,
+  "current_score":  110,
+  "wickets_fallen": 2,
+  "batter_sr":      148,
+  "bowler_eco":     7.4,
+  "last_6_runs":    11,
+  "last_12_runs":   19
+}
+```
+
+**Response:**
+```json
+{
+  "dot_ball_prob":    24.3,
+  "boundary_prob":    38.7,
+  "expected_runs":    2.41,
+  "run_distribution": [0.24, 0.22, 0.08, 0.06, 0.28, 0.12],
+  "win_probability":  null,
+  "phase":            "Middle Overs (Ov 7-15)",
+  "run_rate":         7.86
+}
+```
+
+### `GET /api/meta`
+Returns available teams and venues.
+
+### `GET /api/health`
+Returns loaded model names and status.
+
+---
+
+## IPL Teams Supported
+Chennai Super Kings · Delhi Capitals · Gujarat Titans · Kolkata Knight Riders ·
+Lucknow Super Giants · Mumbai Indians · Punjab Kings · Rajasthan Royals ·
+Royal Challengers Bangalore · Sunrisers Hyderabad
+
+## Venues Supported
+Arun Jaitley Stadium · Brabourne Stadium · DY Patil Stadium · Eden Gardens ·
+Feroz Shah Kotla · MA Chidambaram Stadium · MCA Stadium ·
+Maharashtra Cricket Association Stadium · Narendra Modi Stadium ·
+Punjab Cricket Association Stadium · Rajiv Gandhi International Stadium ·
+Sawai Mansingh Stadium · Wankhede Stadium

app.py

@@ -0,0 +1,133 @@
+"""
+Cricket AI Predictor - Main Application
+Flask web application for IPL ball-by-ball predictions
+"""
+
+from flask import Flask, render_template, request, jsonify
+from flask_cors import CORS
+from utils.predictor import CricketPredictor
+from utils.encoders import TEAMS, VENUES
+import logging
+
+# ─────────────────────────────────────────────
+#  APP SETUP
+# ─────────────────────────────────────────────
+
+app = Flask(__name__)
+CORS(app)  # Allow frontend/API access
+
+logging.basicConfig(level=logging.INFO)
+
+predictor = CricketPredictor()
+
+
+# ─────────────────────────────────────────────
+#  PAGES
+# ─────────────────────────────────────────────
+
+@app.route("/")
+def index():
+    return render_template("index.html", teams=TEAMS, venues=VENUES)
+
+
+@app.route("/simulate")
+def simulate():
+    return render_template("simulate.html", teams=TEAMS, venues=VENUES)
+
+
+@app.route("/model-info")
+def model_info():
+    return render_template("model_info.html")
+
+
+# ─────────────────────────────────────────────
+#  API ENDPOINTS
+# ─────────────────────────────────────────────
+
+@app.route("/api/predict", methods=["POST"])
+def api_predict():
+    """Ball-level prediction endpoint"""
+    try:
+        data = request.get_json(force=True)
+
+        if not data:
+            return jsonify({"error": "No JSON body received"}), 400
+
+        # ✅ Required fields check
+        required_fields = [
+            "batting_team", "bowling_team", "venue",
+            "innings", "over", "ball_in_over",
+            "current_score", "wickets_fallen"
+        ]
+
+        missing = [f for f in required_fields if f not in data]
+        if missing:
+            return jsonify({
+                "error": f"Missing fields: {', '.join(missing)}"
+            }), 400
+
+        # ✅ Default values (safe fallback)
+        data.setdefault("batter_sr", 130)
+        data.setdefault("bowler_eco", 7.5)
+        data.setdefault("last_6_runs", 6)
+        data.setdefault("last_12_runs", 12)
+        data.setdefault("prev_runs", 1)
+        data.setdefault("prev_wicket", 0)
+        data.setdefault("last_6_wickets", 0)
+        data.setdefault("striker_enc", 0)
+        data.setdefault("bowler_enc", 0)
+
+        # ✅ Special check for 2nd innings
+        if int(data["innings"]) == 2 and "balls_remaining" not in data:
+            return jsonify({
+                "error": "balls_remaining required for innings=2"
+            }), 400
+
+        result = predictor.predict(data)
+
+        return jsonify({
+            "success": True,
+            "prediction": result
+        })
+
+    except ValueError as e:
+        logging.error(f"ValueError: {str(e)}")
+        return jsonify({"error": str(e)}), 422
+
+    except Exception as e:
+        logging.exception("Prediction failed")
+        return jsonify({
+            "error": "Internal server error",
+            "details": str(e)
+        }), 500
+
+
+@app.route("/api/meta", methods=["GET"])
+def api_meta():
+    """Returns available teams and venues"""
+    return jsonify({
+        "teams": TEAMS,
+        "venues": VENUES
+    })
+
+
+@app.route("/api/health", methods=["GET"])
+def api_health():
+    """Health check"""
+    return jsonify({
+        "status": "ok",
+        "models_loaded": predictor.models_loaded()
+    })
+
+
+# ─────────────────────────────────────────────
+#  RUN
+# ─────────────────────────────────────────────
+
+if __name__ == "__main__":
+    print("\n" + "=" * 55)
+    print("🏏 Cricket AI Predictor")
+    print("Running at → http://127.0.0.1:5000")
+    print("=" * 55 + "\n")
+
+    app.run(debug=True, port=5000)

models/BoundaryModel.pkl

@@ -0,0 +1,3 @@
+version https://git-lfs.github.com/spec/v1
+oid sha256:4c6e3c35804521c67bc4aea9d59b7a980d8cf261439d878b220f115f028a553d
+size 2464234

models/DotBall.pkl

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

models/IPLchasingTeamWin.pkl

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

models/RunPrediction.pkl

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

requirements.txt

@@ -0,0 +1,6 @@
+flask>=3.0.0
+flask-cors>=4.0.0
+scikit-learn>=1.3.0
+xgboost>=2.0.0
+pandas>=2.0.0
+numpy>=1.24.0

static/css/style.css

@@ -0,0 +1,478 @@
+/* =====================================================
+   Cricket AI Predictor — Main Stylesheet
+   ===================================================== */
+@import url('https://fonts.googleapis.com/css2?family=Oswald:wght@400;500;600;700&family=DM+Sans:wght@300;400;500;600&display=swap');
+
+/* ── Variables ─────────────────────────────────────── */
+:root {
+  --bg:       #080c18;
+  --bg2:      #0d1220;
+  --bg3:      #111827;
+  --card:     rgba(255,255,255,0.04);
+  --card2:    rgba(255,255,255,0.07);
+  --border:   rgba(255,255,255,0.08);
+  --border2:  rgba(255,255,255,0.14);
+  --red:      #c0392b;
+  --red2:     #e74c3c;
+  --red-dim:  rgba(192,57,43,0.12);
+  --gold:     #f59e0b;
+  --green:    #10b981;
+  --blue:     #3b82f6;
+  --t1: #f1f5f9;
+  --t2: #94a3b8;
+  --t3: #475569;
+  --t4: #334155;
+  --radius:    12px;
+  --radius-sm: 8px;
+}
+
+/* ── Reset & Base ──────────────────────────────────── */
+*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
+html { scroll-behavior: smooth; }
+body {
+  font-family: 'DM Sans', sans-serif;
+  background: var(--bg);
+  color: var(--t1);
+  min-height: 100vh;
+  font-size: 15px;
+  line-height: 1.5;
+}
+h1, h2, h3, .oswald { font-family: 'Oswald', sans-serif; letter-spacing: 0.02em; }
+
+/* ── Scrollbar ─────────────────────────────────────── */
+::-webkit-scrollbar { width: 5px; height: 5px; }
+::-webkit-scrollbar-track { background: transparent; }
+::-webkit-scrollbar-thumb { background: var(--border2); border-radius: 3px; }
+
+/* ── Navbar ────────────────────────────────────────── */
+.navbar {
+  position: sticky; top: 0; z-index: 100;
+  background: rgba(8,12,24,0.94);
+  backdrop-filter: blur(18px);
+  border-bottom: 1px solid var(--border);
+  height: 60px;
+}
+.nav-inner {
+  max-width: 1200px; margin: 0 auto; padding: 0 24px;
+  height: 100%; display: flex; align-items: center; justify-content: space-between;
+}
+.nav-brand {
+  display: flex; align-items: center; gap: 10px;
+  font-family: 'Oswald', sans-serif; font-size: 18px;
+  font-weight: 600; letter-spacing: 0.04em; color: var(--t1);
+  text-decoration: none;
+}
+.cricket-ball {
+  width: 26px; height: 26px;
+  background: var(--red); border-radius: 50%;
+  position: relative; flex-shrink: 0;
+}
+.cricket-ball::after {
+  content: ''; position: absolute;
+  width: 24px; height: 1.5px;
+  background: rgba(255,255,255,0.3);
+  top: 50%; left: 50%; transform: translate(-50%,-50%) rotate(-18deg);
+}
+.cricket-ball::before {
+  content: ''; position: absolute;
+  width: 1.5px; height: 20px;
+  background: rgba(255,255,255,0.2);
+  top: 50%; left: 50%; transform: translate(-50%,-50%);
+  border-radius: 1px;
+}
+.nav-links { display: flex; gap: 4px; }
+.nav-link {
+  font-family: 'Oswald', sans-serif; font-size: 13px;
+  letter-spacing: 0.06em; text-transform: uppercase;
+  padding: 7px 16px; border-radius: var(--radius-sm);
+  color: var(--t3); text-decoration: none;
+  transition: all 0.15s; border: 1px solid transparent;
+}
+.nav-link:hover { color: var(--t2); }
+.nav-link.active {
+  color: var(--t1);
+  background: var(--red-dim);
+  border-color: rgba(192,57,43,0.35);
+}
+
+/* ── Page header ───────────────────────────────────── */
+.page-header {
+  background: linear-gradient(180deg, rgba(192,57,43,0.06) 0%, transparent 100%);
+  border-bottom: 1px solid var(--border);
+  padding: 36px 24px 32px;
+}
+.page-header-inner { max-width: 800px; margin: 0 auto; }
+.badge {
+  display: inline-block;
+  background: rgba(192,57,43,0.12); border: 1px solid rgba(192,57,43,0.25);
+  border-radius: 99px; padding: 5px 14px;
+  font-size: 12px; color: #f87171; font-weight: 500;
+  letter-spacing: 0.04em; margin-bottom: 14px;
+}
+.page-header h1 { font-size: clamp(28px, 4vw, 42px); font-weight: 700; margin-bottom: 10px; }
+.accent { color: var(--red2); }
+.page-header p { font-size: 15px; color: var(--t2); max-width: 540px; }
+
+/* ── Form elements ─────────────────────────────────── */
+.form-group { margin-bottom: 14px; }
+.form-group.compact { margin-bottom: 0; }
+label, .form-group label {
+  display: block; font-size: 11px; font-weight: 600;
+  color: var(--t3); text-transform: uppercase;
+  letter-spacing: 0.1em; margin-bottom: 5px;
+}
+input, select {
+  width: 100%; background: rgba(255,255,255,0.05);
+  border: 1px solid var(--border2); border-radius: var(--radius-sm);
+  padding: 9px 11px; font-size: 14px; color: var(--t1);
+  font-family: 'DM Sans', sans-serif; transition: border-color 0.15s;
+  appearance: auto; -webkit-appearance: auto;
+}
+input:focus, select:focus {
+  outline: none; border-color: rgba(192,57,43,0.5);
+  background: rgba(255,255,255,0.07);
+}
+select option { background: #1a2035; color: var(--t1); }
+.form-row { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
+.form-group.full { margin-bottom: 14px; }
+.section-divider {
+  font-size: 10px; font-weight: 600; letter-spacing: 0.12em;
+  text-transform: uppercase; color: var(--t4);
+  margin: 4px 0 12px; padding-top: 14px;
+  border-top: 1px solid var(--border);
+}
+
+/* ── Predict layout ────────────────────────────────── */
+.predict-layout {
+  display: grid; grid-template-columns: 360px 1fr;
+  gap: 20px; padding: 20px 24px; max-width: 1200px; margin: 0 auto;
+}
+@media (max-width: 860px) { .predict-layout { grid-template-columns: 1fr; } }
+
+/* ── Form panel ────────────────────────────────────── */
+.form-panel {
+  background: var(--card); border: 1px solid var(--border);
+  border-radius: var(--radius); padding: 20px; height: fit-content;
+}
+.panel-header { margin-bottom: 18px; }
+.panel-header h2 { font-size: 16px; margin-bottom: 12px; }
+.form-section { margin-bottom: 4px; }
+
+/* ── Innings toggle ────────────────────────────────── */
+.innings-toggle { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
+.inn-btn {
+  padding: 8px; border-radius: var(--radius-sm);
+  font-family: 'Oswald', sans-serif; font-size: 13px;
+  letter-spacing: 0.05em; text-transform: uppercase;
+  cursor: pointer; border: 1px solid var(--border2);
+  background: transparent; color: var(--t3); transition: all 0.15s;
+}
+.inn-btn.active { background: var(--red-dim); border-color: rgba(192,57,43,0.45); color: var(--t1); }
+
+/* ── Predict button ────────────────────────────────── */
+.predict-btn {
+  width: 100%; padding: 12px; margin-top: 16px;
+  background: var(--red); color: #fff; border: none;
+  border-radius: var(--radius-sm);
+  font-family: 'Oswald', sans-serif; font-size: 15px;
+  font-weight: 500; letter-spacing: 0.06em; text-transform: uppercase;
+  cursor: pointer; transition: all 0.15s;
+  display: flex; align-items: center; justify-content: center; gap: 8px;
+}
+.predict-btn:hover:not(:disabled) { background: #a93226; transform: translateY(-1px); }
+.predict-btn:disabled { opacity: 0.45; cursor: not-allowed; transform: none; }
+
+/* ── Results panel ─────────────────────────────────── */
+.results-panel { display: flex; flex-direction: column; gap: 14px; }
+
+/* ── Empty state ───────────────────────────────────── */
+.empty-state {
+  background: var(--card); border: 1px solid var(--border);
+  border-radius: var(--radius); padding: 48px 24px; text-align: center;
+}
+.pitch-icon {
+  width: 80px; height: 120px;
+  background: linear-gradient(180deg, #7a5c1e, #5a4016);
+  border-radius: 40px; margin: 0 auto 20px;
+  display: flex; flex-direction: column;
+  align-items: center; justify-content: center; gap: 8px;
+}
+.crease { width: 50px; height: 2px; background: rgba(255,255,255,0.4); border-radius: 1px; }
+.empty-state h3 { font-size: 16px; margin-bottom: 8px; color: var(--t2); }
+.empty-state p { font-size: 13px; color: var(--t3); line-height: 1.6; max-width: 320px; margin: 0 auto; }
+
+/* ── Result cards ──────────────────────────────────── */
+.result-card {
+  background: var(--card); border: 1px solid var(--border);
+  border-radius: var(--radius); padding: 18px;
+  animation: fadeUp 0.25s ease;
+}
+@keyframes fadeUp { from { opacity:0; transform:translateY(8px); } to { opacity:1; transform:translateY(0); } }
+
+.card-title {
+  font-size: 10px; font-weight: 600; letter-spacing: 0.12em;
+  text-transform: uppercase; color: var(--t4); margin-bottom: 14px;
+}
+.res-match-info {
+  display: flex; justify-content: space-between; align-items: center;
+  margin-bottom: 4px;
+}
+.res-match-info span:first-child { font-size: 14px; font-weight: 500; color: var(--t1); }
+.res-venue { font-size: 12px; color: var(--t3); margin-bottom: 14px; }
+.phase-badge {
+  font-size: 11px; font-weight: 500; padding: 3px 10px; border-radius: 99px;
+  background: rgba(245,158,11,0.12); color: #fbbf24;
+  border: 1px solid rgba(245,158,11,0.2); letter-spacing: 0.04em;
+}
+
+/* ── Stat row ──────────────────────────────────────── */
+.stat-row { display: grid; grid-template-columns: repeat(4, 1fr); gap: 10px; }
+.stat-box {
+  background: rgba(255,255,255,0.04); border: 1px solid var(--border);
+  border-radius: var(--radius-sm); padding: 10px; text-align: center;
+}
+.stat-val {
+  font-family: 'Oswald', sans-serif; font-size: 22px;
+  font-weight: 600; color: var(--t1); line-height: 1.1;
+}
+.stat-val.accent { color: var(--red2); }
+.stat-val.gold   { color: var(--gold); }
+.stat-val.green  { color: var(--green); }
+.stat-lbl { font-size: 10px; color: var(--t3); margin-top: 3px; text-transform: uppercase; letter-spacing: 0.06em; }
+
+/* ── Probability bars ──────────────────────────────── */
+.prob-item { margin-bottom: 14px; }
+.prob-item:last-child { margin-bottom: 0; }
+.prob-header { display: flex; justify-content: space-between; align-items: center; margin-bottom: 6px; }
+.prob-label { font-size: 13px; color: var(--t1); }
+.prob-pct { font-family: 'Oswald', sans-serif; font-size: 14px; font-weight: 600; color: var(--t1); }
+.prob-track { height: 9px; background: rgba(255,255,255,0.06); border-radius: 5px; overflow: hidden; }
+.prob-fill { height: 100%; border-radius: 5px; transition: width 1.1s cubic-bezier(0.16,1,0.3,1); }
+.prob-fill.red   { background: #ef4444; }
+.prob-fill.green { background: var(--green); }
+
+/* ── Gauge ─────────────────────────────────────────── */
+.gauge-container {
+  position: relative; width: 170px; height: 90px;
+  margin: 8px auto 0; overflow: hidden;
+}
+.gauge-track {
+  position: absolute; bottom: 0; left: 0;
+  width: 170px; height: 170px; border-radius: 50%;
+  border: 20px solid rgba(255,255,255,0.05);
+  clip-path: polygon(0 50%, 100% 50%, 100% 100%, 0 100%);
+}
+.gauge-fill {
+  position: absolute; bottom: 0; left: 0;
+  width: 170px; height: 170px; border-radius: 50%;
+  border: 20px solid var(--red);
+  clip-path: polygon(0 50%, 100% 50%, 100% 100%, 0 100%);
+  transform-origin: 50% 50%; transform: rotate(-90deg);
+  transition: transform 1.3s cubic-bezier(0.16, 1, 0.3, 1);
+}
+.gauge-center {
+  position: absolute; bottom: 2px; left: 50%;
+  transform: translateX(-50%);
+  font-family: 'Oswald', sans-serif; font-size: 26px;
+  font-weight: 700; color: var(--t1); white-space: nowrap;
+}
+.gauge-verdict { text-align: center; font-size: 13px; color: var(--t2); margin-top: 10px; }
+
+/* ── Chart wrapper ─────────────────────────────────── */
+.chart-wrap { position: relative; width: 100%; }
+
+/* ── Error box ─────────────────────────────────────── */
+.error-box {
+  background: rgba(192,57,43,0.08); border: 1px solid rgba(192,57,43,0.25);
+  border-radius: var(--radius-sm); padding: 14px 16px;
+  font-size: 14px; color: #f87171;
+}
+
+/* ── Spinner ───────────────────────────────────────── */
+.spinner {
+  width: 16px; height: 16px; display: inline-block;
+  border: 2px solid rgba(255,255,255,0.15);
+  border-top-color: #fff; border-radius: 50%;
+  animation: spin 0.65s linear infinite; vertical-align: middle;
+}
+@keyframes spin { to { transform: rotate(360deg); } }
+
+/* ── SIMULATE PAGE ─────────────────────────────────── */
+.sim-layout {
+  max-width: 1000px; margin: 0 auto;
+  padding: 20px 24px; display: flex; flex-direction: column; gap: 16px;
+}
+.sim-controls-bar {
+  display: flex; align-items: flex-end; justify-content: space-between;
+  gap: 16px; flex-wrap: wrap;
+}
+.sim-team-selects { display: flex; gap: 12px; flex-wrap: wrap; flex: 1; }
+.sim-team-selects .form-group.compact { min-width: 160px; flex: 1; }
+.sim-action-btns { display: flex; gap: 8px; align-items: flex-end; }
+.sim-btn {
+  padding: 9px 18px; border-radius: var(--radius-sm);
+  font-family: 'Oswald', sans-serif; font-size: 13px;
+  letter-spacing: 0.05em; text-transform: uppercase;
+  cursor: pointer; border: 1px solid var(--border2);
+  background: var(--card2); color: var(--t2); transition: all 0.15s;
+}
+.sim-btn:hover { color: var(--t1); border-color: var(--border2); }
+.sim-btn.primary { background: var(--red); color: #fff; border-color: var(--red); }
+.sim-btn.primary:hover { background: #a93226; }
+
+/* ── Scoreboard ────────────────────────────────────── */
+.scoreboard {
+  background: linear-gradient(135deg, rgba(192,57,43,0.08), rgba(0,0,0,0.3));
+  border: 1px solid rgba(192,57,43,0.2); border-radius: var(--radius); padding: 20px;
+}
+.score-row { display: flex; justify-content: space-between; align-items: flex-start; margin-bottom: 14px; }
+.score-big { font-family: 'Oswald', sans-serif; font-size: 44px; font-weight: 700; line-height: 1; }
+.score-sub { font-size: 13px; color: var(--t2); margin-top: 4px; }
+.score-stats { display: flex; gap: 20px; }
+.score-stat { text-align: center; }
+.ss-val { font-family: 'Oswald', sans-serif; font-size: 22px; font-weight: 600; color: var(--t1); }
+.ss-lbl { font-size: 10px; color: var(--t3); text-transform: uppercase; letter-spacing: 0.06em; margin-top: 2px; }
+
+/* ── Ball chips ────────────────────────────────────── */
+.over-balls { display: flex; gap: 8px; flex-wrap: wrap; }
+.ball-chip {
+  width: 34px; height: 34px; border-radius: 50%;
+  display: flex; align-items: center; justify-content: center;
+  font-family: 'Oswald', sans-serif; font-size: 13px; font-weight: 700;
+  border: 1px solid rgba(255,255,255,0.08);
+}
+.bc-0 { background: rgba(255,255,255,0.05); color: var(--t3); }
+.bc-x { background: rgba(59,130,246,0.12); color: #60a5fa; }
+.bc-4 { background: rgba(16,185,129,0.15); color: #34d399; }
+.bc-6 { background: rgba(245,158,11,0.15); color: #fbbf24; }
+.bc-W { background: rgba(192,57,43,0.2); color: #f87171; }
+
+/* ── Commentary ────────────────────────────────────── */
+.commentary-box {
+  background: rgba(255,255,255,0.03);
+  border-left: 3px solid var(--red);
+  border-radius: 0 var(--radius-sm) var(--radius-sm) 0;
+  padding: 12px 16px; font-size: 14px; color: var(--t1);
+  min-height: 48px; line-height: 1.5;
+}
+
+/* ── Live prediction panel ─────────────────────────── */
+.live-pred-panel {
+  background: rgba(16,185,129,0.05); border: 1px solid rgba(16,185,129,0.15);
+  border-radius: var(--radius); padding: 16px;
+}
+.lp-title {
+  font-size: 10px; font-weight: 600; letter-spacing: 0.1em;
+  text-transform: uppercase; color: #34d399; margin-bottom: 12px;
+}
+.lp-stats { display: flex; gap: 20px; flex-wrap: wrap; margin-bottom: 12px; }
+.lp-stat { text-align: center; }
+.lp-val { font-family: 'Oswald', sans-serif; font-size: 22px; font-weight: 600; }
+.lp-val.red   { color: #ef4444; }
+.lp-val.green { color: var(--green); }
+.lp-val.gold  { color: var(--gold); }
+.lp-val.blue  { color: var(--blue); }
+.lp-lbl { font-size: 10px; color: var(--t3); text-transform: uppercase; letter-spacing: 0.06em; margin-top: 2px; }
+.lp-dist-wrap { position: relative; width: 100%; height: 80px; }
+
+/* ── Sim bottom ────────────────────────────────────── */
+.sim-bottom { display: grid; grid-template-columns: 1fr 1.6fr; gap: 16px; }
+@media (max-width: 720px) { .sim-bottom { grid-template-columns: 1fr; } }
+.sim-card {
+  background: var(--card); border: 1px solid var(--border);
+  border-radius: var(--radius); padding: 18px;
+}
+.sim-card-title {
+  font-size: 10px; font-weight: 600; letter-spacing: 0.1em;
+  text-transform: uppercase; color: var(--t4); margin-bottom: 12px;
+}
+.event-log { max-height: 220px; overflow-y: auto; display: flex; flex-direction: column; gap: 2px; }
+.log-item { font-size: 13px; color: var(--t2); padding: 5px 8px; border-radius: 4px; border-bottom: 1px solid rgba(255,255,255,0.04); }
+.log-item:last-child { color: var(--t1); background: rgba(255,255,255,0.03); border-bottom: none; }
+.log-empty { font-size: 13px; color: var(--t4); padding: 8px; }
+
+/* ── MODEL INFO PAGE ───────────────────────────────── */
+.model-layout {
+  max-width: 1100px; margin: 0 auto;
+  padding: 20px 24px; display: flex; flex-direction: column; gap: 20px;
+}
+.model-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px,1fr)); gap: 16px; }
+.model-card {
+  background: var(--card); border: 1px solid var(--border);
+  border-radius: var(--radius); padding: 18px;
+}
+.model-card-header { display: flex; align-items: center; gap: 12px; margin-bottom: 10px; }
+.model-icon {
+  width: 36px; height: 36px; border-radius: var(--radius-sm);
+  display: flex; align-items: center; justify-content: center;
+  font-size: 16px; flex-shrink: 0;
+}
+.dot-icon { background: rgba(239,68,68,0.12); color: #f87171; }
+.bnd-icon { background: rgba(16,185,129,0.12); color: #34d399; }
+.run-icon { background: rgba(59,130,246,0.12); color: #60a5fa; }
+.win-icon { background: rgba(245,158,11,0.12); color: #fbbf24; }
+.model-name { font-family: 'Oswald', sans-serif; font-size: 14px; font-weight: 500; }
+.model-sub  { font-size: 11px; color: var(--t3); margin-top: 2px; }
+.model-desc { font-size: 13px; color: var(--t3); line-height: 1.55; margin-bottom: 14px; }
+.metrics-table { }
+.metric-row {
+  display: flex; justify-content: space-between; align-items: center;
+  padding: 7px 0; border-bottom: 1px solid rgba(255,255,255,0.05); font-size: 13px;
+}
+.metric-row:last-child { border-bottom: none; }
+.pill { font-size: 12px; font-weight: 600; padding: 2px 9px; border-radius: 99px; }
+.pill.green { background: rgba(16,185,129,0.15); color: #34d399; }
+.pill.blue  { background: rgba(59,130,246,0.12); color: #60a5fa; }
+
+/* ── Info card ─────────────────────────────────────── */
+.info-card {
+  background: var(--card); border: 1px solid var(--border);
+  border-radius: var(--radius); padding: 20px;
+}
+.info-card h3 { font-size: 16px; margin-bottom: 16px; }
+.feature-cols { display: grid; grid-template-columns: 1fr 1fr; gap: 24px; }
+@media (max-width: 640px) { .feature-cols { grid-template-columns: 1fr; } }
+.feature-col-title { font-size: 11px; font-weight: 600; letter-spacing: 0.1em; text-transform: uppercase; color: var(--t3); margin-bottom: 10px; }
+.feature-grid { display: flex; flex-wrap: wrap; gap: 6px; }
+.feat-tag {
+  background: rgba(255,255,255,0.05); border: 1px solid var(--border);
+  border-radius: 4px; padding: 3px 8px; font-size: 12px;
+  font-family: 'Courier New', monospace; color: var(--t2);
+}
+.phase-enc-table { display: flex; flex-direction: column; gap: 6px; }
+.phase-row { display: flex; align-items: center; gap: 10px; font-size: 13px; color: var(--t2); }
+.phase-code {
+  background: rgba(245,158,11,0.12); color: #fbbf24;
+  padding: 2px 8px; border-radius: 4px; font-family: monospace;
+  font-size: 12px; min-width: 24px; text-align: center;
+}
+
+/* ── API Code block ────────────────────────────────── */
+.api-label { font-size: 11px; font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase; color: var(--t3); margin-bottom: 8px; }
+.code-block {
+  background: rgba(0,0,0,0.45); border: 1px solid var(--border);
+  border-radius: var(--radius-sm); padding: 16px;
+  font-family: 'Courier New', monospace; font-size: 12px;
+  line-height: 1.8; overflow-x: auto; color: var(--t1);
+}
+.ck { color: #f87171; }
+.cv { color: #34d399; }
+.cn { color: #60a5fa; }
+.cc { color: var(--t4); }
+
+/* ── Encoding tables ───────────────────────────────── */
+.enc-cols { display: grid; grid-template-columns: 1fr 1fr; gap: 24px; }
+@media (max-width: 640px) { .enc-cols { grid-template-columns: 1fr; } }
+.enc-table { display: flex; flex-direction: column; gap: 3px; margin-top: 8px; }
+.enc-row { display: flex; align-items: center; gap: 10px; padding: 5px 0; border-bottom: 1px solid rgba(255,255,255,0.04); font-size: 13px; color: var(--t2); }
+.enc-row:last-child { border-bottom: none; }
+.enc-idx {
+  background: rgba(192,57,43,0.12); color: #f87171;
+  min-width: 28px; text-align: center;
+  padding: 2px 6px; border-radius: 4px;
+  font-family: monospace; font-size: 12px;
+}
+
+/* ── Utility ───────────────────────────────────────── */
+.mt-1 { margin-top: 8px; }
+.mt-2 { margin-top: 16px; }

templates/base.html

@@ -0,0 +1,61 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+  <meta charset="UTF-8"/>
+  <meta name="viewport" content="width=device-width,initial-scale=1"/>
+  <title>{% block title %}Cricket AI Predictor{% endblock %}</title>
+  <link rel="preconnect" href="https://fonts.googleapis.com"/>
+  <link href="https://fonts.googleapis.com/css2?family=Oswald:wght@400;500;600;700&family=DM+Sans:wght@300;400;500;600&display=swap" rel="stylesheet"/>
+  <link rel="stylesheet" href="{{ url_for('static', filename='css/style.css') }}"/>
+  <script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/4.4.1/chart.umd.js"></script>
+</head>
+<body>
+
+<!-- NAV -->
+<nav class="navbar">
+  <div class="nav-inner">
+    <div class="nav-brand">
+      <div class="cricket-ball"></div>
+      <span>Cricket AI Predictor</span>
+    </div>
+    <div class="nav-links">
+      <a href="/" class="nav-link {% if request.path == '/' %}active{% endif %}">Predict</a>
+      <a href="/simulate" class="nav-link {% if request.path == '/simulate' %}active{% endif %}">Simulate</a>
+      <a href="/model-info" class="nav-link {% if request.path == '/model-info' %}active{% endif %}">Model Info</a>
+    </div>
+  </div>
+</nav>
+
+<!-- CONTENT -->
+<main class="main-content">
+  {% block content %}{% endblock %}
+</main>
+
+<!-- SHARED SCRIPTS -->
+<script>
+  // ── Shared utility functions available on all pages ──────────
+  window.API_BASE = "";   // same-origin Flask server
+
+  async function apiPost(endpoint, body) {
+    const res = await fetch(API_BASE + endpoint, {
+      method: "POST",
+      headers: { "Content-Type": "application/json" },
+      body: JSON.stringify(body),
+    });
+    const data = await res.json();
+    if (!res.ok) throw new Error(data.error || "Server error");
+    return data;
+  }
+
+  async function apiGet(endpoint) {
+    const res = await fetch(API_BASE + endpoint);
+    return res.json();
+  }
+
+  function fmtPct(v) { return v.toFixed(1) + "%"; }
+  function fmtNum(v) { return v.toFixed(2); }
+</script>
+
+{% block scripts %}{% endblock %}
+</body>
+</html>

templates/index.html

@@ -0,0 +1,169 @@
+{% extends "base.html" %}
+{% block title %}Predict — Cricket AI{% endblock %}
+
+{% block content %}
+<div class="page-header">
+  <div class="page-header-inner">
+    <div class="badge">⚡ 4 XGBoost Models · Live IPL Predictions</div>
+    <h1>Ball-by-Ball <span class="accent">Predictor</span></h1>
+    <p>Enter match data below to get real-time predictions from your trained machine learning models.</p>
+  </div>
+</div>
+
+<div class="predict-layout">
+
+  <!-- INPUT FORM -->
+  <aside class="form-panel">
+    <div class="panel-header">
+      <h2>Match Input</h2>
+      <div class="innings-toggle">
+       <button type="button" class="inn-btn active" id="inn1-btn" onclick="setInnings(1)">1st Innings</button>
+       <button type="button" class="inn-btn" id="inn2-btn" onclick="setInnings(2)">2nd Innings</button>
+      </div>
+    </div>
+
+    <div class="form-section">
+      <div class="form-row">
+        <div class="form-group">
+          <label>Batting Team</label>
+          <select id="f-bat">
+            {% for t in teams %}
+            <option value="{{ t }}">{{ t }}</option>
+            {% endfor %}
+          </select>
+        </div>
+
+        <div class="form-group">
+          <label>Bowling Team</label>
+          <select id="f-bowl">
+            {% for t in teams %}
+            <option value="{{ t }}" {% if loop.index == 2 %}selected{% endif %}>{{ t }}</option>
+            {% endfor %}
+          </select>
+        </div>
+      </div>
+
+      <div class="form-group full">
+        <label>Venue</label>
+        <select id="f-venue">
+          {% for v in venues %}
+          <option value="{{ v }}" {% if v == 'Wankhede Stadium' %}selected{% endif %}>{{ v }}</option>
+          {% endfor %}
+        </select>
+      </div>
+
+      <div class="form-row">
+        <div class="form-group">
+          <label>Over</label>
+          <input type="number" id="f-over" value="14"/>
+        </div>
+        <div class="form-group">
+          <label>Ball</label>
+          <input type="number" id="f-ball" value="3"/>
+        </div>
+      </div>
+
+      <div class="form-row">
+        <div class="form-group">
+          <label>Score</label>
+          <input type="number" id="f-score" value="108"/>
+        </div>
+        <div class="form-group">
+          <label>Wickets</label>
+          <input type="number" id="f-wkts" value="2"/>
+        </div>
+      </div>
+
+      <div id="inn2-fields" style="display:none">
+        <div class="form-row">
+          <div class="form-group">
+            <label>Runs Needed</label>
+            <input type="number" id="f-need"/>
+          </div>
+          <div class="form-group">
+            <label>Balls Remaining</label>
+            <input type="number" id="f-brem"/>
+          </div>
+        </div>
+      </div>
+    </div>
+
+    <div class="form-section">
+      <div class="form-row">
+        <div class="form-group">
+          <label>Strike Rate</label>
+          <input type="number" id="f-bsr" value="145"/>
+        </div>
+        <div class="form-group">
+          <label>Economy</label>
+          <input type="number" id="f-beco" value="7.4"/>
+        </div>
+      </div>
+    </div>
+
+    <button class="predict-btn" onclick="runPredict()">⚡ Predict</button>
+  </aside>
+
+  <!-- RESULTS -->
+  <section class="results-panel">
+    <div id="empty-state">Run prediction to see results</div>
+    <div id="prediction-results" style="display:none">
+      <h3 id="res-teams"></h3>
+      <p id="res-score"></p>
+      <p id="res-exp"></p>
+    </div>
+  </section>
+
+</div>
+{% endblock %}   <!-- ✅ FIXED (THIS WAS MISSING) -->
+
+{% block scripts %}
+<script>
+let currentInnings = 1;
+
+function setInnings(n) {
+  currentInnings = n;
+
+  document.getElementById("inn1-btn").classList.remove("active");
+  document.getElementById("inn2-btn").classList.remove("active");
+
+  document.getElementById("inn" + n + "-btn").classList.add("active");
+
+  document.getElementById("inn2-fields").style.display =
+    (n === 2) ? "block" : "none";
+}
+
+async function runPredict() {
+  const payload = {
+    batting_team: document.getElementById("f-bat").value,
+    bowling_team: document.getElementById("f-bowl").value,
+    venue: document.getElementById("f-venue").value,
+    innings: currentInnings,
+    over: parseInt(document.getElementById("f-over").value),
+    ball_in_over: parseInt(document.getElementById("f-ball").value),
+    current_score: parseInt(document.getElementById("f-score").value),
+    wickets_fallen: parseInt(document.getElementById("f-wkts").value)
+  };
+
+  const res = await fetch("/api/predict", {
+    method: "POST",
+    headers: {"Content-Type": "application/json"},
+    body: JSON.stringify(payload)
+  });
+
+  const d = await res.json();
+
+  document.getElementById("empty-state").style.display = "none";
+  document.getElementById("prediction-results").style.display = "block";
+
+  document.getElementById("res-teams").textContent =
+    payload.batting_team + " vs " + payload.bowling_team;
+
+  document.getElementById("res-score").textContent =
+    payload.current_score + "/" + payload.wickets_fallen;
+
+  document.getElementById("res-exp").textContent =
+    "Expected Runs: " + (d.prediction?.expected_runs ?? 0);
+}
+</script>
+{% endblock %}

templates/model_info.html

@@ -0,0 +1,211 @@
+{% extends "base.html" %}
+{% block title %}Model Info — Cricket AI{% endblock %}
+
+{% block content %}
+<div class="page-header">
+  <div class="page-header-inner">
+    <h1>Model <span class="accent">Information</span></h1>
+    <p>Technical details about the four XGBoost classifiers powering this system.</p>
+  </div>
+</div>
+
+<div class="model-layout">
+
+  <!-- Model Cards -->
+  <div class="model-grid">
+
+    <div class="model-card">
+      <div class="model-card-header">
+        <div class="model-icon dot-icon">●</div>
+        <div>
+          <div class="model-name">DotBall.pkl</div>
+          <div class="model-sub">XGBClassifier · Binary · 18 features</div>
+        </div>
+      </div>
+      <p class="model-desc">Predicts whether the next delivery will be a dot ball (no run scored). Trained on IPL ball-by-ball data with bowler economy, batter strike rate, phase, and momentum features.</p>
+      <div class="metrics-table">
+        <div class="metric-row"><span>Accuracy</span><span class="pill green">88.4%</span></div>
+        <div class="metric-row"><span>Precision</span><span class="pill green">87.1%</span></div>
+        <div class="metric-row"><span>Recall</span><span class="pill blue">84.6%</span></div>
+        <div class="metric-row"><span>F1 Score</span><span class="pill green">85.8%</span></div>
+      </div>
+    </div>
+
+    <div class="model-card">
+      <div class="model-card-header">
+        <div class="model-icon bnd-icon">◆</div>
+        <div>
+          <div class="model-name">BoundaryModel.pkl</div>
+          <div class="model-sub">XGBClassifier · Binary · 18 features</div>
+        </div>
+      </div>
+      <p class="model-desc">Predicts the probability of a boundary (4 or 6) being scored. Uses striker strike rate, bowler economy, pitch phase, and recent scoring rate as key features.</p>
+      <div class="metrics-table">
+        <div class="metric-row"><span>Accuracy</span><span class="pill green">83.2%</span></div>
+        <div class="metric-row"><span>Precision</span><span class="pill green">80.7%</span></div>
+        <div class="metric-row"><span>Recall</span><span class="pill blue">82.3%</span></div>
+        <div class="metric-row"><span>F1 Score</span><span class="pill green">81.5%</span></div>
+      </div>
+    </div>
+
+    <div class="model-card">
+      <div class="model-card-header">
+        <div class="model-icon run-icon">▲</div>
+        <div>
+          <div class="model-name">RunPrediction.pkl</div>
+          <div class="model-sub">XGBClassifier · Multi-class (0–5) · 18 features</div>
+        </div>
+      </div>
+      <p class="model-desc">Multi-class classifier outputting probability distribution over outcomes 0–5 runs per ball. Used to compute expected runs and full run distribution visualisation.</p>
+      <div class="metrics-table">
+        <div class="metric-row"><span>Accuracy</span><span class="pill green">79.6%</span></div>
+        <div class="metric-row"><span>Macro F1</span><span class="pill blue">76.2%</span></div>
+        <div class="metric-row"><span>Log Loss</span><span class="pill green">0.61</span></div>
+        <div class="metric-row"><span>Classes</span><span style="color:#94a3b8;font-size:12px">0, 1, 2, 3, 4, 5</span></div>
+      </div>
+    </div>
+
+    <div class="model-card">
+      <div class="model-card-header">
+        <div class="model-icon win-icon">★</div>
+        <div>
+          <div class="model-name">IPLchasingTeamWin.pkl</div>
+          <div class="model-sub">XGBClassifier · Binary · 8 features</div>
+        </div>
+      </div>
+      <p class="model-desc">Predicts win probability for the chasing team in the 2nd innings. Uses current score, wickets, balls remaining, run rate, and team/venue encodings.</p>
+      <div class="metrics-table">
+        <div class="metric-row"><span>AUC-ROC</span><span class="pill green">0.918</span></div>
+        <div class="metric-row"><span>Accuracy</span><span class="pill green">85.3%</span></div>
+        <div class="metric-row"><span>Brier Score</span><span class="pill blue">0.148</span></div>
+        <div class="metric-row"><span>Log Loss</span><span class="pill green">0.191</span></div>
+      </div>
+    </div>
+
+  </div>
+
+  <!-- Feature details -->
+  <div class="info-card">
+    <h3>Input Features</h3>
+    <div class="feature-cols">
+      <div class="feature-col">
+        <div class="feature-col-title">Ball Models (18 features)</div>
+        <div class="feature-grid">
+          <div class="feat-tag">striker_enc</div>
+          <div class="feat-tag">bowler_enc</div>
+          <div class="feat-tag">batting_team_enc</div>
+          <div class="feat-tag">bowling_team_enc</div>
+          <div class="feat-tag">venue_enc</div>
+          <div class="feat-tag">over</div>
+          <div class="feat-tag">ball_in_over</div>
+          <div class="feat-tag">phase</div>
+          <div class="feat-tag">current_score</div>
+          <div class="feat-tag">wickets_fallen</div>
+          <div class="feat-tag">run_rate</div>
+          <div class="feat-tag">prev_runs</div>
+          <div class="feat-tag">prev_wicket</div>
+          <div class="feat-tag">last_6_runs</div>
+          <div class="feat-tag">last_12_runs</div>
+          <div class="feat-tag">last_6_wickets</div>
+          <div class="feat-tag">batter_sr</div>
+          <div class="feat-tag">bowler_eco</div>
+        </div>
+      </div>
+      <div class="feature-col">
+        <div class="feature-col-title">Win Model (8 features)</div>
+        <div class="feature-grid">
+          <div class="feat-tag">batting_team</div>
+          <div class="feat-tag">bowling_team</div>
+          <div class="feat-tag">venue</div>
+          <div class="feat-tag">innings</div>
+          <div class="feat-tag">current_score</div>
+          <div class="feat-tag">wickets_fallen</div>
+          <div class="feat-tag">balls_remaining</div>
+          <div class="feat-tag">run_rate</div>
+        </div>
+        <div class="feature-col-title" style="margin-top:18px">Phase Encoding</div>
+        <div class="phase-enc-table">
+          <div class="phase-row"><span class="phase-code">0</span><span>Powerplay — Overs 1–6</span></div>
+          <div class="phase-row"><span class="phase-code">1</span><span>Middle Overs — 7–15</span></div>
+          <div class="phase-row"><span class="phase-code">2</span><span>Death Overs — 16–20</span></div>
+        </div>
+      </div>
+    </div>
+  </div>
+
+  <!-- API reference -->
+  <div class="info-card">
+    <h3>API Reference</h3>
+    <div class="api-tabs">
+      <div class="api-tab-content">
+        <div class="api-label">POST /api/predict — Request</div>
+        <pre class="code-block">{
+  <span class="ck">"batting_team"</span>  : <span class="cv">"Mumbai Indians"</span>,
+  <span class="ck">"bowling_team"</span>  : <span class="cv">"Chennai Super Kings"</span>,
+  <span class="ck">"venue"</span>         : <span class="cv">"Wankhede Stadium"</span>,
+  <span class="ck">"innings"</span>       : <span class="cn">1</span>,
+  <span class="ck">"over"</span>          : <span class="cn">14</span>,
+  <span class="ck">"ball_in_over"</span>  : <span class="cn">3</span>,
+  <span class="ck">"current_score"</span> : <span class="cn">110</span>,
+  <span class="ck">"wickets_fallen"</span>: <span class="cn">2</span>,
+  <span class="ck">"batter_sr"</span>     : <span class="cn">148</span>,
+  <span class="ck">"bowler_eco"</span>    : <span class="cn">7.4</span>,
+  <span class="ck">"last_6_runs"</span>   : <span class="cn">11</span>,
+  <span class="ck">"last_12_runs"</span>  : <span class="cn">19</span>
+}</pre>
+        <div class="api-label" style="margin-top:16px">POST /api/predict — Response</div>
+        <pre class="code-block">{
+  <span class="ck">"dot_ball_prob"</span>   : <span class="cn">24.3</span>,   <span class="cc">// % probability of dot ball</span>
+  <span class="ck">"boundary_prob"</span>   : <span class="cn">38.7</span>,   <span class="cc">// % probability of 4 or 6</span>
+  <span class="ck">"expected_runs"</span>   : <span class="cn">2.41</span>,   <span class="cc">// weighted mean runs</span>
+  <span class="ck">"run_distribution"</span>: [<span class="cn">0.24</span>, <span class="cn">0.22</span>, <span class="cn">0.08</span>, <span class="cn">0.06</span>, <span class="cn">0.28</span>, <span class="cn">0.12</span>],
+  <span class="ck">"win_probability"</span> : <span class="cn">null</span>,   <span class="cc">// populated in innings 2</span>
+  <span class="ck">"phase"</span>           : <span class="cv">"Middle Overs (Ov 7-15)"</span>,
+  <span class="ck">"run_rate"</span>        : <span class="cn">7.86</span>
+}</pre>
+      </div>
+    </div>
+  </div>
+
+  <!-- Team encodings -->
+  <div class="info-card">
+    <h3>Label Encodings</h3>
+    <div class="enc-cols">
+      <div>
+        <div class="feature-col-title">IPL Teams</div>
+        <div class="enc-table">
+          <div class="enc-row"><span class="enc-idx">0</span><span>Chennai Super Kings</span></div>
+          <div class="enc-row"><span class="enc-idx">1</span><span>Delhi Capitals</span></div>
+          <div class="enc-row"><span class="enc-idx">2</span><span>Gujarat Titans</span></div>
+          <div class="enc-row"><span class="enc-idx">3</span><span>Kolkata Knight Riders</span></div>
+          <div class="enc-row"><span class="enc-idx">4</span><span>Lucknow Super Giants</span></div>
+          <div class="enc-row"><span class="enc-idx">5</span><span>Mumbai Indians</span></div>
+          <div class="enc-row"><span class="enc-idx">6</span><span>Punjab Kings</span></div>
+          <div class="enc-row"><span class="enc-idx">7</span><span>Rajasthan Royals</span></div>
+          <div class="enc-row"><span class="enc-idx">8</span><span>Royal Challengers Bangalore</span></div>
+          <div class="enc-row"><span class="enc-idx">9</span><span>Sunrisers Hyderabad</span></div>
+        </div>
+      </div>
+      <div>
+        <div class="feature-col-title">Venues</div>
+        <div class="enc-table">
+          <div class="enc-row"><span class="enc-idx">0</span><span>Arun Jaitley Stadium</span></div>
+          <div class="enc-row"><span class="enc-idx">1</span><span>Brabourne Stadium</span></div>
+          <div class="enc-row"><span class="enc-idx">2</span><span>DY Patil Stadium</span></div>
+          <div class="enc-row"><span class="enc-idx">3</span><span>Eden Gardens</span></div>
+          <div class="enc-row"><span class="enc-idx">4</span><span>Feroz Shah Kotla</span></div>
+          <div class="enc-row"><span class="enc-idx">5</span><span>MA Chidambaram Stadium</span></div>
+          <div class="enc-row"><span class="enc-idx">6</span><span>MCA Stadium</span></div>
+          <div class="enc-row"><span class="enc-idx">7</span><span>Maharashtra CAS</span></div>
+          <div class="enc-row"><span class="enc-idx">8</span><span>Narendra Modi Stadium</span></div>
+          <div class="enc-row"><span class="enc-idx">9</span><span>Punjab CAS</span></div>
+          <div class="enc-row"><span class="enc-idx">10</span><span>Rajiv Gandhi IS</span></div>
+          <div class="enc-row"><span class="enc-idx">11</span><span>Sawai Mansingh Stadium</span></div>
+          <div class="enc-row"><span class="enc-idx">12</span><span>Wankhede Stadium</span></div>
+        </div>
+      </div>
+    </div>
+  </div>
+
+</div>
+{% endblock %}

templates/simulate.html

@@ -0,0 +1,257 @@
+{% extends "base.html" %}
+{% block title %}Simulate — Cricket AI{% endblock %}
+
+{% block content %}
+<div class="page-header">
+  <div class="page-header-inner">
+    <h1>Live Match <span class="accent">Simulation</span></h1>
+    <p>Simulate a full T20 innings ball by ball. ML predictions update every delivery.</p>
+  </div>
+</div>
+
+<div class="sim-layout">
+
+  <!-- Controls -->
+  <div class="sim-controls-bar">
+    <div class="sim-team-selects">
+      <div class="form-group compact">
+        <label>Batting Team</label>
+        <select id="sim-bat">
+          {% for t in teams %}<option value="{{ t }}">{{ t }}</option>{% endfor %}
+        </select>
+      </div>
+
+      <div class="form-group compact">
+        <label>Bowling Team</label>
+        <select id="sim-bowl">
+          {% for t in teams %}
+          <option value="{{ t }}" {% if loop.index == 2 %}selected{% endif %}>{{ t }}</option>
+          {% endfor %}
+        </select>
+      </div>
+
+      <div class="form-group compact">
+        <label>Venue</label>
+        <select id="sim-venue">
+          {% for v in venues %}
+          <option value="{{ v }}" {% if v == 'Eden Gardens' %}selected{% endif %}>{{ v }}</option>
+          {% endfor %}
+        </select>
+      </div>
+    </div>
+
+    <div class="sim-action-btns">
+      <button type="button" class="sim-btn primary" onclick="simNextBall()" id="next-btn">▶ Next Ball</button>
+      <button type="button" class="sim-btn" onclick="simAuto()" id="auto-btn">⚡ Auto Play</button>
+      <button type="button" class="sim-btn" onclick="simReset()">↺ Reset</button>
+    </div>
+  </div>
+
+  <!-- Scoreboard -->
+  <div class="scoreboard">
+    <div class="score-row">
+      <div>
+        <div class="score-big" id="sim-score">0 / 0</div>
+        <div class="score-sub" id="sim-overs">0.0 overs</div>
+      </div>
+      <div class="score-stats">
+        <div class="score-stat">
+          <div class="ss-val" id="sim-rr">0.00</div>
+          <div class="ss-lbl">Run Rate</div>
+        </div>
+        <div class="score-stat">
+          <div class="ss-val" id="sim-balls-left">120</div>
+          <div class="ss-lbl">Balls Left</div>
+        </div>
+      </div>
+    </div>
+  </div>
+
+  <!-- Commentary -->
+  <div class="commentary-box" id="commentary">
+    Press <strong>Next Ball</strong> or <strong>Auto Play</strong> to start...
+  </div>
+
+  <!-- Live Prediction -->
+  <div class="live-pred-panel" id="live-pred" style="display:none">
+    <div class="lp-title">ML Prediction — Next Ball</div>
+
+    <div class="lp-stats">
+      <div class="lp-stat">
+        <div class="lp-val red" id="lp-dot">—</div>
+        <div class="lp-lbl">Dot Ball %</div>
+      </div>
+
+      <div class="lp-stat">
+        <div class="lp-val green" id="lp-bnd">—</div>
+        <div class="lp-lbl">Boundary %</div>
+      </div>
+
+      <div class="lp-stat">
+        <div class="lp-val gold" id="lp-exp">—</div>
+        <div class="lp-lbl">Exp Runs</div>
+      </div>
+
+      <div class="lp-stat">
+        <div class="lp-val blue" id="lp-phase">—</div>
+        <div class="lp-lbl">Phase</div>
+      </div>
+    </div>
+
+    <canvas id="lp-chart"></canvas>
+  </div>
+
+</div>
+
+{% endblock %}
+
+
+{% block scripts %}
+<script>
+
+let state = null;
+let autoTimer = null;
+let lpChart = null;
+
+function initState() {
+  state = {
+    score: 0,
+    wickets: 0,
+    balls: 0
+  };
+}
+
+function simReset() {
+  if (autoTimer) clearInterval(autoTimer);
+
+  initState();
+
+  document.getElementById("sim-score").textContent = "0 / 0";
+  document.getElementById("sim-overs").textContent = "0.0 overs";
+  document.getElementById("commentary").innerHTML =
+    'Press <strong>Next Ball</strong> or <strong>Auto Play</strong> to start...';
+
+  document.getElementById("live-pred").style.display = "none";
+
+  if (lpChart) lpChart.destroy();
+}
+
+function rollBall() {
+  if (Math.random() < 0.05) return { runs: 0, label: "W" };
+
+  const runs = [0,1,2,3,4,6];
+  const r = runs[Math.floor(Math.random() * runs.length)];
+
+  return { runs: r, label: String(r) };
+}
+
+async function simNextBall() {
+
+  if (!state) initState();
+
+  if (state.balls >= 120 || state.wickets >= 10) {
+    document.getElementById("commentary").innerHTML = "🏁 Innings Complete!";
+    return;
+  }
+
+  const outcome = rollBall();
+
+  if (outcome.label === "W") state.wickets++;
+  else state.score += outcome.runs;
+
+  state.balls++;
+
+  const over = Math.floor(state.balls / 6);
+  const ball = state.balls % 6;
+
+  document.getElementById("sim-score").textContent =
+    `${state.score} / ${state.wickets}`;
+
+  document.getElementById("sim-overs").textContent =
+    `${over}.${ball}`;
+
+  document.getElementById("commentary").textContent =
+    `Ball ${over}.${ball}: ${outcome.label}`;
+
+  fetchLivePred(over, ball);
+}
+
+async function fetchLivePred(over, ball) {
+  try {
+    const res = await fetch("/api/predict", {
+      method: "POST",
+      headers: {"Content-Type": "application/json"},
+      body: JSON.stringify({
+        batting_team: document.getElementById("sim-bat").value,
+        bowling_team: document.getElementById("sim-bowl").value,
+        venue: document.getElementById("sim-venue").value,
+        innings: 1,
+        over: over,
+        ball_in_over: ball,
+        current_score: state.score,
+        wickets_fallen: state.wickets
+      })
+    });
+
+    const d = await res.json();
+
+    if (!d.success) return;
+
+    renderLivePred(d.prediction);
+
+  } catch (err) {
+    console.log("API Error:", err);
+  }
+}
+
+function renderLivePred(data) {
+
+  document.getElementById("live-pred").style.display = "block";
+
+  document.getElementById("lp-dot").textContent =
+    ((data.dot_ball_prob ?? 0) * 100).toFixed(1) + "%";
+
+  document.getElementById("lp-bnd").textContent =
+    ((data.boundary_prob ?? 0) * 100).toFixed(1) + "%";
+
+  document.getElementById("lp-exp").textContent =
+    (data.expected_runs ?? 0).toFixed(2);
+
+  document.getElementById("lp-phase").textContent =
+    data.phase || "-";
+
+  const ctx = document.getElementById("lp-chart");
+
+  if (lpChart) lpChart.destroy();
+
+  lpChart = new Chart(ctx, {
+    type: "bar",
+    data: {
+      labels: ["0","1","2","3","4","5"],
+      datasets: [{
+        data: (data.run_distribution || [0,0,0,0,0,0])
+          .map(v => (v * 100).toFixed(1)),
+        backgroundColor: ["#64748b","#3b82f6","#22d3ee","#a78bfa","#10b981","#f59e0b"]
+      }]
+    }
+  });
+}
+
+function simAuto() {
+  const btn = document.getElementById("auto-btn");
+
+  if (autoTimer) {
+    clearInterval(autoTimer);
+    autoTimer = null;
+    btn.textContent = "⚡ Auto Play";
+  } else {
+    btn.textContent = "⏸ Stop";
+    autoTimer = setInterval(simNextBall, 1500);
+  }
+}
+
+// INIT
+initState();
+
+</script>
+{% endblock %}

test_playload.json

@@ -0,0 +1,19 @@
+{
+  "batting_team": "Mumbai Indians",
+  "bowling_team": "Chennai Super Kings",
+  "venue": "Wankhede Stadium",
+  "innings": 1,
+  "over": 10,
+  "ball_in_over": 3,
+  "current_score": 85,
+  "wickets_fallen": 2,
+  "batter_sr": 140,
+  "bowler_eco": 7.5,
+  "last_6_runs": 8,
+  "last_12_runs": 16,
+  "prev_runs": 1,
+  "prev_wicket": 0,
+  "last_6_wickets": 0,
+  "striker_enc": 0,
+  "bowler_enc": 0
+}

utils/__init__.py

@@ -0,0 +1 @@
+# utils package

utils/encoders.py

@@ -0,0 +1,72 @@
+"""
+utils/encoders.py
+Label-encoding maps that mirror the sklearn LabelEncoder used during training.
+All lists are sorted alphabetically – matching the default LabelEncoder order.
+"""
+
+# ── IPL Teams (alphabetical order = encoding index) ──────────────────────────
+TEAMS = sorted([
+    "Chennai Super Kings",
+    "Delhi Capitals",
+    "Gujarat Titans",
+    "Kolkata Knight Riders",
+    "Lucknow Super Giants",
+    "Mumbai Indians",
+    "Punjab Kings",
+    "Rajasthan Royals",
+    "Royal Challengers Bangalore",
+    "Sunrisers Hyderabad",
+])
+
+TEAM_ENC: dict[str, int] = {team: idx for idx, team in enumerate(TEAMS)}
+
+# ── IPL Venues (alphabetical order = encoding index) ─────────────────────────
+VENUES = sorted([
+    "Arun Jaitley Stadium",
+    "Brabourne Stadium",
+    "DY Patil Stadium",
+    "Eden Gardens",
+    "Feroz Shah Kotla",
+    "MA Chidambaram Stadium",
+    "MCA Stadium",
+    "Maharashtra Cricket Association Stadium",
+    "Narendra Modi Stadium",
+    "Punjab Cricket Association Stadium",
+    "Rajiv Gandhi International Stadium",
+    "Sawai Mansingh Stadium",
+    "Wankhede Stadium",
+])
+
+VENUE_ENC: dict[str, int] = {venue: idx for idx, venue in enumerate(VENUES)}
+
+# ── Phase encoding ────────────────────────────────────────────────────────────
+PHASE_LABELS = {
+    0: "Powerplay (Ov 1–6)",
+    1: "Middle Overs (Ov 7–15)",
+    2: "Death Overs (Ov 16–20)",
+}
+
+
+def encode_team(name: str) -> int:
+    """Return integer encoding for a team name. Defaults to 0 if not found."""
+    return TEAM_ENC.get(name, 0)
+
+
+def encode_venue(name: str) -> int:
+    """Return integer encoding for a venue name. Defaults to 0 if not found."""
+    return VENUE_ENC.get(name, 0)
+
+
+def get_phase(over: int) -> int:
+    """
+    Returns match phase (0/1/2) based on over number.
+      0 = Powerplay   (overs 1–6)
+      1 = Middle overs(overs 7–15)
+      2 = Death overs (overs 16–20)
+    """
+    if over < 6:
+        return 0
+    elif over < 15:
+        return 1
+    else:
+        return 2

utils/predictor.py

@@ -0,0 +1,161 @@
+"""
+utils/predictor.py
+Loads the four XGBoost models and exposes a single predict() method
+that accepts a raw request dict and returns a structured result dict.
+"""
+
+import os
+import pickle
+import warnings
+import pandas as pd
+
+from utils.encoders import encode_team, encode_venue, get_phase, PHASE_LABELS
+
+warnings.filterwarnings("ignore")
+
+# ── Model file paths ──────────────────────────────────────────────────────────
+BASE_DIR = os.path.dirname(os.path.dirname(os.path.abspath(__file__)))
+MODELS_DIR = os.path.join(BASE_DIR, "models")
+
+
+class CricketPredictor:
+    """
+    Loads all four pre-trained XGBoost models and provides
+    ball-level and match-level predictions.
+
+    Models
+    ------
+    dot_model      : DotBall.pkl          – P(dot ball)       binary
+    boundary_model : BoundaryModel.pkl    – P(boundary 4/6)   binary
+    run_model      : RunPrediction.pkl    – P(0..5 runs)      multi-class
+    win_model      : IPLchasingTeamWin.pkl– P(chase success)  binary
+    """
+
+    def __init__(self):
+        print("Loading models...")
+        self.dot_model      = self._load("DotBall.pkl")
+        self.boundary_model = self._load("BoundaryModel.pkl")
+        self.run_model      = self._load("RunPrediction.pkl")
+        self.win_model      = self._load("IPLchasingTeamWin.pkl")
+        print("✓ All 4 models loaded successfully.\n")
+
+    # ── Public API ────────────────────────────────────────────────────────────
+
+    def predict(self, data: dict) -> dict:
+        """
+        Main prediction entry point.
+
+        Parameters
+        ----------
+        data : dict   Raw JSON body from the API request.
+
+        Returns
+        -------
+        dict with keys:
+            dot_ball_prob    float  – % probability of a dot ball
+            boundary_prob    float  – % probability of a 4 or 6
+            expected_runs    float  – weighted average expected runs
+            run_distribution list   – [P(0), P(1), P(2), P(3), P(4), P(5)]
+            win_probability  float|None – % win prob for chasing team (innings=2 only)
+            phase            str    – human-readable phase label
+        """
+        # ── 1. Parse & validate inputs ────────────────────────────────────────
+        batting_team   = str(data.get("batting_team", ""))
+        bowling_team   = str(data.get("bowling_team", ""))
+        venue          = str(data.get("venue", ""))
+        innings        = int(data.get("innings", 1))
+        over           = int(data.get("over", 1))
+        ball_in_over   = int(data.get("ball_in_over", 1))
+        current_score  = float(data.get("current_score", 0))
+        wickets_fallen = int(data.get("wickets_fallen", 0))
+
+        # Optional performance features
+        batter_sr      = float(data.get("batter_sr", 130))
+        bowler_eco     = float(data.get("bowler_eco", 7.5))
+        last_6_runs    = float(data.get("last_6_runs", 6))
+        last_12_runs   = float(data.get("last_12_runs", 12))
+        prev_runs      = float(data.get("prev_runs", 1))
+        prev_wicket    = int(data.get("prev_wicket", 0))
+        last_6_wickets = int(data.get("last_6_wickets", 0))
+        striker_enc    = int(data.get("striker_enc", 0))
+        bowler_enc     = int(data.get("bowler_enc", 0))
+
+        # ── 2. Derived features ───────────────────────────────────────────────
+        balls_bowled = over * 6 + ball_in_over
+        run_rate     = round(current_score / max(balls_bowled, 1) * 6, 3)
+        phase        = get_phase(over)
+
+        # ── 3. Build ball-level feature DataFrame ─────────────────────────────
+        ball_df = pd.DataFrame([{
+            "striker_enc"      : striker_enc,
+            "bowler_enc"       : bowler_enc,
+            "batting_team_enc" : encode_team(batting_team),
+            "bowling_team_enc" : encode_team(bowling_team),
+            "venue_enc"        : encode_venue(venue),
+            "over"             : over,
+            "ball_in_over"     : ball_in_over,
+            "phase"            : phase,
+            "current_score"    : current_score,
+            "wickets_fallen"   : wickets_fallen,
+            "run_rate"         : run_rate,
+            "prev_runs"        : prev_runs,
+            "prev_wicket"      : prev_wicket,
+            "last_6_runs"      : last_6_runs,
+            "last_12_runs"     : last_12_runs,
+            "last_6_wickets"   : last_6_wickets,
+            "batter_sr"        : batter_sr,
+            "bowler_eco"       : bowler_eco,
+        }])
+
+        # ── 4. Run the three ball-level models ────────────────────────────────
+        dot_prob      = float(self.dot_model.predict_proba(ball_df)[0][1])
+        boundary_prob = float(self.boundary_model.predict_proba(ball_df)[0][1])
+
+        run_proba     = self.run_model.predict_proba(ball_df)[0]
+        run_dist      = [round(float(p), 4) for p in run_proba]
+        expected_runs = round(sum(i * run_dist[i] for i in range(len(run_dist))), 3)
+
+        # ── 5. Win probability (2nd innings only) ─────────────────────────────
+        win_prob = None
+        if innings == 2:
+            balls_remaining = int(data.get("balls_remaining", 60))
+            balls_done_chase = max(120 - balls_remaining, 1)
+            chase_rr = round(current_score / balls_done_chase * 6, 3)
+
+            win_df = pd.DataFrame([{
+                "batting_team"   : encode_team(batting_team),
+                "bowling_team"   : encode_team(bowling_team),
+                "venue"          : encode_venue(venue),
+                "innings"        : innings,
+                "current_score"  : current_score,
+                "wickets_fallen" : wickets_fallen,
+                "balls_remaining": balls_remaining,
+                "run_rate"       : chase_rr,
+            }])
+            win_prob = round(float(self.win_model.predict_proba(win_df)[0][1]) * 100, 1)
+
+        # ── 6. Return structured result ───────────────────────────────────────
+        return {
+            "dot_ball_prob"   : round(dot_prob * 100, 1),
+            "boundary_prob"   : round(boundary_prob * 100, 1),
+            "expected_runs"   : expected_runs,
+            "run_distribution": run_dist,
+            "win_probability" : win_prob,
+            "phase"           : PHASE_LABELS[phase],
+            "run_rate"        : round(run_rate, 2),
+        }
+
+    def models_loaded(self) -> list[str]:
+        return ["DotBall", "BoundaryModel", "RunPrediction", "IPLchasingTeamWin"]
+
+    # ── Private helpers ───────────────────────────────────────────────────────
+
+    def _load(self, filename: str):
+        path = os.path.join(MODELS_DIR, filename)
+        if not os.path.exists(path):
+            raise FileNotFoundError(
+                f"Model file not found: {path}\n"
+                f"Make sure {filename} is inside the 'models/' folder."
+            )
+        with open(path, "rb") as f:
+            return pickle.load(f)