| """Readable presentation of model scores and quantitative attention weights.""" |
|
|
| from html import escape |
| import math |
|
|
| import numpy as np |
|
|
| CARD_CSS = """ |
| .ltf-card{font-family:ui-sans-serif,system-ui,sans-serif;color:#15243c;line-height:1.5} |
| .ltf-card *{box-sizing:border-box}.ltf-eyebrow{font-size:12px;font-weight:750;letter-spacing:.11em;color:#60748c;text-transform:uppercase} |
| .ltf-decision{border:1px solid #dce5ef;border-radius:20px;padding:25px;background:#fff;min-height:325px} |
| .ltf-decision h2{font-size:25px;line-height:1.25;margin:10px 0 20px;letter-spacing:-.03em} |
| .ltf-score{font-size:58px;line-height:1;font-weight:800;letter-spacing:-.06em;color:var(--accent,#087f85)} |
| .ltf-score-label{font-size:13px;color:#60748c;margin:8px 0 18px}.ltf-chip{display:inline-block;padding:5px 10px;border-radius:8px;background:#eef3f8;color:#42566e;font-size:12px;font-weight:650;margin-right:5px} |
| .ltf-mini{display:flex;align-items:center;gap:8px;margin:12px 0;font-size:13px}.ltf-mini b{width:57px}.ltf-mini>span{flex:1;background:#edf1f6;height:7px;border-radius:5px;overflow:hidden}.ltf-mini i{display:block;background:#14888e;height:100%;border-radius:5px}.ltf-mini em{width:45px;text-align:right;font-style:normal;font-variant-numeric:tabular-nums} |
| .ltf-note{font-size:12px;color:#60748c;margin-top:18px}.ltf-wait{color:#405772;font-size:16px;margin:30px 0 10px} |
| .ltf-stat-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:12px;margin:2px 0 20px}.ltf-stat{background:#fff;border:1px solid #dce5ef;padding:17px 20px;border-radius:13px}.ltf-stat strong{display:block;font-size:27px;letter-spacing:-.04em}.ltf-stat span{font-size:12px;color:#60748c} |
| .ltf-chart{background:#fff;border:1px solid #dce5ef;border-radius:14px;padding:18px 16px}.ltf-chart h3{font-size:17px;margin:0 0 5px}.ltf-chart p{font-size:12px;color:#60748c;margin:0 0 12px}.ltf-scale{display:flex;justify-content:space-between;font-size:11px;color:#52687e;margin-top:5px}.ltf-colorbar{height:11px;border-radius:5px;background:linear-gradient(90deg,#23395d,#6886ab,#b4bfcb,#f7a342,#ee503c);margin-top:12px} |
| .ltf-callout{padding:11px 13px;background:#edf5f8;border-left:3px solid #14888e;border-radius:6px;font-size:12px;color:#33506b;margin-top:12px} |
| .ltf-hero{font-family:ui-sans-serif,system-ui,sans-serif;padding:29px 32px;border-radius:20px;background:linear-gradient(110deg,#10243e,#153c51);color:white;margin:0 0 24px}.ltf-card .ltf-hero h1{font-size:31px;margin:10px 0;letter-spacing:-.04em;color:#fff!important}.ltf-card .ltf-hero p{font-size:14px;color:#bed2e3!important;margin:7px 0}.ltf-hero .ltf-eyebrow{color:#75dcd2}.ltf-hero .ltf-chip{background:#ffffff12;color:#d9e9f1;border:1px solid #ffffff18;margin-top:12px} |
| @media(max-width:650px){.ltf-stat-grid{grid-template-columns:repeat(2,1fr)}.ltf-hero{padding:22px}.ltf-hero h1{font-size:25px}.ltf-decision{min-height:250px}.ltf-score{font-size:47px}} |
| @media(max-width:760px){ |
| .gradio-container{padding:14px 12px 35px!important;min-width:0!important;width:100%!important;max-width:100vw!important} |
| .gradio-container .main{padding:0!important;min-width:0!important;width:100%!important} |
| .gradio-container .wrap,.gradio-container .contain{min-width:0!important;max-width:100%!important} |
| .gradio-container .row,.gradio-container .column,.gradio-container .block{min-width:0!important;max-width:100%!important} |
| } |
| """ |
|
|
|
|
| def card(content): |
| return f'<style>{CARD_CSS}</style><div class="ltf-card">{content}</div>' |
|
|
|
|
| HEADER = card("""<div class="ltf-hero"><div class="ltf-eyebrow">LTF / MODEL EXPLORER</div> |
| <h1>Image Detection & Attention Analysis</h1><p>Upload an original image to inspect model scores, tile attention, and patch details.</p> |
| <span class="ltf-chip">CLIP ViT-L/14</span><span class="ltf-chip">CLIP block 24 features</span> |
| <span class="ltf-chip">224 × 224 tiles</span><span class="ltf-chip">Research demo</span></div>""") |
|
|
| EMPTY_RESULT = card("""<div class="ltf-decision"><div class="ltf-eyebrow">ANALYSIS RESULT</div> |
| <h2>Ready to analyze</h2><div class="ltf-wait">Upload an image and select Run Analysis, or click a GenImage example.</div> |
| <p class="ltf-note">The prediction, generated score, and branch comparison will appear here. Attention analysis opens below.</p></div>""") |
|
|
|
|
| def result_card(result): |
| score = float(result["score_fake"]) |
| generated = result["label"] == 1 |
| accent = "#d75536" if generated else "#087f85" |
| verdict = "AI-generated image" if generated else "Real image" |
| branch = { |
| "fusion": "Fusion", |
| "level1": "L1 · Patch-level", |
| "level2": "L2 · View-level", |
| }[result["branch"]] |
| bars = "" |
| for key, label in (("fusion", "Fusion"), ("level1", "L1"), ("level2", "L2")): |
| value = result["probabilities"][key]["fake"] |
| bars += ( |
| f'<div class="ltf-mini"><b>{label}</b><span><i style="width:{value*100:.3f}%"></i></span>' |
| f"<em>{value:.3f}</em></div>" |
| ) |
| return card(f"""<div class="ltf-decision" style="--accent:{accent};border-top:4px solid {accent}"> |
| <div class="ltf-eyebrow">Model prediction · {branch}</div><h2>{verdict}</h2> |
| <div class="ltf-score">{score:.3f}</div><div class="ltf-score-label">Generated score · threshold {result['threshold']:.2f}</div> |
| {bars}<div class="ltf-note">{result['width']:,} × {result['height']:,} px · {result['views']-1} local tiles |
| <br>Scores are uncalibrated model outputs, not definitive evidence of image origin.</div></div>""") |
|
|
|
|
| def stats_card(state): |
| if not state: |
| return "" |
| attention = state["attention"] |
| layer = next( |
| (row[2] for row in state["parameters"] if row[1] == "Feature extraction layer"), |
| "24", |
| ) |
| stats = [ |
| (str(len(state["boxes"])), "Local tiles + 1 global view"), |
| (str(attention["l1_heads"].shape[0]), "L1 aggregation heads"), |
| ( |
| f"{attention['patch'].shape[1]} × {attention['patch'].shape[2]}", |
| "Patch grid per tile", |
| ), |
| (str(layer), "CLIP feature block"), |
| ] |
| return card( |
| '<div class="ltf-stat-grid">' |
| + "".join( |
| f'<div class="ltf-stat"><strong>{escape(value)}</strong><span>{label}</span></div>' |
| for value, label in stats |
| ) |
| + "</div>" |
| ) |
|
|
|
|
| def scale_legend(): |
| return ( |
| '<div class="ltf-colorbar"></div><div class="ltf-scale"><span>≤0.25×</span><span>0.5×</span>' |
| "<span>1× uniform</span><span>2×</span><span>≥4×</span></div>" |
| ) |
|
|
|
|
| def weight_chart(state, selection="mean", level="l1"): |
| if not state: |
| return "" |
| attention = state["attention"] |
| if level == "l2": |
| weights = attention["l2"] |
| labels = ["Global"] + [f"T{i+1}" for i in range(len(weights) - 1)] |
| title = "L2 View Weights" |
| else: |
| weights = ( |
| attention["l1"] |
| if selection == "mean" |
| else attention["l1_heads"][int(selection.split("_")[-1]) - 1] |
| ) |
| labels = [f"T{i+1}" for i in range(len(weights))] |
| title = "L1 Tile Weights · " + ( |
| "Mean of 8 heads" if selection == "mean" else selection.replace("_", " ") |
| ) |
| n = len(weights) |
| order = np.argsort(-weights, kind="stable")[:10] |
| maximum = max(float(weights.max()), 1 / n) * 1.12 |
| width, left, track, row_height = 430, 63, 290, 32 |
| height = 38 + row_height * len(order) |
| baseline = left + track * (1 / n) / maximum |
| svg = [ |
| f'<svg viewBox="0 0 {width} {height}" role="img" aria-label="{escape(title)}" style="width:100%;font-family:system-ui,sans-serif">', |
| f'<line x1="{baseline:.2f}" y1="8" x2="{baseline:.2f}" y2="{height-22}" stroke="#8394a8" stroke-dasharray="3 4"/>', |
| ] |
| for rank, index in enumerate(order): |
| y, value = 12 + rank * row_height, float(weights[index]) |
| fill = ( |
| "#102e4b" |
| if labels[index] == "Global" |
| else ("#078b93" if rank == 0 else "#66aab1") |
| ) |
| svg.extend( |
| [ |
| f'<text x="0" y="{y+15}" fill="#30465e" font-size="13" font-weight="650">{labels[index]}</text>', |
| f'<rect x="{left}" y="{y}" width="{track}" height="21" rx="4" fill="#edf2f7"/>', |
| f'<rect x="{left}" y="{y}" width="{track*value/maximum:.3f}" height="21" rx="4" fill="{fill}">' |
| f"<title>{labels[index]}: {value:.8f} · {value*n:.4f}× uniform</title></rect>", |
| f'<text x="{left+track+8}" y="{y+15}" fill="#30465e" font-size="12">{value*100:.2f}%</text>', |
| ] |
| ) |
| svg.append( |
| f'<text x="{left}" y="{height-4}" fill="#60748c" font-size="10">Dashed: uniform {100/n:.2f}% · Top 10 shown</text></svg>' |
| ) |
| ratio = float(weights.max()) * n |
| message = ( |
| "Attention is nearly uniform, with no pronounced concentration. The heatmap does not exaggerate small differences." |
| if float(np.ptp(weights)) * n < 0.10 |
| else f"The largest weight is {ratio:.2f}× uniform. Rankings show attention, not evidence of forgery." |
| ) |
| if level == "l2": |
| message = ( |
| f"The global view receives {float(weights[0])*100:.2f}%; the overlay shows local tiles only. " |
| + message |
| ) |
| return card( |
| f'<div class="ltf-chart"><h3>{title}</h3><p>Normalized attention weights sum to 100% across all items.</p>' |
| + "".join(svg) |
| + scale_legend() |
| + f'<div class="ltf-callout">{message}</div></div>' |
| ) |
|
|
|
|
| def patch_matrix(state, tile_number): |
| if not state: |
| return "" |
| from attention import attention_levels, colors |
|
|
| index = int(tile_number) - 1 |
| weights = state["attention"]["patch"][index] |
| palette = colors(attention_levels(weights, weights.size)) |
| h, w = weights.shape |
| cells = [] |
| for y in range(h): |
| for x in range(w): |
| color = "#%02x%02x%02x" % tuple(palette[y, x]) |
| value = float(weights[y, x]) |
| cells.append( |
| f'<rect x="{x*20}" y="{y*20}" width="20" height="20" fill="{color}" stroke="#ffffff40" stroke-width=".6">' |
| f"<title>Row {y+1}, column {x+1} · {value*100:.5f}% · {value*weights.size:.3f}× uniform</title></rect>" |
| ) |
| return card( |
| f'<div class="ltf-chart"><h3>T{index+1} · Patch Attention Matrix</h3><p>Hover to inspect exact weights. Each cell corresponds to 14 × 14 input pixels.</p>' |
| f'<svg viewBox="0 0 {w*20} {h*20}" role="img" aria-label="Patch attention matrix" style="width:100%;max-height:420px">' |
| + "".join(cells) |
| + "</svg>" |
| + scale_legend() |
| + '<div class="ltf-callout">Shared scale relative to uniform attention: gray is near uniform, blue is lower, and orange-red is higher.</div></div>' |
| ) |
|
|
