Added Head-to-Head Compare UI and Endpoint

api/main.py

@@ -628,6 +628,132 @@ async def root():
         "health": "/health",
     }
 
+@app.post(
+    "/predict/compare",
+    response_model=CompareResponse,
+    responses={
+        400: {"model": ErrorResponse, "description": "Invalid query or driver not found"},
+        503: {"model": ErrorResponse, "description": "Model not loaded"},
+    },
+)
+async def predict_compare(request: CompareRequest) -> CompareResponse:
+    """
+    Head-to-Head Driver Comparison.
+    """
+    if _model is None:
+        raise HTTPException(
+            status_code=503,
+            detail="Model not loaded. Set KRONECTOR_MODEL_RUN_ID.",
+        )
+
+    if _races_data is None and not _prerace_data:
+        raise HTTPException(
+            status_code=503,
+            detail="Race data not loaded. Check data_output/fastf1_races.parquet",
+        )
+
+    season = request.season
+    round_num = request.round
+
+    # If not provided, find the latest pre-race data or historical data
+    if not season or not round_num:
+        if _prerace_data:
+            latest_key = list(_prerace_data.keys())[-1]
+            season, round_num = map(int, latest_key.split("_"))
+        elif _races_data is not None:
+            season = int(_races_data["season"].max())
+            round_num = int(_races_data[_races_data["season"] == season]["round"].max())
+
+    df = pd.DataFrame()
+    key = f"{season}_{round_num}"
+    if _prerace_data and key in _prerace_data:
+        df = _prerace_data[key].copy()
+    elif _races_data is not None:
+        df = _races_data[(_races_data["season"] == season) & (_races_data["round"] == round_num)].copy()
+
+    if df.empty:
+        raise HTTPException(
+            status_code=400,
+            detail=f"No data for season {season} round {round_num}"
+        )
+
+    # Find driver 1 and driver 2
+    def find_driver(driver_str: str, data: pd.DataFrame):
+        driver_str = driver_str.lower()
+        match = data[data["driver_id"].str.lower() == driver_str]
+        if match.empty:
+            match = data[data["driver_name"].str.lower().str.contains(driver_str)]
+        return match
+
+    d1_df = find_driver(request.driver1, df)
+    d2_df = find_driver(request.driver2, df)
+
+    if d1_df.empty:
+        raise HTTPException(status_code=400, detail=f"Driver 1 '{request.driver1}' not found in race")
+    if d2_df.empty:
+        raise HTTPException(status_code=400, detail=f"Driver 2 '{request.driver2}' not found in race")
+
+    d1_row = d1_df.iloc[[0]]
+    d2_row = d2_df.iloc[[0]]
+
+    # Generate predictions
+    from ml.predict import predict_dataframe
+    d1_pred = predict_dataframe(d1_row, _model, _encoders, explain=True)
+    d2_pred = predict_dataframe(d2_row, _model, _encoders, explain=True)
+
+    d1_prob = float(d1_pred["win_probability"].iloc[0])
+    d2_prob = float(d2_pred["win_probability"].iloc[0])
+
+    d1_shap = d1_pred["shap_values"].iloc[0]
+    d2_shap = d2_pred["shap_values"].iloc[0]
+
+    # Calculate SHAP deltas (D1 - D2)
+    shap_deltas = {}
+    for feature in d1_shap.keys():
+        shap_deltas[feature] = float(d1_shap[feature] - d2_shap.get(feature, 0.0))
+
+    d1_name = str(d1_row["driver_name"].iloc[0])
+    d2_name = str(d2_row["driver_name"].iloc[0])
+    
+    # Get quali status if available
+    d1_status = str(d1_row.get("quali_status", pd.Series(["Unknown"])).iloc[0]) if "quali_status" in d1_row.columns else "Unknown"
+    d2_status = str(d2_row.get("quali_status", pd.Series(["Unknown"])).iloc[0]) if "quali_status" in d2_row.columns else "Unknown"
+
+    circuit = str(df["circuit_id"].iloc[0])
+    race_context = f"{season} Round {round_num} at {circuit}"
+
+    from agents.compare_agent import compare_agent
+    llm_analysis = compare_agent(
+        driver1_name=d1_name,
+        driver1_prob=d1_prob * 100,
+        driver1_status=d1_status,
+        driver2_name=d2_name,
+        driver2_prob=d2_prob * 100,
+        driver2_status=d2_status,
+        shap_deltas=shap_deltas,
+        race_context=race_context
+    )
+
+    return CompareResponse(
+        driver1=PredictionMetadata(
+            season=season, round=round_num,
+            driver_id=str(d1_row["driver_id"].iloc[0]),
+            driver_name=d1_name,
+            team=str(d1_row["team"].iloc[0]),
+            grid_position=float(d1_row["grid_position"].iloc[0])
+        ),
+        driver2=PredictionMetadata(
+            season=season, round=round_num,
+            driver_id=str(d2_row["driver_id"].iloc[0]),
+            driver_name=d2_name,
+            team=str(d2_row["team"].iloc[0]),
+            grid_position=float(d2_row["grid_position"].iloc[0])
+        ),
+        driver1_win_probability=d1_prob,
+        driver2_win_probability=d2_prob,
+        shap_deltas=shap_deltas,
+        llm_analysis=llm_analysis
+    )
 
 # ============================================================================
 # Error handlers

frontend/app/page.js

@@ -4,34 +4,53 @@ import { useState } from 'react';
 import styles from './page.module.css';
 
 export default function Home() {
+  const [mode, setMode] = useState('predict'); // 'predict' | 'compare'
+  
+  // Single predict state
   const [query, setQuery] = useState('');
+  
+  // Compare state
+  const [driver1, setDriver1] = useState('');
+  const [driver2, setDriver2] = useState('');
+  const [season, setSeason] = useState('');
+  const [round, setRound] = useState('');
+  
   const [loading, setLoading] = useState(false);
   const [result, setResult] = useState(null);
   const [error, setError] = useState(null);
 
-  const handleSubmit = async (e) => {
+  const handleSubmitPredict = async (e) => {
     e.preventDefault();
     if (!query.trim()) return;
+    await fetchResult('predict/f1', { query });
+  };
+
+  const handleSubmitCompare = async (e) => {
+    e.preventDefault();
+    if (!driver1.trim() || !driver2.trim()) return;
+    const body = { driver1, driver2 };
+    if (season) body.season = parseInt(season);
+    if (round) body.round = parseInt(round);
+    await fetchResult('predict/compare', body);
+  };
 
+  const fetchResult = async (endpoint, body) => {
     setLoading(true);
     setError(null);
     setResult(null);
-
     try {
-      const res = await fetch('https://prats010-kronector.hf.space/predict/f1', {
+      const res = await fetch(`https://prats010-kronector.hf.space/${endpoint}`, {
         method: 'POST',
-        headers: {
-          'Content-Type': 'application/json',
-        },
-        body: JSON.stringify({ query }),
+        headers: { 'Content-Type': 'application/json' },
+        body: JSON.stringify(body),
       });
 
       if (!res.ok) {
-        throw new Error(`API Error: ${res.status}`);
+        const errData = await res.json().catch(() => ({}));
+        throw new Error(errData.detail || `API Error: ${res.status}`);
       }
-
       const data = await res.json();
-      setResult(data);
+      setResult({ ...data, _type: endpoint });
     } catch (err) {
       setError(err.message || 'Failed to fetch prediction. Please try again.');
     } finally {
@@ -39,6 +58,41 @@ export default function Home() {
     }
   };
 
+  const renderShapBars = (shapValues, isCompare = false) => {
+    if (!shapValues) return null;
+    return Object.entries(shapValues)
+      .sort(([,a], [,b]) => Math.abs(b) - Math.abs(a))
+      .slice(0, 6)
+      .map(([key, value]) => {
+        const absVal = Math.abs(value);
+        const isPositive = value > 0;
+        
+        let width = Math.min((absVal / 2) * 100, 50);
+        if (isCompare) {
+            // For delta: positive = driver 1 (green, left side), negative = driver 2 (red, right side)
+            // Wait, standard UI: positive is driver 1.
+            width = Math.min((absVal / 5) * 100, 50); // Scale down slightly for deltas since they can be larger
+        }
+
+        return (
+          <div key={key} className={styles.shapRow}>
+            <div className={styles.shapLabel} title={key}>
+              {key.replace(/_/g, ' ')}
+            </div>
+            <div className={styles.barTrack}>
+              <div 
+                className={`${styles.barFill} ${isPositive ? styles.barPositive : styles.barNegative}`}
+                style={{ width: `${width}%` }}
+              />
+            </div>
+            <div className={`${styles.shapValue} ${isPositive ? 'text-gradient' : ''}`} style={!isPositive ? {color: 'var(--neon-red)'} : {}}>
+              {value > 0 ? '+' : ''}{value.toFixed(3)}
+            </div>
+          </div>
+        );
+      });
+  };
+
   return (
     <main className={styles.main}>
       <div className={styles.header}>
@@ -46,29 +100,69 @@ export default function Home() {
         <p className={styles.subtitle}>F1 Intelligence Terminal. Powered by LLMs and LightGBM.</p>
       </div>
 
+      <div className={styles.tabsContainer}>
+        <button 
+          className={`${styles.tabBtn} ${mode === 'predict' ? styles.tabActive : ''}`}
+          onClick={() => { setMode('predict'); setResult(null); setError(null); }}
+        >
+          Single Prediction
+        </button>
+        <button 
+          className={`${styles.tabBtn} ${mode === 'compare' ? styles.tabActive : ''}`}
+          onClick={() => { setMode('compare'); setResult(null); setError(null); }}
+        >
+          Head-to-Head Compare
+        </button>
+      </div>
+
       <div className={styles.queryContainer}>
-        <form onSubmit={handleSubmit} className={styles.inputWrapper}>
-          <input
-            type="text"
-            className={styles.input}
-            placeholder="Ask anything (e.g., 'What's Max Verstappen's win probability at Monaco 2023?')"
-            value={query}
-            onChange={(e) => setQuery(e.target.value)}
-            disabled={loading}
-          />
-          <button type="submit" className={styles.submitBtn} disabled={loading || !query.trim()}>
-            {loading ? <div className={styles.loader} /> : (
-              <svg width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round">
-                <line x1="22" y1="2" x2="11" y2="13"></line>
-                <polygon points="22 2 15 22 11 13 2 9 22 2"></polygon>
-              </svg>
-            )}
-          </button>
-        </form>
+        {mode === 'predict' ? (
+          <form onSubmit={handleSubmitPredict} className={styles.inputWrapper}>
+            <input
+              type="text"
+              className={styles.input}
+              placeholder="Ask anything (e.g., 'What's Max Verstappen's win probability at Monaco 2023?')"
+              value={query}
+              onChange={(e) => setQuery(e.target.value)}
+              disabled={loading}
+            />
+            <button type="submit" className={styles.submitBtn} disabled={loading || !query.trim()}>
+              {loading ? <div className={styles.loader} /> : (
+                <svg width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round">
+                  <line x1="22" y1="2" x2="11" y2="13"></line>
+                  <polygon points="22 2 15 22 11 13 2 9 22 2"></polygon>
+                </svg>
+              )}
+            </button>
+          </form>
+        ) : (
+          <form onSubmit={handleSubmitCompare} className={styles.compareForm}>
+            <div className={styles.compareInputsRow}>
+              <div className={styles.inputWrapper}>
+                  <input type="text" className={styles.input} placeholder="Driver 1 (e.g., Max Verstappen)" value={driver1} onChange={e=>setDriver1(e.target.value)} required disabled={loading} />
+              </div>
+              <span className={styles.vsText}>VS</span>
+              <div className={styles.inputWrapper}>
+                  <input type="text" className={styles.input} placeholder="Driver 2 (e.g., Kimi Antonelli)" value={driver2} onChange={e=>setDriver2(e.target.value)} required disabled={loading} />
+              </div>
+            </div>
+            <div className={styles.compareInputsRowSmall}>
+              <div className={styles.inputWrapper} style={{maxWidth: '200px'}}>
+                  <input type="number" className={styles.input} style={{padding: '1rem'}} placeholder="Season (Optional)" value={season} onChange={e=>setSeason(e.target.value)} disabled={loading} />
+              </div>
+              <div className={styles.inputWrapper} style={{maxWidth: '200px'}}>
+                  <input type="number" className={styles.input} style={{padding: '1rem'}} placeholder="Round (Optional)" value={round} onChange={e=>setRound(e.target.value)} disabled={loading} />
+              </div>
+            </div>
+            <button type="submit" className={styles.compareSubmitBtn} disabled={loading || !driver1.trim() || !driver2.trim()}>
+              {loading ? 'Analyzing...' : 'Run Head-to-Head Comparison'}
+            </button>
+          </form>
+        )}
         {error && <div style={{ color: 'var(--neon-red)', marginTop: '1rem', textAlign: 'center' }}>{error}</div>}
       </div>
 
-      {result && (
+      {result && result._type === 'predict/f1' && (
         <div className={`${styles.dashboardGrid} animate-fade-in-up`}>
           {/* Left Column: Gauge */}
           <div className={`${styles.panel} glass-panel`}>
@@ -114,35 +208,74 @@ export default function Home() {
                 Key Factors (SHAP)
               </h2>
               <div className={styles.shapContainer}>
-                {result.shap_values && Object.entries(result.shap_values)
-                  .sort(([,a], [,b]) => Math.abs(b) - Math.abs(a))
-                  .slice(0, 6)
-                  .map(([key, value]) => {
-                    const absVal = Math.abs(value);
-                    const isPositive = value > 0;
-                    // Normalize to max 50% width
-                    const width = Math.min((absVal / 2) * 100, 50);
-                    
-                    return (
-                      <div key={key} className={styles.shapRow}>
-                        <div className={styles.shapLabel} title={key}>
-                          {key.replace(/_/g, ' ')}
-                        </div>
-                        <div className={styles.barTrack}>
-                          <div 
-                            className={`${styles.barFill} ${isPositive ? styles.barPositive : styles.barNegative}`}
-                            style={{ width: `${width}%` }}
-                          />
-                        </div>
-                        <div className={`${styles.shapValue} ${isPositive ? 'text-gradient' : ''}`} style={!isPositive ? {color: 'var(--neon-red)'} : {}}>
-                          {value > 0 ? '+' : ''}{value.toFixed(3)}
-                        </div>
-                      </div>
-                    );
-                })}
+                {renderShapBars(result.shap_values)}
+              </div>
+            </div>
+          </div>
+        </div>
+      )}
+
+      {result && result._type === 'predict/compare' && (
+        <div className={`${styles.dashboardGrid} animate-fade-in-up`} style={{gridTemplateColumns: '1fr'}}>
+          
+          <div className={`${styles.panel} glass-panel`} style={{marginBottom: '2rem'}}>
+            <h2 className={styles.panelTitle} style={{justifyContent: 'center', fontSize: '1.5rem'}}>
+              {result.driver1.driver_name} vs {result.driver2.driver_name}
+            </h2>
+            <div className={styles.gaugeContainer} style={{flexDirection: 'row', gap: '4rem'}}>
+              {/* Driver 1 */}
+              <div style={{display: 'flex', flexDirection: 'column', alignItems: 'center'}}>
+                <div className={styles.gaugeCircle} style={{ '--prob': `${(result.driver1_win_probability * 100).toFixed(1)}%` }}>
+                  <span className={styles.gaugeText}>
+                    {(result.driver1_win_probability * 100).toFixed(1)}<span style={{fontSize: '1.5rem', color: 'var(--text-secondary)'}}>%</span>
+                  </span>
+                </div>
+                <div className={styles.gaugeLabel}>{result.driver1.driver_name}</div>
+              </div>
+              
+              {/* VS */}
+              <div className={styles.vsText} style={{fontSize: '2rem'}}>VS</div>
+
+              {/* Driver 2 */}
+              <div style={{display: 'flex', flexDirection: 'column', alignItems: 'center'}}>
+                <div className={styles.gaugeCircle} style={{ '--prob': `${(result.driver2_win_probability * 100).toFixed(1)}%`, '--neon-cyan': 'var(--neon-red)' }}>
+                  <span className={styles.gaugeText}>
+                    {(result.driver2_win_probability * 100).toFixed(1)}<span style={{fontSize: '1.5rem', color: 'var(--text-secondary)'}}>%</span>
+                  </span>
+                </div>
+                <div className={styles.gaugeLabel}>{result.driver2.driver_name}</div>
+              </div>
+            </div>
+          </div>
+
+          <div className={`${styles.dashboardGrid}`} style={{gap: '2rem'}}>
+            {/* LLM Insight */}
+            <div className={`${styles.panel} glass-panel delay-100`}>
+              <h2 className={styles.panelTitle}>
+                <svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2"><path d="M21 15a2 2 0 0 1-2 2H7l-4 4V5a2 2 0 0 1 2-2h14a2 2 0 0 1 2 2z"/></svg>
+                Tale of the Tape
+              </h2>
+              <div className={styles.insightText} style={{whiteSpace: 'pre-wrap'}}>
+                {result.llm_analysis}
+              </div>
+            </div>
+
+            {/* SHAP Deltas */}
+            <div className={`${styles.panel} glass-panel delay-200`}>
+              <h2 className={styles.panelTitle}>
+                <svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2"><line x1="18" y1="20" x2="18" y2="10"/><line x1="12" y1="20" x2="12" y2="4"/><line x1="6" y1="20" x2="6" y2="14"/></svg>
+                Mathematical Edges (Tug of War)
+              </h2>
+              <div className={styles.shapContainer}>
+                {renderShapBars(result.shap_deltas, true)}
+                <div style={{display: 'flex', justifyContent: 'space-between', marginTop: '1rem', color: 'var(--text-secondary)', fontSize: '0.8rem'}}>
+                    <span>← Advantage {result.driver2.driver_name}</span>
+                    <span>Advantage {result.driver1.driver_name} →</span>
+                </div>
               </div>
             </div>
           </div>
+          
         </div>
       )}
     </main>

frontend/app/page.module.css

@@ -274,3 +274,92 @@
   font-size: 0.85rem;
   font-family: var(--font-geist-mono), monospace;
 }
+
+/* Tabs */
+.tabsContainer {
+  display: flex;
+  gap: 1rem;
+  margin-bottom: 2rem;
+  z-index: 10;
+}
+
+.tabBtn {
+  background: rgba(0, 0, 0, 0.3);
+  border: 1px solid rgba(0, 240, 255, 0.3);
+  color: var(--text-muted);
+  padding: 0.75rem 2rem;
+  border-radius: 20px;
+  cursor: pointer;
+  transition: var(--transition-fast);
+  font-family: inherit;
+  font-size: 1rem;
+  text-transform: uppercase;
+  letter-spacing: 1px;
+}
+
+.tabBtn:hover {
+  background: rgba(0, 240, 255, 0.1);
+  color: var(--neon-cyan);
+}
+
+.tabActive {
+  background: rgba(0, 240, 255, 0.15);
+  border-color: var(--neon-cyan);
+  color: var(--neon-cyan);
+  box-shadow: 0 0 15px rgba(0, 240, 255, 0.3);
+}
+
+/* Compare Form */
+.compareForm {
+  display: flex;
+  flex-direction: column;
+  gap: 1.5rem;
+  width: 100%;
+}
+
+.compareInputsRow {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: 1rem;
+}
+
+.vsText {
+  font-size: 1.5rem;
+  font-weight: 800;
+  color: var(--text-muted);
+  font-style: italic;
+}
+
+.compareInputsRowSmall {
+  display: flex;
+  gap: 1rem;
+  justify-content: center;
+}
+
+.compareSubmitBtn {
+  background: linear-gradient(90deg, rgba(0, 240, 255, 0.2), rgba(0, 240, 255, 0.05));
+  border: 1px solid var(--neon-cyan);
+  color: var(--neon-cyan);
+  padding: 1rem 2rem;
+  border-radius: var(--border-radius-lg);
+  cursor: pointer;
+  font-family: inherit;
+  font-size: 1.1rem;
+  font-weight: 600;
+  text-transform: uppercase;
+  letter-spacing: 2px;
+  transition: var(--transition-fast);
+}
+
+.compareSubmitBtn:hover:not(:disabled) {
+  background: rgba(0, 240, 255, 0.2);
+  box-shadow: var(--shadow-glow);
+}
+
+.compareSubmitBtn:disabled {
+  border-color: rgba(0, 240, 255, 0.1);
+  color: var(--text-muted);
+  cursor: not-allowed;
+  background: transparent;
+}