Add branding and visible log counter to playground
This commit is contained in:
parent
c34bc3b5d7
commit
75660f4c8c
5 changed files with 76 additions and 5 deletions
|
|
@ -2,7 +2,7 @@
|
|||
|
||||
**Proyecto:** Workspace de tools IA para empresas
|
||||
**Modulo:** RAG
|
||||
**Ultima actualizacion:** 2026-04-05
|
||||
**Ultima actualizacion:** 2026-04-06
|
||||
**Ultima modificacion por:** Agente tools IA para potenciar servicios empresariales
|
||||
**Estado:** Implementado en codigo, pendiente de redeploy
|
||||
|
||||
|
|
@ -61,6 +61,8 @@ Tambien permite:
|
|||
- ajustar `scope`
|
||||
- seleccionar el modelo de respuesta
|
||||
- usar presets para docs, docs del modulo y codigo del RAG
|
||||
- ver un contador visible de logs recientes
|
||||
- mostrar branding visual del servicio en la cabecera
|
||||
|
||||
---
|
||||
|
||||
|
|
@ -155,6 +157,7 @@ Aunque de momento el playground no tiene una pestaña dedicada solo a logs, si p
|
|||
|
||||
- registrar logs manuales
|
||||
- mostrar logs recientes
|
||||
- mostrar un contador visible de logs en cabecera para saber de un vistazo si el sistema esta generando incidencias o revisiones
|
||||
|
||||
Y estos logs ya quedan preparados para ser revisados despues por el usuario junto con este agente u otros agentes.
|
||||
|
||||
|
|
|
|||
|
|
@ -21,6 +21,7 @@ const contextIndicator = document.getElementById("contextIndicator");
|
|||
const contextStatusText = document.getElementById("contextStatusText");
|
||||
const contextScopeText = document.getElementById("contextScopeText");
|
||||
const logsResult = document.getElementById("logsResult");
|
||||
const logCounterValue = document.getElementById("logCounterValue");
|
||||
|
||||
const ingestSourceType = document.getElementById("ingestSourceType");
|
||||
const ingestScopeMode = document.getElementById("ingestScopeMode");
|
||||
|
|
@ -230,8 +231,10 @@ async function loadRecentLogs() {
|
|||
try {
|
||||
const logs = await fetch("/logs/recent").then((response) => response.json());
|
||||
logsResult.textContent = format(logs);
|
||||
logCounterValue.textContent = Array.isArray(logs) ? String(logs.length) : "0";
|
||||
} catch (error) {
|
||||
logsResult.textContent = String(error);
|
||||
logCounterValue.textContent = "0";
|
||||
}
|
||||
}
|
||||
|
||||
|
|
|
|||
|
|
@ -9,12 +9,21 @@
|
|||
<body>
|
||||
<main class="layout">
|
||||
<header class="hero">
|
||||
<div>
|
||||
<div class="hero-brand">
|
||||
<img class="brand-logo" src="https://por-correo.com/templates/yootheme/cache/e5/logo_por-correo-e574d3f1.webp" alt="POR-CORREO" />
|
||||
<div>
|
||||
<p class="eyebrow">RAG Playground</p>
|
||||
<h1>Laboratorio del RAG</h1>
|
||||
<p class="lead">Prueba ingesta, bootstrap y chat con contexto visible para evaluar el RAG como si estuviera integrado en una app o agente real.</p>
|
||||
<h1>Laboratorio de pruebas sistema RAG</h1>
|
||||
<p class="lead">Prueba ingesta, bootstrap y chat con contexto visible para evaluar el RAG como si estuviera integrado en una app o agente real. Incluye comparacion con y sin RAG, seleccion de modelos, logs automáticos y logs solicitados por el usuario para analizar fallos, carencias y mejoras.</p>
|
||||
</div>
|
||||
</div>
|
||||
<div class="hero-side">
|
||||
<div class="log-counter" id="logCounterCard">
|
||||
<span class="log-counter-value" id="logCounterValue">0</span>
|
||||
<span class="log-counter-label">logs detectados</span>
|
||||
</div>
|
||||
<button id="healthButton" class="secondary">Comprobar health</button>
|
||||
</div>
|
||||
<button id="healthButton" class="secondary">Comprobar health</button>
|
||||
</header>
|
||||
|
||||
<section class="tabs">
|
||||
|
|
|
|||
|
|
@ -42,6 +42,53 @@ body {
|
|||
margin-bottom: 18px;
|
||||
}
|
||||
|
||||
.hero-brand {
|
||||
display: flex;
|
||||
gap: 18px;
|
||||
align-items: flex-start;
|
||||
}
|
||||
|
||||
.brand-logo {
|
||||
width: 110px;
|
||||
height: auto;
|
||||
object-fit: contain;
|
||||
filter: drop-shadow(0 8px 18px rgba(0, 0, 0, 0.2));
|
||||
}
|
||||
|
||||
.hero-side {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: flex-end;
|
||||
gap: 12px;
|
||||
}
|
||||
|
||||
.log-counter {
|
||||
min-width: 150px;
|
||||
padding: 12px 16px;
|
||||
border-radius: 16px;
|
||||
border: 1px solid var(--border);
|
||||
background: #0b1020;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
}
|
||||
|
||||
.log-counter-value {
|
||||
font-size: 32px;
|
||||
font-weight: 800;
|
||||
color: var(--accent);
|
||||
line-height: 1;
|
||||
}
|
||||
|
||||
.log-counter-label {
|
||||
color: var(--muted);
|
||||
font-size: 12px;
|
||||
text-transform: uppercase;
|
||||
letter-spacing: 0.08em;
|
||||
margin-top: 6px;
|
||||
}
|
||||
|
||||
.tabs {
|
||||
display: inline-flex;
|
||||
gap: 10px;
|
||||
|
|
@ -215,4 +262,12 @@ pre {
|
|||
.hero {
|
||||
flex-direction: column;
|
||||
}
|
||||
|
||||
.hero-brand {
|
||||
flex-direction: column;
|
||||
}
|
||||
|
||||
.hero-side {
|
||||
align-items: stretch;
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -68,6 +68,7 @@ Este archivo registra agentes y sesiones de trabajo de este workspace.
|
|||
- Ampliacion de la ingesta y del playground para soportar upload directo de archivos y `sourceId` personalizado, permitiendo aislar documentos ajenos al RAG en scopes separados.
|
||||
- Implementacion de logs de evaluacion persistentes en `Qdrant`, con disparo automatico por contexto insuficiente y registro manual con nota desde el playground.
|
||||
- Ampliacion de los logs de evaluacion para permitir seguimiento real (`pending`, `resolved`, `ignored`, etc.) y documentacion de su arquitectura en `RAG/docs/LOGS_EVALUACION.md`.
|
||||
- Ajuste visual del playground con branding de POR-CORREO, nuevo titulo y contador visible de logs para detectar de un vistazo actividad de evaluacion.
|
||||
- Reorganizacion de RAG como modulo raiz independiente con documentacion propia en `RAG/docs/`.
|
||||
- Ajuste del indice documental global para reflejar la separacion entre documentacion global y documentacion por tool.
|
||||
- Creacion de `docs/TASK.md` para descomponer lineas de trabajo amplias en puntos de analisis y acuerdos.
|
||||
|
|
|
|||
Loading…
Add table
Reference in a new issue