init interface

README.md

@@ -1,12 +1,28 @@
 ---
-title: Dcode
-emoji: 👀
+title: dcode
+emoji: ✏️
 colorFrom: gray
-colorTo: purple
+colorTo: green
 sdk: static
 pinned: false
 license: mit
-short_description: 'gcode Diffusion '
+short_description: Text to Polargraph Gcode via Diffusion
 ---
 
-Check out the configuration reference at https://huggingface.co/docs/hub/spaces-config-reference
+# dcode
+
+Generate polargraph-compatible gcode from text prompts.
+
+## 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
+
+## Features
+
+- Real-time gcode visualization
+- Zoom/pan controls
+- Machine compatibility validation
+- Export to Gcode or SVG

app.js

@@ -0,0 +1,251 @@
+// 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';
+};
+

index.html

@@ -1,19 +1,43 @@
-<!doctype html>
-<html>
-	<head>
-		<meta charset="utf-8" />
-		<meta name="viewport" content="width=device-width" />
-		<title>My static Space</title>
-		<link rel="stylesheet" href="style.css" />
-	</head>
-	<body>
-		<div class="card">
-			<h1>Welcome to your static Space!</h1>
-			<p>You can modify this app directly by editing <i>index.html</i> in the Files and versions tab.</p>
-			<p>
-				Also don't forget to check the
-				<a href="https://huggingface.co/docs/hub/spaces" target="_blank">Spaces documentation</a>.
-			</p>
-		</div>
-	</body>
+<!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>

style.css

@@ -1,28 +1,130 @@
+* {
+    box-sizing: border-box;
+    margin: 0;
+    padding: 0;
+}
+
 body {
-	padding: 2rem;
-	font-family: -apple-system, BlinkMacSystemFont, "Arial", sans-serif;
+    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;
 }
 
-h1 {
-	font-size: 16px;
-	margin-top: 0;
+#validation.valid {
+    color: #22c55e;
 }
 
-p {
-	color: rgb(107, 114, 128);
-	font-size: 15px;
-	margin-bottom: 10px;
-	margin-top: 5px;
+#validation.invalid {
+    color: #ef4444;
 }
 
-.card {
-	max-width: 620px;
-	margin: 0 auto;
-	padding: 16px;
-	border: 1px solid lightgray;
-	border-radius: 16px;
+.download-section {
+    display: flex;
+    gap: 1rem;
 }
 
-.card p:last-child {
-	margin-bottom: 0;
+.download-section button {
+    flex: 1;
 }