Update app.py

app.py

@@ -2,27 +2,38 @@ import gradio as gr
 import cv2
 import numpy as np
 import io
-import os
-import tempfile
-import base64
-from PIL import Image, ImageDraw
+from PIL import Image, ImageDraw, ImageFont
 import matplotlib
 matplotlib.use("Agg")
 import matplotlib.pyplot as plt
 
-# ─── PDF ──────────────────────────────────────────────────────────────────────
-from reportlab.lib.pagesizes import A4
-from reportlab.lib import colors
-from reportlab.lib.units import cm, mm
-from reportlab.platypus import (
-    SimpleDocTemplate, Paragraph, Spacer,
-    Image as RLImage, Table, TableStyle, HRFlowable,
-)
-from reportlab.lib.styles import getSampleStyleSheet, ParagraphStyle
-from reportlab.lib.enums import TA_CENTER, TA_LEFT, TA_RIGHT
-from reportlab.pdfgen import canvas as rl_canvas
-from reportlab.platypus import BaseDocTemplate, PageTemplate, Frame
-from reportlab.lib.colors import red, black
+# ─── Font paths ───────────────────────────────────────────────────────────────
+FONT_BOLD    = "/usr/share/fonts/truetype/dejavu/DejaVuSans-Bold.ttf"
+FONT_REGULAR = "/usr/share/fonts/truetype/dejavu/DejaVuSans.ttf"
+
+def _font(size, bold=True):
+    try:
+        return ImageFont.truetype(FONT_BOLD if bold else FONT_REGULAR, size)
+    except Exception:
+        return ImageFont.load_default()
+
+# ─── Colours (R,G,B) ──────────────────────────────────────────────────────────
+C_VIOLET      = (124, 58,  237)
+C_VIOLET_DARK = ( 91, 33,  182)
+C_VIOLET_LITE = (237, 233, 254)
+C_TEAL        = ( 13, 148, 136)
+C_TEAL_LITE   = (204, 251, 241)
+C_AMBER       = (217, 119,   6)
+C_AMBER_LITE  = (254, 243, 199)
+C_ROSE        = (225,  29,  72)
+C_ROSE_LITE   = (255, 228, 230)
+C_SLATE       = ( 30,  41,  59)
+C_SLATE_MID   = (100, 116, 139)
+C_SLATE_LITE  = (241, 245, 249)
+C_WHITE       = (255, 255, 255)
+C_BLACK       = (  0,   0,   0)
+C_RED         = (220,  38,  38)
+C_BG          = (255, 255, 255)   # page background
 
 # ─── Cellpose model (lazy) ────────────────────────────────────────────────────
 _model = None
@@ -33,10 +44,9 @@ def get_model():
         from cellpose import models
         from huggingface_hub import hf_hub_download
         fpath = hf_hub_download(repo_id="mouseland/cellpose-sam", filename="cpsam")
-        _model = models.CellposeModel(gpu=False, pretrained_model=fpath)
+        _model = models.CellposeModel(gpu=True, pretrained_model=fpath)
     return _model
 
-
 # ─── Image helpers ────────────────────────────────────────────────────────────
 def normalize99(img):
     X = img.copy().astype(np.float32)
@@ -89,245 +99,197 @@ def build_outline_image(img, masks) -> Image.Image:
     return out
 
 
-# ─── Colours ──────────────────────────────────────────────────────────────────
-VIOLET      = colors.HexColor("#7C3AED")
-VIOLET_DARK = colors.HexColor("#5B21B6")
-VIOLET_LITE = colors.HexColor("#EDE9FE")
-TEAL        = colors.HexColor("#0D9488")
-TEAL_LITE   = colors.HexColor("#CCFBF1")
-AMBER       = colors.HexColor("#D97706")
-AMBER_LITE  = colors.HexColor("#FEF3C7")
-ROSE        = colors.HexColor("#E11D48")
-ROSE_LITE   = colors.HexColor("#FFE4E6")
-SLATE       = colors.HexColor("#1E293B")
-SLATE_MID   = colors.HexColor("#64748B")
-SLATE_LITE  = colors.HexColor("#F1F5F9")
-WHITE       = colors.white
+# ─── Drawing helpers ──────────────────────────────────────────────────────────
+def _text_size(draw, text, font):
+    """Return (width, height) of text."""
+    bbox = draw.textbbox((0, 0), text, font=font)
+    return bbox[2] - bbox[0], bbox[3] - bbox[1]
+
+def _draw_rect(img, x0, y0, x1, y1, fill, border=None, border_width=2, radius=0):
+    """Draw a filled rectangle with optional border on a PIL Image."""
+    draw = ImageDraw.Draw(img)
+    if radius > 0:
+        draw.rounded_rectangle([x0, y0, x1, y1], radius=radius, fill=fill,
+                                outline=border, width=border_width if border else 0)
+    else:
+        draw.rectangle([x0, y0, x1, y1], fill=fill,
+                       outline=border, width=border_width if border else 0)
 
+def _draw_text_centred(img, cx, cy, text, font, color):
+    draw = ImageDraw.Draw(img)
+    tw, th = _text_size(draw, text, font)
+    draw.text((cx - tw // 2, cy - th // 2), text, font=font, fill=color)
 
-def _header_canvas(c, doc):
+def _draw_text_left(img, x, cy, text, font, color):
+    draw = ImageDraw.Draw(img)
+    _, th = _text_size(draw, text, font)
+    draw.text((x, cy - th // 2), text, font=font, fill=color)
+
+
+# ─── Report image builder ─────────────────────────────────────────────────────
+def build_report_image(segmented_pil: Image.Image, total_count: int) -> Image.Image:
     """
-    Header: NO background fill — just the MLBench text, tagline, and teal line.
-    Footer: page number + thin rule.
+    Renders the full report as a PIL Image with the same structure as the PDF:
+      • Header  : MLBench  +  tagline  +  teal rule
+      • Body    : [Grain Count Statistics table] | gap | [Segmentation Output image]
+    No footer line / page number.
     """
-    W, H = A4
-    c.saveState()
-
-    # ── "ML" in red, "Bench" in black — no background ──────────────────────
-    c.setFont("Helvetica-Bold", 24)
-    c.setFillColor(red)
-    ml_w = c.stringWidth("ML", "Helvetica-Bold", 24)
-    c.drawString(1.8*cm, H - 1.6*cm, "ML")
-    c.setFillColor(black)
-    c.drawString(1.8*cm + ml_w, H - 1.6*cm, "Bench")
-
-    # Tagline right-aligned — dark colour since no purple bg
-    c.setFont("Helvetica", 9)
-    c.setFillColor(SLATE_MID)
-    c.drawRightString(W - 1.8*cm, H - 1.55*cm, "Rice Grain Analysis Report")
-
-    # Teal accent line — kept exactly as before
-    c.setStrokeColor(TEAL)
-    c.setLineWidth(2.5)
-    c.line(0, H - 2.0*cm, W, H - 2.0*cm)
-
-    # Footer rule + page number
-    c.setStrokeColor(colors.HexColor("#E2E8F0"))
-    c.setLineWidth(0.5)
-    c.line(1.8*cm, 1.4*cm, W - 1.8*cm, 1.4*cm)
-    c.setFont("Helvetica", 8)
-    c.setFillColor(SLATE_MID)
-    c.drawRightString(W - 1.8*cm, 0.9*cm, f"Page {doc.page}")
-
-    c.restoreState()
-
-
-def build_pdf(segmented_pil: Image.Image, total_count: int) -> str:
-    out_path = tempfile.mktemp(suffix=".pdf")
-    PAGE_W, PAGE_H = A4
-    LM = RM = 1.8 * cm
-    TM = 2.6 * cm          # slightly less since no coloured band
-    BM = 2.0 * cm
-    usable_w = PAGE_W - LM - RM
-
-    doc = BaseDocTemplate(
-        out_path, pagesize=A4,
-        leftMargin=LM, rightMargin=RM,
-        topMargin=TM, bottomMargin=BM,
-    )
-    frame = Frame(LM, BM, usable_w, PAGE_H - TM - BM, id="main")
-    doc.addPageTemplates([PageTemplate(id="pg", frames=[frame], onPage=_header_canvas)])
-
-    # ── Styles ───────────────────────────────────────────────────────────────
-    section_s = ParagraphStyle(
-        "SEC", fontSize=10, fontName="Helvetica-Bold",
-        textColor=WHITE, alignment=TA_LEFT,
-        leftIndent=6, spaceAfter=0, leading=14,
-    )
-    stat_label_s = ParagraphStyle(
-        "SL", fontSize=9, fontName="Helvetica-Bold",
-        textColor=SLATE, alignment=TA_LEFT, leading=13,
-    )
-    stat_val_s = ParagraphStyle(
-        "SV", fontSize=9, fontName="Helvetica-Bold",
-        textColor=SLATE, alignment=TA_CENTER, leading=13,
-    )
+    DPI    = 150
+    PW_IN  = 8.27          # A4 width  in inches
+    PH_IN  = 11.69         # A4 height in inches (we'll crop to content)
+    PW     = int(PW_IN * DPI)
+    MARGIN = int(0.7 * DPI)   # ~0.7 inch margin
+
+    # ── Fonts ─────────────────────────────────────────────────────────────
+    f_logo_ml   = _font(int(0.28 * DPI))        # "ML" large
+    f_logo_b    = _font(int(0.28 * DPI))        # "Bench" same size
+    f_tagline   = _font(int(0.09 * DPI), bold=False)
+    f_sec_hdr   = _font(int(0.11 * DPI))        # section bar text
+    f_col_hdr   = _font(int(0.09 * DPI))        # table column headers
+    f_label     = _font(int(0.10 * DPI))        # row labels
+    f_val_total = _font(int(0.13 * DPI))        # total count value (bigger)
+    f_val       = _font(int(0.10 * DPI))        # other value cells
+
+    # ── Dimensions ────────────────────────────────────────────────────────
+    usable_w  = PW - 2 * MARGIN
+    GAP       = int(0.18 * DPI)
+    stat_w    = int(usable_w * 0.43)
+    img_col_w = usable_w - stat_w - GAP
+
+    HDR_H      = int(0.55 * DPI)   # header area height
+    SEC_BAR_H  = int(0.22 * DPI)   # coloured section title bar
+    COL_HDR_H  = int(0.18 * DPI)   # table column header row
+    ROW_H      = int(0.17 * DPI)   # each data row
+    STRIPE_W   = int(0.07 * DPI)   # coloured left stripe on each row
+    TEAL_LINE  = 3                  # teal rule thickness
+
+    N_ROWS     = 5
+    TABLE_H    = COL_HDR_H + N_ROWS * ROW_H
+
+    # Total canvas height: margin + header + gap + sec_bar + content + margin
+    BODY_TOP   = HDR_H + int(0.12 * DPI)   # y where body starts
+    CONTENT_H  = SEC_BAR_H + TABLE_H
+    CANVAS_H   = BODY_TOP + CONTENT_H + MARGIN
+
+    # ── Create canvas ─────────────────────────────────────────────────────
+    img = Image.new("RGB", (PW, CANVAS_H), C_BG)
+    draw = ImageDraw.Draw(img)
+
+    # ── Header ────────────────────────────────────────────────────────────
+    # "ML" in red, "Bench" in black
+    logo_y = int(HDR_H * 0.38)
+    ml_w, _ = _text_size(draw, "ML", f_logo_ml)
+    draw.text((MARGIN, logo_y), "ML",    font=f_logo_ml, fill=C_RED)
+    draw.text((MARGIN + ml_w, logo_y), "Bench", font=f_logo_b, fill=C_BLACK)
+
+    # Tagline right-aligned
+    tag = "Rice Grain Analysis Report"
+    tag_w, tag_h = _text_size(draw, tag, f_tagline)
+    draw.text((PW - MARGIN - tag_w, logo_y + 6), tag, font=f_tagline, fill=C_SLATE_MID)
+
+    # Teal horizontal rule
+    rule_y = HDR_H - 4
+    draw.rectangle([0, rule_y, PW, rule_y + TEAL_LINE], fill=C_TEAL)
+
+    # ── Section header bars ───────────────────────────────────────────────
+    stat_x  = MARGIN
+    img_x   = MARGIN + stat_w + GAP
+
+    stat_bar_y0 = BODY_TOP
+    stat_bar_y1 = BODY_TOP + SEC_BAR_H
+
+    # Teal bar — "Grain Count Statistics"
+    _draw_rect(img, stat_x, stat_bar_y0, stat_x + stat_w, stat_bar_y1, fill=C_TEAL)
+    _draw_text_centred(img, stat_x + stat_w // 2, (stat_bar_y0 + stat_bar_y1) // 2,
+                       "Grain Count Statistics", f_sec_hdr, C_WHITE)
+
+    # Violet bar — "Segmentation Output"
+    _draw_rect(img, img_x, stat_bar_y0, img_x + img_col_w, stat_bar_y1, fill=C_VIOLET)
+    _draw_text_centred(img, img_x + img_col_w // 2, (stat_bar_y0 + stat_bar_y1) // 2,
+                       "Segmentation Output", f_sec_hdr, C_WHITE)
+
+    # ── Stats table ───────────────────────────────────────────────────────
+    table_top = BODY_TOP + SEC_BAR_H
+    col_hdr_y0 = table_top
+    col_hdr_y1 = table_top + COL_HDR_H
+
+    # Column header background
+    _draw_rect(img, stat_x, col_hdr_y0, stat_x + stat_w, col_hdr_y1, fill=C_SLATE)
+    cat_cx  = stat_x + STRIPE_W + (stat_w - STRIPE_W) // 2 - int((stat_w - STRIPE_W) * 0.18)
+    count_cx = stat_x + STRIPE_W + int((stat_w - STRIPE_W) * 0.78)
+    _draw_text_centred(img, cat_cx,   (col_hdr_y0 + col_hdr_y1) // 2, "Category", f_col_hdr, C_WHITE)
+    _draw_text_centred(img, count_cx, (col_hdr_y0 + col_hdr_y1) // 2, "Count",    f_col_hdr, C_WHITE)
 
-    def section_header(title, bg_color):
-        t = Table([[Paragraph(title, section_s)]], colWidths=[usable_w])
-        t.setStyle(TableStyle([
-            ("BACKGROUND",    (0,0),(-1,-1), bg_color),
-            ("TOPPADDING",    (0,0),(-1,-1), 5),
-            ("BOTTOMPADDING", (0,0),(-1,-1), 5),
-            ("LEFTPADDING",   (0,0),(-1,-1), 8),
-            ("RIGHTPADDING",  (0,0),(-1,-1), 8),
-        ]))
-        return t
-
-    story = []
-
-    # ── Column widths & gap ──────────────────────────────────────────────────
-    GAP     = 0.5 * cm          # space between the two columns
-    stat_w  = usable_w * 0.42   # left  → stats table
-    img_w   = usable_w - stat_w - GAP  # right → image
-
-    # ── Separate column headers (stats left, image right) ────────────────────
-    stat_hdr_s = ParagraphStyle("SHD", fontSize=10, fontName="Helvetica-Bold",
-                                 textColor=WHITE, alignment=TA_CENTER, leading=14)
-    img_hdr_s  = ParagraphStyle("IHD", fontSize=10, fontName="Helvetica-Bold",
-                                 textColor=WHITE, alignment=TA_CENTER, leading=14)
-
-    stat_hdr_cell = Table([[Paragraph("Grain Count Statistics", stat_hdr_s)]],
-                           colWidths=[stat_w])
-    stat_hdr_cell.setStyle(TableStyle([
-        ("BACKGROUND",    (0,0),(-1,-1), TEAL),
-        ("TOPPADDING",    (0,0),(-1,-1), 5),
-        ("BOTTOMPADDING", (0,0),(-1,-1), 5),
-        ("LEFTPADDING",   (0,0),(-1,-1), 8),
-        ("RIGHTPADDING",  (0,0),(-1,-1), 8),
-    ]))
-
-    img_hdr_cell = Table([[Paragraph("Segmentation Output", img_hdr_s)]],
-                          colWidths=[img_w])
-    img_hdr_cell.setStyle(TableStyle([
-        ("BACKGROUND",    (0,0),(-1,-1), VIOLET),
-        ("TOPPADDING",    (0,0),(-1,-1), 5),
-        ("BOTTOMPADDING", (0,0),(-1,-1), 5),
-        ("LEFTPADDING",   (0,0),(-1,-1), 8),
-        ("RIGHTPADDING",  (0,0),(-1,-1), 8),
-    ]))
-
-    # Combined header row (gap column in between)
-    hdr_row = Table(
-        [[stat_hdr_cell, "", img_hdr_cell]],
-        colWidths=[stat_w, GAP, img_w],
-    )
-    hdr_row.setStyle(TableStyle([
-        ("LEFTPADDING",  (0,0),(-1,-1), 0),
-        ("RIGHTPADDING", (0,0),(-1,-1), 0),
-        ("TOPPADDING",   (0,0),(-1,-1), 0),
-        ("BOTTOMPADDING",(0,0),(-1,-1), 0),
-        ("VALIGN",       (0,0),(-1,-1), "TOP"),
-    ]))
-    story.append(hdr_row)
-    story.append(Spacer(1, 5))
-
-    # ── Stats table ──────────────────────────────────────────────────────────
     stat_rows_def = [
-        ("Total Rice Grain", str(total_count), VIOLET,   VIOLET_LITE),
-        ("Long Grain",       "—",              TEAL,     TEAL_LITE),
-        ("Short Grain",      "—",              AMBER,    AMBER_LITE),
-        ("Half Grain",       "—",              ROSE,     ROSE_LITE),
-        ("Broken Edge",      "—",              SLATE_MID,SLATE_LITE),
+        ("Total Rice Grain", str(total_count), C_VIOLET,   C_VIOLET_LITE),
+        ("Long Grain",       "—",              C_TEAL,     C_TEAL_LITE),
+        ("Short Grain",      "—",              C_AMBER,    C_AMBER_LITE),
+        ("Half Grain",       "—",              C_ROSE,     C_ROSE_LITE),
+        ("Broken Edge",      "—",              C_SLATE_MID,C_SLATE_LITE),
     ]
 
-    col_hdr_s = ParagraphStyle("CHD", fontSize=8, fontName="Helvetica-Bold",
-                                textColor=WHITE, alignment=TA_CENTER)
-    stripe_w = 0.28 * cm
-    label_w  = stat_w * 0.64
-    val_w    = stat_w - stripe_w - label_w
-
-    tdata = [["", Paragraph("Category", col_hdr_s), Paragraph("Count", col_hdr_s)]]
-    for label, val, _, _ in stat_rows_def:
-        tdata.append(["", Paragraph(label, stat_label_s), Paragraph(val, stat_val_s)])
-
-    stat_table = Table(tdata, colWidths=[stripe_w, label_w, val_w])
-    ts = TableStyle([
-        ("BACKGROUND",    (0,0),(-1,0), SLATE),
-        ("TOPPADDING",    (0,0),(-1,-1), 7),
-        ("BOTTOMPADDING", (0,0),(-1,-1), 7),
-        ("LEFTPADDING",   (0,0),(-1,-1), 4),
-        ("RIGHTPADDING",  (0,0),(-1,-1), 4),
-        ("VALIGN",        (0,0),(-1,-1), "MIDDLE"),
-        ("ALIGN",         (2,0),(2,-1),  "CENTER"),
-        ("BOX",           (0,0),(-1,-1), 1, colors.HexColor("#CBD5E1")),
-        ("INNERGRID",     (1,1),(-1,-1), 0.4, colors.HexColor("#E2E8F0")),
-    ])
-    for i, (_, _, accent, bg) in enumerate(stat_rows_def, start=1):
-        ts.add("BACKGROUND", (0,i), (0,i), accent)
-        ts.add("BACKGROUND", (1,i), (2,i), bg)
-    ts.add("FONTSIZE",  (2,1),(2,1), 11)
-    ts.add("TEXTCOLOR", (2,1),(2,1), VIOLET)
-    stat_table.setStyle(ts)
-
-    # ── Image — exact height match to stats table ───────────────────────────
-    # Measure the actual rendered height of stat_table using wrap()
-    from reportlab.lib.pagesizes import A4 as _A4
-    _exact_h = stat_table.wrap(stat_w, 9999)[1]   # returns (w, h) in points
-    img_max_h = _exact_h   # points — same unit RLImage uses
-
-    buf = io.BytesIO()
-    segmented_pil.save(buf, format="PNG"); buf.seek(0)
-    iw, ih  = segmented_pil.size
-    # img_w is in points (cm * 28.35); keep image within column width & exact table height
-    ratio   = min(img_w / iw, img_max_h / ih)
-    rl_img  = RLImage(buf, width=iw * ratio, height=ih * ratio)
-
-    img_cell = Table([[rl_img]], colWidths=[img_w], rowHeights=[_exact_h])
-    img_cell.setStyle(TableStyle([
-        ("BOX",           (0,0),(-1,-1), 1.5, VIOLET),
-        ("BACKGROUND",    (0,0),(-1,-1), colors.black),
-        ("ALIGN",         (0,0),(-1,-1), "CENTER"),
-        ("VALIGN",        (0,0),(-1,-1), "MIDDLE"),
-        ("TOPPADDING",    (0,0),(-1,-1), 0),
-        ("BOTTOMPADDING", (0,0),(-1,-1), 0),
-        ("LEFTPADDING",   (0,0),(-1,-1), 4),
-        ("RIGHTPADDING",  (0,0),(-1,-1), 4),
-    ]))
-
-    # ── Side-by-side: stats LEFT, image RIGHT, gap in middle ─────────────────
-    side_by_side = Table(
-        [[stat_table, "", img_cell]],
-        colWidths=[stat_w, GAP, img_w],
-    )
-    side_by_side.setStyle(TableStyle([
-        ("VALIGN",       (0,0),(-1,-1), "TOP"),
-        ("LEFTPADDING",  (0,0),(-1,-1), 0),
-        ("RIGHTPADDING", (0,0),(-1,-1), 0),
-        ("TOPPADDING",   (0,0),(-1,-1), 0),
-        ("BOTTOMPADDING",(0,0),(-1,-1), 0),
-    ]))
-    story.append(side_by_side)
-
-    doc.build(story)
-    return out_path
-
-
-def pdf_to_preview_html(pdf_path: str) -> str:
-    with open(pdf_path, "rb") as f:
-        b64 = base64.b64encode(f.read()).decode()
-    return (
-        f'<iframe src="data:application/pdf;base64,{b64}" '
-        f'width="100%" height="680px" '
-        f'style="border:1px solid #7C3AED; border-radius:8px;"></iframe>'
-    )
+    border_color = (203, 213, 225)
+    grid_color   = (226, 232, 240)
+
+    for i, (label, val, accent, bg) in enumerate(stat_rows_def):
+        ry0 = table_top + COL_HDR_H + i * ROW_H
+        ry1 = ry0 + ROW_H
+        cy  = (ry0 + ry1) // 2
+
+        # Row background
+        _draw_rect(img, stat_x, ry0, stat_x + stat_w, ry1, fill=bg)
+        # Accent stripe
+        _draw_rect(img, stat_x, ry0, stat_x + STRIPE_W, ry1, fill=accent)
+        # Label
+        f_lbl = f_label
+        _draw_text_left(img, stat_x + STRIPE_W + 8, cy, label, f_lbl, C_SLATE)
+        # Value
+        f_v = f_val_total if i == 0 else f_val
+        c_v = C_VIOLET    if i == 0 else C_SLATE
+        vw, _ = _text_size(draw, val, f_v)
+        draw.text((stat_x + stat_w - vw - 14, cy - _text_size(draw, val, f_v)[1] // 2),
+                  val, font=f_v, fill=c_v)
+        # Horizontal grid line
+        draw.rectangle([stat_x, ry1 - 1, stat_x + stat_w, ry1], fill=grid_color)
+
+    # Outer border of table (column header + rows)
+    draw.rectangle([stat_x, col_hdr_y0, stat_x + stat_w,
+                    table_top + COL_HDR_H + N_ROWS * ROW_H], outline=border_color, width=1)
+
+    # ── Segmentation image ────────────────────────────────────────────────
+    # Fit segmented image to exactly match table height (SEC_BAR already above)
+    target_h = TABLE_H      # must match table area below sec bar
+    target_w = img_col_w
+
+    seg_np = np.array(segmented_pil)
+    ih, iw = seg_np.shape[:2]
+    scale  = min(target_w / iw, target_h / ih)
+    new_w  = int(iw * scale)
+    new_h  = int(ih * scale)
+    seg_resized = segmented_pil.resize((new_w, new_h), Image.BICUBIC)
+
+    # Black background box — same height as table
+    box_x0 = img_x
+    box_y0 = table_top          # align top with table (below sec bar)
+    box_x1 = img_x + img_col_w
+    box_y1 = table_top + TABLE_H
+
+    _draw_rect(img, box_x0, box_y0, box_x1, box_y1,
+               fill=C_BLACK, border=C_VIOLET, border_width=2)
+
+    # Centre the image inside the black box
+    paste_x = box_x0 + (img_col_w - new_w) // 2
+    paste_y = box_y0 + (TABLE_H  - new_h)  // 2
+    img.paste(seg_resized, (paste_x, paste_y))
+
+    return img
 
 
 # ─── Sample example images ────────────────────────────────────────────────────
 SAMPLE_PATHS = [
-    "IMG_0614.jpg",
-    "IMG_0623.jpg",
-    "IMG_0693.jpg",
+    "sample_image/IMG_0614.jpg",
+    "sample_image/IMG_0623.jpg",
+    "sample_image/IMG_0693.jpg",
 ]
 
 # ─── Status helpers ───────────────────────────────────────────────────────────
@@ -339,8 +301,9 @@ def make_status(level: str, message: str) -> dict:
 
 # ─── Main processing ──────────────────────────────────────────────────────────
 def process_image(pil_image):
+    # Returns: (report_image, status_update)
     if pil_image is None:
-        return None, "", make_status("warning", "No image provided. Please upload or select a sample image first.")
+        return None, make_status("warning", "No image provided. Please upload or select a sample image first.")
 
     try:
         img_np      = np.array(pil_image.convert("RGB"))
@@ -351,7 +314,7 @@ def process_image(pil_image):
         total_count = int(masks.max())
 
         if total_count == 0:
-            return None, "", make_status(
+            return None, make_status(
                 "warning",
                 "No rice grains were detected in this image. "
                 "Try a clearer photo or adjust the image contrast."
@@ -362,22 +325,20 @@ def process_image(pil_image):
             (img_resized.shape[1], img_resized.shape[0]), resample=Image.BICUBIC
         )
 
-        pdf_path     = build_pdf(outline_pil, total_count)
-        preview_html = pdf_to_preview_html(pdf_path)
+        report_img = build_report_image(outline_pil, total_count)
 
         return (
-            pdf_path,
-            preview_html,
-            make_status("success", f"{total_count} rice grains detected. PDF report ready — preview on the right, download below it."),
+            report_img,
+            make_status("success", f"{total_count} rice grains detected. Report image shown on the right."),
         )
 
     except MemoryError:
-        return None, "", make_status("error", "Out of memory. Try uploading a smaller image.")
+        return None, make_status("error", "Out of memory. Try uploading a smaller image.")
 
     except Exception as e:
         import traceback
         traceback.print_exc()
-        return None, "", make_status("error", f"Unexpected error: {type(e).__name__}: {str(e)}")
+        return None, make_status("error", f"Unexpected error: {type(e).__name__}: {str(e)}")
 
 
 # ─── UI ───────────────────────────────────────────────────────────────────────
@@ -393,7 +354,7 @@ CSS = """
 #status-box textarea { font-size: 0.92rem; }
 """
 
-with gr.Blocks(title="Rice Grain Counter", css=CSS) as demo:
+with gr.Blocks(title="Rice Grain Counter") as demo:
 
     gr.HTML("""
     <div style="padding:18px 12px 10px 12px; background-color:#0F172A; border-radius:10px; margin-bottom:10px;">
@@ -401,7 +362,7 @@ with gr.Blocks(title="Rice Grain Counter", css=CSS) as demo:
         Rice Grain Counter
       </span>
       <p style="color:#CBD5E1;font-size:0.9rem;margin-top:4px;font-family:sans-serif;">
-        Upload a rice image to segment each grain and generate a PDF report.
+        Upload a rice image to segment each grain and generate a report.
       </p>
     </div>
     """)
@@ -436,23 +397,18 @@ with gr.Blocks(title="Rice Grain Counter", css=CSS) as demo:
 
         # ── RIGHT COLUMN ──────────────────────────────────────────────────
         with gr.Column(scale=1):
-            gr.Markdown("### PDF Report Preview")
-            pdf_preview = gr.HTML(
-                value="<div style='height:680px;border:1px dashed #CBD5E1;border-radius:8px;"
-                      "display:flex;align-items:center;justify-content:center;"
-                      "color:#94A3B8;font-family:sans-serif;font-size:0.95rem;'>"
-                      "PDF preview will appear here after analysis.</div>"
-            )
-            pdf_output = gr.File(
-                label="⬇  Download PDF",
+            gr.Markdown("### Report")
+            report_out = gr.Image(
+                label="",
                 interactive=False,
+                
             )
 
     run_btn.click(
         fn=process_image,
         inputs=[inp_image],
-        outputs=[pdf_output, pdf_preview, status_box],
+        outputs=[report_out, status_box],
     )
 
 if __name__ == "__main__":
-    demo.launch(share=True)
+    demo.launch(share=True, css=CSS)