Update app.py

app.py

@@ -194,7 +194,7 @@ def process_example(example: str) -> tuple:
 
 def main():
     """Main function to set up and launch the Gradio interface"""
-    with gr.Blocks(css=CSS, theme="JohnSmith9982/small_and_pretty") as demo:
+    with gr.Blocks(css=CSS) as demo:  # Removed invalid theme
         gr.HTML(TITLE)
         gr.DuplicateButton(
             value="",
@@ -211,29 +211,76 @@ def main():
                     elem_classes=["chat-area"],
                 )
                 
-                # Wrap message input and submit button in a form
-                with gr.Form(elem_id="chat-form"):
-                    message = gr.TextArea(
-                        placeholder=PLACEHOLDER,
-                        label="Your message",
-                        lines=3,
-                        elem_classes=["message-input"],
-                        autofocus=True
+                # Removed Form wrapper and simplified structure
+                message = gr.TextArea(
+                    placeholder=PLACEHOLDER,
+                    label="Your message",
+                    lines=3,
+                    elem_classes=["message-input"],
+                    elem_id="message-input"  # Added elem_id for JavaScript
+                )
+                
+                with gr.Row():
+                    submit = gr.Button("Send", elem_id="submit-btn")
+                    clear = gr.Button("Clear")
+
+                with gr.Accordion("⚙️ Advanced Settings", open=False):
+                    system_prompt = gr.TextArea(
+                        value=DEFAULT_SYSTEM_PROMPT,
+                        label="System Prompt",
+                        lines=7,
+                    )
+                    temperature = gr.Slider(
+                        minimum=0,
+                        maximum=1,
+                        step=0.1,
+                        value=0,
+                        label="Temperature",
+                    )
+                    max_tokens = gr.Slider(
+                        minimum=128,
+                        maximum=32000,
+                        step=128,
+                        value=8192,
+                        label="Max Tokens",
+                    )
+                    top_p = gr.Slider(
+                        minimum=0.1,
+                        maximum=1.0,
+                        step=0.1,
+                        value=0.8,
+                        label="Top-p",
+                    )
+                    top_k = gr.Slider(
+                        minimum=1,
+                        maximum=100,
+                        step=1,
+                        value=40,
+                        label="Top-k",
+                    )
+                    penalty = gr.Slider(
+                        minimum=1.0,
+                        maximum=2.0,
+                        step=0.1,
+                        value=1.2,
+                        label="Repetition Penalty",
                     )
-                    
-                    with gr.Row():
-                        submit = gr.Button("Send", elem_id="submit-btn")
-                        clear = gr.Button("Clear")
 
-                # [Rest of the UI components remain the same]
+                examples = gr.Examples(
+                    examples=create_examples(),
+                    inputs=[message],
+                    outputs=[chat_history, chat_display],
+                    fn=process_example,
+                    cache_examples=False,
+                )
 
-        # Updated JavaScript handler for Enter key and RTL support
+        # Updated JavaScript handler
         js_handler = """
         function setupKeyboardHandler() {
-            const textArea = document.querySelector('.message-input textarea');
-            const form = document.getElementById('chat-form');
+            const textArea = document.getElementById('message-input').querySelector('textarea');
+            const submitBtn = document.getElementById('submit-btn');
             
-            if (textArea && form) {
+            if (textArea && submitBtn) {
                 textArea.addEventListener('keydown', function(e) {
                     // Check for Arabic characters
                     const containsArabic = /[\u0600-\u06FF]/.test(this.value);
@@ -248,19 +295,19 @@ def main():
                     // Submit on Enter without Shift
                     if (e.key === 'Enter' && !e.shiftKey) {
                         e.preventDefault();
-                        const submitBtn = document.getElementById('submit-btn');
-                        if (submitBtn) {
-                            submitBtn.click();
-                        }
+                        submitBtn.click();
                     }
                 });
+
+                // Focus the textarea on load
+                textArea.focus();
             }
         }
 
         // Run setup when the page loads
         document.addEventListener('DOMContentLoaded', setupKeyboardHandler);
-        // Also run setup after Gradio refreshes the UI
-        document.addEventListener('gradio-loaded', setupKeyboardHandler);
+        // Also run setup after any Gradio refreshes
+        document.addEventListener('change', setupKeyboardHandler);
         """
 
         # Set up event handlers