Improve no-token diagram fallback experience

README.md

@@ -1,8 +1,8 @@
 ---
-title: Diagram to Code
+title: Diagram To Code
 emoji: 🔄
-colorFrom: yellow
-colorTo: blue
+colorFrom: blue
+colorTo: green
 sdk: gradio
 app_file: app.py
 pinned: false

app.py

@@ -15,8 +15,9 @@ import sys
 sys.path.append(os.path.join(os.path.dirname(__file__), '..'))
 from shared.components import create_method_panel, create_premium_hero
 
-# Initialize Hugging Face Inference Client
-client = InferenceClient()
+# Initialize Hugging Face Inference Client. A token improves reliability on Spaces,
+# but public inference may still work depending on provider availability.
+client = InferenceClient(token=os.getenv("HF_TOKEN") or None)
 
 PROMPTS = {
     "Database Schema → SQL": """Analyze this database schema diagram and generate SQL code.
@@ -114,35 +115,145 @@ Then generate clean, commented code based on the drawing. Be creative in interpr
 }
 
 
-def generate_code(image, diagram_type):
-    """Convert diagram to code using vision model."""
-    if image is None:
-        return "❌ Please upload a diagram first!"
+def fallback_scaffold(diagram_type, reason):
+    """Return a polished deterministic scaffold when live VLM inference is unavailable."""
+    templates = {
+        "Database Schema → SQL": """```sql
+-- Diagram interpretation scaffold
+-- Replace the example entities below with the tables, columns, and relationships visible in your diagram.
+
+CREATE TABLE users (
+    id BIGSERIAL PRIMARY KEY,
+    email TEXT NOT NULL UNIQUE,
+    created_at TIMESTAMPTZ NOT NULL DEFAULT NOW()
+);
+
+CREATE TABLE projects (
+    id BIGSERIAL PRIMARY KEY,
+    owner_id BIGINT NOT NULL REFERENCES users(id),
+    name TEXT NOT NULL,
+    status TEXT NOT NULL DEFAULT 'active',
+    created_at TIMESTAMPTZ NOT NULL DEFAULT NOW()
+);
+
+CREATE INDEX idx_projects_owner_id ON projects(owner_id);
+```
+""",
+        "Flowchart → Python": """```python
+def run_workflow(input_payload: dict) -> dict:
+    \"\"\"Implementation scaffold for a flowchart-style process.\"\"\"
+    state = {"status": "started", "steps": []}
+
+    if not input_payload:
+        return {"status": "rejected", "reason": "missing input"}
+
+    state["steps"].append("validate_input")
+
+    if input_payload.get("requires_review"):
+        state["steps"].append("manual_review")
+        state["status"] = "pending_review"
+    else:
+        state["steps"].append("automatic_processing")
+        state["status"] = "completed"
+
+    return state
+```
+""",
+        "UML Class Diagram → Classes": """```python
+from dataclasses import dataclass, field
+
+
+@dataclass
+class Entity:
+    \"\"\"Base class inferred from a UML class diagram.\"\"\"
+    id: int
+
+
+@dataclass
+class Project(Entity):
+    name: str
+    owner_id: int
+    tasks: list[str] = field(default_factory=list)
+
+    def add_task(self, task: str) -> None:
+        self.tasks.append(task)
+```
+""",
+        "UI Mockup → HTML/CSS": """```html
+<main class="dashboard-shell">
+  <section class="hero-card">
+    <p class="eyebrow">Product Insight</p>
+    <h1>Readable UI scaffold from a visual mockup</h1>
+    <p>Replace these sections with the components visible in your uploaded wireframe.</p>
+    <button>Primary action</button>
+  </section>
+</main>
+```
+
+```css
+.dashboard-shell {
+  min-height: 100vh;
+  padding: 48px;
+  background: linear-gradient(135deg, #f6efe4, #dfefff);
+  font-family: ui-sans-serif, system-ui;
+}
 
-    if diagram_type not in PROMPTS:
-        return "❌ Please select a diagram type!"
+.hero-card {
+  max-width: 760px;
+  padding: 40px;
+  border-radius: 28px;
+  background: rgba(255, 255, 255, 0.82);
+  box-shadow: 0 24px 80px rgba(20, 32, 54, 0.16);
+}
+```
+""",
+        "Whiteboard/Napkin Sketch → Code": """```python
+def interpret_sketch(elements: list[dict]) -> dict:
+    \"\"\"Starter adapter for turning rough whiteboard elements into implementation tasks.\"\"\"
+    entities = [item for item in elements if item.get("kind") == "entity"]
+    actions = [item for item in elements if item.get("kind") == "action"]
+    relationships = [item for item in elements if item.get("kind") == "relationship"]
 
-    try:
-        if not os.getenv("HF_TOKEN"):
-            return f"""# {diagram_type}
+    return {
+        "entities_to_model": entities,
+        "functions_to_write": actions,
+        "interfaces_to_define": relationships,
+    }
+```
+""",
+    }
+
+    return f"""# {diagram_type}
+
+## Implementation Scaffold
 
-Hosted vision inference is not configured for this Space yet.
+Live vision inference is temporarily unavailable in this runtime, so the Space is returning a professional starter scaffold for the selected diagram type.
 
-Add a Space secret named `HF_TOKEN` to enable automatic diagram understanding with a vision-language model.
+{templates.get(diagram_type, templates["Whiteboard/Napkin Sketch → Code"])}
 
-## Review Scaffold
+## How To Use This Result
 
-Use this checklist while reviewing the uploaded diagram manually:
+1. Replace the placeholder names with the labels visible in your diagram.
+2. Map each box to a table, class, function, component, or process step.
+3. Map arrows to dependencies, foreign keys, inheritance, or control flow.
+4. Run the scaffold early, then refine the semantics.
+5. Treat the generated code as a draft and review it like any other model output.
 
-1. Identify the entities, boxes, or components.
-2. Identify arrows, relationships, or control flow.
-3. Map each visual element to a code construct.
-4. Write the smallest runnable scaffold first.
-5. Review the generated or manual code before using it.
+## Runtime Note
 
-This fallback keeps the Space usable as a teaching tool even before private inference credentials are added.
+Automatic diagram understanding uses a hosted vision-language model when Hugging Face inference is available. Current fallback reason: `{reason}`.
 """
 
+
+def generate_code(image, diagram_type):
+    """Convert diagram to code using vision model."""
+    if image is None:
+        return "❌ Please upload a diagram first!"
+
+    if diagram_type not in PROMPTS:
+        return "❌ Please select a diagram type!"
+
+    try:
         # Convert PIL Image to base64
         buffered = BytesIO()
         if isinstance(image, str):
@@ -195,7 +306,7 @@ This fallback keeps the Space usable as a teaching tool even before private infe
         return formatted
 
     except Exception as e:
-        return f"❌ Error generating code: {str(e)}\n\nTip: Make sure the diagram is clear and follows standard notation."
+        return fallback_scaffold(diagram_type, str(e))
 
 
 # Gradio Interface