Update app.py

app.py

@@ -1,28 +1,30 @@
 import gradio as gr
 import vtracer
 import os
+from PIL import Image
 
 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, 
+    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
+    if image is None:
+        return gr.HTML("Please upload an image."), None
+
     image.save(input_path)
 
-    # Convert the image to SVG using VTracer
     vtracer.convert_image_to_svg_py(
         input_path,
         output_path,
@@ -38,19 +40,17 @@ def convert_to_vector(
         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
+    try:
+        with open(output_path, "r") as f:
+            svg_content = f.read()
+        return gr.HTML(f'<svg viewBox="0 0 {image.width} {image.height}">{svg_content}</svg>'), output_path
+    except FileNotFoundError:
+        return gr.HTML("SVG conversion failed."), None
 
 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",
@@ -61,27 +61,50 @@ css = """
 #col-container {
     margin: 0 auto;
     max-width: 960px;
+    padding: 20px;
 }
 .generate-btn {
     background: linear-gradient(90deg, #4B79A1 0%, #283E51 100%) !important;
     border: none !important;
     color: white !important;
+    padding: 10px 20px !important;
+    font-size: 16px !important;
+    border-radius: 5px !important;
+    cursor: pointer !important;
+    transition: transform 0.2s, box-shadow 0.2s !important;
 }
 .generate-btn:hover {
-    transform: translateY(-2px);
-    box-shadow: 0 5px 15px rgba(0,0,0,0.2);
+    transform: translateY(-2px) !important;
+    box-shadow: 0 5px 15px rgba(0,0,0,0.2) !important;
+}
+.gr-accordion {
+    border: 1px solid #ddd !important;
+    border-radius: 5px !important;
+    margin-bottom: 10px !important;
+}
+.gr-accordion-title {
+    background-color: #f9f9f9 !important;
+    padding: 10px !important;
+    cursor: pointer !important;
+}
+.gr-accordion-content {
+    padding: 15px !important;
+}
+.gr-file {
+    border: 1px dashed #aaa !important;
+    padding: 10px !important;
+    border-radius: 5px !important;
 }
 """
 
-# 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>
-            """)
+            <div style="text-align: center; margin-bottom: 20px;">
+                <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")
@@ -105,7 +128,7 @@ with gr.Blocks(css=css) as app:
                     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
+                html = gr.HTML(label="SVG Output")
                 svg_output = gr.File(label="Download SVG")
         
         gr.Examples(
@@ -116,25 +139,20 @@ with gr.Blocks(css=css) as app:
             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
+            gr.update(visible=is_color_mode)
         )
 
     colormode.change(
@@ -154,45 +172,4 @@ with gr.Blocks(css=css) as app:
     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]
-    )
-
-# Launch the app
-app.launch(debug=True)
+        outputs=[corner_threshold,length_threshold,splice