from core.controllers.pages_controller import Page
from PIL import Image


class AboutMe(Page):
    variables_globales = {
    }
    archivos_css = ["main",
                    "about_me"]

    def __init__(self, title=str("whoami"), 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_bienvenido(self, columna):
        card_bienvenido = columna.container()

        card_bienvenido.header("Sobre la clasificación de imágenes",
                               help=None)
        card_bienvenido.markdown(unsafe_allow_html=False,
                                 help=None,
                                 body="""
                                 La **clasificación de imágenes en visión artificial** consiste en enseñar a una computadora a **identificar la categoría general de una fotografía**, como "perro" o "coche", en lugar de analizar detalles específicos o ubicar objetos.
                                 
                                 Este **proceso permite a la computadora** reconocer patrones y realizar **predicciones precisas en nuevas imágenes**. 
                                 """)

        imagen_demo1, imagen_demo2 = card_bienvenido.columns(2, gap="small")
        src_img_1 = Image.open("core/imagenes/shiba.png")
        src_img_2 = Image.open("core/imagenes/result.png")
        imagen_demo1.image(src_img_1,
                           use_column_width="auto")
        imagen_demo2.image(src_img_2,
                           use_column_width="auto")

        card_bienvenido.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").
                                 body="""
                                 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.
                                 """)

    def agregar_card_teoria(self, columna):
        card_teoria = columna.container()
        card_teoria.header("Teoría",
                           help=None)

    def agregar_card_live_demo(self, columna):
        card_live_demo = columna.container()
        card_live_demo.header("Demo",
                              help=None)

    def agregar_card_about_me(self, columna):
        card_about_me = columna.container()
        card_about_me.header("Desarrollado por:",
                             help=None)
        card_about_me.subheader("coder160",
                                help=None)

        social1, social2, social3, social4 = card_about_me.columns(
            4, gap="medium")
        social1.image("https://imagedelivery.net/5MYSbk45M80qAwecrlKzdQ/8c7c0f2b-5efe-45d3-3041-f6295bd2e600/preview",
                      use_column_width="auto")
        social2.image("https://imagedelivery.net/5MYSbk45M80qAwecrlKzdQ/8c7c0f2b-5efe-45d3-3041-f6295bd2e600/preview",
                      use_column_width="auto")
        social3.image("https://imagedelivery.net/5MYSbk45M80qAwecrlKzdQ/8c7c0f2b-5efe-45d3-3041-f6295bd2e600/preview",
                      use_column_width="auto")
        social4.image("https://imagedelivery.net/5MYSbk45M80qAwecrlKzdQ/8c7c0f2b-5efe-45d3-3041-f6295bd2e600/preview",
                      use_column_width="auto")

    def build(self):
        # secciones
        columna_bienvenido, columna_contenido = self.get_body().columns(2, gap="small")
        seccion_teoria, seccion_live_demo = columna_contenido.columns(
            2, gap="large")
        self.agregar_card_bienvenido(columna_bienvenido)
        self.agregar_card_teoria(seccion_teoria)
        self.agregar_card_live_demo(seccion_live_demo)
        self.agregar_card_about_me(columna_contenido)


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