Create update function for diff view using diff2htmlUI js library instead of iframe

app.py

@@ -18,38 +18,48 @@ n_samples = len(dataset)
 saver = gr.HuggingFaceDatasetSaver(HF_TOKEN, HF_DATASET, private=True)
 
 
-def get_github_link(repo, hash):
-    repo_url = f"https://github.com/{repo}/commit/{hash}"
+def get_github_api_url(repo, hash):
+    repo_url = f"https://api.github.com/repos/{repo}/commits/{hash}"
     return repo_url
 
 
-def get_diff2html_demo_iframe(github_link):
-    diff2html_link = (f"https://diff2html.xyz/demo.html?matching=none"
-                      f"&matchWordsThreshold=0.25"
-                      f"&maxLineLengthHighlight=10000"
-                      f"&diffStyle=word"
-                      f"&colorScheme=light"
-                      f"&renderNothingWhenEmpty=0"
-                      f"&matchingMaxComparisons=2500"
-                      f"&maxLineSizeInBlockForComparison=200"
-                      f"&outputFormat=line-by-line"
-                      f"&drawFileList=1&synchronisedScroll=1"
-                      f"&highlight=1"
-                      f"&fileListToggle=1"
-                      f"&fileListStartVisible=0"
-                      f"&highlightLanguages=[object%20Map]"
-                      f"&smartSelection=1"
-                      f"&fileContentToggle=1"
-                      f"&stickyFileHeaders=1"
-                      f"&diff={github_link}")
-
-    iframe_html = (f"<iframe "
-                   f"src=\"{diff2html_link}\" "
-                   f"title=\"diff2html Demo Diff Viewer\" "
-                   f"style='width:100%; height:720px; overflow:auto'>"
-                   f"</iframe>")
-
-    return iframe_html
+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):
+    html = f"""
+    <div style='width:100%; height:720px; overflow:auto'>
+        <div 
+            id='diff-view' 
+            github-api-url="{github_api_url}"
+        ></div>
+    </div>
+    """
+
+    return html
 
 
 def update_commit_view(sample_ind):
@@ -57,14 +67,15 @@ def update_commit_view(sample_ind):
         return None
 
     record = dataset[sample_ind]
-    github_link = get_github_link(record['repo'], record['hash'])
+    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_demo_iframe(github_link)
+    # github_link_md = f"[See the commit on GitHub]({github_link})"
+
+    diff_view = get_diff2html_view(github_api_url)
     commit_msg = record['message']
     repo_val = record['repo']
     hash_val = record['hash']
-    return github_link_md, diff_view, commit_msg, repo_val, hash_val
+    return diff_view, commit_msg, repo_val, hash_val
 
 
 def next_sample(current_sample_ind, shuffled_idx):
@@ -76,7 +87,16 @@ def next_sample(current_sample_ind, shuffled_idx):
     return (current_sample_ind,) + updated_view
 
 
-with gr.Blocks(theme=gr.themes.Soft()) as demo:
+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 gr.Blocks(theme=gr.themes.Soft(), head=DIFF2HTML_IMPORTS + DIFF_VIEW_UPDATE_JS_FN) 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)
@@ -94,7 +114,7 @@ with gr.Blocks(theme=gr.themes.Soft()) as demo:
             skip_btn = gr.Button("Skip the current sample")
     with gr.Row():
         with gr.Column(scale=2):
-            github_link = gr.Markdown()
+            # github_link = gr.Markdown()
             diff_view = gr.HTML()
         with gr.Column(scale=1):
             commit_msg = gr.Textbox(label="Commit message",
@@ -126,7 +146,7 @@ with gr.Blocks(theme=gr.themes.Soft()) as demo:
                                      label='session')
 
     commit_view = [
-        github_link,
+        # github_link,
         diff_view,
         commit_msg,
         repo_val,
@@ -164,6 +184,6 @@ with gr.Blocks(theme=gr.themes.Soft()) as demo:
         return (session, shuffled_idx) + update_commit_view(shuffled_idx[current_sample])
 
 
-    demo.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)
 
-demo.launch()
+application.launch()