Update index.html

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/jspdf/2.5.2/jspdf.umd.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');
@@ -787,6 +788,9 @@
                         <button class="tool-btn action-btn" id="copyTreeBtn">
                             <i class="far fa-copy"></i> Copy Tree
                         </button>
+                        <button class="tool-btn action-btn" id="downloadReportBtn" style="background:var(--accent);color:#fff;border-color:var(--accent);">
+                            <i class="fas fa-file-pdf"></i> Report
+                        </button>
                     </div>
                 </div>
                 <div class="terminal-window">
@@ -815,7 +819,6 @@
         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);
@@ -844,6 +847,7 @@
         lineNumbers: $('lineNumbers'),
         treeContent: $('treeContent'),
         copyTreeBtn: $('copyTreeBtn'),
+        downloadReportBtn: $('downloadReportBtn'),
         tokenSection: $('tokenSection'),
         hfToken: $('hfToken'),
         saveTokenBtn: $('saveTokenBtn'),
@@ -1007,84 +1011,6 @@
         return null;
     }
 
-    async function getHuggingFaceFollowing(username) {
-        const profileUrl = `https://huggingface.co/${username}`;
-
-        /* Try fetching the profile HTML from multiple sources */
-        const attempts = [
-            /* 1. Direct fetch — works when hosted on HF Spaces (same origin) */
-            () => fetch(profileUrl),
-            /* 2. allorigins proxy */
-            () => fetch(`https://api.allorigins.win/raw?url=${encodeURIComponent(profileUrl)}`),
-            /* 3. corsproxy.io */
-            () => fetch(`https://corsproxy.io/?${encodeURIComponent(profileUrl)}`),
-            /* 4. cors-anywhere style */
-            () => fetch(`https://api.codetabs.com/v1/proxy?quest=${encodeURIComponent(profileUrl)}`),
-        ];
-
-        for (const attempt of attempts) {
-            try {
-                const response = await attempt();
-                if (!response.ok) continue;
-                const text = await response.text();
-                const stats = extractFollowingStats(text);
-                if (stats) {
-                    console.log('[HF-Stats] Following counts fetched:', stats);
-                    return stats;
-                }
-            } catch (e) {
-                /* try next proxy */
-            }
-        }
-
-        console.warn('[HF-Stats] All fetch methods failed for following counts');
-        return null;
-    }
-
-    function extractFollowingStats(text) {
-        /*
-         * The HF profile page embeds JSON in HTML attributes using &quot; encoding.
-         * Some proxies may decode these, so we check both patterns.
-         */
-        let numUsers = null, numOrgs = null;
-
-        /* Pattern 1: HTML-encoded quotes (&quot;) — raw profile page */
-        let m1 = text.match(/&quot;numFollowingUsers&quot;:(\d+)/);
-        let m2 = text.match(/&quot;numFollowingOrgs&quot;:(\d+)/);
-        if (m1 && m2) {
-            numUsers = parseInt(m1[1], 10);
-            numOrgs = parseInt(m2[1], 10);
-        }
-
-        /* Pattern 2: raw JSON quotes — some proxies decode entities */
-        if (numUsers === null) {
-            m1 = text.match(/"numFollowingUsers":(\d+)/);
-            m2 = text.match(/"numFollowingOrgs":(\d+)/);
-            if (m1 && m2) {
-                numUsers = parseInt(m1[1], 10);
-                numOrgs = parseInt(m2[1], 10);
-            }
-        }
-
-        /* Pattern 3: single-quoted or escaped */
-        if (numUsers === null) {
-            m1 = text.match(/numFollowingUsers['":\s]+(\d+)/);
-            m2 = text.match(/numFollowingOrgs['":\s]+(\d+)/);
-            if (m1 && m2) {
-                numUsers = parseInt(m1[1], 10);
-                numOrgs = parseInt(m2[1], 10);
-            }
-        }
-
-        if (numUsers !== null && numOrgs !== null) {
-            return {
-                totalFollowing: numUsers + numOrgs,
-                followingUsers: numUsers,
-                followingOrgs: numOrgs
-            };
-        }
-        return null;
-    }
 
     async function fetchUserStats() {
         const username = els.usernameInput.value.trim().replace(/^@/, '').replace(/\/$/, '');
@@ -1191,13 +1117,6 @@
             window.location.hash = username;
             document.title = `${username} — HF User Stats`;
 
-            /* Fetch following counts in background — don't block rendering */
-            getHuggingFaceFollowing(username).then(fd => {
-                if (fd) {
-                    state.followingData = fd;
-                    renderProfileSocial();
-                }
-            });
 
             renderProfile();
             renderOverview();
@@ -1381,16 +1300,10 @@
         const u = state.username;
         const p = state.profile;
         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>`;
@@ -1398,6 +1311,143 @@
         els.profileSocial.innerHTML = socialHtml;
     }
 
+    function downloadReport() {
+        const { jsPDF } = window.jspdf;
+        const doc = new jsPDF({ unit: 'mm', format: 'a4' });
+        const u = state.username;
+        const p = state.profile;
+        const pw = 210; /* A4 width */
+        let y = 18;
+
+        const colors = {
+            accent: [255, 157, 0],
+            dark: [30, 30, 30],
+            mid: [100, 100, 100],
+            light: [160, 160, 160],
+            line: [220, 220, 220],
+        };
+
+        /* Header bar */
+        doc.setFillColor(...colors.accent);
+        doc.rect(0, 0, pw, 12, 'F');
+        doc.setFontSize(11); doc.setTextColor(255, 255, 255);
+        doc.setFont('helvetica', 'bold');
+        doc.text(`HuggingFace Stats Report — ${u}`, 10, 8);
+        doc.setFontSize(7); doc.setFont('helvetica', 'normal');
+        doc.text(new Date().toLocaleDateString('en-US', { year: 'numeric', month: 'long', day: 'numeric' }), pw - 10, 8, { align: 'right' });
+
+        /* Profile section */
+        y = 22;
+        doc.setFontSize(14); doc.setTextColor(...colors.dark); doc.setFont('helvetica', 'bold');
+        doc.text(p?.fullname || u, 10, y);
+        y += 5;
+        doc.setFontSize(9); doc.setTextColor(...colors.mid); doc.setFont('helvetica', 'normal');
+        doc.text(`@${u}  •  https://huggingface.co/${u}`, 10, y);
+        y += 5;
+        const followers = p?.numFollowers ?? 0;
+        const orgsCount = Array.isArray(p?.orgs) ? p.orgs.length : 0;
+        doc.text(`Followers: ${followers.toLocaleString()}  |  Organizations: ${orgsCount}`, 10, y);
+        y += 8;
+
+        /* Divider */
+        doc.setDrawColor(...colors.line); doc.setLineWidth(0.3); doc.line(10, y, pw - 10, y);
+        y += 6;
+
+        /* Summary boxes */
+        doc.setFontSize(10); doc.setTextColor(...colors.dark); doc.setFont('helvetica', 'bold');
+        doc.text('Overview', 10, y); y += 6;
+
+        const totalDownloads = state.models.reduce((s, m) => s + getLifetimeDownloads(m), 0)
+            + 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 monthlyDl = state.models.reduce((s, m) => s + getMonthlyDownloads(m), 0)
+            + state.datasets.reduce((s, d) => s + getMonthlyDownloads(d), 0);
+
+        const summaryItems = [
+            ['Models', state.models.length],
+            ['Datasets', state.datasets.length],
+            ['Spaces', state.spaces.length],
+            ['Total Downloads (All Time)', totalDownloads.toLocaleString()],
+            ['Total Downloads (Last Month)', monthlyDl.toLocaleString()],
+            ['Total Likes', totalLikes.toLocaleString()],
+        ];
+
+        doc.setFont('helvetica', 'normal'); doc.setFontSize(9);
+        summaryItems.forEach(([label, val]) => {
+            doc.setTextColor(...colors.mid); doc.text(label + ':', 14, y);
+            doc.setTextColor(...colors.dark); doc.text(String(val), 80, y);
+            y += 5;
+        });
+        y += 4;
+
+        /* Section renderer helper */
+        function addSection(title, items, type) {
+            if (items.length === 0) return;
+
+            /* Page break check */
+            if (y > 260) { doc.addPage(); y = 15; }
+
+            doc.setDrawColor(...colors.line); doc.line(10, y, pw - 10, y); y += 6;
+            doc.setFontSize(11); doc.setTextColor(...colors.accent); doc.setFont('helvetica', 'bold');
+            doc.text(`${title} (${items.length})`, 10, y); y += 6;
+
+            /* Table header */
+            doc.setFillColor(245, 245, 245);
+            doc.rect(10, y - 3.5, pw - 20, 5.5, 'F');
+            doc.setFontSize(7); doc.setTextColor(...colors.mid); doc.setFont('helvetica', 'bold');
+            doc.text('Name', 12, y);
+            if (type !== 'spaces') {
+                doc.text('Downloads (All)', 100, y);
+                doc.text('Downloads (Month)', 130, y);
+            }
+            doc.text('Likes', 170, y);
+            doc.text('Last Modified', 182, y);
+            y += 5;
+
+            doc.setFont('helvetica', 'normal'); doc.setFontSize(7.5);
+
+            items.forEach(item => {
+                if (y > 280) { doc.addPage(); y = 15; }
+
+                const name = (item.id || item.modelId || '').split('/').pop();
+                doc.setTextColor(...colors.dark);
+                doc.text(name.length > 45 ? name.slice(0, 42) + '...' : name, 12, y);
+
+                if (type !== 'spaces') {
+                    doc.setTextColor(...colors.mid);
+                    doc.text(getLifetimeDownloads(item).toLocaleString(), 100, y);
+                    doc.text(getMonthlyDownloads(item).toLocaleString(), 130, y);
+                }
+                doc.setTextColor(...colors.mid);
+                doc.text(String(getItemLikes(item)), 170, y);
+
+                const modified = item.lastModified ? new Date(item.lastModified).toLocaleDateString('en-US', { month: 'short', day: 'numeric', year: '2-digit' }) : '-';
+                doc.text(modified, 182, y);
+                y += 4.2;
+            });
+            y += 4;
+        }
+
+        /* Sort each section by downloads/likes */
+        const sortedModels = [...state.models].sort((a, b) => getLifetimeDownloads(b) - getLifetimeDownloads(a));
+        const sortedDatasets = [...state.datasets].sort((a, b) => getLifetimeDownloads(b) - getLifetimeDownloads(a));
+        const sortedSpaces = [...state.spaces].sort((a, b) => getItemLikes(b) - getItemLikes(a));
+
+        addSection('Models', sortedModels, 'models');
+        addSection('Datasets', sortedDatasets, 'datasets');
+        addSection('Spaces', sortedSpaces, 'spaces');
+
+        /* Footer on every page */
+        const totalPages = doc.internal.getNumberOfPages();
+        for (let i = 1; i <= totalPages; i++) {
+            doc.setPage(i);
+            doc.setFontSize(7); doc.setTextColor(...colors.light); doc.setFont('helvetica', 'normal');
+            doc.text(`Generated by hf-user-stats  •  Page ${i}/${totalPages}`, pw / 2, 290, { align: 'center' });
+        }
+
+        doc.save(`hf-stats-${u}-${Date.now()}.pdf`);
+    }
+
     function setActiveTab(tab) {
         state.activeTab = tab;
         state.activeFilter = (tab === 'spaces') ? 'likes' : 'downloads-alltime';
@@ -1754,6 +1804,7 @@
         );
 
         els.copyTreeBtn.addEventListener('click', copyFullTree);
+        els.downloadReportBtn.addEventListener('click', downloadReport);
         parseHash();
     });
     </script>