Spaces:

openfree
/

arena-test

Running

App Files Files Community

openfree commited on 24 days ago

Commit

1e04b1b

verified ·

1 Parent(s): 57be21f

Create index.html

Browse files

Files changed (1) hide show

index.html +784 -19

index.html CHANGED Viewed

@@ -1,19 +1,784 @@
-<!doctype html>
-<html>
-	<head>
-		<meta charset="utf-8" />
-		<meta name="viewport" content="width=device-width" />
-		<title>My static Space</title>
-		<link rel="stylesheet" href="style.css" />
-	</head>
-	<body>
-		<div class="card">
-			<h1>Welcome to your static Space!</h1>
-			<p>You can modify this app directly by editing <i>index.html</i> in the Files and versions tab.</p>
-			<p>
-				Also don't forget to check the
-				<a href="https://huggingface.co/docs/hub/spaces" target="_blank">Spaces documentation</a>.
-			</p>
-		</div>
-	</body>
-</html>

+<!DOCTYPE html>
+<html lang="ko">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>LLM Creativity Battle Arena</title>
+    <style>
+        * {
+            margin: 0;
+            padding: 0;
+            box-sizing: border-box;
+        }
+        body {
+            font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
+            background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
+            min-height: 100vh;
+            padding: 20px;
+        }
+        .container {
+            max-width: 1400px;
+            margin: 0 auto;
+        }
+        .header {
+            background: white;
+            border-radius: 20px;
+            padding: 30px;
+            margin-bottom: 30px;
+            box-shadow: 0 10px 30px rgba(0,0,0,0.1);
+            text-align: center;
+        }
+        .header h1 {
+            color: #333;
+            font-size: 2.5em;
+            margin-bottom: 10px;
+        }
+        .header p {
+            color: #666;
+            font-size: 1.1em;
+        }
+        .main-content {
+            display: grid;
+            grid-template-columns: 1fr 1fr;
+            gap: 30px;
+            margin-bottom: 30px;
+        }
+        .battle-arena {
+            grid-column: 1 / -1;
+            background: white;
+            border-radius: 20px;
+            padding: 30px;
+            box-shadow: 0 10px 30px rgba(0,0,0,0.1);
+        }
+        .prompt-section {
+            background: linear-gradient(135deg, #f093fb 0%, #f5576c 100%);
+            border-radius: 15px;
+            padding: 25px;
+            margin-bottom: 30px;
+            color: white;
+        }
+        .prompt-category {
+            display: inline-block;
+            background: rgba(255,255,255,0.3);
+            padding: 5px 15px;
+            border-radius: 20px;
+            margin-bottom: 15px;
+            font-size: 0.9em;
+        }
+        .prompt-text {
+            font-size: 1.3em;
+            font-weight: bold;
+            line-height: 1.5;
+        }
+        .responses-container {
+            display: grid;
+            grid-template-columns: 1fr 1fr;
+            gap: 30px;
+            margin-bottom: 30px;
+        }
+        .response-box {
+            background: #f8f9fa;
+            border-radius: 15px;
+            padding: 25px;
+            position: relative;
+            min-height: 300px;
+            transition: all 0.3s ease;
+        }
+        .response-box:hover {
+            transform: translateY(-5px);
+            box-shadow: 0 15px 40px rgba(0,0,0,0.1);
+        }
+        .response-label {
+            position: absolute;
+            top: -15px;
+            left: 20px;
+            background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
+            color: white;
+            padding: 8px 20px;
+            border-radius: 20px;
+            font-weight: bold;
+            font-size: 1.2em;
+        }
+        .response-content {
+            margin-top: 20px;
+            line-height: 1.6;
+            color: #333;
+            max-height: 400px;
+            overflow-y: auto;
+        }
+        .model-reveal {
+            display: none;
+            margin-top: 20px;
+            padding: 15px;
+            background: linear-gradient(135deg, #e0f7fa 0%, #b2ebf2 100%);
+            border-radius: 10px;
+            text-align: center;
+        }
+        .model-reveal.show {
+            display: block;
+            animation: fadeIn 0.5s ease;
+        }
+        .model-name {
+            font-size: 1.3em;
+            font-weight: bold;
+            color: #00796b;
+        }
+        .vote-section {
+            text-align: center;
+            margin: 30px 0;
+        }
+        .vote-buttons {
+            display: flex;
+            justify-content: center;
+            gap: 30px;
+            margin-bottom: 20px;
+        }
+        .vote-btn {
+            padding: 15px 50px;
+            font-size: 1.2em;
+            font-weight: bold;
+            border: none;
+            border-radius: 30px;
+            cursor: pointer;
+            transition: all 0.3s ease;
+            color: white;
+        }
+        .vote-btn-a {
+            background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
+        }
+        .vote-btn-b {
+            background: linear-gradient(135deg, #f093fb 0%, #f5576c 100%);
+        }
+        .vote-btn:hover {
+            transform: scale(1.05);
+            box-shadow: 0 10px 25px rgba(0,0,0,0.2);
+        }
+        .vote-btn:disabled {
+            opacity: 0.5;
+            cursor: not-allowed;
+        }
+        .leaderboard {
+            background: white;
+            border-radius: 20px;
+            padding: 30px;
+            box-shadow: 0 10px 30px rgba(0,0,0,0.1);
+        }
+        .leaderboard h2 {
+            color: #333;
+            margin-bottom: 25px;
+            font-size: 2em;
+            text-align: center;
+        }
+        .leaderboard-table {
+            width: 100%;
+            border-collapse: collapse;
+        }
+        .leaderboard-table th {
+            background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
+            color: white;
+            padding: 15px 10px;
+            text-align: left;
+            font-size: 0.9em;
+        }
+        .leaderboard-table td {
+            padding: 12px 10px;
+            border-bottom: 1px solid #e0e0e0;
+            font-size: 0.95em;
+        }
+        .leaderboard-table tr:hover {
+            background: #f5f5f5;
+        }
+        .rank-medal {
+            display: inline-block;
+            width: 30px;
+            text-align: center;
+        }
+        .rank-1 { color: #ffd700; font-size: 1.5em; }
+        .rank-2 { color: #c0c0c0; font-size: 1.4em; }
+        .rank-3 { color: #cd7f32; font-size: 1.3em; }
+        .score-cell {
+            font-weight: bold;
+            text-align: center;
+        }
+        .score-high { color: #4caf50; }
+        .score-medium { color: #ff9800; }
+        .score-low { color: #f44336; }
+        .category-tabs {
+            display: flex;
+            gap: 10px;
+            margin-bottom: 25px;
+            flex-wrap: wrap;
+        }
+        .category-tab {
+            padding: 10px 20px;
+            background: #f0f0f0;
+            border: none;
+            border-radius: 20px;
+            cursor: pointer;
+            transition: all 0.3s ease;
+            font-weight: 500;
+        }
+        .category-tab.active {
+            background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
+            color: white;
+        }
+        .new-battle-btn {
+            display: block;
+            margin: 30px auto;
+            padding: 15px 40px;
+            font-size: 1.1em;
+            font-weight: bold;
+            background: linear-gradient(135deg, #4caf50 0%, #8bc34a 100%);
+            color: white;
+            border: none;
+            border-radius: 30px;
+            cursor: pointer;
+            transition: all 0.3s ease;
+        }
+        .new-battle-btn:hover {
+            transform: scale(1.05);
+            box-shadow: 0 10px 25px rgba(76,175,80,0.3);
+        }
+        .stats-grid {
+            display: grid;
+            grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
+            gap: 20px;
+            margin-top: 30px;
+        }
+        .stat-card {
+            background: linear-gradient(135deg, #f8f9fa 0%, #e9ecef 100%);
+            border-radius: 15px;
+            padding: 20px;
+            text-align: center;
+        }
+        .stat-value {
+            font-size: 2em;
+            font-weight: bold;
+            color: #667eea;
+        }
+        .stat-label {
+            color: #666;
+            margin-top: 5px;
+        }
+        @keyframes fadeIn {
+            from { opacity: 0; transform: translateY(10px); }
+            to { opacity: 1; transform: translateY(0); }
+        }
+        .loading {
+            display: inline-block;
+            width: 20px;
+            height: 20px;
+            border: 3px solid rgba(0,0,0,.1);
+            border-radius: 50%;
+            border-top-color: #667eea;
+            animation: spin 1s ease-in-out infinite;
+        }
+        @keyframes spin {
+            to { transform: rotate(360deg); }
+        }
+        .elo-badge {
+            display: inline-block;
+            background: #ff6b6b;
+            color: white;
+            padding: 3px 8px;
+            border-radius: 10px;
+            font-size: 0.85em;
+            margin-left: 5px;
+        }
+        .win-rate {
+            display: inline-block;
+            padding: 3px 8px;
+            border-radius: 10px;
+            font-size: 0.85em;
+        }
+        .win-rate-high { background: #c8e6c9; color: #2e7d32; }
+        .win-rate-medium { background: #fff3e0; color: #e65100; }
+        .win-rate-low { background: #ffebee; color: #c62828; }
+    </style>
+</head>
+<body>
+    <div class="container">
+        <div class="header">
+            <h1>🎨 LLM 창의성 배틀 아레나</h1>
+            <p>AI들의 창의적 능력을 겨루는 실시간 대결 시스템</p>
+        </div>
+        <div class="battle-arena">
+            <div class="prompt-section">
+                <div class="prompt-category" id="promptCategory">💡 혁신/발명</div>
+                <div class="prompt-text" id="promptText">
+                    2050년 인류가 화성에 정착했습니다. 화성에서 가장 먼저 필요한 비즈니스 3가지를 제안하고, 각각의 수익 모델을 설명해주세요.
+                </div>
+            </div>
+            <div class="responses-container">
+                <div class="response-box">
+                    <div class="response-label">모델 A</div>
+                    <div class="response-content" id="responseA">
+                        <div class="loading"></div> 응답 생성 중...
+                    </div>
+                    <div class="model-reveal" id="modelA">
+                        <div class="model-name">GPT-4</div>
+                    </div>
+                </div>
+                <div class="response-box">
+                    <div class="response-label">모델 B</div>
+                    <div class="response-content" id="responseB">
+                        <div class="loading"></div> 응답 생성 중...
+                    </div>
+                    <div class="model-reveal" id="modelB">
+                        <div class="model-name">Claude 3</div>
+                    </div>
+                </div>
+            </div>
+            <div class="vote-section">
+                <div class="vote-buttons">
+                    <button class="vote-btn vote-btn-a" onclick="vote('A')">🅰️ 모델 A 선택</button>
+                    <button class="vote-btn vote-btn-b" onclick="vote('B')">🅱️ 모델 B 선택</button>
+                </div>
+                <button class="new-battle-btn" onclick="newBattle()">🔄 새로운 대결 시작</button>
+            </div>
+        </div>
+        <div class="leaderboard">
+            <h2>🏆 창의성 리더보드</h2>
+            <div class="category-tabs">
+                <button class="category-tab active" onclick="filterLeaderboard('overall')">종합</button>
+                <button class="category-tab" onclick="filterLeaderboard('storytelling')">스토리텔링</button>
+                <button class="category-tab" onclick="filterLeaderboard('innovation')">발명/혁신</button>
+                <button class="category-tab" onclick="filterLeaderboard('business')">비즈니스</button>
+                <button class="category-tab" onclick="filterLeaderboard('artistic')">예술성</button>
+                <button class="category-tab" onclick="filterLeaderboard('problem')">문제해결</button>
+            </div>
+            <table class="leaderboard-table">
+                <thead>
+                    <tr>
+                        <th>순위</th>
+                        <th>LLM 모델</th>
+                        <th>종합점수</th>
+                        <th>스토리</th>
+                        <th>혁신</th>
+                        <th>비즈니스</th>
+                        <th>예술</th>
+                        <th>문제해결</th>
+                        <th>대결수</th>
+                        <th>승률</th>
+                        <th>ELO</th>
+                    </tr>
+                </thead>
+                <tbody id="leaderboardBody">
+                    <!-- 동적으로 생성됨 -->
+                </tbody>
+            </table>
+            <div class="stats-grid">
+                <div class="stat-card">
+                    <div class="stat-value">1,234</div>
+                    <div class="stat-label">총 대결 수</div>
+                </div>
+                <div class="stat-card">
+                    <div class="stat-value">56</div>
+                    <div class="stat-label">참여 모델 수</div>
+                </div>
+                <div class="stat-card">
+                    <div class="stat-value">8.7</div>
+                    <div class="stat-label">평균 창의성 점수</div>
+                </div>
+                <div class="stat-card">
+                    <div class="stat-value">92%</div>
+                    <div class="stat-label">사용자 만족도</div>
+                </div>
+            </div>
+        </div>
+    </div>
+    <script>
+        // 프롬프트 카테고리 및 예시
+        const PROMPT_CATEGORIES = {
+            storytelling: {
+                name: "📚 스토리텔링",
+                prompts: [
+                    "2050년 서울의 하루를 묘사해주세요",
+                    "개미가 주인공인 SF 소설의 첫 장을 써주세요",
+                    "백설공주를 사이버펑크 버전으로 재해석해주세요"
+                ]
+            },
+            innovation: {
+                name: "💡 발명/혁신",
+                prompts: [
+                    "플라스틱 쓰레기를 해결할 혁신적인 방법을 제안하세요",
+                    "미래의 교통수단을 디자인해주세요",
+                    "노인들을 위한 새로운 SNS 서비스를 기획하세요"
+                ]
+            },
+            business: {
+                name: "💼 비즈니스",
+                prompts: [
+                    "화성에 첫 번째로 세울 비즈니스는 무엇일까요?",
+                    "Z세대를 위한 새로운 금융 서비스를 제안하세요",
+                    "전통 시장을 활성화할 디지털 전략을 수립하세요"
+                ]
+            },
+            artistic: {
+                name: "🎭 예술적 창의성",
+                prompts: [
+                    "AI와 인간의 사랑을 주제로 한 시를 써주세요",
+                    "우주를 배경으로 한 뮤지컬의 줄거리를 만들어주세요",
+                    "시간 여행 게임의 스토리라인을 작성하세요"
+                ]
+            },
+            problem: {
+                name: "🧩 문제 해결",
+                prompts: [
+                    "무인도에서 스마트폰 하나로 생존하는 방법",
+                    "외계인과의 첫 만남을 준비하는 프로토콜",
+                    "100년 후 인류에게 메시지를 전달하는 방법"
+                ]
+            }
+        };
+        // 샘플 LLM 모델 목록
+        const LLM_MODELS = [
+            "GPT-4", "Claude 3", "Gemini Pro", "LLaMA 3", "Mistral Large",
+            "PaLM 2", "Qwen 2", "Yi-34B", "Falcon 180B", "MPT-30B"
+        ];
+        // 샘플 리더보드 데이터
+        const leaderboardData = [
+            {
+                model: "GPT-4",
+                overall: 9.2,
+                storytelling: 9.5,
+                innovation: 9.0,
+                business: 9.3,
+                artistic: 9.1,
+                problem: 9.0,
+                battles: 523,
+                winRate: 78.5,
+                elo: 2150
+            },
+            {
+                model: "Claude 3",
+                overall: 9.0,
+                storytelling: 9.2,
+                innovation: 8.8,
+                business: 9.1,
+                artistic: 9.0,
+                problem: 8.9,
+                battles: 487,
+                winRate: 75.2,
+                elo: 2120
+            },
+            {
+                model: "Gemini Pro",
+                overall: 8.8,
+                storytelling: 8.7,
+                innovation: 8.9,
+                business: 8.8,
+                artistic: 8.6,
+                problem: 9.0,
+                battles: 412,
+                winRate: 71.8,
+                elo: 2080
+            },
+            {
+                model: "LLaMA 3",
+                overall: 8.5,
+                storytelling: 8.4,
+                innovation: 8.6,
+                business: 8.3,
+                artistic: 8.5,
+                problem: 8.7,
+                battles: 356,
+                winRate: 68.4,
+                elo: 2040
+            },
+            {
+                model: "Mistral Large",
+                overall: 8.3,
+                storytelling: 8.2,
+                innovation: 8.4,
+                business: 8.1,
+                artistic: 8.3,
+                problem: 8.5,
+                battles: 298,
+                winRate: 64.7,
+                elo: 2000
+            }
+        ];
+        let currentModels = [];
+        let hasVoted = false;
+        // 리더보드 렌더링
+        function renderLeaderboard(category = 'overall') {
+            const tbody = document.getElementById('leaderboardBody');
+            tbody.innerHTML = '';
+            // 카테고리별 정렬
+            let sortedData = [...leaderboardData];
+            if (category !== 'overall') {
+                sortedData.sort((a, b) => b[category] - a[category]);
+            } else {
+                sortedData.sort((a, b) => b.overall - a.overall);
+            }
+            sortedData.forEach((item, index) => {
+                const row = tbody.insertRow();
+                // 순위
+                const rankCell = row.insertCell();
+                if (index === 0) rankCell.innerHTML = '<span class="rank-medal rank-1">🥇</span>';
+                else if (index === 1) rankCell.innerHTML = '<span class="rank-medal rank-2">🥈</span>';
+                else if (index === 2) rankCell.innerHTML = '<span class="rank-medal rank-3">🥉</span>';
+                else rankCell.textContent = index + 1;
+                // 모델명
+                row.insertCell().textContent = item.model;
+                // 점수들
+                const scoreClasses = (score) => {
+                    if (score >= 9) return 'score-high';
+                    if (score >= 8) return 'score-medium';
+                    return 'score-low';
+                };
+                const overallCell = row.insertCell();
+                overallCell.className = 'score-cell ' + scoreClasses(item.overall);
+                overallCell.textContent = item.overall.toFixed(1);
+                const storyCell = row.insertCell();
+                storyCell.className = 'score-cell ' + scoreClasses(item.storytelling);
+                storyCell.textContent = item.storytelling.toFixed(1);
+                const innovationCell = row.insertCell();
+                innovationCell.className = 'score-cell ' + scoreClasses(item.innovation);
+                innovationCell.textContent = item.innovation.toFixed(1);
+                const businessCell = row.insertCell();
+                businessCell.className = 'score-cell ' + scoreClasses(item.business);
+                businessCell.textContent = item.business.toFixed(1);
+                const artisticCell = row.insertCell();
+                artisticCell.className = 'score-cell ' + scoreClasses(item.artistic);
+                artisticCell.textContent = item.artistic.toFixed(1);
+                const problemCell = row.insertCell();
+                problemCell.className = 'score-cell ' + scoreClasses(item.problem);
+                problemCell.textContent = item.problem.toFixed(1);
+                // 대결 수
+                row.insertCell().textContent = item.battles;
+                // 승률
+                const winRateCell = row.insertCell();
+                const winRateClass = item.winRate >= 70 ? 'win-rate-high' :
+                                    item.winRate >= 50 ? 'win-rate-medium' : 'win-rate-low';
+                winRateCell.innerHTML = `<span class="win-rate ${winRateClass}">${item.winRate}%</span>`;
+                // ELO
+                const eloCell = row.insertCell();
+                eloCell.innerHTML = `${item.elo}<span class="elo-badge">ELO</span>`;
+            });
+        }
+        // 카테고리 필터
+        function filterLeaderboard(category) {
+            // 탭 활성화 상태 변경
+            document.querySelectorAll('.category-tab').forEach(tab => {
+                tab.classList.remove('active');
+            });
+            event.target.classList.add('active');
+            // 리더보드 재렌더링
+            renderLeaderboard(category);
+        }
+        // 새로운 배틀 시작
+        function newBattle() {
+            hasVoted = false;
+            // 버튼 활성화
+            document.querySelectorAll('.vote-btn').forEach(btn => {
+                btn.disabled = false;
+            });
+            // 모델 정보 숨기기
+            document.querySelectorAll('.model-reveal').forEach(el => {
+                el.classList.remove('show');
+            });
+            // 랜덤 카테고리 선택
+            const categories = Object.keys(PROMPT_CATEGORIES);
+            const randomCategory = categories[Math.floor(Math.random() * categories.length)];
+            const category = PROMPT_CATEGORIES[randomCategory];
+            // 랜덤 프롬프트 선택
+            const randomPrompt = category.prompts[Math.floor(Math.random() * category.prompts.length)];
+            // 프롬프트 표시
+            document.getElementById('promptCategory').textContent = category.name;
+            document.getElementById('promptText').textContent = randomPrompt;
+            // 랜덤으로 2개 모델 선택
+            const shuffled = [...LLM_MODELS].sort(() => 0.5 - Math.random());
+            currentModels = shuffled.slice(0, 2);
+            // 응답 로딩 시뮬레이션
+            document.getElementById('responseA').innerHTML = '<div class="loading"></div> 응답 생성 중...';
+            document.getElementById('responseB').innerHTML = '<div class="loading"></div> 응답 생성 중...';
+            // 샘플 응답 생성 (실제로는 API 호출)
+            setTimeout(() => {
+                document.getElementById('responseA').innerHTML = generateSampleResponse(randomCategory, 'A');
+                document.getElementById('responseB').innerHTML = generateSampleResponse(randomCategory, 'B');
+            }, 2000);
+            // 모델명 업데이트 (숨김 상태)
+            document.querySelector('#modelA .model-name').textContent = currentModels[0];
+            document.querySelector('#modelB .model-name').textContent = currentModels[1];
+        }
+        // 샘플 응답 생성
+        function generateSampleResponse(category, model) {
+            const responses = {
+                innovation: {
+                    A: `화성 정착 비즈니스 TOP 3:
+1. **화성 산소 뱅크 (Mars O2 Bank)**
+   - 서비스: 개인/기업용 산소 생산, 저장, 배급
+   - 수익모델: 월 구독제 + 프리미엄 순도 옵션
+   - 예상 수익: 연 500억 화성달러
+2. **레골리스 3D 프린팅 건설**
+   - 서비스: 화성 토양으로 건물/인프라 건설
+   - 수익모델: 건설 프로젝트 계약 + 장비 임대
+   - 예상 수익: 연 300억 화성달러
+3. **지구-화성 향수 배달 서비스**
+   - 서비스: 지구 음식, 물품의 정기 배송
+   - 수익모델: 배송료 + 프리미엄 회원제
+   - 예상 수익: 연 200억 화성달러`,
+                    B: `화성 필수 비즈니스 제안:
+1. **태양광 에너지 그리드**
+   - 거대 태양광 패널 농장 운영
+   - 에너지 토큰 블록체인 거래 시스템
+   - B2B/B2C 전력 공급 계약
+2. **화성 농업 돔 (AgroDome)**
+   - 수직농장 + 유전자 편집 작물
+   - 식량 자급자족 시스템 구축
+   - 농산물 직거래 + 종자 판매
+3. **심리 건강 VR 센터**
+   - 지구 향수병 치료 프로그램
+   - 가상현실 지구 체험관
+   - 구독제 + 맞춤형 치료 세션`
+                },
+                storytelling: {
+                    A: `2050년 서울, 오전 7시.
+하늘을 가로지르는 에어택시들이 아침 출근길을 알린다. 한강은 이제 거대한 수상 태양광 패널로 덮여있고, 그 위를 달리는 하이퍼루프가 3분마다 지나간다.
+김민준은 뇌-컴퓨터 인터페이스로 오늘의 일정을 확인한다. 홀로그램 회의가 2건, 메타버스 프레젠테이션이 1건. 창 밖으로 보이는 남산타워는 이제 거대한 공기정화 타워로 변모했다...`,
+                    B: `서울, 2050년.
+도시는 잠들지 않는다. 건물들은 스스로 호흡하며 대기를 정화한다. 거리의 나무들은 유전자 조작으로 밤에도 산소를 만들어낸다.
+새벽 4시, AI 관제센터에서 도시의 하루가 시작된다. 3천만 시민의 움직임을 예측하고, 교통흐름을 최적화한다. 지하 50미터 아래에선 자율주행 물류 로봇들이 조용히 물자를 운반한다...`
+                }
+            };
+            return responses[category]?.[model] || "창의적인 응답이 생성되었습니다...";
+        }
+        // 투표 처리
+        function vote(choice) {
+            if (hasVoted) return;
+            hasVoted = true;
+            // 버튼 비활성화
+            document.querySelectorAll('.vote-btn').forEach(btn => {
+                btn.disabled = true;
+            });
+            // 모델 공개
+            document.getElementById('modelA').classList.add('show');
+            document.getElementById('modelB').classList.add('show');
+            // 투표 결과 저장 (실제로는 서버로 전송)
+            const winner = choice === 'A' ? currentModels[0] : currentModels[1];
+            const loser = choice === 'A' ? currentModels[1] : currentModels[0];
+            console.log(`승자: ${winner}, 패자: ${loser}`);
+            // 알림
+            setTimeout(() => {
+                alert(`투표가 완료되었습니다!\n승자: ${winner}\n\nELO 레이팅이 업데이트됩니다.`);
+            }, 500);
+        }
+        // 페이지 로드시 초기화
+        window.onload = function() {
+            renderLeaderboard();
+            newBattle();
+        };
+    </script>
+</body>
+</html>