+
+
+ 🎤 Voice Assistant
+
+
+ Experience the future of voice interaction. Press and hold to record your voice,
+ or simply click to toggle recording mode.
+
+
-
-
+ {/* Main Interface */}
+
-
-
Playback:
-
- {playing &&
Playing...
}
+ {/* Recording Section */}
+
+
+ {/* Animated rings around button when recording */}
+ {recording && (
+ <>
+
+
+
+ )}
+
+
+
+
+ {/* Status indicators */}
+
+
+
+ {/* Audio Playback Section */}
+
+
+
🔊 Audio Response
+
Your AI assistant's response will play here
+
+
+
+
+
+ {playing && (
+
+
+
Playing response...
+
+ )}
+
+
+
+
+ {/* Instructions */}
+
+
+
💡 How to Use
+
+
+
1️⃣
+
Press & Hold
Hold the button down while speaking
+
+
+
2️⃣
+
Or Click Toggle
Click once to start, click again to stop
+
+
+
3️⃣
+
Listen
Your AI assistant will respond with audio
+
+
+
diff --git a/frontend/postcss.config.js b/frontend/postcss.config.js
new file mode 100644
index 0000000..dc655aa
--- /dev/null
+++ b/frontend/postcss.config.js
@@ -0,0 +1,6 @@
+module.exports = {
+ plugins: {
+ '@tailwindcss/postcss': {},
+ autoprefixer: {},
+ },
+}
\ No newline at end of file
diff --git a/frontend/services/audioService.js b/frontend/services/audioService.js
new file mode 100644
index 0000000..5bebfba
--- /dev/null
+++ b/frontend/services/audioService.js
@@ -0,0 +1,80 @@
+const BACKEND_URL = process.env.NEXT_PUBLIC_BACKEND_URL || 'http://localhost:8000'
+
+export async function startRecording(mediaRecorderRef, audioChunksRef, setRecording, onRecordingComplete) {
+ if (!navigator.mediaDevices) {
+ alert('No microphone available')
+ return false
+ }
+
+ try {
+ const stream = await navigator.mediaDevices.getUserMedia({ audio: true })
+ const mr = new MediaRecorder(stream)
+
+ mr.ondataavailable = (e) => audioChunksRef.current.push(e.data)
+ mr.onstop = async () => {
+ const blob = new Blob(audioChunksRef.current, { type: 'audio/webm' })
+ audioChunksRef.current = []
+ if (onRecordingComplete) {
+ await onRecordingComplete(blob)
+ }
+ }
+
+ mediaRecorderRef.current = mr
+ audioChunksRef.current = []
+ mr.start()
+ setRecording(true)
+ return true
+ } catch (error) {
+ console.error('Error starting recording:', error)
+ alert('Failed to start recording: ' + error.message)
+ return false
+ }
+}
+
+export function stopRecording(mediaRecorderRef, setRecording) {
+ if (mediaRecorderRef.current && mediaRecorderRef.current.state !== 'inactive') {
+ mediaRecorderRef.current.stop()
+ setRecording(false)
+ return true
+ }
+ return false
+}
+
+export async function sendAudioToBackend(audioBlob) {
+ try {
+ const form = new FormData()
+ // Convert webm to wav on the client is complex; many servers accept webm/ogg.
+ form.append('file', audioBlob, 'recording.webm')
+
+ console.log('Sending request to backend...')
+ const res = await fetch(`${BACKEND_URL}/chat`, {
+ method: 'POST',
+ body: form
+ })
+ console.log('Response received:', res.status, res.statusText)
+
+ if (!res.ok) {
+ const text = await res.text()
+ throw new Error(`${res.status} ${text}`)
+ }
+
+ console.log('Converting response to blob...')
+ const audioBlob = await res.blob()
+ console.log('Audio blob created, size:', audioBlob.size)
+
+ return audioBlob
+ } catch (error) {
+ console.error('Error in sendAudioToBackend:', error)
+ throw error
+ }
+}
+
+export function playAudioBlob(audioBlob, audioRef, setPlaying) {
+ const url = URL.createObjectURL(audioBlob)
+ if (audioRef.current) {
+ audioRef.current.src = url
+ audioRef.current.play()
+ setPlaying(true)
+ audioRef.current.onended = () => setPlaying(false)
+ }
+}
\ No newline at end of file
diff --git a/frontend/styles/globals.css b/frontend/styles/globals.css
new file mode 100644
index 0000000..c0428cd
--- /dev/null
+++ b/frontend/styles/globals.css
@@ -0,0 +1,39 @@
+@import "tailwindcss";
+
+
+@layer base {
+ body {
+ @apply bg-gradient-to-br from-slate-900 via-purple-900 to-slate-900;
+ @apply min-h-screen;
+ }
+}
+
+@layer components {
+ .record-button {
+ @apply relative overflow-hidden;
+ @apply transition-all duration-300 ease-in-out;
+ @apply transform hover:scale-105 active:scale-95;
+ @apply shadow-2xl;
+ }
+
+ .record-button::before {
+ content: '';
+ @apply absolute inset-0 bg-gradient-to-r from-transparent via-white to-transparent;
+ @apply opacity-0 translate-x-[-100%];
+ @apply transition-all duration-700;
+ }
+
+ .record-button:hover::before {
+ @apply opacity-20 translate-x-[100%];
+ }
+
+ .audio-visualizer {
+ @apply relative overflow-hidden rounded-xl;
+ }
+
+ .audio-visualizer::after {
+ content: '';
+ @apply absolute inset-0 bg-gradient-to-r from-blue-500/20 to-purple-500/20;
+ @apply animate-pulse;
+ }
+}
\ No newline at end of file
diff --git a/frontend/tailwind.config.js b/frontend/tailwind.config.js
new file mode 100644
index 0000000..da8111c
--- /dev/null
+++ b/frontend/tailwind.config.js
@@ -0,0 +1,31 @@
+/** @type {import('tailwindcss').Config} */
+module.exports = {
+ content: [
+ "./pages/**/*.{js,ts,jsx,tsx,mdx}",
+ "./components/**/*.{js,ts,jsx,tsx,mdx}",
+ "./app/**/*.{js,ts,jsx,tsx,mdx}",
+ ],
+ theme: {
+ extend: {
+ colors: {
+ primary: {
+ 50: '#eff6ff',
+ 100: '#dbeafe',
+ 200: '#bfdbfe',
+ 300: '#93c5fd',
+ 400: '#60a5fa',
+ 500: '#3b82f6',
+ 600: '#2563eb',
+ 700: '#1d4ed8',
+ 800: '#1e40af',
+ 900: '#1e3a8a',
+ },
+ },
+ animation: {
+ 'pulse-slow': 'pulse 2s cubic-bezier(0.4, 0, 0.6, 1) infinite',
+ 'bounce-slow': 'bounce 2s infinite',
+ }
+ },
+ },
+ plugins: [],
+}
\ No newline at end of file