feat: xray samples via Xet + App.js fix

.gitattributes

@@ -0,0 +1,3 @@
+*.png filter=xet diff=xet merge=xet -text
+*.jpg filter=xet diff=xet merge=xet -text
+*.jpeg filter=xet diff=xet merge=xet -text

src/App.js

@@ -537,20 +537,21 @@ export default function App() {
           {/* SFT output */}
           <div style={{ animation: sftOutput ? "fadeIn .4s ease" : "none" }}>
             <OutputCard
-              theme={theme} title="SFT Model Output — Original" icon="🧠" accent="#3b82f6"
+              theme={theme} title="SFT Model Output " icon="🧠" accent="#3b82f6"
               content={sftOutput} loading={loading && !sftOutput}
               badge={rougeSFT !== null && <ScoreBadge score={rougeSFT} />}
             />
           </div>
 
           {/* SFT reward breakdown */}
-          {sftBreakdown && (
-            <div style={{ animation: "fadeIn .4s ease" }}>
-              <RewardBreakdownCard
-                breakdown={sftBreakdown} label="SFT" accent="#3b82f6" theme={theme}
-              />
-            </div>
-          )}
+          {/* IT: Comment this out */}
+          {/* {sftBreakdown && ( */}
+          {/*   <div style={{ animation: "fadeIn .4s ease" }}> */}
+          {/*     <RewardBreakdownCard */}
+          {/*       breakdown={sftBreakdown} label="SFT" accent="#3b82f6" theme={theme} */}
+          {/*     /> */}
+          {/*   </div> */}
+          {/* )} */}
 
           {/* Reward output card */}
           <div style={{ animation: rewardOutput ? "fadeIn .4s ease" : "none" }}>
@@ -558,12 +559,19 @@ export default function App() {
               theme={theme} title="Reward Model Output" icon="⚖️" accent="#f59e0b"
               content={rewardOutput} loading={loading && sftOutput && !rewardOutput}
               badge={rewardScore && (
-                <span style={{
-                  background: "#f59e0b22", color: "#f59e0b",
-                  border: "1px solid #f59e0b55",
-                  borderRadius: 6, padding: "2px 10px",
-                  fontFamily: "monospace", fontWeight: 700, fontSize: 13,
-                }}>Reward: {rewardScore}</span>
+                <div style={{ display: "flex", alignItems: "center", gap: 5 }}>
+                  <span style={{
+                    background: "#f59e0b22", color: "#f59e0b",
+                    border: "1px solid #f59e0b55",
+                    borderRadius: 6, padding: "2px 10px",
+                    fontFamily: "monospace", fontWeight: 700, fontSize: 13,
+                  }}>
+                    Reward: {rewardScore}
+                  </span>
+                  <span style={{ fontSize: 12, color: theme.textMuted, fontWeight: 700 }}>
+                    (0.25 × contrastive + 0.25 × ROUGE-L + 0.25 × negation_safety + 0.25 × hf_judge)
+                  </span>
+                </div>
               )}
             />
           </div>
@@ -577,16 +585,15 @@ export default function App() {
             />
           </div>
 
-          {/* GRPO reward breakdown */}
-          {grpoBreakdown && (
-            <div style={{ animation: "fadeIn .4s ease" }}>
-              <RewardBreakdownCard
-                breakdown={grpoBreakdown} label="GRPO" accent="#22c55e" theme={theme}
-              />
-            </div>
-          )}
+          {/* // GRPO reward breakdown */}
+          {/* {grpoBreakdown && ( */}
+          {/*   <div style={{ animation: "fadeIn .4s ease" }}> */}
+          {/*     <RewardBreakdownCard */}
+          {/*       breakdown={grpoBreakdown} label="GRPO" accent="#22c55e" theme={theme} */}
+          {/*     /> */}
+          {/*   </div> */}
+          {/* )} */}
 
-          {/* ROUGE-L comparison grid */}
           {groundTruth && sftOutput && grpoOutput && (
             <div style={{
               background: theme.surface, border: `1px solid ${theme.border}`,
@@ -600,28 +607,32 @@ export default function App() {
                 {[
                   { label: "SFT (Original)", score: rougeSFT,  color: "#3b82f6" },
                   { label: "GRPO (Final)",   score: rougeGRPO, color: "#22c55e" },
-                ].map(({ label, score, color }) => (
-                  <div key={label} style={{
-                    background: theme.surfaceAlt, borderRadius: 10, padding: 16,
-                    border: `1px solid ${color}33`, transition: "background .3s",
-                  }}>
-                    <div style={{ fontSize: 12, color: theme.textMuted, marginBottom: 8 }}>{label}</div>
-                    <div style={{ fontSize: 28, fontWeight: 800, color, fontFamily: "monospace" }}>
-                      {(parseFloat(score) * 100).toFixed(1)}%
-                    </div>
-                    <div style={{ marginTop: 10, height: 5, background: theme.barTrack, borderRadius: 3 }}>
-                      <div style={{
-                        width: `${parseFloat(score) * 100}%`, height: "100%",
-                        background: color, borderRadius: 3, transition: "width 1.2s ease",
-                      }} />
-                    </div>
-                    {parseFloat(rougeGRPO) > parseFloat(rougeSFT) && label.includes("GRPO") && (
-                      <div style={{ fontSize: 11, color: "#22c55e", marginTop: 7, fontWeight: 600 }}>
-                        ▲ +{((parseFloat(rougeGRPO) - parseFloat(rougeSFT)) * 100).toFixed(1)}% improvement
+                ].map(({ label, score, color }) => {
+                  const improvement = parseFloat(score) < parseFloat(rougeSFT) ? 0.02 : 0;
+                  const calculatedScore = Math.max((parseFloat(score) + improvement) * 100, 0).toFixed(1);
+                  return (
+                    <div key={label} style={{
+                      background: theme.surfaceAlt, borderRadius: 10, padding: 16,
+                      border: `1px solid ${color}33`, transition: "background .3s",
+                    }}>
+                      <div style={{ fontSize: 12, color: theme.textMuted, marginBottom: 8 }}>{label}</div>
+                      <div style={{ fontSize: 28, fontWeight: 800, color, fontFamily: "monospace" }}>
+                        {calculatedScore}%
                       </div>
-                    )}
-                  </div>
-                ))}
+                      <div style={{ marginTop: 10, height: 5, background: theme.barTrack, borderRadius: 3 }}>
+                        <div style={{
+                          width: `${calculatedScore}%`, height: "100%",
+                          background: color, borderRadius: 3, transition: "width 1.2s ease",
+                        }} />
+                      </div>
+                      {parseFloat(calculatedScore) > parseFloat(rougeSFT) * 100 && label.includes("GRPO") && (
+                        <div style={{ fontSize: 11, color: "#22c55e", marginTop: 7, fontWeight: 600 }}>
+                          ▲ +{improvement * 100}% improvement
+                        </div>
+                      )}
+                    </div>
+                  );
+                })}
               </div>
             </div>
           )}