برنامه نویسی

کارت‌های داستانی سرگرم‌کننده، زیبا و قابل چاپ برای کودکان با هوش مصنوعی Cloudflare

این ارسالی برای چالش هوش مصنوعی Cloudflare است.

چیزی که من ساختم

یک تعاملی مبتنی بر هوش مصنوعی “کارت های داستان” Maker به طور خاص برای کودکان طراحی شده است (ما زمانی هم بچه بودیم 😉). این برنامه وب سرگرم کننده و کاربرپسند به بچه ها کمک می کند تا ماجراهای داستانی خود را در اندازه یک کارت پستال، کامل با تصاویر زیبا بسازند. کارت داستان قابل ترجمه است. طراحی مجدد با تصاویر با موضوعات مختلف کتاب داستان کودکان و حتی قابل دانلود و چاپ.

“کارت های داستان” چیست؟

کارت داستان 1

کارت داستان 2

کارت داستان 3

کارت داستان = داستان در یک کارت پستال

برای پسر تازه متولد شده ام، اخیراً کتاب های داستان مصور با 365 داستان خریدم. من واقعاً دوست داشتم که چگونه داستان ها با یک موضوع دقیق در یک پاراگراف کوچک و تنها با یک تصویر نوشته می شدند. در همان زمان به این فکر می‌کردم که آیا می‌توانم هر یک از داستان‌ها را روی کارتی چاپ کنم که بعداً آن‌ها را به هم بزنم و همه آن داستان‌ها را به ترتیب نخوانم. بنابراین، ایده “کارت داستان” متولد شد

در اینجا نحوه کار آن آمده است:

  • 🎒 ماجراجویی خود را انتخاب کنید: کودکان می توانند از میان طیف وسیعی از عناصر داستانی جذاب، از جمله ژانر. دسته (افسانه، ابرقهرمان، رمز و راز)، شخصیت (تک شاخ، ربات، شاهزاده)، تنظیمات (قلعه، آب نبات زمین، جنگل)، لحن (خنده دار، ماجراجویانه، جادویی)، و موضوع (دوستی، شجاعت، تخیل).
  • 🌟 سوپرایزم کن!: برای یک ترکیب داستانی کاملا تصادفی، روی دکمه “سورپرایز من” کلیک کنید، که منجر به پیچش های روایی غیرمنتظره و لذت بخش می شود!
  • 📇 داستان خود را زنده کنید: هنگامی که عناصر انتخاب می شوند، هوش مصنوعی عنوان داستانی جذاب، محتوای روایی و حتی تصویری چشم نواز را تداعی می کند که کاملاً ماجراجویی را تکمیل می کند.
  • 🌏 ترجمه برای جهان: عنوان و محتوای داستان خود را به زبان های مختلف ترجمه کنید، افق دید کودک را گسترده تر کنید و علاقه به زبان های خارجی را برانگیخت.
  • 💅 سبک ماجراجویی: تصاویر را در انواع مضامین کتاب داستان تغییر دهید. برای ایجاد یک کارت داستانی واقعاً شخصی از بین گزینه‌های مختلف انتخاب کنید.
  • 💖 دانلود کنید و به اشتراک بگذارید: هنگامی که از شاهکار خود راضی بودید، کارت داستان را به عنوان یک تصویر زیبا به سبک کارت پستال دانلود کنید، آماده چاپ، اشتراک گذاری با دوستان یا گنج برای همیشه!

نسخه ی نمایشی

سازنده کارت داستانی با هوش مصنوعی: https://cf-challenge-ai-storycard.pages.dev/create

سفر کاربر 1: ایجاد یک “کارت داستان”

یک کارت داستان بسازید

سفر کاربر 2: داستان را ترجمه کنید

داستان را ترجمه کنید

سفر کاربر 3: تصویر را دوباره سبک کنید

تصویر را دوباره سبک کنید

ویژگی های دیگر

سوپرایزم کن!

توضیحات تصویر

دانلود کارت داستان

توضیحات تصویر

پیوند به کارت داستان

کارت‌های داستان پس از تولید، یک لینک منحصر به فرد برای دسترسی و دانلود خواهند داشت و به مدت 24 ساعت در دسترس خواهند بود.

کد من

این Story Card Maker با هوش مصنوعی به عنوان یک برنامه SvelteKit با Typescript ساخته شده است. با استفاده از کتابخانه مؤلفه Flowbite Svelte، کل برنامه گذاشته شد. طرح‌بندی کارت داستان (تقلید به اندازه یک کارت پستال – 4 اینچ x 3 اینچ) به عنوان یک بوم HTML با استفاده از Fabric.js ایجاد می‌شود.

همچنین، برنامه SvelteKit در صفحات Cloudflare با Cloudflare R2 (برای ذخیره تصاویر)، Cloudflare KV (برای ذخیره ابرداده داستان) و Cloudflare AI (انتخاب واضح برای LLM و سایر مدل‌های GenAI) مستقر شده است.

در نهایت، این اولین تجربه من در ساخت یک برنامه وب کامل با SvelteKit و استقرار آن در صفحات Cloudflare است.

منبع کامل در اینجا تحت مجوز MIT در دسترس است – https://github.com/anselm94/cf-challenge-ai-storycard

سفر

چالش هوش مصنوعی Cloudflare Dev آتشی خلاقانه به راه انداخت! با الهام از کتاب داستان مصور فرزندم، مجموعه‌ای از کارت‌های داستان را متصور شدم – داستان‌های کوتاه و جذابی که می‌توان آن را به هر ترتیبی چاپ، در هم ریخت و خواند.

در اینجا این است که چگونه این ایده را زنده کردم:

الهام و طراحی:

مدل‌های هوش مصنوعی باز Cloudflare، قدرتمند برای کارهای متمرکز، برای ساخت داستان‌های کوتاه عالی به نظر می‌رسند. در تقابل آنها با LLMهای بزرگتر، پتانسیل آنها را برای نوشتن خلاقانه دیدم. بنابراین، تولید داستان‌های کوتاه همراه با تصاویر، که به‌عنوان کارت‌های داستانی قابل چاپ ارائه می‌شوند، به چالش من تبدیل شد.

ابتدا، طرح‌بندی کارت داستان را با استفاده از Affinity Designer ترسیم کردم، با تمرکز بر فونت‌های مناسب برای کودکان و طرح‌بندی یادآور کتاب داستان.

ساخت وب اپلیکیشن:

SvelteKit با تجربه توسعه دهنده روان خود، استفاده از آن لذت بخش بود. از آنجایی که چندین ویژگی را متصور بودم، Cloudflare KV و R2 به انتخاب‌های طبیعی برای ذخیره‌سازی داده‌ها تبدیل شدند، با آداپتورهای SvelteKit که یکپارچه‌سازی را بدون دردسر انجام می‌دادند. در نهایت، Wrangler CLI به من کمک کرد تا برنامه را به راحتی اجرا کنم.

استفاده از قدرت هوش مصنوعی:

سازنده کارت داستان از سه وظیفه اصلی هوش مصنوعی استفاده می کند:

  • تولید متن: mistral-7b-instruct-v0.1 مدل LLM عنوان داستان، محتوا و عنوان تصویر را تولید می کند.
  • تولید تصویر: stable-diffusion-xl-base-1.0 مدل تصاویر را ایجاد می کند و امکان تغییرات سبک را فراهم می کند.
  • ترجمه: m2m100-1.2b مدل، محتوای داستان را به زبان‌های مختلف ترجمه می‌کند (به دلیل محدودیت‌های فونت، به مجموعه کاراکترهای لاتین محدود می‌شود).

نکات کلیدی و آرزوهای آینده:

این چالش یک تجربه یادگیری فوق‌العاده بود و به من کمک کرد تا در یک بازه زمانی کوتاه یک ایده را به یک برنامه کاربردی تبدیل کنم. با نگاهی به آینده، من برای گسترش این پروژه با ویژگی های جدید و ایجاد انواع کارت های داستانی بیشتر برای پسرم و دیگران هیجان زده هستم. از جنبه فنی، محدودیت‌هایی را در مدل‌های خاص شناسایی کردم، مانند محدودیت‌های کاراکتر برای ترجمه. بررسی راه‌حل‌هایی مانند تقسیم کردن محتوا برای ترجمه به صورت تکه‌ای می‌تواند یک راه آینده باشد.

چیزی که به آن افتخار می کنم:

به طور کلی، من به ایجاد یک اپلیکیشن کاربرپسند و جذاب که قدرت هوش مصنوعی را با جادوی داستان سرایی ترکیب می کند، افتخار می کنم.

چند مدل و/یا انواع کار سه گانه

برنامه در حال حاضر در هر دو نوع قرار می گیرد.

  1. چندین مدل در هر کار: سفر اول – “ایجاد کارت داستان” از 2 مدل زیر برای 3 مرحله به ترتیب استفاده می کند. mistral-7b-instruct-v0.1 – عنوان و محتوای داستان را برای موضوع، ژانر، شخصیت، مکان و غیره ایجاد می کند. ب. mistral-7b-instruct-v0.1 (همان مدل) – بر اساس داستان تولید شده، یک صحنه اصلی را که قرار است تصویر برای آن تولید شود، شناسایی می کند. ج. stable-diffusion-xl-base-1.0 – بر اساس توضیحات صحنه، یک اعلان متن به تصویر ساخته می شود تا تصویر را در یک سبک خاص ایجاد کند.
  2. وظیفه سه گانه: 3 سفر مبتنی بر هوش مصنوعی برای این برنامه وجود دارد که از یک یا چند مدل هوش مصنوعی در هر کار استفاده می شود.

نوشته های مشابه

دکمه بازگشت به بالا