nose

Home.py

@@ -12,7 +12,13 @@ class Home(Page):
         },
         "img_output": None,
         "predicciones": None,
+        "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"}]
     }
+
     archivos_css = ["main",
                     "home"]
 
@@ -24,6 +30,44 @@ class Home(Page):
         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="""
+                               ## Clasificación de imágenes
+
+                               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 en **imágenes visuales.** 
+
+                               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.
+
+                               ## Recursos
+
+
+                               ##
+                               """)
+
+        for fuente in self.get_global('fuentes'):
+            self.builder().sidebar.markdown(
+                unsafe_allow_html=False,
+                help=None,
+                body=f"""
+                ###### * **{fuente.get('titulo')}:**
+
+                *Enlace: {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',
@@ -84,7 +128,7 @@ class Home(Page):
                                     help="Suba un archivo.") and _archivo is not None):
             self.obtener_bytes(_archivo)
 
-        camara_expander = imagen_base.expander(expanded=False, 
+        camara_expander = imagen_base.expander(expanded=False,
                                                label="Desde su Cámara")
         _captura = camara_expander.camera_input(label="Cámara",
                                                 on_change=None,
@@ -137,7 +181,7 @@ class Home(Page):
         self.resultados(columna_outputs)
 
     def build(self):
-        
+
         columna_principal = self.get_body().columns(1, gap="small")[0]
         self.agregar_card_base(columna_principal)
 

core/estilos/home.css

@@ -30,13 +30,13 @@
 /* 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;
+    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;
+    color: white;
 }
 
 /* Interno Card: Row imagenes  */
@@ -53,7 +53,7 @@
 }
 
 /* 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{
+[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;
@@ -71,6 +71,6 @@
     border: none;
 }
 
-.st-by{
-    color:white !important;
+.st-by {
+    color: white !important;
 }