Skip to content

Commit 7626504

Browse files
zerojat7-uizerojat7-ui
authored
Add files via upload
1 parent a9a0c9f commit 7626504

1 file changed

Lines changed: 102 additions & 58 deletions

File tree

‎docs/kide_wasm.html‎

Lines changed: 102 additions & 58 deletions
Original file line numberDiff line numberDiff line change
@@ -165,17 +165,20 @@
165165
}
166166
#ai-header{
167167
display:flex;align-items:center;justify-content:space-between;
168-
padding:5px 10px;border-bottom:1px solid var(--b1);flex-shrink:0;
168+
padding:5px 8px 5px 10px;border-bottom:1px solid var(--b1);
169+
flex-shrink:0;min-height:30px;
169170
}
170-
#ai-header .ph{border:none;padding:0;font-size:9.5px;}
171+
#ai-header .ph{border:none;padding:0;margin:0;font-size:9.5px;}
171172
#ai-sel-btn{
172-
display:flex;align-items:center;gap:5px;padding:3px 9px;
173-
border-radius:12px;border:1px solid var(--b2);background:var(--bg3);
173+
display:flex;align-items:center;gap:5px;padding:3px 10px;
174+
border-radius:12px;border:1px solid #aa55ff55;
175+
background:linear-gradient(135deg,#1a1030,#120a24);
174176
cursor:pointer;transition:.15s;font-size:10px;
177+
color:var(--txt);outline:none;white-space:nowrap;
175178
}
176-
#ai-sel-btn:hover{border-color:var(--purple);color:var(--purple);}
177-
#ai-sel-dot{width:6px;height:6px;border-radius:50%;}
178-
#ai-sel-name{color:var(--txt);font-size:10px;font-weight:600;}
179+
#ai-sel-btn:hover{border-color:var(--purple);box-shadow:0 0 8px #aa55ff33;}
180+
#ai-sel-dot{width:7px;height:7px;border-radius:50%;flex-shrink:0;}
181+
#ai-sel-name{color:#cc88ff;font-size:10.5px;font-weight:700;}
179182
#ai-msgs{flex:1;overflow-y:auto;padding:8px;}
180183
.ai-msg{margin-bottom:7px;}
181184
.ai-msg.usr{text-align:right;}
@@ -400,8 +403,8 @@
400403
<div id="ai-header">
401404
<div class="ph">🤖 K-AI</div>
402405
<button id="ai-sel-btn" onclick="openAIModal()">
403-
<span id="ai-sel-dot" style="background:#aa55ff;box-shadow:0 0 6px #aa55ff;"></span>
404-
<span id="ai-sel-name">Claude</span>
406+
<span id="ai-sel-dot" style="background:#4a8fff;box-shadow:0 0 6px #4a8fff;"></span>
407+
<span id="ai-sel-name">Gemini</span>
405408
<span style="color:var(--dim);font-size:9px;">▼</span>
406409
</button>
407410
</div>
@@ -422,84 +425,119 @@ <h3>🤖 AI 어시스턴트 선택</h3>
422425
<button id="ai-modal-close" onclick="closeAIModal()">✕</button>
423426
</div>
424427
<div id="ai-provider-list">
425-
<!-- Claude -->
426-
<div class="ai-provider-card" id="card-claude" onclick="selectProvider('claude')">
427-
<div class="ai-prov-icon" style="background:#1a0a30;color:#cc88ff;">C</div>
428-
<div class="ai-prov-info">
429-
<div class="ai-prov-name">Claude</div>
430-
<div class="ai-prov-desc">Anthropic · claude-sonnet-4-5</div>
431-
</div>
432-
<span class="ai-prov-badge need" id="badge-claude">API 키 필요</span>
433-
</div>
434-
<div class="ai-key-area" id="key-claude">
435-
<label>Anthropic API Key</label>
436-
<div class="ai-key-row">
437-
<input class="ai-key-inp" id="inp-claude" type="password" placeholder="sk-ant-...">
438-
<button class="ai-key-save" onclick="saveKey('claude')">저장</button>
439-
</div>
440-
<div class="ai-key-status" id="status-claude"></div>
441-
</div>
442428

443-
<!-- ChatGPT -->
444-
<div class="ai-provider-card" id="card-chatgpt" onclick="selectProvider('chatgpt')">
445-
<div class="ai-prov-icon" style="background:#0a2a1a;color:#10a37f;font-size:14px;font-weight:900;">GPT</div>
446-
<div class="ai-prov-info">
447-
<div class="ai-prov-name">ChatGPT</div>
448-
<div class="ai-prov-desc">OpenAI · gpt-4o-mini</div>
449-
</div>
450-
<span class="ai-prov-badge need" id="badge-chatgpt">API 키 필요</span>
451-
</div>
452-
<div class="ai-key-area" id="key-chatgpt">
453-
<label>OpenAI API Key</label>
454-
<div class="ai-key-row">
455-
<input class="ai-key-inp" id="inp-chatgpt" type="password" placeholder="sk-...">
456-
<button class="ai-key-save" onclick="saveKey('chatgpt')" style="border-color:#10a37f;color:#10a37f;">저장</button>
457-
</div>
458-
<div class="ai-key-status" id="status-chatgpt"></div>
429+
<!-- ★ 무료 공지 배너 -->
430+
<div style="background:#0a1a10;border:1px solid #00e89033;border-radius:6px;padding:8px 12px;margin-bottom:6px;font-size:10px;color:#00e890;display:flex;align-items:center;gap:8px;">
431+
<span style="font-size:14px;">🆓</span>
432+
<span><b>Gemini</b>는 Google 계정만 있으면 <b>무료</b>로 API 키 발급 가능합니다.</span>
459433
</div>
460434

461-
<!-- Gemini -->
462-
<div class="ai-provider-card" id="card-gemini" onclick="selectProvider('gemini')">
435+
<!-- Gemini ★ 기본값 -->
436+
<div class="ai-provider-card selected" id="card-gemini" onclick="selectProvider('gemini')">
463437
<div class="ai-prov-icon" style="background:#0a1a3a;color:#4a8fff;font-size:14px;">✦</div>
464438
<div class="ai-prov-info">
465-
<div class="ai-prov-name">Gemini</div>
466-
<div class="ai-prov-desc">Google · gemini-1.5-flash</div>
439+
<div class="ai-prov-name">Gemini <span style="font-size:9px;color:#00e890;background:#0a2a1a;padding:1px 6px;border-radius:8px;margin-left:4px;">무료</span></div>
440+
<div class="ai-prov-desc">Google · gemini-1.5-flash · 기본 추천</div>
467441
</div>
468442
<span class="ai-prov-badge need" id="badge-gemini">API 키 필요</span>
469443
</div>
470-
<div class="ai-key-area" id="key-gemini">
471-
<label>Google AI API Key</label>
444+
<div class="ai-key-area open" id="key-gemini">
445+
<div style="display:flex;align-items:center;justify-content:space-between;margin-bottom:6px;">
446+
<label style="margin:0;">Google AI API Key</label>
447+
<a href="https://aistudio.google.com/app/apikey" target="_blank"
448+
style="font-size:9.5px;color:#4a8fff;text-decoration:none;padding:2px 8px;border:1px solid #4a8fff44;border-radius:10px;background:#0a1a3a;transition:.15s;"
449+
onmouseover="this.style.background='#0a2a5a'" onmouseout="this.style.background='#0a1a3a'">
450+
🔑 무료 키 발급받기 →
451+
</a>
452+
</div>
472453
<div class="ai-key-row">
473454
<input class="ai-key-inp" id="inp-gemini" type="password" placeholder="AIza...">
474455
<button class="ai-key-save" onclick="saveKey('gemini')" style="border-color:#4a8fff;color:#4a8fff;">저장</button>
475456
</div>
476457
<div class="ai-key-status" id="status-gemini"></div>
477458
</div>
478459

479-
<!-- Grok -->
460+
<!-- Grok (무료 티어) -->
480461
<div class="ai-provider-card" id="card-grok" onclick="selectProvider('grok')">
481462
<div class="ai-prov-icon" style="background:#1a1a1a;color:#ffffff;font-size:16px;">𝕏</div>
482463
<div class="ai-prov-info">
483-
<div class="ai-prov-name">Grok</div>
484-
<div class="ai-prov-desc">xAI · grok-beta</div>
464+
<div class="ai-prov-name">Grok <span style="font-size:9px;color:#f0c000;background:#1a1a08;padding:1px 6px;border-radius:8px;margin-left:4px;">무료 티어</span></div>
465+
<div class="ai-prov-desc">xAI · grok-beta · 월 $25 크레딧 무료</div>
485466
</div>
486467
<span class="ai-prov-badge need" id="badge-grok">API 키 필요</span>
487468
</div>
488469
<div class="ai-key-area" id="key-grok">
489-
<label>xAI API Key</label>
470+
<div style="display:flex;align-items:center;justify-content:space-between;margin-bottom:6px;">
471+
<label style="margin:0;">xAI API Key</label>
472+
<a href="https://console.x.ai/" target="_blank"
473+
style="font-size:9.5px;color:#888;text-decoration:none;padding:2px 8px;border:1px solid #44444444;border-radius:10px;background:#1a1a1a;transition:.15s;"
474+
onmouseover="this.style.background='#2a2a2a'" onmouseout="this.style.background='#1a1a1a'">
475+
🔑 키 발급받기 →
476+
</a>
477+
</div>
490478
<div class="ai-key-row">
491479
<input class="ai-key-inp" id="inp-grok" type="password" placeholder="xai-...">
492480
<button class="ai-key-save" onclick="saveKey('grok')" style="border-color:#fff;color:#fff;">저장</button>
493481
</div>
494482
<div class="ai-key-status" id="status-grok"></div>
495483
</div>
496484

485+
<!-- Claude (유료) -->
486+
<div class="ai-provider-card" id="card-claude" onclick="selectProvider('claude')">
487+
<div class="ai-prov-icon" style="background:#1a0a30;color:#cc88ff;">C</div>
488+
<div class="ai-prov-info">
489+
<div class="ai-prov-name">Claude <span style="font-size:9px;color:#ff6b35;background:#2a1008;padding:1px 6px;border-radius:8px;margin-left:4px;">유료</span></div>
490+
<div class="ai-prov-desc">Anthropic · claude-haiku-4-5 · $5~ 충전</div>
491+
</div>
492+
<span class="ai-prov-badge need" id="badge-claude">API 키 필요</span>
493+
</div>
494+
<div class="ai-key-area" id="key-claude">
495+
<div style="display:flex;align-items:center;justify-content:space-between;margin-bottom:6px;">
496+
<label style="margin:0;">Anthropic API Key</label>
497+
<a href="https://console.anthropic.com/settings/keys" target="_blank"
498+
style="font-size:9.5px;color:#cc88ff;text-decoration:none;padding:2px 8px;border:1px solid #aa55ff44;border-radius:10px;background:#1a0a30;transition:.15s;"
499+
onmouseover="this.style.background='#2a1040'" onmouseout="this.style.background='#1a0a30'">
500+
🔑 키 발급받기 →
501+
</a>
502+
</div>
503+
<div class="ai-key-row">
504+
<input class="ai-key-inp" id="inp-claude" type="password" placeholder="sk-ant-...">
505+
<button class="ai-key-save" onclick="saveKey('claude')">저장</button>
506+
</div>
507+
<div class="ai-key-status" id="status-claude"></div>
508+
</div>
509+
510+
<!-- ChatGPT (유료) -->
511+
<div class="ai-provider-card" id="card-chatgpt" onclick="selectProvider('chatgpt')">
512+
<div class="ai-prov-icon" style="background:#0a2a1a;color:#10a37f;font-size:14px;font-weight:900;">GPT</div>
513+
<div class="ai-prov-info">
514+
<div class="ai-prov-name">ChatGPT <span style="font-size:9px;color:#ff6b35;background:#2a1008;padding:1px 6px;border-radius:8px;margin-left:4px;">유료</span></div>
515+
<div class="ai-prov-desc">OpenAI · gpt-4o-mini · $5~ 충전</div>
516+
</div>
517+
<span class="ai-prov-badge need" id="badge-chatgpt">API 키 필요</span>
518+
</div>
519+
<div class="ai-key-area" id="key-chatgpt">
520+
<div style="display:flex;align-items:center;justify-content:space-between;margin-bottom:6px;">
521+
<label style="margin:0;">OpenAI API Key</label>
522+
<a href="https://platform.openai.com/api-keys" target="_blank"
523+
style="font-size:9.5px;color:#10a37f;text-decoration:none;padding:2px 8px;border:1px solid #10a37f44;border-radius:10px;background:#0a2a1a;transition:.15s;"
524+
onmouseover="this.style.background='#0a3a2a'" onmouseout="this.style.background='#0a2a1a'">
525+
🔑 키 발급받기 →
526+
</a>
527+
</div>
528+
<div class="ai-key-row">
529+
<input class="ai-key-inp" id="inp-chatgpt" type="password" placeholder="sk-...">
530+
<button class="ai-key-save" onclick="saveKey('chatgpt')" style="border-color:#10a37f;color:#10a37f;">저장</button>
531+
</div>
532+
<div class="ai-key-status" id="status-chatgpt"></div>
533+
</div>
534+
497535
<!-- 기타 -->
498536
<div class="ai-provider-card" id="card-custom" onclick="selectProvider('custom')">
499537
<div class="ai-prov-icon" style="background:#1a1510;color:#ff9900;font-size:20px;">⚙</div>
500538
<div class="ai-prov-info">
501539
<div class="ai-prov-name">기타 AI</div>
502-
<div class="ai-prov-desc">이름 + API Key 직접 입력</div>
540+
<div class="ai-prov-desc">이름 + API Key 직접 입력 (OpenAI 호환)</div>
503541
</div>
504542
<span class="ai-prov-badge need" id="badge-custom">미설정</span>
505543
</div>
@@ -519,6 +557,12 @@ <h3>🤖 AI 어시스턴트 선택</h3>
519557
</div>
520558
<div class="ai-key-status" id="status-custom"></div>
521559
</div>
560+
561+
<!-- ⚠ 면책 공지 -->
562+
<div style="margin-top:10px;padding:8px 12px;background:#0a0e18;border:1px solid var(--b1);border-radius:6px;font-size:9.5px;color:var(--dim);line-height:1.6;text-align:center;">
563+
⚠ API 발급 비용은 Kcode와 무관합니다.<br>
564+
각 AI 서비스의 요금 정책은 해당 회사 기준을 따릅니다.
565+
</div>
522566
</div>
523567

524568
<div class="ai-modal-footer">
@@ -743,18 +787,18 @@ <h3>🤖 AI 어시스턴트 선택</h3>
743787
{t:'sys',s:'──────────────────────────────────────────────────'},
744788
];
745789
let cliHist=[...CLI_INIT],cmdHist=[],hIdx=-1;
746-
let aiMessages=[{role:'bot',text:'안녕하세요! Kcode 개발을 도와드리는 K-AI입니다.\n블록 코딩이나 .han 문법에 대해 무엇이든 물어보세요 😊',time:''}];
790+
let aiMessages=[{role:'bot',text:'안녕하세요! Kcode 개발을 도와드리는 K-AI입니다.\n현재 Gemini (무료) 모드입니다.\n우측 상단 버튼에서 AI를 변경하거나\nAPI 키를 입력해 실제 AI와 대화하세요 😊',time:''}];
747791

748792
/* ── AI 상태 ── */
749793
const AI_PROVIDERS={
750-
claude: {name:'Claude', color:'#cc88ff', dot:'#aa55ff', model:'claude-haiku-4-5-20251001'},
751-
chatgpt:{name:'ChatGPT', color:'#10a37f', dot:'#10a37f', model:'gpt-4o-mini'},
752794
gemini: {name:'Gemini', color:'#4a8fff', dot:'#4a8fff', model:'gemini-1.5-flash'},
753795
grok: {name:'Grok', color:'#ffffff', dot:'#888888', model:'grok-beta'},
796+
claude: {name:'Claude', color:'#cc88ff', dot:'#aa55ff', model:'claude-haiku-4-5-20251001'},
797+
chatgpt:{name:'ChatGPT', color:'#10a37f', dot:'#10a37f', model:'gpt-4o-mini'},
754798
custom: {name:'기타 AI', color:'#ff9900', dot:'#ff9900', model:''},
755799
};
756-
let activeProvider='claude';
757-
let pendingProvider='claude';
800+
let activeProvider='gemini';
801+
let pendingProvider='gemini';
758802
const AI_KEYS={}; /* 런타임 키 저장 (새로고침 시 초기화, 보안상 localStorage 미사용) */
759803

760804
/* ── 모달 열기/닫기 ── */

0 commit comments

Comments
 (0)