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:

Paso 3: Despliegue en Hugging Face Spaces
Hugging Face Spaces proporciona un entorno persistente y gratuito para alojar demos de ML.
- Crear el Space: Elige el SDK de Gradio.
- Dependencias: Crea un
requirements.txtconopenaiytransformers. - Seguridad: Configura un Secret llamado
OPENAI_API_KEYen los ajustes del Space. - Código: Sube tu
app.py.

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.

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.