Update static/docs.js

static/docs.js

@@ -1,15 +1,146 @@
-// === Theme Toggle ===
 const themeToggle = document.getElementById('themeToggle');
 themeToggle.addEventListener('click', () => {
   document.documentElement.classList.toggle('dark');
   themeToggle.textContent = document.documentElement.classList.contains('dark') ? '🌙' : '☀️';
 });
 
-// === Language Toggle ===
 const langToggle = document.getElementById('langToggle');
-const en = document.getElementById('en');
-const es = document.getElementById('es');
+let currentLang = 'en';
+
+const translations = {
+  en: {
+    title: "MoA Chat - Documentation",
+    what_is_title: "📖 What is MoA Chat?",
+    intro: "<strong>MoA Chat</strong> is a simple but powerful chat platform where multiple AI models answer the same question at the same time, and an aggregator model combines their outputs into one final answer.",
+    tech_1: "Built in <strong>Python 3</strong>.",
+    tech_2: "Web framework: <strong>Flask</strong>.",
+    tech_3: "Frontend: HTML, JavaScript, TailwindCSS (optionally removable).",
+    tech_4: "Designed to work <strong>first on Hugging Face Spaces</strong>, but can also be <strong>self-hosted</strong>.",
+    architecture_alt: "MoA Architecture",
+    features_title: "⚙️ Features",
+    feature_1: "Send your question once — multiple AI models answer simultaneously.",
+    feature_2: "Aggregator model (LLM-D) summarizes all responses.",
+    feature_3: "Fully configurable: choose which models you want to use.",
+    feature_4: "Modern minimal UI with light/dark theme toggle.",
+    feature_5: "Spanish/English documentation switch.",
+    feature_6: "<strong>Free models</strong> supported through <strong>OpenRouter</strong> and others.",
+    feature_7: "<strong>No API keys exposed</strong> in the frontend (safe backend request).",
+    self_host_title: "🛠️ Self Hosting",
+    self_host_intro: "You can clone the project like this:",
+    requirements_title: "Requirements:",
+    req_1: "Python 3.11+",
+    req_2: "Pip",
+    req_3: "Create a <code>.env</code> file and add your API keys.",
+    install_title: "Install dependencies:",
+    run_title: "Run locally:",
+    port_note: "Default port is <strong>7860</strong> (to match Hugging Face standard).",
+    docker_title: "🐳 Docker support:",
+    docker_intro: "Your repository includes a <code>Dockerfile</code> for easy containerization when you clone it. Here's the content:",
+    docker_alt_option: "Alternatively, you can manually create your own <code>Dockerfile</code> with the above content if you prefer to customize it.",
+    docker_build: "To build and run the Docker container after cloning the repository:",
+    docker_secrets_note: "Docker will NOT automatically inject secrets unless you:",
+    docker_secret_env: "Use a <code>.env</code> file with <code>--env-file .env</code>",
+    docker_secret_manual: "Manually use <code>-e VAR=VALUE</code> flags in <code>docker run</code>",
+    api_keys_title: "🔑 Environment Variables (Secrets)",
+    api_keys_intro: "To use this app, you must set your API keys in <strong>secrets</strong> or <strong>environment variables</strong>.",
+    api_keys_syntax: "Follow this syntax:",
+    api_keys_code: "OPENROUTER_API_KEY=your-openrouter-key\nTOGETHER_API_KEY=your-together-key\nGROK_API_KEY=your-grok-key\nGROQ_API_KEY=your-groq-key",
+    api_keys_location: "You can set these in:",
+    api_loc_1: "Hugging Face <strong>Secrets</strong> section (recommended if on Spaces)",
+    api_loc_2: "<code>.env</code> file (only for self-hosting)",
+    add_models_title: "🧩 How to Add More Models",
+    add_models_intro: "All models and providers are declared inside:",
+    add_models_structure: "The structure looks like this:",
+    add_models_steps_title: "<strong>To add a new model:</strong>",
+    add_step_1: "Find the right provider (OpenRouter, Together, Grok, Groq, etc).",
+    add_step_2: "Add its endpoint URL under \"providers\" if not already listed.",
+    add_step_3: "Add your model name under \"models\" section, linking it to the provider.",
+    add_models_note: "Make sure your environment variables (secrets) are correctly configured.",
+    license_title: "🏷️ Licensing",
+    license_text: "This project is licensed under <strong>Apache 2.0</strong> — You are free to use, modify, and distribute, even commercially.",
+    
+    footer: "Made with ❤️ in Panamá<br>by UntilDot\n<div class=\"mt-2 flex justify-center\">\n  <span class=\"mx-2\">✨</span>\n  <span class=\"mx-2\">✨</span>\n</div>"
+  },
+  es: {
+    title: "MoA Chat - Documentación",
+    what_is_title: "📖 ¿Qué es MoA Chat?",
+    intro: "<strong>MoA Chat</strong> es una plataforma de chat simple pero poderosa donde múltiples modelos de IA responden la misma pregunta al mismo tiempo, y un modelo agregador combina sus resultados en una respuesta final.",
+    tech_1: "Construido en <strong>Python 3</strong>.",
+    tech_2: "Framework web: <strong>Flask</strong>.",
+    tech_3: "Frontend: HTML, JavaScript, TailwindCSS (opcionalmente removible).",
+    tech_4: "Diseñado para funcionar <strong>primero en Hugging Face Spaces</strong>, pero también puede ser <strong>autohospedado</strong>.",
+    architecture_alt: "Arquitectura MoA",
+    features_title: "⚙️ Características",
+    feature_1: "Envía tu pregunta una vez — múltiples modelos de IA responden simultáneamente.",
+    feature_2: "Modelo agregador (LLM-D) resume todas las respuestas.",
+    feature_3: "Completamente configurable: elige qué modelos deseas usar.",
+    feature_4: "Interfaz de usuario minimalista moderna con cambio de tema claro/oscuro.",
+    feature_5: "Cambio de documentación entre español/inglés.",
+    feature_6: "<strong>Modelos gratuitos</strong> soportados a través de <strong>OpenRouter</strong> y otros.",
+    feature_7: "<strong>Sin claves API expuestas</strong> en el frontend (solicitud segura al backend).",
+    self_host_title: "🛠️ Autohospedaje",
+    self_host_intro: "Puedes clonar el proyecto así:",
+    requirements_title: "Requisitos:",
+    req_1: "Python 3.11+",
+    req_2: "Pip",
+    req_3: "Crea un archivo <code>.env</code> y agrega tus claves API.",
+    install_title: "Instalar dependencias:",
+    run_title: "Ejecutar localmente:",
+    port_note: "El puerto predeterminado es <strong>7860</strong> (para coincidir con el estándar de Hugging Face).",
+    docker_title: "🐳 Soporte para Docker:",
+    docker_intro: "Tu repositorio incluye un <code>Dockerfile</code> para una fácil containerización cuando lo clonas. Aquí está el contenido:",
+    docker_alt_option: "Alternativamente, puedes crear manualmente tu propio <code>Dockerfile</code> con el contenido anterior si prefieres personalizarlo.",
+    docker_build: "Para construir y ejecutar el contenedor Docker después de clonar el repositorio:",
+    docker_secrets_note: "Docker NO inyectará automáticamente los secretos a menos que:",
+    docker_secret_env: "Uses un archivo <code>.env</code> con <code>--env-file .env</code>",
+    docker_secret_manual: "Uses manualmente banderas <code>-e VAR=VALUE</code> en <code>docker run</code>",
+    api_keys_title: "🔑 Variables de Entorno (Secretos)",
+    api_keys_intro: "Para usar esta aplicación, debes configurar tus claves API en <strong>secretos</strong> o <strong>variables de entorno</strong>.",
+    api_keys_syntax: "Sigue esta sintaxis:",
+    api_keys_code: "OPENROUTER_API_KEY=tu-clave-openrouter\nTOGETHER_API_KEY=tu-clave-together\nGROK_API_KEY=tu-clave-grok\nGROQ_API_KEY=tu-clave-groq",
+    api_keys_location: "Puedes configurarlas en:",
+    api_loc_1: "Sección de <strong>Secretos</strong> de Hugging Face (recomendado si estás en Spaces)",
+    api_loc_2: "Archivo <code>.env</code> (solo para autohospedaje)",
+    add_models_title: "🧩 Cómo Agregar Más Modelos",
+    add_models_intro: "Todos los modelos y proveedores se declaran dentro de:",
+    add_models_structure: "La estructura se ve así:",
+    add_models_steps_title: "<strong>Para agregar un nuevo modelo:</strong>",
+    add_step_1: "Encuentra el proveedor adecuado (OpenRouter, Together, Grok, Groq, etc).",
+    add_step_2: "Agrega su URL de endpoint bajo \"providers\" si no está ya listado.",
+    add_step_3: "Agrega el nombre de tu modelo bajo la sección \"models\", vinculándolo al proveedor.",
+    add_models_note: "Asegúrate de que tus variables de entorno (secretos) estén correctamente configuradas.",
+    license_title: "🏷️ Licenciamiento",
+    license_text: "Este proyecto está licenciado bajo <strong>Apache 2.0</strong> — Eres libre de usar, modificar y distribuir, incluso comercialmente.",
+    
+    footer: "Hecho con ❤️ en Panamá<br>por UntilDot\n<div class=\"mt-2 flex justify-center\">\n  <span class=\"mx-2\">✨</span>\n  <span class=\"mx-2\">✨</span>\n</div>"
+  }
+};
+
+function updateLanguage(lang) {
+  document.querySelectorAll('[data-i18n]').forEach(element => {
+    const key = element.getAttribute('data-i18n');
+    if (translations[lang][key]) {
+      element.innerHTML = translations[lang][key];
+    }
+  });
+  document.querySelectorAll('[data-i18n-alt]').forEach(element => {
+    const key = element.getAttribute('data-i18n-alt');
+    if (translations[lang][key]) {
+      element.setAttribute('alt', translations[lang][key]);
+    }
+  });
+  document.querySelectorAll('code[data-i18n]').forEach(element => {
+    const key = element.getAttribute('data-i18n');
+    if (translations[lang][key]) {
+      element.textContent = translations[lang][key];
+    }
+  });
+}
+
 langToggle.addEventListener('click', () => {
-  en.classList.toggle('hidden');
-  es.classList.toggle('hidden');
+  currentLang = currentLang === 'en' ? 'es' : 'en';
+  updateLanguage(currentLang);
 });
+
+// Initialize language on load
+updateLanguage(currentLang);