231 lines
14 KiB
Cheetah
231 lines
14 KiB
Cheetah
{{define "install_public_ru"}}
|
||
<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>Подключи ИИ к своим данным</h1>
|
||
<p class="text-muted text-small">Выбери ИИ-ассистента и следуй инструкциям по настройке.</p>
|
||
</div>
|
||
<a href="/" class="btn btn-secondary btn-small">← Главная</a>
|
||
</div>
|
||
|
||
<div class="login-tracker">
|
||
<strong>Примечание:</strong> <a href="/start">Войди</a>, чтобы увидеть персональные инструкции по настройке с уже заполненным токеном аккаунта.
|
||
</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')">Другой ИИ</button>
|
||
</div>
|
||
|
||
<!-- Claude Desktop Tab -->
|
||
<div id="tab-claude" class="ai-content active">
|
||
<p style="margin-bottom: 1.5rem;">Claude Desktop подключается к inou напрямую через OAuth — никаких токенов для копирования, никаких расширений для установки. Нативный доступ к инструментам, полные возможности API.</p>
|
||
|
||
<div class="step">
|
||
<span class="step-num">1</span>
|
||
<h3>Установи Claude Desktop</h3>
|
||
<p>Скачай и установи с <a href="https://claude.ai/download" target="_blank">claude.ai/download</a></p>
|
||
</div>
|
||
|
||
<div class="step">
|
||
<span class="step-num">2</span>
|
||
<h3>Добавь коннектор Inou</h3>
|
||
<p>В Claude Desktop:</p>
|
||
<ol style="margin: 12px 0 12px 44px; color: var(--text-muted);">
|
||
<li>Перейди в <strong>Settings → Connectors</strong></li>
|
||
<li>Нажми <strong>Add custom connector</strong></li>
|
||
<li>Заполни поля:</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;">Name</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;">Remote MCP server URL</td>
|
||
<td style="padding: 8px 12px; border: 1px solid var(--border);"><code>https://inou.com/mcp</code></td>
|
||
</tr>
|
||
</table>
|
||
<p>Нажми <strong>Add</strong>, затем <strong>Connect</strong>.</p>
|
||
</div>
|
||
|
||
<div class="step">
|
||
<span class="step-num">3</span>
|
||
<h3>Войди в аккаунт</h3>
|
||
<p>Откроется браузер для входа в inou. После входа нажми <strong>Open Claude</strong>, чтобы завершить подключение.</p>
|
||
</div>
|
||
|
||
<div class="step">
|
||
<span class="step-num">4</span>
|
||
<h3>Разреши инструменты</h3>
|
||
<p>Чтобы не подтверждать разрешение 11 раз:</p>
|
||
<ol style="margin: 12px 0 12px 44px; color: var(--text-muted);">
|
||
<li>В <strong>Settings → Connectors</strong> найди <strong>Inou Health</strong></li>
|
||
<li>Нажми <strong>Configure</strong> (иконка шестерёнки)</li>
|
||
<li>В разделе <strong>Read-only tools</strong> выбери <strong>Always allow</strong></li>
|
||
</ol>
|
||
</div>
|
||
|
||
<div class="step">
|
||
<span class="step-num">5</span>
|
||
<h3>Добавь пользовательские инструкции (рекомендуется)</h3>
|
||
<p>В Claude Desktop перейди в <strong>Settings → Custom Instructions</strong> и добавь:</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="Копировать">
|
||
<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>Проверь подключение</h3>
|
||
<p>Открой Claude Desktop и попробуй:</p>
|
||
<div class="code-wrapper">
|
||
<pre id="step6-code">List my available dossiers.</pre>
|
||
<button class="copy-icon" onclick="copyCode('step6-code', this)" title="Копировать">
|
||
<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>Ты должен увидеть свои досье. Всё готово!</p>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- Grok Tab -->
|
||
<div id="tab-grok" class="ai-content">
|
||
<p style="margin-bottom: 1.5rem;">Grok умеет просматривать веб и получать доступ к твоим медицинским данным напрямую через наш API. Установка не требуется.</p>
|
||
|
||
<div class="quick-start">
|
||
<h3>Быстрый старт</h3>
|
||
<p>Скопируй это и вставь в 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="Копировать">
|
||
<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>Что умеет Grok</h3>
|
||
<p>После подключения попроси Grok:</p>
|
||
<ul style="margin: 12px 0 0 44px; color: var(--text-muted);">
|
||
<li>Показать все твои исследования, геномные данные и результаты анализов</li>
|
||
<li>Показать серии внутри конкретного исследования</li>
|
||
<li>Загрузить и проанализировать отдельные срезы</li>
|
||
<li>Сравнить изображения из разных последовательностей (T1, T2, FLAIR)</li>
|
||
<li>Перейти к конкретным анатомическим областям</li>
|
||
<li>Найти геномные варианты по гену, категории или rsid</li>
|
||
<li>Просмотреть реакции на лекарства и риски для здоровья</li>
|
||
<li>Отследить динамику лабораторных показателей</li>
|
||
</ul>
|
||
</div>
|
||
|
||
<p style="margin-top: 1.5rem; color: var(--text-muted);">Смотри <a href="/api/docs">полную документацию API</a> со всеми доступными эндпоинтами.</p>
|
||
</div>
|
||
|
||
<!-- ChatGPT Tab -->
|
||
<div id="tab-chatgpt" class="ai-content">
|
||
<p style="margin-bottom: 1.5rem; color: var(--text-muted);">Не рекомендуется для медицинской визуализации из-за повышенного риска галлюцинаций по результатам нашего тестирования.</p>
|
||
|
||
<div class="step">
|
||
<span class="step-num">✗</span>
|
||
<h3>Почему не ChatGPT?</h3>
|
||
<p>Медицинская визуализация требует абсолютной точности. В ходе нашего тестирования ChatGPT выдумывал информацию даже тогда, когда корректные данные были явно предоставлены. Мы не можем рекомендовать его для анализа медицинских данных, где ошибки имеют реальные последствия.</p>
|
||
</div>
|
||
|
||
<div class="step">
|
||
<span class="step-num">→</span>
|
||
<h3>Рекомендуемые альтернативы</h3>
|
||
<p>Используй <a href="#" onclick="showTab('claude'); return false;">Claude Desktop</a> для лучшего опыта с нативным доступом к инструментам или <a href="#" onclick="showTab('grok'); return false;">Grok</a> для веб-доступа без установки.</p>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- Other AI Tab -->
|
||
<div id="tab-other" class="ai-content">
|
||
<p style="margin-bottom: 1.5rem;">Другие ИИ-ассистенты могут получать доступ к твоим данным через наш веб-API, хотя возможности могут различаться.</p>
|
||
|
||
<div class="step">
|
||
<span class="step-num">⚠</span>
|
||
<h3>Gemini</h3>
|
||
<p>Веб-браузинг Gemini сейчас ограничен и может не иметь возможности напрямую загружать URL inou.com. Варианты обхода:</p>
|
||
<ul style="margin: 12px 0 0 44px; color: var(--text-muted);">
|
||
<li>Копируй ответы API вручную и вставляй их в Gemini</li>
|
||
<li>Используй Google AI Studio с вызовом функций</li>
|
||
<li>Рассмотри использование Claude Desktop или Grok вместо этого</li>
|
||
</ul>
|
||
</div>
|
||
|
||
<div class="step">
|
||
<span class="step-num">→</span>
|
||
<h3>Создай своё решение</h3>
|
||
<p>Наш API — это простой REST + JSON. Смотри <a href="/api/docs">документацию API</a> для эндпоинтов и аутентификации.</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}} |