app.py

import gradio as gr
import os
from random import choice

os.chdir(os.path.dirname(os.path.abspath(__file__)))
image_list = [f"./images/Image {i}.png" for i in range(1, 19)]

def update_image():
    return choice(image_list)

with gr.Blocks() as app:
    gr.Markdown("# Magazine Layouts")
    
    with gr.Tab("The Minimalist Layout"):
        with gr.Column():
            gr.Markdown("## Minimalist")
            image_minimalist = gr.Image(value=update_image())
            gr.Textbox(lines=4, value="It was a stormy night, and the vintage car roared down the highway.")
            btn_minimalist = gr.Button("Change Image")
            btn_minimalist.click(fn=update_image, inputs=[], outputs=image_minimalist)
    
    with gr.Tab("The Grid Layout"):
        with gr.Row():
            with gr.Column(scale=1):
                image_grid_1 = gr.Image(value=update_image())
                gr.Textbox(lines=4, value="The old leather seats had stories to tell.")
                btn_grid_1 = gr.Button("Change Image")
                btn_grid_1.click(fn=update_image, inputs=[], outputs=image_grid_1)
            with gr.Column(scale=1):
                image_grid_2 = gr.Image(value=update_image())
                gr.Textbox(lines=4, value="With every curve and turn, the car seemed to whisper.")
                btn_grid_2 = gr.Button("Change Image")
                btn_grid_2.click(fn=update_image, inputs=[], outputs=image_grid_2)
                
    with gr.Tab("The Asymmetrical Layout"):
        with gr.Row():
            with gr.Column(scale=2):
                gr.Markdown("## Artistic Layout")
                image_asymmetrical = gr.Image(value=update_image())
                btn_asymmetrical = gr.Button("Change Image")
                btn_asymmetrical.click(fn=update_image, inputs=[], outputs=image_asymmetrical)
            with gr.Column(scale=1):
                image_asymmetrical_2 = gr.Image(value=update_image())
                gr.Textbox(lines=3, value="As the dawn broke, the car finally stopped.")
                btn_asymmetrical_2 = gr.Button("Change Image")
                btn_asymmetrical_2.click(fn=update_image, inputs=[], outputs=image_asymmetrical_2)
                
    with gr.Tab("The F-Layout"):
        with gr.Row():
            with gr.Column(scale=3):
                image_f_layout = gr.Image(value=update_image())
                btn_f_layout = gr.Button("Change Image")
                btn_f_layout.click(fn=update_image, inputs=[], outputs=image_f_layout)
            with gr.Column(scale=1):
                gr.Textbox(lines=4, value="It was a stormy night, and the vintage car roared down the highway.")
                

    with gr.Tab("The Radial Layout"):
        with gr.Row():
            with gr.Column(scale=1):
                image_radial_1 = gr.Image(value=update_image())
                btn_radial_1 = gr.Button("Change Image")
                btn_radial_1.click(fn=update_image, inputs=[], outputs=image_radial_1)
            with gr.Column(scale=1):
                image_radial_2 = gr.Image(value=update_image())
                btn_radial_2 = gr.Button("Change Image")
                btn_radial_2.click(fn=update_image, inputs=[], outputs=image_radial_2)
        with gr.Row():
            with gr.Column(scale=1):
                image_radial_3 = gr.Image(value=update_image())
                btn_radial_3 = gr.Button("Change Image")
                btn_radial_3.click(fn=update_image, inputs=[], outputs=image_radial_3)
            with gr.Column(scale=1):
                gr.Textbox(lines=4, value="As the dawn broke, the car finally stopped.")
            with gr.Column(scale=1):
                image_radial_4 = gr.Image(value=update_image())
                btn_radial_4 = gr.Button("Change Image")
                btn_radial_4.click(fn=update_image, inputs=[], outputs=image_radial_4)

    with gr.Tab("Trading Card Layout 1"):
        with gr.Column():
            image_trading_card = gr.Image(value=update_image())
            btn_trading_card = gr.Button("Change Image")
            btn_trading_card.click(fn=update_image, inputs=[], outputs=image_trading_card)
            gr.Textbox(lines=1, value="Car Model: Mustang")
            gr.Textbox(lines=1, value="Year: 1965")
            gr.Textbox(lines=2, value="Stats: Speed 200mph, Mileage 15mpg")
            gr.Textbox(lines=3, value="The Mustang is a classic American muscle car.")
    
    with gr.Tab("Spotlight Layout"):
        image_spotlight = gr.Image(value=update_image())
        btn_spotlight = gr.Button("Change Image")
        btn_spotlight.click(fn=update_image, inputs=[], outputs=image_spotlight)
        with gr.Row():
            gr.Textbox(lines=1, value="Art: Moonlit Sonata")
            gr.Textbox(lines=1, value="Artist: L. Vinci")
            gr.Textbox(lines=1, value="Year: 1911")
        gr.Textbox(lines=3, value="A single spotlight shines on this masterpiece, illuminating its intricate details and vivid colors.")
    
    with gr.Tab("Interactive Kiosk Layout"):
        with gr.Row():
            with gr.Column(scale=1):
                image_interactive_kiosk = gr.Image(value=update_image())
                btn_interactive_kiosk = gr.Button("Change Image")
                btn_interactive_kiosk.click(fn=update_image, inputs=[], outputs=image_interactive_kiosk)
            with gr.Column(scale=1):
                gr.Textbox(lines=1, value="Art: Pixelated Reality")
                gr.Textbox(lines=1, value="Artist: G. O'Keeffe")
                gr.Textbox(lines=1, value="Year: 2001")
                gr.Textbox(lines=4, value="Step up to the interactive kiosk to dive deeper into the story and significance of the artwork.")

    with gr.Tab("Moodboard for a Designer"):
        with gr.Row():
            image_moodboard = gr.Image(value=update_image())
            btn_moodboard = gr.Button("Change Image")
            btn_moodboard.click(fn=update_image, inputs=[], outputs=image_moodboard)
            gr.Textbox(lines=1, value="Color: #FF5733")
            gr.Textbox(lines=1, value="Font: Arial")
        with gr.Row():
            gr.Textbox(lines=1, value="Quote: Design is intelligence made visible.")
            image_moodboard_2 = gr.Image(value=update_image())
            btn_moodboard_2 = gr.Button("Change Image")
            btn_moodboard_2.click(fn=update_image, inputs=[], outputs=image_moodboard_2)
            gr.Textbox(lines=1, value="Project: Logo Design")

with gr.Tab("Comic Book"):
    with gr.Row():
        gr.Textbox(lines=1, value="Title: The Adventures of Grado")
        image_comic_1 = gr.Image(value=update_image())
        btn_comic_1 = gr.Button("Change Image")
        btn_comic_1.click(fn=update_image, inputs=[], outputs=image_comic_1)
    with gr.Row():
        gr.Textbox(lines=1, value="BOOM!")
        image_comic_2 = gr.Image(value=update_image())
        btn_comic_2 = gr.Button("Change Image")
        btn_comic_2.click(fn=update_image, inputs=[], outputs=image_comic_2)
        gr.Textbox(lines=1, value="CRASH!")
        image_comic_3 = gr.Image(value=update_image())
        btn_comic_3 = gr.Button("Change Image")
        btn_comic_3.click(fn=update_image, inputs=[], outputs=image_comic_3)
app.launch()