La capacidad de expandir las formas en que los usuarios interactúan con las aplicaciones es, sin duda, una de las áreas más fascinantes del desarrollo moderno, especialmente cuando se integran modelos de inteligencia artificial avanzados y las capacidades inherentes de los dispositivos actuales. En este contexto, .NET MAUI emerge como una herramienta excepcionalmente poderosa y accesible para transformar una experiencia de aplicación puramente basada en texto en una plataforma rica y dinámica que soporta interacciones a través de la voz, la visión, y mucho más. Este enfoque multimodal no solo enriquece la experiencia del usuario, sino que también abre nuevas avenidas para la funcionalidad y la accesibilidad de las aplicaciones.
Previamente, se exploró en detalle la integración del soporte de voz en una aplicación de tareas pendientes, un ejemplo destacado de nuestra sesión en Microsoft Build 2025. Complementando aquella exploración, este artículo se centra en la faceta de visión de la inteligencia multimodal. El objetivo principal es permitir a los usuarios capturar o seleccionar una imagen y, de manera inteligente, hacer que la inteligencia artificial extraiga información actionable de ella. Esta información se utilizará para crear proyectos y tareas dentro de la aplicación de ejemplo Telepathic. Es crucial destacar que esta capacidad va mucho más allá de una simple lectura de caracteres (OCR); se trata de un agente de IA que utiliza el contexto y los prompts para generar una entrada significativa y estructurada, transformando datos visuales en elementos organizativos concretos.
La Aplicación “Ve lo que Yo Veo”: Captura y Procesamiento de Imágenes
La funcionalidad de visión se inicia de forma intuitiva. Desde el menú del botón de acción flotante en la MainPage de la aplicación, el usuario selecciona el botón de la cámara. Esta acción desencadena una transición fluida a la PhotoPage, donde MediaPicker toma el control. MediaPicker es una API crucial y unificada que ofrece una solución multiplataforma para gestionar la galería de fotos, la selección de medios y la captura de nuevas fotografías. Su modernización en .NET 10 Preview 4 ha mejorado aún más su robustez y eficiencia, simplificando significativamente la interacción con los medios del dispositivo.
El PhotoPageModel es el encargado de orquestar tanto la captura de fotos como la selección de archivos. Este proceso se inicia con el evento del ciclo de vida PageAppearing, al que se puede acceder fácilmente mediante el EventToCommandBehavior del Community Toolkit for .NET MAUI. Este patrón de comportamiento es extremadamente útil para vincular eventos de la interfaz de usuario directamente a comandos del ViewModel, manteniendo una clara separación de responsabilidades según el patrón MVVM.
<ContentPage.Behaviors>
<toolkit:EventToCommandBehavior
EventName="Appearing"
Command="{Binding PageAppearingCommand}"/>
</ContentPage.Behaviors>El método PageAppearing, a su vez, está decorado con [RelayCommand], lo que permite generar comandos de forma automática y simplificada gracias al Community Toolkit for MVVM. Esta característica es un ejemplo más de cómo los toolkits de la comunidad facilitan y aceleran el desarrollo en .NET MAUI. Dentro de este método, se realiza una verificación inteligente del tipo de dispositivo en uso, utilizando DeviceInfo.Idiom, una API multiplataforma de .NET MAUI. Esto permite a la aplicación decidir si debe solicitar al usuario que seleccione una foto de la galería (común en dispositivos de escritorio) o capturar una nueva con la cámara (típico en dispositivos móviles).
if (DeviceInfo.Idiom == DeviceIdiom.Desktop)
{
result = await MediaPicker.PickPhotoAsync(new MediaPickerOptions
{
Title = "Selecciona una foto"
});
}
else
{
if (!MediaPicker.IsCaptureSupported)
{
return; // Retorna si la captura de cámara no es soportada
}
result = await MediaPicker.CapturePhotoAsync(new MediaPickerOptions
{
Title = "Toma una foto"
});
}
Una ventaja significativa de emplear el MediaPicker integrado es que proporciona a los usuarios una experiencia nativa y familiar para la entrada de fotos, lo que mejora la usabilidad y la curva de aprendizaje. Es fundamental, al implementar esta funcionalidad, asegurarse de realizar la configuración específica de cada plataforma según la documentación, garantizando así un funcionamiento correcto y optimizado.
Procesamiento Inteligente de la Imagen con Microsoft.Extensions.AI
Una vez que la imagen ha sido capturada o seleccionada por el usuario, se muestra en pantalla. Opcionalmente, se habilita un campo Editor para que el usuario pueda añadir cualquier contexto adicional o instrucciones específicas que considere relevantes para el análisis. Este es un punto clave para la colaboración humano-IA, permitiendo una mayor precisión en los resultados.
El proceso de análisis comienza con la construcción del prompt. Aunque en otras aplicaciones se podrían usar plantillas de Scriban, en este caso se utiliza StringBuilder para armar las instrucciones detalladas para la IA. Luego, se obtiene una instancia de IChatClient de Microsoft.Extensions.AI, un servicio esencial para interactuar con los modelos de IA. Los bytes de la imagen se extraen y, junto con el prompt, se empaquetan en un ChatMessage. Este ChatMessage es versátil, ya que permite incluir tanto TextContent (el prompt textual) como DataContent (los datos binarios de la imagen), facilitando la comunicación multimodal con el modelo de IA.
private async Task ExtractTasksFromImageAsync()
{
// ... código de inicialización ...
var prompt = new System.Text.StringBuilder();
prompt.AppendLine("# Tarea de Análisis de Imagen");
prompt.AppendLine("Analiza la imagen en busca de listas de tareas, elementos pendientes, notas o cualquier contenido que pueda organizarse en proyectos y tareas.");
prompt.AppendLine();
prompt.AppendLine("## Instrucciones:");
prompt.AppendLine("1. Identifica cualquier proyecto y tarea (elementos pendientes) visibles en la imagen.");
prompt.AppendLine("2. Formatea texto escrito a mano, capturas de pantalla o fotos de notas físicas en datos estructurados.");
prompt.AppendLine("3. Agrupa tareas relacionadas en proyectos cuando sea apropiado.");
if (!string.IsNullOrEmpty(AnalysisInstructions))
{
prompt.AppendLine($"4. {AnalysisInstructions}"); // Añade instrucciones adicionales del usuario
}
prompt.AppendLine();
prompt.AppendLine("Si no se encuentran proyectos/tareas, devuelve un array de proyectos vacío.");
var client = _chatClientService.GetClient();
byte[] imageBytes = File.ReadAllBytes(ImagePath); // Lee los bytes de la imagen
var msg = new Microsoft.Extensions.AI.ChatMessage(ChatRole.User,
[
new TextContent(prompt.ToString()),
new DataContent(imageBytes, mediaType: "image/png") // Adjunta la imagen
]);
var apiResponse = await client.GetResponseAsync<ProjectsJson>(msg); // Envía la solicitud a la IA
if (apiResponse?.Result?.Projects != null)
{
Projects = apiResponse.Result.Projects.ToList(); // Procesa la respuesta y actualiza los proyectos
}
// ... más código ...
}
El prompt está cuidadosamente diseñado para guiar al modelo de IA, instruyéndolo a identificar y estructurar información relevante. La capacidad de añadir instrucciones adicionales del usuario (AnalysisInstructions) es fundamental para afinar el análisis y adaptar los resultados a las necesidades específicas del momento. Finalmente, la respuesta del modelo de IA, que se espera sea un objeto ProjectsJson, se procesa para extraer la lista de proyectos y tareas, que luego se integra en la aplicación.
Colaboración Humano-IA: El Usuario Siempre al Mando
Al igual que con la experiencia de voz, el flujo de procesamiento de fotos no asume ciegamente que el agente de IA ha interpretado todo correctamente. Después de que la IA procesa la imagen y propone una organización de proyectos y tareas, se presenta esta propuesta al usuario para su revisión y confirmación. Este paso es crucial para mantener al usuario en un rol de control activo, permitiéndole validar, modificar o ajustar los resultados generados por la IA. Esta aproximación garantiza que la inteligencia artificial sirva como una asistencia aumentada, mejorando la productividad sin suplantar la supervisión humana.
Para aquellos interesados en las mejores prácticas para diseñar este tipo de flujos colaborativos, el HAX Toolkit de Microsoft Research ofrece recursos valiosos y guías sobre cómo construir experiencias de usuario centradas en la colaboración efectiva entre humanos y sistemas de IA, asegurando la transparencia y la confianza.
Conclusión: Un Futuro Multimodal con .NET MAUI y AI
La capacidad de nuestras aplicaciones .NET MAUI se ha extendido notablemente, permitiéndoles ahora no solo «escuchar» sino también «ver» el mundo a través de las imágenes. Con solo unas pocas líneas de código y un patrón de experiencia de usuario claro y bien definido, una aplicación puede ingerir imágenes, analizarlas utilizando modelos de IA con capacidades de visión avanzada, y devolver datos estructurados y accionables, como listas de tareas y proyectos organizados.
Las experiencias multimodales son ahora más accesibles y potentes que nunca. Gracias al soporte multiplataforma que ofrece .NET MAUI y la modularidad y flexibilidad proporcionada por Microsoft.Extensions.AI, los desarrolladores pueden evolucionar sus aplicaciones rápidamente. Esto les permite satisfacer las necesidades de sus usuarios dondequiera que se encuentren, ya sea escribiendo texto, hablando con la aplicación o simplemente capturando una foto. Esta convergencia de tecnologías representa un salto cualitativo en la interacción digital, abriendo un abanico de posibilidades para aplicaciones más inteligentes, intuitivas y humanizadas.
