231 lines
12 KiB
Cheetah
231 lines
12 KiB
Cheetah
{{define "install_public_es"}}
|
|
<style>
|
|
.step { margin-bottom: 2rem; padding: 1.5rem; background: var(--cream-light); border-radius: 8px; }
|
|
.step-num { display: inline-block; width: 32px; height: 32px; background: var(--accent); color: white; border-radius: 50%; text-align: center; line-height: 32px; font-weight: 600; margin-right: 12px; }
|
|
.step h3 { display: inline; font-size: 1.1rem; }
|
|
.step p { margin: 12px 0 0 44px; color: var(--text-muted); }
|
|
.code-wrapper { position: relative; margin: 12px 0 0 44px; }
|
|
.code-wrapper pre { background: #2d2d2d; color: #f8f8f2; padding: 16px; padding-right: 48px; border-radius: 6px; font-size: 0.85rem; white-space: pre-wrap; word-break: break-word; margin: 0; }
|
|
.copy-icon { position: absolute; top: 8px; right: 8px; background: transparent; border: none; cursor: pointer; padding: 6px; border-radius: 4px; opacity: 0.6; transition: opacity 0.2s, background 0.2s; }
|
|
.copy-icon:hover { opacity: 1; background: rgba(255,255,255,0.1); }
|
|
.copy-icon svg { width: 18px; height: 18px; stroke: #aaa; fill: none; }
|
|
.copy-icon.copied svg { stroke: #6c6; }
|
|
|
|
.ai-tabs { display: flex; gap: 0; margin-bottom: 0; border-bottom: 2px solid var(--border); }
|
|
.ai-tab { padding: 12px 24px; cursor: pointer; border: none; background: none; font-size: 1rem; color: var(--text-muted); border-bottom: 2px solid transparent; margin-bottom: -2px; transition: all 0.2s; }
|
|
.ai-tab:hover { color: var(--text); }
|
|
.ai-tab.active { color: var(--accent); border-bottom-color: var(--accent); font-weight: 500; }
|
|
.ai-content { display: none; padding-top: 1.5rem; }
|
|
.ai-content.active { display: block; }
|
|
|
|
.quick-start { background: var(--cream-light); border-radius: 8px; padding: 1.5rem; margin-bottom: 1.5rem; }
|
|
.quick-start h3 { margin: 0 0 1rem 0; font-size: 1.1rem; }
|
|
.quick-start p { margin: 0.5rem 0; }
|
|
|
|
.login-tracker { background: #fff3cd; border: 1px solid #ffc107; border-radius: 8px; padding: 1rem 1.5rem; margin-bottom: 1.5rem; }
|
|
.login-tracker a { color: var(--accent); font-weight: 500; }
|
|
</style>
|
|
|
|
<div class="container">
|
|
<div class="dossier-header">
|
|
<div class="dossier-header-left">
|
|
<h1>Conecta tu IA a tus datos</h1>
|
|
<p class="text-muted text-small">Elige tu asistente de IA y sigue las instrucciones de configuración.</p>
|
|
</div>
|
|
<a href="/" class="btn btn-secondary btn-small">← Inicio</a>
|
|
</div>
|
|
|
|
<div class="login-tracker">
|
|
<strong>Nota:</strong> <a href="/start">Inicia sesión</a> para ver instrucciones de configuración personalizadas con tu token de cuenta ya incluido.
|
|
</div>
|
|
|
|
<div class="ai-tabs">
|
|
<button class="ai-tab active" onclick="showTab('claude')">Claude Desktop</button>
|
|
<button class="ai-tab" onclick="showTab('grok')">Grok</button>
|
|
<button class="ai-tab" onclick="showTab('chatgpt')">ChatGPT</button>
|
|
<button class="ai-tab" onclick="showTab('other')">Otra IA</button>
|
|
</div>
|
|
|
|
<!-- Pestaña Claude Desktop -->
|
|
<div id="tab-claude" class="ai-content active">
|
|
<p style="margin-bottom: 1.5rem;">Claude Desktop se conecta directamente a inou mediante OAuth — sin tokens que copiar, sin extensiones que instalar. Acceso nativo a herramientas, capacidades completas de API.</p>
|
|
|
|
<div class="step">
|
|
<span class="step-num">1</span>
|
|
<h3>Instala Claude Desktop</h3>
|
|
<p>Descárgalo e instálalo desde <a href="https://claude.ai/download" target="_blank">claude.ai/download</a></p>
|
|
</div>
|
|
|
|
<div class="step">
|
|
<span class="step-num">2</span>
|
|
<h3>Añade el conector de Inou</h3>
|
|
<p>En Claude Desktop:</p>
|
|
<ol style="margin: 12px 0 12px 44px; color: var(--text-muted);">
|
|
<li>Ve a <strong>Configuración → Conectores</strong></li>
|
|
<li>Haz clic en <strong>Añadir conector personalizado</strong></li>
|
|
<li>Rellena los campos:</li>
|
|
</ol>
|
|
<table style="margin: 0 0 12px 44px; border-collapse: collapse; width: calc(100% - 44px);">
|
|
<tr>
|
|
<td style="padding: 8px 12px; border: 1px solid var(--border); background: var(--cream-light); font-weight: 500;">Nombre</td>
|
|
<td style="padding: 8px 12px; border: 1px solid var(--border);"><code>Inou Health</code></td>
|
|
</tr>
|
|
<tr>
|
|
<td style="padding: 8px 12px; border: 1px solid var(--border); background: var(--cream-light); font-weight: 500;">URL del servidor MCP remoto</td>
|
|
<td style="padding: 8px 12px; border: 1px solid var(--border);"><code>https://inou.com/mcp</code></td>
|
|
</tr>
|
|
</table>
|
|
<p>Haz clic en <strong>Añadir</strong> y luego en <strong>Conectar</strong>.</p>
|
|
</div>
|
|
|
|
<div class="step">
|
|
<span class="step-num">3</span>
|
|
<h3>Inicia sesión</h3>
|
|
<p>Tu navegador se abrirá para iniciar sesión en inou. Después de iniciar sesión, haz clic en <strong>Abrir Claude</strong> para completar la conexión.</p>
|
|
</div>
|
|
|
|
<div class="step">
|
|
<span class="step-num">4</span>
|
|
<h3>Permite las herramientas</h3>
|
|
<p>Para evitar que te pidan permiso 11 veces:</p>
|
|
<ol style="margin: 12px 0 12px 44px; color: var(--text-muted);">
|
|
<li>En <strong>Configuración → Conectores</strong>, busca <strong>Inou Health</strong></li>
|
|
<li>Haz clic en <strong>Configurar</strong> (icono de engranaje)</li>
|
|
<li>En <strong>Herramientas de solo lectura</strong>, selecciona <strong>Permitir siempre</strong></li>
|
|
</ol>
|
|
</div>
|
|
|
|
<div class="step">
|
|
<span class="step-num">5</span>
|
|
<h3>Añade instrucciones personalizadas (recomendado)</h3>
|
|
<p>En Claude Desktop, ve a <strong>Configuración → Instrucciones personalizadas</strong> y añade:</p>
|
|
<div class="code-wrapper">
|
|
<pre id="step5-code">At the start of health-related conversations, use the family_health_context tracker from the Inou Health connector to understand what health data is available.</pre>
|
|
<button class="copy-icon" onclick="copyCode('step5-code', this)" title="Copiar">
|
|
<svg viewBox="0 0 24 24" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
|
|
<rect x="9" y="9" width="13" height="13" rx="2" ry="2"></rect>
|
|
<path d="M5 15H4a2 2 0 0 1-2-2V4a2 2 0 0 1 2-2h9a2 2 0 0 1 2 2v1"></path>
|
|
</svg>
|
|
</button>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="step">
|
|
<span class="step-num">6</span>
|
|
<h3>Prueba la conexión</h3>
|
|
<p>Abre Claude Desktop e intenta:</p>
|
|
<div class="code-wrapper">
|
|
<pre id="step6-code">List my available dossiers.</pre>
|
|
<button class="copy-icon" onclick="copyCode('step6-code', this)" title="Copiar">
|
|
<svg viewBox="0 0 24 24" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
|
|
<rect x="9" y="9" width="13" height="13" rx="2" ry="2"></rect>
|
|
<path d="M5 15H4a2 2 0 0 1-2-2V4a2 2 0 0 1 2-2h9a2 2 0 0 1 2 2v1"></path>
|
|
</svg>
|
|
</button>
|
|
</div>
|
|
<p>Deberías ver tu(s) dossier(s). ¡Ya está todo listo!</p>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Pestaña Grok -->
|
|
<div id="tab-grok" class="ai-content">
|
|
<p style="margin-bottom: 1.5rem;">Grok puede navegar por la web y acceder a tus datos de salud directamente a través de nuestra API. No necesitas instalar nada.</p>
|
|
|
|
<div class="quick-start">
|
|
<h3>Inicio rápido</h3>
|
|
<p>Copia esto y pégalo en Grok:</p>
|
|
<div class="code-wrapper" style="margin: 12px 0 0 0;">
|
|
<pre id="grok-code">Fetch https://inou.com/api/docs to see the API documentation.
|
|
Then fetch https://inou.com/api/v1/dossiers?token=YOUR_ACCOUNT_TOKEN to list my dossiers.
|
|
Help me explore my health data - imaging studies, genome variants, and lab results.
|
|
|
|
IMPORTANT:
|
|
- Replace YOUR_ACCOUNT_TOKEN with your token from inou.com/connect (sign in, go to the Grok tab).
|
|
- Allow 3 seconds for API responses before assuming failure.
|
|
- When sharing image links, use the exact image_url from responses.
|
|
- This is real medical data. NEVER hallucinate. Only describe what you actually see.</pre>
|
|
<button class="copy-icon" onclick="copyCode('grok-code', this)" title="Copiar">
|
|
<svg viewBox="0 0 24 24" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
|
|
<rect x="9" y="9" width="13" height="13" rx="2" ry="2"></rect>
|
|
<path d="M5 15H4a2 2 0 0 1-2-2V4a2 2 0 0 1 2-2h9a2 2 0 0 1 2 2v1"></path>
|
|
</svg>
|
|
</button>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="step">
|
|
<span class="step-num">→</span>
|
|
<h3>Qué puede hacer Grok</h3>
|
|
<p>Una vez conectado, pídele a Grok que:</p>
|
|
<ul style="margin: 12px 0 0 44px; color: var(--text-muted);">
|
|
<li>Liste todos tus estudios de imagen, datos genómicos y resultados de laboratorio</li>
|
|
<li>Muestre las series dentro de un estudio específico</li>
|
|
<li>Obtenga y analice cortes individuales</li>
|
|
<li>Compare imágenes entre diferentes secuencias (T1, T2, FLAIR)</li>
|
|
<li>Navegue a regiones anatómicas específicas</li>
|
|
<li>Consulte variantes genómicas por gen, categoría o rsid</li>
|
|
<li>Revise respuestas a medicamentos y riesgos de salud</li>
|
|
<li>Haga seguimiento de valores de laboratorio a lo largo del tiempo</li>
|
|
</ul>
|
|
</div>
|
|
|
|
<p style="margin-top: 1.5rem; color: var(--text-muted);">Consulta la <a href="/api/docs">documentación completa de la API</a> para ver todos los endpoints disponibles.</p>
|
|
</div>
|
|
|
|
<!-- Pestaña ChatGPT -->
|
|
<div id="tab-chatgpt" class="ai-content">
|
|
<p style="margin-bottom: 1.5rem; color: var(--text-muted);">No recomendado para imágenes médicas debido al mayor riesgo de alucinaciones detectado en nuestras pruebas.</p>
|
|
|
|
<div class="step">
|
|
<span class="step-num">✗</span>
|
|
<h3>¿Por qué no ChatGPT?</h3>
|
|
<p>Las imágenes médicas requieren precisión absoluta. En nuestras pruebas, ChatGPT fabricó información incluso cuando los datos correctos estaban claramente disponibles. No podemos recomendarlo para analizar datos de salud donde los errores tienen consecuencias reales.</p>
|
|
</div>
|
|
|
|
<div class="step">
|
|
<span class="step-num">→</span>
|
|
<h3>Alternativas recomendadas</h3>
|
|
<p>Usa <a href="#" onclick="showTab('claude'); return false;">Claude Desktop</a> para la mejor experiencia con acceso nativo a herramientas, o <a href="#" onclick="showTab('grok'); return false;">Grok</a> para acceso web sin necesidad de instalación.</p>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Pestaña Otra IA -->
|
|
<div id="tab-other" class="ai-content">
|
|
<p style="margin-bottom: 1.5rem;">Otros asistentes de IA pueden acceder a tus datos a través de nuestra API web, aunque las capacidades varían.</p>
|
|
|
|
<div class="step">
|
|
<span class="step-num">⚠</span>
|
|
<h3>Gemini</h3>
|
|
<p>La navegación web de Gemini está actualmente restringida y puede que no pueda acceder directamente a las URLs de inou.com. Alternativas:</p>
|
|
<ul style="margin: 12px 0 0 44px; color: var(--text-muted);">
|
|
<li>Copia las respuestas de la API manualmente y pégalas en Gemini</li>
|
|
<li>Usa Google AI Studio con function calling</li>
|
|
<li>Considera usar Claude Desktop o Grok en su lugar</li>
|
|
</ul>
|
|
</div>
|
|
|
|
<div class="step">
|
|
<span class="step-num">→</span>
|
|
<h3>Crea tu propia integración</h3>
|
|
<p>Nuestra API es REST + JSON simple. Consulta la <a href="/api/docs">documentación de la API</a> para ver los endpoints y la autenticación.</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<script>
|
|
function copyCode(id, btn) {
|
|
const text = document.getElementById(id).textContent;
|
|
navigator.clipboard.writeText(text).then(() => {
|
|
btn.classList.add('copied');
|
|
setTimeout(() => btn.classList.remove('copied'), 1500);
|
|
});
|
|
}
|
|
|
|
function showTab(name) {
|
|
document.querySelectorAll('.ai-tab').forEach(t => t.classList.remove('active'));
|
|
document.querySelectorAll('.ai-content').forEach(c => c.classList.remove('active'));
|
|
document.querySelector('[onclick="showTab(\'' + name + '\')"]').classList.add('active');
|
|
document.getElementById('tab-' + name).classList.add('active');
|
|
}
|
|
</script>
|
|
{{end}} |