feat: prompts and styles

app.py

@@ -364,7 +364,14 @@ def select_example(example):
 
 def generate_code(query: str):
     if not query:
-        return None, None, None, gr.update(active_key="empty"), gr.update(active_key="reasoning", visible=False)
+        return {
+            code_output: gr.update(value=None),
+            reasoning_output: gr.update(value=None),
+            sandbox: gr.update(value=None),
+            state_tab: gr.update(active_key="empty"),
+            output_tabs: gr.update(active_key="reasoning", visible=False),
+            loading: gr.update(tip="Thinking...")
+        }
     
     print("Starting code generation with query:", query)
     messages = [{
@@ -422,18 +429,21 @@ def generate_code(query: str):
                         if content and not loading_text == "Generating code...":
                             loading_text = "Generating code..."
                             yield {
-                                code_output: content,
-                                reasoning_output: reasoning_content + "\n",
+                                code_output: gr.update(value=content),
+                                reasoning_output: gr.update(value=reasoning_content + "\n"),
+                                sandbox: gr.update(value=None),
                                 state_tab: gr.update(active_key="loading"),
                                 output_tabs: gr.update(active_key="reasoning", visible=True),
                                 loading: gr.update(tip=loading_text)
                             }
                         else:
                             yield {
-                                code_output: content,
-                                reasoning_output: reasoning_content + "\n",
+                                code_output: gr.update(value=content),
+                                reasoning_output: gr.update(value=reasoning_content + "\n"),
+                                sandbox: gr.update(value=None),
                                 state_tab: gr.update(active_key="loading"),
-                                output_tabs: gr.update(active_key="reasoning", visible=True)
+                                output_tabs: gr.update(active_key="reasoning", visible=True),
+                                loading: gr.update(tip=loading_text)
                             }
                     elif 'message' in choice:
                         message_data = choice['message']
@@ -444,11 +454,12 @@ def generate_code(query: str):
                         html_content = remove_code_block(content)
                         print("Extracted HTML:", html_content)
                         yield {
-                            code_output: content,
-                            reasoning_output: reasoning_content + "\n",
-                            sandbox: send_to_sandbox(html_content),
+                            code_output: gr.update(value=content),
+                            reasoning_output: gr.update(value=reasoning_content + "\n"),
+                            sandbox: gr.update(value=send_to_sandbox(html_content)),
                             state_tab: gr.update(active_key="render"),
-                            output_tabs: gr.update(active_key="code", visible=True)
+                            output_tabs: gr.update(active_key="code", visible=True),
+                            loading: gr.update(tip="Done")
                         }
             
             # If successful, break out of retry loop
@@ -467,21 +478,34 @@ def generate_code(query: str):
             raise gr.Error(str(e))
 
 css = """
+/* Add styles for the main container */
+.ant-tabs-content {
+  height: calc(100vh - 200px);
+  overflow: hidden;
+}
+
+.ant-tabs-tabpane {
+  height: 100%;
+  overflow-y: auto;
+}
+
+/* Modify existing styles */
 .output-loading {
   display: flex;
   flex-direction: column;
   align-items: center;
   justify-content: center;
   width: 100%;
-  min-height: 680px;
-  height: calc(100vh - 200px);
+  height: 100%;
+  min-height: unset;
 }
 
 .output-html {
   display: flex;
   flex-direction: column;
   width: 100%;
-  min-height: 680px;
+  height: 100%;
+  min-height: unset;
   background: #fff;
   border-radius: 8px;
   border: 1px solid #e8e8e8;
@@ -489,6 +513,44 @@ css = """
   overflow: hidden;
 }
 
+.right_content {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  width: 100%;
+  height: 100%;
+  min-height: unset;
+  background: #fff;
+  border-radius: 8px;
+  box-shadow: 0 2px 8px rgba(0,0,0,0.1);
+}
+
+/* Add styles for the code playground container */
+.code-playground-container {
+  height: 100%;
+  overflow-y: auto;
+  padding-right: 8px;
+}
+
+.code-playground-container::-webkit-scrollbar {
+  width: 6px;
+}
+
+.code-playground-container::-webkit-scrollbar-track {
+  background: #f1f1f1;
+  border-radius: 3px;
+}
+
+.code-playground-container::-webkit-scrollbar-thumb {
+  background: #888;
+  border-radius: 3px;
+}
+
+.code-playground-container::-webkit-scrollbar-thumb:hover {
+  background: #555;
+}
+
 .render_header {
   display: flex;
   align-items: center;
@@ -581,9 +643,9 @@ css = """
 
 /* Example card styles */
 .example-card {
-  flex: 1 1 300px;
-  max-width: 400px;
-  margin: 8px;
+  flex: 1 1 calc(50% - 20px);
+  max-width: calc(50% - 20px);
+  margin: 6px;
   transition: all 0.3s;
   cursor: pointer;
   border: 1px solid #e8e8e8;
@@ -631,11 +693,21 @@ css = """
   align-items: center;
   justify-content: center;
   width: 100%;
-  min-height: 680px;
+  min-height: 620px;
   background: #fff;
   border-radius: 8px;
   box-shadow: 0 2px 8px rgba(0,0,0,0.1);
 }
+
+/* Add styles for the example cards container */
+.example-tabs .ant-tabs-content {
+  padding: 0 8px;
+}
+
+.example-tabs .ant-flex {
+  margin: 0 -8px;
+  width: calc(100% + 16px);
+}
 """
 
 def scroll_to_bottom():
@@ -714,7 +786,7 @@ with gr.Blocks(css=css) as demo, ms.Application(), antdx.XProvider():
                 chatbot.welcome_prompt_select(fn=prompt_select, outputs=[sender])
 
         with antd.Tabs.Item(key="code", label="Code Playground (WebDev)"):
-            with antd.Row(gutter=[32, 12]):
+            with antd.Row(gutter=[32, 12], elem_classes="code-playground-container"):
                 with antd.Col(span=12):
                     with antd.Flex(vertical=True, gap="middle"):
                         code_input = antd.InputTextarea(

config.py

@@ -3,10 +3,10 @@ DEFAULT_PROMPTS = [
         "label": "🤔 Logical Reasoning",
         "children": [
             {
-                "description": "A is taller than B, B is shorter than C. Who is taller, A or C?"
+                "description": "A cat is lying on a blanket because it is warm. What does 'it' refer to in this sentence?"
             },
             {
-                "description": "Alice put candy in the drawer and went out. Bob moved the candy to the cabinet. Where will Alice look for the candy when she returns?"
+                "description": "Snowflake : white'' - Which of the following groups of words has a relationship most similar to the relationship in the above word group? [ ''Doctor : learned'', ''Woman : gentle'', ''River : flowing'', ''Peony : wealth'' ]"
             }
         ]
     },
@@ -14,10 +14,10 @@ DEFAULT_PROMPTS = [
         "label": "📚 Knowledge Q&A",
         "children": [
             {
-                "description": "Can you tell me about middle school mathematics?"
+                "description": "Why are most manhole covers round?"
             },
             {
-                "description": "If Earth's gravity suddenly halved, what would happen to the height humans can jump?"
+                "description": "What is the shortest distance between the United States and Russia?"
             }
         ]
     }