app.py

# This is a simple Gradio app that greets the user.
# The app includes a custom CSS to animate the front page information to expand and burst on the first click.

import gradio as gr

# Define a function that takes a name and returns a greeting.
def greet(name):
    return "Hello " + name + "!"

# Custom CSS to animate the front page information to expand and burst on the first click.
css = """
.front-page-info {
    transition: transform 0.5s, opacity 0.5s;
    opacity: 0;
    transform: scale(0);
}

.front-page-info.expanded {
    opacity: 1;
    transform: scale(1);
}
"""

# Create a Gradio interface that takes a textbox input, runs it through the greet function, and returns output to a textbox.
# The front page information is initially hidden and will expand and burst on the first click.
with gr.Blocks(css=css) as demo:
    front_page_info = gr.Markdown("Welcome to our amazing app! Click anywhere to start.", elem_classes="front-page-info")
    
    # Function to expand and burst the front page information on the first click.
    def expand_info():
        front_page_info.update(elem_classes="front-page-info expanded")
    
    # Attach the expand_info function to the first click event.
    front_page_info.click(expand_info, None, front_page_info)
    
    # Textbox and output for the greeting function.
    name = gr.Textbox(label="Name")
    output = gr.Textbox(label="Output Box")
    greet_btn = gr.Button("Greet")
    greet_btn.click(fn=greet, inputs=name, outputs=output)

# Launch the interface.
if __name__ == "__main__":
    demo.launch(show_error=True)