feat: real-time html preview

app.py

@@ -297,6 +297,34 @@ def predict_decompose_group(svg_file, svg_text, object_name):
     )
 
 
+def update_preview_from_html(html_content: str) -> str:
+    """Update animation preview from manually edited HTML content."""
+    if not html_content.strip():
+        return create_error_html("⚠️ HTML content is empty")
+    
+    try:
+        # Create iframe HTML - only escape quotes for srcdoc attribute
+        safe_html_content = html_content.replace('"', '"')
+        preview_html = f"""
+        <div style='padding: 20px; background: #fff; border: 1px solid #eee; border-radius: 8px; display: block;'>
+            <div style='display: block; align-items: center; margin-bottom: 10px;'>
+                <small style='color: #888;'>Preview (Live from HTML Output)</small>
+            </div>
+            <div id='animation-container' style='min-height: 300px; display: block; justify-content: center; align-items: center; background: #fafafa; border-radius: 4px; padding: 20px;'>
+                <iframe srcdoc="{safe_html_content}"
+                    width="100%" height="600px" 
+                    style="border:none; overflow:hidden;"
+                    sandbox="allow-scripts allow-same-origin">
+                </iframe>
+            </div>
+        </div>
+        """
+        return preview_html
+        
+    except Exception as e:
+        return create_error_html(f"❌ Error updating preview: {str(e)}")
+
+
 def create_animation_preview(animation_desc: str, svg_content: str) -> tuple:
     """Create animation preview from description and SVG content."""
     if not svg_content.strip():
@@ -476,7 +504,8 @@ with demo:
                 output_html = gr.Textbox(
                     label="Output HTML",
                     lines=10,
-                    placeholder="Generated HTML will appear here.",
+                    placeholder="Generated HTML will appear here. You can edit this HTML and see live preview.",
+                    interactive=True,  # Make sure it's editable
                 )
 
     # Event handlers
@@ -515,6 +544,13 @@ with demo:
             output_html,          # Raw HTML output
         ],
     )
+    
+    # Real-time preview update when HTML is manually edited
+    output_html.change(
+        fn=update_preview_from_html,
+        inputs=[output_html],
+        outputs=[animation_preview],
+    )
 
 if __name__ == "__main__":
     demo.launch(share=True)