import gradio as gr
import numpy as np

def page1():
    with gr.Group():
        gr.Markdown("# Page 1 Content")
        input_text = gr.Textbox(label="Enter some text")
        output_text = gr.Textbox(label="Output")
        button = gr.Button("Process")
        
        def process_text(text):
            return text.upper()
        
        button.click(fn=process_text, inputs=input_text, outputs=output_text)

def page2():
    with gr.Group():
        gr.Markdown("# Page 2 Content")
        num1 = gr.Number(label="Number 1")
        num2 = gr.Number(label="Number 2")
        result = gr.Number(label="Result")
        add_btn = gr.Button("Add")
        
        def add_numbers(a, b):
            return a + b
        
        add_btn.click(fn=add_numbers, inputs=[num1, num2], outputs=result)

def page3():
    with gr.Group():
        gr.Markdown("# Page 3 Content")
        image_input = gr.Image()
        image_output = gr.Image()
        flip_btn = gr.Button("Flip Image")
        
        def flip_image(img):
            return np.fliplr(img) if img is not None else None
        
        flip_btn.click(fn=flip_image, inputs=image_input, outputs=image_output)

with gr.Blocks() as demo:
    with gr.Row():
        with gr.Column(scale=1):
            # Sidebar
            gr.Markdown("### Navigation")
        
        with gr.Column(scale=4):
            # Main content area using Tabs
            with gr.Tabs() as tabs:
                with gr.TabItem("Page 1"):
                    page1()
                with gr.TabItem("Page 2"):
                    page2()
                with gr.TabItem("Page 3"):
                    page3()

demo.launch()