app.py

import streamlit as st
import os

PATH = '/home/user/app'

# URL del mapa alojado en Google Cloud Storage
url_mapa_1 = "https://storage.cloud.google.com/cienciadedatosaplicada/monterrey_distintos_servicios.html"
url_mapa_2 = "https://storage.cloud.google.com/cienciadedatosaplicada/monterrey_prop_distancias.html"
url_mapa_3 = "https://storage.cloud.google.com/cienciadedatosaplicada/monterrey_proporcional_area.html"
url_mapa_4 = "https://storage.cloud.google.com/cienciadedatosaplicada/monterrey_map_v16.html"

def leer_html(archivo):
    with open(archivo, 'r', encoding='utf-8') as f:
        return f.read()

# Configuración de la página (opcional)
st.set_page_config(
    page_title="Nuevo León, ¿qué tan cerca estamos?",
    page_icon="🌎"
)

# Agregar una imagen desde una URL
image_url = "https://encrypted-tbn1.gstatic.com/licensed-image?q=tbn:ANd9GcQsuDIUTgNKAphfuhfZy4Sxp7wQKy6shMUlaoAwY5-BqcM4jxNDQL8NKJI0rJhxQ0ao0km6Eb7Y13unDA13tdbiQ7qYXXAfGeNSBms6tw"
st.image(image_url, caption="El Cerro de la Silla es una montaña que forma parte del sistema de estribaciones de la Sierra Madre Oriental.", use_column_width=True)

# Personalización con HTML y CSS
st.markdown(
    """
    <style>
    .main {
        background-color: #E6E6FA;
    }
    .stButton>button {
        color: white;
        background-color: #4CAF50;
        border-radius:10px;
        border:none;
    }
    .stTextInput>div>div>input {
        border-radius: 10px;
    }
    </style>
    """,
    unsafe_allow_html=True
)

# Encabezado principal
st.markdown("<h1 style='text-align: center; color: black;'>Nuevo León, ¿qué tan cerca estamos?</h1>", unsafe_allow_html=True)

# Enlace a Google Drive
st.markdown(
    "<p style='text-align: center'>Para más información sobre la implementación del proyecto, visita la siguiente carpeta de Drive: "
    "<a href='https://drive.google.com/drive/folders/12V3pYk_DCqunlxFsUEvn9e3KZnXCmUYc?usp=sharing'>QuéTanCercaEstamos</a></p>",
    unsafe_allow_html=True
)

st.markdown("""
### Consideraciones del proyecto:

- Todos los mapas son de libre acceso y se encuentran en archivos en la carpeta data y podrán ser descargados.
- Los mapas incrustados en esta aplicación podrán no ser visibles debido a falta de acceso al bucket de Google Cloud en el que se encuentran almacenados

""")

st.markdown("""
### Equipo:
- Adaya Isui Escobar Fortis 198054
- Diana Isabel Muñoz Castillo 196914
- Sebastián Murillo García 

# Caracterización del problema

El objetivo principal de este proyecto es visualizar las necesidades a lo largo del tiempo en la percepción de la desigualdad en el acceso a servicios públicos por zonas AGEB del AMM (Área Metropolitana de Monterrey). La finalidad es hacer que esta información sea pública para la ciudadanía y sea tomada en cuenta por el gobierno.

## Afectados

Los afectados son la población de los diferentes municipios de la AMM, que totalizan 5.78 millones en el año 2020. "El ingreso promedio del 10% más rico es 33.5 veces más que el del 10% más pobre."

## Prioridad del Problema

Es prioritario resolver este problema ya que afecta la calidad de vida de los ciudadanos y su percepción de bienestar. Comunicar las necesidades del AMM a la ciudadanía y las autoridades facilitaría un canal de rendición de cuentas que podría mejorar la situación actual. Además, esta iniciativa podría replicarse en otras partes del país.

"7 de cada 10 personas que habitan en el Área Metropolitana de Monterrey perciben no vivir en un barrio completo, es decir, no cuentan con 13 servicios básicos a los que puedan llegar caminando desde su hogar."
~ *Nuevo León, ¿cómo vamos?, 2022*

## Stakeholders

### Internos
- Nuevo León, ¿cómo vamos?
- ITAM / Prof. Andrés
- Equipo

### Externos
- Posibles tomadores de decisiones públicas
- La población del AMM
- Empresas
- Otros posibles colaboradores

## Metas

### Objetivo principal

Proponemos desarrollar un *Dashboard* que centralice, ordene y encuentre patrones de los resultados de la encuesta realizada por *Nuevo León, ¿cómo vamos?*.

Este tablero estará integrado con un mapa interactivo que, a modo de semáforo, mostrará con colores la situación de cada municipio en términos de servicios y bienestar, basándose en los datos de la encuesta y la densidad de servicios públicos.

A través de otro mapa, los usuarios podrán identificar fácilmente los servicios más próximos a ellos, ya sea en línea recta o utilizando la API de Google Maps.

Buscaremos encontrar correlaciones entre diferentes métricas o variables, y por último, con técnicas avanzadas de aprendizaje automático, segmentaremos a la población para ofrecer insights más profundos y personalizados. Con esta herramienta, aspiramos a proporcionar a la comunidad una visión clara y accesible del estado de su entorno urbano.

## Primera entrega

Durante la realización de la primera entrega nuestro enfoque más fuerte fue la planeación del proyecto y el contacto con la organización de Nuevo León, ¿Cómo vamos?

### Realizamos:
- Investigación sobre soluciones anteriores al problema
- Realizamos un análisis de datos exploratorio sobre las encuestas y las variables utilizables

""")

# Enlace a Jupyter de EDA
st.markdown(
    "<p style='text-align: center'>Para acceder al notebook del análisis exploratorio ingresa a: "
    "<a href='https://colab.research.google.com/drive/1FzrT6Dzyq7DlqqO2dw8Wb_D9k9MW8HM7?usp=sharing'>EDA</a></p>",
    unsafe_allow_html=True
)

st.markdown("""
- Concluimos que eran difíciles de homogeneizar y al final no recibimos tanto apoyo por parte de la organización, por lo que nos planteamos cambiar de estrategia.
- Hicimos nuestro plan estructurado para el proyecto y planteamos:
""")

st.markdown("""
### Metas:
""")
html_metas = leer_html(f"{PATH}/data/Metas.html")
st.markdown(html_metas, unsafe_allow_html=True)

st.markdown("""
### Acciones:
""")
html_acciones = leer_html(f"{PATH}/data/Acciones.html")
st.markdown(html_acciones, unsafe_allow_html=True)

st.markdown("""
### Posibles modelos de análisis:
""")
html_modelos = leer_html(f"{PATH}/data/Análisis y modelos.html")
st.markdown(html_modelos, unsafe_allow_html=True)

st.markdown("""
### Datos que se utilizarán:
""")
html_datos = leer_html(f"{PATH}/data/Datos.html")
st.markdown(html_datos, unsafe_allow_html=True)

st.markdown("""
### Base ética:
""")
html_etica = leer_html(f"{PATH}/data/Ética.html")
st.markdown(html_etica, unsafe_allow_html=True)

st.markdown("""
## Segunda entrega

- Después de una conversación con Lesly y con el profesor Andrés, llegamos a la conclusión de que el mapa con los servicios del estado podría ser muy informativo como proyecto, además podría ayudar a los ciudadanos tanto a saber dónde están los servicios más cercanos a ellos, como saber qué tan bien abastecido de servicios está el AGEB en el que se encuentran, y a qué distancia en promedio.
- Cambiamos el enfoque del proyecto para enfocarnos en los mapas y métricas de calidad de vida según la cantidad de servicios. 
- A partir de datos de la DENUE, INEGI y mapas de Monterrey, hicimos un análisis en python que conectaba a cada servicio con su respectivo AGEB, municipio, tipo de servicio, y un punto de coordenadas.
- Una vez teniendo estos datos, elaboramos un mapa de coropletas que cambiaba de color los AGEBS en una escala de rojo a verde, donde rojo eran unidades que tenían muy pocos de los 13 servicios necesarios según la DENUE. 
- El mapa también incluía los puntos de cada servicio en la ciudad, cada punto tenía un popup que decía algunas de sus características, además de estar clasificados por colores. (estaría padre importar aquí una imagen de la leyenda).
- Evaluamos las APIs posibles de implementar al proyecto cuando calculáramos distancias a los servicios.
- Concluimos que el análisis estaba interesante, sin embargo, es probable que hubiera sesgos por el tamaño de los AGEB, por lo que la siguiente entrega intentaría usar regularizadores u otras métricas para obtener mejores representaciones.

### Mapa por cantidad de distintos tipos de servicios (Versión 1)
""")

iframe = f'<iframe src="{url_mapa_4}" width="700" height="500"></iframe>'
st.markdown(iframe, unsafe_allow_html=True)

st.markdown("""
## Entrega final

Para la entrega final nos enfocamos en refinar el mapa según métricas que fueran más proporcionales y nos dieran información sobre la calidad de servicios por municipio, en lugar de sólo por AGEB como habíamos planteado inicialmente. En específico:
- Conservamos el primer mapa con el conteo total de servicios por AGEB como una capa independiente, pero añadimos una nueva capa por municipio.
- Elaboramos un segundo mapa que considerara la proporción de servicios que hay con respecto al área en la que se encuentran.
- Elaboramos un tercer mapa que considerara como factor la distancia promedio que hay del centro del AGEB a sus servicios, estableciendo una nueva métrica de cercanía.
- Al final no se implementó el uso de la API de Google para las distancias sino que utilizamos distancias euclidianas.
- Subimos el proyecto a hugging face para hacer una interfaz más amigable con el usuario y mejorar el rendimiento de los mapas.
""")


# Selector para que el usuario elija el mapa
opcion = st.selectbox(
    'Elige un mapa para visualizar:',
    ('Tipo de servicio', 'Proporción total de servicios', 'Distancia promedio al centroide')
)

# Mostrar el mapa seleccionado
if opcion == 'Tipo de servicio':
    # Incrustar el mapa usando HTML
    iframe = f'<iframe src="{url_mapa_1}" width="700" height="500"></iframe>'
    st.markdown(iframe, unsafe_allow_html=True)
elif opcion == 'Proporción total de servicios':
    # Incrustar el mapa usando HTML
    iframe = f'<iframe src="{url_mapa_3}" width="700" height="500"></iframe>'
    st.markdown(iframe, unsafe_allow_html=True)
elif opcion == 'Distancia promedio al centroide':
    # Incrustar el mapa usando HTML
    iframe = f'<iframe src="{url_mapa_2}" width="700" height="500"></iframe>'
    st.markdown(iframe, unsafe_allow_html=True)

st.markdown("""
## Conclusiones
- En general, entre más a la periferia de la ciudad, la cantidad de servicios disminuye sin importar la métrica utilizada. 
- En el sur, la distancia promedio entre los servicios y el centroide es menor.
- El municipio que más servicios distintos tiene es Santa Catarina.
- El municipio con menor distancia promedio entre los servicios y el centroide es Santiago.
- El municipio con mejor proporción entre la cantidad de servicios y el área es Santa Catarina.

## Limitaciones
- Un intento del uso de Google terminó en más de 6,000 pesos en créditos, y no había calculado distancias ni para la mitad de los puntos.
- Al final no pudimos analizar un histórico de la percepción ciudadana por los problemas en la comunicación y los datos de las encuestas de Nuevo León ¿Cómo vamos? En específico el problema provino de la cantidad de variables y dificultad para homogeneizar sus bases.
""")

st.image(f"{PATH}/data/Costos.png", caption='Imagen local', use_column_width=True)