update home

Home.py

@@ -1,10 +1,17 @@
 from core.controllers.pages_controller import Page
-from pages.Teoria import Teoria
-from pages.LiveDemo import Live_Demo
+from core.controllers.main_process import Generador
 
 
 class Home(Page):
     variables_globales = {
+        "img_bytes": None,
+        "img_src": None,
+        "settings": {
+            "model": str("google/vit-base-patch16-224"),
+            "tokenizer": str("google/vit-base-patch16-224"),
+        },
+        "img_output": None,
+        "predicciones": None,
     }
     archivos_css = ["main",
                     "home"]
@@ -12,92 +19,131 @@ class Home(Page):
     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.new_page(title=title,
+                          icon=icon)
         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,
+    def obtener_bytes(self, archivo):
+        self.set_global(key='img_src',
+                        value=archivo)
+        self.set_global(key='img_bytes',
+                        value=archivo.getvalue())
+
+    def actualizar_modelo_tokenizer(self, modelo, tokenizer):
+        self.set_global(key='settings',
+                        value={'model': modelo,
+                               'tokenizer': tokenizer})
+
+    def procesar_imagen(self):
+        proceso = Generador(configuraciones=self.get_global('settings'))
+        proceso.generar_prediccion(imagen_bytes=self.imgg.open(
+            self.get_global('img_src')).convert("RGB"))
+        self.set_global(key='img_output', value=self.get_global('img_bytes'))
+        self.set_global(key='predicciones', value=proceso.prediccion)
+
+    def expander_instrucciones(self, placeholder):
+        instrucciones = placeholder.expander(expanded=False,
+                                             label="Instrucciones")
+        instrucciones.markdown(unsafe_allow_html=False,
+                               help=None,
+                               body="""
+                               1.   **Cargue su Imagen Base**:
+
+                               De click o toque con el dedo en la opción *"Imagen Base"* para cargar su imagen.
+
+                               Tendrá dos opciones para cargar su imagen:
+
+                               *    **Desde Galería**: cargue la imagen desde la galería de su teléfono o computadora.
+
+                               *    **Desde su cámara**: cargue la imagen directamente desde la cámara de su teléfono o computadora.
+
+
+                               2.   **Clasificación / Predicciones**:
+
+                               Realice la **clasificación de su imagen** con base a las predicciones realizadas por el **modelo** pre-entrenado seleccionado.
+
+                               A partir del dataset con el que fue pre-entrenado el modelo, tratará de predecir cuales son los objetos en la imagen cargada.
+
+
+                               *    **Configuraciones Avanzadas**:
+
+                               *Elija un modelo y procesador de la lista disponible, o elija uno directamente de la base de modelos disponible en HuggingFace.*
+                               """)
+
+    def expander_imagen_base(self, placeholder):
+        imagen_base = placeholder.expander(expanded=False,
+                                           label="Imagen base")
+        imagen_base.markdown(unsafe_allow_html=False,
                              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)
+                             body="""
+                             **Cargue su Imagen Base**:
+                             """)
+        archivo_expander = imagen_base.expander(expanded=False,
+                                                label="Desde galería")
+        _archivo = archivo_expander.file_uploader(label="Galería",
+                                                  accept_multiple_files=False,
+                                                  label_visibility="visible")
+        if (archivo_expander.button(label="Cargar Archivo", help="Suba un archivo.",
+                                    type="secondary", use_container_width=True) and _archivo is not None):
+            self.obtener_bytes(_archivo)
+
+        camara_expander = imagen_base.expander(
+            expanded=False, label="Desde cámara")
+        _captura = camara_expander.camera_input(
+            label="Cámara", label_visibility="visible")
+        if (camara_expander.button(label="Cargar Captura", type="secondary", use_container_width=True,
+                                   help="Tome una fotografía.") and _captura is not None):
+            self.obtener_bytes(_captura)
+
+    def expander_configuraciones(self, placeholder):
+        configuraciones = placeholder.expander(
+            expanded=False, label="Configuraciones")
+        modelo = configuraciones.text_input(
+            label="MODELO", on_change=None, label_visibility="visible",
+            value=self.get_global('settings').get('model'))
+        tokenizer = configuraciones.text_input(
+            label="TOKENIZER", on_change=None, label_visibility="visible",
+            value=self.get_global('settings').get('tokenizer'))
+
+        if configuraciones.button(label="Configurar", type="secondary", use_container_width=True,
+                                  help="Actualice configuraciones"):
+            self.actualizar_modelo_tokenizer(modelo, tokenizer)
+
+    def resultados(self, placeholder):
+        card_teoria = placeholder.container()
+
+        if self.get_global('img_output', None) is not None:
+            card_teoria.image(
+                image=self.get_global('img_output'),
+                caption="Su resultado",
+                use_column_width="auto",
+                channels="RGB",
+                output_format="auto"
+            )
+            if self.get_global('predicciones', None) is not None:
+                card_teoria.success(body=self.get_global(
+                    'predicciones'), icon=None)
+
+    def agregar_card_base(self, columna):
+        card_principal = columna.container()
+
+        columna_inputs, columna_outputs = card_principal.columns(
+            2, gap="small")
+
+        self.expander_instrucciones(columna_inputs)
+        self.expander_imagen_base(columna_inputs)
+        self.expander_configuraciones(columna_inputs)
+        if columna_inputs.button(label="Clasificar", help="Realizar Predicciones",
+                                 type="secondary", use_container_width=True):
+            self.procesar_imagen()
+        self.resultados(columna_outputs)
 
     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)
+        columna_principal = self.get_body().columns(1, gap="small")[0]
+        self.agregar_card_base(columna_principal)
 
 
 if __name__ == "__main__":