Esto de que la IA sea capaz de interpretar imágenes abre un abanico bastante grande de oportunidades y automatizaciones.
Si nos vamos al mundo web, con mi querido WordPress y su sistemas de bloques Gutenberg, vemos que tenemos un sistema de componentes ya predefinido con el que podremos montar prácticamente cualquier web.
A esto le unimos que yo soy muy de tirar a inicios de lápiz y papel, a la vieja escuela, sobre todo diagramas que es lo que queda más en mi tejado, pero veo que mis compis de UX también dejan viajar la imaginación más facilmente con lapiz y papel.
Pues ya tengo los 2 ingredientes a unir con este wrapper de GPT, un sistema con el que a partir de un boceto como entrada, tengamos como salida una página WordPress 💥
El plugin tendrá una pequeña sección de admin, donde poder indicar la API KEY de OpenAI, ya que será ChatGPT nuestra “IA”, y al tratarse de una funcionalidad general de parte de editores y redactores, la haremos toda desde el admin de WordPress en su propia sección.
Inicialmente empecé con la opción sólo de subir una imagen, ya que así podemos controlar exáctamente qué contenido estamos pasando, pero tras varias pruebas pude ver que era un poco rollo el tener que hacer la imagen en otro software, o en un papel, echarle una foto y subirla, por lo que añadí la opción de <canvas> HTML5, así podremos pintar directamente desde la sección ✍🏻
Lo de usar canvas mola, pero puede dar muchos quebraderos de cabeza inesperados, que fue lo que me pasó, cuando pasaba la imagen y ChatGPT no “entendía” nada 😫 … y el problema era que no le había dado un fondo al canvas !! (una hora de mi vida perdida por un fondo)
Solventado el problema, y pasando la imagen a ChatGPT via API, basta con decirle que quieres que use el sistema de bloques de WordPress, que ya él conoce, y que te genere el contenido, creamos la página y listo ✅
$prompt = 'Dame el content de una página wordpress basada en los bloques por defecto de WordPress, que represnete lo que veo en la imagen. Date el contenido para copiar-pegar en el editor modo código del admin. Las imágenes que necesites, usa urls de https://placehold.co/ .Devuelveme sólo el content del editor en texto plano, no verbose.';
$api_key = 'sk-proj-q4XG1Jj7EOPzJXA7UHHfT3BlbkFJTyqQGCxxxxx';
$response = Ablancodev_Openai::openai_api_request_image($prompt, $image_url, $api_key);
$response = str_replace('```html', '', $response);
$response = str_replace('```', '', $response);
// creamos una página con el contenido
$post = array(
'post_title' => 'Página creada por UX To Code',
'post_content' => $response,
'post_status' => 'publish',
'post_author' => 1,
'post_type' => 'page'
);
$post_id = wp_insert_post($post);
Fijaros que ni el prompt está demasiado currado, por lo que con un poco de iteración seguro que conseguimos resultados muy muy profesionales.
El repositorio del proyecto que podéis descargar completamente gratis:
https://github.com/ablancodev/uxtocode
… y el video demo, que sé que es lo que más mola 😎
Este MVP genera páginas con contenido dummy e imágenes de placehold.co, pero piensa en su evolución natural, creando contenido adaptado según un prompt inicial e imágenes para ello 🚀