import gradio as gr import vtracer import os import pandas as pd from io import BytesIO from PIL import Image import cairosvg import cv2 import numpy as np import tempfile def clean_svg(svg_string): """Optional function to clean SVG if needed""" return svg_string def rasterize_svg(svg_string, width, height, dpi=128, scale=1): """Convert SVG string to PNG image while maintaining aspect ratio""" try: svg_raster_bytes = cairosvg.svg2png( bytestring=svg_string, background_color='white', output_width=width, output_height=height, dpi=dpi, scale=scale) svg_raster = Image.open(BytesIO(svg_raster_bytes)) except: try: svg = clean_svg(svg_string) svg_raster_bytes = cairosvg.svg2png( bytestring=svg, background_color='white', output_width=width, output_height=height, dpi=dpi, scale=scale) svg_raster = Image.open(BytesIO(svg_raster_bytes)) except: svg_raster = Image.new('RGB', (width, height), color='white') return svg_raster def create_video_from_frames(frame_files, output_path, duration_seconds, width, height): """Create video from sequence of frames with specified duration""" # Calculate frame rate based on desired duration num_frames = len(frame_files) fps = max(1, num_frames / duration_seconds) # Ensure at least 1 fps # Initialize video writer fourcc = cv2.VideoWriter_fourcc(*'mp4v') video = cv2.VideoWriter(output_path, fourcc, fps, (width, height)) # Read each frame and write to video for frame_file in frame_files: # Read image with PIL and convert to OpenCV format pil_img = Image.open(frame_file) cv_img = cv2.cvtColor(np.array(pil_img), cv2.COLOR_RGB2BGR) video.write(cv_img) # Add last frame to fill remaining time if needed if num_frames > 0: remaining_frames = max(0, int(fps * duration_seconds) - num_frames) for _ in range(remaining_frames): video.write(cv_img) video.release() def process_svg_to_video(input_svg_path, original_width, original_height, video_duration_seconds=10, chunk_size=30): """Process SVG file and create a video with specified duration using exact row slicing""" # Read SVG file as a table to maintain exact row slicing logic df = pd.read_table(input_svg_path, header=None) df_head = df.head(3) df_tail = df.tail(1) df_middle = df.iloc[3:-1, :] # Use the original image dimensions width, height = original_width, original_height # If chunk_size is 0, use automatic calculation (total_rows // 30) total_rows = len(df_middle) if chunk_size == 0: chunk_size = max(1, total_rows // 30) else: chunk_size = max(1, min(chunk_size, total_rows)) # Ensure it's within valid range # Create a temporary directory for images temp_dir = tempfile.mkdtemp() frame_files = [] # Process each chunk and save as image for i in range(0, total_rows, chunk_size): current_chunk = df_middle.iloc[:i+chunk_size] # Combine with head and tail combined_df = pd.concat([df_head, current_chunk, df_tail]) svg_content = "\n".join(combined_df[0].astype(str).values.tolist()) # Convert to image using original dimensions img = rasterize_svg(svg_content, width, height) img_filename = os.path.join(temp_dir, f"frame_{i:04d}.png") img.save(img_filename) frame_files.append(img_filename) # Create output video path output_video_path = os.path.join(temp_dir, "output_video.mp4") # Create video from frames create_video_from_frames(frame_files, output_video_path, video_duration_seconds, width, height) # Clean up temporary files (except the video) for file in frame_files: os.remove(file) return output_video_path, temp_dir def convert_to_vector_and_video( image, video_duration=10, chunk_size=30, 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 ): # Create temporary directory temp_dir = tempfile.mkdtemp() input_path = os.path.join(temp_dir, "temp_input.jpg") output_svg_path = os.path.join(temp_dir, "svg_output.svg") # Save the input image to a temporary file image.save(input_path) # Get original dimensions from the uploaded image original_width, original_height = image.size # Convert the image to SVG using VTracer vtracer.convert_image_to_svg_py( input_path, output_svg_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) ) # Process SVG to create video using the original dimensions video_path, video_temp_dir = process_svg_to_video( output_svg_path, original_width, original_height, video_duration_seconds=video_duration, chunk_size=chunk_size ) # Read the SVG output with open(output_svg_path, "r") as f: svg_content = f.read() # Return the SVG preview, SVG file, and video file return ( gr.HTML(f'{svg_content}'), output_svg_path, video_path ) def handle_color_mode(value): return value def clear_inputs(): return ( gr.Image(value=None), gr.Slider(value=10), gr.Slider(value=30), 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) ) 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) ) 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); } """ examples = [ "examples/01.jpg", "examples/02.jpg", "examples/03.jpg", ] # Define the Gradio interface with gr.Blocks(css=css) as app: with gr.Column(elem_id="col-container"): gr.HTML("""

Image to Vector Video Converter ⚡

Converts raster images to vector graphics and creates progressive rendering videos.

""") with gr.Row(): with gr.Column(): image_input = gr.Image(type="pil", label="Upload Image") video_duration = gr.Slider(1, 60, value=10, step=1, label="Video Duration (seconds)") chunk_size = gr.Slider(0, 1000, value=300, step=1, label="Chunk Size (0=auto)", info="Number of SVG path elements to add per frame (0 for automatic calculation)") 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 Video", variant='primary', elem_classes=["generate-btn"]) with gr.Column(): html = gr.HTML(label="SVG Preview") svg_output = gr.File(label="Download SVG") video_output = gr.Video(label="Rendering Video") gr.Examples( examples=examples, fn=convert_to_vector_and_video, inputs=[image_input], outputs=[html, svg_output, video_output], cache_examples=False, run_on_click=True ) # Event handlers 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) colormode.change( update_interactivity_and_visibility, inputs=[colormode, color_precision, layer_difference], outputs=[color_precision, layer_difference, hierarchical] ) 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, video_duration, chunk_size, 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_and_video, inputs=[ image_input, video_duration, chunk_size, colormode, hierarchical, mode, filter_speckle, color_precision, layer_difference, corner_threshold, length_threshold, max_iterations, splice_threshold, path_precision ], outputs=[html, svg_output, video_output] ) # Launch the app if __name__ == "__main__": app.launch(share=True)