173 lines
6.8 KiB
HTML
173 lines
6.8 KiB
HTML
<!doctype html>
|
|
<html lang="es">
|
|
<head>
|
|
<meta charset="UTF-8" />
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
|
<title>RAG Playground</title>
|
|
<link rel="stylesheet" href="/playground/styles.css" />
|
|
</head>
|
|
<body>
|
|
<main class="layout">
|
|
<header class="hero">
|
|
<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>
|
|
</div>
|
|
<button id="healthButton" class="secondary">Comprobar health</button>
|
|
</header>
|
|
|
|
<section class="tabs">
|
|
<button class="tab-button active" data-tab="ingest">Ingesta</button>
|
|
<button class="tab-button" data-tab="bootstrap">Bootstrap</button>
|
|
<button class="tab-button" data-tab="chat">Chat</button>
|
|
</section>
|
|
|
|
<section id="tab-ingest" class="tab-panel active">
|
|
<article class="panel">
|
|
<h2>Ingesta</h2>
|
|
<div class="grid single-grid">
|
|
<label>Tipo de fuente
|
|
<select id="ingestSourceType">
|
|
<option value="folder">folder</option>
|
|
<option value="file">file</option>
|
|
</select>
|
|
</label>
|
|
<label>Ruta de la fuente
|
|
<input id="ingestSourceRef" value="/home/pancho/Documentos/Empresa/Desarrollo/IA/docs" />
|
|
</label>
|
|
<label>Modo de ingesta
|
|
<select id="ingestMode">
|
|
<option value="mechanical">mechanical</option>
|
|
<option value="interactive">interactive</option>
|
|
</select>
|
|
</label>
|
|
<label>Tags (coma separada)
|
|
<input id="ingestTags" value="workspace,global-docs" />
|
|
</label>
|
|
</div>
|
|
<div class="actions">
|
|
<button id="ingestButton">Lanzar ingesta</button>
|
|
</div>
|
|
<pre id="ingestResult">Sin ejecutar aun.</pre>
|
|
</article>
|
|
</section>
|
|
|
|
<section id="tab-bootstrap" class="tab-panel">
|
|
<article class="panel">
|
|
<h2>Bootstrap de sesion</h2>
|
|
<div class="grid single-grid">
|
|
<label>Scope disponible
|
|
<select id="scopePresetSelect">
|
|
<option value="">Cargando scopes...</option>
|
|
</select>
|
|
</label>
|
|
<label>Scope por sourceRef
|
|
<input id="scopeSourceRef" value="/home/pancho/Documentos/Empresa/Desarrollo/IA/docs" />
|
|
</label>
|
|
<label>Tags (coma separada)
|
|
<input id="scopeTags" value="" />
|
|
</label>
|
|
<label>Modo del bootstrap
|
|
<select id="bootstrapMode">
|
|
<option value="documental">documental</option>
|
|
<option value="codigo">codigo</option>
|
|
<option value="auto">auto</option>
|
|
</select>
|
|
</label>
|
|
<label>Modelo para sintetizar bootstrap
|
|
<select id="answerModel">
|
|
<option value="openai/gpt-4.1-mini">openai/gpt-4.1-mini</option>
|
|
</select>
|
|
</label>
|
|
<label>Consulta bootstrap
|
|
<textarea id="bootstrapQuery" rows="4">dame un mapa inicial del workspace, sus lineas de trabajo principales, reglas, documentacion base y puntos importantes a tener presentes</textarea>
|
|
</label>
|
|
</div>
|
|
<label class="checkbox">
|
|
<input type="checkbox" id="useModelInRetrieve" checked />
|
|
Usar un modelo para sintetizar el bootstrap recuperado
|
|
</label>
|
|
<div class="actions">
|
|
<button id="bootstrapButton">Cargar bootstrap</button>
|
|
<button id="replaceBootstrapButton" class="secondary">Reemplazar contexto</button>
|
|
<button id="clearBootstrapButton" class="secondary">Vaciar contexto</button>
|
|
<button id="presetDocs" class="secondary">Preset docs</button>
|
|
<button id="presetRagDocs" class="secondary">Preset RAG docs</button>
|
|
<button id="presetCode" class="secondary">Preset codigo</button>
|
|
</div>
|
|
<pre id="bootstrapResult">Sin ejecutar aun.</pre>
|
|
</article>
|
|
</section>
|
|
|
|
<section id="tab-chat" class="tab-panel">
|
|
<div class="grid chat-grid">
|
|
<article class="panel context-panel">
|
|
<h2>Estado del contexto</h2>
|
|
<div class="context-status" id="contextStatusCard">
|
|
<span id="contextIndicator" class="indicator indicator-off"></span>
|
|
<div>
|
|
<strong id="contextStatusText">Sin contexto cargado</strong>
|
|
<p id="contextScopeText">No hay bootstrap activo.</p>
|
|
</div>
|
|
</div>
|
|
|
|
<label class="checkbox">
|
|
<input type="checkbox" id="reuseBootstrapContext" checked />
|
|
Reutilizar bootstrap como contexto base
|
|
</label>
|
|
|
|
<label class="checkbox">
|
|
<input type="checkbox" id="allowAdditionalRetrieve" checked />
|
|
Permitir que el modelo haga consultas adicionales al RAG durante la conversacion
|
|
</label>
|
|
|
|
<label>Modo de chat
|
|
<select id="chatMode">
|
|
<option value="documental">documental</option>
|
|
<option value="codigo">codigo</option>
|
|
<option value="auto">auto</option>
|
|
</select>
|
|
</label>
|
|
|
|
<h3>Contexto bootstrap cargado</h3>
|
|
<pre id="bootstrapContextResult">Aun no hay bootstrap cargado.</pre>
|
|
</article>
|
|
|
|
<article class="panel chat-panel">
|
|
<h2>Chat con el modelo</h2>
|
|
<div id="chatMessages" class="chat-messages">
|
|
<p class="empty-chat">Aun no hay conversacion. Carga un bootstrap y empieza a preguntar.</p>
|
|
</div>
|
|
|
|
<label>Tu mensaje
|
|
<textarea id="chatInput" rows="4">que tenemos pendiente por hacer en este workspace</textarea>
|
|
</label>
|
|
|
|
<div class="actions">
|
|
<button id="sendChatButton">Enviar mensaje</button>
|
|
<button id="clearChatButton" class="secondary">Limpiar chat</button>
|
|
</div>
|
|
|
|
<h3>Ultima respuesta estructurada</h3>
|
|
<pre id="mainResult">Sin ejecutar aun.</pre>
|
|
|
|
<h3>Comparacion sin RAG</h3>
|
|
<label class="checkbox">
|
|
<input type="checkbox" id="compareWithoutRag" />
|
|
Comparar tambien con respuesta sin RAG
|
|
</label>
|
|
<pre id="compareResult">Desactivada.</pre>
|
|
</article>
|
|
</div>
|
|
</section>
|
|
|
|
<section class="panel">
|
|
<h2>Estado / health</h2>
|
|
<pre id="healthResult">Sin comprobar.</pre>
|
|
</section>
|
|
</main>
|
|
|
|
<script src="/playground/app.js" type="module"></script>
|
|
</body>
|
|
</html>
|