Gradio inference

README.md

@@ -3,26 +3,25 @@ title: dcode
 emoji: ✏️
 colorFrom: gray
 colorTo: green
-sdk: static
+sdk: gradio
+sdk_version: 4.44.0
+app_file: app.py
 pinned: false
 license: mit
-short_description: Text to Polargraph Gcode via Diffusion
+short_description: Text to Polargraph Gcode
 ---
 
 # dcode
 
-Generate polargraph-compatible gcode from text prompts.
+Generate polargraph-compatible gcode from text prompts using finetuned diffusion models.
 
 ## Usage
 
 1. Enter a prompt (e.g., "drawing of a cat")
-2. Click Generate
-3. View result in workplane (zoom/pan with mouse)
-4. Download as Gcode or SVG
+2. Adjust temperature (higher = more creative)
+3. Click Generate
+4. View preview and download gcode
 
-## Features
+## Model
 
-- Real-time gcode visualization
-- Zoom/pan controls
-- Machine compatibility validation
-- Export to Gcode or SVG
+Finetuned Flan-T5-base on 175k image-gcode pairs.

app.js

@@ -1,251 +0,0 @@
-// dcode - Gcode visualization and generation
-
-class GcodeViewer {
-    constructor(canvas) {
-        this.canvas = canvas;
-        this.ctx = canvas.getContext('2d');
-        this.paths = [];
-        this.zoom = 1;
-        this.panX = 0;
-        this.panY = 0;
-        this.isDragging = false;
-        this.lastMouse = { x: 0, y: 0 };
-        
-        // Work area bounds (from machine config)
-        this.bounds = {
-            left: -420.5,
-            right: 420.5,
-            top: 594.5,
-            bottom: -594.5
-        };
-        
-        this.resize();
-        this.setupEvents();
-        this.draw();
-    }
-    
-    resize() {
-        const rect = this.canvas.getBoundingClientRect();
-        this.canvas.width = rect.width * window.devicePixelRatio;
-        this.canvas.height = rect.height * window.devicePixelRatio;
-        this.ctx.scale(window.devicePixelRatio, window.devicePixelRatio);
-    }
-    
-    setupEvents() {
-        this.canvas.addEventListener('wheel', (e) => {
-            e.preventDefault();
-            const delta = e.deltaY > 0 ? 0.9 : 1.1;
-            this.zoom *= delta;
-            this.zoom = Math.max(0.1, Math.min(10, this.zoom));
-            this.draw();
-        });
-        
-        this.canvas.addEventListener('mousedown', (e) => {
-            this.isDragging = true;
-            this.lastMouse = { x: e.clientX, y: e.clientY };
-        });
-        
-        this.canvas.addEventListener('mousemove', (e) => {
-            if (this.isDragging) {
-                this.panX += e.clientX - this.lastMouse.x;
-                this.panY += e.clientY - this.lastMouse.y;
-                this.lastMouse = { x: e.clientX, y: e.clientY };
-                this.draw();
-            }
-        });
-        
-        this.canvas.addEventListener('mouseup', () => this.isDragging = false);
-        this.canvas.addEventListener('mouseleave', () => this.isDragging = false);
-        
-        window.addEventListener('resize', () => {
-            this.resize();
-            this.draw();
-        });
-    }
-    
-    parseGcode(gcode) {
-        this.paths = [];
-        let currentPath = [];
-        let x = 0, y = 0;
-        let penDown = false;
-        
-        const lines = gcode.split('\n');
-        for (const line of lines) {
-            const trimmed = line.trim();
-            if (!trimmed || trimmed.startsWith(';')) continue;
-            
-            // Pen up/down
-            if (trimmed.includes('M280')) {
-                const match = trimmed.match(/S(\d+)/);
-                if (match) {
-                    const angle = parseInt(match[1]);
-                    const wasDown = penDown;
-                    penDown = angle < 50; // Down if angle < 50
-                    
-                    if (wasDown && !penDown && currentPath.length > 1) {
-                        this.paths.push([...currentPath]);
-                        currentPath = [];
-                    }
-                }
-            }
-            
-            // Movement
-            const xMatch = trimmed.match(/X([-\d.]+)/i);
-            const yMatch = trimmed.match(/Y([-\d.]+)/i);
-            
-            if (xMatch) x = parseFloat(xMatch[1]);
-            if (yMatch) y = parseFloat(yMatch[1]);
-            
-            if ((xMatch || yMatch) && penDown) {
-                currentPath.push({ x, y });
-            }
-        }
-        
-        if (currentPath.length > 1) {
-            this.paths.push(currentPath);
-        }
-        
-        this.resetView();
-        this.draw();
-    }
-    
-    resetView() {
-        this.zoom = 1;
-        this.panX = 0;
-        this.panY = 0;
-    }
-    
-    draw() {
-        const w = this.canvas.width / window.devicePixelRatio;
-        const h = this.canvas.height / window.devicePixelRatio;
-        
-        this.ctx.fillStyle = '#111';
-        this.ctx.fillRect(0, 0, w, h);
-        
-        this.ctx.save();
-        this.ctx.translate(w / 2 + this.panX, h / 2 + this.panY);
-        
-        // Scale to fit work area
-        const boundsW = this.bounds.right - this.bounds.left;
-        const boundsH = this.bounds.top - this.bounds.bottom;
-        const scale = Math.min(w / boundsW, h / boundsH) * 0.9 * this.zoom;
-        
-        this.ctx.scale(scale, -scale); // Flip Y
-        
-        // Draw work area
-        this.ctx.strokeStyle = '#333';
-        this.ctx.lineWidth = 1 / scale;
-        this.ctx.strokeRect(
-            this.bounds.left,
-            this.bounds.bottom,
-            boundsW,
-            boundsH
-        );
-        
-        // Draw paths
-        this.ctx.strokeStyle = '#4ade80';
-        this.ctx.lineWidth = 1 / scale;
-        this.ctx.lineCap = 'round';
-        this.ctx.lineJoin = 'round';
-        
-        for (const path of this.paths) {
-            if (path.length < 2) continue;
-            this.ctx.beginPath();
-            this.ctx.moveTo(path[0].x, path[0].y);
-            for (let i = 1; i < path.length; i++) {
-                this.ctx.lineTo(path[i].x, path[i].y);
-            }
-            this.ctx.stroke();
-        }
-        
-        this.ctx.restore();
-    }
-    
-    toSVG() {
-        const boundsW = this.bounds.right - this.bounds.left;
-        const boundsH = this.bounds.top - this.bounds.bottom;
-        
-        let svg = `<svg xmlns="http://www.w3.org/2000/svg" viewBox="${this.bounds.left} ${-this.bounds.top} ${boundsW} ${boundsH}">`;
-        svg += `<rect x="${this.bounds.left}" y="${-this.bounds.top}" width="${boundsW}" height="${boundsH}" fill="none" stroke="#333"/>`;
-        
-        for (const path of this.paths) {
-            if (path.length < 2) continue;
-            const d = path.map((p, i) => `${i === 0 ? 'M' : 'L'}${p.x},${-p.y}`).join(' ');
-            svg += `<path d="${d}" fill="none" stroke="#4ade80" stroke-width="1"/>`;
-        }
-        
-        svg += '</svg>';
-        return svg;
-    }
-}
-
-// Main app
-let viewer;
-let currentGcode = '';
-
-document.addEventListener('DOMContentLoaded', () => {
-    const canvas = document.getElementById('workplane');
-    viewer = new GcodeViewer(canvas);
-    
-    document.getElementById('zoom-in').onclick = () => {
-        viewer.zoom *= 1.2;
-        viewer.draw();
-    };
-    
-    document.getElementById('zoom-out').onclick = () => {
-        viewer.zoom *= 0.8;
-        viewer.draw();
-    };
-    
-    document.getElementById('reset-view').onclick = () => {
-        viewer.resetView();
-        viewer.draw();
-    };
-    
-    document.getElementById('generate').onclick = async () => {
-        const prompt = document.getElementById('prompt').value;
-        if (!prompt) return;
-        
-        document.getElementById('status').textContent = 'Generating...';
-        document.getElementById('validation').textContent = '';
-        
-        // TODO: Call actual inference API
-        // For now, show placeholder
-        document.getElementById('status').textContent = 'API endpoint not configured. Deploy with Gradio backend.';
-    };
-    
-    document.getElementById('download-gcode').onclick = () => {
-        if (!currentGcode) return;
-        const blob = new Blob([currentGcode], { type: 'text/plain' });
-        const url = URL.createObjectURL(blob);
-        const a = document.createElement('a');
-        a.href = url;
-        a.download = 'output.gcode';
-        a.click();
-        URL.revokeObjectURL(url);
-    };
-    
-    document.getElementById('download-svg').onclick = () => {
-        if (!viewer.paths.length) return;
-        const svg = viewer.toSVG();
-        const blob = new Blob([svg], { type: 'image/svg+xml' });
-        const url = URL.createObjectURL(blob);
-        const a = document.createElement('a');
-        a.href = url;
-        a.download = 'output.svg';
-        a.click();
-        URL.revokeObjectURL(url);
-    };
-});
-
-// Expose for testing
-window.loadGcode = (gcode) => {
-    currentGcode = gcode;
-    viewer.parseGcode(gcode);
-    document.getElementById('download-gcode').disabled = false;
-    document.getElementById('download-svg').disabled = false;
-    document.getElementById('status').textContent = `Loaded ${viewer.paths.length} paths`;
-    document.getElementById('validation').textContent = 'Machine compatible';
-    document.getElementById('validation').className = 'valid';
-};
-

app.py

@@ -0,0 +1,189 @@
+"""dcode Gradio Space - Text to Gcode inference."""
+
+import re
+import gradio as gr
+import torch
+from transformers import AutoModelForSeq2SeqLM, AutoTokenizer
+
+# Model config - update after training
+MODEL_ID = "twarner/dcode-flan-t5-base"  # Will upload after training
+
+# Machine limits
+BOUNDS = {"left": -420.5, "right": 420.5, "top": 594.5, "bottom": -594.5}
+PEN = {"up": 90, "down": 40, "travel": 1000, "draw": 500}
+
+
+class GcodeGenerator:
+    def __init__(self):
+        self.model = None
+        self.tokenizer = None
+        self.device = "cuda" if torch.cuda.is_available() else "cpu"
+
+    def load(self):
+        if self.model is None:
+            self.tokenizer = AutoTokenizer.from_pretrained(MODEL_ID)
+            self.model = AutoModelForSeq2SeqLM.from_pretrained(
+                MODEL_ID, torch_dtype=torch.float16 if self.device == "cuda" else torch.float32
+            ).to(self.device)
+            self.model.eval()
+
+    def generate(self, prompt: str, max_length: int = 1024, temperature: float = 0.8) -> str:
+        self.load()
+        
+        inputs = self.tokenizer(prompt, return_tensors="pt", max_length=128, truncation=True)
+        inputs = {k: v.to(self.device) for k, v in inputs.items()}
+
+        with torch.no_grad():
+            outputs = self.model.generate(
+                **inputs,
+                max_new_tokens=max_length,
+                do_sample=True,
+                temperature=temperature,
+                top_p=0.9,
+            )
+
+        gcode = self.tokenizer.decode(outputs[0], skip_special_tokens=True)
+        return self.validate(gcode)
+
+    def validate(self, gcode: str) -> str:
+        """Clamp coordinates to machine bounds."""
+        lines = []
+        for line in gcode.split("\n"):
+            corrected = line
+            
+            # Clamp X
+            x_match = re.search(r"X([-\d.]+)", line, re.IGNORECASE)
+            if x_match:
+                x = float(x_match.group(1))
+                x = max(BOUNDS["left"], min(BOUNDS["right"], x))
+                corrected = re.sub(r"X[-\d.]+", f"X{x:.2f}", corrected, flags=re.IGNORECASE)
+
+            # Clamp Y
+            y_match = re.search(r"Y([-\d.]+)", line, re.IGNORECASE)
+            if y_match:
+                y = float(y_match.group(1))
+                y = max(BOUNDS["bottom"], min(BOUNDS["top"], y))
+                corrected = re.sub(r"Y[-\d.]+", f"Y{y:.2f}", corrected, flags=re.IGNORECASE)
+
+            lines.append(corrected)
+
+        return "\n".join(lines)
+
+
+def gcode_to_svg(gcode: str) -> str:
+    """Convert gcode to SVG for preview."""
+    paths = []
+    current_path = []
+    x, y = 0, 0
+    pen_down = False
+
+    for line in gcode.split("\n"):
+        line = line.strip()
+        if not line or line.startswith(";"):
+            continue
+
+        # Pen state
+        if "M280" in line:
+            match = re.search(r"S(\d+)", line)
+            if match:
+                angle = int(match.group(1))
+                was_down = pen_down
+                pen_down = angle < 50
+                if was_down and not pen_down and len(current_path) > 1:
+                    paths.append(current_path[:])
+                    current_path = []
+
+        # Position
+        x_match = re.search(r"X([-\d.]+)", line, re.IGNORECASE)
+        y_match = re.search(r"Y([-\d.]+)", line, re.IGNORECASE)
+        if x_match:
+            x = float(x_match.group(1))
+        if y_match:
+            y = float(y_match.group(1))
+
+        if (x_match or y_match) and pen_down:
+            current_path.append((x, y))
+
+    if len(current_path) > 1:
+        paths.append(current_path)
+
+    # Build SVG
+    w = BOUNDS["right"] - BOUNDS["left"]
+    h = BOUNDS["top"] - BOUNDS["bottom"]
+    
+    svg = f'<svg xmlns="http://www.w3.org/2000/svg" viewBox="{BOUNDS["left"]} {-BOUNDS["top"]} {w} {h}" style="background:#111">'
+    svg += f'<rect x="{BOUNDS["left"]}" y="{-BOUNDS["top"]}" width="{w}" height="{h}" fill="none" stroke="#333" stroke-width="2"/>'
+
+    for path in paths:
+        if len(path) < 2:
+            continue
+        d = " ".join(f"{'M' if i == 0 else 'L'}{p[0]:.1f},{-p[1]:.1f}" for i, p in enumerate(path))
+        svg += f'<path d="{d}" fill="none" stroke="#4ade80" stroke-width="1.5" stroke-linecap="round"/>'
+
+    svg += "</svg>"
+    return svg
+
+
+# Initialize generator
+generator = GcodeGenerator()
+
+
+def generate(prompt: str, temperature: float) -> tuple[str, str, str]:
+    """Generate gcode from prompt."""
+    if not prompt.strip():
+        return "", "", "Enter a prompt"
+
+    try:
+        gcode = generator.generate(prompt, temperature=temperature)
+        svg = gcode_to_svg(gcode)
+        status = f"✓ Generated {len(gcode.split(chr(10)))} lines, machine compatible"
+        return gcode, svg, status
+    except Exception as e:
+        return "", "", f"Error: {e}"
+
+
+# Custom CSS
+custom_css = """
+#workplane {
+    background: #111;
+    border-radius: 8px;
+    min-height: 500px;
+}
+#workplane svg {
+    width: 100%;
+    height: 100%;
+}
+.status {
+    font-family: monospace;
+}
+"""
+
+# Gradio UI
+with gr.Blocks(css=custom_css, theme=gr.themes.Base(primary_hue="green")) as demo:
+    gr.Markdown("# dcode\nText prompt → Polargraph Gcode")
+
+    with gr.Row():
+        with gr.Column(scale=2):
+            prompt = gr.Textbox(label="Prompt", placeholder="drawing of a cat...", lines=1)
+            temperature = gr.Slider(0.1, 1.5, value=0.8, label="Temperature")
+            generate_btn = gr.Button("Generate", variant="primary")
+
+        with gr.Column(scale=1):
+            status = gr.Textbox(label="Status", interactive=False, elem_classes=["status"])
+
+    with gr.Row():
+        preview = gr.HTML(elem_id="workplane")
+
+    with gr.Row():
+        gcode_output = gr.Textbox(label="Gcode", lines=10, show_copy_button=True)
+
+    with gr.Row():
+        gr.DownloadButton("Download Gcode", value=lambda: None, visible=False)
+
+    generate_btn.click(generate, [prompt, temperature], [gcode_output, preview, status])
+    prompt.submit(generate, [prompt, temperature], [gcode_output, preview, status])
+
+
+if __name__ == "__main__":
+    demo.launch()
+

index.html

@@ -1,43 +0,0 @@
-<!DOCTYPE html>
-<html lang="en">
-<head>
-    <meta charset="UTF-8">
-    <meta name="viewport" content="width=device-width, initial-scale=1.0">
-    <title>dcode - Text to Gcode</title>
-    <link rel="stylesheet" href="style.css">
-</head>
-<body>
-    <div class="container">
-        <header>
-            <h1>dcode</h1>
-            <p>Text prompt → Polargraph Gcode</p>
-        </header>
-
-        <div class="input-section">
-            <input type="text" id="prompt" placeholder="drawing of a cat..." />
-            <button id="generate">Generate</button>
-        </div>
-
-        <div class="workplane-container">
-            <canvas id="workplane"></canvas>
-            <div class="controls">
-                <button id="zoom-in">+</button>
-                <button id="zoom-out">-</button>
-                <button id="reset-view">Reset</button>
-            </div>
-        </div>
-
-        <div class="status-section">
-            <div id="status"></div>
-            <div id="validation"></div>
-        </div>
-
-        <div class="download-section">
-            <button id="download-gcode" disabled>Download Gcode</button>
-            <button id="download-svg" disabled>Download SVG</button>
-        </div>
-    </div>
-
-    <script src="app.js"></script>
-</body>
-</html>

requirements.txt

@@ -0,0 +1,5 @@
+gradio>=4.0
+torch>=2.0
+transformers>=4.36
+accelerate>=0.25
+

style.css

@@ -1,130 +0,0 @@
-* {
-    box-sizing: border-box;
-    margin: 0;
-    padding: 0;
-}
-
-body {
-    font-family: system-ui, sans-serif;
-    background: #1a1a1a;
-    color: #e0e0e0;
-    min-height: 100vh;
-}
-
-.container {
-    max-width: 900px;
-    margin: 0 auto;
-    padding: 2rem;
-}
-
-header {
-    text-align: center;
-    margin-bottom: 2rem;
-}
-
-header h1 {
-    font-size: 2rem;
-    margin-bottom: 0.5rem;
-}
-
-header p {
-    color: #888;
-}
-
-.input-section {
-    display: flex;
-    gap: 1rem;
-    margin-bottom: 2rem;
-}
-
-#prompt {
-    flex: 1;
-    padding: 1rem;
-    font-size: 1rem;
-    border: 1px solid #333;
-    border-radius: 4px;
-    background: #222;
-    color: #e0e0e0;
-}
-
-button {
-    padding: 1rem 2rem;
-    font-size: 1rem;
-    border: none;
-    border-radius: 4px;
-    background: #444;
-    color: #e0e0e0;
-    cursor: pointer;
-}
-
-button:hover {
-    background: #555;
-}
-
-button:disabled {
-    opacity: 0.5;
-    cursor: not-allowed;
-}
-
-#generate {
-    background: #2563eb;
-}
-
-#generate:hover {
-    background: #1d4ed8;
-}
-
-.workplane-container {
-    position: relative;
-    background: #111;
-    border: 1px solid #333;
-    border-radius: 4px;
-    margin-bottom: 1rem;
-}
-
-#workplane {
-    width: 100%;
-    height: 500px;
-    display: block;
-}
-
-.controls {
-    position: absolute;
-    top: 1rem;
-    right: 1rem;
-    display: flex;
-    gap: 0.5rem;
-}
-
-.controls button {
-    padding: 0.5rem 1rem;
-    font-size: 1.2rem;
-}
-
-.status-section {
-    margin-bottom: 1rem;
-    padding: 1rem;
-    background: #222;
-    border-radius: 4px;
-}
-
-#status {
-    margin-bottom: 0.5rem;
-}
-
-#validation.valid {
-    color: #22c55e;
-}
-
-#validation.invalid {
-    color: #ef4444;
-}
-
-.download-section {
-    display: flex;
-    gap: 1rem;
-}
-
-.download-section button {
-    flex: 1;
-}