Update index.html

index.html

@@ -1,3 +1,10 @@
+<div style="padding-bottom: 10px; display: flex; gap: 10px; align-items: center;">
+  <input id="original_url" type="text" placeholder="Original file URL" style="flex: 1; padding: 6px; font-size: 13px;"
+    value="https://raw.githubusercontent.com/huggingface/trl/main/trl/trainer/grpo_trainer.py" />
+  <input id="modified_url" type="text" placeholder="Modified file URL" style="flex: 1; padding: 6px; font-size: 13px;"
+    value="https://raw.githubusercontent.com/huggingface/trl/main/trl/trainer/rloo_trainer.py" />
+  <button onclick="loadDiff()" style="padding: 6px 14px; font-size: 13px;">Load</button>
+</div>
 
 <div style="padding-bottom: 20px;">
   <div id="trl_diff" style="width: 100%; height: 400px; border: 1px solid grey;"></div>
@@ -23,23 +30,29 @@
     paths: { vs: "https://unpkg.com/monaco-editor@latest/min/vs" }
   });
 
+  let diffEditor;
+
   require(["vs/editor/editor.main"], function () {
-    const diffEditor = monaco.editor.createDiffEditor(
+    diffEditor = monaco.editor.createDiffEditor(
       document.getElementById("trl_diff"),
-      {
-        readOnly: true,
-        automaticLayout: true
-      }
+      { readOnly: true, automaticLayout: true }
     );
+    loadDiff();
+  });
+
+  function loadDiff() {
+    const originalUrl = document.getElementById("original_url").value.trim();
+    const modifiedUrl = document.getElementById("modified_url").value.trim();
+    if (!diffEditor || !originalUrl || !modifiedUrl) return;
 
     Promise.all([
-      fetch("https://raw.githubusercontent.com/huggingface/trl/main/trl/trainer/grpo_trainer.py").then(r => r.text()),
-      fetch("https://raw.githubusercontent.com/huggingface/trl/main/trl/trainer/rloo_trainer.py").then(r => r.text())
+      fetch(originalUrl).then(r => r.text()),
+      fetch(modifiedUrl).then(r => r.text())
     ]).then(([originalTxt, modifiedTxt]) => {
       diffEditor.setModel({
         original: monaco.editor.createModel(originalTxt, "python"),
         modified: monaco.editor.createModel(modifiedTxt, "python")
       });
     });
-  });
-</script>
+  }
+</script>