Update index.html

index.html

@@ -90,6 +90,150 @@
             margin-bottom: 10px;
         }
 
+        .search-container {
+            display: flex;
+            gap: 15px;
+            margin: 20px auto 30px;
+            max-width: 800px;
+            flex-wrap: wrap;
+            justify-content: center;
+        }
+
+        .search-input-wrapper {
+            position: relative;
+            flex: 1;
+            min-width: 300px;
+        }
+
+        .search-input {
+            width: 100%;
+            padding: 12px 45px 12px 20px;
+            border: 2px solid #e0e0e0;
+            border-radius: 25px;
+            font-size: 1rem;
+            transition: all 0.3s ease;
+            background: rgba(255, 255, 255, 0.9);
+            backdrop-filter: blur(10px);
+        }
+
+        .search-input:focus {
+            outline: none;
+            border-color: #667eea;
+            box-shadow: 0 0 0 3px rgba(102, 126, 234, 0.1);
+        }
+
+        .search-icon {
+            position: absolute;
+            right: 20px;
+            top: 50%;
+            transform: translateY(-50%);
+            color: #999;
+            pointer-events: none;
+        }
+
+        .filter-select {
+            padding: 12px 20px;
+            border: 2px solid #e0e0e0;
+            border-radius: 25px;
+            font-size: 1rem;
+            background: rgba(255, 255, 255, 0.9);
+            backdrop-filter: blur(10px);
+            cursor: pointer;
+            transition: all 0.3s ease;
+            min-width: 150px;
+        }
+
+        .filter-select:focus {
+            outline: none;
+            border-color: #667eea;
+            box-shadow: 0 0 0 3px rgba(102, 126, 234, 0.1);
+        }
+
+        .search-suggestions {
+            position: absolute;
+            top: 100%;
+            left: 0;
+            right: 0;
+            background: white;
+            border-radius: 15px;
+            box-shadow: 0 5px 20px rgba(0,0,0,0.1);
+            margin-top: 5px;
+            max-height: 300px;
+            overflow-y: auto;
+            display: none;
+            z-index: 1000;
+        }
+
+        .search-suggestions.active {
+            display: block;
+        }
+
+        .suggestion-item {
+            padding: 12px 20px;
+            cursor: pointer;
+            transition: background 0.2s;
+            border-bottom: 1px solid #f0f0f0;
+        }
+
+        .suggestion-item:hover {
+            background: #f5f7fa;
+        }
+
+        .suggestion-item:last-child {
+            border-bottom: none;
+        }
+
+        .suggestion-highlight {
+            font-weight: bold;
+            color: #667eea;
+        }
+
+        .search-stats {
+            text-align: center;
+            color: #666;
+            margin-bottom: 20px;
+            font-size: 0.95rem;
+        }
+
+        .no-results {
+            text-align: center;
+            padding: 60px 20px;
+            color: #999;
+        }
+
+        .no-results-icon {
+            font-size: 4rem;
+            margin-bottom: 20px;
+            opacity: 0.5;
+        }
+
+        .clear-search {
+            position: absolute;
+            right: 45px;
+            top: 50%;
+            transform: translateY(-50%);
+            background: #e0e0e0;
+            border: none;
+            border-radius: 50%;
+            width: 20px;
+            height: 20px;
+            cursor: pointer;
+            display: none;
+            align-items: center;
+            justify-content: center;
+            font-size: 0.8rem;
+            color: #666;
+            transition: all 0.2s;
+        }
+
+        .clear-search:hover {
+            background: #d0d0d0;
+        }
+
+        .clear-search.active {
+            display: flex;
+        }
+
         .filter-buttons {
             display: flex;
             gap: 15px;
@@ -345,6 +489,28 @@
             <div class="section-header">
                 <h2>📈 Trending Models</h2>
             </div>
+            <div class="search-container">
+                <div class="search-input-wrapper">
+                    <input type="text" class="search-input" id="models-search" placeholder="Search models, authors, or tags...">
+                    <button class="clear-search" onclick="clearSearch('models')">✕</button>
+                    <span class="search-icon">🔍</span>
+                    <div class="search-suggestions" id="models-suggestions"></div>
+                </div>
+                <select class="filter-select" id="models-category-filter">
+                    <option value="">All Categories</option>
+                    <option value="text-generation">Text Generation</option>
+                    <option value="text-to-image">Image Generation</option>
+                    <option value="automatic-speech-recognition">Speech Recognition</option>
+                    <option value="text-to-audio">Audio Generation</option>
+                    <option value="image-text-to-text">Vision-Language</option>
+                </select>
+                <select class="filter-select" id="models-sort-filter">
+                    <option value="likes">Most Liked</option>
+                    <option value="downloads">Most Downloaded</option>
+                    <option value="recent">Recently Added</option>
+                </select>
+            </div>
+            <div class="search-stats" id="models-search-stats"></div>
             <div id="hf-models-content" class="items-grid">
                 <div class="loading">
                     <div class="loading-spinner"></div>
@@ -358,6 +524,26 @@
             <div class="section-header">
                 <h2>🎯 Trending Spaces</h2>
             </div>
+            <div class="search-container">
+                <div class="search-input-wrapper">
+                    <input type="text" class="search-input" id="spaces-search" placeholder="Search spaces or authors...">
+                    <button class="clear-search" onclick="clearSearch('spaces')">✕</button>
+                    <span class="search-icon">🔍</span>
+                    <div class="search-suggestions" id="spaces-suggestions"></div>
+                </div>
+                <select class="filter-select" id="spaces-sdk-filter">
+                    <option value="">All SDKs</option>
+                    <option value="gradio">Gradio</option>
+                    <option value="streamlit">Streamlit</option>
+                    <option value="static">Static</option>
+                    <option value="docker">Docker</option>
+                </select>
+                <select class="filter-select" id="spaces-sort-filter">
+                    <option value="likes">Most Liked</option>
+                    <option value="recent">Recently Added</option>
+                </select>
+            </div>
+            <div class="search-stats" id="spaces-search-stats"></div>
             <div id="hf-spaces-content" class="items-grid">
                 <div class="loading">
                     <div class="loading-spinner"></div>
@@ -372,6 +558,14 @@
                 <h2>✅ Official Collection</h2>
                 <p style="color: #7f8c8d; margin-top: 5px;">from replicate.com/collections/official</p>
             </div>
+            <div class="search-container">
+                <div class="search-input-wrapper">
+                    <input type="text" class="search-input" id="replicate-search" placeholder="Search replicate models...">
+                    <button class="clear-search" onclick="clearSearch('replicate')">✕</button>
+                    <span class="search-icon">🔍</span>
+                </div>
+            </div>
+            <div class="search-stats" id="replicate-search-stats"></div>
             <div id="replicate-content" class="items-grid">
                 <div class="loading">
                     <div class="loading-spinner"></div>
@@ -385,6 +579,13 @@
 
     <script>
         let currentCategory = 'hf-models';
+        let allModelsData = [];
+        let allSpacesData = [];
+        let allReplicateData = [];
+        let filteredModelsData = [];
+        let filteredSpacesData = [];
+        let filteredReplicateData = [];
+        let searchHistory = [];
 
         // Replicate URL 리스트
         const replicateUrls = [
@@ -544,10 +745,9 @@
         // Replicate 모델 로드
         function loadReplicate() {
             const container = document.getElementById('replicate-content');
-            container.innerHTML = '';
             
             // URL에서 모델 정보 추출
-            const models = replicateUrls.map((url, index) => {
+            allReplicateData = replicateUrls.map((url, index) => {
                 const parts = url.split('/');
                 const author = parts[parts.length - 2];
                 const modelName = parts[parts.length - 1];
@@ -562,11 +762,9 @@
                 };
             });
             
-            // 모델 카드 생성 및 표시
-            models.forEach(model => {
-                const card = createModelCard(model);
-                container.appendChild(card);
-            });
+            // 초기 필터링 및 표시
+            filteredReplicateData = [...allReplicateData];
+            filterAndDisplayReplicate();
         }
 
         // 프록시 요청
@@ -596,8 +794,8 @@
 
         // HuggingFace Models 표시
         function displayHFModels(models, container) {
-            container.innerHTML = '';
-            models.forEach((model, index) => {
+            // 원본 데이터 저장
+            allModelsData = models.map((model, index) => {
                 // 생성일자 확인 (1주일 이내인지)
                 let isNew = false;
                 if (model.createdAt) {
@@ -607,7 +805,7 @@
                     isNew = createdDate > oneWeekAgo;
                 }
                 
-                const card = createModelCard({
+                return {
                     rank: index + 1,
                     title: model.id?.split('/')[1] || model.modelId || 'Unknown',
                     author: model.id?.split('/')[0] || model.author || 'Unknown',
@@ -617,16 +815,20 @@
                     pipeline_tag: model.pipeline_tag || '',
                     url: `https://huggingface.co/${model.id || model.modelId}`,
                     icon: '🤖',
-                    badge: isNew ? '🆕 New' : null
-                });
-                container.appendChild(card);
+                    badge: isNew ? '🆕 New' : null,
+                    createdAt: model.createdAt
+                };
             });
+            
+            // 초기 필터링 및 표시
+            filteredModelsData = [...allModelsData];
+            filterAndDisplayModels();
         }
 
         // HuggingFace Spaces 표시
         function displayHFSpaces(spaces, container) {
-            container.innerHTML = '';
-            spaces.forEach((space, index) => {
+            // 원본 데이터 저장
+            allSpacesData = spaces.map((space, index) => {
                 // 생성일자 확인 (1주일 이내인지)
                 let isNew = false;
                 if (space.createdAt) {
@@ -636,7 +838,7 @@
                     isNew = createdDate > oneWeekAgo;
                 }
                 
-                const card = createModelCard({
+                return {
                     rank: index + 1,
                     title: space.id?.split('/')[1] || 'Unknown',
                     author: space.id?.split('/')[0] || 'Unknown',
@@ -645,10 +847,14 @@
                     emoji: space.emoji || '🎯',
                     url: `https://huggingface.co/spaces/${space.id}`,
                     icon: space.emoji || '🎯',
-                    badge: isNew ? '🆕 New' : null
-                });
-                container.appendChild(card);
+                    badge: isNew ? '🆕 New' : null,
+                    createdAt: space.createdAt
+                };
             });
+            
+            // 초기 필터링 및 표시
+            filteredSpacesData = [...allSpacesData];
+            filterAndDisplaySpaces();
         }
 
         // 모델 카드 생성
@@ -717,44 +923,44 @@
         // 샘플 데이터 표시 함수들
         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'] },
-                { 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' },
-                { rank: 3, title: 'Qwen3-235B-A22B', author: 'Qwen', likes: 5370, downloads: 225000, icon: '🤖', pipeline_tag: 'text-generation', tags: ['qwen', 'large'], badge: '🆕 New' },
-                { 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'], badge: '🆕 New' },
-                { 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'], badge: '🆕 New' }
+                { 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() }
             ];
             
-            container.innerHTML = '';
             sampleData.forEach(model => {
                 model.url = `https://huggingface.co/${model.author}/${model.title}`;
-                container.appendChild(createModelCard(model));
             });
+            
+            displayHFModels(sampleData, container);
         }
 
         function displaySampleHFSpaces(container) {
             const sampleData = [
-                { rank: 1, title: 'stable-diffusion-webui', author: 'stabilityai', likes: 75500, sdk: 'Gradio', icon: '🎨' },
-                { rank: 2, title: 'chatgpt-clone', author: 'community', likes: 12300, sdk: 'Streamlit', icon: '💬', badge: '🆕 New' },
-                { rank: 3, title: 'InstantID', author: 'InstantX', likes: 8590, sdk: 'Gradio', icon: '👤' },
-                { rank: 4, title: 'voice-clone-xtts', author: 'coqui', likes: 5640, sdk: 'Gradio', icon: '🎤', badge: '🆕 New' },
-                { rank: 5, title: 'code-llama-playground', author: 'meta', likes: 3210, sdk: 'Gradio', icon: '💻' },
-                { rank: 6, title: 'image-to-3d-model', author: '3d-ai', likes: 2890, sdk: 'Gradio', icon: '🎲' },
-                { rank: 7, title: 'music-visualizer', author: 'audio-viz', likes: 2340, sdk: 'Streamlit', icon: '🎵', badge: '🆕 New' },
-                { rank: 8, title: 'pdf-chatbot', author: 'doc-ai', likes: 1980, sdk: 'Gradio', icon: '📄' },
-                { rank: 9, title: 'anime-art-generator', author: 'waifu-ai', likes: 1670, sdk: 'Gradio', icon: '🎌' },
-                { rank: 10, title: 'dataset-explorer', author: 'data-tools', likes: 1450, sdk: 'Streamlit', icon: '📊' }
+                { 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() }
             ];
             
-            container.innerHTML = '';
             sampleData.forEach(space => {
                 space.url = `https://huggingface.co/spaces/${space.author}/${space.title}`;
-                container.appendChild(createModelCard(space));
             });
+            
+            displayHFSpaces(sampleData, container);
         }
 
         // 새로고침
@@ -768,8 +974,324 @@
             }
         }
 
+        // 검색 및 필터링 함수들
+        function setupSearchAndFilter() {
+            // 모델 검색
+            const modelsSearchInput = document.getElementById('models-search');
+            const modelsCategoryFilter = document.getElementById('models-category-filter');
+            const modelsSortFilter = document.getElementById('models-sort-filter');
+            
+            modelsSearchInput.addEventListener('input', debounce(() => {
+                filterAndDisplayModels();
+                updateSearchSuggestions('models', modelsSearchInput.value);
+                toggleClearButton('models', modelsSearchInput.value);
+            }, 300));
+            
+            modelsCategoryFilter.addEventListener('change', filterAndDisplayModels);
+            modelsSortFilter.addEventListener('change', filterAndDisplayModels);
+            
+            // 스페이스 검색
+            const spacesSearchInput = document.getElementById('spaces-search');
+            const spacesSdkFilter = document.getElementById('spaces-sdk-filter');
+            const spacesSortFilter = document.getElementById('spaces-sort-filter');
+            
+            spacesSearchInput.addEventListener('input', debounce(() => {
+                filterAndDisplaySpaces();
+                updateSearchSuggestions('spaces', spacesSearchInput.value);
+                toggleClearButton('spaces', spacesSearchInput.value);
+            }, 300));
+            
+            spacesSdkFilter.addEventListener('change', filterAndDisplaySpaces);
+            spacesSortFilter.addEventListener('change', filterAndDisplaySpaces);
+            
+            // Replicate 검색
+            const replicateSearchInput = document.getElementById('replicate-search');
+            replicateSearchInput.addEventListener('input', debounce(() => {
+                filterAndDisplayReplicate();
+                toggleClearButton('replicate', replicateSearchInput.value);
+            }, 300));
+            
+            // 검색창 포커스 이벤트
+            modelsSearchInput.addEventListener('focus', () => showSearchSuggestions('models'));
+            spacesSearchInput.addEventListener('focus', () => showSearchSuggestions('spaces'));
+            
+            // 클릭 외부 영역 시 제안 숨기기
+            document.addEventListener('click', (e) => {
+                if (!e.target.closest('.search-input-wrapper')) {
+                    hideAllSuggestions();
+                }
+            });
+        }
+
+        // 디바운스 함수
+        function debounce(func, wait) {
+            let timeout;
+            return function executedFunction(...args) {
+                const later = () => {
+                    clearTimeout(timeout);
+                    func(...args);
+                };
+                clearTimeout(timeout);
+                timeout = setTimeout(later, wait);
+            };
+        }
+
+        // 모델 필터링 및 표시
+        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;
+            
+            // 필터링
+            filteredModelsData = allModelsData.filter(model => {
+                const matchesSearch = !searchTerm || 
+                    model.title.toLowerCase().includes(searchTerm) ||
+                    model.author.toLowerCase().includes(searchTerm) ||
+                    (model.tags && model.tags.some(tag => tag.toLowerCase().includes(searchTerm)));
+                
+                const matchesCategory = !categoryFilter || model.pipeline_tag === categoryFilter;
+                
+                return matchesSearch && matchesCategory;
+            });
+            
+            // 정렬
+            sortData(filteredModelsData, sortFilter);
+            
+            // 표시
+            displayFilteredModels();
+            updateSearchStats('models', filteredModelsData.length, allModelsData.length);
+        }
+
+        // 스페이스 필터링 및 표시
+        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;
+            
+            // 필터링
+            filteredSpacesData = allSpacesData.filter(space => {
+                const matchesSearch = !searchTerm || 
+                    space.title.toLowerCase().includes(searchTerm) ||
+                    space.author.toLowerCase().includes(searchTerm);
+                
+                const matchesSdk = !sdkFilter || 
+                    (space.sdk && space.sdk.toLowerCase() === sdkFilter.toLowerCase());
+                
+                return matchesSearch && matchesSdk;
+            });
+            
+            // 정렬
+            sortData(filteredSpacesData, sortFilter);
+            
+            // 표시
+            displayFilteredSpaces();
+            updateSearchStats('spaces', filteredSpacesData.length, allSpacesData.length);
+        }
+
+        // 데이터 정렬
+        function sortData(data, sortType) {
+            switch(sortType) {
+                case 'likes':
+                    data.sort((a, b) => (b.likes || 0) - (a.likes || 0));
+                    break;
+                case 'downloads':
+                    data.sort((a, b) => (b.downloads || 0) - (a.downloads || 0));
+                    break;
+                case 'recent':
+                    data.sort((a, b) => {
+                        const dateA = new Date(a.createdAt || 0);
+                        const dateB = new Date(b.createdAt || 0);
+                        return dateB - dateA;
+                    });
+                    break;
+            }
+        }
+
+        // 필터링된 모델 표시
+        function displayFilteredModels() {
+            const container = document.getElementById('hf-models-content');
+            container.innerHTML = '';
+            
+            if (filteredModelsData.length === 0) {
+                container.innerHTML = `
+                    <div class="no-results">
+                        <div class="no-results-icon">🔍</div>
+                        <h3>No models found</h3>
+                        <p>Try adjusting your search or filters</p>
+                    </div>
+                `;
+                return;
+            }
+            
+            filteredModelsData.forEach((model, index) => {
+                const card = createModelCard({
+                    ...model,
+                    rank: index + 1
+                });
+                container.appendChild(card);
+            });
+        }
+
+        // 필터링된 스페이스 표시
+        function displayFilteredSpaces() {
+            const container = document.getElementById('hf-spaces-content');
+            container.innerHTML = '';
+            
+            if (filteredSpacesData.length === 0) {
+                container.innerHTML = `
+                    <div class="no-results">
+                        <div class="no-results-icon">🔍</div>
+                        <h3>No spaces found</h3>
+                        <p>Try adjusting your search or filters</p>
+                    </div>
+                `;
+                return;
+            }
+            
+            filteredSpacesData.forEach((space, index) => {
+                const card = createModelCard({
+                    ...space,
+                    rank: index + 1
+                });
+                container.appendChild(card);
+            });
+        }
+
+        // 검색 제안 업데이트
+        function updateSearchSuggestions(type, searchTerm) {
+            if (!searchTerm) {
+                hideAllSuggestions();
+                return;
+            }
+            
+            const data = type === 'models' ? allModelsData : allSpacesData;
+            const suggestions = data
+                .filter(item => 
+                    item.title.toLowerCase().includes(searchTerm.toLowerCase()) ||
+                    item.author.toLowerCase().includes(searchTerm.toLowerCase())
+                )
+                .slice(0, 5);
+            
+            const suggestionsContainer = document.getElementById(`${type}-suggestions`);
+            suggestionsContainer.innerHTML = suggestions.map(item => `
+                <div class="suggestion-item" onclick="selectSuggestion('${type}', '${item.title}')">
+                    <strong>${highlightMatch(item.title, searchTerm)}</strong>
+                    <span style="color: #999; font-size: 0.9rem;"> by ${item.author}</span>
+                </div>
+            `).join('');
+            
+            suggestionsContainer.classList.add('active');
+        }
+
+        // 검색어 하이라이트
+        function highlightMatch(text, searchTerm) {
+            const regex = new RegExp(`(${searchTerm})`, 'gi');
+            return text.replace(regex, '<span class="suggestion-highlight">$1</span>');
+        }
+
+        // 제안 선택
+        function selectSuggestion(type, value) {
+            document.getElementById(`${type}-search`).value = value;
+            hideAllSuggestions();
+            if (type === 'models') {
+                filterAndDisplayModels();
+            } else {
+                filterAndDisplaySpaces();
+            }
+        }
+
+        // 검색 제안 표시
+        function showSearchSuggestions(type) {
+            const searchTerm = document.getElementById(`${type}-search`).value;
+            if (searchTerm) {
+                updateSearchSuggestions(type, searchTerm);
+            }
+        }
+
+        // 모든 제안 숨기기
+        function hideAllSuggestions() {
+            document.querySelectorAll('.search-suggestions').forEach(el => {
+                el.classList.remove('active');
+            });
+        }
+
+        // 검색 통계 업데이트
+        function updateSearchStats(type, shown, total) {
+            const statsEl = document.getElementById(`${type}-search-stats`);
+            if (shown < total) {
+                statsEl.textContent = `Showing ${shown} of ${total} ${type}`;
+            } else {
+                statsEl.textContent = '';
+            }
+        }
+
+        // 검색 지우기 버튼 토글
+        function toggleClearButton(type, value) {
+            const clearBtn = document.querySelector(`#${type}-search + .clear-search`);
+            if (value) {
+                clearBtn.classList.add('active');
+            } else {
+                clearBtn.classList.remove('active');
+            }
+        }
+
+        // Replicate 필터링 및 표시
+        function filterAndDisplayReplicate() {
+            const searchTerm = document.getElementById('replicate-search').value.toLowerCase();
+            
+            // 필터링
+            filteredReplicateData = allReplicateData.filter(model => {
+                return !searchTerm || 
+                    model.title.toLowerCase().includes(searchTerm) ||
+                    model.author.toLowerCase().includes(searchTerm);
+            });
+            
+            // 표시
+            displayFilteredReplicate();
+            updateSearchStats('replicate', filteredReplicateData.length, allReplicateData.length);
+        }
+
+        // 필터링된 Replicate 모델 표시
+        function displayFilteredReplicate() {
+            const container = document.getElementById('replicate-content');
+            container.innerHTML = '';
+            
+            if (filteredReplicateData.length === 0) {
+                container.innerHTML = `
+                    <div class="no-results">
+                        <div class="no-results-icon">🔍</div>
+                        <h3>No models found</h3>
+                        <p>Try adjusting your search</p>
+                    </div>
+                `;
+                return;
+            }
+            
+            filteredReplicateData.forEach((model, index) => {
+                const card = createModelCard({
+                    ...model,
+                    rank: index + 1
+                });
+                container.appendChild(card);
+            });
+        }
+
+        // 검색 지우기
+        function clearSearch(type) {
+            document.getElementById(`${type}-search`).value = '';
+            toggleClearButton(type, '');
+            if (type === 'models') {
+                filterAndDisplayModels();
+            } else if (type === 'spaces') {
+                filterAndDisplaySpaces();
+            } else if (type === 'replicate') {
+                filterAndDisplayReplicate();
+            }
+        }
+
         // 초기 로드
         window.addEventListener('DOMContentLoaded', () => {
+            setupSearchAndFilter();
             loadHFModels();
         });
     </script>