Update app.py

app.py

@@ -3,7 +3,7 @@ import os
 from gtts import gTTS
 import gradio as gr
 from groq import Groq
-from datetime import datetime  # Import datetime to handle timestamps
+from datetime import datetime
 
 # Load a smaller Whisper model for faster processing
 try:
@@ -88,20 +88,65 @@ def chatbot(audio):
         print(f"Error in chatbot function: {e}")
         return "Sorry, there was an error processing your request.", None, chat_history
 
+# CSS for custom background and styling
+custom_css = """
+<style>
+    body {
+        background-color: #f4f4f4;
+        font-family: Arial, sans-serif;
+    }
+    .container {
+        background: linear-gradient(135deg, #84fab0 0%, #8fd3f4 100%);
+        border-radius: 12px;
+        padding: 20px;
+        box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
+        max-width: 700px;
+        margin: auto;
+    }
+    .chat-history {
+        background-color: #ffffff;
+        border-radius: 10px;
+        padding: 15px;
+        height: 300px;
+        overflow-y: auto;
+        box-shadow: inset 0 0 5px rgba(0, 0, 0, 0.1);
+    }
+    .user-message {
+        color: #0084ff;
+        font-weight: bold;
+        margin-bottom: 5px;
+    }
+    .bot-message {
+        color: #5a5a5a;
+        margin-bottom: 10px;
+    }
+    .audio-output {
+        margin-top: 15px;
+        background-color: #d8f3dc;
+        border-radius: 8px;
+        padding: 10px;
+        text-align: center;
+    }
+</style>
+"""
+
 # Gradio interface for real-time interaction with chat history display
 iface = gr.Interface(
     fn=chatbot,
     inputs=gr.Audio(type="filepath"),
     outputs=[
-        gr.Textbox(label="Chat History"),  # Display chat history
+        gr.HTML("<div class='chat-history'></div>"),  # Display chat history in a styled div
         gr.Audio(type="filepath", label="Response Audio"),
     ],
     live=True,
-    title="Audio Chatbot with Groq API",
+    title="Stylish Audio Chatbot with Groq API",
     description="Upload your audio, and the chatbot will transcribe and respond to it with a synthesized response.",
     theme="default"
 )
 
+# Inject the custom CSS into the interface
+iface.css = custom_css
+
 # Launch the Gradio app
 if __name__ == "__main__":
     iface.launch()
@@ -114,17 +159,20 @@ if __name__ == "__main__":
 
 
 
-# # Import libraries
+
+
+
+
 # import whisper
 # import os
 # from gtts import gTTS
 # import gradio as gr
 # from groq import Groq
+# from datetime import datetime  # Import datetime to handle timestamps
 
 # # Load a smaller Whisper model for faster processing
 # try:
-#     # model = whisper.load_model("tiny")  # Use "tiny" for faster processing
-#     model = whisper.load_model("tiny") #, weights_only=True)  # Use "tiny" for faster processing
+#     model = whisper.load_model("tiny")
 # except Exception as e:
 #     print(f"Error loading Whisper model: {e}")
 #     model = None
@@ -147,16 +195,6 @@ if __name__ == "__main__":
 #     try:
 #         chat_completion = client.chat.completions.create(
 #             messages=[{"role": "user", "content": user_input}],
-#             # messages=[
-#                 # {
-#                 #     "role": "system",
-#                 #     "content": "You are a highly experienced Spoken English expert. Your task is to provide detailed feedback on the following transcription from an English learner. Focus on pronunciation, grammar, fluency, vocabulary usage, sentence structure, coherence, cohesion, and intonation. Provide feedback in these sections: Summary of Feedback, Detailed Mistake Identification, Suggestions for Improvement, and Encouragement."
-#                 # },
-#                 # {
-#                 #     "role": "user",
-#                 #     "content": f"Please provide feedback on the following spoken English: {user_input}"
-#                 # }
-#             # ],
 #             model="llama3-8b-8192",  # Replace with your desired model
 #             timeout=20  # Increased timeout to 20 seconds
 #         )
@@ -191,139 +229,23 @@ if __name__ == "__main__":
 #         if not user_text.strip():
 #             return "Could not understand the audio. Please try speaking more clearly.", None, chat_history
 
+#         # Get current timestamp
+#         timestamp = datetime.now().strftime("%Y-%m-%d %H:%M:%S")
+
 #         # Display transcription in chat history
-#         chat_history.append(("User", user_text))
+#         chat_history.append((timestamp, "User", user_text))
 
 #         # Step 2: Get LLM response from Groq
 #         response_text = get_llm_response(user_text)
 
 #         # Step 3: Convert the response text to speech
 #         output_audio = text_to_speech(response_text)
-        
-#         # Append the latest interaction to the chat history
-#         chat_history.append(("Chatbot", response_text))
-
-#         # Format the chat history for display
-#         formatted_history = "\n".join([f"{speaker}: {text}" for speaker, text in chat_history])
-        
-#         return formatted_history, output_audio, chat_history
-
-#     except Exception as e:
-#         print(f"Error in chatbot function: {e}")
-#         return "Sorry, there was an error processing your request.", None, chat_history
-
-# # Gradio interface for real-time interaction with chat history display
-# iface = gr.Interface(
-#     fn=chatbot,
-#     inputs=gr.Audio(type="filepath"),
-#     outputs=[
-#         gr.Textbox(label="Chat History"),  # Display chat history
-#         gr.Audio(type="filepath", label="Response Audio"),
-#     ],
-#     live=True,
-#     title="Audio Chatbot with Groq API",
-#     description="Upload your audio, and the chatbot will transcribe and respond to it with a synthesized response.",
-#     theme="default"
-# )
-
-# # Launch the Gradio app
-# if __name__ == "__main__":
-#     iface.launch()
-
-
-#-----------------------------------------------------------------------------------------------------------------------------------------------------------------------
-
-
-
-
-
-# # Import libraries
-# import whisper
-# import os
-# from gtts import gTTS
-# import gradio as gr
-# from groq import Groq
-
-# # Load a smaller Whisper model for faster processing
-# try:
-#     model = whisper.load_model("base")  # Use "base" for faster processing
-# except Exception as e:
-#     print(f"Error loading Whisper model: {e}")
-#     model = None
-
-# # Set up Groq API client using environment variable
-# GROQ_API_TOKEN = os.getenv("GROQ_API")
-# if not GROQ_API_TOKEN:
-#     raise ValueError("Groq API token is missing. Set 'GROQ_API' in your environment variables.")
-# client = Groq(api_key=GROQ_API_TOKEN)
-
-# # Initialize the chat history
-# chat_history = []
-
-# # Function to get the LLM response from Groq with timeout handling
-# def get_llm_response(user_input, role="detailed responder"):
-#     prompt = f"As an expert, provide a detailed and knowledgeable response: {user_input}" if role == "expert" else \
-#              f"As a good assistant, provide a clear, concise, and helpful response: {user_input}" if role == "good assistant" else \
-#              f"Provide a thorough and detailed response: {user_input}"
-
-#     try:
-#         chat_completion = client.chat.completions.create(
-#             messages=[
-#             {
-#                 "role": "system",
-#                 "content": "You are a highly experienced Spoken English expert. Your task is to provide detailed feedback on the following transcription from an English learner. Focus on pronunciation, grammar, fluency, vocabulary usage, sentence structure, coherence, cohesion, and intonation. Provide feedback in these sections: Summary of Feedback, Detailed Mistake Identification, Suggestions for Improvement, and Encouragement."
-#             },
-#             {
-#                 "role": "user",
-#                 "content": f"Please provide feedback on the following spoken English: {transcription}"
-#             }
-#         ],
-#             model="llama3-8b-8192",  # Replace with your desired model
-#             timeout=10  # Set a 10-second timeout
-#         )
-#         return chat_completion.choices[0].message.content
-#     except Exception as e:
-#         print(f"Error during LLM response retrieval: {e}")
-#         return "Sorry, there was an error retrieving the response. Please try again."
-
-# # Function to convert text to speech using gTTS
-# def text_to_speech(text):
-#     try:
-#         tts = gTTS(text)
-#         output_audio = "output_audio.mp3"
-#         tts.save(output_audio)
-#         return output_audio
-#     except Exception as e:
-#         print(f"Error generating TTS: {e}")
-#         return None
-
-# # Main chatbot function to handle audio input and output with chat history
-# def chatbot(audio):
-#     if not model:
-#         return "Error: Whisper model is not available.", None, chat_history
-
-#     if not audio:
-#         return "No audio provided. Please upload a valid audio file.", None, chat_history
-
-#     try:
-#         # Step 1: Transcribe the audio using Whisper
-#         result = model.transcribe(audio)
-#         user_text = result.get("text", "")
-#         if not user_text.strip():
-#             return "Could not understand the audio. Please try speaking more clearly.", None, chat_history
 
-#         # Step 2: Get LLM response from Groq
-#         response_text = get_llm_response(user_text)
-
-#         # Step 3: Convert the response text to speech
-#         output_audio = text_to_speech(response_text)
-        
 #         # Append the latest interaction to the chat history
-#         chat_history.append(("User", user_text))
-#         chat_history.append(("Chatbot", response_text))
+#         chat_history.append((timestamp, "Chatbot", response_text))
 
-#         # Format the chat history for display
-#         formatted_history = "\n".join([f"{speaker}: {text}" for speaker, text in chat_history])
+#         # Format the chat history for display with timestamps and clear labels
+#         formatted_history = "\n".join([f"[{time}] {speaker}: {text}" for time, speaker, text in chat_history])
         
 #         return formatted_history, output_audio, chat_history
 
@@ -334,7 +256,7 @@ if __name__ == "__main__":
 # # Gradio interface for real-time interaction with chat history display
 # iface = gr.Interface(
 #     fn=chatbot,
-#     inputs=gr.Audio(type="filepath"),  # Removed 'optional' argument
+#     inputs=gr.Audio(type="filepath"),
 #     outputs=[
 #         gr.Textbox(label="Chat History"),  # Display chat history
 #         gr.Audio(type="filepath", label="Response Audio"),
@@ -349,100 +271,3 @@ if __name__ == "__main__":
 # if __name__ == "__main__":
 #     iface.launch()
 
-
-
-
-#-----------------------------------------------------------------------------------------------------------------------------------------------------------------------
-
-
-
-
-# # Import libraries
-# import whisper
-# import os
-# from gtts import gTTS
-# import gradio as gr
-# from groq import Groq
-
-# # Load a smaller Whisper model for faster processing
-# try:
-#     model = whisper.load_model("base")  # Use "base" for faster processing
-# except Exception as e:
-#     print(f"Error loading Whisper model: {e}")
-#     model = None
-
-# # Set up Groq API client using environment variable
-# GROQ_API_TOKEN = os.getenv("GROQ_API")
-# if not GROQ_API_TOKEN:
-#     raise ValueError("Groq API token is missing. Set 'GROQ_API' in your environment variables.")
-# client = Groq(api_key=GROQ_API_TOKEN)
-
-# # Function to get the LLM response from Groq with timeout handling
-# def get_llm_response(user_input, role="detailed responder"):
-#     prompt = f"As an expert, provide a detailed and knowledgeable response: {user_input}" if role == "expert" else \
-#              f"As a good assistant, provide a clear, concise, and helpful response: {user_input}" if role == "good assistant" else \
-#              f"Provide a thorough and detailed response: {user_input}"
-
-#     try:
-#         chat_completion = client.chat.completions.create(
-#             messages=[{"role": "user", "content": prompt}],
-#             model="llama3-8b-8192",  # Replace with your desired model
-#             timeout=10  # Set a 10-second timeout
-#         )
-#         return chat_completion.choices[0].message.content
-#     except Exception as e:
-#         print(f"Error during LLM response retrieval: {e}")
-#         return "Sorry, there was an error retrieving the response. Please try again."
-
-# # Function to convert text to speech using gTTS
-# def text_to_speech(text):
-#     try:
-#         tts = gTTS(text)
-#         output_audio = "output_audio.mp3"
-#         tts.save(output_audio)
-#         return output_audio
-#     except Exception as e:
-#         print(f"Error generating TTS: {e}")
-#         return None
-
-# # Main chatbot function to handle audio input and output
-# def chatbot(audio):
-#     if not model:
-#         return "Error: Whisper model is not available.", None
-
-#     if not audio:
-#         return "No audio provided. Please upload a valid audio file.", None
-
-#     try:
-#         # Step 1: Transcribe the audio using Whisper
-#         result = model.transcribe(audio)
-#         user_text = result.get("text", "")
-#         if not user_text.strip():
-#             return "Could not understand the audio. Please try speaking more clearly.", None
-
-#         # Step 2: Get LLM response from Groq
-#         response_text = get_llm_response(user_text)
-
-#         # Step 3: Convert the response text to speech
-#         output_audio = text_to_speech(response_text)
-        
-#         return response_text, output_audio
-
-#     except Exception as e:
-#         print(f"Error in chatbot function: {e}")
-#         return "Sorry, there was an error processing your request.", None
-
-# # Gradio interface for real-time interaction
-# iface = gr.Interface(
-#     fn=chatbot,
-#     inputs=gr.Audio(type="filepath"),  # Removed 'optional' argument
-#     outputs=[gr.Textbox(label="Chatbot Response"), gr.Audio(type="filepath", label="Response Audio")],
-#     live=True,
-#     title="Audio Chatbot with Groq API",
-#     description="Upload your audio, and the chatbot will transcribe and respond to it with a synthesized response.",
-#     theme="default"
-# )
-
-# # Launch the Gradio app
-# if __name__ == "__main__":
-#     iface.launch()