Spaces:
Running
Running
| """ | |
| Fragments HTML de l'interface (en-tête, panneaux d'analyse, KPI, graphiques, | |
| schéma d'architecture…). | |
| Tout est rendu côté serveur en HTML + CSS (voir `theme.py`) : le rendu est | |
| identique quelle que soit la version de Gradio, entièrement traduisible, et | |
| s'adapte automatiquement au mode clair/sombre et au sens d'écriture (RTL). | |
| Toute donnée dynamique est échappée avec `html.escape`. | |
| """ | |
| from __future__ import annotations | |
| import html | |
| import math | |
| from config import SUPPORTED_LANGUAGES | |
| from core.ui.i18n import t | |
| # --------------------------------------------------------------------------- # | |
| # Icônes (traits 1.75px, style « lucide ») | |
| # --------------------------------------------------------------------------- # | |
| _ICON_PATHS = { | |
| "globe": '<circle cx="12" cy="12" r="10"/><path d="M2 12h20"/><path d="M12 2a15.3 15.3 0 0 1 4 10 15.3 15.3 0 0 1-4 10 15.3 15.3 0 0 1-4-10 15.3 15.3 0 0 1 4-10z"/>', | |
| "file": '<path d="M14.5 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V7.5L14.5 2z"/><path d="M14 2v6h6"/><path d="M16 13H8"/><path d="M16 17H8"/>', | |
| "gauge": '<path d="m12 14 4-4"/><path d="M3.34 19a10 10 0 1 1 17.32 0"/>', | |
| "clock": '<circle cx="12" cy="12" r="10"/><path d="M12 6v6l4 2"/>', | |
| "zap": '<path d="M13 2 3 14h9l-1 8 10-12h-9l1-8z"/>', | |
| "shield": '<path d="M12 22s8-4 8-10V5l-8-3-8 3v7c0 6 8 10 8 10z"/><path d="m9 12 2 2 4-4"/>', | |
| "alert": '<path d="m21.73 18-8-14a2 2 0 0 0-3.48 0l-8 14A2 2 0 0 0 4 21h16a2 2 0 0 0 1.73-3z"/><path d="M12 9v4"/><path d="M12 17h.01"/>', | |
| "layers": '<path d="m12 2 10 5-10 5L2 7l10-5z"/><path d="m2 17 10 5 10-5"/><path d="m2 12 10 5 10-5"/>', | |
| "database": '<ellipse cx="12" cy="5" rx="9" ry="3"/><path d="M3 5v14c0 1.66 4 3 9 3s9-1.34 9-3V5"/><path d="M3 12c0 1.66 4 3 9 3s9-1.34 9-3"/>', | |
| "search": '<circle cx="11" cy="11" r="8"/><path d="m21 21-4.3-4.3"/>', | |
| "cpu": '<rect x="4" y="4" width="16" height="16" rx="2"/><rect x="9" y="9" width="6" height="6"/><path d="M15 2v2M15 20v2M2 15h2M2 9h2M20 15h2M20 9h2M9 2v2M9 20v2"/>', | |
| "scissors": '<circle cx="6" cy="6" r="3"/><circle cx="6" cy="18" r="3"/><path d="M20 4 8.12 15.88"/><path d="M14.47 14.48 20 20"/><path d="M8.12 8.12 12 12"/>', | |
| "tag": '<path d="M12 2H2v10l9.29 9.29a1 1 0 0 0 1.41 0l8.59-8.59a1 1 0 0 0 0-1.41L12 2z"/><path d="M7 7h.01"/>', | |
| "message": '<path d="M21 15a2 2 0 0 1-2 2H7l-4 4V5a2 2 0 0 1 2-2h14a2 2 0 0 1 2 2z"/>', | |
| "sparkles": '<path d="m12 3-1.9 5.8a2 2 0 0 1-1.3 1.3L3 12l5.8 1.9a2 2 0 0 1 1.3 1.3L12 21l1.9-5.8a2 2 0 0 1 1.3-1.3L21 12l-5.8-1.9a2 2 0 0 1-1.3-1.3L12 3z"/>', | |
| "key": '<circle cx="7.5" cy="15.5" r="5.5"/><path d="m21 2-9.6 9.6"/><path d="m15.5 7.5 3 3L22 7l-3-3"/>', | |
| "server": '<rect x="2" y="2" width="20" height="8" rx="2"/><rect x="2" y="14" width="20" height="8" rx="2"/><path d="M6 6h.01M6 18h.01"/>', | |
| "repeat": '<path d="m17 2 4 4-4 4"/><path d="M3 11v-1a4 4 0 0 1 4-4h14"/><path d="m7 22-4-4 4-4"/><path d="M21 13v1a4 4 0 0 1-4 4H3"/>', | |
| "languages": '<path d="m5 8 6 6"/><path d="m4 14 6-6 2-3"/><path d="M2 5h12"/><path d="M7 2h1"/><path d="m22 22-5-10-5 10"/><path d="M14 18h6"/>', | |
| "activity": '<path d="M22 12h-4l-3 9L9 3l-3 9H2"/>', | |
| } | |
| def icon(name: str, size: int = 16, cls: str = "pg-icon") -> str: | |
| path = _ICON_PATHS.get(name, "") | |
| return ( | |
| f'<svg class="{cls}" width="{size}" height="{size}" viewBox="0 0 24 24" fill="none" ' | |
| f'stroke="currentColor" stroke-width="1.75" stroke-linecap="round" ' | |
| f'stroke-linejoin="round" aria-hidden="true">{path}</svg>' | |
| ) | |
| LOGO_SVG = ( | |
| '<svg class="pg-logo" width="36" height="36" viewBox="0 0 40 40" aria-hidden="true">' | |
| '<defs><linearGradient id="pgLogoGrad" x1="0" y1="0" x2="1" y2="1">' | |
| '<stop offset="0" stop-color="#6D7CFF"/><stop offset="1" stop-color="#22D3EE"/>' | |
| "</linearGradient></defs>" | |
| '<rect width="40" height="40" rx="11" fill="url(#pgLogoGrad)"/>' | |
| '<circle cx="20" cy="20" r="10.5" fill="none" stroke="#fff" stroke-width="2"/>' | |
| '<path d="M9.5 20h21M20 9.5c3 3 4.4 6.6 4.4 10.5S23 27.5 20 30.5M20 9.5c-3 3-4.4 6.6-4.4 10.5S17 27.5 20 30.5" ' | |
| 'fill="none" stroke="#fff" stroke-width="2" stroke-linecap="round"/>' | |
| "</svg>" | |
| ) | |
| def _e(value) -> str: | |
| return html.escape("" if value is None else str(value)) | |
| def _n(text) -> str: | |
| """Valeur numérique isolée en LTR (évite « ms 1,240 » ou « 512 / 37 » en arabe).""" | |
| return f'<bdi dir="ltr">{_e(text)}</bdi>' | |
| def lang_name(code: str | None) -> str: | |
| info = SUPPORTED_LANGUAGES.get(code or "") | |
| return info["name"] if info else (code or "—") | |
| def lang_badge(code: str | None) -> str: | |
| code = code or "?" | |
| return f'<span class="pg-lang-badge" data-lang="{_e(code)}">{_e(code.upper())}</span>' | |
| # --------------------------------------------------------------------------- # | |
| # En-tête / pied de page | |
| # --------------------------------------------------------------------------- # | |
| def render_brand(lang: str) -> str: | |
| return f""" | |
| <div class="pg-brand"> | |
| {LOGO_SVG} | |
| <div class="pg-brand-text"> | |
| <div class="pg-brand-title">PolyglotRAG <span class="pg-brand-tag">{_e(t(lang, "app_tagline"))}</span></div> | |
| <div class="pg-brand-sub">{_e(t(lang, "app_subtitle"))}</div> | |
| </div> | |
| </div>""" | |
| def render_status(lang: str, corpus: dict, config_ok: bool) -> str: | |
| if not config_ok: | |
| cls, label = "warn", t(lang, "status_config") | |
| elif corpus.get("total_chunks", 0) > 0: | |
| cls = "ok" | |
| label = t(lang, "status_ready", chunks=corpus["total_chunks"], docs=corpus.get("documents", 0)) | |
| else: | |
| cls, label = "warn", t(lang, "status_empty") | |
| langs = "".join( | |
| f'<span class="pg-chip-lang">{_e(code.upper())}</span>' for code in SUPPORTED_LANGUAGES | |
| ) | |
| return f""" | |
| <div class="pg-status-wrap"> | |
| <span class="pg-status pg-status-{cls}"><span class="pg-dot"></span>{_e(label)}</span> | |
| <span class="pg-status-langs">{langs}</span> | |
| </div>""" | |
| def render_config_banner(lang: str, config_ok: bool) -> str: | |
| if config_ok: | |
| return "" | |
| return f'<div class="pg-banner pg-banner-warn">{icon("alert", 18)}<span>{_e(t(lang, "config_warning"))}</span></div>' | |
| def render_footer(lang: str) -> str: | |
| return f'<div class="pg-footer">{icon("sparkles", 14)}<span>{_e(t(lang, "footer"))}</span></div>' | |
| def render_section_title(lang: str, key: str, icon_name: str) -> str: | |
| return f'<div class="pg-section-title">{icon(icon_name, 16)}<span>{_e(t(lang, key))}</span></div>' | |
| def render_welcome(lang: str) -> str: | |
| """Contenu affiché dans la zone de conversation tant qu'elle est vide.""" | |
| return ( | |
| f'<div class="pg-welcome">{LOGO_SVG}' | |
| f"<h3>{_e(t(lang, 'welcome_title'))}</h3>" | |
| f"<p>{_e(t(lang, 'welcome_text'))}</p></div>" | |
| ) | |
| # --------------------------------------------------------------------------- # | |
| # Panneau « Analyse de la réponse » + sources | |
| # --------------------------------------------------------------------------- # | |
| def _meter(value: float, tone: str) -> str: | |
| pct = max(0.0, min(1.0, float(value or 0.0))) * 100 | |
| return f'<div class="pg-meter pg-meter-{tone}"><span style="width:{pct:.0f}%"></span></div>' | |
| def render_insights(lang: str, data: dict | None) -> str: | |
| title = render_section_title(lang, "insights_title", "activity") | |
| if not data: | |
| return f'<div class="pg-card">{title}<p class="pg-muted">{_e(t(lang, "insights_empty"))}</p></div>' | |
| grounded = not data.get("used_fallback") | |
| status = ( | |
| f'<span class="pg-pill pg-pill-ok">{icon("shield", 13)}{_e(t(lang, "grounded"))}</span>' | |
| if grounded | |
| else f'<span class="pg-pill pg-pill-warn">{icon("alert", 13)}{_e(t(lang, "abstained"))}</span>' | |
| ) | |
| cache = ( | |
| f'<span class="pg-pill pg-pill-info">{icon("zap", 13)}{_e(t(lang, "cached"))}</span>' | |
| if data.get("from_cache") | |
| else "" | |
| ) | |
| conf = float(data.get("confidence", 0.0) or 0.0) | |
| qconf = float(data.get("query_language_confidence", 0.0) or 0.0) | |
| latency = float(data.get("latency_ms", 0.0) or 0.0) | |
| return f""" | |
| <div class="pg-card"> | |
| {title} | |
| <div class="pg-pills">{status}{cache}</div> | |
| <dl class="pg-stats"> | |
| <div><dt>{_e(t(lang, "detected_lang"))}</dt> | |
| <dd>{lang_badge(data.get("query_language"))} {_e(lang_name(data.get("query_language")))} | |
| <small>{_n(f"{qconf:.0%}")}</small></dd></div> | |
| <div><dt>{_e(t(lang, "answer_lang"))}</dt> | |
| <dd>{lang_badge(data.get("target_language"))} {_e(lang_name(data.get("target_language")))}</dd></div> | |
| <div><dt>{_e(t(lang, "confidence"))}</dt> | |
| <dd class="pg-num">{_n(f"{conf:.2f}")}</dd> | |
| {_meter(conf, "ok" if grounded else "warn")}</div> | |
| <div><dt>{_e(t(lang, "latency"))}</dt> | |
| <dd class="pg-num">{_n(f"{latency:,.0f} ms")}</dd></div> | |
| </dl> | |
| </div>""" | |
| def render_sources(lang: str, sources: list[dict] | None, visible: bool = True) -> str: | |
| title = render_section_title(lang, "sources_title", "file") | |
| if not visible: | |
| return "" | |
| if not sources: | |
| return f'<div class="pg-card">{title}<p class="pg-muted">{_e(t(lang, "no_sources"))}</p></div>' | |
| items = [] | |
| for i, s in enumerate(sources, start=1): | |
| doc_title = s.get("title") | |
| if not isinstance(doc_title, str) or not doc_title.strip(): | |
| doc_title = "" | |
| score = float(s.get("score", 0.0) or 0.0) | |
| items.append( | |
| f""" | |
| <li class="pg-source"> | |
| <span class="pg-source-idx">{i}</span> | |
| <div class="pg-source-body"> | |
| <div class="pg-source-file">{icon("file", 14)}<span dir="auto">{_e(s.get("file"))}</span></div> | |
| {f'<div class="pg-source-title" dir="auto">{_e(doc_title)}</div>' if doc_title else ""} | |
| <div class="pg-source-meta">{lang_badge(s.get("language"))} | |
| <span>{_e(t(lang, "page"))} {_e(s.get("page"))}</span> | |
| <span class="pg-sep">·</span> | |
| <span>{_e(t(lang, "score"))} <b class="pg-num">{_n(f"{score:.2f}")}</b></span> | |
| </div> | |
| {_meter(score, "ok")} | |
| </div> | |
| </li>""" | |
| ) | |
| return f'<div class="pg-card">{title}<ol class="pg-sources">{"".join(items)}</ol></div>' | |
| # --------------------------------------------------------------------------- # | |
| # Administration | |
| # --------------------------------------------------------------------------- # | |
| def _kpi(label: str, value: str, icon_name: str, hint: str = "") -> str: | |
| hint_html = f'<div class="pg-kpi-hint">{_e(hint)}</div>' if hint else "" | |
| return ( | |
| f'<div class="pg-kpi"><div class="pg-kpi-head">{icon(icon_name, 15)}' | |
| f"<span>{_e(label)}</span></div>" | |
| f'<div class="pg-kpi-value pg-num">{_n(value)}</div>{hint_html}</div>' | |
| ) | |
| def _bars(lang: str, title_key: str, data: dict) -> str: | |
| title = f'<div class="pg-chart-title">{_e(t(lang, title_key))}</div>' | |
| clean = {k: v for k, v in (data or {}).items() if v} | |
| if not clean: | |
| return f'<div class="pg-card pg-chart">{title}<p class="pg-muted">{_e(t(lang, "no_data"))}</p></div>' | |
| total = sum(clean.values()) | |
| peak = max(clean.values()) | |
| rows = [] | |
| for code, value in sorted(clean.items(), key=lambda kv: kv[1], reverse=True): | |
| width = (value / peak) * 100 if peak else 0 | |
| share = value / total if total else 0 | |
| rows.append( | |
| f""" | |
| <div class="pg-bar-row"> | |
| <div class="pg-bar-label">{lang_badge(code)}<span>{_e(lang_name(code))}</span></div> | |
| <div class="pg-bar-track"><span style="width:{width:.1f}%"></span></div> | |
| <div class="pg-bar-value pg-num">{_n(f"{value:,}")} <small>{_n(f"{share:.0%}")}</small></div> | |
| </div>""" | |
| ) | |
| return f'<div class="pg-card pg-chart">{title}{"".join(rows)}</div>' | |
| def _recent_table(lang: str, rows: list[dict]) -> str: | |
| title = render_section_title(lang, "recent_title", "message") | |
| if not rows: | |
| return f'<div class="pg-card">{title}<p class="pg-muted">{_e(t(lang, "no_data"))}</p></div>' | |
| head = "".join( | |
| f"<th>{_e(t(lang, k))}</th>" | |
| for k in ("col_question", "col_qlang", "col_alang", "col_conf", "col_status", "col_latency") | |
| ) | |
| body = [] | |
| for r in rows: | |
| question = str(r.get("question") or "") | |
| short = question if len(question) <= 110 else question[:107] + "…" | |
| abst = bool(r.get("used_fallback")) | |
| status = ( | |
| f'<span class="pg-pill pg-pill-warn">{_e(t(lang, "status_abst"))}</span>' | |
| if abst | |
| else f'<span class="pg-pill pg-pill-ok">{_e(t(lang, "status_ok"))}</span>' | |
| ) | |
| conf = float(r.get("confidence_score") or 0.0) | |
| lat = float(r.get("total_latency_ms") or 0.0) | |
| body.append( | |
| f"<tr><td class='pg-td-q' dir='auto' title='{_e(question)}'>{_e(short)}</td>" | |
| f"<td>{lang_badge(r.get('query_language'))}</td>" | |
| f"<td>{lang_badge(r.get('target_language'))}</td>" | |
| f"<td class='pg-num'>{_n(f'{conf:.2f}')}</td><td>{status}</td>" | |
| f"<td class='pg-num'>{_n(f'{lat:,.0f} ms')}</td></tr>" | |
| ) | |
| return ( | |
| f'<div class="pg-card">{title}<div class="pg-table-wrap"><table class="pg-table">' | |
| f"<thead><tr>{head}</tr></thead><tbody>{''.join(body)}</tbody></table></div></div>" | |
| ) | |
| def render_admin_placeholder(lang: str) -> str: | |
| return f'<div class="pg-card pg-empty-state">{icon("key", 22)}<p>{_e(t(lang, "admin_hint"))}</p></div>' | |
| def render_admin_denied(lang: str) -> str: | |
| return f'<div class="pg-banner pg-banner-error">{icon("alert", 18)}<span>{_e(t(lang, "denied"))}</span></div>' | |
| def render_admin_dashboard(lang: str, data: dict) -> str: | |
| m = data["metrics"] | |
| c = data["corpus"] | |
| ac = data["answer_cache"] | |
| ec = data["embedding_cache"] | |
| def cache_value(stats: dict) -> str: | |
| return f"{stats['size']} / {stats['maxsize']}" if stats.get("enabled") else t(lang, "disabled") | |
| quality = "".join( | |
| [ | |
| _kpi(t(lang, "kpi_queries"), f"{m['total_queries']:,}", "message"), | |
| _kpi(t(lang, "kpi_abstention"), f"{m['abstention_rate']:.0%}", "shield"), | |
| _kpi(t(lang, "kpi_confidence"), f"{m['avg_confidence']:.2f}", "gauge"), | |
| _kpi(t(lang, "kpi_latency"), f"{m['avg_latency_ms']:,.0f} ms", "clock"), | |
| _kpi(t(lang, "kpi_crossling"), f"{m.get('cross_lingual_rate', 0.0):.0%}", "languages"), | |
| ] | |
| ) | |
| corpus = "".join( | |
| [ | |
| _kpi(t(lang, "kpi_chunks"), f"{c['total_chunks']:,}", "layers"), | |
| _kpi(t(lang, "kpi_docs"), f"{c['documents']:,}", "file"), | |
| _kpi(t(lang, "kpi_index"), str(c.get("ann_index_type", "—")).upper(), "database"), | |
| _kpi(t(lang, "kpi_answer_cache"), cache_value(ac), "zap"), | |
| _kpi(t(lang, "kpi_embed_cache"), cache_value(ec), "cpu"), | |
| ] | |
| ) | |
| return f""" | |
| <div class="pg-admin"> | |
| {render_section_title(lang, "section_quality", "activity")} | |
| <div class="pg-kpi-grid">{quality}</div> | |
| {render_section_title(lang, "section_corpus", "server")} | |
| <div class="pg-kpi-grid">{corpus}</div> | |
| <div class="pg-chart-grid"> | |
| {_bars(lang, "chart_queries", m.get("by_query_language", {}))} | |
| {_bars(lang, "chart_corpus", c.get("by_language", {}))} | |
| </div> | |
| {_recent_table(lang, data.get("recent", []))} | |
| </div>""" | |
| # --------------------------------------------------------------------------- # | |
| # Architecture | |
| # --------------------------------------------------------------------------- # | |
| def _step(n: int, lang: str, key: str, icon_name: str) -> str: | |
| return f""" | |
| <div class="pg-step"> | |
| <div class="pg-step-icon">{icon(icon_name, 18)}</div> | |
| <div class="pg-step-n">{n:02d}</div> | |
| <div class="pg-step-t">{_e(t(lang, key + "_t"))}</div> | |
| <div class="pg-step-d">{_e(t(lang, key + "_d"))}</div> | |
| </div>""" | |
| def render_architecture(lang: str) -> str: | |
| ingest = "".join( | |
| _step(i, lang, k, ic) | |
| for i, (k, ic) in enumerate( | |
| [("s1", "file"), ("s2", "tag"), ("s3", "scissors"), ("s4", "cpu"), ("s5", "database")], start=1 | |
| ) | |
| ) | |
| query = "".join( | |
| _step(i, lang, k, ic) | |
| for i, (k, ic) in enumerate( | |
| [("q1", "languages"), ("q2", "search"), ("q3", "shield"), ("q4", "sparkles"), ("q5", "zap")], start=1 | |
| ) | |
| ) | |
| why = "".join( | |
| f'<div class="pg-why">{icon(ic, 18)}<div><b>{_e(t(lang, k + "_t"))}</b>' | |
| f"<p>{_e(t(lang, k + '_d'))}</p></div></div>" | |
| for k, ic in [("w1", "globe"), ("w2", "key"), ("w3", "server"), ("w4", "shield")] | |
| ) | |
| return f""" | |
| <div class="pg-arch"> | |
| <div class="pg-arch-hero"> | |
| <h2>{_e(t(lang, "arch_title"))}</h2> | |
| <p>{_e(t(lang, "arch_intro"))}</p> | |
| </div> | |
| <div class="pg-lane"> | |
| <div class="pg-lane-head"><span class="pg-lane-dot pg-lane-a"></span>{_e(t(lang, "lane_ingest"))}</div> | |
| <div class="pg-steps">{ingest}</div> | |
| </div> | |
| <div class="pg-lane"> | |
| <div class="pg-lane-head"><span class="pg-lane-dot pg-lane-b"></span>{_e(t(lang, "lane_query"))}</div> | |
| <div class="pg-steps">{query}</div> | |
| </div> | |
| {render_section_title(lang, "why_title", "layers")} | |
| <div class="pg-why-grid">{why}</div> | |
| </div>""" | |
| def safe_number(value, default: float = 0.0) -> float: | |
| try: | |
| v = float(value) | |
| return default if math.isnan(v) else v | |
| except (TypeError, ValueError): | |
| return default | |