first commit

Home.py

@@ -0,0 +1,221 @@
+from core.controllers.pages_controller import Page
+from core.controllers.main_process import Generador
+
+
+class Home(Page):
+    variables_globales = {
+        "prompt": "cat,fish,dog",
+        "img_bytes": None,
+        "img_src": None,
+        "settings": {
+            "model": str("facebook/detr-resnet-50"),
+            "tokenizer": str("facebook/detr-resnet-50"),
+        },
+        "img_output": None,
+        "predicciones": None,
+        "fuentes": [
+            {"titulo": "Papper",
+             "url": "https://arxiv.org/abs/2112.10003"},
+            {"titulo": "Transformers",
+             "url": "https://huggingface.co/docs/transformers/v4.32.1/en/index"},
+            {"titulo": "Modelo CIDAS/ClipSeg-rd64-refined",
+             "url": "https://huggingface.co/CIDAS/clipseg-rd64-refined"},
+            {"titulo": "Repositorio",
+             "url": "https://huggingface.co/CIDAS/clipseg-rd64-refined"},
+            {"titulo": "Material Apoyo",
+             "url": "https://github.com/NielsRogge/Transformers-Tutorials/blob/master/CLIPSeg/Zero_shot_image_segmentation_with_CLIPSeg.ipynb"},
+            {"titulo": "IO",
+             "url": "https://pypi.org/project/io/"},
+            {"titulo": "PIL",
+             "url": "https://pypi.org/project/Pillow/"},
+            {"titulo": "requests",
+             "url": "https://pypi.org/project/requests/"},
+            {"titulo": "timm",
+             "url": "https://pypi.org/project/timm/"},
+            {"titulo": "matplotlib",
+             "url": "https://pypi.org/project/matplotlib/"}]
+    }
+
+    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.init_globals(globals=self.variables_globales)
+        for archivo in self.archivos_css:
+            self.cargar_css(archivo_css=archivo)
+        self.about()
+
+    def about(self):
+        self.builder().sidebar.markdown(unsafe_allow_html=False,
+                                        help=None,
+                                        body="""
+                               ## Tema
+
+                               La segmentación de imágenes es el proceso de dividir una imagen en segmentos o regiones significativas. 
+                               
+                               Puede ser de diferentes tipos, como la segmentación semántica (asignación de etiquetas de clase a píxeles) o la segmentación basada en contornos (división de una imagen en áreas definidas por bordes). 
+                               
+                               Esta técnica es ampliamente utilizada en visión por computadora para analizar y comprender imágenes.
+
+                               ## Recursos
+                               """)
+
+        for fuente in self.get_global('fuentes'):
+            self.builder().sidebar.markdown(
+                unsafe_allow_html=False,
+                help=None,
+                body=f"""
+                * **{fuente.get('titulo')}** - {fuente.get('url')}
+                """
+            )
+        self.builder().sidebar.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/cuadernos/
+            """)
+
+    def obtener_bytes(self, archivo):
+        self.set_global(key='img_src',
+                        value=archivo)
+
+    def actualizar_modelo_tokenizer(self, modelo, tokenizer):
+        self.set_global(key='settings',
+                        value={'model': modelo,
+                               'tokenizer': tokenizer})
+
+    def procesar_imagen(self, prompt):
+        proceso = Generador(configuraciones=self.get_global('settings'))
+        proceso.generar_prediccion(
+            imagen_bytes=self.imgg.open(
+                self.get_global('img_src')).convert("RGB"),
+            new_prompt=prompt
+        )
+        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**:
+
+                               Elija cualquiera de las dos opciones para cargar su imagen:
+
+                               *    **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.
+
+
+                               2.   **Detectar / Predecir**:
+
+                               Realice la **detección de objetos** 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.container()
+        imagen_base.markdown(unsafe_allow_html=False,
+                             help=None,
+                             body="""
+                             **Cargue su Imagen Base**:
+                             """)
+        archivo_expander = imagen_base.expander(expanded=False,
+                                                label="Desde su Galería")
+        _archivo = archivo_expander.file_uploader(label="Galería",
+                                                  on_change=None,
+                                                  accept_multiple_files=False,
+                                                  label_visibility="visible")
+        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 su Cámara")
+        _captura = camara_expander.camera_input(label="Cámara",
+                                                on_change=None,
+                                                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 Avanzadas")
+        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):
+        resultados = placeholder.container()
+
+        if self.get_global('img_src', None) is not None:
+            resultados.image(
+                image=self.get_global('img_src').getvalue(),
+                caption="Su resultado",
+                use_column_width="auto",
+                channels="RGB",
+                output_format="auto"
+            )
+            if self.get_global('predicciones', None) is not None:
+                for i, predict in enumerate(self.get_global('predicciones', [])):
+                    resultados.image(
+                        image=predict,
+                        caption=f"Su predicción {i}",
+                        use_column_width="auto",
+                        channels="RGB",
+                        output_format="auto"
+                    )
+
+    def agregar_card_base(self, columna):
+        card_principal = columna.container()
+
+        columna_inputs, columna_outputs = card_principal.columns(
+            [0.3, 0.7], gap="small")
+
+        self.expander_instrucciones(columna_inputs)
+        self.expander_imagen_base(columna_inputs)
+        self.expander_configuraciones(columna_inputs)
+        columna_inputs.markdown(unsafe_allow_html=False,
+                                help=None,
+                                body="""
+                             **Introduzca palabras de búsqueda**:
+                             """)
+        prompt = columna_inputs.text_input(
+            label="Prompt", on_change=None, label_visibility="visible",
+            value=self.get_global('prompt'))
+        if columna_inputs.button(label="Detectar / Predecir", help="Realizar Predicciones",
+                                 type="secondary", use_container_width=True):
+            self.procesar_imagen(prompt)
+        self.resultados(columna_outputs)
+
+    def build(self):
+
+        columna_principal = self.get_body().columns(1, gap="small")[0]
+        self.agregar_card_base(columna_principal)
+
+
+if __name__ == "__main__":
+    Home(init_page=True).build()

core/controllers/main_process.py

@@ -0,0 +1,43 @@
+from transformers import AutoProcessor, CLIPSegForImageSegmentation
+from io import BytesIO
+from PIL import Image
+import torch
+import requests
+import matplotlib.pyplot as plt
+
+
+class Generador():
+    def __init__(self, configuraciones):
+        self.modelo = configuraciones.get('model')
+        self.tokenizer = configuraciones.get('tokenizer')
+
+    def generar_prediccion(self, imagen_bytes, new_prompt):
+        respuestas = []
+        try:
+            # Inicializamos los procesadores y el modelo
+            procesador = AutoProcessor.from_pretrained(self.tokenizer)
+            modelo = CLIPSegForImageSegmentation.from_pretrained(self.modelo)
+            # Procesamos nuestra imagen y objetos
+            prompts = new_prompt.split(',')
+            inputs = procesador(text=prompts, images=[imagen_bytes] * len(prompts), padding=True, return_tensors="pt")
+            outputs = modelo(**inputs)
+            logits = outputs.logits
+            predicciones = outputs.logits.unsqueeze(1)
+
+            # Creamos un espacio para cada uno de los prompts
+            _, cajas = plt.subplots(1, len(prompts), figsize=(15, 4))
+            # por cada caja, agregamos una predicción
+            for indice, caja in enumerate(cajas.flatten()):
+                caja.axis('off')
+                _img = torch.sigmoid(predicciones[indice][0]).detach().numpy()
+                #caja.imshow(_img)
+                #caja.text(0, -15, prompts[indice])
+                respuestas.append(_img)
+
+        except Exception as error:
+            print(f"No es Chems\n{error}")
+        finally:
+            self.prediccion = respuestas
+
+
+

core/controllers/pages_controller.py

@@ -0,0 +1,51 @@
+import streamlit as BaseBuilder
+from PIL import Image
+import json
+
+
+class Page():
+    def __init__(self):
+        self.__ = BaseBuilder
+        self.imgg = Image
+
+    def builder(self):
+        return self.__
+
+    def new_page(self, title: str, icon=str(), color_divider="rainbow"):
+        self.builder().set_page_config(page_title=title,
+                                       page_icon=icon,
+                                       layout="wide")
+        self.builder().title(f"Clasificación de imágenes con Visión Artificial",
+                             anchor="titulo-proyecto",
+                             help=None)
+        self.builder().subheader(f"{title} {icon}",
+                                 anchor="titulo-pagina",
+                                 divider=color_divider,
+                                 help=None)
+        self.__body = self.builder().empty()
+
+    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.builder().session_state[key] = value
+
+    def get_global(self, key=str(), default=None, is_secret=False):
+        if is_secret:
+            return self.builder().secrets.get(key, default)
+        else:
+            return self.builder().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.builder().markdown(
+                    f'<style>{archivo.read()}</style>', unsafe_allow_html=True)
+        except Exception as er:
+            print(f"Error:\n{er}")

core/estilos/home.css

@@ -0,0 +1,76 @@
+/* Estilo Cards */
+[data-testid="stVerticalBlock"]>[style*="flex-direction: column;"]>[data-testid="stVerticalBlock"] {
+    background-color: #070707;
+    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 {
+    border: 2px thin;
+    box-shadow: 2px 2px 3px 3px #000000fe;
+    transition: ease-in;
+    transition-property: 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;
+    color: white;
+}
+
+/* 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;
+    color: white;
+}
+
+/* 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"]>button {
+    padding: 8px;
+    display: flex;
+    justify-content: center;
+    text-align: center;
+    width: 100%;
+    background-color: crimson;
+    color: white;
+}
+
+
+/* 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;
+}
+
+.st-by {
+    color: white !important;
+}

core/estilos/main.css

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

requirements.txt

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