Create app.py

app.py

@@ -0,0 +1,46 @@
+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.
+    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
+
+def enquiry_action():
+    # This function is triggered when the '解籤/Stick Enquiry' button is clicked.
+    # It returns placeholder text that appears after the 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)
+        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")
+            
+            # Bottom left: A button centered in the box and an output textbox
+            with gr.Column():
+                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
+        with gr.Column(scale=2):
+            fortune_image = gr.Image(value="fortune.png", label="Fortune Image", 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.
+    enquiry_btn.click(fn=enquiry_action, inputs=[], outputs=enquiry_output)
+
+demo.launch()