Spaces:
Running
Running
| <html lang="en"> | |
| <head> | |
| <meta charset="UTF-8"> | |
| <title>My Hugging Face Heatmaps</title> | |
| <link href="https://fonts.googleapis.com/css2?family=Inter:wght@700;800&display=swap" rel="stylesheet"> | |
| <style> | |
| body { | |
| background: #18191a; | |
| color: #fff; | |
| font-family: 'Inter', 'Segoe UI', Arial, sans-serif; | |
| margin: 0; | |
| padding: 0; | |
| } | |
| .container { | |
| max-width: 1200px; | |
| margin: 0 auto; | |
| padding: 32px 20px 64px 20px; | |
| } | |
| .modern-title { | |
| font-weight: 800; | |
| font-size: 2.8rem; | |
| background: linear-gradient(90deg, #ffb347 0%, #ffcc33 60%, #00c3ff 100%); | |
| -webkit-background-clip: text; | |
| -webkit-text-fill-color: transparent; | |
| background-clip: text; | |
| text-fill-color: transparent; | |
| margin-bottom: 24px; | |
| display: flex; | |
| align-items: center; | |
| gap: 18px; | |
| letter-spacing: -1px; | |
| animation: fadeInDown 1.2s cubic-bezier(.18,.89,.32,1.28); | |
| } | |
| .modern-title .hf-logo { | |
| display: flex; | |
| align-items: center; | |
| height: 2.8rem; | |
| width: 2.8rem; | |
| margin-right: 4px; | |
| flex-shrink: 0; | |
| } | |
| .modern-title .hf-logo img, .modern-title .hf-logo svg { | |
| height: 100%; | |
| width: 100%; | |
| display: block; | |
| } | |
| .star-call { | |
| margin-bottom: 34px; | |
| font-size: 1.15rem; | |
| color: #ffcc33; | |
| background: #232526; | |
| border-radius: 14px; | |
| padding: 12px 18px; | |
| display: inline-block; | |
| box-shadow: 0 2px 14px #0003; | |
| font-weight: 700; | |
| animation: fadeIn 1.1s cubic-bezier(.18,.89,.32,1.28); | |
| } | |
| .search-row { | |
| display: flex; | |
| gap: 12px; | |
| align-items: center; | |
| margin-bottom: 38px; | |
| animation: fadeInDown 1.3s cubic-bezier(.18,.89,.32,1.28); | |
| } | |
| .search-row input[type="text"] { | |
| font-family: inherit; | |
| font-size: 1.1rem; | |
| padding: 10px 16px; | |
| border-radius: 12px; | |
| border: 1.5px solid #222; | |
| background: #232526; | |
| color: #fff; | |
| outline: none; | |
| width: 240px; | |
| transition: border 0.2s; | |
| } | |
| .search-row input[type="text"]:focus { | |
| border: 1.5px solid #ffcc33; | |
| } | |
| .search-row button { | |
| font-family: inherit; | |
| font-size: 1.1rem; | |
| padding: 10px 22px; | |
| border-radius: 12px; | |
| border: none; | |
| background: linear-gradient(90deg, #ffb347 0%, #ffcc33 80%); | |
| color: #222; | |
| font-weight: 800; | |
| cursor: pointer; | |
| transition: background 0.2s, color 0.2s; | |
| box-shadow: 0 2px 10px #ffb34722; | |
| } | |
| .search-row button:hover { | |
| background: linear-gradient(90deg, #00c3ff 0%, #ffcc33 100%); | |
| color: #fff; | |
| } | |
| .card-grid { | |
| display: grid; | |
| grid-template-columns: repeat(auto-fit, minmax(340px, 1fr)); | |
| gap: 36px; | |
| } | |
| .heatmap-card { | |
| background: linear-gradient(135deg, #232526 0%, #2c3e50 100%); | |
| border-radius: 24px; | |
| box-shadow: 0 8px 36px #0007, 0 1.5px 8px #00c3ff44; | |
| padding: 24px 18px 18px 18px; | |
| display: flex; | |
| flex-direction: column; | |
| align-items: center; | |
| transition: transform 0.25s cubic-bezier(.22,1,.36,1), box-shadow 0.23s; | |
| position: relative; | |
| overflow: hidden; | |
| border: 1.5px solid #232526; | |
| animation: cardFadeIn 1.2s cubic-bezier(.18,.89,.32,1.28); | |
| } | |
| .heatmap-card::before { | |
| content: ''; | |
| position: absolute; | |
| top: -60px; | |
| right: -60px; | |
| width: 120px; | |
| height: 120px; | |
| background: radial-gradient(circle at 40% 40%, #ffcc33aa 0%, #00c3ff00 100%); | |
| z-index: 0; | |
| pointer-events: none; | |
| transition: opacity 0.3s; | |
| opacity: 0.5; | |
| } | |
| .heatmap-card:hover { | |
| transform: translateY(-12px) scale(1.025); | |
| box-shadow: 0 16px 52px #00c3ff44, 0 2px 18px #ffb34733; | |
| border: 1.5px solid #ffcc33; | |
| } | |
| .heatmap-card:hover::before { | |
| opacity: 0.9; | |
| } | |
| .heatmap-label { | |
| position: relative; | |
| z-index: 1; | |
| font-size: 1.3rem; | |
| font-weight: 800; | |
| letter-spacing: 0.5px; | |
| margin-bottom: 16px; | |
| color: #ffcc33; | |
| text-shadow: 0 2px 12px #0008; | |
| text-align: center; | |
| animation: fadeInUp 1.1s cubic-bezier(.18,.89,.32,1.28); | |
| } | |
| .scroll-tip { | |
| color: #aaa; | |
| font-size: 1rem; | |
| margin: 12px 0 0 0; | |
| text-align: center; | |
| letter-spacing: 0.1px; | |
| user-select: none; | |
| display: flex; | |
| align-items: center; | |
| justify-content: center; | |
| gap: 6px; | |
| opacity: 0.85; | |
| animation: fadeIn 1.8s 1s both; | |
| } | |
| .scroll-tip .arrow { | |
| font-size: 1.3em; | |
| animation: arrowMove 1.2s infinite alternate cubic-bezier(.18,.89,.32,1.28); | |
| display: inline-block; | |
| vertical-align: middle; | |
| } | |
| .delete-btn { | |
| position: absolute; | |
| top: 14px; | |
| right: 18px; | |
| background: rgba(34, 34, 34, 0.85); | |
| border: none; | |
| color: #ffb347; | |
| font-size: 1.3rem; | |
| font-weight: bold; | |
| border-radius: 50%; | |
| width: 32px; | |
| height: 32px; | |
| cursor: pointer; | |
| z-index: 2; | |
| transition: background 0.2s, color 0.2s, transform 0.15s; | |
| display: flex; | |
| align-items: center; | |
| justify-content: center; | |
| box-shadow: 0 1px 6px #0005; | |
| } | |
| .delete-btn:hover { | |
| background: #ffb347; | |
| color: #222; | |
| transform: scale(1.13) rotate(12deg); | |
| } | |
| iframe { | |
| width: 100%; | |
| height: 260px; | |
| border-radius: 10px; | |
| border: none; | |
| background: #222; | |
| margin-bottom: 0; | |
| box-shadow: 0 1px 12px #0005; | |
| z-index: 1; | |
| animation: fadeIn 1.5s cubic-bezier(.18,.89,.32,1.28); | |
| } | |
| @media (max-width: 700px) { | |
| .modern-title { | |
| font-size: 1.5rem; | |
| } | |
| .container { | |
| padding: 12px 4px 32px 4px; | |
| } | |
| .heatmap-label { | |
| font-size: 1.09rem; | |
| } | |
| iframe { | |
| height: 180px; | |
| } | |
| .search-row input[type="text"] { | |
| width: 120px; | |
| } | |
| .modern-title .hf-logo { | |
| height: 2rem; | |
| width: 2rem; | |
| } | |
| } | |
| /* Animations */ | |
| @keyframes fadeInDown { | |
| 0% { opacity: 0; transform: translateY(-40px);} | |
| 100% { opacity: 1; transform: translateY(0);} | |
| } | |
| @keyframes fadeInUp { | |
| 0% { opacity: 0; transform: translateY(40px);} | |
| 100% { opacity: 1; transform: translateY(0);} | |
| } | |
| @keyframes fadeIn { | |
| 0% { opacity: 0;} | |
| 100% { opacity: 1;} | |
| } | |
| @keyframes cardFadeIn { | |
| 0% { opacity: 0; transform: scale(0.98);} | |
| 100% { opacity: 1; transform: scale(1);} | |
| } | |
| @keyframes arrowMove { | |
| from { transform: translateX(0);} | |
| to { transform: translateX(12px);} | |
| } | |
| </style> | |
| </head> | |
| <body> | |
| <div class="container"> | |
| <h1 class="modern-title"> | |
| <span class="hf-logo"> | |
| <img src="https://huggingface.co/front/assets/huggingface_logo-noborder.svg" alt="Hugging Face"> | |
| </span> | |
| My Hugging Face Heatmaps | |
| </h1> | |
| <div class="star-call"> | |
| If you like this Space, please give it a star! | |
| </div> | |
| <form class="search-row" id="searchForm" autocomplete="off" onsubmit="return false;"> | |
| <input type="text" id="usernameInput" placeholder="Enter username or org..." required> | |
| <button type="submit">Add Heatmap</button> | |
| </form> | |
| <div class="card-grid" id="cardGrid"> | |
| <div class="heatmap-card"> | |
| <button class="delete-btn" title="Remove this card" onclick="this.parentElement.remove()">✖️</button> | |
| <div class="heatmap-label">Kadir Nar</div> | |
| <iframe src="https://cfahlgren1-model-release-heatmap.hf.space/kadirnar"></iframe> | |
| <div class="scroll-tip"> | |
| <span>Scroll right for the latest activity</span> | |
| <span class="arrow">➡️</span> | |
| </div> | |
| </div> | |
| <div class="heatmap-card"> | |
| <button class="delete-btn" title="Remove this card" onclick="this.parentElement.remove()">✖️</button> | |
| <div class="heatmap-label">OpenSpeechHub</div> | |
| <iframe src="https://cfahlgren1-model-release-heatmap.hf.space/OpenSpeechHub"></iframe> | |
| <div class="scroll-tip"> | |
| <span>Scroll right for the latest activity</span> | |
| <span class="arrow">➡️</span> | |
| </div> | |
| </div> | |
| <div class="heatmap-card"> | |
| <button class="delete-btn" title="Remove this card" onclick="this.parentElement.remove()">✖️</button> | |
| <div class="heatmap-label">Closed-TTS</div> | |
| <iframe src="https://cfahlgren1-model-release-heatmap.hf.space/Closed-TTS"></iframe> | |
| <div class="scroll-tip"> | |
| <span>Scroll right for the latest activity</span> | |
| <span class="arrow">➡️</span> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| <script> | |
| const cardGrid = document.getElementById('cardGrid'); | |
| const searchForm = document.getElementById('searchForm'); | |
| const usernameInput = document.getElementById('usernameInput'); | |
| searchForm.addEventListener('submit', function() { | |
| const username = usernameInput.value.trim(); | |
| if (!username) return; | |
| // Check if already exists | |
| const exists = Array.from(cardGrid.querySelectorAll('.heatmap-label')).some(label => | |
| label.textContent.trim().toLowerCase() === username.toLowerCase() | |
| ); | |
| if (exists) { | |
| usernameInput.value = ''; | |
| return; | |
| } | |
| // Create card | |
| const card = document.createElement('div'); | |
| card.className = 'heatmap-card'; | |
| card.innerHTML = ` | |
| <button class="delete-btn" title="Remove this card" onclick="this.parentElement.remove()">✖️</button> | |
| <div class="heatmap-label">${username}</div> | |
| <iframe src="https://cfahlgren1-model-release-heatmap.hf.space/${encodeURIComponent(username)}"></iframe> | |
| <div class="scroll-tip"> | |
| <span>Scroll right for the latest activity</span> | |
| <span class="arrow">➡️</span> | |
| </div> | |
| `; | |
| cardGrid.appendChild(card); | |
| usernameInput.value = ''; | |
| }); | |
| </script> | |
| </body> | |
| </html> | |