Spaces:

Molbap
/

code-bloat-lite

Running

App Files Files Community

Molbap HF Staff commited on Jul 4

Commit

3a8fe4b

verified ·

1 Parent(s): 695b000

Update index.html

Browse files

Files changed (1) hide show

index.html +421 -55

index.html CHANGED Viewed

@@ -1,57 +1,423 @@
 <!DOCTYPE html>
-<html>
-    <head>
-        <meta charset="utf-8">
-        <meta name="viewport" content="width=device-width, initial-scale=1">
-        <title>Gradio-Lite: Serverless Gradio Running Entirely in Your Browser</title>
-        <meta name="description" content="Gradio-Lite: Serverless Gradio Running Entirely in Your Browser">
-        <script type="module" crossorigin src="https://cdn.jsdelivr.net/npm/@gradio/lite/dist/lite.js"></script>
-        <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@gradio/lite/dist/lite.css" />
-        <style>
-            html, body {
-                margin: 0;
-                padding: 0;
-                height: 100%;
             }
-        </style>
-    </head>
-    <body>
-        <gradio-lite>
-            <gradio-file name="app.py" entrypoint>
-import gradio as gr
-from filters import as_gray
-def process(input_image):
-    output_image = as_gray(input_image)
-    return output_image
-demo = gr.Interface(
-    process,
-    "image",
-    "image",
-    examples=["lion.jpg", "logo.png"],
-)
-demo.launch()
-            </gradio-file>
-            <gradio-file name="filters.py">
-from skimage.color import rgb2gray
-def as_gray(image):
-    return rgb2gray(image)
-            </gradio-file>
-            <gradio-file name="lion.jpg" url="https://raw.githubusercontent.com/gradio-app/gradio/main/gradio/test_data/lion.jpg" />
-            <gradio-file name="logo.png" url="https://raw.githubusercontent.com/gradio-app/gradio/main/guides/assets/logo.png" />
-            <gradio-requirements>
-# Same syntax as requirements.txt
-scikit-image
-            </gradio-requirements>
-        </gradio-lite>
-    </body>
-</html>

 <!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Python Code Structure Visualizer</title>
+    <script src="https://cdn.tailwindcss.com"></script>
+    <script src="https://d3js.org/d3.v7.min.js"></script>
+    <link rel="preconnect" href="https://fonts.googleapis.com">
+    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
+    <link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&family=Fira+Code:wght@400;500&display=swap" rel="stylesheet">
+    <style>
+        body {
+            font-family: 'Inter', sans-serif;
+        }
+        .fira-code {
+            font-family: 'Fira Code', monospace;
+        }
+        /* Custom styles for D3 graph */
+        .graph-container {
+            width: 100%;
+            height: 100%;
+            min-height: 500px;
+            cursor: grab;
+        }
+        .graph-container:active {
+            cursor: grabbing;
+        }
+        .node circle {
+            stroke: #fff;
+            stroke-width: 1.5px;
+        }
+        .node text {
+            font-size: 10px;
+            font-family: 'Fira Code', monospace;
+            paint-order: stroke;
+            stroke: #111827; /* Match dark background */
+            stroke-width: 3px;
+            stroke-linecap: butt;
+            stroke-linejoin: miter;
+            pointer-events: none;
+        }
+        .link {
+            stroke-opacity: 0.6;
+        }
+        .link.inheritance {
+            stroke-dasharray: 5, 5;
+            stroke: #60a5fa; /* blue-400 */
+        }
+        .link.method {
+            stroke: #4b5563; /* gray-600 */
+        }
+        .node.selected > circle {
+            stroke: #facc15; /* yellow-400 */
+            stroke-width: 3px;
+        }
+        /* Tab styling */
+        .tab.active {
+            background-color: #3b82f6; /* blue-500 */
+            color: white;
+        }
+    </style>
+</head>
+<body class="bg-gray-900 text-gray-200 flex flex-col h-screen">
+    <header class="bg-gray-800/50 backdrop-blur-sm border-b border-gray-700 p-4 shadow-lg">
+        <h1 class="text-2xl font-bold text-center text-white">Bloatedness Visualizer</h1>
+        <p class="text-center text-gray-400 mt-1">Paste your model in the 'Main' tab and add dependencies in other tabs.</p>
+    </header>
+    <main class="flex-grow flex flex-col md:flex-row gap-4 p-4 overflow-hidden">
+        <!-- Left Panel: Code Input & Controls -->
+        <div class="md:w-1/3 flex flex-col h-full">
+            <div class="flex-grow flex flex-col bg-gray-800 rounded-lg shadow-2xl border border-gray-700">
+                <div class="p-4 border-b border-gray-700 flex justify-between items-center">
+                    <h2 class="text-lg font-semibold">Code Input</h2>
+                    <button id="visualize-btn" class="bg-blue-600 hover:bg-blue-700 text-white font-bold py-2 px-4 rounded-md transition-colors duration-300">
+                        Visualize
+                    </button>
+                </div>
+                <div class="border-b border-gray-700 bg-gray-900/50 px-2 pt-2 flex items-center gap-2">
+                    <div id="tab-bar" class="flex gap-1">
+                        <!-- Tabs will be dynamically inserted here -->
+                    </div>
+                    <button id="add-tab-btn" class="ml-auto bg-gray-600 hover:bg-gray-500 text-white font-bold h-8 w-8 rounded-full transition-colors duration-200">+</button>
+                </div>
+                <div id="code-inputs-container" class="flex-grow relative">
+                    <!-- Textareas will be dynamically inserted here -->
+                </div>
+            </div>
+        </div>
+        <!-- Right Panel: Visualization & Details -->
+        <div class="md:w-2/3 flex flex-col gap-4 h-full">
+            <div class="flex-grow bg-gray-800 rounded-lg shadow-2xl border border-gray-700 relative overflow-hidden">
+                 <div id="graph-container" class="w-full h-full"></div>
+                 <div id="loading-spinner" class="absolute inset-0 bg-gray-800/50 flex items-center justify-center hidden z-10">
+                    <svg class="animate-spin h-10 w-10 text-white" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24">
+                        <circle class="opacity-25" cx="12" cy="12" r="10" stroke="currentColor" stroke-width="4"></circle>
+                        <path class="opacity-75" fill="currentColor" d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z"></path>
+                    </svg>
+                 </div>
+            </div>
+            <div id="details-panel" class="h-40 bg-gray-800 rounded-lg shadow-2xl border border-gray-700 p-4 flex flex-col">
+                <h3 class="text-lg font-semibold border-b border-gray-700 pb-2 mb-2">Details</h3>
+                <div id="details-content" class="text-gray-400 fira-code overflow-y-auto">
+                    <p>Click on a node in the graph to see its details. Scroll to zoom, drag to pan.</p>
+                </div>
+            </div>
+        </div>
+    </main>
+    <script>
+        // --- DOM Element References ---
+        const visualizeBtn = document.getElementById('visualize-btn');
+        const graphContainer = document.getElementById('graph-container');
+        const detailsContent = document.getElementById('details-content');
+        const loadingSpinner = document.getElementById('loading-spinner');
+        const tabBar = document.getElementById('tab-bar');
+        const codeInputsContainer = document.getElementById('code-inputs-container');
+        const addTabBtn = document.getElementById('add-tab-btn');
+        // --- Example Code ---
+        const exampleCodeMain = `
+# A specific model implementation that uses an external class
+class MyAwesomeModel(BaseModel, AttentionMixin):
+    def __init__(self, config):
+        super().__init__(config)
+        self._init_attention(config)
+    def forward(self, input_ids) -> BaseModelOutputWithPast:
+        """The main forward pass for the model."""
+        x = self._split_heads(input_ids)
+        # The return type is a class not defined in this file
+        return BaseModelOutputWithPast(last_hidden_state=x)
+`;
+        const exampleCodeDeps = `
+# This class is an external dependency, not defined here
+# from modeling_outputs import BaseModelOutputWithPast
+# A common mixin for attention mechanisms
+class AttentionMixin:
+    def _init_attention(self, config):
+        self.num_heads = config.num_heads
+        self.head_dim = config.hidden_size // config.num_heads
+    def _split_heads(self, tensor):
+        # Logic to split tensor for multi-head attention
+        return tensor
+# A base class for all models, similar to PreTrainedModel
+class BaseModel:
+    def __init__(self, config):
+        self.config = config
+    def from_pretrained(cls, model_name):
+        # Load weights
+        pass
+`;
+        // --- Tab Management ---
+        let tabCounter = 0;
+        function addTab(name, content = '', isActive = false) {
+            tabCounter++;
+            const tabId = `tab-${tabCounter}`;
+            const textareaId = `textarea-${tabCounter}`;
+            // Create Tab Button
+            const tabButton = document.createElement('button');
+            tabButton.id = tabId;
+            tabButton.className = 'tab px-4 py-2 text-sm font-medium rounded-t-md transition-colors duration-200';
+            tabButton.textContent = name;
+            tabButton.dataset.textareaId = textareaId;
+            tabBar.appendChild(tabButton);
+            // Create Textarea
+            const textarea = document.createElement('textarea');
+            textarea.id = textareaId;
+            textarea.className = 'fira-code w-full h-full p-4 bg-gray-900 text-gray-300 resize-none focus:outline-none absolute top-0 left-0';
+            textarea.placeholder = `Paste dependency code here...`;
+            textarea.value = content;
+            codeInputsContainer.appendChild(textarea);
+            tabButton.addEventListener('click', () => switchTab(tabId));
+            if (isActive) {
+                switchTab(tabId);
+            } else {
+                textarea.classList.add('hidden');
+            }
+        }
+        function switchTab(tabId) {
+            // Update tab buttons
+            document.querySelectorAll('.tab').forEach(tab => {
+                tab.classList.toggle('active', tab.id === tabId);
+            });
+            // Update textareas
+            document.querySelectorAll('#code-inputs-container textarea').forEach(area => {
+                area.classList.toggle('hidden', area.id !== document.getElementById(tabId).dataset.textareaId);
+            });
+        }
+        addTabBtn.addEventListener('click', () => addTab(`Dep ${tabCounter}`));
+        // --- Core Logic: Parser ---
+        function parsePythonCode(code) {
+            const nodes = [];
+            const links = [];
+            const nodeRegistry = new Set();
+            let currentClassInfo = null;
+            const lines = code.split('\n');
+            lines.forEach(line => {
+                const indentation = line.match(/^\s*/)[0].length;
+                if (line.trim().length > 0 && indentation === 0) {
+                    currentClassInfo = null;
+                }
+                const classMatch = /^\s*class\s+([\w\d_]+)\s*(?:\(([\w\d_,\s]+)\))?:/.exec(line);
+                if (classMatch) {
+                    const className = classMatch[1];
+                    const parents = classMatch[2] ? classMatch[2].split(',').map(p => p.trim()) : [];
+                    if (!nodeRegistry.has(className)) {
+                        nodes.push({ id: className, type: 'class', parents: parents });
+                        nodeRegistry.add(className);
+                    } else {
+                        // If class was already created as an external placeholder, update it
+                        const existingNode = nodes.find(n => n.id === className);
+                        if (existingNode && existingNode.isExternal) {
+                            existingNode.isExternal = false;
+                            existingNode.parents = parents;
+                        }
+                    }
+                    currentClassInfo = { name: className, indentation: indentation };
+                    parents.forEach(parent => {
+                        if (!nodeRegistry.has(parent)) {
+                            nodes.push({ id: parent, type: 'class', isExternal: true, parents: [] });
+                            nodeRegistry.add(parent);
+                        }
+                        links.push({ source: className, target: parent, type: 'inheritance' });
+                    });
+                }
+                const methodMatch = /^\s+def\s+([\w\d_]+)\s*\(([^)]*)\)/.exec(line);
+                if (currentClassInfo && methodMatch && indentation > currentClassInfo.indentation) {
+                    const methodName = methodMatch[1];
+                    const signature = methodMatch[2];
+                    const methodId = `${currentClassInfo.name}.${methodName}`;
+                    if (!nodeRegistry.has(methodId)) {
+                        nodes.push({ id: methodId, name: methodName, type: 'method', parentClass: currentClassInfo.name, signature: `(${signature})` });
+                        nodeRegistry.add(methodId);
+                        links.push({ source: currentClassInfo.name, target: methodId, type: 'method' });
+                    }
+                }
+            });
+            return { nodes, links };
+        }
+        // --- Core Logic: D3 Visualization ---
+        let simulation;
+        function renderGraph(data) {
+            graphContainer.innerHTML = '';
+            const width = graphContainer.clientWidth;
+            const height = graphContainer.clientHeight;
+            const svg = d3.select(graphContainer).append("svg")
+                .attr("viewBox", [-width / 2, -height / 2, width, height]);
+            const container = svg.append("g");
+            // Add zoom capabilities
+            const zoom = d3.zoom()
+                .scaleExtent([0.1, 4])
+                .on("zoom", (event) => {
+                    container.attr("transform", event.transform);
+                });
+            svg.call(zoom);
+            if (simulation) {
+                simulation.stop();
+            }
+            simulation = d3.forceSimulation(data.nodes)
+                .force("link", d3.forceLink(data.links).id(d => d.id).distance(d => d.type === 'inheritance' ? 150 : 60).strength(0.5))
+                .force("charge", d3.forceManyBody().strength(-400))
+                .force("center", d3.forceCenter(0, 0))
+                .force("x", d3.forceX())
+                .force("y", d3.forceY());
+            const link = container.append("g")
+                .selectAll("line")
+                .data(data.links)
+                .join("line")
+                .attr("class", d => `link ${d.type}`);
+            const node = container.append("g")
+                .selectAll("g")
+                .data(data.nodes)
+                .join("g")
+                .attr("class", "node")
+                .call(drag(simulation));
+            node.append("circle")
+                .attr("r", d => d.type === 'class' ? 15 : 8)
+                .attr("fill", d => {
+                    if (d.type !== 'class') return '#9ca3af';
+                    return d.isExternal ? '#be185d' : '#2563eb';
+                });
+            node.append("text")
+                .text(d => d.type === 'class' ? d.id : d.name)
+                .attr("x", d => d.type === 'class' ? 18 : 12)
+                .attr("y", 3)
+                .attr("fill", "#e5e7eb");
+            node.on("click", (event, d) => {
+                event.stopPropagation(); // Prevent zoom from firing on node click
+                updateDetailsPanel(d);
+                node.classed("selected", n => n.id === d.id);
+            });
+            simulation.on("tick", () => {
+                link.attr("x1", d => d.source.x).attr("y1", d => d.source.y)
+                    .attr("x2", d => d.target.x).attr("y2", d => d.target.y);
+                node.attr("transform", d => `translate(${d.x},${d.y})`);
+            });
+        }
+        // --- Interactivity ---
+        function drag(simulation) {
+            function dragstarted(event, d) {
+                if (!event.active) simulation.alphaTarget(0.3).restart();
+                d.fx = d.x;
+                d.fy = d.y;
+            }
+            function dragged(event, d) {
+                d.fx = event.x;
+                d.fy = event.y;
+            }
+            function dragended(event, d) {
+                if (!event.active) simulation.alphaTarget(0);
+                d.fx = null;
+                d.fy = null;
+            }
+            return d3.drag()
+                .on("start", dragstarted)
+                .on("drag", dragged)
+                .on("end", dragended);
+        }
+        // --- UI Updates ---
+        function updateDetailsPanel(d) {
+            let content = '';
+            if (d.type === 'class') {
+                content = `
+                    <p><span class="text-gray-100 font-semibold">Name:</span> ${d.id}</p>
+                    <p><span class="text-gray-100 font-semibold">Type:</span> ${d.isExternal ? 'External Class' : 'Class'}</p>
+                    <p><span class="text-gray-100 font-semibold">Inherits from:</span> ${d.parents && d.parents.length > 0 ? d.parents.join(', ') : 'None'}</p>
+                    ${d.isExternal ? '<p class="text-pink-400 mt-1">Note: This class was not defined in the provided code.</p>' : ''}
+                `;
+            } else if (d.type === 'method') {
+                content = `
+                    <p><span class="text-gray-100 font-semibold">Name:</span> ${d.name}</p>
+                    <p><span class="text-gray-100 font-semibold">Type:</span> Method</p>
+                    <p><span class="text-gray-100 font-semibold">Belongs to:</span> ${d.parentClass}</p>
+                    <p><span class="text-gray-100 font-semibold">Signature:</span> ${d.name}${d.signature}</p>
+                `;
+            }
+            detailsContent.innerHTML = content;
+        }
+        function handleVisualize() {
+            loadingSpinner.classList.remove('hidden');
+            setTimeout(() => {
+                try {
+                    let allCode = '';
+                    document.querySelectorAll('#code-inputs-container textarea').forEach(area => {
+                        allCode += area.value + '\n';
+                    });
+                    if (!allCode.trim()) {
+                        graphContainer.innerHTML = '<p class="p-4 text-center text-gray-400">Please paste some code to visualize.</p>';
+                        return;
+                    }
+                    const graphData = parsePythonCode(allCode);
+                    renderGraph(graphData);
+                } catch (error) {
+                    console.error("Failed to visualize code:", error);
+                    graphContainer.innerHTML = `<p class="p-4 text-center text-red-400">An error occurred during parsing. Check the console for details.</p>`;
+                } finally {
+                    loadingSpinner.classList.add('hidden');
+                }
+            }, 50);
+        }
+        // --- Event Listeners ---
+        visualizeBtn.addEventListener('click', handleVisualize);
+        // --- Initial Load ---
+        window.addEventListener('load', () => {
+            addTab('Main', exampleCodeMain, true);
+            addTab('Deps', exampleCodeDeps);
+            handleVisualize();
+        });
+        window.addEventListener('resize', () => {
+            let allCode = '';
+            document.querySelectorAll('#code-inputs-container textarea').forEach(area => {
+                allCode += area.value + '\n';
+            });
+            if (allCode.trim()) {
+                handleVisualize();
             }
+        });
+    </script>
+</body>
+</html>