| <!DOCTYPE html> |
| <html lang="en"> |
| <head> |
| <meta charset="UTF-8"> |
| <meta name="viewport" content="width=device-width, initial-scale=1.0"> |
| <title>huggingface-user-stats</title> |
| <meta name="description" content="View detailed statistics for any HuggingFace user — models, datasets, spaces, lifetime downloads, and likes."> |
| <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css"> |
| <script src="https://cdnjs.cloudflare.com/ajax/libs/jspdf/2.5.1/jspdf.umd.min.js"></script> |
| <script src="https://cdnjs.cloudflare.com/ajax/libs/jspdf-autotable/3.5.28/jspdf.plugin.autotable.min.js"></script> |
| <style> |
| @import url('https://fonts.googleapis.com/css2?family=JetBrains+Mono:wght@300;400;500;600;700&display=swap'); |
| |
| * { box-sizing: border-box; margin: 0; padding: 0; } |
| |
| body { |
| font-family: 'JetBrains Mono', 'Fira Code', 'Consolas', 'Courier New', monospace; |
| background: #000000; |
| color: #ffffff; |
| -webkit-font-smoothing: antialiased; |
| min-height: 100vh; |
| } |
| |
| button, input, select { font-family: inherit; } |
| a { text-decoration: none; color: inherit; } |
| |
| ::selection { background: #ffffff; color: #000000; } |
| |
| ::-webkit-scrollbar { width: 6px; height: 6px; } |
| ::-webkit-scrollbar-thumb { background: #333333; border-radius: 3px; } |
| ::-webkit-scrollbar-thumb:hover { background: #555555; } |
| ::-webkit-scrollbar-track { background: #000000; } |
| |
| .terminal-shell { |
| max-width: 1100px; |
| margin: 0 auto; |
| padding: 0; |
| min-height: 100vh; |
| display: flex; |
| flex-direction: column; |
| } |
| |
| |
| .title-bar { |
| display: flex; |
| align-items: center; |
| padding: 14px 20px; |
| border-bottom: 1px solid #222222; |
| gap: 12px; |
| user-select: none; |
| position: sticky; |
| top: 0; |
| background: #000000; |
| z-index: 100; |
| } |
| |
| .title-dot { |
| width: 10px; |
| height: 10px; |
| border-radius: 50%; |
| background: #ffffff; |
| flex-shrink: 0; |
| box-shadow: 0 0 6px rgba(255,255,255,0.4); |
| } |
| |
| .title-text { |
| font-size: 0.85rem; |
| font-weight: 600; |
| color: #ffffff; |
| letter-spacing: 0.02em; |
| } |
| |
| .title-actions { |
| margin-left: auto; |
| display: flex; |
| gap: 8px; |
| align-items: center; |
| } |
| |
| .title-btn { |
| background: transparent; |
| border: 1px solid #333333; |
| color: #888888; |
| padding: 5px 12px; |
| border-radius: 3px; |
| cursor: pointer; |
| font-size: 0.72rem; |
| font-weight: 500; |
| transition: all 0.15s; |
| display: flex; |
| align-items: center; |
| gap: 6px; |
| } |
| .title-btn:hover { border-color: #ffffff; color: #ffffff; } |
| .title-btn.active-token { color: #ffffff; border-color: #555555; } |
| |
| |
| .token-section { |
| border-bottom: 1px solid #222222; |
| padding: 14px 20px; |
| animation: termSlide 0.2s ease-out; |
| } |
| |
| @keyframes termSlide { |
| from { opacity: 0; max-height: 0; } |
| to { opacity: 1; max-height: 200px; } |
| } |
| |
| .token-row { |
| display: flex; |
| gap: 10px; |
| align-items: center; |
| } |
| |
| .token-prompt { |
| color: #888888; |
| font-size: 0.78rem; |
| flex-shrink: 0; |
| } |
| |
| .token-row input { |
| background: #111111; |
| border: 1px solid #333333; |
| padding: 7px 12px; |
| border-radius: 3px; |
| flex: 1; |
| color: #ffffff; |
| font-size: 0.78rem; |
| } |
| .token-row input:focus { |
| outline: none; |
| border-color: #ffffff; |
| } |
| |
| .token-row button { |
| background: #ffffff; |
| color: #000000; |
| border: none; |
| padding: 7px 16px; |
| border-radius: 3px; |
| cursor: pointer; |
| font-weight: 600; |
| font-size: 0.78rem; |
| transition: opacity 0.15s; |
| } |
| .token-row button:hover { opacity: 0.85; } |
| |
| .token-note { |
| font-size: 0.68rem; |
| color: #555555; |
| margin-top: 8px; |
| } |
| |
| |
| .term-body { |
| padding: 20px; |
| flex: 1; |
| display: flex; |
| flex-direction: column; |
| } |
| |
| |
| .input-line { |
| display: flex; |
| gap: 10px; |
| margin-bottom: 20px; |
| flex-wrap: wrap; |
| } |
| |
| .prompt-group { |
| display: flex; |
| align-items: center; |
| background: #0a0a0a; |
| border: 1px solid #222222; |
| border-radius: 3px; |
| padding: 0 14px; |
| height: 40px; |
| flex: 1; |
| transition: border-color 0.15s; |
| } |
| .prompt-group:focus-within { |
| border-color: #ffffff; |
| } |
| |
| .prompt-symbol { |
| color: #555555; |
| font-size: 0.82rem; |
| margin-right: 8px; |
| white-space: nowrap; |
| font-weight: 500; |
| } |
| |
| .prompt-group input { |
| background: transparent; |
| border: none; |
| color: #ffffff; |
| width: 100%; |
| outline: none; |
| font-size: 0.82rem; |
| font-weight: 400; |
| } |
| .prompt-group input::placeholder { color: #444444; } |
| |
| .exec-btn { |
| background: #ffffff; |
| color: #000000; |
| border: none; |
| padding: 0 24px; |
| border-radius: 3px; |
| font-weight: 700; |
| cursor: pointer; |
| height: 40px; |
| display: flex; |
| align-items: center; |
| gap: 8px; |
| font-size: 0.82rem; |
| transition: opacity 0.15s; |
| white-space: nowrap; |
| } |
| .exec-btn:hover { opacity: 0.85; } |
| .exec-btn:disabled { opacity: 0.4; cursor: wait; } |
| |
| |
| #statusMsg { |
| padding: 10px 14px; |
| margin-bottom: 14px; |
| font-size: 0.78rem; |
| border-radius: 3px; |
| display: none; |
| border: 1px solid #222222; |
| } |
| .error { color: #ffffff; background: #1a0000; border-color: #440000 !important; } |
| .loading { color: #ffffff; background: #0a0a0a; border-color: #333333 !important; } |
| |
| |
| .empty-state { |
| text-align: center; |
| padding-top: 40px; |
| } |
| |
| .empty-title { |
| font-size: 1.1rem; |
| font-weight: 600; |
| color: #ffffff; |
| margin-bottom: 8px; |
| } |
| |
| .empty-desc { |
| color: #666666; |
| font-size: 0.8rem; |
| margin-bottom: 32px; |
| line-height: 1.6; |
| } |
| |
| .section-label { |
| font-size: 0.7rem; |
| color: #555555; |
| text-transform: uppercase; |
| letter-spacing: 2px; |
| font-weight: 600; |
| margin-bottom: 14px; |
| } |
| |
| .org-cloud { |
| display: flex; |
| justify-content: center; |
| gap: 8px; |
| flex-wrap: wrap; |
| max-width: 850px; |
| margin: 0 auto; |
| } |
| |
| .user-chip { |
| background: transparent; |
| border: 1px solid #222222; |
| color: #888888; |
| padding: 6px 14px; |
| border-radius: 3px; |
| cursor: pointer; |
| font-size: 0.75rem; |
| font-weight: 500; |
| transition: all 0.15s; |
| } |
| .user-chip:hover { |
| border-color: #ffffff; |
| color: #ffffff; |
| } |
| |
| |
| .profile-block { |
| border: 1px solid #222222; |
| border-radius: 3px; |
| padding: 20px; |
| margin-bottom: 16px; |
| animation: termSlide 0.25s ease-out; |
| } |
| |
| .profile-top { |
| display: flex; |
| align-items: center; |
| gap: 16px; |
| } |
| |
| .profile-avatar { |
| width: 56px; |
| height: 56px; |
| border-radius: 50%; |
| border: 2px solid #333333; |
| display: flex; |
| align-items: center; |
| justify-content: center; |
| overflow: hidden; |
| flex-shrink: 0; |
| background: #111111; |
| } |
| .profile-avatar img { width: 100%; height: 100%; object-fit: cover; border-radius: 50%; } |
| .profile-avatar .avatar-letter { |
| font-size: 1.4rem; |
| font-weight: 700; |
| color: #666666; |
| } |
| |
| .profile-info { flex: 1; } |
| |
| .profile-name { |
| font-size: 1rem; |
| font-weight: 700; |
| color: #ffffff; |
| display: flex; |
| align-items: center; |
| gap: 10px; |
| flex-wrap: wrap; |
| } |
| .profile-name a { color: #ffffff; } |
| .profile-name a:hover { text-decoration: underline; } |
| |
| .profile-fullname { |
| font-size: 0.78rem; |
| color: #666666; |
| margin-top: 2px; |
| } |
| |
| .profile-social { |
| display: flex; |
| gap: 16px; |
| margin-top: 8px; |
| flex-wrap: wrap; |
| } |
| |
| .social-stat { |
| display: flex; |
| align-items: center; |
| gap: 6px; |
| font-size: 0.75rem; |
| color: #666666; |
| font-weight: 500; |
| cursor: pointer; |
| transition: color 0.15s; |
| } |
| .social-stat:hover { color: #ffffff; } |
| .social-stat i { font-size: 0.72rem; } |
| .social-stat .social-num { |
| font-weight: 700; |
| color: #ffffff; |
| } |
| |
| |
| .contribution-section { |
| margin-top: 20px; |
| padding-top: 20px; |
| border-top: 1px solid #1a1a1a; |
| } |
| |
| .contrib-header { |
| display: flex; |
| justify-content: space-between; |
| align-items: center; |
| margin-bottom: 12px; |
| flex-wrap: wrap; |
| gap: 10px; |
| } |
| |
| .contrib-title { |
| font-size: 0.72rem; |
| font-weight: 600; |
| color: #888888; |
| text-transform: uppercase; |
| letter-spacing: 1px; |
| } |
| |
| .contrib-total { |
| font-size: 0.72rem; |
| color: #555555; |
| font-weight: 500; |
| } |
| .contrib-total span { color: #ffffff; font-weight: 700; } |
| |
| .contrib-map-wrapper { |
| overflow-x: auto; |
| padding-bottom: 4px; |
| } |
| |
| .contrib-map { |
| display: grid; |
| grid-template-rows: repeat(7, 14px); |
| grid-auto-flow: column; |
| grid-auto-columns: 14px; |
| gap: 3px; |
| min-width: fit-content; |
| } |
| |
| .contrib-cell { |
| width: 14px; |
| height: 14px; |
| border-radius: 2px; |
| background: #111111; |
| transition: transform 0.15s; |
| } |
| .contrib-cell:hover { |
| transform: scale(1.4); |
| z-index: 2; |
| position: relative; |
| } |
| |
| .contrib-cell[data-level="0"] { background: #111111; } |
| .contrib-cell[data-level="1"] { background: #333333; } |
| .contrib-cell[data-level="2"] { background: #555555; } |
| .contrib-cell[data-level="3"] { background: #999999; } |
| .contrib-cell[data-level="4"] { background: #ffffff; } |
| |
| .contrib-legend { |
| display: flex; |
| align-items: center; |
| gap: 6px; |
| justify-content: flex-end; |
| margin-top: 8px; |
| font-size: 0.65rem; |
| color: #555555; |
| } |
| |
| .contrib-legend .contrib-cell { |
| width: 12px; |
| height: 12px; |
| cursor: default; |
| } |
| .contrib-legend .contrib-cell:hover { transform: none; } |
| |
| .contrib-months { |
| display: flex; |
| gap: 3px; |
| margin-bottom: 6px; |
| font-size: 0.6rem; |
| color: #555555; |
| font-weight: 500; |
| padding-left: 0; |
| } |
| .contrib-months span { min-width: 14px; text-align: center; } |
| |
| .contrib-tooltip { |
| position: fixed; |
| background: #111111; |
| border: 1px solid #333333; |
| border-radius: 3px; |
| padding: 6px 10px; |
| font-size: 0.68rem; |
| pointer-events: none; |
| z-index: 100; |
| display: none; |
| color: #ffffff; |
| } |
| |
| .contrib-years { |
| display: flex; |
| gap: 6px; |
| flex-wrap: wrap; |
| } |
| |
| .contrib-year-btn { |
| background: transparent; |
| border: 1px solid #222222; |
| color: #666666; |
| padding: 4px 12px; |
| border-radius: 3px; |
| cursor: pointer; |
| font-size: 0.68rem; |
| font-weight: 600; |
| transition: all 0.15s; |
| white-space: nowrap; |
| } |
| .contrib-year-btn:hover { border-color: #555555; color: #aaaaaa; } |
| .contrib-year-btn.active { background: #ffffff; color: #000000; border-color: #ffffff; } |
| |
| |
| .overview-grid { |
| display: grid; |
| grid-template-columns: repeat(3, 1fr); |
| gap: 10px; |
| margin-top: 16px; |
| padding-top: 16px; |
| border-top: 1px solid #1a1a1a; |
| } |
| |
| .overview-card { |
| background: #0a0a0a; |
| border: 1px solid #1a1a1a; |
| border-radius: 3px; |
| padding: 14px; |
| text-align: center; |
| transition: all 0.15s; |
| cursor: pointer; |
| } |
| .overview-card:hover { border-color: #444444; } |
| .overview-card.active-card { |
| border-color: #ffffff; |
| background: #111111; |
| } |
| |
| .overview-num { |
| font-size: 1.5rem; |
| font-weight: 700; |
| color: #ffffff; |
| } |
| |
| .overview-label { |
| font-size: 0.68rem; |
| color: #666666; |
| font-weight: 600; |
| text-transform: uppercase; |
| letter-spacing: 1px; |
| margin-top: 4px; |
| } |
| |
| |
| .tab-bar { |
| display: flex; |
| border: 1px solid #222222; |
| border-radius: 3px; |
| overflow: hidden; |
| margin-bottom: 14px; |
| } |
| |
| .tab-btn { |
| flex: 1; |
| background: #0a0a0a; |
| border: none; |
| border-right: 1px solid #222222; |
| padding: 10px 14px; |
| cursor: pointer; |
| font-size: 0.78rem; |
| font-weight: 600; |
| color: #555555; |
| display: flex; |
| align-items: center; |
| justify-content: center; |
| gap: 8px; |
| transition: all 0.15s; |
| } |
| .tab-btn:last-child { border-right: none; } |
| .tab-btn:hover { background: #111111; color: #aaaaaa; } |
| .tab-btn.active-tab { |
| background: #1a1a1a; |
| color: #ffffff; |
| } |
| |
| .tab-count { |
| background: #222222; |
| padding: 2px 7px; |
| border-radius: 2px; |
| font-size: 0.68rem; |
| font-weight: 700; |
| } |
| .tab-btn.active-tab .tab-count { background: #333333; } |
| |
| |
| .stats-row { |
| display: grid; |
| grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); |
| gap: 10px; |
| margin-bottom: 14px; |
| } |
| |
| .stat-card { |
| background: #0a0a0a; |
| border: 1px solid #1a1a1a; |
| border-radius: 3px; |
| padding: 14px 16px; |
| display: flex; |
| align-items: center; |
| gap: 12px; |
| } |
| |
| .stat-icon { |
| width: 36px; |
| height: 36px; |
| border-radius: 3px; |
| display: flex; |
| align-items: center; |
| justify-content: center; |
| font-size: 0.85rem; |
| flex-shrink: 0; |
| background: #111111; |
| border: 1px solid #222222; |
| color: #ffffff; |
| } |
| |
| .stat-value { |
| font-size: 1.1rem; |
| font-weight: 700; |
| color: #ffffff; |
| } |
| |
| .stat-label { |
| font-size: 0.62rem; |
| color: #555555; |
| font-weight: 600; |
| text-transform: uppercase; |
| letter-spacing: 0.5px; |
| } |
| |
| |
| .filter-bar { |
| display: flex; |
| gap: 8px; |
| margin-bottom: 12px; |
| flex-wrap: wrap; |
| align-items: center; |
| } |
| |
| .filter-label { |
| font-size: 0.72rem; |
| color: #555555; |
| font-weight: 600; |
| margin-right: 4px; |
| } |
| |
| .filter-pill { |
| background: transparent; |
| border: 1px solid #222222; |
| color: #666666; |
| padding: 5px 12px; |
| border-radius: 3px; |
| cursor: pointer; |
| font-size: 0.72rem; |
| font-weight: 600; |
| transition: all 0.15s; |
| white-space: nowrap; |
| } |
| .filter-pill:hover { border-color: #555555; color: #aaaaaa; } |
| .filter-pill.active { background: #ffffff; color: #000000; border-color: #ffffff; } |
| |
| .filter-search { |
| margin-left: auto; |
| background: #0a0a0a; |
| border: 1px solid #222222; |
| border-radius: 3px; |
| padding: 5px 12px; |
| display: flex; |
| align-items: center; |
| gap: 6px; |
| transition: border-color 0.15s; |
| } |
| .filter-search:focus-within { border-color: #ffffff; } |
| .filter-search-icon { color: #555555; font-size: 0.72rem; } |
| .filter-search input { |
| font-size: 0.72rem; |
| width: 150px; |
| background: transparent; |
| border: none; |
| color: #ffffff; |
| outline: none; |
| } |
| .filter-search input::placeholder { color: #444444; } |
| |
| |
| .tree-wrapper { |
| border: 1px solid #222222; |
| border-radius: 3px; |
| display: flex; |
| flex-direction: column; |
| background: #000000; |
| overflow: hidden; |
| } |
| |
| .tree-header { |
| background: #0a0a0a; |
| padding: 10px 16px; |
| border-bottom: 1px solid #222222; |
| display: flex; |
| justify-content: space-between; |
| align-items: center; |
| flex-wrap: wrap; |
| gap: 8px; |
| } |
| |
| .tree-title { |
| font-size: 0.78rem; |
| font-weight: 600; |
| color: #666666; |
| } |
| |
| .copy-btn { |
| background: #ffffff; |
| color: #000000; |
| border: none; |
| padding: 6px 14px; |
| border-radius: 3px; |
| font-size: 0.72rem; |
| font-weight: 700; |
| cursor: pointer; |
| transition: opacity 0.15s; |
| display: flex; |
| align-items: center; |
| gap: 6px; |
| } |
| .copy-btn:hover { opacity: 0.85; } |
| |
| .terminal-window { |
| background: #000000; |
| display: flex; |
| overflow: auto; |
| font-size: 12.5px; |
| line-height: 1.7; |
| max-height: 70vh; |
| } |
| |
| .line-col { |
| padding: 14px 10px; |
| text-align: right; |
| color: #333333; |
| border-right: 1px solid #1a1a1a; |
| min-width: 44px; |
| user-select: none; |
| font-size: 0.7rem; |
| font-weight: 500; |
| } |
| .line-col div { |
| height: 30px; |
| display: flex; |
| align-items: center; |
| justify-content: flex-end; |
| } |
| |
| .code-col { |
| padding: 14px; |
| flex: 1; |
| white-space: pre; |
| min-width: 0; |
| } |
| |
| .tree-line { |
| display: flex; |
| align-items: center; |
| height: 30px; |
| border-radius: 2px; |
| padding: 0 6px; |
| gap: 2px; |
| } |
| .tree-line:hover { background: #0d0d0d; } |
| |
| .t-prefix { |
| color: #444444; |
| white-space: pre; |
| margin-right: 4px; |
| flex-shrink: 0; |
| } |
| |
| .t-icon { |
| width: 20px; |
| text-align: center; |
| display: inline-flex; |
| align-items: center; |
| justify-content: center; |
| margin-right: 8px; |
| font-size: 0.78rem; |
| flex-shrink: 0; |
| color: #888888; |
| } |
| |
| .t-name { |
| color: #ffffff; |
| font-weight: 600; |
| white-space: nowrap; |
| overflow: hidden; |
| text-overflow: ellipsis; |
| min-width: 0; |
| } |
| .t-name a { color: #ffffff; transition: color 0.1s; } |
| .t-name a:hover { color: #cccccc; text-decoration: underline; } |
| |
| .t-meta { |
| margin-left: auto; |
| display: flex; |
| align-items: center; |
| gap: 12px; |
| flex-shrink: 0; |
| padding-left: 12px; |
| } |
| |
| .t-stat { |
| font-size: 0.65rem; |
| color: #555555; |
| display: flex; |
| align-items: center; |
| gap: 4px; |
| font-weight: 500; |
| white-space: nowrap; |
| } |
| |
| .t-copy { |
| opacity: 0; |
| background: none; |
| border: none; |
| color: #555555; |
| cursor: pointer; |
| padding: 3px; |
| font-size: 0.72rem; |
| transition: all 0.15s; |
| display: flex; |
| align-items: center; |
| flex-shrink: 0; |
| } |
| .tree-line:hover .t-copy { opacity: 1; } |
| .t-copy:hover { color: #ffffff; } |
| |
| .no-data { |
| padding: 40px 20px; |
| text-align: center; |
| color: #555555; |
| font-size: 0.82rem; |
| } |
| |
| |
| .footer { |
| padding: 30px 20px; |
| text-align: center; |
| font-size: 0.68rem; |
| color: #333333; |
| margin-top: auto; |
| border-top: 1px solid #111111; |
| } |
| .footer a { color: #888888; font-weight: 600; } |
| .footer a:hover { color: #ffffff; } |
| |
| |
| .spinner { |
| display: inline-block; |
| width: 12px; |
| height: 12px; |
| border: 2px solid #333333; |
| border-top-color: #ffffff; |
| border-radius: 50%; |
| animation: spin 0.6s linear infinite; |
| margin-right: 8px; |
| vertical-align: middle; |
| } |
| |
| @keyframes spin { to { transform: rotate(360deg); } } |
| @keyframes fadeIn { from { opacity: 0; } to { opacity: 1; } } |
| |
| .hidden { display: none !important; } |
| |
| |
| @media (max-width: 640px) { |
| .input-line { flex-direction: column; } |
| .exec-btn { width: 100%; justify-content: center; } |
| .profile-top { flex-direction: column; text-align: center; } |
| .profile-name { justify-content: center; } |
| .overview-grid { grid-template-columns: repeat(3, 1fr); } |
| .stats-row { grid-template-columns: 1fr 1fr; } |
| .filter-bar { flex-direction: column; align-items: stretch; } |
| .filter-search { margin-left: 0; } |
| .filter-search input { width: 100%; } |
| .tab-btn { padding: 8px 6px; font-size: 0.72rem; } |
| .t-meta { gap: 6px; } |
| .tree-header { flex-direction: column; align-items: stretch; } |
| .overview-card { padding: 10px 6px; } |
| .overview-num { font-size: 1.2rem; } |
| .stat-card { padding: 10px 12px; gap: 10px; } |
| .stat-value { font-size: 1rem; } |
| .stat-icon { width: 30px; height: 30px; font-size: 0.78rem; } |
| .title-bar { padding: 10px 14px; } |
| .term-body { padding: 14px; } |
| } |
| </style> |
| </head> |
| <body> |
| <div class="terminal-shell"> |
| |
| <div class="title-bar"> |
| <div class="title-dot"></div> |
| <span class="title-text">[huggingface-user-stats]</span> |
| <div class="title-actions"> |
| <button id="privateRepoBtn" class="title-btn" title="Access Private Repos"> |
| <i class="fas fa-lock"></i> token |
| </button> |
| <button id="pdfBtn" class="title-btn" title="Download Report as PDF"> |
| <i class="fas fa-file-pdf"></i> report |
| </button> |
| </div> |
| </div> |
|
|
| |
| <div id="tokenSection" class="token-section hidden"> |
| <div class="token-row"> |
| <span class="token-prompt">token ~$</span> |
| <input type="password" id="hfToken" placeholder="paste hf access token (hf_...)"> |
| <button id="saveTokenBtn">save</button> |
| <button id="clearTokenBtn" class="hidden">clear</button> |
| </div> |
| <p class="token-note">token stored in localStorage. required for private repos & accurate lifetime stats.</p> |
| </div> |
|
|
| |
| <div class="term-body"> |
| |
| <div class="input-line"> |
| <div class="prompt-group" style="flex:2;"> |
| <span class="prompt-symbol">~$ fetch </span> |
| <input type="text" id="usernameInput" placeholder="username (e.g. prithivMLmods)" autocomplete="off"> |
| </div> |
| <button id="fetchBtn" class="exec-btn"> |
| <i class="fas fa-terminal"></i> execute |
| </button> |
| </div> |
|
|
| <div id="statusMsg"></div> |
|
|
| |
| <div id="emptyState" class="empty-state"> |
| <div style="margin-bottom:32px;"> |
| <div class="empty-title">hugging-face user statistics</div> |
| <div class="empty-desc">view models, datasets, spaces, lifetime downloads, monthly downloads, and likes for any hf user.</div> |
| </div> |
| <div> |
| <div class="section-label">featured users</div> |
| <div id="featuredUsers" class="org-cloud"></div> |
| </div> |
| </div> |
|
|
| |
| <div id="resultsSection" class="hidden"> |
| |
| <div id="profileCard" class="profile-block"> |
| <div class="profile-top"> |
| <div class="profile-avatar" id="profileAvatar"> |
| <span class="avatar-letter" id="avatarLetter"></span> |
| </div> |
| <div class="profile-info"> |
| <div class="profile-name"> |
| <a id="profileLink" href="#" target="_blank" rel="noopener"> |
| <span id="profileUsername"></span> |
| </a> |
| </div> |
| <div class="profile-fullname" id="profileFullname"></div> |
| <div class="profile-social" id="profileSocial"></div> |
| </div> |
| </div> |
| <div class="contribution-section" id="contribSection" style="display:none;"> |
| <div class="contrib-header"> |
| <span class="contrib-title">contributions</span> |
| <div class="contrib-years" id="contribYears"></div> |
| <span class="contrib-total" id="contribTotal"></span> |
| </div> |
| <div class="contrib-months" id="contribMonths"></div> |
| <div class="contrib-map-wrapper"> |
| <div class="contrib-map" id="contribMap"></div> |
| </div> |
| <div class="contrib-legend">less |
| <div class="contrib-cell" data-level="0"></div> |
| <div class="contrib-cell" data-level="1"></div> |
| <div class="contrib-cell" data-level="2"></div> |
| <div class="contrib-cell" data-level="3"></div> |
| <div class="contrib-cell" data-level="4"></div>more |
| </div> |
| </div> |
| <div class="overview-grid"> |
| <div class="overview-card" id="overviewModels" data-tab="models"> |
| <div class="overview-num" id="totalModelsNum">0</div> |
| <div class="overview-label">models</div> |
| </div> |
| <div class="overview-card" id="overviewDatasets" data-tab="datasets"> |
| <div class="overview-num" id="totalDatasetsNum">0</div> |
| <div class="overview-label">datasets</div> |
| </div> |
| <div class="overview-card" id="overviewSpaces" data-tab="spaces"> |
| <div class="overview-num" id="totalSpacesNum">0</div> |
| <div class="overview-label">spaces</div> |
| </div> |
| </div> |
| </div> |
|
|
| |
| <div class="tab-bar" id="tabBar"> |
| <button class="tab-btn active-tab" data-tab="models"> |
| models <span class="tab-count" id="tabModelCount">0</span> |
| </button> |
| <button class="tab-btn" data-tab="datasets"> |
| datasets <span class="tab-count" id="tabDatasetCount">0</span> |
| </button> |
| <button class="tab-btn" data-tab="spaces"> |
| spaces <span class="tab-count" id="tabSpaceCount">0</span> |
| </button> |
| </div> |
|
|
| <div class="stats-row" id="statsRow"></div> |
| <div class="filter-bar" id="filterBar"></div> |
|
|
| |
| <div class="tree-wrapper" id="treeWrapper"> |
| <div class="tree-header"> |
| <span class="tree-title" id="treeTitle"></span> |
| <div style="display:flex;gap:8px;"> |
| <button class="copy-btn" id="copyTreeBtn"> |
| <i class="far fa-copy"></i> copy tree |
| </button> |
| </div> |
| </div> |
| <div class="terminal-window"> |
| <div class="line-col" id="lineNumbers"></div> |
| <div class="code-col" id="treeContent"></div> |
| </div> |
| </div> |
| </div> |
|
|
| <div class="footer"> |
| built by <a href="https://hf.co/prithivMLmods" target="_blank" rel="noopener">prithivMLmods</a> |
| </div> |
| </div> |
| <div class="contrib-tooltip" id="contribTooltip"></div> |
| </div> |
|
|
| <script> |
| const HF_API = 'https://huggingface.co/api'; |
| const HF_BASE = 'https://huggingface.co'; |
| |
| let state = { |
| username: '', |
| profile: null, |
| models: [], |
| datasets: [], |
| spaces: [], |
| activeTab: 'models', |
| activeFilter: 'downloads-alltime', |
| filterText: '', |
| contribYear: null, |
| }; |
| |
| const $ = id => document.getElementById(id); |
| |
| const els = { |
| usernameInput: $('usernameInput'), |
| fetchBtn: $('fetchBtn'), |
| statusMsg: $('statusMsg'), |
| emptyState: $('emptyState'), |
| resultsSection: $('resultsSection'), |
| profileAvatar: $('profileAvatar'), |
| avatarLetter: $('avatarLetter'), |
| profileLink: $('profileLink'), |
| profileUsername: $('profileUsername'), |
| profileFullname: $('profileFullname'), |
| totalModelsNum: $('totalModelsNum'), |
| totalDatasetsNum: $('totalDatasetsNum'), |
| totalSpacesNum: $('totalSpacesNum'), |
| tabModelCount: $('tabModelCount'), |
| tabDatasetCount: $('tabDatasetCount'), |
| tabSpaceCount: $('tabSpaceCount'), |
| tabBar: $('tabBar'), |
| statsRow: $('statsRow'), |
| filterBar: $('filterBar'), |
| treeTitle: $('treeTitle'), |
| lineNumbers: $('lineNumbers'), |
| treeContent: $('treeContent'), |
| copyTreeBtn: $('copyTreeBtn'), |
| tokenSection: $('tokenSection'), |
| hfToken: $('hfToken'), |
| saveTokenBtn: $('saveTokenBtn'), |
| clearTokenBtn: $('clearTokenBtn'), |
| privateRepoBtn: $('privateRepoBtn'), |
| overviewModels: $('overviewModels'), |
| overviewDatasets: $('overviewDatasets'), |
| overviewSpaces: $('overviewSpaces'), |
| profileSocial: $('profileSocial'), |
| contribSection: $('contribSection'), |
| contribMap: $('contribMap'), |
| contribMonths: $('contribMonths'), |
| contribTotal: $('contribTotal'), |
| contribTooltip: $('contribTooltip'), |
| contribYears: $('contribYears'), |
| pdfBtn: $('pdfBtn'), |
| }; |
| |
| const FEATURED_USERS = [ |
| 'prithivMLmods', 'TheBloke', 'merve', 'MaziyarPanahi', 'multimodalart', |
| 'thomwolf', 'julien-c', 'lysandre', 'osanseviero', 'pcuenq', |
| 'clem', 'lhoestq', 'sayakpaul', 'mlabonne', 'mradermacher', |
| ]; |
| |
| function getHeaders() { |
| const t = localStorage.getItem('hf_token'); |
| const h = { Accept: 'application/json' }; |
| if (t) h['Authorization'] = `Bearer ${t}`; |
| return h; |
| } |
| |
| function formatNum(n) { |
| if (n == null) return '—'; |
| if (n >= 1e9) return (n / 1e9).toFixed(1) + 'B'; |
| if (n >= 1e6) return (n / 1e6).toFixed(1) + 'M'; |
| if (n >= 1e3) return (n / 1e3).toFixed(1) + 'K'; |
| return n.toLocaleString(); |
| } |
| |
| function formatNumFull(n) { |
| if (n == null) return '—'; |
| return n.toLocaleString(); |
| } |
| |
| function relativeTime(d) { |
| if (!d) return ''; |
| const diff = Date.now() - new Date(d).getTime(); |
| const m = Math.floor(diff / 60000); |
| if (m < 1) return 'just now'; |
| if (m < 60) return m + 'm ago'; |
| const h = Math.floor(m / 60); |
| if (h < 24) return h + 'h ago'; |
| const dy = Math.floor(h / 24); |
| if (dy < 7) return dy + 'd ago'; |
| const w = Math.floor(dy / 7); |
| if (w < 5) return w + 'w ago'; |
| const mo = Math.floor(dy / 30); |
| if (mo < 12) return mo + 'mo ago'; |
| return Math.floor(dy / 365) + 'y ago'; |
| } |
| |
| function escapeHtml(s) { |
| const d = document.createElement('div'); |
| d.textContent = s; |
| return d.innerHTML; |
| } |
| |
| function showMsg(text, type) { |
| els.statusMsg.style.display = text ? 'block' : 'none'; |
| els.statusMsg.innerHTML = text; |
| els.statusMsg.className = type || ''; |
| } |
| |
| function getMonthlyDownloads(item) { |
| return item.downloads || 0; |
| } |
| |
| function getLifetimeDownloads(item) { |
| if (item.downloadsAllTime != null && item.downloadsAllTime > 0) return item.downloadsAllTime; |
| if (item.downloads_all_time != null && item.downloads_all_time > 0) return item.downloads_all_time; |
| return item.downloads || 0; |
| } |
| |
| function getItemLikes(item) { |
| if (item.likes != null && typeof item.likes === 'number') return item.likes; |
| return 0; |
| } |
| |
| function checkToken() { |
| const t = localStorage.getItem('hf_token'); |
| if (t) { |
| els.hfToken.value = t; |
| els.privateRepoBtn.innerHTML = '<i class="fas fa-lock-open"></i> active'; |
| els.privateRepoBtn.classList.add('active-token'); |
| els.saveTokenBtn.classList.add('hidden'); |
| els.clearTokenBtn.classList.remove('hidden'); |
| } else { |
| els.privateRepoBtn.innerHTML = '<i class="fas fa-lock"></i> token'; |
| els.privateRepoBtn.classList.remove('active-token'); |
| els.saveTokenBtn.classList.remove('hidden'); |
| els.clearTokenBtn.classList.add('hidden'); |
| } |
| } |
| |
| async function fetchAllPages(url) { |
| let all = [], nextUrl = url; |
| const headers = getHeaders(); |
| while (nextUrl) { |
| const resp = await fetch(nextUrl, { headers }); |
| if (!resp.ok) { |
| if (all.length > 0) break; |
| throw new Error(`HTTP ${resp.status}`); |
| } |
| const items = await resp.json(); |
| if (!Array.isArray(items) || items.length === 0) break; |
| all = all.concat(items); |
| nextUrl = null; |
| const link = resp.headers.get('Link'); |
| if (link) { |
| const m = link.match(/<([^>]+)>;\s*rel="next"/); |
| if (m) nextUrl = m[1]; |
| } |
| } |
| return all; |
| } |
| |
| async function fetchProfile(username) { |
| const headers = getHeaders(); |
| try { |
| const resp = await fetch(`${HF_API}/users/${encodeURIComponent(username)}/overview`, { headers }); |
| if (resp.ok) return await resp.json(); |
| } catch (e) {} |
| return null; |
| } |
| |
| async function fetchItemDetail(itemId, type) { |
| const headers = getHeaders(); |
| try { |
| const url = type === 'models' |
| ? `${HF_API}/models/${encodeURIComponent(itemId)}` |
| : `${HF_API}/datasets/${encodeURIComponent(itemId)}`; |
| const resp = await fetch(url, { headers }); |
| if (resp.ok) return await resp.json(); |
| } catch (e) {} |
| return null; |
| } |
| |
| async function fetchUserStats() { |
| const username = els.usernameInput.value.trim().replace(/^@/, '').replace(/\/$/, ''); |
| if (!username) return showMsg("error: please enter a username.", "error"); |
| |
| state.username = username; |
| state.filterText = ''; |
| els.emptyState.classList.add('hidden'); |
| els.resultsSection.classList.add('hidden'); |
| els.fetchBtn.disabled = true; |
| showMsg(`<span class="spinner"></span> fetching stats for ${escapeHtml(username)}...`, 'loading'); |
| |
| try { |
| const uEnc = encodeURIComponent(username); |
| const expandParams = 'expand[]=downloadsAllTime&expand[]=downloads&expand[]=likes&expand[]=lastModified&expand[]=createdAt'; |
| |
| const [profileData, models, datasets, spaces] = await Promise.allSettled([ |
| fetchProfile(username), |
| fetchAllPages(`${HF_API}/models?author=${uEnc}&limit=1000&full=true&${expandParams}`), |
| fetchAllPages(`${HF_API}/datasets?author=${uEnc}&limit=1000&full=true&${expandParams}`), |
| fetchAllPages(`${HF_API}/spaces?author=${uEnc}&limit=1000&full=true&expand[]=likes&expand[]=createdAt&expand[]=lastModified`), |
| ]); |
| |
| state.profile = profileData.status === 'fulfilled' ? profileData.value : null; |
| state.models = models.status === 'fulfilled' ? models.value : []; |
| state.datasets = datasets.status === 'fulfilled' ? datasets.value : []; |
| state.spaces = spaces.status === 'fulfilled' ? spaces.value : []; |
| |
| if (state.models.length > 0) { |
| console.log('[HF-Stats] Sample model:', { |
| id: state.models[0].id, |
| likes: state.models[0].likes, |
| downloads: state.models[0].downloads, |
| downloadsAllTime: state.models[0].downloadsAllTime, |
| keys: Object.keys(state.models[0]) |
| }); |
| } |
| |
| if (!state.models.length && !state.datasets.length && !state.spaces.length && !state.profile) { |
| showMsg(`error: no data found for "${escapeHtml(username)}". check the name or add a token.`, 'error'); |
| els.emptyState.classList.remove('hidden'); |
| return; |
| } |
| |
| const modelsNeedLikes = state.models.length > 0 && state.models.every(m => getItemLikes(m) === 0); |
| const datasetsNeedLikes = state.datasets.length > 0 && state.datasets.every(d => getItemLikes(d) === 0); |
| |
| if (modelsNeedLikes || datasetsNeedLikes) { |
| showMsg(`<span class="spinner"></span> fetching detailed stats for ${escapeHtml(username)}...`, 'loading'); |
| |
| if (modelsNeedLikes) { |
| const batchSize = 10; |
| for (let i = 0; i < state.models.length; i += batchSize) { |
| const batch = state.models.slice(i, i + batchSize); |
| const results = await Promise.allSettled( |
| batch.map(m => fetchItemDetail(m.id || m.modelId, 'models')) |
| ); |
| results.forEach((r, j) => { |
| if (r.status === 'fulfilled' && r.value) { |
| const d = r.value; |
| state.models[i + j].likes = d.likes || 0; |
| if (d.downloads != null) state.models[i + j].downloads = d.downloads; |
| if (d.downloadsAllTime != null) state.models[i + j].downloadsAllTime = d.downloadsAllTime; |
| } |
| }); |
| } |
| } |
| |
| if (datasetsNeedLikes) { |
| const batchSize = 10; |
| for (let i = 0; i < state.datasets.length; i += batchSize) { |
| const batch = state.datasets.slice(i, i + batchSize); |
| const results = await Promise.allSettled( |
| batch.map(d => fetchItemDetail(d.id, 'datasets')) |
| ); |
| results.forEach((r, j) => { |
| if (r.status === 'fulfilled' && r.value) { |
| const d = r.value; |
| state.datasets[i + j].likes = d.likes || 0; |
| if (d.downloads != null) state.datasets[i + j].downloads = d.downloads; |
| if (d.downloadsAllTime != null) state.datasets[i + j].downloadsAllTime = d.downloadsAllTime; |
| } |
| }); |
| } |
| } |
| } |
| |
| showMsg('', ''); |
| window.location.hash = username; |
| document.title = `${username} — huggingface-user-stats`; |
| |
| renderProfile(); |
| renderOverview(); |
| setActiveTab('models'); |
| els.resultsSection.classList.remove('hidden'); |
| |
| } catch (err) { |
| console.error(err); |
| showMsg(`error: ${err.message}`, 'error'); |
| els.emptyState.classList.remove('hidden'); |
| } finally { |
| els.fetchBtn.disabled = false; |
| } |
| } |
| |
| function renderProfile() { |
| const u = state.username; |
| const p = state.profile; |
| |
| const avatarUrl = p?.avatarUrl; |
| if (avatarUrl) { |
| const full = avatarUrl.startsWith('http') ? avatarUrl : `${HF_BASE}${avatarUrl}`; |
| els.profileAvatar.innerHTML = `<img src="${full}" alt="${escapeHtml(u)}" onerror="this.parentElement.innerHTML='<span class=\\'avatar-letter\\'>${u[0].toUpperCase()}</span>'">`; |
| } else { |
| els.profileAvatar.innerHTML = `<span class="avatar-letter">${u[0].toUpperCase()}</span>`; |
| } |
| |
| els.profileUsername.textContent = u; |
| els.profileLink.href = `${HF_BASE}/${u}`; |
| |
| const fullname = p?.fullname || p?.name || ''; |
| els.profileFullname.textContent = fullname; |
| els.profileFullname.style.display = fullname ? 'block' : 'none'; |
| |
| renderProfileSocial(); |
| renderContribMap(); |
| } |
| |
| function renderOverview() { |
| els.totalModelsNum.textContent = state.models.length; |
| els.totalDatasetsNum.textContent = state.datasets.length; |
| els.totalSpacesNum.textContent = state.spaces.length; |
| els.tabModelCount.textContent = state.models.length; |
| els.tabDatasetCount.textContent = state.datasets.length; |
| els.tabSpaceCount.textContent = state.spaces.length; |
| } |
| |
| function renderContribMap(yearOverride) { |
| const allItems = [...state.models, ...state.datasets, ...state.spaces]; |
| |
| if (allItems.length === 0) { |
| els.contribSection.style.display = 'none'; |
| return; |
| } |
| |
| const allDates = allItems.map(i => i.createdAt || i.lastModified).filter(Boolean).map(d => new Date(d)); |
| |
| if (allDates.length === 0) { |
| els.contribSection.style.display = 'none'; |
| return; |
| } |
| |
| const years = [...new Set(allDates.map(d => d.getFullYear()))].sort((a, b) => b - a); |
| |
| const selectedYear = yearOverride !== undefined ? yearOverride : state.contribYear; |
| state.contribYear = selectedYear; |
| |
| let yearsHtml = `<button class="contrib-year-btn ${selectedYear === null ? 'active' : ''}" data-year="">last 12 months</button>`; |
| years.forEach(y => { |
| yearsHtml += `<button class="contrib-year-btn ${selectedYear === y ? 'active' : ''}" data-year="${y}">${y}</button>`; |
| }); |
| els.contribYears.innerHTML = yearsHtml; |
| |
| els.contribYears.querySelectorAll('.contrib-year-btn').forEach(btn => { |
| btn.addEventListener('click', () => { |
| const y = btn.dataset.year; |
| renderContribMap(y === '' ? null : parseInt(y)); |
| }); |
| }); |
| |
| let rangeStart, rangeEnd, rangeLabel; |
| |
| if (selectedYear !== null) { |
| rangeStart = new Date(selectedYear, 0, 1); |
| rangeEnd = new Date(selectedYear, 11, 31, 23, 59, 59); |
| rangeLabel = `in ${selectedYear}`; |
| } else { |
| rangeEnd = new Date(); |
| rangeStart = new Date(rangeEnd); |
| rangeStart.setFullYear(rangeStart.getFullYear() - 1); |
| rangeStart.setHours(0, 0, 0, 0); |
| rangeLabel = 'in the last year'; |
| } |
| |
| const dayCounts = {}; |
| let totalContribs = 0; |
| |
| allItems.forEach(item => { |
| const d = item.createdAt || item.lastModified; |
| if (!d) return; |
| const dt = new Date(d); |
| if (dt < rangeStart || dt > rangeEnd) return; |
| const key = dt.toISOString().slice(0, 10); |
| dayCounts[key] = (dayCounts[key] || 0) + 1; |
| totalContribs++; |
| }); |
| |
| els.contribSection.style.display = 'block'; |
| els.contribTotal.innerHTML = `<span>${totalContribs}</span> contributions ${rangeLabel}`; |
| |
| const startDate = new Date(rangeStart); |
| startDate.setDate(startDate.getDate() - startDate.getDay()); |
| const endDate = new Date(rangeEnd); |
| const totalDays = Math.ceil((endDate - startDate) / 86400000) + 1; |
| const maxCount = Math.max(1, ...Object.values(dayCounts)); |
| |
| const mapEl = els.contribMap; |
| const tooltip = els.contribTooltip; |
| mapEl.innerHTML = ''; |
| |
| const fragment = document.createDocumentFragment(); |
| const monthLabels = []; |
| let lastMonth = -1; |
| |
| for (let i = 0; i < totalDays; i++) { |
| const d = new Date(startDate); |
| d.setDate(d.getDate() + i); |
| const key = d.toISOString().slice(0, 10); |
| const count = dayCounts[key] || 0; |
| let level = 0; |
| |
| if (count > 0) { |
| const ratio = count / maxCount; |
| if (ratio <= 0.25) level = 1; |
| else if (ratio <= 0.5) level = 2; |
| else if (ratio <= 0.75) level = 3; |
| else level = 4; |
| } |
| |
| const cell = document.createElement('div'); |
| cell.className = 'contrib-cell'; |
| cell.setAttribute('data-level', level); |
| cell.setAttribute('data-date', key); |
| cell.setAttribute('data-count', count); |
| fragment.appendChild(cell); |
| |
| if (i % 7 === 0) { |
| const m = d.getMonth(); |
| if (m !== lastMonth) { |
| monthLabels.push({ month: m, col: Math.floor(i / 7) }); |
| lastMonth = m; |
| } |
| } |
| } |
| |
| mapEl.appendChild(fragment); |
| |
| const MONTHS = ['Jan','Feb','Mar','Apr','May','Jun','Jul','Aug','Sep','Oct','Nov','Dec']; |
| let monthHtml = '', labelCol = 0; |
| |
| for (const ml of monthLabels) { |
| const gap = ml.col - labelCol; |
| for (let g = 0; g < gap; g++) monthHtml += '<span></span>'; |
| monthHtml += `<span>${MONTHS[ml.month]}</span>`; |
| labelCol = ml.col + 1; |
| } |
| |
| els.contribMonths.innerHTML = monthHtml; |
| |
| mapEl.onmouseover = e => { |
| const cell = e.target.closest('.contrib-cell'); |
| if (!cell) { tooltip.style.display = 'none'; return; } |
| const date = cell.dataset.date, count = cell.dataset.count; |
| const dateStr = new Date(date + 'T00:00:00').toLocaleDateString('en-US', { month: 'short', day: 'numeric', year: 'numeric' }); |
| tooltip.innerHTML = `<strong>${count}</strong> contribution${count !== '1' ? 's' : ''} on ${dateStr}`; |
| tooltip.style.display = 'block'; |
| const rect = cell.getBoundingClientRect(); |
| tooltip.style.left = (rect.left + rect.width / 2 - tooltip.offsetWidth / 2) + 'px'; |
| tooltip.style.top = (rect.top - tooltip.offsetHeight - 8) + 'px'; |
| }; |
| |
| mapEl.onmouseleave = () => { tooltip.style.display = 'none'; }; |
| } |
| |
| function renderProfileSocial() { |
| const u = state.username; |
| const p = state.profile; |
| const followers = p?.numFollowers ?? 0; |
| const memberOrgsCount = Array.isArray(p?.orgs) ? p.orgs.length : 0; |
| let socialHtml = ''; |
| |
| socialHtml += `<a class="social-stat" href="${HF_BASE}/${encodeURIComponent(u)}?followers=true" target="_blank" rel="noopener" title="${formatNumFull(followers)} followers"><i class="fas fa-users"></i> <span class="social-num">${formatNum(followers)}</span> followers</a>`; |
| |
| if (memberOrgsCount > 0) { |
| socialHtml += `<span class="social-stat" title="Member of ${memberOrgsCount} organizations"><i class="fas fa-building"></i> <span class="social-num">${memberOrgsCount}</span> orgs</span>`; |
| } |
| |
| els.profileSocial.innerHTML = socialHtml; |
| } |
| |
| async function downloadPDFReport() { |
| if (!state.profile) { |
| showMsg('no data to download.', 'error'); |
| setTimeout(() => showMsg('', ''), 2000); |
| return; |
| } |
| |
| const btn = els.pdfBtn; |
| const orig = btn.innerHTML; |
| btn.innerHTML = '<i class="fas fa-spinner fa-spin"></i> loading...'; |
| btn.disabled = true; |
| |
| try { |
| const { jsPDF } = window.jspdf; |
| const doc = new jsPDF(); |
| |
| const u = state.username; |
| const p = state.profile; |
| const fullname = p?.fullname || p?.name || u; |
| |
| let avatarBase64 = null; |
| |
| if (p?.avatarUrl) { |
| try { |
| const fullUrl = p.avatarUrl.startsWith('http') ? p.avatarUrl : `${HF_BASE}${p.avatarUrl}`; |
| const res = await fetch(fullUrl); |
| |
| if (res.ok) { |
| const blob = await res.blob(); |
| const objectUrl = URL.createObjectURL(blob); |
| const img = new Image(); |
| |
| await new Promise((resolve, reject) => { |
| img.onload = resolve; |
| img.onerror = reject; |
| img.src = objectUrl; |
| }); |
| |
| const canvas = document.createElement('canvas'); |
| canvas.width = 64; |
| canvas.height = 64; |
| const ctx = canvas.getContext('2d'); |
| ctx.fillStyle = '#ffffff'; |
| ctx.fillRect(0, 0, 64, 64); |
| ctx.beginPath(); |
| ctx.arc(32, 32, 32, 0, Math.PI * 2, true); |
| ctx.closePath(); |
| ctx.clip(); |
| ctx.drawImage(img, 0, 0, 64, 64); |
| avatarBase64 = canvas.toDataURL('image/jpeg', 0.95); |
| URL.revokeObjectURL(objectUrl); |
| } |
| } catch (e) { |
| console.warn('Could not fetch avatar for PDF:', e); |
| } |
| } |
| |
| if (avatarBase64) { |
| doc.addImage(avatarBase64, 'JPEG', 14, 12, 16, 16); |
| doc.setFontSize(22); |
| doc.text(`Hugging Face Activity Report: ${fullname}`, 34, 24); |
| } else { |
| doc.setFontSize(22); |
| doc.text(`Hugging Face Activity Report: ${fullname}`, 14, 24); |
| } |
| |
| const totalModels = state.models.length; |
| const totalDatasets = state.datasets.length; |
| const totalSpaces = state.spaces.length; |
| |
| const totalModelDl = state.models.reduce((s, m) => s + getLifetimeDownloads(m), 0); |
| const totalDatasetDl = state.datasets.reduce((s, d) => s + getLifetimeDownloads(d), 0); |
| const totalLikes = [...state.models, ...state.datasets, ...state.spaces].reduce((s, i) => s + getItemLikes(i), 0); |
| const totalDlMonthly = state.models.reduce((s, m) => s + getMonthlyDownloads(m), 0) + state.datasets.reduce((s, d) => s + getMonthlyDownloads(d), 0); |
| const totalPrivate = [...state.models, ...state.datasets, ...state.spaces].filter(i => i.private).length; |
| |
| let startY = 35; |
| |
| const overviewBody = [ |
| ['Username', `@${u}`, 'Total Followers', `${formatNumFull(p?.numFollowers ?? 0)}`], |
| ['Organizations Joined', `${Array.isArray(p?.orgs) ? p.orgs.length : 0}`, 'Total Likes Received', `${formatNumFull(totalLikes)}`], |
| ['Total Models Created', `${formatNumFull(totalModels)}`, 'Total Model Downloads', `${formatNumFull(totalModelDl)}`], |
| ['Total Datasets Created', `${formatNumFull(totalDatasets)}`, 'Total Dataset Downloads', `${formatNumFull(totalDatasetDl)}`], |
| ['Total Spaces Created', `${formatNumFull(totalSpaces)}`, 'Downloads (Last 30 Days)', `${formatNumFull(totalDlMonthly)}`], |
| ['Private Repositories', `${formatNumFull(totalPrivate)}`, 'Total Lifetime Downloads', `${formatNumFull(totalModelDl + totalDatasetDl)}`], |
| ]; |
| |
| doc.autoTable({ |
| startY: startY, |
| head: [['Overview Metric', 'Value', 'Overview Metric', 'Value']], |
| body: overviewBody, |
| theme: 'grid', |
| styles: { fontSize: 10, cellPadding: 3 }, |
| headStyles: { fillColor: [31, 41, 55], textColor: [255, 255, 255], fontStyle: 'bold' }, |
| alternateRowStyles: { fillColor: [249, 250, 251] }, |
| }); |
| startY = doc.lastAutoTable.finalY + 10; |
| |
| const pipelineCounts = {}; |
| state.models.forEach(m => { |
| if (m.pipeline_tag) { |
| pipelineCounts[m.pipeline_tag] = (pipelineCounts[m.pipeline_tag] || 0) + 1; |
| } |
| }); |
| const sortedPipelines = Object.entries(pipelineCounts).sort((a, b) => b[1] - a[1]); |
| |
| if (sortedPipelines.length > 0) { |
| doc.autoTable({ |
| startY: startY, |
| head: [['Model Pipeline Tasks', 'Count']], |
| body: sortedPipelines, |
| theme: 'grid', |
| styles: { fontSize: 9 }, |
| headStyles: { fillColor: [59, 130, 246], textColor: [255, 255, 255], fontStyle: 'bold' }, |
| alternateRowStyles: { fillColor: [243, 244, 246] }, |
| tableWidth: 'wrap', |
| }); |
| startY = doc.lastAutoTable.finalY + 10; |
| } |
| |
| if (totalModels > 0) { |
| const topModels = [...state.models].sort((a, b) => getLifetimeDownloads(b) - getLifetimeDownloads(a)).slice(0, 50); |
| doc.autoTable({ |
| startY: startY, |
| head: [['Top Models (Max 50)', 'Downloads', 'Likes', 'Created', 'Updated']], |
| body: topModels.map(m => [ |
| m.id || m.modelId, |
| formatNumFull(getLifetimeDownloads(m)), |
| formatNumFull(getItemLikes(m)), |
| m.createdAt ? new Date(m.createdAt).toLocaleDateString() : '-', |
| m.lastModified ? new Date(m.lastModified).toLocaleDateString() : '-', |
| ]), |
| theme: 'striped', |
| styles: { fontSize: 9 }, |
| headStyles: { fillColor: [255, 157, 0], textColor: [255, 255, 255], fontStyle: 'bold' }, |
| alternateRowStyles: { fillColor: [255, 247, 237] }, |
| }); |
| startY = doc.lastAutoTable.finalY + 10; |
| } |
| |
| if (totalDatasets > 0) { |
| const topDatasets = [...state.datasets].sort((a, b) => getLifetimeDownloads(b) - getLifetimeDownloads(a)).slice(0, 50); |
| doc.autoTable({ |
| startY: startY, |
| head: [['Top Datasets (Max 50)', 'Downloads', 'Likes', 'Created', 'Updated']], |
| body: topDatasets.map(d => [ |
| d.id, |
| formatNumFull(getLifetimeDownloads(d)), |
| formatNumFull(getItemLikes(d)), |
| d.createdAt ? new Date(d.createdAt).toLocaleDateString() : '-', |
| d.lastModified ? new Date(d.lastModified).toLocaleDateString() : '-', |
| ]), |
| theme: 'striped', |
| styles: { fontSize: 9 }, |
| headStyles: { fillColor: [16, 185, 129], textColor: [255, 255, 255], fontStyle: 'bold' }, |
| alternateRowStyles: { fillColor: [236, 253, 245] }, |
| }); |
| startY = doc.lastAutoTable.finalY + 10; |
| } |
| |
| if (totalSpaces > 0) { |
| const topSpaces = [...state.spaces].sort((a, b) => getItemLikes(b) - getItemLikes(a)).slice(0, 50); |
| doc.autoTable({ |
| startY: startY, |
| head: [['Top Spaces (Max 50)', 'Likes', 'Created', 'Updated']], |
| body: topSpaces.map(s => [ |
| s.id, |
| formatNumFull(getItemLikes(s)), |
| s.createdAt ? new Date(s.createdAt).toLocaleDateString() : '-', |
| s.lastModified ? new Date(s.lastModified).toLocaleDateString() : '-', |
| ]), |
| theme: 'striped', |
| styles: { fontSize: 9 }, |
| headStyles: { fillColor: [139, 92, 246], textColor: [255, 255, 255], fontStyle: 'bold' }, |
| alternateRowStyles: { fillColor: [245, 243, 255] }, |
| }); |
| } |
| |
| doc.save(`hf-report-${u}-${new Date().toISOString().slice(0, 10)}.pdf`); |
| btn.innerHTML = '<i class="fas fa-check"></i> downloaded'; |
| } catch (err) { |
| console.error('PDF Generation failed:', err); |
| btn.innerHTML = '<i class="fas fa-times"></i> failed'; |
| } finally { |
| setTimeout(() => { |
| btn.innerHTML = orig; |
| btn.disabled = false; |
| }, 2000); |
| } |
| } |
| |
| function setActiveTab(tab) { |
| state.activeTab = tab; |
| state.activeFilter = (tab === 'spaces') ? 'likes' : 'downloads-alltime'; |
| state.filterText = ''; |
| |
| els.tabBar.querySelectorAll('.tab-btn').forEach(btn => { |
| btn.className = 'tab-btn'; |
| if (btn.dataset.tab === tab) { |
| btn.classList.add('active-tab'); |
| } |
| }); |
| |
| [els.overviewModels, els.overviewDatasets, els.overviewSpaces].forEach(c => c.classList.remove('active-card')); |
| if (tab === 'models') els.overviewModels.classList.add('active-card'); |
| else if (tab === 'datasets') els.overviewDatasets.classList.add('active-card'); |
| else els.overviewSpaces.classList.add('active-card'); |
| |
| renderStats(); |
| renderFilters(); |
| renderTree(); |
| } |
| |
| function renderStats() { |
| const tab = state.activeTab; |
| const items = tab === 'models' ? state.models : tab === 'datasets' ? state.datasets : state.spaces; |
| const totalDlAllTime = items.reduce((s, i) => s + getLifetimeDownloads(i), 0); |
| const totalDlMonthly = items.reduce((s, i) => s + getMonthlyDownloads(i), 0); |
| const totalLk = items.reduce((s, i) => s + getItemLikes(i), 0); |
| |
| let html = ` |
| <div class="stat-card"> |
| <div class="stat-icon"><i class="fas fa-hashtag"></i></div> |
| <div> |
| <div class="stat-value">${formatNum(items.length)}</div> |
| <div class="stat-label">total ${tab}</div> |
| </div> |
| </div>`; |
| |
| if (tab !== 'spaces') { |
| html += ` |
| <div class="stat-card"> |
| <div class="stat-icon"><i class="fas fa-download"></i></div> |
| <div> |
| <div class="stat-value" title="${formatNumFull(totalDlAllTime)} all-time downloads">${formatNum(totalDlAllTime)}</div> |
| <div class="stat-label">downloads (all time)</div> |
| </div> |
| </div> |
| <div class="stat-card"> |
| <div class="stat-icon"><i class="fas fa-calendar-alt"></i></div> |
| <div> |
| <div class="stat-value" title="${formatNumFull(totalDlMonthly)} downloads last month">${formatNum(totalDlMonthly)}</div> |
| <div class="stat-label">downloads (last month)</div> |
| </div> |
| </div>`; |
| } |
| |
| html += ` |
| <div class="stat-card"> |
| <div class="stat-icon"><i class="fas fa-heart"></i></div> |
| <div> |
| <div class="stat-value" title="${formatNumFull(totalLk)} total likes">${formatNum(totalLk)}</div> |
| <div class="stat-label">total likes</div> |
| </div> |
| </div>`; |
| |
| els.statsRow.innerHTML = html; |
| } |
| |
| function renderFilters() { |
| const tab = state.activeTab; |
| let filters; |
| |
| if (tab === 'models' || tab === 'datasets') { |
| filters = [ |
| { key: 'downloads-alltime', label: 'downloads (all time)' }, |
| { key: 'downloads-monthly', label: 'downloads (monthly)' }, |
| { key: 'likes', label: 'most liked' }, |
| { key: 'recent', label: 'most recent' }, |
| ]; |
| } else { |
| filters = [ |
| { key: 'likes', label: 'most liked' }, |
| { key: 'least-likes', label: 'least liked' }, |
| ]; |
| } |
| |
| let html = '<span class="filter-label">sort:</span>'; |
| for (const f of filters) { |
| html += `<button class="filter-pill ${state.activeFilter === f.key ? 'active' : ''}" data-filter="${f.key}">${f.label}</button>`; |
| } |
| html += ` |
| <div class="filter-search"> |
| <span class="filter-search-icon"><i class="fas fa-search"></i></span> |
| <input type="text" id="treeFilter" placeholder="filter by name..." value="${escapeHtml(state.filterText)}"> |
| </div>`; |
| |
| els.filterBar.innerHTML = html; |
| |
| els.filterBar.querySelectorAll('.filter-pill').forEach(btn => { |
| btn.addEventListener('click', () => { |
| state.activeFilter = btn.dataset.filter; |
| renderFilters(); |
| renderTree(); |
| }); |
| }); |
| |
| const fi = $('treeFilter'); |
| if (fi) fi.addEventListener('input', e => { state.filterText = e.target.value.trim().toLowerCase(); renderTree(); }); |
| } |
| |
| function getSortedItems() { |
| const tab = state.activeTab; |
| let items = [...(tab === 'models' ? state.models : tab === 'datasets' ? state.datasets : state.spaces)]; |
| |
| if (state.filterText) { |
| items = items.filter(i => (i.id || i.modelId || '').toLowerCase().includes(state.filterText)); |
| } |
| |
| items.sort((a, b) => { |
| switch (state.activeFilter) { |
| case 'downloads-alltime': return getLifetimeDownloads(b) - getLifetimeDownloads(a); |
| case 'downloads-monthly': return getMonthlyDownloads(b) - getMonthlyDownloads(a); |
| case 'likes': return getItemLikes(b) - getItemLikes(a); |
| case 'least-likes': return getItemLikes(a) - getItemLikes(b); |
| case 'recent': return new Date(b.lastModified || b.createdAt || 0) - new Date(a.lastModified || a.createdAt || 0); |
| default: return 0; |
| } |
| }); |
| return items; |
| } |
| |
| function getItemName(item) { |
| const id = item.id || item.modelId || ''; |
| const parts = id.split('/'); |
| return parts.length > 1 ? parts.slice(1).join('/') : id; |
| } |
| |
| function getItemUrl(item, tab) { |
| const id = item.id || item.modelId || ''; |
| if (tab === 'datasets') return `${HF_BASE}/datasets/${id}`; |
| if (tab === 'spaces') return `${HF_BASE}/spaces/${id}`; |
| return `${HF_BASE}/${id}`; |
| } |
| |
| function renderTree() { |
| const tab = state.activeTab; |
| const items = getSortedItems(); |
| const tabLabel = tab.charAt(0).toUpperCase() + tab.slice(1); |
| |
| els.treeTitle.textContent = `${state.username} / ${tabLabel} (${items.length})`; |
| els.lineNumbers.innerHTML = ''; |
| els.treeContent.innerHTML = ''; |
| |
| if (items.length === 0) { |
| els.treeContent.innerHTML = `<div class="no-data">no ${tab} found.</div>`; |
| return; |
| } |
| |
| const fragL = document.createDocumentFragment(); |
| const fragT = document.createDocumentFragment(); |
| |
| const rL = document.createElement('div'); rL.textContent = '1'; fragL.appendChild(rL); |
| const rR = document.createElement('div'); |
| rR.className = 'tree-line'; rR.style.fontWeight = '700'; |
| rR.innerHTML = `<span class="t-name" style="color:#ffffff;">${escapeHtml(state.username)} — ${items.length} ${tabLabel}</span>`; |
| fragT.appendChild(rR); |
| |
| items.forEach((item, idx) => { |
| const lN = document.createElement('div'); lN.textContent = idx + 2; fragL.appendChild(lN); |
| |
| const row = document.createElement('div'); |
| row.className = 'tree-line'; |
| row.style.animation = `fadeIn 0.12s forwards ${Math.min(idx * 6, 600)}ms`; |
| row.style.opacity = '0'; |
| |
| const isLast = idx === items.length - 1; |
| const conn = isLast ? '└── ' : '├── '; |
| const name = getItemName(item); |
| const url = getItemUrl(item, tab); |
| const fullId = item.id || item.modelId || ''; |
| |
| let nameHtml = escapeHtml(name); |
| if (state.filterText && name.toLowerCase().includes(state.filterText)) { |
| const rx = new RegExp(`(${state.filterText.replace(/[.*+?^${}()|[\]\\]/g, '\\$&')})`, 'gi'); |
| nameHtml = name.replace(rx, '<mark style="background:#333333;color:#ffffff;padding:0 2px;border-radius:2px;">$1</mark>'); |
| } |
| |
| let meta = ''; |
| if (tab !== 'spaces') { |
| const dlAll = getLifetimeDownloads(item); |
| const dlMonth = getMonthlyDownloads(item); |
| |
| if (state.activeFilter === 'downloads-monthly') { |
| meta += `<span class="t-stat" title="${formatNumFull(dlMonth)} downloads (last month)"><i class="fas fa-calendar-alt"></i> ${formatNum(dlMonth)}</span>`; |
| } else { |
| meta += `<span class="t-stat" title="${formatNumFull(dlAll)} downloads (all time)"><i class="fas fa-download"></i> ${formatNum(dlAll)}</span>`; |
| } |
| } |
| |
| const likes = getItemLikes(item); |
| meta += `<span class="t-stat" title="${formatNumFull(likes)} likes"><i class="fas fa-heart"></i> ${formatNum(likes)}</span>`; |
| if (item.lastModified) { |
| meta += `<span class="t-stat" title="${new Date(item.lastModified).toLocaleDateString()}"><i class="far fa-clock"></i> ${relativeTime(item.lastModified)}</span>`; |
| } |
| |
| row.innerHTML = ` |
| <span class="t-prefix">${conn}</span> |
| <span class="t-name"><a href="${url}" target="_blank" rel="noopener" title="${escapeHtml(fullId)}">${nameHtml}</a></span> |
| <span class="t-meta"> |
| ${meta} |
| <button class="t-copy" data-id="${escapeHtml(fullId)}" title="Copy ID"><i class="far fa-copy"></i></button> |
| </span>`; |
| fragT.appendChild(row); |
| }); |
| |
| els.lineNumbers.appendChild(fragL); |
| els.treeContent.appendChild(fragT); |
| |
| els.treeContent.onclick = function(e) { |
| const btn = e.target.closest('.t-copy'); |
| if (!btn) return; |
| navigator.clipboard.writeText(btn.dataset.id).then(() => { |
| const ic = btn.querySelector('i'); |
| const orig = ic.className; |
| ic.className = 'fas fa-check'; ic.style.color = '#ffffff'; |
| setTimeout(() => { ic.className = orig; ic.style.color = ''; }, 1500); |
| }); |
| }; |
| } |
| |
| function copyFullTree() { |
| const tab = state.activeTab; |
| const items = getSortedItems(); |
| const tabLabel = tab.charAt(0).toUpperCase() + tab.slice(1); |
| const lines = [`${state.username} — ${items.length} ${tabLabel}`]; |
| |
| items.forEach((item, idx) => { |
| const conn = idx === items.length - 1 ? '└── ' : '├── '; |
| const name = getItemName(item); |
| let meta = ''; |
| if (tab !== 'spaces') { |
| meta += ` ↓${formatNum(getLifetimeDownloads(item))} all`; |
| meta += ` ↓${formatNum(getMonthlyDownloads(item))} /mo`; |
| } |
| meta += ` ♥${formatNum(getItemLikes(item))}`; |
| lines.push(`${conn}${name} (${meta.trim()})`); |
| }); |
| |
| const totalDlAll = items.reduce((s, i) => s + getLifetimeDownloads(i), 0); |
| const totalDlMonth = items.reduce((s, i) => s + getMonthlyDownloads(i), 0); |
| const totalLk = items.reduce((s, i) => s + getItemLikes(i), 0); |
| lines.push(''); |
| if (tab !== 'spaces') { |
| lines.push(`Total Downloads (All Time): ${formatNumFull(totalDlAll)}`); |
| lines.push(`Total Downloads (Last Month): ${formatNumFull(totalDlMonth)}`); |
| } |
| lines.push(`Total Likes: ${formatNumFull(totalLk)}`); |
| |
| navigator.clipboard.writeText(lines.join('\n')).then(() => { |
| const orig = els.copyTreeBtn.innerHTML; |
| els.copyTreeBtn.innerHTML = '<i class="fas fa-check"></i> copied!'; |
| setTimeout(() => { els.copyTreeBtn.innerHTML = orig; }, 1800); |
| }); |
| } |
| |
| function buildHomepage() { |
| const c = $('featuredUsers'); |
| FEATURED_USERS.forEach(u => { |
| const btn = document.createElement('button'); |
| btn.className = 'user-chip'; |
| btn.textContent = u; |
| btn.addEventListener('click', () => { els.usernameInput.value = u; fetchUserStats(); }); |
| c.appendChild(btn); |
| }); |
| } |
| |
| function parseHash() { |
| const h = window.location.hash; |
| if (h && h.length > 1) { |
| const u = decodeURIComponent(h.substring(1)); |
| if (u) { els.usernameInput.value = u; fetchUserStats(); } |
| } |
| } |
| |
| document.addEventListener('DOMContentLoaded', () => { |
| checkToken(); |
| buildHomepage(); |
| |
| els.privateRepoBtn.addEventListener('click', () => els.tokenSection.classList.toggle('hidden')); |
| |
| els.saveTokenBtn.addEventListener('click', () => { |
| const t = els.hfToken.value.trim(); |
| if (!t) return; |
| localStorage.setItem('hf_token', t); |
| checkToken(); |
| showMsg('token saved.', 'loading'); |
| setTimeout(() => showMsg('', ''), 1500); |
| }); |
| |
| els.clearTokenBtn.addEventListener('click', () => { |
| localStorage.removeItem('hf_token'); |
| els.hfToken.value = ''; |
| checkToken(); |
| showMsg('token cleared.', 'loading'); |
| setTimeout(() => showMsg('', ''), 1500); |
| }); |
| |
| els.hfToken.addEventListener('keypress', e => { if (e.key === 'Enter') els.saveTokenBtn.click(); }); |
| els.fetchBtn.addEventListener('click', fetchUserStats); |
| els.usernameInput.addEventListener('keypress', e => { if (e.key === 'Enter') fetchUserStats(); }); |
| |
| els.tabBar.querySelectorAll('.tab-btn').forEach(btn => |
| btn.addEventListener('click', () => setActiveTab(btn.dataset.tab)) |
| ); |
| |
| [els.overviewModels, els.overviewDatasets, els.overviewSpaces].forEach(card => |
| card.addEventListener('click', () => setActiveTab(card.dataset.tab)) |
| ); |
| |
| els.copyTreeBtn.addEventListener('click', copyFullTree); |
| els.pdfBtn.addEventListener('click', downloadPDFReport); |
| parseHash(); |
| }); |
| </script> |
| </body> |
| </html> |
