app.py

import io
import gradio as gr
from PIL import Image
import vtracer  # Make sure you have vtracer installed
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(),
        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)
    )

    # 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

# HTML code for the ad banners (combined)
ad_code = """
<div style="text-align: center;">
    <iframe src="https://www.fiverr.com/gig_widgets?id=U2FsdGVkX1+9vQaosK0mq7xGXzIb/5hdFYIQsmHlpeMwFm5gingveDZKXBz2oJwV7ZwvToxseOx/KzKtr77ryB3qTb83/+GvCyI8OKpZcSgM0sDHzEPlZnqNeu8Db4y/IXlAceA1UcYT5Z3cW5vBLrgJ/WOpyMWSiyfwwMmGngjltQBexcivW7ukRd+/0yos7GCbfGjGdnLPHm2LB/CB9w2mA1i8cVv9LU+UUdj/O5KLRXtnychl9wAMkPTpmwMiyuAfUZy0nbK/Xa5O2UecmCvn7wicTr0TCTpLmIxaEh3YftXOVr9e36OGVYTmy5nlsgujkqJPI7wL0dXfon0ru4kvoycC7UD6m/whMoxrWZOf386qV2eEeXzk3vKO/emXUUfSavtofzSBtjLcyAOVhnHJg27PvVPgvFTQdy0o3F1M0DaHYTVW3Ln45MPYvMSH&affiliate_id=36184&strip_google_tagmanager=true" loading="lazy" data-with-title="false" class="fiverr_nga_frame" frameborder="0" height="350" width="100%" referrerpolicy="no-referrer-when-downgrade" data-mode="random_gigs" onload=" var frame = this; var script = document.createElement('script'); script.addEventListener('load', function() { window.FW_SDK.register(frame); }); script.setAttribute('src', 'https://www.fiverr.com/gig_widgets/sdk'); document.body.appendChild(script); " ></iframe>

    <a href="https://beta.publishers.adsterra.com/referral/UNXJYTziBP" target="_blank" style="display: inline-block;">
        <img decoding="async" alt="banner" src="https://landings-cdn.adsterratech.com/referralBanners/gif/468x120_adsterra_reff.gif">
    </a>
    <a href="https://go.fiverr.com/visit/?bta=36184&brand=fiverrcpa&landingPage=https%253A%252F%252Fwww.fiverr.com%252Fcategories%252Fprogramming-tech%252Fai-coding%252Fai-applications%253Fsource%253Dcategory_tree" target="_blank" style="display: inline-block;">
        <img fetchpriority="high" decoding="async" width="468" height="120" src="https://ziverr.xyz/wp-content/uploads/2024/06/PASSIVE-1.gif" class="attachment-large size-large wp-image-1266" alt="">
    </a>
</div>
"""

# Gradio interface
with gr.Blocks() as iface:
    # Combine ads into one HTML block
    gr.HTML(ad_code) 

    # Your main interface components
    with gr.Row(): # Arrange the interface elements in a row
        with gr.Column():
            image_input = gr.Image(type="pil", label="Upload Image")
            color_mode = gr.Radio(choices=["Color", "Binary"], value="Color", label="Color Mode")
            hierarchical = gr.Radio(choices=["Stacked", "Cutout"], value="Stacked", label="Hierarchical")
            mode = gr.Radio(choices=["Spline", "Polygon", "None"], value="Spline", label="Mode")
            filter_speckle = gr.Slider(minimum=1, maximum=10, value=4, step=1, label="Filter Speckle")
            color_precision = gr.Slider(minimum=1, maximum=8, value=6, step=1, label="Color Precision")
            layer_difference = gr.Slider(minimum=1, maximum=32, value=16, step=1, label="Layer Difference")
            corner_threshold = gr.Slider(minimum=10, maximum=90, value=60, step=1, label="Corner Threshold")
            length_threshold = gr.Slider(minimum=3.5, maximum=10, value=4.0, step=0.5, label="Length Threshold")
            max_iterations = gr.Slider(minimum=1, maximum=20, value=10, step=1, label="Max Iterations")
            splice_threshold = gr.Slider(minimum=10, maximum=90, value=45, step=1, label="Splice Threshold")
            path_precision = gr.Slider(minimum=1, maximum=10, value=8, step=1, label="Path Precision")
        
        with gr.Column():
            svg_output = gr.HTML(label="SVG Output")
            svg_download = gr.File(label="Download SVG")

    # Link the inputs and outputs to the function
    convert_button = gr.Button("Convert Image")
    convert_button.click(
        fn=convert_image, 
        inputs=[
            image_input, color_mode, hierarchical, mode, filter_speckle,
            color_precision, layer_difference, corner_threshold,
            length_threshold, max_iterations, splice_threshold, path_precision
        ], 
        outputs=[svg_output, svg_download]
    )


iface.launch()