rag-service/RAG/public/playground/app.js

const healthButton = document.getElementById("healthButton");
const ingestButton = document.getElementById("ingestButton");
const queryButton = document.getElementById("queryButton");
const presetDocs = document.getElementById("presetDocs");
const presetRagDocs = document.getElementById("presetRagDocs");
const presetCode = document.getElementById("presetCode");

const healthResult = document.getElementById("healthResult");
const mainResult = document.getElementById("mainResult");
const compareResult = document.getElementById("compareResult");

const queryInput = document.getElementById("queryInput");
const queryMode = document.getElementById("queryMode");
const queryIntent = document.getElementById("queryIntent");
const queryOperation = document.getElementById("queryOperation");
const scopeSourceRef = document.getElementById("scopeSourceRef");
const scopeTags = document.getElementById("scopeTags");
const compareWithoutRag = document.getElementById("compareWithoutRag");

const ingestSourceType = document.getElementById("ingestSourceType");
const ingestSourceRef = document.getElementById("ingestSourceRef");
const ingestMode = document.getElementById("ingestMode");
const ingestTags = document.getElementById("ingestTags");

function format(value) {
  return JSON.stringify(value, null, 2);
}

function splitTags(value) {
  return value.split(",").map((entry) => entry.trim()).filter(Boolean);
}

async function request(url, payload, method = "POST") {
  const response = await fetch(url, {
    method,
    headers: {
      "Content-Type": "application/json"
    },
    body: payload ? JSON.stringify(payload) : undefined
  });

  const data = await response.json();
  if (!response.ok) {
    throw new Error(data.error || `HTTP ${response.status}`);
  }

  return data;
}

healthButton.addEventListener("click", async () => {
  healthResult.textContent = "Comprobando...";
  try {
    const response = await fetch("/health");
    const data = await response.json();
    healthResult.textContent = format(data);
  } catch (error) {
    healthResult.textContent = String(error);
  }
});

ingestButton.addEventListener("click", async () => {
  mainResult.textContent = "Ejecutando ingesta...";
  try {
    const data = await request("/ingest", {
      sourceType: ingestSourceType.value,
      sourceRef: ingestSourceRef.value,
      mode: ingestMode.value,
      tags: splitTags(ingestTags.value)
    });
    mainResult.textContent = format(data);
  } catch (error) {
    mainResult.textContent = String(error);
  }
});

queryButton.addEventListener("click", async () => {
  mainResult.textContent = "Consultando...";
  compareResult.textContent = compareWithoutRag.checked ? "Comparando..." : "Desactivada.";

  const payload = {
    mode: queryMode.value,
    intent: queryIntent.value,
    query: queryInput.value,
    scope: {
      sourceRef: scopeSourceRef.value,
      tags: splitTags(scopeTags.value)
    }
  };

  try {
    const endpoint = queryOperation.value === "answer" ? "/answer" : "/retrieve";
    const data = await request(endpoint, payload);
    mainResult.textContent = format(data);

    if (compareWithoutRag.checked && queryOperation.value === "answer") {
      const comparison = await request("/answer/direct", {
        query: queryInput.value
      });
      compareResult.textContent = format(comparison);
    }
  } catch (error) {
    mainResult.textContent = String(error);
    compareResult.textContent = compareWithoutRag.checked ? String(error) : "Desactivada.";
  }
});

presetDocs.addEventListener("click", () => {
  queryMode.value = "documental";
  queryIntent.value = "specific";
  queryOperation.value = "answer";
  queryInput.value = "que tenemos pendiente por hacer en este workspace";
  scopeSourceRef.value = "/home/pancho/Documentos/Empresa/Desarrollo/IA/docs";
});

presetRagDocs.addEventListener("click", () => {
  queryMode.value = "documental";
  queryIntent.value = "bootstrap";
  queryOperation.value = "retrieve";
  queryInput.value = "dame un mapa inicial del modulo RAG, su arquitectura, decisiones, estado actual y documentos clave";
  scopeSourceRef.value = "/home/pancho/Documentos/Empresa/Desarrollo/IA/RAG/docs";
});

presetCode.addEventListener("click", () => {
  queryMode.value = "codigo";
  queryIntent.value = "specific";
  queryOperation.value = "answer";
  queryInput.value = "como se construye source_id en el rag";
  scopeSourceRef.value = "/home/pancho/Documentos/Empresa/Desarrollo/IA/RAG/src";
});