Upload 4 files

README.md

@@ -1,14 +1,13 @@
 ---
 title: Design Analyzer
-emoji: 🐠
-colorFrom: gray
-colorTo: blue
+emoji: 🎯
+colorFrom: blue
+colorTo: yellow
 sdk: gradio
-sdk_version: 6.20.0
-python_version: '3.13'
 app_file: app.py
 pinned: false
-short_description: Helps With Your design
 ---
 
-Check out the configuration reference at https://huggingface.co/docs/hub/spaces-config-reference
+# Design Analyzer
+Upload a design to check where attention is drawn, plus text contrast and readability.
+Powered by MSI-Net (Kroner et al., Neural Networks 2020).

app.py

@@ -0,0 +1,282 @@
+import cv2
+import numpy as np
+import gradio as gr
+from PIL import Image
+import tensorflow as tf
+import keras
+from huggingface_hub import snapshot_download
+import pytesseract
+
+_msi_model = None
+
+
+def load_msi_net():
+    global _msi_model
+    if _msi_model is None:
+        hf_dir = snapshot_download(repo_id="alexanderkroner/MSI-Net")
+        _msi_model = keras.layers.TFSMLayer(hf_dir, call_endpoint="serving_default")
+    return _msi_model
+
+
+def get_target_shape(original_shape):
+    ar = original_shape[0] / original_shape[1]
+    square_mode = abs(ar - 1.0)
+    landscape_mode = abs(ar - 240 / 320)
+    portrait_mode = abs(ar - 320 / 240)
+    best = min(square_mode, landscape_mode, portrait_mode)
+    if best == square_mode:
+        return (320, 320)
+    elif best == landscape_mode:
+        return (240, 320)
+    else:
+        return (320, 240)
+
+
+def preprocess_input(input_image, target_shape):
+    t = tf.expand_dims(input_image, axis=0)
+    t = tf.image.resize(t, target_shape, preserve_aspect_ratio=True)
+    vp = target_shape[0] - t.shape[1]
+    hp = target_shape[1] - t.shape[2]
+    v1, v2 = vp // 2, vp - vp // 2
+    h1, h2 = hp // 2, hp - hp // 2
+    t = tf.pad(t, [[0, 0], [v1, v2], [h1, h2], [0, 0]])
+    return t, [v1, v2], [h1, h2]
+
+
+def postprocess_output(output_tensor, vp, hp, original_shape):
+    output_tensor = output_tensor[:, vp[0]:output_tensor.shape[1] - vp[1], hp[0]:output_tensor.shape[2] - hp[1], :]
+    output_tensor = tf.image.resize(output_tensor, original_shape)
+    return output_tensor.numpy().squeeze()
+
+
+def compute_saliency_map(pil_image):
+    model = load_msi_net()
+    input_image = np.array(pil_image.convert("RGB"), dtype=np.float32)
+    original_shape = input_image.shape[:2]
+    target_shape = get_target_shape(original_shape)
+    input_tensor, v_pad, h_pad = preprocess_input(input_image, target_shape)
+    raw_output = model(input_tensor)
+    output_tensor = list(raw_output.values())[0] if isinstance(raw_output, dict) else raw_output
+    saliency = postprocess_output(output_tensor, v_pad, h_pad, original_shape)
+    saliency = saliency.astype(np.float32)
+    saliency -= saliency.min()
+    if saliency.max() > 0:
+        saliency /= saliency.max()
+    return saliency
+
+
+def render_heatmap_overlay(img_bgr, saliency_map, alpha=0.45):
+    heat_u8 = (saliency_map * 255).astype(np.uint8)
+    heat_color = cv2.applyColorMap(heat_u8, cv2.COLORMAP_JET)
+    return cv2.addWeighted(heat_color, alpha, img_bgr, 1 - alpha, 0)
+
+
+def compute_attention_scores(saliency_map):
+    flat = np.sort(saliency_map.flatten())
+    n = len(flat)
+    cum = np.cumsum(flat)
+    gini = (n + 1 - 2 * np.sum(cum) / (cum[-1] + 1e-8)) / n
+    focus_score = float(gini) * 100
+    spread_score = float((saliency_map >= 0.5).mean()) * 100
+    return {"focus_score": round(focus_score, 1), "spread_score": round(spread_score, 1)}
+
+
+def compute_overall_grade(focus_score, spread_score, read):
+    readability_score = max(0, 100 - read['contrast_issues'] * 15 - read['small_text_issues'] * 10)
+    total = round(0.55 * focus_score + 0.20 * spread_score + 0.25 * readability_score)
+    total = max(0, min(100, total))
+    if total >= 75:
+        grade = "Good"
+    elif total >= 50:
+        grade = "Fair"
+    else:
+        grade = "Needs Work"
+    return total, grade
+
+
+def generate_recommendations(saliency_map, scores, read, img_h, img_w):
+    tips = []
+    bottom_band = saliency_map[int(img_h * 0.85):, :]
+    bottom_avg = bottom_band.mean()
+    if bottom_avg < 0.25:
+        tips.append("Your bottom section (often where CTAs or contact info sit) is getting low attention. Consider bolder color contrast or larger text there.")
+
+    if scores['focus_score'] < 40:
+        tips.append("Attention is scattered with no clear focal point. Consider making one element (headline, product, or offer) visually dominant.")
+    elif scores['focus_score'] > 90:
+        tips.append("Attention is very narrowly focused on one spot - double check other important elements (logo, CTA) are not being ignored.")
+
+    if scores['spread_score'] < 3:
+        tips.append("Very little of the design pulls attention beyond the main hotspot. Secondary elements may go unnoticed by viewers.")
+
+    if read['contrast_issues'] > 0:
+        tips.append(f"Fix contrast on {read['contrast_issues']} text element(s) - darken text or lighten its background to reach 4.5:1 minimum.")
+    if read['small_text_issues'] > 0:
+        tips.append(f"Increase size on {read['small_text_issues']} text element(s) - text under ~1.2% of image height risks being unreadable.")
+
+    if not tips:
+        tips.append("No major issues detected - this design is in solid shape.")
+
+    return tips
+
+
+def identify_hotspots(saliency_map, img_h, img_w, top_n=4):
+    threshold = np.percentile(saliency_map, 85)
+    binary = (saliency_map >= threshold).astype(np.uint8)
+    kernel = np.ones((25, 25), np.uint8)
+    binary = cv2.morphologyEx(binary, cv2.MORPH_CLOSE, kernel)
+    num_labels, labels, stats, centroids = cv2.connectedComponentsWithStats(binary, connectivity=8)
+    zones = []
+    for i in range(1, num_labels):
+        area = stats[i, cv2.CC_STAT_AREA]
+        if area < (img_h * img_w * 0.005):
+            continue
+        cx, cy = centroids[i]
+        h_pos = "top" if cy < img_h * 0.33 else ("bottom" if cy > img_h * 0.66 else "middle")
+        w_pos = "left" if cx < img_w * 0.33 else ("right" if cx > img_w * 0.66 else "center")
+        avg_intensity = float(saliency_map[labels == i].mean())
+        zones.append({"position": f"{h_pos}-{w_pos}", "area_pct": round(float(area / (img_h * img_w)) * 100, 1),
+                       "intensity": round(avg_intensity * 100, 1)})
+    zones.sort(key=lambda z: -z["intensity"])
+    return zones[:top_n]
+
+
+def relative_luminance(rgb):
+    def chan(c):
+        c = c / 255.0
+        return c / 12.92 if c <= 0.03928 else ((c + 0.055) / 1.055) ** 2.4
+    r, g, b = rgb
+    return 0.2126 * chan(r) + 0.7152 * chan(g) + 0.0722 * chan(b)
+
+
+def contrast_ratio(rgb1, rgb2):
+    l1 = relative_luminance(rgb1)
+    l2 = relative_luminance(rgb2)
+    lighter, darker = max(l1, l2), min(l1, l2)
+    return (lighter + 0.05) / (darker + 0.05)
+
+
+def sample_text_and_bg_color(img_arr, x, y, w, h):
+    pad = max(2, int(h * 0.3))
+    y0, y1 = max(0, y - pad), min(img_arr.shape[0], y + h + pad)
+    x0, x1 = max(0, x - pad), min(img_arr.shape[1], x + w + pad)
+    region = img_arr[y0:y1, x0:x1]
+    gray = cv2.cvtColor(region, cv2.COLOR_RGB2GRAY)
+    thresh = np.median(gray)
+    dark_mask = gray < thresh
+    light_mask = ~dark_mask
+    dark_px = region[dark_mask]
+    light_px = region[light_mask]
+    if len(dark_px) == 0 or len(light_px) == 0:
+        return None, None
+    text_color = tuple(np.median(dark_px, axis=0).astype(int))
+    bg_color = tuple(np.median(light_px, axis=0).astype(int))
+    return text_color, bg_color
+
+
+def analyze_readability(pil_img):
+    img_arr = np.array(pil_img.convert("RGB"))
+    img_h = img_arr.shape[0]
+    ocr_data = pytesseract.image_to_data(img_arr, output_type=pytesseract.Output.DICT)
+    words_checked = 0
+    contrast_issues = 0
+    small_text_issues = 0
+    issue_lines = []
+    for i in range(len(ocr_data['text'])):
+        word = ocr_data['text'][i].strip()
+        conf = int(ocr_data['conf'][i])
+        if not word or conf < 60 or len(word) < 2:
+            continue
+        x, y, w, h = ocr_data['left'][i], ocr_data['top'][i], ocr_data['width'][i], ocr_data['height'][i]
+        if w < 3 or h < 3:
+            continue
+        words_checked += 1
+        text_color, bg_color = sample_text_and_bg_color(img_arr, x, y, w, h)
+        if text_color is None:
+            continue
+        ratio = contrast_ratio(text_color, bg_color)
+        size_pct = (h / img_h) * 100
+        if ratio < 4.5:
+            contrast_issues += 1
+            if len(issue_lines) < 5:
+                issue_lines.append(f"- Low contrast on \"{word}\" ({ratio:.1f}:1, needs 4.5:1 minimum)")
+        if size_pct < 1.2:
+            small_text_issues += 1
+            if len(issue_lines) < 5:
+                issue_lines.append(f"- Small text \"{word}\" ({size_pct:.1f}% of image height)")
+    return {"words_checked": words_checked, "contrast_issues": contrast_issues,
+            "small_text_issues": small_text_issues, "issue_lines": issue_lines}
+
+
+def analyze(pil_image, overlay_strength):
+    if pil_image is None:
+        return None, "Upload an image first."
+    pil_rgb = pil_image.convert("RGB")
+    img_bgr = cv2.cvtColor(np.array(pil_rgb), cv2.COLOR_RGB2BGR)
+    h, w = img_bgr.shape[:2]
+
+    saliency_map = compute_saliency_map(pil_rgb)
+    overlay_bgr = render_heatmap_overlay(img_bgr, saliency_map, alpha=overlay_strength)
+    overlay_rgb = cv2.cvtColor(overlay_bgr, cv2.COLOR_BGR2RGB)
+
+    scores = compute_attention_scores(saliency_map)
+    zones = identify_hotspots(saliency_map, h, w)
+    read = analyze_readability(pil_rgb)
+    total_score, grade = compute_overall_grade(scores['focus_score'], scores['spread_score'], read)
+    tips = generate_recommendations(saliency_map, scores, read, h, w)
+
+    summary = f"## Grade: {grade} — {total_score}/100\n\n"
+
+    summary += "**Top Attention Areas:**\n"
+    if zones:
+        for z in zones:
+            summary += f"- {z['position'].replace('-', ' ').title()} ({z['intensity']}/100 intensity, {z['area_pct']}% of design)\n"
+    else:
+        summary += "- Attention is fairly even across the design, no strong single hotspot.\n"
+
+    summary += (
+        f"\n**Scores:** Focus {scores['focus_score']}/100 &nbsp;•&nbsp; "
+        f"Spread {scores['spread_score']}/100 &nbsp;•&nbsp; "
+        f"Readability: "
+    )
+    if read['words_checked'] == 0:
+        summary += "no text detected\n"
+    elif read['contrast_issues'] == 0 and read['small_text_issues'] == 0:
+        summary += "clean (0 issues)\n"
+    else:
+        summary += f"{read['contrast_issues'] + read['small_text_issues']} issue(s) found\n"
+
+    if read['issue_lines']:
+        summary += "\n**Readability details:**\n" + "\n".join(read['issue_lines']) + "\n"
+
+    summary += "\n**How to Improve:**\n"
+    for tip in tips:
+        summary += f"- {tip}\n"
+
+    summary += (
+        "\n---\n"
+        "**Methodology:** Attention prediction powered by MSI-Net, a peer-reviewed saliency model "
+        "(Kroner et al., *Neural Networks*, 2020, "
+        "[DOI: 10.1016/j.neunet.2020.05.004](https://doi.org/10.1016/j.neunet.2020.05.004)), "
+        "evaluated on the MIT/Tübingen Saliency Benchmark - the same standard used by commercial "
+        "tools like Attention Insight. This is a data-informed prediction, not a substitute for "
+        "live user testing."
+    )
+
+    return Image.fromarray(overlay_rgb), summary
+
+
+with gr.Blocks(title="Design Analyzer") as demo:
+    gr.Markdown("# Design Analyzer")
+    gr.Markdown("Upload a design to check where attention is drawn, plus text contrast and readability.")
+    with gr.Row():
+        with gr.Column():
+            image_input = gr.Image(type="pil", label="Upload design")
+            strength_slider = gr.Slider(0.1, 0.8, value=0.45, step=0.05, label="Heatmap overlay strength")
+            analyze_btn = gr.Button("Analyze", variant="primary")
+        with gr.Column():
+            image_output = gr.Image(label="Heatmap result")
+            text_output = gr.Markdown()
+    analyze_btn.click(fn=analyze, inputs=[image_input, strength_slider], outputs=[image_output, text_output])
+
+demo.launch()

packages.txt

@@ -0,0 +1 @@
+tesseract-ocr

requirements.txt

@@ -0,0 +1,6 @@
+opencv-contrib-python-headless
+pytesseract
+tensorflow
+keras
+huggingface_hub
+gradio