from core.controllers.pages_controller import Page
from pages.Teoria import Teoria
from pages.LiveDemo import Live_Demo


class Home(Page):
    variables_globales = {
    }
    archivos_css = ["main",
                    "home"]

    def __init__(self, title=str("Bienvenido"), 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 = self.imgg.open("core/imagenes/shiba.png")
        src_img_2 = self.imgg.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)
        card_teoria.markdown(unsafe_allow_html=True,
                             help=None,
                             body="""<div id='texto_boton_teoria'>
                                 Conoce mas sobre los principios, fundamentos, personajes, avances:
                                 </div>
                                 """)
        card_teoria.button("Ver mas",
                           help="Botón hacia página de teoría",
                           on_click=self.hacia_teoria,
                           type="secondary",
                           use_container_width=True)

    def hacia_teoria(self):
        Teoria(init_page=True).build()
        self.page().stop()

    def agregar_card_live_demo(self, columna):
        card_live_demo = columna.container()
        card_live_demo.header("Demo",
                              help=None)
        card_live_demo.markdown(unsafe_allow_html=False,
                                help=None,
                                body="""
                                 Accede a la **demo** interactiva **utilizando** **transformers + google/ViT**.
                                 """)
        card_live_demo.button("Live-Demo",
                              help="Botón hacia página de live-demo",
                              on_click=self.hacia_demo,
                              type="secondary",
                              use_container_width=True)

    def hacia_demo(self):
        Live_Demo(init_page=True).build()
        self.page().stop()

    def agregar_card_about_me(self, columna):
        card_about_me = columna.container()
        card_about_me.header("Coder160",
                             help=None)

    def build(self):
        # secciones
        columna_bienvenido, columna_botones = self.get_body().columns(
            [0.7, 0.3], gap="medium")
        self.agregar_card_bienvenido(columna_bienvenido)
        self.agregar_card_teoria(columna_botones)
        self.agregar_card_live_demo(columna_botones)
        self.agregar_card_about_me(columna_botones)


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