bluemsi/connectai
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity
Files
59e0139bbecf09fc91b5306b060ff6f54dd5e1f5
connectai/media/settings-panel.html
T
g1nation 86cacaeb03 Update ConnectAI codebase
2026-05-18 08:15:01 +09:00

329 lines
17 KiB
HTML
Raw Blame History

<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width,initial-scale=1.0">
<title>Astra Settings</title>
<link rel="stylesheet" href="__STYLES_URI__">
</head>
<body>
<header class="hd">
<h1>Astra Settings</h1>
<button id="openVscodeSettings" class="link">VS Code Settings 열기</button>
</header>
<div id="bannerError" class="banner" hidden></div>
<main id="root">
<!-- Connection -->
<section class="section" data-section="connection">
<h2>연결</h2>
<p class="hint">로컬 AI 엔진(Ollama 또는 LM Studio) 위치와 기본 모델을 설정합니다.</p>
<div class="row">
<label for="cnUrl">Engine URL</label>
<div class="input-group">
<input id="cnUrl" type="text" placeholder="http://127.0.0.1:11434" spellcheck="false" />
<button data-save="connection.url">저장</button>
</div>
<small class="hint">Ollama 기본 11434 / LM Studio 기본 1234.</small>
</div>
<div class="row">
<label for="cnModel">기본 모델</label>
<div class="input-group">
<select id="cnModel"></select>
<button data-save="connection.model">저장</button>
<button id="cnRefreshModels" class="ghost" title="모델 목록 새로고침">↻</button>
</div>
<small class="hint" id="cnModelHint">사이드바에서 선택한 모델이 여기에도 동기화됩니다.</small>
</div>
<div class="row">
<label for="cnTimeout">요청 타임아웃 (초)</label>
<div class="input-group narrow">
<input id="cnTimeout" type="number" min="1" step="1" />
<button data-save="connection.timeout">저장</button>
</div>
</div>
</section>
<!-- Memory -->
<section class="section" data-section="memory">
<h2>메모리</h2>
<p class="hint">대화 응답 전에 주입되는 단기/중기/장기 메모리의 양을 조정합니다.</p>
<div class="row toggle">
<label><input id="memEnabled" type="checkbox"> 메모리 시스템 활성화</label>
</div>
<div class="row">
<label for="memShort">최근 대화 메시지 (단기)</label>
<div class="input-group narrow">
<input id="memShort" type="number" min="0" step="1" />
<button data-save="memory.short">저장</button>
</div>
</div>
<div class="row">
<label for="memMid">최근 세션 (중기)</label>
<div class="input-group narrow">
<input id="memMid" type="number" min="0" step="1" />
<button data-save="memory.mid">저장</button>
</div>
</div>
<div class="row">
<label for="memLong">관련 brain 문서 (장기)</label>
<div class="input-group narrow">
<input id="memLong" type="number" min="0" step="1" />
<button data-save="memory.long">저장</button>
</div>
</div>
</section>
<!-- Brain -->
<section class="section" data-section="brain">
<h2>두뇌 (지식 폴더)</h2>
<p class="hint">현재 활성 두뇌 프로필 정보입니다. 추가·수정은 사이드바의 [변경 ▾ → 두뇌] 또는 VS Code Settings에서 처리합니다.</p>
<div class="row">
<label>활성 프로필</label>
<div class="readout" id="brainName">—</div>
<small class="hint" id="brainPath">—</small>
</div>
<div class="row toggle">
<label><input id="brainAutoPush" type="checkbox"> 변경 시 GitHub 자동 push (autoPushBrain)</label>
</div>
<div class="row">
<button id="brainOpenSettings" class="link">brainProfiles 편집 (VS Code Settings)</button>
</div>
</section>
<!-- Telegram -->
<section class="section" data-section="telegram">
<h2>Telegram 봇</h2>
<p class="hint">텔레그램으로 Astra와 대화하고 싶다면 BotFather에서 봇을 만들고 토큰을 여기에 저장하세요. Astra의 다른 기능에는 영향이 없습니다.</p>
<div class="row">
<label for="tgToken">Bot Token</label>
<div class="input-group">
<input id="tgToken" type="password" placeholder="123456789:AA..." autocomplete="off" spellcheck="false" />
<button id="tgSaveToken">저장</button>
<button id="tgClearToken" class="ghost">삭제</button>
</div>
<small id="tgTokenStatus" class="status"></small>
</div>
<div class="row">
<button id="tgTest">연결 테스트</button>
<span id="tgBotName" class="status-inline"></span>
</div>
<div class="row toggle">
<label><input id="tgEnabled" type="checkbox"> 봇 활성화 (체크하면 폴링 시작)</label>
</div>
<div class="row">
<button id="tgEnroll">내 채널 자동 등록</button>
<button id="tgEnrollCancel" class="ghost" hidden>등록 취소</button>
<small id="tgEnrollStatus" class="status"></small>
</div>
<div class="row" id="tgChatList">
<label>허용된 채널 IDs</label>
<ul id="tgChatIds" class="chips"></ul>
<small class="hint">목록이 비어 있으면 누구나 봇에 메시지를 보낼 수 있습니다 (자동 등록을 한 번 하시는 것을 권장).</small>
</div>
<div id="tgFeedback" class="feedback" hidden></div>
<div id="tgError" class="error" hidden></div>
</section>
<!-- Google (Calendar + Sheets) -->
<section class="section" data-section="google">
<h2>Google (Calendar · Sheets)</h2>
<p class="hint">회의록·할일을 Google Calendar 에 자동 등록하고 Sheets 를 읽고 쓰려면 OAuth 가 필요합니다. <a href="https://console.cloud.google.com/apis/credentials" target="_blank">Google Cloud Console</a> 에서 Desktop OAuth Client 만들고 Client ID/Secret 을 아래에 붙여넣으세요.</p>
<div class="row">
<label>현재 연결 상태</label>
<div class="readout" id="googleConnStatus">—</div>
</div>
<div class="row">
<label for="gClientId">OAuth Client ID</label>
<div class="input-group">
<input id="gClientId" type="text" placeholder="xxxxxxxx.apps.googleusercontent.com" autocomplete="off" spellcheck="false" />
<button data-save="google.clientId">저장</button>
</div>
</div>
<div class="row">
<label for="gClientSecret">OAuth Client Secret</label>
<div class="input-group">
<input id="gClientSecret" type="password" placeholder="GOCSPX-..." autocomplete="off" spellcheck="false" />
<button data-save="google.clientSecret">저장</button>
</div>
<small class="hint">Desktop OAuth client 의 secret 은 Google 가이드상 비공개 아님. 그래도 Settings Sync 에는 포함되지 않습니다 (machine scope).</small>
</div>
<div class="row">
<button id="googleConnect">OAuth 연결 / 재연결</button>
<button id="googleDisconnect" class="ghost">연결 해제</button>
<span id="googleConnStatusInline" class="status-inline"></span>
</div>
<div class="row">
<label for="gCalendarId">Calendar ID</label>
<div class="input-group">
<input id="gCalendarId" type="text" placeholder="primary" autocomplete="off" spellcheck="false" />
<button data-save="google.calendarId">저장</button>
</div>
<small class="hint">기본 'primary' (본인 메인 캘린더). 다른 캘린더 ID 입력 가능.</small>
</div>
<div class="row">
<label for="gDefaultDur">기본 일정 길이 (분)</label>
<div class="input-group narrow">
<input id="gDefaultDur" type="number" min="5" max="720" step="5" />
<button data-save="google.defaultEventDurationMinutes">저장</button>
</div>
<small class="hint">duration / end 안 지정된 일정 생성 시 사용. Default 60.</small>
</div>
<h3 style="margin-top:18px;font-size:13px;color:var(--muted)">iCal 읽기 (선택 사항)</h3>
<p class="hint">OAuth 없이 비공개 iCal URL 로 일정만 읽고 싶을 때. OAuth 연결돼 있으면 비워둬도 됩니다.</p>
<div class="row">
<label for="gIcalUrl">iCal URL</label>
<div class="input-group">
<input id="gIcalUrl" type="password" placeholder="https://calendar.google.com/calendar/ical/.../basic.ics" autocomplete="off" spellcheck="false" />
<button data-save="google.icalUrl">저장</button>
</div>
<small class="hint">URL 자체가 capability 토큰이라 password 처리. Settings Sync 에 안 포함됨.</small>
</div>
<div class="row">
<label for="gIcalDays">iCal 미리 가져올 일수</label>
<div class="input-group narrow">
<input id="gIcalDays" type="number" min="1" max="90" step="1" />
<button data-save="google.icalDaysAhead">저장</button>
</div>
</div>
<div class="row">
<button id="googleIcalRefresh">지금 iCal 새로고침</button>
<span id="googleIcalStatus" class="status-inline"></span>
</div>
<div id="googleFeedback" class="feedback" hidden></div>
<div id="googleError" class="error" hidden></div>
</section>
<!-- Cloud LLM Providers -->
<section class="section" data-section="providers">
<h2>Cloud LLM Providers</h2>
<p class="hint">Ollama / LM Studio 로컬 외에 cloud API 를 붙여서 모델 선택지를 확장. API key 는 모두 Secret Storage 에 저장 (settings.json 침범 X). 사이드바 모델 dropdown 에서 활성 provider 의 모델이 함께 표시됩니다.</p>
<!-- OpenRouter -->
<h3 style="margin-top:6px;font-size:13px;color:var(--text)">OpenRouter</h3>
<p class="hint">100+ 모델 (Claude / Gemini / GPT / Llama 전부) 을 단일 API 로. <a href="https://openrouter.ai/keys" target="_blank">openrouter.ai/keys</a> 에서 API key 발급.</p>
<div class="row toggle">
<label><input id="prOpenrouterEnabled" type="checkbox"> OpenRouter 활성화</label>
</div>
<div class="row">
<label for="prOpenrouterKey">API Key</label>
<div class="input-group">
<input id="prOpenrouterKey" type="password" placeholder="sk-or-..." autocomplete="off" spellcheck="false" />
<button data-save="providers.openrouter.apiKey">저장</button>
</div>
</div>
<div class="row">
<label for="prOpenrouterDefault">기본 모델 (선택)</label>
<div class="input-group">
<input id="prOpenrouterDefault" type="text" placeholder="anthropic/claude-3.5-sonnet" autocomplete="off" />
<button data-save="providers.openrouter.defaultModel">저장</button>
</div>
</div>
<!-- Anthropic -->
<h3 style="margin-top:18px;font-size:13px;color:var(--text)">Anthropic Claude (직통)</h3>
<p class="hint">Anthropic 직접 API — prompt caching 등 native 기능 활용 가능. <a href="https://console.anthropic.com/settings/keys" target="_blank">console.anthropic.com/settings/keys</a> 에서 API key 발급.</p>
<div class="row toggle">
<label><input id="prAnthropicEnabled" type="checkbox"> Anthropic 활성화</label>
</div>
<div class="row">
<label for="prAnthropicKey">API Key</label>
<div class="input-group">
<input id="prAnthropicKey" type="password" placeholder="sk-ant-..." autocomplete="off" spellcheck="false" />
<button data-save="providers.anthropic.apiKey">저장</button>
</div>
</div>
<div class="row">
<label for="prAnthropicDefault">기본 모델</label>
<div class="input-group">
<input id="prAnthropicDefault" type="text" placeholder="claude-3-5-sonnet-20241022" autocomplete="off" />
<button data-save="providers.anthropic.defaultModel">저장</button>
</div>
</div>
<!-- Gemini -->
<h3 style="margin-top:18px;font-size:13px;color:var(--text)">Google Gemini (직통)</h3>
<p class="hint">1M context (gemini-1.5-pro), 무료 tier 사용 가능. <a href="https://aistudio.google.com/app/apikey" target="_blank">aistudio.google.com/app/apikey</a> 에서 발급.</p>
<div class="row toggle">
<label><input id="prGeminiEnabled" type="checkbox"> Gemini 활성화</label>
</div>
<div class="row">
<label for="prGeminiKey">API Key</label>
<div class="input-group">
<input id="prGeminiKey" type="password" placeholder="AIzaSy..." autocomplete="off" spellcheck="false" />
<button data-save="providers.gemini.apiKey">저장</button>
</div>
</div>
<div class="row">
<label for="prGeminiDefault">기본 모델</label>
<div class="input-group">
<input id="prGeminiDefault" type="text" placeholder="gemini-2.0-flash-exp" autocomplete="off" />
<button data-save="providers.gemini.defaultModel">저장</button>
</div>
</div>
<div id="providersFeedback" class="feedback" hidden></div>
<div id="providersError" class="error" hidden></div>
</section>
<!-- Devil Agent (도현) -->
<section class="section" data-section="devilAgent">
<h2>🎭 Devil's Advocate (도현)</h2>
<p class="hint">매 답변 직후 별도 LLM 호출로 *비판적 sparring partner* 가 한 문단 반박. 사용자의 사고를 능동적 방어로 전환. 같은 모델 재사용 (~10-15% 추가 비용).</p>
<div class="row toggle">
<label><input id="devilEnabled" type="checkbox"> 도현 활성화 — 답변마다 반박 카드</label>
</div>
<div class="row">
<small class="hint">규칙: 한 답변당 약점 1개만, 통계·수치 인용 금지 (환각 차단), 끝에 우려+검증 방법 명시. 명령 팔레트 <code>Astra: Toggle Devil Agent 🎭</code> 로도 토글.</small>
</div>
</section>
<!-- Advanced -->
<section class="section" data-section="advanced">
<h2>고급</h2>
<p class="hint">대부분의 사용자는 건드릴 필요 없습니다.</p>
<div class="row toggle">
<label><input id="advDryRun" type="checkbox"> Dry Run (파일 변경 전 승인 요청)</label>
</div>
<div class="row toggle">
<label><input id="advMulti" type="checkbox"> 멀티 에이전트 워크플로우 (Planner → Researcher → Writer)</label>
</div>
<div class="row">
<label for="advAutoSteps">최대 자동 단계 (maxAutoSteps)</label>
<div class="input-group narrow">
<input id="advAutoSteps" type="number" min="1" step="1" />
<button data-save="advanced.autoSteps">저장</button>
</div>
</div>
<div class="row">
<label for="advCtxSize">최대 컨텍스트 (maxContextSize)</label>
<div class="input-group narrow">
<input id="advCtxSize" type="number" min="1000" step="1000" />
<button data-save="advanced.ctxSize">저장</button>
</div>
</div>
</section>
</main>
<script src="__SCRIPT_URI__"></script>
</body>
</html>
Reference in New Issue View Git Blame Copy Permalink