primer_commit

Home.py

@@ -0,0 +1,105 @@
+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")
+        if self.user_logged_in():
+            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()

README.md

@@ -5,7 +5,7 @@ colorFrom: yellow
 colorTo: gray
 sdk: streamlit
 sdk_version: 1.26.0
-app_file: app.py
+app_file: Home.py
 pinned: false
 license: gpl-3.0
 ---

core/controllers/main_process.py

@@ -0,0 +1,30 @@
+from transformers import ViTImageProcessor, ViTForImageClassification
+from PIL import Image
+from io import BytesIO
+import requests
+
+
+class Generador():
+    def __init__(self, configuraciones):
+        self.modelo = configuraciones.get('model')
+        self.tokenizer = configuraciones.get('tokenizer')
+
+    def generar_prediccion(self, imagen_bytes):
+        # @title **Ejemplo práctico**
+        prediccion = None
+        try:
+            # Inicializamos los procesadores y el modelo
+            procesador = ViTImageProcessor.from_pretrained(self.tokenizer)
+            modelo = ViTForImageClassification.from_pretrained(self.modelo)
+            # Procesamos nuestra imagen
+            inputs = procesador(images=imagen_bytes, return_tensors="pt")
+            outputs = modelo(**inputs)
+            logits = outputs.logits
+            # Obtenemos las predicciones
+            predicted_class_idx = logits.argmax(-1).item()
+            prediccion = modelo.config.id2label[predicted_class_idx]
+        except Exception as error:
+            print(f"No es Chems\n{error}")
+            prediccion = error
+        finally:
+            self.prediccion = str(prediccion)

core/controllers/pages_controller.py

@@ -0,0 +1,132 @@
+import streamlit as BaseBuilder
+from PIL import Image
+import json
+
+
+class Page():
+    def __init__(self):
+        self.__ = BaseBuilder
+        self.imgg = Image
+
+    def page(self):
+        return self.__
+
+    def new_page(self, title: str, icon=str(), color_divider="rainbow"):
+        self.page().set_page_config(page_title=title,
+                                    page_icon=icon,
+                                    layout="wide")
+        self.page().title(f"Clasificación de imágenes con Visión Artificial",
+                          anchor="titulo-proyecto",
+                          help=None)
+        self.page().subheader(f"{title} {icon}",
+                              anchor="titulo-pagina",
+                              divider=color_divider,
+                              help=None)
+        self.check_password()
+
+    def new_body(self, new=False):
+        self.__body = BaseBuilder.empty() if new else self.page().container()
+
+    def get_body(self):
+        return self.__body
+
+    def init_globals(self, globals=dict({})):
+        for _k, _v in globals.items():
+            if self.get_global(_k,None) is None:
+                self.set_global(_k, _v)
+
+    def set_global(self, key=str(), value=None):
+        self.page().session_state[key] = value
+
+    def get_global(self, key=str(), default=None, is_secret=False):
+        if is_secret:
+            return self.page().secrets.get(key, default)
+        else:
+            return self.page().session_state.get(key, default)
+
+    def cargar_css(self, archivo_css=str("default")):
+        ruta = f"core/estilos/{archivo_css}.css"
+        try:
+            with open(ruta) as archivo:
+                self.page().markdown(
+                    f'<style>{archivo.read()}</style>', unsafe_allow_html=True)
+        except Exception as er:
+            print(f"Error:\n{er}")
+
+    def check_password(self):
+        if self.user_logged_in():
+            self.page().sidebar.success("👨‍💻 Conectado")
+            self.page().sidebar.button("Logout", use_container_width=True,
+                                       type="primary", on_click=self.logout)
+            return True
+        else:
+            self.page().sidebar.subheader("# ¡👨‍💻 Desbloquea todas las funciones!")
+            self.page().sidebar.write("¡Ingresa tu Usuario y Contraseña!")
+            self.page().sidebar.text_input("Usuario", value="",
+                                           on_change=self.login, key="USUARIO")
+            self.page().sidebar.text_input("Password", type="password",
+                                           on_change=self.login, key="PASSWORD", value="")
+            self.page().sidebar.button("LogIn", use_container_width=True, on_click=self.login)
+            return False
+
+    def user_logged_in(self):
+        return self.get_global('logged_in', False)
+
+    def login(self):
+        _config = self.get_global('PRIVATE_CONFIG', dict({}), True)
+        _usuario = self.get_global("USUARIO")
+        _registros = self.get_global("registros", None, True)
+        _factor = int(_config['FPSSWD'])
+        if self.codificar(_usuario, _factor) in _registros:
+            if self.codificar(self.get_global("PASSWORD"), _factor) == _registros[self.codificar(_usuario, _factor)]:
+                del self.page().session_state["USUARIO"]
+                del self.page().session_state["PASSWORD"]
+                self.set_global('hf_key', _config['HUGGINGFACE_KEY'])
+                self.set_global('logged_in', True)
+            else:
+                self.logout("😕 Ups! Contraseña Incorrecta")
+        else:
+            self.logout("😕 Ups! Nombre de Usuario Incorrecto")
+
+    def logout(self, mensaje=str("¡Vuelva Pronto!")):
+        self.page().sidebar.error(mensaje)
+        self.set_global('hf_key')
+        self.set_global('logged_in')
+
+    @staticmethod
+    def codificar(palabra=str(), modificador=None):
+        # Acepta:
+        # ABCDEFGHIJKLMNOPQRSTUVWXYZ
+        # abcdefghijklmnopqrstuvwxyz
+        # 1234567890!#$-_=%&/()*[]
+        codigo = str()
+        try:
+            for _byte in bytearray(palabra.strip(), 'utf-8'):
+                # x = f(y) => la variable 'x' estará en función de la variable 'y'
+                # Si ... f(y) = y² * k     => donde:
+                # x es el valor decimal del input en bytes
+                # modificador es un número real variable, definido por el usuario
+                _y = int(format(_byte, 'b'), 2)
+                _x = int(pow(_y, 2) * modificador)
+                # magia
+                codigo = f" {bin(_x)}{codigo}"
+        except Exception as error:
+            print(f"Error Codificando:\n{error}")
+        return codigo.strip()
+
+    @staticmethod
+    def decodificar(codigo=str(), modificador=None):
+        # SOLO DECODIFICA SU ECUACIÓN INVERSA...
+        palabra = str()
+        try:
+            for _byte_str in codigo.strip().split(' '):
+                # entonces...podemos decir que y = √(x/k)
+                # es su ecuación inversa correspondiente
+                _x = int(_byte_str, 2)
+                _y = int(pow((_x/modificador), 1/2))
+                letra = _y.to_bytes(_y.bit_length(), 'big').decode()
+                # magia
+                palabra = f"{letra}{palabra}"
+        except Exception as error:
+            print(f"Error Decodificando:\n{error}")
+        return palabra.stip()

core/estilos/about_me.css

@@ -0,0 +1,41 @@
+/* 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/home.css

@@ -0,0 +1,61 @@
+/* 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%;
+}

core/estilos/live_demo.css

@@ -0,0 +1,81 @@
+/* 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/main.css

@@ -0,0 +1,5 @@
+/* Contenedor principal de la aplicación*/
+section>[data-testid="block-container"]{
+    height: 100vh;
+    padding: 2em 3em 2em 3em;
+}

core/estilos/teoria.css

@@ -0,0 +1,81 @@
+/* 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

@@ -0,0 +1,90 @@
+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")
+        if self.user_logged_in():
+
+            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

@@ -0,0 +1,144 @@
+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.get_global('img_bytes'))
+        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()
+        output = card_teoria.expander(
+            expanded=True,
+            label="Su resultado"
+        )
+        if self.get_global('img_output', None) is not None:
+            output.image(
+                image=self.get_global('img_output'),
+                caption="Su resultado",
+                use_column_width="auto",
+                channels="RGB",
+                output_format="auto"
+            )
+
+    def build(self):
+        # secciones
+        columna_inputs, columna_outputs = self.get_body().columns(2, gap="small")
+        if self.user_logged_in():
+            self.agregar_card_inputs(columna_inputs)
+            self.agregar_card_outputs(columna_outputs)
+
+
+if __name__ == "__main__":
+    Live_Demo(init_page=True).build()

pages/Teoria.py

@@ -0,0 +1,216 @@
+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]
+        if self.user_logged_in():
+            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()

requirements.txt

@@ -0,0 +1,8 @@
+streamlit
+pandas
+transformers
+transformers[torch]
+transformers[tf-cpu]
+transformers[flax]
+Pillow
+requests