Fix Attempt #4 for coding module

app.py

@@ -3,23 +3,23 @@ import uuid
 import shutil
 import traceback
 import json
+
 import gradio as gr
 from fastapi import FastAPI, File, UploadFile
-from fastapi.responses import JSONResponse
-from fastapi.middleware.cors import CORSMiddleware
 from fastapi.responses import JSONResponse, FileResponse
+from fastapi.middleware.cors import CORSMiddleware
 
 from visualization import process_wireframe
 from CodingModule import HTMLGenerator
 
 # -----------------------------------------------------------------------------
-# FASTAPI (for Firebase / programmatic access)
+# FASTAPI BACKEND
 # -----------------------------------------------------------------------------
 api = FastAPI()
 
 api.add_middleware(
     CORSMiddleware,
-    allow_origins=["*"], #Replace with the Firebase domain
+    allow_origins=["*"],
     allow_credentials=True,
     allow_methods=["*"],
     allow_headers=["*"],
@@ -31,12 +31,18 @@ OUTPUT_DIR = "./output"
 os.makedirs(TEMP_DIR, exist_ok=True)
 os.makedirs(OUTPUT_DIR, exist_ok=True)
 
+
 @api.get("/")
 def health_check():
     return {"status": "ok"}
 
+
 @api.post("/process-wireframe")
 async def process_wireframe_api(image: UploadFile = File(...)):
+    """
+    Firebase / Programmatic endpoint
+    Returns JSON + HTML content directly.
+    """
     file_id = str(uuid.uuid4())
     temp_path = os.path.join(TEMP_DIR, f"{file_id}_{image.filename}")
 
@@ -56,82 +62,77 @@ async def process_wireframe_api(image: UploadFile = File(...)):
                 status_code=400,
                 content={"error": "No elements detected"}
             )
-        
+
         json_path = results.get("json_path")
-        
-        # Read the JSON file content and return it directly
+
+        # Load JSON content
         json_content = None
         if json_path and os.path.exists(json_path):
             with open(json_path, "r") as f:
                 json_content = json.load(f)
-        
-        # Generate styled HTML using CodingModule
+
+        # Generate styled HTML
         html_path = None
         try:
             html_generator = HTMLGenerator(json_path)
             html_filename = f"{file_id}_styled.html"
             html_path = os.path.join(OUTPUT_DIR, html_filename)
             html_generator.generate_html(html_path)
-        except Exception as e:
-            print(f"Warning: Could not generate styled HTML: {e}")
+        except:
             html_path = results.get("html_path")
-        
-        # Read the HTML file content
+
         html_content = None
         if html_path and os.path.exists(html_path):
             with open(html_path, "r", encoding="utf-8") as f:
                 html_content = f.read()
-        
+
         return {
             "success": True,
-            "json_data": json_content,  # Return actual JSON content instead of path
-            "html_content": html_content,  # Return actual HTML content instead of path
+            "json_data": json_content,
+            "html_content": html_content,
             "total_elements": len(results["normalized_elements"]),
-            "normalized_elements": results.get("normalized_elements", [])  # Include normalized elements
+            "normalized_elements": results.get("normalized_elements", [])
         }
 
     except Exception as e:
         traceback.print_exc()
-        return JSONResponse(
-            status_code=500,
-            content={"error": str(e)}
-        )
+        return JSONResponse(status_code=500, content={"error": str(e)})
 
     finally:
         if os.path.exists(temp_path):
             os.remove(temp_path)
 
-#Endpoint to serve generated HTML files
-@api.get("/view-html/{file_id}")
+
+@api.get("/view-html/{filename}")
 async def serve_output_file(filename: str):
+    """
+    Serve stored HTML/JSON files.
+    """
     file_path = os.path.join(OUTPUT_DIR, filename)
-    if os.path.exists(file_path):
-        if filename.endswith('.html'):
-            return FileResponse(file_path, media_type="text/html")
-        elif filename.endswith('.json'):
-            return FileResponse(file_path, media_type="application/json")
-        else:
-            return FileResponse(file_path)
-    return JSONResponse(status_code=404, content={"error": "File not Found"})
+    if not os.path.exists(file_path):
+        return JSONResponse(status_code=404, content={"error": "File not found"})
+
+    if filename.endswith(".html"):
+        return FileResponse(file_path, media_type="text/html")
+    elif filename.endswith(".json"):
+        return FileResponse(file_path, media_type="application/json")
+    return FileResponse(file_path)
+
 
 # -----------------------------------------------------------------------------
-# GRADIO (for Hugging Face UI)
+# GRADIO UI LOGIC
 # -----------------------------------------------------------------------------
 def gradio_process(image):
-    """
-    Gradio passes a PIL Image.
-    We save it temporarily and reuse the SAME pipeline.
-    """
     if image is None:
         return "Please upload an image", None, None
-    
+
     file_id = str(uuid.uuid4())
     temp_path = os.path.join(TEMP_DIR, f"{file_id}.png")
-    
-    try: 
+
+    try:
         image.save(temp_path)
     except Exception as e:
-        return f"Error saving image: {str(e)}", None, None
+        return f"Error saving: {str(e)}", None, None
 
     try:
         results = process_wireframe(
@@ -141,28 +142,27 @@ def gradio_process(image):
             show_visualization=False
         )
 
-        if not results or not results.get('normalized_elements'):
+        if not results.get("normalized_elements"):
             return "No elements detected", None, None
 
-        json_path = results.get("json_path")
-        
-        #Generate styled HTML using CodingModule
+        json_path = results["json_path"]
+
+        # Generate styled HTML
         try:
             html_generator = HTMLGenerator(json_path)
             html_filename = f"{file_id}_styled.html"
             html_path = os.path.join(OUTPUT_DIR, html_filename)
             html_generator.generate_html(html_path)
-        except Exception as e:
-            print(f"Warning: Could not generate styled HTML: {e}")
+        except:
             traceback.print_exc()
             html_path = results.get("html_path")
-        
-        num_elements = len(results['normalized_elements'])
-        status_msg = f"Successfully detected {num_elements} elemnts\n"
-        status_msg += f"JSON: {os.path.basename(json_path)}\n"
-        status_msg += f"HTML: {os.path.basename(html_path)}"
-        
-        return status_msg, json_path, html_path
+
+        num = len(results["normalized_elements"])
+        status = f"Detected {num} elements\n"
+        status += f"JSON: {os.path.basename(json_path)}\n"
+        status += f"HTML: {os.path.basename(html_path)}"
+
+        return status, json_path, html_path
 
     except Exception as e:
         traceback.print_exc()
@@ -172,71 +172,43 @@ def gradio_process(image):
         if os.path.exists(temp_path):
             os.remove(temp_path)
 
-# Enhanced Gradio interface with better UI
-with gr.Blocks(theme=gr.themes.Soft(), title="Wireframe Layout Normalizer") as demo:
+
+# -----------------------------------------------------------------------------
+# GRADIO UI (updated for Gradio 6 compliance)
+# -----------------------------------------------------------------------------
+with gr.Blocks(title="Wireframe Layout Normalizer") as demo:
+
     gr.Markdown("# Wireframe Layout Normalizer")
-    gr.Markdown("Upload a wireframe image to extract and normalize UI layout elements")
-    
-    gr.Markdown("""
-    ###  Academic Research Project made by SeroTech 2025-2026 Holy Angel University
-    This tool is part of a thesis project. Upload your wireframe sketch to automatically:
-    -  Detect UI elements (buttons, text fields, images, etc.)
-    -  Normalize positions and alignments
-    -  Export structured JSON data
-    -  Generate beautiful HTML preview
-    """)
-    
+    gr.Markdown("Upload a wireframe image to extract and normalize UI layout elements.")
+
     with gr.Row():
-        with gr.Column(scale=1):
+        with gr.Column():
             image_input = gr.Image(type="pil", label="Upload Wireframe Image")
-            process_btn = gr.Button("Process Wireframe", variant="primary", size="lg")
-            
-            gr.Markdown("""
-            #### Tips:
-            - Upload clear wireframe sketches
-            - PNG, JPG, or JPEG formats supported
-            - Higher resolution = better detection
-            """)
-            
-        with gr.Column(scale=1):
-            status_output = gr.Textbox(
-                label="Processing Status", 
-                lines=3,
-                placeholder="Upload an image and click Process to begin..."
-            )
-            json_output = gr.File(label="Normalized JSON Output")
-            html_output = gr.File(label="Generated HTML Preview")
-    
+            process_btn = gr.Button("Process Wireframe")
+
+        with gr.Column():
+            status_output = gr.Textbox(label="Status")
+            json_output = gr.File(label="JSON Output")
+            html_output = gr.File(label="HTML Preview")
+
     process_btn.click(
         fn=gradio_process,
         inputs=image_input,
-        outputs=[status_output, json_output, html_output]
+        outputs=[status_output, json_output, html_output],
     )
-    
-    gr.Markdown("""
-    ---
-    ### How to use:
-    1. Upload a wireframe image (hand-drawn or digital)
-    2. Click "Process Wireframe" and wait for processing
-    3. Download the JSON file for structured data
-    4. Download the HTML file to see a styled preview
-    
-    ### Output Files:
-    - JSON: Contains all detected elements with positions, types, and grid data
-    - HTML: Beautiful, responsive preview with modern styling
-    
-    ### Technical Details:
-    - Model: TensorFlow-based object detection
-    - Grid System: 24-column responsive layout
-    - Supported Elements: Buttons, Checkboxes, Text Fields, Images, Paragraphs, Text, Navbars
-    """)
+
 
 # -----------------------------------------------------------------------------
-# ENTRY POINT (THIS IS IMPORTANT)
+# FINAL APP MOUNT (fixes reload + /new spam)
 # -----------------------------------------------------------------------------
-app = gr.mount_gradio_app(api, demo, path="/")
+app = gr.mount_gradio_app(
+    api,
+    demo,
+    path="/gradio",
+    theme=gr.themes.Soft()
+)
+
 
-if __name__ == "_main_":
+if __name__ == "__main__":
     import uvicorn
-    # For local testing
-    uvicorn.run(app, host="0.0.0.0", port=7860)
+    uvicorn.run(app, host="0.0.0.0", port=7860)