Update app.py

app.py

@@ -208,81 +208,92 @@ def draw_grid(data, highlight_coords=None):
 # Tabs +++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++
 
 # Create the main app with three tabs
-tab1, tab2, tab3 = st.tabs(["Interpretive Number","Green Village", "Control Room"])
+tab1, tab2, tab3 = st.tabs(["Introduction","Green Village", "Control Room"])
 
 
 with tab1:
     
-  st.header("RAGE - A day in the Life of Aya City")
-
-    # Divide the page into three columns
-    col1, col2 = st.columns(2)
+    st.header("RAGE - A day in the Life of Aya City")
 
+    # Creating columns for the layout
+    col1, col2 = st.columns([1, 2])
+    
+    # Displaying the image in the left column
     with col1:
-        st.header("Human Interpretive Number (HIN)")
-        st.write("")
-        "How do LLMs interpret us and over “a period” of time what is the result of our interaction with them?"
-        st.write("")
-      
-        image_comparison(
-            img1="./data/robot.jpg",
-            img2="./data/life.jpg",
-            label1="What the LMM Sees (Simulated Life)",
-            label2="What we See (Real Life)",
-        )
-    with col2:
-        st.header("Custom GPT Engineering Tools")
-        st.link_button("Create JSON Data for a Green Data Village Population 10,000", "https://chat.openai.com/g/g-4bPJUaHS8-create-a-green-data-village")
-        st.write("""
-        On clicking "Create Data Village" create a Green Data Village following the 4 Steps below.   Output a JSON file similar to the Example by complete the four Steps.
-
-To generate the provided JSON code, I would instruct a custom GPT to create a detailed description of a hypothetical smart city layout, named "Green Smart Village", with a population of 10,000. This layout should include a grid size of 21x21, a list of buildings and roads, each with specific attributes:
-
-Step 1:  General Instructions:
-Generate a smart city layout for "Green Smart Village" with a 21x21 grid. Include a population of 10,000.
+    image = Image.open('intro_image.jpg')
+    st.image(image, caption='Green Open Data City Aya')
 
-Step 2:  Buildings:
-For each building, specify its coordinates on the grid, type (e.g., residential, commercial, healthcare facility), size (in terms of the grid), color, and equipped sensors (e.g., smart meters, water flow sensors).
-Types of buildings should vary and include residential, commercial, community facilities, school, healthcare facility, green space, utility infrastructure, emergency services, cultural facilities, recreational facilities, innovation center, elderly care home, childcare centers, places of worship, event spaces, guest housing, pet care facilities, public sanitation facilities, environmental monitoring stations, disaster preparedness center, outdoor community spaces, typical road, and typical road crossing.
 
-Step 3: Assign each building unique sensors based on its type, ensuring a mix of technology like smart meters, occupancy sensors, smart lighting systems, and environmental monitoring sensors.
 
-Step 4: Roads:
-Detail the roads' start and end coordinates, color, and sensors installed.
-Ensure roads connect significant areas of the city, providing access to all buildings. Equip roads with sensors for traffic flow, smart streetlights, and pollution monitoring.  MAKE SURE ALL BUILDINGS HAVE ACCESS TO A ROAD.
-
-This test scenario would evaluate the model's ability to creatively assemble a smart city plan with diverse infrastructure and technology implementations, reflecting real-world urban planning challenges and the integration of smart technologies for sustainable and efficient city management.
-
-Example: 
-{
-  "city": "City Name",
-  "population": "Population Size",
-  "size": {
-    "rows": "Number of Rows",
-    "columns": "Number of Columns"
-  },
-  "buildings": [
-    {
-      "coords": ["X", "Y"],
-      "type": "Building Type",
-      "size": "Building Size",
-      "color": "Building Color",
-      "sensors": ["Sensor Types"]
-    }
-  ],
-  "roads": [
+    
+    # Displaying the text above on the right
+    with col2:
+        st.markdown('''
+        On his first day at Quantum Data Institute in Green Open Data City Aya, Elian marveled at the city’s harmonious blend of technology and nature. 
+        Guided to his mentor, Dr. Maya Lior, a pioneer in urban data ecosystems, their discussion quickly centered on Aya’s innovative design. 
+        Dr. Lior explained data analytics and green technologies were intricately woven into the city's infrastructure, and how they used
+        a Custom GPT called Green Data City to create the design.
+    
+        To interact with the Green Data City design tool click the button below.
+        ''')
+    
+    # Displaying the audio player below the text
+    st.audio('intro_audio.mp3')
+    
+    
+    st.header("Custom GPT Engineering Tools")
+    st.link_button("Create JSON Data for a Green Data Village Population 10,000", "https://chat.openai.com/g/g-4bPJUaHS8-create-a-green-data-village")
+    
+    st.write("Explanation of the Custom GPT")
+    st.write("""
+    On clicking "Create Data Village" create a Green Data Village following the 4 Steps below.   Output a JSON file similar to the Example by complete the four Steps.
+    To generate the provided JSON code, I would instruct a custom GPT to create a detailed description of a hypothetical smart city layout, named "Green Smart Village", with a population of 10,000. This layout should include a grid size of 21x21, a list of buildings and roads, each with specific attributes:
+    
+    Step 1:  General Instructions:
+    Generate a smart city layout for "Green Smart Village" with a 21x21 grid. Include a population of 10,000.
+    
+    Step 2:  Buildings:
+    For each building, specify its coordinates on the grid, type (e.g., residential, commercial, healthcare facility), size (in terms of the grid), color, and equipped sensors (e.g., smart meters, water flow sensors).
+    Types of buildings should vary and include residential, commercial, community facilities, school, healthcare facility, green space, utility infrastructure, emergency services, cultural facilities, recreational facilities, innovation center, elderly care home, childcare centers, places of worship, event spaces, guest housing, pet care facilities, public sanitation facilities, environmental monitoring stations, disaster preparedness center, outdoor community spaces, typical road, and typical road crossing.
+    
+    Step 3: Assign each building unique sensors based on its type, ensuring a mix of technology like smart meters, occupancy sensors, smart lighting systems, and environmental monitoring sensors.
+    
+    Step 4: Roads:
+    Detail the roads' start and end coordinates, color, and sensors installed.
+    Ensure roads connect significant areas of the city, providing access to all buildings. Equip roads with sensors for traffic flow, smart streetlights, and pollution monitoring.  MAKE SURE ALL BUILDINGS HAVE ACCESS TO A ROAD.
+    
+    This test scenario would evaluate the model's ability to creatively assemble a smart city plan with diverse infrastructure and technology implementations, reflecting real-world urban planning challenges and the integration of smart technologies for sustainable and efficient city management.
+    
+    Example: 
     {
-      "start": ["X Start", "Y Start"],
-      "end": ["X End", "Y End"],
-      "color": "Road Color",
-      "sensors": ["Sensor Types"]
+      "city": "City Name",
+      "population": "Population Size",
+      "size": {
+        "rows": "Number of Rows",
+        "columns": "Number of Columns"
+      },
+      "buildings": [
+        {
+          "coords": ["X", "Y"],
+          "type": "Building Type",
+          "size": "Building Size",
+          "color": "Building Color",
+          "sensors": ["Sensor Types"]
+        }
+      ],
+      "roads": [
+        {
+          "start": ["X Start", "Y Start"],
+          "end": ["X End", "Y End"],
+          "color": "Road Color",
+          "sensors": ["Sensor Types"]
+        }
+      ]
     }
-  ]
-}
-        
         
         
-        """)
+    
+    """)
 
 with tab2: