Update index.html

index.html

@@ -4,7 +4,7 @@
     <meta charset="UTF-8">
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
     <title>like-graph</title>
-    <meta name="description" content="Generate a daily likes graph for any HuggingFace model, dataset, or space.">
+    <meta name="description" content="Generate a daily likes growth graph for any HuggingFace model, dataset, or space.">
     <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
     <script src="https://cdn.jsdelivr.net/npm/chart.js@4.4.1/dist/chart.umd.min.js"></script>
     <style>
@@ -69,6 +69,87 @@
             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 ── */
+        .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;
+        }
+
         /* ── Main Content ── */
         .term-body {
             padding: 20px;
@@ -93,6 +174,8 @@
             border-radius: 3px;
             padding: 0 14px;
             height: 40px;
+            flex: 1;
+            min-width: 200px;
             transition: border-color 0.15s;
         }
         .prompt-group:focus-within {
@@ -107,7 +190,7 @@
             font-weight: 500;
         }
 
-        .prompt-group input, .prompt-group select {
+        .prompt-group input {
             background: transparent;
             border: none;
             color: #ffffff;
@@ -116,10 +199,21 @@
             font-size: 0.82rem;
             font-weight: 400;
         }
-        .prompt-group select { cursor: pointer; appearance: none; padding-right: 14px; }
-        .prompt-group select option { background: #000000; color: #ffffff; }
         .prompt-group input::placeholder { color: #444444; }
 
+        .type-select {
+            background: #0a0a0a;
+            border: 1px solid #222222;
+            color: #ffffff;
+            padding: 0 14px;
+            height: 40px;
+            border-radius: 3px;
+            font-size: 0.82rem;
+            font-weight: 500;
+            cursor: pointer;
+        }
+        .type-select:focus { outline: none; border-color: #ffffff; }
+
         .exec-btn {
             background: #ffffff;
             color: #000000;
@@ -150,20 +244,19 @@
         }
         .error { color: #ffffff; background: #1a0000; border-color: #440000 !important; }
         .loading { color: #ffffff; background: #0a0a0a; border-color: #333333 !important; }
+        .success { color: #ffffff; background: #001a00; border-color: #004400 !important; }
 
-        /* ── Empty / Home State ── */
+        /* ── Empty State ── */
         .empty-state {
             text-align: center;
-            padding-top: 40px;
+            padding-top: 60px;
         }
-
         .empty-title {
             font-size: 1.1rem;
             font-weight: 600;
             color: #ffffff;
             margin-bottom: 8px;
         }
-
         .empty-desc {
             color: #666666;
             font-size: 0.8rem;
@@ -171,7 +264,7 @@
             line-height: 1.6;
         }
 
-        /* ── Profile Card ── */
+        /* ── Profile / Repo Card ── */
         .profile-block {
             border: 1px solid #222222;
             border-radius: 3px;
@@ -180,9 +273,29 @@
             animation: termSlide 0.25s ease-out;
         }
 
-        @keyframes termSlide {
-            from { opacity: 0; max-height: 0; }
-            to { opacity: 1; max-height: 500px; }
+        .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; }
@@ -199,79 +312,66 @@
         .profile-name a { color: #ffffff; }
         .profile-name a:hover { text-decoration: underline; }
 
-        .profile-fullname {
-            font-size: 0.78rem;
-            color: #666666;
-            margin-top: 2px;
+        .type-badge {
+            background: #222222;
+            color: #aaaaaa;
+            padding: 2px 8px;
+            border-radius: 3px;
+            font-size: 0.65rem;
+            text-transform: uppercase;
+            letter-spacing: 1px;
+            font-weight: 700;
         }
 
-        .profile-social {
+        .profile-meta {
             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;
-        }
-        .social-stat i { font-size: 0.72rem; }
-
-        /* ── Overview Cards ── */
-        .overview-grid {
-            display: grid;
-            grid-template-columns: repeat(3, 1fr);
-            gap: 10px;
-            margin-top: 16px;
-            padding-top: 16px;
-            border-top: 1px solid #1a1a1a;
         }
+        .profile-meta span { display: flex; align-items: center; gap: 6px; }
 
-        .overview-card {
-            background: #0a0a0a;
-            border: 1px solid #1a1a1a;
+        /* ── Graph Section ── */
+        .graph-wrapper {
+            border: 1px solid #222222;
             border-radius: 3px;
-            padding: 14px;
-            text-align: center;
+            background: #000000;
+            padding: 20px;
+            position: relative;
+            height: 450px;
+            margin-bottom: 16px;
         }
 
-        .overview-num {
-            font-size: 1.5rem;
-            font-weight: 700;
-            color: #ffffff;
+        .graph-header {
+            display: flex;
+            justify-content: space-between;
+            align-items: center;
+            margin-bottom: 14px;
+            flex-wrap: wrap;
+            gap: 10px;
+            position: absolute;
+            top: 20px;
+            left: 20px;
+            right: 20px;
+            z-index: 1;
+            pointer-events: none;
         }
-
-        .overview-label {
-            font-size: 0.68rem;
-            color: #666666;
+        
+        .graph-title {
+            font-size: 0.78rem;
             font-weight: 600;
+            color: #888888;
             text-transform: uppercase;
             letter-spacing: 1px;
-            margin-top: 4px;
-        }
-
-        /* ── Chart Area ── */
-        .chart-wrapper {
-            border: 1px solid #222222;
-            border-radius: 3px;
-            padding: 20px;
-            background: #050505;
-            position: relative;
-            height: 450px;
-            margin-bottom: 14px;
         }
 
-        .disclaimer {
+        .graph-note {
+            font-size: 0.65rem;
+            color: #555555;
+            margin-top: 8px;
             text-align: center;
-            font-size: 0.68rem;
-            color: #444444;
-            margin-top: 10px;
-            margin-bottom: 20px;
         }
 
         /* ── Footer ── */
@@ -300,17 +400,16 @@
         }
 
         @keyframes spin { to { transform: rotate(360deg); } }
-
         .hidden { display: none !important; }
 
         /* ── Responsive ── */
         @media (max-width: 640px) {
             .input-line { flex-direction: column; }
             .exec-btn { width: 100%; justify-content: center; }
-            .overview-grid { grid-template-columns: repeat(3, 1fr); }
-            .overview-card { padding: 10px 6px; }
-            .overview-num { font-size: 1.2rem; }
-            .chart-wrapper { height: 350px; padding: 10px; }
+            .profile-top { flex-direction: column; text-align: center; }
+            .profile-name { justify-content: center; }
+            .profile-meta { justify-content: center; }
+            .graph-wrapper { height: 350px; padding: 10px; }
         }
     </style>
 </head>
@@ -320,24 +419,38 @@
         <div class="title-bar">
             <div class="title-dot"></div>
             <span class="title-text">[like-graph]</span>
+            <div class="title-actions">
+                <button id="privateRepoBtn" class="title-btn" title="Access Private Repos">
+                    <i class="fas fa-lock"></i> token
+                </button>
+            </div>
+        </div>
+
+        <!-- Token Panel -->
+        <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.</p>
         </div>
 
         <!-- Main Body -->
         <div class="term-body">
             <!-- Input -->
             <div class="input-line">
-                <div class="prompt-group" style="flex: 0.5;">
-                    <span class="prompt-symbol">type:</span>
-                    <select id="typeSelect">
-                        <option value="models">models</option>
-                        <option value="datasets">datasets</option>
-                        <option value="spaces">spaces</option>
-                    </select>
-                </div>
-                <div class="prompt-group" style="flex: 2;">
-                    <span class="prompt-symbol">~$ graph&nbsp;</span>
-                    <input type="text" id="pathInput" placeholder="org/repo or https://huggingface.co/..." autocomplete="off">
+                <div class="prompt-group">
+                    <span class="prompt-symbol">~$ fetch&nbsp;</span>
+                    <input type="text" id="repoInput" placeholder="repo path (e.g. prithivMLmods/README or org/dataset)" autocomplete="off">
                 </div>
+                <select id="typeSelect" class="type-select">
+                    <option value="auto">auto-detect</option>
+                    <option value="models">model</option>
+                    <option value="datasets">dataset</option>
+                    <option value="spaces">space</option>
+                </select>
                 <button id="fetchBtn" class="exec-btn">
                     <i class="fas fa-chart-line"></i> generate
                 </button>
@@ -348,367 +461,428 @@
             <!-- Empty State -->
             <div id="emptyState" class="empty-state">
                 <div style="margin-bottom:32px;">
-                    <div class="empty-title">hugging-face like graph</div>
-                    <div class="empty-desc">track daily like progression for any model, dataset, or space. paste the repository path or full url.</div>
+                    <div class="empty-title">hugging-face like tracker</div>
+                    <div class="empty-desc">paste a model, dataset, or space path to generate a daily like growth graph.</div>
                 </div>
             </div>
 
             <!-- Results -->
             <div id="resultsSection" class="hidden">
-                <!-- Profile -->
-                <div id="profileCard" class="profile-block">
+                <!-- Repo Info -->
+                <div 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="itemLink" href="#" target="_blank" rel="noopener">
-                                    <span id="itemId"></span>
+                                <a id="repoLink" href="#" target="_blank" rel="noopener">
+                                    <span id="repoId"></span>
                                 </a>
+                                <span class="type-badge" id="repoType"></span>
                             </div>
-                            <div class="profile-fullname" id="itemAuthor"></div>
-                            <div class="profile-social" id="itemMeta"></div>
-                        </div>
-                    </div>
-                    <div class="overview-grid">
-                        <div class="overview-card">
-                            <div class="overview-num" id="totalLikesNum">0</div>
-                            <div class="overview-label">total likes</div>
-                        </div>
-                        <div class="overview-card">
-                            <div class="overview-num" id="daysActiveNum">0</div>
-                            <div class="overview-label">days active</div>
-                        </div>
-                        <div class="overview-card">
-                            <div class="overview-num" id="avgDailyNum">0</div>
-                            <div class="overview-label">avg daily likes</div>
+                            <div class="profile-meta" id="repoMeta"></div>
                         </div>
                     </div>
                 </div>
 
-                <!-- Chart -->
-                <div class="chart-wrapper">
-                    <canvas id="likeChart"></canvas>
+                <!-- Graph -->
+                <div class="graph-wrapper">
+                    <div class="graph-header">
+                        <span class="graph-title">cumulative likes over time</span>
+                    </div>
+                    <canvas id="likesChart"></canvas>
                 </div>
-                <div class="disclaimer">
-                    Note: HF API exposes current total likes but not historical daily timestamps. The graph models the daily progression organically to match the exact total.
+                <div class="graph-note">
+                    Note: HuggingFace API provides current like totals but not historical daily snapshots. The graph projects an estimated organic growth curve from the publication date to the current like count.
                 </div>
             </div>
 
             <div class="footer">
-                built for <a href="https://hf.co" target="_blank" rel="noopener">huggingface</a> analytics
+                built by <a href="https://hf.co/prithivMLmods" target="_blank" rel="noopener">prithivMLmods</a>
             </div>
         </div>
     </div>
 
     <script>
-    const HF_API = 'https://huggingface.co/api';
-    const HF_BASE = 'https://huggingface.co';
-
-    let likeChart = null;
-    const $ = id => document.getElementById(id);
-
-    const els = {
-        typeSelect: $('typeSelect'),
-        pathInput: $('pathInput'),
-        fetchBtn: $('fetchBtn'),
-        statusMsg: $('statusMsg'),
-        emptyState: $('emptyState'),
-        resultsSection: $('resultsSection'),
-        itemLink: $('itemLink'),
-        itemId: $('itemId'),
-        itemAuthor: $('itemAuthor'),
-        itemMeta: $('itemMeta'),
-        totalLikesNum: $('totalLikesNum'),
-        daysActiveNum: $('daysActiveNum'),
-        avgDailyNum: $('avgDailyNum')
-    };
-
-    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 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 parseInput(rawInput) {
-        let input = rawInput.trim().replace(/^@/, '');
-        let type = els.typeSelect.value;
-
-        // Strip URL prefix
-        if (input.startsWith('https://')) {
-            input = input.replace(/^https?:\/\/(www\.)?huggingface\.com\//, '');
-        }
-
-        // Auto-detect type from URL path if present
-        if (input.startsWith('spaces/')) {
-            type = 'spaces';
-            input = input.substring(7);
-        } else if (input.startsWith('datasets/')) {
-            type = 'datasets';
-            input = input.substring(9);
-        } else if (input.startsWith('models/')) {
-            type = 'models';
-            input = input.substring(7);
-        }
-
-        // Update the select dropdown to reflect auto-detection
-        els.typeSelect.value = type;
-
-        // Remove trailing slashes
-        input = input.replace(/\/$/, '');
-
-        // If input contains extra slashes (e.g. /tree/main), just take the first two parts (org/repo)
-        const parts = input.split('/');
-        if (parts.length > 2) {
-            input = parts.slice(0, 2).join('/');
-        }
-
-        return { type, id: input };
-    }
-
-    async function fetchGraphData() {
-        const { type, id } = parseInput(els.pathInput.value);
-        if (!id) return showMsg("error: please enter a valid repository path.", "error");
-
-        els.emptyState.classList.add('hidden');
-        els.resultsSection.classList.add('hidden');
-        els.fetchBtn.disabled = true;
-        showMsg(`<span class="spinner"></span> fetching stats for ${escapeHtml(id)}...`, 'loading');
-
-        try {
-            const url = `${HF_API}/${type}/${encodeURIComponent(id)}`;
-            const resp = await fetch(url, { headers: { Accept: 'application/json' } });
-
-            if (!resp.ok) {
-                if (resp.status === 404) throw new Error(`Repository not found. Check if the path and type (${type}) are correct.`);
-                throw new Error(`HTTP ${resp.status}`);
+        const HF_API = 'https://huggingface.co/api';
+        const HF_BASE = 'https://huggingface.co';
+
+        let state = {
+            chart: null
+        };
+
+        const $ = id => document.getElementById(id);
+
+        const els = {
+            repoInput: $('repoInput'),
+            typeSelect: $('typeSelect'),
+            fetchBtn: $('fetchBtn'),
+            statusMsg: $('statusMsg'),
+            emptyState: $('emptyState'),
+            resultsSection: $('resultsSection'),
+            profileAvatar: $('profileAvatar'),
+            avatarLetter: $('avatarLetter'),
+            repoLink: $('repoLink'),
+            repoId: $('repoId'),
+            repoType: $('repoType'),
+            repoMeta: $('repoMeta'),
+            tokenSection: $('tokenSection'),
+            hfToken: $('hfToken'),
+            saveTokenBtn: $('saveTokenBtn'),
+            clearTokenBtn: $('clearTokenBtn'),
+            privateRepoBtn: $('privateRepoBtn'),
+            chartCanvas: $('likesChart').getContext('2d')
+        };
+
+        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 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 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');
             }
+        }
 
-            const data = await resp.json();
-
-            if (!data.createdAt) {
-                throw new Error("This repository has no creation date available in the API.");
+        async function fetchRepoData(repoPath, type) {
+            const headers = getHeaders();
+            const cleanPath = repoPath.replace(/^\/+|\/+$/g, '');
+            
+            if (type !== 'auto') {
+                const resp = await fetch(`${HF_API}/${type}/${encodeURIComponent(cleanPath)}`, { headers });
+                if (!resp.ok) throw new Error(`HTTP ${resp.status}`);
+                const data = await resp.json();
+                return { data, type };
             }
 
-            renderGraph(data, type);
-            showMsg('', '');
-            els.resultsSection.classList.remove('hidden');
+            // Auto-detect
+            const types = ['models', 'datasets', 'spaces'];
+            let foundData = null;
+            let foundType = null;
+
+            // Try all 3 simultaneously and take the first success
+            const promises = types.map(t => 
+                fetch(`${HF_API}/${t}/${encodeURIComponent(cleanPath)}`, { headers })
+                    .then(resp => resp.ok ? resp.json() : Promise.reject(new Error(`HTTP ${resp.status}`)))
+                    .then(data => ({ data, type: t }))
+            );
+
+            try {
+                const result = await Promise.any(promises);
+                foundData = result.data;
+                foundType = result.type;
+            } catch (e) {
+                throw new Error('Repo not found in models, datasets, or spaces.');
+            }
 
-        } catch (err) {
-            console.error(err);
-            showMsg(`error: ${err.message}`, 'error');
-            els.emptyState.classList.remove('hidden');
-        } finally {
-            els.fetchBtn.disabled = false;
+            return { data: foundData, type: foundType };
         }
-    }
 
-    function generateLikeHistory(createdAtStr, totalLikes, lastModifiedStr) {
-        const createdDate = new Date(createdAtStr);
-        let endDate = lastModifiedStr ? new Date(lastModifiedStr) : new Date();
-        
-        // Ensure endDate is at least today if lastModified is in the future or null
-        const today = new Date();
-        if (endDate > today || endDate < createdDate) endDate = today;
+        async function fetchAuthorAvatar(author) {
+            const headers = getHeaders();
+            try {
+                const resp = await fetch(`${HF_API}/users/${encodeURIComponent(author)}/overview`, { headers });
+                if (resp.ok) {
+                    const data = await resp.json();
+                    return data.avatarUrl || null;
+                }
+            } catch (e) {}
+            return null;
+        }
 
-        const diffTime = Math.abs(endDate - createdDate);
-        const diffDays = Math.max(1, Math.ceil(diffTime / (1000 * 60 * 60 * 24)));
+        async function generateGraph() {
+            const repoPath = els.repoInput.value.trim();
+            if (!repoPath) return showMsg("error: please enter a repo path.", "error");
 
-        const labels = [];
-        const cumulativeData = [];
-        const dailyData = [];
-        let currentLikes = 0;
+            const type = els.typeSelect.value;
+            
+            els.emptyState.classList.add('hidden');
+            els.resultsSection.classList.add('hidden');
+            els.fetchBtn.disabled = true;
+            showMsg(`<span class="spinner"></span> fetching data for ${escapeHtml(repoPath)}...`, 'loading');
+
+            try {
+                const { data, type: resolvedType } = await fetchRepoData(repoPath, type);
+                
+                if (!data.likes || !data.createdAt) {
+                    if (!data.createdAt) throw new Error('Creation date not found for this repo.');
+                }
 
-        // Weights for organic distribution (initial spike, long tail)
-        const weights = [];
-        const tau = Math.max(5, diffDays / 4); // decay constant
+                const likes = data.likes || 0;
+                const createdAt = data.createdAt;
+                const author = data.author || repoPath.split('/')[0];
+                const id = data.id || repoPath;
+
+                showMsg(`<span class="spinner"></span> generating graph...`, 'loading');
+
+                // Fetch Avatar
+                const avatarUrl = await fetchAuthorAvatar(author);
+                
+                // Render Repo Info
+                els.repoId.textContent = id;
+                els.repoLink.href = resolvedType === 'datasets' ? `${HF_BASE}/datasets/${id}` :
+                                   resolvedType === 'spaces' ? `${HF_BASE}/spaces/${id}` :
+                                   `${HF_BASE}/${id}`;
+                els.repoType.textContent = resolvedType.replace('s', '').replace('model', 'model').replace('dataset', 'dataset').replace('space', 'space');
+
+                if (avatarUrl) {
+                    const full = avatarUrl.startsWith('http') ? avatarUrl : `${HF_BASE}${avatarUrl}`;
+                    els.profileAvatar.innerHTML = `<img src="${full}" alt="${escapeHtml(author)}" onerror="this.parentElement.innerHTML='<span class=\\'avatar-letter\\'>${author[0].toUpperCase()}</span>'">`;
+                } else {
+                    els.profileAvatar.innerHTML = `<span class="avatar-letter">${author[0].toUpperCase()}</span>`;
+                }
 
-        for (let i = 0; i < diffDays; i++) {
-            let w = Math.exp(-i / tau);
-            // Add some organic noise
-            w *= (1 + (Math.random() - 0.5) * 0.6);
-            if (w <= 0) w = 0.001;
-            weights.push(w);
+                els.repoMeta.innerHTML = `
+                    <span><i class="fas fa-user"></i> ${escapeHtml(author)}</span>
+                    <span><i class="fas fa-calendar-alt"></i> created ${new Date(createdAt).toLocaleDateString()}</span>
+                    <span><i class="fas fa-heart"></i> ${formatNum(likes)} total likes</span>
+                    <span><i class="far fa-clock"></i> updated ${relativeTime(data.lastModified)}</span>
+                `;
+
+                els.resultsSection.classList.remove('hidden');
+                showMsg('', '');
+
+                // Generate Daily Data
+                const dailyData = generateDailyLikeData(new Date(createdAt), likes);
+                renderChart(dailyData, id);
+
+            } catch (err) {
+                console.error(err);
+                showMsg(`error: ${err.message}`, 'error');
+                els.emptyState.classList.remove('hidden');
+            } finally {
+                els.fetchBtn.disabled = false;
+            }
         }
 
-        const sumWeights = weights.reduce((a, b) => a + b, 0);
-
-        for (let i = 0; i < diffDays; i++) {
-            let dayLikes = Math.round((weights[i] / sumWeights) * totalLikes);
+        function generateDailyLikeData(startDate, totalLikes) {
+            const endDate = new Date();
+            const days = Math.ceil((endDate - startDate) / (1000 * 60 * 60 * 24));
             
-            // Handle edge cases for very low total likes
-            if (totalLikes <= 2) {
-                if (i === 0) dayLikes = totalLikes;
-                else dayLikes = 0;
+            if (days <= 0 || totalLikes <= 0) {
+                return { labels: [startDate.toLocaleDateString()], data: [totalLikes] };
             }
 
-            currentLikes += dayLikes;
-
-            // Clamp values to not exceed total
-            if (currentLikes > totalLikes) {
-                dayLikes -= (currentLikes - totalLikes);
-                currentLikes = totalLikes;
+            const labels = [];
+            const data = [];
+            let currentLikes = 0;
+
+            for (let i = 0; i <= days; i++) {
+                const currentDate = new Date(startDate);
+                currentDate.setDate(startDate.getDate() + i);
+                
+                // To avoid massive arrays for very old repos, sample data points
+                // If days > 365, we take weekly snapshots (every 7 days)
+                // If days > 1095 (3 years), we take monthly snapshots (every 30 days)
+                const shouldRecord = days <= 365 ? true : 
+                                     days <= 1095 ? (i % 7 === 0 || i === days) : 
+                                     (i % 30 === 0 || i === days);
+
+                if (shouldRecord || i === days) {
+                    labels.push(currentDate.toLocaleDateString('en-US', { month: 'short', day: 'numeric', year: '2-digit' }));
+                    
+                    // Organic growth simulation using an ease-out cubic curve
+                    const t = i / days;
+                    const factor = 1 - Math.pow(1 - t, 3);
+                    let estimatedLikes = Math.round(factor * totalLikes);
+                    
+                    // Ensure strictly non-decreasing and lands exactly on totalLikes
+                    estimatedLikes = Math.max(currentLikes, estimatedLikes);
+                    if (i === days) estimatedLikes = totalLikes;
+                    
+                    currentLikes = estimatedLikes;
+                    data.push(currentLikes);
+                }
             }
-
-            dailyData.push(dayLikes);
-            cumulativeData.push(currentLikes);
-
-            const date = new Date(createdDate);
-            date.setDate(date.getDate() + i);
-            labels.push(date.toISOString().slice(0, 10));
-        }
-
-        // Ensure the very last point exactly matches totalLikes
-        if (cumulativeData.length > 0) {
-            cumulativeData[cumulativeData.length - 1] = totalLikes;
+            
+            return { labels, data };
         }
 
-        return { labels, cumulativeData, dailyData, diffDays };
-    }
-
-    function renderGraph(data, type) {
-        const totalLikes = data.likes || 0;
-        const createdDate = new Date(data.createdAt);
-        const lastModified = data.lastModified ? new Date(data.lastModified) : new Date();
-
-        const { labels, cumulativeData, dailyData, diffDays } = generateLikeHistory(data.createdAt, totalLikes, data.lastModified);
-        const avgDaily = (totalLikes / diffDays).toFixed(2);
-
-        // Populate Profile
-        els.itemId.textContent = data.id;
-        els.itemLink.href = `${HF_BASE}/${type}/${data.id}`;
-        els.itemAuthor.textContent = `by ${data.author || data.id.split('/')[0]}`;
-        els.itemMeta.innerHTML = `<span class="social-stat"><i class="far fa-calendar-alt"></i> ${createdDate.toLocaleDateString()}</span>`;
-        
-        // Populate Overview
-        els.totalLikesNum.textContent = formatNum(totalLikes);
-        els.daysActiveNum.textContent = formatNum(diffDays);
-        els.avgDailyNum.textContent = formatNum(avgDaily);
-
-        // Render Chart
-        const ctx = document.getElementById('likeChart').getContext('2d');
-
-        if (likeChart) {
-            likeChart.destroy();
-        }
+        function renderChart(dailyData, repoId) {
+            if (state.chart) {
+                state.chart.destroy();
+            }
 
-        likeChart = new Chart(ctx, {
-            type: 'line',
-            data: {
-                labels: labels,
-                datasets: [
-                    {
+            // Chart.js Global Dark Theme Settings
+            Chart.defaults.color = '#666666';
+            Chart.defaults.borderColor = '#1a1a1a';
+            Chart.defaults.font.family = "'JetBrains Mono', monospace";
+
+            // Create gradient
+            const ctx = els.chartCanvas;
+            const gradient = ctx.createLinearGradient(0, 0, 0, 400);
+            gradient.addColorStop(0, 'rgba(255, 255, 255, 0.2)');
+            gradient.addColorStop(1, 'rgba(255, 255, 255, 0)');
+
+            state.chart = new Chart(ctx, {
+                type: 'line',
+                data: {
+                    labels: dailyData.labels,
+                    datasets: [{
                         label: 'Cumulative Likes',
-                        data: cumulativeData,
+                        data: dailyData.data,
                         borderColor: '#ffffff',
-                        backgroundColor: 'rgba(255, 255, 255, 0.1)',
-                        fill: true,
-                        tension: 0.3,
-                        yAxisID: 'y',
+                        backgroundColor: gradient,
+                        borderWidth: 2,
                         pointRadius: 0,
                         pointHoverRadius: 5,
-                        borderWidth: 2
-                    },
-                    {
-                        label: 'Daily New Likes',
-                        data: dailyData,
-                        borderColor: '#888888',
-                        backgroundColor: 'rgba(136, 136, 136, 0.2)',
-                        fill: false,
-                        tension: 0.3,
-                        yAxisID: 'y1',
-                        pointRadius: 0,
-                        pointHoverRadius: 5,
-                        borderDash: [4, 4],
-                        borderWidth: 1.5
-                    }
-                ]
-            },
-            options: {
-                responsive: true,
-                maintainAspectRatio: false,
-                interaction: {
-                    mode: 'index',
-                    intersect: false,
-                },
-                stacked: false,
-                plugins: {
-                    legend: {
-                        labels: {
-                            color: '#ffffff',
-                            font: { family: "'JetBrains Mono', monospace", size: 12 }
-                        }
-                    },
-                    tooltip: {
-                        backgroundColor: '#111111',
-                        titleColor: '#ffffff',
-                        bodyColor: '#ffffff',
-                        borderColor: '#333333',
-                        borderWidth: 1,
-                        titleFont: { family: "'JetBrains Mono', monospace" },
-                        bodyFont: { family: "'JetBrains Mono', monospace" }
-                    }
+                        pointHoverBackgroundColor: '#ffffff',
+                        pointHoverBorderColor: '#000000',
+                        pointHoverBorderWidth: 2,
+                        fill: true,
+                        tension: 0.3
+                    }]
                 },
-                scales: {
-                    x: {
-                        ticks: {
-                            color: '#666666',
-                            font: { family: "'JetBrains Mono', monospace", size: 10 },
-                            maxRotation: 0,
-                            autoSkip: true,
-                            maxTicksLimit: 12
-                        },
-                        grid: { color: '#1a1a1a' }
+                options: {
+                    responsive: true,
+                    maintainAspectRatio: false,
+                    interaction: {
+                        mode: 'index',
+                        intersect: false,
                     },
-                    y: {
-                        type: 'linear',
-                        display: true,
-                        position: 'left',
-                        title: {
-                            display: true,
-                            text: 'Cumulative Likes',
-                            color: '#888888',
-                            font: { family: "'JetBrains Mono', monospace", size: 12 }
+                    plugins: {
+                        legend: {
+                            display: false
                         },
-                        ticks: { color: '#666666', font: { family: "'JetBrains Mono', monospace" } },
-                        grid: { color: '#1a1a1a' },
-                        beginAtZero: true
+                        tooltip: {
+                            backgroundColor: '#111111',
+                            borderColor: '#333333',
+                            borderWidth: 1,
+                            titleColor: '#ffffff',
+                            bodyColor: '#aaaaaa',
+                            padding: 10,
+                            cornerRadius: 3,
+                            titleFont: { weight: 'bold' },
+                            callbacks: {
+                                title: function(context) {
+                                    return context[0].label;
+                                },
+                                label: function(context) {
+                                    return ` ${context.parsed.y.toLocaleString()} likes`;
+                                }
+                            }
+                        }
                     },
-                    y1: {
-                        type: 'linear',
-                        display: true,
-                        position: 'right',
-                        title: {
-                            display: true,
-                            text: 'Daily New Likes',
-                            color: '#888888',
-                            font: { family: "'JetBrains Mono', monospace", size: 12 }
+                    scales: {
+                        x: {
+                            grid: {
+                                color: '#111111',
+                                drawTicks: false
+                            },
+                            ticks: {
+                                maxRotation: 0,
+                                autoSkip: true,
+                                maxTicksLimit: 8,
+                                color: '#555555'
+                            },
+                            border: {
+                                display: false
+                            }
                         },
-                        ticks: { color: '#666666', font: { family: "'JetBrains Mono', monospace" } },
-                        grid: { drawOnChartArea: false },
-                        beginAtZero: true
+                        y: {
+                            beginAtZero: true,
+                            grid: {
+                                color: '#111111'
+                            },
+                            ticks: {
+                                color: '#555555',
+                                callback: function(value) {
+                                    return formatNum(value);
+                                }
+                            },
+                            border: {
+                                display: false
+                            }
+                        }
                     }
                 }
+            });
+        }
+
+        document.addEventListener('DOMContentLoaded', () => {
+            checkToken();
+
+            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.', 'success');
+                setTimeout(() => showMsg('', ''), 1500);
+            });
+
+            els.clearTokenBtn.addEventListener('click', () => {
+                localStorage.removeItem('hf_token');
+                els.hfToken.value = '';
+                checkToken();
+                showMsg('token cleared.', 'success');
+                setTimeout(() => showMsg('', ''), 1500);
+            });
+
+            els.hfToken.addEventListener('keypress', e => { if (e.key === 'Enter') els.saveTokenBtn.click(); });
+            els.fetchBtn.addEventListener('click', generateGraph);
+            els.repoInput.addEventListener('keypress', e => { if (e.key === 'Enter') generateGraph(); });
+
+            // Parse hash if present
+            const h = window.location.hash;
+            if (h && h.length > 1) {
+                els.repoInput.value = decodeURIComponent(h.substring(1));
+                generateGraph();
             }
         });
-    }
-
-    document.addEventListener('DOMContentLoaded', () => {
-        els.fetchBtn.addEventListener('click', fetchGraphData);
-        els.pathInput.addEventListener('keypress', e => { if (e.key === 'Enter') fetchGraphData(); });
-    });
     </script>
 </body>
 </html>