Update UI

app.py

@@ -34,7 +34,6 @@ example_prompts = [
     "I have $20,000 in my savings account, where I receive a 4% profit per year and payments twice a year. Can you please tell me how long it will take for me to become a millionaire?",
     "I have total $500 create a plan with travel and food",
     "I have $1000 and 5 years. Is it better to invest in a stock paying $15 quarterly dividends or in a 5% annual savings account?"
-    
 ]
             
 def get_azure_response(message, chat_history, temperature, max_tokens, top_p):
@@ -76,7 +75,7 @@ def get_azure_response(message, chat_history, temperature, max_tokens, top_p):
 # CSS for custom styling
 custom_css = """
 .container {
-    max-width: 1000px !important;
+    max-width: 1200px !important;
     margin-left: auto !important;
     margin-right: auto !important;
     padding-top: 0rem !important;
@@ -108,11 +107,9 @@ custom_css = """
     cursor: pointer !important;
     transition: transform 0.2s !important;
 }
-
 .emoji-button:hover {
     transform: scale(1.2) !important;
 }
-
 .message-input {
     margin-top: 1rem !important;
     display: flex !important;
@@ -128,13 +125,16 @@ custom_css = """
     background-color: #f8f9fa !important;
     padding: 1rem !important;
     border-radius: 8px !important;
-    margin-top: 1rem !important;
+    margin-bottom: 1rem !important;
 }
 .examples-section {
     background-color: #e8f4f8 !important;
     padding: 1rem !important;
     border-radius: 8px !important;
-    margin-top: 1rem !important;
+    margin-bottom: 1rem !important;
+}
+.right-panel {
+    padding-left: 1rem !important;
 }
 """
 
@@ -145,44 +145,47 @@ with gr.Blocks(css=custom_css, title="Phi-4-mini Playground") as demo:
         with gr.Column(elem_classes="header"):
             gr.Markdown("# Phi-4-mini Playground")
         
-        # Main chat interface
-        with gr.Column(elem_classes="chatbot-container"):
-            chatbot = gr.Chatbot(
-                height=500,
-                bubble_full_width=False,
-                show_label=False,
-                avatar_images=(None, "https://upload.wikimedia.org/wikipedia/commons/d/d3/Phi-integrated-information-symbol.png")
-            )
+        # Main content with side-by-side layout
+        with gr.Row():
+            # Left column for chat
+            with gr.Column(scale=7):
+                # Main chat interface
+                with gr.Column(elem_classes="chatbot-container"):
+                    chatbot = gr.Chatbot(
+                        height=600,  # Increased height to match right panel
+                        bubble_full_width=False,
+                        show_label=False,
+                        avatar_images=(None, "https://upload.wikimedia.org/wikipedia/commons/d/d3/Phi-integrated-information-symbol.png")
+                    )
+                    
+                    with gr.Row(elem_classes="message-input"):
+                        msg = gr.Textbox(
+                            label="Your message",
+                            placeholder="Start type here ...",
+                            lines=2,
+                            show_label=False,
+                            container=False,
+                            scale=8
+                        )
+                        send_btn = gr.Button("📤Send", variant="primary", scale=1)
+                    with gr.Row():
+                        clear = gr.Button("🗑️ Clear", variant="secondary", scale=1)
+                        regenerate = gr.Button("🔄 Regenerate", variant="secondary", scale=1)
             
-            with gr.Row(elem_classes="message-input"):
-                msg = gr.Textbox(
-                    label="Your message",
-                    placeholder="Ask about financial planning, investments, or budgeting...",
-                    lines=2,
-                    show_label=False,
-                    container=False,
-                    scale=8
-                )
-                send_btn = gr.Button("📤Send", size="sm", variant="primary", scale=1)
-                clear = gr.Button("🗑️ Clear", size="sm", variant="secondary", scale=1)
-                regenerate = gr.Button("🔄 Regenerate", size="sm", variant="secondary", scale=1)
-        
-        # Examples section
-        with gr.Accordion("Try these examples", open=True, elem_classes="examples-section"):
-            examples = gr.Examples(
-                examples=example_prompts,
-                inputs=msg,
-                # label="Financial Questions"
-            )
-        
-        # Model parameters section
-        with gr.Accordion("Advanced Settings", open=False, elem_classes="parameters-section"):
-            with gr.Row():
-                with gr.Column(scale=1):
-                    gr.Markdown("### Response Parameters")
+            # Right column for examples and settings
+            with gr.Column(scale=3, elem_classes="right-panel"):
+                # Examples section
+                with gr.Column(elem_classes="examples-section"):
+                    examples = gr.Examples(
+                        examples=example_prompts,
+                        inputs=msg,
+                        examples_per_page=4
+                    )
                 
-            with gr.Row():
-                with gr.Column(scale=1):
+                # Model parameters section
+                with gr.Column(elem_classes="parameters-section"):
+                    gr.Markdown("### Advanced Settings")
+                    
                     temp_slider = gr.Slider(
                         minimum=0.0,
                         maximum=1.0,
@@ -191,7 +194,6 @@ with gr.Blocks(css=custom_css, title="Phi-4-mini Playground") as demo:
                         label="Temperature",
                         info="Higher = more creative, lower = more focused"
                     )
-                with gr.Column(scale=1):
                     top_p_slider = gr.Slider(
                         minimum=0.1,
                         maximum=1.0,
@@ -200,7 +202,6 @@ with gr.Blocks(css=custom_css, title="Phi-4-mini Playground") as demo:
                         label="Top P",
                         info="Controls diversity of responses"
                     )
-                with gr.Column(scale=1):
                     max_tokens_slider = gr.Slider(
                         minimum=100,
                         maximum=32000,
@@ -212,7 +213,7 @@ with gr.Blocks(css=custom_css, title="Phi-4-mini Playground") as demo:
         
         # Footer
         with gr.Column(elem_classes="footer"):
-            gr.Markdown("Powered by Microsoft Phi-4 mini model on Azure AI. © 2025")
+            gr.Markdown("Powered by Microsoft [Phi-4 mini model](https://aka.ms/phi-4-mini/azure) on Azure AI. © 2025")
     
     # Simplified chat function that handles both sending and receiving messages
     def chat(message, history, temperature, max_tokens, top_p):
@@ -295,5 +296,4 @@ with gr.Blocks(css=custom_css, title="Phi-4-mini Playground") as demo:
     regenerate.click(regenerate_response, [chatbot, temp_slider, max_tokens_slider, top_p_slider], [chatbot])
 
 # Launch the app
-
-demo.launch(share=True)  # Set share=True to generate a public URL for testing
+demo.launch()  # Set share=True to generate a public URL for testing# Launch the app