| const themeToggle = document.getElementById('themeToggle'); |
| themeToggle.addEventListener('click', () => { |
| document.documentElement.classList.toggle('dark'); |
| themeToggle.textContent = document.documentElement.classList.contains('dark') ? '🌙' : '☀️'; |
| }); |
|
|
| const langToggle = document.getElementById('langToggle'); |
| 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', () => { |
| currentLang = currentLang === 'en' ? 'es' : 'en'; |
| updateLanguage(currentLang); |
| }); |
|
|
| |
| updateLanguage(currentLang); |
