236 lines
11 KiB
Cheetah
236 lines
11 KiB
Cheetah
{{define "install_public"}}
|
|
<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>Connect AI to Your Data</h1>
|
|
<p class="text-muted text-small">Choose your AI assistant and follow the setup instructions.</p>
|
|
</div>
|
|
<a href="/" class="btn btn-secondary btn-small">← Home</a>
|
|
</div>
|
|
|
|
<div class="login-tracker">
|
|
<strong>Note:</strong> <a href="/start">Sign in</a> to see personalized setup instructions with your account token pre-filled.
|
|
</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')">Other AI</button>
|
|
</div>
|
|
|
|
<!-- Claude Desktop Tab -->
|
|
<div id="tab-claude" class="ai-content active">
|
|
<p style="margin-bottom: 1.5rem;">Claude Desktop with MCP provides the richest experience — native tool access, no URL fetching, full API capabilities.</p>
|
|
|
|
<div class="step">
|
|
<span class="step-num">1</span>
|
|
<h3>Install Claude Desktop</h3>
|
|
<p>Download and install from <a href="https://claude.ai/download" target="_blank">claude.ai/download</a></p>
|
|
</div>
|
|
|
|
<div class="step">
|
|
<span class="step-num">2</span>
|
|
<h3>Install Desktop Commander</h3>
|
|
<p>Open Claude Desktop and paste:</p>
|
|
<div class="code-wrapper">
|
|
<pre id="step2-code">Please install Desktop Commander MCP server so you can help me with file operations.</pre>
|
|
<button class="copy-icon" onclick="copyCode('step2-code', this)" title="Copy">
|
|
<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>Claude will guide you through the installation. Restart Claude when done.</p>
|
|
</div>
|
|
|
|
<div class="step">
|
|
<span class="step-num">3</span>
|
|
<h3>Install Inou Bridge</h3>
|
|
<p>After restarting, paste this in Claude:</p>
|
|
<div class="code-wrapper">
|
|
<pre id="step3-code">Please set up the Inou medical imaging bridge:
|
|
|
|
1. Detect my OS and architecture
|
|
|
|
2. Download the correct bridge:
|
|
- Mac Apple Silicon: https://inou.com/download/inou_bridge_darwin_arm64
|
|
- Mac Intel: https://inou.com/download/inou_bridge_darwin_amd64
|
|
- Windows 64-bit: https://inou.com/download/inou_bridge_win_amd64.exe
|
|
|
|
3. Save it to:
|
|
- Mac: ~/bin/inou_bridge (create ~/bin if needed, make executable)
|
|
- Windows: %USERPROFILE%\inou\inou_bridge.exe (create folder if needed)
|
|
|
|
4. Edit Claude config:
|
|
- Mac: ~/Library/Application Support/Claude/claude_desktop_config.json
|
|
- Windows: %APPDATA%\Claude\claude_desktop_config.json
|
|
|
|
5. Add to mcpServers (keep any existing entries like desktop-commander):
|
|
|
|
"inou": {
|
|
"command": "BRIDGE_PATH",
|
|
"args": ["--server=https://inou.com", "--account=YOUR_ACCOUNT_TOKEN"]
|
|
}
|
|
|
|
Replace BRIDGE_PATH with the actual path where you saved the bridge.
|
|
Replace YOUR_ACCOUNT_TOKEN with your token from inou.com/dashboard.
|
|
|
|
Tell me when done.</pre>
|
|
<button class="copy-icon" onclick="copyCode('step3-code', this)" title="Copy">
|
|
<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">4</span>
|
|
<h3>Restart & Test</h3>
|
|
<p>Quit Claude Desktop completely, reopen, then paste:</p>
|
|
<div class="code-wrapper">
|
|
<pre id="step4-code">List my available dossiers using the inou bridge, then show imaging studies for the first one.</pre>
|
|
<button class="copy-icon" onclick="copyCode('step4-code', this)" title="Copy">
|
|
<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>You should see your dossier(s) and any imaging studies.</p>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Grok Tab -->
|
|
<div id="tab-grok" class="ai-content">
|
|
<p style="margin-bottom: 1.5rem;">Grok can browse the web and access your health data directly through our API. No installation needed.</p>
|
|
|
|
<div class="quick-start">
|
|
<h3>Quick Start</h3>
|
|
<p>Copy this and paste it into 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/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/dashboard.
|
|
- 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="Copy">
|
|
<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>What Grok can do</h3>
|
|
<p>Once connected, ask Grok to:</p>
|
|
<ul style="margin: 12px 0 0 44px; color: var(--text-muted);">
|
|
<li>List all your imaging studies, genome data, and lab results</li>
|
|
<li>Show series within a specific study</li>
|
|
<li>Fetch and analyze individual slices</li>
|
|
<li>Compare images across different sequences (T1, T2, FLAIR)</li>
|
|
<li>Navigate to specific anatomical regions</li>
|
|
<li>Query genome variants by gene, category, or rsid</li>
|
|
<li>Review medication responses and health risks</li>
|
|
<li>Track lab values over time</li>
|
|
</ul>
|
|
</div>
|
|
|
|
<p style="margin-top: 1.5rem; color: var(--text-muted);">See the <a href="/api/docs">full API documentation</a> for all available endpoints.</p>
|
|
</div>
|
|
|
|
<!-- ChatGPT Tab -->
|
|
<div id="tab-chatgpt" class="ai-content">
|
|
<p style="margin-bottom: 1.5rem; color: var(--text-muted);">Not recommended for medical imaging due to elevated hallucination risk in our testing.</p>
|
|
|
|
<div class="step">
|
|
<span class="step-num">✗</span>
|
|
<h3>Why not ChatGPT?</h3>
|
|
<p>Medical imaging requires absolute accuracy. In our testing, ChatGPT fabricated information even when correct data was clearly provided. We cannot recommend it for analyzing health data where errors have real consequences.</p>
|
|
</div>
|
|
|
|
<div class="step">
|
|
<span class="step-num">→</span>
|
|
<h3>Recommended alternatives</h3>
|
|
<p>Use <a href="#" onclick="showTab('claude'); return false;">Claude Desktop</a> for the best experience with native tool access, or <a href="#" onclick="showTab('grok'); return false;">Grok</a> for web-based access with no installation.</p>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Other AI Tab -->
|
|
<div id="tab-other" class="ai-content">
|
|
<p style="margin-bottom: 1.5rem;">Other AI assistants can access your data through our web API, though capabilities vary.</p>
|
|
|
|
<div class="step">
|
|
<span class="step-num">⚠</span>
|
|
<h3>Gemini</h3>
|
|
<p>Gemini's web browsing is currently restricted and may not be able to fetch inou.com URLs directly. Workarounds:</p>
|
|
<ul style="margin: 12px 0 0 44px; color: var(--text-muted);">
|
|
<li>Copy API responses manually and paste them into Gemini</li>
|
|
<li>Use Google AI Studio with function calling</li>
|
|
<li>Consider using Claude Desktop or Grok instead</li>
|
|
</ul>
|
|
</div>
|
|
|
|
<div class="step">
|
|
<span class="step-num">→</span>
|
|
<h3>Build Your Own</h3>
|
|
<p>Our API is simple REST + JSON. See the <a href="/api/docs">API documentation</a> for endpoints and authentication.</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}}
|