Update app.py

app.py

@@ -25,6 +25,7 @@ custom_css = """
 .gradio-container {
     max-width: 1200px !important;
     margin: 0 auto !important;
+    font-family: 'Inter', sans-serif;
 }
 .container {
     max-width: 1200px;
@@ -33,60 +34,100 @@ custom_css = """
 }
 .chat-container {
     border: 1px solid #e0e0e0;
-    border-radius: 10px;
-    padding: 20px;
+    border-radius: 16px;
+    padding: 24px;
     background: white;
-    box-shadow: 0 2px 4px rgba(0,0,0,0.1);
+    box-shadow: 0 4px 6px rgba(0,0,0,0.1);
+    margin-bottom: 20px;
 }
 .file-upload {
     border: 2px dashed #e0e0e0;
-    border-radius: 10px;
-    padding: 20px;
+    border-radius: 16px;
+    padding: 24px;
     text-align: center;
     background: #f8f9fa;
     transition: all 0.3s ease;
+    margin-bottom: 20px;
 }
 .file-upload:hover {
     border-color: #4CAF50;
     background: #f0f7f0;
+    transform: translateY(-2px);
 }
 .audio-recorder {
     background: #f8f9fa;
-    border-radius: 10px;
-    padding: 20px;
+    border-radius: 16px;
+    padding: 24px;
     text-align: center;
+    box-shadow: 0 2px 4px rgba(0,0,0,0.05);
 }
 .record-button {
-    background: #4CAF50;
+    background: linear-gradient(135deg, #4CAF50 0%, #45a049 100%);
     color: white;
     border: none;
-    padding: 12px 24px;
-    border-radius: 25px;
+    padding: 14px 28px;
+    border-radius: 30px;
     cursor: pointer;
     transition: all 0.3s ease;
     font-size: 16px;
+    font-weight: 600;
     display: flex;
     align-items: center;
-    gap: 8px;
+    gap: 10px;
     margin: 0 auto;
+    box-shadow: 0 4px 6px rgba(76, 175, 80, 0.2);
 }
 .record-button:hover {
-    background: #45a049;
-    transform: scale(1.05);
+    background: linear-gradient(135deg, #45a049 0%, #3d8b40 100%);
+    transform: translateY(-2px);
+    box-shadow: 0 6px 8px rgba(76, 175, 80, 0.3);
 }
 .record-button.recording {
-    background: #f44336;
+    background: linear-gradient(135deg, #f44336 0%, #e53935 100%);
     animation: pulse 1.5s infinite;
 }
 .status-text {
     color: #666;
     font-size: 14px;
-    margin-top: 10px;
+    margin-top: 12px;
+    font-weight: 500;
+}
+.send-button {
+    background: linear-gradient(135deg, #2196F3 0%, #1976D2 100%);
+    color: white;
+    border: none;
+    padding: 12px 24px;
+    border-radius: 25px;
+    cursor: pointer;
+    transition: all 0.3s ease;
+    font-weight: 600;
+    box-shadow: 0 4px 6px rgba(33, 150, 243, 0.2);
+}
+.send-button:hover {
+    background: linear-gradient(135deg, #1976D2 0%, #1565C0 100%);
+    transform: translateY(-2px);
+    box-shadow: 0 6px 8px rgba(33, 150, 243, 0.3);
+}
+.textbox {
+    border-radius: 12px !important;
+    border: 2px solid #e0e0e0 !important;
+    padding: 12px !important;
+    font-size: 16px !important;
+    transition: all 0.3s ease !important;
+}
+.textbox:focus {
+    border-color: #2196F3 !important;
+    box-shadow: 0 0 0 2px rgba(33, 150, 243, 0.2) !important;
+}
+.chatbot {
+    border-radius: 12px !important;
+    border: 2px solid #e0e0e0 !important;
+    padding: 16px !important;
 }
 @keyframes pulse {
-    0% { transform: scale(1); }
-    50% { transform: scale(1.05); }
-    100% { transform: scale(1); }
+    0% { transform: scale(1); box-shadow: 0 4px 6px rgba(244, 67, 54, 0.2); }
+    50% { transform: scale(1.05); box-shadow: 0 6px 8px rgba(244, 67, 54, 0.3); }
+    100% { transform: scale(1); box-shadow: 0 4px 6px rgba(244, 67, 54, 0.2); }
 }
 """
 
@@ -165,7 +206,7 @@ class AdvancedRAG:
         self.assistant_id: Optional[str] = os.getenv("ASSISTANT_ID")
 
     def create_thread(self) -> str:
-        thread = openai.Thread.create(
+        thread = openai.beta.threads.create(
             tool_resources={
                 "file_search": {
                     "vector_store_ids": [self.vector_store_id]
@@ -177,7 +218,7 @@ class AdvancedRAG:
 
     def create_vector_store(self, name: str = "My Vector Store") -> str:
         try:
-            vector_store = openai.VectorStore.create(name=name)
+            vector_store = openai.beta.vector_stores.create(name=name)
             self.vector_store_id = vector_store.id
             return self.vector_store_id
         except Exception as e:
@@ -186,11 +227,11 @@ class AdvancedRAG:
     def upload_document(self, file) -> str:
         if self.vector_store_id:
             try:
-                openai.VectorStore.delete(self.vector_store_id)
+                openai.beta.vector_stores.delete(self.vector_store_id)
             except Exception as e:
                 print(f"Could not delete previous vector store {self.vector_store_id}: {e}")
         
-        vector_store = openai.VectorStore.create(name="knowledge_base")
+        vector_store = openai.beta.vector_stores.create(name="knowledge_base")
         self.vector_store_id = vector_store.id
         self.file_ids = []
 
@@ -198,17 +239,17 @@ class AdvancedRAG:
             tmp.write(file.read())
             tmp.flush()
             with open(tmp.name, "rb") as file_obj:
-                file_obj = openai.File.create(
+                file_obj = openai.files.create(
                     file=file_obj,
                     purpose="assistants"
                 )
                 self.file_ids.append(file_obj.id)
-                openai.VectorStore.files.create(
+                openai.beta.vector_stores.files.create(
                     vector_store_id=self.vector_store_id,
                     file_id=file_obj.id
                 )
 
-        thread = openai.Thread.create(
+        thread = openai.beta.threads.create(
             tool_resources={
                 "file_search": {
                     "vector_store_ids": [self.vector_store_id]
@@ -220,20 +261,20 @@ class AdvancedRAG:
 
     def ask_question(self, question: str) -> str:
         try:
-            openai.Thread.messages.create(
+            openai.beta.threads.messages.create(
                 thread_id=self.thread_id,
                 role="user",
                 content=question
             )
             
-            run = openai.Thread.runs.create(
+            run = openai.beta.threads.runs.create(
                 thread_id=self.thread_id,
                 assistant_id=self.assistant_id
             )
             
             waited = 0
             while True:
-                run_status = openai.Thread.runs.retrieve(
+                run_status = openai.beta.threads.runs.retrieve(
                     thread_id=self.thread_id,
                     run_id=run.id
                 )
@@ -246,7 +287,7 @@ class AdvancedRAG:
                 if waited > 60:
                     raise Exception("Run timed out after 60 seconds.")
 
-            messages = openai.Thread.messages.list(
+            messages = openai.beta.threads.messages.list(
                 thread_id=self.thread_id,
                 order='desc',
                 limit=1
@@ -264,7 +305,7 @@ class AdvancedRAG:
                 tmp.flush()
                 tmp_path = tmp.name
             with open(tmp_path, "rb") as audio:
-                transcript = openai.Audio.transcriptions.create(
+                transcript = openai.audio.transcriptions.create(
                     model="whisper-1",
                     file=audio,
                     language="en"
@@ -324,7 +365,7 @@ def process_audio_base64(audio_base64, history):
 
         # Transcribe audio
         with open(tmp_path, "rb") as audio_file:
-            transcript = openai.Audio.transcriptions.create(
+            transcript = openai.audio.transcriptions.create(
                 model="whisper-1",
                 file=audio_file,
                 language="en"
@@ -341,25 +382,55 @@ def process_audio_base64(audio_base64, history):
     except Exception as e:
         return "", history + [("Audio input", f"Error: {str(e)}")]
 
-# Create Gradio interface
-with gr.Blocks(title="Document Q&A System") as demo:
-    gr.Markdown("# Document Q&A System")
-    gr.Markdown("Upload a document and ask questions about it. You can also use voice input!")
+# Create Gradio interface with improved layout
+with gr.Blocks(title="Document Q&A System", css=custom_css) as demo:
+    gr.Markdown("""
+    # 📚 Document Q&A System
+    Upload a document and ask questions about it. You can also use voice input!
+    """)
 
     with gr.Row():
-        with gr.Column():
-            file_input = gr.File(label="Upload Document")
-            file_output = gr.Textbox(label="Upload Status")
-            file_input.change(process_file, file_input, file_output)
+        with gr.Column(scale=1):
+            with gr.Box(elem_classes="file-upload"):
+                file_input = gr.File(
+                    label="Upload Document",
+                    file_types=[".pdf", ".txt", ".doc", ".docx"],
+                    file_count="single"
+                )
+                file_output = gr.Textbox(
+                    label="Upload Status",
+                    interactive=False,
+                    elem_classes="textbox"
+                )
+                file_input.change(process_file, file_input, file_output)
 
     with gr.Row():
-        with gr.Column():
-            chatbot = gr.Chatbot(height=400, type="messages")
-            question = gr.Textbox(label="Ask a question")
-            question.submit(process_question, [question, chatbot], [question, chatbot])
+        with gr.Column(scale=2):
+            with gr.Box(elem_classes="chat-container"):
+                chatbot = gr.Chatbot(
+                    height=500,
+                    type="messages",
+                    show_label=False,
+                    elem_classes="chatbot"
+                )
+                with gr.Row():
+                    question = gr.Textbox(
+                        label="Ask a question",
+                        placeholder="Type your question here...",
+                        show_label=False,
+                        container=False,
+                        elem_classes="textbox"
+                    )
+                    submit_btn = gr.Button(
+                        "Send",
+                        variant="primary",
+                        elem_classes="send-button"
+                    )
+                question.submit(process_question, [question, chatbot], [question, chatbot])
+                submit_btn.click(process_question, [question, chatbot], [question, chatbot])
 
     with gr.Row():
-        with gr.Column():
+        with gr.Column(scale=1):
             audio_recorder = create_audio_recorder()
             audio_input = gr.Audio(label="Voice Input", type="filepath", visible=False)
             audio_input.change(process_audio, [audio_input, chatbot], [audio_input, chatbot])
@@ -374,7 +445,6 @@ with gr.Blocks(title="Document Q&A System") as demo:
             window.addEventListener('message', function(event) {
                 if (event.data.type === 'audio_data') {
                     const audioData = event.data.data;
-                    // Convert base64 to blob and create file
                     const byteString = atob(audioData.split(',')[1]);
                     const mimeString = audioData.split(',')[0].split(':')[1].split(';')[0];
                     const ab = new ArrayBuffer(byteString.length);
@@ -385,7 +455,6 @@ with gr.Blocks(title="Document Q&A System") as demo:
                     const blob = new Blob([ab], {type: mimeString});
                     const file = new File([blob], "recording.wav", {type: mimeString});
                     
-                    // Update audio input
                     const audioInput = document.querySelector('input[type="file"]');
                     const dataTransfer = new DataTransfer();
                     dataTransfer.items.add(file);