ChatGPT, Gradio y Hugging Face Spaces

ChatGPT, Gradio y Hugging Face Spaces

Esto es una pequeña prueba de cómo integrar los modelos de ChatGPT / OpenAI GPT3 en una aplicación de Gradio que corre en Hugging Face Spaces.

Lo más sorprendente de este proyecto es que el 90% del código ha sido generado directamente por OpenAI CODEX, demostrando cómo la IA puede acelerar radicalmente el ciclo de desarrollo.

Demo Interactiva

Paso 1: Generación de Código con OpenAI CODEX

Para generar el esqueleto de la aplicación, utilizamos el motor code-davinci-002 con el siguiente prompt:

# python3
# build a demo for OpenAI API and gradio
# define the "api_call_results" function for the gradio interface as a single text input (prompt).
# - Do not include any examples
# - live = False
# - for OpenAI API Completion method:
# - engine="text-davinci-003"
# - params: max_tokens, temperature and top_p

Observaciones al código generado

Es importante recordar que la IA no siempre es perfecta. Algunos ajustes manuales fueron necesarios:

  • Eliminación de parámetros obsoletos como capture_session = True.
  • Ajuste de la función de lanzamiento para entornos de servidores: iface.launch(inline=False).
  • Gestión de la API Key mediante variables de entorno para mayor seguridad.

Paso 2: Validación en Google Colab

Antes de desplegar en producción, validamos el funcionamiento en Colab.

pip install gradio==3.15.0
pip install openai

Si todo es correcto, verás una interfaz similar a esta:

Aplicación de Gradio en Colab

Paso 3: Despliegue en Hugging Face Spaces

Hugging Face Spaces proporciona un entorno persistente y gratuito para alojar demos de ML.

  1. Crear el Space: Elige el SDK de Gradio.
  2. Dependencias: Crea un requirements.txt con openai y transformers.
  3. Seguridad: Configura un Secret llamado OPENAI_API_KEY en los ajustes del Space.
  4. Código: Sube tu app.py.

Configuración del Space

Paso 4: Embeber en tu Sitio Web

Hugging Face permite integrar la aplicación de tres formas: vía Direct URL, Embed HTML o iframe. Para una integración fluida en blogs, la opción de iframe es la más versátil.

Opciones de embebido

Conclusiones y Próximos Pasos

Esta demo es solo el principio. Se pueden añadir capas de complejidad como:

  • Permitir que el usuario use su propia API Key (enmascarada como password).
  • Añadir sliders para controlar la “creatividad” del modelo (temperatura).
  • Usar LangChain para dotar al agente de memoria o acceso a herramientas externas.

Mantener la curiosidad por aprender es la mejor forma de avanzar en este ecosistema que cambia cada semana.