Update app.py

app.py

@@ -1,7 +1,9 @@
 import gradio as gr
 import openai
+import langdetect as detect
 import os
 
+
 # Set up OpenAI API with custom Groq endpoint
 openai.api_key = os.getenv("PrepBuddy_API_KEY")
 openai.api_base = "https://api.groq.com/openai/v1"
@@ -9,6 +11,7 @@ openai.api_base = "https://api.groq.com/openai/v1"
 # Function to get the Groq model's response
 def get_groq_response(message, mode):
     try:
+        # Use a system prompt tailored to the selected mode
         motivational_message = (
             "Keep pushing forward! You've got this. Programming might seem tough at first, but every step you take "
             "is one step closer to mastering it. Let's score 70 on 70 in programming together!"
@@ -66,7 +69,7 @@ def chatbot(user_input, output_format, history=[]):
     except Exception as e:
         return [(user_input, f"Error: {str(e)}")], history
 
-# Gradio Interface setup with custom HTML, CSS, and JS for UI
+# Gradio Interface setup
 chat_interface = gr.Interface(
     fn=chatbot,  # Function to call for chatbot interaction
     inputs=[
@@ -78,10 +81,7 @@ chat_interface = gr.Interface(
         ),
         "state"  # Chat history
     ],
-    outputs=[
-        gr.HTML("<div id='chat-box'></div>"),  # Placeholder for chat output
-        "state"  # Updated history
-    ],
+    outputs=["chatbot", "state"],  # Outputs: the chat and updated history (state)
     live=False,  # Disable live chat, responses shown after submit
     title="GS C PrepBuddy",  # Title of the app
     description=(
@@ -90,54 +90,10 @@ chat_interface = gr.Interface(
         "Choose your output format—Code, Flowchart, Algorithm, or Exam Preparation.\n\n"
         "Ask your query, and I'll guide you every step of the way!\n\n"
         "Made by Satyam Singhal" 
-    ),
-    # Adding custom CSS and JS for better UI interaction
-    css="""
-        #chat-box {
-            background-color: rgba(223, 242, 247, .5);
-            padding: 20px;
-            border-radius: 10px;
-            height: 400px;
-            overflow-y: scroll;
-            font-family: Arial, sans-serif;
-            font-size: 14px;
-            width: 100%;
-        }
-
-        .user-message {
-            background-color: #4CAF50;
-            color: white;
-            padding: 10px;
-            border-radius: 5px;
-            margin-bottom: 10px;
-        }
-
-        .bot-response {
-            background-color: #2196F3;
-            color: white;
-            padding: 10px;
-            border-radius: 5px;
-            margin-bottom: 10px;
-        }
-
-        #input-text {
-            margin-top: 20px;
-        }
-    """,
-    js="""
-        function updateChatBox(userInput, botResponse) {
-            const chatBox = document.getElementById('chat-box');
-            chatBox.innerHTML += '<div class="user-message">' + userInput + '</div>';
-            chatBox.innerHTML += '<div class="bot-response">' + botResponse + '</div>';
-            chatBox.scrollTop = chatBox.scrollHeight;  // Auto-scroll to the bottom
-        }
-
-        function handleChat(userInput, outputFormat) {
-            gradioApp().querySelector('.gr-button').click();  // Simulate submit button click
-        }
-    """
+    )
 )
 
 # Launch the Gradio interface
 if __name__ == "__main__":
-    chat_interface.launch()
+    chat_interface.launch()
+