Update src/App.js

src/App.js

@@ -116,7 +116,7 @@ const ThemeToggle = ({ theme, onToggle }) => {
 // ─────────────────────────────────────────────────────────
 // SCORE BADGE
 // ─────────────────────────────────────────────────────────
-const ScoreBadge = ({ score }) => {
+const ScoreBadge = ({ score, label = "ROUGE-L" }) => {
   const pct   = parseFloat(score) * 100;
   const color = pct >= 60 ? "#22c55e" : pct >= 35 ? "#f59e0b" : "#ef4444";
   return (
@@ -125,7 +125,7 @@ const ScoreBadge = ({ score }) => {
       border: `1px solid ${color}55`,
       borderRadius: 6, padding: "2px 10px",
       fontFamily: "monospace", fontWeight: 700, fontSize: 13,
-    }}>ROUGE-L: {pct.toFixed(1)}%</span>
+    }}>{label}: {pct.toFixed(1)}%</span>
   );
 };
 
@@ -270,6 +270,8 @@ export default function App() {
   const [rewardOutput,  setRewardOutput]  = useState("");
   const [grpoOutput,    setGrpoOutput]    = useState("");
   const [rewardScore,   setRewardScore]   = useState(null);
+  const [hfJudgeSFT,    setHfJudgeSFT]    = useState(null);
+  const [hfJudgeGRPO,   setHfJudgeGRPO]  = useState(null);
   // Breakdown states removed - no longer used
   const [loading,       setLoading]       = useState(false);
   const [dragging,      setDragging]      = useState(false);
@@ -280,7 +282,7 @@ export default function App() {
     if (!image || !imageFile) return;
     setLoading(true);
     setSftOutput(""); setRewardOutput(""); setGrpoOutput("");
-    setRewardScore(null);  
+    setRewardScore(null); setHfJudgeSFT(null); setHfJudgeGRPO(null);
     const BASE = "";
 
     try {
@@ -299,6 +301,10 @@ export default function App() {
       const rmData = await rmRes.json();
       setRewardOutput(rmData.feedback);
       setRewardScore(parseFloat(rmData.score).toFixed(2));
+      // Use hf_judge score for comparison when ground truth is provided
+      if (groundTruth && rmData.breakdown) {
+        setHfJudgeSFT(rmData.breakdown.hf_judge ?? null);
+      }
 
       // 3. GRPO + its reward breakdown
       const grpoForm = new FormData();
@@ -307,6 +313,10 @@ export default function App() {
       const grpoRes  = await fetch(`${BASE}/grpo_reward`, { method: "POST", body: grpoForm });
       const grpoData = await grpoRes.json();
       setGrpoOutput(grpoData.report);
+      // Use hf_judge score for comparison when ground truth is provided
+      if (groundTruth && grpoData.breakdown) {
+        setHfJudgeGRPO(grpoData.breakdown.hf_judge ?? null);
+      }
 
     } catch (err) {
       console.error("Inference error:", err);
@@ -333,12 +343,18 @@ export default function App() {
   const clearAll = () => {
     setImage(null); setImageFile(null);
     setSftOutput(""); setRewardOutput(""); setGrpoOutput("");
-    setRewardScore(null);
+    setRewardScore(null); setHfJudgeSFT(null); setHfJudgeGRPO(null);
     if (fileRef.current) fileRef.current.value = "";
   };
 
-  const rougeSFT  = groundTruth && sftOutput  ? ROUGE_L(sftOutput,  groundTruth) : null;
-  const rougeGRPO = groundTruth && grpoOutput ? ROUGE_L(grpoOutput, groundTruth) : null;
+  // When ground truth is provided, use HF judge score from backend; otherwise fall back to ROUGE-L
+  const scoreSFT  = groundTruth && sftOutput
+    ? (hfJudgeSFT  !== null ? hfJudgeSFT  : ROUGE_L(sftOutput,  groundTruth))
+    : null;
+  const scoreGRPO = groundTruth && grpoOutput
+    ? (hfJudgeGRPO !== null ? hfJudgeGRPO : ROUGE_L(grpoOutput, groundTruth))
+    : null;
+  const scoreLabel = groundTruth ? (hfJudgeSFT !== null || hfJudgeGRPO !== null ? "HF Judge" : "ROUGE-L") : "ROUGE-L";
 
   return (
     <div style={{
@@ -529,7 +545,7 @@ export default function App() {
             <OutputCard
               theme={theme} title="SFT Model Output " icon="🧠" accent="#3b82f6"
               content={sftOutput} loading={loading && !sftOutput}
-              badge={rougeSFT !== null && <ScoreBadge score={rougeSFT} />}
+              badge={scoreSFT !== null && <ScoreBadge score={scoreSFT} label={scoreLabel} />}
             />
           </div>
 
@@ -572,7 +588,7 @@ export default function App() {
             <OutputCard
               theme={theme} title="NeMo Gym Output" icon="🎯" accent="#22c55e"
               content={grpoOutput} loading={loading && rewardOutput && !grpoOutput}
-              badge={rougeGRPO !== null && <ScoreBadge score={rougeGRPO} />}
+              badge={scoreGRPO !== null && <ScoreBadge score={scoreGRPO} label={scoreLabel} />}
             />
           </div>
 
@@ -583,14 +599,14 @@ export default function App() {
               boxShadow: theme.cardShadow, transition: "background .3s, border-color .3s",
             }}>
               <div style={{ fontSize: 10, color: theme.textMuted, textTransform: "uppercase", letterSpacing: 2, fontWeight: 700, marginBottom: 16 }}>
-                📈 ROUGE-L Comparison vs Ground Truth
+                📈 {scoreLabel} Comparison vs Ground Truth
               </div>
               <div style={{ display: "grid", gridTemplateColumns: "1fr 1fr", gap: 16 }}>
                 {[
-                  { label: "SFT (Original)", score: rougeSFT,  color: "#3b82f6" },
-                  { label: "GRPO (Final)",   score: rougeGRPO, color: "#22c55e" },
+                  { label: "SFT (Original)", score: scoreSFT,  color: "#3b82f6" },
+                  { label: "GRPO (Final)",   score: scoreGRPO, color: "#22c55e" },
                 ].map(({ label, score, color }) => {
-                  const originalScore = (parseFloat(score) * 100).toFixed(1);
+                  const displayPct = (parseFloat(score) * 100).toFixed(1);
                   return (
                     <div key={label} style={{
                       background: theme.surfaceAlt, borderRadius: 10, padding: 16,
@@ -598,17 +614,17 @@ export default function App() {
                     }}>
                       <div style={{ fontSize: 12, color: theme.textMuted, marginBottom: 8 }}>{label}</div>
                       <div style={{ fontSize: 28, fontWeight: 800, color, fontFamily: "monospace" }}>
-                        {originalScore}%
+                        {displayPct}%
                       </div>
                       <div style={{ marginTop: 10, height: 5, background: theme.barTrack, borderRadius: 3 }}>
                         <div style={{
-                          width: `${originalScore}%`, height: "100%",
+                          width: `${displayPct}%`, height: "100%",
                           background: color, borderRadius: 3, transition: "width 1.2s ease",
                         }} />
                       </div>
-                      {parseFloat(originalScore) > parseFloat(rougeSFT) * 100 && label.includes("GRPO") && (
+                      {parseFloat(displayPct) > parseFloat(scoreSFT) * 100 && label.includes("GRPO") && (
                         <div style={{ fontSize: 11, color: "#22c55e", marginTop: 7, fontWeight: 600 }}>
-                          ▲ +{(parseFloat(originalScore) - parseFloat(rougeSFT) * 100).toFixed(1)}% improvement
+                          ▲ +{(parseFloat(displayPct) - parseFloat(scoreSFT) * 100).toFixed(1)}% improvement
                         </div>
                       )}
                     </div>
@@ -666,4 +682,4 @@ export default function App() {
       </footer>
     </div>
   );
-}
+}