Update app.py

app.py

@@ -1,123 +1,142 @@
 import gradio as gr
 import os
 from random import choice
-os.chdir("C:\\Users\\Ray Ochoa\\OneDrive\\Node x Mooed")
 
+os.chdir(os.path.dirname(os.path.abspath(__file__)))
+image_list = [f"./images/Image {i}.png" for i in range(1, 19)]
 
-image_list = [f"images/Image {i}.png" for i in range(1, 19)]
-def update_moodboard(btn_value):
-    return {moodboard_image: choice(image_list)}
+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")
-            gr.Image("images/Image 1.png")
+            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):
-                gr.Image("images/Image 2.png")
+                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):
-                gr.Image("images/Image 3.png")
+                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")
-                gr.Image("images/Image 4.png")
+                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):
-                gr.Image("images/Image 5.png")
+                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):
-                gr.Image("images/Image 6.png")
+                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):
-                gr.Image("images/Image 9.png")
+                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):
-                gr.Image("images/Image 10.png")
+                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):
-                gr.Image("images/Image 11.png")
+                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):
-                gr.Image("images/Image 12.png")
-                
+                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():
-            gr.Image(choice(image_list))
+            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.")
     
-    # Museum Art Gallery: Spotlight Layout
     with gr.Tab("Spotlight Layout"):
-        gr.Image(choice(image_list))
+        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.")
     
-    # Museum Art Gallery: Interactive Kiosk Layout
     with gr.Tab("Interactive Kiosk Layout"):
         with gr.Row():
             with gr.Column(scale=1):
-                gr.Image(choice(image_list))
+                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.")
 
-    # Moodboard for a Designer
     with gr.Tab("Moodboard for a Designer"):
         with gr.Row():
-            gr.Image(choice(image_list))
+            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.")
-            gr.Image(choice(image_list))
+            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")
 
-    # Comic Book with Dynamic Content Loading
     with gr.Tab("Comic Book"):
         with gr.Row():
             gr.Textbox(lines=1, value="Title: The Adventures of Grado")
-            gr.Image(choice(image_list))
+            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!")
-            gr.Image(choice(image_list))
-            gr.Textbox(lines=2, value="Character: Oh no!")
-        gr.Button("Next Page", label="Next Page")
-        gr.Textbox(lines=1, value="Caption: To be continued...")
-
-    # Design Proposal Board with Multi-layered Layouts
-    with gr.Tab("Design Proposal Board"):
-        with gr.Row():
-            gr.Textbox(lines=1, value="Project: Redesign UI")
-            gr.Dropdown(options=["Planning", "Execution", "Review"], label="Project Stage")
-        with gr.Row():
-            gr.Textbox(lines=1, value="Timeline: 3 months")
-            gr.Slider(minimum=0, maximum=100, label="Progress")
-            gr.Image(choice(image_list))
-        gr.Button("View Milestones", label="View Milestones")
-        gr.Textbox(lines=4, value="Goals: Improve user engagement by 20%")
+            image_comic_2 = gr.Image(value=update_image())
+            btn_com ic_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()
+app.launch()