Nnabuguidesبازگشت به همهٔ راهنماها ←
AI · Computer Vision · Build log

جادوی پنجرهٔ AI
بین دو دست چطور کار می‌کند؟

برخلاف چیزی که به نظر می‌رسد، مدل هوش مصنوعی اصلاً دست‌های تو را نمی‌بیند. اثر نهایی از ترکیب یک ویدیوی کاملِ بازطراحی‌شده با یک ماسک متحرک ساخته می‌شود.

حدود ۷ دقیقه مطالعهسطح: کنجکاو تا سازندهرایگان برای تست اولیه
دو دست که یک پنجره به جهان بازطراحی‌شده با هوش مصنوعی می‌سازند

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

مدل چه چیزی را می‌بیند؟

کل ویدیوی اصلی به مدل ویدیو-به-ویدیو فرستاده می‌شود تا مثلاً به انیمه، خمیر یا یک جهان آینده‌نگر تبدیلش کند. مدل تمام پیکسل‌ها را بازسازی می‌کند: آدم، اتاق، دیوار و حتی دست‌ها.

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

نکتهٔ کلیدیAI فقط ویدیو را استایل می‌دهد. تشخیص دست، ساخت قاب و بریدن پنجره همگی محلی و بدون AI انجام می‌شوند.
The actual pipeline
1. RestyleAI transforms the whole clip
→
2. TrackMediaPipe finds hand landmarks
→
3. CompositeCanvas reveals AI only inside the frame

چهار مرحلهٔ واقعی اثر

۱. بازطراحی ویدیو

یک مدل ویدیویی، کل کلیپ را با استایل انتخابی تو تولید می‌کند. چون ویدیو را یک‌جا می‌بیند، حرکت و پلک‌زدن طبیعی‌تر از ادیت تصویر-به-تصویر می‌ماند.

۲. ردیابی دست

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

۳. کامپوزیت

Canvas 2D یا OpenCV دو ویدیو را روی هم می‌گذارد و با ماسک چهارضلعی، فقط بخش داخل قاب را آشکار می‌کند. خط‌چین و نقطه‌های گوشه صرفاً جزئیات بصری همین لایه‌اند.

۴. خروجی

در مرورگر با MediaRecorder و در مسیر خط فرمان با ffmpeg فایل نهایی ساخته می‌شود. این بخش هم بدون AI است.

اول رایگان تست کن، بعد برای AI هزینه کن

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

رایگان و فوری

Placeholder mode

  • داخل قاب: ویدیوی خودت با فیلتر رنگی
  • ردیابی، ماسک و خروجی: کاملاً واقعی
  • برای چک‌کردن ژست و ثبات قاب
  • نامحدود و بدون انتظار
نیازمند API / اعتبار

AI mode

  • داخل قاب: دنیای بازتولیدشده با مدل ویدیویی
  • هزینه و چند دقیقه انتظار
  • همان ردیابی و ماسک
  • فقط برای برداشت‌هایی که از قبل خوب تست شده‌اند

پس روند درست این است: اول با حالت رایگان مطمئن شو دست‌ها درست قاب می‌سازند و خروجی سالم است؛ بعد فقط برای بهترین برداشت‌ها generation واقعی اجرا کن.

سخت‌ترین بخش، AI نیست: هم‌ترازی است

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

برای همین پرامپت باید روی حفظ ژست، حرکت، کادر، پس‌زمینه و زمان‌بندی تأکید کند؛ بدون crop، zoom یا recenter. با این وجود، تضمین کامل نیست و باید برای چند بار تلاش آماده باشی.

دقیقاً دنبال چه نتیجه‌ای هستیم؟

این دو نمونه بهترین کاربرد قاب را نشان می‌دهند: بیرون قاب، واقعیت بدون تغییر می‌ماند؛ داخلش یک هویت تصویری کاملاً متفاوت می‌بینی. هرچه اختلاف رنگ، نور و بافت بین دو دنیا بیشتر باشد، اثر نهایی واضح‌تر و جذاب‌تر می‌شود.

نمونه‌ای از تبدیل بخش داخل قاب به پرتره انیمه
نمونهٔ ۱ — پس‌زمینهٔ قرمز تخت و پرترهٔ انیمه، کنتراست بالایی با ویدیوی واقعی می‌سازد.
نمونه‌ای از تبدیل بخش داخل قاب به لباس ابرقهرمانی
نمونهٔ ۲ — تغییر لباس و آسمان آبی داخل قاب، مرز میان واقعیت و جهان تازه را واضح می‌کند.

۱۰ پرامپت آماده برای یک قاب چشم‌گیر

این‌ها را به‌عنوان بخشِ استایل پرامپت وارد کن. برای اینکه ماسک تمیز بماند، آخر هر پرامپت این جمله را هم اضافه کن: preserve exact pose, framing, timing and camera perspective; no zoom, crop, recenter or geometry changes.

۱. انیمهٔ قرمزِ سینماییTransform the subject and room into crisp hand-drawn anime, flat saturated scarlet background, black ink outlines, warm cel shading, dramatic graphic-novel contrast.
۲. شهر سایبرپانکِ بارانیTurn the scene into a neon cyberpunk city at night, electric cyan and magenta reflections, rain-soaked glass, deep black shadows, luminous signage glow.
۳. سفینهٔ سبز در فضاTransform the room into a retro-futurist spacecraft interior, emerald instrument lights, starfield through large windows, chrome surfaces, cinematic high contrast.
۴. دنیای لگوییTransform every visible surface into a vivid toy-brick world, primary red yellow and blue blocks, plastic shine, playful miniature scale, crisp studio lighting.
۵. جهانِ خمیر و استاپ‌موشنTransform the subject and surroundings into handcrafted claymation, bold orange and cobalt palette, tactile fingerprints in clay, soft miniature shadows, whimsical stop-motion look.
۶. اقیانوسِ زیر آبTransform the room into a deep turquoise underwater world, coral architecture, drifting jellyfish, caustic light rays, rich blue-green contrast and surreal clarity.
۷. نقاشی روغنِ اکسپرسیونیستیTransform the scene into an expressive post-impressionist oil painting, swirling cobalt sky, intense sunflower yellow highlights, thick visible brush strokes, dramatic complementary colors.
۸. قهرمانِ کتاب‌کمیکTransform the subject into an original high-contrast comic-book hero, bold red and midnight-blue costume, halftone texture, thick black contour lines, bright sky-blue backdrop.
۹. باغِ بیولومینسنتTransform the room into a midnight bioluminescent jungle, glowing lime vines, violet flowers, deep indigo shadows, magical high-contrast light around the subject.
۱۰. سیاه‌وسفید با یک رنگTransform the scene into a stark black-and-white film noir world with one intense canary-yellow accent color, hard side lighting, long shadows, graphic editorial contrast.

چند واقعیت کاربردی قبل از اجرا

  1. ژست باید قاب باشد. دو دست باز کنار هم کافی نیستند؛ باید واقعاً چهار گوشهٔ یک مستطیل بسازند.
  2. کلید جدید همیشه مشکل quota را حل نمی‌کند. سهمیه معمولاً برای Google Cloud Project است، نه تک API key.
  3. کلیپ کوتاه بهتر است. برای مسیر AI، ۳ تا ۵ ثانیه هم هزینه را پایین نگه می‌دارد و هم احتمال حفظ کادر را بیشتر می‌کند.
  4. حریم خصوصی را فراموش نکن. ویدیوی ورودی فقط وقتی به سرویس بیرونی می‌رود که تولید AI را اجرا کنی؛ ردیابی و کامپوزیت در دستگاه خودت انجام می‌شوند.

اگر خواستی خودت اجراش کنی

بعد از بازکردن برنامه، با همین چهار بخش طرفی. لازم نیست از اول API داشته باشی؛ اول با حالت آزمایشی مطمئن شو ژست و قاب درست کار می‌کنند.

رابط Finger Frame AI با بخش کلید API، انتخاب استایل، پرامپت سفارشی و آپلود ویدیو
رابط اصلی Finger Frame AI — بخش بالایی استایل را تعیین می‌کند و بخش پایین، ویدیوی حرکت دست‌ها را می‌گیرد.
ابزار را باز کن و تست کن ↗
۱. Gemini API key
فقط برای تولید واقعی با AI لازم است. کلید در مرورگر می‌ماند و هنگام generation به API گوگل فرستاده می‌شود.
۲. Style
یک استایل آماده انتخاب کن یا Custom prompt را برای یکی از پرامپت‌های بالا بزن.
۳. Custom prompt
دستور استایل را اینجا می‌نویسی؛ برای نتیجهٔ تمیز، جملهٔ حفظ کادر را هم آخرش اضافه کن.
۴. Drop a video
یک کلیپ کوتاه با ژست قاب آپلود کن. برای مسیر AI، ویدیوی ۳ تا ۵ ثانیه‌ای و زیر ۱۵ مگابایت بهترین نقطهٔ شروع است.

راه ساده، اجرای پروژه در مرورگر است:

python3 -m http.server 8124
# سپس: http://localhost:8124

در مسیر خط فرمان، فقط فایل stylize با AI حرف می‌زند؛ فایل composite صرفاً ردیابی و ماسک را انجام می‌دهد. این یعنی می‌توانی ویدیوی استایل‌شده را با هر مدل دیگری تولید کنی، به شرطی که با ویدیوی اصلی هم‌تراز باشد.

python3 -m venv .venv
.venv/bin/pip install -r requirements.txt
export GEMINI_API_KEY=...
.venv/bin/python stylize.py input.mp4 -o stylized.mp4
.venv/bin/python composite.py input.mp4 stylized.mp4 -o final.mp4

منبع پروژه: finger-frame-effect-ai روی GitHub · نسخهٔ زنده: دموی پروژه