index.html

<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();
  });

  const ORIGINAL_URL = "https://trl-lib-diff-view.static.hf.space/grpo_trainer.py";
  const MODIFIED_URL = "https://trl-lib-diff-view.static.hf.space/rloo_trainer.py";

  function loadDiff() {
    if (!diffEditor) return;

    Promise.all([
      fetch(ORIGINAL_URL).then(r => r.text()),
      fetch(MODIFIED_URL).then(r => r.text())
    ]).then(([originalTxt, modifiedTxt]) => {
      diffEditor.setModel({
        original: monaco.editor.createModel(originalTxt, "python"),
        modified: monaco.editor.createModel(modifiedTxt, "python")
      });
    });
  }
</script>