Hugging Face's logo

Spaces:
CathleenTico
/
hugging-face-3m-models-celebration
Running

App Files Community
CathleenTico commited on
Commit
2a66adb
·
verified ·
1 Parent(s): b82f40a

Deploy from HuggingChat

Browse files
Files changed (2) hide show
  1. README.md +9 -5
  2. index.html +127 -19
README.md CHANGED
@@ -1,10 +1,14 @@
1
  ---
2
- title: Hugging Face 3m Models Celebration
3
- emoji: 💻
4
- colorFrom: pink
5
- colorTo: blue
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: "Hugging Face 3M Models Celebration"
3
+ emoji: 🔮
4
+ colorFrom: blue
5
+ colorTo: indigo
6
  sdk: static
7
  pinned: false
8
+ tags:
9
+ - huggingchat
10
  ---
11
 
12
+ # Hugging Face 3M Models Celebration
13
+
14
+ Built with [HuggingChat](https://huggingface.co/chat).
index.html CHANGED
@@ -1,19 +1,127 @@
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>HF 3 Million Models Celebration!</title>
7
+ <script src="https://cdn.tailwindcss.com"></script>
8
+ <script src="https://cdn.jsdelivr.net/npm/canvas-confetti@1.6.0/dist/confetti.browser.min.js"></script>
9
+ <link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;700;900&display=swap" rel="stylesheet">
10
+ <style>
11
+ body { font-family: 'Inter', sans-serif; }
12
+ .gradient-bg {
13
+ background: linear-gradient(135deg, #ffda79 0%, #ff9a9e 100%);
14
+ }
15
+ @keyframes float {
16
+ 0%, 100% { transform: translateY(0px); }
17
+ 50% { transform: translateY(-20px); }
18
+ }
19
+ .animate-float {
20
+ animation: float 3s ease-in-out infinite;
21
+ }
22
+ </style>
23
+ </head>
24
+ <body class="bg-slate-100 min-h-screen flex items-center justify-center p-4 overflow-hidden">
25
+
26
+ <!-- Celebration Card -->
27
+ <div class="relative bg-white rounded-3xl shadow-2xl p-8 md:p-12 max-w-md w-full text-center transform transition-all hover:scale-105 duration-300 border-4 border-yellow-400">
28
+
29
+ <!-- Emoji Header -->
30
+ <div class="text-6xl mb-6 animate-float">
31
+ 🤗
32
+ </div>
33
+
34
+ <h1 class="text-slate-800 text-2xl md:text-3xl font-bold mb-2">
35
+ A Massive Milestone!
36
+ </h1>
37
+
38
+ <p class="text-slate-500 mb-8">
39
+ The community has grown beyond imagination.
40
+ </p>
41
+
42
+ <!-- Animated Counter Container -->
43
+ <div class="bg-slate-900 text-white rounded-2xl py-6 px-4 mb-8 shadow-inner relative overflow-hidden">
44
+ <div class="relative z-10">
45
+ <span id="counter" class="text-5xl md:text-6xl font-black tracking-tighter">0</span>
46
+ <span class="text-3xl font-bold ml-2 text-yellow-400">+</span>
47
+ <div class="text-sm font-medium uppercase tracking-widest text-slate-400 mt-2">Models on the Hub</div>
48
+ </div>
49
+ <!-- Decorative circle -->
50
+ <div class="absolute -right-4 -bottom-4 w-24 h-24 bg-yellow-500 rounded-full opacity-20 blur-2xl"></div>
51
+ </div>
52
+
53
+ <button id="celebrateBtn" class="bg-yellow-400 hover:bg-yellow-500 text-slate-900 font-bold py-3 px-8 rounded-full transition-colors shadow-lg active:scale-95">
54
+ Celebrate Again! 🎉
55
+ </button>
56
+
57
+ <div class="mt-6 text-xs text-slate-400 font-medium">
58
+ Powered by the Open ML Community
59
+ </div>
60
+ </div>
61
+
62
+ <script>
63
+ const counterElement = document.getElementById('counter');
64
+ const celebrateBtn = document.getElementById('celebrateBtn');
65
+ const targetNumber = 3000000;
66
+ let currentNumber = 0;
67
+ let animationFinished = false;
68
+
69
+ function animateCounter() {
70
+ const duration = 2000; // 2 seconds
71
+ const startTime = performance.now();
72
+
73
+ function update(currentTime) {
74
+ const elapsed = currentTime - startTime;
75
+ const progress = Math.min(elapsed / duration, 1);
76
+
77
+ // Ease out expo function for smooth slowing down
78
+ const easeOutExpo = 1 - Math.pow(2, -10 * progress);
79
+
80
+ currentNumber = Math.floor(easeOutExpo * targetNumber);
81
+
82
+ // Format number with commas
83
+ counterElement.innerText = currentNumber.toLocaleString();
84
+
85
+ if (progress < 1) {
86
+ requestAnimationFrame(update);
87
+ } else {
88
+ animationFinished = true;
89
+ triggerConfetti();
90
+ }
91
+ }
92
+ requestAnimationFrame(update);
93
+ }
94
+
95
+ function triggerConfetti() {
96
+ const scalar = 2;
97
+ const triangle = confetti.shapeFromPath({ path: 'M0 10 L5 0 L10 10z' });
98
+
99
+ confetti({
100
+ particleCount: 150,
101
+ spread: 70,
102
+ origin: { y: 0.6 },
103
+ colors: ['#FFD700', '#FF69B4', '#00BFFF', '#32CD32'],
104
+ shapes: [triangle, 'circle'],
105
+ scalar
106
+ });
107
+ }
108
+
109
+ // Initial start
110
+ window.onload = () => {
111
+ animateCounter();
112
+ };
113
+
114
+ // Button click
115
+ celebrateBtn.onclick = () => {
116
+ if(!animationFinished) return;
117
+ triggerConfetti();
118
+
119
+ // Quick bounce effect on the card
120
+ document.querySelector('.relative.bg-white').classList.add('scale-110');
121
+ setTimeout(() => {
122
+ document.querySelector('.relative.bg-white').classList.remove('scale-110');
123
+ }, 100);
124
+ };
125
+ </script>
126
+ </body>
127
+ </html>