בנו חזית פשוטה ל-API של DALL-E והתחילו להתנסות בתוכן שנוצר בינה מלאכותית עוד היום.
הבינה המלאכותית משתפרת ללא הרף ויכולה כעת ליצור תמונות מדהימות. דוגמה ויראלית עדכנית תיארה את האנשים העשירים והמשפיעים בעולם בבגדים קרועים, החיים בסביבת שכונות עוני. מה שמרשים בתמונות הוא רמת הפירוט הגבוהה שנלכדה הן באנשים והן בסביבתם.
מודלים של שפה כמו DALL-E ו-Midjourney מחזקים את יכולות יצירת התמונות הללו, לוקחים תיאורים טקסטואליים כקלט ומייצרים תמונות שובות לב.
למד כיצד לשלב את DALL-E API של OpenAI כדי ליצור תמונות ביישום React.
יצירת תמונה באמצעות מודל השפה DALL-E של OpenAI
כיצד מודל שפת DALL-E יוצר למעשה תמונות? מבלי לחפור עמוק מדי לתוך המורכבות של יצירת תמונות בינה מלאכותית, DALL-E מפרש תחילה את התיאורים הטקסטואליים המוזנים לו כקלט באמצעות עיבוד שפה טבעית (NLP). לאחר מכן הוא מציג תמונה מציאותית התואמת היטב את התיאור הנתון.
הנחיות הקלט יכולות לכלול תיאורים טקסטואליים של אדם, אובייקט או סצנה. בנוסף, הוא יכול לכלול גם פרטים כגון צבע, צורה וגודל מסוימים. ללא קשר למורכבות או הפשטות של טקסט הקלט, DALL-E יפיק תמונה שתואמת במידה רבה לתיאור הקלט.
חשוב לציין שמודל השפה, בדיוק כמו מודלים אחרים, הוכשר על מערך נתונים גדול עם מיליוני נתוני תמונה כדי ללמוד כיצד לזהות ולייצר תמונות פוטוריאליסטיות מנתון תשומות.
תחילת העבודה עם DALL-E API של OpenAI
ה-API של DALL-E של OpenAI זמין לשימוש כגרסת בטא ציבורית. כדי לשלב את ה-API לשימוש באפליקציית React שלך, תזדקק למפתח עבור ה-API של OpenAI. פנה אל OpenAIוהיכנס לדף סקירת החשבון שלך כדי לתפוס את מפתח ה-API שלך.
לאחר הכניסה, לחץ על סמל פרופיל המשתמש בחלק הימני העליון של דף הסקירה הכללית שלך. לאחר מכן, בחר ולחץ על הצג מפתחות API.
בדף ההגדרות של מפתחות API, לחץ על צור מפתח סודי חדש לחצן, ספק שם למפתח ה-API שלך ולחץ על צור מפתח סודי כדי ליצור את מפתח ה-API שלך.
צור פרויקט React
הפעל את הפקודות למטה בטרמינל שלך כדי ליצור פרויקט React חדש באופן מקומי. שים לב, Node.js אמור להיות מותקן.
עיין בשני המאמרים הללו כדי ללמוד כיצד לעשות זאת התקן את Node.js ב-Windows ו כיצד להתקין את Node.js באובונטו.
mkdir React-project
cd React-project
npx create-react-app image-generator-app
cd image-generator-app
התחלה של npmלחלופין, במקום להשתמש בפקודה create-react-app, אתה יכול להשתמש הקפד להגדיר את פרויקט React שלך. Vite הוא כלי בנייה המיועד לבניית יישומי אינטרנט במהירות וביעילות.
שלב את 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 } מ"לְהָגִיב";
יְבוּא { תצורה, OpenAIApi } מ"אופנאי";מודול התצורה מגדיר את לקוח ה-API של OpenAI לשימוש, בעוד שמודול OpenAIApi מספק שיטות לאינטראקציה עם ה-API של OpenAI. שני המודולים הללו מאפשרים לגשת ולהשתמש בתכונות של DALL-E מאפליקציית React.
לאחר מכן, הגדר רכיב פונקציונלי והוסף לו את הקוד הבא:
פוּנקצִיָהImageGenerator() {
const [prompt, setPrompt] = useState("");
const [result, setResult] = useState("");
const [loading, setLoading] = useState(שֶׁקֶר);const [placeholder, setPlaceholder] = useState(
"חפש אריה עם מברשות צבע שמציירים את ציור המונה ליזה..."
);const תצורה = חָדָשׁ תְצוּרָה({
apiKey: process.env. REACT_APP_OPENAI_API_KEY,
});
const openai = חָדָשׁ OpenAIApi (תצורה);
const generImage = אסינכרון () => {
setPlaceholder(`חפש ${prompt}..`);
setLoading(נָכוֹן);לְנַסוֹת {
const res = לְהַמתִין openai.createImage({
prompt: prompt,
n: 1,
גודל: "512x512",
});
setLoading(שֶׁקֶר);
setResult (res.data.data[0].url);
} לתפוס (שגיאה) {
setLoading(שֶׁקֶר);
לְנַחֵם.שְׁגִיאָה(`שגיאה ביצירת תמונה: ${error.response.data.error.message}`);
}
};
קוד זה מגדיר רכיב פונקציונלי של React הנקרא ImageGenerator. הרכיב משתמש במספר משתני מצב כדי לנהל את הוראת הקלט, תוצאת הפלט, מצב הטעינה וטקסט מציין מיקום.
הרכיב יוצר גם א תְצוּרָה אובייקט עבור לקוח ה-API של OpenAI, הכולל את מפתח ה-API שאוחזר ממשתנה הסביבה.
האסינכרוני generImage הפונקציה תפעל כאשר המשתמש ילחץ על כפתור, ויעביר את ההנחיה של המשתמש.
לאחר מכן, זה קורא ל openai.createImage שיטה ליצור תמונה על סמך ההנחיה הנתונה. שיטה זו מחזירה אובייקט תגובה הכולל את כתובת האתר של התמונה שנוצרה.
אם קריאת ה-API מצליחה, הקוד מעדכן את תוֹצָאָה משתנה מצב עם כתובת האתר, ומגדיר את מצב הטעינה ל שֶׁקֶר. אם קריאת ה-API נכשלת, היא עדיין מגדירה את מצב הטעינה ל שֶׁקֶר, אבל גם רושם הודעת שגיאה למסוף.
לבסוף, רנדר את רכיבי React JSX המרכיבים את רכיב מחולל התמונות.
לַחֲזוֹר ("מְכוֹלָה">
{ טוען? (
<>יוצר תמונה... אנא המתן...</h3>
</>
): (
<>צור תמונה באמצעות Open AI API</h2>
className="קלט אפליקציה"
placeholder={placeholder}
onChange={(e) => setPrompt (e.target.value)}
שורות="10"
cols="100"
/>{ result.length > 0? (
"תמונת תוצאה" src={result} alt="תוֹצָאָה" />
): (
<>
</>
)}
</>
)}
</div>
)
}
יְצוּאבְּרִירַת מֶחדָל ImageGenerator
הקוד של רכיב זה מעבד באופן מותנה אלמנטים שונים בהתבסס על הערך של ה- טוען משתנה מצב.
אם טוען נכון, הוא מציג הודעת טעינה. לעומת זאת, אם טוען הוא שקר, הוא מציג את הממשק הראשי ליצירת תמונה באמצעות OpenAI API המורכב מאזור טקסט שתופס את הנחיות המשתמש וכפתור שלח.
ה תוֹצָאָה משתנה state מחזיק את כתובת ה-URL של התמונה שנוצרה אשר מוצגת מאוחר יותר בדפדפן.
עדכן את רכיב App.js
הוסף את הקוד הזה לקובץ App.js שלך:
יְבוּא'./App.css';
יְבוּא ImageGenerator מ'./component/ImageGenerator';פוּנקצִיָהאפליקציה() {
לַחֲזוֹר ("אפליקציה">"כותרת אפליקציה">
</header>
</div>
);
}
יְצוּאבְּרִירַת מֶחדָל אפליקציה;
עכשיו אתה יכול להמשיך ולסובב את שרת הפיתוח כדי לעדכן את השינויים ולנווט אליו http://localhost: 3000 עם הדפדפן שלך כדי לבדוק את פונקציונליות יצירת התמונות.
כדי לקבל את התוצאות הטובות ביותר האפשריות בעת שימוש בכלי AI ליצירת תמונה, הקפד לספק הנחיה מפורטת באזור הטקסט. משמעות הדבר היא לתאר את התמונה בצורה יסודית ככל האפשר, מבלי להשאיר פרטים.
תהליך זה נקרא Prompt Engineering, והוא כולל מתן הנחיות מפורטות כדי שמודל השפה יוכל להפיק את התוצאות הטובות ביותר על סמך קלט המשתמשים שסופקו.
לאור הזינוק האחרון בתוכנת AI הזמינה בשוק, המשך קריירה בהנדסה מהירה יכולה להיות הזדמנות משתלמת.
למקסם את הכוח של מודלים לשפות בפיתוח תוכנה
כלי AI המופעלים על ידי מודלים של שפות גדולות כבשו את תחום פיתוח התוכנה בסערה בגלל התכונות והיכולות המדהימות שלהם.
לכלים אלה יש את הפוטנציאל לשפר את מערכת האקולוגית הנוכחית של התוכנה על ידי מתן אפשרות למפתחים לשלב תכונות AI מגניבות המשפרים את השימוש במוצרים שונים - שימוש בטכנולוגיית AI מהווה הזדמנות ייחודית לבנות תוכנה חדשנית דרכים.
