313 lines
15 KiB
Cheetah
313 lines
15 KiB
Cheetah
{{define "connect_nl"}}
|
|
<style>
|
|
html { overflow-y: scroll; }
|
|
.connect-header { display: flex; justify-content: space-between; align-items: flex-start; }
|
|
.ai-tabs { display: flex; border-bottom: 1px solid var(--border); padding: 0 24px; }
|
|
.ai-tab { padding: 16px 24px; cursor: pointer; border: none; background: none; font-family: inherit; font-size: 1rem; color: var(--text-muted); border-bottom: 2px solid transparent; margin-bottom: -1px; }
|
|
.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: 32px; }
|
|
.ai-content.active { display: block; }
|
|
.ai-content > p:first-child { font-size: 1rem; font-weight: 300; color: var(--text-muted); margin-bottom: 24px; }
|
|
.step { margin-bottom: 24px; padding: 24px; background: var(--bg); border-radius: 8px; }
|
|
.step:last-child { margin-bottom: 0; }
|
|
.step-header { display: flex; align-items: center; gap: 12px; margin-bottom: 12px; }
|
|
.step-num { width: 32px; height: 32px; background: var(--accent); color: white; border-radius: 50%; text-align: center; line-height: 32px; font-weight: 600; font-size: 0.9rem; flex-shrink: 0; }
|
|
.step-num.muted { background: var(--text-muted); }
|
|
.step-num.warning { background: #F59E0B; }
|
|
.step h3 { font-size: 1.1rem; font-weight: 600; color: var(--text); margin: 0; }
|
|
.step p { font-size: 1rem; font-weight: 300; color: var(--text-muted); line-height: 1.8; margin: 0; }
|
|
.step p + p { margin-top: 12px; }
|
|
.step a { color: var(--accent); }
|
|
.step ul { margin: 12px 0 0 0; padding-left: 20px; color: var(--text-muted); font-weight: 300; line-height: 1.8; }
|
|
.code-wrapper { position: relative; margin-top: 16px; }
|
|
.code-wrapper pre { background: #1C1917; color: #F5F5F4; padding: 16px; padding-right: 48px; border-radius: 6px; font-family: "SF Mono", Monaco, monospace; font-size: 0.85rem; white-space: pre-wrap; word-break: break-word; margin: 0; line-height: 1.6; }
|
|
.copy-icon { position: absolute; top: 8px; right: 8px; background: transparent; border: none; cursor: pointer; padding: 6px; border-radius: 4px; opacity: 0.6; }
|
|
.copy-icon:hover { opacity: 1; background: rgba(255,255,255,0.1); }
|
|
.copy-icon svg { width: 18px; height: 18px; stroke: #A8A29E; fill: none; }
|
|
.copy-icon.copied svg { stroke: #10B981; }
|
|
.step-note { margin-top: 12px; font-size: 0.9rem; }
|
|
.login-prompt { background: var(--accent-light); border: 1px solid var(--accent); border-radius: 8px; padding: 16px 24px; margin-bottom: 24px; font-size: 1rem; font-weight: 300; color: var(--text); }
|
|
.login-prompt a { color: var(--accent); font-weight: 500; }
|
|
@media (max-width: 768px) {
|
|
.ai-tabs { padding: 0 16px; overflow-x: auto; }
|
|
.ai-tab { padding: 12px 16px; font-size: 0.9rem; white-space: nowrap; }
|
|
.ai-content { padding: 24px 16px; }
|
|
.step { padding: 20px 16px; }
|
|
}
|
|
@media (max-width: 480px) {
|
|
.ai-tabs { padding: 0 12px; }
|
|
.ai-tab { padding: 10px 12px; font-size: 0.85rem; }
|
|
.ai-content { padding: 20px 12px; }
|
|
.step { padding: 16px 12px; }
|
|
.code-wrapper pre { font-size: 0.8rem; padding: 12px; padding-right: 40px; }
|
|
}
|
|
</style>
|
|
<div class="page-container">
|
|
|
|
<div class="page-card">
|
|
<div class="connect-header">
|
|
<div>
|
|
<h1>AI koppelen aan jouw gegevens</h1>
|
|
<p class="intro">Kies je AI-assistent en volg de installatie-instructies.</p>
|
|
</div>
|
|
{{if and .Dossier .Dossier.DossierID}}<a href="/dashboard" class="btn btn-secondary btn-small">← Terug</a>{{else}}<a href="/" class="btn btn-secondary btn-small">← Home</a>{{end}}
|
|
</div>
|
|
</div>
|
|
|
|
<div class="page-card" style="padding: 0;">
|
|
<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')">Andere AI</button>
|
|
</div>
|
|
|
|
<!-- Claude Desktop Tab -->
|
|
<div id="tab-claude" class="ai-content active">
|
|
<p>Claude Desktop maakt rechtstreeks verbinding met <span class="inou">inou</span> via OAuth — geen tokens om te kopiëren, geen extensies om te installeren.</p>
|
|
|
|
<div class="step">
|
|
<div class="step-header">
|
|
<span class="step-num">1</span>
|
|
<h3>Claude Desktop installeren</h3>
|
|
</div>
|
|
<p>Download en installeer via <a href="https://claude.ai/download" target="_blank">claude.ai/download</a></p>
|
|
</div>
|
|
|
|
<div class="step">
|
|
<div class="step-header">
|
|
<span class="step-num">2</span>
|
|
<h3>Inou-connector toevoegen</h3>
|
|
</div>
|
|
<p>In Claude Desktop:</p>
|
|
<ol style="margin: 8px 0 12px 20px;">
|
|
<li>Ga naar <strong>Instellingen → Connectors</strong></li>
|
|
<li>Klik op <strong>Aangepaste connector toevoegen</strong></li>
|
|
<li>Vul de velden in:</li>
|
|
</ol>
|
|
<table style="margin: 12px 0; border-collapse: collapse; width: 100%;">
|
|
<tr>
|
|
<td style="padding: 8px 12px; border: 1px solid var(--border); background: var(--bg-muted); font-weight: 500;">Naam</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(--bg-muted); font-weight: 500;">Externe MCP-server URL</td>
|
|
<td style="padding: 8px 12px; border: 1px solid var(--border);"><code>https://inou.com/mcp</code></td>
|
|
</tr>
|
|
</table>
|
|
<p>Klik op <strong>Toevoegen</strong> en daarna op <strong>Verbinden</strong>.</p>
|
|
</div>
|
|
|
|
<div class="step">
|
|
<div class="step-header">
|
|
<span class="step-num">3</span>
|
|
<h3>Inloggen</h3>
|
|
</div>
|
|
<p>Je browser opent om in te loggen bij <span class="inou">inou</span>. Klik na het inloggen op <strong>Claude openen</strong> om de verbinding te voltooien.</p>
|
|
</div>
|
|
|
|
<div class="step">
|
|
<div class="step-header">
|
|
<span class="step-num">4</span>
|
|
<h3>Tools toestaan</h3>
|
|
</div>
|
|
<p>Om te voorkomen dat je 11 keer om toestemming wordt gevraagd:</p>
|
|
<ol style="margin: 8px 0 12px 20px;">
|
|
<li>Ga in <strong>Instellingen → Connectors</strong> naar <strong>Inou Health</strong></li>
|
|
<li>Klik op <strong>Configureren</strong> (tandwielpictogram)</li>
|
|
<li>Selecteer onder <strong>Alleen-lezen tools</strong> de optie <strong>Altijd toestaan</strong></li>
|
|
</ol>
|
|
<p>Hiermee geef je Claude toestemming om jouw gezondheidsgegevens te lezen zonder elke keer opnieuw te vragen.</p>
|
|
</div>
|
|
|
|
<div class="step">
|
|
<div class="step-header">
|
|
<span class="step-num">5</span>
|
|
<h3>Aangepaste instructies toevoegen (aanbevolen)</h3>
|
|
</div>
|
|
<p>Om de gezondheidsgegevenscontext van jouw gezin automatisch in elk gesprek te laden:</p>
|
|
<ol style="margin: 8px 0 12px 20px;">
|
|
<li>Ga in Claude Desktop naar <strong>Instellingen → Aangepaste instructies</strong></li>
|
|
<li>Voeg in het tekstvak het volgende toe:</li>
|
|
</ol>
|
|
<div class="code-wrapper">
|
|
<pre id="custom-instructions">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('custom-instructions', this)" title="Kopiëren">
|
|
<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>Dit vertelt Claude om aan het begin van elk gesprek te controleren welke gezondheidsgegevens beschikbaar zijn voor jouw gezinsleden, zonder het contextvenster te vullen met daadwerkelijke medische gegevens.</p>
|
|
</div>
|
|
|
|
<div class="step">
|
|
<div class="step-header">
|
|
<span class="step-num">6</span>
|
|
<h3>Testen</h3>
|
|
</div>
|
|
<p>Open Claude Desktop en probeer:</p>
|
|
<div class="code-wrapper">
|
|
<pre id="step-test">List my available dossiers.</pre>
|
|
<button class="copy-icon" onclick="copyCode('step-test', this)" title="Kopiëren">
|
|
<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>Je zou jouw dossier(s) moeten zien. Je bent helemaal klaar!</p>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Grok Tab -->
|
|
<div id="tab-grok" class="ai-content">
|
|
<p>Grok kan toegang krijgen tot jouw gezondheidsgegevens via onze API met HTTP-verzoeken. Geen installatie nodig.</p>
|
|
|
|
{{if and .Dossier .Dossier.DossierID}}
|
|
{{if .TempToken}}
|
|
<div class="step">
|
|
<div class="step-header">
|
|
<span class="step-num">1</span>
|
|
<h3>Plak dit in Grok</h3>
|
|
</div>
|
|
<div class="code-wrapper">
|
|
<pre id="grok-code">Access my health data using the Inou API.
|
|
|
|
Fetch https://inou.com/api/v1/dossiers?token={{.TempToken}}
|
|
|
|
Show me the list of dossiers with their details and wait for my instructions.
|
|
|
|
API docs: https://inou.com/api/docs
|
|
|
|
IMPORTANT: This is real medical data. NEVER hallucinate. Only describe what you see.
|
|
|
|
If you get a 401 error with "token expired", ask me to visit https://inou.com/connect?tab=grok for a fresh token.</pre>
|
|
<button class="copy-icon" onclick="copyCode('grok-code', this)" title="Kopiëren">
|
|
<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 class="step-note">Token verloopt op {{.TempTokenExpires}}. <a href="/connect?tab=grok">Vernieuw de pagina</a> voor een nieuw token.</p>
|
|
</div>
|
|
{{else}}
|
|
<div class="step">
|
|
<div class="step-header">
|
|
<span class="step-num">1</span>
|
|
<h3>API-token genereren</h3>
|
|
</div>
|
|
<p>Je hebt een API-token nodig om Grok te koppelen aan jouw gegevens.</p>
|
|
<form method="POST" action="/api/token/generate?return=grok" style="margin-top: 12px;">
|
|
<button type="submit" class="btn btn-primary">Token genereren</button>
|
|
</form>
|
|
</div>
|
|
{{end}}
|
|
{{else}}
|
|
<div class="login-prompt">
|
|
<a href="/start">Log in</a> om jouw API-token te genereren en gepersonaliseerde installatie-instructies te ontvangen.
|
|
</div>
|
|
{{end}}
|
|
|
|
<div class="step">
|
|
<div class="step-header">
|
|
<span class="step-num">→</span>
|
|
<h3>Wat Grok kan doen</h3>
|
|
</div>
|
|
<p>Vraag Grok na het verbinden om:</p>
|
|
<ul>
|
|
<li>Al jouw beeldvormingsstudies, genomische gegevens en laboratoriumresultaten op te sommen</li>
|
|
<li>Series binnen een specifieke studie te tonen</li>
|
|
<li>Individuele slices op te halen en te analyseren</li>
|
|
<li>Afbeeldingen te vergelijken over verschillende sequenties (T1, T2, FLAIR)</li>
|
|
<li>Naar specifieke anatomische regio's te navigeren</li>
|
|
<li>Genomische varianten op te zoeken op gen, categorie of rsid</li>
|
|
<li>Medicatiereacties en gezondheidsrisico's te bekijken</li>
|
|
<li>Laboratoriumwaarden in de loop van de tijd bij te houden</li>
|
|
</ul>
|
|
</div>
|
|
|
|
<p style="margin-top: 24px;">Bekijk de <a href="/api/docs" style="color: var(--accent);">volledige API-documentatie</a> voor alle beschikbare endpoints.</p>
|
|
</div>
|
|
|
|
<!-- ChatGPT Tab -->
|
|
<div id="tab-chatgpt" class="ai-content">
|
|
<p style="color: var(--text-muted);">Niet aanbevolen voor medische beeldvorming vanwege een verhoogd hallucinatierisico in onze tests.</p>
|
|
|
|
<div class="step">
|
|
<div class="step-header">
|
|
<span class="step-num muted">✗</span>
|
|
<h3>Waarom niet ChatGPT?</h3>
|
|
</div>
|
|
<p>Medische beeldvorming vereist absolute nauwkeurigheid. In onze tests verzon ChatGPT informatie, zelfs wanneer correcte gegevens duidelijk werden aangeleverd. We kunnen het niet aanbevelen voor het analyseren van gezondheidsgegevens waarbij fouten echte gevolgen hebben.</p>
|
|
</div>
|
|
|
|
<div class="step">
|
|
<div class="step-header">
|
|
<span class="step-num">→</span>
|
|
<h3>Aanbevolen alternatieven</h3>
|
|
</div>
|
|
<p>Gebruik <a href="#" onclick="showTab('claude'); return false;">Claude Desktop</a> voor de beste ervaring met native toegang tot tools, of <a href="#" onclick="showTab('grok'); return false;">Grok</a> voor webgebaseerde toegang zonder installatie.</p>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Other AI Tab -->
|
|
<div id="tab-other" class="ai-content">
|
|
<p>Andere AI-assistenten kunnen toegang krijgen tot jouw gegevens via onze web-API, hoewel de mogelijkheden variëren.</p>
|
|
|
|
<div class="step">
|
|
<div class="step-header">
|
|
<span class="step-num warning">⚠</span>
|
|
<h3>Gemini</h3>
|
|
</div>
|
|
<p>Het surfen van Gemini is momenteel beperkt en kan mogelijk geen inou.com-URL's rechtstreeks ophalen. Alternatieven:</p>
|
|
<ul>
|
|
<li>Kopieer API-antwoorden handmatig en plak ze in Gemini</li>
|
|
<li>Gebruik Google AI Studio met function calling</li>
|
|
<li>Overweeg in plaats daarvan Claude Desktop of Grok te gebruiken</li>
|
|
</ul>
|
|
</div>
|
|
|
|
<div class="step">
|
|
<div class="step-header">
|
|
<span class="step-num">→</span>
|
|
<h3>Zelf bouwen</h3>
|
|
</div>
|
|
<p>Onze API is eenvoudige REST + JSON. Bekijk de <a href="/api/docs">API-documentatie</a> voor endpoints en authenticatie.</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
{{template "footer"}}
|
|
|
|
</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');
|
|
}
|
|
|
|
// Check for tab parameter on page load
|
|
(function() {
|
|
const params = new URLSearchParams(window.location.search);
|
|
const tab = params.get('tab');
|
|
if (tab && document.getElementById('tab-' + tab)) {
|
|
showTab(tab);
|
|
}
|
|
})();
|
|
</script>
|
|
{{end}} |