Spaces:
Running
Running
| <html lang="en"> | |
| <head> | |
| <meta charset="UTF-8"> | |
| <meta name="viewport" content="width=device-width, initial-scale=1.0"> | |
| <title>Search Interface</title> | |
| <link | |
| rel="stylesheet" | |
| href="https://cdn.jsdelivr.net/npm/@picocss/pico@2/css/pico.min.css" | |
| > | |
| <style> | |
| body { | |
| padding: 2rem; | |
| display: flex; | |
| justify-content: center; | |
| flex-direction: column; /* Stack elements vertically */ | |
| align-items: center; | |
| } | |
| main { | |
| width: 100%; | |
| max-width: 800px; /* Set the max width to 800px */ | |
| } | |
| header { | |
| width: 100%; | |
| margin-bottom: 1rem; /* Ensure some space between header and search bar */ | |
| text-align: center; /* Center align header text */ | |
| } | |
| #searchQuery { | |
| width: 100%; | |
| padding: 0.8rem; | |
| font-size: 1rem; | |
| margin-bottom: 1rem; /* Add space below the input field */ | |
| border-radius: 5px; | |
| border: 1px solid #ccc; | |
| } | |
| .result-item { | |
| display: flex; | |
| justify-content: center; /* Center content horizontally */ | |
| align-items: center; /* Center content vertically */ | |
| padding: 1rem; | |
| margin: 0.5rem 0; | |
| border: 1px solid #ddd; | |
| border-radius: 8px; | |
| cursor: pointer; | |
| gap: 1rem; /* Add space between the image and text */ | |
| transition: background-color 0.3s ease; | |
| } | |
| .result-item img { | |
| border-radius: 50%; | |
| width: 50px; | |
| height: 50px; | |
| } | |
| .result-item .result-text { | |
| text-align: center; /* Center align text */ | |
| } | |
| .result-item a { | |
| display: flex; | |
| justify-content: center; /* Ensure that the content inside the link is centered */ | |
| align-items: center; | |
| gap: 1rem; /* Add space between image and text */ | |
| text-decoration: none; | |
| color: inherit; | |
| width: 100%; /* Make sure the link takes up the full width of the list item */ | |
| } | |
| .result-item a:hover { | |
| background-color: #f0f0f0; /* Light hover effect */ | |
| border-radius: 8px; | |
| } | |
| .result-item span { | |
| display: block; | |
| } | |
| .result-item .name { | |
| font-weight: bold; | |
| } | |
| ul { | |
| padding: 0; | |
| } | |
| </style> | |
| </head> | |
| <body> | |
| <header> | |
| <h1>Search for Organizations on Hugging Face</h1> | |
| </header> | |
| <main> | |
| <input type="text" id="searchQuery" placeholder="Search query" autofocus> | |
| <ul id="resultsList"></ul> | |
| </main> | |
| <script> | |
| const searchInput = document.getElementById('searchQuery'); | |
| const resultsList = document.getElementById('resultsList'); | |
| let debounceTimer; | |
| searchInput.addEventListener('input', function() { | |
| clearTimeout(debounceTimer); | |
| debounceTimer = setTimeout(function() { | |
| const query = searchInput.value.trim(); | |
| if (query) { | |
| fetchResults(query); | |
| } else { | |
| resultsList.innerHTML = ''; // Clear results if search query is empty | |
| } | |
| }, 200); // Wait for 200ms after the user stops typing | |
| }); | |
| async function fetchResults(query) { | |
| try { | |
| const params = new URLSearchParams({ | |
| type: 'org', | |
| limit: 20, | |
| q: query | |
| }); | |
| const response = await fetch(`https://huggingface.co/api/quicksearch?${params.toString()}`); | |
| const data = await response.json(); | |
| displayResults(data.orgs); | |
| } catch (error) { | |
| console.error('Error fetching search results:', error); | |
| } | |
| } | |
| function displayResults(orgs) { | |
| resultsList.innerHTML = ''; // Clear previous results | |
| if (orgs.length === 0) { | |
| resultsList.innerHTML = '<li>No organizations found.</li>'; | |
| return; | |
| } | |
| orgs.forEach(org => { | |
| const listItem = document.createElement('li'); | |
| listItem.classList.add('result-item'); | |
| // Wrap the whole result item in an anchor link | |
| listItem.innerHTML = ` | |
| <a href="https://huggingface.co/${org.name}" target="_blank"> | |
| <img src="${org.avatarUrl}" alt="${org.fullname}"> | |
| <div class="result-text"> | |
| <span class="name">${org.fullname}</span> | |
| <span>(${org.name})</span> | |
| </div> | |
| </a> | |
| `; | |
| resultsList.appendChild(listItem); | |
| }); | |
| } | |
| </script> | |
| </body> | |
| </html> |