Update app.py

app.py

@@ -135,42 +135,15 @@ def markdown_to_html(text: str) -> str:
         )
 
 def render_article(article_path: str, component_inserts: dict[str, callable]):
-    """Render article from markdown with embedded interactive components."""
-    if Path(article_path).exists():
-        raw_content = Path(article_path).read_text(encoding="utf-8")
-    else:
-        raw_content = f"**Missing article**: `{article_path}` not found."
-    
-    # Split on {{TOKEN}} markers (e.g., {{ALLOC_PLOT}})
-    content_parts = re.split(r"\{\{([A-Z_]+)\}\}", raw_content)
-    
+    raw = Path(article_path).read_text(encoding="utf-8") if Path(article_path).exists() else f"**Missing article**: `{article_path}`."
+    parts = re.split(r"\{\{([A-Z_]+)\}\}", raw)
     with gr.Column():
-        for index, part in enumerate(content_parts):
-            if index % 2 == 0:
-                # Render markdown content wrapped in article container
-                html_content = markdown_to_html(part)
-                # Add syntax highlighting script
-                highlighted_html = f'''
-                <div class="article">{html_content}</div>
-                <script src="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/11.9.0/highlight.min.js"></script>
-                <script src="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/11.9.0/languages/python.min.js"></script>
-                <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/11.9.0/styles/github.min.css">
-                <script>
-                    document.addEventListener('DOMContentLoaded', function() {{
-                        document.querySelectorAll('pre code').forEach((block) => {{
-                            hljs.highlightElement(block);
-                        }});
-                    }});
-                </script>
-                '''
-                gr.HTML(highlighted_html)
+        for i, part in enumerate(parts):
+            if i % 2 == 0:
+                gr.HTML(f'<div class="article">{markdown_to_html(part)}</div>')
             else:
-                # Render interactive component or show error
-                component_builder = component_inserts.get(part)
-                if component_builder is None:
-                    gr.HTML(f"<p><em>Unknown component: {part}</em></p>")
-                else:
-                    component_builder()
+                (component_inserts.get(part) or (lambda: gr.HTML(f"<p><em>Unknown component: {part}</em></p>")))()
+
 
 # ---------------------------
 # Terminal (safe, simplified)
@@ -425,57 +398,19 @@ def build_image(filename):
     return _build
 
 def build_d3_graph():
-    """Build interactive D3 dependency graph."""
     with gr.Group():
         gr.Markdown("### 🔗 Interactive Model Dependency Graph")
-        gr.Markdown("Explore how transformers models inherit from each other using the modular system. Click and drag nodes to interact!")
-        
-        # Check if the HTML file exists
         html_file = Path("static/d3_dependency_graph.html")
         if html_file.exists():
-            # Read the HTML content
-            html_content = html_file.read_text(encoding="utf-8")
-            
-            # Extract only the body content (remove head tags that might cause issues)
-            body_match = re.search(r'<body.*?>(.*?)</body>', html_content, re.DOTALL)
-            if body_match:
-                body_content = body_match.group(1)
-            else:
-                body_content = html_content
-            
-            # Get the script content
-            script_match = re.search(r'<script.*?>(.*?)</script>', html_content, re.DOTALL)
-            script_content = script_match.group(1) if script_match else ""
-            
-            # Create a clean embedded version
-            wrapped_html = f'''
-            <div id="d3-graph-container" style="width: 100%; height: 600px; border: 1px solid #e2e8f0; border-radius: 8px; overflow: hidden; background: white; position: relative;">
-                {body_content}
-            </div>
-            <script src="https://d3js.org/d3.v7.min.js"></script>
-            <script>
-                {script_content}
-            </script>
-            <style>
-                #d3-graph-container svg {{
-                    width: 100% !important;
-                    height: 100% !important;
-                }}
-                #d3-graph-container #legend {{
-                    position: absolute !important;
-                    top: 10px !important;
-                    left: 10px !important;
-                    z-index: 1000 !important;
-                    background: rgba(255,255,255,0.9) !important;
-                    padding: 12px !important;
-                    border-radius: 6px !important;
-                    font-size: 14px !important;
-                }}
-            </style>
-            '''
-            gr.HTML(wrapped_html)
+            gr.HTML(
+                f"""
+                <iframe src="file=static/d3_dependency_graph.html"
+                        style="width:100%;height:640px;border:1px solid #e2e8f0;border-radius:8px"
+                        loading="lazy"></iframe>
+                """
+            )
         else:
-            gr.Markdown("⚠️ **D3 dependency graph not found.** The file `static/d3_dependency_graph.html` is missing.")
+            gr.Markdown("⚠️ **D3 dependency graph not found.** Put it at `static/d3_dependency_graph.html`.")
 
 # ---------------------------
 # Inserts registry
@@ -498,6 +433,23 @@ INSERTS = {
 # ---------------------------
 # Layout / CSS / App
 # ---------------------------
+HLJS = """
+<link rel="stylesheet"
+      href="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/11.9.0/styles/github.min.css">
+<script src="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/11.9.0/highlight.min.js"></script>
+<script src="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/11.9.0/languages/python.min.js"></script>
+<script>
+(function(){
+  function run() {
+    document.querySelectorAll('pre code').forEach((el) => { hljs.highlightElement(el); });
+  }
+  run();
+  const mo = new MutationObserver(run);
+  mo.observe(document.body, {subtree: true, childList: true});
+})();
+</script>
+"""
+
 
 CSS = """
 /* Force light palette + high contrast */
@@ -548,91 +500,35 @@ html, body, .gradio-container { background: #fff !important; }
 .article a { color: var(--link-text-color) !important; text-decoration: underline; }
 .article a:hover { text-decoration: none; }
 
-/* Code blocks - HF blog style */
+/* Code blocks (keep container styling, let hljs theme handle token colors) */
 .article pre {
-  background: #f8fafc !important; 
-  border: 1px solid #e2e8f0 !important; 
+  background: #f8fafc !important;
+  border: 1px solid #e2e8f0 !important;
   border-radius: 8px !important;
-  padding: 1.5rem !important; 
-  margin: 2rem 0 !important; 
+  padding: 1.25rem !important;
+  margin: 1.5rem 0 !important;
   overflow-x: auto !important;
-  font-family: 'SF Mono', 'Monaco', 'Inconsolata', 'Roboto Mono', 'Courier New', monospace !important;
-  font-size: 0.875rem !important; 
-  line-height: 1.7 !important; 
-  color: #1e293b !important;
-  box-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.1), 0 1px 2px 0 rgba(0, 0, 0, 0.06) !important;
-}
-
-/* Code block syntax highlighting */
-.article pre code {
-  background: transparent !important;
-  color: #1e293b !important;
-  padding: 0 !important;
-  border-radius: 0 !important;
-  font-weight: 400 !important;
-  font-size: inherit !important;
-  line-height: inherit !important;
-}
-
-/* Inline code */
-.article code {
-  background: #f1f5f9 !important; 
-  color: #dc2626 !important; 
-  padding: 0.125rem 0.375rem !important; 
-  border-radius: 4px !important; 
-  font-weight: 500 !important;
-  font-family: 'SF Mono', 'Monaco', 'Inconsolata', 'Roboto Mono', monospace !important;
-  font-size: 0.875rem !important;
-}
-
-/* Python syntax highlighting with Highlight.js integration */
-.article pre code {
-  background: transparent !important;
-  color: #1e293b !important;
-  padding: 0 !important;
-  border-radius: 0 !important;
-  font-weight: 400 !important;
-  font-size: inherit !important;
-  line-height: inherit !important;
-}
-
-/* Highlight.js Python syntax highlighting */
-.article pre code .hljs-keyword,
-.article pre code .hljs-built_in {
-  color: #7c3aed !important; /* Purple for keywords like def, class, import */
-  font-weight: 600 !important;
-}
-
-.article pre code .hljs-string {
-  color: #059669 !important; /* Green for strings */
-}
-
-.article pre code .hljs-comment {
-  color: #6b7280 !important; /* Gray for comments */
-  font-style: italic !important;
-}
-
-.article pre code .hljs-number {
-  color: #dc2626 !important; /* Red for numbers */
+  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", monospace !important;
+  font-size: .92rem !important;
+  line-height: 1.6 !important;
 }
+.article pre code { background: transparent !important; padding: 0 !important; }
 
-.article pre code .hljs-class .hljs-title,
-.article pre code .hljs-function .hljs-title {
-  color: #2563eb !important; /* Blue for class/function names */
-  font-weight: 600 !important;
-}
+/* Let the theme show through */
+.hljs { background: transparent !important; }
 
-.article pre code .hljs-params {
-  color: #1e293b !important;
+/* Tenets highlight: any list item that contains an anchor id gets a card look */
+.article ol > li:has(> a[id]) {
+  border-left: 4px solid #1d4ed8;
+  background: #f8fafc;
+  padding: .75rem 1rem;
+  margin: .5rem 0;
+  border-radius: 8px;
 }
+.article ol > li:has(> a[id])::marker { color: #1d4ed8; font-weight: 700; }
+.article ol > li:has(> a[id]) code { background: #e0e7ff !important; }
 
-.article pre code .hljs-attr {
-  color: #0d9488 !important; /* Teal for attributes */
-}
 
-.article pre code .hljs-type {
-  color: #7c3aed !important; /* Purple for types */
-}
 
 /* Blockquotes, images, rules */
 .article blockquote { border-left: 4px solid var(--link-text-color); padding-left: 1rem; margin: 1.25rem 0; color: #334155 !important; font-style: italic; }
@@ -790,7 +686,8 @@ hr { border: 0; border-top: 1px solid var(--border-color); margin: 2rem 0; }
 
 """
 
-with gr.Blocks(css=CSS, fill_height=True, title="Interactive Blog — Transformers Feature Showcase") as demo:
+with gr.Blocks(css=CSS, fill_height=True, title="Interactive Blog — Transformers Feature Showcase") as demo
+    gr.HTML(HLJS)
     gr.HTML("<h1>Transformers Feature Showcase</h1><p>Interactive, scrollable demo.</p>")
     with gr.Row(elem_id="layout"):
         with gr.Column(scale=0):