چیزی که من ساختم
Supaheroes، یک پلتفرم مبتنی بر هوش مصنوعی که بیوگرافی شخصیت‌های بازی‌ها، کمیک‌ها و فیلم‌ها را ایجاد می‌کند. فقط نام کاراکتر را وارد کنید تا هوش مصنوعی داستان زندگی مفصلی را با نقاط قوت، ضعف و ویژگی ها (مانند هوش و چابکی) کامل کند. علاوه بر این، هوش مصنوعی به هوش مصنوعی دیگری دستور می دهد تا سه تصویر از شخصیت را ایجاد کند. این همکاری قدرتمند به شخصیت های محبوب ما روح می بخشد!
ارسال دسته:
- بهترین پروژه کلی
- از نظر بصری دلپذیرترین
- فنی ترین چشمگیر
- بهترین پروژه ساخته شده با استفاده از Supabase به عنوان ارائه دهنده اصلی داده برای برنامه پالایش.
- بهترین پروژه ساخته شده با استفاده از Material UI به عنوان چارچوب اصلی UI برای برنامه پالایش.
لینک برنامه
ادمین: http://3.14.15.191:4173
سایت اصلی: http://3.14.15.191:3000
اسکرین شات ها
لیست مدیریت
خلق شخصیت
ویرایش کاراکتر
نمای شخصیت
لیست کاراکتر هاتسایت
جزئیات کاراکتر هاتسایت
شرح
ایده من بسیار پیچیده تر از این بود، اما با نزدیک شدن به ضرب الاجل، ناامیدی شروع شد، بنابراین من آن را بسیار ساده تر کردم. این 3 روز گذشته بسیار مهم بود زیرا من حدود 19 ساعت در روز را برای اتمام به موقع اختصاص دادم. در زیر، فناوری های مورد استفاده را شرح می دهم.
سوپا بیس:
نام Supaheroes نه تنها از Supabase الهام گرفته شده است، بلکه از منابع پایگاه داده آن نیز استفاده کرده است. ماژول احراز هویت ارائه شده توسط پلتفرم فوق العاده مفید بود، زیرا نیازی به نگرانی زیادی در مورد احراز هویت، جلسات، بازیابی رمز عبور و تنظیم مجدد نداشتم. همه چیز با توجه به منابع ارائه شده پلتفرم به سرعت اجرا شد. من همچنین از ویژگی ذخیره سازی برای آپلود تصاویر شخصیت استفاده کردم که فوق العاده آسان بود. این اولین باری بود که از Supabase استفاده می کردم، و معلوم شد که کاملاً ساده است. مستنداتشون عالیه
پالودن:
با Refine Framework، قسمت جلویی پنل مدیریت را برای گنجاندن، ویرایش و حذف کاراکتر، همراه با احراز هویت، بازیابی رمز عبور و بازنشانی ایجاد کردم. فرآیند تولید بوت استرپ پروژه از طریق وب سایت Refine بسیار عالی بود و در وقت من صرفه جویی زیادی کرد. من بوت استرپ را با Vite، MUI، REST API و احراز هویت سفارشی سفارشی کردم. در ابتدا، مقدار دیگ بخار تولید شده بسیار زیاد است، اما با پشتکار، آزمایش و کمک مستندات، به تدریج متوجه شدم که چارچوب چگونه کار می کند. به طور کلی، شگفت آور است که چقدر سریع می توانیم یک پنل مدیریت را راه اندازی کنیم. فکر می‌کنم پنل مدیریت را در 2 روز تکمیل کردم، زیرا مدتی را صرف ایجاد جذابیت بصری در نسخه‌های محتوا کردم، زیرا فیلدهای ایجاد شده به طور خودکار مفید هستند اما بهترین UX را ارائه نمی‌دهند. مدتی طول کشید تا منابع و ارائه دهندگان داده را درک کنم، اما در نهایت همه چیز درست شد. من ورود به سیستم را با احراز هویت Supabase یکپارچه کردم، از جمله ویژگی‌های «رمز عبور را فراموش کرده‌ام» و «بازنشانی رمز عبور». کاراکتر CRUD با یک API توسعه یافته در NestJS ارتباط برقرار می کند.
NestJS:
کل باطن در NestJS توسعه داده شده است، بنابراین داده‌های مدیر و هاتسایت توسط این API NestJS تولید می‌شوند. حتی اگر می‌توانستم از کلاینت Supabase در قسمت جلوی پنل مدیریت برای احراز هویت استفاده کنم، تصمیم گرفتم همه چیز را در NestJS برای کنترل متمرکز انجام دهم.
چالش برانگیزترین بخش باطن تولید و آزمایش دستورات برای اطلاعات کاراکترها بود. برای تولید اطلاعات کاراکتر، من از OpenAI API همراه با بسته گره به نام chatgpt استفاده کردم. ChatGpt کار کردن با آن بسیار چالش برانگیز بود. خیلی وقت ها نمی توانست شخصیت را پیدا کند (در واقع، صادقانه بگویم، هنوز هم نمی تواند برخی از آنها را پیدا کند)، و گاهی اوقات به جای آنچه من خواسته بودم، توضیحات غیر ضروری ارائه می داد. برای تولید تصاویر، از REST API DreamStudio.ai استفاده کردم که استفاده از آن بدون دردسر بود.
هات سایت:
هاتسایت برای نمایش کاراکترها با استفاده از Remix و MUI ساخته شده است و داده‌ها از طریق API ایجاد شده در NestJS تغذیه می‌شوند.
MUI:
در مورد MUI چه می توانم بگویم؟ استفاده از آن همیشه لذت بخش است. کیفیت و تنوع قطعات قابل توجه است. با تلاش بسیار کم، می توان رابط های بسیار جذابی ایجاد کرد. من از MUI برای پنل مدیریت با Refine و همچنین برای Hotsite برای نمایش کاراکترها استفاده کردم. همه اجزای رابط Hotsite از MUI هستند، از جمله شبکه تصویر در صفحه اصلی Hotsite.
من از AWS، Docker و Ansible برای استقرار سرور استفاده کردم.
پیوند به کد منبع
https://github.com/lvisb/versus-heroes
مجوز مجاز
با
پس زمینه (چه چیزی باعث شد تصمیم به ساخت این برنامه خاص بگیرید؟ چه چیزی الهام بخش شما شد؟)
هنگام تماشای ویدیویی درباره ابرقهرمانان، این ایده به ذهنم خطور کرد. در ابتدا، چیزی پیچیده‌تر را تصور می‌کردم – یک سیستم تولید شده توسط هوش مصنوعی که می‌توانست قهرمان در مقابل قهرمان، شرور در مقابل شرور، و قهرمان در برابر شرور را با هم مقایسه کند. هوش مصنوعی بر اساس ویژگی‌ها، ضعف‌ها و نقاط قوت شخصیت‌ها، نظر خود را در مورد اینکه چه کسی برنده خواهد شد، اعلام می‌کند. با این حال، با گذشت زمان، مجبور شدم آن را به طور قابل توجهی ساده کنم.
چگونه آن را ساختم (چگونه از پالایش استفاده کردید؟ آیا در طول مسیر چیز جدیدی یاد گرفتید؟ مهارت جدیدی را انتخاب کردید؟)
Refine به عنوان قسمت جلویی پنل مدیریت استفاده می‌شد و ساده‌ترین بخش این فرآیند بود. من به سرعت از یک پروژه خالی به یک پروژه اساسی با تقریبا CRUD آماده رفتم. سپس، به تدریج آن را برای مطابقت با ترجیحات خود اصلاح کردم. من مجبور شدم در مورد React Query اطلاعات بیشتری کسب کنم زیرا فریم ورک به طور گسترده از آن استفاده می کند. من همچنین ذهنیت توسعه دهندگان فریم ورک را بررسی کردم تا بفهمم چگونه آنها به ویژگی های خاص نزدیک می شوند. من از منابع، ارائه دهندگان داده، قلاب ها، علاوه بر رابط پنل مدیریت پایه و اجزای ارائه شده استفاده کردم.
منابع/اطلاعات اضافی
می توانید برای ایجاد شخصیت های خود در ادمین ثبت نام کنید.
از فرصتی که در اختیار شما قرار دادید متشکرم، بسیار چالش برانگیز بود.
