آموزش ساخت ربات چت صوتی ChatGPT AI با ترکیب React و FAST API

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

مقدمه و منابع Introduction and Resources

• آنچه ما در حال ساختن What We Are Building

• درباره مربی شما About Your Instructor

• ساختار دوره Course Structure

• انتظار در مقابل واقعیت Expectation vs Reality

• Tech Stack - Backend Tech Stack - Backend

• Tech Stack - Frontend Tech Stack - Frontend

• پشته فناوری - یک ظاهر طراحی شده Tech Stack - Styling

• منابع بسته کد CODE Package Resources

• دستورالعمل های منابع Resource Instructions

• هشدار: تاخیر گاه به گاه OpenAI API WARNING: OpenAI API Occasional Delay

اضافی: (اختیاری) - React Crash Course Extra: (OPTIONAL) - React Crash Course

• باید خواند شود MUST READ

• دانش جاوا اسکریپت خود را تست کنید Test Your Javascript Knowledge

• با Vite برنامه React ایجاد کنید Create React App with Vite

• Tailwind را نصب کنید Install Tailwind

• آنچه ما در حال ساختن What We Are Building

• اولین جزء شما Your First Component

• چه اتفاقی افتاده What Just Happened

• خواندن اختیاری - بیشتر در مورد فنی پشت صحنه Optional Reading - More On Technical Behind the Scenes

• طراحی اولین دکمه ما Styling Our First Button

• اجرای وظیفه والدین از کودک (گذراندن وسایل) Running a Parent Function From a Child (Passing Props)

• نظارت بر وضعیت و کنترل عوارض جانبی با useEffect Monitor State and Handle Side Effects with useEffect

• ساختار BetBox BetBox Structuring

• افزودن قابلیت BetButton Adding BetButton Functionality

• URL سازمان تصادفی Random Org URL

• درخواست واکشی Axios را ارسال کنید Send Axios Fetch Request

• به روز رسانی های نهایی و کارهای پایانی Final Updates and Finishing Touches

• React Learning مراحل بعدی React Learning Next Steps

تنظیم محیط - Frontend و Backend Environment Setup - Frontend and Backend

• توصیه و پلاگین کد VS VS Code Recommendation and Plugins

• راه اندازی پوشه Folder Setup

• بررسی نصب نسخه پایتون و نود Python and Node Version Installation Checks

• FastAPI Python Backend آماده سازی و نصب بسته FastAPI Python Backend Preparation and Package Installations

• اسکریپت JSON Frontend Frontend JSON Script

• React Frontend Preparation and Package Installations React Frontend Preparation and Package Installations

• یکپارچه سازی Tailwind CSS Tailwind CSS Integration

• کلیدهای API API Keys

• تنظیم متغیرهای محیطی Setting Up Environment Variables

Backend Build - کار با هوش مصنوعی Backend Build - Working with AI

• نکته مهم - گوگل کروم Important Note - Google Chrome

• ابتدایی سازی Backend با واردات و CORS Backend Initialisation with Imports and CORS

• درباره Docs و Endpoints About Docs and Endpoints

• ضبط قطعه صوتی Record Voice Snippet

• تبدیل صدا به متن با Whisper Convert Voice to Text with Whisper

• مهندسی سریع ChatGPT Prompt Engineering ChatGPT

• در حال دریافت پاسخ ChatGPT Receiving ChatGPT Response

• ذخیره و بازنشانی داده های پیام Store and Reset Message Data

• یازده آزمایشگاه API Docs Walkthrough Eleven Labs API Docs Walkthrough

• دادن صدایی انسانی به راشل Giving Rachel a Human Sounding Voice

• بحث آماده سازی و عیب یابی Frontend Frontend Preparation and Troubleshooting Discussion

Frontend - React Web Application Frontend - React Web Application

• مهم - لطفا بخوانید Important - Please Read

• کامپوننت کنترلر ساختاری Structuring Controller Component

• جزء عنوان - قسمت اول (عملکرد بازنشانی) Title Component - Part I (Reset Function)

• جزء عنوان - قسمت دوم (تکمیل رندر) Title Component - Part II (Render Completion)

• کانتینر ضبط کنترلر Controller Recorder Container

• افزودن قابلیت ضبط صدا Adding Audio Recording Functionality

• متحرک سازی یک نماد رکورد Animating a Record Icon

• پخش صدا و کدگذاری Blob Playing Back Audio and Blob Encoding

• سلام راشل Hello Rachel

• تعامل کامل با کاربر و تنظیمات Full User Interaction and Tweaking

• آماده سازی تولید Making Production Ready

مراحل بعدی Next Steps

• مهندسی سریع و موارد استفاده بیشتر Further Prompt Engineering and Use Cases

• اختلاف و پیوندها Discord and Links

• مراحل بعدی Next Steps