pages/Teoria.py

from core.controllers.pages_controller import Page


class Teoria(Page):
    variables_globales = {
    }
    archivos_css = ["main",
                    "teoria"]
    avances = [
        {"fecha": 1960,
         "texto": "Aparece 1"},
        {"fecha": 1970,
         "texto": "Aparece 2"},
        {"fecha": 1980,
         "texto": "Aparece 3"},
        {"fecha": 1990,
         "texto": "Aparece 4"},
        {"fecha": 2000,
         "texto": "Aparece 5"},
        {"fecha": 2010,
         "texto": "Aparece 6"},
        {"fecha": 2020,
         "texto": "Aparece 7"}
    ]
    fuentes = [
        {"titulo": "Analysis of Classification by Supervised and Unsupervised Learning",
         "url": "https://www.computer.org/csdl/proceedings-article/iccima/2007/30500280/12OmNzxyiHV"},
        {"titulo": "Implementation of Interval Arithmetic Algorithms on FPGAs",
         "url": "https://dl.acm.org/doi/10.1109/ICCIMA.2007.237"},
        {"titulo": "La Noticia 3",
         "url": "https://enlace3.com"},
        {"titulo": "La Noticia 4",
         "url": "https://enlace4.com"},
        {"titulo": "La Noticia 5",
         "url": "https://enlac5.com"},
        {"titulo": "La Noticia 6",
         "url": "https://enlace6.com"},
    ]

    def __init__(self, title=str("Teoría"), icon=str("🖼️"), init_page=False):
        super().__init__()
        if init_page:
            self.new_page(title=title, icon=icon)
            self.new_body(True)
        self.init_globals(globals=self.variables_globales)
        for archivo in self.archivos_css:
            self.cargar_css(archivo_css=archivo)

    def agregar_card_fundamentos(self, columna):
        card_fundamentos = columna.container()
        card_fundamentos.markdown(
            unsafe_allow_html=False,
            help=None,
            body="""
            ## Sobre el origen de la tecnología
            """)
        expander = card_fundamentos.expander(
            expanded=False,
            label="Aspectos básicos y fundamentales de la clasificación de imágenes."
        )
        expander.markdown(
            unsafe_allow_html=False,
            help=None,
            body="""
            La **visión artificial** es un **campo interdisciplinario** que busca **emular la percepción visual humana** utilizando **sistemas computacionales**.
            
            La **clasificación de imágenes**, es una rama esencial de la **visión artificial**, se refiere a la **capacidad de las computadoras** para **identificar y categorizar** objetos y patrones en **imágenes visuales.** 
            """)
        imagen_intro1, imagen_intro2, imagen_intro3 = expander.columns(
            3, gap="small")
        src_imgI_1 = self.imgg.open("core/imagenes/shiba.png")
        src_imgI_2 = self.imgg.open("core/imagenes/shiba.png")
        src_imgI_3 = self.imgg.open("core/imagenes/shiba.png")
        imagen_intro1.image(
            src_imgI_1,
            use_column_width="auto"
        )
        imagen_intro2.image(
            src_imgI_2,
            use_column_width="auto"
        )
        imagen_intro3.image(
            src_imgI_3,
            use_column_width="auto"
        )
        expander.markdown(
            unsafe_allow_html=False,
            help=None,
            body="""
            La **clasificación de imágenes** tuvo sus inicios en las **décadas de 1960 y 1970**, cuando los **investigadores** comenzaron a explorar **métodos** para la **detección** de bordes y formas elementales en **imágenes** [Roberts, 1973]. Fue en este **período** cuando se sentaron las **bases** para la **comprensión** computacional del **contenido visual**.

            Las **primeras aplicaciones** de la **clasificación de imágenes** se centraron en la **detección y reconocimiento** de patrones básicos en **imágenes**, con **aplicaciones** en campos como la **industria manufacturera** y la **inspección de calidad**.
            
            A lo largo de su **evolución**, la **clasificación de imágenes** por computadora ha experimentado **avances** notables.
            """)
        imagen_outro1, imagen_outro2 = expander.columns(2, gap="small")
        src_imgO_1 = self.imgg.open("core/imagenes/shiba.png")
        src_imgO_2 = self.imgg.open("core/imagenes/shiba.png")
        imagen_outro1.image(
            src_imgO_1,
            use_column_width="auto"
        )
        imagen_outro2.image(
            src_imgO_2,
            use_column_width="auto"
        )
        expander.markdown(
            unsafe_allow_html=False,
            help=None,
            body="""
            Desde su **descubrimiento** en la década de **1960**, la introducción de **redes neuronales convolucionales** (CNN) en los **90's**, incluyendo la última década, marcada por la adopción de **modelos** pre-entrenados con **transformers**, como el **Vision Transformer** (ViT) en **2021** y el **Swin Transformer** en el mismo año, se ha presenciado una **transición significativa** en la **capacidad** de las **computadoras** para **comprender y categorizar contenido visual**, impulsando la **visión artificial** hacia nuevas fronteras de **eficiencia y precisión** en la **clasificación de imágenes**.
            """)
        card_fundamentos.markdown(
            unsafe_allow_html=False,
            help=None,
            body="""
            ##### La **clasificación de imágenes**, esencial en **visión artificial**, implica que las **computadoras identifiquen objetos en imágenes.**
            """)

    def agregar_card_avances(self, columna):
        card_avances = columna.container()

        card_avances.markdown(
            unsafe_allow_html=False,
            help=None,
            body="""
            ## Línea de tiempo.
            """)
        expander = card_avances.expander(
            expanded=False,
            label="Avances, desarrollos y aplicaciones a través de la historia."
        )
        expander.markdown(
            unsafe_allow_html=False,
            help=None,
            body="""
            Desde la **década de 1960** hasta la **actualidad**, la **clasificación de imágenes** por **visión artificial** ha tenido **grandes avances**.
            
            A continuación puede **ver** de forma **interactiva** algunos de estos **avances**.
            """)
        a_inicio, a_fin = expander.select_slider(
            label='Seleccione un rango de fecha',
            options=[avance.get('fecha') for avance in self.avances],
            value=(self.avances[1].get('fecha'), self.avances[2].get('fecha')))
        expander.markdown(
            unsafe_allow_html=False,
            help=None,
            body=f"""
            ##### Algunos acontecimientos desde {a_inicio} hasta {a_fin} incluyen:
            """
        )
        for fecha in range(a_inicio, a_fin+1):
            for avance in self.avances:
                if fecha == avance.get('fecha'):
                    expander.markdown(
                        unsafe_allow_html=False,
                        help=None,
                        body=f"""
                        ###### **{avance.get('fecha')}** : *{avance.get('texto')}*
                        """
                    )
        card_avances.markdown(
            unsafe_allow_html=False,
            help=None,
            # Esto se logra mediante el entrenamiento de **algoritmos de aprendizaje profundo**, como las **redes neuronales convolucionales (CNN)** o modelos basados en **Transformers**. Estos algoritmos se entrenan utilizando un **amplio conjunto de datos** de imágenes etiquetadas, donde cada imagen tiene una **etiqueta que describe** su contenido (por ejemplo, "gato" o "árbol").
            # A continuación veremos cómo la librería Transformers utiliza el **modelo pre-entrenado Google/ViT**, entrenado con un conjunto de datos de más de 14 millones de imágenes, etiquetadas en más de 21,000 clases diferentes, todas con una resolución de 224x224.
            body="""
            ##### Desde sus **orígenes** hasta la **actualidad**, la **clasificación de imágenes** ha tenido **grandes avances** en el campo de la **automatización e inteligencia artificial**.
            
            """)

    def agregar_card_fuentes(self, columna):
        card_fuentes = columna.container()
        card_fuentes.markdown(
            unsafe_allow_html=False,
            help=None,
            body="""
            ## Fuentes
            """)
        expander = card_fuentes.expander(
            expanded=False,
            label="Enlaces de referencia."
        )

        for fuente in self.fuentes:
            expander.markdown(
                unsafe_allow_html=False,
                help=None,
                body=f"""
                ###### * **{fuente.get('titulo')}:**

                *Enlace: {fuente.get('url')}*
                """
                )
        card_fuentes.markdown(
            unsafe_allow_html=False,
            help=None,
            body="""
            ###### Es **importante** mencionar que esta **compilación** se encuentra en proceso de **construcción**.
            
            *Si deseas **participar**, eres **bienvenido** de aportar en el repositorio oficial:*
            
            https://github.com/coder160/demos/
            """)

    def build(self):
        # secciones
        columna_principal = self.get_body().columns(1, gap="small")[0]
        
        self.agregar_card_fundamentos(columna_principal)
        self.agregar_card_avances(columna_principal)
        self.agregar_card_fuentes(columna_principal)


if __name__ == "__main__":
    Teoria(init_page=True).build()