یک ویرایشگر تصویر درون مرورگر با ابزارهای کدنویسی هوش مصنوعی بسازید: معماری و مراحل

بله – می توانید یک ویرایشگر تصویر درون مرورگر با ابزارهای کدنویسی هوش مصنوعی بسازید، اما راه قابل اعتماد این است که با یک ویرایشگر Canvas 2D کوچک و غیر مخرب شروع کنید و شتاب GPU و هوش مصنوعی را به عنوان خدمات قابل تعویض اضافه کنید. مدل سند، موتور رندر، رویدادهای رابط کاربری و عملیات هوش مصنوعی را جدا نگه دارید. این جداسازی به عامل رمزگذاری هوش مصنوعی اجازه می‌دهد تا تغییرات محدودی ایجاد کند، واگرد و مجدد را حفظ کند، و زمانی که WebGPU یا باطن AI در دسترس نیست، بازگشتی را حفظ کند.

اولین نسخه عملی فایل‌های PNG یا JPEG را وارد می‌کند، آن‌ها را روی Canvas 2D نمایش می‌دهد، از لایه‌ها و یک پچ برگشت‌پذیر پشتیبانی می‌کند، یک تاریخچه مبتنی بر دستور را ذخیره می‌کند و PNG‌ها را صادر می‌کند. هنگامی که آن برش عمودی پایدار است، ماسک‌ها، تبدیل‌ها، کارگران، فیلترهای WebGPU و ابزارهای هوش مصنوعی مانند حذف پس‌زمینه یا نقاشی را بدون تبدیل ویرایشگر به مجموعه‌ای غیرقابل آزمایش از جهش‌های پیکسل اضافه کنید.

یک ویرایشگر تصویر مبتنی بر مرورگر باید از چه معماری استفاده کند؟

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

وضعیت سند

حالت کامل قابل ویرایش را در یک شی ساده ذخیره کنید که می تواند ذخیره، کلون، بازرسی و بازیابی شود. ابعاد بوم، خط مشی فضای رنگ، لایه‌ها، ماسک‌ها، تبدیل‌ها، پارامترهای تنظیم و ابرداده را شامل شود. شکل مینیمال TypeScript ممکن است به شکل زیر باشد:

interface ImageDocument {
  width: number;
  height: number;
  colorSpace: 'srgb' | 'display-p3';
  layers: Layer[];
  metadata: Record;
}

interface Layer {
  id: string;
  name: string;
  visible: boolean;
  opacity: number;
  blendMode: string;
  source: LayerSource;
  mask?: Mask;
  transform: Transform;
}

پشتیبانی از پیکسل ها، ماسک ها و پارامترهای تنظیم مختلف. تغییر روشنایی باید به عنوان یک پارامتر یا دستور لایه تنظیمی نشان داده شود، نه به عنوان بازنویسی برگشت ناپذیر بیت مپ اصلی. این باعث می‌شود یک حرکت لغزنده بعدی، عملیات خنثی کردن یا جایگزین ایجاد شده توسط هوش مصنوعی قطعی شود.

دستورات و تاریخ

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

ارائه خدمات

یک قرارداد رندر مانند به عنوان مثال تعریف کنید render(document, viewport)، renderRegion(document, rectangle)، و dispose(). اولین پیاده سازی می تواند با Canvas 2D ترسیم کند. یک پیاده‌سازی WebGPU می‌تواند بعداً همان قرارداد را برای کاشی‌کاری، تار کردن، پیچ‌شدن و تغییر رنگ‌ها برآورده کند. رابط کاربری نیازی به دانستن اینکه کدام رندر پیکسل ها را تولید کرده است، ندارد.

لایه تعامل

اشاره گر، صفحه کلید، لمس، انتخاب، برش، تبدیل، و رویدادهای پانل لایه متعلق به کنترلرها یا اجزای UI هستند. آنها باید ژست ها را به دستورات ترجمه کنند نه تماس ها context.putImageData یا شیدرهای GPU مستقیما. این محدودیت به یک عامل کد نویسی هوش مصنوعی اجازه می دهد تا نوار ابزار را بدون تغییر الگوریتم های رندر طراحی مجدد کند.

آیا باید از Canvas 2D یا WebGPU استفاده کنم؟

از Canvas 2D به عنوان خط پایه سازگاری و WebGPU به عنوان یک پیشرفت پیشرونده استفاده کنید. Canvas 2D به مرورگرهای بیشتری با الزامات پیاده سازی کمتر می رسد. WebGPU می تواند کار موازی را تسریع بخشد، اما در دسترس بودن محدودی دارد و به یک زمینه ایمن در مرورگرهای پشتیبانی شده نیاز دارد.

Canvas 2D برای چیست؟

• به سرعت یک تصویر را وارد کنید و اولین برش عمودی را بکشید.
• برش پایه، تبدیل، ترکیب لایه ها و تنظیمات متوسط.
• هنگامی که مرورگر آداپتور GPU قابل استفاده ندارد، یک راه حل بازگشتی قابل اعتماد است.
• اشکال زدایی آسان: حالت رندر از طریق بوم APIهای آشنا قابل مشاهده است.

با Canvas 2D مانند یک بن بست رفتار نکنید. سند و قراردادهای رندر را تمیز نگه دارید، سپس تنها زمانی عملیات گران قیمت را جایگزین کنید که نمایه سازی نیاز را نشان دهد.

آنچه WebGPU اضافه می کند

MDN WebGPU را به عنوان یک API برای رندرینگ GPU با کارایی بالا و محاسبات همه منظوره توصیف می کند. پیش‌نویس پیشنهادی W3C WebGPU در 15 سپتامبر 2026 آداپتورها، دستگاه‌ها، صف‌ها، بافرها، بافت‌ها، بافرهای فرمان و سایه‌زن‌ها را تعریف می‌کند. این اولیه‌ها برای کاشی‌کاری، کانولوشن، محو کردن، عملیات رنگی تکراری و بارهای کاری دیگر که بسیاری از پیکسل‌ها را به صورت موازی پردازش می‌کنند، مفید هستند.

WebGPU توسط MDN به عنوان “در دسترس بودن محدود” علامت گذاری شده است و فقط در زمینه های امن در مرورگرهای پشتیبانی شده نمایش داده می شود. اسناد توسعه‌دهنده کروم Google در دسترس بودن اولیه جاوا اسکریپت را در Chrome 113 در دستگاه‌های ChromeOS با پشتیبانی Vulkan، دستگاه‌های Windows با پشتیبانی Direct3D 12 و macOS ثبت می‌کند. که اطلاعات مربوط به نسخه های گذشته وعده پوشش فعلی در سراسر مرورگرها نیست.

WebGPU Capability Discovery قرار است چگونه کار کند؟

قبل از انتخاب مسیر کامل را بیابید:

1. بررسی کنید اگر navigator.gpu وجود دارد.
2. درخواست یک آداپتور و پردازش یک نتیجه پوچ.
3. درخواست یک دستگاه و کشف خطاهای ایجاد.
4. محدودیت ها و ویژگی های مورد نیاز فیلتر را بررسی کنید.
5. در صورت عدم موفقیت، رندر Canvas 2D را در دسترس نگه دارید.

یک وضعیت غیر هشدار دهنده مانند “شتاب GPU در دسترس نیست، حالت سازگاری در حال استفاده است” را نمایش دهید. کاری نکنید که کاربر ویرایش را از دست بدهد زیرا دستگاه بازنشانی شده است، قوانین مرورگر تغییر کرده است یا محدودیت لازم وجود ندارد.

چرا خلوص مبدأ مهم است؟

مشخصات W3C رسانه های متقابل دامنه را محدود می کند زیرا سایه بان ها می توانند به طور غیرمستقیم محتوای بافت را تولید کنند. منابع تصویری ارائه شده به WebGPU باید از مبدا پاک باشند. در عمل، پاسخ‌های تصویر و بارگذاری متقاطع را آگاهانه پیکربندی کنید، منابع آلوده را با یک پیام واضح رد کنید، و از تصور اینکه تصویر قابل مشاهده در مرورگر می‌تواند به‌طور خودکار توسط یک سایه‌زن انتخاب شود، خودداری کنید.

چگونه اولین ویرایشگر کار را ایجاد کنم؟

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

1. واردات و نمایش. یک انتخابگر فایل برای یک PNG یا JPEG اضافه کنید، آن را رمزگشایی کنید، یک سند تک لایه ایجاد کنید و آن را روی Canvas 2D بکشید. نمایش ابعاد تصویر و وضعیت بارگیری قابل مشاهده یا خطا.
2. سند را ذخیره کنید. اندازه بوم، داده های لایه، تبدیل ها و ابرداده ها را سریال کنید. یک تنظیم برگشت پذیر مانند روشنایی اضافه کنید و آن را به عنوان دستور داستان ذخیره کنید.
3. اضافه کردن واگرد، دوباره و صادرات. تاریخچه را قطعی کنید، میانبرهای صفحه کلید را آشکار کنید و یک PNG صاف صادر کنید. مطمئن شوید که واگرد هم سند و هم نتیجه رندر شده را تغییر می دهد.
4. لایه ها و ماسک ها را اضافه کنید. از دید، کدورت، انباشته شدن، ماسک لایه، برش و تبدیل پشتیبانی می کند. به جای ذخیره کپی های نامرتبط از UI، تصاویر کوچک مشتق شده از حالت سند را ذخیره کنید.
5. کارهای گران قیمت را به خارج از موضوع اصلی منتقل کنید. از کارگران رمزگشایی، ایجاد تصاویر کوچک، عکس‌های فوری تاریخ و فیلترهای گران قیمت استفاده کنید. انتقال مالکیت بافرها یا استفاده ImageBitmap برای کاهش کپی و گزارش پیشرفت و لغو.
6. اضافه کردن شتاب GPU WebGPU برای شناسایی ویژگی‌ها، یک فیلتر تسریع شده اعمال کنید و خروجی آن را با مسیر Canvas 2D مقایسه کنید. بازگشتی را حفظ کنید و رفتار مرورگر پشتیبانی نشده را صریح کنید.
7. یک آداپتور هوش مصنوعی اضافه کنید. با یک عملیات واحد شروع کنید که یک لایه یا شاخه مشتق شده را برمی گرداند، مانند حذف پس زمینه. در صورت نیاز به سرور، اعتبار و تماس های شبکه را خارج از کلاینت نگه دارید.
8. فقط پس از قابل اعتماد بودن هسته، گسترش دهید. همکاری، APIهای پلاگین، فرمت‌های پیشرفته، و هماهنگی مدل از راه دور را به محض اینکه ویرایش محلی، بازیابی و صادرات به‌طور قابل پیش‌بینی عمل کرد، اضافه کنید.

ویژگی های تصویر هوش مصنوعی چگونه باید طراحی شوند؟

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

type AiToolRequest = {
  documentId: string;
  region: Rectangle;
  parameters: Record;
};

type AiToolResult = {
  layer: Layer;
  provenance: {
    tool: string;
    backend: 'local' | 'self-hosted' | 'remote';
    createdAt: string;
  };
};

interface AiTool {
  run(request: AiToolRequest, signal: AbortSignal): Promise;
}

ابزارهای اولیه مفید عبارتند از removeBackground، inpaint، segment، upscale، و generateVariant. آداپتور را قابل تعویض نگه دارید تا یک مدل مرورگر محلی، یک سرویس میزبان خود، یک API شخص ثالث یا یک پیاده سازی ساختگی بدون بازنویسی ویرایشگر انتخاب شود.

حریم خصوصی را قابل مشاهده کنید

قبل از شروع عملیات، به کاربر بگویید که آیا پیکسل ها در مرورگر باقی می مانند، به زیرساختی که مدیریت می کنید بروید یا برای شخص ثالث آپلود کنید. باطن انتخاب شده، منطقه ارسال شده، وضعیت لغو و مبدا لایه حاصل را نمایش دهید. یک مدل محلی می‌تواند نوردهی آپلود را کاهش دهد، در حالی که یک مدل راه دور می‌تواند قابلیت‌هایی را ارائه دهد که در مرورگر غیرعملی هستند. حاشیه ابزار به شما امکان می دهد هر دو را بدون تغییر مدل سند ارائه دهید.

برگشت پذیری را حفظ کنید

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

چگونه یک عامل کدنویس AI می تواند پروژه را بدون شکستن آن تغییر دهد؟

از حلقه محکمی استفاده کنید که قابل بازبینی باشد: زمینه و مفروضات مخزن عامل را ارائه دهید، یک تغییر محدود درخواست کنید، برنامه یا بررسی متمرکز را اجرا کنید، تفاوت را تأیید کنید، و تنها پس از آن کار بعدی را متعهد یا شروع کنید.

به نماینده یک قرارداد ثابت بدهید

طرح سند، رابط رندر، فرمت فرمان، مرورگرهای پشتیبانی شده و قوانین رسیدگی به خطا را ضبط کنید. به نماینده بگویید که کدام فایل دارای آداپتورهای حالت، رندر، رابط کاربری، کارگران و AI است. این مانع از انتشار درخواست تغییر نوار ابزار به کد سایه زن یا سریال سازی تاریخ می شود.

از دستورهایی که مرز را نامگذاری می کنند استفاده کنید

• “یک مدل سند قابل سریال‌سازی با لایه‌ها و یک پشته بازنویسی مبتنی بر دستور اضافه کنید. هنوز رندر را تغییر ندهید.”
• “یک رندر Canvas 2D برای سند فعلی پیاده سازی کنید و یک دکمه وارد کردن PNG اضافه کنید.”
• “تشخیص قابلیت WebGPU را اضافه کنید و مسیر Canvas 2D را به عنوان بازگشتی نگه دارید. رفتار مرورگر پشتیبانی نشده را توضیح دهید.”
• “تنظیم روشنایی برگشت پذیر، ضبط سابقه و صادرات PNG را اضافه کنید. نمایش تفاوت و چک لیست دستی.”
• یک رابط حذف پس‌زمینه هوش مصنوعی ایجاد کنید که یک لایه جدید را برمی‌گرداند؛ یک آداپتور ساختگی ارائه کنید و اعتبار شبکه را خارج از مشتری بگذارید.

برای هر تغییر به تأیید نیاز دارید

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

محیط های کدنویسی مبتنی بر مرورگر

مستندات مایکروسافت کد ویژوال استودیو برای وب را به عنوان یک تجربه رایگان و بدون نصب VS Code توصیف می کند که به طور کامل در یک مرورگر اجرا می شود. این برای مرور مخزن و ویرایش های سبک مفید است، اما اسناد آن محدودیت هایی را در مورد پسوند مرورگر و دسترسی به پوشه های محلی نیز ذکر می کند. زمانی که یک پروژه به ابزارهای اختصاصی، دارایی های بزرگ یا اشکال زدایی در سطح دستگاه نیاز دارد، برای یک محیط توسعه کامل محلی یا از راه دور برنامه ریزی کنید.

PlayCanvas مهارت های آماده برای عامل، سرور ویرایشگر MCP و گردش کار توسعه هوش مصنوعی را مستند می کند. این مواد یک مدل مفید برای ارائه زمینه خاص پروژه به یک عامل هستند، حتی اگر ویرایشگر شما از یک پشته متفاوت استفاده کند.

کدام فرمت‌های واردات و صادرات باید اول باشند؟

ابتدا PNG و سپس JPEG و WebP را اجرا کنید. سرعت AVIF، TIFF، فرمت های متحرک و سایر اهداف تخصصی را کاهش دهید در حالی که مدل سند، مدیریت رنگ و رفتار بازیابی پایدار هستند.

قوانین واردات

• رمزگشایی در Worker که در آن عملی است و پیشرفت را برای فایل های بزرگ نشان می دهد.
• ابعاد خروجی، فراداده جهت‌گیری و اطلاعات رنگ مورد نظر را در سند ذخیره کنید.
• منبع اصلی را در دسترس نگه دارید تا بتوان یک پچ غیر مخرب را دوباره محاسبه کرد.
• فایل های پشتیبانی نشده یا نادرست را با یک خطای عملی رد کنید، نه یک بوم خالی.

مقررات صادرات

• PNG را به اولین صادرات مسطح قابل پیش بینی تبدیل کنید.
• JPEG و WebP را با تنظیمات کیفیت صریح اضافه کنید و هشدار دهید که در صورت لزوم از بین می روند.
• آگاهانه تصمیم بگیرید که چگونه داده های EXIF و پروفایل های رنگی را نگه دارید یا حذف کنید.
• سند قابل ویرایش، ماسک‌ها، تنظیمات و مبدا را از صادرات تصویر مسطح جدا نگه دارید.

OpenGPEX هدف صادرات گسترده‌تری از جمله PNG، JPEG، WebP، AVIF، TIFF، GIF متحرک و BMP را نشان می‌دهد. مخزن آن پروژه را در دست توسعه فعال توصیف می‌کند و می‌گوید که بازنویسی 2.x WebGPU و قراردادها/اسناد افزونه ممکن است تغییر کند، بنابراین از آن برای واژگان و سوالات معماری استفاده کنید، نه به عنوان تضمین ثبات.

مرورگر، امنیت و عملکرد مورد نیاز چیست؟

ویرایشگر اصلی به یک مرورگر مدرن با Canvas 2D، دسترسی به فایل‌ها از طریق ورود انتخاب‌شده توسط کاربر، و حافظه کافی برای تصویر کار و تاریخچه نیاز دارد. WebGPU به HTTPS در مرورگرهای پشتیبانی شده و یک آداپتور و درخواست دستگاه موفق نیاز دارد. ویژگی‌های هوش مصنوعی به یک مدل محلی سازگار یا یک سرویس شبکه نیز نیاز دارند.

از نخ اصلی محافظت کنید

در صورت امکان، بازخورد اشاره گر و تعامل لایه-پانل را با جابجایی رمزگشایی، تولید تصاویر کوچک، عکس های فوری و فیلترهای گران قیمت برای کارگران حفظ کنید. از بافرهای قابل انتقال یا ImageBitmap برای محدود کردن کپی ها هر عملیات طولانی باید پیشرفت و یک AbortSignal بنابراین کاربر می تواند ابزارها را بدون انتظار برای کار منسوخ تغییر دهد.

کنترل حافظه

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

محتوای غیرقابل اعتماد را جدا نگه دارید

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

پشتیبانی خواننده مستقلورودی شما به ما کمک می کند تا راهنماهای چگونه را آزمایش کنیم، به روز کنیم و در دسترس همه قرار دهیم.پشتیبانی از Ko-Fi

رویکردهای اجرایی اصلی چگونه با هم مقایسه می شوند؟

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

رویکرد	سازگاری	مشخصات عملکرد	مدل برای ویرایش	گزینه های حریم خصوصی هوش مصنوعی	توسعه پذیری	ملاحظات صادرات
بوم 2 بعدی، تک نخی	گسترده ترین خط مبنا	مناسب برای آهنگسازی اولیه و اصلاحات متوسط؛ فیلترهای تکرار شونده بزرگ می توانند رابط کاربری را مسدود کنند	اگر سند از بوم جدا شود، می‌تواند از لایه‌ها و دستورات پشتیبانی کند	آداپتورهای محلی، خود میزبان یا راه دور امکان پذیر است	این به رابط ها بستگی دارد. تغییر کدهای به هم پیوسته سخت می شود	با PNG شروع کنید. به طور آگاهانه JPEG و WebP را اضافه کنید
بوم 2 بعدی با کارگران	خط پایه گسترده با حمایت کارگر	رمزگشایی، تصاویر کوچک، عکس های فوری و فیلترها می توانند موضوع اصلی را ترک کنند. کپی باید کنترل شود	بسیار مناسب برای اسناد غیر مخرب و تاریخ قطعی	انتخاب های یکسان، با پیشرفت سریع و لغو	قراردادهای روشن کارگری انزوا را بهبود می بخشد	همان قالب و راه حل های مدیریت رنگ به عنوان خط پایه
WebGPU با Canvas Backback	این به پشتیبانی آداپتور و مرورگر بستگی دارد. گزینه بازگشتی محدوده را حفظ می کند	خطوط لوله محاسبه و رندر GPU ترکیب بندی را با موزاییک، محو کردن، پیچش و تغییر رنگ انجام می دهد.	بهترین زمانی که رندر قابل تغییر است و ویرایش ها بر اساس دستور باقی می مانند	خروجی محلی می تواند از GPU استفاده کند. تماس های از راه دور هنوز به یک راه حل حفظ حریم خصوصی نیاز دارند	مرزهای رندر و پلاگین می توانند مستقل باقی بمانند	خروجی GPU همچنان به مدیریت آگاهانه رنگ، ابرداده و قالب نیاز دارد
فقط برای WebGPU	باریک تر و حساس به زمینه امنیتی و خرابی دستگاه	بهترین گزینه برای فیلترهای موازی است، اما راه اندازی و رفع اشکال سایه زن پیچیده تر است	برای جلوگیری از اتصال حالت به منابع GPU، به یک مدل سند منضبط نیاز دارد	هر باطنی امکان پذیر است، اما دستگاه های پشتیبانی نشده نیاز به یک مسیر محصول جداگانه دارند	قدرتمند اما گران برای نگهداری بدون قراردادهای پایدار	تصور نکنید که پشتیبانی از GPU وفاداری صادرات را تضمین نمی کند

قبل از تماس با ویرایشگر قابل استفاده چه چیزی را باید آزمایش کنم؟

سند، رندر، کارگران، آداپتورهای هوش مصنوعی و مسیرهای صادرات را به صورت جداگانه آزمایش کنید، سپس آنها را با هم از طریق گردش کار سفارشی آزمایش کنید.

بررسی اسناد و سابقه

• بدون از دست دادن ترتیب لایه‌ها، ماسک‌ها، تبدیل‌ها یا پارامترهای تنظیم، یک سند را سریال‌سازی و بازیابی کنید.
• دستورات را در یک جلسه جدید اعمال، لغو، انجام مجدد و پخش مجدد کنید.
• مطمئن شوید که پنهان کردن یک لایه یا تغییر شفافیت آن، پیکسل های خروجی را تغییر نمی دهد.
• تأیید کنید که یک لایه مشتق از هوش مصنوعی را می توان بدون تغییر لایه اصلی حذف کرد.

رندر چک می کند

• خروجی Canvas 2D و WebGPU را برای یک ویجت و تنظیمات مقایسه کنید.
• آداپتور از دست رفته، ایجاد دستگاه ناموفق، محدودیت پشتیبانی نشده و دستگاه گم شده.
• موارد تست تصاویر خالص و متقاطع با یک خطای آشکار کاربر.
• برای یافتن خطاهای مختصات یا مقیاس، یک نمای برش خورده و صادرات کامل ارائه دهید.

بررسی گردش کار

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

پروژه پس از اولین انتشار چگونه باید توسعه یابد؟

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

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

سوالات متداول

آیا ویرایشگر می تواند کاملا آفلاین کار کند؟

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

چگونه پشتیبانی WebGPU را برای کاربران توضیح دهم بدون اینکه آنها را گیج کنم؟

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

ایمن ترین راه برای ذخیره ویرایش های ایجاد شده توسط هوش مصنوعی چیست؟

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

چرا یک تصویر می تواند به درستی بارگیری شود اما در فیلتر GPU خراب شود؟

مشاهده در یک عنصر HTML تضمین نمی کند که منبع برای دسترسی سایه بان تمیز است. هدرهای متقاطع، نحوه بارگیری فایل و سیاست های امنیتی مرورگر باید قبل از ورود تصویر به خط لوله WebGPU اجازه نمونه برداری را بدهد.

چه زمانی باید فرمت های پیشرفته مانند AVIF یا TIFF را اضافه کنم؟

آنها را بعد از اینکه گردش کار PNG، JPEG و WebP دارای رنگ پایدار، متادیتا، رفتار خطا و بازیابی هستند، اضافه کنید. فرمت‌های پیشرفته تصمیم‌گیری در مورد عمق بیت، انیمیشن، نمایه‌ها و پشتیبانی مرورگر را چند برابر می‌کنند، بنابراین معرفی زودتر آنها می‌تواند نقص‌های مدل سند را پنهان کند.