Update index.html

index.html

@@ -368,14 +368,14 @@
 
         <!-- Replicate Section -->
         <div id="replicate" class="content-section">
-            <div class="filter-buttons">
-                <button class="filter-btn active" onclick="loadReplicate('featured')">⭐ Featured</button>
-                <button class="filter-btn" onclick="loadReplicate('official')">✅ Official</button>
+            <div class="section-header">
+                <h2>✅ Official Collection</h2>
+                <p style="color: #7f8c8d; margin-top: 5px;">from replicate.com/collections/official</p>
             </div>
             <div id="replicate-content" class="items-grid">
                 <div class="loading">
                     <div class="loading-spinner"></div>
-                    <p>Loading models...</p>
+                    <p>Loading official models...</p>
                 </div>
             </div>
         </div>
@@ -405,7 +405,7 @@
             } else if (category === 'hf-spaces') {
                 loadHFSpaces();
             } else if (category === 'replicate') {
-                loadReplicate('featured');
+                loadReplicate();
             }
         }
 
@@ -415,7 +415,7 @@
             container.innerHTML = '<div class="loading"><div class="loading-spinner"></div><p>Loading trending models...</p></div>';
             
             try {
-                const response = await fetch('https://huggingface.co/api/models?sort=likes7d&direction=-1&limit=30');
+                const response = await fetch('https://huggingface.co/api/models?sort=likes7d&direction=-1&limit=100');
                 const data = await response.json();
                 displayHFModels(data, container);
             } catch (error) {
@@ -429,7 +429,7 @@
             container.innerHTML = '<div class="loading"><div class="loading-spinner"></div><p>Loading trending spaces...</p></div>';
             
             try {
-                const response = await fetch('https://huggingface.co/api/spaces?sort=likes7d&direction=-1&limit=30');
+                const response = await fetch('https://huggingface.co/api/spaces?sort=likes7d&direction=-1&limit=100');
                 const data = await response.json();
                 displayHFSpaces(data, container);
             } catch (error) {
@@ -438,32 +438,49 @@
         }
 
         // 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');
-            }
-            
+        async function loadReplicate() {
             const container = document.getElementById('replicate-content');
-            container.innerHTML = '<div class="loading"><div class="loading-spinner"></div><p>Loading models...</p></div>';
+            container.innerHTML = '<div class="loading"><div class="loading-spinner"></div><p>Loading official models...</p></div>';
             
-            if (currentType === 'official') {
-                try {
-                    const proxyUrl = 'https://api.allorigins.win/raw?url=';
-                    const targetUrl = 'https://replicate.com/collections/official';
-                    
-                    const response = await fetch(proxyUrl + encodeURIComponent(targetUrl));
-                    const html = await response.text();
-                    
-                    const parser = new DOMParser();
-                    const doc = parser.parseFromString(html, 'text/html');
-                    
+            try {
+                const proxyUrl = 'https://api.allorigins.win/raw?url=';
+                const targetUrl = 'https://replicate.com/collections/official';
+                
+                const response = await fetch(proxyUrl + encodeURIComponent(targetUrl));
+                const html = await response.text();
+                
+                // HTML에서 모델 URL 추출
+                const parser = new DOMParser();
+                const doc = parser.parseFromString(html, 'text/html');
+                
+                // 모든 모델 링크 찾기
+                const modelLinks = doc.querySelectorAll('a[href*="/models/"], a[href*="/p/"]');
+                const models = [];
+                const seenUrls = new Set();
+                
+                modelLinks.forEach(link => {
+                    const href = link.getAttribute('href');
+                    if (href && !seenUrls.has(href)) {
+                        seenUrls.add(href);
+                        const parts = href.split('/');
+                        if (parts.length >= 3) {
+                            const author = parts[parts.length - 2];
+                            const name = parts[parts.length - 1];
+                            if (author && name && author !== 'models' && author !== 'p') {
+                                models.push({
+                                    author: author,
+                                    name: name,
+                                    url: `https://replicate.com${href}`
+                                });
+                            }
+                        }
+                    }
+                });
+                
+                if (models.length > 0) {
+                    displayReplicateModels(models, container);
+                } else {
+                    // Fallback: JSON 데이터 추출 시도
                     const scriptTags = doc.querySelectorAll('script');
                     let modelsData = [];
                     
@@ -484,15 +501,13 @@
                     }
                     
                     if (modelsData.length > 0) {
-                        displayReplicateModels(modelsData, container, 'official');
+                        displayReplicateModels(modelsData, container);
                     } else {
-                        displaySampleReplicateModels(container, currentType);
+                        displaySampleReplicateModels(container);
                     }
-                } catch (error) {
-                    displaySampleReplicateModels(container, currentType);
                 }
-            } else {
-                displaySampleReplicateModels(container, currentType);
+            } catch (error) {
+                displaySampleReplicateModels(container);
             }
         }
 
@@ -501,8 +516,8 @@
             try {
                 const proxyUrl = 'https://api.allorigins.win/raw?url=';
                 const targetUrl = type === 'models' 
-                    ? 'https://huggingface.co/api/models?sort=likes7d&direction=-1&limit=30'
-                    : 'https://huggingface.co/api/spaces?sort=likes7d&direction=-1&limit=30';
+                    ? 'https://huggingface.co/api/models?sort=likes7d&direction=-1&limit=100'
+                    : 'https://huggingface.co/api/spaces?sort=likes7d&direction=-1&limit=100';
                 
                 const response = await fetch(proxyUrl + encodeURIComponent(targetUrl));
                 const data = await response.json();
@@ -560,17 +575,17 @@
         }
 
         // Replicate 실시간 모델 표시
-        function displayReplicateModels(models, container, type) {
+        function displayReplicateModels(models, container) {
             container.innerHTML = '';
             models.forEach((model, index) => {
                 const card = createModelCard({
                     rank: index + 1,
                     title: model.name || model.default_example?.model || 'Unknown',
-                    author: model.owner || model.username || 'replicate',
+                    author: model.owner || model.author || model.username || 'replicate',
                     runs: model.run_count || model.runs || 0,
                     icon: getModelIcon(model.name),
-                    badge: type === 'official' ? '✅ Official' : '⭐ Featured',
-                    url: model.url || `https://replicate.com/${model.owner || 'p'}/${model.name}`
+                    badge: '✅ Official',
+                    url: model.url || `https://replicate.com/${model.owner || model.author || 'p'}/${model.name}`
                 });
                 container.appendChild(card);
             });
@@ -679,18 +694,7 @@
             });
         }
 
-        function displaySampleReplicateModels(container, 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' }
-            ];
-            
+        function displaySampleReplicateModels(container) {
             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' },
@@ -702,10 +706,8 @@
                 { 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 => {
+            officialData.forEach(model => {
                 model.url = `https://replicate.com/${model.author}/${model.title}`;
                 container.appendChild(createModelCard(model));
             });
@@ -718,9 +720,7 @@
             } 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);
+                loadReplicate();
             }
         }