update onepage

Home.py

@@ -28,8 +28,6 @@ class Home(Page):
     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',
@@ -40,7 +38,6 @@ class Home(Page):
         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):
@@ -53,12 +50,12 @@ class Home(Page):
 
                                Elija cualquiera de las dos opciones para cargar su imagen:
 
-                               *    **Desde Galería**: cargue la imagen desde la galería de su teléfono o computadora.
+                               *    **Desde su 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.
+                               *    **Desde su Cámara**: cargue la imagen directamente desde la cámara de su teléfono o computadora.
 
 
-                               2.   **Clasificación / Predicciones**:
+                               2.   **Clasificar / Predecir**:
 
                                Realice la **clasificación de su imagen** con base a las predicciones realizadas por el **modelo** pre-entrenado seleccionado.
 
@@ -78,18 +75,18 @@ class Home(Page):
                              **Cargue su Imagen Base**:
                              """)
         archivo_expander = imagen_base.expander(expanded=False,
-                                                label="Desde galería")
+                                                label="Desde su 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):
+        if (archivo_expander.button(label="Cargar Archivo", type="secondary", use_container_width=True,
+                                    help="Suba un archivo.") 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")
+        camara_expander = imagen_base.expander(expanded=False, 
+                                               label="Desde su 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)
@@ -111,9 +108,9 @@ class Home(Page):
     def resultados(self, placeholder):
         resultados = placeholder.container()
 
-        if self.get_global('img_output', None) is not None:
+        if self.get_global('img_src', None) is not None:
             resultados.image(
-                image=self.get_global('img_output'),
+                image=self.get_global('img_src').getvalue(),
                 caption="Su resultado",
                 use_column_width="auto",
                 channels="RGB",

core/estilos/about_me.css

@@ -1,41 +0,0 @@
-/* Estilo Cards */
-[data-testid="stVerticalBlock"]>[style*="flex-direction: column;"]>[data-testid="stVerticalBlock"] {
-    background-color: #070707d1;
-    box-shadow: 1px 1px 2px 2px #000000d2;
-    box-sizing: border-box;
-    padding: 4px 0px 20px 0px;
-    border-radius: 14px;
-    backdrop-filter: blur(4px);
-    transition: ease-out;
-    transition-property: background-color box-shadow transition;
-    transition-duration: 88ms;
-}
-
-/* Estilo Cards:Hover*/
-[data-testid="stVerticalBlock"]>[style*="flex-direction: column;"]>[data-testid="stVerticalBlock"]:hover {
-    background-color: #070707d0;
-    border: 2px thin;
-    box-shadow: 2px 2px 3px 3px #000000fe;
-    transition: ease-in;
-    transition-property: background-color box-shadow transition;
-    transition-duration: 110ms;
-}
-
-
-/* Interno Card: Titulo  */
-[data-testid="stVerticalBlock"]>[style*="flex-direction: column;"]>[data-testid="stVerticalBlock"]>[data-testid="element-container"]>.stHeadingContainer {
-    text-align: center;
-    align-self: center;
-}
-
-/* Interno Card: Texto */
-[data-testid="stVerticalBlock"]>[style*="flex-direction: column;"]>[data-testid="stVerticalBlock"]>[data-testid="element-container"]>.stTextLabelWrapper>[data-testid="stText"] {
-    padding: 0px 8px 0px 8px;
-}
-
-/* Interno Card: Row Imágenes  */
-[data-testid="stVerticalBlock"]>[style*="flex-direction: column;"]>[data-testid="stVerticalBlock"]>[data-testid="stHorizontalBlock"] {
-    padding: 0px 8px 0px 8px;
-}
-
-

core/estilos/live_demo.css

@@ -1,81 +0,0 @@
-/* Estilo Cards */
-[data-testid="stVerticalBlock"]>[style*="flex-direction: column;"]>[data-testid="stVerticalBlock"] {
-    background-color: #070707ef;
-    box-shadow: 1px 1px 2px 2px #000000d2;
-    box-sizing: border-box;
-    padding: 4px 0px 20px 0px;
-    border-radius: 14px;
-    backdrop-filter: blur(4px);
-    transition: ease-out;
-    transition-property: background-color box-shadow transition;
-    transition-duration: 88ms;
-}
-
-/* Estilo Cards:Hover*/
-[data-testid="stVerticalBlock"]>[style*="flex-direction: column;"]>[data-testid="stVerticalBlock"]:hover {
-    background-color: #070707d0;
-    border: 2px thin;
-    box-shadow: 2px 2px 3px 3px #000000fe;
-    transition: ease-in;
-    transition-property: background-color box-shadow transition;
-    transition-duration: 110ms;
-}
-
-
-/* Interno Card: Titulo  */
-[data-testid="stVerticalBlock"]>[style*="flex-direction: column;"]>[data-testid="stVerticalBlock"]>[data-testid="element-container"]>.stHeadingContainer {
-    text-align: center;
-    align-self: center;
-}
-
-/* Interno Card: Texto */
-[data-testid="stVerticalBlock"]>[style*="flex-direction: column;"]>[data-testid="stVerticalBlock"]>[data-testid="element-container"]>.stTextLabelWrapper>[data-testid="stText"] {
-    padding: 0px 8px 0px 8px;
-}
-
-/* Interno Card: Markup */
-[data-testid="stVerticalBlock"]>[style*="flex-direction: column;"]>[data-testid="stVerticalBlock"]>[data-testid="element-container"]>.stMarkdown>[data-testid="stMarkdownContainer"] {
-    padding: 0px 8px 0px 8px;
-}
-
-/* Interno Card: Row imagenes  */
-[data-testid="stVerticalBlock"]>[style*="flex-direction: column;"]>[data-testid="stVerticalBlock"]>[data-testid="stHorizontalBlock"] {
-    padding: 0px 8px 0px 8px;
-    display: flex;
-}
-
-/* Interno Card: Imágenes  */
-[data-testid="stVerticalBlock"]>[style*="flex-direction: column;"]>[data-testid="stVerticalBlock"]>[data-testid="stHorizontalBlock"]>[data-testid="column"] {
-    display: flex;
-    justify-content: center;
-    align-items: center;
-}
-
-/* Interno Card: Botones  */
-[data-testid="stVerticalBlock"]>[style*="flex-direction: column;"]>[data-testid="stVerticalBlock"]>[data-testid="element-container"]>[data-testid="stButton"]>.stTooltipIcon>div>[data-testid="stTooltipIcon"]>[data-testid="tooltipHoverTarget"]{
-    padding: 8px;
-    display: flex;
-    justify-content: center;
-    text-align: center;
-    width: 100%;
-}
-
-
-/* Interno Card: Expander */
-[data-testid="stVerticalBlock"]>[style*="flex-direction: column;"]>[data-testid="stVerticalBlock"]>[data-testid="stExpander"]>ul {
-    background-color: transparent;
-    box-shadow: none;
-    border: none;
-}
-
-/* Estilo Expander:Hover*/
-[data-testid="stVerticalBlock"]>[style*="flex-direction: column;"]>[data-testid="stVerticalBlock"]:hover {
-    background-color: #070707d0;
-    border: 2px thin;
-    box-shadow: 2px 2px 3px 3px #000000fe;
-    transition: ease-in;
-    transition-property: background-color box-shadow transition;
-    transition-duration: 110ms;
-}
-
-

core/estilos/teoria.css

@@ -1,81 +0,0 @@
-/* Estilo Cards */
-[data-testid="stVerticalBlock"]>[style*="flex-direction: column;"]>[data-testid="stVerticalBlock"] {
-    background-color: #070707ef;
-    box-shadow: 1px 1px 2px 2px #000000d2;
-    box-sizing: border-box;
-    padding: 4px 0px 20px 0px;
-    border-radius: 14px;
-    backdrop-filter: blur(4px);
-    transition: ease-out;
-    transition-property: background-color box-shadow transition;
-    transition-duration: 88ms;
-}
-
-/* Estilo Cards:Hover*/
-[data-testid="stVerticalBlock"]>[style*="flex-direction: column;"]>[data-testid="stVerticalBlock"]:hover {
-    background-color: #070707d0;
-    border: 2px thin;
-    box-shadow: 2px 2px 3px 3px #000000fe;
-    transition: ease-in;
-    transition-property: background-color box-shadow transition;
-    transition-duration: 110ms;
-}
-
-
-/* Interno Card: Titulo  */
-[data-testid="stVerticalBlock"]>[style*="flex-direction: column;"]>[data-testid="stVerticalBlock"]>[data-testid="element-container"]>.stHeadingContainer {
-    text-align: center;
-    align-self: center;
-}
-
-/* Interno Card: Texto */
-[data-testid="stVerticalBlock"]>[style*="flex-direction: column;"]>[data-testid="stVerticalBlock"]>[data-testid="element-container"]>.stTextLabelWrapper>[data-testid="stText"] {
-    padding: 0px 8px 0px 8px;
-}
-
-/* Interno Card: Markup */
-[data-testid="stVerticalBlock"]>[style*="flex-direction: column;"]>[data-testid="stVerticalBlock"]>[data-testid="element-container"]>.stMarkdown>[data-testid="stMarkdownContainer"] {
-    padding: 0px 8px 0px 8px;
-}
-
-/* Interno Card: Row imagenes  */
-[data-testid="stVerticalBlock"]>[style*="flex-direction: column;"]>[data-testid="stVerticalBlock"]>[data-testid="stHorizontalBlock"] {
-    padding: 0px 8px 0px 8px;
-    display: flex;
-}
-
-/* Interno Card: Imágenes  */
-[data-testid="stVerticalBlock"]>[style*="flex-direction: column;"]>[data-testid="stVerticalBlock"]>[data-testid="stHorizontalBlock"]>[data-testid="column"] {
-    display: flex;
-    justify-content: center;
-    align-items: center;
-}
-
-/* Interno Card: Botones  */
-[data-testid="stVerticalBlock"]>[style*="flex-direction: column;"]>[data-testid="stVerticalBlock"]>[data-testid="element-container"]>[data-testid="stButton"]>.stTooltipIcon>div>[data-testid="stTooltipIcon"]>[data-testid="tooltipHoverTarget"]{
-    padding: 8px;
-    display: flex;
-    justify-content: center;
-    text-align: center;
-    width: 100%;
-}
-
-
-/* Interno Card: Expander */
-[data-testid="stVerticalBlock"]>[style*="flex-direction: column;"]>[data-testid="stVerticalBlock"]>[data-testid="stExpander"]>ul {
-    background-color: transparent;
-    box-shadow: none;
-    border: none;
-}
-
-/* Estilo Expander:Hover*/
-[data-testid="stVerticalBlock"]>[style*="flex-direction: column;"]>[data-testid="stVerticalBlock"]:hover {
-    background-color: #070707d0;
-    border: 2px thin;
-    box-shadow: 2px 2px 3px 3px #000000fe;
-    transition: ease-in;
-    transition-property: background-color box-shadow transition;
-    transition-duration: 110ms;
-}
-
-

pages/Aboutme.py

@@ -1,88 +0,0 @@
-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()

pages/LiveDemo.py

@@ -1,144 +0,0 @@
-from core.controllers.pages_controller import Page
-from core.controllers.main_process import Generador
-
-
-class Live_Demo(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",
-                    "live_demo"]
-
-    def __init__(self, title=str("Live-Demo"), 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 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):
-        _settings = {'model': modelo,
-                     'tokenizer': tokenizer}
-        self.set_global(key='settings', value=_settings)
-
-    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 archivo_expander(self, section):
-        archivo_expander = section.expander(
-            expanded=False,
-            label="Desde su galería"
-        )
-        _archivo = archivo_expander.file_uploader(
-            label="GALERIA",
-            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)
-
-    def camara_expander(self, section):
-        camara_expander = section.expander(
-            expanded=False,
-            label="Desde su cámara"
-        )
-        _captura = camara_expander.camera_input(
-            label="CAMARA",
-            label_visibility="visible"
-        )
-        if (camara_expander.button(label="Cargar Captura", help="Tome una fotografía.",
-                                   type="secondary", use_container_width=True) and _captura is not None):
-            self.obtener_bytes(_captura)
-
-    def preview_expander(self, section):
-        preview = section.expander(
-            expanded=True,
-            label="Todo listo"
-        )
-        if self.get_global('img_bytes', None) is not None:
-            preview.image(
-                image=self.get_global('img_bytes'),
-                caption="Su imagen",
-                use_column_width="auto",
-                channels="RGB",
-                output_format="auto"
-            )
-        if preview.button(label="LAUNCH", help="Procesar imagen",
-                          type="secondary", use_container_width=True):
-            self.procesar_imagen()
-
-    def config_expander(self, section):
-        modelo = section.text_input(
-            label="MODELO",
-            value=self.get_global('settings').get('model'),
-            key=None,
-            help=None,
-            on_change=None,
-            disabled=False,
-            label_visibility="visible"
-        )
-        tokenizer = section.text_input(
-            label="TOKENIZER",
-            value=self.get_global('settings').get('tokenizer'),
-            key=None,
-            help=None,
-            on_change=None,
-            disabled=False,
-            label_visibility="visible"
-        )
-        if section.button(label="Configurar", help="Actualice configuraciones",
-                          type="secondary", use_container_width=True):
-            self.actualizar_modelo_tokenizer(modelo, tokenizer)
-
-    def agregar_card_inputs(self, columna):
-        card_inputs = columna.container()
-        source_tab, config_tab = card_inputs.tabs(
-            ["Imagen", "Configuraciones"]
-        )
-        self.archivo_expander(source_tab)
-        self.camara_expander(source_tab)
-        self.config_expander(config_tab)
-        self.preview_expander(card_inputs)
-
-    def agregar_card_outputs(self, columna):
-        card_teoria = columna.container()
-        result_tab, process_tab = card_teoria.tabs(
-            ["Resultado", "Proceso"]
-        )
-        if self.get_global('img_output', None) is not None:
-            result_tab.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:
-                result_tab.success(body=self.get_global('predicciones'), icon=None)
-
-    def build(self):
-        # secciones
-        columna_inputs, columna_outputs = self.get_body().columns(2, gap="small")
-        self.agregar_card_inputs(columna_inputs)
-        self.agregar_card_outputs(columna_outputs)
-
-
-if __name__ == "__main__":
-    Live_Demo(init_page=True).build()

pages/Teoria.py

@@ -1,216 +0,0 @@
-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()