آموزش با استفاده از React، JavaScript و OpenAI یک تولید کننده تصویر DALL-E بسازید [ویدئو]

سرفصل ها و درس ها

راه اندازی پروژه DALL-E OpenAI DALL-E OpenAI Project Setup

• آنچه ما در این دوره با DALL-E و OpenAI می سازیم What We Are Building with DALL-E and OpenAI in This Course

• Node.js و کد ویژوال استودیو را برای راه اندازی پروژه DALL-E دانلود کنید Download Node.js and Visual Studio Code for DALL-E Project Setup

• Next.js چیست؟ چگونه با npx یک پروژه جدید بسازیم؟ What Is Next.js? How to Make a New Project with npx?

• بررسی اجمالی فایل Next.js Boilerplate برای پروژه اولیه DALL-E ما A Brief Overview of the Next.js File Boilerplate for Our DALL-E Initial Project

• اجرای سرور توسعه Next.js برای پروژه DALL-E Running a Development Server of Next.js for DALL-E Project

ساخت صفحه برنامه تصویری DALL-E DALL-E Image Application Page Build

• Next.Js مبانی برای مبتدیان مطلق Next.Js Basics for Absolute Beginners

• کدگذاری اسکلت برنامه در TSX برای تولید کننده تصویر DALL-E با متن Coding Out the Application Skeleton in TSX for DALL-E Image Generator with Text

• استایل‌سازی و ادغام CSS برای برنامه DALL-E OpenAI ما CSS Styling and Integration for Our DALL-E OpenAI App

• ادغام UX و UI در برنامه DALL-E با CSS UX and UI Integrations into DALL-E App with CSS

نحوه دریافت کلید و پیکربندی DALL-E API OpenAI How to Get a DALL-E API OpenAI Key and Configuration

• ایجاد یک کلید API از OpenAI و ذخیره ایمن متغیرهای Env Generating an API Key from OpenAI and Securely Storing Env Variables

• DALL-E پیاده سازی تصویر را در برنامه OpenAI ما ایجاد کنید DALL-E Create Image Implementation into Our OpenAI Application

• تنظیم پیکربندی کلید OpenAI با Next JS OpenAI Key Configuration Setup with Next JS

• تنظیمات OpenAI و به روز رسانی کد DALL-E API OpenAI Configurations and Updating DALL-E API Code

• Async Await Calls به DALL-E OpenAI API در Next JS Async Await Calls to DALL-E OpenAI API in Next JS

رندر و ایجاد تصاویر با DALL-E در برنامه ما Rendering and Creating Images with DALL-E in Our App

• افزودن حالت تصویر برای مبتدیان با هوک در React برای برنامه DALL-E Adding Image State for Beginners with Hooks in React for DALL-E App

• تنظیم API DALL-E Image Data در برنامه Setting API DALL-E Image Data in the Application

• به روز رسانی پویا ایجاد تصویر با DALL-E و OpenAI Dynamically Updating Image Creation with DALL-E and OpenAI

• بهینه سازی برنامه React با بارگذاری برای واکشی API در OpenAI DALL-E Optimizing a React App with Loading for API Fetches to OpenAI DALL-E

طراحی برنامه مبتنی بر DALL-E و بهبود تجربه کاربر Styling the DALL-E-Based Application and User Experience Enhancements

• بهینه سازی تصاویر پیشرو با DALL-E در React با JavaScript Fundamental Al Optimizing Leading Images with DALL-E in React with JavaScript Fundamental Al

• ایجاد انیمیشن های ریپل با CSS برای بارگذاری تصاویر DALL-E در React Creating Ripple Animations with CSS for DALL-E Loading Images in React

• قابلیت ارسال پستی برای ارسال تصاویر تولید شده از DALL-E Mailing Feature to Send DALL-E Generated Pictures

استقرار برنامه DALL-E OpenAI با Vercel و GitHub Deploying the DALL-E OpenAI Application with Vercel and GitHub

• GitHub چیست و چرا اهمیت دارد What Is GitHub and Why Does It Matter

• راه اندازی نسخه GitHub Git و دسترسی PAT با فشار Setting Up GitHub Git Version and PAT Access with Pushes

• ارسال کد به GitHub Repo DALL-E OpenAI Pushing Code to GitHub Repo DALL-E OpenAI

• استقرار پروژه DALL-E در تولید با Vercel Deploying the DALL-E Project into Production with Vercel

افزودن انیمیشن ها با Sassy CSS به برنامه DALL-E ما از OpenAI Adding Animations with Sassy CSS to Our DALL-E Application from OpenAI

• مقدمه ای بر SCSS و تنظیم کد انیمیشن Introduction to SCSS and Setting Up Animation Code

• کار با Keyframes برای انیمیشن Working with Keyframes for Animations

• نهایی کردن انیمیشن ها با SCSS برای DALL-E OpenAI Finalizing Animations with SCSS For DALL-E OpenAI