File size: 7,237 Bytes
1b56997
 
 
 
9a15405
 
1b56997
9a15405
 
1b56997
 
 
 
 
 
 
9a15405
1b56997
9a15405
 
1b56997
 
 
 
9a15405
1b56997
9a15405
 
1b56997
9a15405
1b56997
9a15405
 
1b56997
 
 
 
 
9a15405
 
 
1b56997
9a15405
1b56997
9a15405
 
1b56997
 
 
 
9a15405
 
 
1b56997
 
 
9a15405
1b56997
 
 
9a15405
 
 
1b56997
9a15405
 
 
1b56997
 
9a15405
 
 
1b56997
 
 
9a15405
 
 
 
1b56997
 
9a15405
 
 
1b56997
 
 
 
 
 
9a15405
 
 
1b56997
 
 
 
 
 
 
 
 
9a15405
 
 
1b56997
 
 
 
 
 
 
 
9a15405
 
 
1b56997
 
 
 
9a15405
 
 
1b56997
 
6299437
 
 
 
 
 
 
 
 
 
 
 
 
 
 
9a15405
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
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()