Spaces:
Build error
Build error
File size: 3,966 Bytes
4bf5c79 |
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 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; |