feat: endpoint FT-Solo inicial (Qwen3-Embedding-4B + LoRA fold 01 + linear head)

Sobe o código do endpoint (app.py, inference.py, config.py) e os artefatos do FT-Solo (adapter LoRA + cabeça linear do melhor fold segundo o manifesto). Gerado via Colab a partir do tar + zip no Drive.

app.py

@@ -1,25 +1,26 @@
 """Gradio app — endpoint de utilidade para community notes em PT-BR.
- 
+
 Expõe:
   - UI web com três abas: Prever / Explicar / Sobre.
   - API HTTP em /gradio_api/call/predict e /gradio_api/call/explain (gerada
     automaticamente pelo Gradio a partir dos api_name).
- 
+
 Para clientes Python, use gradio_client:
- 
+
     from gradio_client import Client
     c = Client("<user>/<space>", hf_token="hf_...")
     score = c.predict("texto da nota...", api_name="/predict")
 """
 from __future__ import annotations
- 
+
 import html
 import logging
 import os
 import traceback
- 
+from pathlib import Path
+
 import gradio as gr
- 
+
 from config import (
     CONFIDENCE_BOUNDS_ALTA,
     CONFIDENCE_BOUNDS_MEDIA,
@@ -27,26 +28,27 @@ from config import (
 )
 from inference import DEVICE, explain_occlusion, predict_one, warmup
 
-from pathlib import Path
-# se o styles.css estiver na mesma pasta do app.py
-STYLE_PATH = Path(__file__).resolve().parent / "styles.css"
-CUSTOM_CSS = ""
-if STYLE_PATH.exists():
-    CUSTOM_CSS = STYLE_PATH.read_text(encoding="utf-8")
- 
 logging.basicConfig(
     level=logging.INFO,
     format="%(asctime)s [%(levelname)s] %(name)s: %(message)s",
 )
 log = logging.getLogger("app")
- 
- 
+
+# ---------------------------------------------------------------------------
+# CSS do projeto
+# ---------------------------------------------------------------------------
+APP_DIR = Path(__file__).resolve().parent
+STYLE_PATH = APP_DIR / "styles.css"
+CUSTOM_CSS = STYLE_PATH.read_text(encoding="utf-8") if STYLE_PATH.exists() else ""
+
+
+
 # ---------------------------------------------------------------------------
 # Warm-up agressivo — queremos que o primeiro request não pague cold-start
 # ---------------------------------------------------------------------------
 MODEL_READY: bool
 MODEL_ERROR: str | None
- 
+
 try:
     warmup()
     MODEL_READY = True
@@ -56,8 +58,8 @@ except Exception as exc:  # noqa: BLE001 — queremos pegar qualquer falha de ca
     MODEL_READY = False
     MODEL_ERROR = f"{type(exc).__name__}: {exc}"
     log.error("Falha ao carregar modelo no startup:\n%s", traceback.format_exc())
- 
- 
+
+
 # ---------------------------------------------------------------------------
 # Helpers de apresentação
 # ---------------------------------------------------------------------------
@@ -69,50 +71,43 @@ def _confidence_band(p: float) -> str:
     if p <= lo_m or p >= hi_m:
         return "Média"
     return "Baixa"
- 
- 
+
+
 def _label(p: float) -> str:
     return "Útil" if p >= THRESHOLD_UTIL else "Não-útil"
- 
- 
+
+
 def _score_card_html(p: float) -> str:
-    """Card principal do resultado — badge de label + badge de confiança + probabilidade."""
+    """Card principal do resultado — usando classes CSS do projeto."""
     lbl = _label(p)
     band = _confidence_band(p)
- 
-    lbl_colors = {"Útil": ("#d8f3dc", "#1b4332"), "Não-útil": ("#fde2e4", "#9d0208")}
-    band_colors = {
-        "Alta": ("#d8f3dc", "#1b4332"),
-        "Média": ("#fff3bf", "#7c5c00"),
-        "Baixa": ("#e9ecef", "#495057"),
-    }
-    lbg, lfg = lbl_colors[lbl]
-    bbg, bfg = band_colors[band]
- 
+
+    lbl_class = "notinhas-badge-util" if lbl == "Útil" else "notinhas-badge-nao-util"
+
+    if band == "Alta":
+        band_class = lbl_class
+    elif band == "Média":
+        band_class = "notinhas-badge-media"
+    else:
+        band_class = "notinhas-badge-baixa"
+
     return f"""
-    <div style="background:#fff;border:1px solid #e9ecef;border-radius:16px;
-                padding:18px 22px;box-shadow:0 4px 14px rgba(0,0,0,0.04);
-                font-family:system-ui, -apple-system, sans-serif;">
-      <div style="display:flex;justify-content:space-between;align-items:center;
-                  gap:12px;flex-wrap:wrap;">
+    <div class="notinhas-card">
+      <div style="display:flex;justify-content:space-between;align-items:center;gap:12px;flex-wrap:wrap;">
         <div style="display:flex;gap:8px;flex-wrap:wrap;">
-          <span style="background:{lbg};color:{lfg};padding:4px 12px;
-                       border-radius:999px;font-size:13px;font-weight:700;">{lbl}</span>
-          <span style="background:{bbg};color:{bfg};padding:4px 12px;
-                       border-radius:999px;font-size:13px;font-weight:700;">
-            Confiança {band}
-          </span>
+          <span class="notinhas-badge {lbl_class}">{lbl}</span>
+          <span class="notinhas-badge {band_class}">Confiança {band}</span>
         </div>
+
         <div style="text-align:right;">
-          <div style="font-size:12px;color:#6c757d;">P(útil)</div>
-          <div style="font-size:32px;font-weight:800;color:#2b2d42;
-                      font-variant-numeric:tabular-nums;">{p:.3f}</div>
+          <div class="notinhas-score-label">P(útil)</div>
+          <div class="notinhas-score-value">{p:.3f}</div>
         </div>
       </div>
     </div>
     """
- 
- 
+
+
 def _contrib_color(v: float, v_max: float) -> str:
     if v_max <= 0:
         return "transparent"
@@ -121,8 +116,8 @@ def _contrib_color(v: float, v_max: float) -> str:
     if v > 0:
         return f"rgba(95, 168, 143, {alpha:.3f})"  # verde (PALETA['util'] do notebook)
     return f"rgba(224, 123, 107, {alpha:.3f})"  # coral (PALETA['nao_util'])
- 
- 
+
+
 def _highlighted_text_html(tokens: list[str], contribs: list[float]) -> str:
     if not tokens:
         return "<em>(sem palavras para destacar)</em>"
@@ -140,15 +135,15 @@ def _highlighted_text_html(tokens: list[str], contribs: list[float]) -> str:
         + " ".join(spans)
         + "</div>"
     )
- 
- 
+
+
 def _top_tokens_table_html(
     tokens: list[str], contribs: list[float], k: int = 5
 ) -> str:
     pairs = list(zip(tokens, contribs))
     pos = sorted([p for p in pairs if p[1] > 0], key=lambda x: -x[1])[:k]
     neg = sorted([p for p in pairs if p[1] < 0], key=lambda x: x[1])[:k]
- 
+
     def _row(tok: str, v: float, side: str) -> str:
         color = "#1b4332" if side == "pos" else "#9d0208"
         sign = "+" if v > 0 else ""
@@ -158,11 +153,11 @@ def _top_tokens_table_html(
             f'<td style="padding:5px 8px;text-align:right;color:{color};'
             f'font-variant-numeric:tabular-nums;">{sign}{v:.4f}</td></tr>'
         )
- 
+
     empty = '<tr><td colspan="2" style="padding:6px;color:#9aa1aa;"><em>—</em></td></tr>'
     pos_rows = "".join(_row(t, v, "pos") for t, v in pos) or empty
     neg_rows = "".join(_row(t, v, "neg") for t, v in neg) or empty
- 
+
     return f"""
     <div style="display:grid;grid-template-columns:1fr 1fr;gap:14px;margin-top:12px;
                 font-family:system-ui, -apple-system, sans-serif;">
@@ -180,8 +175,8 @@ def _top_tokens_table_html(
       </div>
     </div>
     """
- 
- 
+
+
 # ---------------------------------------------------------------------------
 # Handlers — retornam HTML para a UI + JSON para a API
 # ---------------------------------------------------------------------------
@@ -195,7 +190,7 @@ def handle_predict(text: str):
             f"<em>Modelo indisponível: {html.escape(err)}</em>",
             {"error": "model_unavailable", "detail": err},
         )
- 
+
     p = predict_one(text)
     return (
         _score_card_html(p),
@@ -205,8 +200,8 @@ def handle_predict(text: str):
             "confidence_band": _confidence_band(p),
         },
     )
- 
- 
+
+
 def handle_explain(text: str):
     text = (text or "").strip()
     if not text:
@@ -219,12 +214,12 @@ def handle_explain(text: str):
             "",
             {"error": "model_unavailable", "detail": err},
         )
- 
+
     result = explain_occlusion(text)
     p = result["proba_full"]
     tokens = result["tokens"]
     contribs = result["contributions"]
- 
+
     return (
         _score_card_html(p),
         _highlighted_text_html(tokens, contribs),
@@ -237,8 +232,8 @@ def handle_explain(text: str):
             "contributions": contribs,
         },
     )
- 
- 
+
+
 # ---------------------------------------------------------------------------
 # UI
 # ---------------------------------------------------------------------------
@@ -247,26 +242,26 @@ EXAMPLE_UTIL = (
     "A fonte correta pode ser conferida no link: https://www.gov.br/saude/..."
 )
 EXAMPLE_NAO = "Essa nota é claramente desnecessária, é opinião pessoal do autor."
- 
+
 INTRO_MD = """
 # Notinhas — endpoint de utilidade (FT-Solo)
- 
+
 Classificador de utilidade para **community notes em português**, baseado em
 **Qwen3-Embedding-4B + LoRA + cabeça linear** (modo fiel do FT-Solo, fold 01).
- 
+
 - **Prever** — score + label + faixa de confiança.
 - **Explicar** — o mesmo + contribuição de cada palavra via leave-one-out.
 - **Sobre** — detalhes técnicos e limitações.
 """
- 
- 
+
+
 with gr.Blocks(
     title="Notinhas — endpoint de utilidade (FT-Solo)",
     theme=gr.themes.Base(),
     css=CUSTOM_CSS,
 ) as demo:
     gr.Markdown(INTRO_MD)
- 
+
     if not MODEL_READY:
         gr.Markdown(
             f"""
@@ -277,7 +272,7 @@ with gr.Blocks(
 > **Settings → Variables and secrets**.
 """
         )
- 
+
     with gr.Tab("Prever"):
         with gr.Row():
             with gr.Column(scale=2):
@@ -292,14 +287,14 @@ with gr.Blocks(
             with gr.Column(scale=3):
                 out_card_p = gr.HTML(label="Resultado")
                 out_json_p = gr.JSON(label="Resposta da API")
- 
+
         btn_p.click(
             handle_predict,
             inputs=[inp_p],
             outputs=[out_card_p, out_json_p],
             api_name="predict",
         )
- 
+
     with gr.Tab("Explicar"):
         with gr.Row():
             with gr.Column(scale=2):
@@ -316,44 +311,44 @@ with gr.Blocks(
                 out_hl = gr.HTML(label="Contribuição por palavra")
                 out_tbl = gr.HTML(label="Top tokens por lado")
                 out_json_e = gr.JSON(label="Resposta da API")
- 
+
         btn_e.click(
             handle_explain,
             inputs=[inp_e],
             outputs=[out_card_e, out_hl, out_tbl, out_json_e],
             api_name="explain",
         )
- 
+
     with gr.Tab("Sobre"):
         gr.Markdown(
             f"""
 ### Detalhes técnicos
- 
+
 - **Modelo base**: `Qwen/Qwen3-Embedding-4B` (embedding, 2.560 dims, last-token pooling).
 - **Adaptação**: LoRA treinado com alvo `label_binary_strict` (recorte A do projeto).
 - **Cabeça**: `nn.Linear(2560, 1)` → sigmoid.
 - **Prompt de instrução** (idêntico ao treino):
- 
+
   > `Instruct: Represent the following Brazilian Portuguese community note for binary classification of helpfulness.`
   > `Query: <texto>`
- 
+
 - **max_length**: 256 tokens.
 - **Dispositivo atual**: `{DEVICE}`.
 - **Fold servido**: 01 (melhor fold segundo o manifesto do pipeline).
- 
+
 ### Método de explicação
- 
+
 A aba **Explicar** usa **occlusion word-level** (leave-one-out): para cada palavra
 separada por espaço, calculamos `Δ = P(texto completo) − P(texto sem a palavra)`.
- 
+
 - Δ positivo ⇒ palavra puxando para **útil** (verde).
 - Δ negativo ⇒ palavra puxando para **não-útil** (coral).
- 
+
 É uma aproximação rápida do SHAP Partition usado no notebook de explicabilidade
 (~1–2 s vs ~12–15 s em GPU), com resultados visualmente comparáveis para notas curtas.
- 
+
 ### Limitações
- 
+
 - O rótulo `helpful` mede **aceitabilidade bipartidária**, não qualidade editorial.
   A galeria curada do notebook mostra casos onde vizinhos semânticos idênticos
   recebem rótulos opostos por razões políticas.
@@ -362,11 +357,11 @@ separada por espaço, calculamos `Δ = P(texto completo) − P(texto sem a palav
   subir para ensemble dos 5 folds (média de probabilidades).
 """
         )
- 
- 
+
+
 if __name__ == "__main__":
     demo.queue(default_concurrency_limit=1).launch(
         server_name="0.0.0.0",
         server_port=int(os.environ.get("PORT", 7860)),
         show_api=True,
-    )
+    )

app.py.bak_20260424_031409

@@ -0,0 +1,364 @@
+"""Gradio app — endpoint de utilidade para community notes em PT-BR.
+
+Expõe:
+  - UI web com três abas: Prever / Explicar / Sobre.
+  - API HTTP em /gradio_api/call/predict e /gradio_api/call/explain (gerada
+    automaticamente pelo Gradio a partir dos api_name).
+
+Para clientes Python, use gradio_client:
+
+    from gradio_client import Client
+    c = Client("<user>/<space>", hf_token="hf_...")
+    score = c.predict("texto da nota...", api_name="/predict")
+"""
+from __future__ import annotations
+
+import html
+import logging
+import os
+import traceback
+
+import gradio as gr
+
+from config import (
+    CONFIDENCE_BOUNDS_ALTA,
+    CONFIDENCE_BOUNDS_MEDIA,
+    THRESHOLD_UTIL,
+)
+from inference import DEVICE, explain_occlusion, predict_one, warmup
+
+logging.basicConfig(
+    level=logging.INFO,
+    format="%(asctime)s [%(levelname)s] %(name)s: %(message)s",
+)
+log = logging.getLogger("app")
+
+
+# ---------------------------------------------------------------------------
+# Warm-up agressivo — queremos que o primeiro request não pague cold-start
+# ---------------------------------------------------------------------------
+MODEL_READY: bool
+MODEL_ERROR: str | None
+
+try:
+    warmup()
+    MODEL_READY = True
+    MODEL_ERROR = None
+    log.info("Modelo carregado no startup. Device=%s", DEVICE)
+except Exception as exc:  # noqa: BLE001 — queremos pegar qualquer falha de carregamento
+    MODEL_READY = False
+    MODEL_ERROR = f"{type(exc).__name__}: {exc}"
+    log.error("Falha ao carregar modelo no startup:\n%s", traceback.format_exc())
+
+
+# ---------------------------------------------------------------------------
+# Helpers de apresentação
+# ---------------------------------------------------------------------------
+def _confidence_band(p: float) -> str:
+    lo_a, hi_a = CONFIDENCE_BOUNDS_ALTA
+    lo_m, hi_m = CONFIDENCE_BOUNDS_MEDIA
+    if p <= lo_a or p >= hi_a:
+        return "Alta"
+    if p <= lo_m or p >= hi_m:
+        return "Média"
+    return "Baixa"
+
+
+def _label(p: float) -> str:
+    return "Útil" if p >= THRESHOLD_UTIL else "Não-útil"
+
+
+def _score_card_html(p: float) -> str:
+    """Card principal do resultado — badge de label + badge de confiança + probabilidade."""
+    lbl = _label(p)
+    band = _confidence_band(p)
+
+    lbl_colors = {"Útil": ("#d8f3dc", "#1b4332"), "Não-útil": ("#fde2e4", "#9d0208")}
+    band_colors = {
+        "Alta": ("#d8f3dc", "#1b4332"),
+        "Média": ("#fff3bf", "#7c5c00"),
+        "Baixa": ("#e9ecef", "#495057"),
+    }
+    lbg, lfg = lbl_colors[lbl]
+    bbg, bfg = band_colors[band]
+
+    return f"""
+    <div style="background:#fff;border:1px solid #e9ecef;border-radius:16px;
+                padding:18px 22px;box-shadow:0 4px 14px rgba(0,0,0,0.04);
+                font-family:system-ui, -apple-system, sans-serif;">
+      <div style="display:flex;justify-content:space-between;align-items:center;
+                  gap:12px;flex-wrap:wrap;">
+        <div style="display:flex;gap:8px;flex-wrap:wrap;">
+          <span style="background:{lbg};color:{lfg};padding:4px 12px;
+                       border-radius:999px;font-size:13px;font-weight:700;">{lbl}</span>
+          <span style="background:{bbg};color:{bfg};padding:4px 12px;
+                       border-radius:999px;font-size:13px;font-weight:700;">
+            Confiança {band}
+          </span>
+        </div>
+        <div style="text-align:right;">
+          <div style="font-size:12px;color:#6c757d;">P(útil)</div>
+          <div style="font-size:32px;font-weight:800;color:#2b2d42;
+                      font-variant-numeric:tabular-nums;">{p:.3f}</div>
+        </div>
+      </div>
+    </div>
+    """
+
+
+def _contrib_color(v: float, v_max: float) -> str:
+    if v_max <= 0:
+        return "transparent"
+    intensity = min(1.0, abs(v) / v_max)
+    alpha = 0.15 + 0.65 * intensity  # 0.15 .. 0.80
+    if v > 0:
+        return f"rgba(95, 168, 143, {alpha:.3f})"  # verde (PALETA['util'] do notebook)
+    return f"rgba(224, 123, 107, {alpha:.3f})"  # coral (PALETA['nao_util'])
+
+
+def _highlighted_text_html(tokens: list[str], contribs: list[float]) -> str:
+    if not tokens:
+        return "<em>(sem palavras para destacar)</em>"
+    v_max = max((abs(c) for c in contribs), default=1e-9) or 1e-9
+    spans = []
+    for tok, c in zip(tokens, contribs):
+        bg = _contrib_color(c, v_max)
+        spans.append(
+            f'<span style="background:{bg};padding:2px 4px;border-radius:4px;'
+            f'margin:0 1px;" title="Δ={c:+.4f}">{html.escape(tok)}</span>'
+        )
+    return (
+        '<div style="font-size:15px;line-height:2;color:#212529;'
+        'font-family:system-ui, -apple-system, sans-serif;padding:4px;">'
+        + " ".join(spans)
+        + "</div>"
+    )
+
+
+def _top_tokens_table_html(
+    tokens: list[str], contribs: list[float], k: int = 5
+) -> str:
+    pairs = list(zip(tokens, contribs))
+    pos = sorted([p for p in pairs if p[1] > 0], key=lambda x: -x[1])[:k]
+    neg = sorted([p for p in pairs if p[1] < 0], key=lambda x: x[1])[:k]
+
+    def _row(tok: str, v: float, side: str) -> str:
+        color = "#1b4332" if side == "pos" else "#9d0208"
+        sign = "+" if v > 0 else ""
+        return (
+            f'<tr><td style="padding:5px 8px;color:{color};">'
+            f"{html.escape(tok)}</td>"
+            f'<td style="padding:5px 8px;text-align:right;color:{color};'
+            f'font-variant-numeric:tabular-nums;">{sign}{v:.4f}</td></tr>'
+        )
+
+    empty = '<tr><td colspan="2" style="padding:6px;color:#9aa1aa;"><em>—</em></td></tr>'
+    pos_rows = "".join(_row(t, v, "pos") for t, v in pos) or empty
+    neg_rows = "".join(_row(t, v, "neg") for t, v in neg) or empty
+
+    return f"""
+    <div style="display:grid;grid-template-columns:1fr 1fr;gap:14px;margin-top:12px;
+                font-family:system-ui, -apple-system, sans-serif;">
+      <div style="background:#fcfcfd;border:1px solid #eef2f7;border-radius:12px;padding:12px;">
+        <div style="font-size:13px;font-weight:700;color:#1b4332;margin-bottom:6px;">
+          Empurram para útil
+        </div>
+        <table style="width:100%;border-collapse:collapse;font-size:13px;">{pos_rows}</table>
+      </div>
+      <div style="background:#fcfcfd;border:1px solid #eef2f7;border-radius:12px;padding:12px;">
+        <div style="font-size:13px;font-weight:700;color:#9d0208;margin-bottom:6px;">
+          Empurram para não-útil
+        </div>
+        <table style="width:100%;border-collapse:collapse;font-size:13px;">{neg_rows}</table>
+      </div>
+    </div>
+    """
+
+
+# ---------------------------------------------------------------------------
+# Handlers — retornam HTML para a UI + JSON para a API
+# ---------------------------------------------------------------------------
+def handle_predict(text: str):
+    text = (text or "").strip()
+    if not text:
+        return "<em>Forneça um texto.</em>", {"error": "empty_input"}
+    if not MODEL_READY:
+        err = MODEL_ERROR or "modelo indisponível"
+        return (
+            f"<em>Modelo indisponível: {html.escape(err)}</em>",
+            {"error": "model_unavailable", "detail": err},
+        )
+
+    p = predict_one(text)
+    return (
+        _score_card_html(p),
+        {
+            "proba_util": p,
+            "label": _label(p),
+            "confidence_band": _confidence_band(p),
+        },
+    )
+
+
+def handle_explain(text: str):
+    text = (text or "").strip()
+    if not text:
+        return "<em>Forneça um texto.</em>", "", "", {"error": "empty_input"}
+    if not MODEL_READY:
+        err = MODEL_ERROR or "modelo indisponível"
+        return (
+            f"<em>Modelo indisponível: {html.escape(err)}</em>",
+            "",
+            "",
+            {"error": "model_unavailable", "detail": err},
+        )
+
+    result = explain_occlusion(text)
+    p = result["proba_full"]
+    tokens = result["tokens"]
+    contribs = result["contributions"]
+
+    return (
+        _score_card_html(p),
+        _highlighted_text_html(tokens, contribs),
+        _top_tokens_table_html(tokens, contribs),
+        {
+            "proba_util": p,
+            "label": _label(p),
+            "confidence_band": _confidence_band(p),
+            "tokens": tokens,
+            "contributions": contribs,
+        },
+    )
+
+
+# ---------------------------------------------------------------------------
+# UI
+# ---------------------------------------------------------------------------
+EXAMPLE_UTIL = (
+    "Segundo dados oficiais do Ministério da Saúde, o número citado no tweet é falso. "
+    "A fonte correta pode ser conferida no link: https://www.gov.br/saude/..."
+)
+EXAMPLE_NAO = "Essa nota é claramente desnecessária, é opinião pessoal do autor."
+
+INTRO_MD = """
+# Notinhas — endpoint de utilidade (FT-Solo)
+
+Classificador de utilidade para **community notes em português**, baseado em
+**Qwen3-Embedding-4B + LoRA + cabeça linear** (modo fiel do FT-Solo, fold 01).
+
+- **Prever** — score + label + faixa de confiança.
+- **Explicar** — o mesmo + contribuição de cada palavra via leave-one-out.
+- **Sobre** — detalhes técnicos e limitações.
+"""
+
+
+with gr.Blocks(
+    title="Notinhas — endpoint de utilidade (FT-Solo)",
+    theme=gr.themes.Soft(primary_hue="emerald", neutral_hue="slate"),
+) as demo:
+    gr.Markdown(INTRO_MD)
+
+    if not MODEL_READY:
+        gr.Markdown(
+            f"""
+> ⚠️ **Modelo não carregou.** Detalhe: `{html.escape(MODEL_ERROR or '')}`
+>
+> Verifique que `artifacts/fold_01_adapter/` e `artifacts/fold_01_head.pt` estão presentes
+> no repositório do Space. Se o modelo base exigir autenticação, configure `HF_TOKEN` em
+> **Settings → Variables and secrets**.
+"""
+        )
+
+    with gr.Tab("Prever"):
+        with gr.Row():
+            with gr.Column(scale=2):
+                inp_p = gr.Textbox(
+                    label="Texto da nota",
+                    placeholder="Cole aqui o texto em português...",
+                    lines=7,
+                    max_lines=25,
+                )
+                btn_p = gr.Button("Prever", variant="primary")
+                gr.Examples(examples=[[EXAMPLE_UTIL], [EXAMPLE_NAO]], inputs=[inp_p])
+            with gr.Column(scale=3):
+                out_card_p = gr.HTML(label="Resultado")
+                out_json_p = gr.JSON(label="Resposta da API")
+
+        btn_p.click(
+            handle_predict,
+            inputs=[inp_p],
+            outputs=[out_card_p, out_json_p],
+            api_name="predict",
+        )
+
+    with gr.Tab("Explicar"):
+        with gr.Row():
+            with gr.Column(scale=2):
+                inp_e = gr.Textbox(
+                    label="Texto da nota",
+                    placeholder="Cole aqui o texto em português...",
+                    lines=7,
+                    max_lines=25,
+                )
+                btn_e = gr.Button("Explicar", variant="primary")
+                gr.Examples(examples=[[EXAMPLE_UTIL], [EXAMPLE_NAO]], inputs=[inp_e])
+            with gr.Column(scale=3):
+                out_card_e = gr.HTML(label="Resultado")
+                out_hl = gr.HTML(label="Contribuição por palavra")
+                out_tbl = gr.HTML(label="Top tokens por lado")
+                out_json_e = gr.JSON(label="Resposta da API")
+
+        btn_e.click(
+            handle_explain,
+            inputs=[inp_e],
+            outputs=[out_card_e, out_hl, out_tbl, out_json_e],
+            api_name="explain",
+        )
+
+    with gr.Tab("Sobre"):
+        gr.Markdown(
+            f"""
+### Detalhes técnicos
+
+- **Modelo base**: `Qwen/Qwen3-Embedding-4B` (embedding, 2.560 dims, last-token pooling).
+- **Adaptação**: LoRA treinado com alvo `label_binary_strict` (recorte A do projeto).
+- **Cabeça**: `nn.Linear(2560, 1)` → sigmoid.
+- **Prompt de instrução** (idêntico ao treino):
+
+  > `Instruct: Represent the following Brazilian Portuguese community note for binary classification of helpfulness.`
+  > `Query: <texto>`
+
+- **max_length**: 256 tokens.
+- **Dispositivo atual**: `{DEVICE}`.
+- **Fold servido**: 01 (melhor fold segundo o manifesto do pipeline).
+
+### Método de explicação
+
+A aba **Explicar** usa **occlusion word-level** (leave-one-out): para cada palavra
+separada por espaço, calculamos `Δ = P(texto completo) − P(texto sem a palavra)`.
+
+- Δ positivo ⇒ palavra puxando para **útil** (verde).
+- Δ negativo ⇒ palavra puxando para **não-útil** (coral).
+
+É uma aproximação rápida do SHAP Partition usado no notebook de explicabilidade
+(~1–2 s vs ~12–15 s em GPU), com resultados visualmente comparáveis para notas curtas.
+
+### Limitações
+
+- O rótulo `helpful` mede **aceitabilidade bipartidária**, não qualidade editorial.
+  A galeria curada do notebook mostra casos onde vizinhos semânticos idênticos
+  recebem rótulos opostos por razões políticas.
+- Textos são truncados em 256 tokens.
+- Este endpoint serve um único fold. Para produção com ganho marginal de robustez,
+  subir para ensemble dos 5 folds (média de probabilidades).
+"""
+        )
+
+
+if __name__ == "__main__":
+    demo.queue(default_concurrency_limit=1).launch(
+        server_name="0.0.0.0",
+        server_port=int(os.environ.get("PORT", 7860)),
+        show_api=True,
+    )

styles.css

@@ -1,8 +1,4 @@
-/* ── Reset ─────────────────────────────────────────────────── */
-*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
-html { scroll-behavior: smooth; }
-
-/* ── Variáveis compartilhadas ─────────────────────────────── */
+/* ── Variáveis compartilhadas do projeto ───────────────────── */
 :root {
   --bg:          #fdfbf7;
   --text:        #2c2c2c;
@@ -17,119 +13,165 @@ html { scroll-behavior: smooth; }
   --card-border: #ddd8d0;
   --soft:        #f5f3ef;
 
-  /* Fontes — podem ser sobrescritas por página */
-  --font-serif: 'Source Serif 4', Georgia, serif;
-  --font-sans:  'DM Sans', system-ui, sans-serif;
-  --font-mono:  'JetBrains Mono', monospace;
+  --font-serif: Georgia, 'Source Serif 4', serif;
+  --font-sans:  system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
+  --font-mono:  'JetBrains Mono', ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
+}
+
+/* Importante:
+   NÃO usamos reset global com margin:0/padding:0,
+   porque isso quebra componentes internos do Gradio.
+*/
+*, *::before, *::after {
+  box-sizing: border-box;
+}
+
+/* ── Base Gradio ───────────────────────────────────────────── */
+.gradio-container {
+  background: var(--bg) !important;
+  color: var(--text) !important;
+  font-family: var(--font-sans) !important;
+  line-height: 1.55;
+}
+
+.gradio-container h1,
+.gradio-container h2,
+.gradio-container h3 {
+  color: var(--accent);
+  letter-spacing: -0.02em;
+}
+
+.gradio-container h1 {
+  font-family: var(--font-serif);
+  font-size: clamp(1.7rem, 2vw, 2.35rem);
+  margin-bottom: 0.45rem;
+}
+
+.gradio-container p {
+  margin-bottom: 0.65rem;
+}
+
+.gradio-container ul,
+.gradio-container ol {
+  margin: 0.35rem 0 0.9rem 1.25rem;
+  padding-left: 1rem;
+}
+
+.gradio-container li {
+  margin: 0.15rem 0;
+}
+
+/* ── Abas: corrige PreverExplicarSobre colado ─────────────── */
+.gradio-container [role="tablist"] {
+  gap: 0.35rem !important;
+  border-bottom: 1px solid var(--grid) !important;
+  margin-top: 0.9rem !important;
+  margin-bottom: 1rem !important;
+}
+
+.gradio-container button[role="tab"] {
+  padding: 0.55rem 0.85rem !important;
+  margin-right: 0.15rem !important;
+  border-radius: 10px 10px 0 0 !important;
+  color: var(--accent) !important;
+  font-weight: 600 !important;
+}
+
+.gradio-container button[role="tab"][aria-selected="true"] {
+  background: color-mix(in srgb, var(--accent) 10%, transparent) !important;
+  border-bottom-color: var(--accent) !important;
+}
+
+/* ── Campos, painéis e botões ─────────────────────────────── */
+.gradio-container textarea,
+.gradio-container input {
+  font-family: var(--font-sans) !important;
+}
+
+.gradio-container .block,
+.gradio-container .panel,
+.gradio-container .form {
+  border-radius: 16px !important;
+}
 
-  /* Aliases para compatibilidade com páginas que usam nomes antigos */
-  --serif: var(--font-serif);
-  --sans:  var(--font-sans);
-  --mono:  var(--font-mono);
+.gradio-container button.primary,
+.gradio-container .primary {
+  background: var(--accent) !important;
+  border-color: var(--accent) !important;
+  color: #fff !important;
+  font-weight: 700 !important;
 }
 
-/* ── Base ──────────────────────────────────────────────────── */
-body {
+.gradio-container button.primary:hover,
+.gradio-container .primary:hover {
+  filter: brightness(1.08);
+}
+
+/* ── Cards próprios do endpoint ───────────────────────────── */
+.notinhas-card {
+  background: #ffffff;
+  border: 1px solid var(--card-border);
+  border-radius: 18px;
+  padding: 18px 22px;
+  box-shadow: 0 4px 14px rgba(38, 70, 83, 0.06);
   font-family: var(--font-sans);
-  background: var(--bg);
-  color: var(--text);
-  line-height: 1.65;
-  -webkit-font-smoothing: antialiased;
-}
-
-/* ── Navegação principal ───────────────────────────────────── */
-.site-nav {
-  position: sticky;
-  top: 0;
-  z-index: 1000;
-  display: flex;
-  align-items: center;
-  gap: 6px;
-  width: 100%;
-  min-height: 52px;
-  padding: 0 24px;
-  background: var(--accent);
-  box-shadow: 0 1px 12px rgba(0,0,0,.12);
-  /* scrollável horizontalmente em telas estreitas, sem barra visível */
-  overflow-x: auto;
-  -webkit-overflow-scrolling: touch;
-  scrollbar-width: none;
-}
-.site-nav::-webkit-scrollbar { display: none; }
-
-.site-nav__brand {
-  font-family: var(--font-mono);
-  font-size: 11px;
-  letter-spacing: 1.5px;
-  text-transform: uppercase;
-  color: #d4a017;
-  padding: 15px 18px 15px 0;
-  margin-right: 10px;
-  text-decoration: none;
-  white-space: nowrap;
-  flex-shrink: 0;
-  border-right: 1px solid rgba(255,255,255,.12);
-}
-.site-nav__link {
-  color: rgba(255,255,255,.72);
-  text-decoration: none;
-  padding: 14px 16px;
+}
+
+.notinhas-soft-card {
+  background: var(--soft);
+  border: 1px solid var(--grid);
+  border-radius: 14px;
+  padding: 14px;
+  font-family: var(--font-sans);
+}
+
+.notinhas-badge {
+  display: inline-block;
+  padding: 4px 12px;
+  border-radius: 999px;
   font-size: 13px;
-  font-weight: 500;
-  border-radius: 8px;
-  white-space: nowrap;
-  flex-shrink: 0;
-  transition: background-color .18s ease, color .18s ease;
-}
-.site-nav__link:hover,
-.site-nav__link:focus-visible {
-  color: #fff;
-  background: rgba(255,255,255,.08);
-  outline: none;
-}
-.site-nav__link.is-active,
-.site-nav__link[aria-current="page"] {
-  color: #fff;
-  font-weight: 600;
-  background: rgba(255,255,255,.13);
-}
-@media (max-width: 640px) {
-  .site-nav        { padding: 0 14px; }
-  .site-nav__brand { padding-right: 12px; margin-right: 6px; }
-}
-
-/* ── Layout ────────────────────────────────────────────────── */
-.container {
-  max-width: 1180px;
-  margin: 0 auto;
-  padding: 32px 24px 60px;
-}
-
-/* ── Utilitários ───────────────────────────────────────────── */
-.kicker {
-  font-family: var(--font-mono);
-  font-size: 11px;
-  letter-spacing: 2px;
-  text-transform: uppercase;
+  font-weight: 700;
+}
+
+.notinhas-badge-util {
+  background: #d8f3dc;
+  color: #1b4332;
+}
+
+.notinhas-badge-nao-util {
+  background: #fde2e4;
+  color: #9d0208;
+}
+
+.notinhas-badge-media {
+  background: #fff3bf;
+  color: #7c5c00;
+}
+
+.notinhas-badge-baixa {
+  background: #e9ecef;
+  color: #495057;
+}
+
+.notinhas-score-label {
+  font-size: 12px;
   color: var(--muted);
-  margin-bottom: 12px;
 }
-code {
+
+.notinhas-score-value {
   font-family: var(--font-mono);
-  font-size: 12px;
-  background: #f0ede6;
-  padding: 1px 5px;
-  border-radius: 4px;
+  font-size: 32px;
+  font-weight: 800;
+  color: var(--accent);
+  font-variant-numeric: tabular-nums;
 }
 
-/* ── Rodapé ────────────────────────────────────────────────── */
-.footer {
-  margin-top: 40px;
-  padding-top: 20px;
-  border-top: 1px solid var(--grid);
-  font-size: 11px;
-  color: var(--muted);
-  text-align: center;
-  line-height: 1.6;
+/* JSON e exemplos */
+.gradio-container label,
+.gradio-container .label-wrap {
+  color: var(--muted) !important;
+}
+
+.gradio-container .examples {
+  margin-top: 0.85rem !important;
 }
-.footer a { color: var(--accent); }

styles.css.bak_20260424_031409

@@ -0,0 +1,177 @@
+/* ── Variáveis compartilhadas do projeto ───────────────────── */
+:root {
+  --bg:          #fdfbf7;
+  --text:        #2c2c2c;
+  --muted:       #7a7a7a;
+  --accent:      #264653;
+  --crh:         #2a9d8f;
+  --nmr:         #e9c46a;
+  --crnh:        #e76f51;
+  --info:        #577590;
+  --info-bg:     #57759014;
+  --grid:        #e8e4dd;
+  --card-border: #ddd8d0;
+  --soft:        #f5f3ef;
+
+  --font-serif: Georgia, 'Source Serif 4', serif;
+  --font-sans:  system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
+  --font-mono:  'JetBrains Mono', ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
+}
+
+/* Importante:
+   NÃO usamos reset global com margin:0/padding:0,
+   porque isso quebra componentes internos do Gradio.
+*/
+*, *::before, *::after {
+  box-sizing: border-box;
+}
+
+/* ── Base Gradio ───────────────────────────────────────────── */
+.gradio-container {
+  background: var(--bg) !important;
+  color: var(--text) !important;
+  font-family: var(--font-sans) !important;
+  line-height: 1.55;
+}
+
+.gradio-container h1,
+.gradio-container h2,
+.gradio-container h3 {
+  color: var(--accent);
+  letter-spacing: -0.02em;
+}
+
+.gradio-container h1 {
+  font-family: var(--font-serif);
+  font-size: clamp(1.7rem, 2vw, 2.35rem);
+  margin-bottom: 0.45rem;
+}
+
+.gradio-container p {
+  margin-bottom: 0.65rem;
+}
+
+.gradio-container ul,
+.gradio-container ol {
+  margin: 0.35rem 0 0.9rem 1.25rem;
+  padding-left: 1rem;
+}
+
+.gradio-container li {
+  margin: 0.15rem 0;
+}
+
+/* ── Abas: corrige PreverExplicarSobre colado ─────────────── */
+.gradio-container [role="tablist"] {
+  gap: 0.35rem !important;
+  border-bottom: 1px solid var(--grid) !important;
+  margin-top: 0.9rem !important;
+  margin-bottom: 1rem !important;
+}
+
+.gradio-container button[role="tab"] {
+  padding: 0.55rem 0.85rem !important;
+  margin-right: 0.15rem !important;
+  border-radius: 10px 10px 0 0 !important;
+  color: var(--accent) !important;
+  font-weight: 600 !important;
+}
+
+.gradio-container button[role="tab"][aria-selected="true"] {
+  background: color-mix(in srgb, var(--accent) 10%, transparent) !important;
+  border-bottom-color: var(--accent) !important;
+}
+
+/* ── Campos, painéis e botões ─────────────────────────────── */
+.gradio-container textarea,
+.gradio-container input {
+  font-family: var(--font-sans) !important;
+}
+
+.gradio-container .block,
+.gradio-container .panel,
+.gradio-container .form {
+  border-radius: 16px !important;
+}
+
+.gradio-container button.primary,
+.gradio-container .primary {
+  background: var(--accent) !important;
+  border-color: var(--accent) !important;
+  color: #fff !important;
+  font-weight: 700 !important;
+}
+
+.gradio-container button.primary:hover,
+.gradio-container .primary:hover {
+  filter: brightness(1.08);
+}
+
+/* ── Cards próprios do endpoint ───────────────────────────── */
+.notinhas-card {
+  background: #ffffff;
+  border: 1px solid var(--card-border);
+  border-radius: 18px;
+  padding: 18px 22px;
+  box-shadow: 0 4px 14px rgba(38, 70, 83, 0.06);
+  font-family: var(--font-sans);
+}
+
+.notinhas-soft-card {
+  background: var(--soft);
+  border: 1px solid var(--grid);
+  border-radius: 14px;
+  padding: 14px;
+  font-family: var(--font-sans);
+}
+
+.notinhas-badge {
+  display: inline-block;
+  padding: 4px 12px;
+  border-radius: 999px;
+  font-size: 13px;
+  font-weight: 700;
+}
+
+.notinhas-badge-util {
+  background: #d8f3dc;
+  color: #1b4332;
+}
+
+.notinhas-badge-nao-util {
+  background: #fde2e4;
+  color: #9d0208;
+}
+
+.notinhas-badge-media {
+  background: #fff3bf;
+  color: #7c5c00;
+}
+
+.notinhas-badge-baixa {
+  background: #e9ecef;
+  color: #495057;
+}
+
+.notinhas-score-label {
+  font-size: 12px;
+  color: var(--muted);
+}
+
+.notinhas-score-value {
+  font-family: var(--font-mono);
+  font-size: 32px;
+  font-weight: 800;
+  color: var(--accent);
+  font-variant-numeric: tabular-nums;
+}
+
+/* JSON e exemplos */
+.gradio-container label,
+.gradio-container .label-wrap {
+  color: var(--muted) !important;
+}
+
+.gradio-container .examples {
+  margin-top: 0.85rem !important;
+}