app.py

import gradio as gr
import numpy as np
import cv2
from PIL import Image, ImageDraw
import io
import base64
import math
import time
from typing import Tuple, List, Optional

class StringArtGenerator:
    def __init__(self, num_nails=400, canvas_size=800):
        self.num_nails = num_nails
        self.canvas_size = canvas_size
        self.nail_positions = []
        self.connections = []
        
    def generate_circle_nails(self):
        """Generate nail positions around a circle"""
        center = self.canvas_size // 2
        radius = center - 50
        angles = np.linspace(0, 2 * np.pi, self.num_nails, endpoint=False)
        
        self.nail_positions = []
        for angle in angles:
            x = int(center + radius * np.cos(angle))
            y = int(center + radius * np.sin(angle))
            self.nail_positions.append((x, y))
            
    def generate_heart_nails(self):
        """Generate nail positions around a heart shape"""
        center_x, center_y = self.canvas_size // 2, self.canvas_size // 2
        scale = 80
        
        self.nail_positions = []
        t_values = np.linspace(0, 2 * np.pi, self.num_nails)
        
        for t in t_values:
            # Heart parametric equations
            x = 16 * np.sin(t)**3
            y = 13 * np.cos(t) - 5 * np.cos(2*t) - 2 * np.cos(3*t) - np.cos(4*t)
            
            # Scale and center
            x = int(center_x + scale * x)
            y = int(center_y - scale * y)  # Negative to flip vertically
            
            self.nail_positions.append((x, y))
    
    def preprocess_image(self, image, threshold=128, blur_kernel=5):
        """Convert image to binary format suitable for string art"""
        # Convert PIL Image to numpy array if needed
        if isinstance(image, Image.Image):
            image = np.array(image)
            
        # Convert to grayscale
        if len(image.shape) == 3:
            gray = cv2.cvtColor(image, cv2.COLOR_RGB2GRAY)
        else:
            gray = image
            
        # Apply Gaussian blur
        if blur_kernel > 1:
            gray = cv2.GaussianBlur(gray, (blur_kernel, blur_kernel), 0)
            
        # Apply threshold
        _, binary = cv2.threshold(gray, threshold, 255, cv2.THRESH_BINARY_INV)
        
        # Resize to canvas size
        binary = cv2.resize(binary, (self.canvas_size, self.canvas_size))
        
        return binary
    
    def calculate_line_score(self, binary_image, nail1_idx, nail2_idx):
        """Calculate how much darkness a line covers"""
        x1, y1 = self.nail_positions[nail1_idx]
        x2, y2 = self.nail_positions[nail2_idx]
        
        # Get line pixels using Bresenham's algorithm
        line_pixels = self.get_line_pixels(x1, y1, x2, y2)
        
        # Calculate score based on darkness covered
        score = 0
        for x, y in line_pixels:
            if 0 <= x < self.canvas_size and 0 <= y < self.canvas_size:
                score += binary_image[y, x]
                
        return score / 255.0  # Normalize
    
    def get_line_pixels(self, x1, y1, x2, y2):
        """Get all pixels on a line using Bresenham's algorithm"""
        pixels = []
        
        dx = abs(x2 - x1)
        dy = abs(y2 - y1)
        sx = 1 if x1 < x2 else -1
        sy = 1 if y1 < y2 else -1
        err = dx - dy
        
        x, y = x1, y1
        
        while True:
            pixels.append((x, y))
            
            if x == x2 and y == y2:
                break
                
            e2 = 2 * err
            if e2 > -dy:
                err -= dy
                x += sx
            if e2 < dx:
                err += dx
                y += sy
                
        return pixels
    
    def generate_string_art(self, binary_image, max_lines=3000):
        """Generate string art using greedy algorithm"""
        self.connections = []
        used_image = np.zeros_like(binary_image, dtype=np.float32)
        
        # Start from a random nail
        current_nail = 0
        
        for line_num in range(max_lines):
            best_score = -1
            best_nail = -1
            
            # Find the best next nail
            for next_nail in range(self.num_nails):
                if next_nail == current_nail:
                    continue
                    
                # Calculate score for this line
                score = self.calculate_line_score(binary_image - used_image, current_nail, next_nail)
                
                if score > best_score:
                    best_score = score
                    best_nail = next_nail
            
            # If no good line found, break
            if best_score <= 0 or best_nail == -1:
                break
                
            # Add the line
            self.connections.append((current_nail, best_nail))
            
            # Update used image (darken the line area)
            line_pixels = self.get_line_pixels(
                self.nail_positions[current_nail][0], self.nail_positions[current_nail][1],
                self.nail_positions[best_nail][0], self.nail_positions[best_nail][1]
            )
            
            for x, y in line_pixels:
                if 0 <= x < self.canvas_size and 0 <= y < self.canvas_size:
                    used_image[y, x] = min(255, used_image[y, x] + 50)
            
            current_nail = best_nail
            
        return len(self.connections)
    
    def render_string_art(self, thread_color=(0, 0, 0), line_opacity=0.8):
        """Render the string art as an image"""
        # Create white canvas
        canvas = np.ones((self.canvas_size, self.canvas_size, 3), dtype=np.uint8) * 255
        
        # Convert thread color to RGB
        thread_rgb = thread_color
        
        # Draw lines
        for nail1_idx, nail2_idx in self.connections:
            x1, y1 = self.nail_positions[nail1_idx]
            x2, y2 = self.nail_positions[nail2_idx]
            
            # Create line with opacity
            overlay = canvas.copy()
            cv2.line(overlay, (x1, y1), (x2, y2), thread_rgb, 1)
            canvas = cv2.addWeighted(canvas, 1 - line_opacity, overlay, line_opacity, 0)
        
        # Draw nails
        for x, y in self.nail_positions:
            cv2.circle(canvas, (x, y), 2, (100, 100, 100), -1)
            
        return canvas
    
    def generate_instructions(self):
        """Generate step-by-step threading instructions"""
        instructions = []
        for i, (nail1, nail2) in enumerate(self.connections):
            instructions.append(f"Step {i+1}: Nail {nail1} → Nail {nail2}")
        return "\n".join(instructions)

def create_predefined_shape(shape_type, size=800):
    """Create predefined shapes"""
    canvas = np.zeros((size, size), dtype=np.uint8)
    center = size // 2
    
    if shape_type == "Circle":
        cv2.circle(canvas, (center, center), center - 100, 255, -1)
    elif shape_type == "Heart":
        # Create heart shape
        points = []
        scale = 100
        for t in np.linspace(0, 2 * np.pi, 1000):
            x = 16 * np.sin(t)**3
            y = 13 * np.cos(t) - 5 * np.cos(2*t) - 2 * np.cos(3*t) - np.cos(4*t)
            points.append([int(center + scale * x), int(center - scale * y)])
        
        points = np.array(points, dtype=np.int32)
        cv2.fillPoly(canvas, [points], 255)
    
    return Image.fromarray(canvas)

def hex_to_rgb(hex_color):
    """Convert hex color to RGB tuple"""
    hex_color = hex_color.lstrip('#')
    return tuple(int(hex_color[i:i+2], 16) for i in (0, 2, 4))

def generate_string_art_interface(
    input_image: Optional[Image.Image],
    shape_type: str,
    use_predefined: bool,
    num_nails: int,
    max_lines: int,
    threshold: int,
    blur_kernel: int,
    thread_color: str,
    line_opacity: float
):
    """Main function for Gradio interface"""
    
    try:
        # Determine input image
        if use_predefined:
            if shape_type in ["Circle", "Heart"]:
                working_image = create_predefined_shape(shape_type)
            else:
                return None, None, "Please select a valid predefined shape.", ""
        else:
            if input_image is None:
                return None, None, "Please upload an image or use a predefined shape.", ""
            working_image = input_image
        
        # Initialize generator
        generator = StringArtGenerator(num_nails=num_nails, canvas_size=800)
        
        # Generate nails based on shape
        if use_predefined and shape_type == "Heart":
            generator.generate_heart_nails()
        else:
            generator.generate_circle_nails()
        
        # Preprocess image
        processed_image = generator.preprocess_image(working_image, threshold, blur_kernel)
        processed_pil = Image.fromarray(processed_image)
        
        # Generate string art
        start_time = time.time()
        total_lines = generator.generate_string_art(processed_image, max_lines=max_lines)
        end_time = time.time()
        
        # Render result
        thread_rgb = hex_to_rgb(thread_color)
        result_image = generator.render_string_art(thread_rgb, line_opacity)
        result_pil = Image.fromarray(result_image)
        
        # Generate instructions
        instructions = generator.generate_instructions()
        
        # Create info text
        info_text = f"""
🎯 **Generation Complete!**
- **Total Lines**: {total_lines}
- **Processing Time**: {end_time - start_time:.2f} seconds
- **Nails Used**: {num_nails}
- **Thread Color**: {thread_color}

📋 **Instructions Preview** (showing first 10 steps):
{chr(10).join(instructions.split(chr(10))[:10])}
...

💡 **Tips for Physical Crafting**:
1. Print the full instructions from the downloadable text
2. Mark nail positions evenly around your board perimeter
3. Follow the step-by-step nail connections
4. Maintain consistent string tension
        """
        
        return result_pil, processed_pil, info_text, instructions
        
    except Exception as e:
        return None, None, f"Error: {str(e)}", ""

# Create Gradio interface
def create_gradio_app():
    with gr.Blocks(
        title="🎨 String Art Generator",
        theme=gr.themes.Soft(),
        css="""
        .gradio-container {
            max-width: 1200px !important;
        }
        .main-header {
            text-align: center;
            margin-bottom: 2rem;
        }
        .info-box {
            background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
            color: white;
            padding: 1rem;
            border-radius: 10px;
            margin: 1rem 0;
        }
        """
    ) as app:
        
        # Header
        gr.HTML("""
        <div class="main-header">
            <h1>🎨 String Art Generator</h1>
            <p style="font-size: 1.2em; color: #666;">Transform images into beautiful string art patterns for physical crafting</p>
        </div>
        """)
        
        with gr.Row():
            # Left Column - Controls
            with gr.Column(scale=1):
                gr.HTML("<h3>🖼️ Image Input</h3>")
                
                use_predefined = gr.Checkbox(
                    label="Use Predefined Shape",
                    value=True
                )
                gr.HTML("<small>Check to use predefined shapes, uncheck to upload your own image</small>")
                
                with gr.Group(visible=True) as predefined_group:
                    shape_type = gr.Radio(
                        choices=["Circle", "Heart"],
                        value="Circle",
                        label="Select Shape"
                    )
                
                with gr.Group(visible=False) as upload_group:
                    input_image = gr.Image(
                        label="Upload Image",
                        type="pil"
                    )
                    gr.HTML("<small>Upload PNG, JPG, or other image formats</small>")
                
                gr.HTML("<h3>⚙️ Configuration</h3>")
                
                num_nails = gr.Slider(
                    minimum=300,
                    maximum=1000,
                    value=400,
                    step=50,
                    label="Number of Nails"
                )
                gr.HTML("<small>More nails = more detail but slower processing</small>")
                
                max_lines = gr.Slider(
                    minimum=1000,
                    maximum=5000,
                    value=3000,
                    step=250,
                    label="Maximum Lines"
                )
                gr.HTML("<small>More lines = denser result</small>")
                
                gr.HTML("<h3>🎨 Appearance</h3>")
                
                thread_color = gr.ColorPicker(
                    value="#000000",
                    label="Thread Color"
                )
                
                line_opacity = gr.Slider(
                    minimum=0.1,
                    maximum=1.0,
                    value=0.8,
                    step=0.1,
                    label="Line Opacity"
                )
                
                gr.HTML("<h3>🔧 Processing</h3>")
                
                threshold = gr.Slider(
                    minimum=50,
                    maximum=200,
                    value=128,
                    step=10,
                    label="Threshold"
                )
                gr.HTML("<small>Lower = more detail, Higher = simpler shapes</small>")
                
                blur_kernel = gr.Slider(
                    minimum=1,
                    maximum=15,
                    value=5,
                    step=2,
                    label="Blur Amount"
                )
                gr.HTML("<small>Smooths the image before processing</small>")
                
                generate_btn = gr.Button(
                    "🚀 Generate String Art",
                    variant="primary",
                    size="lg"
                )
            
            # Right Column - Results
            with gr.Column(scale=2):
                gr.HTML("<h3>📊 Results</h3>")
                
                with gr.Row():
                    with gr.Column():
                        processed_output = gr.Image(
                            label="Processed Image",
                            type="pil"
                        )
                    
                    with gr.Column():
                        result_output = gr.Image(
                            label="String Art Result",
                            type="pil"
                        )
                
                info_output = gr.Markdown(
                    label="Generation Info",
                    value="Click 'Generate String Art' to start!"
                )
                
                gr.HTML("<h3>📥 Downloads</h3>")
                
                with gr.Row():
                    instructions_text = gr.Textbox(
                        label="Threading Instructions",
                        lines=10,
                        max_lines=20,
                        placeholder="Instructions will appear here after generation..."
                    )
                    gr.HTML("<small>Copy these step-by-step instructions for physical crafting</small>")
        
        # Toggle visibility based on predefined checkbox
        def toggle_input_method(use_pred):
            return {
                predefined_group: gr.update(visible=use_pred),
                upload_group: gr.update(visible=not use_pred)
            }
        
        use_predefined.change(
            toggle_input_method,
            inputs=[use_predefined],
            outputs=[predefined_group, upload_group]
        )
        
        # Generate button click handler
        def generate_handler(image, shape, use_pred, nails, lines, thresh, blur, color, opacity):
            result_img, processed_img, info, instructions = generate_string_art_interface(
                image, shape, use_pred, nails, lines, thresh, blur, color, opacity
            )
            
            return result_img, processed_img, info, instructions
        
        generate_btn.click(
            generate_handler,
            inputs=[
                input_image, shape_type, use_predefined, num_nails, max_lines,
                threshold, blur_kernel, thread_color, line_opacity
            ],
            outputs=[
                result_output, processed_output, info_output, instructions_text
            ]
        )
        
        # Add examples
        gr.HTML("<h3>💡 Quick Start Examples</h3>")
        
        gr.Examples(
            examples=[
                [None, "Circle", True, 400, 3000, 128, 5, "#000000", 0.8],
                [None, "Heart", True, 500, 3500, 120, 3, "#FF0000", 0.7],
                [None, "Circle", True, 600, 4000, 140, 7, "#0000FF", 0.9],
            ],
            inputs=[
                input_image, shape_type, use_predefined, num_nails, max_lines,
                threshold, blur_kernel, thread_color, line_opacity
            ],
            outputs=[
                result_output, processed_output, info_output, instructions_text
            ],
            fn=generate_handler,
            cache_examples=False
        )
        
        # Footer
        gr.HTML("""
        <div style="text-align: center; margin-top: 2rem; padding: 1rem; background: #f0f0f0; border-radius: 10px;">
            <h4>🔨 Physical Crafting Tips</h4>
            <p>
                <strong>Materials:</strong> Wooden board, small nails, string/thread, hammer<br>
                <strong>Process:</strong> Mark nail positions → Hammer nails → Follow step-by-step instructions<br>
                <strong>Pro Tip:</strong> Keep consistent string tension for best results!
            </p>
        </div>
        """)
    
    return app

# Launch the app
if __name__ == "__main__":
    app = create_gradio_app()
    app.launch(
        server_name="0.0.0.0",
        server_port=7860,
        share=True,
        show_error=True
    )