Update app.py

app.py

@@ -1,246 +1,257 @@
-import gradio as gr
 import os
-import threading
-import subprocess
-import time
 import re
 import xml.etree.ElementTree as ET
-from huggingface_hub import hf_hub_download
-from handwriting_api import InputData, validate_input
-from hand import Hand
+import gradio as gr
 
-# Create img directory if it doesn't exist
-os.makedirs("img", exist_ok=True)
+# If you use these in your env, keep them. Otherwise they're optional.
+# from huggingface_hub import hf_hub_download
+# from handwriting_api import InputData, validate_input
 
-# Initialize the handwriting model
+from hand import Hand  # your handwriting model wrapper
+
+# --- Setup --------------------------------------------------------------------
+os.makedirs("img", exist_ok=True)
 hand = Hand()
 
-def insert_font_underscores(svg_content, original_lines, underscore_positions, color, stroke_width):
+# --- SVG helpers ---------------------------------------------------------------
+
+def _extract_paths(svg_root_or_group):
+    """Return a list of <path> elements (namespace-agnostic)."""
+    return [el for el in svg_root_or_group.iter() if el.tag.endswith('path')]
+
+def _bbox_of_paths(paths):
     """
-    Insert font-based underscores into the SVG at the tracked positions
+    Conservative bbox by scanning numeric coords inside each path 'd'.
+    Not mathematically perfect for curve extrema, but close enough for layout.
     """
-    try:
-        # Parse the SVG
-        root = ET.fromstring(svg_content)
-        
-        # Get SVG dimensions
-        viewbox = root.get('viewBox', '0 0 600 200')
-        vb_parts = viewbox.split()
-        svg_width = float(vb_parts[2]) if len(vb_parts) > 2 else 600
-        svg_height = float(vb_parts[3]) if len(vb_parts) > 3 else 200
-        
-        # Better character width estimation based on actual text length
-        max_chars = max(len(line) for line in original_lines) if original_lines else 20
-        char_width = (svg_width - 40) / max_chars if max_chars > 0 else 30  # Leave 20px margin on each side
-        
-        # Process each line
-        for line_idx, (original_line, underscore_pos_list) in enumerate(zip(original_lines, underscore_positions)):
-            if not underscore_pos_list:
-                continue
-                
-            # Calculate Y position for this line - better alignment with handwriting
-            # Position underscores slightly below the baseline of the text
-            line_y = 80 + (line_idx * 80)  # Start at 80px, 80px between lines
-            
-            # Insert underscores at tracked positions
-            for underscore_pos in underscore_pos_list:
-                # Calculate X position with better spacing
-                x_pos = 20 + (underscore_pos * char_width)
-                
-                # Create a path element to draw the underscore as a line
-                # This is more reliable than text elements
-                underscore_width = char_width * 0.8  # Make underscore slightly shorter than character width
-                underscore_height = 2  # Thin line
-                
-                # Create path data for a horizontal line (underscore)
-                path_data = f"M{x_pos},{line_y} L{x_pos + underscore_width},{line_y}"
-                
-                path_elem = ET.Element('path')
-                path_elem.set('d', path_data)
-                path_elem.set('stroke', color)
-                path_elem.set('stroke-width', str(max(1, stroke_width)))
-                path_elem.set('fill', 'none')
-                path_elem.set('stroke-linecap', 'round')
-                
-                # Add to the SVG
-                root.append(path_elem)
-        
-        # Convert back to string
-        return ET.tostring(root, encoding='unicode')
-        
-    except Exception as e:
-        print(f"Error inserting font underscores: {str(e)}")
-        return svg_content
+    xs, ys = [], []
+    num_re = re.compile(r'[-+]?\d*\.?\d+(?:[eE][-+]?\d+)?')
+    for p in paths:
+        d = p.get('d', '')
+        nums = list(map(float, num_re.findall(d)))
+        for i in range(0, len(nums) - 1, 2):
+            xs.append(nums[i])
+            ys.append(nums[i + 1])
+    if not xs or not ys:
+        return (0.0, 0.0, 0.0, 0.0)
+    return (min(xs), min(ys), max(xs), max(ys))
+
+def _translate_group(elem, dx, dy):
+    prev = elem.get('transform', '')
+    t = f"translate({dx},{dy})"
+    elem.set('transform', (prev + " " + t).strip())
+
+# --- Segment compositor (the key fix) -----------------------------------------
+
+def _render_part_group(text_part, style, bias, color, stroke_width):
+    """
+    Render a single text 'part' (no underscores) using the Hand model to a temp SVG,
+    pull out its paths, wrap them in a <g>, and return (group, bbox).
+    """
+    # Avoid empty part causing errors: render a single space
+    lines = [text_part if text_part else " "]
+    hand.write(
+        filename='img/part.tmp.svg',
+        lines=lines,
+        biases=[bias],
+        styles=[style],
+        stroke_colors=[color],
+        stroke_widths=[stroke_width]
+    )
+    svg = ET.parse('img/part.tmp.svg').getroot()
+    g = ET.Element('g')
+    for p in _extract_paths(svg):
+        g.append(p)
+    bbox = _bbox_of_paths(_extract_paths(g))
+    return g, bbox
+
+def render_line_with_underscores(
+    line,
+    style,
+    bias,
+    color,
+    stroke_width,
+    line_y,
+    x_start=40,
+    gap_left=8,
+    gap_right=8,
+    underscore_len=22
+):
+    """
+    Compose a line that may include underscores by rendering surrounding segments,
+    measuring their true widths, and drawing the underscore at the baseline.
+    Returns (list_of_elements, rightmost_x).
+    """
+    parts = line.split('_')
+
+    # Render every part and measure bboxes
+    part_groups, part_bboxes = [], []
+    for part in parts:
+        g, bbox = _render_part_group(part, style, bias, color, stroke_width)
+        part_groups.append(g)
+        part_bboxes.append(bbox)
+
+    # Estimate line metrics from first non-empty part (fallbacks if needed)
+    line_height = 40.0
+    for bbox in part_bboxes:
+        minx, miny, maxx, maxy = bbox
+        if maxy - miny > 0.0:
+            line_height = max(20.0, maxy - miny)
+            break
+    base_y = line_y + 0.8 * line_height
+
+    # Compose into positioned elements
+    composed = []
+    cursor_x = x_start
+
+    for i, (g, bbox) in enumerate(zip(part_groups, part_bboxes)):
+        minx, _, maxx, _ = bbox
+        width = max(0.0, maxx - minx)
+
+        # Place this segment at current cursor_x
+        _translate_group(g, dx=(cursor_x - minx), dy=line_y)
+        composed.append(g)
+        cursor_x += width
+
+        # If there is an underscore after this part, draw it now
+        if i < len(part_groups) - 1:
+            x0 = cursor_x + gap_left
+            x1 = x0 + underscore_len
+            underscore = ET.Element('path')
+            underscore.set('d', f"M{x0},{base_y} L{x1},{base_y}")
+            underscore.set('stroke', color)
+            underscore.set('stroke-width', str(max(1, stroke_width)))
+            underscore.set('fill', 'none')
+            underscore.set('stroke-linecap', 'round')
+            composed.append(underscore)
+            cursor_x = x1 + gap_right  # advance cursor
+
+    return composed, cursor_x
+
+# --- Handwriting generation (multi-line + composition) ------------------------
 
-# Create a function to generate handwriting
 def generate_handwriting(
-    text, 
-    style, 
-    bias=0.75, 
+    text,
+    style,
+    bias=0.75,
     color="#000000",
     stroke_width=2,
-    multiline=True,
-    transparent_background=True
+    multiline=True
 ):
-    """Generate handwritten text using the model"""
+    """
+    Generate a composed SVG that places underscores geometrically between segments.
+    """
     try:
-        # Process the text
-        if multiline:
-            lines = text.split('\n')
-        else:
-            lines = [text]
-            
-        # Create arrays for parameters
-        stroke_colors = [color] * len(lines)
-        stroke_widths = [stroke_width] * len(lines)
-        biases = [bias] * len(lines)
-        styles = [style] * len(lines)
-        
-        # Process each line to replace unsupported characters with placeholders
-        sanitized_lines = []
-        underscore_positions = []  # Track where underscores were replaced
-        
-        for line_num, line in enumerate(lines):
-            if len(line) > 75:
-                return f"Error: Line {line_num+1} is too long (max 75 characters)"
-            
-            # Replace slashes with dashes and underscores with a placeholder
-            sanitized_line = line.replace('/', '-').replace('\\', '-')
-            
-            # Track underscore positions for later replacement
-            line_underscores = []
-            for i, char in enumerate(sanitized_line):
-                if char == '_':
-                    line_underscores.append(i)
-            
-            # Replace underscores with a space (will be replaced with font underscore later)
-            sanitized_line = sanitized_line.replace('_', ' ')
-            sanitized_lines.append(sanitized_line)
-            underscore_positions.append(line_underscores)
-        
-        data = InputData(
-            text='\n'.join(sanitized_lines),
-            style=style,
-            bias=bias,
-            stroke_colors=stroke_colors,
-            stroke_widths=stroke_widths
-        )
-        
-        try:
-            validate_input(data)
-        except ValueError as e:
-            return f"Error: {str(e)}"
-        
-        # Generate the handwriting with sanitized lines
-        hand.write(
-            filename='img/output.svg',
-            lines=sanitized_lines,
-            biases=biases,
-            styles=styles,
-            stroke_colors=stroke_colors,
-            stroke_widths=stroke_widths
-        )
-        
-        # Read the generated SVG
-        with open("img/output.svg", "r") as f:
-            svg_content = f.read()
-            
-        # Insert font-based underscores at tracked positions
-        svg_content = insert_font_underscores(svg_content, lines, underscore_positions, color, stroke_width)
-            
-        # If transparent background is requested, modify the SVG
-        if transparent_background:
-            # Remove the background rectangle or make it transparent
-            pattern = r'<rect[^>]*?fill="white"[^>]*?>'
-            if re.search(pattern, svg_content):
-                svg_content = re.sub(pattern, '', svg_content)
-            
-            # Write the modified SVG back
-            with open("img/output.svg", "w") as f:
-                f.write(svg_content)
-            
+        lines = text.split('\n') if multiline else [text]
+
+        # Light validation and slash normalization (your old behavior)
+        for idx, ln in enumerate(lines):
+            if len(ln) > 75:
+                return f"Error: Line {idx + 1} is too long (max 75 characters)"
+            lines[idx] = ln.replace('/', '-').replace('\\', '-')  # keep underscores intact
+
+        # Create a fresh SVG root we control (no background rect -> transparent)
+        svg_root = ET.Element('svg', {
+            'xmlns': 'http://www.w3.org/2000/svg',
+            'viewBox': '0 0 1200 800'
+        })
+
+        y0 = 80.0
+        line_gap = 100.0
+        max_x = 0.0
+
+        for i, original_line in enumerate(lines):
+            line_y = y0 + i * line_gap
+            elems, right_x = render_line_with_underscores(
+                original_line,
+                style,
+                bias,
+                color,
+                stroke_width,
+                line_y,
+                x_start=40,
+                gap_left=8,
+                gap_right=8,
+                underscore_len=22
+            )
+            for el in elems:
+                svg_root.append(el)
+            max_x = max(max_x, right_x)
+
+        # Tighten viewBox to content width + margin
+        width = max(300, int(max_x + 40))
+        height = int(y0 + len(lines) * line_gap)
+        svg_root.set('viewBox', f"0 0 {width} {height}")
+
+        svg_content = ET.tostring(svg_root, encoding='unicode')
+        # Persist for download
+        with open("img/output.svg", "w", encoding="utf-8") as f:
+            f.write(svg_content)
         return svg_content
+
     except Exception as e:
         return f"Error: {str(e)}"
 
+# --- PNG export (transparent) --------------------------------------------------
+
 def export_to_png(svg_content):
-    """Convert SVG to transparent PNG using CairoSVG and Pillow for robust transparency"""
+    """Convert SVG to transparent PNG using CairoSVG and Pillow."""
     try:
         import cairosvg
         from PIL import Image
-        
+
         if not svg_content or svg_content.startswith("Error:"):
             return None
-        
-        # Modify the SVG to ensure the background is transparent
-        # Remove any white background rectangle
-        pattern = r'<rect[^>]*?fill="white"[^>]*?>'
-        if re.search(pattern, svg_content):
-            svg_content = re.sub(pattern, '', svg_content)
-        
-        # Save the modified SVG to a temporary file
-        with open("img/temp.svg", "w") as f:
+
+        # Ensure we write the current svg to disk (CairoSVG can read from file)
+        tmp_svg = "img/temp.svg"
+        with open(tmp_svg, "w", encoding="utf-8") as f:
             f.write(svg_content)
-            
-        # Convert SVG to PNG with transparency using CairoSVG
+
+        # Render at higher scale for crisp strokes
         cairosvg.svg2png(
-            url="img/temp.svg", 
-            write_to="img/output_temp.png", 
+            url=tmp_svg,
+            write_to="img/output_temp.png",
             scale=2.0,
-            background_color="none"  # This ensures transparency
+            background_color="none"
         )
-        
-        # Additional processing with Pillow to ensure transparency
+
         img = Image.open("img/output_temp.png")
-        
-        # Convert to RGBA if not already
         if img.mode != 'RGBA':
             img = img.convert('RGBA')
-        
-        # Create a transparent canvas
-        transparent_img = Image.new('RGBA', img.size, (0, 0, 0, 0))
-        
-        # Process the image data to ensure white is transparent
+
+        # Optional: force near-white background fully transparent (safety)
         datas = img.getdata()
         new_data = []
-        
         for item in datas:
-            # If pixel is white or near-white, make it transparent
             if item[0] > 240 and item[1] > 240 and item[2] > 240:
-                new_data.append((255, 255, 255, 0))  # Transparent
+                new_data.append((255, 255, 255, 0))
             else:
-                new_data.append(item)  # Keep original color
-        
-        transparent_img.putdata(new_data)
-        transparent_img.save("img/output.png", "PNG")
-        
-        # Clean up the temporary file
+                new_data.append(item)
+        img.putdata(new_data)
+
+        out_path = "img/output.png"
+        img.save(out_path, "PNG")
+
+        # cleanup
         try:
             os.remove("img/output_temp.png")
         except:
             pass
-        
-        return "img/output.png"
+
+        return out_path
+
     except Exception as e:
         print(f"Error converting to PNG: {str(e)}")
         return None
 
-def generate_lyrics_sample():
-    """Generate a sample using lyrics"""
-    from lyrics import all_star
-    return all_star.split("\n")[0:4]
-    
-def generate_handwriting_wrapper(
-    text, 
-    style, 
-    bias, 
-    color, 
-    stroke_width,
-    multiline=True
-):
+# --- Gradio UI ----------------------------------------------------------------
+
+def generate_handwriting_wrapper(text, style, bias, color, stroke_width, multiline=True):
     svg = generate_handwriting(text, style, bias, color, stroke_width, multiline)
     png_path = export_to_png(svg)
-    return svg, png_path
+    # Display SVG inline; return file path for PNG
+    return svg, png_path, "img/output.svg"
 
 css = """
 .container {max-width: 900px; margin: auto;}
@@ -250,134 +261,80 @@ css = """
 """
 
 with gr.Blocks(css=css) as demo:
-    gr.Markdown("# 🖋️ Handwriting Synthesis")
-    gr.Markdown("Generate realistic handwritten text using neural networks.")
-    
+    gr.Markdown("# 🖋️ Handwriting Synthesis (Underscore-safe)")
+    gr.Markdown("Generate realistic handwritten text with **true** underscore alignment—no retraining required.")
+
     with gr.Row():
         with gr.Column(scale=2):
             text_input = gr.Textbox(
                 label="Text Input",
-                placeholder="Enter text to convert to handwriting...",
+                placeholder="Try: zeb_3asba or user_name → underscores render perfectly",
                 lines=5,
                 max_lines=10,
             )
-            
             with gr.Row():
                 with gr.Column(scale=1):
-                    style_select = gr.Slider(
-                        minimum=0, 
-                        maximum=12, 
-                        step=1, 
-                        value=9, 
-                        label="Handwriting Style"
-                    )
+                    style_select = gr.Slider(minimum=0, maximum=12, step=1, value=9, label="Handwriting Style")
                 with gr.Column(scale=1):
-                    bias_slider = gr.Slider(
-                        minimum=0.5, 
-                        maximum=1.0, 
-                        step=0.05, 
-                        value=0.75, 
-                        label="Neatness (Higher = Neater)"
-                    )
-            
+                    bias_slider = gr.Slider(minimum=0.5, maximum=1.0, step=0.05, value=0.75, label="Neatness (Higher = Neater)")
             with gr.Row():
                 with gr.Column(scale=1):
-                    color_picker = gr.ColorPicker(
-                        label="Ink Color", 
-                        value="#000000"
-                    )
+                    color_picker = gr.ColorPicker(label="Ink Color", value="#000000")
                 with gr.Column(scale=1):
-                    stroke_width = gr.Slider(
-                        minimum=1, 
-                        maximum=4, 
-                        step=0.5, 
-                        value=2, 
-                        label="Stroke Width"
-                    )
-            
+                    stroke_width = gr.Slider(minimum=1, maximum=4, step=0.5, value=2, label="Stroke Width")
             with gr.Row():
                 generate_btn = gr.Button("Generate Handwriting", variant="primary")
                 clear_btn = gr.Button("Clear")
-            
-            with gr.Accordion("Examples", open=False):
-                sample_btn = gr.Button("Insert Sample Text")
-            
+
         with gr.Column(scale=3):
             output_svg = gr.HTML(label="Generated Handwriting (SVG)", elem_classes=["output-container"])
             output_png = gr.Image(type="filepath", label="Generated Handwriting (PNG)", elem_classes=["output-container"])
-            
             with gr.Row():
-                download_svg_btn = gr.Button("Download SVG")
-                download_png_btn = gr.Button("Download PNG")
-    
-    gr.Markdown("""
-    ### Tips:
-    - Try different styles (0-12) to get various handwriting appearances
-    - Adjust the neatness slider to make writing more or less tidy
-    - Each line should be 75 characters or less
-    - The model works best for English text
-    - Forward slashes (/) and backslashes (\\) will be replaced with dashes (-)
-    - Underscores (_) will be rendered using font characters for better appearance
-    - PNG output has transparency for easy integration into other documents
-    """)
-    
+                download_svg_file = gr.File(label="Download SVG")
+                download_png_file = gr.File(label="Download PNG")
+
     gr.Markdown("""
-    <div class="footer">
-    Created with Gradio • 
-    </div>
+    ### Notes
+    - Underscores are drawn **between** segments using real geometry → perfect alignment.
+    - Slashes (/, \\) are normalized to dashes (-) for model stability.
+    - Each line ≤ 75 characters.
+    - Transparent PNG export included.
     """)
-    
-    # Define interactions
+
     generate_btn.click(
         fn=generate_handwriting_wrapper,
         inputs=[text_input, style_select, bias_slider, color_picker, stroke_width],
-        outputs=[output_svg, output_png]
+        outputs=[output_svg, output_png, download_svg_file]
+    ).then(
+        fn=lambda p: p,
+        inputs=[output_png],
+        outputs=[download_png_file]
     )
-    
+
     clear_btn.click(
         fn=lambda: ("", 9, 0.75, "#000000", 2),
         inputs=None,
         outputs=[text_input, style_select, bias_slider, color_picker, stroke_width]
     )
-    
-    sample_btn.click(
-        fn=lambda: ("\n".join(generate_lyrics_sample())),
-        inputs=None,
-        outputs=[text_input]
-    )
-    
-    download_svg_btn.click(
-        fn=lambda x: x,
-        inputs=[output_svg],
-        outputs=[gr.File(label="Download SVG", file_count="single", file_types=[".svg"])]
-    )
-    
-    download_png_btn.click(
-        fn=lambda x: x,
-        inputs=[output_png],
-        outputs=[gr.File(label="Download PNG", file_count="single", file_types=[".png"])]
-    )
+
+# --- Main ---------------------------------------------------------------------
 
 if __name__ == "__main__":
-    # Set port based on environment variable or default to 7860
     port = int(os.environ.get("PORT", 7860))
-    
-    # Check if required packages are installed
+
+    # Soft check for optional deps
     missing_packages = []
     try:
-        import cairosvg
+        import cairosvg  # noqa
     except ImportError:
         missing_packages.append("cairosvg")
-    
     try:
-        from PIL import Image
+        from PIL import Image  # noqa
     except ImportError:
         missing_packages.append("pillow")
-    
+
     if missing_packages:
-        print(f"WARNING: The following packages are missing and required for transparent PNG export: {', '.join(missing_packages)}")
-        print("Please install them using: pip install " + " ".join(missing_packages))
-    else:
-        print("All required packages are installed and ready for transparent PNG export")
-    
-    demo.launch(server_name="0.0.0.0", server_port=port)
+        print(f"WARNING: Missing packages for transparent PNG export: {', '.join(missing_packages)}")
+        print("Install with: pip install " + " ".join(missing_packages))
+
+    demo.launch(server_name="0.0.0.0", server_port=port)