Update app.py

app.py

@@ -1,26 +1,34 @@
-import io
 import gradio as gr
-from PIL import Image
 import vtracer
-import tempfile
-
-def convert_image(image, color_mode, hierarchical, mode, filter_speckle,
-                  color_precision, layer_difference, corner_threshold,
-                  length_threshold, max_iterations, splice_threshold, path_precision):
-    """Converts an image to SVG using vtracer with customizable parameters."""
-
-    # Convert Gradio image to bytes for vtracer compatibility
-    img_byte_array = io.BytesIO()
-    image.save(img_byte_array, format='PNG')
-    img_bytes = img_byte_array.getvalue()
-
-    # Perform the conversion
-    svg_str = vtracer.convert_raw_image_to_svg(
-        img_bytes,
-        img_format='png',
-        colormode=color_mode.lower(),
-        hierarchical=hierarchical.lower(),
-        mode=mode.lower(),
+import os
+
+def convert_to_vector(
+    image, 
+    colormode="color", 
+    hierarchical="stacked", 
+    mode="spline", 
+    filter_speckle=4, 
+    color_precision=6, 
+    layer_difference=16, 
+    corner_threshold=60, 
+    length_threshold=4.0, 
+    max_iterations=10, 
+    splice_threshold=45, 
+    path_precision=3
+):
+    input_path = "temp_input.jpg"
+    output_path = "svg_output.svg"
+
+    # Save the input image to a temporary file
+    image.save(input_path)
+
+    # Convert the image to SVG using VTracer
+    vtracer.convert_image_to_svg_py(
+        input_path,
+        output_path,
+        colormode=colormode,
+        hierarchical=hierarchical,
+        mode=mode,
         filter_speckle=int(filter_speckle),
         color_precision=int(color_precision),
         layer_difference=int(layer_difference),
@@ -30,42 +38,161 @@ def convert_image(image, color_mode, hierarchical, mode, filter_speckle,
         splice_threshold=int(splice_threshold),
         path_precision=int(path_precision)
     )
+    # Read the SVG output
+    with open(output_path, "r") as f:
+        svg_content = f.read()
+
+    # Return the SVG file path instead of content
+    return gr.HTML(f'<svg viewBox="0 0 {image.width} {image.height}">{svg_content}</svg>'), output_path
+    # return output_path,output_path
+
+def handle_color_mode(value):
+    # You can change this to display the selected value without any prefix
+    return value
+
+
+examples = [
+    "examples/11.jpg",
+    "examples/02.jpg",
+    "examples/03.jpg",
+]
+
+css = """
+#col-container {
+    margin: 0 auto;
+    max-width: 960px;
+}
+.generate-btn {
+    background: linear-gradient(90deg, #4B79A1 0%, #283E51 100%) !important;
+    border: none !important;
+    color: white !important;
+}
+.generate-btn:hover {
+    transform: translateY(-2px);
+    box-shadow: 0 5px 15px rgba(0,0,0,0.2);
+}
+"""
+
+# Define the Gradio interface
+with gr.Blocks(css=css) as app:
+    with gr.Column(elem_id="col-container"):
+        gr.HTML("""
+                <div style="text-align: center;">
+                    <h2>Image to Vector Converter ⚡</h2>
+                    <p>Converts raster images (JPG, PNG, WEBP) to vector graphics (SVG).</p>
+                </div>
+            """)
+        with gr.Row():
+            with gr.Column():
+                image_input = gr.Image(type="pil", label="Upload Image")
+                with gr.Accordion("Advanced Settings", open=False):
+                    with gr.Accordion("Clustering", open=False):
+                        colormode = gr.Radio([("COLOR","color"),("B/W", "binary")], value="color", label="Color Mode", show_label=False)
+                        filter_speckle = gr.Slider(0, 128, value=4, step=1, label="Filter Speckle", info="Cleaner")
+                        color_precision = gr.Slider(1, 8, value=6, step=1, label="Color Precision", info="More accurate")
+                        layer_difference = gr.Slider(0, 128, value=16, step=1, label="Gradient Step", info="Less layers")
+                        hierarchical = gr.Radio([("STACKED","stacked"), ("CUTOUT","cutout")], value="stacked", label="Hierarchical Mode",show_label=False)
+                    with gr.Accordion("Curve Fitting", open=False):
+                        mode = gr.Radio([("SPLINE","spline"),("POLYGON", "polygon"), ("PIXEL","none")], value="spline", label="Mode", show_label=False)
+                        corner_threshold = gr.Slider(0, 180, value=60, step=1, label="Corner Threshold", info="Smoother")
+                        length_threshold = gr.Slider(3.5, 10, value=4.0, step=0.1, label="Segment Length", info ="More coarse")
+                        splice_threshold = gr.Slider(0, 180, value=45, step=1, label="Splice Threshold", info="Less accurate")
+                        max_iterations = gr.Slider(1, 20, value=10, step=1, label="Max Iterations", visible=False)
+                        path_precision = gr.Slider(1, 10, value=3, step=1, label="Path Precision", visible=False)
+                        output_text = gr.Textbox(label="Selected Mode", visible=False)
+                with gr.Row():
+                    clear_button = gr.Button("Clear")
+                    convert_button = gr.Button("✨ Convert to SVG", variant='primary', elem_classes=["generate-btn"])
+
+            with gr.Column():
+                html = gr.HTML(label="SVG Output") # container=True, show_label=True
+                svg_output = gr.File(label="Download SVG")
+        
+        gr.Examples(
+            examples = examples,
+            fn = convert_to_vector,
+            inputs = [image_input],
+            outputs = [html,svg_output],
+            cache_examples=False,
+            run_on_click = True
+        )
+    # Store default values for restoration
+    colormode.change(handle_color_mode, inputs=colormode,outputs=output_text)
+    hierarchical.change(handle_color_mode, inputs=hierarchical,outputs=output_text)
+    mode.change(handle_color_mode, inputs=mode,outputs=output_text)
+    default_values = {
+        "color_precision": 6,
+        "layer_difference": 16
+    }
+
+    def clear_inputs():
+        return gr.Image(value=None), gr.Radio(value="color"), gr.Radio(value="stacked"), gr.Radio(value="spline"), gr.Slider(value=4), gr.Slider(value=6), gr.Slider(value=16), gr.Slider(value=60), gr.Slider(value=4.0), gr.Slider(value=10), gr.Slider(value=45), gr.Slider(value=3)
+
+
+    def update_interactivity_and_visibility(colormode, color_precision_value, layer_difference_value):
+        is_color_mode = colormode == "color"
+        return (
+            gr.update(interactive=is_color_mode),
+            gr.update(interactive=is_color_mode),
+            gr.update(visible=is_color_mode)  # Show/Hide Hierarchical Mode
+        )
+
+    colormode.change(
+        update_interactivity_and_visibility,
+        inputs=[colormode, color_precision, layer_difference],
+        outputs=[color_precision, layer_difference, hierarchical]
+    )
+
+    def update_interactivity_and_visibility_for_mode(mode):
+        is_spline_mode = mode == "spline"
+        return (
+            gr.update(interactive=is_spline_mode),
+            gr.update(interactive=is_spline_mode),
+            gr.update(interactive=is_spline_mode)
+        )
+
+    mode.change(
+        update_interactivity_and_visibility_for_mode,
+        inputs=[mode],
+        outputs=[corner_threshold,length_threshold,splice_threshold]
+    )
+
+    clear_button.click(
+        clear_inputs,
+        outputs=[
+            image_input,
+            colormode,
+            hierarchical,
+            mode,
+            filter_speckle,
+            color_precision,
+            layer_difference,
+            corner_threshold,
+            length_threshold,
+            max_iterations,
+            splice_threshold,
+            path_precision
+        ]
+    )
+
+    convert_button.click(
+        convert_to_vector,
+        inputs=[
+            image_input,
+            colormode,
+            hierarchical,
+            mode,
+            filter_speckle,
+            color_precision,
+            layer_difference,
+            corner_threshold,
+            length_threshold,
+            max_iterations,
+            splice_threshold,
+            path_precision
+        ],
+        outputs=[html,svg_output]
+    )
 
-    # Save the SVG string to a temporary file
-    temp_file = tempfile.NamedTemporaryFile(delete=False, suffix='.svg')
-    temp_file.write(svg_str.encode('utf-8'))
-    temp_file.close()
-
-    return gr.HTML(f'<svg viewBox="0 0 {image.width} {image.height}">{svg_str}</svg>'), temp_file.name
-
-# Gradio interface
-iface = gr.Blocks()
-
-with iface:
-    
-    gr.Interface(
-    fn=convert_image,
-    inputs=[
-        gr.Image(type="pil", label="Upload Image"),
-        gr.Radio(choices=["Color", "Binary"], value="Color", label="Color Mode"),
-        gr.Radio(choices=["Stacked", "Cutout"], value="Stacked", label="Hierarchical"),
-        gr.Radio(choices=["Spline", "Polygon", "None"], value="Spline", label="Mode"),
-        gr.Slider(minimum=1, maximum=10, value=4, step=1, label="Filter Speckle"),
-        gr.Slider(minimum=1, maximum=8, value=6, step=1, label="Color Precision"),
-        gr.Slider(minimum=1, maximum=32, value=16, step=1, label="Layer Difference"),
-        gr.Slider(minimum=10, maximum=90, value=60, step=1, label="Corner Threshold"),
-        gr.Slider(minimum=3.5, maximum=10, value=4.0, step=0.5, label="Length Threshold"),
-        gr.Slider(minimum=1, maximum=20, value=10, step=1, label="Max Iterations"),
-        gr.Slider(minimum=10, maximum=90, value=45, step=1, label="Splice Threshold"),
-        gr.Slider(minimum=1, maximum=10, value=8, step=1, label="Path Precision")
-    ],
-    outputs=[
-        gr.HTML(label="SVG Output"),
-        gr.File(label="Download SVG")
-    ],
-    title="Convert Image to SVG vectors",
-    description="Upload an image and customize the conversion parameters as needed.<br><h2>Support me USDT (TRC-20): TAe7hsSVWtMEYz3G5V1UiUdYPQVqm28bKx</h2>",
-)
-
-    
-iface.launch()
+# Launch the app
+app.launch(debug=True)