Update app.py

app.py

@@ -2,9 +2,12 @@ import gradio as gr
 import openai
 import os
 import json
+import markdown
+import re
+import time
 
 # OpenAI API setup
-openai.api_key = os.getenv("GROQ_API_KEY")
+openai.api_key = "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"
 openai.api_base = "https://api.groq.com/openai/v1"
 
 # File to store conversation history
@@ -39,18 +42,29 @@ def clear_conversation_history():
     except Exception as e:
         return f"Error clearing history: {e}", ""
 
-# Function to format bot response
-def format_bot_response(response):
+# Function to format code block
+def format_code_block(code):
+    """Wraps the provided code in <pre> and <code> tags for proper display."""
+    return f"<pre><code>{code}</code></pre>"
+
+def format_code_and_markdown(response):
     """
-    Converts markdown-like symbols to HTML and structures response.
+    Handles both code blocks and markdown formatting simultaneously.
+    - Converts code blocks into HTML <pre><code> tags.
+    - Converts markdown syntax (e.g., bold, italics) into HTML tags.
     """
-    response = response.replace("**", "<b>").replace("**", "</b>")  # Bold formatting
-    response = response.replace("1.", "<br>&nbsp;&nbsp;1.")
-    response = response.replace("2.", "<br>&nbsp;&nbsp;2.")
-    response = response.replace("3.", "<br>&nbsp;&nbsp;3.")
-    response = response.replace("4.", "<br>&nbsp;&nbsp;4.")
-    response = response.replace("5.", "<br>&nbsp;&nbsp;5.")
-    return f"<div>{response}</div>"
+    # Convert code blocks to HTML <pre><code>...</code></pre> format
+    def process_code_blocks(text):
+        code_block_pattern = re.compile(r'```python\n(.*?)```', re.DOTALL)
+        return re.sub(code_block_pattern, r'<pre><code>\1</code></pre>', text)
+
+    # Process the text to handle code blocks
+    response = process_code_blocks(response)
+    
+    # Convert Markdown to HTML
+    html_response = markdown.markdown(response)
+    
+    return html_response
 
 # Function to get response from the LLM
 def get_groq_response(message, history=[]):
@@ -60,10 +74,15 @@ def get_groq_response(message, history=[]):
             model="llama-3.1-70b-versatile",
             messages=messages
         )
-        return format_bot_response(response.choices[0].message["content"])
+        return format_code_and_markdown(response.choices[0].message["content"])
     except Exception as e:
         return f"Error: {str(e)}"
 
+# Function to simulate typing effect
+def simulate_typing_effect(response, delay=1):
+    time.sleep(delay)
+    return response
+
 # Chatbot function
 def chatbot(user_input, history):
     # Load conversation history
@@ -76,6 +95,9 @@ def chatbot(user_input, history):
     # Get bot response
     bot_response = get_groq_response(user_input, formatted_history)
     
+    # Simulate typing delay
+    bot_response = simulate_typing_effect(bot_response)
+    
     # Update history with the new conversation
     conversation_history.append((user_input, bot_response))
     
@@ -91,7 +113,7 @@ def chatbot(user_input, history):
     
     return conversation_history, display_html, ""  # Clear the user input field
 
-# Gradio Interface
+# Gradio Interface with enhanced UI/UX styling
 with gr.Blocks(css="""
     .user-message { 
         background-color: #9ACBD0; 
@@ -115,6 +137,21 @@ with gr.Blocks(css="""
         transform: scale(1.02);
         box-shadow: 0px 4px 10px rgba(0, 0, 0, 0.1);
     }
+    .chat-container {
+        max-height: 500px;
+        overflow-y: auto;
+        margin-bottom: 20px;
+    }
+    .gradio-button {
+        background-color: #4CAF50;
+        color: white;
+        border-radius: 5px;
+        padding: 10px 20px;
+        font-size: 16px;
+    }
+    .gradio-button:hover {
+        background-color: #45a049;
+    }
 """) as demo:
     gr.Markdown("""# Mom: We have ChatGPT at Home, \n ChatGPT at Home: """)
     
@@ -134,3 +171,4 @@ with gr.Blocks(css="""
 
 # Launch the app
 demo.launch()
+