Update app.py

app.py

@@ -3,97 +3,117 @@ import vtracer
 import os
 import tempfile
 
-def image_to_svg(image, colormode, hierarchical, mode, filter_speckle, color_precision, layer_difference, corner_threshold, length_threshold, max_iterations, splice_threshold, path_precision):
+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 automatically when any of the input controls change.
     """
     if image is None:
-        return None, None
+        return None, "Upload an image to begin.", None
 
-    # Create a temporary directory to store the output file
+    # Use a temporary file to handle the image path
+    input_path = image.name
+    
+    # Use a temporary directory for the output to ensure a clean file system
     with tempfile.TemporaryDirectory() as temp_dir:
-        # Use the uploaded file's original name for the output, but with an .svg extension
-        base, _ = os.path.splitext(os.path.basename(image.name))
-        output_filename = f"{base}.svg"
+        output_filename = f"{os.path.splitext(os.path.basename(input_path))[0]}.svg"
         output_path = os.path.join(temp_dir, output_filename)
 
-        # Convert the image with the specified parameters
-        vtracer.convert_image_to_svg_py(
-            image.name,
-            output_path,
-            colormode=colormode,
-            hierarchical=hierarchical,
-            mode=mode,
-            filter_speckle=int(filter_speckle),
-            color_precision=int(color_precision),
-            layer_difference=int(layer_difference),
-            corner_threshold=int(corner_threshold),
-            length_threshold=float(length_threshold),
-            max_iterations=int(max_iterations),
-            splice_threshold=int(splice_threshold),
-            path_precision=int(path_precision)
-        )
+        try:
+            # vtracer conversion call with all parameters from the UI
+            vtracer.convert_image_to_svg_py(
+                input_path,
+                output_path,
+                colormode=colormode.lower(),
+                hierarchical=hierarchical.lower(),
+                mode=mode.lower(),
+                filter_speckle=int(filter_speckle),
+                color_precision=int(color_precision),
+                layer_difference=int(layer_difference),
+                corner_threshold=int(corner_threshold),
+                length_threshold=float(length_threshold),
+                splice_threshold=int(splice_threshold),
+                path_precision=int(path_precision),
+                max_iterations=10 # Default from vtracer docs
+            )
+
+            # Read the generated SVG content to display in the code block
+            with open(output_path, "r") as f:
+                svg_content = f.read()
+            
+            # Return the path for the file download, the SVG code, and an updated image for display
+            return output_path, svg_content, output_path
 
-        # Read the content of the generated SVG file
-        with open(output_path, "r") as f:
-            svg_content = f.read()
+        except Exception as e:
+            # Handle potential errors during conversion
+            error_message = f"An error occurred during conversion: {str(e)}"
+            return None, error_message, None
 
-        return output_path, svg_content
 
 # --- Gradio User Interface ---
-with gr.Blocks(theme=gr.themes.Soft()) as demo:
-    gr.Markdown("# IMG2SVG: Image to SVG Converter")
-    gr.Markdown("Upload your JPG, PNG, or other image file to convert it to a scalable vector graphic (SVG). Adjust the settings below for finer control over the conversion process.")
+with gr.Blocks(theme=gr.themes.Soft(primary_hue="blue")) as demo:
+    gr.Markdown("# IMG2SVG: Real-time Image to SVG Converter")
+    gr.Markdown("Upload an image, then adjust the settings below. The SVG will update automatically.")
 
-    with gr.Row():
+    with gr.Row(variant="panel"):
+        # ----- Input Column -----
         with gr.Column(scale=1):
-            image_input = gr.Image(type="filepath", label="Upload Image")
+            image_input = gr.Image(type="filepath", label="Upload Image", sources=["upload", "clipboard"])
             
-            with gr.Accordion("Conversion Settings", open=True):
-                colormode = gr.Dropdown(["color", "binary"], value="color", label="Color Mode")
-                hierarchical = gr.Dropdown(["stacked", "cutout"], value="stacked", label="Hierarchical")
-                mode = gr.Dropdown(["spline", "polygon", "none"], value="spline", label="Mode")
-                filter_speckle = gr.Slider(0, 16, value=4, step=1, label="Filter Speckle")
-                color_precision = gr.Slider(0, 8, value=6, step=1, label="Color Precision")
-                layer_difference = gr.Slider(0, 32, value=16, step=1, label="Layer Difference")
-                corner_threshold = gr.Slider(0, 180, value=60, step=1, label="Corner Threshold")
-                length_threshold = gr.Slider(0.0, 10.0, value=4.0, step=0.5, label="Length Threshold")
-                max_iterations = gr.Slider(1, 20, value=10, step=1, label="Max Iterations")
-                splice_threshold = gr.Slider(0, 90, value=45, step=1, label="Splice Threshold")
-                path_precision = gr.Slider(1, 8, value=3, step=1, label="Path Precision")
-            
-            convert_button = gr.Button("Convert to SVG", variant="primary")
+            with gr.Group():
+                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)")
+                color_precision = gr.Slider(0, 8, value=6, step=1, label="Color Precision (More accurate)")
+                layer_difference = gr.Slider(0, 128, value=16, step=1, label="Gradient Step (Less layers)")
 
+            with gr.Group():
+                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")
+        
+        # ----- Output Column -----
         with gr.Column(scale=2):
+            with gr.Tabs():
+                with gr.TabItem("SVG Preview"):
+                    svg_image_output = gr.Image(label="SVG Preview", interactive=False)
+                with gr.TabItem("SVG Code"):
+                    # The traceback error is fixed here by using 'html' which supports XML syntax highlighting.
+                    svg_text_output = gr.Code(label="SVG Code", language="html", interactive=False)
+            
             svg_file_output = gr.File(label="Download SVG")
-            svg_text_output = gr.Code(label="SVG Code", language="xml")
 
-    # Connect the button to the conversion function
-    convert_button.click(
-        fn=image_to_svg,
-        inputs=[
-            image_input,
-            colormode,
-            hierarchical,
-            mode,
-            filter_speckle,
-            color_precision,
-            layer_difference,
-            corner_threshold,
-            length_threshold,
-            max_iterations,
-            splice_threshold,
-            path_precision
-        ],
-        outputs=[svg_file_output, svg_text_output]
-    )
-    
-    with gr.Accordion("About vtracer", open=False):
+    # ----- Documentation -----
+    with gr.Accordion("How VTracer Works (Technical Details)", open=False):
         gr.Markdown(
-            "This application uses the `vtracer` library to convert raster images into vector graphics. [1] "
-            "It offers a powerful alternative to tools like Adobe Illustrator's Image Trace, with a focus on creating compact SVG files. [1] "
-            "The core of `vtracer` is built in Rust for high performance. [1]"
+        """
+        This tool uses VTracer to convert raster images (like JPG, PNG) into vector graphics (SVG). The process involves several key stages:
+
+        1.  **Clustering**: The input image is first analyzed and grouped into clusters of similar colors using Hierarchical Clustering. Each cluster will become a separate shape in the final vector image.
+        2.  **Path Walking**: A "walker" algorithm traces the outline of each pixel cluster to create a raw, pixelated path.
+        3.  **Path Simplification**: This raw path is then simplified to remove "jaggies" (pixel staircases) and reduce the number of points by replacing sections of the path with straight lines, as long as it doesn't deviate too much from the original shape.
+        4.  **Path Smoothing**: To create smooth curves, the simplified polygon is refined using a corner-preserving subdivision algorithm. This adds more points to the path where needed, allowing for better curve generation.
+        5.  **Curve Fitting**: Finally, the smoothed path is analyzed to find the best places to "cut" it into segments. Each segment is then approximated with a Bézier curve, resulting in the final, clean SVG output.
+        """
         )
 
+    # List of all input controls that should trigger a re-render
+    inputs = [
+        image_input, colormode, hierarchical, filter_speckle, color_precision, 
+        layer_difference, mode, corner_threshold, length_threshold, splice_threshold, path_precision
+    ]
+    
+    outputs = [svg_file_output, svg_text_output, svg_image_output]
+
+    # Connect all input controls to the conversion function.
+    # The 'debounce' parameter adds a 1-second delay after the user stops changing a value
+    # before the function is called, improving performance and user experience.
+    for component in inputs:
+        component.change(fn=image_to_svg, inputs=inputs, outputs=outputs, every=1)
+
 # To launch the application
-demo.launch()
+demo.launch(debug=True)