update [maps, profile, timelines] ✅

index.html

@@ -6,6 +6,7 @@
     <title>HF User Stats — HuggingFace User Statistics</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/html2canvas/1.4.1/html2canvas.min.js"></script>
     <style>
         @import url('https://fonts.googleapis.com/css2?family=JetBrains+Mono:wght@400;500;600&family=Inter:wght@400;500;600;700&display=swap');
 
@@ -289,6 +290,105 @@
             font-size: 0.9rem; color: var(--text-secondary); margin-bottom: 4px;
         }
 
+        .profile-social {
+            display: flex; gap: 16px; margin-top: 8px; flex-wrap: wrap;
+        }
+        .social-stat {
+            display: flex; align-items: center; gap: 6px;
+            font-size: 0.82rem; color: var(--text-secondary);
+            font-weight: 500; cursor: pointer; transition: color 0.2s;
+        }
+        .social-stat:hover { color: var(--accent); }
+        .social-stat i { font-size: 0.78rem; }
+        .social-stat .social-num {
+            font-weight: 700; color: var(--text);
+            font-family: var(--mono);
+        }
+
+        .contribution-section {
+            margin-top: 20px; padding-top: 20px;
+            border-top: 1px solid var(--border);
+        }
+        .contrib-header {
+            display: flex; justify-content: space-between;
+            align-items: center; margin-bottom: 12px;
+            flex-wrap: wrap; gap: 10px;
+        }
+        .contrib-title {
+            font-size: 0.78rem; font-weight: 600;
+            color: var(--text-secondary); text-transform: uppercase;
+            letter-spacing: 1px;
+        }
+        .contrib-total {
+            font-size: 0.75rem; color: var(--text-secondary);
+            font-family: var(--mono); font-weight: 500;
+        }
+        .contrib-total span { color: var(--accent); 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: 3px;
+            background: var(--border);
+            transition: transform 0.15s;
+        }
+        .contrib-cell:hover { transform: scale(1.4); z-index: 2; position: relative; }
+        .contrib-cell[data-level="0"] { background: var(--border); }
+        .contrib-cell[data-level="1"] { background: rgba(255, 157, 0, 0.25); }
+        .contrib-cell[data-level="2"] { background: rgba(255, 157, 0, 0.5); }
+        .contrib-cell[data-level="3"] { background: rgba(255, 157, 0, 0.75); }
+        .contrib-cell[data-level="4"] { background: var(--accent); }
+        [data-theme="dark"] .contrib-cell[data-level="1"] { background: rgba(251, 191, 36, 0.2); }
+        [data-theme="dark"] .contrib-cell[data-level="2"] { background: rgba(251, 191, 36, 0.4); }
+        [data-theme="dark"] .contrib-cell[data-level="3"] { background: rgba(251, 191, 36, 0.65); }
+        [data-theme="dark"] .contrib-cell[data-level="4"] { background: var(--accent); }
+        .contrib-legend {
+            display: flex; align-items: center; gap: 6px;
+            justify-content: flex-end; margin-top: 8px;
+            font-size: 0.68rem; color: var(--text-secondary);
+        }
+        .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.65rem; color: var(--text-secondary);
+            font-weight: 500; padding-left: 0;
+        }
+        .contrib-months span {
+            min-width: 14px; text-align: center;
+        }
+        .contrib-tooltip {
+            position: fixed; background: var(--header-bg);
+            border: 1px solid var(--border); border-radius: 6px;
+            padding: 6px 10px; font-size: 0.72rem;
+            font-family: var(--mono); pointer-events: none;
+            z-index: 100; box-shadow: 0 4px 12px var(--shadow-lg);
+            display: none;
+        }
+
+        .contrib-years {
+            display: flex; gap: 6px; flex-wrap: wrap;
+        }
+        .contrib-year-btn {
+            background: var(--btn-bg); border: 1px solid var(--btn-border);
+            color: var(--text-secondary); padding: 4px 12px;
+            border-radius: 14px; cursor: pointer; font-size: 0.72rem;
+            font-weight: 600; font-family: var(--mono);
+            transition: all 0.2s; white-space: nowrap;
+        }
+        .contrib-year-btn:hover { border-color: var(--accent); color: var(--text); }
+        .contrib-year-btn.active { background: var(--accent); color: white; border-color: var(--accent); }
+
+
         .profile-overview {
             display: grid; grid-template-columns: repeat(3, 1fr);
             gap: 12px; margin-top: 20px; padding-top: 20px;
@@ -571,6 +671,9 @@
                 <button id="privateRepoBtn" class="text-btn" title="Access Private Repos">
                     <i class="fas fa-lock"></i> Token
                 </button>
+                <button id="screenshotBtn" class="text-btn" title="Screenshot & Share">
+                    <i class="fas fa-camera"></i> Share
+                </button>
                 <button id="themeToggle" class="icon-btn" aria-label="Toggle Theme">
                     <i class="fas fa-sun sun-icon"></i>
                     <i class="fas fa-moon moon-icon"></i>
@@ -628,6 +731,25 @@
                             </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"><i class="fas fa-fire" style="color:var(--accent);margin-right:6px;"></i>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="profile-overview">
@@ -680,6 +802,7 @@
         <div class="footer">
             Built by <a href="https://hf.co/prithivMLmods" target="_blank" rel="noopener">prithivMLmods</a>
         </div>
+        <div class="contrib-tooltip" id="contribTooltip"></div>
     </div>
 
     <script>
@@ -694,6 +817,8 @@
         activeTab: 'models',
         activeFilter: 'downloads-alltime',
         filterText: '',
+        contribYear: null, /* null = last 12 months, else specific year */
+        followingData: null, /* { users, orgs, total } from profile page scrape */
     };
 
     const $ = id => document.getElementById(id);
@@ -730,6 +855,15 @@
         overviewModels: $('overviewModels'),
         overviewDatasets: $('overviewDatasets'),
         overviewSpaces: $('overviewSpaces'),
+        profileSocial: $('profileSocial'),
+        contribSection: $('contribSection'),
+        contribMap: $('contribMap'),
+        contribMonths: $('contribMonths'),
+        contribTotal: $('contribTotal'),
+        contribTooltip: $('contribTooltip'),
+        contribYears: $('contribYears'),
+
+        screenshotBtn: $('screenshotBtn'),
     };
 
     const FEATURED_USERS = [
@@ -878,6 +1012,49 @@
         return null;
     }
 
+    async function getHuggingFaceFollowing(username) {
+        const url = `https://huggingface.co/${username}`;
+        try {
+            // Use corsproxy to avoid client-side fetch blocking
+            const response = await fetch(`https://corsproxy.io/?${encodeURIComponent(url)}`);
+            if (!response.ok) {
+                // fallback to direct if proxy fails
+                const fbResponse = await fetch(url);
+                if (!fbResponse.ok) throw new Error(`Failed to fetch profile. Status: ${fbResponse.status}`);
+                const text = await fbResponse.text();
+                return extractStats(text);
+            }
+            const text = await response.text();
+            return extractStats(text);
+        } catch (error) {
+            console.error("Error:", error.message);
+            return null;
+        }
+
+        function extractStats(text) {
+            // Extract the individual metrics from the page's embedded JSON data
+            const usersMatch = text.match(/&quot;numFollowingUsers&quot;:(\d+)/);
+            const orgsMatch = text.match(/&quot;numFollowingOrgs&quot;:(\d+)/);
+
+            if (usersMatch && orgsMatch) {
+                const numUsers = parseInt(usersMatch[1], 10);
+                const numOrgs = parseInt(orgsMatch[1], 10);
+
+                // Hugging Face logic: sum the followed users and followed orgs
+                const totalFollowing = numUsers + numOrgs;
+
+                return {
+                    totalFollowing: totalFollowing,
+                    followingUsers: numUsers,
+                    followingOrgs: numOrgs
+                };
+            } else {
+                console.error("Could not find following stats in the page source.");
+                return null;
+            }
+        }
+    }
+
     async function fetchUserStats() {
         const username = els.usernameInput.value.trim().replace(/^@/, '').replace(/\/$/, '');
         if (!username) return showMsg("Please enter a username.", "error");
@@ -898,7 +1075,7 @@
                 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`),
+                fetchAllPages(`${HF_API}/spaces?author=${uEnc}&limit=1000&full=true&expand[]=likes&expand[]=createdAt&expand[]=lastModified`),
             ]);
 
             state.profile = profileData.status === 'fulfilled' ? profileData.value : null;
@@ -983,6 +1160,9 @@
             window.location.hash = username;
             document.title = `${username} — HF User Stats`;
 
+            /* Fetch real following counts (users + orgs) from profile page */
+            state.followingData = await getHuggingFaceFollowing(username);
+
             renderProfile();
             renderOverview();
             setActiveTab('models');
@@ -1015,6 +1195,27 @@
         const fullname = p?.fullname || p?.name || '';
         els.profileFullname.textContent = fullname;
         els.profileFullname.style.display = fullname ? 'block' : 'none';
+
+        /* Followers / Following / Orgs */
+        const followers = p?.numFollowers ?? 0;
+        const fd = state.followingData;
+        const followingUsers = fd ? fd.followingUsers : (p?.numFollowing ?? 0);
+        const followingOrgs = fd ? fd.followingOrgs : 0;
+        const followingTotal = fd ? fd.totalFollowing : (p?.numFollowing ?? 0);
+        const memberOrgsCount = Array.isArray(p?.orgs) ? p.orgs.length : 0;
+        let socialHtml = '';
+        socialHtml += `<a class="social-stat" href="https://huggingface.co/${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>`;
+        socialHtml += `<a class="social-stat" href="https://huggingface.co/${encodeURIComponent(u)}?following=true" target="_blank" rel="noopener" title="${followingUsers} users + ${followingOrgs} orgs">
+            <i class="fas fa-user-plus"></i><span class="social-num">${formatNum(followingTotal)}</span> Following</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;
+
+        /* Contribution map */
+        renderContribMap();
     }
 
     function renderOverview() {
@@ -1026,6 +1227,170 @@
         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; }
+
+        /* Determine available years from all items */
+        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 currentYear = new Date().getFullYear();
+
+        /* Render year filter pills */
+        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));
+            });
+        });
+
+        /* Determine date range */
+        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';
+        }
+
+        /* Count contributions per day */
+        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}`;
+
+        /* Build grid starting from Sunday */
+        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;
+
+        /* Tooltip */
+        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'; };
+
+    }
+
+    async function takeScreenshot() {
+        const btn = els.screenshotBtn;
+        const orig = btn.innerHTML;
+        btn.innerHTML = '<i class="fas fa-spinner fa-spin"></i> Capturing…';
+        btn.disabled = true;
+        try {
+            const target = document.querySelector('.app-container');
+            const canvas = await html2canvas(target, {
+                backgroundColor: getComputedStyle(document.body).getPropertyValue('background-color'),
+                scale: 2,
+                useCORS: true,
+                logging: false,
+            });
+            canvas.toBlob(blob => {
+                const url = URL.createObjectURL(blob);
+                const a = document.createElement('a');
+                a.href = url;
+                a.download = `hf-stats-${state.username || 'page'}-${Date.now()}.png`;
+                document.body.appendChild(a);
+                a.click();
+                document.body.removeChild(a);
+                URL.revokeObjectURL(url);
+                btn.innerHTML = '<i class="fas fa-check"></i> Saved!';
+                setTimeout(() => { btn.innerHTML = orig; }, 2000);
+            }, 'image/png');
+        } catch (err) {
+            console.error('Screenshot failed:', err);
+            btn.innerHTML = '<i class="fas fa-times"></i> Failed';
+            setTimeout(() => { btn.innerHTML = orig; }, 2000);
+        } finally {
+            btn.disabled = false;
+        }
+    }
+
     function setActiveTab(tab) {
         state.activeTab = tab;
         state.activeFilter = (tab === 'spaces') ? 'likes' : 'downloads-alltime';
@@ -1253,8 +1618,11 @@
             if (tab !== 'spaces') {
                 const dlAll = getLifetimeDownloads(item);
                 const dlMonth = getMonthlyDownloads(item);
-                meta += `<span class="t-stat dl-stat" title="${formatNumFull(dlAll)} downloads (all time)"><i class="fas fa-download"></i> ${formatNum(dlAll)}</span>`;
-                meta += `<span class="t-stat monthly-stat" title="${formatNumFull(dlMonth)} downloads (last month)"><i class="fas fa-calendar-alt"></i> ${formatNum(dlMonth)}</span>`;
+                if (state.activeFilter === 'downloads-monthly') {
+                    meta += `<span class="t-stat monthly-stat" title="${formatNumFull(dlMonth)} downloads (last month)"><i class="fas fa-calendar-alt"></i> ${formatNum(dlMonth)}</span>`;
+                } else {
+                    meta += `<span class="t-stat dl-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 like-stat" title="${formatNumFull(likes)} likes"><i class="fas fa-heart"></i> ${formatNum(likes)}</span>`;
@@ -1379,6 +1747,7 @@
         );
 
         els.copyTreeBtn.addEventListener('click', copyFullTree);
+        els.screenshotBtn.addEventListener('click', takeScreenshot);
         parseHash();
     });
     </script>