app.py

import gradio as gr
import time

def update_fortune(user_input):
    # Simulate processing and an "animation"
    for _ in range(3):
        time.sleep(0.5)
    # 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 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 left and bottom left)
        with gr.Column(scale=1):
            # 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 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 section for fortune image and reserved text
        with gr.Column(scale=2):
            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)
    
    # 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()