frontend mvp
This commit is contained in:
YannAhlgrim
+28
-52
@@ -41,16 +41,16 @@ export default function Home() {
|
||||
|
||||
return (
|
||||
<div className="min-h-screen bg-gradient-to-br from-slate-900 via-purple-900 to-slate-900 text-white">
|
||||
{/* Header */}
|
||||
<div className="container mx-auto px-6 py-8">
|
||||
<div className="flex flex-col mx-auto min-h-[30vh] items-center justify-center">
|
||||
<div className="text-center mb-12">
|
||||
<h1 className="text-5xl font-bold bg-gradient-to-r from-blue-400 via-purple-400 to-pink-400 bg-clip-text text-transparent mb-4">
|
||||
<h1 className="text-7xl font-bold gradient-text mb-4">
|
||||
🎤 Voice Assistant
|
||||
</h1>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Main Interface */}
|
||||
<div className="flex flex-col lg:flex-row items-center justify-center gap-12 max-w-6xl mx-auto">
|
||||
<div className="flex flex-col lg:flex-row items-center justify-center min-h-[50vh] gap-12 max-w-6xl mx-auto my-auto">
|
||||
|
||||
{/* Recording Section */}
|
||||
<div className="flex flex-col items-center space-y-6">
|
||||
@@ -70,23 +70,21 @@ export default function Home() {
|
||||
onTouchStart={handleStartRecording}
|
||||
onTouchEnd={handleStopRecording}
|
||||
disabled={isProcessing}
|
||||
className={`record-button w-40 h-40 rounded-full border-none text-white text-lg font-semibold
|
||||
className={`record-button w-60 h-60 rounded-full border-none text-white text-lg font-semibold cursor-pointer
|
||||
${recording
|
||||
? 'bg-gradient-to-r from-red-500 to-red-600 recording-pulse shadow-red-500/50'
|
||||
? 'record-button--recording'
|
||||
: isProcessing
|
||||
? 'bg-gradient-to-r from-yellow-500 to-orange-500 shadow-yellow-500/50'
|
||||
: 'bg-gradient-to-r from-blue-500 to-purple-600 shadow-blue-500/50'
|
||||
? 'record-button--processing'
|
||||
: 'record-button--idle'
|
||||
}
|
||||
${isProcessing ? 'cursor-not-allowed opacity-75' : 'cursor-pointer hover:shadow-xl'}
|
||||
disabled:cursor-not-allowed disabled:opacity-75
|
||||
`}
|
||||
>
|
||||
<div className="flex flex-col items-center">
|
||||
<div className="text-3xl mb-2">
|
||||
<div className="text-4xl mb-2">
|
||||
{recording ? '🎙️' : isProcessing ? '⏳' : '🎤'}
|
||||
</div>
|
||||
<div className="text-sm">
|
||||
{recording ? 'Recording...' : isProcessing ? 'Processing...' : 'Hold / Click'}
|
||||
<div className="text-2xl">
|
||||
{recording ? 'Recording...' : isProcessing ? 'Processing...' : 'Hold to Record'}
|
||||
</div>
|
||||
</div>
|
||||
</button>
|
||||
@@ -94,30 +92,30 @@ export default function Home() {
|
||||
|
||||
{/* Status indicators */}
|
||||
<div className="flex space-x-4">
|
||||
<div className={`flex items-center space-x-2 px-4 py-2 rounded-full transition-all duration-300 ${
|
||||
recording ? 'bg-red-500/20 text-red-300' : 'bg-gray-700/50 text-gray-400'
|
||||
<div className={`status-indicator ${
|
||||
recording ? 'status-indicator--recording' : ''
|
||||
}`}>
|
||||
<div className={`w-2 h-2 rounded-full ${recording ? 'bg-red-400 animate-pulse' : 'bg-gray-500'}`}></div>
|
||||
<span className="text-sm font-medium">Recording</span>
|
||||
<div className={`pulse-dot ${recording ? 'pulse-dot--error' : 'pulse-dot--inactive'}`}></div>
|
||||
<span className="text-xl font-medium">Recording</span>
|
||||
</div>
|
||||
|
||||
<div className={`flex items-center space-x-2 px-4 py-2 rounded-full transition-all duration-300 ${
|
||||
isProcessing ? 'bg-yellow-500/20 text-yellow-300' : 'bg-gray-700/50 text-gray-400'
|
||||
<div className={`status-indicator ${
|
||||
isProcessing ? 'status-indicator--processing' : ''
|
||||
}`}>
|
||||
<div className={`w-2 h-2 rounded-full ${isProcessing ? 'bg-yellow-400 animate-pulse' : 'bg-gray-500'}`}></div>
|
||||
<span className="text-sm font-medium">Processing</span>
|
||||
<div className={`pulse-dot ${isProcessing ? 'pulse-dot--warning' : 'pulse-dot--inactive'}`}></div>
|
||||
<span className="text-xl font-medium">Processing</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Audio Playback Section */}
|
||||
<div className="bg-white/10 backdrop-blur-lg rounded-2xl p-8 shadow-2xl border border-white/20 min-w-[400px]">
|
||||
<div className="glass-panel p-8 min-w-2/3">
|
||||
<div className="text-center mb-6">
|
||||
<h3 className="text-2xl font-semibold text-white mb-2">🔊 Audio Response</h3>
|
||||
<p className="text-gray-300">Your AI assistant's response will play here</p>
|
||||
<p className="text-theme-muted">Your AI assistant's response will play here</p>
|
||||
</div>
|
||||
|
||||
<div className="audio-visualizer bg-gradient-to-r from-blue-500/10 to-purple-500/10 rounded-xl p-6">
|
||||
<div className="audio-visualizer p-6">
|
||||
<audio
|
||||
ref={audioRef}
|
||||
controls
|
||||
@@ -128,13 +126,13 @@ export default function Home() {
|
||||
/>
|
||||
|
||||
{playing && (
|
||||
<div className="flex items-center justify-center space-x-3 text-green-400">
|
||||
<div className="flex items-center justify-center space-x-3 text-theme-success">
|
||||
<div className="flex space-x-1">
|
||||
<div className="w-1 h-6 bg-green-400 rounded animate-bounce"></div>
|
||||
<div className="w-1 h-8 bg-green-400 rounded animate-bounce" style={{animationDelay: '0.1s'}}></div>
|
||||
<div className="w-1 h-6 bg-green-400 rounded animate-bounce" style={{animationDelay: '0.2s'}}></div>
|
||||
<div className="w-1 h-10 bg-green-400 rounded animate-bounce" style={{animationDelay: '0.3s'}}></div>
|
||||
<div className="w-1 h-6 bg-green-400 rounded animate-bounce" style={{animationDelay: '0.4s'}}></div>
|
||||
<div className="w-1 h-6 bg-theme-success rounded animate-bounce"></div>
|
||||
<div className="w-1 h-8 bg-theme-success rounded animate-bounce" style={{animationDelay: '0.1s'}}></div>
|
||||
<div className="w-1 h-6 bg-theme-success rounded animate-bounce" style={{animationDelay: '0.2s'}}></div>
|
||||
<div className="w-1 h-10 bg-theme-success rounded animate-bounce" style={{animationDelay: '0.3s'}}></div>
|
||||
<div className="w-1 h-6 bg-theme-success rounded animate-bounce" style={{animationDelay: '0.4s'}}></div>
|
||||
</div>
|
||||
<span className="font-medium">Playing response...</span>
|
||||
</div>
|
||||
@@ -142,28 +140,6 @@ export default function Home() {
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Instructions */}
|
||||
<div className="mt-16 text-center">
|
||||
<div className="bg-white/5 backdrop-blur-sm rounded-xl p-6 max-w-3xl mx-auto border border-white/10">
|
||||
<h4 className="text-lg font-semibold text-white mb-4">💡 How to Use</h4>
|
||||
<div className="grid md:grid-cols-3 gap-4 text-sm text-gray-300">
|
||||
<div className="flex flex-col items-center space-y-2">
|
||||
<div className="w-12 h-12 bg-blue-500/20 rounded-full flex items-center justify-center text-2xl">1️⃣</div>
|
||||
<p><strong>Press & Hold</strong><br/>Hold the button down while speaking</p>
|
||||
</div>
|
||||
<div className="flex flex-col items-center space-y-2">
|
||||
<div className="w-12 h-12 bg-purple-500/20 rounded-full flex items-center justify-center text-2xl">2️⃣</div>
|
||||
<p><strong>Or Click Toggle</strong><br/>Click once to start, click again to stop</p>
|
||||
</div>
|
||||
<div className="flex flex-col items-center space-y-2">
|
||||
<div className="w-12 h-12 bg-pink-500/20 rounded-full flex items-center justify-center text-2xl">3️⃣</div>
|
||||
<p><strong>Listen</strong><br/>Your AI assistant will respond with audio</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user