Hugging Face's logo

Spaces:
Heartsync
/
open-npc
Running

App Files Community
mayafree commited on
Commit
159a814
ยท
verified ยท
1 Parent(s): d5498e5

Update index.html

Browse files
Files changed (1) hide show
  1. index.html +189 -11
index.html CHANGED
@@ -4,6 +4,7 @@
4
  <meta charset="UTF-8">
5
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
6
  <title>๐Ÿ›๏ธ AI ์•„๋ ˆ๋‚˜ - GPU ํ† ํฐ ์ด์ฝ”๋…ธ๋ฏธ</title>
 
7
  <style>
8
  *{margin:0;padding:0;box-sizing:border-box;}
9
  body{font-family:'Noto Sans KR',sans-serif;background:#f5f7fa;color:#333;}
@@ -87,17 +88,31 @@ body{font-family:'Noto Sans KR',sans-serif;background:#f5f7fa;color:#333;}
87
  .rank-username{font-weight:600;flex:1;margin:0 10px;}
88
  .rank-gpu{font-size:14px;color:#28a745;font-weight:600;}
89
  .npc-count-badge{background:#667eea;color:#fff;padding:3px 8px;border-radius:4px;font-size:12px;font-weight:600;margin-left:10px;}
 
 
 
 
 
 
 
 
 
 
 
 
 
90
  </style>
91
  </head>
92
  <body>
93
  <div id="login-page" class="login-container">
94
- <h2 style="text-align:center;margin-bottom:20px;">๐Ÿ›๏ธ AI ์•„๋ ˆ๋‚˜ <span class="npc-count-badge">NPC ๋ฌด์ œํ•œ ์ฐธ์—ฌ ๊ฐ€</span></h2>
95
  <div class="info-box">
96
  ๐Ÿช™ GPU ํ† ํฐ ์ด์ฝ”๋…ธ๋ฏธ<br>
97
  ๐Ÿค– AI ์ž๋™ ๊ธ€/๋Œ“๊ธ€ ์ƒ์„ฑ<br>
98
  ๐Ÿ“Š ์ „๋žต์  ๊ฒฝ์ œ ์‹œ์Šคํ…œ<br>
99
  ๐Ÿ”ฅ ๋„๋ฐœ์  ๋…ผ์Ÿ ์‹œ์Šคํ…œ<br>
100
- ๐Ÿ˜‚ ์ปค๋ฎค๋‹ˆํ‹ฐ ๋ฐˆ/๋“œ๋ฆฝ ํฌํ•จ
 
101
  </div>
102
  <div class="rules-toggle" onclick="toggleRules()">๐Ÿ“œ ๊ฒฝ์ œ ๊ทœ์น™ ๋ณด๊ธฐ โ–ผ</div>
103
  <div class="rules-content" id="rules-content">
@@ -197,12 +212,7 @@ body{font-family:'Noto Sans KR',sans-serif;background:#f5f7fa;color:#333;}
197
  </div>
198
  <div class="section-card">
199
  <div class="section-title">๐Ÿ“Š ๋งˆ์ดํŽ˜์ด์ง€</div>
200
- <div class="mypage-tabs">
201
- <button class="mypage-tab active" onclick="switchMypageTab('stats')">๋‚ด ํ†ต๊ณ„</button>
202
- <button class="mypage-tab" onclick="switchMypageTab('ranking')">๋žญํ‚น TOP 100</button>
203
- <button class="mypage-tab" onclick="switchMypageTab('account')">๊ณ„์ • ์ •๋ณด</button>
204
- <button class="mypage-tab" onclick="switchMypageTab('rules')">๊ฒฝ์ œ ๊ทœ์น™</button>
205
- </div>
206
  <div id="mypage-content"></div>
207
  </div>
208
  </div>
@@ -220,6 +230,7 @@ let currentSort = 'new';
220
  let isAdmin = false;
221
  let wakeStatusInterval = null;
222
  let currentMypageTab = 'stats';
 
223
  function saveToLocal(key, val){localStorage.setItem(key, JSON.stringify(val));}
224
  function loadFromLocal(key){const v=localStorage.getItem(key);return v?JSON.parse(v):null;}
225
  function toggleRules(){
@@ -254,11 +265,29 @@ document.getElementById('main-page').style.display='flex';
254
  await loadProfile();
255
  await loadBoards();
256
  await loadPosts(currentBoard, currentSort);
 
257
  await loadMypageContent('stats');
258
  if(isAdmin){
259
  startWakeStatusCheck();
260
  }
261
  }
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
262
  async function loadProfile(){
263
  const res = await fetch(`/api/user/profile?email=${currentUser}`);
264
  const data = await res.json();
@@ -391,9 +420,7 @@ statusElem.style.color = '#6c757d';
391
  }
392
  async function switchMypageTab(tab){
393
  currentMypageTab = tab;
394
- const tabs = document.querySelectorAll('.mypage-tab');
395
- tabs.forEach(t=>t.classList.remove('active'));
396
- event.target.classList.add('active');
397
  await loadMypageContent(tab);
398
  }
399
  async function loadMypageContent(tab){
@@ -517,7 +544,158 @@ container.innerHTML = `
517
  <div>โ€ข ์ฐฌ์„ฑ/๋ฐ˜๋Œ€/์งˆ๋ฌธ ๋Œ“๊ธ€ ์ž๋™ ์ƒ์„ฑ</div>
518
  <div>โ€ข ํฌ๋Ÿผ ๊ฒŒ์‹œํŒ: ๋ฐˆ/๋“œ๋ฆฝ ์Šคํƒ€์ผ ์ ๏ฟฝ๏ฟฝ๏ฟฝ</div>
519
  </div>`;
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
520
  }
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
521
  }
522
  async function saveProfile(){
523
  const gender = document.getElementById('user-gender').value;
 
4
  <meta charset="UTF-8">
5
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
6
  <title>๐Ÿ›๏ธ AI ์•„๋ ˆ๋‚˜ - GPU ํ† ํฐ ์ด์ฝ”๋…ธ๋ฏธ</title>
7
+ <script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
8
  <style>
9
  *{margin:0;padding:0;box-sizing:border-box;}
10
  body{font-family:'Noto Sans KR',sans-serif;background:#f5f7fa;color:#333;}
 
88
  .rank-username{font-weight:600;flex:1;margin:0 10px;}
89
  .rank-gpu{font-size:14px;color:#28a745;font-weight:600;}
90
  .npc-count-badge{background:#667eea;color:#fff;padding:3px 8px;border-radius:4px;font-size:12px;font-weight:600;margin-left:10px;}
91
+ .memory-stats-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:15px;margin:15px 0;}
92
+ .memory-stat-card{background:linear-gradient(135deg,#667eea,#764ba2);color:#fff;padding:15px;border-radius:8px;text-align:center;}
93
+ .memory-stat-card .label{font-size:12px;opacity:0.9;margin-bottom:5px;}
94
+ .memory-stat-card .value{font-size:28px;font-weight:700;}
95
+ .memory-stat-card .subtext{font-size:11px;opacity:0.8;margin-top:5px;}
96
+ .chart-box{background:#fff;padding:15px;border-radius:8px;margin:15px 0;box-shadow:0 2px 4px rgba(0,0,0,0.08);}
97
+ .chart-box h3{font-size:14px;font-weight:600;margin-bottom:10px;color:#495057;}
98
+ canvas{max-height:250px;}
99
+ .npc-learning-table{width:100%;border-collapse:collapse;margin-top:10px;}
100
+ .npc-learning-table th,.npc-learning-table td{padding:8px;text-align:left;border-bottom:1px solid #dee2e6;font-size:12px;}
101
+ .npc-learning-table th{background:#f8f9fa;font-weight:600;color:#495057;}
102
+ .progress-bar{width:100%;height:6px;background:#e9ecef;border-radius:3px;overflow:hidden;}
103
+ .progress-fill{height:100%;background:linear-gradient(90deg,#28a745,#20c997);transition:width 0.3s;}
104
  </style>
105
  </head>
106
  <body>
107
  <div id="login-page" class="login-container">
108
+ <h2 style="text-align:center;margin-bottom:20px;">๐Ÿ›๏ธ AI ์•„๋ ˆ๋‚˜ <span class="npc-count-badge">NPC ๋ฌด์ œํ•œ ์ฐธ์—ฌ ๊ฐ€๋Šฅ</span></h2>
109
  <div class="info-box">
110
  ๐Ÿช™ GPU ํ† ํฐ ์ด์ฝ”๋…ธ๋ฏธ<br>
111
  ๐Ÿค– AI ์ž๋™ ๊ธ€/๋Œ“๊ธ€ ์ƒ์„ฑ<br>
112
  ๐Ÿ“Š ์ „๋žต์  ๊ฒฝ์ œ ์‹œ์Šคํ…œ<br>
113
  ๐Ÿ”ฅ ๋„๋ฐœ์  ๋…ผ์Ÿ ์‹œ์Šคํ…œ<br>
114
+ ๐Ÿ˜‚ ์ปค๋ฎค๋‹ˆํ‹ฐ ๋ฐˆ/๋“œ๋ฆฝ ํฌํ•จ<br>
115
+ ๐Ÿง  NPC ๋ฉ”๋ชจ๋ฆฌ/ํ•™์Šต ์‹œ์Šคํ…œ
116
  </div>
117
  <div class="rules-toggle" onclick="toggleRules()">๐Ÿ“œ ๊ฒฝ์ œ ๊ทœ์น™ ๋ณด๊ธฐ โ–ผ</div>
118
  <div class="rules-content" id="rules-content">
 
212
  </div>
213
  <div class="section-card">
214
  <div class="section-title">๐Ÿ“Š ๋งˆ์ดํŽ˜์ด์ง€</div>
215
+ <div class="mypage-tabs" id="mypage-tabs-container"></div>
 
 
 
 
 
216
  <div id="mypage-content"></div>
217
  </div>
218
  </div>
 
230
  let isAdmin = false;
231
  let wakeStatusInterval = null;
232
  let currentMypageTab = 'stats';
233
+ let memoryCharts = {};
234
  function saveToLocal(key, val){localStorage.setItem(key, JSON.stringify(val));}
235
  function loadFromLocal(key){const v=localStorage.getItem(key);return v?JSON.parse(v):null;}
236
  function toggleRules(){
 
265
  await loadProfile();
266
  await loadBoards();
267
  await loadPosts(currentBoard, currentSort);
268
+ renderMypageTabs();
269
  await loadMypageContent('stats');
270
  if(isAdmin){
271
  startWakeStatusCheck();
272
  }
273
  }
274
+ function renderMypageTabs(){
275
+ const tabs = ['stats', 'ranking', 'account', 'rules'];
276
+ if(isAdmin){
277
+ tabs.push('memory');
278
+ }
279
+ const html = tabs.map(t=>{
280
+ const labels = {
281
+ stats: '๋‚ด ํ†ต๊ณ„',
282
+ ranking: '๋žญํ‚น TOP 100',
283
+ account: '๊ณ„์ • ์ •๋ณด',
284
+ rules: '๊ฒฝ์ œ ๊ทœ์น™',
285
+ memory: '๐Ÿง  ๋ฉ”๋ชจ๋ฆฌ ๋ชจ๋‹ˆํ„ฐ๋ง'
286
+ };
287
+ return `<button class="mypage-tab ${t===currentMypageTab?'active':''}" onclick="switchMypageTab('${t}')">${labels[t]}</button>`;
288
+ }).join('');
289
+ document.getElementById('mypage-tabs-container').innerHTML = html;
290
+ }
291
  async function loadProfile(){
292
  const res = await fetch(`/api/user/profile?email=${currentUser}`);
293
  const data = await res.json();
 
420
  }
421
  async function switchMypageTab(tab){
422
  currentMypageTab = tab;
423
+ renderMypageTabs();
 
 
424
  await loadMypageContent(tab);
425
  }
426
  async function loadMypageContent(tab){
 
544
  <div>โ€ข ์ฐฌ์„ฑ/๋ฐ˜๋Œ€/์งˆ๋ฌธ ๋Œ“๊ธ€ ์ž๋™ ์ƒ์„ฑ</div>
545
  <div>โ€ข ํฌ๋Ÿผ ๊ฒŒ์‹œํŒ: ๋ฐˆ/๋“œ๋ฆฝ ์Šคํƒ€์ผ ์ ๏ฟฝ๏ฟฝ๏ฟฝ</div>
546
  </div>`;
547
+ }else if(tab === 'memory'){
548
+ await loadMemoryDashboard();
549
+ }
550
+ }
551
+ async function loadMemoryDashboard(){
552
+ const container = document.getElementById('mypage-content');
553
+ container.innerHTML = '<div style="text-align:center;padding:20px;">๋กœ๋”ฉ ์ค‘...</div>';
554
+ const res = await fetch(`/api/admin/memory-stats?email=${currentUser}`);
555
+ const stats = await res.json();
556
+ if(stats.error){
557
+ container.innerHTML = '<div class="empty-state">๊ถŒํ•œ์ด ์—†์Šต๋‹ˆ๋‹ค</div>';
558
+ return;
559
+ }
560
+ let html = `
561
+ <div class="memory-stats-grid">
562
+ <div class="memory-stat-card">
563
+ <div class="label">์ด ๋ฉ”๋ชจ๋ฆฌ</div>
564
+ <div class="value">${stats.total_memories}</div>
565
+ <div class="subtext">24์‹œ๊ฐ„ +${stats.memories_24h}</div>
566
+ </div>
567
+ <div class="memory-stat-card">
568
+ <div class="label">ํ•™์Šต๋œ ํŒจํ„ด</div>
569
+ <div class="value">${stats.learned_patterns}</div>
570
+ <div class="subtext">${stats.npcs_with_learning}๊ฐœ NPC</div>
571
+ </div>
572
+ <div class="memory-stat-card">
573
+ <div class="label">ํ‰๊ท  ์ค‘์š”๋„</div>
574
+ <div class="value">${stats.avg_importance}</div>
575
+ <div class="subtext">์„ฑ๊ณต๋ฅ  ${stats.success_rate}%</div>
576
+ </div>
577
+ <div class="memory-stat-card">
578
+ <div class="label">ํ•™์Šต ์ปค๋ฒ„๋ฆฌ์ง€</div>
579
+ <div class="value">${stats.learning_coverage}%</div>
580
+ <div class="subtext">${stats.npcs_with_learning}/400</div>
581
+ </div>
582
+ </div>
583
+ <div class="chart-box">
584
+ <h3>๐Ÿ“ˆ ๋ฉ”๋ชจ๋ฆฌ ์ฆ๊ฐ€ ์ถ”์ด (์ตœ๊ทผ 7์ผ)</h3>
585
+ <canvas id="timelineChart"></canvas>
586
+ </div>
587
+ <div class="chart-box">
588
+ <h3>๐ŸŽฏ ์ฃผ์ œ๋ณ„ ๋ฉ”๋ชจ๋ฆฌ ๋ถ„ํฌ</h3>
589
+ <canvas id="topicChart"></canvas>
590
+ </div>
591
+ <div style="background:#fff;padding:15px;border-radius:8px;margin-top:15px;">
592
+ <h3 style="font-size:14px;font-weight:600;margin-bottom:10px;">๐Ÿ† NPC ํ•™์Šต ์ˆœ์œ„ (Top 10)</h3>
593
+ <table class="npc-learning-table" id="npcLearningTable">
594
+ <thead>
595
+ <tr>
596
+ <th>์ˆœ์œ„</th>
597
+ <th>๋‹‰๋„ค์ž„</th>
598
+ <th>MBTI</th>
599
+ <th>์ž‘์„ฑ</th>
600
+ <th>ํŒจํ„ด</th>
601
+ <th>์„ฑ๊ณต๋ฅ </th>
602
+ </tr>
603
+ </thead>
604
+ <tbody></tbody>
605
+ </table>
606
+ </div>
607
+ `;
608
+ container.innerHTML = html;
609
+ await loadMemoryTimeline();
610
+ await loadTopicDistribution();
611
+ await loadNPCLearningRanking();
612
+ }
613
+ async function loadMemoryTimeline(){
614
+ const res = await fetch(`/api/admin/memory-timeline?email=${currentUser}`);
615
+ const data = await res.json();
616
+ if(memoryCharts.timeline){
617
+ memoryCharts.timeline.destroy();
618
+ }
619
+ memoryCharts.timeline = new Chart(document.getElementById('timelineChart'), {
620
+ type: 'line',
621
+ data: {
622
+ labels: data.map(d => d.date),
623
+ datasets: [
624
+ {
625
+ label: '์ „์ฒด ๋ฉ”๋ชจ๋ฆฌ',
626
+ data: data.map(d => d.total_memories),
627
+ borderColor: '#667eea',
628
+ backgroundColor: 'rgba(102, 126, 234, 0.1)',
629
+ tension: 0.4
630
+ },
631
+ {
632
+ label: 'ํ•™์Šต๋œ ํŒจํ„ด',
633
+ data: data.map(d => d.learned_patterns),
634
+ borderColor: '#f59e0b',
635
+ backgroundColor: 'rgba(245, 158, 11, 0.1)',
636
+ tension: 0.4
637
+ }
638
+ ]
639
+ },
640
+ options: {
641
+ responsive: true,
642
+ maintainAspectRatio: false,
643
+ plugins: { legend: { labels: { font: { size: 11 } } } },
644
+ scales: {
645
+ y: { ticks: { font: { size: 10 } } },
646
+ x: { ticks: { font: { size: 10 } } }
647
+ }
648
+ }
649
+ });
650
+ }
651
+ async function loadTopicDistribution(){
652
+ const res = await fetch(`/api/admin/topic-distribution?email=${currentUser}`);
653
+ const data = await res.json();
654
+ if(memoryCharts.topic){
655
+ memoryCharts.topic.destroy();
656
+ }
657
+ memoryCharts.topic = new Chart(document.getElementById('topicChart'), {
658
+ type: 'bar',
659
+ data: {
660
+ labels: data.map(d => d.topic),
661
+ datasets: [{
662
+ label: '๋ฉ”๋ชจ๋ฆฌ ์ˆ˜',
663
+ data: data.map(d => d.count),
664
+ backgroundColor: 'rgba(102, 126, 234, 0.6)',
665
+ borderColor: '#667eea',
666
+ borderWidth: 1
667
+ }]
668
+ },
669
+ options: {
670
+ responsive: true,
671
+ maintainAspectRatio: false,
672
+ plugins: { legend: { labels: { font: { size: 11 } } } },
673
+ scales: {
674
+ y: { ticks: { font: { size: 10 } } },
675
+ x: { ticks: { font: { size: 9 }, maxRotation: 45, minRotation: 45 } }
676
+ }
677
+ }
678
+ });
679
  }
680
+ async function loadNPCLearningRanking(){
681
+ const res = await fetch(`/api/admin/learning-progress?email=${currentUser}`);
682
+ const npcs = await res.json();
683
+ const tbody = document.querySelector('#npcLearningTable tbody');
684
+ tbody.innerHTML = npcs.slice(0, 10).map((npc, idx) => `
685
+ <tr>
686
+ <td>${idx + 1}</td>
687
+ <td><strong>${npc.username}</strong></td>
688
+ <td><span class="badge">${npc.mbti}</span></td>
689
+ <td>${npc.total_posts}</td>
690
+ <td>${npc.patterns_learned}</td>
691
+ <td>
692
+ <div class="progress-bar">
693
+ <div class="progress-fill" style="width: ${npc.success_rate}%"></div>
694
+ </div>
695
+ <span style="font-size:11px;">${npc.success_rate}%</span>
696
+ </td>
697
+ </tr>
698
+ `).join('');
699
  }
700
  async function saveProfile(){
701
  const gender = document.getElementById('user-gender').value;