run.py

import gradio as gr
import pandas as pd
import numpy as np

# Sample data for components
sample_df = pd.DataFrame(
    {
        "Name": ["Alice", "Bob", "Charlie", "Diana", "Eve"],
        "Age": [25, 30, 35, 28, 32],
        "City": ["New York", "London", "Paris", "Tokyo", "Berlin"],
        "Score": [95.5, 87.2, 92.1, 88.9, 91.3],
    }
)


def process_audio(audio):
    if audio is None:
        return "No audio uploaded"
    return f"Audio file received: {audio}"


def process_image(image):
    if image is None:
        return "No image uploaded"
    return "Image processed successfully!"


def process_3d_model(model):
    if model is None:
        return "No 3D model uploaded"
    return f"3D model file received: {model}"


def process_video(video):
    if video is None:
        return "No video uploaded"
    return f"Video file received: {video}"


def chat_response(message, history):
    if history is None:
        history = []
    response = f"You said: {message}. This is a demo response!"
    history.append([message, response])
    return history, ""


def update_dataframe(df, action):
    if action == "Add Row":
        new_row = pd.DataFrame(
            {"Name": ["New User"], "Age": [25], "City": ["New City"], "Score": [90.0]}
        )
        return pd.concat([df, new_row], ignore_index=True)
    elif action == "Clear":
        return pd.DataFrame({"Name": [], "Age": [], "City": [], "Score": []})
    return df


with gr.Blocks(title="Multi-Component Demo with 10 Tabs") as demo:
    gr.Markdown("# 🎛️ Multi-Component Gradio Demo")
    gr.Markdown(
        "This demo showcases various Gradio components across 10 interactive tabs."
    )

    with gr.Tabs() as main_tabs:
        with gr.Tab("📝 Text", id="tab_text"):
            gr.Markdown("### Text Processing")
            text_input = gr.Textbox(
                label="Input Text",
                placeholder="Enter your text here...",
                lines=3,
                interactive=True,
            )
            text_area = gr.TextArea(
                label="Large Text Area",
                placeholder="Enter longer text...",
                lines=5,
                interactive=True,
            )
            text_output = gr.Textbox(label="Processed Text", interactive=True)

            def process_text(text1, text2):
                combined = f"Text 1: {text1}\nText 2: {text2}\nTotal characters: {len(text1) + len(text2)}"
                return combined

            text_input.change(
                process_text, inputs=[text_input, text_area], outputs=text_output
            )
        with gr.Tab("📝 Text 2", id="tab_text_2"):
            gr.Markdown("### Text Processing")
            text_input_2 = gr.Textbox(
                label="Input Text",
                placeholder="Enter your text here...",
                interactive=True,
            )
            text_area_2 = gr.TextArea(
                label="Large Text Area",
                placeholder="Enter longer text...",
                interactive=True,
            )
            text_output_2 = gr.Textbox(label="Processed Text", interactive=True)

            def process_text(text1, text2):
                combined = f"Text 1: {text1}\nText 2: {text2}\nTotal characters: {len(text1) + len(text2)}"
                return combined

            text_input_2.change(
                process_text, inputs=[text_input_2, text_area_2], outputs=text_output_2
            )

        # Tab 1: 3D Model Viewer
        with gr.Tab("🎯 3D Model", id="tab_3d"):
            gr.Markdown("### 3D Model Viewer")
            model_input = gr.Model3D(
                label="Upload 3D Model", interactive=True, height=400
            )
            model_output = gr.Textbox(label="Model Status", interactive=True)
            model_input.change(
                process_3d_model, inputs=model_input, outputs=model_output
            )

        # Tab 2: Image Editor
        with gr.Tab("🖼️ Image Editor", id="tab_image_editor"):
            gr.Markdown("### Image Editor")
            image_editor = gr.ImageEditor(
                label="Edit Image",
                interactive=True,
                height=400,
            )
            editor_output = gr.Textbox(label="Editor Status", interactive=True)
            image_editor.change(
                lambda x: "Image edited!" if x else "No image",
                inputs=image_editor,
                outputs=editor_output,
            )

        # Tab 3: Audio
        with gr.Tab("🎵 Audio", id="tab_audio"):
            gr.Markdown("### Audio Component")
            with gr.Row():
                audio_input = gr.Audio(
                    label="Upload Audio", interactive=True, type="filepath"
                )
                audio_mic = gr.Audio(
                    label="Record Audio", interactive=True, sources=["microphone"]
                )
            audio_output = gr.Textbox(label="Audio Status", interactive=True)
            audio_input.change(process_audio, inputs=audio_input, outputs=audio_output)

        # Tab 4: Image
        with gr.Tab("📸 Image", id="tab_image"):
            gr.Markdown("### Image Component")
            with gr.Row():
                image_input = gr.Image(
                    label="Upload Image", interactive=True, height=300
                )
                image_webcam = gr.Image(
                    label="Webcam Image", interactive=True, sources=["webcam"]
                )
            image_output = gr.Textbox(label="Image Status", interactive=True)
            image_input.change(process_image, inputs=image_input, outputs=image_output)

        # Tab 5: Dataframe
        with gr.Tab("📊 Dataframe", id="tab_dataframe"):
            gr.Markdown("### Interactive Dataframe")
            df_component = gr.Dataframe(
                value=sample_df,
                label="Data Table",
                interactive=True,
                wrap=True,
            )
            with gr.Row():
                add_row_btn = gr.Button("Add Row", interactive=True)
                clear_btn = gr.Button("Clear Data", interactive=True)
            df_status = gr.Textbox(label="Dataframe Status", interactive=True)

            add_row_btn.click(
                lambda df: update_dataframe(df, "Add Row"),
                inputs=df_component,
                outputs=df_component,
            )
            clear_btn.click(
                lambda df: update_dataframe(df, "Clear"),
                inputs=df_component,
                outputs=df_component,
            )

        # Tab 6: Text Processing

        # Tab 7: File Upload
        with gr.Tab("📁 Files", id="tab_files"):
            gr.Markdown("### File Upload")
            file_input = gr.File(
                label="Upload Files",
                interactive=True,
                file_count="multiple",
                file_types=["image", "video", "audio", ".pdf", ".txt"],
            )
            file_output = gr.Textbox(label="File Status", interactive=True)

            def process_files(files):
                if files is None or len(files) == 0:
                    return "No files uploaded"
                file_names = [f.name for f in files]
                return f"Uploaded {len(files)} files: {', '.join(file_names)}"

            file_input.change(process_files, inputs=file_input, outputs=file_output)

        # Tab 8: Chatbot
        with gr.Tab("💬 Chatbot", id="tab_chatbot"):
            gr.Markdown("### Interactive Chatbot")

            def echo(message, history):
                return message

            gr.ChatInterface(
                fn=echo,
                examples=["hello", "hola", "merhaba"],
                title="Echo Bot",
            )

        # Tab 9: Gallery
        with gr.Tab("🖼️ Gallery", id="tab_gallery"):
            gr.Markdown("### Image Gallery")
            gallery = gr.Gallery(
                label="Image Gallery",
                columns=3,
                rows=2,
                height="400px",
                interactive=True,
                allow_preview=True,
            )
            gallery_input = gr.File(
                label="Add Images to Gallery",
                file_count="multiple",
                file_types=["image"],
                interactive=True,
            )
            gallery_status = gr.Textbox(label="Gallery Status", interactive=True)

            def update_gallery(files):
                if files is None:
                    return [], "No images uploaded"
                return files, f"Gallery updated with {len(files)} images"

            gallery_input.change(
                update_gallery, inputs=gallery_input, outputs=[gallery, gallery_status]
            )

        # Tab 10: Video
        with gr.Tab("🎬 Video", id="tab_video"):
            gr.Markdown("### Video Component")
            video_input = gr.Video(label="Upload Video", interactive=True, height=400)
            video_webcam = gr.Video(
                label="Record Video", interactive=True, sources=["webcam"]
            )
            video_output = gr.Textbox(label="Video Status", interactive=True)
            video_input.change(process_video, inputs=video_input, outputs=video_output)

    # Global controls
    gr.Markdown("---")
    with gr.Row():
        selected_tab = gr.Textbox(label="Currently Selected Tab", interactive=True)
        tab_counter = gr.Number(
            label="Tab Number (1-10)", value=1, minimum=1, maximum=10, interactive=True
        )

    # Tab selection functionality
    def get_selected_tab(evt: gr.SelectData):
        tab_names = [
            "3D Model",
            "Image Editor",
            "Audio",
            "Image",
            "Dataframe",
            "Text",
            "Files",
            "Chatbot",
            "Gallery",
            "Video",
        ]
        return f"Selected: {evt.value}"

    # Add select events for all tabs
    tabs = [
        main_tabs
    ]  # You would need to reference individual tabs for this to work properly

    gr.Markdown("### 🎯 Features:")
    gr.Markdown("""
    - **Tab 1**: 3D Model viewer with file upload
    - **Tab 2**: Image editor with drawing tools
    - **Tab 3**: Audio upload and recording
    - **Tab 4**: Image upload and webcam capture
    - **Tab 5**: Interactive dataframe with CRUD operations
    - **Tab 6**: Text processing with multiple input types
    - **Tab 7**: Multi-file upload with various formats
    - **Tab 8**: Interactive chatbot interface
    - **Tab 9**: Image gallery with preview
    - **Tab 10**: Video upload and recording
    """)

if __name__ == "__main__":
    demo.launch()