feat: PDF report + guided camera capture with foot silhouette

app.py

@@ -5,7 +5,8 @@ Pipeline visualization:
   2. Multiclass segmentation (background / foot / perilesion / ulcer)
   3. Fitzpatrick/ITA skin type estimation
   4. PWAT scores (raw) + PWAT adjusted by Fitzpatrick debiasing
-  5. Downloadable clinical report (PNG composite + JSON)
+  5. Downloadable clinical report (PDF + JSON)
+  6. Guided camera capture with foot silhouette overlay
 
 Launch locally: python app.py
 Deploy to HF: push this repo to a Hugging Face Space (GPU recommended).
@@ -18,6 +19,7 @@ import tempfile
 import os
 from datetime import datetime
 from PIL import Image, ImageDraw, ImageFont
+from fpdf import FPDF
 from pipeline import WoundNetB7Pipeline
 from src.pwat_estimator import ITEM_NAMES
 
@@ -44,10 +46,164 @@ FITZ_TEXT_RGB = {
 }
 
 
-# ── Report Generation ────────────────────────────────────────────────────────
+# ── Foot Guide Overlay ───────────────────────────────────────────────────────
+
+def generate_foot_guide(width=640, height=480):
+    """Generate a semi-transparent foot silhouette guide overlay for camera capture."""
+    guide = np.zeros((height, width, 4), dtype=np.uint8)
+
+    cx, cy = width // 2, height // 2
+    scale_x = width / 640
+    scale_y = height / 480
+
+    # Foot outline points (plantar view, normalized for 640x480)
+    foot_points = np.array([
+        # Right side (lateral)
+        (370, 420), (380, 380), (385, 340), (385, 300), (382, 260),
+        (378, 220), (370, 180), (360, 150), (348, 120), (335, 100),
+        (325, 85), (318, 72),
+        # Toes (right to left)
+        (320, 60), (325, 48), (318, 38), (305, 42),  # 5th toe
+        (305, 35), (310, 22), (300, 18), (290, 28),   # 4th toe
+        (288, 20), (292, 8), (280, 5), (272, 18),     # 3rd toe
+        (268, 12), (270, -2), (258, -5), (250, 10),   # 2nd toe
+        (245, 5), (242, -10), (228, -8), (230, 12),   # Big toe
+        # Left side (medial)
+        (225, 30), (218, 55), (215, 80), (218, 110),
+        (222, 140), (228, 180), (235, 220), (240, 260),
+        (245, 300), (248, 340), (250, 380), (255, 420),
+        # Heel
+        (270, 445), (300, 455), (330, 450), (355, 435),
+    ], dtype=np.float32)
+
+    # Center and scale
+    foot_center = foot_points.mean(axis=0)
+    foot_points -= foot_center
+    foot_points[:, 0] *= scale_x * 0.85
+    foot_points[:, 1] *= scale_y * 0.85
+    foot_points += [cx, cy]
+    foot_pts = foot_points.astype(np.int32)
+
+    # Draw filled semi-transparent foot area
+    foot_mask = np.zeros((height, width), dtype=np.uint8)
+    cv2.fillPoly(foot_mask, [foot_pts], 255)
+
+    # Semi-transparent green fill
+    guide[foot_mask > 0] = [0, 200, 100, 35]
+
+    # Foot outline (bright green, dashed effect via thick line)
+    cv2.polylines(guide, [foot_pts], True, (0, 220, 120, 200), 3, cv2.LINE_AA)
+
+    # Center crosshair
+    cross_len = 20
+    cv2.line(guide, (cx - cross_len, cy), (cx + cross_len, cy), (255, 255, 255, 150), 1)
+    cv2.line(guide, (cx, cy - cross_len), (cx, cy + cross_len), (255, 255, 255, 150), 1)
+
+    # Corner brackets for framing
+    bracket_len = 40
+    bracket_color = (0, 220, 120, 200)
+    bw = 2
+    margin = 30
+    corners = [
+        (margin, margin),
+        (width - margin, margin),
+        (margin, height - margin),
+        (width - margin, height - margin),
+    ]
+    for (x, y) in corners:
+        dx = bracket_len if x < width // 2 else -bracket_len
+        dy = bracket_len if y < height // 2 else -bracket_len
+        cv2.line(guide, (x, y), (x + dx, y), bracket_color, bw)
+        cv2.line(guide, (x, y), (x, y + dy), bracket_color, bw)
+
+    return guide
+
+
+def apply_foot_guide(frame):
+    """Apply the foot guide overlay to a camera frame."""
+    if frame is None:
+        return None
+
+    h, w = frame.shape[:2]
+    guide = generate_foot_guide(w, h)
+
+    # Composite RGBA guide over RGB frame
+    frame_rgba = cv2.cvtColor(frame, cv2.COLOR_RGB2RGBA)
+    alpha = guide[:, :, 3:4].astype(np.float32) / 255.0
+    blended = frame_rgba.astype(np.float32)
+    overlay = guide.astype(np.float32)
+    blended[:, :, :3] = blended[:, :, :3] * (1 - alpha) + overlay[:, :, :3] * alpha
+    blended[:, :, 3] = 255
+
+    result = blended[:, :, :3].astype(np.uint8)
+
+    # Add instruction text at top
+    cv2.putText(result, "Posicione el pie dentro de la guia",
+                (w // 2 - 200, 30), cv2.FONT_HERSHEY_SIMPLEX, 0.7, (0, 220, 120), 2, cv2.LINE_AA)
+    cv2.putText(result, "Distancia: 30-40 cm | Iluminacion uniforme",
+                (w // 2 - 230, h - 15), cv2.FONT_HERSHEY_SIMPLEX, 0.6, (200, 200, 200), 1, cv2.LINE_AA)
+
+    return result
+
+
+def generate_static_guide():
+    """Generate a static reference guide image with instructions."""
+    W, H = 500, 700
+    img = Image.new("RGB", (W, H), (248, 250, 252))
+    draw = ImageDraw.Draw(img)
+
+    font_title = _get_font(24)
+    font_body = _get_font_regular(16)
+    font_small = _get_font_regular(14)
+
+    # Title
+    draw.text((W // 2 - 130, 15), "Guia de Captura DFU", fill=(31, 41, 55), font=font_title)
+
+    # Draw foot silhouette (simplified)
+    foot_guide_rgba = generate_foot_guide(400, 350)
+    foot_rgb = foot_guide_rgba[:, :, :3]
+    # Make non-zero areas visible on white background
+    mask = foot_guide_rgba[:, :, 3] > 0
+    bg_section = np.full((350, 400, 3), 245, dtype=np.uint8)
+    bg_section[mask] = foot_rgb[mask]
+    # Draw the outline more visibly
+    foot_pil = Image.fromarray(bg_section)
+    img.paste(foot_pil, (50, 55))
+
+    # Border around foot area
+    draw.rectangle([(48, 53), (452, 407)], outline=(209, 213, 219), width=2)
+
+    # Instructions
+    y = 425
+    instructions = [
+        ("1.", "Planta del pie hacia la camara (vista plantar)"),
+        ("2.", "Distancia: 30-40 cm del lente"),
+        ("3.", "Iluminacion uniforme, sin sombras directas"),
+        ("4.", "Fondo neutro (sabana blanca o azul)"),
+        ("5.", "Incluir toda la ulcera + 3-5 cm de piel sana"),
+        ("6.", "Sin flash directo (causa reflejos)"),
+        ("7.", "Pie centrado dentro de la silueta verde"),
+    ]
+    for num, text in instructions:
+        draw.text((30, y), num, fill=(5, 150, 105), font=font_title)
+        draw.text((60, y + 2), text, fill=(55, 65, 81), font=font_body)
+        y += 30
+
+    # Bottom note
+    draw.line([(30, y + 5), (W - 30, y + 5)], fill=(229, 231, 235), width=1)
+    draw.text((30, y + 12),
+              "Tip: Para mejor resultado, capture con luz natural",
+              fill=(107, 114, 128), font=font_small)
+    draw.text((30, y + 32),
+              "difusa. Evite luces cenitales que generan sombra.",
+              fill=(107, 114, 128), font=font_small)
+
+    return np.array(img)
+
+
+# ── PDF Report Generation ────────────────────────────────────────────────────
 
 def _get_font(size):
-    """Get a font, falling back to default if custom fonts unavailable."""
     for name in ["DejaVuSans-Bold.ttf", "DejaVuSans.ttf", "arial.ttf", "LiberationSans-Bold.ttf"]:
         try:
             return ImageFont.truetype(name, size)
@@ -65,229 +221,339 @@ def _get_font_regular(size):
     return ImageFont.load_default()
 
 
-def _draw_text_block(draw, x, y, lines, font, fill=(50, 50, 50), line_spacing=6):
-    """Draw multiple lines of text, return y after last line."""
-    for line in lines:
-        draw.text((x, y), line, fill=fill, font=font)
-        bbox = font.getbbox(line)
-        y += (bbox[3] - bbox[1]) + line_spacing
-    return y
-
-
-def generate_report_image(image_rgb, binary_overlay, multiclass_overlay, result):
-    """Generate a composite clinical report image (PNG, 300 DPI quality)."""
-    # Layout: 2400 x 3200 px (portrait, ~8x10.7 inches at 300 DPI)
-    W, H = 2400, 3200
-    BG = (255, 255, 255)
-    report = Image.new("RGB", (W, H), BG)
-    draw = ImageDraw.Draw(report)
-
-    font_title = _get_font(42)
-    font_subtitle = _get_font(28)
-    font_body = _get_font_regular(24)
-    font_small = _get_font_regular(20)
-    font_label = _get_font(22)
-    font_big = _get_font(52)
-
-    MARGIN = 60
-    COL_W = (W - 3 * MARGIN) // 2
-    IMG_H = 550
-
-    # ── Header ──
-    draw.rectangle([(0, 0), (W, 120)], fill=(31, 41, 55))
-    draw.text((MARGIN, 28), "WoundNetB7 — Informe de Analisis DFU", fill=(255, 255, 255), font=font_title)
-    timestamp = datetime.now().strftime("%Y-%m-%d %H:%M")
-    draw.text((W - MARGIN - 300, 35), timestamp, fill=(156, 163, 175), font=font_body)
-    draw.text((MARGIN, 78), "EfficientNet-B7 + ASPP + CBAM + CoordAttention + TAM  |  Ulcer Dice: 0.927",
-              fill=(156, 163, 175), font=font_small)
-
-    y = 145
-
-    # ── Row 1: Original + Binary Segmentation ──
-    draw.text((MARGIN, y), "1. Imagen Original", fill=(31, 41, 55), font=font_subtitle)
-    draw.text((MARGIN + COL_W + MARGIN, y), "2. Segmentacion Binaria (Ulcera)", fill=(31, 41, 55), font=font_subtitle)
-    y += 40
-
-    # Resize and paste images
-    orig_pil = Image.fromarray(image_rgb).resize((COL_W, IMG_H), Image.LANCZOS)
-    binary_pil = Image.fromarray(binary_overlay).resize((COL_W, IMG_H), Image.LANCZOS)
-    report.paste(orig_pil, (MARGIN, y))
-    report.paste(binary_pil, (MARGIN + COL_W + MARGIN, y))
-
-    # Border
-    for bx in [MARGIN, MARGIN + COL_W + MARGIN]:
-        draw.rectangle([(bx, y), (bx + COL_W, y + IMG_H)], outline=(209, 213, 219), width=2)
-
-    y += IMG_H + 20
-
-    # Image info
-    h_img, w_img = result.image_size
-    ulcer_pct = result.class_distribution.get("ulcer", 0)
-    draw.text((MARGIN, y), f"Resolucion: {w_img}x{h_img} px", fill=(107, 114, 128), font=font_small)
-    draw.text((MARGIN + COL_W + MARGIN, y),
-              f"Area ulcera: {ulcer_pct:.1f}% de la imagen", fill=(107, 114, 128), font=font_small)
-    y += 35
-
-    # ── Row 2: Multiclass + Seg Stats ──
-    draw.line([(MARGIN, y), (W - MARGIN, y)], fill=(229, 231, 235), width=2)
-    y += 15
-    draw.text((MARGIN, y), "3. Segmentacion Multiclase (4 clases)", fill=(31, 41, 55), font=font_subtitle)
-    draw.text((MARGIN + COL_W + MARGIN, y), "Distribucion de Clases", fill=(31, 41, 55), font=font_subtitle)
-    y += 40
-
-    multi_pil = Image.fromarray(multiclass_overlay).resize((COL_W, IMG_H), Image.LANCZOS)
-    report.paste(multi_pil, (MARGIN, y))
-    draw.rectangle([(MARGIN, y), (MARGIN + COL_W, y + IMG_H)], outline=(209, 213, 219), width=2)
-
-    # Seg stats panel
-    stats_x = MARGIN + COL_W + MARGIN
-    stats_y = y + 20
+class DFUReport(FPDF):
+    """Custom PDF report for DFU analysis results."""
+
+    def __init__(self):
+        super().__init__(orientation="P", unit="mm", format="A4")
+        self.set_auto_page_break(auto=True, margin=15)
+        self._setup_fonts()
+
+    def _setup_fonts(self):
+        """Register Unicode font if available, otherwise use built-in."""
+        font_paths = [
+            "/usr/share/fonts/truetype/dejavu/DejaVuSans.ttf",
+            "/usr/share/fonts/TTF/DejaVuSans.ttf",
+            "C:/Windows/Fonts/arial.ttf",
+        ]
+        self._has_unicode = False
+        for fp in font_paths:
+            if os.path.exists(fp):
+                try:
+                    self.add_font("CustomFont", "", fp, uni=True)
+                    bold_fp = fp.replace("DejaVuSans.ttf", "DejaVuSans-Bold.ttf").replace("arial.ttf", "arialbd.ttf")
+                    if os.path.exists(bold_fp):
+                        self.add_font("CustomFont", "B", bold_fp, uni=True)
+                    else:
+                        self.add_font("CustomFont", "B", fp, uni=True)
+                    self._has_unicode = True
+                    break
+                except Exception:
+                    continue
+
+    def _font(self, style="", size=10):
+        if self._has_unicode:
+            self.set_font("CustomFont", style, size)
+        else:
+            self.set_font("Helvetica", style, size)
+
+    def header(self):
+        self.set_fill_color(31, 41, 55)
+        self.rect(0, 0, 210, 22, "F")
+        self._font("B", 14)
+        self.set_text_color(255, 255, 255)
+        self.set_xy(10, 4)
+        self.cell(0, 8, "WoundNetB7 - Informe de Analisis DFU", 0, 0, "L")
+        self._font("", 8)
+        self.set_text_color(156, 163, 175)
+        self.set_xy(10, 13)
+        self.cell(0, 6, "EfficientNet-B7 + ASPP + CBAM + CoordAttention + TAM  |  Ulcer Dice: 0.927", 0, 0, "L")
+        timestamp = datetime.now().strftime("%Y-%m-%d %H:%M")
+        self.set_xy(160, 4)
+        self.cell(40, 8, timestamp, 0, 0, "R")
+        self.ln(20)
+
+    def footer(self):
+        self.set_y(-12)
+        self._font("", 7)
+        self.set_text_color(156, 163, 175)
+        self.cell(0, 5, "WoundNetB7 | Tesis Doctoral | Marcelo Marquez-Murillo | "
+                  "Dice 0.927 (CI 95%: [0.917, 0.936]) | Debiasing: 46.6% gap reduction (p < 1e-55)", 0, 0, "C")
+        self.cell(0, 5, f"Pag {self.page_no()}/{{nb}}", 0, 0, "R")
+
+    def section_title(self, number, title):
+        self._font("B", 11)
+        self.set_text_color(31, 41, 55)
+        self.set_fill_color(243, 244, 246)
+        self.cell(8, 7, str(number), 0, 0, "C", fill=False)
+        self.cell(0, 7, f"  {title}", 0, 1, "L")
+        self.ln(2)
+
+    def add_image_pair(self, img1_path, label1, img2_path, label2):
+        """Add two images side by side with labels."""
+        self._font("", 8)
+        self.set_text_color(107, 114, 128)
+        x = self.get_x()
+        y = self.get_y()
+        img_w = 90
+        img_h = 60
+
+        self.cell(img_w, 4, label1, 0, 0, "C")
+        self.cell(5, 4, "", 0, 0)
+        self.cell(img_w, 4, label2, 0, 1, "C")
+
+        self.image(img1_path, x=x, y=self.get_y(), w=img_w, h=img_h)
+        self.image(img2_path, x=x + img_w + 5, y=self.get_y(), w=img_w, h=img_h)
+        self.ln(img_h + 3)
+
+
+def generate_pdf_report(image_rgb, binary_overlay, multiclass_overlay, result):
+    """Generate a clinical PDF report with all analysis results."""
+    tmpdir = tempfile.mkdtemp(prefix="woundnetb7_report_")
+
+    # Save temp images for embedding in PDF
+    orig_path = os.path.join(tmpdir, "_orig.png")
+    binary_path = os.path.join(tmpdir, "_binary.png")
+    multi_path = os.path.join(tmpdir, "_multi.png")
+
+    Image.fromarray(image_rgb).save(orig_path)
+    Image.fromarray(binary_overlay).save(binary_path)
+    Image.fromarray(multiclass_overlay).save(multi_path)
+
+    pdf = DFUReport()
+    pdf.alias_nb_pages()
+    pdf.add_page()
+
+    # ── Section 1: Images ──
+    pdf.section_title(1, "Segmentacion")
+    pdf.add_image_pair(orig_path, "Imagen Original", binary_path, "Segmentacion Binaria (Ulcera)")
+    pdf.ln(2)
+
+    # Multiclass + legend
+    pdf._font("", 8)
+    pdf.set_text_color(107, 114, 128)
+    x_start = pdf.get_x()
+    y_start = pdf.get_y()
+    pdf.cell(90, 4, "Segmentacion Multiclase", 0, 0, "C")
+    pdf.cell(5, 4, "", 0, 0)
+    pdf.cell(90, 4, "Distribucion de Clases", 0, 1, "C")
+
+    pdf.image(multi_path, x=x_start, y=pdf.get_y(), w=90, h=60)
+
+    # Class distribution on the right
+    legend_x = x_start + 95 + 5
+    legend_y = pdf.get_y() + 5
+
     class_info = [
         ("Pie", result.class_distribution.get("foot", 0), (34, 197, 94)),
         ("Perilesion", result.class_distribution.get("perilesion", 0), (249, 115, 22)),
         ("Ulcera", result.class_distribution.get("ulcer", 0), (239, 68, 68)),
         ("Fondo", result.class_distribution.get("background", 0), (107, 114, 128)),
     ]
-    bar_w = COL_W - 140
-    for cls_name, pct, color in class_info:
-        draw.text((stats_x, stats_y), f"{cls_name}", fill=color, font=font_label)
-        draw.text((stats_x + 160, stats_y), f"{pct:.1f}%", fill=(50, 50, 50), font=font_body)
-        stats_y += 32
-        # Bar background
-        draw.rectangle([(stats_x, stats_y), (stats_x + bar_w, stats_y + 18)],
-                       fill=(229, 231, 235), outline=None)
-        # Bar fill
-        fill_w = max(1, int(bar_w * pct / 100))
-        draw.rectangle([(stats_x, stats_y), (stats_x + fill_w, stats_y + 18)],
-                       fill=color, outline=None)
-        stats_y += 35
-
-    # Legend
-    stats_y += 10
-    legend_items = [
-        ((34, 197, 94), "Pie: tejido sano"),
-        ((249, 115, 22), "Perilesion: zona periulceral"),
-        ((239, 68, 68), "Ulcera: lecho de la herida"),
-    ]
-    for color, text in legend_items:
-        draw.rectangle([(stats_x, stats_y + 2), (stats_x + 16, stats_y + 18)], fill=color)
-        draw.text((stats_x + 24, stats_y), text, fill=(50, 50, 50), font=font_small)
-        stats_y += 28
-
-    y += IMG_H + 20
 
-    # ── Row 3: Fitzpatrick + PWAT ──
-    draw.line([(MARGIN, y), (W - MARGIN, y)], fill=(229, 231, 235), width=2)
-    y += 15
-    draw.text((MARGIN, y), "4. Fitzpatrick / ITA", fill=(31, 41, 55), font=font_subtitle)
-    draw.text((MARGIN + COL_W + MARGIN, y), "5. PWAT Scores (Raw vs Ajustado)", fill=(31, 41, 55), font=font_subtitle)
-    y += 45
-
-    # Fitzpatrick panel
+    for cls_name, pct, (r, g, b) in class_info:
+        pdf.set_xy(legend_x, legend_y)
+        pdf.set_fill_color(r, g, b)
+        pdf.rect(legend_x, legend_y + 1, 4, 4, "F")
+        pdf._font("B", 9)
+        pdf.set_text_color(r, g, b)
+        pdf.set_xy(legend_x + 6, legend_y)
+        pdf.cell(30, 5, cls_name, 0, 0)
+        pdf._font("", 9)
+        pdf.set_text_color(50, 50, 50)
+        pdf.cell(20, 5, f"{pct:.1f}%", 0, 0)
+        # Mini bar
+        bar_x = legend_x + 56
+        bar_w = 30
+        pdf.set_fill_color(229, 231, 235)
+        pdf.rect(bar_x, legend_y + 1, bar_w, 4, "F")
+        pdf.set_fill_color(r, g, b)
+        pdf.rect(bar_x, legend_y + 1, max(0.5, bar_w * pct / 100), 4, "F")
+        legend_y += 10
+
+    pdf.ln(62)
+
+    # Image metadata
+    h_img, w_img = result.image_size
+    pdf._font("", 8)
+    pdf.set_text_color(107, 114, 128)
+    pdf.cell(0, 4, f"Resolucion: {w_img}x{h_img} px  |  Device: {result.device}  |  "
+             f"Area ulcera: {result.class_distribution.get('ulcer', 0):.1f}%", 0, 1)
+    pdf.ln(4)
+
+    # ── Section 2: Fitzpatrick ──
+    pdf.section_title(2, "Estimacion Fitzpatrick / ITA")
     fitz = result.fitzpatrick
-    fitz_x = MARGIN
     if fitz and fitz.confidence > 0:
-        # Colored badge
         ftype = fitz.fitzpatrick_type
-        badge_bg = FITZ_RGB.get(ftype, (229, 231, 235))
-        badge_fg = FITZ_TEXT_RGB.get(ftype, (50, 50, 50))
-        badge_w, badge_h = 220, 120
-        draw.rounded_rectangle(
-            [(fitz_x, y), (fitz_x + badge_w, y + badge_h)],
-            radius=16, fill=badge_bg, outline=(180, 180, 180), width=2
-        )
-        draw.text((fitz_x + 30, y + 15), f"Tipo {ftype}", fill=badge_fg, font=font_big)
-        draw.text((fitz_x + 30, y + 78), fitz.fitzpatrick_label, fill=badge_fg, font=font_small)
-
-        # Details
-        det_x = fitz_x + badge_w + 30
-        det_lines = [
-            f"ITA: {fitz.ita_angle:.1f} +/- {fitz.ita_std:.1f} grados",
-            f"L* medio (piel sana): {fitz.l_skin_mean:.1f}",
-            f"b* medio (piel sana): {fitz.b_skin_mean:.1f}",
-            f"Pixeles sanos: {fitz.healthy_pixels:,}",
-            f"Ratio piel sana: {fitz.healthy_ratio:.1%}",
-            f"Confianza: {fitz.confidence:.0%}",
+        bg = FITZ_RGB.get(ftype, (229, 231, 235))
+        fg = FITZ_TEXT_RGB.get(ftype, (50, 50, 50))
+
+        # Badge
+        x_badge = pdf.get_x()
+        y_badge = pdf.get_y()
+        pdf.set_fill_color(*bg)
+        pdf.set_draw_color(180, 180, 180)
+        pdf.rect(x_badge, y_badge, 35, 20, "DF")
+        pdf._font("B", 16)
+        pdf.set_text_color(*fg)
+        pdf.set_xy(x_badge, y_badge + 2)
+        pdf.cell(35, 9, f"Tipo {ftype}", 0, 0, "C")
+        pdf._font("", 8)
+        pdf.set_xy(x_badge, y_badge + 12)
+        pdf.cell(35, 6, fitz.fitzpatrick_label, 0, 0, "C")
+
+        # Details table
+        pdf.set_text_color(50, 50, 50)
+        pdf._font("", 9)
+        det_x = x_badge + 40
+        det_y = y_badge
+        details = [
+            ("ITA", f"{fitz.ita_angle:.1f} +/- {fitz.ita_std:.1f} grados"),
+            ("L* medio (piel sana)", f"{fitz.l_skin_mean:.1f}"),
+            ("b* medio (piel sana)", f"{fitz.b_skin_mean:.1f}"),
+            ("Pixeles sanos", f"{fitz.healthy_pixels:,}"),
+            ("Ratio piel sana", f"{fitz.healthy_ratio:.1%}"),
+            ("Confianza", f"{fitz.confidence:.0%}"),
         ]
-        _draw_text_block(draw, det_x, y, det_lines, font_body, line_spacing=8)
+        for label, value in details:
+            pdf.set_xy(det_x, det_y)
+            pdf._font("B", 8)
+            pdf.cell(42, 4, f"{label}:", 0, 0)
+            pdf._font("", 8)
+            pdf.cell(50, 4, value, 0, 0)
+            det_y += 4.5
+
+        pdf.set_y(y_badge + 22)
     else:
-        draw.text((fitz_x, y), "No estimable (insuficiente piel sana)", fill=(107, 114, 128), font=font_body)
+        pdf._font("", 9)
+        pdf.set_text_color(107, 114, 128)
+        pdf.cell(0, 5, "No estimable (insuficientes pixeles de piel sana).", 0, 1)
+    pdf.ln(4)
 
-    # PWAT panel
+    # ── Section 3: PWAT ──
+    pdf.section_title(3, "PWAT - Scores Raw vs Ajustados por Fitzpatrick")
     pwat = result.pwat
-    pwat_x = MARGIN + COL_W + MARGIN
     if pwat and pwat.scores_raw:
         ftype_str = pwat.fitzpatrick_type or "III"
 
         # Table header
-        col_positions = [pwat_x, pwat_x + 260, pwat_x + 420, pwat_x + 600, pwat_x + 740]
-        headers = ["Item", "Raw", "Ajustado", "Delta"]
-        for i, (hx, htext) in enumerate(zip(col_positions, headers)):
-            draw.text((hx, y), htext, fill=(55, 65, 81), font=font_label)
-        py = y + 35
-        draw.line([(pwat_x, py), (pwat_x + COL_W - 40, py)], fill=(55, 65, 81), width=2)
-        py += 8
-
+        pdf.set_fill_color(243, 244, 246)
+        pdf._font("B", 9)
+        pdf.set_text_color(55, 65, 81)
+        col_widths = [55, 25, 25, 25, 20, 35]
+        headers = ["Item PWAT", "Raw", "Ajust.", "Delta", "Escala", ""]
+        for w, h in zip(col_widths, headers):
+            pdf.cell(w, 6, h, 1, 0, "C", fill=True)
+        pdf.ln()
+
+        # Table rows
         for item in [3, 4, 5, 6, 7, 8]:
             name = ITEM_NAMES.get(item, f"Item {item}")
             raw = pwat.scores_raw.get(item, 0)
             adj = pwat.scores_adjusted.get(item, 0.0)
             diff = adj - raw
             diff_str = f"{diff:+.1f}" if abs(diff) > 0.01 else "0.0"
-            diff_color = (5, 150, 105) if diff < -0.05 else (107, 114, 128)
-
-            draw.text((col_positions[0], py), name, fill=(50, 50, 50), font=font_body)
-            draw.text((col_positions[1], py), str(raw), fill=(50, 50, 50), font=font_body)
-            draw.text((col_positions[2], py), f"{adj:.1f}", fill=(50, 50, 50), font=font_body)
-            draw.text((col_positions[3], py), diff_str, fill=diff_color, font=font_label)
-
-            # Mini bar (raw)
-            bar_x = col_positions[1] + 40
-            bar_y = py + 6
-            bar_total = 120
-            draw.rectangle([(bar_x, bar_y), (bar_x + bar_total, bar_y + 10)], fill=(229, 231, 235))
-            draw.rectangle([(bar_x, bar_y), (bar_x + int(bar_total * raw / 4), bar_y + 10)], fill=(239, 68, 68))
 
-            py += 38
+            pdf._font("", 9)
+            pdf.set_text_color(50, 50, 50)
+            pdf.cell(col_widths[0], 6, name, "LB", 0, "L")
+            pdf.cell(col_widths[1], 6, str(raw), "B", 0, "C")
+            pdf.cell(col_widths[2], 6, f"{adj:.1f}", "B", 0, "C")
+
+            if diff < -0.05:
+                pdf.set_text_color(5, 150, 105)
+            else:
+                pdf.set_text_color(107, 114, 128)
+            pdf._font("B", 9)
+            pdf.cell(col_widths[3], 6, diff_str, "B", 0, "C")
+
+            # Visual bar
+            pdf.set_text_color(50, 50, 50)
+            pdf._font("", 7)
+            bar_x = pdf.get_x() + 2
+            bar_y = pdf.get_y() + 1.5
+            pdf.set_fill_color(229, 231, 235)
+            pdf.rect(bar_x, bar_y, col_widths[4] - 4, 3, "F")
+            pdf.set_fill_color(239, 68, 68)
+            pdf.rect(bar_x, bar_y, max(0.3, (col_widths[4] - 4) * raw / 4), 3, "F")
+            pdf.cell(col_widths[4], 6, "", "B", 0)
+
+            # Severity label
+            pdf._font("", 7)
+            sev_labels = {0: "Normal", 1: "Leve", 2: "Moderado", 3: "Severo", 4: "Extremo"}
+            pdf.set_text_color(107, 114, 128)
+            pdf.cell(col_widths[5], 6, sev_labels.get(raw, ""), "RB", 0, "L")
+            pdf.ln()
 
         # Total row
-        draw.line([(pwat_x, py), (pwat_x + COL_W - 40, py)], fill=(55, 65, 81), width=2)
-        py += 8
-        draw.text((col_positions[0], py), "TOTAL", fill=(31, 41, 55), font=font_label)
-        draw.text((col_positions[1], py), str(pwat.total_raw), fill=(31, 41, 55), font=font_label)
-        draw.text((col_positions[2], py), f"{pwat.total_adjusted:.1f}", fill=(31, 41, 55), font=font_label)
+        pdf.set_fill_color(31, 41, 55)
+        pdf._font("B", 10)
+        pdf.set_text_color(255, 255, 255)
+        pdf.cell(col_widths[0], 7, "TOTAL", 1, 0, "L", fill=True)
+        pdf.cell(col_widths[1], 7, str(pwat.total_raw), 1, 0, "C", fill=True)
+        pdf.cell(col_widths[2], 7, f"{pwat.total_adjusted:.1f}", 1, 0, "C", fill=True)
         total_diff = pwat.total_adjusted - pwat.total_raw
         total_diff_str = f"{total_diff:+.1f}" if abs(total_diff) > 0.01 else "0.0"
-        total_color = (5, 150, 105) if total_diff < -0.05 else (107, 114, 128)
-        draw.text((col_positions[3], py), total_diff_str, fill=total_color, font=font_label)
+        pdf.cell(col_widths[3], 7, total_diff_str, 1, 0, "C", fill=True)
+        pdf.cell(col_widths[4] + col_widths[5], 7, f"Fitzpatrick {ftype_str}", 1, 0, "C", fill=True)
+        pdf.ln(10)
+
+        # Score interpretation
+        pdf._font("", 8)
+        pdf.set_text_color(107, 114, 128)
+        pdf.cell(0, 4, "Escala: 0 (normal) - 4 (extremo) por item. Total: 0-24.", 0, 1)
+        pdf.cell(0, 4, f"Correccion de sesgo aplicada segun Fitzpatrick tipo {ftype_str} "
+                 "(calibrada en 61 imagenes, r=0.975).", 0, 1)
+
+        # Interpretation ranges
+        pdf.ln(2)
+        pdf._font("B", 8)
+        pdf.set_text_color(55, 65, 81)
+        pdf.cell(0, 4, "Interpretacion del puntaje total:", 0, 1)
+        pdf._font("", 8)
+        ranges = [
+            ("0-6:", "Herida en buen estado de cicatrizacion", (34, 197, 94)),
+            ("7-12:", "Herida con compromiso moderado, requiere seguimiento", (249, 115, 22)),
+            ("13-18:", "Herida con compromiso severo, ajustar tratamiento", (239, 68, 68)),
+            ("19-24:", "Herida critica, evaluacion urgente", (180, 30, 30)),
+        ]
+        for label, desc, (r, g, b) in ranges:
+            pdf.set_fill_color(r, g, b)
+            pdf.rect(pdf.get_x(), pdf.get_y() + 0.5, 3, 3, "F")
+            pdf._font("B", 8)
+            pdf.set_text_color(r, g, b)
+            pdf.set_x(pdf.get_x() + 5)
+            pdf.cell(15, 4, label, 0, 0)
+            pdf._font("", 8)
+            pdf.set_text_color(80, 80, 80)
+            pdf.cell(0, 4, desc, 0, 1)
 
-        py += 40
-        draw.text((pwat_x, py), f"Correccion aplicada: Fitzpatrick tipo {ftype_str}",
-                  fill=(107, 114, 128), font=font_small)
     else:
-        draw.text((pwat_x, y), "No estimable (ulcera no detectada)", fill=(107, 114, 128), font=font_body)
-
-    # ── Footer ──
-    draw.rectangle([(0, H - 90), (W, H)], fill=(249, 250, 251))
-    draw.line([(0, H - 90), (W, H - 90)], fill=(209, 213, 219), width=1)
-    footer_lines = [
-        "WoundNetB7  |  Tesis Doctoral  |  Marcelo Marquez-Murillo",
-        "Ulcer Dice: 0.927 (CI 95%: [0.917, 0.936])  |  Debiasing: 46.6% max group gap reduction (p < 1e-55)",
-    ]
-    draw.text((MARGIN, H - 80), footer_lines[0], fill=(107, 114, 128), font=font_small)
-    draw.text((MARGIN, H - 52), footer_lines[1], fill=(156, 163, 175), font=font_small)
+        pdf._font("", 9)
+        pdf.set_text_color(107, 114, 128)
+        pdf.cell(0, 5, "No estimable (ulcera no detectada o area insuficiente).", 0, 1)
 
-    return report
+    # Save PDF
+    pdf_path = os.path.join(tmpdir, "WoundNetB7_Informe_DFU.pdf")
+    pdf.output(pdf_path)
+
+    # Cleanup temp images
+    for p in [orig_path, binary_path, multi_path]:
+        try:
+            os.remove(p)
+        except OSError:
+            pass
+
+    return pdf_path
 
 
 def generate_report_files(image_rgb, binary_overlay, multiclass_overlay, result):
-    """Generate downloadable report files (PNG + JSON)."""
+    """Generate downloadable report files (PDF + JSON)."""
     tmpdir = tempfile.mkdtemp(prefix="woundnetb7_report_")
 
-    # PNG report
-    report_img = generate_report_image(image_rgb, binary_overlay, multiclass_overlay, result)
-    png_path = os.path.join(tmpdir, "WoundNetB7_Informe_DFU.png")
-    report_img.save(png_path, "PNG", dpi=(300, 300))
+    # PDF report
+    pdf_path = generate_pdf_report(image_rgb, binary_overlay, multiclass_overlay, result)
 
     # JSON report
     report_data = result.to_dict()
@@ -303,12 +569,11 @@ def generate_report_files(image_rgb, binary_overlay, multiclass_overlay, result)
     with open(json_path, "w", encoding="utf-8") as f:
         json.dump(report_data, f, indent=2, ensure_ascii=False)
 
-    return [png_path, json_path]
+    return [pdf_path, json_path]
 
 
 # ── Gradio callbacks ─────────────────────────────────────────────────────────
 
-# Store last analysis result for report generation
 _last_analysis = {}
 
 
@@ -325,7 +590,6 @@ def analyze_image(image):
     binary_overlay = pipe.visualize_binary(img_bgr, result)
     multiclass_overlay = pipe.visualize_multiclass(img_bgr, result)
 
-    # Cache for report
     _last_analysis["image_rgb"] = image
     _last_analysis["binary"] = binary_overlay
     _last_analysis["multiclass"] = multiclass_overlay
@@ -339,8 +603,12 @@ def analyze_image(image):
     return binary_overlay, multiclass_overlay, seg_stats, fitz_html, pwat_html, json_out
 
 
+def analyze_from_camera(image):
+    """Same analysis but from camera capture (routes to same pipeline)."""
+    return analyze_image(image)
+
+
 def download_report():
-    """Generate and return downloadable report files."""
     if not _last_analysis:
         return None
     return generate_report_files(
@@ -356,10 +624,8 @@ def download_report():
 def build_fitz_html(fitz):
     if fitz is None or fitz.confidence == 0:
         return "<p style='color:#6b7280;'>No se pudo estimar (insuficientes pixeles de piel sana).</p>"
-
     bg = FITZ_COLORS.get(fitz.fitzpatrick_type, "#e5e7eb")
     fg = FITZ_TEXT_COLORS.get(fitz.fitzpatrick_type, "#1f2937")
-
     return f"""
     <div style="display:flex; gap:16px; align-items:center; flex-wrap:wrap;">
       <div style="background:{bg}; color:{fg}; border-radius:12px; padding:18px 28px;
@@ -374,27 +640,22 @@ def build_fitz_html(fitz):
         <b>Pixeles sanos:</b> {fitz.healthy_pixels:,}<br>
         <b>Confianza:</b> {fitz.confidence:.0%}
       </div>
-    </div>
-    """
+    </div>"""
 
 
 def build_pwat_html(pwat):
     if pwat is None or not pwat.scores_raw:
         return "<p style='color:#6b7280;'>No se pudo estimar PWAT (ulcera no detectada o muy pequena).</p>"
-
     rows = ""
     for item in [3, 4, 5, 6, 7, 8]:
         name = ITEM_NAMES.get(item, f"Item {item}")
         raw = pwat.scores_raw.get(item, 0)
         adj = pwat.scores_adjusted.get(item, 0.0)
         diff = adj - raw
-
         diff_color = "#059669" if diff < -0.05 else "#6b7280"
         diff_str = f"{diff:+.1f}" if abs(diff) > 0.01 else "0.0"
-
         raw_pct = raw / 4 * 100
         adj_pct = adj / 4 * 100
-
         rows += f"""
         <tr>
           <td style="padding:8px 12px; font-weight:500;">{name}</td>
@@ -414,15 +675,11 @@ def build_pwat_html(pwat):
               <span style="font-weight:600; min-width:30px;">{adj:.1f}</span>
             </div>
           </td>
-          <td style="padding:8px 12px; text-align:center; color:{diff_color}; font-weight:600;">
-            {diff_str}
-          </td>
+          <td style="padding:8px 12px; text-align:center; color:{diff_color}; font-weight:600;">{diff_str}</td>
         </tr>"""
-
     total_diff = pwat.total_adjusted - pwat.total_raw
     total_color = "#059669" if total_diff < -0.05 else "#6b7280"
     total_diff_str = f"{total_diff:+.1f}" if abs(total_diff) > 0.01 else "0.0"
-
     return f"""
     <table style="width:100%; border-collapse:collapse; font-size:0.92em;">
       <thead>
@@ -433,8 +690,7 @@ def build_pwat_html(pwat):
           <th style="padding:10px 12px; text-align:center;">&Delta;</th>
         </tr>
       </thead>
-      <tbody>
-        {rows}
+      <tbody>{rows}
         <tr style="border-top:2px solid #374151; font-weight:700; font-size:1.05em;">
           <td style="padding:10px 12px;">TOTAL</td>
           <td style="padding:10px 12px; text-align:center;">{pwat.total_raw}</td>
@@ -444,18 +700,16 @@ def build_pwat_html(pwat):
       </tbody>
     </table>
     <p style="font-size:0.82em; color:#6b7280; margin-top:8px;">
-      Escala: 0 (mejor) &mdash; 4 (peor) por item &bull;
-      Correccion Fitzpatrick tipo {pwat.fitzpatrick_type} aplicada &bull;
+      Escala: 0 (mejor) - 4 (peor) por item |
+      Correccion Fitzpatrick tipo {pwat.fitzpatrick_type} aplicada |
       Items: 3=Tipo necrotico, 4=Cantidad necrotica, 5=Tipo granulacion,
       6=Cantidad granulacion, 7=Bordes, 8=Piel periulceral
-    </p>
-    """
+    </p>"""
 
 
 def build_seg_stats_html(result):
     dist = result.class_distribution
     colors = {"background": "#374151", "foot": "#22c55e", "perilesion": "#f97316", "ulcer": "#ef4444"}
-
     bars = ""
     for cls_name in ["foot", "perilesion", "ulcer"]:
         pct = dist.get(cls_name, 0)
@@ -471,43 +725,27 @@ def build_seg_stats_html(result):
             <div style="background:{color}; height:100%; width:{pct}%; border-radius:4px;"></div>
           </div>
         </div>"""
-
     return f"""
     <div style="padding:4px 0;">
       <p style="font-size:0.85em; color:#6b7280; margin-bottom:10px;">
-        Imagen: {result.image_size[1]}x{result.image_size[0]} &bull; Device: {result.device}
+        Imagen: {result.image_size[1]}x{result.image_size[0]} | Device: {result.device}
       </p>
       {bars}
-    </div>
-    """
+    </div>"""
 
 
 # ── Gradio UI ────────────────────────────────────────────────────────────────
 
 css = """
 .step-header {
-    display: flex;
-    align-items: center;
-    gap: 10px;
-    margin-bottom: 12px;
+    display: flex; align-items: center; gap: 10px; margin-bottom: 12px;
 }
 .step-number {
-    background: #1f2937;
-    color: white;
-    border-radius: 50%;
-    width: 30px;
-    height: 30px;
-    display: flex;
-    align-items: center;
-    justify-content: center;
-    font-weight: 700;
-    font-size: 0.9em;
-    flex-shrink: 0;
-}
-.step-title {
-    font-weight: 600;
-    font-size: 1.1em;
+    background: #1f2937; color: white; border-radius: 50%;
+    width: 30px; height: 30px; display: flex; align-items: center;
+    justify-content: center; font-weight: 700; font-size: 0.9em; flex-shrink: 0;
 }
+.step-title { font-weight: 600; font-size: 1.1em; }
 """
 
 with gr.Blocks(
@@ -525,129 +763,173 @@ with gr.Blocks(
     </div>
     """)
 
-    with gr.Row():
-        with gr.Column(scale=1):
-            input_image = gr.Image(label="Imagen DFU", type="numpy")
-            analyze_btn = gr.Button("Analizar", variant="primary", size="lg")
+    with gr.Tabs():
+        # ══════════════════════════════════════════════════════════════════════
+        # TAB 1: Analisis (upload o galeria)
+        # ══════════════════════════════════════════════════════════════════════
+        with gr.Tab("Analisis DFU"):
+            with gr.Row():
+                with gr.Column(scale=1):
+                    input_image = gr.Image(label="Imagen DFU", type="numpy",
+                                           sources=["upload", "clipboard"])
+                    analyze_btn = gr.Button("Analizar", variant="primary", size="lg")
+                    gr.HTML("""
+                    <div style="font-size:0.82em; color:#6b7280; margin-top:8px; line-height:1.6;">
+                      <b>Pipeline:</b> La imagen pasa por 4 etapas secuenciales.<br>
+                      <b>Modelo:</b> WoundNetB7 con Combo Loss + Small Object Loss.
+                      Atencion: CBAM, CoordAttention, TAM (fractal + Euler).<br>
+                      <b>TTA:</b> 6 augmentaciones en inferencia.
+                    </div>
+                    """)
+
+            # Step 1
+            gr.HTML("""<div class="step-header"><div class="step-number">1</div>
+              <div class="step-title">Segmentacion Binaria de la Ulcera</div></div>""")
+            with gr.Row():
+                with gr.Column(scale=1):
+                    output_binary = gr.Image(label="Mascara Binaria Ulcera (WoundNetB7)")
+                with gr.Column(scale=1):
+                    output_seg_stats = gr.HTML(label="Estadisticas de Segmentacion")
+
+            # Step 2
+            gr.HTML("""<div class="step-header" style="margin-top:12px;"><div class="step-number">2</div>
+              <div class="step-title">Segmentacion Multiclase (4 clases)</div></div>""")
+            with gr.Row():
+                with gr.Column(scale=1):
+                    output_multiclass = gr.Image(label="Overlay Multiclase")
+                with gr.Column(scale=1):
+                    gr.HTML("""
+                    <div style="padding:12px;">
+                      <p style="font-weight:600; margin-bottom:10px;">Leyenda de clases:</p>
+                      <div style="display:flex; flex-direction:column; gap:8px;">
+                        <div style="display:flex; align-items:center; gap:8px;">
+                          <div style="width:20px; height:20px; background:#22c55e; border-radius:4px;"></div>
+                          <span><b>Pie</b> — tejido sano</span>
+                        </div>
+                        <div style="display:flex; align-items:center; gap:8px;">
+                          <div style="width:20px; height:20px; background:#f97316; border-radius:4px;"></div>
+                          <span><b>Perilesion</b> — zona periulceral</span>
+                        </div>
+                        <div style="display:flex; align-items:center; gap:8px;">
+                          <div style="width:20px; height:20px; background:#ef4444; border-radius:4px;"></div>
+                          <span><b>Ulcera</b> — lecho de la herida</span>
+                        </div>
+                      </div>
+                    </div>""")
+
+            # Step 3
+            gr.HTML("""<div class="step-header" style="margin-top:12px;"><div class="step-number">3</div>
+              <div class="step-title">Estimacion Fitzpatrick / ITA</div></div>""")
+            output_fitz = gr.HTML()
+
+            # Step 4
+            gr.HTML("""<div class="step-header" style="margin-top:12px;"><div class="step-number">4</div>
+              <div class="step-title">PWAT — Scores Raw vs Ajustados por Fitzpatrick</div></div>""")
+            output_pwat = gr.HTML()
+
+            # Download
+            gr.HTML("""<div class="step-header" style="margin-top:16px;">
+              <div class="step-number" style="background:#059669;">&#8681;</div>
+              <div class="step-title">Descargar Informe Clinico</div></div>
+            <p style="font-size:0.88em; color:#6b7280; margin-bottom:8px;">
+              Genera un informe PDF con todas las visualizaciones y datos estructurados.
+              Primero analiza una imagen.</p>""")
+            download_btn = gr.Button("Descargar Informe PDF", variant="secondary", size="lg")
+            output_files = gr.File(label="Archivos del Informe (PDF + JSON)", file_count="multiple")
+
+            with gr.Accordion("JSON completo (para integracion)", open=False):
+                output_json = gr.Code(label="JSON Output", language="json")
+
+            analyze_btn.click(
+                fn=analyze_image,
+                inputs=[input_image],
+                outputs=[output_binary, output_multiclass, output_seg_stats,
+                         output_fitz, output_pwat, output_json],
+            )
+            download_btn.click(fn=download_report, inputs=[], outputs=[output_files])
+
+        # ══════════════════════════════════════════════════════════════════════
+        # TAB 2: Captura Guiada (webcam con guia de pie)
+        # ══════════════════════════════════════════════════════════════════════
+        with gr.Tab("Captura Guiada"):
             gr.HTML("""
-            <div style="font-size:0.82em; color:#6b7280; margin-top:8px; line-height:1.6;">
-              <b>Pipeline:</b> La imagen pasa por 4 etapas secuenciales.<br>
-              <b>Modelo:</b> WoundNetB7 entrenado con Combo Loss + Small Object Loss
-              para ulceras pequenas. Mecanismos de atencion: CBAM (canal+espacial),
-              CoordAttention (posicional), TAM (topologico con dimension fractal
-              y caracteristica de Euler).<br>
-              <b>TTA:</b> 6 augmentaciones en inferencia (flips + rotaciones).
+            <div style="padding:16px 0;">
+              <h2 style="font-size:1.4em; margin:0 0 8px;">Captura Guiada para Personal Sanitario</h2>
+              <p style="color:#6b7280; line-height:1.6;">
+                Use la camara del dispositivo para capturar una imagen del pie diabetico.
+                La silueta verde guia la posicion correcta del pie para un analisis optimo.
+              </p>
             </div>
             """)
 
-    # ── Step 1: Binary Segmentation ──
-    gr.HTML("""
-    <div class="step-header">
-      <div class="step-number">1</div>
-      <div class="step-title">Segmentacion Binaria de la Ulcera</div>
-    </div>
-    """)
-    with gr.Row():
-        with gr.Column(scale=1):
-            output_binary = gr.Image(label="Mascara Binaria Ulcera (WoundNetB7)")
-        with gr.Column(scale=1):
-            output_seg_stats = gr.HTML(label="Estadisticas de Segmentacion")
+            with gr.Row():
+                with gr.Column(scale=3):
+                    camera_input = gr.Image(
+                        label="Camara — Posicione el pie dentro de la guia",
+                        type="numpy",
+                        sources=["webcam"],
+                    )
+                    camera_analyze_btn = gr.Button("Capturar y Analizar", variant="primary", size="lg")
+
+                with gr.Column(scale=2):
+                    guide_image = gr.Image(
+                        label="Guia de Posicionamiento",
+                        value=generate_static_guide(),
+                        interactive=False,
+                    )
 
-    # ── Step 2: Multiclass Segmentation ──
-    gr.HTML("""
-    <div class="step-header" style="margin-top:12px;">
-      <div class="step-number">2</div>
-      <div class="step-title">Segmentacion Multiclase (4 clases)</div>
-    </div>
-    """)
-    with gr.Row():
-        with gr.Column(scale=1):
-            output_multiclass = gr.Image(label="Overlay Multiclase")
-        with gr.Column(scale=1):
             gr.HTML("""
-            <div style="padding:12px;">
-              <p style="font-weight:600; margin-bottom:10px;">Leyenda de clases:</p>
-              <div style="display:flex; flex-direction:column; gap:8px;">
-                <div style="display:flex; align-items:center; gap:8px;">
-                  <div style="width:20px; height:20px; background:#22c55e; border-radius:4px;"></div>
-                  <span><b>Pie</b> &mdash; tejido sano del pie</span>
-                </div>
-                <div style="display:flex; align-items:center; gap:8px;">
-                  <div style="width:20px; height:20px; background:#f97316; border-radius:4px;"></div>
-                  <span><b>Perilesion</b> &mdash; zona periulceral</span>
-                </div>
-                <div style="display:flex; align-items:center; gap:8px;">
-                  <div style="width:20px; height:20px; background:#ef4444; border-radius:4px;"></div>
-                  <span><b>Ulcera</b> &mdash; lecho de la herida</span>
-                </div>
-              </div>
-              <p style="font-size:0.82em; color:#6b7280; margin-top:12px;">
-                Modelo multiclase con Combo Loss (Dice + CE ponderado) +
-                Small Object Focal Loss para deteccion de ulceras pequenas.
-                Arquitectura con skip connections y ASPP (rates 6, 12, 18)
-                para capturar contexto multi-escala.
+            <div style="background:#f0fdf4; border:1px solid #bbf7d0; border-radius:10px;
+                        padding:16px; margin:12px 0;">
+              <p style="font-weight:700; color:#166534; margin:0 0 8px;">
+                Instrucciones para el personal sanitario:
               </p>
+              <div style="display:grid; grid-template-columns:1fr 1fr; gap:8px 24px; font-size:0.92em; color:#15803d;">
+                <div>1. Planta del pie mirando a la camara</div>
+                <div>2. Distancia: 30-40 cm del lente</div>
+                <div>3. Iluminacion uniforme, sin sombras</div>
+                <div>4. Fondo neutro (sabana blanca/azul)</div>
+                <div>5. Incluir toda la ulcera + piel sana periferica</div>
+                <div>6. Evitar flash directo (causa reflejos)</div>
+                <div>7. Mantener el dispositivo estable</div>
+                <div>8. Limpiar el lente antes de capturar</div>
+              </div>
             </div>
             """)
 
-    # ── Step 3: Fitzpatrick/ITA ──
-    gr.HTML("""
-    <div class="step-header" style="margin-top:12px;">
-      <div class="step-number">3</div>
-      <div class="step-title">Estimacion Fitzpatrick / ITA</div>
-    </div>
-    """)
-    output_fitz = gr.HTML()
+            # Results from camera capture
+            gr.HTML("""<div class="step-header" style="margin-top:16px;">
+              <div class="step-number">1</div>
+              <div class="step-title">Resultado de Segmentacion</div></div>""")
+            with gr.Row():
+                cam_binary = gr.Image(label="Mascara Binaria Ulcera")
+                cam_multiclass = gr.Image(label="Overlay Multiclase")
 
-    # ── Step 4: PWAT ──
-    gr.HTML("""
-    <div class="step-header" style="margin-top:12px;">
-      <div class="step-number">4</div>
-      <div class="step-title">PWAT &mdash; Scores Raw vs Ajustados por Fitzpatrick</div>
-    </div>
-    """)
-    output_pwat = gr.HTML()
+            with gr.Row():
+                cam_seg_stats = gr.HTML()
 
-    # ── Download Report ──
-    gr.HTML("""
-    <div class="step-header" style="margin-top:16px;">
-      <div class="step-number" style="background:#059669;">&#8681;</div>
-      <div class="step-title">Descargar Informe Clinico</div>
-    </div>
-    <p style="font-size:0.88em; color:#6b7280; margin-bottom:8px;">
-      Genera un informe compuesto (PNG 300 DPI) con todas las visualizaciones
-      y un archivo JSON con los datos estructurados. Primero analiza una imagen.
-    </p>
-    """)
-    download_btn = gr.Button("Descargar Informe", variant="secondary", size="lg")
-    output_files = gr.File(label="Archivos del Informe", file_count="multiple")
-
-    # ── JSON (collapsible) ──
-    with gr.Accordion("JSON completo (para integracion)", open=False):
-        output_json = gr.Code(label="JSON Output", language="json")
-
-    # ── Wire events ──
-    analyze_btn.click(
-        fn=analyze_image,
-        inputs=[input_image],
-        outputs=[
-            output_binary,
-            output_multiclass,
-            output_seg_stats,
-            output_fitz,
-            output_pwat,
-            output_json,
-        ],
-    )
+            gr.HTML("""<div class="step-header"><div class="step-number">2</div>
+              <div class="step-title">Fitzpatrick + PWAT</div></div>""")
+            cam_fitz = gr.HTML()
+            cam_pwat = gr.HTML()
 
-    download_btn.click(
-        fn=download_report,
-        inputs=[],
-        outputs=[output_files],
-    )
+            cam_download_btn = gr.Button("Descargar Informe PDF", variant="secondary", size="lg")
+            cam_files = gr.File(label="Archivos del Informe", file_count="multiple")
+
+            with gr.Accordion("JSON completo", open=False):
+                cam_json = gr.Code(label="JSON Output", language="json")
+
+            camera_analyze_btn.click(
+                fn=analyze_from_camera,
+                inputs=[camera_input],
+                outputs=[cam_binary, cam_multiclass, cam_seg_stats,
+                         cam_fitz, cam_pwat, cam_json],
+            )
+            cam_download_btn.click(fn=download_report, inputs=[], outputs=[cam_files])
 
     gr.HTML("""
-    <div style="text-align:center; padding:16px 0; font-size:0.82em; color:#9ca3af; border-top:1px solid #e5e7eb; margin-top:20px;">
+    <div style="text-align:center; padding:16px 0; font-size:0.82em; color:#9ca3af;
+                border-top:1px solid #e5e7eb; margin-top:20px;">
       WoundNetB7 &bull; Tesis Doctoral &bull; Marcelo Marquez-Murillo &bull;
       Ulcer Dice 0.927 (CI 95%: [0.917, 0.936]) &bull;
       Debiasing: 46.6% max group gap reduction (p &lt; 10<sup>-55</sup>)