Heute haben Einzelpersonen und Unternehmen verschiedene KI-Modelle entwickelt und trainiert, um bestimmte Aufgaben besser als Menschen in Echtzeit zu erledigen. Unter den unz\u00e4hligen Anwendungen von KI ist ein besonders faszinierender Bereich die KI-gest\u00fctzte Bilderzeugung.<\/p>\n
Was du bauen wirst<\/h2>\n
In diesem Leitfaden wird erkl\u00e4rt, wie du eine React-Anwendung erstellst, die sich \u00fcber ein Node.js-Backend<\/a> nahtlos in die OpenAI DALL-E<\/a> API integriert und auf der Grundlage von Textaufforderungen fesselnde Bilder erzeugt.<\/p>\n Um an diesem Projekt mitzuarbeiten, solltest du Folgendes mitbringen:<\/p>\n Die OpenAI API ist eine Cloud-basierte Plattform, die Entwicklern<\/a> Zugang zu den vortrainierten KI-Modellen von OpenAI wie DALL-E und GPT-3 gew\u00e4hrt (wir haben dieses Modell verwendet, um einen ChatGPT-Klon<\/a> mit dem Code in diesem Git-Repository zu erstellen<\/a>). Damit k\u00f6nnen Entwickler KI-Funktionen wie Zusammenfassungen, \u00dcbersetzungen, Bilderzeugung und Modifikationen in ihre Programme einbauen, ohne ihre Modelle entwickeln und trainieren zu m\u00fcssen.<\/p>\n Um die OpenAI API zu nutzen, musst du ein Konto mit deinem Google-Konto oder deiner E-Mail-Adresse auf der OpenAI-Website<\/a> erstellen und einen API-Schl\u00fcssel anfordern. Um einen API-Schl\u00fcssel zu erhalten, klickst du oben rechts auf der Website auf Personal<\/strong> und w\u00e4hlst dann API-Schl\u00fcssel anzeigen<\/strong>.<\/p>\n Klicke auf die Schaltfl\u00e4che Neuen geheimen Schl\u00fcssel erstellen<\/strong> und speichere den Schl\u00fcssel<\/a> irgendwo. Du wirst ihn in dieser Anwendung verwenden, um mit der DALL-E API von OpenAI zu interagieren.<\/p>\n Du kannst eine React-Anwendung von Grund auf neu erstellen und deine eigene Schnittstelle entwickeln oder du kannst dir unsere Git-Starter-Vorlage<\/a> schnappen, indem du diese Schritte befolgst:<\/p>\n Sobald die Installation abgeschlossen ist, kannst du das Projekt auf deinem lokalen Computer mit In diesem Projekt haben wir alle notwendigen Abh\u00e4ngigkeiten f\u00fcr deine React-Anwendung hinzugef\u00fcgt. Hier ist eine \u00dcbersicht \u00fcber die installierten Dateien:<\/p>\n Das Herzst\u00fcck deiner React-Anwendung ist der Ordner src<\/strong>. Hier befindet sich der wesentliche JavaScript-Code f\u00fcr Webpack. Wir wollen die Dateien und Ordner im src<\/strong>-Ordner kennenlernen:<\/p>\n In diesem Ordner definiert die Datei index.js<\/strong> zwei wiederverwendbare Funktionen. Die erste Funktion w\u00e4hlt nach dem Zufallsprinzip die Prompts aus, die verschiedene Bilder beschreiben, die erzeugt werden k\u00f6nnen.<\/p>\n Die zweite Funktion k\u00fcmmert sich um den Download der erzeugten Bilder, indem sie die Abh\u00e4ngigkeit von file-saver<\/strong> nutzt. Beide Funktionen sind modular und effizient aufgebaut und k\u00f6nnen bei Bedarf bequem in Komponenten importiert werden.<\/p>\n Im obigen Code gibt die uuid<\/strong>-Abh\u00e4ngigkeit jeder erzeugten Bilddatei eine eindeutige ID, damit sie nicht denselben Dateinamen haben.<\/p>\n Das sind kleine Codebl\u00f6cke, die voneinander getrennt sind, damit dein Code einfach zu pflegen und zu verstehen ist. F\u00fcr dieses Projekt wurden drei Komponenten erstellt: Header.jsx<\/strong>, Footer.jsx<\/strong> und Form.jsx<\/strong>. Die Hauptkomponente ist die Komponente Form, in der die Eingaben empfangen und an die Datei App.jsx<\/strong> weitergegeben werden. Die Funktion In der Formularkomponente wird ein Status erstellt, um die Eingabeaufforderung zu speichern und zu aktualisieren. Au\u00dferdem gibt es eine Funktion, mit der du auf ein zuf\u00e4lliges Symbol klicken kannst, um die zuf\u00e4lligen Prompts zu generieren. Dies ist mit der Funktion Hier befindet sich der gr\u00f6\u00dfte Teil des Codes. Alle Komponenten werden hier zusammengef\u00fchrt. Es gibt auch einen Bereich, in dem das erzeugte Bild angezeigt wird. Wenn noch kein Bild erstellt wurde, wird ein Platzhalterbild (Vorschaubild) angezeigt.<\/p>\n In dieser Datei werden zwei Zust\u00e4nde verwaltet:<\/p>\n Au\u00dferdem wird die Funktion Jetzt, wo du die Startdateien verstanden und dein Projekt eingerichtet hast, kannst du mit der Logik der Anwendung beginnen. Beginnen wir nun mit der Logik dieser Anwendung.<\/p>\n Um die M\u00f6glichkeiten von OpenAIs DALL-E API zu nutzen, musst du mit Node.js einen Server einrichten. Innerhalb dieses Servers erstellst du eine POST-Route. Diese Route ist daf\u00fcr zust\u00e4ndig, den von deiner React-Anwendung gesendeten Prompt-Text zu empfangen und daraus ein Bild zu erzeugen.<\/p>\n Um loszulegen, installierst du die notwendigen Abh\u00e4ngigkeiten in deinem Projektverzeichnis, indem du den folgenden Befehl ausf\u00fchrst:<\/p>\n Installiere au\u00dferdem die folgenden Abh\u00e4ngigkeiten als Dev-Abh\u00e4ngigkeiten. Diese Tools helfen dir beim Einrichten deines Node.js-Servers<\/a>:<\/p>\n Die installierten Abh\u00e4ngigkeiten werden im Folgenden erkl\u00e4rt:<\/p>\n Wenn die Installation erfolgreich war, erstelle eine server.js<\/strong>-Datei im Stammverzeichnis deines Projekts. Hier wird dein gesamter Servercode gespeichert.<\/p>\n Importiere in der Datei server.js<\/strong> die Bibliotheken<\/a>, die du gerade installiert hast, und instanziere sie:<\/p>\n Im obigen Code importierst du die notwendigen Bibliotheken. Dann richtest du mit Anschlie\u00dfend wird eine Instanz der OpenAI-Klasse unter Verwendung deines OpenAI-API-Schl\u00fcssels erstellt. Erstelle eine .env<\/strong>-Datei im Stammverzeichnis deines Projekts und f\u00fcge deinen API-Schl\u00fcssel \u00fcber die Variable Jetzt hast du deine server.js<\/strong>-Datei konfiguriert. Erstellen wir nun eine POST-Route, die du in deiner React-Anwendung verwenden kannst, um mit diesem Server zu interagieren:<\/p>\n In diesem Code ist die Route auf Anschlie\u00dfend wird die Methode Nachdem du das Bild erzeugt hast, extrahierst du die Bilddaten aus der Antwort und speicherst sie in der Variablen Wenn w\u00e4hrend dieses Prozesses ein Fehler auftritt, wird der Code im Jetzt ist der Server bereit! Legen wir den Befehl, mit dem unser Server ausgef\u00fchrt werden soll, in der Datei package.json Wenn du In der Datei App.jsx<\/strong> erstellst du eine Funktion In der Funktion Im obigen Code \u00fcberpr\u00fcfst du, ob der Parameter Als N\u00e4chstes verwenden wir die Methode Sobald der Status So sieht deine vollst\u00e4ndige App.jsx<\/strong>-Datei aus:<\/p>\n Bis jetzt hast du erfolgreich eine React-Anwendung erstellt, die mit Node.js interagiert und somit eine Full-Stack-Anwendung ist. Jetzt k\u00f6nnen wir diese Anwendung auf Kinsta bereitstellen.<\/p>\n Konfiguriere den Server zun\u00e4chst so, dass er die statischen Dateien bereitstellt, die w\u00e4hrend des Build-Prozesses der React-Anwendung erzeugt wurden. Dazu importierst du das Modul Wenn du den Befehl Bevor du deinen Code bei dem von dir gew\u00e4hlten Git-Anbieter (Bitbucket<\/a>, GitHub<\/a> oder GitLab<\/a>) bereitstellst, musst du die HTTP-Request-URL in deiner App.jsx<\/strong>-Datei \u00e4ndern. \u00c4ndere Schlie\u00dflich f\u00fcgst du in deiner package.json<\/strong>-Datei einen Skriptbefehl f\u00fcr den Node.js-Server hinzu, der f\u00fcr die Bereitstellung verwendet werden soll:<\/p>\n Als N\u00e4chstes pusht du deinen Code zu deinem bevorzugten Git-Provider und stellst dein Repository auf Kinsta bereit, indem du diese Schritte befolgst:<\/p>\n![\"KI-Bildgenerator](\"https:\/\/kinsta.com\/wp-content\/uploads\/2023\/09\/ai-image-generator-demo.gif\")
Voraussetzungen<\/h3>\n
\n
Was ist die OpenAI DALL-E API?<\/h2>\n
![\"Der](\"https:\/\/kinsta.com\/wp-content\/uploads\/2023\/09\/create-openai-api-secret-key.jpg\")
Einrichten der Entwicklungsumgebung<\/h2>\n
\n
git checkout starter-files<\/code>.<\/li>\n<\/ol>\n\n
npm install<\/code> ausf\u00fchrst.<\/li>\n<\/ol>\nnpm run start<\/code> starten. Dadurch wird das Projekt unter http:\/\/localhost:3000\/<\/a> verf\u00fcgbar.<\/p>\n![\"Benutzeroberfl\u00e4che](\"https:\/\/kinsta.com\/wp-content\/uploads\/2023\/09\/ai-image-generator-ui.jpg\")
Das Verst\u00e4ndnis der Projektdateien<\/h3>\n
\n
\n
Den Utils-Ordner verstehen<\/h4>\n
import { randomPrompts } from '..\/data';\n\nexport const getRandomPrompt = () => {\n const randomIndex = Math.floor(Math.random() * randomPrompts.length);\n const randomPrompt = randomPrompts[randomIndex];\n\n return randomPrompt;\n}<\/code><\/pre>\nimport FileSaver from 'file-saver';\nimport { v4 as uuidv4 } from 'uuid';\n\nexport async function downloadImage(photo) {\n const _id = uuidv4();\n FileSaver.saveAs(photo, `download-${_id}.jpg`);\n}<\/code><\/pre>\nZum Verst\u00e4ndnis der Komponenten<\/h4>\n
generateImage<\/code> wurde als onClick<\/code> -Ereignis zur Schaltfl\u00e4che Generate Image<\/strong> hinzugef\u00fcgt.<\/p>\nhandleRandomPrompt<\/code> m\u00f6glich, die die Funktion getRandomPrompt<\/code> verwendet, die du bereits eingerichtet hast. Wenn du auf das Symbol klickst, wird ein zuf\u00e4lliger Prompt abgerufen und der Status damit aktualisiert:<\/p>\nconst handleRandomPrompt = () => {\n const randomPrompt = getRandomPrompt();\n setPrompt(randomPrompt)\n}<\/code><\/pre>\nDie Datei App.jsx verstehen<\/h4>\n
\n
isGenerating<\/code>: Hier wird festgehalten, ob gerade ein Bild erstellt wird. In der Standardeinstellung ist er auf false gesetzt.<\/li>\ngeneratedImage<\/code>: Dieser Status speichert Informationen \u00fcber das Bild, das erstellt wurde.<\/li>\n<\/ul>\ndownloadImage<\/code> importiert, mit der du den Download des erzeugten Bildes ausl\u00f6sen kannst, wenn du auf die Schaltfl\u00e4che Download<\/strong> klickst:<\/p>\n<button\n className=\"btn\"\n onClick={() => downloadImage(generatedImage.photo)}\n><\/code><\/pre>\nBilder mit der DALL-E API von OpenAI generieren<\/h2>\n
npm i express cors openai<\/code><\/pre>\nnpm i -D dotenv nodemon<\/code><\/pre>\n\n
\/\/ Import the necessary libraries\nconst express = require('express');\nconst cors = require('cors');\nrequire('dotenv').config();\nconst OpenAI = require('openai');\n\n\/\/ Create an instance of the Express application\nconst app = express();\n\n\/\/ Enable Cross-Origin Resource Sharing (CORS)\napp.use(cors());\n\n\/\/ Configure Express to parse JSON data and set a data limit\napp.use(express.json({ limit: '50mb' }));\n\n\/\/ Create an instance of the OpenAI class and provide your API key\nconst openai = new OpenAI({\n apiKey: process.env.OPENAI_API_KEY,\n});\n\n\/\/ Define a function to start the server\nconst startServer = async () => {\n app.listen(8080, () => console.log('Server started on port 8080'));\n};\n\n\/\/ Call the startServer function to begin listening on the specified port\nstartServer();<\/code><\/pre>\nconst app = express();<\/code> eine Instanz der Express-Anwendung ein. Danach aktivierst du CORS. Als N\u00e4chstes wird Express so konfiguriert, dass es eingehende JSON-Daten verarbeitet, wobei eine Datengr\u00f6\u00dfenbeschr\u00e4nkung von 50mb<\/code> festgelegt wird.<\/p>\nOPENAI_API_KEY<\/code> hinzu. Schlie\u00dflich definierst du eine asynchrone startServer<\/code> Funktion und rufst sie auf, um den Server in Gang zu setzen.<\/p>\napp.post('\/api', async (req, res) => {\n try {\n const { prompt } = req.body;\n const response = await openai.images.generate({\n prompt,\n n: 1,\n size: '1024x1024',\n response_format: 'b64_json',\n });\n const image = response.data[0].b64_json;\n res.status(200).json({ photo: image });\n } catch (error) {\n console.error(error);\n }\n});<\/code><\/pre>\n\/api<\/code> eingestellt und soll eingehende POST-Anfragen bearbeiten. In der Callback-Funktion der Route erh\u00e4ltst du die von deiner React-Anwendung gesendeten Daten \u00fcber req.body<\/code> – genauer gesagt \u00fcber den Wert prompt<\/code>.<\/p>\nimages.generate<\/code> der OpenAI-Bibliothek aufgerufen. Diese Methode nimmt die angegebene Eingabeaufforderung entgegen und erzeugt als Antwort ein Bild. Parameter wie n<\/code> bestimmen die Anzahl der zu erzeugenden Bilder (hier nur eines), size<\/code> gibt die Abmessungen des Bildes an und response_format<\/code> gibt das Format an, in dem die Antwort geliefert werden soll (in diesem Fallb64_json<\/code> ).<\/p>\nimage<\/code>. Dann schickst du eine JSON-Antwort mit den erzeugten Bilddaten zur\u00fcck an die React-Anwendung und setzt den HTTP-Status mit res.status(200).json({ photo: image })<\/code> auf 200<\/code> (was einen Erfolg anzeigt).<\/p>\ncatch<\/code> Block ausgef\u00fchrt und der Fehler zum Debuggen auf der Konsole protokolliert.<\/p>\nscripts<\/code> Objekt fest:<\/p>\n\"scripts\": {\n \"dev:frontend\": \"react-scripts start\",\n \"dev:backend\": \"nodemon server.js\",\n \"build\": \"react-scripts build\",\n},<\/code><\/pre>\nnpm run dev:backend<\/code> aufrufst, wird dein Server auf http:\/\/localhost:8080\/<\/a> gestartet, und wenn du npm run dev:frontend<\/code> aufrufst, wird deine React-Anwendung auf http:\/\/localhost:3000\/ gestartet. Stelle sicher, dass beide in verschiedenen Terminals laufen.<\/p>\nHTTP-Anfragen von React an den Node.js Server stellen<\/h2>\n
generateImage<\/code>, die ausgel\u00f6st wird, wenn du in der Komponente Form.jsx<\/strong> auf die Schaltfl\u00e4che Bild generieren<\/strong> klickst. Diese Funktion nimmt zwei Parameter entgegen: prompt<\/code> und setPrompt<\/code> aus der Komponente Form.jsx<\/strong>.<\/p>\ngenerateImage<\/code> stellst du eine HTTP-POST-Anfrage an den Node.js-Server:<\/p>\nconst generateImage = async (prompt, setPrompt) => {\n if (prompt) {\n try {\n setIsGenerating(true);\n const response = await fetch(\n 'http:\/\/localhost:8080\/api',\n {\n method: 'POST',\n headers: {\n 'Content-Type': 'application\/json',\n },\n body: JSON.stringify({\n prompt,\n }),\n }\n );\n const data = await response.json();\n setGeneratedImage({\n photo: `data:image\/jpeg;base64,${data.photo}`,\n altText: prompt,\n });\n } catch (err) {\n alert(err);\n } finally {\n setPrompt('');\n setIsGenerating(false);\n }\n } else {\n alert('Please provide proper prompt');\n }\n};<\/code><\/pre>\nprompt<\/code> einen Wert hat, und setzt dann den Status von isGenerating<\/code> auf true<\/code>, da der Vorgang gestartet wird. Dadurch wird der Lader auf dem Bildschirm angezeigt, denn in der Datei App.jsx<\/strong> haben wir diesen Code, der die Anzeige des Laders steuert:<\/p>\n{isGenerating && (\n <div> className=\"loader-comp\">\n <img src={Loader} alt=\"\" className='loader-img' \/>\n <\/div>\n)}<\/code><\/pre>\nfetch()<\/code>, um mit http:\/\/localhost:8080\/api<\/a> eine POST-Anfrage an den Server zu stellen – aus diesem Grund haben wir CORS installiert, da wir mit einer API auf einer anderen URL interagieren. Wir verwenden die Eingabeaufforderung als Text der Nachricht. Dann extrahierst du die vom Node.js-Server zur\u00fcckgegebene Antwort und setzt sie in den Zustand generatedImage<\/code>.<\/p>\ngeneratedImage<\/code> einen Wert hat, wird das Bild angezeigt:<\/p>\n{generatedImage.photo ? (\n <img\n src={generatedImage.photo}\n alt={generatedImage.altText}\n className=\"imgg ai-img\"\n \/>\n) : (\n <img\n src={preview}\n alt=\"preview\"\n className=\"imgg preview-img\"\n \/>\n)}<\/code><\/pre>\nimport { Form, Footer, Header } from '.\/components';\nimport preview from '.\/assets\/preview.png';\nimport Loader from '.\/assets\/loader-3.gif'\nimport { downloadImage } from '.\/utils';\nimport { useState } from 'react';\n\nconst App = () => {\n const [isGenerating, setIsGenerating] = useState(false);\n const [generatedImage, setGeneratedImage] = useState({\n photo: null,\n altText: null,\n });\n\n const generateImage = async (prompt, setPrompt) => {\n if (prompt) {\n try {\n setIsGenerating(true);\n const response = await fetch(\n 'http:\/\/localhost:8080\/api',\n {\n method: 'POST',\n headers: {\n 'Content-Type': 'application\/json',\n },\n body: JSON.stringify({\n prompt,\n }),\n }\n );\n const data = await response.json();\n setGeneratedImage({\n photo: `data:image\/jpeg;base64,${data.photo}`,\n altText: prompt,\n });\n } catch (err) {\n alert(err);\n } finally {\n setPrompt('');\n setIsGenerating(false);\n }\n } else {\n alert('Please provide proper prompt');\n }\n };\n\n return (\n <div className='container'>\n <Header \/>\n <main className=\"flex-container\">\n <Form generateImage={generateImage} prompt={prompt} \/>\n <div className=\"image-container\">\n {generatedImage.photo ? (\n <img\n src={generatedImage.photo}\n alt={generatedImage.altText}\n className=\"imgg ai-img\"\n \/>\n ) : (\n <img\n src={preview}\n alt=\"preview\"\n className=\"imgg preview-img\"\n \/>\n )}\n {isGenerating && (\n <div className=\"loader-comp\">\n <img src={Loader} alt=\"\" className='loader-img' \/>\n <\/div>\n )}\n <button\n className=\"btn\"\n onClick={() => downloadImage(generatedImage.photo)}\n >\n Download\n <\/button>\n <\/div>\n <\/main>\n <Footer \/>\n <\/div>\n );\n};\n\nexport default App;<\/code><\/pre>\nBereitstellen deiner Full-Stack-Anwendung auf Kinsta<\/h2>\n
path<\/code> und verwendest es zum Bereitstellen der statischen Dateien:<\/p>\nconst path = require('path');\n\napp.use(express.static(path.resolve(__dirname, '.\/build')));<\/code><\/pre>\nnpm run build && npm run dev:backend<\/code> ausf\u00fchrst, wird deine Full-Stack-React-Anwendung unter http:\/\/localhost:8080\/ geladen. Das liegt daran, dass die React-Anwendung im Build<\/strong>-Ordner in statische Dateien<\/a> kompiliert wird. Diese Dateien werden dann als statisches Verzeichnis in deinen Node.js-Server eingebunden. Wenn du deinen Node.js-Server startest, ist die Anwendung also zug\u00e4nglich.<\/p>\nhttp:\/\/localhost:8080\/api<\/code> in \/api<\/code>, da die URL vorangestellt werden soll.<\/p>\n\"scripts\": {\n \/\/ \u2026\n \"start\": \"node server.js\",\n},<\/code><\/pre>\n