Update index.html

index.html

@@ -505,6 +505,7 @@
                     <option value="image-text-to-text">Vision-Language</option>
                 </select>
                 <select class="filter-select" id="models-sort-filter">
+                    <option value="trending">Trending (7d)</option>
                     <option value="likes">Most Liked</option>
                     <option value="downloads">Most Downloaded</option>
                     <option value="recent">Recently Added</option>
@@ -539,6 +540,7 @@
                     <option value="docker">Docker</option>
                 </select>
                 <select class="filter-select" id="spaces-sort-filter">
+                    <option value="trending">Trending (7d)</option>
                     <option value="likes">Most Liked</option>
                     <option value="recent">Recently Added</option>
                 </select>
@@ -754,6 +756,7 @@
                 
                 return {
                     rank: index + 1,
+                    trendingRank: index + 1,  // 원본 순위 보존
                     title: modelName,
                     author: author,
                     url: url,
@@ -807,6 +810,7 @@
                 
                 return {
                     rank: index + 1,
+                    trendingRank: index + 1,  // 원본 trending 순위 보존
                     title: model.id?.split('/')[1] || model.modelId || 'Unknown',
                     author: model.id?.split('/')[0] || model.author || 'Unknown',
                     likes: model.likes || 0,
@@ -840,6 +844,7 @@
                 
                 return {
                     rank: index + 1,
+                    trendingRank: index + 1,  // 원본 trending 순위 보존
                     title: space.id?.split('/')[1] || 'Unknown',
                     author: space.id?.split('/')[0] || 'Unknown',
                     likes: space.likes || 0,
@@ -864,10 +869,12 @@
             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';
+            // trendingRank가 있으면 그것을 기준으로, 없으면 rank를 기준으로
+            const displayRank = data.trendingRank || data.rank;
+            if (displayRank === 1) rankColor = '#FFD700';
+            else if (displayRank === 2) rankColor = '#C0C0C0';
+            else if (displayRank === 3) rankColor = '#CD7F32';
+            else if (displayRank <= 10) rankColor = '#667eea';
             
             card.innerHTML = `
                 <div class="rank-badge" style="background: ${rankColor};">
@@ -923,16 +930,16 @@
         // 샘플 데이터 표시 함수들
         function displaySampleHFModels(container) {
             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'], createdAt: new Date(Date.now() - 10 * 24 * 60 * 60 * 1000).toISOString() },
-                { rank: 2, title: 'DeepSeek-R1-Distill-Qwen-32B', author: 'deepseek-ai', likes: 10400, downloads: 567000, icon: '🤖', pipeline_tag: 'text-generation', tags: ['deepseek', 'reasoning'], badge: '🆕 New', createdAt: new Date(Date.now() - 3 * 24 * 60 * 60 * 1000).toISOString() },
-                { rank: 3, title: 'Qwen3-235B-A22B', author: 'Qwen', likes: 5370, downloads: 225000, icon: '🤖', pipeline_tag: 'text-generation', tags: ['qwen', 'large'], badge: '🆕 New', createdAt: new Date(Date.now() - 5 * 24 * 60 * 60 * 1000).toISOString() },
-                { rank: 4, title: 'FLUX.1-dev', author: 'black-forest-labs', likes: 29100, downloads: 397000, icon: '🤖', pipeline_tag: 'text-to-image', tags: ['flux', 'diffusion'], createdAt: new Date(Date.now() - 30 * 24 * 60 * 60 * 1000).toISOString() },
-                { rank: 5, title: 'Phi-4', author: 'microsoft', likes: 8900, downloads: 156000, icon: '🤖', pipeline_tag: 'text-generation', tags: ['phi', 'small'], badge: '🆕 New', createdAt: new Date(Date.now() - 2 * 24 * 60 * 60 * 1000).toISOString() },
-                { rank: 6, title: 'stable-diffusion-3.5-large', author: 'stabilityai', likes: 7650, downloads: 234000, icon: '🤖', pipeline_tag: 'text-to-image', tags: ['sd3', 'large'], createdAt: new Date(Date.now() - 15 * 24 * 60 * 60 * 1000).toISOString() },
-                { rank: 7, title: 'whisper-large-v3-turbo', author: 'openai', likes: 6780, downloads: 189000, icon: '🤖', pipeline_tag: 'automatic-speech-recognition', tags: ['whisper', 'asr'], createdAt: new Date(Date.now() - 20 * 24 * 60 * 60 * 1000).toISOString() },
-                { rank: 8, title: 'MusicGen-Stereo-Melody', author: 'facebook', likes: 5430, downloads: 98000, icon: '🤖', pipeline_tag: 'text-to-audio', tags: ['music', 'generation'], createdAt: new Date(Date.now() - 25 * 24 * 60 * 60 * 1000).toISOString() },
-                { rank: 9, title: 'Florence-2-large', author: 'microsoft', likes: 4890, downloads: 87000, icon: '🤖', pipeline_tag: 'image-text-to-text', tags: ['vision', 'florence'], createdAt: new Date(Date.now() - 18 * 24 * 60 * 60 * 1000).toISOString() },
-                { rank: 10, title: 'QwQ-32B-Preview', author: 'Qwen', likes: 4560, downloads: 76000, icon: '🤖', pipeline_tag: 'text-generation', tags: ['reasoning', 'cot'], badge: '🆕 New', createdAt: new Date(Date.now() - 6 * 24 * 60 * 60 * 1000).toISOString() }
+                { rank: 1, trendingRank: 1, title: 'Llama-3.3-70B-Instruct', author: 'meta-llama', likes: 177000, downloads: 1150000, icon: '🤖', pipeline_tag: 'text-generation', tags: ['llama', '70b', 'instruct'], createdAt: new Date(Date.now() - 10 * 24 * 60 * 60 * 1000).toISOString() },
+                { rank: 2, trendingRank: 2, title: 'DeepSeek-R1-Distill-Qwen-32B', author: 'deepseek-ai', likes: 10400, downloads: 567000, icon: '🤖', pipeline_tag: 'text-generation', tags: ['deepseek', 'reasoning'], badge: '🆕 New', createdAt: new Date(Date.now() - 3 * 24 * 60 * 60 * 1000).toISOString() },
+                { rank: 3, trendingRank: 3, title: 'Qwen3-235B-A22B', author: 'Qwen', likes: 5370, downloads: 225000, icon: '🤖', pipeline_tag: 'text-generation', tags: ['qwen', 'large'], badge: '🆕 New', createdAt: new Date(Date.now() - 5 * 24 * 60 * 60 * 1000).toISOString() },
+                { rank: 4, trendingRank: 4, title: 'FLUX.1-dev', author: 'black-forest-labs', likes: 29100, downloads: 397000, icon: '🤖', pipeline_tag: 'text-to-image', tags: ['flux', 'diffusion'], createdAt: new Date(Date.now() - 30 * 24 * 60 * 60 * 1000).toISOString() },
+                { rank: 5, trendingRank: 5, title: 'Phi-4', author: 'microsoft', likes: 8900, downloads: 156000, icon: '🤖', pipeline_tag: 'text-generation', tags: ['phi', 'small'], badge: '🆕 New', createdAt: new Date(Date.now() - 2 * 24 * 60 * 60 * 1000).toISOString() },
+                { rank: 6, trendingRank: 6, title: 'stable-diffusion-3.5-large', author: 'stabilityai', likes: 7650, downloads: 234000, icon: '🤖', pipeline_tag: 'text-to-image', tags: ['sd3', 'large'], createdAt: new Date(Date.now() - 15 * 24 * 60 * 60 * 1000).toISOString() },
+                { rank: 7, trendingRank: 7, title: 'whisper-large-v3-turbo', author: 'openai', likes: 6780, downloads: 189000, icon: '🤖', pipeline_tag: 'automatic-speech-recognition', tags: ['whisper', 'asr'], createdAt: new Date(Date.now() - 20 * 24 * 60 * 60 * 1000).toISOString() },
+                { rank: 8, trendingRank: 8, title: 'MusicGen-Stereo-Melody', author: 'facebook', likes: 5430, downloads: 98000, icon: '🤖', pipeline_tag: 'text-to-audio', tags: ['music', 'generation'], createdAt: new Date(Date.now() - 25 * 24 * 60 * 60 * 1000).toISOString() },
+                { rank: 9, trendingRank: 9, title: 'Florence-2-large', author: 'microsoft', likes: 4890, downloads: 87000, icon: '🤖', pipeline_tag: 'image-text-to-text', tags: ['vision', 'florence'], createdAt: new Date(Date.now() - 18 * 24 * 60 * 60 * 1000).toISOString() },
+                { rank: 10, trendingRank: 10, title: 'QwQ-32B-Preview', author: 'Qwen', likes: 4560, downloads: 76000, icon: '🤖', pipeline_tag: 'text-generation', tags: ['reasoning', 'cot'], badge: '🆕 New', createdAt: new Date(Date.now() - 6 * 24 * 60 * 60 * 1000).toISOString() }
             ];
             
             sampleData.forEach(model => {
@@ -944,16 +951,16 @@
 
         function displaySampleHFSpaces(container) {
             const sampleData = [
-                { rank: 1, title: 'stable-diffusion-webui', author: 'stabilityai', likes: 75500, sdk: 'Gradio', icon: '🎨', createdAt: new Date(Date.now() - 30 * 24 * 60 * 60 * 1000).toISOString() },
-                { rank: 2, title: 'chatgpt-clone', author: 'community', likes: 12300, sdk: 'Streamlit', icon: '💬', badge: '🆕 New', createdAt: new Date(Date.now() - 4 * 24 * 60 * 60 * 1000).toISOString() },
-                { rank: 3, title: 'InstantID', author: 'InstantX', likes: 8590, sdk: 'Gradio', icon: '👤', createdAt: new Date(Date.now() - 12 * 24 * 60 * 60 * 1000).toISOString() },
-                { rank: 4, title: 'voice-clone-xtts', author: 'coqui', likes: 5640, sdk: 'Gradio', icon: '🎤', badge: '🆕 New', createdAt: new Date(Date.now() - 5 * 24 * 60 * 60 * 1000).toISOString() },
-                { rank: 5, title: 'code-llama-playground', author: 'meta', likes: 3210, sdk: 'Gradio', icon: '💻', createdAt: new Date(Date.now() - 20 * 24 * 60 * 60 * 1000).toISOString() },
-                { rank: 6, title: 'image-to-3d-model', author: '3d-ai', likes: 2890, sdk: 'Gradio', icon: '🎲', createdAt: new Date(Date.now() - 15 * 24 * 60 * 60 * 1000).toISOString() },
-                { rank: 7, title: 'music-visualizer', author: 'audio-viz', likes: 2340, sdk: 'Streamlit', icon: '🎵', badge: '🆕 New', createdAt: new Date(Date.now() - 3 * 24 * 60 * 60 * 1000).toISOString() },
-                { rank: 8, title: 'pdf-chatbot', author: 'doc-ai', likes: 1980, sdk: 'Gradio', icon: '📄', createdAt: new Date(Date.now() - 25 * 24 * 60 * 60 * 1000).toISOString() },
-                { rank: 9, title: 'anime-art-generator', author: 'waifu-ai', likes: 1670, sdk: 'Gradio', icon: '🎌', createdAt: new Date(Date.now() - 10 * 24 * 60 * 60 * 1000).toISOString() },
-                { rank: 10, title: 'dataset-explorer', author: 'data-tools', likes: 1450, sdk: 'Streamlit', icon: '📊', createdAt: new Date(Date.now() - 8 * 24 * 60 * 60 * 1000).toISOString() }
+                { rank: 1, trendingRank: 1, title: 'stable-diffusion-webui', author: 'stabilityai', likes: 75500, sdk: 'Gradio', icon: '🎨', createdAt: new Date(Date.now() - 30 * 24 * 60 * 60 * 1000).toISOString() },
+                { rank: 2, trendingRank: 2, title: 'chatgpt-clone', author: 'community', likes: 12300, sdk: 'Streamlit', icon: '💬', badge: '🆕 New', createdAt: new Date(Date.now() - 4 * 24 * 60 * 60 * 1000).toISOString() },
+                { rank: 3, trendingRank: 3, title: 'InstantID', author: 'InstantX', likes: 8590, sdk: 'Gradio', icon: '👤', createdAt: new Date(Date.now() - 12 * 24 * 60 * 60 * 1000).toISOString() },
+                { rank: 4, trendingRank: 4, title: 'voice-clone-xtts', author: 'coqui', likes: 5640, sdk: 'Gradio', icon: '🎤', badge: '🆕 New', createdAt: new Date(Date.now() - 5 * 24 * 60 * 60 * 1000).toISOString() },
+                { rank: 5, trendingRank: 5, title: 'code-llama-playground', author: 'meta', likes: 3210, sdk: 'Gradio', icon: '💻', createdAt: new Date(Date.now() - 20 * 24 * 60 * 60 * 1000).toISOString() },
+                { rank: 6, trendingRank: 6, title: 'image-to-3d-model', author: '3d-ai', likes: 2890, sdk: 'Gradio', icon: '🎲', createdAt: new Date(Date.now() - 15 * 24 * 60 * 60 * 1000).toISOString() },
+                { rank: 7, trendingRank: 7, title: 'music-visualizer', author: 'audio-viz', likes: 2340, sdk: 'Streamlit', icon: '🎵', badge: '🆕 New', createdAt: new Date(Date.now() - 3 * 24 * 60 * 60 * 1000).toISOString() },
+                { rank: 8, trendingRank: 8, title: 'pdf-chatbot', author: 'doc-ai', likes: 1980, sdk: 'Gradio', icon: '📄', createdAt: new Date(Date.now() - 25 * 24 * 60 * 60 * 1000).toISOString() },
+                { rank: 9, trendingRank: 9, title: 'anime-art-generator', author: 'waifu-ai', likes: 1670, sdk: 'Gradio', icon: '🎌', createdAt: new Date(Date.now() - 10 * 24 * 60 * 60 * 1000).toISOString() },
+                { rank: 10, trendingRank: 10, title: 'dataset-explorer', author: 'data-tools', likes: 1450, sdk: 'Streamlit', icon: '📊', createdAt: new Date(Date.now() - 8 * 24 * 60 * 60 * 1000).toISOString() }
             ];
             
             sampleData.forEach(space => {
@@ -1040,7 +1047,7 @@
         function filterAndDisplayModels() {
             const searchTerm = document.getElementById('models-search').value.toLowerCase();
             const categoryFilter = document.getElementById('models-category-filter').value;
-            const sortFilter = document.getElementById('models-sort-filter').value;
+            const sortFilter = document.getElementById('models-sort-filter').value || 'trending';
             
             // 필터링
             filteredModelsData = allModelsData.filter(model => {
@@ -1066,7 +1073,7 @@
         function filterAndDisplaySpaces() {
             const searchTerm = document.getElementById('spaces-search').value.toLowerCase();
             const sdkFilter = document.getElementById('spaces-sdk-filter').value;
-            const sortFilter = document.getElementById('spaces-sort-filter').value;
+            const sortFilter = document.getElementById('spaces-sort-filter').value || 'trending';
             
             // 필터링
             filteredSpacesData = allSpacesData.filter(space => {
@@ -1091,6 +1098,9 @@
         // 데이터 정렬
         function sortData(data, sortType) {
             switch(sortType) {
+                case 'trending':
+                    data.sort((a, b) => (a.trendingRank || 999) - (b.trendingRank || 999));
+                    break;
                 case 'likes':
                     data.sort((a, b) => (b.likes || 0) - (a.likes || 0));
                     break;