Laravel-API: Entwicklung mit Google Gemini AI

1. Kurs-Einführung: Hallo, Elwe und willkommen zu dieser Klasse AI Power Lawtel API-Entwicklung mit Google Gemini. Ich heiße Ich bin ein Webentwickler mit über 14 Jahren Erfahrung und ein Online-Dozent, der moderne Web- und API-Entwicklung unterrichtet . In diesem Kurs zeige ich Ihnen, wie Sie mit Lavitwel Ihre eigene KI-gestützte API erstellen Ihre eigene KI-gestützte API und sie in Google Gemini AI integrieren, eines der leistungsstärksten und kostenlosen KI-Tools, die kostenlosen KI-Tools Am Ende dieses Kurses werden Sie in der Lage sein, ein AA-12-Projekt von Grund auf neu einzurichten, das über einen API-Schlüssel sicher mit Google Gemini verbunden ist, echte Proms an Gemini zu senden und KI-generierte Textantworten zu und Erstellen Sie einen wiederverwendbaren API-Endpunkt wie APIs, die KI generiert, Fehler behandelt, Modelle auswählt und Anpassungen ausgibt Und wenn Sie kreativ sind, werden wir auch untersuchen, wie Sie diese API mit einem einfachen Fentan verbinden oder sie in Ihren Home-Apps verwenden können einem einfachen Fentan verbinden oder sie in Ihren Home-Apps verwenden , um Chatboards, Inhaltstools oder Ideengeneratoren zu erstellen Inhaltstools oder Dieser Kurs ist absolut anfängerfreundlich. Wenn Sie grundlegende PHP- und KI-Kenntnisse haben, können Sie sie problemlos nachvollziehen. Unser Klassenprojekt ist einfach, aber mächtig. Sie werden eine funktionierende KI-Textgenerator-API erstellen LAL 12 und Google Gemini basiert Sie können jede Aufforderung senden, z. B. Schreiben von Insectant für einen Blog und sofort eine Live-KI-Antwort erhalten Sie benötigen lediglich ein grundlegendes Verständnis der Routen und Controller in LA, PHP-Installations-Composer und eine Internetverbindung, um auf die Google Gemini-API zugreifen zu können Das ist es. Keine kostenpflichtigen Dienste erforderlich. Danke. Wir sehen uns in der Klasse. 2. Klassenprojektdemo: Hallo, alle zusammen. Willkommen zu diesem Kurs, und hier ist die letzte Demo. Sehen wir uns unsere KI-gestützte API in Axon an, die mit unserer React-Frontend-Schnittstelle verbunden Wir haben eine wunderschöne, einfache Benutzeroberfläche erstellt. Der Nutzer kann eine Aufforderung eingeben, das Verhalten anpassen und sofort intelligente Antworten von Google Gemini erhalten. Lass es uns ausprobieren. Hier oben haben wir also ein Eingabeaufforderungsfeld , Benutzer seine Eingabeaufforderung eingeben kann. Lassen Sie mich eine einfache Willkommensnachricht für die Able API-Pose schreiben eine einfache Willkommensnachricht und die Eingabetaste drücken. Wenn Sie auf die Schaltfläche klicken, die Schaltfläche in der Regel generiert, und nach ein paar Sekunden erhalten Sie eine Antwort von KI. Okay. Also hier ist die Antwort der KI. In Ordnung. Und lass mich mein Braun zu einem KI-gestützten Inhaltsgenerator ändern ? C) Die Taste wechselt zum Generieren und innerhalb weniger Sekunden erhalten Sie eine KI-gestützte Antwort Okay. Also hier für das Frontend verwenden wir React für das Backend, wir verwenden Label und sind mit der Google Gemini API verbunden Hier ist die KI-Antwort für unseren Abschlussball, was ist der AI-Pod-Inhaltsgenerator, und das ist die Aufforderung, die Google Gemini AI Ordnung. Im folgenden Abschnitt werden wir dies Schritt für Schritt umsetzen. Okay? Ordnung. Danke. 3. Composer-Installation: Eins. Willkommen zu dieser Vorlesung. In dieser Vorlesung werden wir PHP Composer installieren. Lassen Sie mich Ihnen weiter zeigen, gehen Sie zu Google und suchen Sie nach PHB Composer Gehen Sie zur offiziellen Website des Komponisten und klicken Sie auf Herunterladen. Hier sehen Sie die Apps und zwei, laden Sie das Composer-Setup herunter und klicken Sie darauf. Die ausführbare Datei wird nach dem Herunterladen heruntergeladen, also im Ordner. Lass uns installieren. Wählen Sie Für alle Benutzer installieren aus. Klicken Sie auf Weiter. Wählen Sie Ihren PHB-Pfad aus. Klicken Sie auf Weiter Klicken Sie als Nächstes erneut auf Installieren. Es dauert zwei bis 3 Minuten. Sie haben den Kompressor Verson erfolgreich installiert. Lass uns unseren Kompressor Versum benutzen. Gehe zu deinem Terminal. Geben Sie Composer V. C Unser Composer Resin hat einen vierpoligen 2,8-poligen Anschluss. Danke. 4. Laragon installieren: Hallo, gewonnen. Willkommen zu dieser Vorlesung. In dieser Vorlesung werden wir Laragan als Server auf einem lokalen Server installieren Lass uns beginnen. Gehen Sie zu Ihrem Browser und suchen Sie nach Aragan Gehen Sie zur Argon Apical-Website und klicken Sie auf Herunterladen. Sie werden zur Larganol-Website weitergeleitet. Hier sehen Sie die PS und zwei laden Laragan herunter. Klicken Sie auf Herunterladen. Die ausführbare Datei wird heruntergeladen. Fast 173 B. Das hängt von Ihrer Internetgeschwindigkeit ab. Ich werde dieses Video weitergeben. Der Download wurde abgeschlossen. Lassen Sie uns diese Datei in unserem Download-Ordner öffnen. Lassen Sie uns mit der Installation beginnen. Sprache wählen. Klicken Sie auf Okay. Wählen Sie den Ordner aus , in dem Sie Aragon installieren möchten . Klicken Sie auf Weiter Klicken Sie erneut als Nächstes auf Installieren. Unsere Installation wurde abgeschlossen. Klicken Sie. Danke. Wir sehen uns auf dem nächsten Bild. 5. VSCode-Installation: Darlehen. Willkommen zu dieser Vorlesung. In dieser Vorlesung werden wir Visual Studio-Code für unseren Projekteditor installieren . Lass uns beginnen. Öffnen Sie Ihren Browser und suchen Sie nach VS-Code. Gehen Sie zur offiziellen Website von Visual Studio und klicken Sie auf Herunterladen. Hier stehen mehrere Betriebssysteme zur Verfügung. Wählen Sie Ihr Betriebssystem aus. In meinem Fall ist es Windows, die ausführbare Datei wird heruntergeladen. Es wird ungefähr 100 MB groß sein. Die Abwärtsgeschwindigkeit hängt von Ihrer Internetgeschwindigkeit und Systemkonfiguration ab. Fast fertig Okay. Unser Download wurde abgeschlossen. Klicken Sie auf den Ordner. Das ist unsere EXE-Datei. Eigentlich habe ich VS-Code bereits in meinem Magazin installiert, daher werde ich ihn in diesem Video nicht installieren. Folgen Sie einfach den Anweisungen und beenden Sie Ihre Einrichtung. Danke. 6. Installation von Laravel: Stufe eins, willkommen zu dieser Vorlesung. In dieser Vorlesung werden wir Owl in unserer lokalen Umgebung installieren Lassen Sie uns anfangen, gehen Sie zu Ihrem Browser und in der Google-Suche zu Label. Wir gehen auf die offizielle Website larawl.com und larawl.com Klicken Sie in der Seitenleiste auf Installation und scrollen Sie ein wenig nach unten . Dort finden Sie die Installation im Abschnitt. Um aa auf Ihren lokalen Rechnern zu installieren, müssen wir PHP und Compose installieren, die wir bereits in der vorherigen Klasse installiert haben Compose installieren, die wir bereits in der vorherigen Klasse installiert , schreiben, um eine Anwendung zu erstellen, wir müssen diesen Befehl ausführen, Law new und das ist unser Projektname, diesen Befehl kopieren und Lagam, das wir in der vorherigen Klasse LagAg installiert haben, auf das Terminal öffnen der vorherigen Klasse LagAg installiert haben, auf das Ja. Okay. Gehe zum Terminal. Im Moment sind wir also in WW. Fügen Sie einfach diesen Befehl ein und lassen Sie mich anstelle der Beispiel-App AI ABI sagen. Also, welche Starterbox würdest du gerne installieren? Also wird es dir Fragen stellen. Also wählen Sie und dann ab sofort, und welches Test-Framework bevorzugen Sie? Lass es voreingenommen sein Okay, unser Projektprojekt ist also im Gange Okay. In Ordnung. Also installiert es den Abhängigkeitsmodus. Okay. Welche Datenbank Ihre Anwendung verwenden wird, wählen Sie als MSPL Die Standarddatenbank wurde aktualisiert. Möchten Sie die Standardmigration ausführen Stellen Sie vorerst Nein ein, wir werden sie später migrieren. Okay. Also fast fertig. Die Information dauert bis zu zwei bis 3 Minuten, nicht länger. Laden von Composer-Repositorys mit Paketinformationen, Einfügen von Abhängigkeiten aus der Protokolldatei, Generieren optimierter Upload-Dateien Okay. Möchten Sie NPM install ausführen Wählen Sie. Geben Sie einfach Ps ein und drücken Sie die Eingabetaste. Es wird das gesamte Abhängigkeitsmodul installieren. Keine Module. Okay. In Ordnung, unser Projekt wurde also erfolgreich erstellt. Jetzt müssen wir uns in unser Projektverzeichnis bewegen, dem es sich um AI API handelt Geben Sie einfach CD space AI API in Ihr Terminal ein und geben Sie ein. Im Moment befinden wir uns in unserem Projektverzeichnis. Lassen Sie mich das jetzt mit meinem VS-Code öffnen, indem ich einfach den Codespace-Punkt eintippe. Okay, es wird also das Projekt in unserem Visual Studio öffnen und sie codieren. Okay, lassen Sie mich die Ordnerstruktur durchgehen und hier haben wir einen Ordner. Ein Ordner. Er enthält die gesamte Anwendungslogik einschließlich Controller und Module. Der Controller befindet sich also normalerweise im HDB-Ordner und die Modelle werden im Modellordner abgelegt. Und hier haben wir den Ordner Routes. Also werden wir im Route-Ordner eine neue Routendatei erstellen , die Pit BHB heißt Ich werde es dir in der nächsten Vorlesung zeigen. Und dann haben wir die Punkt-ENV-Datei, die für die gesamte Konfigurationsdatei verantwortlich ist Und die Artisan-Datei. Diese Dateien werden also online gehen , um Ihre Anwendungen auszuführen und zu verwalten Das ist der schnelle Überblick, und keine Sorge, wir werden nicht nur unser APR, sondern auch DIPA werden Okay? Jetzt müssen wir eine Datenbank für unser Projekt erstellen, Lam öffnen, zur Datenbank gehen und auf Öffnen klicken und hier, sie schreiben und eine neue Datenbank erstellen. Okay, also setzen wir unseren Datenbanknamen auf AI Underscore API, To Jetzt müssen wir diese Datenbankinformationen in unserer DOT-ENV-Datei konfigurieren diese Datenbankinformationen in unserer DOT-ENV-Datei Unter dem Punkt ENV finden Sie also diesen Abschnitt, DB-Verbindung SQL, Hostname Dies ist eine Portnummer, die Standardcodenummer 3306. Und das ist unsere neu erstellte Datenbank, AI Underscore E API. Verwenden Sie den Namen für den lokalen Host Zuru und es gibt kein Passwort. Speichern Sie einfach. Okay. Öffnen Sie jetzt ein neues Terminal. Und jetzt werden wir unsere Datenbanktabelle migrieren. Um zu migrieren, müssen wir diesen Befehl PHP, Artisan migrate ausführen diesen Befehl PHP, Artisan migrate Okay, das wird also alle Datenbanktabellen migrieren. Normalerweise finden Sie diese Informationen also im Migrationsordner unter Datenbankmigrationen Also hier haben wir drei Tabellen. Wir werden dieses PHB migrieren, Artisan migrieren, drücken Al. Unsere Tabelle wurde also erfolgreich migriert Sie können sie anhand unserer Datenbank überprüfen und Ihre Datenbank öffnen Wie Sie sehen können, wurden hier nur wenige Tabellen migriert, nur wenige Tabellen migriert wenn wir diesen Befehl in unserem Terminal ausführen. Okay, Alvin Jetzt haben wir das lokale System Al 12 oplication erfolgreich installiert, und ab der nächsten Klasse werden wir es integrieren Sie werden eine API-Route erstellen und Sie werden auch eine Controller-Methode erstellen Ich werde es dir in den nächsten Kursen zeigen. Ich danke dir. 7. API-Route installieren: Hallo, alle zusammen. Willkommen zu dieser Vorlesung. In diesem Vortrag zeige ich Ihnen, wie Sie API Route im Lara V 12-Projekt installieren Wie Sie jetzt sehen können, können Sie in einem Route-Ordner nur Console PHB und Web Dot PHB sehen Dieser Webpunkt PHB ist für den Frontend-URS verantwortlich. Im Moment gibt es in unserer 12-Installation keinen Stapel namens apt PHB Das apt-PHB ist für alle Backend-APIs verantwortlich. Gehen Sie nun zum Browser und suchen Sie nach Laval Dort können Sie die Option Routing sehen Klicken Sie auf Routing. Unter diesem Abschnitt ziehen Sie ein wenig nach unten. Los geht's. Also APR-Strecken. Wenn Ihre Anwendungen auch eine State-API anbieten, können Sie ApOut mit dem Befehl Install AP Artisan aktivieren mit dem Befehl Install AP Artisan Um APR Out zu installieren, müssen wir also diesen Befehl ausführen, diesen Befehl kopieren und zum VS-Code zurückkehren und vom Terminal aus einfach den Befehl hinter sich lassen, den Sie von der offiziellen La-Website kopiert haben . Also PHP Autison Space Installieren Sie die Doppelpunkt-API. Dadurch wird eine neue Datei in unseren Routen Bolton erstellt. Dann drücken wir Enter Okay, eine neue Datenbankmigration war Bobist. Möchten Sie alle ausstehenden Datenbankmigrationen ausführen, einfach eingeben und auf Ausschreibung klicken? Okay. In Ordnung. Wie Sie sehen können, gibt es einen neuen Stapel in unserem Routenordner , der API-Punkt PHB ist Lassen Sie uns vor dem Abschluss eine schnelle API-Route testen. Und hier werde ich eine neue Route erstellen, die eine gute Route ist, Polen, Polon Gate und Endpunkt, sagen wir mal als Test Der erste Parameter, den wir angeben, ist also unser APY-Endpunkt. Und hier brauchen wir die Callback-Funktion und innerhalb der Callback-Funktion werde ich einfach die Antwort in einem JSM-Format zurückgeben Ich habe eine R-Nachricht, sagen wir mal, Lab ist bereit für AR Wir müssen Semi-Pooling auch hier einrichten. Speichern Sie die Datei Um unser Projekt auszuführen, gehen Sie zu Lagan unter dem PB. Lassen Sie mich das schließen. Ich verwende eine kostenlose Lizenz, daher erhalte ich häufig diese Meldung Gehen Sie also ins Internet WW PC AI APR. Dies ist die URL unseres Freundes. Jetzt haben wir eine neue APR-Testroute erstellt , testen Sie diese Route. Wir müssen die Projekt-URL, die Slash-API und unsere NPine ausführen Slash-API und unsere NPine Hier ist Hurts Test unser API-NPI. Wie Sie sehen können, ist dies unsere Antwort. Nachricht l ist bereit für KI. Das ist es. Jetzt ist unser l vollständig eingerichtet und bereit für die Integration mit der Gul Gemini API in unserer nächsten Lektion Okay, wir sehen uns weiter. Nächste Klasse. Danke. 8. Gemini API-Schlüssel abrufen: Hallo alle zusammen. Willkommen zu dieser Vorlesung. In der vergangenen Saison haben wir unser Owl 12-Projekt erfolgreich eingerichtet und unsere erste API-Zeile getestet Jetzt ist es an der Zeit, die Magie von Google Gemini , AR, einzubringen Google Gemini , AR, In dieser Lektion zeige ich Ihnen, wie Sie Ihren eigenen API-Schlüssel erhalten, dem wir Laral mit dem leistungsstarken KI-System von Google verbinden Laral mit dem leistungsstarken KI-System von Google Öffnen Sie zunächst Ihren Browser. Und geben Sie aitudiotgogle.com ein. Ich trete ein. Okay. Dies ist also offizielle Plattform von Google, auf der Sie Gemini-Modelle ausprobieren, Eingabeaufforderungen testen und APIs erstellen Wenn Sie noch nicht angemeldet sind, melden Sie sich mit Ihrem Google-Konto und einem beliebigen Gmail- oder Space-Konto an. Bei Ihrem ersten Besuch müssen Sie die Allgemeinen Geschäftsbedingungen akzeptieren Sobald Sie fertig sind, landen Sie genau auf dieser Seite im AI Studio-Dashboard. Okay? Lassen Sie uns nun einen KI-API-Schlüssel erstellen, wir in Lara verwenden werden. Klicken Sie auf das Profilsymbol Und hier siehst du die Ups und bekommst ABI. Klicke auf create AbiKey setName owl well, A API und wähle das Cloud-Projekt aus, wähle Projekt erstellen und nenne es Erstellen Sie ein neues Projekt als erstellt und als erstellt und geben Sie einen konkreten Schlüssel ein. Okay. In Ordnung. Also hier haben wir unseren APIKey. Kopieren Sie diesen API-Schlüssel und kehren Sie zum Wiz Word Studio-Code zurück und öffnen Sie Ihre Punkt-ENV-Datei am Ende der Datei. Lassen Sie uns eine neue Variable erstellen und sie so benennen, wie Jeni API-Underscoe gleich ist, und Jeni API-Underscoe gleich phasenweise den Schlüssel, den Sie von Google kopiert haben. So werden wir uns sektiv mit dem Go GeminiEPI verbinden, ohne dass Kunst in unseren Kern codiert wird sektiv mit dem Go Sie Ihre Punkt-ENV-Datei am Ende der Datei. Lassen Sie uns eine neue Variable erstellen und sie so benennen, wie Jeni API-Underscoe gleich ist, und phasenweise den Schlüssel, den Sie von Google kopiert haben. So werden wir uns sektiv mit dem Go GeminiEPI verbinden, ohne dass Kunst in unseren Kern codiert wird. Bevor wir es in Ravel verwenden, wollen wir schnell testen, ob der Schlüssel funktioniert. Ich zeige es dir auf der nächsten Liste. 9. API-Schlüssel testen: Hallo, alle zusammen. Willkommen zu dieser Vorlesung. In der vorherigen Vorlesung haben wir API-Token in unserem Google AI-Studio erstellt und es in unseren Punkt eingefügt und wir archivieren es in unserem Projektlaufwerk Bevor wir mit der Projektentwicklung fortfahren, müssen wir nun überprüfen, ob die API funktioniert oder nicht Gehen Sie dafür zu Postman. Postman ist ein API-Testtool. Wenn Sie es noch nicht getan haben, können Sie es installieren, indem Sie in Ihrem Browser nach Postman suchen Gehen Sie also zu Google und suchen Sie nach Postman. Laden Sie es herunter, und das ist die offizielle Website, postman.com. Von dort aus können Sie es herunterladen und in Ihrem Ordner installieren Sobald Sie also installiert haben, werden Sie aufgefordert, zu unterschreiben, ein Konto zu erstellen und zu signieren. Wenn Sie noch kein Konto haben, können Sie eines erstellen. Also hier habe ich schon ein Konto bei Postman, und hier habe ich mich direkt angemeldet Okay. Also habe ich in Postman einen neuen Ordner namens AI Power API erstellt Unter dem Ordner habe ich eine neue Anfrage erstellt, eine Anfrage gepostet und sie als generierten Text benannt Um Ihre API-Schlüssel zu testen, unabhängig davon, ob sie funktionieren oder nicht, rufen Sie einfach diese API auf, bei der es rufen Sie einfach diese API generative Sprache handelt. Dabei handelt es sich um einen generativen Sprachdole : aps.com slash Burson One, Slash-Modelle slash Gemini 2.5 slash Flash Colon, generieren Sie Inhalt Das ist Ihr API-Schlüssel. Wählen Sie im Hauptteil ARA aus, geben Sie JSON ein und fügen Sie diesen Inhalt, Inhalt, Pot, Text ein. Geben Sie einfach Hallo Gemini ein, klicken Sie auf Senden und als Ergebnis werden Sie sehen, dass dies in etwa so ist Wir haben 200 Datensätze erfolgreich erhalten und der Service hat wie folgt geantwortet Als Erfolgsantwort erhalten Sie so etwas. Hallo, wie kann ich dir heute helfen, okay? Also, wenn Sie das bekommen, funktioniert Ihr APC einwandfrei, wenn Sie die andere Art von Antwort bekommen haben vier, nicht vier, gut und so etwas Sie müssen sich also bei Ihrer API erkundigen. Okay, alles klar. Jetzt haben wir erfolgreich einen Google Geminar-API-Schlüssel generiert, und wir haben ihn getestet und er funktioniert erfolgreich Ab dem nächsten Abschnitt werden wir also unser eigentliches Projekt entwickeln Danke. Wir sehen uns im nächsten Abschnitt. 10. API-Antwort generieren: P eins. Willkommen zu dieser Vorlesung. In dieser Vorlesung werden wir das Gehirn unseres AIPI, des KI-Controllers, bauen unseres AIPI, des KI-Controllers, In diesem Teil wird eine Aufforderung des Benutzers entgegengenommen, sie an Google Gemini gesendet und die KI-Antwort als J-Summe zurückgegeben Am Ende dieser Lektion verfügen Sie über einen funktionierenden KI-generierten Endpunkt , der intelligente Antworten in Echtzeit generieren kann Lass uns reinspringen. Zuerst werden wir mithilfe von Artisan einen Controller erstellen Gehen Sie zum Terminal und geben Sie PHP Artisan ein, erstellen Sie einen Doppelpunkt-Controller. Im API-Ordner erstellen wir einen neuen Controller namens AI Controller namens AI Okay, das wird also einen neuen Controller innerhalb der App CTP, Controller, API und ein Controller-Punkt PHP erstellen einen neuen Controller innerhalb der App CTP, Controller, API und ein Controller-Punkt Okay, also öffne diese Datei, entweder du kannst direkt auf Control Plus klicken oder du kannst direkt aus dem Ordner App CTP, Controller innerhalb des API-Ordners gehen , wir haben eine Datei namens AI Controller Punkt PHP Und das ist die Standardstruktur. Und hier müssen wir zwei zusätzliche Importe eingeben, nämlich nämlich illuminate backslash, support, backslash, facts slash HTP Dies wird als Antwort auf unser Post-API-Auto dienen. Eine weitere Belastung. Hier müssen wir das Schlüsselwort use verwenden und eine weitere Onus-Use-Ausnahme für die Fehlerlandung verwenden In Ordnung. Jetzt sind wir bereit, unsere Hauptfunktion zu definieren. in der Controller-Klasse Erstellen Sie in der Controller-Klasse eine neue Methode und geben Sie den Namen generate public function, generate Und hier müssen wir unsere Anforderungsparameter abrufen. Dafür verwenden wir also Anforderungspakete. Okay. Ordnung. Also hier drinnen bekommen wir zwei Parameter aus der Benutzeranfrage. Lassen Sie mich eine neue Variable für das Braune erstellen. Dollar Brown entspricht der Anfrage der Eingaberunde Eingaberunde Okay. Und der nächste ist für das KI-Modell. Dollar oder Rvquest des Eingabemodells, und standardmäßig beginnen wir mit unserem Standardmodell, dem Gemini 2.5 Dash Flus dem Gemini 2.5 Dash Kopieren Sie das und fügen Sie es hier ein. Wenn der Benutzer das Modell erwähnt hat, werden wir dieses Modell verwenden. Wenn der Benutzer es nicht erwähnt hat, werden wir das Standardmodell verwenden. Zu diesem Zweck verwenden wir das. Sie können ein Befehlsstandardmodell hinzufügen. Ordnung. Wenn wir die Benutzereingabe validieren müssen, wenn es sich nicht um einen Dollar Rabatt handelt, müssen wir die Antwort als Fehlerantwort, JS-Format und Nachricht senden . Vorher haben Sie gesagt, dass der Status wie die Fehlermeldung besagt Fehlermeldung , dass eine Eingabeaufforderung erforderlich ist. Also mit dem Statuscode 400 400 für die schlechte Anfrage. Wenn es gültig ist, erstellen Sie einen Dry-Catch-Block. Geben wir in Cat eine Ausnahme E ein, und wir werden die Fehlermeldung zurückgeben. Also hier, Antwort zurückgeben. Jason, Statusfehler und die Nachricht können keine Verbindung zu Gemini EPI Und der Fehler, wir werden den tatsächlichen Fehler von der Exception anzeigen Holen Sie sich eine Nachricht von einer Salt-Schule, 500 oder dem dortigen Internet-Server Das ist unser Sammelbecken und innerhalb des Stativs werden wir unseren eigentlichen API-Pfad erstellen Definieren wir zuerst unsere URL, die URL. Sie können es von unserem Postboten kopieren. Okay. Anstatt also direkt hart zu codieren oder den API-Schlüssel zu verwenden, werden wir ihn von unserer Punkt-ENV abrufen Dafür Cordinate ENV oder unseren Schlüsselnamen. Sie finden es an unserem Punkt Nfi, was Gemini-Unterstrich, API-Unterstrichschlüssel ist Hier ist das. Hier nochmal, das ist unser Modell und richtig. Anstatt hart zu codieren, werden wir es als Zeile we machen. Das ist okay. Also hier ist unsere API-Endpunkt-URL generativer Sprachpunkt Gogo aps.com Schrägstrich SN ein Schrägstrich des Modells hier wird das Modell aus der Benutzeranfrage kommen , wenn der Benutzer das Modell nicht gesendet hat, und wir werden unser Standardmodell verwenden, das ist Gemini Dash 2.5 d Flash und Colin generiert Inhalt und Schlüssel, wir bekommen es aus unserer DENV-Datei bekommen Okay. Und hier werden wir unser aktuelles APA-Auto erstellen, indem HTTP Colon Colon Post und unsere URL verwenden, und innerhalb eines Arrays werden Sie die Parameter senden. Inhalt innerhalb des Arrays, Töpfe. Text, das heißt, wir bekommen ihn von unserer Benutzereingabeaufforderung, richtig. Das ist unser eigentlicher API-Aufruf. Es wird eine Antwort zurückgegeben, die auf unseren Eingaben basiert. Lassen Sie mich dies mit einer Variablen namens Dollar-Antwort speichern. Okay? Wenn eine Antwort aus irgendeinem Grund fehlgeschlagen ist, wird sie fehlschlagen. Wir werden die Antwort erneut schreiben, Statusfehler im benachbarten Format und die E-Mail-API-Anfrage ist fehlgeschlagen. Und der Fehler reagiert auf JS Was auch immer es aus der APA-Antwort kommt, wir werden es in der JP-Antwort anzeigen Der Status ist cool. Auch hier wird uns die Antwort angezeigt . Status der Antwort. Alles. Wenn die Daten erfolgreich sind, entsprechen die Dollar-Daten der Antwort von JS in Dollar . Dann erstellen wir eine weitere Variable. Der generierte Text entspricht einem Dollar an Von Daten ohne Inhalt. Die Antwort wird so aussehen, wir werden das formatieren. Denn nur wir schreiben auf diese Weise Daten von Kandidaten und für das erste Array Inhalte innerhalb der Inhaltstöpfe Nulltext. Okay. Andernfalls schreiben wir einfach keine Antwort aus der Antwort innerhalb des Kandidaten, ersten Arrays und innerhalb des Inhalts, des ersten Arrays, der ersten Teile und des Textes. Ordnung. Also, zum Schluss werden wir die Erfolgsantwort zurückgeben, schriftliche Antwort, Jason-Status: Erfolg. Und bei den Daten wird es sich um einen tatsächlich generierten Text handeln. Okay. In Ordnung. Speichern Sie die Datei. Was wir in dieser Klasse aktualisiert haben. Hier haben wir also einen neuen Controller erstellt , indem wir diesen Artisan-Befehl, PHP Artisan make Polen controller, ausgeführt PHP Artisan make Polen In Apfolar habe ich eine neue Datei namens AI Controller erstellt eine neue Datei namens AI Controller Im AI-Controller haben wir hier eine neue Methode für unser APA-Auto entwickelt, das eine öffentliche Verbraucherzentrale ist. Hier holen wir uns die Regisseure von der Benutzerseite. Von der Benutzerseite bekommen wir die To-Anfrage, das heißt Auf Wunsch eine sofortige Aufforderung zur das heißt Auf Wunsch eine sofortige Aufforderung Eingabe des Abschlussballs und des zweiten Onus-Modells Wenn der Benutzer das Modell spezifiziert, werden wir dieses Modell verwenden Wenn der Benutzer das Modell angibt, verwenden wir das Standardmodell, nämlich Lemini Dash 2.5 Dash Plus Wenn es keine Aufforderung gibt, müssen wir eine Antwort zurückgeben, als ob eine Aufforderung erforderlich ist Dies ist unser Validierungsteil und wenn die Validierung innerhalb des Tri Catch-Blocks übergeben wird, bilden wir den eigentlichen API-Endpunkt, bei dem generative Sprachmodelle von google api.com slash Wilson mit einem Schrägstrich handelt api.com slash Wilson mit einem Auch hier ist unser Modell dynamisch und mit Doppelpunkten generierter Inhalt, dem Doppelpunkt der Schlüssel entspricht, und wir erhalten das APG aus Umgebung Hier stellen wir also unsere eigentliche CDB-Post-Anfrage an die URL mit dem Standardanfragetext und dann dem Teiltext, der vom Benutzer angefordert dann dem Teiltext Wenn die Antwort hier fehlschlägt, geben wir die Fehlerantwort zurück. Wenn die Antwort erfolgreich ist, formatieren wir den generierten Text, und hier haben wir unsere Erfolgsantwort zurückgegeben. Okay. Jetzt ist unsere Controller-Methode fertig. Jetzt müssen wir eine API-Route hinzufügen , um diese Controller-Methode zu verwenden. Öffnen Sie die Routes APPHB, dann erstellen wir eine neue Route aus Doppelpunkt (Polon). Es wird eine Post-Route sein Route-Dolon, Doppelpunkt, Post und APA und Pound AI plus generieren hier müssen wir unseren API-Controller laden , der API-Controller ist Ein API-Controller. Entschuldigung, unser Controller-Name ist AI Control, AI Controller Plan Polen Class Stellen Sie sicher, dass es oben eingegeben wurde. Verwenden Sie die App auf den CDP-Controllern, API zuletzt auf dem KI-Controller Hier müssen wir unseren Methodennamen angeben, aber nur generieren Ordnung. Speichern Sie die Datei. Jetzt ist unsere Controller-Methode bereit und unsere Route ist auch fertig. Jetzt werden wir diese API in Postman Open Postman testen diese API in Postman Open Postman und lassen mich eine neue Anfrage hinzufügen KI generiert Sträfling. Okay. Die Methode wird also die Post-Methode und der API-Endpunkt sein . Kopieren Sie die Site-URL und die URL zurück. AI apt testet die Slash-API oder API und gibt an, welcher AI-Slash generiert wird Ist es nicht? In Ordnung. In Ordnung. Im Haupttext müssen wir die Aufforderung pausieren, oder? Braun. Also ahmen Sie es nach, indem Sie die EMT-Anfrage weiterleiten Zehn Statusfehler, sofortige Disacettierung. Also unsere Bestätigung, dieser Beitrag funktioniert einwandfrei. Dieser. Fehler, sofort absagen. Okay. Jetzt gebe ich dir den eigentlichen Test. Lassen Sie mich die Eingabeaufforderung wie rund, richtig starten, Einführung für Aural Well Tutobi geben rund, richtig starten, Einführung für Aural Well Tutobi und es ist in Ordnung, wir haben Erfolgsantwort, Status Success , Status Quo 200, willkommen auf dem neuesten Stand der modernen Webentwicklung mit La 12, bla, bla, bla, bla. In Ordnung, unsere API funktioniert also einwandfrei. Also richtig. So ist es. Ihr AB generiert jetzt Text mit Google Gemini APR. Lassen Sie mich jetzt meinen API-Schlüssel in Punkt ENV ändern, sodass er anstelle von A, E aktiviert ist. Ich werde zwei weitere AA zu Testzwecken hinzufügen, die Datei speichern und auf Senden klicken, wir sollten die Fehlerantwort erhalten Ordnung. Der API-Schlüssel ist also nicht gültig Bitte geben Sie einen gültigen API-Schlüssel ein. Okay, alles klar. Alles funktioniert gut. Lassen Sie mich den eigentlichen API-Schlüssel ersetzen. Und noch einmal, lass mich okay sagen . In Ordnung. Auch hier bekommen wir die Antwort des Sets. Fantastisch. Wir haben gerade in La 12 einen voll funktionsfähigen KI-Controller eingebaut, der mit Google Gemini kommuniziert. In Ordnung In der nächsten Lektion werden wir lernen, wie wir Antworten anpassen können, indem wir Parameter wie Temperatur maximale Ausgangsleistung hinzufügen und sogar dynamisch zwischen Modellen wechseln Weitere Informationen finden Sie in der nächsten Lektion. 11. React-Einrichtung: Hallo, alle zusammen. Willkommen zu dieser Vorlesung. In der vorherigen Vorlesung haben wir unsere API entwickelt und in Gemini AI integriert Jetzt ist es an der Zeit, unser Friend End zu implementieren. Laut Freund en werden wir React White Apples Telvin CSS für veraltete Versionen verwenden React White Apples Telvin CSS für veraltete Lass uns anfangen und lass uns ein neues weißes Projekt erstellen. Moment bin ich in meinem Prozessordner, und hier werde ich ein neues Projekt erstellen indem ich diesen Befehl in Terminal NPM, create White at ate, create White at ate Und gefolgt vom Projektnamen, lassen Sie es mich KI, Text, Generate sagen Es gibt ein Framework ein und wählt es aus, wählt es als React und wählt eine Variante aus, wählt als Javascd aus, verwendet Rolldown White, nein, und installiert mit NPM und startet jetzt. Dependance mit PM installieren. Okay. Unser React-Projekt ist also fertig, und dies ist die Standardseite wenn Sie den Druck und die Anwendung ausführen. Lassen Sie mich das beenden, indem ich Strg+C drücke. Jetzt werde ich Delvin CSS vorher installieren. Stellen Sie sicher, dass Sie sich in Ihr Projektverzeichnis bewegt haben, dem KI-Texte generiert Moment bin ich im Projektverzeichnis meines Freundes und dort werde ich dieses TamalNNPM in Stud CSS bei Wind CSS White ausführen Stud CSS bei Wind CSS Im Moment bin ich im Projektverzeichnis meines Freundes und dort werde ich dieses TamalNNPM in Stud CSS bei Wind CSS White ausführen. Damit Sie die Informationen in Ihrem Browser finden können, gehen Sie zu Browser und Google White Okay. Gehen Sie also auf die offizielle Website von Telewn CSS. Und dort findet ihr die Insektion zur Installation des Talwin Rufen Sie diesen Befehl auf und fügen Sie ihn in Ihr Terminal ein. Das habe ich schon einmal gemacht. Sobald Sie mit diesem Schritt fertig sind, müssen wir die weißen Ts pi modifizieren Geben Sie diesen Code ein und gehen Sie zu White Conflict Dot JS und fügen Sie ihn hier ein. Im Bereich Schwarz und Schwarz müssen wir auch Tel-Men-CSS hinzufügen Okay, speichere die Datei. Jetzt gehst du zum Index dieses CSS, löschst alles und gehst auf die Delvin CSS-Website und kopierst diesen Code In Ordnung, spar dir das Tschüss auf. Okay? Das ist es. Okay, alles klar. In dieser Vorlesung haben wir erfolgreich ein neues React-Projekt erstellt und Telvin CSS installiert Danke. Wir sehen uns bei der nächsten Vorlesung. 12. Installation des Abhängigkeitsmoduls: Hallo alle zusammen. Willkommen zu dieser Vorlesung. In der vorherigen Vorlesung haben wir ein neues React-Projekt erstellt und außerdem TelVin CSSRI installiert In diesem Video werden wir nun einige Abhängigkeiten installieren Also werden wir Axos für API car installieren , zum Terminal, zum neuen Terminal gehen und von dort aus NPM install Axios eingeben Okay, es wird also die gesamte Abhängigkeitsdatei installieren. Und mit Axios werden wir unsere Ben-APA-Karte erstellen. Okay. Also wird es installiert. In Ordnung. Also ist es installiert, oder? Also werde ich im Quellcoder einen neuen Ordner namens Components erstellen Innerhalb von Componens werde ich eine neue Datei erstellen und sie ai fm dot JSX nennen sie ai fm dot Okay. Also hier die Standardfunktion, das KI-Formular exportieren und hier einfach geschrieben geboren. KI-Inhaltsgenerator. Sehen Sie sich die Datei an und gehen Sie zu der App, die Punkt J hier festlegt. Entfernen Sie alles. Hier importiere ich meine neue Komponente, die ich zuvor aus den Komponenten AIF Function App Writed und unserer Komponente AIP erstellt habe Komponenten AIF Function App Writed und unserer Komponente . Und wir müssen diesen Export-Standard exportieren Okay, speichern Sie das Y. Jetzt müssen wir unser freundliches B ausführen und dabei NPM run Dev eingeben Okay, öffne diesen Link. Entweder können Sie auf Control Plus klicken oder Sie können diese URL kopieren und in Ihrem Browser platzieren. Wie Sie sehen können, funktioniert unsere Komponente einwandfrei. KI-Inhalt generiert. In Ordnung. In diesem Video haben wir Axios für API-Aufrufe installiert und außerdem eine neue AI-Pom-Komponente erstellt und mit unseren App Js gemountet Und im nächsten Video werden wir ein Formular erstellen, und ich werde es Ihnen im nächsten Video zeigen. Ich danke dir. 13. React-Prompt-Formular: Alle zusammen, willkommen zu diesem Vortrag. In der vorherigen Vorlesung haben wir Axios Film Dependency für unsere AphiCl installiert Axios Film Dependency für und außerdem eine neue Komponente, AI Form Jx, erstellt und diese mit unserem Ambra JS montiert Also, was ich jetzt gemacht habe, ist, ich ein paar Telvin-CSS-Klassennamen für das Ergebnis in der Ambra JSX und ein Diagramm mit unserem AI-Formular hatte das Ergebnis in der Ambra JSX und ein Diagramm mit unserem AI-Formular In der KI-Form JSX habe ich ein Formular eingegeben und hier Und hier haben wir ein Firma-Tag und innerhalb des Farm-Tags haben wir einen Eingabe-Textbereich , haben wir einen Eingabe-Textbereich Benutzer seine Eingabeaufforderung eingeben kann Außerdem haben wir hier die Schaltfläche „Senden“. Also mit dem Namen Get Generated Page. Wie Sie sehen können, ist dies unsere neue UR. Unsere Benutzeroberfläche ist also fertig. Jetzt werden wir unsere Funktionalität implementieren. Lass uns anfangen. Zuerst reagiert das A aus dem ***, das wir importieren müssen, los. UATEFTE-Verwaltung für das Formular bitte, UEAtera für das APA-Auto, wir müssen Axios auch verwenden, um Axios Axios aus Axios importieren. Unsere Abhängigkeit wurde erfolgreich importiert, und jetzt werde ich eine Fuse-Variable Cs für Prom Round, Set Prong und State Initial Value mit dem Wert Null erstellen Cs für Prom Round Abhängigkeit wurde erfolgreich importiert, und jetzt werde ich eine Fuse-Variable Cs für Prom Round, Set Prong und State Initial Value mit dem Wert Null erstellen. Okay? Und dann erstellen wir eine weitere Variable zum Laden. Benutzer also auf die Schaltfläche „Generieren“ klickt, wechselt der Text automatisch zum generierenden Text, sodass der Benutzer verstehen kann, dass hinter den Kulissen etwas passiert ist. Okay? Zu diesem Zweck verwenden wir Loading. Habe es standardmäßig verwendet, setze es auf falsch. Es ist ein boolescher Wert, entweder wahr oder falsch, machen Sie ihn als Standard falsch und lassen Sie mich eine weitere Variable für unsere Antwort erstellen Antwort, Antwort setzen und Anfangswert zuweisen verwendet Jetzt innerhalb des Formulars, und hier beim Einfügen des Werts, werden Sie es rund setzen. Dieser Wert wird immer dann, wenn Benutzer den Wert ändern , automatisch dem Eingabefeld in der Änderung zugewiesen , Pfeilfunktion auf rund gesetzt, E-Punkt, Zielwert Okay. Und lassen Sie mich in der Senden-Funktion über die Schaltfläche „ Senden“ eine neue Eigenschaft hinzufügen, die beim Laden deaktiviert wurde. Dadurch wird das Duplikat reduziert und ein weiterer Backend-Appell. Okay, alles klar. In der generierten Antwort werden wir also anstelle von statischem Text anstelle von statischem Text beim Laden den Text auf Generieren umstellen. Andernfalls wird eine Antwort generiert. Okay, standardmäßig generiert der Text eine Antwort. Wenn der Benutzer nach Eingabe der Aufforderung auf die Schaltfläche klickt und auf die Schaltfläche klickt, ändert sich der Schaltflächentext zu Generieren. Okay? Das ist die Antwort hier. Okay? Und jetzt sind unser Textformulareingabefeld und die Schaltfläche „ Senden“ fertig. Und jetzt werden wir, wann immer Benutzer das Formular abschicken , unseren APA-Anruf tätigen und auf der Grundlage des APA-Anrufs die Antwort anzeigen. Okay, also weiter abschicken, bearbeiten, abschicken. Okay. Also hier werde ich eine neue Funktion erstellen, um unser Formular einzureichen, const, handle, submit Es wird eine Vereisungsfunktion sein. Zuerst müssen wir das Verhalten von Formularen verhindern , indem wir die Standardeinstellung E dot prevent geben. Aber okay. Jetzt setzen wir das Laden auf „True“. Setzt die Antwort auf einen leeren Wert. Okay, speichern Sie ein f. Mal sehen, was passieren wird. Okay. Hier kann ich etwas eingeben und auf Test klicken. Sie können sehen, dass die Schaltfläche auf Generieren umgestellt wurde. Okay. Als Nächstes werden wir unseren eigentlichen APA-Anruf tätigen. Versuch es. Lassen Sie mich versuchen, den Cache-Block hinzuzufügen. Wenn ein Fehler auftritt, wird ein Konsolenfehler angezeigt. Wir gehen zu einem Konsolenfehler und legen die Antwort als Fehler beim Verbinden mit APR fest, setzen wir Verbinden mit APR fest, die Konsole für Daten Okay, versuche Catch und lass mich noch einen Block Final hinzufügen. Nachdem die AP-Farbe fertig ist, werden Sie das Laden als Okay einstellen. In Ordnung. Ich bin im Tri-Block, wir werden unseren eigentlichen APA-Anruf tätigen. Lassen Sie mich eine neue konstante Variable erstellen, Antwort const entspricht x post. Hier müssen wir unsere Backend-API-URL angeben. Bend API uR api dot test, AI generate, richtig und hier müssen wir eine Aufforderung geben Also, was wir von der Zustandsvariablen bekommen, benutzen Sie das eingegebene Ventil. Okay? In Ordnung. Also, es wird den APA bei der Ben APA anrufen und aufgrund des Abschlussballs werden wir die Antwort bekommen. Jetzt müssen wir also die Antwort einstellen. Antwort, Ruhe, Daten, Daten. Andernfalls wird keine eingegangene Antwort angezeigt. Hier machen wir also unseren EPA-Anruf auf der Grundlage der Antwort, wir legen die Antwortvariable fest. Okay? In Ordnung. Jetzt fügen wir eine neue Sekante hinzu, um unsere Antwort unter dem Formular anzuzeigen Nach dem Formular, Antwort. Wenn eine Antwort eingeht, können sie einen entsprechenden Block innerhalb von du hinzufügen und möglicherweise eine Überschrift wie KI-Antwort haben. Lassen Sie mich danach ein PTI hinzufügen und in der PR werde ich unsere tatsächlichen KI-Testteile anzeigen unsere tatsächlichen KI-Testteile Speichern Sie die Datei, fertig sind unsere UI - und APA-Farben. Lassen Sie mich mit unserem aktuellen Browser testen. Okay, lassen Sie mich eine Aufforderung geben, eine zweizeilige Willkommensnachricht für Al API Force schreiben für Al API Force und auf Senden klicken. Fehler beim Herstellen der Verbindung zur API Bitte überprüfen Sie die Konsole auf Daten. Wir bekommen Axios, richtig? Lass mich es debütieren. Wie Pangan Avi Axios schon sagt , KI generiert. Das ist mein APN-PIN. Können wir beim Postboten nachfragen? Das ist mein effektiver Jahreszins. Also, die Ben AP-URL ist falsch. Entschuldigung für den Tippfehler oder die tatsächliche Ben APs api apt Test slash APs AIG Speichern Sie Gehen Sie nun zum Browser, löschen Sie das Konsolenprotokoll und klicken Sie auf Okay, hier haben wir die Antwort. KI-Antwort. Hier sind ein paar Optionen. Willkommen zum La Au APA-Kurs. Ihr Weg zum Aufbau robuster moderner APA beginnt jetzt. Und der OpsonTrady zur Zusammenführung von LAU-APIs. Willkommen im Vorstand. Lassen Sie uns gemeinsam Powerful aufbauen. Okay? Okay, unsere APA funktioniert also. Also haben wir unseren Ben APA erfolgreich implementiert und auch mit React Friend verbunden. Okay? Das ist es. Danke. 14. API-Parameter-Backend: Hallo, nein. Willkommen zu dieser Vorlesung. In der vorherigen Vorlesung haben wir unser AA-Labor erfolgreich mit Google Gemini verbunden und anhand einer einfachen Textaufforderung eine KI-Antwort generiert einer einfachen Textaufforderung eine KI-Antwort In diesem Abschnitt werden wir die Dinge verbessern, indem Parameter hinzufügen, die steuern, wie die KI begann Genau wie bei der Abstimmung der Steuerungen an einer Maschine helfen uns diese Parameter bei der Entscheidung, wie kreativ, wie lange und wie fokussiert unsere KI-Reaktion sein wird Lass uns anfangen. Bevor wir mit dem Code beginnen, wollen wir die wichtigsten Parameter verstehen, die wir verwenden werden. Wir werden Temperatur, Max-Output-Token und Top B verwenden Max-Output-Token und Top B Das sind die drei Parameter, die wir verwenden werden. Also zuerst die Temperatur. Es steuert die Zufälligkeit der KI-Ausgabe. Ein niedriger Wert wie 0,2 für zielgerichtetere sachliche Ergebnisse und ein hoher Wert wie 0,9 kreativere oder unvorhersehbarere Basierend auf 0,220 und 0,9 die Antwortdaten unterschiedlich sein und die Tokens mit der maximalen Ausgangsmenge sind unterschiedlich Legt fest, wie lang die Antwort sein kann. Stellen Sie sich das wie eine Wortbeschränkung vor, zum Beispiel bedeutet 100 eine Sater-Antwort, 500 bedeutet detaillierte Schwäne Dies ist der Zweck von Tokens mit maximaler Ausgangsleistung und Top P steuert die Diversität der KI-Reaktion indem es nur von den wahrscheinlichsten Ergebnissen abfragt Der Standardwert dafür ist eins. Niedrigere Werte sorgen dafür, dass die KI vorhersehbarere Wörter auswählt Zusammen geben Ihnen diese drei Optionen eine präzise Kontrolle über die Melodie und die Länge des generierten Inhalts. Okay, jetzt öffnen wir unseren KI-Controller-Punkt PHB. Und hier nach der Aufforderung. Lassen Sie mich die Jenna-Resin-Konfiguration hinzufügen. Welches wird die RA-Werte haben. Temperatur. Sie erhalten es anhand der Benutzerantwort, des Dollars der Anfrage oder Eingabe. Temperatur. Okay. Wenn der Benutzer den Wert nicht erwähnt hat, setzen wir den Standardwert auf 0,7. Der nächste ist Max How Put Token. Ausgabetoken. Dies erhalten wir auch aus der Benutzerantwort, der Aufforderung zur Eingabe des maximalen Ausgabetokens. Und der Benutzer hat diesen Wert nicht erwähnt, Sie werden ihn als Standardwert auf 200 und schließlich auf Top B setzen . Wir erhalten ihn aus der Benutzerantwort, Anfrage, Anforderungseingabe . Tippen Sie auf B, standardmäßig ist der Wert Eins. Sag die Fünf. Hier , was passiert. Wir lassen den Benutzer optionale Parameter über die APA-Anfrage senden . Wenn sie nichts senden, werden Standardwerte verwendet, das heißt 0,7 für die Temperatur, 200 für die maximale Anzahl von Gütern und eins für das T B. Lassen Sie uns den Postboten öffnen Hier ist ein KI-generiertes Zentrum, lassen Sie mich einen weiteren Parameter für die Temperatur hinzufügen , lassen Sie uns 0,3 setzen Und für das Maximum oder Putken setzen wir 500 und für das obere B setzen wir eins, lassen Sie mich die Anfrage an den alten Gemini senden Also hat die ungültige JSON-Nutzlast Max Output-Token erhalten, das Feld kann nicht gefunden werden Hier ist der Tippfehler. Es ist ein Token, Tokens Okay? Tokens, bleib beim Pi, komm zurück zum Postboten, tausche ihn in Tokens um Klickt jetzt auf Okay, Verbindung zur Gemini-API Es ist an der Zeit, dass ich mehr Zeit verschicke. Lassen Sie mich den Wert wie 0,9 und diesen 200 ändern. Wir erhalten keine Antwort von KI. Lassen Sie mich diese Dip-Parameter entfernen und erneut pixeln, wir erhalten keine Antwort von der KI Lass mich sterben. Okay. In Ordnung. Also, nach ein paar Minuten Pause, habe ich ein Problem gefunden. Wenn wir also eine Anfrage vom Benutzer erhalten, müssen wir diese in Float Indeger Float umwandeln Und hier, oben selbst, erhalte ich den Benutzerparameter Okay, es gibt also die Temperatur, wir werden sie aus der Benutzeranfrage ermitteln. Wenn nicht, werden wir, ähm, den Standardwert 0,7 verwenden, das Gleiche gilt für die maximale Anzahl an Tokens und das oberste B. Okay. Und im APA-Auto, wo wir unsere Temperatur, die maximalen Tokens und den höchsten B-Wert pausieren maximalen Tokens und den höchsten B-Wert Okay? Also beim Postboten, lassen Sie mich das ausweiten, manchmal schlägt es fehl, manchmal funktioniert es Ich verwende kostenlose Versionen. Wenn Sie es bekommen, können Sie es mit verschiedenen Plänen versuchen. Lassen Sie mich jetzt den Wert 0,2 und das maximale Token auf 500 ändern. Lassen Sie uns also überprüfen, welche Art von Ergebnis wir erhalten, okay? Okay, jetzt können Sie sehen, dass die Länge der Beschreibungen nach rechts erhöht wurde. Auf diese Weise können wir also unsere API-Antwort steuern. Hier pausieren wir also drei Parameter: Temperatur, maximale Anzahl an Tokens und Sie können es überprüfen, Sie können es von den USA testen , indem Sie den Wert ändern Ab sofort haben wir unsere API erfolgreich mit Google Gemini und dem Standardmodell Gemini 2.5 Dash Flus implementiert und dem Standardmodell Gemini 2.5 Dash Okay. Das sind Leute, wir haben unser API-Projekt erfolgreich umgesetzt. Ja. 15. Parameter in der Benutzeroberfläche: Spielt alle, willkommen zu dieser Vorlesung. In der vorherigen Vorlesung haben wir unser Reaktionsformular implementiert und ermöglichen es dem Benutzer, die Eingabeaufforderung einzugeben und KI-Restformulare zu generieren. Jetzt werden wir zusätzliche Parameter hinzufügen. Dafür habe ich hier im Formularblock drei neue Füllungen für Temperatur, maximale Tokens und das obere B hinzugefügt maximale Tokens und das obere B Also alle Texteingaben. Okay. Jetzt werden wir eine neue Statusvariable für neu erstellte Felder erstellen. Lassen Sie uns nach den Nachteilen der Runde beginnen Lassen Sie mich eine neue Zustandsvariable für Temperatur, Temperatur, Sitz, Temperatur und Zustandsvariable, Zustand verwenden, erstellen für Temperatur, Temperatur, Sitz, . Stellen Sie sie standardmäßig auf 0,2 ein. Okay. Und lassen Sie mich eine weitere Variable für Max Tokens erstellen. Legen Sie die maximale Anzahl an Tokens fest und verwenden Sie wieder den Status als Standardwert . Setzen wir ihn auf sechs und eine weitere Variable für den obersten Wert. Satz, Status und Anfangswert, setzen Sie es auf eins. Sag die Datei. Und jetzt komm zurück zum Formularblock. Hier haben wir also die Temperaturen, den Wert, geben uns die Temperatur und die unveränderte E-Fehlerfunktion, Sitztemperatur, und wir müssen die Eingabe in den Gleitkommawert umwandeln. Zu diesem Zweck verwenden wir den schnellen Float und den Eingabewert E Punkt als Zielpunktwert. Okay, das Gleiche gilt für die maximale Anzahl an Tokens. Sie hier statt der Temperatur die Stellen Sie hier statt der Temperatur die maximale Anzahl an Tokens ein. Und das statt passbd wird es ein Integer-Wert sein Anstatt Passboard zu verwenden, ändere es auf den Wert „Vergangenheit“ und „Endwert“ statt auf die eingestellte Temperatur und setze die maximale Anzahl an Tokens. Und für das obere B wird der Wert auf Top B gesetzt und hier wird der Wert auf gesetzt und hier wird der Wert auf B gesetzt, für das Diagramm und der Zielpunktwert gesetzt. Okay. Sag die Fünf. Jetzt müssen wir diese Messwerte zusammen mit der Cronto-Temperatur als Höchstwert übergeben der Cronto-Temperatur als Höchstwert Und rede B. Sag die Datei. A: Im Antwortbereich habe ich ein paar zehn CSS-Klassen hinzugefügt , um die Ausgabeantwort deutlicher zu machen. Sag die Datei. Gehe zum Browser und lass mich Pi eingeben. Klicken Sie auf Generieren. Bei R Ponts, hallo. Wie kann ich dir heute helfen? Okay, unser AB funktioniert also einwandfrei. Sie können das mit einer anderen Runde überprüfen. Okay. Ordnung. Danke. 16. Vielen Dank: Herzlichen Glückwunsch. Sie haben diesen Kurs offiziell abgeschlossen und mithilfe von Lawltwel, Google Gemini, API und React einen KI-gestützten Conden-Generator erstellt Sie haben gelernt, LA mit Google Gemini und API zu verbinden, mit dynamischen Proms umzugehen, KI-Parameter zu verfeinern und einen sauberen Freund und eine Benutzeroberfläche zu erstellen, einen sauberen Freund und eine Benutzeroberfläche zu erstellen Benutzeroberfläche Sie haben einen langen Weg zurückgelegt, und ich bin wirklich stolz auf Ihre Fortschritte Jetzt sind Sie an der Reihe, zu zeigen, was Sie gebaut haben. Sie als Klassenprojekt einen Screenshot Ihres Arbeitsfrontends, die Prom-Parameter und die KI-Antwort zu sehen sind, und laden Sie ihn in den Bereich für das Klassenprojekt hoch. Wenn du dein eigenes kreatives UI-Design hinzugefügt oder einen anderen Ball-Stil verwendet hast, würde ich es gerne sehen. Dies hilft Ihnen, Ihr Lernen zu stärken und inspiriert auch andere Schüler in der Community Wenn Ihnen dieser Kurs gefällt und Sie etwas Wertvolles lernen, nehmen Sie sich bitte einen Moment Zeit, um eine Bewertung abzugeben Ihr Feedback hat mir wirklich geholfen, mich zu verbessern, und motiviert mich , noch mehr KI- und arabische Kurse für Sie zu erstellen Vergiss auch nicht, mir hier zu folgen. Sie werden also benachrichtigt, wenn ich einen neuen Kurs oder Bonusunterricht veröffentliche. Nochmals herzlichen Glückwunsch zum Abschluss dieser Reise. Entwickeln Sie weiter, experimentieren Sie weiter mit APIs und denken Sie daran, dass jede großartige App mit einer einzigen Idee und ein paar Zitatzeilen beginnt mit einer einzigen Idee und ein paar Zitatzeilen Ich kann es kaum erwarten zu sehen, welches tolle Projekt Sie als Nächstes erstellen werden Danke, dass du bei mir gelandet bist und wir sehen uns im nächsten Kurs. Danke.