Create app.py

app.py

@@ -0,0 +1,148 @@
+import gradio as gr
+from PIL import Image, ImageDraw, ImageFont
+import textwrap, os
+
+CANDIDATE_FONTS = [
+    "/usr/share/fonts/truetype/dejavu/DejaVuSans-Bold.ttf",
+    "/usr/share/fonts/truetype/dejavu/DejaVuSans.ttf",
+]
+def get_font(size):
+    for p in CANDIDATE_FONTS:
+        if os.path.exists(p):
+            return ImageFont.truetype(p, size=size)
+    return ImageFont.load_default()
+
+def draw_text_block(draw, text, img_w, y, font, fill, stroke_fill, stroke_width, align="center"):
+    lines = []
+    max_chars = max(12, min(30, img_w // 30))
+    for paragraph in (text or "").split("\n"):
+        wrapped = textwrap.wrap(paragraph, width=max_chars)
+        lines.extend(wrapped if wrapped else [""])
+
+    line_heights = []
+    for line in lines:
+        bbox = draw.textbbox((0, 0), line, font=font, stroke_width=stroke_width)
+        line_heights.append(bbox[3] - bbox[1])
+
+    total_h = sum(line_heights) + (len(lines) - 1) * int(font.size * 0.25)
+    curr_y = y
+    for i, line in enumerate(lines):
+        w = draw.textlength(line, font=font, stroke_width=stroke_width)
+        if align == "center":
+            x = (img_w - w) / 2
+        elif align == "left":
+            x = int(img_w * 0.05)
+        else:
+            x = img_w - int(img_w * 0.05) - w
+        draw.text((x, curr_y), line, font=font, fill=fill,
+                  stroke_width=stroke_width, stroke_fill=stroke_fill)
+        curr_y += line_heights[i] + int(font.size * 0.25)
+    return curr_y, total_h
+
+def make_meme(
+    image, top_text, bottom_text,
+    font_size, stroke_width, text_color, outline_color,
+    align, top_nudge, bottom_nudge
+):
+    if image is None:
+        return None
+
+    img = image.convert("RGB")
+    draw = ImageDraw.Draw(img)
+    w, h = img.size
+
+    base_size = max(12, int((w * font_size) / 100))
+    font = get_font(base_size)
+    stroke = int(max(0, stroke_width))
+
+    # Top
+    top_y = int(h * 0.03) + int(top_nudge)
+    draw_text_block(
+        draw=draw, text=(top_text or "").strip(), img_w=w, y=top_y, font=font,
+        fill=text_color, stroke_fill=outline_color, stroke_width=stroke, align=align
+    )
+
+    # Measure bottom block
+    tmp = Image.new("RGBA", img.size, (0, 0, 0, 0))
+    mdraw = ImageDraw.Draw(tmp)
+    lines = []
+    max_chars = max(12, min(30, w // 30))
+    for paragraph in (bottom_text or "").split("\n"):
+        wrapped = textwrap.wrap(paragraph, width=max_chars)
+        lines.extend(wrapped if wrapped else [""])
+    line_heights = [mdraw.textbbox((0, 0), line, font=font, stroke_width=stroke)[3] for line in lines]
+    total_bottom_h = sum(line_heights) + (len(lines) - 1) * int(font.size * 0.25)
+
+    bottom_y_start = int(h - total_bottom_h - h * 0.03) - int(bottom_nudge)
+    draw_text_block(
+        draw=draw, text=(bottom_text or "").strip(), img_w=w, y=bottom_y_start, font=font,
+        fill=text_color, stroke_fill=outline_color, stroke_width=stroke, align=align
+    )
+    return img
+
+THEME = gr.themes.Soft(
+    primary_hue="indigo",
+    secondary_hue="violet",
+    neutral_hue="slate"
+).set(
+    button_border_width="0px",
+    button_large_padding="14px",
+    button_large_radius="14px",
+    radius_md="14px",
+    body_background_fill_dark="linear-gradient(180deg, #0b0f17 0%, #0a0920 100%)",
+    block_shadow="none",
+)
+
+CUSTOM_CSS = """
+:root { --radius: 14px; }
+* { -webkit-tap-highlight-color: transparent; }
+.gradio-container { padding: 10px; max-width: 820px; margin: 0 auto; }
+h2, p { text-align:center }
+#stickybar { position: sticky; bottom: 0; z-index: 50; backdrop-filter: blur(8px); }
+#stickybar .gr-button { width: 100%; font-weight: 700; }
+@media (max-width: 640px){
+  .gradio-container { padding: 8px; }
+  .compact .gr-form{ gap:8px }
+}
+"""
+
+with gr.Blocks(theme=THEME, css=CUSTOM_CSS, fill_height=True, analytics_enabled=False) as demo:
+    gr.Markdown("<h2>📱 Mobile Meme Maker</h2><p>Upload → Type → Download. Built on iPhone, for iPhone.</p>")
+
+    with gr.Row(equal_height=False, elem_classes="compact"):
+        with gr.Column(scale=1):
+            in_img = gr.Image(type="pil", label="Upload photo", height=320)
+
+            with gr.Accordion("Text & Style", open=True):
+                top_text = gr.Textbox(label="Top text", value="WHEN THE WIFI JUST WORKS", autofocus=True)
+                bottom_text = gr.Textbox(label="Bottom text", value="CHEF'S KISS")
+                align = gr.Radio(choices=["left", "center", "right"], value="center", label="Alignment", inline=True)
+                font_size = gr.Slider(8, 22, value=12, step=1, label="Font size (% of width)")
+                stroke_width = gr.Slider(0, 14, value=4, step=1, label="Outline thickness")
+                with gr.Row():
+                    text_color = gr.ColorPicker(value="#FFFFFF", label="Text")
+                    outline_color = gr.ColorPicker(value="#000000", label="Outline")
+
+            with gr.Accordion("Position Nudges", open=False):
+                top_nudge = gr.Slider(-300, 300, value=0, step=1, label="Top text nudge (px)")
+                bottom_nudge = gr.Slider(-300, 300, value=0, step=1, label="Bottom text nudge (px)")
+
+        with gr.Column(scale=1):
+            out = gr.Image(type="pil", label="Preview / Download", height=440, show_download_button=True)
+            generate = gr.Button("✨ Generate", size="lg")
+            gr.Markdown(
+                "<div id='stickybar'>"
+                "<div class='container' style='display:flex; gap:10px; margin-top:8px;'>"
+                "</div></div>"
+            )
+
+    # Generate action
+    inputs = [in_img, top_text, bottom_text, font_size, stroke_width, text_color, outline_color, align, top_nudge, bottom_nudge]
+    generate.click(fn=make_meme, inputs=inputs, outputs=out)
+
+    # Live preview as you change things
+    for comp in inputs:
+        comp.change(fn=make_meme, inputs=inputs, outputs=out, show_progress=False)
+
+if __name__ == "__main__":
+    demo.launch()