import gradio as gr
import vtracer
import os
def convert_to_vector(image, colormode, hierarchical, mode, filter_speckle, color_precision, layer_difference, corner_threshold, length_threshold, max_iterations, splice_threshold, path_precision):
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),
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)
)
# 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''), 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
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("""
Image to Vector Converter ⚡
Converts raster images (JPG, PNG, WEBP) to vector graphics (SVG).
""")
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")
layer_difference = gr.Slider(0, 128, value=16, step=1, label="Layer Difference")
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")
length_threshold = gr.Slider(3.5, 10, value=4.0, step=0.1, label="Length Threshold")
splice_threshold = gr.Slider(0, 180, value=45, step=1, label="Splice Threshold")
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")
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")
# 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 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]
)
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)