Mostrar texto y formato con st.text, st.markdown y st.latex

En Streamlit, las funciones st.text, st.markdown y st.latex permiten presentar contenido textual en una aplicación. La función st.text se emplea para mostrar texto plano sin ningún tipo de formato. Por ejemplo:

import streamlit as st

st.text('Bienvenido a la aplicación.')

Cuando se requiere incluir formato en el texto, como negritas, itálicas, enlaces o listas, se utiliza st.markdown, que interpreta la sintaxis Markdown. Esto permite enriquecer el contenido y mejorar su legibilidad. Por ejemplo:

st.markdown('# Encabezado Principal')
st.markdown('Este texto es **negrita**, este es _itálica_, y este es un [enlace](https://www.example.com).')
st.markdown('- Punto 1\n- Punto 2\n- Punto 3')

Para mostrar expresiones matemáticas, la función st.latex permite renderizar código LaTeX. Es especialmente útil en aplicaciones que involucran fórmulas o ecuaciones. Por ejemplo:

st.latex(r'\int_a^b f(x)dx = F(b) - F(a)')

Además, dentro de st.markdown, es posible incluir expresiones LaTeX utilizando la sintaxis de Markdown para inserciones en línea $...$ o en bloques $$...$$. Por ejemplo:

st.markdown('La función exponencial se define como $e^x = \sum_{n=0}^\infty \\frac{x^n}{n!}$.')
st.markdown('$$E = mc^2$$')

Incorporación de imágenes con st.image

Streamlit proporciona la función st.image para incorporar imágenes en la aplicación de manera sencilla y eficiente. Esta herramienta es fundamental para presentar datos gráficos, ilustraciones o resultados de procesamiento de imágenes.

La forma más básica de utilizar st.image es pasando la ruta de un archivo de imagen local. Por ejemplo:

import streamlit as st

st.image('ruta/a/la/imagen.jpg')

Además de archivos locales, st.image permite mostrar imágenes desde una URL. Esto es útil cuando se desea cargar imágenes almacenadas en la web:

st.image('https://ejemplo.com/imagen.jpg')

Otra característica importante es la posibilidad de mostrar imágenes a partir de arrays de NumPy. Esto es especialmente relevante en aplicaciones que procesan imágenes con librerías como OpenCV:

import numpy as np

imagen_array = np.random.rand(100, 100, 3)  # Imagen aleatoria
st.image(imagen_array)

La función st.image acepta varios parámetros opcionales para personalizar cómo se muestra la imagen. El parámetro caption permite añadir un pie de foto descriptivo:

st.image('imagen.jpg', caption='Descripción de la imagen')

El parámetro width controla el ancho de la imagen en píxeles. Si se desea ajustar la imagen al ancho del contenedor en la que se ubica, se puede utilizar use_container_width=True:

st.image('imagen.jpg', use_container_width=True)

Para mostrar múltiples imágenes simultáneamente, se puede pasar una lista de imágenes a st.image:

imagenes = ['imagen1.jpg', 'imagen2.jpg', 'imagen3.jpg']
st.image(imagenes, width=200)

Es posible controlar el formato de las imágenes especificando el parámetro channels. Por defecto, Streamlit asume el formato 'RGB' para imágenes en color, pero también soporta 'BGR' si se trabaja con OpenCV:

st.image(imagen_array, channels='BGR')

El parámetro clamp se utiliza para normalizar los valores de los píxeles de la imagen. Si se establece en True, los valores serán limitados entre 0 y 255. Esto es útil cuando se trabaja con datos que pueden exceder este rango:

st.image(imagen_array, clamp=True)

Por defecto, Streamlit intenta determinar automáticamente el formato de salida de la imagen (JPEG o PNG). Sin embargo, se puede especificar el formato deseado mediante el parámetro output_format:

st.image('imagen.jpg', output_format='PNG')

Mostrar código y JSON con st.code y st.json

En Streamlit, las funciones st.code y st.json son esenciales para presentar fragmentos de código y datos en formato JSON de manera clara y legible en una aplicación. Estas herramientas facilitan la visualización de estructuras de datos y el código fuente, lo cual es fundamental en aplicaciones de desarrollo y análisis.

La función st.code permite mostrar código con resaltado de sintaxis, haciendo que sea más fácil de leer y entender. Por ejemplo, para mostrar un fragmento de código en Python:

import streamlit as st

codigo_python = '''
def saludo(nombre):
    return f"Hola, {nombre}"
'''

st.code(codigo_python, language='python')

En este ejemplo, el código se muestra con resaltado de sintaxis para Python. El parámetro language especifica el lenguaje de programación, lo que permite a Streamlit aplicar el formato adecuado. Si se omite este parámetro, Streamlit intentará detectar el lenguaje automáticamente, aunque es recomendable especificarlo para garantizar un correcto formateo del código.

Además de Python, st.code soporta una variedad de lenguajes como JavaScript, HTML, CSS y muchos otros. Por ejemplo, para mostrar código en JavaScript:

codigo_js = '''
function saludo(nombre) {
    return `Hola, ${nombre}`;
}
'''

st.code(codigo_js, language='javascript')

Por otro lado, la función st.json es ideal para desplegar objetos JSON de forma estructurada y legible. Esto es especialmente útil cuando se trabaja con APIs o datos que se intercambian en formato JSON. Por ejemplo:

datos_json = {
    "nombre": "María",
    "edad": 30,
    "ocupación": "Ingeniera",
    "habilidades": ["Python", "Machine Learning", "Visualización de Datos"]
}

st.json(datos_json)

Al utilizar st.json, Streamlit presenta los datos en una estructura jerárquica y permite al usuario interactuar con ella, expandiendo y colapsando nodos para explorar la información en detalle. Esto mejora la experiencia del usuario al analizar datos complejos.

Es importante destacar que st.json acepta tanto cadenas de texto en formato JSON como diccionarios de Python y objetos que se pueden convertir a JSON. Si se tiene una cadena JSON, se puede pasar directamente:

import json

cadena_json = '''
{
    "producto": "Libro",
    "precio": 29.99,
    "disponibilidad": true,
    "detalles": {
        "autor": "Juan Pérez",
        "páginas": 350
    }
}
'''

datos = json.loads(cadena_json)
st.json(datos)

En casos donde se requiere mostrar el JSON sin la capacidad interactiva, se puede utilizar st.code con el lenguaje establecido como json:

st.code(cadena_json, language='json')

Esto mostrará el JSON con resaltado de sintaxis, pero sin la funcionalidad interactiva que ofrece st.json.

De esta manera, st.code es una herramienta versátil para incluir código fuente en la aplicación, mejorando la comunicación de ideas y facilitando la comprensión del funcionamiento interno.

En situaciones donde se desea mostrar código sin resaltado de sintaxis, se puede utilizar st.text o st.write. Sin embargo, para mayor legibilidad y una presentación más profesional, es recomendable utilizar st.code con el lenguaje adecuado.

Visualización de tablas con st.table y st.dataframe

En aplicaciones de Streamlit, es común presentar datos tabulares de forma clara y accesible. Para ello, se utilizan las funciones st.table y st.dataframe, que permiten visualizar datos en forma de tablas de manera sencilla.

La función st.table se emplea para mostrar tablas estáticas. Esta función es ideal cuando se desea presentar datos que no requieren interactividad, como un resumen o una vista rápida. st.table acepta como entrada objetos como DataFrames de pandas, listas o diccionarios. Por ejemplo:

import streamlit as st
import pandas as pd

datos = {
    'Producto': ['Manzanas', 'Naranjas', 'Bananas'],
    'Cantidad': [10, 15, 7]
}

df = pd.table(datos)

st.table(df)

En este ejemplo, la tabla muestra una representación estática de los datos, sin posibilidad de interacción por parte del usuario. Los datos se presentan tal cual, respetando el orden y formato original.

Por otro lado, st.dataframe permite visualizar tablas interactivas, ofreciendo funcionalidades adicionales como ordenar, filtrar y ajustar el tamaño de las columnas. Esta función es útil cuando se trabaja con conjuntos de datos más extensos o cuando se requiere que el usuario explore los datos de manera más dinámica. Por ejemplo:

st.dataframe(df)

Al utilizar st.dataframe, la tabla resultante permite al usuario ordenar las columnas al hacer clic en los encabezados, así como desplazarse por los datos si el tamaño excede el espacio disponible. Además, st.dataframe puede adaptarse a cambios en tiempo real, lo cual es útil en aplicaciones donde los datos se actualizan frecuentemente.

Es posible personalizar la apariencia de las tablas con st.dataframe mediante el uso de estilos de pandas. Por ejemplo, para resaltar valores condicionalmente:

df_destacado = df.style.highlight_max(axis=0)
st.dataframe(df_destacado)

En este caso, se utiliza el método highlight_max de pandas para resaltar el valor máximo en cada columna, y luego se pasa el objeto estilizado a st.dataframe. Esto permite mejorar la visualización y facilitar la identificación de valores.

Para ajustar el tamaño de la tabla, st.dataframe admite parámetros opcionales como width y height. Por ejemplo:

st.dataframe(df, width=500, height=300)

Esto define el ancho y alto de la tabla en píxeles, permitiendo adaptarla al diseño de la aplicación.

Una diferencia importante es que st.table renderiza la tabla en formato estático, mientras que st.dataframe utiliza un componente interactivo para mostrar los datos, permitiendo funcionalidades avanzadas al usuario. Sin embargo, tenga en cuenta que la funcionalidad exacta puede variar dependiendo de la versión de Streamlit.

Para tablas grandes, st.dataframe es más eficiente ya que puede manejar grandes conjuntos de datos sin afectar el rendimiento de la aplicación. Además, ofrece opciones como:

• Destacar celdas basadas en condiciones.
• Formatear números y fechas.
• Ajustar el ancho de columnas automáticamente.

Por ejemplo, para formatear los números a dos decimales:

df_formateado = df.style.format({
    'Cantidad': '{:.2f}'
})
st.dataframe(df_formateado)

Ambas funciones son esenciales para presentar datos en aplicaciones de ciencia de datos y análisis, permitiendo compartir información con los usuarios. Dependiendo de las necesidades de interactividad y tamaño de los datos, se puede elegir entre st.table y st.dataframe para lograr la mejor experiencia.

Integración de multimedia: audio y video con st.audio y st.video

Streamlit ofrece funciones como st.audio y st.video para incorporar contenido multimedia en las aplicaciones de forma sencilla. Estas herramientas son esenciales para desarrollar aplicaciones interactivas que requieran reproducir archivos de audio o video, ya sea desde archivos locales, URLs o bytes en memoria.

La función st.audio permite reproducir archivos de audio en diversos formatos, como MP3, WAV u OGG. Para utilizar st.audio con un archivo local, se puede hacer lo siguiente:

import streamlit as st

with open("ruta/al/archivo_audio.mp3", "rb") as archivo_audio:
    st.audio(archivo_audio.read())

En este ejemplo, se abre el archivo en modo binario y se lee su contenido. Luego, st.audio reproduce el audio a partir de los bytes leídos. En este caso, no se especifica el formato del audio, ya que Streamlit puede manejarlo automáticamente al detectar el tipo del archivo.

También es posible reproducir audio desde una URL:

st.audio('https://ejemplo.com/audio.mp3')

Por otro lado, la función st.video se utiliza para incorporar archivos de video en la aplicación. Soporta formatos como MP4, WebM y Ogg. Para mostrar un video almacenado localmente:

with open("ruta/al/archivo_video.mp4", "rb") as video_file:
    st.video(video_file.read())

Al igual que con st.audio, st.video puede reproducir contenido desde una URL:

st.video('https://ejemplo.com/video.mp4')

Es importante destacar que si el video está alojado en plataformas como YouTube o Vimeo, se puede insertar directamente utilizando el enlace al video:

st.video('https://www.youtube.com/watch?v=ID_DEL_VIDEO')

Esto permite integrar videos de YouTube en la aplicación sin necesidad de descargar el archivo.

Tanto st.audio como st.video aceptan el parámetro opcional start_time, que permite especificar el tiempo inicial de reproducción en segundos. Por ejemplo, para que un video comience a reproducirse a los 30 segundos:

st.video('video.mp4', start_time=30)

Al incorporar contenido multimedia, es fundamental considerar el rendimiento y el consumo de ancho de banda. Los archivos de audio y video pueden ser de gran tamaño, por lo que se recomienda optimizarlos antes de incluirlos en la aplicación.

Además, es posible ajustar el tamaño de visualización del video utilizando CSS personalizado o contenedores de Streamlit para adaptar el diseño a las necesidades de la aplicación.

Cuando se trabaja con contenido multimedia, también es importante verificar la compatibilidad de formatos con los navegadores web, ya que algunos navegadores pueden no soportar ciertos formatos de audio o video. Utilizar formatos ampliamente soportados como MP3 para audio y MP4 para video mejora la experiencia del usuario.