Willkommen zu unserem heutigen Tutorial zum Erstellen eines Rezeptgenerators mit ChatGPT auf Divi ! In dieser Anleitung führe ich Sie Schritt für Schritt durch die Einrichtung eines einfachen Formulars auf Ihrer Divi-Website, das Chat GPT nutzt, um Smoothie-Rezeptideen und -Anweisungen dynamisch zu generieren.
Am Ende verfügen Sie über einen KI-gestützten Rezeptgenerator, mit dem Besucher individuelle Rezeptvorschläge basierend auf den verfügbaren Zutaten erhalten können. Dies ist eine wirklich coole Möglichkeit, Ihrer Essens- oder Kochseite ein einzigartiges interaktives Element hinzuzufügen.
Lass uns anfangen!
Grundlegende Einrichtung von Formularfeldern
In diesem Abschnitt konfigurieren wir die grundlegenden Formularfelder für unser Smoothie-Empfehlungstool. Dazu gehören unter anderem Zutaten, Smoothie-Typ und diätetische Einschränkungen.
Erstellen Sie erstaunliche Websites
Mit dem besten kostenlosen Seite Builder Elementor
Jetzt anfangen
Divi-Formular hinzufügen
Erstellen Sie im Divi Visual Builder eine neue Seite und fügen Sie eine einzelne Spaltenzeile hinzu.
Fügen Sie der Zeile ein Divi Form Builder-Modul mit dem Namen „Smoothie Doctor“ oder einem anderen passenden Namen hinzu.
Eingabefeld für Zutaten
Die Zutaten sollten in ein neues Feld gelangen. Bestimmen Sie den Feldtyp, der eingegeben werden soll.
Geben Sie eine einfach zu merkende Feld-ID ein, z. B. f_ingredients.
Erstellen Sie oben eine Beschriftung, ein Symbol und einen Platzhaltertext (z. B. „Geben Sie Ihre Zutaten durch Kommas getrennt ein“) für das Zutatenfeld unter der Registerkarte „Layout“.
Funkfeld für Smoothie-Typ
Fügen Sie für unsere Smoothie-Sorten ein neues Feld hinzu.
Legen Sie den Feldtyp „Radio“ fest.
Geben Sie eine einfach zu merkende Feld-ID ein, z. B. f_type.
Fügen Sie Optionen für Frucht-Smoothie und Gemüse-Smoothie zum Feld für die Smoothie-Sorte hinzu.
Legen Sie unter „Layout-Optionen“ den Radio-/Kontrollkästchen-Feldstil auf „Standard“ oder „Schaltflächenstil“ fest.
Stellen Sie „JA“ für die folgenden einzeiligen Optionen ein.
Stellen Sie sicher, dass Sie die aktiven Options-/Kontrollkästchenstile auf der Registerkarte „Design“ festlegen, wenn Sie den Schaltflächenstil verwenden.
Feld zur Überprüfung der Ernährungseinschränkungen
Fügen Sie für unsere Ernährungseinschränkungen ein neues Feld hinzu.
Wählen Sie den Feldtyp „Kontrollkästchen“.
Geben Sie eine einprägsame Feld-ID ein, z. B. f_restrictions.
Die Optionen „Kalorienarm“, „Milchfrei“ und „Keine“ können zum Feld „Diätbeschränkungen“ hinzugefügt werden, um es einzigartiger zu gestalten.
Legen Sie unter „Layout-Optionen“ den Radio-/Kontrollkästchen-Feldstil auf „Standard“ oder „Schaltflächenstil“ fest.
Stellen Sie „JA“ für die folgenden einzeiligen Optionen ein.
Stellen Sie sicher, dass Sie die aktiven Options-/Kontrollkästchenstile auf der Registerkarte „Design“ festlegen, wenn Sie den Schaltflächenstil verwenden.
Hinzufügen eines Divi Form AI-Felds und einer Übersicht
In diesem Abschnitt werden wir unser Formular mithilfe der Divi Form AI-Funktion aktualisieren. Mit Hilfe von Divi Form AI werden wir in der Lage sein, Smoothie-Rezepte zu erstellen, die KI-generiert und auf die möglichen Ernährungseinschränkungen unserer Benutzer zugeschnitten sind. Während wir die KI-Persona, KI-Eingabeaufforderungen und mehr für diese Divi-KI-gesteuerte Form definieren, werden wir dies in einige Abschnitte unterteilen.
AI-Feld für Rezeptausgabe
Fügen Sie dem Formular ein Feld für AI hinzu und geben Sie ihm den Namen „AI Recipe“ oder einen anderen passenden Namen.
Wählen Sie den AI-Feldtyp für das Feld.
Geben Sie eine einfach zu merkende Feld-ID ein, z. B. f_recipe.
Konfigurieren Sie die Eingabeaufforderungsoptionen im Abschnitt „Form AI“, indem Sie nach unten scrollen. Hier werden wir die Richtlinien für das KI-Modell festlegen.
Divi Form AI Forms-Einstellungen
Ich weiß, dass wir alle bereit sind, mit unseren KI-Eingabeaufforderungen zu beginnen, damit wir die wunderbaren Smoothies und süßen Chat-GPT-Leckereien genießen können, aber schauen wir uns zunächst die KI-Einstellungen an.
Diese befinden sich im Abschnitt „Formular AI“ der Hauptformulareinstellungen, nicht in den Feldeinstellungen.
Legen Sie einen maximal zulässigen Aufwand für dieses spezielle Formular fest, der in den Admin-Einstellungen geändert werden kann.
Wählen Sie die gewünschte Aktion aus, die das Formular ausführen soll, wenn das Limit erreicht ist.
Die Schaltfläche „Senden“ des Formulars kann angezeigt, ausgeblendet oder deaktiviert werden, bis KI-Inhalte erstellt werden.
Speichern Sie KI-Antworten in der Datenbank, um Schnelligkeit und Antwortqualität zu bewerten.
Legen Sie eine Ratenbegrenzung für API-Aufrufe fest, um Missbrauch zu verhindern.
Wenn Sie schlechte Antworten erhalten oder es den Anschein hat, dass die KI nicht alle Eingaben registriert, schalten Sie diese Option ein.
Divi AI Setup – Definieren einer KI-Persona
Der Kontext hält diese KI-Modelle unter Kontrolle und verhindert, dass sie bizarre Halluzinationen haben und absolut unlogisches Kauderwelsch von sich geben. Wir werden eine KI-Persona definieren, um Kontext und eine spezifische Rolle für das KI-Modell bereitzustellen. Die Persona, um die KI-Terminologie zu verwenden, ist die Art und Weise, wie wir ihr den Kontext zur Verfügung stellen, den sie benötigt, um geschickter auf Ihre Anfragen reagieren zu können.
Sie haben Glück, denn mit Divi Form Builder können Sie eine Persona vollständig anpassen und von Grund auf erstellen und zusätzlich einige vordefinierte KI-Personas anbieten. Gehen Sie zu den AI-Feldeinstellungen und scrollen Sie nach unten zu „Form AI“, um diese Auswahlmöglichkeiten anzuzeigen.
Erstellen einer benutzerdefinierten KI-Persona
Wählen Sie „Benutzerdefiniert“ aus den vordefinierten Eingabeaufforderungs-Persona-Optionen im Abschnitt „Vordefinierte Eingabeaufforderungs-Persona“.
Beschreiben Sie in der Custom Prompt Persona die Position und die Fähigkeiten des KI-Kochs. Unter Verwendung der vom Benutzer bereitgestellten Komponenten und unter Berücksichtigung etwaiger Ernährungseinschränkungen könnten Sie beispielsweise sagen: „Sie sind ein KI-Koch mit Erfahrung in der Erstellung köstlicher Smoothie-Rezepte.“
Der KI-Persona kann sogar ein Name gegeben werden, beispielsweise „Chef Engine“, indem man etwas wie „Ihr Name ist Chef Engine und Sie sollten sich selbst als solchen bezeichnen“ hinzufügt. Ihre benutzerdefinierte Prompt-Persona ist zu Ende.
Durch die Erstellung einer KI-Persona können wir den Kontext des KI-Modells und Anweisungen zu der Art von Daten bereitstellen, die es erzeugen soll. Dadurch ist es möglich, die KI-generierten Smoothie-Rezepte an die Eingaben und Vorlieben des Nutzers anzupassen.
Divi AI Setup – Entwickeln Sie Ihre KI-Eingabeaufforderung
Es ist an der Zeit, das schwierigste Problem bei der Arbeit mit jeglicher Art von KI anzugehen, wie z. B. Divi Form AI oder ChatGPT, Prompt Engineering. Schnelles Engineering mag für den Laien einschüchternd wirken, aber alles, was es wirklich bedeutet, ist zu lernen, wie man mit der KI kommuniziert, damit sie versteht, was Sie sagen, und Ihre Anweisungen ausführt.
Um das Smoothie-Rezept zu erstellen, müssen wir daher im Rahmen dieser Divi Form AI-Lektion den entsprechenden Kontext und die entsprechenden Anweisungen bereitstellen. Wir berücksichtigen Benutzereingaben für unseren Divi Smoothie Generator, weil wir mit Divi From AI mehr machen, als nur Inhalte zu erstellen. Um dies zu erreichen, übergeben wir die zuvor definierten Feld-IDs an unsere Eingabeaufforderung.
Sie sehen jetzt, warum es mir weh tat.
Im Folgenden sind die wichtigsten Überlegungen aufgeführt:
- Stellen Sie sicher, dass Sie die richtige Feld-ID verwenden.
- Stellen Sie sicher, dass Sie die Feld-ID in
%%einschließen (z. B. wird f_ingredients zu%%f_ingredients%%).
Vor diesem Hintergrund müssen Sie der KI nur noch anweisen, wie sie Benutzereingaben aus Ihrem Divi-Formular verwalten soll und was sie damit tun soll. Wir informieren Sie über die Zutaten des Benutzers, die Art des gewünschten Smoothies und alle zu berücksichtigenden Ernährungseinschränkungen.
Eingabeaufforderung für die Herstellung von KI
Verwenden Sie die Feld-ID %%f_ingredients%% , um die verfügbaren Zutaten des Benutzers am Anfang des Eingabeaufforderungsabschnitts aufzulisten. Dadurch wird sichergestellt, dass das KI-Modell die zu berücksichtigenden Zutaten kennt.
Der vom Benutzer bevorzugte Smoothie-Typ sollte dann über die Feld-ID %%f_type%% eingebunden werden. Dies wird dem KI-Modell helfen, das richtige Rezept zu erstellen.
Verwenden Sie die Feld-ID %%f_restrictions%% , um die Ernährungseinschränkungen des Benutzers anzugeben. Dadurch wird gewährleistet, dass das KI-Modell diese Einschränkungen bei der Rezepterstellung berücksichtigt.
Machen Sie deutlich, dass Sie möchten, dass die KI ein ausführliches, schrittweises Smoothie-Rezept anbietet, das Ihre Zutaten und Ernährungseinschränkungen berücksichtigt.
Bestehen Sie darauf, dass das Rezept die Ernährungseinschränkungen des Benutzers und die bevorzugte Smoothie-Sorte berücksichtigt.
Wir haben uns für die folgende Eingabeaufforderung entschieden.
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.Vorausgesetzt, Sie haben jeden Schritt genau nach meinen Anweisungen ausgeführt, sollte Ihre GPT-Antwort etwa so aussehen.
Divi AI Setup – Verbesserung der Eingabeaufforderung
Indem Sie die Formulierung ändern oder zusätzlichen Kontext hinzufügen, können Sie die anfängliche Aufforderung effektiver gestalten, wenn sie nicht das gewünschte Ergebnis liefert. Als zusätzlichen Service für unsere Nutzer möchten wir möglicherweise auch die Nährwertangaben am Ende der Antwort einfügen.
Bitten wir die KI, die Ernährungsdetails einzubeziehen, indem wir hinzufügen: „ I also want you to output detailed nutritional information as an HTML table format for easy reading".
Denken Sie darüber nach, die Tabellenausgabe mit HTML-Elementen zu formatieren, indem Sie noch einen Schritt weiter gehen und Use <table> <thead> <tr> hinzufügen
usw. nach Bedarf, um die Tabelle an Ihre Eingabeaufforderung auszugeben .
Ihr Divi-KI-Formular sollte jetzt verfeinert sein und die GPT-Antwort sollte jetzt dieser ähneln.
Divi AI-Setup – Formulartext-Preloader
Abhängig vom verwendeten GPT-Modell müssen Benutzer möglicherweise einige Sekunden warten, was nicht ideal ist. Ich werde dich diesbezüglich nicht anlügen. Um das Benutzererlebnis zu verbessern und Benutzer davon zu überzeugen, dass Ihre Website nicht abgestürzt ist oder aus irgendeinem Grund eingefroren ist, ist es immer eine gute Idee, einen Preloader zu installieren.
Um dies zu unterstützen, bietet Divi Form AI eine Reihe von Preloader-Optionen zur Auswahl. Zusätzlich zu einigen animierten Versionen bieten wir auch einen Text-Preloader an, der ihm eine coole Cyberpunk-Terminal-Atmosphäre verleiht.
- Navigieren Sie zu den Feldeinstellungen des AI-Rezeptfelds.
- Wählen Sie „Text“ aus den Einstellungen für „AI Response Loading Style“ aus, indem Sie nach unten zu „Form AI“ scrollen.
- Geben Sie unter KI-Antworttext den Text ein, den Sie während des Vorladevorgangs sehen möchten, z. B. „Zutaten werden analysiert…“ und „Einschränkungen werden berücksichtigt…“
- Mithilfe von HTML-Farbcodes zwischen geschweiften Klammern können Sie die Textfarbe für jede Zeile ändern (geben Sie beispielsweise „#000000“ für schwarzen Text ein).
- Die Ausgabe des Textes kann dann je nach Wunsch in verschiedenen Zeilen oder in derselben Zeile erfolgen.
Abschließender Ausblick
Hier ist eine visuelle Demonstration, wie der Smoothie-Rezeptgenerator aussieht.
Abschließend
Und das ist es! Jetzt haben Sie Ihren ganz eigenen intelligenten Rezeptgenerator, der von ChatGPT auf Ihrer Divi-Website unterstützt wird. Mit nur einem einfachen Formular und sorgfältiger KI-Anleitung können Sie ein unterhaltsames Tool erstellen, mit dem Besucher personalisierte Rezeptideen erhalten.
Experimentieren Sie unbedingt mit der Änderung der KI-Persönlichkeit und der Eingabeaufforderungen, um verschiedene Arten von Rezepten und Anweisungen zu erstellen, die auf das Thema Ihrer Website zugeschnitten sind. Die Möglichkeiten bei der Kombination von Divi und ChatGPT sind wirklich endlos.
