DALL-E 3 یک مدل تولید تصویر است که در تولید تصاویر از اعلان های متنی عالی است. می تواند توصیفات متنی پیچیده را درک و تفسیر کند و آنها را به بازنمایی های بصری ترجمه کند. تصاویر تولید شده نیز دارای وضوح بالا و سبک متنوعی هستند. در پایان این آموزش، چیزی شبیه به این خواهیم داشت:
ساختار HTML
ساختار HTML از عناصر زیر تشکیل خواهد شد:
- یک دکمه کوچک در بالا سمت راست، که با کلیک روی آن، به کاربر این امکان را می دهد تا کلید API خود را به حافظه محلی اضافه کند.
- یک ورودی متن که در آن کاربران درخواست خود را وارد می کنند
- دکمه ای که با کلیک کردن، درخواست را از کاربر می گیرد و DALL-E API را برای تولید تصویر فراخوانی می کند.
بوت استرپ را نصب کنید
استفاده خواهیم کرد بوت استرپ برای ساخت رابط بوت استرپ چارچوبی است که به توسعه دهندگان اجازه می دهد در مدت زمان کوتاهی سایت های واکنش گرا بسازند. یا به فایل های CSS و JS مربوطه در سر سند HTML خود پیوند دهید، یا (اگر از CodePen استفاده می کنید) وابستگی های Bootstrap را در زبانه های تنظیمات CSS و JS پیدا خواهید کرد.
پیام API
ابتدا، با نمایش پیامی مبنی بر نیاز برنامه به کلید API شروع کنید و سپس پیوندی را نشان دهید که کاربران می‌توانند کلید API را دریافت کنند. این نشانه گذاری است:
1 |
<div class="container-fluid"https://webdesign.tutsplus.com/> |
2 |
<div class="row justify-content-center"https://webdesign.tutsplus.com/> |
3 |
<div class="col-12 col-md-10 col-lg-8 col-xl-6 mt-5"https://webdesign.tutsplus.com/> |
4 |
<p class="lead"https://webdesign.tutsplus.com/>This demo requires an API key. <a target="_blank" href="https://platform.openai.com/"https://webdesign.tutsplus.com/>Get yours here</a></p> |
5 |
</div>
|
6 |
</div>
|
7 |
</div>
|
بعد، اضافه کنید افزودن کلید API دکمه
1 |
<div class="position-absolute top-0 end-0 mt-2 me-3"https://webdesign.tutsplus.com/> |
2 |
<button
|
3 |
id="api" |
4 |
type="button" |
5 |
class="btn btn-info" |
6 |
data-bs-toggle="modal" |
7 |
data-bs-target="#KeyModal" |
8 |
>
|
9 |
ADD API KEY |
10 |
</button>
|
11 |
</div>
|
دکمه از موقعیت یابی مطلق استفاده می کند تا اطمینان حاصل شود که در سمت راست بالا باقی می ماند و همچنین روی آن تنظیم شده است data-bs-target="#KeyModal. این ویژگی به این معنی است که دکمه به عنصری با شناسه مرتبط است KeyModal.
دکمه KeyModal
وقتی روی دکمه کلیک کردید، مودال باز می شود. استفاده از بوت استرپ data-bs-target برای ارجاع یک عنصر با شناسه آن، بنابراین هنگامی که روی دکمه کلیک می شود، عنصر با شناسه آن را جستجو می کند KeyModal و اقدامات مشخص شده را انجام دهید.
بیایید مدال را زیر دکمه اضافه کنیم.
1 |
<div class="container mt-5"https://webdesign.tutsplus.com/> |
2 |
<div class="modal fade" id="KeyModal" tabindex="-1" aria-hidden="true"https://webdesign.tutsplus.com/> |
3 |
<div class="modal-dialog"https://webdesign.tutsplus.com/> |
4 |
<div class="modal-content"https://webdesign.tutsplus.com/> |
5 |
<div class="modal-header"https://webdesign.tutsplus.com/> |
6 |
<h5 class="modal-title" id="exampleModalLabel"https://webdesign.tutsplus.com/> |
7 |
Your API Key remains stored locally in your browser |
8 |
</h5>
|
9 |
</div>
|
10 |
<div class="modal-body"https://webdesign.tutsplus.com/> |
11 |
<div class="form-group"https://webdesign.tutsplus.com/> |
12 |
<label for="apikey"https://webdesign.tutsplus.com/>API KEY</label> |
13 |
<input type="text" class="form-control" id="apikey" /> |
14 |
</div>
|
15 |
</div>
|
16 |
<div class="modal-footer"https://webdesign.tutsplus.com/> |
17 |
<button
|
18 |
type="button" |
19 |
class="btn btn-secondary" |
20 |
data-bs-dismiss="modal" |
21 |
>
|
22 |
Close |
23 |
</button>
|
24 |
<button type="button" class="btn btn-primary"https://webdesign.tutsplus.com/>Save</button> |
25 |
</div>
|
26 |
</div>
|
27 |
</div>
|
28 |
</div>
|
29 |
</div>
|
مدال شامل عناصر زیر است:
- یک گفتگوی مودال که اطمینان می‌دهد مدال در مرکز صفحه قرار دارد
- محتوای مدال شامل یک متن ورودی برای وارد کردن کلید API، یک دکمه برای ذخیره کلید و یک دکمه بستن است که مدال را از صفحه حذف می‌کند.
بخش اصلی برنامه ما
حال بیایید ساخت بخش اصلی برنامه را شروع کنیم. بخش اصلی شامل عناصر زیر خواهد بود
- TextInput: این فیلد ورودی در اعلان کاربر قرار می گیرد. اعلان تصویری را که می خواهند ایجاد کنند، توصیف می کند، به عنوان مثال، یک گربه در حال تعقیب موش.
- دکمه: این دکمه با کلیک کردن، فرآیند تولید تصویر را آغاز می کند.
- آلبوم عکس: نمایش نمونه تصاویری که قبلا توسط DALLE تولید شده بود تا قابلیت های آن را به نمایش بگذارد.
یک ظرف بوت استرپ ایجاد کنید که عناصر زیر را در خود جای دهد:
1 |
<div class="container mt-5"https://webdesign.tutsplus.com/> |
2 |
<!--input text-->
|
3 |
<!--button-->
|
4 |
<!--galletry-->
|
5 |
</dvi>
|
بیایید با اضافه کردن یک هدر در بالای صفحه با عنوان “AI Image Generator” و توضیحاتی در مورد برنامه شروع کنیم.
1 |
<header class="mt-5"https://webdesign.tutsplus.com/> |
2 |
<h1 class="text-center"https://webdesign.tutsplus.com/>AI Image Generator</h1> |
3 |
<p class="lead text-center"https://webdesign.tutsplus.com/> |
4 |
Bring your vision to life with Generative AI. Simply describe what you |
5 |
want to see! |
6 |
</p>
|
7 |
</header>
|
فرم
سپس فرمی را اضافه کنید که حاوی متن ورودی و دکمه تولید باشد.
1 |
<section class="mt-5"https://webdesign.tutsplus.com/> |
2 |
<form id="generate-form"https://webdesign.tutsplus.com/> |
3 |
<div class="row"https://webdesign.tutsplus.com/> |
4 |
<div class="col-md-9"https://webdesign.tutsplus.com/> |
5 |
<div class="form-group"https://webdesign.tutsplus.com/> |
6 |
<input
|
7 |
type="text" |
8 |
class="form-control py-2 pb-2" |
9 |
id="prompt" |
10 |
placeholder="A cartoon of a cat catching a mouse" |
11 |
/>
|
12 |
</div>
|
13 |
</div>
|
14 |
<div class="col-md-3"https://webdesign.tutsplus.com/> |
15 |
<div class="form-group"https://webdesign.tutsplus.com/> |
16 |
<button type="submit" class="btn btn-primary btn-lg" id ="generate"https://webdesign.tutsplus.com/> |
17 |
Generate Image |
18 |
</button>
|
19 |
</div>
|
20 |
</div>
|
21 |
</div>
|
22 |
</form>
|
23 |
</section>
|
طرح‌بندی تضمین می‌کند که متن ورودی 3/4 کل فضا را پوشش می‌دهد تا فضای کافی برای درخواست فراهم شود، و دکمه در سمت راست قرار می‌گیرد تا فضای باقی‌مانده را اشغال کند.
اسپینر
در مرحله بعد، یک اسپینر اضافه کنید که زمانی که یک تصویر تولید می شود نشان داده شود.
1 |
<!-- spinner -->
|
2 |
<div class="spinner-border text-danger" role="status" id="spinner"https://webdesign.tutsplus.com/> |
3 |
<span class="visually-hidden"https://webdesign.tutsplus.com/>Loading...</span> |
4 |
</div>
|
گالری تصاویر
بخش آخر شامل چند تصویر تولید شده توسط مدل DALL-E است.
1 |
<!-- Generated Images -->
|
2 |
<section class=" container mt-5"https://webdesign.tutsplus.com/> |
3 |
<div class="row justify-content-center" id="gallery"https://webdesign.tutsplus.com/> |
4 |
|
5 |
<!--generated images will go here-->
|
6 |
|
7 |
</div>
|
8 |
</section>
|
برای نمایش پویا تصاویر از جاوا اسکریپت استفاده می کنیم. ظرف گالری همچنین برای نمایش تصویر تولید شده از یک اعلان استفاده خواهد شد.
یک ظاهر طراحی با CSS
علاوه بر چارچوب بوت استرپ، چند کلاس CSS سفارشی نیز اضافه خواهیم کرد:
1 |
@import url("https://fonts.googleapis.com/css2?family=DM+Mono:ital,wght@0,300;0,400;0,500;1,300;1,400;1,500&display=swap"); |
2 |
|
3 |
body { |
4 |
font-family: "DM Mono"https://webdesign.tutsplus.com/, monospace; |
5 |
}
|
6 |
h1 { |
7 |
font-weight: 900; |
8 |
}
|
9 |
p { |
10 |
font-weight: 500; |
11 |
}
|
12 |
.message, |
13 |
#spinner { |
14 |
display: none; |
15 |
}
|
در اینجا، ما از یک فونت سفارشی از فونت های گوگل استفاده می کنیم و همچنین عنصر پیام و اسپینر را به صورت پیش فرض مخفی کرده ایم.
عملکرد جاوا اسکریپت
در مورد رفتار! اولین کاری که می‌خواهیم انجام دهیم اضافه کردن قابلیتی است که به کاربران امکان می‌دهد کلید API خود را به حافظه محلی اضافه کنند. ما از jQuery برای باز و بسته کردن modal استفاده خواهیم کرد.
ما قبلا داریم data-bs-target="#KeyModal" بر روی افزودن کلید API دکمه، که مدال را باز می کند. در حال حاضر، ما برای گوش دادن به shown.bs.modal رویداد. این shown.bs.modal یک قابلیت بوت استرپ برای دیالوگ های مدال است که پس از نمایش مدال به کاربر فعال می شود.
1 |
$("https://webdesign.tutsplus.com/#KeyModal"https://webdesign.tutsplus.com/).on("https://webdesign.tutsplus.com/shown.bs.modal"https://webdesign.tutsplus.com/, function () { |
2 |
// get api key from user and save to local storage
|
3 |
|
4 |
});
|
در داخل تابع شنونده رویداد، اجزای مدال را دریافت می کنیم که شامل ورودی متن و یک دکمه است.
1 |
$("https://webdesign.tutsplus.com/#KeyModal"https://webdesign.tutsplus.com/).on("https://webdesign.tutsplus.com/shown.bs.modal"https://webdesign.tutsplus.com/, function () { |
2 |
const saveButton = document.querySelector("https://webdesign.tutsplus.com/#KeyModal .btn-primary"https://webdesign.tutsplus.com/); |
3 |
const apiKeyInput = document.querySelector("https://webdesign.tutsplus.com/#apikey"https://webdesign.tutsplus.com/); |
4 |
});
|
دکمه ذخیره شنونده رویداد
در مرحله بعد، شنونده رویداد را به دکمه ذخیره مدال اضافه می کنیم. در داخل تابع شنونده رویداد، مقدار API KEY را دریافت می کنیم، آن را در حافظه محلی ذخیره می کنیم و سپس مدال را می بندیم.
1 |
$("#KeyModal").on("shown.bs.modal", function () {
|
2 |
const saveButton = document.querySelector("#KeyModal .btn-primary");
|
3 |
const apiKeyInput = document.querySelector("#apikey");
|
4 |
|
5 |
saveButton.addEventListener("click", function () {
|
6 |
const apiKeyValue = apiKeyInput.value; |
7 |
localStorage.setItem("API_KEY", apiKeyValue);
|
8 |
$("#KeyModal").modal("hide");
|
9 |
}); |
10 |
}); |
DALL-E 3
OpenAI دو مدل برای تولید متن به تصویر ارائه می دهد، DALL·E 3 و DALL·E 2. ما از جدیدترین مدل DALLE3 استفاده می کنیم.
DALL-E 3 جدید است مدرن متن به مولد تصویر که هنگام تولید تصاویر به متن ارائه شده کاملاً پایبند است.
در حالی که برای استفاده از DALL-E 3 لازم نیست در مهندسی سریع متخصص باشید، اعلان های بهتر نتایج بهتری ایجاد می کنند.
کلید API را دریافت کنید
برای به دست آوردن یک کلید API، به یک حساب OpenAI نیاز دارید. به وب سایت OpenAI بروید و یک حساب کاربری ایجاد کنید. پس از ورود به سیستم، این صفحه را مشاهده خواهید کرد.
در سمت چپ بالا، روی نماد کلیدهای API کلیک کنید و به صفحه ای هدایت می شوید که می توانید کلید API خود را ایجاد کنید.
هنگامی که کلید API خود را ایجاد کردید، مطمئن شوید که آن را کپی کنید زیرا دیگر نشان داده نخواهد شد.
نحوه استفاده از DALL-E 3
مدل DALL·E 3 به توسعه دهندگان اجازه می دهد تا با استفاده از این نقطه پایانی API تصاویر را از متن تولید کنند.
1 |
https://api.openai.com/v1/images/generations |
نقطه پایانی API به شما امکان می دهد تصاویر استاندارد و با کیفیت HD ایجاد کنید. اگر کیفیت تنظیم نشود، تصاویر استاندارد به طور پیش فرض تولید می شوند و اندازه های تصویر 1024×1024، 1024×1792 یا 1792×1024 پیکسل هستند.
DALL-E 3 به شما امکان می دهد 1 یا چند تصویر (حداکثر 10) درخواست کنید. اگر می‌خواهید بیش از 1 تصویر درخواست کنید، می‌توانید با درخواست‌های موازی این کار را انجام دهید.
1 |
curl https://api.openai.com/v1/images/generations \
|
2 |
-H "Content-Type: application/json" \ |
3 |
-H "Authorization: Bearer $OPENAI_API_KEY" \ |
4 |
-d '{ |
5 |
"model": "dall-e-3",
|
6 |
"prompt": "a red cat",
|
7 |
"n": 1,
|
8 |
"size": "1024x1024"
|
9 |
}
|
همانطور که در بالا می بینید، نقطه پایانی API از شما می خواهد که هدرهای زیر را در درخواست خود بگنجانید:
-
Content-Typeتنظیم کنیدapplication/json -
Authorizationتنظیم کنیدBearerو سپس کلید OpenAI API شما
داده های ارسال شده در درخواست شامل موارد زیر خواهد بود:
-
modelمدلی است که برای تولید یک تصویر استفاده می شود -
prompt– این متن یا شرح تصویری است که می خواهید ایجاد کنید. -
nیک عدد صحیح است که تعداد تصاویر تولید شده را مشخص می کند. -
sizeاندازه تصویر بر حسب پیکسل است
تولید تصویر
گام بعدی تولید یک تصویر از اعلان ارائه شده توسط کاربر است. برای انجام این کار، شنونده رویداد را به فرم تولید اضافه می کنیم. هنگامی که فرم ارسال شد، آن را بازیابی می کند prompt از کاربر، کلید API را از حافظه محلی دریافت کنید و با دیگری تماس بگیرید تابع (fetchImage()) که به نوبه خود یک تصویر تولید می کند.
اما ابتدا، بیایید عناصر لازم را از DOM دریافت کنیم:
1 |
const message = document.getElementById("https://webdesign.tutsplus.com/message"https://webdesign.tutsplus.com/); |
2 |
const generateForm = document.getElementById("https://webdesign.tutsplus.com/generate-form"https://webdesign.tutsplus.com/); |
3 |
const spinner = document.getElementById("https://webdesign.tutsplus.com/spinner"https://webdesign.tutsplus.com/); |
در مرحله بعد، یک شنونده رویداد اضافه می کنیم که رویداد ارسال شده را از فرم گوش می دهد.
1 |
generateForm.addEventListener("https://webdesign.tutsplus.com/submit"https://webdesign.tutsplus.com/, function (e) { |
2 |
e.preventDefault(); |
3 |
// get prompt
|
4 |
// get api key
|
5 |
// perform validation
|
6 |
// call fetchImage() function
|
7 |
|
8 |
});
|
در داخل تابع شنونده رویداد، کد را به صورت زیر به روز کنید:
1 |
generateForm.addEventListener("https://webdesign.tutsplus.com/submit"https://webdesign.tutsplus.com/, function (e) { |
2 |
e.preventDefault(); |
3 |
const promptInput = document.getElementById("https://webdesign.tutsplus.com/prompt"https://webdesign.tutsplus.com/); |
4 |
const prompt = promptInput.value; |
5 |
const key = localStorage.getItem("https://webdesign.tutsplus.com/API_KEY"https://webdesign.tutsplus.com/); |
6 |
console.log(key); |
7 |
|
8 |
if (!prompt) { |
9 |
displayMessage("https://webdesign.tutsplus.com/Please enter a prompt"https://webdesign.tutsplus.com/); |
10 |
return; |
11 |
}
|
12 |
if (!key) { |
13 |
displayMessage( |
14 |
"https://webdesign.tutsplus.com/Please add your API KEY, The Key will be store locally on your browser" |
15 |
);
|
16 |
return; |
17 |
} else { |
18 |
fetchImage(prompt, key); |
19 |
|
20 |
}
|
21 |
});
|
در کد به روز شده، پس از فعال شدن رویداد ارسال توسط فرم، درخواست را از کاربر و کلید API را از حافظه محلی دریافت می کنیم. اگر کاربر درخواستی ارائه نکرده باشد، پیامی را نمایش می‌دهیم که از کاربر می‌خواهد آن را وارد کند.
به طور مشابه، اگر کلید API وجود نداشته باشد، از کاربر می خواهیم که کلید API خود را اضافه کند، اگر هر دو کلید API وجود داشته باشند، ما آن را فراخوانی می کنیم. fetchImage تابع و اعلان و مقادیر API KEY را به عنوان آرگومان ارسال کنید
fetchImage() تابعی است که از نقطه پایانی API DALL-E 3 برای تولید یک تصویر بر اساس درخواست کاربر استفاده می کند.
این displayMessage() تابع به شکل زیر است:
1 |
function displayMessage(msg) { |
2 |
message.textContent = msg; |
3 |
message.style.display = "https://webdesign.tutsplus.com/block"https://webdesign.tutsplus.com/; |
4 |
setTimeout(function () { |
5 |
message.style.display = "https://webdesign.tutsplus.com/none"https://webdesign.tutsplus.com/; |
6 |
}, 3000); |
7 |
}
|
ما محتوای عنصر هشدار را روی پیام رویداد فرم تنظیم می کنیم. این setTimeout تابع تضمین می کند که عنصر پیام پس از 3 ثانیه پنهان می شود.
تابع fetchImage
بعد، بیایید ایجاد کنیم fetchImage تابع، که یک تابع همگام خواهد بود. را خواهد گرفت prompt و API_KEY به عنوان پارامتر
1 |
const fetchImage = async (prompt, API_KEY) => { |
2 |
|
3 |
}
|
در داخل تابع، نقطه پایانی API را تعریف می کنیم و هدرها و داده های مورد نیاز API را در متغیری به نام ذخیره می کنیم. options.
شی گزینه شامل:
- روش HTTP
- سرصفحه برای نوع محتوا و مجوز.
- بدنه (رشته JSON حاوی مدل، دستور، n (تعداد تصاویر) و اندازه تصویر.
1 |
const url = "https://webdesign.tutsplus.com/https://api.openai.com/v1/images/generations"https://webdesign.tutsplus.com/; |
2 |
const options = { |
3 |
method: "https://webdesign.tutsplus.com/POST"https://webdesign.tutsplus.com/, |
4 |
headers: { |
5 |
"https://webdesign.tutsplus.com/content-type"https://webdesign.tutsplus.com/: "https://webdesign.tutsplus.com/application/json"https://webdesign.tutsplus.com/, |
6 |
Authorization: `Bearer ${API_KEY}`, |
7 |
},
|
8 |
body: JSON.stringify({ |
9 |
model: "https://webdesign.tutsplus.com/dall-e-3"https://webdesign.tutsplus.com/, |
10 |
prompt: prompt, |
11 |
n: 1, |
12 |
size: "https://webdesign.tutsplus.com/1024x1024"https://webdesign.tutsplus.com/, |
13 |
}),
|
14 |
};
|
در مرحله بعد، در داخل یک بلوک try، یک درخواست POST را با استفاده از fetch API انجام می‌دهیم url و options هدف – شی. در حالی که واکشی اتفاق می افتد، ما بلافاصله اسپینر را نمایش می دهیم.
سپس پاسخ را بررسی می کنیم و اگر موفقیت آمیز نبود (!response.ok) ، پیغام خطا را به کاربر نمایش می دهیم و سپس برای جلوگیری از اجرای بیشتر از تابع خارج می شویم.
1 |
const fetchImage = async (prompt, API_KEY) => { |
2 |
const url = "https://webdesign.tutsplus.com/https://api.openai.com/v1/images/generations"https://webdesign.tutsplus.com/; |
3 |
const options = { |
4 |
method: "https://webdesign.tutsplus.com/POST"https://webdesign.tutsplus.com/, |
5 |
headers: { |
6 |
"https://webdesign.tutsplus.com/content-Type"https://webdesign.tutsplus.com/: "https://webdesign.tutsplus.com/application/json"https://webdesign.tutsplus.com/, |
7 |
Authorization: `Bearer ${API_KEY}`, |
8 |
},
|
9 |
body: JSON.stringify({ |
10 |
model: "https://webdesign.tutsplus.com/dall-e-3"https://webdesign.tutsplus.com/, |
11 |
prompt: prompt, |
12 |
n: 1, |
13 |
size: "https://webdesign.tutsplus.com/1024x1024"https://webdesign.tutsplus.com/, |
14 |
}),
|
15 |
};
|
16 |
|
17 |
try { |
18 |
spinner.style.display = "https://webdesign.tutsplus.com/block"https://webdesign.tutsplus.com/; |
19 |
const response = await fetch(url, options); |
20 |
|
21 |
if (!response.ok) { |
22 |
const error = await response.json(); |
23 |
const message = error.error.message ? error.error.message : "https://webdesign.tutsplus.com/Failed to fetch image"https://webdesign.tutsplus.com/; |
24 |
displayMessage(message); |
25 |
return; |
26 |
}
|
27 |
|
28 |
|
29 |
} catch (error) { |
30 |
|
31 |
}finally { |
32 |
|
33 |
}
|
34 |
};
|
در صورت موفقیت آمیز بودن پاسخ، داده های JSON را به صورت ناهمزمان از شی پاسخ دریافت کرده و در متغیری به نام ذخیره می کنیم. result.
1 |
const result = await response.json(); |
به عنوان مثال، دستور “a blue cat” این شی را برمی گرداند. آدرس اینترنتی کوتاه شده است
1 |
{
|
2 |
"created": 1713625375, |
3 |
"data": ( |
4 |
{
|
5 |
"revised_prompt": "Imagine a cat with the most unique color you can |
6 |
think of - a brilliant shade of dark cerulean. This is no ordinary |
7 |
cat. Picture this feline lounging in the midday sun, its fur |
8 |
shimmering in the light. The color is an almost surreal hue, |
9 |
rich and saturated, as if pulled straight from a painter's palette. |
10 |
The cat's eyes are a contrasting emerald green, watching the world |
11 |
with a wise but relaxed gaze. Imagine the blue cat's body shape, |
12 |
muscular and agile, made for speedy pursuits and stealthy approaches. |
13 |
Now, consider how this splendid creature would look in its natural habitat.", |
14 |
"url": "https://oaidalleapiprodscus.blob.core.windows.net/private/org-..." |
15 |
} |
16 |
) |
17 |
} |
این داده ها همچنین شامل یک revised_prompt است که DALL-E 3 از آن برای اصلاح فرآیند تولید تصویر استفاده کرد. از شی دریافتی، می‌توانیم دریافت کنیم url از تصویر و ارسال آن به یک تابع دیگر displayImage()، که آن را در صفحه وب به کاربر نمایش می دهد.
1 |
const imageUrl = result.data(0).url |
2 |
displayImage(imageUrl); |
کار بعدی که می خواهیم انجام دهیم این است که آدرس تصویر را به تابعی به نام ارسال کنیم displayImage().
1 |
const imageUrl = result.data(0).url |
2 |
displayImage(imageUrl); |
در بلوک catch، با نمایش یک پیغام خطای مناسب به کاربر، استثناهایی را که ممکن است در حین عملیات واکشی رخ دهد، کنترل می کنیم.
بلوک نهایی بدون توجه به نتیجه درخواست واکشی اجرا می شود. بنابراین، بدون توجه به موفقیت آمیز بودن درخواست، مکان خوبی برای اطمینان از پنهان شدن اسپینر است.
1 |
catch (error) { |
2 |
console.error(error); |
3 |
displayMessage("https://webdesign.tutsplus.com/There was an error , try again"https://webdesign.tutsplus.com/); |
4 |
}finally { |
5 |
spinner.style.display = "https://webdesign.tutsplus.com/none"https://webdesign.tutsplus.com/; |
6 |
}
|
عملکرد displayImage
این displayImage() تابع به شکل زیر خواهد بود:
1 |
function displayImage(image) { |
2 |
|
3 |
const imageMarkup = ` |
4 |
<div class="row justify-content-center">
|
5 |
<div class="col d-flex justify-content-center">
|
6 |
<img src="https://webdesign.tutsplus.com/${image}" class="img-fluid" alt="Placeholder Image"> |
7 |
</div>
|
8 |
</div>`; |
9 |
|
10 |
imageGallery.innerHTML = imageMarkup; |
11 |
spinner.style.display = "https://webdesign.tutsplus.com/none"https://webdesign.tutsplus.com/; |
12 |
}
|
بیایید آن را تجزیه کنیم،
ابتدا، ما نشانه گذاری HTML را برای تعیین یک ستون Bootstrap پاسخگو ایجاد می کنیم و آن را تنظیم می کنیم src ویژگی تگ img به تصویر تولید شده url. سپس، این نشانه گذاری را به داخل تزریق می کنیم imageGallery ظرف
مرحله آخر نمایش برخی از تصاویر تولید شده توسط DALL-E 3 به عنوان یک گالری است تا زمانی که کاربران برای اولین بار برنامه را باز می کنند، تصاویر قابلیت های برنامه را به نمایش بگذارند.
ابتدا بیایید تصاویر را در یک آرایه ذخیره کنیم:
1 |
const images = ( |
2 |
"https://webdesign.tutsplus.com/https://essykings.github.io/JavaScript/image%207.png"https://webdesign.tutsplus.com/, |
3 |
"https://webdesign.tutsplus.com/https://essykings.github.io/JavaScript/image1.png"https://webdesign.tutsplus.com/, |
4 |
"https://webdesign.tutsplus.com/https://essykings.github.io/JavaScript/image2.png"https://webdesign.tutsplus.com/, |
5 |
"https://webdesign.tutsplus.com/https://essykings.github.io/JavaScript/image3.png"https://webdesign.tutsplus.com/, |
6 |
"https://webdesign.tutsplus.com/https://essykings.github.io/JavaScript/image9.png"https://webdesign.tutsplus.com/, |
7 |
"https://webdesign.tutsplus.com/https://essykings.github.io/JavaScript/image5.png"https://webdesign.tutsplus.com/, |
8 |
"https://webdesign.tutsplus.com/https://essykings.github.io/JavaScript/image6.png"https://webdesign.tutsplus.com/, |
9 |
"https://webdesign.tutsplus.com/https://essykings.github.io/JavaScript/cat.png"https://webdesign.tutsplus.com/, |
10 |
);
|
بعد از آن استفاده خواهیم کرد map() روش تکرار روی تصاویر برای هر تصویر، مقدار را تنظیم می کنیم src ویژگی یک <img> عنصر را به URL تصویر و سپس آن را به ظرف گالری تصاویر اضافه کنید.
در نهایت ما را فراخوانی خواهیم کرد displayImages() تابع.
1 |
function displayImages() { |
2 |
const imageMarkup = images |
3 |
.map((image) => { |
4 |
return ` |
5 |
<div class="col-12 col-sm-6 col-md-3 mb-4 position-relative" id ="image-container ">
|
6 |
<img src="https://webdesign.tutsplus.com/${image}" class="img-fluid" alt="Placeholder Image"> |
7 |
</div>
|
8 |
`; |
9 |
})
|
10 |
.join(""https://webdesign.tutsplus.com/); |
11 |
|
12 |
imageGallery.innerHTML = imageMarkup; |
13 |
}
|
14 |
|
15 |
displayImages(); |
نسخه ی نمایشی نهایی
ما آن را انجام دادیم! برنامه ما کاملاً کاربردی است!
نتیجه
این آموزش نحوه ساخت اپلیکیشن تولید تصویر با هوش مصنوعی را شرح داده است. این برنامه در زمینه های مختلفی مانند آموزش ایجاد تصاویر، بازی برای ایجاد تصاویر بصری و غیره قابل استفاده است. امیدوارم از آن لذت برده باشید!
منبع: https://webdesign.tutsplus.com/create-your-own-ai-image-generator-app-with-javascript-and-dall-e-3–cms-108670t