Spaces:
Running
Running
| --- | |
| // Panel de credenciales BYOK usado solo durante la sesión efímera. | |
| --- | |
| <!-- CREDENCIALES --> | |
| <section id="tab-config" class="tab-content space-y-6"> | |
| <div id="creds-warning" class="bg-amber-50 border border-amber-300 text-amber-900 p-4 rounded-xl text-sm"> | |
| ⚠️ <strong>Tus credenciales se usan solo en esta sesión. No se guardan ni almacenan.</strong> Si actualizas o cierras la página, todo se borrará. | |
| </div> | |
| <div id="creds-production-warning" class="hidden bg-red-50 border border-red-300 text-red-900 p-4 rounded-xl text-sm"> | |
| 🌐 <strong>Entorno de producción:</strong> Debes ingresar tus propias credenciales para usar la plataforma. Las credenciales del servidor no están disponibles en este entorno. | |
| </div> | |
| <div class="bg-white p-6 rounded-xl border border-stone-200 shadow-sm grid grid-cols-1 md:grid-cols-2 gap-5"> | |
| <div> | |
| <label class="block text-xs font-bold text-stone-600 mb-1">Groq API Key (asistente RAG)</label> | |
| <input id="in-groq" type="password" placeholder="gsk_..." class="w-full text-xs p-3 border border-stone-300 rounded-lg bg-stone-50" /> | |
| <details class="mt-1 text-[10px] text-stone-600"> | |
| <summary class="cursor-pointer select-none font-semibold">¿Cómo la obtengo? (clic por clic en Groq)</summary> | |
| <ol class="list-decimal pl-4 pt-1 space-y-0.5"> | |
| <li>Entra en <code>console.groq.com</code> e inicia sesión o regístrate (gratis).</li> | |
| <li>Abre la sección <kbd>API Keys</kbd> del menú lateral.</li> | |
| <li>Pulsa <kbd>Create API Key</kbd>, dale un nombre y copia la clave.</li> | |
| <li>Pégala aquí (empieza por <code>gsk_</code>) en <code>https://console.groq.com/keys</code>.</li> | |
| </ol> | |
| </details> | |
| </div> | |
| <div> | |
| <label class="block text-xs font-bold text-stone-600 mb-1">Copernicus Client ID</label> | |
| <input id="in-copid" type="password" placeholder="sh-..." class="w-full text-xs p-3 border border-stone-300 rounded-lg bg-stone-50" /> | |
| <details class="mt-1 text-[10px] text-stone-600"> | |
| <summary class="cursor-pointer select-none font-semibold">¿Cómo lo obtengo? (clic por clic en Copernicus CDSE)</summary> | |
| <ol class="list-decimal pl-4 pt-1 space-y-0.5"> | |
| <li>Entra en <code>dataspace.copernicus.eu</code> y regístrate (MyAccess, capa gratuita).</li> | |
| <li>Inicia sesión y abre tu perfil → <kbd>Settings</kbd> / ajustes de cuenta.</li> | |
| <li>Crea una <kbd>App Registration</kbd> OAuth: te entrega el <kbd>Client ID</kbd> y su Secret.</li> | |
| <li>Copia el Client ID en este campo y el Secret en el campo de al lado.</li> | |
| </ol> | |
| </details> | |
| </div> | |
| <div> | |
| <label class="block text-xs font-bold text-stone-600 mb-1">Copernicus Client Secret</label> | |
| <input id="in-copsecret" type="password" class="w-full text-xs p-3 border border-stone-300 rounded-lg bg-stone-50" /> | |
| <details class="mt-1 text-[10px] text-stone-600"> | |
| <summary class="cursor-pointer select-none font-semibold">¿Cómo obtengo el Secret?</summary> | |
| <p class="pt-1">Se genera junto al Client ID al crear la <kbd>App Registration</kbd> en CDSE (sigue la guía del panel de Client ID) y cópialo completo aquí.</p> | |
| </details> | |
| </div> | |
| <div> | |
| <label class="block text-xs font-bold text-stone-600 mb-1">Supabase URL</label> | |
| <input id="in-sburl" type="text" placeholder="https://xxxx.supabase.co" class="w-full text-xs p-3 border border-stone-300 rounded-lg bg-stone-50" /> | |
| <details class="mt-1 text-[10px] text-stone-600"> | |
| <summary class="cursor-pointer select-none font-semibold">¿Cómo la obtengo? (clic por clic en Supabase)</summary> | |
| <ol class="list-decimal pl-4 pt-1 space-y-0.5"> | |
| <li>Abre tu proyecto en <code>supabase.com/dashboard</code>.</li> | |
| <li>Ve a <kbd>Project Settings</kbd> → <kbd>API</kbd> y copia la <kbd>Project URL</kbd>.</li> | |
| <li>Pégala aquí (formato <code>https://<proyecto>.supabase.co</code>).</li> | |
| </ol> | |
| </details> | |
| </div> | |
| <div> | |
| <label class="block text-xs font-bold text-stone-600 mb-1">Supabase anon key</label> | |
| <input id="in-sbkey" type="password" class="w-full text-xs p-3 border border-stone-300 rounded-lg bg-stone-50" /> | |
| <details class="mt-1 text-[10px] text-stone-600"> | |
| <summary class="cursor-pointer select-none font-semibold">¿Cómo la obtengo?</summary> | |
| <ol class="list-decimal pl-4 pt-1 space-y-0.5"> | |
| <li>En <kbd>Project Settings</kbd> → <kbd>API Keys</kbd> copia la clave <kbd>anon / public</kbd>.</li> | |
| <li>Es una JWT que empieza por <code>eyJhbGciOi...</code>; pégala completa.</li> | |
| </ol> | |
| </details> | |
| </div> | |
| <div class="md:col-span-2"> | |
| <label class="block text-xs font-bold text-stone-600 mb-1">Supabase Database URI (DATABASE_URL — Direct / Transaction o Session Pooler)</label> | |
| <input id="cred-db-url" type="text" placeholder="postgresql://postgres.<ref>:<password>@aws-0-...pooler.supabase.com:5432/postgres" class="w-full text-xs p-3 border border-stone-300 rounded-lg bg-stone-50" /> | |
| <details class="mt-1 text-[10px] text-stone-600"> | |
| <summary class="cursor-pointer select-none font-semibold">¿Cómo obtengo mi DATABASE_URL? (clic por clic en Supabase)</summary> | |
| <ol class="list-decimal pl-4 pt-1 space-y-0.5"> | |
| <li>Abre tu proyecto en <code>supabase.com/dashboard</code>.</li> | |
| <li>En la barra superior pulsa el botón <kbd>Connect</kbd>.</li> | |
| <li>Elige la pestaña <kbd>Connection String</kbd> y selecciona el formato <kbd>URI</kbd>.</li> | |
| <li>Marca <kbd>Session pooler</kbd> (puerto 5432, recomendado) o <kbd>Transaction pooler</kbd> (puerto 6543).</li> | |
| <li>Reemplaza <code>[YOUR-PASSWORD]</code> por la contraseña de tu base de datos y copia la URI en este campo.</li> | |
| </ol> | |
| <p class="pt-1"> | |
| Ejemplos de formato: | |
| <code>postgresql://postgres.<ref>:<password>@aws-0-<region>.pooler.supabase.com:5432/postgres</code> (Session) · | |
| <code>postgresql://postgres.<ref>:<password>@aws-0-<region>.pooler.supabase.com:6543/postgres</code> (Transaction) | |
| </p> | |
| </details> | |
| </div> | |
| <div class="md:col-span-2 bg-stone-50 border border-stone-200 rounded-lg p-3 flex items-center justify-between gap-3"> | |
| <span class="text-[11px] text-stone-600" id="env-status">¿Tienes un <code>.env</code> en el servidor (desarrollo local)? Úsalo sin reescribir las llaves.</span> | |
| <button id="btn-check-env" class="bg-stone-800 hover:bg-stone-700 text-white font-bold text-xs px-4 py-2 rounded-lg whitespace-nowrap"><i class="fa-solid fa-file-shield"></i> Revisar .env del servidor</button> | |
| </div> | |
| <div class="md:col-span-2 flex items-center justify-between pt-2 border-t border-stone-100"> | |
| <span class="text-[11px] text-amber-600"><i class="fa-solid fa-triangle-exclamation"></i> <span id="creds-state">0 llaves activas (se borran al refrescar)</span></span> | |
| <button id="btn-save-creds" class="bg-emerald-700 hover:bg-emerald-800 text-white font-bold text-xs px-5 py-3 rounded-lg">Usar en esta sesión</button> | |
| </div> | |
| </div> | |
| </section> | |