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()