changed ui

app.py

@@ -332,89 +332,41 @@ export default Demo
 
 # ---------- CSS ----------
 css = """
-/* Full screen container adjustments */
-.gradio-container {
-    max-width: 100% !important;
-    padding: 0 !important;
+#coder-artifacts .output-empty,.output-loading {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  width: 100%;
+  min-height: 680px;
 }
-
-#coder-artifacts {
-    min-height: 100vh;
-    padding: 1rem;
-}
-
-/* Output container adjustments */
-#coder-artifacts .output-empty,
-#coder-artifacts .output-loading {
-    display: flex;
-    flex-direction: column;
-    align-items: center;
-    justify-content: center;
-    width: 100%;
-    min-height: 85vh;
-}
-
-#coder-artifacts #output-container {
-    height: 85vh !important;
-}
-
-#coder-artifacts #output-container .ms-gr-ant-tabs-content,
-#coder-artifacts #output-container .ms-gr-ant-tabs-tabpane {
+#coder-artifacts #output-container .ms-gr-ant-tabs-content,.ms-gr-ant-tabs-tabpane {
     height: 100%;
 }
-
 #coder-artifacts .output-html {
-    display: flex;
-    flex-direction: column;
-    width: 100%;
-    height: 100%;
-    min-height: 85vh;
+  display: flex;
+  flex-direction: column;
+  width: 100%;
+  min-height: 680px;
+  max-height: 1200px;
 }
-
 #coder-artifacts .output-html > iframe {
-    flex: 1;
-    min-height: 85vh;
+  flex: 1;
 }
-
-/* Code drawer adjustments */
-#coder-artifacts-code-drawer {
-    height: 100vh !important;
-}
-
 #coder-artifacts-code-drawer .output-code {
-    flex: 1;
-    height: 100%;
+  flex:1;
 }
-
 #coder-artifacts-code-drawer .output-code .ms-gr-ant-spin-nested-loading {
-    min-height: 100%;
-}
-
-/* History drawer adjustments */
-.history_chatbot {
-    height: 85vh !important;
-}
-
-/* Responsive adjustments */
-@media (max-width: 768px) {
-    #coder-artifacts {
-        padding: 0.5rem;
-    }
-    
-    #coder-artifacts #output-container,
-    #coder-artifacts .output-html,
-    #coder-artifacts .output-html > iframe {
-        min-height: 70vh;
-    }
+  min-height: 100%;
 }
 """
 
-# ---------- GRADIO UI ----------
 with gr.Blocks(css=css) as demo:
     # Global State
     state = gr.State({"system_prompt": "", "history": []})
     with ms.Application(elem_id="coder-artifacts") as app:
         with antd.ConfigProvider(theme=DEFAULT_THEME, locale=DEFAULT_LOCALE):
+
             with ms.AutoLoading():
                 with antd.Row(gutter=[32, 12],
                               elem_style=dict(marginTop=20),
@@ -432,7 +384,7 @@ with gr.Blocks(css=css) as demo:
                                 #     height=200,
                                 #     preview=False)
                                 antd.Typography.Title(
-                                    "My-v0",
+                                    "My-v0.dev",
                                     level=1,
                                     elem_style=dict(fontSize=24))
                             # Input
@@ -466,6 +418,8 @@ with gr.Blocks(css=css) as demo:
                             with antd.Space(size="small",
                                             wrap=True,
                                             elem_id="settings-area"):
+                                # system_prompt_btn = antd.Button(
+                                #     "⚙️ Set System Prompt", type="default")
                                 history_btn = antd.Button(
                                     "📜 History",
                                     type="default",
@@ -496,21 +450,10 @@ with gr.Blocks(css=css) as demo:
                     with antd.Col(span=24, md=16):
                         with antd.Card(
                                 title="Output",
-                                elem_style=dict(
-                                    height="85vh",
-                                    display="flex",
-                                    flexDirection="column",
-                                    margin=0,
-                                    borderRadius="8px",
-                                    boxShadow="0 4px 6px -1px rgb(0 0 0 / 0.1)"
-                                ),
-                                styles=dict(
-                                    body=dict(
-                                        height=0,
-                                        flex=1,
-                                        padding=0
-                                    )
-                                ),
+                                elem_style=dict(height="100%",
+                                                display="flex",
+                                                flexDirection="column"),
+                                styles=dict(body=dict(height=0, flex=1)),
                                 elem_id="output-container"):
                             # Output Container Extra
                             with ms.Slot("extra"):
@@ -556,6 +499,7 @@ with gr.Blocks(css=css) as demo:
                                     title="System Prompt",
                                     width="800px") as system_prompt_modal:
                         system_prompt_input = antd.Input.Textarea(
+                            # SYSTEM_PROMPT,
                             value="",
                             size="large",
                             placeholder="Enter your system prompt here",
@@ -620,13 +564,15 @@ with gr.Blocks(css=css) as demo:
                             description="You can change chat history here.",
                             get_target=
                             "() => document.querySelector('#settings-area')")
-
-    # Event Handler wiring
+    # Event Handler
     gr.on(fn=GradioEvents.close_modal,
           triggers=[usage_tour.close, usage_tour.finish],
           outputs=[usage_tour])
     tour_btn.click(fn=GradioEvents.open_modal, outputs=[usage_tour])
 
+    # system_prompt_btn.click(fn=GradioEvents.open_modal,
+    #                         outputs=[system_prompt_modal])
+
     system_prompt_modal.ok(GradioEvents.update_system_prompt,
                            inputs=[system_prompt_input, state],
                            outputs=[state]).then(fn=GradioEvents.close_modal,
@@ -677,5 +623,5 @@ with gr.Blocks(css=css) as demo:
                                         outputs=[output_code_drawer])
 
 if __name__ == "__main__":
-    # tune queue params as you like
-    demo.queue(default_concurrency_limit=10, max_size=50).launch(ssr_mode=False, max_threads=100,pwa=True)
+    demo.queue(default_concurrency_limit=100,
+               max_size=100).launch(ssr_mode=False, max_threads=100)