index.html

<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>
</div>

<script src="https://unpkg.com/monaco-editor@latest/min/vs/loader.js"></script>
<script>
  const proxy = URL.createObjectURL(
    new Blob(
      [`
          self.MonacoEnvironment = {
            baseUrl: 'https://unpkg.com/monaco-editor@latest/min/'
          };
          importScripts('https://unpkg.com/monaco-editor@latest/min/vs/base/worker/workerMain.js');
        `],
      { type: "text/javascript" }
    )
  );

  window.MonacoEnvironment = { getWorkerUrl: () => proxy };

  require.config({
    paths: { vs: "https://unpkg.com/monaco-editor@latest/min/vs" }
  });

  let diffEditor;

  require(["vs/editor/editor.main"], function () {
    diffEditor = monaco.editor.createDiffEditor(
      document.getElementById("trl_diff"),
      { 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(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>