Creé un panel reutilizable para leer el análisis del tráfico de documentos usando Vizro-AI |  de Jo Stichbury |  mayo, 2024

(En menos de 50 líneas de código)

Una captura de pantalla de tema oscuro con un conjunto de gráficos para visualizar datos de tráfico de un sitio web.
El panel resultante a partir de datos de tráfico típicos

En este artículo, explicaré cómo construí un panel para visualizar los datos de tráfico para cierta documentación que mantengo como redactor técnico. Tengo pocas habilidades de diseño y experiencia limitada en Python, por lo que necesitaba un enfoque simple y de bajo código para mostrar el impacto y el uso de la documentación que mantengo. Esta resultó ser una solución de código abierto: vizro como plantilla para un panel de control de código bajo, y Vizro-AI para construir los gráficos individuales con IA generativa.

TL;DR?

Si desea comenzar directamente, puede encontrar el código de Jupyter Notebook para el panel en mi repositorio de GitHub.

Un proyecto de panel de lectura de Documentos

Si, como yo, gestionas un proyecto de documentos de código abierto con Lea los documentos (RTD), probablemente haya descubierto que puede descargar los datos de tráfico de los últimos 90 días en formato CSV desde el panel de su proyecto. El panel también muestra un gráfico de totales de páginas vistas diarias, como el que se muestra a continuación.

Un gráfico de color verde azulado con fecha en el eje x y una curva de vistas de página que sube y baja.
Un gráfico típico de páginas vistas RTD (los únicos datos gráficos de tráfico proporcionados)

Para obtener resultados visuales adicionales, puede aprovechar Google Analytics (GA). Sin embargo, algunos proyectos prefieren no utilizar GA porque se considera que su cumplimiento con el Reglamento General de Protección de Datos (GDPR) controversialparticularmente en la Unión Europea (UE).

Obtener el código y los datos

Solo tenga en cuenta que en el siguiente ejemplo utilicé un conjunto de datos de tráfico CSV falsos que generé, con la ayuda de OpenAI, para mantener privado el tráfico a nuestro proyecto. Los datos falsos tienen los mismos campos que los datos RTD genuinos, por lo que puede descargar y usar el panel con los datos descargados desde su panel RTD.

Para ejecutar el ejemplo usted mismo, necesitará mis datos falsos (o su propia descarga) y el código de Jupyter Notebook, almacenado en mi repositorio de GitHub. Es sencillo de recorrer en un nivel básico, pero un usuario más avanzado puede ampliarlo. ¡Avíseme si crea una versión mejorada!

vizro es un marco construido sobre trama y Estrellarse que utiliza un enfoque de configuración para especificar diseños de paneles personalizados. Un panel de Vizro se puede completar con gráficos creados por Vizro-AI, un paquete independiente de Vizro que simplifica el proceso de visualización apoyándose en la IA generativa.

En este ejemplo, proporcioné los datos y las instrucciones en lenguaje natural, y Vizro-AI generó el código Python y creé los gráficos solicitados. Esto funcionó bien para mí como escritor, ya que no tengo habilidades de diseño front-end y no estoy familiarizado con Plotly, pero estoy feliz de formular un mensaje de IA generativo adecuado y obtener un gráfico de OpenAI.

Configurar Vizro-AI

Antes de ejecutar el código de Notebook, debe configurar Vizro-AI dentro de un entorno virtual con Python 3.9 o posterior. Instale el paquete con pip install vizro_ai.

A continuación, necesita una clave API para acceder a OpenAI. Si aún no tienes una cuenta, crea unoy compra algunos créditos para usar un modelo ya que no puedes usar la versión gratuita. Genere una clave API y agréguela a su entorno para que el código que escriba en el siguiente paso pueda acceder a ella para llamar a OpenAI con éxito. Hay algunos sencillos instrucciones en los documentos de OpenAIy el proceso también está cubierto en el Guía de configuración de Vizro-AI LLM.

Construir un gráfico

En este punto puedes abra un Jupyter Notebook para hacer su primer gráfico, o simplemente abre el Cuaderno de mi repositorio para recorrer el código que creé y cargar sus datos RTD (o los datos falsos que proporcioné) en un DataFrame de pandas, llamado df en el código siguiente.

El siguiente código muestra cómo enviar una solicitud a Vizro-AI para crear un gráfico que se parezca al gráfico del panel del proyecto Read the Docs, que muestra las vistas por fecha, pero divide los datos en dos seguimientos, para el versiones estables y más recientes de la documentación:

“Combine filas de Vistas para cada Fecha para obtener la Versión más reciente y estable. Dibuje un gráfico de líneas suavizadas que compare las vistas por fecha para ver si son más recientes y estables”.

Vizro-AI pasa la consulta en lenguaje natural “Combine filas de Vistas para cada Fecha para obtener la Versión más reciente y estable. Dibuje un gráfico de líneas que compare las vistas por fecha para obtener las últimas y estables”y el marco de datos al modelo. Tenga en cuenta que en el ejemplo anterior, he especificado un modelo gpt-4. Vizro-AI predeterminado para usar gpt-3.5-turbo porque ofrece un precio más bajo y una mayor velocidad para proporcionar respuestas, pero no ofrece los gráficos más sofisticados, por lo que opté por hacer una solicitud explícita para usar un modelo gpt-4.

El resultado del gráfico dependerá de sus datos y del resultado recibido de OpenAI en el momento en que se envió la consulta. El parámetro explain=True solicita que Vizro-AI explique cómo se obtuvo el gráfico resultante, y la explicación se muestra como resultado en Jupyter Notebook, junto con el gráfico que muestra el show() dominio.

El texto de Insights devuelto por Vizro-AI explica cómo manipular los datos de tráfico. La sección Código describe los pasos que sigue el fragmento de código para generar el gráfico de líneas solicitado.

La sección de información obtenida de la llamada a plot() con instrucciones “Combina filas de vistas para cada fecha para obtener la versión más reciente y estable. Dibuje un gráfico de líneas suavizadas que compare las vistas por fecha para ver si son más recientes y estables”.

El gráfico devuelto tiene el siguiente aspecto:

Una captura de pantalla de tema oscuro de un gráfico único que muestra la fecha en el eje x y dos líneas de colores de datos de visualización para un sitio web.
Gráfico devuelto por la llamada a plot() con instrucciones “Combine filas de Vistas para cada Fecha para obtener la versión más reciente y estable. Dibuje un gráfico de líneas suavizadas que compare las vistas por fecha para ver si son más recientes y estables”.

Crear más gráficos

Creé algunos gráficos adicionales para ilustrar mejor el tráfico a nuestra documentación, de la siguiente manera:

Recopile filas de datos para la ruta donde Versión == estable. Cree un gráfico de barras horizontales que describa las vistas totales de las 5 páginas principales. Agregue los números a cada barra y titule “Visitas totales de las 5 páginas estables principales”. Disminuir el tamaño de fuente de las marcas” y “Cotejar filas de datos para la ruta donde Versión == estable. Cree un gráfico de líneas para el total de Vistas por fecha para las 5 rutas principales “

Vizro-AI ha hecho el trabajo pesado por mí al generar el código para manipular los datos y generar un conjunto de gráficos, que son útiles en sí mismos. Aún más útil sería agruparlos para crear un panel completo.

Crear un panel de Vizro

Puede usar Vizro en el mismo Jupyter Notebook que el código Vizro-AI anterior. Asegurate que pip install vizro como el documentación vizro describe. A continuación se muestra un código para el esqueleto de un panel simple sin la generación de gráficos:

El # TO DO La sección es donde agregamos en cada uno de los gráficos.

Hay dos opciones en este punto:

  • Utilice Vizro-AI para generar los gráficos cada vez que se genere el panel
  • Utilice el código Python que Vizro-AI volvió a llamar directamente a Plotly.

La primera opción requiere menos código, pero su retorno será más lento y más costoso porque utiliza Vizro-AI, que llama OpenAI. La segunda opción es más rápida pero requiere más manipulación del código.

Aquí hay una celda que contiene el código del panel que demuestra la primera opción con funciones que llaman a Vizro-AI (Si planea ejecutar esto usted mismo, asegúrese de estar usando el Notebook en mi repositorio, haber cargado los datos y haber recorrido las celdas que configuraron las llamadas a Vizro-AI.):

Aquí hay una versión ligeramente diferente, que utiliza la segunda opción para generar uno de los gráficos. Aproveché la oportunidad para modificar ligeramente el código Python para cambiar los colores de las líneas, ¡lo cual es mi límite para la manipulación de Plotly! (Nuevamente, si planea ejecutar esto usted mismo, asegúrese de estar usando Notebook en mi repositorio, haber cargado los datos y haber recorrido las celdas que configuran las funciones de creación de gráficos.).

Puede descargar Jupyter Notebook para probar el panel con sus propios datos de Read the Docs. Se ve de la siguiente manera con los datos falsos que proporcioné.