app.py

import streamlit as st
import requests

st.set_page_config(layout="wide", page_title="Introduction", page_icon="⭐")

@st.cache_data(ttl=600)
def fetch_weather_data():
    url = "https://data.weather.gov.hk/weatherAPI/hko_data/csdi/dataset/current_weather_report_hong_kong.json"
    response = requests.get(url)
    data = response.json()
    return data

# Fetch the weather data
data = fetch_weather_data()

warning_message_en = data.get("Warning_Message_En", ["No warning message available"])[0]
tc_message_en = data.get("TC_Message_En", ["No typhoon message available"])[0]

st.header("Realtime Dynamic Dashboard Prototype from Open Meteorological data", divider='rainbow')
col1, col2 = st.columns([1, 1])
with col2:
    st.subheader('Intro')
    st.caption('This is a live demo of a data integration and exchanges from HKO to CSDI and the end user for the dashboard creation. This dynamic dashboard utilizes almost all the available CSDI weather data (open meteorological data) into a geojson format and fetches to plot and analyze the real-time changes over time. Those dynamic pages will change over time every 1 minute (for the temperature) or every 10 minutes for the wind, relative humidity, and smart lamppost data.')
    st.caption('The self-deployed API adopted here is  https://csdi.vercel.app/weather/temp, this API has already grouped up each of the automatic weather station surveyed profiles in 1 or 10-minute intervals and the user can get the data by fetching the API with different parameters. This backbone is important to make the CSDI data more useable, due to the original data being “redirected” based on data the user cannot get the data directly from CSDI, so we have resolved this issue by deploying an API for the HKO and CSDI usage.')
    st.subheader('What special')
    st.caption('The first ever dynamic and real-time application that fully utilizes the CSDI framework that groups up and releases all the data with the reorganization of the HKO to CSDI and the end-user in a dashboard manner. We have enhanced the CSDI and HKO datasets into more presentable, easier to understand, and interchangeable with the open-source application development. All the services, including the dashboard, frontend, and backend make use of the free and open-source packages.')
    st.subheader('Acknowledgement')
    st.caption('I would like to thank the HKO, CSDI, and Spatial Data Office in the DevB for supporting the data and opportunities to try out a dashboard development with dynamic real-time data from their API and digital interchanges. Last but not least, I would like to thank the developer of the hugging face and streamlit packages for making the application development into an open-source and freely accessible medium.')

with col1:
    st.caption('The following Data Provided from HKO to CSDI API.')
    icon_number = data.get("Icon", {}).get("Icon", [0])[0]
    st.image(f"https://www.hko.gov.hk/images/HKOWxIconOutline/pic{icon_number}.png", width=100)

    with st.expander("⚠️ Warning Message", expanded=True):
        st.markdown(f"{warning_message_en}")

    with st.expander("🌀 Typhoon Information", expanded=True):
        st.markdown(f"{tc_message_en}")

    if st.button("Refresh Data"):
        st.cache_data.clear()
        st.experimental_rerun()

    st.caption('Disclaimer/ Remarks:')
    st.caption('The data presented in this application is sourced from the Hong Kong Observatory (HKO) and the Common Spatial Data Infrastructure (CSDI) framework. Users should note that the data is provided by the respective organizations (HKO and CSDI) and may be subject to updates, revisions, or changes over time. The application does not independently verify the accuracy of the data and relies on the integrity of the original sources.')