Updated the App.py

app.py

@@ -10,6 +10,7 @@ from fastapi.middleware.cors import CORSMiddleware
 from fastapi.responses import JSONResponse, FileResponse
 
 from visualization import process_wireframe
+from CodingModule import HTMLGenerator
 
 # -----------------------------------------------------------------------------
 # FASTAPI (for Firebase / programmatic access)
@@ -48,20 +49,32 @@ async def process_wireframe_api(image: UploadFile = File(...)):
         results = process_wireframe(
             image_path=temp_path,
             save_json=True,
-            save_html=True,
+            save_html=False,
             show_visualization=False
         )
 
-        if not results:
+        if not results or not results.get('normalized_elements'):
             return JSONResponse(
                 status_code=400,
                 content={"error": "No elements detected"}
             )
-
+        
+        json_path = results.get("json_path")
+        
+        #Generate styled HTML using CodingModule
+        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}")
+            html_path = results.get("html_path")
+        
         return {
             "success": True,
-            "json_path": results.get("json_path"),
-            "html_path": results.get("html_path"),
+            "json_path": results.get("./", ""),
+            "html_path": results.get("./", ""),
             "total_elements": len(results["normalized_elements"])
         }
 
@@ -78,8 +91,25 @@ async def process_wireframe_api(image: UploadFile = File(...)):
 
 #Endpoint to serve generated HTML files
 @api.get("/view-html/{file_id}")
+async def serve_output_file(filename: str):
+    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"})
+
+# Legacy endpoint for just for backward compatibility
+@api.get("/view-html/{file_id}")
 async def view_html(file_id: str):
     html_path = os.path.join(OUTPUT_DIR, f"{file_id}.html")
+    if os.path.exists(html_path):
+        return FileResponse(html_path, media_type="text/html")
+    # Try with _styled suffix
+    html_path = os.path.join(OUTPUT_DIR, f"{file_id}_styled.html")
     if os.path.exists(html_path):
         return FileResponse(html_path, media_type="text/html")
     return JSONResponse(status_code=404, content={"error": "File not found"})
@@ -94,7 +124,9 @@ def gradio_process(image):
     """
     if image is None:
         return "Please upload an image", None, None
-    temp_path = f"{TEMP_DIR}/{uuid.uuid4()}.png"
+    
+    file_id = str(uuid.uuid4())
+    temp_path = os.path.join(TEMP_DIR, f"{file_id}.png")
     
     try: 
         image.save(temp_path)
@@ -109,12 +141,26 @@ def gradio_process(image):
             show_visualization=False
         )
 
-        if not results:
+        if not results or not results.get('normalized_elements'):
             return "No elements detected", None, None
 
-        status_msg = f"Successfully detected {len(results['normalized_elements'])} elements"
         json_path = results.get("json_path")
-        html_path = results.get("html_path")
+        
+        #Generate styled HTML using CodingModule
+        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}")
+            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
 
@@ -126,37 +172,64 @@ def gradio_process(image):
         if os.path.exists(temp_path):
             os.remove(temp_path)
 
-
-# demo = gr.Interface(
-#     fn=gradio_process,
-#     inputs=gr.Image(type="pil", label="Upload Wireframe"),
-#     outputs=[
-#         gr.Textbox(label="Status"),
-#         gr.File(label="Normalized JSON Output")
-#     ],
-#     title="Wireframe Layout Normalizer",
-#     description="Upload a wireframe image to extract and normalize UI layout"
-# )
-
-with gr.Blocks(theme=gr.themes.Soft()) as demo:
+# Enhanced Gradio interface with better UI
+with gr.Blocks(theme=gr.themes.Soft(), 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
+    """)
+    
     with gr.Row():
-        with gr.Row():
+        with gr.Column(scale=1):
             image_input = gr.Image(type="pil", label="Upload Wireframe Image")
-            process_btn = gr.Button("Process Wireframe", variant="primary")
+            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():
-            status_output = gr.Textbox(label="Status", lines=2)
+        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 Output")
-        
+            html_output = gr.File(label="Generated HTML Preview")
+    
     process_btn.click(
         fn=gradio_process,
         inputs=image_input,
         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
+    """)
 
 
 # -----------------------------------------------------------------------------