Hugging Face's logo

Spaces:
FourLabs-UN2
/
token-abstinence-tracker
Running

App Files Community
FourLabs-UN2 commited on
Commit
593b435
·
verified ·
1 Parent(s): 24295ad

Usei tokens até o dia 10, após isso não usei mais

Browse files
Files changed (5) hide show
  1. README.md +8 -5
  2. components/navbar.js +65 -0
  3. index.html +66 -19
  4. script.js +69 -0
  5. style.css +7 -25
README.md CHANGED
@@ -1,10 +1,13 @@
1
  ---
2
- title: Token Abstinence Tracker
3
- emoji: 😻
4
- colorFrom: indigo
5
- colorTo: purple
6
  sdk: static
7
  pinned: false
 
 
8
  ---
9
 
10
- Check out the configuration reference at https://huggingface.co/docs/hub/spaces-config-reference
 
 
1
  ---
2
+ title: Token Abstinence Tracker 🚫📈
3
+ colorFrom: pink
4
+ colorTo: pink
5
+ emoji: 🐳
6
  sdk: static
7
  pinned: false
8
+ tags:
9
+ - deepsite-v3
10
  ---
11
 
12
+ # Welcome to your new DeepSite project!
13
+ This project was created with [DeepSite](https://huggingface.co/deepsite).
components/navbar.js ADDED
@@ -0,0 +1,65 @@
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
1
+ <!DOCTYPE html>
2
+ <html lang="en">
3
+ <head>
4
+ <meta charset="UTF-8">
5
+ <meta name="viewport" content="width=device-width, initial-scale=1.0">
6
+ <title>Token Tracker: The Climber 📈</title>
7
+ <link rel="stylesheet" href="style.css">
8
+ <script src="https://cdn.tailwindcss.com"></script>
9
+ <script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
10
+ <script src="https://cdn.jsdelivr.net/npm/feather-icons/dist/feather.min.js"></script>
11
+ <script src="https://unpkg.com/feather-icons"></script>
12
+ <script src="components/navbar.js"></script>
13
+ </head>
14
+ <body class="bg-gray-50">
15
+ <custom-navbar></custom-navbar>
16
+
17
+ <main class="container mx-auto px-4 py-8">
18
+ <div class="bg-white rounded-xl shadow-lg p-6">
19
+ <div class="flex justify-between items-center mb-6">
20
+ <h1 class="text-2xl font-bold text-gray-800">Token Usage Dashboard</h1>
21
+ <div class="flex space-x-2">
22
+ <div class="px-3 py-1 bg-indigo-100 text-indigo-800 rounded-full text-sm font-medium">
23
+ Current Month
24
+ </div>
25
+ <button class="p-2 rounded-full hover:bg-gray-100">
26
+ <i data-feather="calendar"></i>
27
+ </button>
28
+ </div>
29
+ </div>
30
+
31
+ <div class="mb-4">
32
+ <div class="flex items-center space-x-4">
33
+ <div class="h-3 w-3 rounded-full bg-indigo-500"></div>
34
+ <span class="text-gray-600">Token Consumption</span>
35
+ <span class="text-gray-400 text-sm">(Cumulative)</span>
36
+ </div>
37
+ </div>
38
+
39
+ <div class="relative h-80">
40
+ <canvas id="tokenChart"></canvas>
41
+ </div>
42
+
43
+ <div class="mt-6 grid grid-cols-1 md:grid-cols-3 gap-4">
44
+ <div class="bg-gray-50 p-4 rounded-lg">
45
+ <div class="text-gray-500 text-sm">Total Tokens</div>
46
+ <div class="text-2xl font-bold text-gray-800">12,458</div>
47
+ </div>
48
+ <div class="bg-gray-50 p-4 rounded-lg">
49
+ <div class="text-gray-500 text-sm">Avg/Day</div>
50
+ <div class="text-2xl font-bold text-gray-800">415</div>
51
+ </div>
52
+ <div class="bg-gray-50 p-4 rounded-lg">
53
+ <div class="text-gray-500 text-sm">Projected EOM</div>
54
+ <div class="text-2xl font-bold text-gray-800">15,745</div>
55
+ </div>
56
+ </div>
57
+ </div>
58
+ </main>
59
+
60
+ <script src="script.js"></script>
61
+ <script>
62
+ feather.replace();
63
+ </script>
64
+ </body>
65
+ </html>
index.html CHANGED
@@ -1,19 +1,66 @@
1
- <!doctype html>
2
- <html>
3
- <head>
4
- <meta charset="utf-8" />
5
- <meta name="viewport" content="width=device-width" />
6
- <title>My static Space</title>
7
- <link rel="stylesheet" href="style.css" />
8
- </head>
9
- <body>
10
- <div class="card">
11
- <h1>Welcome to your static Space!</h1>
12
- <p>You can modify this app directly by editing <i>index.html</i> in the Files and versions tab.</p>
13
- <p>
14
- Also don't forget to check the
15
- <a href="https://huggingface.co/docs/hub/spaces" target="_blank">Spaces documentation</a>.
16
- </p>
17
- </div>
18
- </body>
19
- </html>
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
1
+ <!DOCTYPE html>
2
+ <html lang="en">
3
+ <head>
4
+ <meta charset="UTF-8">
5
+ <meta name="viewport" content="width=device-width, initial-scale=1.0">
6
+ <title>Token Tracker: The Climber 📈</title>
7
+ <link rel="stylesheet" href="style.css">
8
+ <script src="https://cdn.tailwindcss.com"></script>
9
+ <script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
10
+ <script src="https://cdn.jsdelivr.net/npm/feather-icons/dist/feather.min.js"></script>
11
+ <script src="https://unpkg.com/feather-icons"></script>
12
+ <script src="components/navbar.js"></script>
13
+ </head>
14
+ <body class="bg-gray-50">
15
+ <custom-navbar></custom-navbar>
16
+
17
+ <main class="container mx-auto px-4 py-8">
18
+ <div class="bg-white rounded-xl shadow-lg p-6">
19
+ <div class="flex justify-between items-center mb-6">
20
+ <h1 class="text-2xl font-bold text-gray-800">Token Abstinence Dashboard</h1>
21
+ <div class="flex space-x-2">
22
+ <div class="px-3 py-1 bg-indigo-100 text-indigo-800 rounded-full text-sm font-medium">
23
+ Current Month
24
+ </div>
25
+ <button class="p-2 rounded-full hover:bg-gray-100">
26
+ <i data-feather="calendar"></i>
27
+ </button>
28
+ </div>
29
+ </div>
30
+
31
+ <div class="mb-4">
32
+ <div class="flex items-center space-x-4">
33
+ <div class="h-3 w-3 rounded-full bg-indigo-500"></div>
34
+ <span class="text-gray-600">Token Consumption</span>
35
+ <span class="text-gray-400 text-sm">(Abstinence since day 10)</span>
36
+ </div>
37
+ </div>
38
+
39
+ <div class="relative h-80">
40
+ <canvas id="tokenChart"></canvas>
41
+ </div>
42
+
43
+ <div class="mt-6 grid grid-cols-1 md:grid-cols-3 gap-4">
44
+ <div class="bg-gray-50 p-4 rounded-lg">
45
+ <div class="text-gray-500 text-sm">Total Tokens</div>
46
+ <div class="text-2xl font-bold text-gray-800">12,458</div>
47
+ </div>
48
+ <div class="bg-gray-50 p-4 rounded-lg">
49
+ <div class="text-gray-500 text-sm">Avg/Day</div>
50
+ <div class="text-2xl font-bold text-gray-800">415</div>
51
+ </div>
52
+ <div class="bg-gray-50 p-4 rounded-lg">
53
+ <div class="text-gray-500 text-sm">Projected EOM</div>
54
+ <div class="text-2xl font-bold text-gray-800">15,745</div>
55
+ </div>
56
+ </div>
57
+ </div>
58
+ </main>
59
+
60
+ <script src="script.js"></script>
61
+ <script>
62
+ feather.replace();
63
+ </script>
64
+ <script src="https://huggingface.co/deepsite/deepsite-badge.js"></script>
65
+ </body>
66
+ </html>
script.js ADDED
@@ -0,0 +1,69 @@
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
1
+ document.addEventListener('DOMContentLoaded', function() {
2
+ // Sample data - in a real app you would fetch this from an API
3
+ const currentDate = new Date();
4
+ const daysInMonth = new Date(currentDate.getFullYear(), currentDate.getMonth() + 1, 0).getDate();
5
+ const daysArray = Array.from({length: daysInMonth}, (_, i) => i + 1);
6
+ // Generate data with usage until day 10 then flat
7
+ let tokenData = [];
8
+ let lastValue = 0;
9
+ for (let i = 0; i < daysInMonth; i++) {
10
+ if (i < 10) {
11
+ lastValue += Math.floor(Math.random() * 600) + 100; // Random increment 100-700
12
+ }
13
+ tokenData.push(lastValue);
14
+ }
15
+ // Chart setup
16
+ const ctx = document.getElementById('tokenChart').getContext('2d');
17
+ const chart = new Chart(ctx, {
18
+ type: 'line',
19
+ data: {
20
+ labels: daysArray.map(day => `${day}`),
21
+ datasets: [{
22
+ label: 'Tokens Used',
23
+ data: tokenData,
24
+ borderColor: '#6366F1',
25
+ backgroundColor: 'rgba(99, 102, 241, 0.1)',
26
+ borderWidth: 3,
27
+ tension: 0.1,
28
+ fill: true,
29
+ pointBackgroundColor: '#6366F1',
30
+ pointRadius: 4,
31
+ pointHoverRadius: 6
32
+ }]
33
+ },
34
+ options: {
35
+ responsive: true,
36
+ maintainAspectRatio: false,
37
+ plugins: {
38
+ legend: {
39
+ display: false
40
+ },
41
+ tooltip: {
42
+ callbacks: {
43
+ label: function(context) {
44
+ return `Tokens: ${context.raw.toLocaleString()}`;
45
+ }
46
+ }
47
+ }
48
+ },
49
+ scales: {
50
+ y: {
51
+ beginAtZero: true,
52
+ grid: {
53
+ color: 'rgba(0, 0, 0, 0.05)'
54
+ },
55
+ ticks: {
56
+ callback: function(value) {
57
+ return value.toLocaleString();
58
+ }
59
+ }
60
+ },
61
+ x: {
62
+ grid: {
63
+ display: false
64
+ }
65
+ }
66
+ }
67
+ }
68
+ });
69
+ });
style.css CHANGED
@@ -1,28 +1,10 @@
1
- body {
2
- padding: 2rem;
3
- font-family: -apple-system, BlinkMacSystemFont, "Arial", sans-serif;
4
- }
5
-
6
- h1 {
7
- font-size: 16px;
8
- margin-top: 0;
9
- }
10
 
11
- p {
12
- color: rgb(107, 114, 128);
13
- font-size: 15px;
14
- margin-bottom: 10px;
15
- margin-top: 5px;
16
- }
17
-
18
- .card {
19
- max-width: 620px;
20
- margin: 0 auto;
21
- padding: 16px;
22
- border: 1px solid lightgray;
23
- border-radius: 16px;
24
  }
25
 
26
- .card p:last-child {
27
- margin-bottom: 0;
28
- }
 
 
1
+ @import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&display=swap');
 
 
 
 
 
 
 
 
2
 
3
+ body {
4
+ font-family: 'Inter', sans-serif;
 
 
 
 
 
 
 
 
 
 
 
5
  }
6
 
7
+ canvas {
8
+ width: 100% !important;
9
+ height: 100% !important;
10
+ }