app.py

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()