""" Pure-HTML interaction explorer that works without custom JavaScript. We rely on hidden radio inputs + CSS to simulate focus mode: • Default radio (id=...-none) keeps the full chip/sentence list visible. • Clicking any token is just selecting its radio (via ). • CSS rules tied to :checked radios fade the base list and reveal the matching overlay panel (center node + neighbors + radial SVG). • Clicking the translucent backdrop or Reset button toggles the “none” radio, restoring the original layout. """ from __future__ import annotations import math import uuid from collections import defaultdict from html import escape from typing import Dict, List, Tuple _FOCUS_VIEW_STYLE = """ """ def _token_colors(value: float, max_abs: float) -> Tuple[str, str]: if max_abs <= 0: return "#f0eef7", "#d5cdea" norm = max(-1.0, min(1.0, value / max_abs)) if norm >= 0: base = (231, 94, 71) else: base = (71, 123, 231) norm = -norm neutral = (245, 242, 252) r = int(round(neutral[0] + (base[0] - neutral[0]) * norm)) g = int(round(neutral[1] + (base[1] - neutral[1]) * norm)) b = int(round(neutral[2] + (base[2] - neutral[2]) * norm)) return f"rgba({r}, {g}, {b}, 0.35)", f"rgb({r}, {g}, {b})" def create_interaction_token_view( features: List[str], feature_values: List[float], pairwise: List[Tuple[Tuple[str, ...], float]], *, method: str = "shapley", layout: str = "token", max_links: int = 6, ) -> str: if not features: return "

No tokens available.

" values = list(feature_values) if feature_values else [] if len(values) < len(features): values.extend([0.0] * (len(features) - len(values))) layout = (layout or "token").lower() if layout not in {"token", "sentence"}: layout = "token" adjacency: Dict[str, List[Tuple[str, float]]] = defaultdict(list) for feats, val in pairwise: if len(feats) != 2: continue a, b = feats adjacency[a].append((b, float(val))) adjacency[b].append((a, float(val))) if not adjacency and len(features) > 1: for idx in range(len(features) - 1): score = 0.5 * (values[idx] + values[idx + 1]) adjacency[features[idx]].append((features[idx + 1], float(score))) adjacency[features[idx + 1]].append((features[idx], float(score))) for key in adjacency: adjacency[key].sort(key=lambda item: abs(item[1]), reverse=True) view_id = f"interaction-focus-{uuid.uuid4().hex[:10]}" none_radio = f"{view_id}-focus-none" radios = [f''] radio_ids: List[str] = [] for idx in range(len(features)): rid = f"{view_id}-focus-{idx}" radio_ids.append(rid) radios.append(f'') base_html = _render_base_listing(features, values, adjacency, layout, radio_ids) panels = _build_focus_panels(features, values, adjacency, radio_ids, max_links) css_rules = [ f"#{none_radio}:checked ~ .interaction-base {{opacity:1; filter:none; pointer-events:auto;}}", f"#{none_radio}:checked ~ .interaction-focus-overlay {{opacity:0; pointer-events:none;}}", ] for idx, rid in enumerate(radio_ids): css_rules.append( f"#{rid}:checked ~ .interaction-base {{opacity:0.08; filter:blur(1px); pointer-events:none;}}" ) css_rules.append( f"#{rid}:checked ~ .interaction-focus-overlay {{opacity:1; pointer-events:auto;}}" ) css_rules.append( f"#{rid}:checked ~ .interaction-focus-overlay .focus-panel[data-node='{idx}'] {{display:flex;}}" ) return "".join( [ _FOCUS_VIEW_STYLE, "", f'

', "".join(radios), f'

{escape(method.title())} pairwise interactions

', f'

点击任意{"句子" if layout == "sentence" else "单词"}即可聚焦并查看其与其它片段的互动。

', '

', base_html, "

", '", "

", ] ) def _render_base_listing( features: List[str], values: List[float], adjacency: Dict[str, List[Tuple[str, float]]], layout: str, radio_ids: List[str], ) -> str: max_abs = max((abs(v) for v in values), default=0.0) or 1.0 chunks: List[str] = [] if layout == "sentence": for idx, token in enumerate(features): bg, border = _token_colors(values[idx], max_abs) badges = [] for partner, score in adjacency.get(token, [])[:2]: sign = "+" if score >= 0 else "" badges.append( f"{escape(partner)} {sign}{score:.2f}" ) badge_html = "" if badges: badge_html = ( "

" + "".join(badges) + "

" ) chunks.append( f'' f'" f'

{escape(token)}

' f"{badge_html}" "" ) return '

' + "".join(chunks) + "

" for idx, token in enumerate(features): bg, border = _token_colors(values[idx], max_abs) chunks.append( f'' f'{values[idx]:+0.2f}' f'{escape(token)}' "" ) return '

' + "".join(chunks) + "

" def _build_focus_panels( features: List[str], values: List[float], adjacency: Dict[str, List[Tuple[str, float]]], radio_ids: List[str], max_links: int, ) -> List[str]: panels: List[str] = [] value_max = max((abs(v) for v in values), default=0.0) or 1.0 for idx, token in enumerate(features): neighbors = adjacency.get(token, [])[:max_links] svg = _render_focus_svg(token, values[idx], neighbors, value_max) if neighbors: links_html = "

{escape(partner)} {score:+.2f}

" else: links_html = "

暂无相关连接

" panels.append( f'

' f'

' f'{values[idx]:+0.3f}' f'{escape(token)}' "

" f"{svg}" f"{links_html}" "

" ) return panels def _render_focus_svg( label: str, value: float, neighbors: List[Tuple[str, float]], max_abs_value: float, ) -> str: width = 420.0 height = 300.0 cx, cy = width / 2.0, height / 2.0 radius = min(width, height) * 0.35 center_fill, center_border = _token_colors(value, max_abs_value) svg_parts = [ f'") return "".join(svg_parts) max_edge = max((abs(val) for _, val in neighbors), default=0.0) or 1.0 step = (2 * math.pi) / max(len(neighbors), 1) for i, (partner, score) in enumerate(neighbors): angle = -math.pi / 2 + i * step x = cx + radius * math.cos(angle) y = cy + radius * math.sin(angle) color = "#d35400" if score >= 0 else "#3867d6" stroke_width = 1.4 + 4.0 * (abs(score) / max_edge) svg_parts.append( f'' ) svg_parts.append( f'{score:+.2f}' ) node_fill, node_border = _token_colors(score, max_edge) svg_parts.append( f'' ) svg_parts.append( f'' f"{escape(partner[:32])}" ) svg_parts.append("") return "".join(svg_parts)