Update app.py

app.py

@@ -6,16 +6,15 @@ import tempfile
 def image_to_svg(image, colormode, hierarchical, filter_speckle, color_precision, layer_difference, mode, corner_threshold, length_threshold, splice_threshold, path_precision):
     """
     Converts an input image to an SVG string using vtracer.
-    This function is triggered by clicking the 'Convert' button.
+    This function is triggered automatically when any of the input controls change.
     """
     if image is None:
-        return None, "Upload an image and click 'Convert'.", None
+        # A clear startup state before an image is uploaded.
+        return None, "Upload an image to see the SVG preview and code.", None
 
     input_path = image
     
-    # **FIX:** Create a named temporary file that will NOT be deleted automatically.
-    # We use delete=False to ensure the file persists after the function returns.
-    # Gradio will handle the cleanup of this file from its own cache.
+    # Create a persistent temporary file that Gradio can access after the function returns.
     with tempfile.NamedTemporaryFile(delete=False, suffix=".svg", mode='w', encoding='utf-8') as temp_output_file:
         output_path = temp_output_file.name
 
@@ -41,8 +40,7 @@ def image_to_svg(image, colormode, hierarchical, filter_speckle, color_precision
         with open(output_path, "r", encoding='utf-8') as f:
             svg_content = f.read()
         
-        # Return the path for file download, the SVG code, and the path for the image preview.
-        # The file at output_path now exists and Gradio can access it.
+        # Return the path for the file download, the SVG code, and the path for the image preview.
         return output_path, svg_content, output_path
 
     except Exception as e:
@@ -53,16 +51,31 @@ def image_to_svg(image, colormode, hierarchical, filter_speckle, color_precision
 
 # --- Gradio User Interface ---
 with gr.Blocks(theme=gr.themes.Soft(primary_hue="blue")) as demo:
-    gr.Markdown("# IMG2SVG: Image to SVG Converter")
-    gr.Markdown("Upload an image, adjust the settings, and click **Convert**.")
+    
+    # --- Top Row: Upload and Project Info ---
+    with gr.Row():
+        with gr.Column(scale=1):
+            image_input = gr.Image(type="filepath", label="Upload Your Image", sources=["upload", "clipboard"])
+        with gr.Column(scale=2):
+            gr.Markdown(
+                """
+                # IMG2SVG: Real-time SVG Converter
+                This application converts raster images (like JPG, PNG) into clean, scalable vector graphics (SVG) using the powerful `vtracer` library.
+                
+                **How to use:**
+                1.  Upload an image.
+                2.  Adjust the settings in the control panel below.
+                3.  The SVG preview will update automatically.
+                """
+            )
 
+    # --- Bottom Row: Controls and Output ---
     with gr.Row(variant="panel"):
-        # ----- Input Column -----
+        # ----- Control Panel Column -----
         with gr.Column(scale=1):
-            image_input = gr.Image(type="filepath", label="Upload Image", sources=["upload", "clipboard"])
-            
+            gr.Markdown("### Control Panel")
             with gr.Group():
-                gr.Markdown("### Clustering")
+                gr.Markdown("#### Clustering")
                 colormode = gr.Radio(["Color", "B/W"], value="Color", label="Color Mode")
                 hierarchical = gr.Radio(["Stacked", "Cutout"], value="Stacked", label="Hierarchical Mode")
                 filter_speckle = gr.Slider(0, 128, value=4, step=1, label="Filter Speckle (Cleaner)")
@@ -70,46 +83,40 @@ with gr.Blocks(theme=gr.themes.Soft(primary_hue="blue")) as demo:
                 layer_difference = gr.Slider(0, 128, value=16, step=1, label="Gradient Step (Less layers)")
 
             with gr.Group():
-                gr.Markdown("### Curve Fitting")
+                gr.Markdown("#### Curve Fitting")
                 mode = gr.Radio(["Spline", "Polygon", "Pixel"], value="Spline", label="Mode")
                 corner_threshold = gr.Slider(0, 180, value=60, step=1, label="Corner Threshold (Smoother)")
                 length_threshold = gr.Slider(0, 10, value=4.0, step=0.5, label="Segment Length (More coarse)")
                 splice_threshold = gr.Slider(0, 180, value=45, step=1, label="Splice Threshold (Less accurate)")
                 path_precision = gr.Slider(1, 8, value=3, step=1, label="Path Precision")
-            
-            convert_button = gr.Button("Convert", variant="primary")
         
         # ----- Output Column -----
         with gr.Column(scale=2):
+            gr.Markdown("### Result")
             with gr.Tabs():
                 with gr.TabItem("SVG Preview"):
-                    svg_image_output = gr.Image(label="SVG Preview", interactive=False)
+                    svg_image_output = gr.Image(label="Live SVG Preview", interactive=False)
                 with gr.TabItem("SVG Code"):
-                    svg_text_output = gr.Code(label="SVG Code", language="html", interactive=False)
+                    svg_text_output = gr.Code(label="Generated SVG Code", language="html", interactive=False)
             
             svg_file_output = gr.File(label="Download SVG")
 
-    with gr.Accordion("How VTracer Works (Technical Details)", open=False):
-        gr.Markdown(
-        """
-        This tool uses VTracer to convert raster images into vector graphics. The process involves several key stages:
-
-        1.  **Clustering**: The image is grouped into clusters of similar colors.
-        2.  **Path Walking**: An algorithm traces the outline of each cluster to create a raw path.
-        3.  **Path Simplification**: The path is simplified to remove pixelation and reduce points.
-        4.  **Path Smoothing**: A corner-preserving algorithm refines the path to allow for smooth curves.
-        5.  **Curve Fitting**: The path is segmented and approximated with Bézier curves to create the final SVG.
-        """
-        )
-
-    inputs = [
+    # --- Event Handling for Live Update ---
+    
+    # A list of all the input controls that should trigger a re-render.
+    controls = [
         image_input, colormode, hierarchical, filter_speckle, color_precision, 
         layer_difference, mode, corner_threshold, length_threshold, splice_threshold, path_precision
     ]
     
+    # A list of all the components that will display the output.
     outputs = [svg_file_output, svg_text_output, svg_image_output]
 
-    convert_button.click(fn=image_to_svg, inputs=inputs, outputs=outputs)
+    # This loop attaches an event listener to every control.
+    # The 'debounce' parameter is crucial for performance. It waits for 0.5s of inactivity
+    # before triggering the conversion, ensuring it doesn't run excessively while a slider is being dragged.
+    for component in controls:
+        component.change(fn=image_to_svg, inputs=controls, outputs=outputs, debounce=0.5)
 
 # To launch the application
 demo.launch()