15/1/2023

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.

Demo ChatGPT

El 90% de esta aplicación la ha generado directamente OpenAI CODEX. Es un ejemplo perfecto de cómo las herramientas de IA pueden acelerar el desarrollo.

Prompt OpenAI CODEX para Gradio

Configuración OpenAI

Lo primero de todo, necesitas una cuenta en OpenAI. Aquí puedes conseguirla (OpenAI Sign up). Te asignarán un crédito de $18 para las primeras pruebas. Nosotros utilizaremos el motor code-davinci-002 para generar código.

Después de darte de alta, tendrás que crear una API-Key en la sección de API Key.

Prompt para OpenAI CODEX

Aquí está la petición que he utilizado para esta demo. Podéis copiarla directamente en el Playground:

# 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
import gradio as gr
import openai
import os
import re
# openai API key
openai.api_key = os.getenv("OPENAI_API_KEY")

Prueba en Colab

Ahora que tenemos código, vamos a comprobar que todo está ok utilizando Colab.

pip install gradio==3.15.0
pip install openai

Después de instalarlas, creamos otra celda de código y pegamos el resultado. Y si todo va bien, tendréis algo muy parecido a esto:

Aplicación de Gradio en Colab Aplicación de Gradio en Colab

Como puedes leer en las notas de la ejecución, si añades el parámetro share a launch, tendréis un link que podréis compartir durante 72 horas: iface.launch(share=True).

Hugging Face Spaces

Es hora de llevarnos el código a Hugging Face Spaces. Una vez registrado, crea un nuevo Space. Aparecerás en un formulario como este:

Formulario de nuevo Space

Cuando lo tengas disponible, vamos a crear dos ficheros en la pestaña de Files and Versions.

Pestaña de Files and Versions Pestaña de Files and Versions

Primero, el fichero de dependencias (requirements.txt):

openai
transformers

Segundo, definiremos un SECRET en Settings con el nombre OPENAI_API_KEY para proteger tu clave.

Gestión de repository secrets Definición / Gestión de repository secrets

Tercero, el fichero de aplicación (app.py). Copia el código que has probado en Colab.

Hugging Face Spaces pasará a modo [Building] y luego a [Running]. Tendrás tu aplicación corriendo en la pestaña [App].

Pestaña de App Pestaña de App

Embeber tu aplicación en una web

Por último, para integrar tu aplicación en tu web, ve al botón […] del espacio.

Menú de acceso Menú de acceso

Tienes tres opciones:

Opciones de embebido Opciones de embebido

He elegido la opción de iframe para integrarlo en mi web.

Siguientes pasos

La demo que has visto al principio incluye mejoras como:

  • Opción para que el usuario introduzca su propia API Key.
  • Parámetros de OpenAI configurables mediante sliders.
  • Etiquetas para mejorar la usabilidad.

Espero que os haya resultado interesante y útil.