Upload app.py with huggingface_hub

app.py

@@ -0,0 +1,102 @@
+// Built with anycoder
+// https://huggingface.co/spaces/akhaliq/anycoder
+
+import { useState, useEffect } from 'react';
+import { Play, Pause, RotateCcw } from 'lucide-react';
+
+const BeatBotGPT5 = () => {
+  const [isPlaying, setIsPlaying] = useState(false);
+  const [currentStep, setCurrentStep] = useState(0);
+  const [bpm] = useState(128);
+
+  // GPT-5 celebration beat pattern
+  const pattern = {
+    kick:  [1, 0, 0, 0, 1, 0, 0, 1, 1, 0, 0, 0, 1, 0, 0, 0],
+    snare: [0, 0, 0, 0, 1, 0, 0, 0, 0, 0, 0, 0, 1, 0, 0, 0],
+    hihat: [0, 1, 0, 1, 0, 1, 0, 1, 0, 1, 0, 1, 0, 1, 0, 1],
+    clap:  [0, 0, 0, 0, 0, 0, 0, 1, 0, 0, 0, 0, 0, 0, 0, 1],
+  };
+
+  const tracks = [
+    { name: 'Kick', pattern: pattern.kick, color: 'bg-red-500' },
+    { name: 'Snare', pattern: pattern.snare, color: 'bg-blue-500' },
+    { name: 'Hi-Hat', pattern: pattern.hihat, color: 'bg-green-500' },
+    { name: 'Clap', pattern: pattern.clap, color: 'bg-yellow-500' },
+  ];
+
+  useEffect(() => {
+    if (!isPlaying) return;
+
+    const interval = setInterval(() => {
+      setCurrentStep((prev) => (prev + 1) % 16);
+    }, (60 / bpm / 4) * 1000);
+
+    return () => clearInterval(interval);
+  }, [isPlaying, bpm]);
+
+  const togglePlayback = () => setIsPlaying(!isPlaying);
+  const resetBeat = () => {
+    setIsPlaying(false);
+    setCurrentStep(0);
+  };
+
+  return (
+    <div className="min-h-screen bg-gradient-to-br from-purple-900 via-blue-900 to-indigo-900 text-white p-8">
+      <div className="max-w-6xl mx-auto">
+        <header className="text-center mb-12">
+          <h1 className="text-5xl font-bold mb-2 bg-gradient-to-r from-cyan-400 to-purple-400 bg-clip-text text-transparent">
+            Built with anycoder
+          </h1>
+          <h2 className="text-3xl font-semibold mb-4">🎉 GPT-5 Celebration Beat 🎉</h2>
+          <p className="text-xl text-gray-300">The future of AI never sounded so good</p>
+        </header>
+
+        <div className="bg-black bg-opacity-50 rounded-2xl p-8 backdrop-blur-lg">
+          <div className="flex justify-center gap-4 mb-8">
+            <button
+              onClick={togglePlayback}
+              className="flex items-center gap-2 px-6 py-3 bg-gradient-to-r from-purple-600 to-pink-600 rounded-full hover:from-purple-700 hover:to-pink-700 transition-all transform hover:scale-105"
+            >
+              {isPlaying ? <Pause size={24} /> : <Play size={24} />}
+              {isPlaying ? 'Pause' : 'Play'}
+            </button>
+            <button
+              onClick={resetBeat}
+              className="flex items-center gap-2 px-6 py-3 bg-gradient-to-r from-gray-600 to-gray-700 rounded-full hover:from-gray-700 hover:to-gray-800 transition-all transform hover:scale-105"
+            >
+              <RotateCcw size={24} />
+              Reset
+            </button>
+          </div>
+
+          <div className="space-y-4">
+            {tracks.map((track) => (
+              <div key={track.name} className="flex items-center gap-4">
+                <div className="w-20 text-right font-semibold">{track.name}</div>
+                <div className="flex gap-2">
+                  {track.pattern.map((step, index) => (
+                    <div
+                      key={index}
+                      className={`w-12 h-12 rounded-lg border-2 transition-all ${step ? track.color : 'bg-gray-800 border-gray-600'} ${currentStep === index && isPlaying ? 'ring-4 ring-white ring-opacity-50' : ''}`}
+                    />
+                  ))}
+                </div>
+              </div>
+            ))}
+          </div>
+
+          <div className="mt-8 text-center">
+            <div className="text-2xl font-bold mb-2">{bpm} BPM</div>
+            <div className="text-lg text-gray-400">Step: {currentStep + 1} / 16</div>
+          </div>
+        </div>
+
+        <div className="mt-8 text-center text-gray-400">
+          <p>🔥 Drop the beat for GPT-5! 🔥</p>
+        </div>
+      </div>
+    </div>
+  );
+};
+
+export default BeatBotGPT5;