app.py

import gradio as gr

# Define your "Behind the Scenes" content
bts_content = [
    {"image": "https://huggingface.co/spaces/sohail-78/interior-bts/resolve/main/0-to.jpeg", "description": "Welcome to our studio where designs come to life."},
    {"image": "https://huggingface.co/spaces/sohail-78/interior-bts/resolve/main/1-to.jpeg", "description": "Our artisans at work, crafting unique pieces."},
    {"image": "https://huggingface.co/spaces/sohail-78/interior-bts/resolve/main/2-to.jpg", "description": "We handpick every material to ensure quality."},
    
]

# Function to display content
def show_bts(index):
    item = bts_content[index]
    if "image" in item:
        return item["image"], None, item["description"]
    else:
        return None, item["video"], item["description"]

# Create Gradio Interface
with gr.Blocks() as demo:
    gr.Markdown("# Behind the Scenes of Our Interior Design Process")
    index = gr.Number(value=0, label="Content Index")
    img = gr.Image(label="Image", visible=False)
    vid = gr.Video(label="Video", visible=False)
    desc = gr.Textbox(label="Description")

    def update_display(index):
        image, video, description = show_bts(int(index))
        return (gr.update(value=image, visible=bool(image)), 
                gr.update(value=video, visible=bool(video)), 
                gr.update(value=description))

    index.change(update_display, [index], [img, vid, desc])

    gr.Button("Next").click(lambda idx: idx+1 if idx+1 < len(bts_content) else 0, index, index)

demo.launch()