Spaces:

Chunte
/

Top-Downloaded-Trending-Models

Running

App Files Files Community

Chunte HF Staff commited on 5 days ago

Commit

d094e2b

verified ·

1 Parent(s): a4ea100

Upload index.html

Browse files

Files changed (1) hide show

index.html +302 -22

index.html CHANGED Viewed

@@ -42,10 +42,10 @@ canvas { display: block; }
   text-decoration: none;
 }
-/* ── Add Model Pill Button ── */
 #addModelBtn {
   position: fixed;
-  bottom: 24px;
   right: 24px;
   z-index: 10;
 }
@@ -195,6 +195,116 @@ canvas { display: block; }
 @keyframes pillSpin {
   to { transform: rotate(360deg); }
 }
 </style>
 </head>
 <body>
@@ -213,8 +323,15 @@ canvas { display: block; }
     <div class="active-wrap">
       <span class="orange-dot"></span>
       <span class="model-name"></span>
-      <button class="remove-btn">×</button>
     </div>
   </div>
 </div>
 <script>
@@ -312,6 +429,7 @@ const FALLBACK = [
 ];
 let models;
 try {
   // Fetch trending models, then pick the top 10 by downloads
   const res = await fetch('https://huggingface.co/api/models?sort=trendingScore&limit=50');
@@ -330,16 +448,18 @@ try {
   });
   // Sort by downloads descending and take top 10
   all.sort((a, b) => b.downloads - a.downloads);
   models = all.slice(0, 10);
 } catch (e) {
   models = FALLBACK.map(m => {
     const author = m.id.includes('/') ? m.id.split('/')[0] : '';
     return { ...m, author: author, avatarUrl: '' };
   });
 }
-// Fetch author avatars in parallel (non-blocking)
-const uniqueAuthors = [...new Set(models.map(m => m.author).filter(Boolean))];
 const avatarMap = {};
 await Promise.all(uniqueAuthors.map(async (author) => {
   try {
@@ -353,6 +473,9 @@ await Promise.all(uniqueAuthors.map(async (author) => {
 for (const m of models) {
   if (avatarMap[m.author]) m.avatarUrl = avatarMap[m.author];
 }
 // ── Mass Mapping ───────────────────────────────────────────
 const D = models.map(m => m.downloads);
@@ -1341,15 +1464,25 @@ function buildColoredSVGImage(svgText, hexColor, renderSize) {
   return img;
 }
 // Preload all icon SVGs in both COLOR and ORANGE variants
 async function preloadTaskIcons() {
   const colors = [COLOR, ORANGE];
   const entries = Object.entries(TASK_ICON_FILES);
   await Promise.all(entries.map(async ([task, file]) => {
     try {
-      const res = await fetch(ICON_ASSET_DIR + file);
-      if (!res.ok) return;
-      const svgText = await res.text();
       taskIconImgs[task] = {};
       for (const c of colors) {
         const img = buildColoredSVGImage(svgText, c, ICON_RENDER_SIZE);
@@ -1736,22 +1869,27 @@ canvas.addEventListener('mouseleave', () => {
   cursorOnCanvas = false;  // triggers spring snapback
 });
-// ── Custom Model: Pill Button Logic ─────────────────────────
 const addPill = document.getElementById('addPill');
 const pillInput = addPill.querySelector('input[type="text"]');
 const pillAddBtn = addPill.querySelector('.add-btn');
 const pillError = addPill.querySelector('.error-msg');
 const pillModelName = addPill.querySelector('.model-name');
 const pillRemoveBtn = addPill.querySelector('.remove-btn');
 // Pill states: 'idle' | 'expanded' | 'loading' | 'active'
 let pillState = 'idle';
 let pillAnim = null;
 function animatePill(toState) {
-  // Capture current width
   const fromW = addPill.offsetWidth;
-  // Apply new state classes
   addPill.classList.remove('expanded', 'active', 'loading');
   pillError.textContent = '';
   pillError.style.display = 'none';
@@ -1765,9 +1903,7 @@ function animatePill(toState) {
     const shortName = m.id.includes('/') ? m.id.split('/')[1] : m.id;
     pillModelName.textContent = shortName;
   }
-  // Measure target width
   const toW = addPill.offsetWidth;
-  // Animate width with spring-like easing
   if (pillAnim) pillAnim.cancel();
   if (fromW !== toW) {
     pillAnim = addPill.animate(
@@ -1779,21 +1915,136 @@ function animatePill(toState) {
 }
 function setPillState(state) {
-  const prev = pillState;
   pillState = state;
   animatePill(state);
   if (state === 'expanded') {
     setTimeout(() => pillInput.focus(), 80);
   }
 }
 // Idle → click → expand
 addPill.addEventListener('click', (e) => {
   if (pillState === 'idle') {
     setPillState('expanded');
     e.stopPropagation();
   } else if (pillState === 'active') {
-    // Click on pill body (not remove btn) → replace: remove current, expand
     if (!e.target.classList.contains('remove-btn')) {
       removeCustomModel();
       setPillState('expanded');
@@ -1817,7 +2068,7 @@ pillAddBtn.addEventListener('click', (e) => {
   if (val) submitCustomModel(val);
 });
-// Enter key in input
 pillInput.addEventListener('keydown', (e) => {
   if (e.key === 'Enter') {
     e.preventDefault();
@@ -1828,19 +2079,50 @@ pillInput.addEventListener('keydown', (e) => {
   }
 });
-// Click input to prevent propagation
 pillInput.addEventListener('click', (e) => e.stopPropagation());
-// Click outside → collapse
 document.addEventListener('click', (e) => {
-  if (pillState === 'expanded' && !addPill.contains(e.target)) {
     setPillState(customModelActive ? 'active' : 'idle');
   }
 });
 // ── submitCustomModel: fetch model data from HF API ─────────
 async function submitCustomModel(modelId) {
-  // Clean up model ID
   modelId = modelId.replace(/^https?:\/\/huggingface\.co\//, '').replace(/\/$/, '');
   setPillState('loading');
@@ -1860,7 +2142,6 @@ async function submitCustomModel(modelId) {
     const task = data.pipeline_tag || 'unknown';
     const downloads = data.downloads || 1;
-    // Fetch avatar if new author
     let avatarUrl = '';
     if (author && avatarMap[author]) {
       avatarUrl = avatarMap[author];
@@ -1874,7 +2155,6 @@ async function submitCustomModel(modelId) {
       } catch (_) {}
     }
-    // If there's already a custom model, remove it first
     if (customModelActive) removeCustomModel();
     insertCustomModel({

   text-decoration: none;
 }
+/* ── Add Model Pill Button (top-right) ── */
 #addModelBtn {
   position: fixed;
+  top: 24px;
   right: 24px;
   z-index: 10;
 }
 @keyframes pillSpin {
   to { transform: rotate(360deg); }
 }
+/* ── Model Dropdown (below pill) ── */
+#modelDropdown {
+  position: absolute;
+  top: calc(100% + 8px);
+  right: 0;
+  width: 380px;
+  max-height: 420px;
+  background: #161513;
+  border: 1px solid rgba(246,244,239,0.1);
+  border-radius: 12px;
+  overflow: hidden;
+  display: none;
+  flex-direction: column;
+  box-shadow: 0 16px 48px rgba(0,0,0,0.35);
+  z-index: 20;
+}
+#modelDropdown.open {
+  display: flex;
+}
+.dropdown-search {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  padding: 10px 14px;
+  border-bottom: 1px solid rgba(246,244,239,0.08);
+}
+.dropdown-search svg {
+  width: 16px;
+  height: 16px;
+  flex-shrink: 0;
+  opacity: 0.4;
+}
+.dropdown-search input {
+  flex: 1;
+  background: transparent;
+  border: none;
+  outline: none;
+  color: #F6F4EF;
+  font: 400 13px/1 'Inter', sans-serif;
+  caret-color: #E8820C;
+}
+.dropdown-search input::placeholder { color: rgba(246,244,239,0.3); }
+.dropdown-content {
+  overflow-y: auto;
+  flex: 1;
+  padding: 4px 0;
+}
+.dropdown-section-header {
+  padding: 10px 14px 4px;
+  font: 500 11px/1 'Inter', sans-serif;
+  color: #E8820C;
+  display: flex;
+  align-items: center;
+  gap: 5px;
+  text-transform: uppercase;
+  letter-spacing: 0.03em;
+}
+.dropdown-model {
+  display: flex;
+  align-items: center;
+  gap: 10px;
+  padding: 8px 14px;
+  cursor: pointer;
+  transition: background 0.1s;
+  color: rgba(246,244,239,0.85);
+  font: 400 13px/1 'Inter', sans-serif;
+}
+.dropdown-model:hover, .dropdown-model.selected {
+  background: rgba(246,244,239,0.07);
+}
+.dropdown-model img {
+  width: 24px;
+  height: 24px;
+  border-radius: 5px;
+  object-fit: cover;
+  background: rgba(246,244,239,0.08);
+  flex-shrink: 0;
+}
+.dropdown-avatar-placeholder {
+  width: 24px;
+  height: 24px;
+  border-radius: 5px;
+  background: rgba(246,244,239,0.06);
+  flex-shrink: 0;
+}
+.dropdown-loading {
+  padding: 24px;
+  text-align: center;
+}
+.dropdown-spinner {
+  display: inline-block;
+  width: 16px;
+  height: 16px;
+  border: 2px solid rgba(246,244,239,0.12);
+  border-top-color: #E8820C;
+  border-radius: 50%;
+  animation: pillSpin 0.6s linear infinite;
+}
+.dropdown-empty {
+  padding: 24px 14px;
+  color: rgba(246,244,239,0.35);
+  text-align: center;
+  font: 400 13px/1 'Inter', sans-serif;
+}
 </style>
 </head>
 <body>
     <div class="active-wrap">
       <span class="orange-dot"></span>
       <span class="model-name"></span>
+      <button class="remove-btn">&times;</button>
+    </div>
+  </div>
+  <div id="modelDropdown">
+    <div class="dropdown-search">
+      <svg viewBox="0 0 18 18" fill="none" stroke="rgba(246,244,239,0.5)" stroke-width="2" stroke-linecap="round"><circle cx="7.5" cy="7.5" r="5.5"/><line x1="11.5" y1="11.5" x2="16" y2="16"/></svg>
+      <input type="text" id="dropdownSearchInput" placeholder="Search models..." autocomplete="off" />
     </div>
+    <div class="dropdown-content" id="dropdownContent"></div>
   </div>
 </div>
 <script>
 ];
 let models;
+let allTrendingModels = [];
 try {
   // Fetch trending models, then pick the top 10 by downloads
   const res = await fetch('https://huggingface.co/api/models?sort=trendingScore&limit=50');
   });
   // Sort by downloads descending and take top 10
   all.sort((a, b) => b.downloads - a.downloads);
+  allTrendingModels = all.slice();
   models = all.slice(0, 10);
 } catch (e) {
   models = FALLBACK.map(m => {
     const author = m.id.includes('/') ? m.id.split('/')[0] : '';
     return { ...m, author: author, avatarUrl: '' };
   });
+  allTrendingModels = models.slice();
 }
+// Fetch author avatars in parallel (non-blocking) — covers all 50 trending models
+const uniqueAuthors = [...new Set(allTrendingModels.map(m => m.author).filter(Boolean))];
 const avatarMap = {};
 await Promise.all(uniqueAuthors.map(async (author) => {
   try {
 for (const m of models) {
   if (avatarMap[m.author]) m.avatarUrl = avatarMap[m.author];
 }
+for (const m of allTrendingModels) {
+  if (avatarMap[m.author]) m.avatarUrl = avatarMap[m.author];
+}
 // ── Mass Mapping ───────────────────────────────────────────
 const D = models.map(m => m.downloads);
   return img;
 }
+// Load SVG text via XHR (works on file:// unlike fetch)
+function loadSVGText(url) {
+  return new Promise((resolve, reject) => {
+    const xhr = new XMLHttpRequest();
+    xhr.open('GET', url, true);
+    xhr.onload = () => xhr.status === 200 || xhr.status === 0 ? resolve(xhr.responseText) : reject();
+    xhr.onerror = reject;
+    xhr.send();
+  });
+}
 // Preload all icon SVGs in both COLOR and ORANGE variants
 async function preloadTaskIcons() {
   const colors = [COLOR, ORANGE];
   const entries = Object.entries(TASK_ICON_FILES);
   await Promise.all(entries.map(async ([task, file]) => {
     try {
+      const svgText = await loadSVGText(ICON_ASSET_DIR + file);
+      if (!svgText) return;
       taskIconImgs[task] = {};
       for (const c of colors) {
         const img = buildColoredSVGImage(svgText, c, ICON_RENDER_SIZE);
   cursorOnCanvas = false;  // triggers spring snapback
 });
+// ── Custom Model: Pill Button + Dropdown Logic ──────────────
 const addPill = document.getElementById('addPill');
 const pillInput = addPill.querySelector('input[type="text"]');
 const pillAddBtn = addPill.querySelector('.add-btn');
 const pillError = addPill.querySelector('.error-msg');
 const pillModelName = addPill.querySelector('.model-name');
 const pillRemoveBtn = addPill.querySelector('.remove-btn');
+const dropdown = document.getElementById('modelDropdown');
+const dropdownInput = document.getElementById('dropdownSearchInput');
+const dropdownContent = document.getElementById('dropdownContent');
 // Pill states: 'idle' | 'expanded' | 'loading' | 'active'
 let pillState = 'idle';
 let pillAnim = null;
+let dropdownOpen = false;
+let searchTimer = null;
+let selectedIdx = -1;
+let currentItems = [];
 function animatePill(toState) {
   const fromW = addPill.offsetWidth;
   addPill.classList.remove('expanded', 'active', 'loading');
   pillError.textContent = '';
   pillError.style.display = 'none';
     const shortName = m.id.includes('/') ? m.id.split('/')[1] : m.id;
     pillModelName.textContent = shortName;
   }
   const toW = addPill.offsetWidth;
   if (pillAnim) pillAnim.cancel();
   if (fromW !== toW) {
     pillAnim = addPill.animate(
 }
 function setPillState(state) {
   pillState = state;
   animatePill(state);
   if (state === 'expanded') {
     setTimeout(() => pillInput.focus(), 80);
+    openDropdown();
+  } else {
+    closeDropdown();
+  }
+}
+// ── Dropdown open/close ──
+function openDropdown() {
+  dropdownOpen = true;
+  dropdown.classList.add('open');
+  dropdownInput.value = '';
+  selectedIdx = -1;
+  renderTrending();
+}
+function closeDropdown() {
+  dropdownOpen = false;
+  dropdown.classList.remove('open');
+  selectedIdx = -1;
+  if (searchTimer) clearTimeout(searchTimer);
+}
+// ── Dropdown rendering ──
+function modelCardHTML(m, idx) {
+  const shortName = m.id.includes('/') ? m.id.split('/')[1] : m.id;
+  const avatarSrc = m.avatarUrl || avatarMap[m.author] || '';
+  const imgTag = avatarSrc
+    ? '<img src="' + avatarSrc + '" alt="" />'
+    : '<div class="dropdown-avatar-placeholder"></div>';
+  return '<div class="dropdown-model" data-model-id="' + m.id + '" data-idx="' + idx + '">' + imgTag + '<span>' + shortName + '</span></div>';
+}
+function attachCardListeners() {
+  dropdownContent.querySelectorAll('.dropdown-model').forEach(function(el) {
+    el.addEventListener('click', function(e) {
+      e.stopPropagation();
+      const modelId = el.dataset.modelId;
+      setPillState('idle');
+      submitCustomModel(modelId);
+    });
+  });
+}
+function updateSelection() {
+  const cards = dropdownContent.querySelectorAll('.dropdown-model');
+  cards.forEach(function(el, i) { el.classList.toggle('selected', i === selectedIdx); });
+  if (selectedIdx >= 0 && selectedIdx < cards.length) {
+    cards[selectedIdx].scrollIntoView({ block: 'nearest' });
+  }
+}
+function renderTrending() {
+  currentItems = allTrendingModels.slice(0, 20);
+  let html = '<div class="dropdown-section-header">\uD83D\uDD25 Trending</div>';
+  currentItems.forEach(function(m, i) { html += modelCardHTML(m, i); });
+  dropdownContent.innerHTML = html;
+  selectedIdx = -1;
+  attachCardListeners();
+}
+function renderSearchResults(query, items) {
+  if (!items.length) {
+    dropdownContent.innerHTML = '<div class="dropdown-empty">No models found</div>';
+    currentItems = [];
+    return;
+  }
+  const trendingIds = new Set(allTrendingModels.map(function(m) { return m.id; }));
+  const q = query.toLowerCase();
+  const trendingMatches = allTrendingModels.filter(function(m) { return m.id.toLowerCase().includes(q); });
+  const others = items.filter(function(m) { return !trendingIds.has(m.id); });
+  let html = '';
+  let idx = 0;
+  if (trendingMatches.length) {
+    html += '<div class="dropdown-section-header">\uD83D\uDD25 Trending</div>';
+    trendingMatches.forEach(function(m) { html += modelCardHTML(m, idx++); });
+  }
+  if (others.length) {
+    html += '<div class="dropdown-section-header" style="color:rgba(246,244,239,0.35)">Other models</div>';
+    others.forEach(function(m) { html += modelCardHTML(m, idx++); });
+  }
+  currentItems = trendingMatches.concat(others);
+  dropdownContent.innerHTML = html;
+  selectedIdx = -1;
+  attachCardListeners();
+}
+async function searchModels(query) {
+  if (!query.trim()) { renderTrending(); return; }
+  dropdownContent.innerHTML = '<div class="dropdown-loading"><div class="dropdown-spinner"></div></div>';
+  try {
+    const res = await fetch('https://huggingface.co/api/models?search=' + encodeURIComponent(query) + '&sort=downloads&direction=-1&limit=20');
+    if (!res.ok) throw new Error(res.status);
+    const data = await res.json();
+    const results = data.map(function(m) {
+      const fullId = m.modelId || m.id;
+      return {
+        id: fullId,
+        downloads: m.downloads || 0,
+        task: m.pipeline_tag || 'unknown',
+        author: fullId.includes('/') ? fullId.split('/')[0] : '',
+        avatarUrl: ''
+      };
+    });
+    const newAuthors = [...new Set(results.map(function(m) { return m.author; }).filter(function(a) { return a && !avatarMap[a]; }))];
+    await Promise.all(newAuthors.map(async function(author) {
+      try {
+        const r = await fetch('https://huggingface.co/api/organizations/' + author + '/avatar');
+        if (r.ok) { const j = await r.json(); if (j.avatarUrl) avatarMap[author] = j.avatarUrl; }
+      } catch (_) {}
+    }));
+    results.forEach(function(m) { if (avatarMap[m.author]) m.avatarUrl = avatarMap[m.author]; });
+    renderSearchResults(query, results);
+  } catch (e) {
+    dropdownContent.innerHTML = '<div class="dropdown-empty">Search failed. Try again.</div>';
   }
 }
+// ── Pill event listeners ──
 // Idle → click → expand
 addPill.addEventListener('click', (e) => {
   if (pillState === 'idle') {
     setPillState('expanded');
     e.stopPropagation();
   } else if (pillState === 'active') {
     if (!e.target.classList.contains('remove-btn')) {
       removeCustomModel();
       setPillState('expanded');
   if (val) submitCustomModel(val);
 });
+// Enter key in pill input → submit typed model
 pillInput.addEventListener('keydown', (e) => {
   if (e.key === 'Enter') {
     e.preventDefault();
   }
 });
 pillInput.addEventListener('click', (e) => e.stopPropagation());
+// Dropdown search input
+dropdownInput.addEventListener('input', function() {
+  if (searchTimer) clearTimeout(searchTimer);
+  searchTimer = setTimeout(function() {
+    searchModels(dropdownInput.value);
+  }, 300);
+});
+dropdownInput.addEventListener('click', (e) => e.stopPropagation());
+// Keyboard navigation in dropdown search
+dropdownInput.addEventListener('keydown', function(e) {
+  const cards = dropdownContent.querySelectorAll('.dropdown-model');
+  if (e.key === 'ArrowDown') {
+    e.preventDefault();
+    selectedIdx = Math.min(selectedIdx + 1, cards.length - 1);
+    updateSelection();
+  } else if (e.key === 'ArrowUp') {
+    e.preventDefault();
+    selectedIdx = Math.max(selectedIdx - 1, -1);
+    updateSelection();
+  } else if (e.key === 'Enter') {
+    e.preventDefault();
+    if (selectedIdx >= 0 && selectedIdx < cards.length) {
+      const modelId = cards[selectedIdx].dataset.modelId;
+      setPillState('idle');
+      submitCustomModel(modelId);
+    }
+  } else if (e.key === 'Escape') {
+    setPillState(customModelActive ? 'active' : 'idle');
+  }
+});
+// Click outside → collapse pill + close dropdown
 document.addEventListener('click', (e) => {
+  if (pillState === 'expanded' && !document.getElementById('addModelBtn').contains(e.target)) {
     setPillState(customModelActive ? 'active' : 'idle');
   }
 });
 // ── submitCustomModel: fetch model data from HF API ─────────
 async function submitCustomModel(modelId) {
   modelId = modelId.replace(/^https?:\/\/huggingface\.co\//, '').replace(/\/$/, '');
   setPillState('loading');
     const task = data.pipeline_tag || 'unknown';
     const downloads = data.downloads || 1;
     let avatarUrl = '';
     if (author && avatarMap[author]) {
       avatarUrl = avatarMap[author];
       } catch (_) {}
     }
     if (customModelActive) removeCustomModel();
     insertCustomModel({