enance code blocks

app.py

@@ -411,10 +411,46 @@ def build_image(filename):
     return _build
 
 def build_d3_graph():
+    """Build interactive D3 dependency graph."""
     with gr.Group():
-        with open("static/d3_dependency_graph.html", "r") as f:
-            html_content = f.read()
-        gr.HTML(html_content, elem_id="d3-dependency-graph")
+        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 and modify the HTML content for direct embedding
+            html_content = html_file.read_text(encoding="utf-8")
+            
+            # Wrap in a container with proper styling
+            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;
+            ">
+                {html_content}
+            </div>
+            <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;
+                }}
+            </style>
+            '''
+            gr.HTML(wrapped_html, elem_id="d3-dependency-graph")
+        else:
+            gr.Markdown("⚠️ **D3 dependency graph not found.** The file `static/d3_dependency_graph.html` is missing.")
 
 # ---------------------------
 # Inserts registry
@@ -487,15 +523,67 @@ 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 */
+/* Code blocks - HF blog style */
 .article pre {
-  background: #f8fafc; border: 1px solid var(--border-color); border-radius: 8px;
-  padding: 1rem; margin: 1.25rem 0; overflow-x: auto;
-  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", monospace;
-  font-size: .95rem; line-height: 1.6rem; color: #0b0f19 !important;
+  background: #f8fafc !important; 
+  border: 1px solid #e2e8f0 !important; 
+  border-radius: 8px !important;
+  padding: 1.5rem !important; 
+  margin: 2rem 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: #e2e8f0; color: #0b0f19 !important; padding: .15rem .35rem; border-radius: .25rem; font-weight: 600;
+  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 approximation */
+.article pre code .hljs-keyword,
+.article pre code .hljs-built_in {
+  color: #7c3aed !important; /* Purple for keywords */
+  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 */
+}
+
+.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;
 }
 
 /* Blockquotes, images, rules */