Update app.py

app.py

@@ -2,45 +2,55 @@ import gradio as gr
 import time
 
 def update_fortune(user_input):
-    # This function simulates processing the input and updating the fortune image.
-    # Simulate an "animation" by waiting a few moments.
+    # Simulate processing and an "animation"
     for _ in range(3):
         time.sleep(0.5)
-    # After the simulated animation, update the image and reserved text.
-    new_image = "fortune2.png"  # The new image to display after submission.
-    reserved_text = f"Processed input: {user_input}"  # Placeholder text; you can modify this later.
-    return new_image, reserved_text
+    # Update the fortune image and reserved text field
+    new_image = "fortune2.png"  # New fortune image after submission.
+    reserved_text = f"Processed input: {user_input}"  # Placeholder reserved text.
+    # Make the bottom left enquiry components visible.
+    show_bottom = gr.update(visible=True)
+    return new_image, reserved_text, show_bottom, show_bottom
 
 def enquiry_action():
-    # This function is triggered when the '解籤/Stick Enquiry' button is clicked.
-    # It returns placeholder text that appears after the button.
+    # This function is triggered by the bottom left enquiry button.
     return "Here are some words after the enquiry."
 
 with gr.Blocks() as demo:
     gr.Markdown("# Wong Tai Sin Fortuen Stick Enquiry")
     
     with gr.Row():
-        # Left column with two sections (top and bottom)
+        # Left column with two sections (top left and bottom left)
         with gr.Column(scale=1):
-            # Top left: A row with the input field and submit button
-            with gr.Row():
-                user_input = gr.Textbox(label="Input Sentence", placeholder="Enter your sentence here...")
-                submit_btn = gr.Button("Submit")
+            # Top left container with subtitle and input field + submit button
+            with gr.Group():
+                gr.Markdown("**有什麼問題/Type your question**")
+                with gr.Row():
+                    user_input = gr.Textbox(placeholder="Enter your sentence here...", show_label=False)
+                    submit_btn = gr.Button("Submit")
             
-            # Bottom left: A button centered in the box and an output textbox
-            with gr.Column():
+            # Bottom left container (initially hidden) with its subtitle and enquiry button
+            with gr.Group(visible=False) as bottom_left_group:
+                gr.Markdown("**解籤/Stick Enquiry**")
                 enquiry_btn = gr.Button("解籤/Stick Enquiry")
                 enquiry_output = gr.Textbox(label="Enquiry Output", placeholder="Output will appear here...")
         
-        # Right column: Merged area for the fortune image and a reserved text field
+        # Right column: merged section for fortune image and reserved text
         with gr.Column(scale=2):
-            fortune_image = gr.Image(value="fortune.png", label="Fortune Image", height=300)
+            gr.Markdown("**籤文/fortune explanation**")
+            fortune_image = gr.Image(value="fortune.png", label=None, height=300)
             reserved_text = gr.Textbox(label="Reserved Text Field", placeholder="Reserved for future content...", interactive=False)
     
-    # Define interactivity:
-    # When the submit button is clicked, update the fortune image and reserved text.
-    submit_btn.click(fn=update_fortune, inputs=user_input, outputs=[fortune_image, reserved_text])
-    # When the enquiry button is clicked, display the enquiry output.
+    # When the submit button is clicked:
+    # - Update the fortune image and reserved text,
+    # - And reveal the bottom left enquiry section.
+    submit_btn.click(
+        fn=update_fortune, 
+        inputs=user_input, 
+        outputs=[fortune_image, reserved_text, enquiry_btn, enquiry_output]
+    )
+    
+    # The enquiry button's click updates its output.
     enquiry_btn.click(fn=enquiry_action, inputs=[], outputs=enquiry_output)
 
 demo.launch()