Delete app.py

app.py

@@ -1,917 +0,0 @@
-# Standard library imports
-import re
-import subprocess
-import threading
-import time
-from pathlib import Path
-from html import escape
-# Third-party imports
-import gradio as gr
-import numpy as np
-import pandas as pd
-import torch
-import spaces
-from transformers import AutoModelForCausalLM
-from transformers import modeling_utils as transformers_modeling
-
-# Optional imports for markdown processing
-try:
-    from importlib import import_module
-    from markdown_it import MarkdownIt
-    HAS_MARKDOWN_IT = True
-except ImportError:
-    HAS_MARKDOWN_IT = False
-
-try:
-    import markdown
-    HAS_PYTHON_MARKDOWN = True
-except ImportError:
-    HAS_PYTHON_MARKDOWN = False
-
-try:
-    from fastrtc import WebRTC, ReplyOnPause
-    HAS_FASTRTC = True
-except ImportError:
-    HAS_FASTRTC = False
-
-# ---------------------------
-# Markdown rendering
-# ---------------------------
-
-def _create_markdownit_renderer():
-    """Create markdown-it renderer with plugins if available."""
-    if not HAS_MARKDOWN_IT:
-        return None
-        
-    try:
-        markdown_parser = MarkdownIt("gfm-like")
-
-        # Version-agnostic plugin loading
-        footnote_module = import_module("mdit_py_plugins.footnote")
-        footnote_plugin = getattr(footnote_module, "footnote", None) or getattr(footnote_module, "footnote_plugin")
-        markdown_parser.use(footnote_plugin)
-
-        tasklist_module = import_module("mdit_py_plugins.tasklists")
-        tasklist_plugin = getattr(tasklist_module, "tasklists", None) or getattr(tasklist_module, "tasklists_plugin")
-        markdown_parser.use(tasklist_plugin)
-
-        container_module = import_module("mdit_py_plugins.container")
-        container_plugin = getattr(container_module, "container", None) or getattr(container_module, "container_plugin")
-        try:
-            markdown_parser.use(container_plugin, "details")
-        except TypeError:
-            markdown_parser.use(lambda m: container_plugin(m, name="details"))
-        return markdown_parser
-    except Exception:
-        return None
-
-def _create_python_markdown_config():
-    """Create Python-Markdown configuration as fallback."""
-    if not HAS_PYTHON_MARKDOWN:
-        return None
-        
-    extensions = [
-        "extra",            # tables + fenced code
-        "footnotes",
-        "admonition",
-        "toc",
-        "pymdownx.details",
-        "pymdownx.superfences",
-        "pymdownx.tasklist",
-    ]
-    extension_config = {
-        "pymdownx.tasklist": {"custom_checkbox": True}, 
-        "toc": {"permalink": True}
-    }
-    return ("python-markdown", extensions, extension_config, markdown)
-
-# Initialize markdown engine
-markdown_renderer = _create_markdownit_renderer()
-if markdown_renderer:
-    markdown_engine = ("markdown-it", markdown_renderer)
-else:
-    markdown_engine = _create_python_markdown_config()
-    if not markdown_engine:
-        raise ImportError("No markdown processor available")
-
-def _obsidian_rewrites(text: str) -> str:
-    # 1) Obsidian image embeds: ![[img.png]]  ->  ![](file=content/img.png)
-    text = re.sub(r'!\[\[([^\]|]+)\]\]', r'![](file=content/\1)', text)
-
-    # 2) Standard Markdown images with relative paths: ![alt](path.png) -> ![alt](file=path.png)
-    #    Skip if already http(s) or file=
-    text = re.sub(
-        r'!\[([^\]]*)\]\(((?!https?://|file=)[^)]+)\)',
-        r'![\1](file=\2)',
-        text,
-    )
-
-    # 3) Obsidian wiki links (non-image): [[file|label]] / [[file]]
-    text = re.sub(r'\[\[([^\]|]+)\|([^\]]+)\]\]', r'[\2](\1)', text)
-    text = re.sub(r'\[\[([^\]]+)\]\]', r'[\1](\1)', text)
-
-    # 4) Encode spaces in file= URLs so the browser doesn’t choke
-    def _enc(m):
-        return "file=" + m.group(1).replace(" ", "%20")
-    text = re.sub(r'file=([^)>\s]+)', _enc, text)
-
-    return text
-
-
-def markdown_to_html(text: str) -> str:
-    """Convert markdown text to HTML using the configured renderer."""
-    text = _obsidian_rewrites(text)
-    
-    if markdown_engine[0] == "markdown-it":
-        renderer = markdown_engine[1]
-        return renderer.render(text)
-    else:
-        engine_type, extensions, extension_config, markdown_module = markdown_engine
-        return markdown_module.markdown(
-            text, 
-            extensions=extensions, 
-            extension_configs=extension_config, 
-            output_format="html5"
-        )
-
-def render_article(article_path: str, component_inserts: dict[str, callable]):
-    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(elem_id="article-content"):
-        for i, part in enumerate(parts):
-            if i % 2 == 0:
-                gr.HTML(f'<div class="article">{markdown_to_html(part)}</div>')
-            else:
-                (component_inserts.get(part) or (lambda: gr.HTML(f"<p><em>Unknown component: {part}</em></p>")))()
-
-
-# ---------------------------
-# Terminal (safe, simplified)
-# ---------------------------
-
-def run_shell(cmd: str) -> str:
-    banned = ["|", ">", "<", "&&", "||", "`"]
-    if any(b in cmd for b in banned):
-        return "$ " + cmd + "\nBlocked characters. Use a single command."
-    try:
-        p = subprocess.run(cmd, shell=True, check=False, capture_output=True, text=True, timeout=30)
-        return f"$ {cmd}\n{p.stdout}{p.stderr}"
-    except Exception as e:
-        return f"$ {cmd}\n{e!r}"
-
-
-def build_code_compare(left_path, right_path, left_title="modular", right_title="modeling"):
-    def _build():
-        left = Path(left_path).read_text(encoding="utf-8") if Path(left_path).exists() else "# Missing " + left_path
-        right = Path(right_path).read_text(encoding="utf-8") if Path(right_path).exists() else "# Missing " + right_path
-        gr.HTML(f"""
-<div class="code-compare">
-  <div class="col">
-    <div class="col-head">{left_title}</div>
-    <pre><code class="language-python">{escape(left)}</code></pre>
-  </div>
-  <div class="col">
-    <div class="col-head">{right_title}</div>
-    <pre><code class="language-python">{escape(right)}</code></pre>
-  </div>
-</div>
-""")
-    return _build
-        
-def build_terminal():
-    with gr.Group():
-        cmd = gr.Textbox(label="Command", value="python -c 'import torch; print(torch.__version__)'")
-        run = gr.Button("Run")
-        out = gr.Textbox(label="Output", lines=12, interactive=False, elem_classes=["monospace-output"])
-        run.click(run_shell, inputs=cmd, outputs=out, scroll_to_output=False)
-
-# ---------------------------------------
-# Attention Mask Visualizer (Transformers)
-# ---------------------------------------
-
-def _import_attention_visualizer():
-    try:
-        from transformers.utils.attention_visualizer import AttentionMaskVisualizer
-    except Exception as e:
-        raise RuntimeError(
-            "AttentionMaskVisualizer is unavailable in this Transformers version."
-        ) from e
-    return AttentionMaskVisualizer
-
-@spaces.GPU(duration=120)
-def render_attention_mask(model_id: str, prompt: str) -> str:
-    try:
-        AttentionMaskVisualizer = _import_attention_visualizer()
-        vis = AttentionMaskVisualizer(model_id)
-        out = vis(prompt)
-        return str(out)
-    except Exception as e:
-        return f"<p>Attention visualizer error: {e}</p>"
-
-def build_attn_vis():
-    with gr.Group():
-        with gr.Row():
-            model = gr.Dropdown(
-                label="Model",
-                choices=["openai-community/gpt2", "google/gemma-2-2b"],
-                value="openai-community/gpt2",
-                allow_custom_value=True,
-            )
-            prompt = gr.Textbox(label="Prompt", value="You are an assistant. Make sure you print me.")
-            go = gr.Button("Render")
-        html = gr.HTML()
-        go.click(render_attention_mask, inputs=[model, prompt], outputs=html, scroll_to_output=False)
-
-# -------------------------------------------------------
-# Transformers caching allocator warmup (time vs MiB plot)
-# -------------------------------------------------------
-
-
-def _measure_load_timeline(model_id: str, disable_warmup: bool):
-    """Measure memory usage during model loading with/without cache warmup."""
-    original_warmup_func = getattr(transformers_modeling, "caching_allocator_warmup", None)
-    if disable_warmup and original_warmup_func is not None:
-        transformers_modeling.caching_allocator_warmup = lambda *args, **kwargs: None
-    
-    try:
-        device = "cuda" if torch.cuda.is_available() else "cpu"
-        timeline_data = []
-
-        def sample_memory(start_time, stop_event):
-            while not stop_event.is_set():
-                if device == "cuda":
-                    torch.cuda.synchronize()
-                    allocated_memory = torch.cuda.max_memory_allocated()
-                    torch.cuda.reset_peak_memory_stats()
-                else:
-                    allocated_memory = 0
-                timeline_data.append({
-                    "t": time.perf_counter() - start_time, 
-                    "MiB": allocated_memory / (1024**2)
-                })
-                time.sleep(0.02)
-
-        if device == "cuda":
-            torch.cuda.empty_cache()
-            torch.cuda.reset_peak_memory_stats()
-        
-        start_time = time.perf_counter()
-        stop_event = threading.Event()
-        memory_thread = threading.Thread(target=sample_memory, args=(start_time, stop_event), daemon=True)
-        memory_thread.start()
-
-        model_kwargs = {"low_cpu_mem_usage": True}
-        if device == "cuda":
-            model_kwargs.update({
-                "torch_dtype": torch.float16, 
-                "device_map": "cuda:0"
-            })
-        
-        model = AutoModelForCausalLM.from_pretrained(model_id, **model_kwargs)
-
-        stop_event.set()
-        memory_thread.join()
-
-        if device == "cuda":
-            torch.cuda.synchronize()
-            final_memory = torch.cuda.memory_allocated()
-            timeline_data.append({
-                "t": time.perf_counter() - start_time, 
-                "MiB": final_memory / (1024**2)
-            })
-
-        del model
-        if device == "cuda":
-            torch.cuda.empty_cache()
-            torch.cuda.ipc_collect()
-
-        return timeline_data
-    finally:
-        if original_warmup_func is not None:
-            transformers_modeling.caching_allocator_warmup = original_warmup_func
-
-@spaces.GPU(duration=240)
-def profile_warmup_comparison(model_id: str):
-    """Profile memory usage with and without cache warmup."""
-    if not torch.cuda.is_available():
-        time_points = np.linspace(0, 5, 50)
-        base_memory = np.cumsum(np.random.exponential(50, 50))
-        warmup_enabled_data = [
-            {"t": t, "MiB": mem, "mode": "🚀 Warmup ON (Optimized)"} 
-            for t, mem in zip(time_points, base_memory * 0.8)
-        ]
-        warmup_disabled_data = [
-            {"t": t, "MiB": mem, "mode": "📈 Warmup OFF (Standard)"} 
-            for t, mem in zip(time_points, base_memory)
-        ]
-        return pd.DataFrame(warmup_enabled_data + warmup_disabled_data)
-    
-    try:
-        warmup_enabled_timeline = _measure_load_timeline(model_id, disable_warmup=False)
-        warmup_disabled_timeline = _measure_load_timeline(model_id, disable_warmup=True)
-        
-        all_data = []
-        all_data.extend([
-            {"t": entry["t"], "MiB": entry["MiB"], "mode": "🚀 Warmup ON (Optimized)"} 
-            for entry in warmup_enabled_timeline
-        ])
-        all_data.extend([
-            {"t": entry["t"], "MiB": entry["MiB"], "mode": "📈 Warmup OFF (Standard)"} 
-            for entry in warmup_disabled_timeline
-        ])
-        
-        result_dataframe = pd.DataFrame(all_data)
-        
-        if warmup_enabled_timeline and warmup_disabled_timeline:
-            peak_with_warmup = max(entry["MiB"] for entry in warmup_enabled_timeline)
-            peak_without_warmup = max(entry["MiB"] for entry in warmup_disabled_timeline)
-            if peak_without_warmup > 0:
-                savings_percent = ((peak_without_warmup - peak_with_warmup) / peak_without_warmup * 100)
-                print(f"Memory savings: {savings_percent:.1f}% (Peak: {peak_with_warmup:.0f} MiB vs {peak_without_warmup:.0f} MiB)")
-        
-        return result_dataframe
-    except Exception as error:
-        print(f"Error profiling {model_id}: {error}")
-        return pd.DataFrame(columns=["t", "MiB", "mode"])
-
-def build_alloc_plot():
-    with gr.Group():
-        gr.Markdown("### 🚀 Cache Pre-allocator Performance Demo")
-        gr.Markdown("Compare model loading with and without transformers' caching allocator warmup. This demonstrates the memory efficiency improvements.")
-        
-        with gr.Row():
-            model = gr.Dropdown(
-                label="Model to Profile",
-                choices=[
-                    "openai-community/gpt2", 
-                    "google/gemma-2-2b",
-                    "microsoft/DialoGPT-small",
-                    "facebook/opt-125m"
-                ],
-                value="openai-community/gpt2",
-                allow_custom_value=True,
-                info="Select a model or enter a custom HuggingFace model ID"
-            )
-            go = gr.Button("🔥 Profile Memory", variant="primary")
-        
-        plot = gr.LinePlot(
-            x="t", y="MiB", color="mode", overlay_point=True,
-            title="Memory Allocation Timeline: Warmup ON vs OFF",
-            tooltip=["t", "MiB", "mode"], 
-            width=900, height=450,
-            x_title="Time (seconds)",
-            y_title="Memory (MiB)"
-        )
-        
-        gr.Markdown("**Note**: This demo requires GPU access. The warmup feature reduces peak memory usage during model loading.")
-        go.click(profile_warmup_comparison, inputs=[model], outputs=plot, scroll_to_output=False)
-
-# ---------------------------
-# Optional FastRTC preview
-# ---------------------------
-
-try:
-    from fastrtc import WebRTC, ReplyOnPause
-    def _echo_video(frame):
-        yield frame
-    HAS_FASTRTC = True
-except Exception:
-    HAS_FASTRTC = False
-
-def build_fastrtc():
-    if not HAS_FASTRTC:
-        gr.Markdown("Install `fastrtc` to enable this section.")
-        return
-    
-    def echo_video_frame(frame):
-        yield frame
-    
-    with gr.Group():
-        gr.Markdown("Camera loopback using FastRTC WebRTC. Extend with streaming handlers later.")
-        webrtc_component = WebRTC(mode="send-receive", modality="video")
-        webrtc_component.stream(ReplyOnPause(echo_video_frame), inputs=[webrtc_component], outputs=[webrtc_component], time_limit=60)
-
-# ---------------------------
-# Image display functions
-# ---------------------------
-
-def build_image(filename):
-    def _build():
-        # Try both content/ and static/ directories
-        for directory in ['content', 'static']:
-            filepath = Path(directory) / filename
-            if filepath.exists():
-                gr.Image(value=str(filepath), show_label=False, interactive=False, show_download_button=False)
-                return
-        gr.Markdown(f"*Image not found: {filename}*")
-    return _build
-
-def build_d3_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!")
-        
-        html_file = Path("static/d3_dependency_graph.html")
-        html_content = html_file.read_text(encoding="utf-8")
-        
-        body_start = html_content.find('<body')
-        body_end = html_content.find('</body>') + 7
-        if body_start != -1 and body_end != -1:
-            body_content = html_content[body_start:body_end]
-            body_content = re.sub(r'</?body[^>]*>', '', body_content)
-        else:
-            body_content = html_content
-        
-        scripts = re.findall(r'<script[^>]*>.*?</script>', html_content, re.DOTALL)
-        script_content = '\n'.join(scripts)
-        
-        styles = re.findall(r'<style[^>]*>.*?</style>', html_content, re.DOTALL)
-        style_content = '\n'.join(styles)
-        
-        # Fix the D3.js sizing and HF logo issues
-        script_content = script_content.replace('window.innerWidth', 'document.getElementById("d3-graph-container").offsetWidth')
-        script_content = script_content.replace('window.innerHeight', 'document.getElementById("d3-graph-container").offsetHeight')
-        script_content = script_content.replace("'hf-logo.svg'", "'data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMjQiIGhlaWdodD0iMjQiIHZpZXdCb3g9IjAgMCAyNCAyNCIgZmlsbD0ibm9uZSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj4KPHJlY3Qgd2lkdGg9IjI0IiBoZWlnaHQ9IjI0IiByeD0iNCIgZmlsbD0iI0ZGQkUwQiIvPgo8cGF0aCBkPSJNMTIgMTcuOEw1LjkgOS40aDMuMVY4LjNoNnYxLjFoMy4xTDEyIDE3Ljh6IiBmaWxsPSJibGFjayIvPgo8L3N2Zz4K'")
-        
-        # Fix CSS to work in container
-        style_content = style_content.replace('100vw', '100%').replace('100vh', '100%')
-        style_content = style_content.replace('overflow: hidden;', 'overflow: visible;')
-        
-        embedded_html = f'''
-        <div id="d3-graph-container" style="width: 100%; height: 640px; border: 1px solid #e2e8f0; border-radius: 8px; background: white; position: relative;">
-            {body_content}
-        </div>
-        {style_content}
-        <script>
-        // Wait for container to be ready
-        setTimeout(function() {{
-            {script_content.replace('<script>', '').replace('</script>', '')}
-        }}, 100);
-        </script>
-        '''
-        gr.HTML(embedded_html)
-
-# ---------------------------
-# Inserts registry
-# ---------------------------
-
-INSERTS = {
-    "TERMINAL": build_terminal,
-    "ATTN_VIS": build_attn_vis,
-    "ALLOC_PLOT": build_alloc_plot,
-    "D3_GRAPH": build_d3_graph,
-    # Image inserts
-    "GRAPH_MODULAR_RELATED_MODELS": build_image("graph_modular_related_models.png"),
-    "JACCARD_SIMILARITY_PLOT": build_image("Jaccard_similarity_plot.png"),
-    "BLOATEDNESS_VISUALIZER": build_image("Bloatedness_visualizer.png"),
-    "MODULAR_CANDIDATES": build_image("modular_candidates.png"),
-    "POPULAR_MODELS_BARPLOT": build_image("popular_models_barplot.png"),
-    "MODEL_DEBUGGER": build_image("model_debugger.png"),
-    "GLM_COMPARE": build_code_compare(
-        "content/modular_glm.py", 
-        "content/modeling_glm.py",
-        left_title="modular_glm.py",
-        right_title="modeling_glm.py (auto-expanded)"
-    )
-}
-
-# ---------------------------
-# Layout / CSS / App
-# ---------------------------
-HLJS = """
-<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/11.9.0/styles/atom-one-light.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>
-document.addEventListener('DOMContentLoaded', function() {
-    function highlightCode() {
-        // Default to python for code blocks without a language
-        document.querySelectorAll('pre code:not([class*="language-"]):not(.hljs)').forEach((block) => {
-            block.classList.add('language-python');
-        });
-        
-        // Highlight all non-highlighted blocks
-        document.querySelectorAll('pre code:not(.hljs)').forEach((block) => {
-            hljs.highlightElement(block);
-        });
-        
-        // Force highlighting on code-compare blocks specifically
-        document.querySelectorAll('.code-compare pre code').forEach((block) => {
-            if (!block.classList.contains('hljs')) {
-                block.classList.add('language-python');
-                hljs.highlightElement(block);
-            }
-        });
-        
-        // Apply custom 'tenet' styling
-        document.querySelectorAll('.article ol > li').forEach((li) => {
-            if (li.querySelector(':scope > a[id]')) {
-                li.classList.add('tenet');
-            }
-        });
-    }
-    
-    function overrideTocPosition() {
-        const toc = document.getElementById('toc-column');
-        const layoutRow = document.getElementById('layout-row');
-        
-        if (toc && window.innerWidth >= 900) {
-            // Override CSS with JavaScript - more reliable than CSS for Gradio
-            toc.style.cssText = `
-                position: fixed !important;
-                top: 0 !important;
-                left: 0 !important;
-                height: 100vh !important;
-                width: 320px !important;
-                z-index: 9999 !important;
-                overflow-y: auto !important;
-                background: white !important;
-                border-right: 1px solid #e5e7eb !important;
-                padding: 1rem !important;
-                box-sizing: border-box !important;
-            `;
-            
-            // Move content to avoid overlap
-            if (layoutRow) {
-                layoutRow.style.paddingLeft = '336px';
-            }
-        } else if (toc) {
-            // Mobile: reset to normal
-            toc.style.cssText = 'padding: 1rem;';
-            if (layoutRow) {
-                layoutRow.style.paddingLeft = '0';
-            }
-        }
-    }
-
-    highlightCode();
-    overrideTocPosition();
-    
-    // Re-apply on window resize
-    window.addEventListener('resize', overrideTocPosition);
-    
-    // Use a MutationObserver to re-run highlighting when Gradio loads dynamic content.
-    const observer = new MutationObserver((mutations) => {
-        const needsHighlight = mutations.some(m => m.type === 'childList' && m.addedNodes.length > 0);
-        if (needsHighlight) {
-            // A small delay allows the DOM to settle before highlighting
-            setTimeout(() => {
-                highlightCode();
-                overrideTocPosition();
-            }, 100);
-        }
-    });
-    
-    observer.observe(document.body, {
-        childList: true,
-        subtree: true
-    });
-});
-</script>
-"""
-
-
-CSS = """
-/* ================= Theme & base ================= */
-:root{
-  --bg:#fff;
-  --text:#0b0f19;
-  --heading:#0b0f19;
-  --link:#1d4ed8;
-  --border:#e5e7eb;
-  --muted:#334155;
-  --tocw:320px;           /* sidebar width on desktop */
-  --mono: ui-monospace,SFMono-Regular,Menlo,Monaco,Consolas,"Liberation Mono",monospace;
-  --sans: Inter, system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
-}
-
-html,body,.gradio-container{
-  background:var(--bg) !important;
-  color:var(--text) !important;
-  font-family:var(--sans) !important;
-  -webkit-font-smoothing:antialiased;
-  color-scheme:light !important;
-}
-
-/* Gradio sometimes applies transforms/overflow that break fixed elements.
-   These two lines keep the TOC truly fixed and visible. */
-.gradio-container{ overflow: visible !important; }
-.gradio-container, .gradio-container > * { transform: none !important; }
-
-/* Keep embedded HTML from being dimmed */
-.gradio-container .gr-html,
-.gradio-container .gr-html *{ opacity:1 !important; }
-
-/* Strong headings even outside .article (e.g., “FastRTC (preview)”) */
-.gradio-container h1,
-.gradio-container h2,
-.gradio-container h3,
-.gradio-container h4{
-  color:var(--heading) !important;
-  font-weight:700 !important;
-}
-
-/* ================= TOC: always visible ================= */
-@media (min-width: 900px){
-  /* Pin the TOC to the viewport */
-  #toc-column{
-    position: fixed !important;
-    top: 0 !important; left: 0 !important;
-    height: 100vh !important;
-    width: var(--tocw) !important;
-    background: var(--bg) !important;
-    border-right: 1px solid var(--border) !important;
-    z-index: 3000 !important;
-    overflow-y: auto !important;
-    padding: 1rem !important;
-  }
-  /* Reserve space so content/title never sits under the fixed TOC */
-  body, .gradio-container, #layout{
-    box-sizing: border-box !important;
-    padding-left: calc(var(--tocw) + 16px) !important;
-  }
-}
-
-@media (max-width: 899.98px){
-  #toc-column{ position: static !important; width:auto !important; height:auto !important; border-right:none !important; padding:0 !important; }
-  body, .gradio-container, #layout{ padding-left: 0 !important; }
-}
-
-/* TOC links */
-#toc a{
-  display:block;
-  padding:.5rem 0;
-  color:var(--muted);
-  font-size:1rem;
-  text-decoration:none;
-  font-weight:500;
-}
-#toc a:hover{ color:var(--link); }
-
-/* Layout container */
-#layout{ display:block !important; max-width:1400px !important; margin:0 auto !important; }
-
-/* ================= Article typography ================= */
-.article{
-  max-width:80ch;
-  margin:0 auto;
-  color:var(--text);
-}
-.article p,.article li{ font-size:1.075rem; line-height:1.85rem; color:var(--text) !important; font-weight:500; }
-.article h1,.article h2,.article h3,.article h4{
-  color:var(--heading) !important;
-  margin:1.5rem 0 .75rem;
-}
-.article h1{ font-size:2.25rem; line-height:2.6rem; margin-top:2rem; font-weight:700; }
-.article h2{ font-size:1.85rem; line-height:2.25rem; font-weight:650; }
-.article h3{ font-size:1.5rem; line-height:2rem; font-weight:600; }
-
-.article a{ color:var(--link) !important; text-decoration:underline; }
-.article a:hover{ text-decoration:none; }
-
-.section{ scroll-margin-top:80px; }
-
-.article blockquote{
-  border-left:4px solid var(--link);
-  padding-left:1rem;
-  margin:1.25rem 0;
-  color:#334155 !important;
-  font-style:italic;
-}
-.article img{
-  display:block;
-  max-width:100%;
-  height:auto;
-  margin:1.25rem auto;
-  border-radius:8px;
-  box-shadow:0 6px 20px rgba(0,0,0,.08);
-}
-
-/* ================= Code: fenced blocks ================= */
-.article pre{
-  background:#f8fafc !important;
-  border:1px solid var(--border) !important;
-  border-radius:8px !important;
-  padding:1.1rem !important;
-  margin:1.25rem 0 !important;
-  overflow-x:auto !important;
-  font-family:var(--mono) !important;
-  font-size:.93rem !important;
-  line-height:1.6 !important;
-}
-
-/* Make *all* text inside code blocks dark by default (overrides HLJS base) */
-.article pre code,
-.article pre code *,
-.code-compare pre code,
-.code-compare pre code *{
-  color:#0b0f19 !important;
-}
-
-/* Keep HLJS background transparent so our container bg shows */
-.hljs{ background:transparent !important; }
-
-/* Optional: slightly higher-contrast token accents - apply to both article and code-compare */
-.article .hljs-keyword, .article .hljs-built_in, .code-compare .hljs-keyword, .code-compare .hljs-built_in{ color:#3b33d6 !important; font-weight:600 !important; }
-.article .hljs-string, .code-compare .hljs-string{ color:#065f46 !important; }
-.article .hljs-comment, .code-compare .hljs-comment{ color:#475569 !important; font-style:italic !important; }
-.article .hljs-number, .article .hljs-literal, .code-compare .hljs-number, .code-compare .hljs-literal{ color:#9f1239 !important; }
-.article .hljs-title, .article .hljs-function .hljs-title, .code-compare .hljs-title, .code-compare .hljs-function .hljs-title{ color:#1d4ed8 !important; font-weight:600 !important; }
-.article .hljs-attr, .article .hljs-attribute, .code-compare .hljs-attr, .code-compare .hljs-attribute{ color:#0f766e !important; }
-.article .hljs-type, .code-compare .hljs-type{ color:#3b33d6 !important; }
-
-/* ================= Code: inline backticks ================= */
-.article code{
-  background:#0f172a;
-  color:#e2e8f0;
-  padding:.18em .35em;
-  border-radius:4px;
-  font-size:.95em;
-  font-family:var(--mono);
-}
-/* keep link color when code is inside a link */
-.article a code{ color: currentColor; }
-
-/* ================= Tenets ================= */
-.article ol > li.tenet{
-  border-left:4px solid var(--link);
-  background:#f8fafc;
-  padding:.75rem 1rem;
-  margin:.5rem 0;
-  border-radius:8px;
-}
-.article ol > li.tenet::marker{ color:var(--link); font-weight:700; }
-
-/* ================= Two-column code compare ================= */
-.code-compare{
-  display:grid;
-  grid-template-columns:1fr 1fr;
-  gap:1rem;
-  align-items:start;
-  margin:1rem 0;
-}
-.code-compare .col{
-  border:1px solid var(--border);
-  border-radius:8px;
-  background:#fafafa;
-  overflow:hidden;
-}
-.code-compare .col-head{
-  font-size:.9rem;
-  font-weight:600;
-  color:#475569;
-  padding:.75rem 1rem;
-  background:#f8fafc;
-  border-bottom:1px solid var(--border);
-}
-.code-compare .col pre{
-  max-height:640px;
-  overflow:auto;
-  margin:0 !important;
-  border:none !important;
-  border-radius:0 !important;
-}
-@media (max-width:1100px){ .code-compare{ grid-template-columns:1fr; } }
-
-/* ================= Gradio widgets (light touch) ================= */
-.gr-form,.gr-panel,.gr-block{ background:var(--bg) !important; border:1px solid var(--border) !important; border-radius:8px !important; }
-.gr-button{ background:var(--link) !important; color:#fff !important; border:0 !important; border-radius:6px !important; font-weight:600 !important; }
-.gr-button:hover{ filter:brightness(0.95); }
-.gr-textbox textarea{ background:#f8fafc !important; border:1px solid var(--border) !important; border-radius:8px !important; }
-.gr-textbox textarea[readonly]{ background:#111827 !important; color:#f9fafb !important; border:1px solid #374151 !important; }
-.gr-dropdown,.gr-dropdown .gr-box{ background:#fff !important; border:1px solid var(--border) !important; border-radius:8px !important; }
-"""
-TOC_FIX = """
-<style>
-/* --- Keep fixed elements from breaking inside Gradio containers --- */
-.gradio-container{ overflow:visible !important; }
-.gradio-container, .gradio-container > *{ transform:none !important; }
-
-/* --- Host created by the script; this is the real fixed TOC --- */
-#toc-fixed{
-  position:fixed; top:0; left:0;
-  height:100vh; width:320px;           /* matches your --tocw */
-  z-index:9999; overflow-y:auto;
-  background:#fff; border-right:1px solid #e5e7eb;
-  padding:1rem; box-sizing:border-box;
-}
-
-/* When fixed mode is active, keep the original column's space but hide its content */
-.toc-fixed-active #toc-column{ visibility:hidden; }
-
-/* Mobile: disable fixed TOC (normal flow) */
-@media (max-width: 899.98px){
-  #toc-fixed{ display:none; }
-  .toc-fixed-active #toc-column{ visibility:visible; }
-}
-</style>
-
-<script>
-(function(){
-  const MIN_W = 900;  // desktop threshold
-
-  function mountFixedTOC(){
-    const col = document.getElementById('toc-column');
-    const nav = col && col.querySelector('nav#toc');
-    if(!col || !nav) return;
-
-    const isDesktop = window.innerWidth >= MIN_W;
-    let fixed = document.getElementById('toc-fixed');
-
-    if(isDesktop){
-      // create fixed host if missing
-      if(!fixed){
-        fixed = document.createElement('aside');
-        fixed.id = 'toc-fixed';
-        document.body.appendChild(fixed);
-      }
-      // move the nav into the fixed host
-      if(nav.parentElement !== fixed){
-        fixed.innerHTML = '';
-        fixed.appendChild(nav);
-      }
-      // align the fixed TOC with the placeholder column
-      const rect = col.getBoundingClientRect();
-      fixed.style.left = (rect.left + window.scrollX) + 'px';
-      fixed.style.width = getComputedStyle(col).width;
-
-      document.documentElement.classList.add('toc-fixed-active');
-    }else{
-      // mobile: put nav back into the original column
-      if(fixed && nav.parentElement === fixed){
-        col.appendChild(nav);
-      }
-      document.documentElement.classList.remove('toc-fixed-active');
-    }
-  }
-
-  // Run on load, after hydration, on resize, and when layout shifts
-  document.addEventListener('DOMContentLoaded', mountFixedTOC);
-  window.addEventListener('resize', mountFixedTOC);
-  setTimeout(mountFixedTOC, 300);
-
-  const target = document.querySelector('.gradio-container') || document.body;
-  new ResizeObserver(mountFixedTOC).observe(target);
-})();
-</script>
-"""
-
-
-with gr.Blocks(css=CSS, fill_height=True, title="Interactive Blog — Transformers Feature Showcase") as demo:
-    gr.HTML(HLJS)
-    gr.HTML(TOC_FIX)
-    with gr.Row(elem_id="layout-row"):
-        # This column holds the Table of Contents. It is fixed on desktop.
-        with gr.Column(scale=1, min_width=300, elem_id="toc-column"):
-            gr.HTML(
-                """
-                <nav id="toc">
-                    <h3>Contents</h3>
-                    <a href="#introduction">Introduction</a>
-                    <a href="#what-you-will-learn">What you will learn</a>
-                    <div>
-                        <a href="#source-of-truth">0. Source of truth</a>
-                        <a href="#one-model-one-file">1. One model, one file</a>
-                        <a href="#code-is-product">2. Code is product</a>
-                        <a href="#standardize-dont-abstract">3. Standardize, don't abstract</a>
-                        <a href="#do-repeat-yourself">4. DRY* (DO Repeat Yourself)</a>
-                        <a href="#minimal-user-api">5. Minimal user API</a>
-                        <a href="#backwards-compatibility">6. Backwards compatibility</a>
-                        <a href="#consistent-public-surface">7. Consistent public surface</a>
-                    </div>
-                    <a href="#modular">Going modular</a>
-                    <a href="#attention-classes">External Attention classes</a>
-                    <a href="#community-kernels">Community Kernels</a>
-                    <a href="#the-good-modularity">The good modularity</a>
-                    <a href="#too-many-models">Too many models, yet not enough, are alike</a>
-                    <a href="#vlm-improvements">VLM improvements, avoiding abstraction</a>
-                    <a href="#modularity-candidates">Modularity candidates</a>
-                    <a href="#encoders-ftw">Encoders win!</a>
-                    <a href="#on-image-processing">On image processing and processors</a>
-                    <a href="#reduce-barrier-to-entry">Reduce barrier to entry/contribution</a>
-                    <a href="#surgical-toolbox">A surgical toolbox for model development</a>
-                    <div>
-                        <a href="#attention-visualisation">Attention visualisation</a>
-                        <a href="#transformers-serve">Transformers-serve</a>
-                    </div>
-                    <a href="#community-reusability">Community reusability</a>
-                    <a href="#inner-cooking">Inner cooking: Cache allocator</a>
-                    <a href="#rtc">FastRTC (preview)</a>
-                </nav>
-                """
-            )
-        
-        # This column holds the main article content.
-        with gr.Column(scale=4):
-            # The title must be inside the main content column to respect the layout.
-            gr.HTML("<h1>Transformers Feature Showcase</h1><p>An interactive, scrollable demonstration of key features and design tenets in the <code>transformers</code> library.</p>")
-            
-            # The article content is rendered here.
-            render_article("content/article.md", INSERTS)
-            
-            gr.HTML("<hr/>")
-            gr.HTML('<h2 id="rtc" class="section">FastRTC (preview)</h2>')
-            build_fastrtc()
-
-if __name__ == "__main__":
-    demo.launch()