Upload 3 files

app.py

@@ -0,0 +1,320 @@
+import streamlit as st
+import pandas as pd
+import networkx as nx
+from pyvis.network import Network
+from PIL import Image
+import base64
+import io
+import json
+import streamlit.components.v1 as components
+
+
+# Inicializar la sesión de estado para almacenar la estructura del mapa mental
+if 'mapa_mental' not in st.session_state:
+    st.session_state['mapa_mental'] = {
+        'nombre': '',
+        'imagen': '',
+        'ramas': []
+    }
+
+# Definir colores para las categorías
+categoria_colores = ['#1f77b4', '#2ca02c', '#9467bd', '#bcbd22', '#ff7f0e', '#d62728']
+
+# Función para convertir imagen a base64
+def get_image_base64(image_data):
+    """
+    Convierte una imagen en base64.
+    Puede manejar imágenes en formato base64, objetos PIL o bytes.
+    """
+    if isinstance(image_data, str) and image_data.startswith("data:image"):  # Si ya es base64
+        return image_data
+    elif isinstance(image_data, Image.Image):  # Si la imagen es un objeto PIL
+        buffered = io.BytesIO()
+        image_data = image_data.resize((150, 150))  # Ajustar tamaño de la imagen a 150x150 píxeles
+        image_data.save(buffered, format="PNG")  # Convertir imagen a bytes
+        return "data:image/png;base64," + base64.b64encode(buffered.getvalue()).decode("utf-8")
+    elif isinstance(image_data, bytes):  # Si es un archivo cargado
+        buffered = io.BytesIO(image_data)
+        image = Image.open(buffered).resize((150, 150))
+        buffered = io.BytesIO()
+        image.save(buffered, format="PNG")
+        return "data:image/png;base64," + base64.b64encode(buffered.getvalue()).decode("utf-8")
+    return None
+
+# Función para agregar una nueva rama a un nodo específico
+def agregar_rama(nodo):
+    """
+    Añade una nueva rama a un nodo dado.
+    """
+    nueva_rama = {
+        'nombre': '',
+        'imagen': '',
+        'ramas': []
+    }
+    nodo['ramas'].append(nueva_rama)
+
+# Función recursiva para renderizar el formulario de cada rama
+def renderizar_ramas(nodo, ruta):
+    """
+    Renderiza un formulario en el sidebar para una rama específica.
+    Permite ingresar el nombre y la imagen, y agregar sub-ramas.
+    """
+    for idx, rama in enumerate(nodo['ramas']):
+        nueva_ruta = f"{ruta} -> Rama {idx + 1}"
+        st.sidebar.markdown(f"### Nodo: {nueva_ruta}")
+        
+        # Entrada de texto para el nombre
+        nombre = st.sidebar.text_input(f"Nombre de la idea en {nueva_ruta}", value=rama['nombre'], key=f"nombre_{nueva_ruta}")
+        rama['nombre'] = nombre
+
+        # Entrada para la imagen
+        imagen = st.sidebar.file_uploader(f"Cargar imagen para {nueva_ruta}", type=["png", "jpg", "jpeg"], key=f"imagen_{nueva_ruta}")
+        if imagen:
+            imagen_base64 = get_image_base64(imagen.read())
+            rama['imagen'] = imagen_base64
+        elif not rama['imagen']:
+            rama['imagen'] = ''
+
+        # Botón para agregar una sub-rama
+        if st.sidebar.button(f"Agregar rama a {nueva_ruta}", key=f"boton_agregar_{nueva_ruta}"):
+            agregar_rama(rama)
+
+        # Llamar recursivamente para renderizar sub-ramas
+        renderizar_ramas(rama, nueva_ruta)
+
+# Función recursiva para agregar nodos al grafo
+def agregar_nodos_recursivamente(G, nodo, datos, color, edge_width_dict):
+    """
+    Añade nodos y edges al grafo de manera recursiva.
+    """
+    nombre = datos["nombre"]
+    imagen = datos.get("imagen", None)
+    G.add_node(nombre, type='central' if nodo == "root" else 'ramificado', image=imagen if imagen else None, color=color)
+    
+    if nodo != "root":
+        G.add_edge(nodo, nombre, color=color, width=edge_width_dict.get(nodo, 1))
+    
+    ramas = datos.get("ramas", [])
+    num_ramas = len(ramas)
+    edge_width = max(1, 5 - num_ramas)  # Ajusta el grosor según el número de ramas
+    edge_width_dict[nombre] = edge_width
+    
+    # Asignar color
+    if color in categoria_colores:
+        color_index = (categoria_colores.index(color) + 1) % len(categoria_colores)
+        nuevo_color = categoria_colores[color_index]
+    else:
+        nuevo_color = 'gray'
+    
+    for rama in ramas:
+        agregar_nodos_recursivamente(G, nombre, rama, nuevo_color, edge_width_dict)
+
+# Función para crear el grafo
+def crear_grafico_mind_map(datos_entrada):
+    """
+    Crea y visualiza el grafo del mapa mental usando Pyvis.
+    """
+    G = nx.Graph()
+    edge_width_dict = {}
+    
+    if not datos_entrada['nombre']:
+        st.warning("Por favor, ingresa la idea principal.")
+        return
+    
+    # Iniciar con el nodo raíz
+    raiz = datos_entrada["nombre"]
+    raiz_imagen = datos_entrada.get("imagen", None)
+    G.add_node(raiz, type='central', image=raiz_imagen if raiz_imagen else None, color=categoria_colores[0])
+    
+    ramas = datos_entrada.get("ramas", [])
+    for rama in ramas:
+        agregar_nodos_recursivamente(G, raiz, rama, categoria_colores[0], edge_width_dict)
+    
+    # Crear visualización con pyvis
+    person_net = Network(
+        height='600px',
+        width='100%',
+        bgcolor='#222222',
+        font_color='white',
+        notebook=False
+    )
+    
+    # Configurar los nodos con imágenes, colores y tamaños
+    for node, data in G.nodes(data=True):
+        node_categoria = data.get('type', 'central')
+        color = data.get('color', 'gray')  # Color por defecto si no se encuentra la categoría
+        
+        node_options = {
+            "label": node,
+            "shape": "circularImage" if data.get('image') else "circle",
+            "image": data.get('image', ''),
+            "color": color,
+            "size": 80 if node_categoria == 'central' else 20,  # Tamaño más grande para el nodo central
+            "fixed": {"x": False, "y": False}  # No fijar posición
+        }
+        person_net.add_node(node, **node_options)
+    
+    # Agregar edges con color y grosor
+    for source, target, edge_data in G.edges(data=True):
+        person_net.add_edge(source, target, color=edge_data.get('color', 'gray'), width=edge_data.get('width', 1))
+    
+    # Configurar layout del grafo con centrado
+    person_net.repulsion(
+        node_distance=200,
+        central_gravity=0.33,
+        spring_length=100,
+        spring_strength=0.10,
+        damping=0.95
+    )
+    
+    # Agregar opciones para mantener el gráfico centrado
+    person_net.set_options("""
+        var options = {
+            "physics": {
+                "stabilization": {
+                    "enabled": true,
+                    "iterations": 1000
+                },
+                "minVelocity": 0.75
+            },
+            "interaction": {
+                "dragNodes": true,
+                "zoomView": true
+            }
+        }
+    """)
+    
+    # Guardar y mostrar grafo en HTML
+    path = '/tmp'
+    person_net.save_graph(f'{path}/pyvis_graph.html')
+    
+    with open(f'{path}/pyvis_graph.html', 'r', encoding='utf-8') as HtmlFile:
+        graph_html = HtmlFile.read()
+    
+    # Mostrar grafo en la app con Streamlit Components con ancho responsivo
+    components.html(graph_html, height=600, width=800)
+
+# Pestaña principal
+def main():
+    st.set_page_config(layout="wide")
+    # Display the image above the title
+    st.image('Mind Mapp.jpg', use_column_width=True)
+    st.title("Generador de Mapas Mentales")
+    # Agregar pestañas
+    tabs = st.tabs(["Reseña del Libro", "Mapa Mental", "Acerca de mí"])
+
+    # Pestaña: Reseña del libro
+    with tabs[0]:
+        resumen = """
+        ## Resumen del libro: "Mapas Mentales" de Tony Buzan
+
+        "Mapas Mentales" de Tony Buzan es una guía completa sobre la creación y uso de mapas mentales como herramienta para el pensamiento creativo, la organización de ideas y la mejora de la memoria. Tony Buzan, reconocido como el padre de los mapas mentales, introduce en este libro técnicas probadas para maximizar la eficiencia mental y potenciar el aprendizaje.
+
+        ### **Conceptos Clave del Libro**
+
+        1. **Estructura de los Mapas Mentales:**
+           - **Idea Central:** Comienza con una idea o concepto principal en el centro de la página.
+           - **Ramas Principales:** Se extienden desde la idea central, representando las ideas principales relacionadas.
+           - **Palabras Clave:** Cada rama está etiquetada con palabras clave que representan conceptos importantes.
+           - **Imágenes y Colores:** El uso de imágenes y colores ayuda a estimular el cerebro y facilita la memorización y comprensión.
+
+        2. **Beneficios de los Mapas Mentales:**
+           - **Mejora la Memoria:** La estructura visual facilita la retención de información.
+           - **Fomenta la Creatividad:** Permite explorar múltiples conexiones y asociaciones de ideas.
+           - **Organización Eficiente:** Ayuda a estructurar pensamientos de manera lógica y coherente.
+           - **Resolución de Problemas:** Facilita la identificación de soluciones mediante el análisis visual de situaciones complejas.
+
+        3. **Aplicaciones Prácticas:**
+           - **Educación:** Para tomar apuntes, planificar estudios y resumir información.
+           - **Negocios:** En la planificación de proyectos, brainstorming y presentaciones.
+           - **Desarrollo Personal:** En la definición de metas, planificación de carrera y organización de ideas personales.
+
+        4. **Técnicas Avanzadas:**
+           - **Asociaciones Liberadas:** Estimula la generación de ideas sin restricciones.
+           - **Uso de Símbolos y Dibujo:** Potencia la creatividad y hace que los mapas sean más atractivos visualmente.
+           - **Integración de Información:** Combina diferentes fuentes de información en un solo mapa mental para una visión holística.
+
+        ### **Métodos de Creación de Mapas Mentales**
+
+        - **Inicio Central:** Colocar la idea principal en el centro y dibujar ramas radiales hacia las ideas secundarias.
+        - **Palabras Clave:** Utilizar palabras breves que capturen la esencia de cada idea.
+        - **Colores y Símbolos:** Aplicar diferentes colores para categorizar información y símbolos para representar conceptos.
+        - **Jerarquía Visual:** Utilizar tamaños de fuente y grosor de líneas para indicar la importancia relativa de las ideas.
+
+        ### **Conclusión**
+
+        "Mapas Mentales" de Tony Buzan es una herramienta poderosa para cualquier persona que busque mejorar su capacidad de pensar, organizar ideas y aprender de manera más efectiva. El libro no solo explica la teoría detrás de los mapas mentales, sino que también proporciona instrucciones prácticas para su implementación en diversas áreas de la vida personal y profesional.
+        """
+        st.markdown(resumen)
+
+    # Pestaña: Mapa Mental
+    with tabs[1]:
+        st.header("Mapa Mental")
+        st.sidebar.subheader("Ingresar Datos del Mapa Mental:")
+
+        # Formulario para la idea principal
+        st.sidebar.markdown("## Idea Principal")
+        nombre_principal = st.sidebar.text_input(
+            "Ingrese el nombre de la idea principal:", 
+            st.session_state['mapa_mental']['nombre'], 
+            key="nombre_principal"
+        )
+        
+        imagen_principal = st.sidebar.file_uploader(
+            "Cargue una imagen para la idea principal", 
+            type=["png", "jpg", "jpeg"], 
+            key="imagen_principal"
+        )
+        if imagen_principal:
+            imagen_base64 = get_image_base64(imagen_principal.read())
+            st.session_state['mapa_mental']['imagen'] = imagen_base64
+        elif not st.session_state['mapa_mental']['imagen']:
+            st.session_state['mapa_mental']['imagen'] = ''
+        
+        st.session_state['mapa_mental']['nombre'] = nombre_principal
+        
+        st.sidebar.markdown("---")
+        
+        # Botón para agregar rama a la idea principal
+        if st.sidebar.button("Agregar rama a la idea principal"):
+            agregar_rama(st.session_state['mapa_mental'])
+        
+        # Renderizar las ramas de la idea principal
+        if st.session_state['mapa_mental']['nombre']:
+            renderizar_ramas(st.session_state['mapa_mental'], "Idea Principal")
+        
+        st.sidebar.markdown("---")
+        
+        # Botón para resetear el mapa mental
+        if st.sidebar.button("Resetear Mapa Mental"):
+            st.session_state['mapa_mental'] = {
+                'nombre': '',
+                'imagen': '',
+                'ramas': []
+            }
+            st.experimental_rerun()
+        
+        # Botón para generar el grafo
+        if st.sidebar.button("Generar Mapa Mental"):
+            crear_grafico_mind_map(st.session_state['mapa_mental'])
+
+    # Pestaña: Acerca de mí
+    with tabs[2]:
+        st.header("Acerca de mí")
+        acerca_de_mi = """
+        ¡Hola! Soy Migue, desarrollo herramientas para facilitar la visualización y organización de ideas mediante mapas mentales interactivos. Esta aplicación está diseñada para ayudarte a estructurar tus pensamientos de manera eficiente y creativa, utilizando tecnologías como Streamlit, Pyvis y NetworkX.
+
+        **Características de la Aplicación:**
+        - **Interfaz Intuitiva:** Agrega ideas principales y sus ramas de forma sencilla.
+        - **Visualización Interactiva:** Explora tus mapas mentales de manera dinámica y visualmente atractiva.
+        - **Personalización:** Asigna imágenes y colores a tus nodos para una mejor organización y estética.
+
+        **Contacto:**
+        - **Correo Electrónico:** [mail](mailto:josemiguelaguilart.com)
+        - **LinkedIn:** [LinkedIn](https://www.linkedin.com/in/josemaguilar/)
+
+        """
+        st.markdown(acerca_de_mi)
+
+if __name__ == "__main__":
+    main()

requirements.txt

@@ -0,0 +1,7 @@
+streamlit
+matplotlib
+pandas
+plotly
+networkx
+pyvis
+Pillow