Spaces:

sudzdpn
/

ai-usage-tracker

Running

App Files Files Community

sudzdpn commited on Feb 27

Commit

ac58df0

verified ·

1 Parent(s): 9008ef5

Upload 4 files

Browse files

Files changed (4) hide show

README.md +29 -11
index.html +85 -19
script.js +201 -0
styles.css +249 -0

README.md CHANGED Viewed

@@ -1,11 +1,29 @@
----
-title: Ai Usage Tracker
-emoji: 🚀
-colorFrom: purple
-colorTo: blue
-sdk: static
-pinned: false
-short_description: personal tracker for sudz
----
-Check out the configuration reference at https://huggingface.co/docs/hub/spaces-config-reference

+# AI Usage Tracker
+Modern single-page app to track usage of free-tier AI services (Grok, Claude, Gemini, Perplexity, etc.).
+## Features
+- Daily / Weekly / Monthly reset periods
+- Visual progress bars + doughnut charts
+- Service-specific icons
+- Usage logging with purpose/description
+- Export data as JSON
+- 100% client-side (localStorage)
+## Deployment
+### GitHub Pages
+- Push files to repo
+- Settings → Pages → Source: main branch → root
+→ https://sudz.github.io/ai-usage-tracker/
+### Hugging Face Spaces
+- Create Static Space
+- Upload files or connect GitHub repo
+→ https://huggingface.co/spaces/sudzdpn/ai-usage-tracker
+Enjoy tracking!
+@sudzdpn / @SudzdPN

index.html CHANGED Viewed

@@ -1,19 +1,85 @@
-<!doctype html>
-<html>
-	<head>
-		<meta charset="utf-8" />
-		<meta name="viewport" content="width=device-width" />
-		<title>My static Space</title>
-		<link rel="stylesheet" href="style.css" />
-	</head>
-	<body>
-		<div class="card">
-			<h1>Welcome to your static Space!</h1>
-			<p>You can modify this app directly by editing <i>index.html</i> in the Files and versions tab.</p>
-			<p>
-				Also don't forget to check the
-				<a href="https://huggingface.co/docs/hub/spaces" target="_blank">Spaces documentation</a>.
-			</p>
-		</div>
-	</body>
-</html>

+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>AI Usage Tracker</title>
+    <link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&display=swap" rel="stylesheet">
+    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.1/css/all.min.css" integrity="sha512-DTOQO9RWCH3ppGqcWaEA1BIZOC6xxalwEsw9c2QQeAIftl+Vegovlnee1c9QX4TctnWMn13TZye+giMm8e2LwA==" crossorigin="anonymous" referrerpolicy="no-referrer" />
+    <link rel="stylesheet" href="styles.css">
+    <script src="https://cdn.jsdelivr.net/npm/chart.js@4.4.4/dist/chart.umd.min.js"></script>
+</head>
+<body>
+    <nav class="navbar">
+        <div class="logo">
+            <i class="fas fa-robot"></i> AI Usage Tracker
+        </div>
+        <div class="nav-links">
+            <a href="#dashboard"><i class="fas fa-tachometer-alt"></i> Dashboard</a>
+            <a href="#history"><i class="fas fa-history"></i> History</a>
+            <a href="#add-service"><i class="fas fa-plus"></i> Add Service</a>
+        </div>
+    </nav>
+    <div class="container">
+        <section id="dashboard">
+            <h1 class="section-title">Dashboard</h1>
+            <button class="button secondary" onclick="exportData()" style="margin-bottom: 1.5rem;">
+                <i class="fas fa-download"></i> Export Data (JSON)
+            </button>
+            <div id="services-cards" class="cards"></div>
+        </section>
+        <section id="history" style="display: none;">
+            <h1 class="section-title">Usage History</h1>
+            <ul id="history-list"></ul>
+        </section>
+        <section id="add-service" style="display: none;">
+            <h1 class="section-title">Add New AI Service</h1>
+            <form id="add-service-form">
+                <div class="form-group">
+                    <label for="service-name">Service Name</label>
+                    <input type="text" id="service-name" required placeholder="e.g. Grok, Claude, Gemini, Perplexity">
+                </div>
+                <div class="form-group">
+                    <label for="limit">Free Tier Limit</label>
+                    <input type="number" id="limit" required min="1" placeholder="e.g. 50">
+                </div>
+                <div class="form-group">
+                    <label for="refresh-period">Reset / Refresh Period</label>
+                    <select id="refresh-period" required>
+                        <option value="daily">Daily</option>
+                        <option value="weekly">Weekly</option>
+                        <option value="monthly">Monthly</option>
+                    </select>
+                </div>
+                <button type="submit" class="button primary">
+                    <i class="fas fa-plus"></i> Add Service
+                </button>
+            </form>
+        </section>
+    </div>
+    <!-- Log Usage Modal -->
+    <div id="log-modal" class="modal">
+        <div class="modal-content">
+            <span class="close" onclick="closeModal()">&times;</span>
+            <h2>Log Usage</h2>
+            <form id="log-form">
+                <div class="form-group">
+                    <label for="usage-amount">Amount Used</label>
+                    <input type="number" id="usage-amount" value="1" min="1" required>
+                </div>
+                <div class="form-group">
+                    <label for="usage-description">What did you use it for?</label>
+                    <input type="text" id="usage-description" required placeholder="e.g. Code generation, research question, image generation">
+                </div>
+                <button type="submit" class="button primary">Log</button>
+            </form>
+        </div>
+    </div>
+    <script src="script.js"></script>
+</body>
+</html>

script.js ADDED Viewed

	@@ -0,0 +1,201 @@

+let services = JSON.parse(localStorage.getItem('services')) || [];
+let history  = JSON.parse(localStorage.getItem('history'))  || [];
+function saveData() {
+    localStorage.setItem('services', JSON.stringify(services));
+    localStorage.setItem('history', JSON.stringify(history));
+}
+function calculateRefreshTime(period) {
+    const now = new Date();
+    let refreshDate = new Date(now);
+    refreshDate.setHours(0, 0, 0, 0);
+    if (period === 'daily') {
+        refreshDate.setDate(now.getDate() + 1);
+    } else if (period === 'weekly') {
+        refreshDate.setDate(now.getDate() + 7);
+    } else if (period === 'monthly') {
+        refreshDate.setMonth(now.getMonth() + 1);
+        refreshDate.setDate(1);
+    }
+    return refreshDate;
+}
+function getCurrentUsage(service) {
+    const now = new Date();
+    const refreshTime = new Date(service.refreshTime);
+    if (now >= refreshTime) {
+        service.currentUsage = 0;
+        service.refreshTime = calculateRefreshTime(service.refreshPeriod).toISOString();
+        saveData();
+    }
+    return service.currentUsage || 0;
+}
+function getServiceIcon(name) {
+    const n = name.toLowerCase();
+    if (n.includes('grok') || n.includes('xai'))     return 'fa-robot';
+    if (n.includes('claude') || n.includes('anthropic')) return 'fa-comment-dots';
+    if (n.includes('gemini') || n.includes('google'))   return 'fa-google';
+    if (n.includes('chatgpt') || n.includes('openai'))  return 'fa-comment-medical';
+    if (n.includes('perplexity'))                       return 'fa-search';
+    if (n.includes('copilot') || n.includes('github'))  return 'fa-github';
+    if (n.includes('llama') || n.includes('meta'))      return 'fa-meta';
+    return 'fa-brain';
+}
+function renderServices() {
+    const container = document.getElementById('services-cards');
+    container.innerHTML = '';
+    services.forEach((service, index) => {
+        const used = getCurrentUsage(service);
+        const remaining = service.limit - used;
+        const pct = service.limit > 0 ? (used / service.limit) * 100 : 0;
+        const refreshDate = new Date(service.refreshTime);
+        const icon = getServiceIcon(service.name);
+        const card = document.createElement('div');
+        card.className = 'card';
+        card.innerHTML = `
+            <h2 class="card-title"><i class="fas ${icon}"></i> ${service.name}</h2>
+            <div class="progress-container">
+                <div class="progress-bar">
+                    <div class="progress-fill" style="width: ${pct}%; background: ${pct < 50 ? '#22c55e' : pct < 80 ? '#eab308' : '#ef4444'}"></div>
+                </div>
+                <p class="progress-text">${used} / ${service.limit} (${remaining} remaining)</p>
+            </div>
+            <div class="chart-container">
+                <canvas id="chart-${index}"></canvas>
+            </div>
+            <p class="card-info"><i class="fas fa-sync-alt"></i> Refreshes: ${refreshDate.toLocaleString()}</p>
+            <button class="button primary" onclick="openLogModal(${index})">
+                <i class="fas fa-plus-circle"></i> Log Usage
+            </button>
+        `;
+        container.appendChild(card);
+        new Chart(document.getElementById(`chart-${index}`), {
+            type: 'doughnut',
+            data: {
+                labels: ['Used', 'Remaining'],
+                datasets: [{
+                    data: [used, remaining],
+                    backgroundColor: ['#f97316', '#e2e8f0'],
+                    borderWidth: 0
+                }]
+            },
+            options: {
+                responsive: true,
+                maintainAspectRatio: false,
+                cutout: '70%',
+                plugins: { legend: { display: false } }
+            }
+        });
+    });
+}
+function exportData() {
+    const data = {
+        services,
+        history,
+        exportedAt: new Date().toISOString(),
+        note: "AI Usage Tracker export – import not yet implemented"
+    };
+    const blob = new Blob([JSON.stringify(data, null, 2)], { type: 'application/json' });
+    const url = URL.createObjectURL(blob);
+    const a = document.createElement('a');
+    a.href = url;
+    a.download = `ai-usage-tracker-${new Date().toISOString().slice(0,10)}.json`;
+    a.click();
+    URL.revokeObjectURL(url);
+}
+function renderHistory() {
+    const list = document.getElementById('history-list');
+    list.innerHTML = '';
+    history.forEach(entry => {
+        const li = document.createElement('li');
+        li.innerHTML = `
+            <strong>${entry.service}</strong> — ${entry.amount} used
+            <br><small>${new Date(entry.timestamp).toLocaleString()}</small>
+            <p>"${entry.description}"</p>
+        `;
+        list.appendChild(li);
+    });
+}
+function openLogModal(index) {
+    const modal = document.getElementById('log-modal');
+    modal.style.display = 'flex';
+    const form = document.getElementById('log-form');
+    form.onsubmit = e => {
+        e.preventDefault();
+        const amount = parseInt(document.getElementById('usage-amount').value);
+        const desc   = document.getElementById('usage-description').value.trim();
+        if (amount < 1 || !desc) return alert('Please fill all fields correctly.');
+        services[index].currentUsage = (services[index].currentUsage || 0) + amount;
+        history.push({
+            service: services[index].name,
+            amount,
+            description: desc,
+            timestamp: new Date().toISOString()
+        });
+        saveData();
+        renderServices();
+        renderHistory();
+        closeModal();
+    };
+}
+function closeModal() {
+    document.getElementById('log-modal').style.display = 'none';
+    document.getElementById('log-form').reset();
+}
+document.getElementById('add-service-form').addEventListener('submit', e => {
+    e.preventDefault();
+    const name   = document.getElementById('service-name').value.trim();
+    const limit  = parseInt(document.getElementById('limit').value);
+    const period = document.getElementById('refresh-period').value;
+    if (!name || limit < 1) return alert('Please enter valid name and limit.');
+    services.push({
+        name,
+        limit,
+        refreshPeriod: period,
+        refreshTime: calculateRefreshTime(period).toISOString(),
+        currentUsage: 0
+    });
+    saveData();
+    renderServices();
+    e.target.reset();
+});
+// Routing
+function handleRoute() {
+    const hash = location.hash.slice(1) || 'dashboard';
+    document.querySelectorAll('.container > section').forEach(sec => {
+        sec.style.display = sec.id === hash ? 'block' : 'none';
+    });
+    if (hash === 'history') renderHistory();
+}
+window.addEventListener('hashchange', handleRoute);
+window.addEventListener('load', () => {
+    renderServices();
+    handleRoute();
+});

styles.css ADDED Viewed

	@@ -0,0 +1,249 @@

+:root {
+    --hf-orange: #f97316;
+    --hf-yellow: #fbbf24;
+    --text-dark: #0f172a;
+    --text-muted: #475569;
+    --bg-light: #f8f9fa;
+    --card-bg: #ffffff;
+    --border: #e2e8f0;
+}
+* {
+    box-sizing: border-box;
+}
+body {
+    font-family: 'Inter', system-ui, sans-serif;
+    margin: 0;
+    padding: 0;
+    background-color: var(--bg-light);
+    color: var(--text-dark);
+    line-height: 1.6;
+}
+.navbar {
+    background: white;
+    border-bottom: 1px solid var(--border);
+    padding: 1rem 2rem;
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    box-shadow: 0 1px 3px rgba(0,0,0,0.05);
+}
+.logo {
+    font-size: 1.6rem;
+    font-weight: 700;
+    color: var(--hf-orange);
+}
+.logo i {
+    margin-right: 0.5rem;
+}
+.nav-links {
+    display: flex;
+    gap: 2rem;
+}
+.nav-links a {
+    color: var(--text-muted);
+    text-decoration: none;
+    font-weight: 500;
+    display: flex;
+    align-items: center;
+    gap: 0.5rem;
+    transition: color 0.2s;
+}
+.nav-links a:hover {
+    color: var(--hf-orange);
+}
+.container {
+    max-width: 1280px;
+    margin: 0 auto;
+    padding: 2rem 1rem;
+}
+.section-title {
+    font-size: 2.25rem;
+    font-weight: 800;
+    margin-bottom: 1.5rem;
+    color: var(--text-dark);
+}
+.cards {
+    display: grid;
+    grid-template-columns: repeat(auto-fill, minmax(340px, 1fr));
+    gap: 1.75rem;
+}
+.card {
+    background: var(--card-bg);
+    border: 1px solid var(--border);
+    border-radius: 0.75rem;
+    padding: 1.5rem;
+    box-shadow: 0 4px 6px -1px rgba(0,0,0,0.1), 0 2px 4px -1px rgba(0,0,0,0.06);
+    transition: transform 0.2s, box-shadow 0.2s;
+}
+.card:hover {
+    transform: translateY(-4px);
+    box-shadow: 0 10px 15px -3px rgba(0,0,0,0.1), 0 4px 6px -2px rgba(0,0,0,0.05);
+}
+.card-title {
+    font-size: 1.35rem;
+    font-weight: 700;
+    margin-bottom: 1rem;
+    display: flex;
+    align-items: center;
+    gap: 0.75rem;
+    color: var(--text-dark);
+}
+.card-title i {
+    color: var(--hf-orange);
+    font-size: 1.4rem;
+}
+.progress-container {
+    margin: 1.25rem 0;
+}
+.progress-bar {
+    background: #e2e8f0;
+    border-radius: 9999px;
+    height: 0.75rem;
+    overflow: hidden;
+}
+.progress-fill {
+    height: 100%;
+    transition: width 0.4s ease;
+}
+.progress-text {
+    font-size: 0.95rem;
+    color: var(--text-muted);
+    margin-top: 0.5rem;
+    text-align: center;
+    font-weight: 500;
+}
+.chart-container {
+    height: 160px;
+    margin: 1rem 0;
+}
+.button {
+    padding: 0.65rem 1.25rem;
+    border: none;
+    border-radius: 0.5rem;
+    font-weight: 600;
+    cursor: pointer;
+    display: inline-flex;
+    align-items: center;
+    gap: 0.5rem;
+    transition: all 0.2s;
+}
+.button.primary {
+    background: var(--hf-yellow);
+    color: var(--text-dark);
+}
+.button.primary:hover {
+    background: var(--hf-orange);
+    color: white;
+}
+.button.secondary {
+    background: var(--text-muted);
+    color: white;
+}
+.button.secondary:hover {
+    background: #334155;
+}
+.form-group {
+    margin-bottom: 1.25rem;
+}
+.form-group label {
+    display: block;
+    margin-bottom: 0.5rem;
+    font-weight: 500;
+    color: var(--text-dark);
+}
+.form-group input,
+.form-group select {
+    width: 100%;
+    padding: 0.75rem 1rem;
+    border: 1px solid #cbd5e1;
+    border-radius: 0.5rem;
+    font-size: 1rem;
+    background: #f8fafc;
+}
+#history-list {
+    list-style: none;
+    padding: 0;
+}
+#history-list li {
+    background: white;
+    border: 1px solid var(--border);
+    border-radius: 0.5rem;
+    padding: 1.25rem;
+    margin-bottom: 1rem;
+    box-shadow: 0 1px 3px rgba(0,0,0,0.1);
+}
+.modal {
+    display: none;
+    position: fixed;
+    inset: 0;
+    background: rgba(0,0,0,0.5);
+    z-index: 1000;
+    align-items: center;
+    justify-content: center;
+}
+.modal-content {
+    background: white;
+    width: 90%;
+    max-width: 480px;
+    border-radius: 0.75rem;
+    padding: 1.75rem;
+    box-shadow: 0 20px 25px -5px rgba(0,0,0,0.1);
+    position: relative;
+}
+.close {
+    position: absolute;
+    right: 1.25rem;
+    top: 1rem;
+    font-size: 2rem;
+    color: #94a3b8;
+    cursor: pointer;
+}
+.close:hover {
+    color: #1e293b;
+}
+@media (max-width: 640px) {
+    .navbar {
+        flex-direction: column;
+        gap: 1rem;
+        padding: 1.25rem;
+    }
+    .nav-links {
+        flex-wrap: wrap;
+        justify-content: center;
+    }
+}