Upload 12 files

TrueVoxAI/.gitignore

@@ -0,0 +1,2 @@
+./env/
+env/

TrueVoxAI/Dockerfile

@@ -0,0 +1,35 @@
+# Base image with Python
+FROM python:3.10-slim
+
+# Set environment variables
+ENV PYTHONDONTWRITEBYTECODE=1
+ENV PYTHONUNBUFFERED=1
+
+# Set work directory
+WORKDIR /app
+
+# Install system dependencies
+RUN apt-get update && apt-get install -y \
+    ffmpeg \
+    libsndfile1 \
+    libglib2.0-0 \
+    libsm6 \
+    libxrender1 \
+    libxext6 \
+    && rm -rf /var/lib/apt/lists/*
+
+# Install Python dependencies
+COPY requirements.txt .
+RUN pip install --no-cache-dir -r requirements.txt
+
+# Copy app files
+COPY . .
+
+# Create uploads directory
+RUN mkdir -p uploads
+
+# Expose the port Hugging Face expects
+EXPOSE 7860
+
+# Run the app
+CMD ["python", "app.py"]

TrueVoxAI/TrueVox/.gitattributes

@@ -0,0 +1,35 @@
+*.7z filter=lfs diff=lfs merge=lfs -text
+*.arrow filter=lfs diff=lfs merge=lfs -text
+*.bin filter=lfs diff=lfs merge=lfs -text
+*.bz2 filter=lfs diff=lfs merge=lfs -text
+*.ckpt filter=lfs diff=lfs merge=lfs -text
+*.ftz filter=lfs diff=lfs merge=lfs -text
+*.gz filter=lfs diff=lfs merge=lfs -text
+*.h5 filter=lfs diff=lfs merge=lfs -text
+*.joblib filter=lfs diff=lfs merge=lfs -text
+*.lfs.* filter=lfs diff=lfs merge=lfs -text
+*.mlmodel filter=lfs diff=lfs merge=lfs -text
+*.model filter=lfs diff=lfs merge=lfs -text
+*.msgpack filter=lfs diff=lfs merge=lfs -text
+*.npy filter=lfs diff=lfs merge=lfs -text
+*.npz filter=lfs diff=lfs merge=lfs -text
+*.onnx filter=lfs diff=lfs merge=lfs -text
+*.ot filter=lfs diff=lfs merge=lfs -text
+*.parquet filter=lfs diff=lfs merge=lfs -text
+*.pb filter=lfs diff=lfs merge=lfs -text
+*.pickle filter=lfs diff=lfs merge=lfs -text
+*.pkl filter=lfs diff=lfs merge=lfs -text
+*.pt filter=lfs diff=lfs merge=lfs -text
+*.pth filter=lfs diff=lfs merge=lfs -text
+*.rar filter=lfs diff=lfs merge=lfs -text
+*.safetensors filter=lfs diff=lfs merge=lfs -text
+saved_model/**/* filter=lfs diff=lfs merge=lfs -text
+*.tar.* filter=lfs diff=lfs merge=lfs -text
+*.tar filter=lfs diff=lfs merge=lfs -text
+*.tflite filter=lfs diff=lfs merge=lfs -text
+*.tgz filter=lfs diff=lfs merge=lfs -text
+*.wasm filter=lfs diff=lfs merge=lfs -text
+*.xz filter=lfs diff=lfs merge=lfs -text
+*.zip filter=lfs diff=lfs merge=lfs -text
+*.zst filter=lfs diff=lfs merge=lfs -text
+*tfevents* filter=lfs diff=lfs merge=lfs -text

TrueVoxAI/TrueVox/README.md

@@ -0,0 +1,12 @@
+---
+title: TrueVox
+emoji: 🦀
+colorFrom: red
+colorTo: pink
+sdk: docker
+pinned: false
+license: mit
+short_description: It is a speech emotion recognition system
+---
+
+Check out the configuration reference at https://huggingface.co/docs/hub/spaces-config-reference

TrueVoxAI/app.py

@@ -0,0 +1,132 @@
+from flask import Flask, request, jsonify, render_template
+import os
+import numpy as np
+import librosa
+import joblib
+import speech_recognition as sr
+from werkzeug.utils import secure_filename
+
+app = Flask(__name__)
+
+UPLOAD_FOLDER = 'uploads'
+ALLOWED_EXTENSIONS = {'wav', 'mp3', 'ogg'}
+app.config['UPLOAD_FOLDER'] = UPLOAD_FOLDER
+app.config['MAX_CONTENT_LENGTH'] = 16 * 1024 * 1024  # 16MB max upload
+
+os.makedirs(UPLOAD_FOLDER, exist_ok=True)
+
+model = joblib.load("mlp_emotion_model.pkl")
+scaler = joblib.load("scaler.pkl")
+label_encoder = joblib.load("label_encoder.pkl")
+
+def allowed_file(filename):
+    return '.' in filename and filename.rsplit('.', 1)[1].lower() in ALLOWED_EXTENSIONS
+
+def extract_features(file_path):
+    """Extract audio features for emotion recognition"""
+    try:
+        y_data, sr = librosa.load(file_path, sr=None, mono=True)
+        
+        if len(y_data) == 0:
+            return None
+            
+        features = np.hstack([
+            np.mean(librosa.feature.zero_crossing_rate(y_data).T, axis=0),
+            np.mean(librosa.feature.chroma_stft(y=y_data, sr=sr).T, axis=0),
+            np.mean(librosa.feature.mfcc(y=y_data, sr=sr, n_mfcc=40).T, axis=0),
+            np.mean(librosa.feature.melspectrogram(y=y_data, sr=sr).T, axis=0)
+        ])
+        return features
+    except Exception as e:
+        print(f"Error extracting features: {e}")
+        return None
+
+def recognize_emotion(file_path):
+    """Recognize emotion in audio file"""
+    features = extract_features(file_path)
+    if features is None:
+        return {"error": "Failed to extract audio features"}
+
+    scaled_features = scaler.transform(features.reshape(1, -1))
+
+    prediction = model.predict(scaled_features)
+    emotion = label_encoder.inverse_transform(prediction)[0]
+
+    probs = model.predict_proba(scaled_features)[0]
+    emotion_probs = {emotion: float(prob) for emotion, prob in zip(label_encoder.classes_, probs)}
+
+    emotion_map = {
+        'ANG': 'Angry',
+        'DIS': 'Disgusted',
+        'FEA': 'Fearful',
+        'HAP': 'Happy',
+        'NEU': 'Neutral',
+        'SAD': 'Sad'
+    }
+    
+    full_emotion = emotion_map.get(emotion, emotion)
+    
+    return {
+        "emotion": emotion,
+        "emotion_name": full_emotion,
+        "confidence": float(max(probs)),
+        "probabilities": emotion_probs
+    }
+
+def transcribe_audio(file_path):
+    """Transcribe speech to text from audio file"""
+    recognizer = sr.Recognizer()
+    
+    try:
+
+        with sr.AudioFile(file_path) as source:
+
+            audio_data = recognizer.record(source)
+            text = recognizer.recognize_google(audio_data)
+            return {"text": text}
+    except sr.UnknownValueError:
+        return {"text": "Speech unclear", "error": "Could not understand audio"}
+    except sr.RequestError as e:
+        return {"text": "", "error": f"Speech service error: {e}"}
+    except Exception as e:
+        return {"text": "", "error": f"Error transcribing audio: {e}"}
+
+@app.route('/')
+def index():
+    return render_template('index.html')
+
+@app.route('/analyze', methods=['POST'])
+def analyze_audio():
+    if 'file' not in request.files:
+        return jsonify({"error": "No file uploaded"}), 400
+        
+    file = request.files['file']
+
+    if file.filename == '':
+        return jsonify({"error": "No file selected"}), 400
+
+    if not allowed_file(file.filename):
+        return jsonify({"error": f"File type not allowed. Supported types: {', '.join(ALLOWED_EXTENSIONS)}"}), 400
+    
+    try:
+        filename = secure_filename(file.filename)
+        file_path = os.path.join(app.config['UPLOAD_FOLDER'], filename)
+        file.save(file_path)
+
+        emotion_result = recognize_emotion(file_path)
+        transcription_result = transcribe_audio(file_path)
+
+        result = {
+            "filename": filename,
+            "emotion": emotion_result,
+            "transcription": transcription_result
+        }
+        
+        return jsonify(result)
+    except Exception as e:
+        return jsonify({"error": f"Error processing audio: {str(e)}"}), 500
+    finally:
+        pass
+
+if __name__ == '__main__':
+    app.run(debug=True)

TrueVoxAI/label_encoder.pkl

@@ -0,0 +1,3 @@
+version https://git-lfs.github.com/spec/v1
+oid sha256:a4d77898aba92f91a178970f4f5fe187f3fa3ab483e3b0f5937d22ae587bb23d
+size 399

TrueVoxAI/mlp_emotion_model.pkl

@@ -0,0 +1,3 @@
+version https://git-lfs.github.com/spec/v1
+oid sha256:4320203233e94204282623f37398e59e6f69b694adf770e48c47af22f32329e5
+size 2123997

TrueVoxAI/requirements.txt

@@ -0,0 +1,6 @@
+Flask
+numpy
+librosa
+joblib
+speechrecognition
+werkzeug

TrueVoxAI/scaler.pkl

@@ -0,0 +1,3 @@
+version https://git-lfs.github.com/spec/v1
+oid sha256:57bcd50640408e7df9d0a0b241136f81cb9091475ca5bb9e30a1402e1284d55f
+size 4943

TrueVoxAI/templates/index.html

@@ -0,0 +1,718 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Speech Emotion Detector</title>
+    <link href="https://fonts.googleapis.com/css2?family=Poppins:wght@400;500;600;700&family=Open+Sans:wght@400;500;600&display=swap" rel="stylesheet">
+    <script src="https://cdn.tailwindcss.com"></script>
+    <script src="https://unpkg.com/lucide@latest"></script>
+    <script src="https://unpkg.com/@lucide/web@latest"></script>
+    <script>
+        tailwind.config = {
+            darkMode: 'class',
+            theme: {
+                extend: {
+                    colors: {
+                        primary: {
+                            DEFAULT: '#ed1b76',
+                            dark: '#d01868',
+                            light: '#ff3d8e'
+                        },
+                        accent: {
+                            DEFAULT: '#249f9c',
+                            dark: '#037a76',
+                            light: '#3cbfbc'
+                        }
+                    },
+                    fontFamily: {
+                        poppins: ['Poppins', 'sans-serif'],
+                        opensans: ['Open Sans', 'sans-serif']
+                    }
+                }
+            }
+        }
+    </script>
+    <style type="text/tailwindcss">
+        @layer utilities {
+            .text-gradient {
+                @apply bg-gradient-to-r from-primary to-accent bg-clip-text text-transparent;
+            }
+            .progress-ring-circle {
+                transition: stroke-dashoffset 0.35s;
+                transform: rotate(-90deg);
+                transform-origin: 50% 50%;
+            }
+        }
+    </style>
+</head>
+<body class="font-opensans bg-gray-50 text-gray-800 dark:bg-gray-900 dark:text-gray-100 transition-colors duration-200">
+    <!-- Toast Notifications -->
+    <div id="toast-container" class="fixed top-4 right-4 z-50 flex flex-col gap-2"></div>
+
+    <!-- Dark Mode Toggle -->
+    <div class="absolute top-4 right-4 z-40">
+        <button id="theme-toggle" class="p-2 rounded-full bg-gray-200 dark:bg-gray-700 hover:bg-gray-300 dark:hover:bg-gray-600 transition-colors">
+            <i data-lucide="sun" class="hidden dark:block w-5 h-5 text-yellow-400"></i>
+            <i data-lucide="moon" class="block dark:hidden w-5 h-5 text-gray-700"></i>
+        </button>
+    </div>
+
+    <!-- Hero Section -->
+    <header class="relative bg-gradient-to-b from-white to-gray-100 dark:from-gray-800 dark:to-gray-900 pt-16 pb-12 px-4 sm:px-6 lg:px-8 text-center">
+        <div class="max-w-4xl mx-auto">
+            <h1 class="font-poppins font-bold text-4xl md:text-5xl lg:text-6xl mb-4 text-gradient">
+                Speech Emotion Detector
+            </h1>
+            <p class="text-lg md:text-xl text-gray-600 dark:text-gray-300 mb-8">
+                Detect emotion and transcribe speech with a single upload
+            </p>
+            <div class="flex justify-center">
+                <button id="about-btn" class="flex items-center gap-2 px-4 py-2 rounded-full bg-gray-200 dark:bg-gray-700 hover:bg-gray-300 dark:hover:bg-gray-600 transition-colors">
+                    <i data-lucide="info" class="w-4 h-4"></i>
+                    <span>How it works</span>
+                </button>
+            </div>
+        </div>
+    </header>
+
+    <main class="max-w-4xl mx-auto px-4 sm:px-6 lg:px-8 py-8">
+        <!-- Upload Section -->
+        <section class="mb-12">
+            <div id="upload-container" class="border-2 border-dashed border-gray-300 dark:border-gray-700 rounded-lg p-8 text-center transition-all hover:border-primary dark:hover:border-primary cursor-pointer">
+                <div class="flex flex-col items-center justify-center gap-4">
+                    <div class="w-16 h-16 rounded-full bg-primary/10 flex items-center justify-center">
+                        <i data-lucide="upload-cloud" class="w-8 h-8 text-primary"></i>
+                    </div>
+                    <div>
+                        <h2 class="font-poppins font-semibold text-xl mb-2">Upload Audio File</h2>
+                        <p class="text-gray-500 dark:text-gray-400 mb-4">Drag & drop your audio file here or click to browse</p>
+                        <p class="text-sm text-gray-400 dark:text-gray-500">Supported formats: .wav, .mp3, .ogg</p>
+                    </div>
+                    <input type="file" id="file-input" class="hidden" accept=".wav,.mp3,.ogg">
+                </div>
+            </div>
+
+            <div id="file-info" class="hidden mt-4 p-4 bg-gray-100 dark:bg-gray-800 rounded-lg">
+                <div class="flex items-center justify-between">
+                    <div class="flex items-center gap-3">
+                        <i data-lucide="file-audio" class="w-6 h-6 text-primary"></i>
+                        <div>
+                            <p id="file-name" class="font-medium"></p>
+                            <p id="file-size" class="text-sm text-gray-500 dark:text-gray-400"></p>
+                        </div>
+                    </div>
+                    <button id="remove-file" class="p-1 rounded-full hover:bg-gray-200 dark:hover:bg-gray-700">
+                        <i data-lucide="x" class="w-5 h-5 text-gray-500 dark:text-gray-400"></i>
+                    </button>
+                </div>
+            </div>
+
+            <div class="flex flex-wrap gap-4 mt-6">
+                <button id="analyze-btn" class="flex-1 bg-primary hover:bg-primary-dark text-white font-medium py-3 px-6 rounded-lg flex items-center justify-center gap-2 transition-colors disabled:opacity-50 disabled:cursor-not-allowed">
+                    <i data-lucide="activity" class="w-5 h-5"></i>
+                    <span>Analyze Audio</span>
+                </button>
+                <button id="record-btn" class="flex-1 bg-accent hover:bg-accent-dark text-white font-medium py-3 px-6 rounded-lg flex items-center justify-center gap-2 transition-colors">
+                    <i data-lucide="mic" class="w-5 h-5"></i>
+                    <span>Record Audio</span>
+                </button>
+            </div>
+        </section>
+
+        <!-- Loading Animation -->
+        <div id="loading" class="hidden">
+            <div class="flex flex-col items-center justify-center py-12">
+                <div class="relative w-20 h-20">
+                    <div class="absolute top-0 left-0 w-full h-full border-4 border-gray-200 dark:border-gray-700 rounded-full"></div>
+                    <div class="absolute top-0 left-0 w-full h-full border-4 border-t-primary border-r-transparent border-b-transparent border-l-transparent rounded-full animate-spin"></div>
+                </div>
+                <p class="mt-4 text-lg font-medium">Analyzing audio...</p>
+                <p class="text-gray-500 dark:text-gray-400">This may take a few moments</p>
+            </div>
+        </div>
+
+        <!-- Results Section -->
+        <section id="results" class="hidden">
+            <h2 class="font-poppins font-semibold text-2xl mb-6">Analysis Results</h2>
+            
+            <div class="grid grid-cols-1 md:grid-cols-2 gap-6 mb-8">
+                <!-- Emotion Card -->
+                <div class="bg-white dark:bg-gray-800 rounded-xl shadow-md overflow-hidden">
+                    <div class="p-6">
+                        <h3 class="font-poppins font-medium text-lg mb-4">Detected Emotion</h3>
+                        <div class="flex items-center justify-between">
+                            <div class="flex items-center gap-4">
+                                <div id="emotion-emoji" class="text-4xl"></div>
+                                <div>
+                                    <p id="emotion-label" class="font-poppins font-semibold text-2xl"></p>
+                                    <p class="text-gray-500 dark:text-gray-400">Primary emotion</p>
+                                </div>
+                            </div>
+                            <div class="relative w-20 h-20">
+                                <svg class="w-full h-full" viewBox="0 0 36 36">
+                                    <circle cx="18" cy="18" r="16" fill="none" stroke-width="2" class="stroke-gray-200 dark:stroke-gray-700"></circle>
+                                    <circle id="confidence-circle" cx="18" cy="18" r="16" fill="none" stroke-width="2" class="stroke-primary progress-ring-circle" stroke-dasharray="100" stroke-dashoffset="0"></circle>
+                                    <text id="confidence-text" x="18" y="18" text-anchor="middle" dominant-baseline="middle" class="font-medium text-sm"></text>
+                                </svg>
+                            </div>
+                        </div>
+                    </div>
+                </div>
+
+                <!-- All Emotions Card -->
+                <div class="bg-white dark:bg-gray-800 rounded-xl shadow-md overflow-hidden">
+                    <div class="p-6">
+                        <h3 class="font-poppins font-medium text-lg mb-4">All Emotions</h3>
+                        <div class="space-y-3">
+                            <div class="emotion-bar" data-emotion="angry">
+                                <div class="flex justify-between mb-1">
+                                    <span>Angry 😠</span>
+                                    <span class="emotion-percentage">0%</span>
+                                </div>
+                                <div class="w-full bg-gray-200 dark:bg-gray-700 rounded-full h-2.5">
+                                    <div class="bg-red-500 h-2.5 rounded-full" style="width: 0%"></div>
+                                </div>
+                            </div>
+                            <div class="emotion-bar" data-emotion="disgusted">
+                                <div class="flex justify-between mb-1">
+                                    <span>Disgusted 🤢</span>
+                                    <span class="emotion-percentage">0%</span>
+                                </div>
+                                <div class="w-full bg-gray-200 dark:bg-gray-700 rounded-full h-2.5">
+                                    <div class="bg-green-500 h-2.5 rounded-full" style="width: 0%"></div>
+                                </div>
+                            </div>
+                            <div class="emotion-bar" data-emotion="fearful">
+                                <div class="flex justify-between mb-1">
+                                    <span>Fearful 😨</span>
+                                    <span class="emotion-percentage">0%</span>
+                                </div>
+                                <div class="w-full bg-gray-200 dark:bg-gray-700 rounded-full h-2.5">
+                                    <div class="bg-purple-500 h-2.5 rounded-full" style="width: 0%"></div>
+                                </div>
+                            </div>
+                            <div class="emotion-bar" data-emotion="happy">
+                                <div class="flex justify-between mb-1">
+                                    <span>Happy 😊</span>
+                                    <span class="emotion-percentage">0%</span>
+                                </div>
+                                <div class="w-full bg-gray-200 dark:bg-gray-700 rounded-full h-2.5">
+                                    <div class="bg-yellow-500 h-2.5 rounded-full" style="width: 0%"></div>
+                                </div>
+                            </div>
+                            <div class="emotion-bar" data-emotion="neutral">
+                                <div class="flex justify-between mb-1">
+                                    <span>Neutral 😐</span>
+                                    <span class="emotion-percentage">0%</span>
+                                </div>
+                                <div class="w-full bg-gray-200 dark:bg-gray-700 rounded-full h-2.5">
+                                    <div class="bg-blue-400 h-2.5 rounded-full" style="width: 0%"></div>
+                                </div>
+                            </div>
+                            <div class="emotion-bar" data-emotion="sad">
+                                <div class="flex justify-between mb-1">
+                                    <span>Sad 😢</span>
+                                    <span class="emotion-percentage">0%</span>
+                                </div>
+                                <div class="w-full bg-gray-200 dark:bg-gray-700 rounded-full h-2.5">
+                                    <div class="bg-blue-600 h-2.5 rounded-full" style="width: 0%"></div>
+                                </div>
+                            </div>
+                        </div>
+                    </div>
+                </div>
+            </div>
+
+            <!-- Transcription Card -->
+            <div class="bg-white dark:bg-gray-800 rounded-xl shadow-md overflow-hidden">
+                <div class="p-6">
+                    <div class="flex justify-between items-center mb-4">
+                        <h3 class="font-poppins font-medium text-lg">Transcription</h3>
+                        <button id="copy-transcription" class="p-2 rounded-lg bg-gray-100 dark:bg-gray-700 hover:bg-gray-200 dark:hover:bg-gray-600 transition-colors">
+                            <i data-lucide="copy" class="w-5 h-5"></i>
+                        </button>
+                    </div>
+                    <div class="bg-gray-50 dark:bg-gray-900 rounded-lg p-4 min-h-[100px]">
+                        <p id="transcription-text" class="whitespace-pre-wrap"></p>
+                    </div>
+                </div>
+            </div>
+        </section>
+
+        <!-- Error Alert -->
+        <div id="error-alert" class="hidden bg-red-100 border-l-4 border-red-500 text-red-700 p-4 rounded-lg mt-6">
+            <div class="flex items-start">
+                <div class="flex-shrink-0">
+                    <i data-lucide="alert-circle" class="w-5 h-5"></i>
+                </div>
+                <div class="ml-3">
+                    <p id="error-message" class="text-sm font-medium"></p>
+                </div>
+                <button id="close-error" class="ml-auto -mx-1.5 -my-1.5 bg-red-100 text-red-500 rounded-lg p-1.5 hover:bg-red-200 inline-flex h-8 w-8 items-center justify-center">
+                    <i data-lucide="x" class="w-5 h-5"></i>
+                </button>
+            </div>
+        </div>
+    </main>
+
+    <!-- About Modal -->
+    <div id="about-modal" class="fixed inset-0 z-50 hidden">
+        <div class="absolute inset-0 bg-black bg-opacity-50"></div>
+        <div class="relative top-1/2 left-1/2 transform -translate-x-1/2 -translate-y-1/2 bg-white dark:bg-gray-800 rounded-xl shadow-xl max-w-lg w-full max-h-[90vh] overflow-y-auto">
+            <div class="p-6">
+                <div class="flex justify-between items-center mb-4">
+                    <h2 class="font-poppins font-semibold text-2xl">How It Works</h2>
+                    <button id="close-modal" class="p-1 rounded-full hover:bg-gray-200 dark:hover:bg-gray-700">
+                        <i data-lucide="x" class="w-6 h-6"></i>
+                    </button>
+                </div>
+                <div class="space-y-4">
+                    <p>The Speech Emotion Detector uses advanced machine learning algorithms to analyze audio and detect emotions in speech.</p>
+                    
+                    <h3 class="font-poppins font-medium text-lg">How to use:</h3>
+                    <ol class="list-decimal list-inside space-y-2">
+                        <li>Upload an audio file (.wav, .mp3, or .ogg format)</li>
+                        <li>Click "Analyze Audio" to process the file</li>
+                        <li>View the detected emotion, confidence score, and transcription</li>
+                    </ol>
+                    
+                    <h3 class="font-poppins font-medium text-lg">Technology:</h3>
+                    <p>This application uses:</p>
+                    <ul class="list-disc list-inside space-y-1">
+                        <li>Speech recognition for transcription</li>
+                        <li>Audio feature extraction (MFCC, chroma, mel spectrogram)</li>
+                        <li>Machine learning models trained on emotional speech datasets</li>
+                    </ul>
+                    
+                    <p>The system can detect six basic emotions: Angry, Disgusted, Fearful, Happy, Neutral, and Sad.</p>
+                </div>
+            </div>
+        </div>
+    </div>
+
+    <!-- Record Modal -->
+    <div id="record-modal" class="fixed inset-0 z-50 hidden">
+        <div class="absolute inset-0 bg-black bg-opacity-50"></div>
+        <div class="relative top-1/2 left-1/2 transform -translate-x-1/2 -translate-y-1/2 bg-white dark:bg-gray-800 rounded-xl shadow-xl max-w-md w-full">
+            <div class="p-6">
+                <div class="flex justify-between items-center mb-4">
+                    <h2 class="font-poppins font-semibold text-2xl">Record Audio</h2>
+                    <button id="close-record-modal" class="p-1 rounded-full hover:bg-gray-200 dark:hover:bg-gray-700">
+                        <i data-lucide="x" class="w-6 h-6"></i>
+                    </button>
+                </div>
+                <div class="flex flex-col items-center justify-center py-8">
+                    <div id="record-button" class="w-24 h-24 rounded-full bg-red-500 flex items-center justify-center cursor-pointer hover:bg-red-600 transition-colors mb-4">
+                        <i data-lucide="mic" class="w-12 h-12 text-white"></i>
+                    </div>
+                    <p id="record-status" class="text-lg font-medium">Click to start recording</p>
+                    <p id="record-timer" class="text-gray-500 dark:text-gray-400 mt-2">00:00</p>
+                </div>
+                <div class="flex justify-center gap-4">
+                    <button id="cancel-recording" class="bg-gray-200 dark:bg-gray-700 hover:bg-gray-300 dark:hover:bg-gray-600 text-gray-800 dark:text-gray-200 font-medium py-2 px-4 rounded-lg transition-colors">
+                        Cancel
+                    </button>
+                    <button id="save-recording" class="bg-primary hover:bg-primary-dark text-white font-medium py-2 px-4 rounded-lg transition-colors disabled:opacity-50 disabled:cursor-not-allowed" disabled>
+                        Use Recording
+                    </button>
+                </div>
+            </div>
+        </div>
+    </div>
+
+    <script>
+        // Initialize Lucide icons
+        lucide.createIcons();
+
+        // DOM Elements
+        const themeToggle = document.getElementById('theme-toggle');
+        const uploadContainer = document.getElementById('upload-container');
+        const fileInput = document.getElementById('file-input');
+        const fileInfo = document.getElementById('file-info');
+        const fileName = document.getElementById('file-name');
+        const fileSize = document.getElementById('file-size');
+        const removeFile = document.getElementById('remove-file');
+        const analyzeBtn = document.getElementById('analyze-btn');
+        const recordBtn = document.getElementById('record-btn');
+        const loading = document.getElementById('loading');
+        const results = document.getElementById('results');
+        const emotionEmoji = document.getElementById('emotion-emoji');
+        const emotionLabel = document.getElementById('emotion-label');
+        const confidenceCircle = document.getElementById('confidence-circle');
+        const confidenceText = document.getElementById('confidence-text');
+        const transcriptionText = document.getElementById('transcription-text');
+        const copyTranscription = document.getElementById('copy-transcription');
+        const errorAlert = document.getElementById('error-alert');
+        const errorMessage = document.getElementById('error-message');
+        const closeError = document.getElementById('close-error');
+        const aboutBtn = document.getElementById('about-btn');
+        const aboutModal = document.getElementById('about-modal');
+        const closeModal = document.getElementById('close-modal');
+        const recordModal = document.getElementById('record-modal');
+        const closeRecordModal = document.getElementById('close-record-modal');
+        const recordButton = document.getElementById('record-button');
+        const recordStatus = document.getElementById('record-status');
+        const recordTimer = document.getElementById('record-timer');
+        const cancelRecording = document.getElementById('cancel-recording');
+        const saveRecording = document.getElementById('save-recording');
+        const toastContainer = document.getElementById('toast-container');
+
+        // Check for dark mode preference
+        if (localStorage.getItem('theme') === 'dark' || 
+            (!localStorage.getItem('theme') && window.matchMedia('(prefers-color-scheme: dark)').matches)) {
+            document.documentElement.classList.add('dark');
+        } else {
+            document.documentElement.classList.remove('dark');
+        }
+
+        // Theme toggle
+        themeToggle.addEventListener('click', () => {
+            if (document.documentElement.classList.contains('dark')) {
+                document.documentElement.classList.remove('dark');
+                localStorage.setItem('theme', 'light');
+            } else {
+                document.documentElement.classList.add('dark');
+                localStorage.setItem('theme', 'dark');
+            }
+        });
+
+        // File upload handling
+        uploadContainer.addEventListener('click', () => {
+            fileInput.click();
+        });
+
+        uploadContainer.addEventListener('dragover', (e) => {
+            e.preventDefault();
+            uploadContainer.classList.add('border-primary');
+        });
+
+        uploadContainer.addEventListener('dragleave', () => {
+            uploadContainer.classList.remove('border-primary');
+        });
+
+        uploadContainer.addEventListener('drop', (e) => {
+            e.preventDefault();
+            uploadContainer.classList.remove('border-primary');
+            
+            if (e.dataTransfer.files.length) {
+                handleFile(e.dataTransfer.files[0]);
+            }
+        });
+
+        fileInput.addEventListener('change', () => {
+            if (fileInput.files.length) {
+                handleFile(fileInput.files[0]);
+            }
+        });
+
+        function handleFile(file) {
+            // Check if file type is supported
+            const fileType = file.name.split('.').pop().toLowerCase();
+            if (!['wav', 'mp3', 'ogg'].includes(fileType)) {
+                showError('Unsupported file format. Please upload a .wav, .mp3, or .ogg file.');
+                return;
+            }
+
+            // Display file info
+            fileName.textContent = file.name;
+            fileSize.textContent = formatFileSize(file.size);
+            fileInfo.classList.remove('hidden');
+            analyzeBtn.disabled = false;
+        }
+
+        function formatFileSize(bytes) {
+            if (bytes < 1024) return bytes + ' bytes';
+            else if (bytes < 1048576) return (bytes / 1024).toFixed(1) + ' KB';
+            else return (bytes / 1048576).toFixed(1) + ' MB';
+        }
+
+        removeFile.addEventListener('click', () => {
+            fileInput.value = '';
+            fileInfo.classList.add('hidden');
+            analyzeBtn.disabled = true;
+        });
+
+        // Analyze button
+        analyzeBtn.addEventListener('click', () => {
+            if (!fileInput.files.length) return;
+            
+            // Hide upload section and show loading
+            loading.classList.remove('hidden');
+            results.classList.add('hidden');
+            errorAlert.classList.add('hidden');
+            
+            // Simulate API call with timeout
+            setTimeout(() => {
+                loading.classList.add('hidden');
+                
+                // Simulate random results
+                const emotions = ['angry', 'disgusted', 'fearful', 'happy', 'neutral', 'sad'];
+                const randomEmotion = emotions[Math.floor(Math.random() * emotions.length)];
+                const confidence = Math.random() * 0.5 + 0.5; // Random between 50-100%
+                
+                // Generate random probabilities for all emotions
+                const probabilities = {};
+                let total = 0;
+                
+                emotions.forEach(emotion => {
+                    if (emotion === randomEmotion) {
+                        probabilities[emotion] = confidence;
+                    } else {
+                        probabilities[emotion] = Math.random() * (1 - confidence);
+                        total += probabilities[emotion];
+                    }
+                });
+                
+                // Normalize other probabilities
+                if (total > 0) {
+                    const scale = (1 - confidence) / total;
+                    emotions.forEach(emotion => {
+                        if (emotion !== randomEmotion) {
+                            probabilities[emotion] *= scale;
+                        }
+                    });
+                }
+                
+                // Update UI with results
+                displayResults(randomEmotion, confidence, probabilities);
+                
+                // Show toast notification
+                showToast('Audio analysis complete!', 'success');
+            }, 2000);
+        });
+
+        function displayResults(emotion, confidence, probabilities) {
+            // Set emoji and label
+            const emojis = {
+                'angry': '😠',
+                'disgusted': '🤢',
+                'fearful': '😨',
+                'happy': '😊',
+                'neutral': '😐',
+                'sad': '😢'
+            };
+            
+            emotionEmoji.textContent = emojis[emotion];
+            emotionLabel.textContent = emotion.charAt(0).toUpperCase() + emotion.slice(1);
+            
+            // Set confidence circle
+            const circumference = 2 * Math.PI * 16;
+            const offset = circumference - (confidence * circumference);
+            confidenceCircle.style.strokeDasharray = `${circumference} ${circumference}`;
+            confidenceCircle.style.strokeDashoffset = offset;
+            confidenceText.textContent = `${Math.round(confidence * 100)}%`;
+            
+            // Update emotion bars
+            Object.keys(probabilities).forEach(emotion => {
+                const percentage = Math.round(probabilities[emotion] * 100);
+                const bar = document.querySelector(`.emotion-bar[data-emotion="${emotion}"] .emotion-percentage`);
+                const progress = document.querySelector(`.emotion-bar[data-emotion="${emotion}"] div div`);
+                
+                bar.textContent = `${percentage}%`;
+                progress.style.width = `${percentage}%`;
+            });
+            
+            // Set transcription (simulated)
+            const transcriptions = [
+                "Hello, this is a sample transcription of what I'm saying in this audio file.",
+                "I'm really excited about this new project we're working on together.",
+                "I don't think that's a good idea. We should reconsider our approach.",
+                "The weather today is absolutely beautiful, perfect for a walk in the park.",
+                "I'm feeling a bit under the weather today, might need to take it easy."
+            ];
+            
+            transcriptionText.textContent = transcriptions[Math.floor(Math.random() * transcriptions.length)];
+            
+            // Show results section
+            results.classList.remove('hidden');
+        }
+
+        // Copy transcription
+        copyTranscription.addEventListener('click', () => {
+            navigator.clipboard.writeText(transcriptionText.textContent)
+                .then(() => {
+                    showToast('Transcription copied to clipboard!', 'success');
+                })
+                .catch(err => {
+                    showToast('Failed to copy text', 'error');
+                });
+        });
+
+        // Error handling
+        function showError(message) {
+            errorMessage.textContent = message;
+            errorAlert.classList.remove('hidden');
+        }
+
+        closeError.addEventListener('click', () => {
+            errorAlert.classList.add('hidden');
+        });
+
+        // About modal
+        aboutBtn.addEventListener('click', () => {
+            aboutModal.classList.remove('hidden');
+        });
+
+        closeModal.addEventListener('click', () => {
+            aboutModal.classList.add('hidden');
+        });
+
+        // Close modal when clicking outside
+        aboutModal.addEventListener('click', (e) => {
+            if (e.target === aboutModal) {
+                aboutModal.classList.add('hidden');
+            }
+        });
+
+        // Record modal
+        recordBtn.addEventListener('click', () => {
+            recordModal.classList.remove('hidden');
+        });
+
+        closeRecordModal.addEventListener('click', () => {
+            recordModal.classList.add('hidden');
+        });
+
+        // Close record modal when clicking outside
+        recordModal.addEventListener('click', (e) => {
+            if (e.target === recordModal) {
+                recordModal.classList.add('hidden');
+            }
+        });
+
+        // Record functionality (simulated)
+        let isRecording = false;
+        let recordingTimer;
+        let recordingSeconds = 0;
+
+        recordButton.addEventListener('click', () => {
+            if (!isRecording) {
+                startRecording();
+            } else {
+                stopRecording();
+            }
+        });
+
+        function startRecording() {
+            isRecording = true;
+            recordingSeconds = 0;
+            recordButton.classList.remove('bg-red-500', 'hover:bg-red-600');
+            recordButton.classList.add('bg-gray-500', 'hover:bg-gray-600', 'animate-pulse');
+            recordStatus.textContent = 'Recording...';
+            saveRecording.disabled = true;
+            
+            // Start timer
+            recordingTimer = setInterval(() => {
+                recordingSeconds++;
+                const minutes = Math.floor(recordingSeconds / 60).toString().padStart(2, '0');
+                const seconds = (recordingSeconds % 60).toString().padStart(2, '0');
+                recordTimer.textContent = `${minutes}:${seconds}`;
+                
+                // Enable save button after 1 second
+                if (recordingSeconds >= 1) {
+                    saveRecording.disabled = false;
+                }
+            }, 1000);
+        }
+
+        function stopRecording() {
+            isRecording = false;
+            clearInterval(recordingTimer);
+            recordButton.classList.remove('bg-gray-500', 'hover:bg-gray-600', 'animate-pulse');
+            recordButton.classList.add('bg-red-500', 'hover:bg-red-600');
+            recordStatus.textContent = 'Recording stopped';
+        }
+
+        cancelRecording.addEventListener('click', () => {
+            if (isRecording) {
+                stopRecording();
+            }
+            recordModal.classList.add('hidden');
+            recordStatus.textContent = 'Click to start recording';
+            recordTimer.textContent = '00:00';
+            saveRecording.disabled = true;
+        });
+
+        saveRecording.addEventListener('click', () => {
+            if (isRecording) {
+                stopRecording();
+            }
+            recordModal.classList.add('hidden');
+            
+            // Simulate file creation
+            fileInfo.classList.remove('hidden');
+            fileName.textContent = 'recording_' + new Date().toISOString().slice(0, 19).replace(/[-:T]/g, '') + '.wav';
+            fileSize.textContent = '256 KB';
+            analyzeBtn.disabled = false;
+            
+            showToast('Recording saved successfully!', 'success');
+        });
+
+        // Toast notifications
+        function showToast(message, type = 'info') {
+            const toast = document.createElement('div');
+            toast.className = `flex items-center p-4 mb-3 rounded-lg shadow-md transition-all transform translate-x-full animate-toast-in ${
+                type === 'success' ? 'bg-green-100 text-green-800 dark:bg-green-800 dark:text-green-100' :
+                type === 'error' ? 'bg-red-100 text-red-800 dark:bg-red-800 dark:text-red-100' :
+                'bg-blue-100 text-blue-800 dark:bg-blue-800 dark:text-blue-100'
+            }`;
+            
+            const icon = document.createElement('div');
+            icon.className = 'flex-shrink-0 mr-3';
+            icon.innerHTML = `<i data-lucide="${
+                type === 'success' ? 'check-circle' :
+                type === 'error' ? 'alert-circle' : 'info'
+            }" class="w-5 h-5"></i>`;
+            
+            const content = document.createElement('div');
+            content.textContent = message;
+            
+            const closeBtn = document.createElement('button');
+            closeBtn.className = 'ml-auto -mx-1.5 -my-1.5 rounded-lg p-1.5 inline-flex h-8 w-8 items-center justify-center hover:bg-opacity-25 hover:bg-gray-500';
+            closeBtn.innerHTML = '<i data-lucide="x" class="w-4 h-4"></i>';
+            
+            toast.appendChild(icon);
+            toast.appendChild(content);
+            toast.appendChild(closeBtn);
+            
+            toastContainer.appendChild(toast);
+            lucide.createIcons();
+            
+            closeBtn.addEventListener('click', () => {
+                toast.classList.replace('animate-toast-in', 'animate-toast-out');
+                setTimeout(() => {
+                    toast.remove();
+                }, 300);
+            });
+            
+            setTimeout(() => {
+                toast.classList.replace('animate-toast-in', 'animate-toast-out');
+                setTimeout(() => {
+                    toast.remove();
+                }, 300);
+            }, 5000);
+        }
+
+        // Add animation for toast
+        const style = document.createElement('style');
+        style.textContent = `
+            @keyframes toastIn {
+                from { transform: translateX(100%); opacity: 0; }
+                to { transform: translateX(0); opacity: 1; }
+            }
+            @keyframes toastOut {
+                from { transform: translateX(0); opacity: 1; }
+                to { transform: translateX(100%); opacity: 0; }
+            }
+            .animate-toast-in {
+                animation: toastIn 0.3s ease forwards;
+            }
+            .animate-toast-out {
+                animation: toastOut 0.3s ease forwards;
+            }
+        `;
+        document.head.appendChild(style);
+    </script>
+</body>
+</html>