Included the Coding Module and updated the app.py

CodingModule.py

@@ -0,0 +1,500 @@
+import json
+from pathlib import Path
+from typing import Dict, List, Any
+
+class HTMLGenerator:
+    """Generate beautiful HTML pages from UI element JSON data."""
+    
+    def __init__(self, json_path: str):
+        """Initialize with path to JSON file."""
+        self.json_path = Path(json_path)
+        self.data = self._load_json()
+        self.elements = self._parse_elements()
+        
+    def _load_json(self) -> Dict:
+        """Load and parse JSON file."""
+        with open(self.json_path, 'r') as f:
+            return json.load(f)
+    
+    def _parse_elements(self) -> List[Dict]:
+        """Parse and sort elements by position."""
+        elements = self.data.get('elements', [])
+        # Sort by row position, then column
+        return sorted(elements, key=lambda x: (
+            x['grid_position']['start_row'],
+            x['grid_position']['start_col']
+        ))
+    
+    def _get_gradient_colors(self) -> tuple:
+        """Return primary gradient colors."""
+        return ('#667eea', '#764ba2')
+    
+    def _generate_css(self) -> str:
+        """Generate comprehensive CSS styling."""
+        color1, color2 = self._get_gradient_colors()
+        
+        return f"""* {{
+    margin: 0;
+    padding: 0;
+    box-sizing: border-box;
+}}
+
+body {{
+    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
+    background: linear-gradient(135deg, {color1} 0%, {color2} 100%);
+    min-height: 100vh;
+    padding: 20px;
+    line-height: 1.6;
+}}
+
+.container {{
+    max-width: 1400px;
+    margin: 0 auto;
+    background: white;
+    border-radius: 20px;
+    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.3);
+    overflow: hidden;
+}}
+
+/* Navbar Styling */
+.navbar {{
+    background: linear-gradient(90deg, {color1} 0%, {color2} 100%);
+    padding: 30px 40px;
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+}}
+
+.navbar h1 {{
+    color: white;
+    font-size: 28px;
+    font-weight: 600;
+}}
+
+.nav-links {{
+    display: flex;
+    gap: 30px;
+}}
+
+.nav-links a {{
+    color: white;
+    text-decoration: none;
+    font-size: 16px;
+    transition: opacity 0.3s;
+}}
+
+.nav-links a:hover {{
+    opacity: 0.8;
+}}
+
+/* Section Styling */
+.section {{
+    padding: 30px 40px;
+}}
+
+.section.light {{
+    background: #f8f9fa;
+}}
+
+/* Main Content Grid */
+.main-content {{
+    display: grid;
+    grid-template-columns: 1fr 1fr;
+    gap: 40px;
+    padding: 40px;
+}}
+
+.left-section {{
+    display: flex;
+    flex-direction: column;
+    gap: 30px;
+}}
+
+.right-section {{
+    background: #f8f9fa;
+    padding: 35px;
+    border-radius: 12px;
+    border: 2px solid #e0e0e0;
+}}
+
+/* Button Styling */
+.button {{
+    background: linear-gradient(135deg, {color1} 0%, {color2} 100%);
+    color: white;
+    border: none;
+    padding: 18px 36px;
+    font-size: 16px;
+    font-weight: 600;
+    border-radius: 12px;
+    cursor: pointer;
+    transition: all 0.3s;
+    box-shadow: 0 4px 15px rgba(102, 126, 234, 0.4);
+    align-self: flex-start;
+}}
+
+.button:hover {{
+    transform: translateY(-2px);
+    box-shadow: 0 6px 20px rgba(102, 126, 234, 0.6);
+}}
+
+.button:active {{
+    transform: translateY(0);
+}}
+
+/* Checkbox Styling */
+.checkbox-group {{
+    background: #f8f9fa;
+    padding: 25px;
+    border-radius: 12px;
+    border: 2px solid #e0e0e0;
+}}
+
+.checkbox-item {{
+    display: flex;
+    align-items: center;
+    gap: 15px;
+    margin-bottom: 15px;
+}}
+
+.checkbox-item:last-child {{
+    margin-bottom: 0;
+}}
+
+input[type="checkbox"] {{
+    width: 24px;
+    height: 24px;
+    cursor: pointer;
+    accent-color: {color1};
+}}
+
+.checkbox-item label {{
+    font-size: 16px;
+    color: #333;
+    cursor: pointer;
+}}
+
+/* Image Styling */
+.image-container {{
+    background: linear-gradient(135deg, {color1}22 0%, {color2}33 100%);
+    border-radius: 12px;
+    padding: 20px;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    min-height: 300px;
+    border: 2px dashed {color1};
+}}
+
+.image-placeholder {{
+    text-align: center;
+    color: {color1};
+}}
+
+.image-placeholder svg {{
+    width: 100px;
+    height: 100px;
+    margin-bottom: 20px;
+    opacity: 0.6;
+}}
+
+.image-placeholder p {{
+    font-size: 18px;
+    font-weight: 500;
+}}
+
+/* Text Styling */
+.text-block {{
+    background: white;
+    padding: 25px;
+    border-radius: 12px;
+    border-left: 4px solid {color1};
+    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
+}}
+
+.text-block h3 {{
+    color: #333;
+    margin-bottom: 10px;
+    font-size: 20px;
+}}
+
+.text-block p {{
+    color: #666;
+    line-height: 1.6;
+    font-size: 15px;
+}}
+
+/* Textfield Styling */
+.textfield {{
+    width: 100%;
+    padding: 18px 24px;
+    font-size: 16px;
+    border: 2px solid #e0e0e0;
+    border-radius: 12px;
+    transition: all 0.3s;
+}}
+
+.textfield:focus {{
+    outline: none;
+    border-color: {color1};
+    box-shadow: 0 0 0 3px rgba(102, 126, 234, 0.1);
+}}
+
+/* Paragraph Styling */
+.paragraph {{
+    color: #555;
+    line-height: 1.8;
+    font-size: 16px;
+    margin-bottom: 15px;
+}}
+
+.paragraph h2 {{
+    color: #333;
+    margin-bottom: 20px;
+    font-size: 26px;
+    border-bottom: 3px solid {color1};
+    padding-bottom: 15px;
+}}
+
+/* Responsive Design */
+@media (max-width: 1024px) {{
+    .main-content {{
+        grid-template-columns: 1fr;
+    }}
+}}
+
+@media (max-width: 768px) {{
+    .navbar {{
+        flex-direction: column;
+        gap: 20px;
+        text-align: center;
+    }}
+    
+    .nav-links {{
+        flex-direction: column;
+        gap: 15px;
+    }}
+    
+    .section {{
+        padding: 20px;
+    }}
+    
+    .main-content {{
+        padding: 20px;
+        gap: 20px;
+    }}
+}}"""
+    
+    def _generate_navbar_html(self, element: Dict) -> str:
+        """Generate navbar HTML."""
+        return """<nav class="navbar">
+    <h1>Modern Dashboard</h1>
+    <div class="nav-links">
+        <a href="#home">Home</a>
+        <a href="#features">Features</a>
+        <a href="#about">About</a>
+        <a href="#contact">Contact</a>
+    </div>
+</nav>"""
+    
+    def _generate_button_html(self, element: Dict) -> str:
+        """Generate button HTML."""
+        return f'<button class="button">Get Started</button>'
+    
+    def _generate_checkbox_html(self, element: Dict) -> str:
+        """Generate checkbox group HTML."""
+        return """<div class="checkbox-group">
+    <div class="checkbox-item">
+        <input type="checkbox" id="option1" checked>
+        <label for="option1">Enable notifications</label>
+    </div>
+    <div class="checkbox-item">
+        <input type="checkbox" id="option2">
+        <label for="option2">Auto-save changes</label>
+    </div>
+    <div class="checkbox-item">
+        <input type="checkbox" id="option3" checked>
+        <label for="option3">Dark mode</label>
+    </div>
+</div>"""
+    
+    def _generate_image_html(self, element: Dict) -> str:
+        """Generate image placeholder HTML."""
+        return """<div class="image-container">
+    <div class="image-placeholder">
+        <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
+            <rect x="3" y="3" width="18" height="18" rx="2" ry="2"/>
+            <circle cx="8.5" cy="8.5" r="1.5"/>
+            <polyline points="21 15 16 10 5 21"/>
+        </svg>
+        <p>Image Placeholder</p>
+    </div>
+</div>"""
+    
+    def _generate_text_html(self, element: Dict) -> str:
+        """Generate text block HTML."""
+        return """<div class="text-block">
+    <h3>Quick Tip</h3>
+    <p>Use the search bar above to quickly find what you're looking for. All features are just a click away!</p>
+</div>"""
+    
+    def _generate_textfield_html(self, element: Dict) -> str:
+        """Generate textfield HTML."""
+        return '<input type="text" class="textfield" placeholder="Search for anything...">'
+    
+    def _generate_paragraph_html(self, element: Dict) -> str:
+        """Generate paragraph HTML."""
+        return """<div class="paragraph">
+    <h2>Welcome to Your Dashboard</h2>
+    <p>This modern interface brings together all the tools you need in one beautiful, cohesive design. Our goal is to make your workflow as smooth and efficient as possible.</p>
+    <p>With intuitive navigation and powerful features at your fingertips, you can focus on what matters most. Whether you're managing projects, analyzing data, or collaborating with your team, everything is designed to work seamlessly together.</p>
+    <p>The responsive layout adapts to any screen size, ensuring you have a consistent experience across all your devices. Customize your settings using the options on the left to make this space truly yours.</p>
+    <p>We've carefully crafted every element to provide both beauty and functionality. The clean design reduces clutter while maintaining all the power you need to be productive.</p>
+    <p>Start exploring the features available to you, and discover how this platform can transform the way you work. If you need any help, our comprehensive documentation and support team are always available.</p>
+</div>"""
+    
+    def _generate_element_html(self, element: Dict) -> str:
+        """Generate HTML for a single element based on its type."""
+        element_type = element['type'].lower()
+        
+        generators = {
+            'navbar': self._generate_navbar_html,
+            'button': self._generate_button_html,
+            'checkbox': self._generate_checkbox_html,
+            'image': self._generate_image_html,
+            'text': self._generate_text_html,
+            'textfield': self._generate_textfield_html,
+            'paragraph': self._generate_paragraph_html
+        }
+        
+        generator = generators.get(element_type)
+        if generator:
+            return generator(element)
+        
+        # Default fallback
+        return f'<div class="{element_type}">Element: {element_type}</div>'
+    
+    def _organize_layout(self) -> Dict[str, List[Dict]]:
+        """Organize elements into layout sections."""
+        layout = {
+            'header': [],
+            'search': [],
+            'left': [],
+            'right': []
+        }
+        
+        for element in self.elements:
+            elem_type = element['type'].lower()
+            row_start = element['grid_position']['start_row']
+            
+            if elem_type == 'navbar':
+                layout['header'].append(element)
+            elif elem_type == 'textfield' and row_start < 7:
+                layout['search'].append(element)
+            elif elem_type == 'paragraph':
+                layout['right'].append(element)
+            else:
+                layout['left'].append(element)
+        
+        return layout
+    
+    def _generate_body_html(self) -> str:
+        """Generate the body HTML content."""
+        layout = self._organize_layout()
+        
+        html_parts = ['<div class="container">']
+        
+        # Header section
+        for element in layout['header']:
+            html_parts.append(self._generate_element_html(element))
+        
+        # Search section
+        if layout['search']:
+            html_parts.append('<div class="section light">')
+            for element in layout['search']:
+                html_parts.append(self._generate_element_html(element))
+            html_parts.append('</div>')
+        
+        # Main content with left and right sections
+        html_parts.append('<div class="main-content">')
+        
+        # Left section
+        html_parts.append('<div class="left-section">')
+        for element in layout['left']:
+            html_parts.append(self._generate_element_html(element))
+        html_parts.append('</div>')
+        
+        # Right section
+        html_parts.append('<div class="right-section">')
+        for element in layout['right']:
+            html_parts.append(self._generate_element_html(element))
+        html_parts.append('</div>')
+        
+        html_parts.append('</div>')  # Close main-content
+        html_parts.append('</div>')  # Close container
+        
+        return '\n'.join(html_parts)
+    
+    def generate_html(self, output_path: str = 'output.html'):
+        """Generate complete HTML file."""
+        css = self._generate_css()
+        body = self._generate_body_html()
+        
+        html_template = f"""<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Generated UI Layout</title>
+    <style>
+{css}
+    </style>
+</head>
+<body>
+{body}
+</body>
+</html>"""
+        
+        # Write to file
+        output_file = Path(output_path)
+        output_file.write_text(html_template, encoding='utf-8')
+        
+        print(f"✓ HTML file generated successfully: {output_file.absolute()}")
+        print(f"✓ Total elements processed: {len(self.elements)}")
+        print(f"✓ Element types: {', '.join(set(e['type'] for e in self.elements))}")
+        
+        return html_template
+
+
+def main():
+    """Main function to run the generator."""
+    import sys
+    
+    # Check if JSON file path is provided
+    if len(sys.argv) < 2:
+        print("Usage: python script.py <json_file_path> [output_html_path]")
+        print("Example: python script.py sample_output.json output.html")
+        sys.exit(1)
+    
+    json_path = sys.argv[1]
+    output_path = sys.argv[2] if len(sys.argv) > 2 else 'output.html'
+    
+    # Validate JSON file exists
+    if not Path(json_path).exists():
+        print(f"Error: JSON file not found: {json_path}")
+        sys.exit(1)
+    
+    try:
+        # Generate HTML
+        generator = HTMLGenerator(json_path)
+        generator.generate_html(output_path)
+        
+    except json.JSONDecodeError as e:
+        print(f"Error: Invalid JSON file - {e}")
+        sys.exit(1)
+    except Exception as e:
+        print(f"Error: {e}")
+        sys.exit(1)
+
+
+if __name__ == "__main__":
+    main()

app.py

@@ -66,6 +66,13 @@ async def process_wireframe_api(image: UploadFile = File(...)):
         if os.path.exists(temp_path):
             os.remove(temp_path)
 
+#Endpoint to serve generated HTML files
+@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")
+    return JSONResponse(status_code=404, content={"error": "File not found"})
 
 # -----------------------------------------------------------------------------
 # GRADIO (for Hugging Face UI)
@@ -75,8 +82,14 @@ 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
     temp_path = f"{TEMP_DIR}/{uuid.uuid4()}.png"
-    image.save(temp_path)
+    
+    try: 
+        image.save(temp_path)
+    except Exception as e:
+        return f"Error saving image: {str(e)}", None, None
 
     try:
         results = process_wireframe(
@@ -87,35 +100,61 @@ def gradio_process(image):
         )
 
         if not results:
-            return "No elements detected", None
+            return "No elements detected", None, None
 
-        return (
-            f"Detected {len(results['normalized_elements'])} elements",
-            results.get("json_path")
-        )
+        status_msg = f"Successfully detected {len(results[['normalized_elements']])} elements"
+        json_path = results.get("json_path")
+        html_path = results.get("html_path")
+        
+        return status_msg, json_path, html_path
 
     except Exception as e:
         traceback.print_exc()
-        return f"Error: {str(e)}", None
+        return f"Error: {str(e)}", None, None
 
     finally:
         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"
-)
+# 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:
+    gr.Markdown("# Wireframe Layout Normalizer")
+    gr.Markdown("Upload a wireframe image to extract and normalize UI layout elements")
+    
+    with gr.Row():
+        with gr.Row():
+            image_input = gr.Image(type="pil", label="Upload Wireframe Image")
+            process_btn = gr.Button("Process Wireframe", variant="primary")
+            
+        with gr.Column():
+            status_output = gr.Textbox(label="Status", lines=2)
+            json_output = gr.File(label="Normalized JSON Output")
+            html_output = gr.File(label="Generated HTML Output")
+        
+    process_btn.click(
+        fn=gradio_process,
+        inputs=image_input,
+        outputs=[status_output, json_output, html_output]
+    )
+
 
 # -----------------------------------------------------------------------------
 # ENTRY POINT (THIS IS IMPORTANT)
 # -----------------------------------------------------------------------------
 app = gr.mount_gradio_app(api, demo, path="/")
 
+if __name__ == "__main__":
+    import uvicorn
+    # For local testing
+    uvicorn.run(app, host="0.0.0.0", port=7860)

requirements.txt

@@ -6,3 +6,4 @@ numpy
 pillow
 matplotlib
 opencv-python-headless
+python-multipart