clean up design

app.py

@@ -22,6 +22,7 @@ def _build_header_markdown(doc) -> str:
     if url:
         header += f"\n\n[{url}]({url})"
     return header
+
 def matches_filters(doc, require_has_math: bool | None, require_has_infobox: bool | None) -> bool:
     meta = doc.metadata or {}
     if require_has_math and not bool(meta.get("has_math")):
@@ -186,7 +187,7 @@ def show_doc(doc):
     info = meta.get("infoboxes", [])
     right = render_iframe(_safe_url_from_metadata(meta))
     header = _build_header_markdown(doc)
-    return left, meta, md_clean, info, right, header
+    return left, left, meta, md_clean, info, right, header
 
 
 def render_idx(docs, idx: int):
@@ -195,7 +196,7 @@ def render_idx(docs, idx: int):
     idx = max(0, min(idx, len(docs) - 1))
     doc = docs[idx]
     left, left_meta, md, info, right, header = show_doc(doc)
-    return left, left_meta, md, info, right, header
+    return left, left, left_meta, md, info, right, header
 
 
 def on_prev(docs_cache, idx: int, reader_iter, require_has_math: bool, require_has_infobox: bool):
@@ -213,7 +214,7 @@ def on_prev(docs_cache, idx: int, reader_iter, require_has_math: bool, require_h
                 filtered_idx = i
                 break
     left, left_meta, md, info, right, header = render_idx(docs_cache, filtered_idx)
-    return filtered_idx, docs_cache, reader_iter, left, left_meta, header, md, info, right
+    return filtered_idx, docs_cache, reader_iter, left, left, left_meta, header, md, info, right
 
 
 def on_next(docs_cache, idx: int, reader_iter, require_has_math: bool, require_has_infobox: bool):
@@ -227,7 +228,7 @@ def on_next(docs_cache, idx: int, reader_iter, require_has_math: bool, require_h
     if new_idx == -1:
         return idx, docs_cache, reader_iter, "No documents match filters.", {}, "", [], render_iframe("")
     left, left_meta, md, info, right, header = render_idx(docs_cache, new_idx)
-    return new_idx, docs_cache, reader_iter, left, left_meta, header, md, info, right
+    return new_idx, docs_cache, reader_iter, left, left, left_meta, header, md, info, right
 
 
 SCROLL_TO_TOP_JS = """
@@ -265,11 +266,13 @@ with gr.Blocks() as demo:
                     require_has_infobox = gr.Checkbox(label="Has infobox", value=False)
     with gr.Row():
         with gr.Column():
-            with gr.Tab("FineWiki"):
-                left_text = gr.Textbox(label="FineWiki extraction", lines=30, elem_id="left_text_box")
-            with gr.Tab("Metadata"):
+            with gr.Tab("FineWiki raw"):
+                left_text_raw = gr.Textbox(label="FineWiki extraction", lines=30, elem_id="left_text_box")
+            with gr.Tab("FineWiki markdown"):
+                left_text_md = gr.Markdown(label="FineWiki extraction", lines=30)
+            with gr.Tab("FineWiki metadata"):
                 left_meta = gr.JSON(label="Metadata")
-            with gr.Tab("Infoboxes"):
+            with gr.Tab("FineWiki infoboxes"):
                 right_infoboxes = gr.JSON(label="Infoboxes")
             
             with gr.Row():
@@ -282,20 +285,20 @@ with gr.Blocks() as demo:
                 right_markdown = gr.Textbox(label="wikimedia/wikipedia extraction", lines=30, elem_id="right_markdown_box")
 
 
-    _ev1 = language_select.change(on_select_language, inputs=[language_select, require_has_math, require_has_infobox], outputs=[idx_state, docs_state, iter_state, left_text, left_meta, header_md, right_markdown, right_infoboxes, right_iframe], concurrency_limit=1)
+    _ev1 = language_select.change(on_select_language, inputs=[language_select, require_has_math, require_has_infobox], outputs=[idx_state, docs_state, iter_state, left_text_raw, left_text_md, left_meta, header_md, right_markdown, right_infoboxes, right_iframe], concurrency_limit=1)
     _ev1.then(js=SCROLL_TO_TOP_JS)
-    _ev2 = demo.load(on_select_language, inputs=[language_select, require_has_math, require_has_infobox], outputs=[idx_state, docs_state, iter_state, left_text, left_meta, header_md, right_markdown, right_infoboxes, right_iframe], concurrency_limit=1)
+    _ev2 = demo.load(on_select_language, inputs=[language_select, require_has_math, require_has_infobox], outputs=[idx_state, docs_state, iter_state, left_text_raw, left_text_md, left_meta, header_md, right_markdown, right_infoboxes, right_iframe], concurrency_limit=1)
     _ev2.then(js=SCROLL_TO_TOP_JS)
     # find_btn.click(on_find, inputs=[docs_state, idx_state, iter_state, id_input, require_has_math, require_has_infobox], outputs=[idx_state, docs_state, iter_state, left_text, left_meta, header_md, right_markdown, right_infoboxes, right_iframe], concurrency_limit=1)
 
     # Visibility toggles driven directly by checkbox changes
-    _ev4 = prev_btn.click(on_prev, inputs=[docs_state, idx_state, iter_state, require_has_math, require_has_infobox], outputs=[idx_state, docs_state, iter_state, left_text, left_meta, header_md, right_markdown, right_infoboxes, right_iframe], concurrency_limit=1)
+    _ev4 = prev_btn.click(on_prev, inputs=[docs_state, idx_state, iter_state, require_has_math, require_has_infobox], outputs=[idx_state, docs_state, iter_state, left_text_raw, left_text_md, left_meta, header_md, right_markdown, right_infoboxes, right_iframe], concurrency_limit=1)
     _ev4.then(js=SCROLL_TO_TOP_JS)
-    _ev5 = next_btn.click(on_next, inputs=[docs_state, idx_state, iter_state, require_has_math, require_has_infobox], outputs=[idx_state, docs_state, iter_state, left_text, left_meta, header_md, right_markdown, right_infoboxes, right_iframe], concurrency_limit=1)
+    _ev5 = next_btn.click(on_next, inputs=[docs_state, idx_state, iter_state, require_has_math, require_has_infobox], outputs=[idx_state, docs_state, iter_state, left_text_raw, left_text_md, left_meta, header_md, right_markdown, right_infoboxes, right_iframe], concurrency_limit=1)
     _ev5.then(js=SCROLL_TO_TOP_JS)
-    _ev4 = prev_btn2.click(on_prev, inputs=[docs_state, idx_state, iter_state, require_has_math, require_has_infobox], outputs=[idx_state, docs_state, iter_state, left_text, left_meta, header_md, right_markdown, right_infoboxes, right_iframe], concurrency_limit=1)
+    _ev4 = prev_btn2.click(on_prev, inputs=[docs_state, idx_state, iter_state, require_has_math, require_has_infobox], outputs=[idx_state, docs_state, iter_state, left_text_raw, left_text_md, left_meta, header_md, right_markdown, right_infoboxes, right_iframe], concurrency_limit=1)
     _ev4.then(js=SCROLL_TO_TOP_JS)
-    _ev5 = next_btn2.click(on_next, inputs=[docs_state, idx_state, iter_state, require_has_math, require_has_infobox], outputs=[idx_state, docs_state, iter_state, left_text, left_meta, header_md, right_markdown, right_infoboxes, right_iframe], concurrency_limit=1)
+    _ev5 = next_btn2.click(on_next, inputs=[docs_state, idx_state, iter_state, require_has_math, require_has_infobox], outputs=[idx_state, docs_state, iter_state, left_text_raw, left_text_md, left_meta, header_md, right_markdown, right_infoboxes, right_iframe], concurrency_limit=1)
     _ev5.then(js=SCROLL_TO_TOP_JS)
 
     # Enable global queue to coordinate concurrent requests safely