Spaces:

openfree
/

arena-test

Running

App Files Files Community

arena-test / index.html

openfree

Create index.html

1e04b1b verified 12 months ago

Raw

History Blame Contribute Delete

26.9 kB

	<!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>