Spaces:

openfree
/

AI

Running

App Files Files Community

AI / index.html

openfree

Update index.html

884b12b verified 7 days ago

raw

history blame

29 kB

	<!DOCTYPE html>
	<html lang="ko">
	<head>
	<meta charset="UTF-8">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<title>HuggingFace & Replicate 실시간 트렌딩/신규 리스트</title>
	<style>
	* {
	box-sizing: border-box;
	margin: 0;
	padding: 0;
	}

	body {
	font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
	background: #f5f5f5;
	min-height: 100vh;
	padding: 20px;
	}

	.container {
	max-width: 1400px;
	margin: 0 auto;
	}

	h1 {
	text-align: center;
	color: #333;
	margin-bottom: 30px;
	font-size: 2.5rem;
	}

	.category-tabs {
	display: flex;
	gap: 10px;
	margin-bottom: 20px;
	flex-wrap: wrap;
	justify-content: center;
	}

	.tab-button {
	padding: 12px 24px;
	border: none;
	background: #fff;
	color: #666;
	border-radius: 8px;
	cursor: pointer;
	font-size: 1rem;
	transition: all 0.3s ease;
	box-shadow: 0 2px 5px rgba(0,0,0,0.1);
	}

	.tab-button:hover {
	transform: translateY(-2px);
	box-shadow: 0 4px 10px rgba(0,0,0,0.15);
	}

	.tab-button.active {
	background: linear-gradient(135deg, #667eea, #764ba2);
	color: white;
	}

	.content-section {
	display: none;
	}

	.content-section.active {
	display: block;
	}

	.filter-buttons {
	display: flex;
	gap: 10px;
	margin-bottom: 20px;
	justify-content: center;
	}

	.filter-btn {
	padding: 8px 16px;
	border: 1px solid #ddd;
	background: white;
	color: #666;
	border-radius: 20px;
	cursor: pointer;
	font-size: 0.9rem;
	transition: all 0.3s ease;
	}

	.filter-btn.active {
	background: #667eea;
	color: white;
	border-color: #667eea;
	}

	.items-grid {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
	gap: 20px;
	margin-top: 20px;
	}

	.item-card {
	background: white;
	border-radius: 12px;
	padding: 20px;
	padding-top: 30px;
	box-shadow: 0 2px 10px rgba(0,0,0,0.08);
	transition: all 0.3s ease;
	cursor: pointer;
	position: relative;
	overflow: hidden;
	}

	.item-card:hover {
	transform: translateY(-5px);
	box-shadow: 0 5px 20px rgba(0,0,0,0.15);
	}

	.item-card::before {
	content: '';
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 4px;
	background: linear-gradient(90deg, #667eea, #764ba2);
	}

	.item-header {
	display: flex;
	align-items: start;
	gap: 12px;
	margin-bottom: 12px;
	}

	.item-icon {
	width: 40px;
	height: 40px;
	background: #f0f0f0;
	border-radius: 8px;
	display: flex;
	align-items: center;
	justify-content: center;
	font-size: 1.5rem;
	}

	.item-info {
	flex: 1;
	}

	.item-title {
	font-weight: 600;
	color: #333;
	margin-bottom: 4px;
	font-size: 1.1rem;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
	}

	.item-author {
	color: #666;
	font-size: 0.9rem;
	}

	.item-stats {
	display: flex;
	gap: 15px;
	margin-top: 12px;
	font-size: 0.85rem;
	color: #666;
	}

	.stat {
	display: flex;
	align-items: center;
	gap: 5px;
	}

	.loading {
	text-align: center;
	padding: 40px;
	color: #666;
	}

	.loading-spinner {
	display: inline-block;
	width: 40px;
	height: 40px;
	border: 4px solid #f3f3f3;
	border-top: 4px solid #667eea;
	border-radius: 50%;
	animation: spin 1s linear infinite;
	}

	@keyframes spin {
	0% { transform: rotate(0deg); }
	100% { transform: rotate(360deg); }
	}

	.error {
	background: #fee;
	color: #c33;
	padding: 20px;
	border-radius: 8px;
	text-align: center;
	margin: 20px 0;
	}

	.refresh-btn {
	position: fixed;
	bottom: 30px;
	right: 30px;
	width: 60px;
	height: 60px;
	background: linear-gradient(135deg, #667eea, #764ba2);
	color: white;
	border: none;
	border-radius: 50%;
	cursor: pointer;
	font-size: 1.5rem;
	box-shadow: 0 4px 15px rgba(0,0,0,0.2);
	transition: all 0.3s ease;
	z-index: 100;
	}

	.refresh-btn:hover {
	transform: scale(1.1);
	box-shadow: 0 6px 20px rgba(0,0,0,0.3);
	}

	.note {
	background: #fef3c7;
	border: 1px solid #fbbf24;
	border-radius: 8px;
	padding: 15px;
	margin: 20px 0;
	color: #92400e;
	text-align: center;
	}

	@media (max-width: 600px) {
	.items-grid {
	grid-template-columns: 1fr;
	}

	h1 {
	font-size: 1.8rem;
	}
	}
	</style>
	</head>
	<body>
	<div class="container">
	<h1>🚀 AI 모델 트렌딩 리스트</h1>

	<div class="category-tabs">
	<button class="tab-button active" onclick="showCategory('hf-models')">
	🤗 HF Models
	</button>
	<button class="tab-button" onclick="showCategory('hf-spaces')">
	🎯 HF Spaces
	</button>
	<button class="tab-button" onclick="showCategory('replicate')">
	⚡ Replicate
	</button>
	</div>

	<!-- HuggingFace Models Section -->
	<div id="hf-models" class="content-section active">
	<div style="text-align: center; margin-bottom: 20px;">
	<h2 style="color: #667eea;">📈 Trending Models</h2>
	</div>
	<div id="hf-models-content" class="items-grid">
	<div class="loading">
	<div class="loading-spinner"></div>
	<p>모델 로딩 중...</p>
	</div>
	</div>
	</div>

	<!-- HuggingFace Spaces Section -->
	<div id="hf-spaces" class="content-section">
	<div style="text-align: center; margin-bottom: 20px;">
	<h2 style="color: #667eea;">📈 Trending Spaces</h2>
	</div>
	<div id="hf-spaces-content" class="items-grid">
	<div class="loading">
	<div class="loading-spinner"></div>
	<p>스페이스 로딩 중...</p>
	</div>
	</div>
	</div>

	<!-- Replicate Section -->
	<div id="replicate" class="content-section">
	<div class="filter-buttons">
	<button class="filter-btn active" onclick="loadReplicate('featured')">⭐ Featured Models</button>
	<button class="filter-btn" onclick="loadReplicate('official')">✅ Official Models</button>
	</div>
	<div id="replicate-content" class="items-grid">
	<div class="loading">
	<div class="loading-spinner"></div>
	<p>모델 로딩 중...</p>
	</div>
	</div>
	</div>

	<div class="note">
	⚠️ <strong>API 사용 안내:</strong><br>
	• HuggingFace API는 `likes7d`로 7일간 트렌딩을 정확히 추출합니다<br>
	• CORS 에러 발생 시 프록시 서버 사용을 권장합니다<br>
	• Replicate의 Featured/Official 모델은 공식 웹사이트에서 확인 가능합니다
	</div>

	<!-- API URLs Info -->
	<div style="margin-top: 30px; background: #f8f9fa; padding: 20px; border-radius: 10px;">
	<h3 style="margin-bottom: 15px; color: #333;">📌 API Endpoints</h3>
	<div style="display: grid; gap: 10px; font-size: 0.9rem;">
	<div><strong>HF Models (Trending):</strong> <code style="background: #e9ecef; padding: 2px 6px; border-radius: 4px;">https://huggingface.co/api/models?sort=likes7d&direction=-1&limit=30</code></div>
	<div><strong>HF Spaces (Trending):</strong> <code style="background: #e9ecef; padding: 2px 6px; border-radius: 4px;">https://huggingface.co/api/spaces?sort=likes7d&direction=-1&limit=30</code></div>
	<div style="margin-top: 10px; color: #666;">
	<strong>Note:</strong> Replicate Featured/Official 모델은 웹 페이지 스크래핑이나 인증된 API 액세스가 필요합니다.
	</div>
	</div>
	</div>
	</div>

	<button class="refresh-btn" onclick="refreshCurrent()">🔄</button>

	<script>
	let currentCategory = 'hf-models';

	// 카테고리 전환
	function showCategory(category) {
	currentCategory = category;

	// 탭 활성화
	document.querySelectorAll('.tab-button').forEach(btn => {
	btn.classList.remove('active');
	});
	event.target.classList.add('active');

	// 섹션 표시
	document.querySelectorAll('.content-section').forEach(section => {
	section.classList.remove('active');
	});
	document.getElementById(category).classList.add('active');

	// 데이터 로드
	if (category === 'hf-models') {
	loadHFModels();
	} else if (category === 'hf-spaces') {
	loadHFSpaces();
	} else if (category === 'replicate') {
	loadReplicate('featured');
	}
	}

	// HuggingFace Models 로드
	async function loadHFModels() {
	const container = document.getElementById('hf-models-content');
	container.innerHTML = '<div class="loading"><div class="loading-spinner"></div><p>모델 로딩 중...</p></div>';

	try {
	// HuggingFace API 사용 - trending (7일간 좋아요 기준)
	const apiUrl = 'https://huggingface.co/api/models?sort=likes7d&direction=-1&limit=30';

	console.log(`📡 API 호출 중: ${apiUrl}`);
	const response = await fetch(apiUrl, {
	method: 'GET',
	headers: {
	'Accept': 'application/json',
	}
	});

	if (!response.ok) throw new Error('API 요청 실패');

	const data = await response.json();
	console.log(`✅ ${data.length}개의 모델 로드 완료`);
	displayHFModels(data, container);
	} catch (error) {
	console.error('❌ API 에러:', error);
	console.log('🔄 프록시 서버를 통한 요청을 시도합니다...');
	// CORS 에러 시 프록시 사용 시도
	tryProxyRequest('models', container);
	}
	}

	// HuggingFace Spaces 로드
	async function loadHFSpaces() {
	const container = document.getElementById('hf-spaces-content');
	container.innerHTML = '<div class="loading"><div class="loading-spinner"></div><p>스페이스 로딩 중...</p></div>';

	try {
	// HuggingFace API 사용 - trending (7일간 좋아요 기준)
	const apiUrl = 'https://huggingface.co/api/spaces?sort=likes7d&direction=-1&limit=30';

	console.log(`📡 API 호출 중: ${apiUrl}`);
	const response = await fetch(apiUrl, {
	method: 'GET',
	headers: {
	'Accept': 'application/json',
	}
	});

	if (!response.ok) throw new Error('API 요청 실패');

	const data = await response.json();
	console.log(`✅ ${data.length}개의 스페이스 로드 완료`);
	displayHFSpaces(data, container);
	} catch (error) {
	console.error('❌ API 에러:', error);
	console.log('🔄 프록시 서버를 통한 요청을 시도합니다...');
	// CORS 에러 시 프록시 사용 시도
	tryProxyRequest('spaces', container);
	}
	}

	// 프록시를 통한 요청 시도
	async function tryProxyRequest(type, container) {
	try {
	console.log('🔄 프록시를 통한 요청 시도 중...');
	// 공개 CORS 프록시 사용 (예: cors-anywhere)
	const proxyUrl = 'https://api.allorigins.win/raw?url=';
	let targetUrl;

	if (type === 'models') {
	targetUrl = 'https://huggingface.co/api/models?sort=likes7d&direction=-1&limit=30';
	} else {
	targetUrl = 'https://huggingface.co/api/spaces?sort=likes7d&direction=-1&limit=30';
	}

	console.log(`📡 프록시 URL: ${proxyUrl + encodeURIComponent(targetUrl)}`);
	const response = await fetch(proxyUrl + encodeURIComponent(targetUrl));
	const data = await response.json();

	console.log(`✅ 프록시를 통해 ${data.length}개의 데이터 로드 완료`);
	if (type === 'models') {
	displayHFModels(data, container);
	} else {
	displayHFSpaces(data, container);
	}
	} catch (error) {
	console.error('❌ 프록시 요청도 실패:', error);
	console.log('📌 샘플 데이터를 표시합니다.');
	// 모든 시도 실패 시 샘플 데이터 표시
	if (type === 'models') {
	displaySampleHFModels(container);
	} else {
	displaySampleHFSpaces(container);
	}
	}
	}

	// Replicate 모델 로드
	async function loadReplicate(type) {
	const currentType = type \|\| 'featured';

	// 필터 버튼 활성화
	document.querySelectorAll('#replicate .filter-btn').forEach(btn => {
	btn.classList.remove('active');
	});
	if (event && event.target) {
	event.target.classList.add('active');
	} else {
	document.querySelector('#replicate .filter-btn').classList.add('active');
	}

	console.log(`🚀 Replicate ${currentType} 모델 로드 시작`);
	const container = document.getElementById('replicate-content');
	container.innerHTML = '<div class="loading"><div class="loading-spinner"></div><p>모델 로딩 중...</p></div>';

	// Replicate는 공개 API가 제한적이므로 샘플 데이터 표시
	console.log(`ℹ️ Replicate ${currentType} 모델 샘플 데이터를 표시합니다.`);
	displaySampleReplicateModels(container, currentType);
	}

	// HuggingFace Models 표시
	function displayHFModels(models, container) {
	container.innerHTML = '';
	models.forEach((model, index) => {
	const card = createModelCard({
	rank: index + 1,
	title: model.id?.split('/')[1] \|\| model.modelId \|\| 'Unknown',
	author: model.id?.split('/')[0] \|\| model.author \|\| 'Unknown',
	likes: model.likes \|\| 0,
	downloads: model.downloads \|\| 0,
	tags: model.tags \|\| [],
	pipeline_tag: model.pipeline_tag \|\| '',
	url: `https://huggingface.co/${model.id \|\| model.modelId}`,
	icon: '🤖',
	updated: model.lastModified \|\| model.created_at
	});
	container.appendChild(card);
	});
	}

	// HuggingFace Spaces 표시
	function displayHFSpaces(spaces, container) {
	container.innerHTML = '';
	spaces.forEach((space, index) => {
	const card = createModelCard({
	rank: index + 1,
	title: space.id?.split('/')[1] \|\| 'Unknown',
	author: space.id?.split('/')[0] \|\| 'Unknown',
	likes: space.likes \|\| 0,
	sdk: space.sdk \|\| 'Unknown',
	emoji: space.emoji \|\| '🎯',
	url: `https://huggingface.co/spaces/${space.id}`,
	icon: space.emoji \|\| '🎯',
	hardware: space.hardware \|\| 'CPU',
	updated: space.lastModified \|\| space.created_at
	});
	container.appendChild(card);
	});
	}

	// 모델 카드 생성
	function createModelCard(data) {
	const card = document.createElement('div');
	card.className = 'item-card';
	card.onclick = () => window.open(data.url, '_blank');

	// 순위에 따른 색상
	let rankColor = '#999';
	if (data.rank === 1) rankColor = '#FFD700';
	else if (data.rank === 2) rankColor = '#C0C0C0';
	else if (data.rank === 3) rankColor = '#CD7F32';
	else if (data.rank <= 10) rankColor = '#667eea';

	card.innerHTML = `
	<div class="rank-badge" style="position: absolute; top: 10px; right: 10px; background: ${rankColor}; color: white; width: 30px; height: 30px; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-weight: bold; font-size: 0.9rem;">
	${data.rank}
	</div>
	${data.badge ? `<div style="position: absolute; top: 10px; left: 10px; background: rgba(0,0,0,0.7); color: white; padding: 4px 8px; border-radius: 4px; font-size: 0.75rem;">${data.badge}</div>` : ''}
	<div class="item-header">
	<div class="item-icon">${data.icon}</div>
	<div class="item-info">
	<div class="item-title">${data.title}</div>
	<div class="item-author">by ${data.author}</div>
	</div>
	</div>
	<div class="item-stats">
	${data.likes !== undefined ? `<div class="stat">❤️ ${formatNumber(data.likes)}</div>` : ''}
	${data.downloads !== undefined ? `<div class="stat">⬇️ ${formatNumber(data.downloads)}</div>` : ''}
	${data.sdk ? `<div class="stat">🛠️ ${data.sdk}</div>` : ''}
	${data.hardware ? `<div class="stat">💻 ${data.hardware}</div>` : ''}
	${data.pipeline_tag ? `<div class="stat">🏷️ ${data.pipeline_tag}</div>` : ''}
	${data.runs !== undefined ? `<div class="stat">▶️ ${formatNumber(data.runs)}</div>` : ''}
	</div>
	${data.tags && data.tags.length > 0 ? `
	<div style="margin-top: 10px; display: flex; flex-wrap: wrap; gap: 5px;">
	${data.tags.slice(0, 3).map(tag => `<span style="background: #f0f0f0; padding: 2px 8px; border-radius: 12px; font-size: 0.75rem; color: #666;">${tag}</span>`).join('')}
	</div>
	` : ''}
	`;

	return card;
	}

	// 숫자 포맷
	function formatNumber(num) {
	if (num >= 1000000) return (num / 1000000).toFixed(1) + 'M';
	if (num >= 1000) return (num / 1000).toFixed(1) + 'K';
	return num.toString();
	}

	// 샘플 데이터 표시 함수들
	function displaySampleHFModels(container) {
	console.log(`📌 트렌딩 모델 샘플 데이터를 표시합니다.`);
	const sampleData = [
	{ rank: 1, title: 'Llama-3.3-70B-Instruct', author: 'meta-llama', likes: 177000, downloads: 1150000, icon: '🤖', pipeline_tag: 'text-generation', tags: ['llama', '70b', 'instruct'] },
	{ rank: 2, title: 'DeepSeek-R1-Distill-Qwen-32B', author: 'deepseek-ai', likes: 10400, downloads: 567000, icon: '🤖', pipeline_tag: 'text-generation', tags: ['deepseek', 'reasoning'] },
	{ rank: 3, title: 'Qwen3-235B-A22B', author: 'Qwen', likes: 5370, downloads: 225000, icon: '🤖', pipeline_tag: 'text-generation', tags: ['qwen', 'large'] },
	{ rank: 4, title: 'FLUX.1-dev', author: 'black-forest-labs', likes: 29100, downloads: 397000, icon: '🤖', pipeline_tag: 'text-to-image', tags: ['flux', 'diffusion'] },
	{ rank: 5, title: 'Phi-4', author: 'microsoft', likes: 8900, downloads: 156000, icon: '🤖', pipeline_tag: 'text-generation', tags: ['phi', 'small'] },
	{ rank: 6, title: 'stable-diffusion-3.5-large', author: 'stabilityai', likes: 7650, downloads: 234000, icon: '🤖', pipeline_tag: 'text-to-image', tags: ['sd3', 'large'] },
	{ rank: 7, title: 'whisper-large-v3-turbo', author: 'openai', likes: 6780, downloads: 189000, icon: '🤖', pipeline_tag: 'automatic-speech-recognition', tags: ['whisper', 'asr'] },
	{ rank: 8, title: 'MusicGen-Stereo-Melody', author: 'facebook', likes: 5430, downloads: 98000, icon: '🤖', pipeline_tag: 'text-to-audio', tags: ['music', 'generation'] },
	{ rank: 9, title: 'Florence-2-large', author: 'microsoft', likes: 4890, downloads: 87000, icon: '🤖', pipeline_tag: 'image-text-to-text', tags: ['vision', 'florence'] },
	{ rank: 10, title: 'QwQ-32B-Preview', author: 'Qwen', likes: 4560, downloads: 76000, icon: '🤖', pipeline_tag: 'text-generation', tags: ['reasoning', 'cot'] }
	];

	container.innerHTML = '';
	sampleData.forEach(model => {
	model.url = `https://huggingface.co/${model.author}/${model.title}`;
	container.appendChild(createModelCard(model));
	});
	}

	function displaySampleHFSpaces(container) {
	console.log(`📌 트렌딩 스페이스 샘플 데이터를 표시합니다.`);
	const sampleData = [
	{ rank: 1, title: 'stable-diffusion-webui', author: 'stabilityai', likes: 75500, sdk: 'Gradio', icon: '🎨', hardware: 'T4 GPU' },
	{ rank: 2, title: 'chatgpt-clone', author: 'community', likes: 12300, sdk: 'Streamlit', icon: '💬', hardware: 'CPU' },
	{ rank: 3, title: 'InstantID', author: 'InstantX', likes: 8590, sdk: 'Gradio', icon: '👤', hardware: 'A10G' },
	{ rank: 4, title: 'voice-clone-xtts', author: 'coqui', likes: 5640, sdk: 'Gradio', icon: '🎤', hardware: 'T4 GPU' },
	{ rank: 5, title: 'code-llama-playground', author: 'meta', likes: 3210, sdk: 'Gradio', icon: '💻', hardware: 'A100' },
	{ rank: 6, title: 'image-to-3d-model', author: '3d-ai', likes: 2890, sdk: 'Gradio', icon: '🎲', hardware: 'A10G' },
	{ rank: 7, title: 'music-visualizer', author: 'audio-viz', likes: 2340, sdk: 'Streamlit', icon: '🎵', hardware: 'CPU' },
	{ rank: 8, title: 'pdf-chatbot', author: 'doc-ai', likes: 1980, sdk: 'Gradio', icon: '📄', hardware: 'T4 GPU' },
	{ rank: 9, title: 'anime-art-generator', author: 'waifu-ai', likes: 1670, sdk: 'Gradio', icon: '🎌', hardware: 'T4 GPU' },
	{ rank: 10, title: 'dataset-explorer', author: 'data-tools', likes: 1450, sdk: 'Streamlit', icon: '📊', hardware: 'CPU' }
	];

	container.innerHTML = '';
	sampleData.forEach(space => {
	space.url = `https://huggingface.co/spaces/${space.author}/${space.title}`;
	container.appendChild(createModelCard(space));
	});
	}

	function displaySampleReplicateModels(container, type) {
	console.log(`📌 Replicate ${type} 모델 샘플 데이터를 표시합니다.`);

	const featuredData = [
	{ rank: 1, title: 'flux-1.1-pro', author: 'black-forest-labs', runs: 2910000, icon: '🎨', badge: '⭐ Featured' },
	{ rank: 2, title: 'llama-3.3-70b-versatile', author: 'meta', runs: 1850000, icon: '🤖', badge: '⭐ Featured' },
	{ rank: 3, title: 'stable-video-diffusion', author: 'stability-ai', runs: 890000, icon: '🎬', badge: '⭐ Featured' },
	{ rank: 4, title: 'whisper-large-v3-turbo', author: 'openai', runs: 670000, icon: '🎤', badge: '⭐ Featured' },
	{ rank: 5, title: 'musicgen-stereo-large', author: 'facebook', runs: 450000, icon: '🎵', badge: '⭐ Featured' },
	{ rank: 6, title: 'animate-lcm', author: 'lucataco', runs: 320000, icon: '✨', badge: '⭐ Featured' },
	{ rank: 7, title: 'instant-id', author: 'zsxkib', runs: 280000, icon: '👤', badge: '⭐ Featured' },
	{ rank: 8, title: 'face-restoration', author: 'tencentarc', runs: 210000, icon: '✨', badge: '⭐ Featured' }
	];

	const officialData = [
	{ rank: 1, title: 'meta-llama-3.3-70b-instruct', author: 'meta', runs: 3450000, icon: '🤖', badge: '✅ Official' },
	{ rank: 2, title: 'flux-1.1-pro', author: 'black-forest-labs', runs: 2910000, icon: '🎨', badge: '✅ Official' },
	{ rank: 3, title: 'stable-diffusion-3', author: 'stability-ai', runs: 1750000, icon: '🖼️', badge: '✅ Official' },
	{ rank: 4, title: 'whisper', author: 'openai', runs: 890000, icon: '🎤', badge: '✅ Official' },
	{ rank: 5, title: 'musicgen', author: 'facebook', runs: 450000, icon: '🎵', badge: '✅ Official' },
	{ rank: 6, title: 'sdxl', author: 'stability-ai', runs: 380000, icon: '🎨', badge: '✅ Official' },
	{ rank: 7, title: 'claude-3.7-sonnet', author: 'anthropic', runs: 290000, icon: '🤖', badge: '✅ Official' },
	{ rank: 8, title: 'gemma-2-9b-it', author: 'google', runs: 180000, icon: '💬', badge: '✅ Official' }
	];

	const sampleData = type === 'official' ? officialData : featuredData;

	container.innerHTML = '';
	sampleData.forEach(model => {
	model.url = `https://replicate.com/${model.author}/${model.title}`;
	container.appendChild(createModelCard(model));
	});
	}

	// 새로고침
	function refreshCurrent() {
	if (currentCategory === 'hf-models') {
	loadHFModels();
	} else if (currentCategory === 'hf-spaces') {
	loadHFSpaces();
	} else {
	const activeBtn = document.querySelector('#replicate .filter-btn.active');
	const type = activeBtn.textContent.includes('Featured') ? 'featured' : 'official';
	loadReplicate(type);
	}
	}

	// 초기 로드
	window.addEventListener('DOMContentLoaded', () => {
	console.log('🚀 HuggingFace & Replicate 트렌딩 리스트 로드 시작');
	console.log('📌 API Endpoints:');
	console.log('- HF Models (Trending): https://huggingface.co/api/models?sort=likes7d&direction=-1&limit=30');
	console.log('- HF Spaces (Trending): https://huggingface.co/api/spaces?sort=likes7d&direction=-1&limit=30');

	loadHFModels();
	});
	</script>
	</body>
	</html>