268 lines
14 KiB
Cheetah
268 lines
14 KiB
Cheetah
{{define "connect_ru"}}
|
||
<div class="install-container">
|
||
|
||
<div class="install-header">
|
||
<div>
|
||
<h1>Подключите ИИ к вашим данным</h1>
|
||
<p>Выберите ИИ-ассистента и следуйте инструкциям по настройке.</p>
|
||
</div>
|
||
{{if and .Dossier .Dossier.DossierID}}<a href="/dashboard" class="btn btn-secondary btn-small">← Назад</a>{{else}}<a href="/" class="btn btn-secondary btn-small">← Главная</a>{{end}}
|
||
</div>
|
||
|
||
<div class="install-card">
|
||
<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>Claude Desktop подключается напрямую к <span class="inou-brand">inou</span> через OAuth — не нужно копировать токены или устанавливать расширения.</p>
|
||
|
||
<div class="step">
|
||
<div class="step-header">
|
||
<span class="step-num">1</span>
|
||
<h3>Установите Claude Desktop</h3>
|
||
</div>
|
||
<p>Скачайте и установите с <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</h3>
|
||
</div>
|
||
<p>В Claude Desktop:</p>
|
||
<ol style="margin: 8px 0 12px 20px;">
|
||
<li>Перейдите в <strong>Настройки → Коннекторы</strong></li>
|
||
<li>Нажмите <strong>Добавить пользовательский коннектор</strong></li>
|
||
<li>Заполните поля:</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;">Название</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;">URL удалённого MCP-сервера</td>
|
||
<td style="padding: 8px 12px; border: 1px solid var(--border);"><code>https://inou.com/mcp</code></td>
|
||
</tr>
|
||
</table>
|
||
<p>Нажмите <strong>Добавить</strong>, затем <strong>Подключить</strong>.</p>
|
||
</div>
|
||
|
||
<div class="step">
|
||
<div class="step-header">
|
||
<span class="step-num">3</span>
|
||
<h3>Войти</h3>
|
||
</div>
|
||
<p>Откроется браузер для входа в <span class="inou-brand">inou</span>. После входа нажмите <strong>Открыть Claude</strong> для завершения подключения.</p>
|
||
</div>
|
||
|
||
<div class="step">
|
||
<div class="step-header">
|
||
<span class="step-num">4</span>
|
||
<h3>Разрешить инструменты</h3>
|
||
</div>
|
||
<p>Чтобы не разрешать доступ 11 раз:</p>
|
||
<ol style="margin: 8px 0 12px 20px;">
|
||
<li>В <strong>Настройки → Коннекторы</strong> найдите <strong>Inou Health</strong></li>
|
||
<li>Нажмите <strong>Настроить</strong> (значок шестерёнки)</li>
|
||
<li>В разделе <strong>Инструменты только для чтения</strong> выберите <strong>Всегда разрешать</strong></li>
|
||
</ol>
|
||
<p>Это даёт Claude разрешение читать ваши медицинские данные без повторных запросов.</p>
|
||
</div>
|
||
|
||
<div class="step">
|
||
<div class="step-header">
|
||
<span class="step-num">5</span>
|
||
<h3>Добавьте пользовательские инструкции (рекомендуется)</h3>
|
||
</div>
|
||
<p>Для автоматической загрузки контекста медицинских данных семьи в каждом разговоре:</p>
|
||
<ol style="margin: 8px 0 12px 20px;">
|
||
<li>В Claude Desktop перейдите в <strong>Настройки → Пользовательские инструкции</strong></li>
|
||
<li>В текстовое поле добавьте:</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="Копировать">
|
||
<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 проверять, какие медицинские данные доступны для членов вашей семьи в начале каждого разговора, не заполняя контекстное окно фактическими медицинскими данными.</p>
|
||
</div>
|
||
|
||
<div class="step">
|
||
<div class="step-header">
|
||
<span class="step-num">6</span>
|
||
<h3>Тестирование</h3>
|
||
</div>
|
||
<p>Откройте Claude Desktop и попробуйте:</p>
|
||
<div class="code-wrapper">
|
||
<pre id="step-test">List my available dossiers.</pre>
|
||
<button class="copy-icon" onclick="copyCode('step-test', 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>Grok может получить доступ к вашим медицинским данным через наш API с помощью HTTP-запросов. Установка не требуется.</p>
|
||
|
||
{{if and .Dossier .Dossier.DossierID}}
|
||
{{if .TempToken}}
|
||
<div class="step">
|
||
<div class="step-header">
|
||
<span class="step-num">1</span>
|
||
<h3>Вставьте это в 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="Копировать">
|
||
<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">Токен истекает {{.TempTokenExpires}}. <a href="/connect?tab=grok">Обновите страницу</a> для получения нового токена.</p>
|
||
</div>
|
||
{{else}}
|
||
<div class="step">
|
||
<div class="step-header">
|
||
<span class="step-num">1</span>
|
||
<h3>Создать API-токен</h3>
|
||
</div>
|
||
<p>Для подключения Grok к вашим данным необходим API-токен.</p>
|
||
<form method="POST" action="/api/token/generate?return=grok" style="margin-top: 12px;">
|
||
<button type="submit" class="btn btn-primary">Создать токен</button>
|
||
</form>
|
||
</div>
|
||
{{end}}
|
||
{{else}}
|
||
<div class="login-tracker">
|
||
<a href="/start">Войдите</a>, чтобы создать API-токен и получить персонализированные инструкции по настройке.
|
||
</div>
|
||
{{end}}
|
||
|
||
<div class="step">
|
||
<div class="step-header">
|
||
<span class="step-num">→</span>
|
||
<h3>Что умеет Grok</h3>
|
||
</div>
|
||
<p>После подключения попросите Grok:</p>
|
||
<ul>
|
||
<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: 24px;">Смотрите <a href="/api/docs" style="color: var(--accent);">полную документацию API</a> для получения информации обо всех доступных эндпоинтах.</p>
|
||
</div>
|
||
|
||
<!-- ChatGPT Tab -->
|
||
<div id="tab-chatgpt" class="ai-content">
|
||
<p style="color: var(--text-muted);">Не рекомендуется для медицинской визуализации из-за повышенного риска галлюцинаций по результатам наших тестов.</p>
|
||
|
||
<div class="step">
|
||
<div class="step-header">
|
||
<span class="step-num muted">✗</span>
|
||
<h3>Почему не ChatGPT?</h3>
|
||
</div>
|
||
<p>Медицинская визуализация требует абсолютной точности. В наших тестах ChatGPT придумывал информацию, даже когда корректные данные были явно предоставлены. Мы не можем рекомендовать его для анализа медицинских данных, где ошибки имеют реальные последствия.</p>
|
||
</div>
|
||
|
||
<div class="step">
|
||
<div class="step-header">
|
||
<span class="step-num">→</span>
|
||
<h3>Рекомендуемые альтернативы</h3>
|
||
</div>
|
||
<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>Другие ИИ-ассистенты могут получить доступ к вашим данным через наш веб-API, хотя возможности различаются.</p>
|
||
|
||
<div class="step">
|
||
<div class="step-header">
|
||
<span class="step-num warning">⚠</span>
|
||
<h3>Gemini</h3>
|
||
</div>
|
||
<p>Просмотр веб-страниц в Gemini в настоящее время ограничен и может не иметь возможности напрямую получать URL-адреса inou.com. Обходные пути:</p>
|
||
<ul>
|
||
<li>Скопируйте ответы API вручную и вставьте их в Gemini</li>
|
||
<li>Используйте Google AI Studio с вызовом функций</li>
|
||
<li>Рассмотрите использование Claude Desktop или Grok</li>
|
||
</ul>
|
||
</div>
|
||
|
||
<div class="step">
|
||
<div class="step-header">
|
||
<span class="step-num">→</span>
|
||
<h3>Создайте собственную интеграцию</h3>
|
||
</div>
|
||
<p>Наш API прост: REST + JSON. Смотрите <a href="/api/docs">документацию API</a> для получения информации об эндпоинтах и аутентификации.</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}}
|