Update app.py

app.py

@@ -20,7 +20,77 @@ if not api_key:
 # Initialize OpenAI client with older API syntax
 openai.api_key = api_key
 
-# Custom audio recorder component
+# Custom CSS for better styling
+custom_css = """
+.gradio-container {
+    max-width: 1200px !important;
+    margin: 0 auto !important;
+}
+.container {
+    max-width: 1200px;
+    margin: 0 auto;
+    padding: 20px;
+}
+.chat-container {
+    border: 1px solid #e0e0e0;
+    border-radius: 10px;
+    padding: 20px;
+    background: white;
+    box-shadow: 0 2px 4px rgba(0,0,0,0.1);
+}
+.file-upload {
+    border: 2px dashed #e0e0e0;
+    border-radius: 10px;
+    padding: 20px;
+    text-align: center;
+    background: #f8f9fa;
+    transition: all 0.3s ease;
+}
+.file-upload:hover {
+    border-color: #4CAF50;
+    background: #f0f7f0;
+}
+.audio-recorder {
+    background: #f8f9fa;
+    border-radius: 10px;
+    padding: 20px;
+    text-align: center;
+}
+.record-button {
+    background: #4CAF50;
+    color: white;
+    border: none;
+    padding: 12px 24px;
+    border-radius: 25px;
+    cursor: pointer;
+    transition: all 0.3s ease;
+    font-size: 16px;
+    display: flex;
+    align-items: center;
+    gap: 8px;
+    margin: 0 auto;
+}
+.record-button:hover {
+    background: #45a049;
+    transform: scale(1.05);
+}
+.record-button.recording {
+    background: #f44336;
+    animation: pulse 1.5s infinite;
+}
+.status-text {
+    color: #666;
+    font-size: 14px;
+    margin-top: 10px;
+}
+@keyframes pulse {
+    0% { transform: scale(1); }
+    50% { transform: scale(1.05); }
+    100% { transform: scale(1); }
+}
+"""
+
+# Custom audio recorder component with improved styling
 def create_audio_recorder():
     return gr.HTML("""
         <div class="audio-recorder">
@@ -28,48 +98,9 @@ def create_audio_recorder():
                 <span class="record-icon">🎤</span>
                 <span class="record-text">Start Recording</span>
             </button>
-            <div id="recordingStatus" class="recording-status"></div>
-            <audio id="audioPlayback" controls style="display: none;"></audio>
+            <div id="recordingStatus" class="status-text"></div>
+            <audio id="audioPlayback" controls style="display: none; margin-top: 10px;"></audio>
         </div>
-        <style>
-            .audio-recorder {
-                display: flex;
-                flex-direction: column;
-                align-items: center;
-                gap: 10px;
-                padding: 15px;
-                border-radius: 8px;
-                background: #f5f5f5;
-            }
-            .record-button {
-                display: flex;
-                align-items: center;
-                gap: 8px;
-                padding: 10px 20px;
-                border: none;
-                border-radius: 25px;
-                background: #4CAF50;
-                color: white;
-                cursor: pointer;
-                transition: all 0.3s ease;
-            }
-            .record-button:hover {
-                background: #45a049;
-            }
-            .record-button.recording {
-                background: #f44336;
-                animation: pulse 1.5s infinite;
-            }
-            .recording-status {
-                color: #666;
-                font-size: 14px;
-            }
-            @keyframes pulse {
-                0% { transform: scale(1); }
-                50% { transform: scale(1.05); }
-                100% { transform: scale(1); }
-            }
-        </style>
         <script>
             let mediaRecorder;
             let audioChunks = [];
@@ -95,12 +126,10 @@ def create_audio_recorder():
                             audioPlayback.src = audioUrl;
                             audioPlayback.style.display = 'block';
                             
-                            // Convert blob to base64
                             const reader = new FileReader();
                             reader.readAsDataURL(audioBlob);
                             reader.onloadend = () => {
                                 const base64Audio = reader.result;
-                                // Send to Gradio
                                 window.parent.postMessage({
                                     type: 'audio_data',
                                     data: base64Audio
@@ -335,12 +364,12 @@ with gr.Blocks(title="Document Q&A System") as demo:
             audio_input = gr.Audio(label="Voice Input", type="filepath", visible=False)
             audio_input.change(process_audio, [audio_input, chatbot], [audio_input, chatbot])
 
-    # Handle audio data from custom recorder using JavaScript
+    # Add JavaScript for audio handling
     demo.load(
         fn=None,
         inputs=None,
         outputs=None,
-        _js="""
+        js="""
         function() {
             window.addEventListener('message', function(event) {
                 if (event.data.type === 'audio_data') {