Update index.html

index.html

@@ -203,6 +203,29 @@
 			overflow: hidden;
 		}
 
+		.app-tags {
+			display: flex;
+			flex-wrap: wrap;
+			gap: 6px;
+			margin-bottom: 15px;
+		}
+
+		.tag {
+			background: rgba(102, 126, 234, 0.1);
+			color: #667eea;
+			padding: 4px 8px;
+			border-radius: 12px;
+			font-size: 0.75rem;
+			font-weight: 500;
+			border: 1px solid rgba(102, 126, 234, 0.2);
+		}
+
+		.tag.primary {
+			background: rgba(102, 126, 234, 0.2);
+			color: #4c5eb8;
+			border-color: rgba(102, 126, 234, 0.4);
+		}
+
 		.app-stats {
 			display: flex;
 			justify-content: space-between;
@@ -260,6 +283,20 @@
 			margin: 20px 0;
 		}
 
+		.no-results {
+			text-align: center;
+			color: white;
+			background: rgba(255, 255, 255, 0.1);
+			padding: 40px;
+			border-radius: 15px;
+			margin: 20px 0;
+		}
+
+		.no-results h3 {
+			margin-bottom: 15px;
+			font-size: 1.5rem;
+		}
+
 		@media (max-width: 768px) {
 			.header h1 {
 				font-size: 2rem;
@@ -287,12 +324,12 @@
 	<div class="container">
 		<div class="header">
 			<h1>🤖 Reachy Mini Spaces</h1>
-			<p>Discover amazing AI-powered applications and demos</p>
+			<p>Discover AI-powered applications with the reachy_mini tag</p>
 		</div>
 
 		<div class="controls">
 			<div class="search-box">
-				<input type="text" id="searchInput" placeholder="Search spaces..." />
+				<input type="text" id="searchInput" placeholder="Search within reachy_mini spaces..." />
 			</div>
 			<div class="sort-controls">
 				<button class="sort-btn active" data-sort="likes">❤️ Likes</button>
@@ -302,7 +339,7 @@
 		</div>
 
 		<div class="stats" id="stats">
-			<div class="loading">Loading Reachy Mini spaces...</div>
+			<div class="loading">Loading spaces with reachy_mini tag...</div>
 		</div>
 
 		<div class="grid" id="spacesGrid">
@@ -316,6 +353,7 @@
 				this.filteredSpaces = [];
 				this.currentSort = 'likes';
 				this.searchTerm = '';
+				this.targetTag = 'reachy_mini';
 				this.init();
 			}
 
@@ -327,24 +365,81 @@
 
 			async loadSpaces() {
 				try {
-					const response = await fetch('https://huggingface.co/api/spaces?search=reachy-mini&sort=likes&direction=-1&limit=50');
+					// First, try to get spaces by tag
+					const response = await fetch(`https://huggingface.co/api/spaces?tags=${this.targetTag}&sort=likes&direction=-1&limit=100`);
+					
+					if (!response.ok) {
+						throw new Error(`HTTP error! status: ${response.status}`);
+					}
+
 					const data = await response.json();
 
-					this.spaces = data.map(space => ({
+					// Filter spaces that actually have the reachy_mini tag
+					const reachyMiniSpaces = data.filter(space => 
+						space.tags && space.tags.includes(this.targetTag)
+					);
+
+					this.spaces = reachyMiniSpaces.map(space => ({
 						id: space.id,
 						title: space.id.split('/').pop().replace(/-/g, ' ').replace(/\b\w/g, l => l.toUpperCase()),
 						author: space.author,
-						description: space.cardData?.short_description || 'No description available',
+						description: space.cardData?.short_description || space.cardData?.description || 'No description available',
 						likes: space.likes || 0,
 						created: new Date(space.createdAt).getTime(),
 						url: `https://huggingface.co/spaces/${space.id}`,
-						tags: space.tags || []
+						tags: space.tags || [],
+						downloads: space.downloads || 0
 					}));
 
+					// If no spaces found with tag, try alternative search
+					if (this.spaces.length === 0) {
+						await this.fallbackSearch();
+					}
+
 					this.filteredSpaces = [...this.spaces];
 					this.updateStats();
 				} catch (error) {
 					console.error('Error loading spaces:', error);
+					await this.fallbackSearch();
+				}
+			}
+
+			async fallbackSearch() {
+				try {
+					console.log('Trying fallback search...');
+					// Fallback: search by text in case tag search doesn't work
+					const response = await fetch('https://huggingface.co/api/spaces?search=reachy&sort=likes&direction=-1&limit=100');
+					
+					if (!response.ok) {
+						throw new Error(`HTTP error! status: ${response.status}`);
+					}
+
+					const data = await response.json();
+
+					// Filter for spaces that contain "reachy" or "mini" in name/description
+					const reachySpaces = data.filter(space => {
+						const name = space.id.toLowerCase();
+						const description = (space.cardData?.short_description || space.cardData?.description || '').toLowerCase();
+						return name.includes('reachy') || name.includes('mini') || 
+							   description.includes('reachy') || description.includes('mini');
+					});
+
+					this.spaces = reachySpaces.map(space => ({
+						id: space.id,
+						title: space.id.split('/').pop().replace(/-/g, ' ').replace(/\b\w/g, l => l.toUpperCase()),
+						author: space.author,
+						description: space.cardData?.short_description || space.cardData?.description || 'No description available',
+						likes: space.likes || 0,
+						created: new Date(space.createdAt).getTime(),
+						url: `https://huggingface.co/spaces/${space.id}`,
+						tags: space.tags || [],
+						downloads: space.downloads || 0
+					}));
+
+					this.filteredSpaces = [...this.spaces];
+					this.updateStats();
+				} catch (error) {
+					console.error('Fallback search also failed:', error);
 					this.showError();
 				}
 			}
@@ -373,7 +468,8 @@
 				this.filteredSpaces = this.spaces.filter(space =>
 					space.title.toLowerCase().includes(this.searchTerm) ||
 					space.author.toLowerCase().includes(this.searchTerm) ||
-					space.description.toLowerCase().includes(this.searchTerm)
+					space.description.toLowerCase().includes(this.searchTerm) ||
+					space.tags.some(tag => tag.toLowerCase().includes(this.searchTerm))
 				);
 				this.sortSpaces();
 			}
@@ -397,14 +493,44 @@
 				const statsEl = document.getElementById('stats');
 				const total = this.spaces.length;
 				const totalLikes = this.spaces.reduce((sum, space) => sum + space.likes, 0);
-				statsEl.innerHTML = `Found ${total} spaces with ${totalLikes.toLocaleString()} total likes`;
+				const filtered = this.filteredSpaces.length;
+				
+				if (total === 0) {
+					statsEl.innerHTML = `No spaces found with "${this.targetTag}" tag`;
+				} else if (filtered === total) {
+					statsEl.innerHTML = `Found ${total} spaces with "${this.targetTag}" tag (${totalLikes.toLocaleString()} total likes)`;
+				} else {
+					statsEl.innerHTML = `Showing ${filtered} of ${total} spaces with "${this.targetTag}" tag`;
+				}
 			}
 
 			renderSpaces() {
 				const grid = document.getElementById('spacesGrid');
 
+				if (this.spaces.length === 0) {
+					grid.innerHTML = `
+						<div class="no-results">
+							<h3>🔍 No Spaces Found</h3>
+							<p>No spaces were found with the "reachy_mini" tag.</p>
+							<p>This might be because:</p>
+							<ul style="text-align: left; margin-top: 15px;">
+								<li>The tag doesn't exist yet on Hugging Face</li>
+								<li>Spaces with this tag haven't been published</li>
+								<li>There might be API restrictions</li>
+							</ul>
+						</div>
+					`;
+					return;
+				}
+
 				if (this.filteredSpaces.length === 0) {
-					grid.innerHTML = '<div class="error">No spaces found matching your criteria</div>';
+					grid.innerHTML = `
+						<div class="no-results">
+							<h3>🔍 No Results</h3>
+							<p>No spaces match your search criteria.</p>
+							<p>Try adjusting your search terms or clearing the search box.</p>
+						</div>
+					`;
 					return;
 				}
 
@@ -412,7 +538,7 @@
                     <div class="app-card" onclick="window.open('${space.url}', '_blank')">
                         <div class="app-header">
                             <div class="app-icon">
-                                ${space.title.charAt(0)}
+                                ${this.getSpaceIcon(space)}
                             </div>
                             <div class="app-info">
                                 <div class="app-title">${space.title}</div>
@@ -420,6 +546,14 @@
                             </div>
                         </div>
                         <div class="app-description">${space.description}</div>
+                        ${space.tags.length > 0 ? `
+                            <div class="app-tags">
+                                ${space.tags.slice(0, 5).map(tag => `
+                                    <span class="tag ${tag === this.targetTag ? 'primary' : ''}">${tag}</span>
+                                `).join('')}
+                                ${space.tags.length > 5 ? `<span class="tag">+${space.tags.length - 5}</span>` : ''}
+                            </div>
+                        ` : ''}
                         <div class="app-stats">
                             <div class="stat-item">
                                 <span class="stat-icon">❤️</span>
@@ -434,6 +568,14 @@
                 `).join('');
 			}
 
+			getSpaceIcon(space) {
+				// Return robot emoji for reachy-related spaces, otherwise first letter
+				if (space.title.toLowerCase().includes('reachy') || space.tags.includes('reachy_mini')) {
+					return '🤖';
+				}
+				return space.title.charAt(0).toUpperCase();
+			}
+
 			formatDate(timestamp) {
 				const date = new Date(timestamp);
 				const now = new Date();
@@ -454,16 +596,11 @@
 				grid.innerHTML = `
                     <div class="error">
                         <h3>Unable to load Hugging Face Spaces</h3>
-                        <p>This might be due to CORS restrictions. The design is fully functional - you can see how it would work with real data!</p>
-                        <p>In a production environment, you'd use a backend API or proxy to fetch the data.</p>
+                        <p>This might be due to CORS restrictions or API limitations.</p>
+                        <p>The dashboard is fully functional - in a production environment, you'd use a backend API or proxy to fetch the data.</p>
                     </div>
                 `;
-
-				// Show demo data instead
-				// setTimeout(() => this.loadDemoData(), 2000);
 			}
-
-
 		}
 
 		// Initialize the app