Update app.py

app.py

@@ -207,7 +207,7 @@ with tab1:
     # Displaying the image in the left column
     with col1:
         image = Image.open('./data/intro_image.jpg')
-        st.image(image, caption='Green Open Data City Aya')
+        st.image(image, caption='Aya Green Data City')
 
     # Displaying the text above on the right
     with col2:
@@ -313,7 +313,120 @@ with tab1:
 
 with tab2:
     
-    st.header("Being a Global Citizen")
+    st.header("Becoming a Global Citizen")
+
+    # Creating columns for the layout
+    col1, col2 = st.columns([1, 2])
+    
+    # Displaying the image in the left column
+    with col1:
+        image = Image.open('./data/intro_image.jpg')
+        st.image(image, caption='Aya Green Data City')
+
+    # Displaying the text above on the right
+    with col2:
+        
+        st.markdown(query)
+    
+        # Displaying the audio player below the text
+        voice_option = st.selectbox(
+        'Choose a voice:',
+        ['alloy', 'echo', 'fable', 'onyx', 'nova', 'shimmer']
+        )
+    
+    
+        if st.button('Convert to Speech'):
+                if query:
+                    try:
+                        response = oai_client.audio.speech.create(
+                            model="tts-1",
+                            voice=voice_option,
+                            input=query,
+                        )
+                        
+                        # Stream or save the response as needed
+                        # For demonstration, let's assume we save then provide a link for downloading
+                        audio_file_path = "output.mp3"
+                        response.stream_to_file(audio_file_path)
+                        
+                        # Display audio file to download
+                        st.audio(audio_file_path, format='audio/mp3')
+                        st.success("Conversion successful!")
+                    
+                            
+                    except Exception as e:
+                        st.error(f"An error occurred: {e}")
+                else:
+                    st.error("Please enter some text to convert.")
+
+
+
+
+
+        
+        st.header("Custom GPT Engineering Tools")
+        st.link_button("Custom GPT Green Data City Creation Tool (Population 10,000 to 50,000)", "https://chat.openai.com/g/g-4bPJUaHS8-create-a-green-data-village")
+        
+        if st.button('Show/Hide Explanation of "Custom GPT Create Green Data City"'):
+            # Toggle visibility
+            st.session_state.show_instructions = not st.session_state.get('show_instructions', False)
+    
+        # Check if the instructions should be shown
+        if st.session_state.get('show_instructions', False):
+            st.write(""" 
+            On clicking "Create Data Village" create a Green Data Village following the 5 Steps below.   Output a JSON file similar to the Example by completing the five 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", starting with a population of 10,000 designed to grow to 50,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 designed to grow to 50,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: 
+            {
+              "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"]
+                }
+              ]
+            }
+            
+            **Step 5:** Finally create a Dalle image FOR EACH BUILDING in the JSON file depicting what a user will experience there in this green open data city including sensors. LABEL EACH IMAGE.
+            
+                            
+            """)
+
+
+    
 
 with tab3: