Create app.py

app.py

@@ -0,0 +1,123 @@
+import gradio as gr
+import os
+from random import choice
+os.chdir("C:\\Users\\Ray Ochoa\\OneDrive\\Node x Mooed")
+
+
+image_list = [f"images/Image {i}.png" for i in range(1, 19)]
+def update_moodboard(btn_value):
+    return {moodboard_image: 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")
+            gr.Textbox(lines=4, value="It was a stormy night, and the vintage car roared down the highway.")
+    
+    with gr.Tab("The Grid Layout"):
+        with gr.Row():
+            with gr.Column(scale=1):
+                gr.Image("images/Image 2.png")
+                gr.Textbox(lines=4, value="The old leather seats had stories to tell.")
+            with gr.Column(scale=1):
+                gr.Image("images/Image 3.png")
+                gr.Textbox(lines=4, value="With every curve and turn, the car seemed to whisper.")
+                
+    with gr.Tab("The Asymmetrical Layout"):
+        with gr.Row():
+            with gr.Column(scale=2):
+                gr.Markdown("## Artistic Layout")
+                gr.Image("images/Image 4.png")
+            with gr.Column(scale=1):
+                gr.Image("images/Image 5.png")
+                gr.Textbox(lines=3, value="As the dawn broke, the car finally stopped.")
+                
+    with gr.Tab("The F-Layout"):
+        with gr.Row():
+            with gr.Column(scale=3):
+                gr.Image("images/Image 6.png")
+            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")
+            with gr.Column(scale=1):
+                gr.Image("images/Image 10.png")
+        with gr.Row():
+            with gr.Column(scale=1):
+                gr.Image("images/Image 11.png")
+            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")
+                
+    with gr.Tab("Trading Card Layout 1"):
+        with gr.Column():
+            gr.Image(choice(image_list))
+            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))
+        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))
+            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))
+            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))
+            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))
+        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%")
+
+app.launch()