{"id":8,"date":"2025-01-30T10:53:38","date_gmt":"2025-01-30T10:53:38","guid":{"rendered":"https:\/\/elbrinner.com\/wordpress\/?p=8"},"modified":"2025-03-30T11:38:22","modified_gmt":"2025-03-30T11:38:22","slug":"integracion-de-azure-openai-con-stream-en-composer-frameworks-para-respuestas-mas-rapidas","status":"publish","type":"post","link":"https:\/\/elbrinner.com\/index.php\/2025\/01\/30\/integracion-de-azure-openai-con-stream-en-composer-frameworks-para-respuestas-mas-rapidas\/","title":{"rendered":"Integraci\u00f3n de Azure OpenAI con Stream en Composer Frameworks para respuestas m\u00e1s r\u00e1pidas"},"content":{"rendered":"

Estaba desarrollando una aplicaci\u00f3n con Composer Frameworks que manejaba una gran cantidad de tokens, y not\u00e9 que la respuesta del asistente era considerablemente lenta. Al analizar el c\u00f3digo de Composer, una de las ventajas de ser de c\u00f3digo abierto, identifiqu\u00e9 el cuello de botella. La idea era seguir aprovechando el modo low-code, pero implementando una soluci\u00f3n para enviar informaci\u00f3n que pudiera ser detectada en la parte de .NET, permitiendo as\u00ed recuperar y procesar las respuestas de Azure OpenAI en modo stream y mostrarlas de forma fluida en el frontend.<\/p>\n

\u00bfQu\u00e9 es el Modo Stream?<\/strong><\/p>\n

Para quienes no est\u00e9n familiarizados, el modo stream es la forma en que GPT, por ejemplo, muestra el texto gradualmente, palabra por palabra. Esto mejora significativamente la experiencia del usuario al reducir la percepci\u00f3n de latencia. Sin embargo, al realizar llamadas externas desde Composer, este espera la respuesta completa antes de proceder, lo que puede resultar en una mala experiencia de usuario si la respuesta de OpenAI tarda varios segundos.<\/p>\n

Implementaci\u00f3n de la Soluci\u00f3n<\/strong><\/p>\n

Para solucionar este problema, implementamos un middleware personalizado que intercepta las llamadas y permite procesar las respuestas en modo stream y prepararlas para su visualizaci\u00f3n en el frontend.<\/p>\n

Paso 1: Creaci\u00f3n y Registro del Middleware<\/strong><\/p>\n

Primero, creamos un middleware y lo registramos en el archivo Startup.cs dentro del m\u00e9todo ConfigureServices:<\/p>\n

 <\/p>\n

services.AddTransient<IMiddleware, ComposerMiddleware>();<\/pre>\n
 <\/p>\n
Paso 2: Implementaci\u00f3n del Middleware<\/strong><\/p>\n
A continuaci\u00f3n, abrimos el archivo ComposerMiddleware.cs y extendemos la interfaz IMiddleware<\/strong>:<\/p>\n
 <\/p>\n
public class ComposerMiddleware : IMiddleware\r\n {\r\n     public async Task OnTurnAsync(ITurnContext turnContext, NextDelegate next, CancellationToken cancellationToken = default)\r\n     {\r\n         turnContext.OnSendActivities(async (context, activities, nextSend) =>\r\n         {\r\n             foreach (var activity in activities)\r\n             {\r\n                \r\n             }\r\n\r\n         });\r\n\r\n         await next(cancellationToken);\r\n     }\r\n\r\n }\r\n<\/pre>\n
Dentro del bucle foreach, podemos insertar l\u00f3gica para detectar una se\u00f1al espec\u00edfica (un \u00abflag\u00bb) que indique que se debe realizar una llamada a OpenAI en modo stream. En mis pruebas, utilic\u00e9 el channelData con una estructura JSON. Al detectar que el JSON conten\u00eda el atributo type: \u00abstream\u00bb, extraje los dem\u00e1s valores necesarios para realizar la llamada a OpenAI y proces\u00e9 la respuesta en tiempo real.<\/p>\n
Ejemplo de Estructura JSON en <\/strong>channelData:<\/strong><\/p>\n
 <\/p>\n
JSON\r\n{\r\n    \"type\": \"stream\",\r\n    \"prompt\": \"Escribe un poema sobre la naturaleza\",\r\n    \"model\": \"gpt-4o\",\r\n    \"conversationId\": \"12345\"\r\n}\r\n<\/pre>\n
 <\/p>\n
Paso 3: Llamada a Azure OpenAI y Manejo del Stream en .NET<\/strong><\/p>\n
En la parte de .NET, al detectar el type: \u00abstream\u00bb, se realiza la llamada a la API de Azure OpenAI utilizando el SDK correspondiente, configurando la solicitud para recibir respuestas en modo stream.<\/p>\n
Paso 4: Retorno de Datos por Stream y Preparaci\u00f3n para el Frontend<\/strong><\/p>\n
Aqu\u00ed es donde preparamos los datos para su visualizaci\u00f3n en el frontend. En mi implementaci\u00f3n, envi\u00e9 el primer \u00abchunk\u00bb de la respuesta como un mensaje normal de Composer, incluyendo el conversationId para identificarlo. Los chunks subsiguientes se env\u00edan como eventos.<\/p>\n