Spaces:
Running
Running
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'<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/01.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="lazy" | |
) | |
# 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] | |
) | |
# Launch the app | |
app.launch(debug=True) | |