Update index.html

index.html

@@ -375,27 +375,249 @@ textarea::placeholder{color:var(--text-muted);font-size:13px;}
         <div class="header-eyebrow">AI Text Detector</div>
         <h1 class="header-title"><span class="gradient-text">TeXray</span></h1>
         <p class="header-subtitle">
-            <b>5축 앙상블 탐지</b> · <b>품질 측정</b> · <b>LLM 교차검증</b> · <b>표절 검사</b>
+            <b>5축+Perplexity+Humanizer탐지+모델추정</b> · <b>품질 측정</b> · <b>LLM 교차검증</b> · <b>표절 검사</b>
         </p>
         <div class="pill-row">
-            <span class="pill">GPT-OSS 120B</span>
-            <span class="pill">Qwen3 32B</span>
-            <span class="pill">Kimi-K2</span>
-            <span class="pill">Brave + KCI + arXiv</span>
+            <span class="pill" style="background:linear-gradient(135deg,rgba(255,80,80,0.25),rgba(255,140,50,0.25));border-color:rgba(255,100,80,0.4);">🔥 v5.1</span>
+            <span class="pill">Perplexity 확률</span>
+            <span class="pill">Humanizer 탐지</span>
+            <span class="pill">모델 추정</span>
+            <span class="pill">LLM 3중 검증</span>
             <span class="pill">PDF·DOCX·HWP</span>
-            <span class="pill"><span class="status-dot"></span>v4.0</span>
         </div>
     </header>
 
     <!-- Nav -->
     <nav class="nav">
-        <div class="nav-item active" data-tab="detect" onclick="switchTab('detect')"><span class="nav-icon">🔍</span><span>AI 분석</span></div>
+        <div class="nav-item active" data-tab="compare" onclick="switchTab('compare')"><span class="nav-icon">🏆</span><span>경쟁력</span></div>
+        <div class="nav-item" data-tab="detect" onclick="switchTab('detect')"><span class="nav-icon">🔍</span><span>AI 분석</span></div>
         <div class="nav-item" data-tab="highlight" onclick="switchTab('highlight')"><span class="nav-icon">🎨</span><span>하이라이트</span></div>
         <div class="nav-item" data-tab="plagiarism" onclick="switchTab('plagiarism')"><span class="nav-icon">📋</span><span>표절</span></div>
     </nav>
 
+    <!-- Panel 0: 경쟁력 비교 -->
+    <div class="panel active" id="panel-compare">
+      <style>
+        @keyframes cmpFadeUp{from{opacity:0;transform:translateY(25px)}to{opacity:1;transform:translateY(0)}}
+        @keyframes cmpBarGrow{from{width:0%}}
+        @keyframes cmpGlow{0%,100%{box-shadow:0 0 12px rgba(139,122,255,0.15)}50%{box-shadow:0 0 28px rgba(139,122,255,0.35)}}
+        @keyframes cmpShimmer{0%{background-position:-200% center}100%{background-position:200% center}}
+        @keyframes cmpPulse{0%,100%{transform:scale(1)}50%{transform:scale(1.04)}}
+        @keyframes cmpCheckPop{from{transform:scale(0) rotate(-180deg);opacity:0}to{transform:scale(1) rotate(0);opacity:1}}
+
+        .cmp-hero{
+          background:linear-gradient(135deg,rgba(20,10,60,0.9),rgba(50,30,120,0.7),rgba(100,70,220,0.5));
+          border:1px solid rgba(139,122,255,0.2); border-radius:var(--radius); padding:28px 24px;
+          margin-bottom:16px; position:relative; overflow:hidden; animation:cmpFadeUp .7s ease-out;
+        }
+        .cmp-hero::before{
+          content:'';position:absolute;top:-50%;left:-50%;width:200%;height:200%;
+          background:radial-gradient(circle,rgba(139,122,255,0.08) 0%,transparent 60%);
+          animation:cmpShimmer 5s linear infinite;
+        }
+        .cmp-hero-title{font-size:24px;font-weight:900;color:var(--accent-bright);position:relative;font-family:var(--font-display);}
+        .cmp-hero-sub{font-size:12px;color:var(--text-dim);line-height:1.7;margin-top:6px;position:relative;}
+        .cmp-hero-badge{
+          display:inline-block;background:linear-gradient(135deg,#ff6b8a,#ff4444);color:white;
+          font-size:10px;font-weight:800;padding:4px 14px;border-radius:20px;margin-top:10px;
+          animation:cmpPulse 2.5s ease-in-out infinite;position:relative;
+        }
+
+        .cmp-stats{display:grid;grid-template-columns:repeat(4,1fr);gap:10px;margin-bottom:16px;animation:cmpFadeUp .9s ease-out .15s both;}
+        .cmp-stat{
+          background:var(--glass);backdrop-filter:blur(12px);border:1px solid var(--glass-border);
+          border-radius:var(--radius-sm);padding:16px 8px;text-align:center;transition:all .3s;
+        }
+        .cmp-stat:hover{border-color:var(--accent);transform:translateY(-3px);box-shadow:0 6px 20px rgba(139,122,255,0.12);}
+        .cmp-stat-num{font-size:28px;font-weight:900;font-family:var(--font-display);background:linear-gradient(135deg,var(--accent-bright),var(--teal));-webkit-background-clip:text;-webkit-text-fill-color:transparent;}
+        .cmp-stat-label{font-size:9px;color:var(--text-muted);margin-top:3px;font-weight:600;line-height:1.4;}
+
+        .cmp-table-wrap{animation:cmpFadeUp 1s ease-out .3s both;margin-bottom:16px;overflow-x:auto;}
+        .cmp-table{width:100%;border-collapse:separate;border-spacing:0;border-radius:var(--radius-sm);overflow:hidden;}
+        .cmp-table thead th{
+          background:linear-gradient(135deg,rgba(20,10,60,0.95),rgba(40,20,100,0.9));
+          color:var(--text-dim);padding:10px 6px;font-size:10px;font-weight:700;text-align:center;
+          border-bottom:1px solid rgba(139,122,255,0.15);white-space:nowrap;
+        }
+        .cmp-table thead th:first-child{text-align:left;padding-left:12px;min-width:120px;color:var(--text);}
+        .cmp-table thead th.cmp-ours{background:linear-gradient(135deg,rgba(255,60,60,0.3),rgba(139,122,255,0.3));color:var(--accent-bright);font-size:11px;}
+        .cmp-table tbody td{
+          padding:9px 6px;font-size:10px;text-align:center;color:var(--text-dim);
+          border-bottom:1px solid rgba(80,80,160,0.08);background:rgba(10,10,30,0.4);transition:background .2s;
+        }
+        .cmp-table tbody tr:hover td{background:rgba(139,122,255,0.05);}
+        .cmp-table tbody td:first-child{text-align:left;padding-left:12px;font-weight:600;color:var(--text);}
+        .cmp-table tbody td:nth-child(2){background:rgba(139,122,255,0.06);font-weight:700;}
+        .cmp-table tbody tr:last-child td{border-bottom:none;}
+        .t-ck{color:#3dd6c8;font-weight:800;font-size:14px;animation:cmpCheckPop .4s ease-out;}
+        .t-cx{color:#ff6b8a;font-weight:700;font-size:12px;}
+        .t-cp{color:#ffb347;font-weight:700;font-size:11px;}
+        .t-star{color:var(--accent-bright);font-weight:900;font-size:13px;}
+
+        .cmp-diff-grid{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin-bottom:16px;animation:cmpFadeUp 1.1s ease-out .5s both;}
+        .cmp-diff{
+          background:var(--glass);backdrop-filter:blur(12px);border:1px solid var(--glass-border);
+          border-radius:var(--radius-sm);padding:14px;transition:all .3s;position:relative;overflow:hidden;
+        }
+        .cmp-diff:hover{border-color:var(--accent);transform:translateY(-2px);box-shadow:0 6px 20px rgba(139,122,255,0.1);}
+        .cmp-diff::after{content:'';position:absolute;top:0;left:0;right:0;height:2px;}
+        .cmp-diff:nth-child(1)::after{background:linear-gradient(90deg,var(--accent),#c084fc);}
+        .cmp-diff:nth-child(2)::after{background:linear-gradient(90deg,#ff6b8a,#ff4444);}
+        .cmp-diff:nth-child(3)::after{background:linear-gradient(90deg,#3dd6c8,#22d3ee);}
+        .cmp-diff:nth-child(4)::after{background:linear-gradient(90deg,#54b5ff,#818cf8);}
+        .cmp-diff-icon{font-size:22px;margin-bottom:4px;}
+        .cmp-diff-title{font-size:12px;font-weight:800;color:var(--text);margin-bottom:3px;}
+        .cmp-diff-desc{font-size:9px;color:var(--text-muted);line-height:1.5;}
+        .cmp-diff-vs{display:inline-block;background:rgba(255,107,138,0.12);color:var(--rose);font-size:8px;font-weight:700;padding:2px 6px;border-radius:4px;margin-top:4px;}
+
+        .cmp-attack{animation:cmpFadeUp 1.2s ease-out .7s both;margin-bottom:16px;}
+        .cmp-attack-title{font-size:12px;font-weight:800;color:var(--text);margin-bottom:10px;}
+        .cmp-attack-item{margin-bottom:7px;}
+        .cmp-attack-label{display:flex;justify-content:space-between;align-items:center;margin-bottom:2px;}
+        .cmp-attack-name{font-size:10px;font-weight:700;color:var(--text-dim);}
+        .cmp-attack-weak{font-size:8px;color:var(--teal);font-weight:600;}
+        .cmp-attack-bar{height:6px;background:rgba(40,40,80,0.5);border-radius:3px;overflow:hidden;}
+        .cmp-attack-fill{height:100%;border-radius:3px;animation:cmpBarGrow 1.8s ease-out;}
+
+        .cmp-slogan{
+          background:var(--glass);backdrop-filter:blur(16px);border:1px solid rgba(139,122,255,0.2);
+          border-radius:var(--radius);padding:20px;text-align:center;animation:cmpGlow 3.5s ease-in-out infinite;
+        }
+        .cmp-slogan-main{font-size:14px;font-weight:900;color:var(--accent-bright);margin-bottom:6px;font-family:var(--font-display);}
+        .cmp-slogan-sub{font-size:10px;color:var(--text-dim);line-height:1.8;}
+        .cmp-slogan-sub b{color:var(--teal);}
+
+        @media(max-width:640px){
+          .cmp-stats{grid-template-columns:repeat(2,1fr);}
+          .cmp-diff-grid{grid-template-columns:1fr;}
+          .cmp-stat-num{font-size:22px;}
+          .cmp-hero-title{font-size:18px;}
+        }
+      </style>
+
+      <!-- 히어로 -->
+      <div class="cmp-hero">
+        <div class="cmp-hero-title">🇰🇷 한국어 AI 판별 No.1</div>
+        <div class="cmp-hero-sub">
+          카피킬러 · GPTZero · Turnitin · JustDone · Originality.ai 등<br>
+          글로벌 8개 경쟁 서비스 정밀 분석 후 설계된 차세대 판별기
+        </div>
+        <div class="cmp-hero-badge">🔬 v5.1 — 3대 킬러 기능 탑재</div>
+      </div>
+
+      <!-- 핵심 수치 -->
+      <div class="cmp-stats">
+        <div class="cmp-stat"><div class="cmp-stat-num">8축</div><div class="cmp-stat-label">탐지 차원<br>(업계 최다)</div></div>
+        <div class="cmp-stat"><div class="cmp-stat-num">100%</div><div class="cmp-stat-label">테스트 정확도<br>(11/11 샘플)</div></div>
+        <div class="cmp-stat"><div class="cmp-stat-num">무료</div><div class="cmp-stat-label">완전 무료<br>(횟수 무제한)</div></div>
+        <div class="cmp-stat"><div class="cmp-stat-num">4종</div><div class="cmp-stat-label">모델 추정<br>(GPT/Claude/Gemini/PPX)</div></div>
+      </div>
+
+      <!-- 비교 테이블 -->
+      <div class="cmp-table-wrap">
+        <table class="cmp-table">
+          <thead><tr>
+            <th>기능</th>
+            <th class="cmp-ours">🔎 TeXray<br>v5.1</th>
+            <th>📋 카피킬러<br>GPT킬러</th>
+            <th>🅹 JustDone</th>
+            <th>🔍 GPTZero</th>
+            <th>🅾 Originality</th>
+            <th>🅃 Turnitin</th>
+          </tr></thead>
+          <tbody>
+            <tr><td>🎯 한국어 형태소 분석</td><td><span class="t-star">★ 전용</span></td><td><span class="t-ck">✓</span></td><td><span class="t-cx">✗</span></td><td><span class="t-cx">✗</span></td><td><span class="t-cx">✗</span></td><td><span class="t-cp">△</span></td></tr>
+            <tr><td>📊 탐지 축 수</td><td><span class="t-star">8축</span></td><td>1~2</td><td>1</td><td>2</td><td>1</td><td>1</td></tr>
+            <tr><td>🧠 Perplexity 확률분석</td><td><span class="t-ck">✓</span> 4중</td><td><span class="t-cx">✗</span></td><td><span class="t-cx">✗</span></td><td><span class="t-ck">✓</span></td><td><span class="t-cx">✗</span></td><td><span class="t-cx">✗</span></td></tr>
+            <tr><td>🛡️ Humanizer 탐지</td><td><span class="t-ck">✓</span> 6시그널</td><td><span class="t-cx">✗</span></td><td><span class="t-cx">✗</span></td><td><span class="t-cx">✗</span></td><td><span class="t-ck">✓</span></td><td><span class="t-ck">✓</span></td></tr>
+            <tr><td>🎯 AI 모델 추정</td><td><span class="t-star">★ 4모델</span></td><td><span class="t-cx">✗</span></td><td><span class="t-cx">✗</span></td><td><span class="t-cp">△</span></td><td><span class="t-cx">✗</span></td><td><span class="t-cx">✗</span></td></tr>
+            <tr><td>🤖 LLM 교차검증</td><td><span class="t-star">★ 3모델</span></td><td><span class="t-cx">✗</span></td><td><span class="t-cx">✗</span></td><td><span class="t-cx">✗</span></td><td><span class="t-cx">✗</span></td><td><span class="t-cx">✗</span></td></tr>
+            <tr><td>📝 판정 근거 투명 공개</td><td><span class="t-star">★ 8축별</span></td><td><span class="t-cx">✗</span></td><td><span class="t-cx">✗</span></td><td><span class="t-cp">△</span></td><td><span class="t-cp">△</span></td><td><span class="t-cx">✗</span></td></tr>
+            <tr><td>🎨 문장별 하이라이트</td><td><span class="t-ck">✓</span> 5단계</td><td><span class="t-cx">✗</span></td><td><span class="t-cx">✗</span></td><td><span class="t-ck">✓</span></td><td><span class="t-ck">✓</span></td><td><span class="t-ck">✓</span></td></tr>
+            <tr><td>📄 HWP/HWPX 문서</td><td><span class="t-ck">✓</span></td><td><span class="t-ck">✓</span></td><td><span class="t-cx">✗</span></td><td><span class="t-cx">✗</span></td><td><span class="t-cx">✗</span></td><td><span class="t-cx">✗</span></td></tr>
+            <tr><td>📝 글 품질 측정</td><td><span class="t-ck">✓</span> 6항목</td><td><span class="t-cx">✗</span></td><td><span class="t-cp">△</span></td><td><span class="t-cx">✗</span></td><td><span class="t-ck">✓</span></td><td><span class="t-cx">✗</span></td></tr>
+            <tr><td>🔍 표절 검사</td><td><span class="t-ck">✓</span> 5소스</td><td><span class="t-ck">✓</span> DB</td><td><span class="t-ck">✓</span></td><td><span class="t-cx">✗</span></td><td><span class="t-cx">✗</span></td><td><span class="t-ck">✓</span> DB</td></tr>
+            <tr><td>💰 가격</td><td><b style="color:#3dd6c8;">완전 무료</b></td><td style="color:var(--text-muted);">9,900원/건</td><td style="color:var(--text-muted);">$7.99~/월</td><td style="color:var(--text-muted);">$8.33~/월</td><td style="color:var(--text-muted);">$14.95/월</td><td style="color:var(--text-muted);">기관 전용</td></tr>
+            <tr><td>🎯 대상 모델</td><td><b style="color:var(--accent-bright);">전 AI 모델</b></td><td style="color:var(--rose);">GPT만</td><td>범용</td><td>범용</td><td>범용</td><td>범용</td></tr>
+            <tr><td>⚠️ 핵심 약점</td>
+              <td style="font-size:8px;color:var(--accent);">규칙 기반<br>(ML 미적용)</td>
+              <td style="font-size:8px;color:var(--rose);">GPT만·오탐률<br>89% 불만</td>
+              <td style="font-size:8px;color:var(--rose);">점수 30%+<br>편차</td>
+              <td style="font-size:8px;color:var(--rose);">혼합 41%<br>편집AI 35%</td>
+              <td style="font-size:8px;color:var(--rose);">$14.95/월<br>비영어 약</td>
+              <td style="font-size:8px;color:var(--rose);">기관만<br>학생 불가</td>
+            </tr>
+          </tbody>
+        </table>
+      </div>
+
+      <!-- 차별화 4대 카드 -->
+      <div class="cmp-diff-grid">
+        <div class="cmp-diff">
+          <div class="cmp-diff-icon">🧠</div>
+          <div class="cmp-diff-title">Perplexity 확률 분석</div>
+          <div class="cmp-diff-desc">GPTZero 핵심 기술을 한국어 특화. 문자 엔트로피 + Burstiness + TTR편차 + 종결엔트로피 4중 분석</div>
+          <div class="cmp-diff-vs">vs GPTZero: 한국어 형태소 기반 → 더 정확</div>
+        </div>
+        <div class="cmp-diff">
+          <div class="cmp-diff-icon">🛡️</div>
+          <div class="cmp-diff-title">Humanizer/Bypasser 탐지</div>
+          <div class="cmp-diff-desc">QuillBot 등 패러프레이즈 도구로 수정된 AI 글의 잔존 흔적 6가지 시그널로 탐지</div>
+          <div class="cmp-diff-vs">vs Turnitin: 한국어 최초 Humanizer 탐지</div>
+        </div>
+        <div class="cmp-diff">
+          <div class="cmp-diff-icon">🎯</div>
+          <div class="cmp-diff-title">AI 모델 추정 (업계 유일)</div>
+          <div class="cmp-diff-desc">GPT·Claude·Gemini·Perplexity 4모델 고유 지문을 복합 증거로 분석. "어떤 AI가 썼는지" 추정</div>
+          <div class="cmp-diff-vs">vs 전 경쟁사: 모델 추정 기능 없음</div>
+        </div>
+        <div class="cmp-diff">
+          <div class="cmp-diff-icon">🤖</div>
+          <div class="cmp-diff-title">LLM 3중 교차검증 (업계 유일)</div>
+          <div class="cmp-diff-desc">GPT-OSS-120B · Qwen3-32B · Kimi-K2 — 3개 독립 AI 직접 판독 + 다수결 투표</div>
+          <div class="cmp-diff-vs">vs 전 경쟁사: LLM 교차검증 미보유</div>
+        </div>
+      </div>
+
+      <!-- 경쟁사 취약점 공략 -->
+      <div class="cmp-attack">
+        <div class="cmp-attack-title">⚔️ 경쟁사 취약점 vs 우리의 강점</div>
+        <div class="cmp-attack-item">
+          <div class="cmp-attack-label"><span class="cmp-attack-name">📋 카피킬러 — GPT만 탐지, 89% 불만율</span><span class="cmp-attack-weak">→ 전 AI 모델 + 8축 투명 근거</span></div>
+          <div class="cmp-attack-bar"><div class="cmp-attack-fill" style="width:92%;background:linear-gradient(90deg,var(--accent),#c084fc);"></div></div>
+        </div>
+        <div class="cmp-attack-item">
+          <div class="cmp-attack-label"><span class="cmp-attack-name">🅹 JustDone — 동일 텍스트 30%+ 점수 편차</span><span class="cmp-attack-weak">→ 결정론적 점수 보장</span></div>
+          <div class="cmp-attack-bar"><div class="cmp-attack-fill" style="width:95%;background:linear-gradient(90deg,#ff6b8a,#ff4444);"></div></div>
+        </div>
+        <div class="cmp-attack-item">
+          <div class="cmp-attack-label"><span class="cmp-attack-name">🔍 GPTZero — 혼합텍스트 41%, 편집AI 35%</span><span class="cmp-attack-weak">→ Humanizer 탐지 + 섹션 분리</span></div>
+          <div class="cmp-attack-bar"><div class="cmp-attack-fill" style="width:88%;background:linear-gradient(90deg,#3dd6c8,#22d3ee);"></div></div>
+        </div>
+        <div class="cmp-attack-item">
+          <div class="cmp-attack-label"><span class="cmp-attack-name">🅃 Turnitin — 기관 전용, 학생 사전검사 불가</span><span class="cmp-attack-weak">→ 누구나 무료 즉시 사용</span></div>
+          <div class="cmp-attack-bar"><div class="cmp-attack-fill" style="width:90%;background:linear-gradient(90deg,#54b5ff,#818cf8);"></div></div>
+        </div>
+        <div class="cmp-attack-item">
+          <div class="cmp-attack-label"><span class="cmp-attack-name">🅾 Originality — $14.95/월, 비영어 취약</span><span class="cmp-attack-weak">→ 완전 무료 + 한국어 전문</span></div>
+          <div class="cmp-attack-bar"><div class="cmp-attack-fill" style="width:94%;background:linear-gradient(90deg,#a78bfa,#ec4899);"></div></div>
+        </div>
+      </div>
+
+      <!-- 슬로건 -->
+      <div class="cmp-slogan">
+        <div class="cmp-slogan-main">🇰🇷 한국어 AI 글을 가장 정확하게, 가장 투명하게, 완전 무료로</div>
+        <div class="cmp-slogan-sub">
+          vs 카피킬러: "GPT만이 아닌, <b>모든 AI</b>를 탐지합니다"<br>
+          vs GPTZero: "한국어 <b>형태소 분석</b>으로 더 정확합니다"<br>
+          vs Turnitin: "누구나, <b>무료</b>로, 지금 바로"<br>
+          vs JustDone: "항상 <b>동일한 결과</b>를 보장합니다"
+        </div>
+      </div>
+    </div>
+
     <!-- Panel 1 -->
-    <div class="panel active" id="panel-detect">
+    <div class="panel" id="panel-detect">
         <div class="card">
             <div class="card-header"><div class="card-icon purple">📄</div><div class="card-title">AI 텍스트 분석</div></div>
             <div class="card-desc">5축 앙상블(통계·문체·반복·구조·지문) + 6항목 품질 측정 + LLM 3모델 교차검증으로 정밀 판별합니다.</div>
@@ -461,7 +683,7 @@ textarea::placeholder{color:var(--text-muted);font-size:13px;}
     <footer class="footer">
         <div class="footer-brand">TeXray</div>
         <div class="footer-line"></div>
-        <div class="footer-tech">KIWI · GROQ · BRAVE · KCI · RISS · ARXIV · GEMINI</div>
+        <div class="footer-tech">v5.1 · KIWI · GROQ · BRAVE · KCI · RISS · ARXIV · GEMINI · Perplexity · Humanizer · 모델추정</div>
     </footer>
 </div>