Spaces:

build-small-hackathon
/

CodeFlow

Running

App Files Files Community

Rishi-Jain-27 commited on 8 days ago

Commit

9756402

1 Parent(s): 3b875ca

Added custom HTML interface

Browse files

Files changed (1) hide show

app.py +87 -22

app.py CHANGED Viewed

@@ -1,31 +1,15 @@
 """
-Goals: Off-Brand, Llama Champion, Field Notes
-The plan
-Create an LLM powered transpiler
-Taking input code (Python, JS, etc) and translate it into Mermaid.js syntax
-Gradio then interprets that visually.
-The Pipeline:
-1. Input. User pastes code into a gradio.Code() block.
-2. Process. Send that code to Small Model with a specific system prompt
 3. Graph. Capture the resulting mermaid string and visualize it
-- include few shot examples in system prompt
-- master prompting for the system prompt and test differnet ones
-Future ideas include allowing user to edit the resulting flowchart and thereby edit code
-Model:
-https://huggingface.co/Qwen/Qwen2.5-Coder-7B-Instruct-GGUF
 To do
-- need to create the basic gradio looks & pipeline
 """
 from huggingface_hub import hf_hub_download
 from llama_cpp import Llama
 import gradio as gr
 from typing import Any, cast # to resolve PyLance freaking out over llama-cpp-python in the generate_flowchart function
 from textwrap import dedent
 import re # remove thinking tag from response
@@ -44,7 +28,11 @@ llm = Llama(
     n_threads=2
 )
-# ----- Generation function ----- #
 def generate_flowchart(src_code: str):
     # check if src_code is empty
     if not src_code.strip(): return ""
@@ -120,7 +108,84 @@ def generate_flowchart(src_code: str):
     cleaned = re.sub(r'<thinking>.*?</thinking>', '', content, flags=re.DOTALL)
     return cleaned.strip() # and remove excess whitespace
-# ----- Gradio Interface (Basic, Not Custom, Archive Later) ----- #
-# ----- Gradio Interface (Custom) ----- #

 """
 3. Graph. Capture the resulting mermaid string and visualize it
 To do
+- create the custom gradio look
 """
 from huggingface_hub import hf_hub_download
 from llama_cpp import Llama
 import gradio as gr
+from gradio import Server
+from fastapi.responses import HTMLResponse # serve the custom frontend from a route
 from typing import Any, cast # to resolve PyLance freaking out over llama-cpp-python in the generate_flowchart function
 from textwrap import dedent
 import re # remove thinking tag from response
     n_threads=2
 )
+# ----- Init App ----- #
+app = gr.Server(title="Code-to-Flowchart Generator")
+# ----- Functions ----- #
+@app.api(name="generate_flowchart")
 def generate_flowchart(src_code: str):
     # check if src_code is empty
     if not src_code.strip(): return ""
     cleaned = re.sub(r'<thinking>.*?</thinking>', '', content, flags=re.DOTALL)
     return cleaned.strip() # and remove excess whitespace
+# ----- Custom Frontend ----- #
+index_html = """
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <title>Code-to-Flowchart Generator</title>
+    <style>
+        body { font-family: sans-serif; background: #111827; color: #f3f4f6; margin: 0; padding: 20px; }
+        .container { display: flex; gap: 20px; height: 90vh; }
+        .panel { flex: 1; display: flex; flex-direction: column; background: #1f2937; padding: 15px; border-radius: 8px; }
+        textarea { flex: 1; background: #111827; color: #34d399; border: 1px solid #374151; padding: 10px; font-family: monospace; resize: none; border-radius: 4px; }
+        button { background: #059669; color: white; border: none; padding: 12px; margin-top: 10px; cursor: pointer; font-weight: bold; border-radius: 4px; }
+        button:hover { background: #10b981; }
+        #flowchart-target { flex: 1; background: #ffffff; padding: 10px; border-radius: 4px; overflow: auto; display: flex; justify-content: center; align-items: start; }
+    </style>
+</head>
+<body>
+    <h2>Flowchart Transpiler</h2>
+    <div class="container">
+        <div class="panel">
+            <h3>Source Code Input</h3>
+            <textarea id="code-input" placeholder="Paste your code here..."></textarea>
+            <button id="submit-btn">Generate Flowchart</button>
+        </div>
+        <div class="panel">
+            <h3>Mermaid Flowchart Visualizer</h3>
+            <div id="flowchart-target">
+                <pre class="mermaid" id="mermaid-string">
+                    graph TD
+                    A[Paste Code] --> B[Click Generate]
+                </pre>
+            </div>
+        </div>
+    </div>
+    <script type="module">
+        import { Client } from "https://cdn.jsdelivr.net/npm/@gradio/client@1/dist/index.min.js";
+        import mermaid from 'https://cdn.jsdelivr.net/npm/mermaid@10/dist/mermaid.esm.min.mjs';
+        mermaid.initialize({ startOnLoad: true, theme: 'neutral' });
+        // Instantiate the local Gradio application client dynamically
+        const client = await Client.connect(window.location.origin);
+        document.getElementById('submit-btn').addEventListener('click', async () => {
+            const codeValue = document.getElementById('code-input').value;
+            const targetDiv = document.getElementById('flowchart-target');
+            if (!codeValue.trim()) {
+                targetDiv.innerHTML = "<p style='color:red;'>Please input code first.</p>";
+                return;
+            }
+            targetDiv.innerHTML = "Generating diagram...";
+            try {
+                // Call the @app.api function registered in python (name + param must match)
+                const result = await client.predict("/generate_flowchart", { src_code: codeValue });
+                const mermaidSyntax = result.data[0];
+                // Inject the raw string into a clean layout block and re-trigger parsing
+                targetDiv.innerHTML = `<pre class="mermaid">${mermaidSyntax}</pre>`;
+                await mermaid.run();
+            } catch (error) {
+                targetDiv.innerHTML = `<p style='color:red;'>Error during generation: ${error.message}</p>`;
+            }
+        });
+    </script>
+</body>
+</html>
+"""
+# Load the custom HTML
+# / takes precedent over default Blocks UI
+@app.get("/")
+def index():
+    return HTMLResponse(index_html)
+app.launch(share=True)