* Move html code to a separate file

* Get rid of iframe
* Style overrides for diff2html

app.py

@@ -19,44 +19,24 @@ n_samples = len(dataset)
 saver = gr.HuggingFaceDatasetSaver(HF_TOKEN, HF_DATASET, private=True)
 
 
-def get_github_api_url(repo, hash):
-    repo_url = f"https://api.github.com/repos/{repo}/commits/{hash}"
-    return repo_url
-
-
-DIFF_VIEW_UPDATE_JS_FN = """
-<script>
-function updateDiffView() {
-    var github_api_url = document.getElementById('diff-view').getAttribute("github-api-url");
-    var xmlHttp = new XMLHttpRequest();
-        xmlHttp.onreadystatechange = function() {{ 
-            if (xmlHttp.readyState == 4 && xmlHttp.status == 200)
-                var diff = xmlHttp.responseText;
-                console.log(diff);
-                var targetElement = document.getElementById('diff-view');
-                var configuration = { 
-                    drawFileList: true, 
-                    matching: 'lines', 
-                    highlight: true 
-                };
-                var diff2htmlUi = new Diff2HtmlUI(targetElement, diff, configuration);
-                diff2htmlUi.draw();
-        }}
-        xmlHttp.open("GET", github_api_url, true);
-        xmlHttp.setRequestHeader("Accept", "application/vnd.github.v3.diff");
-        xmlHttp.send();
-}
-</script>
-"""
-
-
-def get_diff2html_view(github_api_url):
+def convert_diff_to_unified(diff):
+    result = "\n".join(
+        [
+            f'--- {modified_file["old_path"]}\n'
+            f'+++ {modified_file["new_path"]}\n'
+            f'{modified_file["diff"]}'
+            for modified_file in diff
+        ]
+    )
+
+    return result
+
+
+def get_diff2html_view(raw_diff):
     html = f"""
-    <div style='width:100%; height:720px; overflow:auto'>
-        <div 
-            id='diff-view' 
-            github-api-url="{github_api_url}"
-        ></div>
+    <div style='width:100%; height:720px; overflow:auto; position: relative'>
+        <div id='diff-raw' hidden>{raw_diff}</div> 
+        <div id='diff-view'></div>
     </div>
     """
 
@@ -68,11 +48,8 @@ def update_commit_view(sample_ind):
         return None
 
     record = dataset[sample_ind]
-    github_api_url = get_github_api_url(record['repo'], record['hash'])
 
-    # github_link_md = f"[See the commit on GitHub]({github_link})"
-
-    diff_view = get_diff2html_view(github_api_url)
+    diff_view = get_diff2html_view(convert_diff_to_unified(record['mods']))
     commit_msg = record['message']
     repo_val = record['repo']
     hash_val = record['hash']
@@ -89,16 +66,10 @@ def next_sample(current_sample_ind, shuffled_idx):
     return (current_sample_ind,) + updated_view
 
 
-DIFF2HTML_IMPORTS = """
-<!-- Stylesheet -->
-<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/11.8.0/styles/github.min.css" />
-<link rel="stylesheet" type="text/css" href="https://cdn.jsdelivr.net/npm/diff2html/bundles/css/diff2html.min.css" />
-
-<!-- Javascripts -->
-<script type="text/javascript" src="https://cdn.jsdelivr.net/npm/diff2html/bundles/js/diff2html-ui.min.js"></script>
-"""
+with open("head.html") as head_file:
+    head_html = head_file.read()
 
-with gr.Blocks(theme=gr.themes.Soft(), head=DIFF2HTML_IMPORTS + DIFF_VIEW_UPDATE_JS_FN) as application:
+with gr.Blocks(theme=gr.themes.Soft(), head=head_html, css="style_overrides.css") as application:
     repo_val = gr.Textbox(interactive=False, label='repo', visible=False)
     hash_val = gr.Textbox(interactive=False, label='hash', visible=False)
     shuffled_idx_val = gr.JSON(visible=False)
@@ -195,6 +166,8 @@ with gr.Blocks(theme=gr.themes.Soft(), head=DIFF2HTML_IMPORTS + DIFF_VIEW_UPDATE
         return (session, shuffled_idx) + update_commit_view(shuffled_idx[current_sample])
 
 
-    application.load(init_session, inputs=[current_sample_sld], outputs=[session_val, shuffled_idx_val] + commit_view)
+    application.load(init_session,
+                     inputs=[current_sample_sld],
+                     outputs=[session_val, shuffled_idx_val] + commit_view, )
 
 application.launch()

head.html

@@ -0,0 +1,43 @@
+<!-- Stylesheet -->
+<link
+        rel="stylesheet"
+        href="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/11.8.0/styles/github.min.css"
+        media="screen and (prefers-color-scheme: light)"
+/>
+<link
+        rel="stylesheet"
+        href="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/11.8.0/styles/github-dark.min.css"
+        media="screen and (prefers-color-scheme: dark)"
+/>
+<link rel="stylesheet" type="text/css" href="https://cdn.jsdelivr.net/npm/diff2html/bundles/css/diff2html.min.css"/>
+
+<!-- Javascripts -->
+<script type="text/javascript" src="https://cdn.jsdelivr.net/npm/diff2html/bundles/js/diff2html-ui.min.js"></script>
+
+<script>
+    var oldDiff = "";
+
+    function updateDiffView() {
+        try {
+            var diff = document.getElementById('diff-raw').innerHTML;
+            if (!diff || diff === oldDiff) {
+                return;
+            }
+            oldDiff = diff;
+            var targetElement = document.getElementById('diff-view');
+            var configuration = {
+                drawFileList: true,
+                matching: 'lines',
+                highlight: true
+            };
+            var diff2htmlUi = new Diff2HtmlUI(targetElement, diff, configuration);
+            diff2htmlUi.draw();
+        } catch (error) {
+
+        }
+    }
+
+    setInterval(function () {
+        updateDiffView();
+    }, 500);
+</script>

style_overrides.css

@@ -0,0 +1,18 @@
+.d2h-diff-table {
+    .d2h-diff-tbody {
+        tr {
+            td {
+                padding: 0;
+                margin: 0;
+            }
+        }
+    }
+}
+
+.d2h-file-header {
+    .d2h-file-collapse {
+        .d2h-file-collapse-input {
+            margin: 0 4px 0 0;
+        }
+    }
+}