{% 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 %}