Spaces:
Running
Running
| import gradio as gr | |
| import cv2 | |
| import numpy as np | |
| from PIL import Image | |
| import io | |
| import os | |
| import tempfile | |
| def image_to_line_art_svg(image, line_thickness=2, blur_value=7, threshold_value=7): | |
| """ | |
| Convert an image to line art and return as SVG | |
| """ | |
| try: | |
| # Ensure blur_value and threshold_value are odd | |
| blur_value = blur_value if blur_value % 2 == 1 else blur_value + 1 | |
| threshold_value = threshold_value if threshold_value % 2 == 1 else threshold_value + 1 | |
| # Convert PIL image to numpy array | |
| if isinstance(image, Image.Image): | |
| image_array = np.array(image.convert('RGB')) | |
| else: | |
| image_array = image | |
| # Resize image if too large (to prevent memory issues) | |
| height, width = image_array.shape[:2] | |
| max_dimension = 1024 | |
| if max(height, width) > max_dimension: | |
| scale = max_dimension / max(height, width) | |
| new_width = int(width * scale) | |
| new_height = int(height * scale) | |
| image_array = cv2.resize(image_array, (new_width, new_height)) | |
| height, width = new_height, new_width | |
| # Convert to grayscale | |
| gray = cv2.cvtColor(image_array, cv2.COLOR_RGB2GRAY) | |
| # Apply median filter to reduce noise | |
| gray_blur = cv2.medianBlur(gray, blur_value) | |
| # Create an edge mask using adaptive threshold | |
| edges = cv2.adaptiveThreshold(gray_blur, 255, cv2.ADAPTIVE_THRESH_MEAN_C, | |
| cv2.THRESH_BINARY, threshold_value, blur_value) | |
| # Convert edges back to 3-channel for display | |
| edges_colored = cv2.cvtColor(edges, cv2.COLOR_GRAY2RGB) | |
| # Invert edges so lines are black on white background | |
| edges = cv2.bitwise_not(edges) | |
| # Find contours | |
| contours, _ = cv2.findContours(edges, cv2.RETR_EXTERNAL, cv2.CHAIN_APPROX_SIMPLE) | |
| # Create SVG content | |
| svg_content = f'''<?xml version="1.0" encoding="UTF-8"?> | |
| <svg width="{width}" height="{height}" viewBox="0 0 {width} {height}" xmlns="http://www.w3.org/2000/svg"> | |
| <style> | |
| .line-art {{ | |
| fill: none; | |
| stroke: #000000; | |
| stroke-width: {line_thickness}; | |
| stroke-linecap: round; | |
| stroke-linejoin: round; | |
| }} | |
| </style> | |
| <rect width="100%" height="100%" fill="white"/>''' | |
| # Add paths for each contour | |
| for contour in contours: | |
| if len(contour) > 5: # Only include contours with sufficient points | |
| # Simplify contour to reduce SVG size | |
| epsilon = 0.01 * cv2.arcLength(contour, True) | |
| simplified_contour = cv2.approxPolyDP(contour, epsilon, True) | |
| if len(simplified_contour) > 2: | |
| path_data = f"M {simplified_contour[0][0][0]} {simplified_contour[0][0][1]}" | |
| for point in simplified_contour[1:]: | |
| path_data += f" L {point[0][0]} {point[0][1]}" | |
| # Close the path if it forms a closed shape | |
| if len(simplified_contour) > 3: | |
| path_data += " Z" | |
| svg_content += f'\n<path d="{path_data}" class="line-art"/>' | |
| svg_content += '\n</svg>' | |
| return svg_content, edges_colored | |
| except Exception as e: | |
| # Return error SVG | |
| error_svg = f'''<?xml version="1.0" encoding="UTF-8"?> | |
| <svg width="400" height="200" xmlns="http://www.w3.org/2000/svg"> | |
| <rect width="100%" height="100%" fill="white"/> | |
| <text x="200" y="100" text-anchor="middle" fill="red" font-family="Arial" font-size="16">Error: {str(e)}</text> | |
| </svg>''' | |
| error_image = np.ones((200, 400, 3), dtype=np.uint8) * 255 | |
| return error_svg, error_image | |
| def process_image(image, line_thickness, blur_value, threshold_value): | |
| """ | |
| Process the uploaded image and return both SVG content and preview image | |
| """ | |
| if image is None: | |
| return None, None, "❌ Please upload an image first." | |
| try: | |
| svg_content, preview_image = image_to_line_art_svg( | |
| image, line_thickness, blur_value, threshold_value | |
| ) | |
| # Create temporary file for SVG download | |
| temp_dir = tempfile.gettempdir() | |
| svg_path = os.path.join(temp_dir, "line_art.svg") | |
| with open(svg_path, "w", encoding="utf-8") as f: | |
| f.write(svg_content) | |
| return preview_image, svg_path, "✅ Conversion completed successfully!" | |
| except Exception as e: | |
| error_image = np.ones((200, 400, 3), dtype=np.uint8) * 255 | |
| return error_image, None, f"❌ Error processing image: {str(e)}" | |
| # Create Gradio interface | |
| with gr.Blocks( | |
| title="Image to Line Art SVG Converter", | |
| theme=gr.themes.Soft(), | |
| css=""" | |
| .gradio-container { | |
| max-width: 1200px !important; | |
| } | |
| """ | |
| ) as demo: | |
| gr.HTML(""" | |
| <div style="text-align: center; padding: 20px;"> | |
| <h1>🎨 Image to Line Art SVG Converter</h1> | |
| <p style="font-size: 18px; color: #666;"> | |
| Convert your images into beautiful line art and download as scalable SVG files! | |
| </p> | |
| </div> | |
| """) | |
| with gr.Row(): | |
| with gr.Column(scale=1): | |
| gr.Markdown("### 📤 Upload & Settings") | |
| image_input = gr.Image( | |
| label="Upload Image", | |
| type="pil", | |
| sources=["upload"], | |
| height=300 | |
| ) | |
| with gr.Group(): | |
| gr.Markdown("**Adjustment Controls**") | |
| line_thickness = gr.Slider( | |
| minimum=0.5, | |
| maximum=5, | |
| value=2, | |
| step=0.1, | |
| label="📏 Line Thickness", | |
| info="Controls the width of the drawn lines" | |
| ) | |
| blur_value = gr.Slider( | |
| minimum=3, | |
| maximum=15, | |
| value=7, | |
| step=2, | |
| label="🌀 Blur Amount", | |
| info="Higher values = smoother lines (must be odd)" | |
| ) | |
| threshold_value = gr.Slider( | |
| minimum=3, | |
| maximum=15, | |
| value=7, | |
| step=2, | |
| label="🎯 Edge Sensitivity", | |
| info="Lower values = more details (must be odd)" | |
| ) | |
| convert_btn = gr.Button( | |
| "🚀 Convert to Line Art", | |
| variant="primary", | |
| size="lg" | |
| ) | |
| with gr.Column(scale=1): | |
| gr.Markdown("### 👁️ Preview & Download") | |
| preview_output = gr.Image( | |
| label="Line Art Preview", | |
| height=300 | |
| ) | |
| status_output = gr.Textbox( | |
| label="Status", | |
| interactive=False, | |
| show_label=False | |
| ) | |
| download_output = gr.File( | |
| label="📥 Download SVG File", | |
| file_count="single" | |
| ) | |
| # Add usage instructions | |
| with gr.Row(): | |
| gr.Markdown(""" | |
| ### 📝 How to Use: | |
| 1. **Upload** an image using the upload area | |
| 2. **Adjust** the settings to fine-tune the line art (optional) | |
| 3. **Click** "Convert to Line Art" to process | |
| 4. **Download** your SVG file to use anywhere! | |
| ### 💡 Tips: | |
| - **Line Thickness**: Start with 2, increase for bolder lines | |
| - **Blur Amount**: Higher values create cleaner, simpler lines | |
| - **Edge Sensitivity**: Lower values capture more details | |
| - SVG files are scalable and perfect for print or web use! | |
| """) | |
| # Event handlers | |
| convert_btn.click( | |
| fn=process_image, | |
| inputs=[image_input, line_thickness, blur_value, threshold_value], | |
| outputs=[preview_output, download_output, status_output], | |
| show_progress=True | |
| ) | |
| # Auto-process when image is uploaded (optional) | |
| image_input.change( | |
| fn=lambda img: process_image(img, 2, 7, 7) if img is not None else (None, None, ""), | |
| inputs=[image_input], | |
| outputs=[preview_output, download_output, status_output], | |
| show_progress=False | |
| ) | |
| # Launch settings | |
| if __name__ == "__main__": | |
| demo.launch( | |
| server_name="0.0.0.0", | |
| server_port=7860, | |
| share=False | |
| ) |