Δημιουργήστε ένα απλό front-end για το DALL-E API και ξεκινήστε να πειραματίζεστε με περιεχόμενο που δημιουργείται από AI σήμερα.

Η τεχνητή νοημοσύνη βελτιώνεται συνεχώς και τώρα μπορεί να δημιουργήσει εκπληκτικές εικόνες. Ένα πρόσφατο ιογενές παράδειγμα απεικόνισε τα πλουσιότερα και πιο ισχυρά άτομα του κόσμου με σκισμένα ρούχα, να ζουν σε ένα περιβάλλον παραγκούπολης. Αυτό που είναι εντυπωσιακό στις εικόνες είναι το υψηλό επίπεδο λεπτομέρειας που αποτυπώνεται τόσο στους ανθρώπους όσο και στο περιβάλλον τους.

Μοντέλα γλώσσας όπως το DALL-E και το Midjourney ενισχύουν αυτές τις δυνατότητες δημιουργίας εικόνων, λαμβάνοντας περιγραφές κειμένου ως είσοδο και δημιουργώντας συναρπαστικές εικόνες.

Μάθετε πώς να ενσωματώνετε το DALL-E API του OpenAI για τη δημιουργία εικόνων σε μια εφαρμογή React.

Δημιουργία εικόνων με χρήση του μοντέλου γλώσσας DALL-E του OpenAI

Πώς το μοντέλο γλώσσας DALL-E δημιουργεί πραγματικά εικόνες; Χωρίς να σκάβει πολύ βαθιά στην πολυπλοκότητα της δημιουργίας εικόνων AI, το DALL-E ερμηνεύει πρώτα τις περιγραφές κειμένου που του τροφοδοτούνται ως εισροές χρησιμοποιώντας επεξεργασία φυσικής γλώσσας (NLP). Στη συνέχεια αποδίδει μια ρεαλιστική εικόνα που ταιριάζει πολύ με τη δεδομένη περιγραφή.

instagram viewer

Οι προτροπές εισαγωγής μπορούν να περιλαμβάνουν περιγραφές κειμένου ενός προσώπου, αντικειμένου ή σκηνής. Επιπλέον, μπορεί επίσης να περιλαμβάνει λεπτομέρειες όπως ένα συγκεκριμένο χρώμα, σχήμα και μέγεθος. Ανεξάρτητα από την πολυπλοκότητα ή την απλότητα του κειμένου εισαγωγής, το DALL-E θα δημιουργήσει μια εικόνα που ταιριάζει πολύ με την περιγραφή εισόδου.

Είναι σημαντικό να σημειωθεί ότι το γλωσσικό μοντέλο, όπως και άλλα μοντέλα, εκπαιδεύτηκε σε ένα μεγάλο σύνολο δεδομένων με εκατομμύρια δεδομένα εικόνας για να μάθετε πώς να αναγνωρίζετε και να δημιουργείτε φωτορεαλιστικές εικόνες από δεδομένες εισροές.

Ξεκινώντας με το DALL-E API του OpenAI

Το DALL-E API του OpenAI είναι διαθέσιμο για χρήση ως δημόσια beta. Για να ενσωματώσετε το API για χρήση στην εφαρμογή React σας, θα χρειαστείτε ένα κλειδί για το API του OpenAI. Κατευθυνθείτε προς OpenAIκαι συνδεθείτε στη σελίδα επισκόπησης του λογαριασμού σας για να πάρετε το κλειδί API.

Μόλις συνδεθείτε, κάντε κλικ στο εικονίδιο του προφίλ χρήστη στην επάνω δεξιά ενότητα της σελίδας επισκόπησης. Στη συνέχεια, επιλέξτε και κάντε κλικ στο Προβολή κλειδιών API.

Στη σελίδα ρυθμίσεων των κλειδιών API, κάντε κλικ στο Δημιουργία νέου μυστικού κλειδιού κουμπί, δώστε ένα όνομα για το κλειδί API σας και κάντε κλικ στο Δημιουργία μυστικού κλειδιού για να δημιουργήσετε το κλειδί API σας.

Δημιουργήστε ένα React Project

Εκτελέστε τις παρακάτω εντολές στο τερματικό σας για να δημιουργήσετε ένα νέο έργο React τοπικά. Σημείωση, θα πρέπει να έχετε εγκαταστήσει το Node.js.

Ανατρέξτε σε αυτά τα δύο άρθρα για να μάθετε πώς να το κάνετε εγκαταστήστε το Node.js στα Windows και πώς να εγκαταστήσετε το Node.js στο Ubuntu.

mkdir React-project 
cd React-project
npx create-react-app image-generator-app
cd image-generator-app
npm έναρξη

Εναλλακτικά, αντί να χρησιμοποιήσετε την εντολή create-react-app, μπορείτε να χρησιμοποιήσετε Vite για να ρυθμίσετε το έργο σας React. Το Vite είναι ένα εργαλείο κατασκευής σχεδιασμένο για τη γρήγορη και αποτελεσματική δημιουργία εφαρμογών web.

Ενσωματώστε το DALL-E API του OpenAI για να δημιουργήσετε εικόνες

Μόλις ενεργοποιήσετε και εκτελείτε την εφαρμογή React, εγκαταστήστε τη βιβλιοθήκη Node.js του OpenAI για χρήση στις εφαρμογές σας React.

npm εγκατάσταση openai

Στη συνέχεια, στον ριζικό κατάλογο του φακέλου του έργου σας, δημιουργήστε ένα νέο .env αρχείο για να κρατήσει το κλειδί API σας.

REACT_APP_OPENAI_API_KEY = "ΚΛΕΙΔΙ API"

Μπορείτε να βρείτε τον κωδικό αυτού του έργου σε αυτό Αποθετήριο GitHub.

Δημιουργήστε ένα στοιχείο δημιουργίας εικόνας

Στο /src κατάλογο, δημιουργήστε έναν νέο φάκελο, ονομάστε τον συστατικάκαι δημιουργήστε ένα νέο αρχείο μέσα σε αυτό με το όνομα ImageGenerator.js. Προσθέστε τον παρακάτω κώδικα σε αυτό το αρχείο.

Ξεκινήστε εισάγοντας τις απαιτούμενες ενότητες:

εισαγωγή"../App.css"; 
εισαγωγή { useState } από"αντιδρώ"; 
εισαγωγή { Configuration, OpenAIApi } από"openai";

Η ενότητα Configuration διαμορφώνει τον πελάτη API του OpenAI για χρήση, ενώ η λειτουργική μονάδα OpenAIApi παρέχει μεθόδους αλληλεπίδρασης με το API του OpenAI. Αυτές οι δύο μονάδες καθιστούν δυνατή την πρόσβαση και τη χρήση των δυνατοτήτων του DALL-E από την εφαρμογή React.

Στη συνέχεια, ορίστε ένα λειτουργικό στοιχείο και προσθέστε τον ακόλουθο κώδικα σε αυτό:

λειτουργίαImageGenerator() {
συνθ [prompt, setPrompt] = useState("");
συνθ [αποτέλεσμα, setResult] = useState("");
συνθ [φόρτωση, setLoading] = useState(ψευδής);
συνθ [placeholder, setPlaceholder] = useState(
"Αναζήτηση για ένα λιοντάρι με πινέλα ζωγραφικής που ζωγραφίζει τον πίνακα της Μόνα Λίζα..."
 );


συνθ διαμόρφωση = νέος Διαμόρφωση({
 apiKey: process.env. REACT_APP_OPENAI_API_KEY,
 });

συνθ openai = νέος OpenAIApi (διαμόρφωση);

συνθ ΔημιουργώΕικόνα = ασυγχρονισμός () => {
 setPlaceholder(`Αναζήτηση ${prompt}..`);
 setLoading(αληθής);


δοκιμάστε {
συνθ res = αναμένω openai.createImage({
 προτροπή: προτροπή,
 n: 1,
 Μέγεθος: "512x512",
 });
 setLoading(ψευδής);
 setResult (res.data.data[0].url);
 } σύλληψη (λάθος) {
 setLoading(ψευδής);
κονσόλα.λάθος(`Σφάλμα κατά τη δημιουργία εικόνας: ${error.response.data.error.message}`);
 }
 };

Αυτός ο κώδικας ορίζει ένα λειτουργικό στοιχείο React που ονομάζεται ImageGenerator. Το στοιχείο χρησιμοποιεί πολλές μεταβλητές κατάστασης για τη διαχείριση της προτροπής εισόδου, του αποτελέσματος εξόδου, της κατάστασης φόρτωσης και του κειμένου κράτησης θέσης.

Το συστατικό δημιουργεί επίσης ένα διαμόρφωση αντικείμενο για το πρόγραμμα-πελάτη OpenAI API, το οποίο περιλαμβάνει το κλειδί API που ανακτήθηκε από τη μεταβλητή περιβάλλοντος.

Το ασύγχρονο δημιουργία εικόνας Η λειτουργία θα εκτελεστεί όταν ο χρήστης κάνει κλικ σε ένα κουμπί, περνώντας κατά μήκος της προτροπής χρήστη.

Στη συνέχεια, καλεί το openai.createImage μέθοδο για τη δημιουργία μιας εικόνας με βάση τη δεδομένη προτροπή. Αυτή η μέθοδος επιστρέφει ένα αντικείμενο απόκρισης που περιλαμβάνει τη διεύθυνση URL της εικόνας που δημιουργήθηκε.

Εάν η κλήση API επιτύχει, ο κώδικας ενημερώνει το αποτέλεσμα κατάσταση με τη διεύθυνση URL και ορίζει την κατάσταση φόρτωσης σε ψευδής. Εάν η κλήση API αποτύχει, εξακολουθεί να ορίζει την κατάσταση φόρτωσης σε ψευδής, αλλά επίσης καταγράφει ένα μήνυμα σφάλματος στην κονσόλα.

Τέλος, αποδώστε τα στοιχεία React JSX που αποτελούν το στοιχείο δημιουργίας εικόνας.

ΕΠΙΣΤΡΟΦΗ (
"δοχείο">
 { φόρτωση? (
 <>
Δημιουργία εικόνας... Παρακαλώ περιμένετε...</h3>
 </>
 ): (
 <>
Δημιουργήστε μια εικόνα χρησιμοποιώντας το Open AI API</h2>




 className="Είσοδος εφαρμογής"
 placeholder={placeholder}
 onChange={(e) => setPrompt (e.target.value)}
 σειρές="10"
 cols="100"
 />




 { result.length > 0? (
"αποτέλεσμα-εικόνα" src={αποτέλεσμα} alt="αποτέλεσμα" />
 ): (
 <>
 </>
 )}
 </>
 )}
 </div>
 )
}


εξαγωγήΠροκαθορισμένο ImageGenerator

Ο κώδικας αυτού του στοιχείου αποδίδει υπό όρους διαφορετικά στοιχεία με βάση την τιμή του φόρτωση μεταβλητή κατάστασης.

Αν φόρτωση είναι αλήθεια, εμφανίζει ένα μήνυμα φόρτωσης. Αντίθετα, Αν φόρτωση είναι ψευδής, εμφανίζει την κύρια διεπαφή για τη δημιουργία μιας εικόνας χρησιμοποιώντας το OpenAI API που αποτελείται από μια περιοχή κειμένου που καταγράφει τις προτροπές χρήστη και ένα κουμπί υποβολής.

ο αποτέλεσμα Η μεταβλητή κατάσταση κρατά τη διεύθυνση URL της εικόνας που δημιουργείται, η οποία αργότερα αποδίδεται στο πρόγραμμα περιήγησης.

Ενημερώστε το στοιχείο App.js

Προσθέστε αυτόν τον κώδικα στο αρχείο σας App.js:

εισαγωγή"./App.css";
εισαγωγή ImageGenerator από'./component/ImageGenerator';
λειτουργίαApp() {
ΕΠΙΣΤΡΟΦΗ (


"Εφαρμογή">
"Επικεφαλίδα εφαρμογής">

 </header>
 </div>
 );
}


εξαγωγήΠροκαθορισμένο Εφαρμογή?

Τώρα μπορείτε να προχωρήσετε και να περιστρέψετε τον διακομιστή ανάπτυξης για να ενημερώσετε τις αλλαγές και να πλοηγηθείτε http://localhost: 3000 με το πρόγραμμα περιήγησής σας για να δοκιμάσετε τη λειτουργία δημιουργίας εικόνων.

Για να έχετε τα καλύτερα δυνατά αποτελέσματα όταν χρησιμοποιείτε ένα εργαλείο τεχνητής νοημοσύνης για τη δημιουργία μιας εικόνας, φροντίστε να παρέχετε μια λεπτομερή προτροπή στην περιοχή κειμένου. Αυτό σημαίνει να περιγράψετε την εικόνα όσο το δυνατόν λεπτομερέστερα, χωρίς καμία λεπτομέρεια.

Αυτή η διαδικασία ονομάζεται Prompt Engineering και περιλαμβάνει την παροχή λεπτομερών προτροπών, έτσι ώστε το μοντέλο γλώσσας να μπορεί να παράγει τα καλύτερα αποτελέσματα με βάση τις παρεχόμενες εισόδους χρήστη.

Δεδομένης της πρόσφατης αύξησης του λογισμικού τεχνητής νοημοσύνης που διατίθεται στην αγορά, επιδίωξη σταδιοδρομίας στο Prompt Engineering μπορεί να είναι μια προσοδοφόρα ευκαιρία.

Μεγιστοποιήστε τη δύναμη των γλωσσικών μοντέλων στην ανάπτυξη λογισμικού

Τα εργαλεία τεχνητής νοημοσύνης που τροφοδοτούνται από μεγάλα γλωσσικά μοντέλα έχουν κατακλύσει τον τομέα της Ανάπτυξης Λογισμικού λόγω των απίστευτων χαρακτηριστικών και δυνατοτήτων τους.

Αυτά τα εργαλεία έχουν τη δυνατότητα να βελτιώσουν το τρέχον οικοσύστημα λογισμικού, επιτρέποντας στους προγραμματιστές να ενσωματώσουν δροσερές λειτουργίες AI που ενισχύουν τη χρήση διαφορετικών προϊόντων—η χρήση της τεχνολογίας AI αποτελεί μια μοναδική ευκαιρία για τη δημιουργία λογισμικού σε καινοτόμο τρόπους.