¡Bienvenido a nuestro tutorial de hoy sobre cómo hacer un generador de recetas usando ChatGPT en Divi ! En esta guía, le explicaré paso a paso cómo configurar un formulario simple en su sitio web Divi que aprovecha Chat GPT para generar dinámicamente ideas e instrucciones de recetas de batidos.
Al final, tendrás un generador de recetas impulsado por IA que los visitantes pueden usar para obtener sugerencias de recetas personalizadas basadas en los ingredientes que tienen a mano. Esta es una forma realmente genial de agregar un elemento interactivo único a su sitio de comida o cocina.
¡Empecemos!
Configuración básica del campo del formulario
Configuraremos los campos de formulario fundamentales para nuestra herramienta de recomendación de batidos en esta sección. Los ingredientes, el tipo de batido y las restricciones dietéticas son algunos de estos campos.
Create Amazing Websites
Con el mejor generador de páginas gratuito Elementor
Empezar ahora
Agregar formulario Divi
En el constructor visual Divi, cree una nueva página y agregue una fila de una sola columna.
Agregue un módulo Divi Form Builder con el nombre "Smoothie Doctor" u otro nombre adecuado a la fila.
Campo de entrada para ingredientes
Los ingredientes deben ir en un campo nuevo. Determine el tipo de campo que será de entrada.
Ingrese un ID de campo fácil de recordar, como f_ingredients.
Cree una etiqueta en la parte superior, un ícono y un texto de marcador de posición (como "Ingrese sus ingredientes, separados por comas") para el campo de ingredientes debajo de la pestaña Diseño.
Campo de radio para tipo batido
Para nuestros tipos de batidos, agregue un nuevo campo.
Determine que el tipo de campo sea Radio.
Introduzca un ID de campo fácil de recordar, como f_type.
Agregue opciones para batidos de frutas y batidos de verduras al campo según el tipo de batido.
Establezca el Estilo de campo de radio/casilla de verificación en Predeterminado o Estilo de botón en Opciones de diseño.
Configure "SÍ" para las siguientes opciones de una línea.
Asegúrese de configurar los estilos de radio/casilla de verificación activos en la pestaña Diseño si utiliza el estilo de botón.
Campo de verificación de restricciones dietéticas
Para nuestras limitaciones dietéticas, agregue un nuevo campo.
Elija el tipo de campo Casilla de verificación.
Ingrese un ID de campo fácil de recordar, como f_restrictions.
Las opciones Bajas en calorías, Sin lácteos y Ninguna se pueden agregar al cuadro de limitaciones dietéticas para hacerlo más exclusivo.
Establezca el Estilo de campo de radio/casilla de verificación en Predeterminado o Estilo de botón en Opciones de diseño.
Configure "SÍ" para las siguientes opciones de una línea.
Asegúrese de configurar los estilos de radio/casilla de verificación activos en la pestaña Diseño si utiliza el estilo de botón.
Agregar el campo Divi Form AI y su descripción general
Actualizaremos nuestro formulario utilizando la función Divi Form AI en esta sección. Con la ayuda de Divi Form AI, podremos producir recetas de batidos generadas por IA y adaptadas a las posibles limitaciones dietéticas que puedan tener nuestros usuarios. A medida que definimos la personalidad de IA, las indicaciones de IA y más en esta forma impulsada por Divi AI, lo dividiremos en algunas secciones.
Campo AI para salida de recetas
Agregue un campo para IA al formulario y asígnele el nombre "Receta AI" o cualquier nombre adecuado.
Elija el tipo de campo AI para el campo.
Ingrese un ID de campo fácil de recordar, como f_recipe.
Configure las opciones de solicitud en la sección Formulario AI desplazándose hacia abajo. Aquí, especificaremos las pautas para el modelo de IA.
Configuración de formularios Divi Form AI
Sé que todos estamos listos para comenzar con nuestras indicaciones de IA para poder disfrutar de los maravillosos batidos y delicias dulces de Chat GPT, pero primero veamos la configuración de IA.
Estos se encuentran en la sección Formulario AI de la configuración del formulario principal, no en la configuración de campo.
Establezca un gasto máximo permitido para este formulario en particular que se puede cambiar en la configuración del administrador.
Seleccione la acción que desea que realice el formulario cuando se alcance el límite.
El botón de envío del formulario se puede mostrar, ocultar o desactivar hasta que se produzca contenido de IA.
Para evaluar la rapidez y la calidad de la respuesta, guarde las respuestas de IA en la base de datos.
Establezca un límite de velocidad en las llamadas API para evitar abusos.
Si recibe respuestas deficientes o parece que la IA no registra todas las entradas, actívelo.
Configuración de Divi AI: definición de una persona de IA
El contexto es lo que mantiene a estos modelos de IA bajo control y les impide tener alucinaciones extrañas y decir galimatías absolutamente ilógicas. Definiremos una persona de IA para proporcionar contexto y un rol específico para el modelo de IA. La persona, para usar terminología de IA, es la forma en que le brindamos el contexto que necesita para responder a sus solicitudes con mayor habilidad.
Estás de suerte porque Divi Form Builder te permite personalizar y crear completamente una persona desde cero, además de ofrecer algunas personas de IA predefinidas. Vaya a la configuración del Campo AI y desplácese hacia abajo hasta Formulario AI para ver estas opciones.
Creación de una persona de IA personalizada
Elija "Personalizado" de las opciones de persona de solicitud predefinidas en la sección Persona de solicitud predefinida.
En la Persona de solicitud personalizada, describa la posición y el conjunto de habilidades del chef de IA. Utilizando los componentes proporcionados por el usuario y teniendo en cuenta las restricciones dietéticas, podría decir, por ejemplo: "Eres un chef de IA con experiencia en la creación de deliciosas recetas de batidos".
A la persona de IA incluso se le puede dar un nombre, como "Chef Engine", agregando algo como "Tu nombre es Chef Engine y debes referirte a ti mismo como tal". su Persona de aviso personalizado ha llegado a su fin.
Al crear una persona de IA, podemos proporcionar el contexto del modelo de IA e instrucciones sobre el tipo de datos que queremos que produzca. Esto hace posible ajustar las recetas de batidos generadas por IA a las entradas y preferencias del usuario.
Configuración de Divi AI: ingeniería de su mensaje de IA
Es hora de abordar el problema más difícil cuando se trabaja con cualquier tipo de IA, como Divi Form AI o ChatGPT, ingeniería rápida. La ingeniería rápida puede parecer intimidante para el profano, pero lo único que realmente implica es aprender a comunicarse con la IA para que comprenda lo que usted está diciendo y lleve a cabo sus instrucciones.
Por lo tanto, para generar la receta del batido, debemos proporcionar el contexto y las instrucciones adecuadas dentro del marco de esta lección de Divi Form AI. Tomamos en cuenta las aportaciones de los usuarios para nuestro Divi Smoothie Generator porque con Divi From AI hacemos más que solo crear contenido. Para lograr esto, pasamos los ID de campo que definimos previamente a nuestro mensaje.
Ahora entiendes por qué me molestaba.
Las siguientes son las consideraciones más cruciales:
- Verifique que esté utilizando el ID de campo correcto.
- Asegúrese de ajustar el ID del campo en
%%(por ejemplo, f_ingredients se convierte en%%f_ingredients%%).
Dado esto, todo lo que queda es instruir a la IA sobre cómo administrar la entrada del usuario desde su formulario Divi y qué quiere que haga con él. Le informaremos de los ingredientes del usuario, el tipo de batido que desea y las restricciones dietéticas que deberá tener en cuenta.
Elaboración de mensaje de IA
Utilice el ID de campo %%f_ingredients%% para enumerar los ingredientes disponibles del usuario al comienzo de la sección de solicitud. Esto garantizará que el modelo de IA conozca los ingredientes a tener en cuenta.
El tipo de batido preferido del usuario debe incluirse utilizando el ID de campo %%f_type%% . Esto ayudará al modelo de IA a producir la receta correcta.
Utilice el ID de campo %%f_restrictions%% para indicar las limitaciones dietéticas del usuario. Esto garantizará que al crear la receta, el modelo de IA tendrá en cuenta estas limitaciones.
Deje en claro que le gustaría que la IA ofrezca una receta de batido completa, paso a paso, que tenga en cuenta sus ingredientes y limitaciones dietéticas.
Insista en que la receta debe tener en cuenta las limitaciones dietéticas del usuario y el tipo de batido preferido.
Nos decidimos por el siguiente mensaje.
The user has the following list of ingredients available to them:
%%f_ingredients%%
They want a %%f_type%% smoothie recipe.
They have the following dietary restrictions:
%%f_restrictions%%
Please give me on detailed step-by-step smoothie recipe that takes the users ingredients and dietary restrictions into account. Make sure you adhere to their dietary restrictions and make the type of smoothie they want.
Do not ask me any follow-up questions, just provide the information.Ahora, suponiendo que haya completado cada paso exactamente como le indiqué, su respuesta GPT debería parecerse a esto.
Configuración de Divi AI: mejora del aviso
Al cambiar la redacción o agregar contexto adicional, puede hacer que la indicación inicial sea más efectiva si no produce el resultado deseado. Como servicio adicional para nuestros usuarios, es posible que también deseemos incluir los datos nutricionales al final de la respuesta.
Pidamos a la IA que incluya los detalles dietéticos agregando " I also want you to output detailed nutritional information as an HTML table format for easy reading".
Piense en formatear la salida de la tabla con elementos HTML yendo un paso más allá y agregando Use <table> <thead> <tr>
etc. según sea necesario para generar la tabla en su mensaje .
Su forma Divi AI ahora debería ser más refinada y la respuesta de GPT debería parecerse a esto.
Configuración de Divi AI: precargador de texto de formulario
Dependiendo del modelo de GPT que esté utilizando, es posible que los usuarios tengan que esperar unos segundos, lo cual no es lo ideal. No te mentiré sobre eso. Para mejorar la experiencia del usuario y convencerlos de que su sitio web no ha fallado ni se ha congelado por cualquier motivo, siempre es una buena idea instalar un precargador.
Para ayudar con esto, Divi Form AI ofrece varias selecciones de opciones de precargador. Además de algunos animados, también ofrecemos un precargador de texto que le da un ambiente de terminal cyberpunk genial.
- Navegue hasta la configuración del campo Receta AI.
- Seleccione Texto en las preferencias de Estilo de carga de respuesta de AI desplazándose hacia abajo hasta Formulario AI.
- Ingrese el texto que desea ver durante el proceso de precarga en Texto de respuesta de AI, como "Analizando ingredientes..." y "Considerando restricciones..."
- Usando códigos de color HTML entre llaves, puede cambiar el color del texto para cada línea (por ejemplo, ingrese "#000000" para texto negro).
- La salida del texto se puede configurar para que aparezca en diferentes líneas o en la misma línea, según se desee.
Perspectiva final
Aquí hay una demostración visual de cómo se ve el generador de recetas de batidos.
En conclusión
¡Y eso es! Ahora tienes tu propio generador de recetas inteligente impulsado por ChatGPT en tu sitio web Divi . Con solo un formulario simple y algunas indicaciones cuidadosas de la IA, puede crear una herramienta divertida para que los visitantes obtengan ideas de recetas personalizadas.
Asegúrese de experimentar modificando el personaje de IA y las indicaciones para producir diferentes tipos de recetas e instrucciones adaptadas al tema de su sitio. Las posibilidades son realmente infinitas al combinar Divi y ChatGPT.
