{"id":88703,"date":"2024-12-17T23:30:45","date_gmt":"2024-12-17T20:00:45","guid":{"rendered":"https:\/\/nabfollower.com\/blog\/building-a-realtime-eye-tracking-experience-with-supabase-and-webgazerjs-3llj\/"},"modified":"2024-12-17T23:30:45","modified_gmt":"2024-12-17T20:00:45","slug":"building-a-realtime-eye-tracking-experience-with-supabase-and-webgazerjs-3llj","status":"publish","type":"post","link":"https:\/\/nabfollower.com\/blog\/building-a-realtime-eye-tracking-experience-with-supabase-and-webgazerjs-3llj\/","title":{"rendered":"\u0627\u06cc\u062c\u0627\u062f \u06cc\u06a9 \u062a\u062c\u0631\u0628\u0647 \u0631\u062f\u06cc\u0627\u0628\u06cc \u0686\u0634\u0645 \u062f\u0631 \u0632\u0645\u0627\u0646 \u0648\u0627\u0642\u0639\u06cc \u0628\u0627 Supabase \u0648 WebGazer.js"},"content":{"rendered":"

Summarize this content to 400 words in Persian Lang
\n TL;DR:<\/p>\n

\u0633\u0627\u062e\u062a\u0647 \u0634\u062f\u0647 \u0628\u0627 Supabase\u060c React\u060c WebGazer.js\u060c Motion One\u060c anime.js\u060c \u0635\u062f\u0627\u06cc \u067e\u0627\u06cc\u062f\u0627\u0631
\n\u0627\u0632 Supabase Realtime Presence & Broadcast \u0627\u0633\u062a\u0641\u0627\u062f\u0647 \u0645\u06cc \u06a9\u0646\u062f (\u0627\u0635\u0644\u0627\u064b \u0627\u0632 \u062c\u062f\u0627\u0648\u0644 \u067e\u0627\u06cc\u06af\u0627\u0647 \u062f\u0627\u062f\u0647 \u0627\u0633\u062a\u0641\u0627\u062f\u0647 \u0646\u0645\u06cc \u0634\u0648\u062f!)
\n\u0645\u062e\u0632\u0646 GitHub
\n\u0648\u0628 \u0633\u0627\u06cc\u062a
\n\u0648\u06cc\u062f\u0626\u0648\u06cc \u0646\u0645\u0627\u06cc\u0634\u06cc<\/p>\n

\u06cc\u06a9\u06cc \u062f\u06cc\u06af\u0631 \u0627\u0632 \u0647\u06a9\u0627\u062a\u0648\u0646 \u0647\u0627\u06cc \u0647\u0641\u062a\u0647 \u0631\u0627\u0647 \u0627\u0646\u062f\u0627\u0632\u06cc Supabase \u0648 \u06cc\u06a9 \u067e\u0631\u0648\u0698\u0647 \u0622\u0632\u0645\u0627\u06cc\u0634\u06cc \u062f\u06cc\u06af\u0631 \u0628\u0647 \u0646\u0627\u0645 \u0628\u0647 \u067e\u0631\u062a\u06af\u0627\u0647 \u062e\u06cc\u0631\u0647 \u0634\u0648\u06cc\u062f. \u0627\u06cc\u0646 \u062f\u0631 \u0646\u0647\u0627\u06cc\u062a \u06cc\u06a9\u06cc \u0627\u0632 \u0633\u0627\u062f\u0647 \u062a\u0631\u06cc\u0646 \u0648 \u062f\u0631 \u0639\u06cc\u0646 \u062d\u0627\u0644 \u067e\u06cc\u0686\u06cc\u062f\u0647 \u062a\u0631\u06cc\u0646 \u067e\u0631\u0648\u0698\u0647 \u0647\u0627 \u0628\u0648\u062f. \u062e\u0648\u0634\u0628\u062e\u062a\u0627\u0646\u0647 \u0627\u062e\u06cc\u0631\u0627\u064b \u06a9\u0645\u06cc \u0627\u0632 \u0645\u06a9\u0627\u0646\u200c\u0646\u0645\u0627 \u0644\u0630\u062a \u0645\u06cc\u200c\u0628\u0631\u0645\u060c \u0628\u0646\u0627\u0628\u0631\u0627\u06cc\u0646 \u0686\u0646\u062f \u062f\u0633\u062a \u06cc\u0627\u0631\u06cc \u062f\u0627\u0634\u062a\u0645 \u062a\u0627 \u0627\u0632 \u067e\u0633 \u0622\u0646 \u0628\u0631 \u0628\u06cc\u0627\u06cc\u0645! \u0645\u0646 \u0647\u0645\u0686\u0646\u06cc\u0646 \u0645\u06cc \u062e\u0648\u0627\u0633\u062a\u0645 \u06cc\u06a9 \u0633\u0648\u0627\u0644 \u0631\u0627 \u062f\u0631 \u0630\u0647\u0646 \u062e\u0648\u062f \u062a\u0623\u06cc\u06cc\u062f \u06a9\u0646\u0645: \u0622\u06cc\u0627 \u0627\u0645\u06a9\u0627\u0646 \u0627\u0633\u062a\u0641\u0627\u062f\u0647 \u0648\u062c\u0648\u062f \u062f\u0627\u0631\u062f\u061f \u0641\u0642\u0637 \u0648\u06cc\u0698\u06af\u06cc \u0647\u0627\u06cc \u0628\u06cc\u062f\u0631\u0646\u06af \u0627\u0632 Supabase \u0628\u062f\u0648\u0646 \u0647\u0631 \u062c\u062f\u0627\u0648\u0644 \u067e\u0627\u06cc\u06af\u0627\u0647 \u062f\u0627\u062f\u0647\u061f \u067e\u0627\u0633\u062e (\u0634\u0627\u06cc\u062f \u062a\u0627 \u062d\u062f\u0648\u062f\u06cc \u0648\u0627\u0636\u062d) \u0627\u06cc\u0646 \u0627\u0633\u062a: \u0628\u0644\u0647\u060c \u0628\u0644\u0647 \u0627\u06cc\u0646 \u0627\u0633\u062a (\u062f\u0648\u0633\u062a\u062a \u062f\u0627\u0631\u0645\u060c \u062a\u06cc\u0645 Realtime \u2665\ufe0f). \u067e\u0633 \u0628\u06cc\u0627\u06cc\u06cc\u062f \u06a9\u0645\u06cc \u0639\u0645\u06cc\u0642 \u062a\u0631 \u062f\u0631 \u067e\u06cc\u0627\u062f\u0647 \u0633\u0627\u0632\u06cc \u0641\u0631\u0648 \u0628\u0631\u0648\u06cc\u0645.<\/p>\n

\u0645\u0646 \u0641\u0642\u0637 \u06cc\u06a9 \u0631\u0648\u0632 \u0628\u0647 \u0637\u0648\u0631 \u062a\u0635\u0627\u062f\u0641\u06cc \u0641\u0642\u0637 \u0628\u0647 \u0646\u0642\u0644 \u0642\u0648\u0644 \u0646\u06cc\u0686\u0647 \u062f\u0631 \u0645\u0648\u0631\u062f \u067e\u0631\u062a\u06af\u0627\u0647 \u0641\u06a9\u0631 \u0645\u06cc \u06a9\u0631\u062f\u0645 \u0648 \u0627\u06cc\u0646\u06a9\u0647 \u062e\u0648\u0628 (\u0648 \u062c\u0627\u0644\u0628) \u0627\u0633\u062a \u06a9\u0647 \u0622\u0646 \u0631\u0627 \u0628\u0647 \u0646\u0648\u0639\u06cc \u062a\u062c\u0633\u0645 \u06a9\u0646\u0645: \u0634\u0645\u0627 \u0628\u0647 \u06cc\u06a9 \u0635\u0641\u062d\u0647 \u062a\u0627\u0631\u06cc\u06a9 \u062e\u06cc\u0631\u0647 \u0645\u06cc \u0634\u0648\u06cc\u062f \u0648 \u0686\u06cc\u0632\u06cc \u0628\u0647 \u0634\u0645\u0627 \u062e\u06cc\u0631\u0647 \u0645\u06cc \u0634\u0648\u062f. \u0647\u06cc\u0686 \u0686\u06cc\u0632 \u062e\u06cc\u0644\u06cc \u0628\u06cc\u0634\u062a\u0631 \u0627\u0632 \u0622\u0646!<\/p>\n

\u062f\u0631 \u0627\u0628\u062a\u062f\u0627 \u0627\u06cc\u0646 \u0627\u06cc\u062f\u0647 \u0631\u0627 \u062f\u0627\u0634\u062a\u0645 \u06a9\u0647 \u0627\u0632 Three.js \u0628\u0631\u0627\u06cc \u0633\u0627\u062e\u062a\u0646 \u0627\u06cc\u0646 \u067e\u0631\u0648\u0698\u0647 \u0627\u0633\u062a\u0641\u0627\u062f\u0647 \u06a9\u0646\u0645\u060c \u0628\u0627 \u0627\u06cc\u0646 \u062d\u0627\u0644 \u0645\u062a\u0648\u062c\u0647 \u0634\u062f\u0645 \u06a9\u0647 \u0627\u06cc\u0646 \u0628\u062f\u0627\u0646 \u0645\u0639\u0646\u0627\u0633\u062a \u06a9\u0647 \u0628\u0627\u06cc\u062f \u062f\u0627\u0631\u0627\u06cc\u06cc \u0647\u0627\u06cc \u0631\u0627\u06cc\u06af\u0627\u0646 \u0628\u0631\u0627\u06cc \u0686\u0634\u0645(\u0647\u0627\u06cc) \u0633\u0647 \u0628\u0639\u062f\u06cc \u0627\u06cc\u062c\u0627\u062f \u06cc\u0627 \u067e\u06cc\u062f\u0627 \u06a9\u0646\u0645. \u0645\u0646 \u062a\u0635\u0645\u06cc\u0645 \u06af\u0631\u0641\u062a\u0645 \u06a9\u0647 \u06a9\u0645\u06cc \u0632\u06cc\u0627\u062f \u0627\u0633\u062a\u060c \u0628\u0647 \u062e\u0635\u0648\u0635 \u06a9\u0647 \u0632\u0645\u0627\u0646 \u0632\u06cc\u0627\u062f\u06cc \u0628\u0631\u0627\u06cc \u06a9\u0627\u0631 \u0631\u0648\u06cc \u062e\u0648\u062f \u067e\u0631\u0648\u0698\u0647 \u0646\u062f\u0627\u0634\u062a\u0645 \u0648 \u0628\u0647 \u062c\u0627\u06cc \u0622\u0646 \u062a\u0635\u0645\u06cc\u0645 \u06af\u0631\u0641\u062a\u0645 \u0622\u0646 \u0631\u0627 \u0628\u0647 \u0635\u0648\u0631\u062a \u062f\u0648 \u0628\u0639\u062f\u06cc \u0628\u0627 SVG \u0627\u0646\u062c\u0627\u0645 \u062f\u0647\u0645.<\/p>\n

\u0647\u0645\u0686\u0646\u06cc\u0646 \u0646\u0645\u06cc\u200c\u062e\u0648\u0627\u0633\u062a\u0645 \u0641\u0642\u0637 \u0628\u0635\u0631\u06cc \u0628\u0627\u0634\u062f: \u0628\u0627 \u0628\u0631\u062e\u06cc \u0635\u062f\u0627\u0647\u0627 \u0646\u06cc\u0632 \u062a\u062c\u0631\u0628\u0647 \u0628\u0647\u062a\u0631\u06cc \u062e\u0648\u0627\u0647\u062f \u0628\u0648\u062f. \u0628\u0646\u0627\u0628\u0631\u0627\u06cc\u0646 \u0628\u0647 \u0627\u06cc\u0646 \u0641\u06a9\u0631 \u0627\u0641\u062a\u0627\u062f\u0645 \u06a9\u0647 \u0627\u06af\u0631 \u0634\u0631\u06a9\u062a\u200c\u06a9\u0646\u0646\u062f\u06af\u0627\u0646 \u0628\u062a\u0648\u0627\u0646\u0646\u062f \u0628\u0627 \u0645\u06cc\u06a9\u0631\u0648\u0641\u0648\u0646 \u0635\u062d\u0628\u062a \u06a9\u0646\u0646\u062f \u0648 \u062f\u06cc\u06af\u0631\u0627\u0646 \u0628\u062a\u0648\u0627\u0646\u0646\u062f \u0622\u0646 \u0631\u0627 \u0628\u0647\u200c\u0639\u0646\u0648\u0627\u0646 \u0632\u0645\u0632\u0645\u0647\u200c\u0647\u0627\u06cc \u0646\u0627\u0645\u0646\u0627\u0633\u0628 \u06cc\u0627 \u0628\u0627\u062f\u0647\u0627\u06cc\u06cc \u06a9\u0647 \u062f\u0631 \u062d\u0627\u0644 \u0639\u0628\u0648\u0631 \u0647\u0633\u062a\u0646\u062f \u0628\u0634\u0646\u0648\u0646\u062f\u060c \u0628\u0633\u06cc\u0627\u0631 \u0639\u0627\u0644\u06cc \u062e\u0648\u0627\u0647\u062f \u0628\u0648\u062f. \u0628\u0627 \u0627\u06cc\u0646 \u062d\u0627\u0644\u060c \u0627\u06cc\u0646 \u0628\u0633\u06cc\u0627\u0631 \u0686\u0627\u0644\u0634 \u0628\u0631\u0627\u0646\u06af\u06cc\u0632 \u0634\u062f \u0648 \u062a\u0635\u0645\u06cc\u0645 \u06af\u0631\u0641\u062a\u0645 \u0622\u0646 \u0631\u0627 \u0628\u0647 \u0637\u0648\u0631 \u06a9\u0627\u0645\u0644 \u06a9\u0646\u0627\u0631 \u0628\u06af\u0630\u0627\u0631\u0645 \u0632\u06cc\u0631\u0627 \u0646\u062a\u0648\u0627\u0646\u0633\u062a\u0645 WebAudio \u0648 WebRTC \u0631\u0627 \u0628\u0647 \u062e\u0648\u0628\u06cc \u0628\u0647 \u0647\u0645 \u0645\u062a\u0635\u0644 \u06a9\u0646\u0645. \u0645\u0646 \u06cc\u06a9 \u062c\u0632\u0621 \u0628\u0627\u0642\u06cc\u0645\u0627\u0646\u062f\u0647 \u062f\u0631 \u067e\u0627\u06cc\u06af\u0627\u0647 \u06a9\u062f \u062f\u0627\u0631\u0645 \u06a9\u0647 \u0628\u0647 \u0645\u06cc\u06a9\u0631\u0648\u0641\u0648\u0646 \u0645\u062d\u0644\u06cc \u06af\u0648\u0634 \u0645\u06cc \u062f\u0647\u062f \u0648 \u0627\u06af\u0631 \u0645\u06cc \u062e\u0648\u0627\u0647\u06cc\u062f \u0646\u06af\u0627\u0647\u06cc \u0628\u06cc\u0646\u062f\u0627\u0632\u06cc\u062f\u060c “\u0635\u062f\u0627\u06cc \u0628\u0627\u062f” \u0631\u0627 \u0628\u0631\u0627\u06cc \u06a9\u0627\u0631\u0628\u0631 \u0641\u0639\u0644\u06cc \u0627\u06cc\u062c\u0627\u062f \u0645\u06cc \u06a9\u0646\u062f. \u0634\u0627\u06cc\u062f \u062f\u0631 \u0622\u06cc\u0646\u062f\u0647 \u0686\u06cc\u0632\u06cc \u0627\u0636\u0627\u0641\u0647 \u0634\u0648\u062f\u061f<\/p>\n

\u0627\u062a\u0627\u0642 \u0647\u0627\u06cc \u0628\u06cc\u062f\u0631\u0646\u06af<\/p>\n

\u0642\u0628\u0644 \u0627\u0632 \u06a9\u0627\u0631 \u0631\u0648\u06cc \u0647\u0631 \u0686\u06cc\u0632 \u0628\u0635\u0631\u06cc\u060c \u0645\u06cc\u200c\u062e\u0648\u0627\u0633\u062a\u0645 \u062a\u0646\u0638\u06cc\u0645\u0627\u062a \u0628\u06cc\u062f\u0631\u0646\u06af \u0631\u0627 \u06a9\u0647 \u062f\u0631 \u0630\u0647\u0646 \u062f\u0627\u0634\u062a\u0645 \u0622\u0632\u0645\u0627\u06cc\u0634 \u06a9\u0646\u0645. \u0627\u0632 \u0622\u0646\u062c\u0627\u06cc\u06cc \u06a9\u0647 \u062f\u0631 \u0648\u06cc\u0698\u06af\u06cc \u0628\u0644\u0627\u062f\u0631\u0646\u06af \u0645\u062d\u062f\u0648\u062f\u06cc\u062a\u200c\u0647\u0627\u06cc\u06cc \u0648\u062c\u0648\u062f \u062f\u0627\u0631\u062f\u060c \u0645\u06cc\u200c\u062e\u0648\u0627\u0633\u062a\u0645 \u0627\u06cc\u0646 \u0648\u06cc\u0698\u06af\u06cc \u06a9\u0627\u0631 \u06a9\u0646\u062f:<\/p>\n

\u062d\u062f\u0627\u06a9\u062b\u0631 \u0648\u062c\u0648\u062f \u062f\u0627\u0631\u062f. 10 \u0634\u0631\u06a9\u062a \u06a9\u0646\u0646\u062f\u0647 \u062f\u0631 \u06cc\u06a9 \u06a9\u0627\u0646\u0627\u0644 \u062f\u0631 \u06cc\u06a9 \u0632\u0645\u0627\u0646<\/p>\n

\u0628\u0647 \u0627\u06cc\u0646 \u0645\u0639\u0646\u06cc \u06a9\u0647 \u0627\u06af\u0631 \u06a9\u0627\u0646\u0627\u0644 \u067e\u0631 \u0627\u0633\u062a\u060c \u0628\u0627\u06cc\u062f \u0628\u0647 \u06cc\u06a9 \u06a9\u0627\u0646\u0627\u0644 \u062c\u062f\u06cc\u062f \u0628\u067e\u06cc\u0648\u0646\u062f\u06cc\u062f<\/p>\n

\u0634\u0645\u0627 \u0641\u0642\u0637 \u0628\u0627\u06cc\u062f \u0686\u0634\u0645 \u0633\u0627\u06cc\u0631 \u0634\u0631\u06a9\u062a \u06a9\u0646\u0646\u062f\u06af\u0627\u0646 \u0631\u0627 \u0628\u0628\u06cc\u0646\u06cc\u062f<\/p>\n

\u0628\u0631\u0627\u06cc \u0627\u06cc\u0646 \u0645\u0646 \u0622\u0645\u062f\u0645 \u0628\u0627 \u06cc\u06a9 useEffect \u0631\u0627\u0647 \u0627\u0646\u062f\u0627\u0632\u06cc \u062c\u0627\u06cc\u06cc \u06a9\u0647 \u0628\u0647 \u0635\u0648\u0631\u062a \u0628\u0627\u0632\u06af\u0634\u062a\u06cc \u0628\u0647 \u06cc\u06a9 \u06a9\u0627\u0646\u0627\u0644 \u0628\u06cc\u062f\u0631\u0646\u06af \u0645\u0627\u0646\u0646\u062f \u0627\u06cc\u0646 \u0645\u06cc \u067e\u06cc\u0648\u0646\u062f\u062f:<\/p>\n

\u0648\u0627\u0631\u062f \u062d\u0627\u0644\u062a \u062a\u0645\u0627\u0645 \u0635\u0641\u062d\u0647 \u0634\u0648\u06cc\u062f<\/p>\n

\u0627\u0632 \u062d\u0627\u0644\u062a \u062a\u0645\u0627\u0645 \u0635\u0641\u062d\u0647 \u062e\u0627\u0631\u062c \u0634\u0648\u06cc\u062f<\/p>\n

\u0627\u06cc\u0646 joinRoom \u062f\u0631 \u062f\u0627\u062e\u0644 \u0632\u0646\u062f\u06af\u06cc \u0645\u06cc \u06a9\u0646\u062f useEffect \u0642\u0644\u0627\u0628 \u0648 \u0647\u0646\u06af\u0627\u0645\u06cc \u06a9\u0647 \u062c\u0632\u0621 \u0627\u062a\u0627\u0642 \u0646\u0635\u0628 \u0634\u062f\u0647 \u0628\u0627\u0634\u062f \u0641\u0631\u0627\u062e\u0648\u0627\u0646\u06cc \u0645\u06cc \u0634\u0648\u062f. \u06cc\u06a9\u06cc \u0627\u0632 \u0646\u06a9\u0627\u062a\u06cc \u06a9\u0647 \u0647\u0646\u06af\u0627\u0645 \u06a9\u0627\u0631 \u0628\u0631 \u0631\u0648\u06cc \u0627\u06cc\u0646 \u0648\u06cc\u0698\u06af\u06cc \u0645\u062a\u0648\u062c\u0647 \u0634\u062f\u0645 \u0627\u06cc\u0646 \u0628\u0648\u062f \u06a9\u0647 currentPresences param \u0647\u06cc\u0686 \u0645\u0642\u062f\u0627\u0631\u06cc \u062f\u0631 \u0622\u0646 \u0646\u062f\u0627\u0631\u062f join \u0631\u0648\u06cc\u062f\u0627\u062f \u062d\u062a\u06cc \u0627\u06af\u0631 \u062f\u0631 \u062f\u0633\u062a\u0631\u0633 \u0628\u0627\u0634\u062f. \u0645\u0646 \u0645\u0637\u0645\u0626\u0646 \u0646\u06cc\u0633\u062a\u0645 \u06a9\u0647 \u0627\u06cc\u0646 \u06cc\u06a9 \u0627\u0634\u06a9\u0627\u0644 \u062f\u0631 \u067e\u06cc\u0627\u062f\u0647 \u0633\u0627\u0632\u06cc \u0627\u0633\u062a \u06cc\u0627 \u0647\u0645\u0627\u0646\u0637\u0648\u0631 \u06a9\u0647 \u062f\u0631 \u0646\u0638\u0631 \u06af\u0631\u0641\u062a\u0647 \u0634\u062f\u0647 \u06a9\u0627\u0631 \u0645\u06cc \u06a9\u0646\u062f. \u0627\u0632 \u0627\u06cc\u0646 \u0631\u0648 \u0646\u06cc\u0627\u0632 \u0628\u0647 \u0627\u0646\u062c\u0627\u0645 \u06cc\u06a9 \u06a9\u062a\u0627\u0628\u0686\u0647 \u0631\u0627\u0647\u0646\u0645\u0627\u06cc \u06a9\u0627\u0631\u0628\u0631 room.presenceState \u0648\u0627\u06a9\u0634\u06cc \u06a9\u0646\u06cc\u062f \u062a\u0627 \u0647\u0631 \u0632\u0645\u0627\u0646 \u06a9\u0647 \u06a9\u0627\u0631\u0628\u0631 \u0645\u06cc\u200c\u067e\u06cc\u0648\u0646\u062f\u062f\u060c \u062a\u0639\u062f\u0627\u062f \u0634\u0631\u06a9\u062a\u200c\u06a9\u0646\u0646\u062f\u06af\u0627\u0646 \u062f\u0631 \u0627\u062a\u0627\u0642 \u0631\u0627 \u062f\u0631\u06cc\u0627\u0641\u062a \u06a9\u0646\u06cc\u062f.<\/p>\n

\u062a\u0639\u062f\u0627\u062f \u0634\u0631\u06a9\u062a\u200c\u06a9\u0646\u0646\u062f\u06af\u0627\u0646 \u0631\u0627 \u0628\u0631\u0631\u0633\u06cc \u0645\u06cc\u200c\u06a9\u0646\u06cc\u0645 \u0648 \u06cc\u0627 \u0627\u0634\u062a\u0631\u0627\u06a9 \u0627\u062a\u0627\u0642 \u0641\u0639\u0644\u06cc \u0631\u0627 \u0644\u063a\u0648 \u0645\u06cc\u200c\u06a9\u0646\u06cc\u0645 \u0648 \u0633\u0639\u06cc \u0645\u06cc\u200c\u06a9\u0646\u06cc\u0645 \u0628\u0647 \u0627\u062a\u0627\u0642 \u062f\u06cc\u06af\u0631\u06cc \u0628\u067e\u06cc\u0648\u0646\u062f\u06cc\u0645\u060c \u06cc\u0627 \u0633\u067e\u0633 \u0628\u0647 \u0627\u062a\u0627\u0642 \u0641\u0639\u0644\u06cc \u0627\u062f\u0627\u0645\u0647 \u0645\u06cc\u200c\u062f\u0647\u06cc\u0645. \u0645\u0627 \u0627\u06cc\u0646 \u06a9\u0627\u0631 \u0631\u0627 \u062f\u0631 join \u0631\u0648\u06cc\u062f\u0627\u062f \u0628\u0647 \u0639\u0646\u0648\u0627\u0646 sync \u062e\u06cc\u0644\u06cc \u062f\u06cc\u0631 \u0645\u06cc \u0634\u0648\u062f (\u0628\u0639\u062f \u0627\u0632 \u0622\u0646 \u0634\u0631\u0648\u0639 \u0645\u06cc \u0634\u0648\u062f join \u06cc\u0627 leave \u0631\u0648\u06cc\u062f\u0627\u062f\u0647\u0627).<\/p>\n

\u0645\u0646 \u0627\u06cc\u0646 \u067e\u06cc\u0627\u062f\u0647 \u0633\u0627\u0632\u06cc \u0631\u0627 \u0628\u0627 \u0628\u0627\u0632 \u06a9\u0631\u062f\u0646 \u062a\u0639\u062f\u0627\u062f \u0632\u06cc\u0627\u062f\u06cc \u062a\u0628 \u062f\u0631 \u0645\u0631\u0648\u0631\u06af\u0631\u0645 \u0622\u0632\u0645\u0627\u06cc\u0634 \u06a9\u0631\u062f\u0645 \u0648 \u0628\u0647 \u0646\u0638\u0631 \u0645\u06cc \u0631\u0633\u06cc\u062f \u06a9\u0647 \u0647\u0645\u0647 \u0645\u062a\u0648\u0631\u0645 \u0634\u062f\u0647 \u0627\u0646\u062f!<\/p>\n

\u0628\u0639\u062f \u0627\u0632 \u0622\u0646 \u0645\u06cc \u062e\u0648\u0627\u0633\u062a\u0645 \u0631\u0627\u0647 \u062d\u0644 \u0631\u0627 \u0628\u0627 \u0628\u0647 \u0631\u0648\u0632 \u0631\u0633\u0627\u0646\u06cc \u0645\u0648\u0642\u0639\u06cc\u062a \u0645\u0627\u0648\u0633 \u0627\u0634\u06a9\u0627\u0644 \u0632\u062f\u0627\u06cc\u06cc \u06a9\u0646\u0645 \u0648 \u0628\u0647 \u0633\u0631\u0639\u062a \u0628\u0627 \u0645\u0634\u06a9\u0644\u0627\u062a \u0627\u0631\u0633\u0627\u0644 \u067e\u06cc\u0627\u0645 \u0647\u0627\u06cc \u0632\u06cc\u0627\u062f \u062f\u0631 \u06a9\u0627\u0646\u0627\u0644 \u0645\u0648\u0627\u062c\u0647 \u0634\u062f\u0645! \u0631\u0627\u0647 \u062d\u0644: \u062a\u0645\u0627\u0633 \u0647\u0627 \u0631\u0627 \u06a9\u0627\u0647\u0634 \u062f\u0647\u06cc\u062f.<\/p>\n

\/**
\n * Creates a throttled version of a function that can only be called at most once
\n * in the specified time period.
\n *\/
\nfunction createThrottledFunction<T extends (…args: unknown[]) => unknown>(
\n functionToThrottle: T,
\n waitTimeMs: number
\n): (…args: Parameters<T>) => void {
\n let isWaitingToExecute = false<\/p>\n

return function throttledFunction(…args: Parameters<T>) {
\n if (!isWaitingToExecute) {
\n functionToThrottle.apply(this, args)
\n isWaitingToExecute = true
\n setTimeout(() => {
\n isWaitingToExecute = false
\n }, waitTimeMs)
\n }
\n }
\n}<\/p>\n

\u0648\u0627\u0631\u062f \u062d\u0627\u0644\u062a \u062a\u0645\u0627\u0645 \u0635\u0641\u062d\u0647 \u0634\u0648\u06cc\u062f<\/p>\n

\u0627\u0632 \u062d\u0627\u0644\u062a \u062a\u0645\u0627\u0645 \u0635\u0641\u062d\u0647 \u062e\u0627\u0631\u062c \u0634\u0648\u06cc\u062f<\/p>\n

\u0645\u06a9\u0627\u0646 \u0646\u0645\u0627 \u0628\u0627 \u0627\u06cc\u0646 \u0633\u0627\u0632\u0646\u062f\u0647 \u0639\u0645\u0644\u06a9\u0631\u062f \u06a9\u0648\u0686\u06a9 \u062f\u0631\u06cc\u0686\u0647 \u06af\u0627\u0632 \u0622\u0645\u062f \u0648 \u0645\u0646 \u0627\u0632 \u0622\u0646 \u0628\u0627 \u067e\u062e\u0634 \u0647\u0627\u06cc \u0631\u062f\u06cc\u0627\u0628\u06cc \u0686\u0634\u0645 \u0645\u0627\u0646\u0646\u062f \u0632\u06cc\u0631 \u0627\u0633\u062a\u0641\u0627\u062f\u0647 \u06a9\u0631\u062f\u0645:<\/p>\n

const throttledBroadcast = createThrottledFunction((data: EyeTrackingData) => {
\n if (currentChannel) {
\n currentChannel.send({
\n type: ‘broadcast’,
\n event: ‘eye_tracking’,
\n payload: data
\n })
\n }
\n}, THROTTLE_MS)<\/p>\n

throttledBroadcast({
\n userId: userId.current,
\n isBlinking: isCurrentlyBlinking,
\n gazeX,
\n gazeY
\n})<\/p>\n

\u0648\u0627\u0631\u062f \u062d\u0627\u0644\u062a \u062a\u0645\u0627\u0645 \u0635\u0641\u062d\u0647 \u0634\u0648\u06cc\u062f<\/p>\n

\u0627\u0632 \u062d\u0627\u0644\u062a \u062a\u0645\u0627\u0645 \u0635\u0641\u062d\u0647 \u062e\u0627\u0631\u062c \u0634\u0648\u06cc\u062f<\/p>\n

\u0627\u06cc\u0646 \u062e\u06cc\u0644\u06cc \u06a9\u0645\u06a9 \u06a9\u0631\u062f! \u0647\u0645\u0686\u0646\u06cc\u0646\u060c \u062f\u0631 \u0646\u0633\u062e\u0647 \u0647\u0627\u06cc \u0627\u0648\u0644\u06cc\u0647\u060c \u067e\u06cc\u0627\u0645 \u0647\u0627\u06cc \u0631\u062f\u06cc\u0627\u0628\u06cc \u0686\u0634\u0645 \u0631\u0627 \u062f\u0627\u0634\u062a\u0645 presence \u0628\u0627 \u0627\u06cc\u0646 \u062d\u0627\u0644 broadcast \u0628\u0647 \u067e\u06cc\u0627\u0645\u200c\u0647\u0627\u06cc \u0628\u06cc\u0634\u062a\u0631\u06cc \u062f\u0631 \u062b\u0627\u0646\u06cc\u0647 \u0627\u062c\u0627\u0632\u0647 \u0645\u06cc\u200c\u062f\u0647\u062f\u060c \u0628\u0646\u0627\u0628\u0631\u0627\u06cc\u0646 \u0628\u0647 \u062c\u0627\u06cc \u0622\u0646 \u067e\u06cc\u0627\u062f\u0647\u200c\u0633\u0627\u0632\u06cc \u0631\u0627 \u0628\u0647 \u0622\u0646 \u062a\u063a\u06cc\u06cc\u0631 \u062f\u0627\u062f\u0645. \u0627\u06cc\u0646 \u0628\u0647 \u0648\u06cc\u0698\u0647 \u062f\u0631 \u0631\u062f\u06cc\u0627\u0628\u06cc \u0686\u0634\u0645 \u0628\u0633\u06cc\u0627\u0631 \u0645\u0647\u0645 \u0627\u0633\u062a \u0632\u06cc\u0631\u0627 \u062f\u0648\u0631\u0628\u06cc\u0646 \u0647\u0645\u06cc\u0634\u0647 \u0647\u0645\u0647 \u0686\u06cc\u0632 \u0631\u0627 \u0636\u0628\u0637 \u0645\u06cc \u06a9\u0646\u062f.<\/p>\n

\u0631\u062f\u06cc\u0627\u0628\u06cc \u0686\u0634\u0645<\/p>\n

\u0632\u0645\u0627\u0646\u06cc \u06a9\u0647 \u0628\u0631\u0627\u06cc \u0627\u0648\u0644\u06cc\u0646 \u0628\u0627\u0631 \u0627\u06cc\u062f\u0647 \u0627\u06cc\u0646 \u067e\u0631\u0648\u0698\u0647 \u0631\u0627 \u062f\u0627\u0634\u062a\u0645\u060c \u0628\u0627 WebGazer.js \u0628\u0631\u062e\u0648\u0631\u062f \u06a9\u0631\u062f\u0645. \u0627\u06cc\u0646 \u06cc\u06a9 \u067e\u0631\u0648\u0698\u0647 \u0628\u0633\u06cc\u0627\u0631 \u062c\u0627\u0644\u0628 \u0627\u0633\u062a \u0648 \u0628\u0647 \u0637\u0631\u0632 \u0634\u06af\u0641\u062a \u0627\u0646\u06af\u06cc\u0632\u06cc \u062e\u0648\u0628 \u06a9\u0627\u0631 \u0645\u06cc \u06a9\u0646\u062f!<\/p>\n

\u06a9\u0644 \u0642\u0627\u0628\u0644\u06cc\u062a \u0647\u0627\u06cc \u0631\u062f\u06cc\u0627\u0628\u06cc \u0686\u0634\u0645 \u062f\u0631 \u06cc\u06a9 \u0639\u0645\u0644\u06a9\u0631\u062f \u062f\u0631 \u06cc\u06a9 \u0627\u0646\u062c\u0627\u0645 \u0645\u06cc \u0634\u0648\u062f useEffect \u0642\u0644\u0627\u0628:<\/p>\n

window.webgazer
\n .setGazeListener(async (data: any) => {
\n if (data == null || !currentChannel || !ctxRef.current) return<\/p>\n

try {
\n \/\/ Get normalized gaze coordinates
\n const gazeX = data.x \/ windowSize.width
\n const gazeY = data.y \/ windowSize.height<\/p>\n

\/\/ Get video element
\n const videoElement = document.getElementById(‘webgazerVideoFeed’) as HTMLVideoElement
\n if (!videoElement) {
\n console.error(‘WebGazer video element not found’)
\n return
\n }<\/p>\n

\/\/ Set canvas size to match video
\n imageCanvasRef.current.width = videoElement.videoWidth
\n imageCanvasRef.current.height = videoElement.videoHeight<\/p>\n

\/\/ Draw current frame to canvas
\n ctxRef.current?.drawImage(videoElement, 0, 0)<\/p>\n

\/\/ Get eye patches
\n const tracker = window.webgazer.getTracker()
\n const patches = await tracker.getEyePatches(
\n videoElement,
\n imageCanvasRef.current,
\n videoElement.videoWidth,
\n videoElement.videoHeight
\n )<\/p>\n

if (!patches?.right?.patch?.data || !patches?.left?.patch?.data) {
\n console.error(‘No eye patches detected’)
\n return
\n }<\/p>\n

\/\/ Calculate brightness for each eye
\n const calculateBrightness = (imageData: ImageData) => {
\n let total = 0<\/p>\n

for (let i = 0; i < imageData.data.length; i += 16) {
\n \/\/ Convert RGB to grayscale
\n const r = imageData.data[i]\n const g = imageData.data[i + 1]\n const b = imageData.data[i + 2]\n total += (r + g + b) \/ 3
\n }
\n return total \/ (imageData.width * imageData.height \/ 4)
\n }<\/p>\n

const rightEyeBrightness = calculateBrightness(patches.right.patch)
\n const leftEyeBrightness = calculateBrightness(patches.left.patch)
\n const avgBrightness = (rightEyeBrightness + leftEyeBrightness) \/ 2<\/p>\n

\/\/ Update rolling average
\n if (brightnessSamples.current.length >= SAMPLES_SIZE) {
\n brightnessSamples.current.shift() \/\/ Remove oldest sample
\n }
\n brightnessSamples.current.push(avgBrightness)<\/p>\n

\/\/ Calculate dynamic threshold from rolling average
\n const rollingAverage = brightnessSamples.current.reduce((a, b) => a + b, 0) \/ brightnessSamples.current.length
\n const dynamicThreshold = rollingAverage * THRESHOLD_MULTIPLIER
\n \/\/ Detect blink using dynamic threshold
\n const blinkDetected = avgBrightness > dynamicThreshold<\/p>\n

\/\/ Debounce blink detection to avoid rapid changes
\n if (blinkDetected !== isCurrentlyBlinking) {
\n const now = Date.now()
\n if (now – lastBlinkTime > 100) { \/\/ Minimum time between blink state changes
\n isCurrentlyBlinking = blinkDetected
\n lastBlinkTime = now
\n }
\n }<\/p>\n

\/\/ Use throttled broadcast instead of direct send
\n throttledBroadcast({
\n userId: userId.current,
\n isBlinking: isCurrentlyBlinking,
\n gazeX,
\n gazeY
\n })<\/p>\n

} catch (error) {
\n console.error(‘Error processing gaze data:’, error)
\n }
\n })<\/p>\n

\u0648\u0627\u0631\u062f \u062d\u0627\u0644\u062a \u062a\u0645\u0627\u0645 \u0635\u0641\u062d\u0647 \u0634\u0648\u06cc\u062f<\/p>\n

\u0627\u0632 \u062d\u0627\u0644\u062a \u062a\u0645\u0627\u0645 \u0635\u0641\u062d\u0647 \u062e\u0627\u0631\u062c \u0634\u0648\u06cc\u062f<\/p>\n

\u062f\u0631\u06cc\u0627\u0641\u062a \u0627\u0637\u0644\u0627\u0639\u0627\u062a \u0627\u0632 \u062c\u0627\u06cc\u06cc \u06a9\u0647 \u06a9\u0627\u0631\u0628\u0631 \u0628\u0647 \u0622\u0646 \u0646\u06af\u0627\u0647 \u0645\u06cc \u06a9\u0646\u062f \u0633\u0627\u062f\u0647 \u0627\u0633\u062a \u0648 \u0645\u0627\u0646\u0646\u062f \u06af\u0631\u0641\u062a\u0646 \u0645\u0648\u0642\u0639\u06cc\u062a \u0647\u0627\u06cc \u0645\u0627\u0648\u0633 \u0631\u0648\u06cc \u0635\u0641\u062d\u0647 \u0639\u0645\u0644 \u0645\u06cc \u06a9\u0646\u062f. \u0628\u0627 \u0627\u06cc\u0646 \u062d\u0627\u0644\u060c \u0645\u0646 \u0647\u0645\u0686\u0646\u06cc\u0646 \u0645\u06cc\u200c\u062e\u0648\u0627\u0633\u062a\u0645 \u062a\u0634\u062e\u06cc\u0635 \u067e\u0644\u06a9 \u0632\u062f\u0646 \u0631\u0627 \u0628\u0647 \u0639\u0646\u0648\u0627\u0646 (\u06cc\u06a9 \u0648\u06cc\u0698\u06af\u06cc \u062c\u0627\u0644\u0628) \u0627\u0636\u0627\u0641\u0647 \u06a9\u0646\u0645\u060c \u06a9\u0647 \u0646\u06cc\u0627\u0632 \u0628\u0647 \u067e\u0631\u0634 \u0627\u0632 \u0645\u06cc\u0627\u0646 \u062d\u0644\u0642\u0647\u200c\u0647\u0627 \u062f\u0627\u0634\u062a.<\/p>\n

\u0647\u0646\u06af\u0627\u0645\u06cc \u06a9\u0647 \u0627\u0637\u0644\u0627\u0639\u0627\u062a \u0645\u0631\u0628\u0648\u0637 \u0628\u0647 WebGazer \u0631\u0627 \u062f\u0631 \u06af\u0648\u06af\u0644 \u062c\u0633\u062a\u062c\u0648 \u0645\u06cc \u06a9\u0646\u06cc\u062f \u0648 \u062a\u0634\u062e\u06cc\u0635 \u0686\u0634\u0645\u06a9 \u0645\u06cc \u0632\u0646\u06cc\u062f\u060c \u0645\u06cc \u062a\u0648\u0627\u0646\u06cc\u062f \u0628\u0631\u062e\u06cc \u0627\u0632 \u0628\u0627\u0632\u0645\u0627\u0646\u062f\u0647 \u0647\u0627\u06cc \u0627\u062c\u0631\u0627\u06cc \u0627\u0648\u0644\u06cc\u0647 \u0631\u0627 \u0645\u0634\u0627\u0647\u062f\u0647 \u06a9\u0646\u06cc\u062f. \u0645\u062b\u0644 \u0627\u06cc\u0646\u06a9\u0647 \u06a9\u062f\u0647\u0627\u06cc \u0646\u0638\u0631 \u062f\u0627\u062f\u0647 \u0634\u062f\u0647 \u062f\u0631 \u0645\u0646\u0628\u0639 \u062d\u062a\u06cc \u0648\u062c\u0648\u062f \u062f\u0627\u0631\u062f. \u0645\u062a\u0623\u0633\u0641\u0627\u0646\u0647 \u0627\u06cc\u0646 \u0646\u0648\u0639 \u0642\u0627\u0628\u0644\u06cc\u062a \u0647\u0627 \u062f\u0631 \u06a9\u062a\u0627\u0628\u062e\u0627\u0646\u0647 \u062e\u0627\u0631\u062c \u0646\u0645\u06cc \u0634\u0648\u0646\u062f. \u0634\u0645\u0627 \u0628\u0627\u06cc\u062f \u0627\u06cc\u0646 \u06a9\u0627\u0631 \u0631\u0627 \u0628\u0647 \u0635\u0648\u0631\u062a \u062f\u0633\u062a\u06cc \u0627\u0646\u062c\u0627\u0645 \u062f\u0647\u06cc\u062f.<\/p>\n

\u067e\u0633 \u0627\u0632 \u0622\u0632\u0645\u0648\u0646 \u0648 \u062e\u0637\u0627\u06cc \u0641\u0631\u0627\u0648\u0627\u0646\u060c \u0645\u0646 \u0648 \u0645\u06a9\u0627\u0646\u200c\u0646\u0645\u0627 \u062a\u0648\u0627\u0646\u0633\u062a\u06cc\u0645 \u0631\u0627\u0647\u200c\u062d\u0644\u06cc \u0627\u0631\u0627\u0626\u0647 \u06a9\u0646\u06cc\u0645 \u06a9\u0647 \u067e\u06cc\u06a9\u0633\u0644\u200c\u0647\u0627 \u0648 \u0633\u0637\u0648\u062d \u0631\u0648\u0634\u0646\u0627\u06cc\u06cc \u0631\u0627 \u0627\u0632 \u062f\u0627\u062f\u0647\u200c\u0647\u0627\u06cc \u067e\u0686 \u0686\u0634\u0645 \u0645\u062d\u0627\u0633\u0628\u0647 \u0645\u06cc\u200c\u06a9\u0646\u062f \u062a\u0627 \u0645\u0634\u062e\u0635 \u0634\u0648\u062f \u06a9\u0627\u0631\u0628\u0631 \u0686\u0647 \u0632\u0645\u0627\u0646\u06cc \u0686\u0634\u0645\u06a9 \u0645\u06cc\u200c\u0632\u0646\u062f. \u0647\u0645\u0686\u0646\u06cc\u0646 \u062f\u0627\u0631\u0627\u06cc \u0628\u0631\u062e\u06cc \u062a\u0646\u0638\u06cc\u0645\u0627\u062a \u0646\u0648\u0631 \u067e\u0648\u06cc\u0627 \u0627\u0633\u062a \u0632\u06cc\u0631\u0627 \u0645\u062a\u0648\u062c\u0647 \u0634\u062f\u0645 \u06a9\u0647 (\u062d\u062f\u0627\u0642\u0644 \u0628\u0631\u0627\u06cc \u0645\u0646) \u0648\u0628 \u06a9\u0645 \u0628\u0633\u062a\u0647 \u0628\u0647 \u0646\u0648\u0631 \u0634\u0645\u0627 \u0647\u0645\u06cc\u0634\u0647 \u062a\u0634\u062e\u06cc\u0635 \u0646\u0645\u06cc \u062f\u0647\u062f \u06a9\u0647 \u0634\u0645\u0627 \u0686\u0647 \u0632\u0645\u0627\u0646\u06cc \u0686\u0634\u0645\u06a9 \u0645\u06cc \u0632\u0646\u06cc\u062f. \u0628\u0631\u0627\u06cc \u0645\u0646\u060c \u0647\u0631 \u0686\u0647 \u062a\u0635\u0648\u06cc\u0631\/\u0627\u062a\u0627\u0642 \u0645\u0646 \u0631\u0648\u0634\u0646\u200c\u062a\u0631 \u0628\u0627\u0634\u062f\u060c \u0628\u062f\u062a\u0631 \u06a9\u0627\u0631 \u0645\u06cc\u200c\u06a9\u0646\u062f \u0648 \u062f\u0631 \u0646\u0648\u0631 \u062a\u0627\u0631\u06cc\u06a9\u200c\u062a\u0631 \u0628\u0647\u062a\u0631 \u0639\u0645\u0644 \u0645\u06cc\u200c\u06a9\u0646\u062f.<\/p>\n

\u0647\u0646\u06af\u0627\u0645 \u0627\u0634\u06a9\u0627\u0644 \u0632\u062f\u0627\u06cc\u06cc \u0642\u0627\u0628\u0644\u06cc\u062a \u0647\u0627\u06cc \u0631\u062f\u06cc\u0627\u0628\u06cc \u0686\u0634\u0645 (WebGazer \u062f\u0627\u0631\u0627\u06cc \u0648\u06cc\u0698\u06af\u06cc \u0647\u0627\u06cc \u0628\u0633\u06cc\u0627\u0631 \u062e\u0648\u0628\u06cc \u0627\u0633\u062a .setPredictionPoints \u062a\u0645\u0627\u0633\u06cc \u06a9\u0647 \u06cc\u06a9 \u0646\u0642\u0637\u0647 \u0642\u0631\u0645\u0632 \u0631\u0627 \u0631\u0648\u06cc \u0635\u0641\u062d\u0647 \u0646\u0645\u0627\u06cc\u0634 \u0645\u06cc \u062f\u0647\u062f \u062a\u0627 \u062c\u0627\u06cc\u06cc \u06a9\u0647 \u0634\u0645\u0627 \u0628\u0647 \u0622\u0646 \u0646\u06af\u0627\u0647 \u0645\u06cc \u06a9\u0646\u06cc\u062f \u062a\u062c\u0633\u0645 \u06a9\u0646\u06cc\u062f)\u060c \u0645\u062a\u0648\u062c\u0647 \u0634\u062f\u0645 \u06a9\u0647 \u0631\u062f\u06cc\u0627\u0628\u06cc \u062e\u06cc\u0644\u06cc \u062f\u0642\u06cc\u0642 \u0646\u06cc\u0633\u062a. \u0645\u06af\u0631 \u0627\u06cc\u0646\u06a9\u0647 \u0622\u0646 \u0631\u0627 \u06a9\u0627\u0644\u06cc\u0628\u0631\u0647 \u06a9\u0646\u06cc\u062f \u06a9\u0627\u0631\u06cc \u06a9\u0647 \u067e\u0631\u0648\u0698\u0647 \u0627\u0632 \u0634\u0645\u0627 \u0645\u06cc \u062e\u0648\u0627\u0647\u062f \u0642\u0628\u0644 \u0627\u0632 \u067e\u06cc\u0648\u0633\u062a\u0646 \u0628\u0647 \u0647\u0631 \u0627\u062a\u0627\u0642\u06cc \u0627\u0646\u062c\u0627\u0645 \u062f\u0647\u06cc\u062f.<\/p>\n

const startCalibration = useCallback(() => {
\n const points: CalibrationPoint[] = [
\n { x: 0.1, y: 0.1 },
\n { x: 0.9, y: 0.1 },
\n { x: 0.5, y: 0.5 },
\n { x: 0.1, y: 0.9 },
\n { x: 0.9, y: 0.9 },
\n ]\n setCalibrationPoints(points)
\n setCurrentPoint(0)
\n setIsCalibrating(true)<\/p>\n

window.webgazer.clearData()
\n }, [])<\/p>\n

const handleCalibrationClick = useCallback((event: React.MouseEvent) => {
\n if (!isCalibrating) return<\/p>\n

\/\/ Record click location for calibration
\n const x = event.clientX
\n const y = event.clientY
\n window.webgazer.recordScreenPosition(x, y, ‘click’)<\/p>\n

if (currentPoint < calibrationPoints.length – 1) {
\n setCurrentPoint(prev => prev + 1)
\n } else {
\n setIsCalibrating(false)
\n setHasCalibrated(true)
\n }
\n }, [isCalibrating, currentPoint, calibrationPoints.length])<\/p>\n

\u0648\u0627\u0631\u062f \u062d\u0627\u0644\u062a \u062a\u0645\u0627\u0645 \u0635\u0641\u062d\u0647 \u0634\u0648\u06cc\u062f<\/p>\n

\u0627\u0632 \u062d\u0627\u0644\u062a \u062a\u0645\u0627\u0645 \u0635\u0641\u062d\u0647 \u062e\u0627\u0631\u062c \u0634\u0648\u06cc\u062f<\/p>\n

{calibrationPoints.map((point, index) => (<\/p>\n

))}<\/p>\n

Click the red dot to calibrate ({currentPoint + 1}\/{calibrationPoints.length})<\/p>\n

\u0648\u0627\u0631\u062f \u062d\u0627\u0644\u062a \u062a\u0645\u0627\u0645 \u0635\u0641\u062d\u0647 \u0634\u0648\u06cc\u062f<\/p>\n

\u0627\u0632 \u062d\u0627\u0644\u062a \u062a\u0645\u0627\u0645 \u0635\u0641\u062d\u0647 \u062e\u0627\u0631\u062c \u0634\u0648\u06cc\u062f<\/p>\n

\u0627\u0633\u0627\u0633\u0627\u064b \u0645\u0627 5 \u0646\u0642\u0637\u0647 \u0631\u0627 \u0631\u0648\u06cc \u0635\u0641\u062d\u0647 \u0646\u0645\u0627\u06cc\u0634 \u0645\u06cc\u200c\u062f\u0647\u06cc\u0645: \u06cc\u06a9\u06cc \u062f\u0631 \u0647\u0631 \u06af\u0648\u0634\u0647 \u0648 \u062f\u06cc\u06af\u0631\u06cc \u062f\u0631 \u0645\u0631\u06a9\u0632. \u0628\u0627 \u06a9\u0644\u06cc\u06a9 \u06a9\u0631\u062f\u0646 \u0631\u0648\u06cc \u0622\u0646\u0647\u0627 \u0645\u0648\u0642\u0639\u06cc\u062a \u0635\u0641\u062d\u0647 \u062f\u0631 WebGazer \u062b\u0628\u062a \u0645\u06cc \u0634\u0648\u062f \u062a\u0627 \u0628\u062a\u0648\u0627\u0646\u062f \u0645\u062f\u0644 \u0631\u0627 \u06a9\u0645\u06cc \u0628\u0647\u062a\u0631 \u062a\u0646\u0638\u06cc\u0645 \u06a9\u0646\u062f \u062a\u0627 \u062c\u0627\u06cc\u06cc \u06a9\u0647 \u0628\u0647 \u062f\u0646\u0628\u0627\u0644 \u0622\u0646 \u0647\u0633\u062a\u06cc\u062f \u0631\u0627 \u067e\u06cc\u0634 \u0628\u06cc\u0646\u06cc \u06a9\u0646\u062f. \u0645\u0645\u06a9\u0646 \u0627\u0633\u062a \u062a\u0639\u062c\u0628 \u06a9\u0646\u06cc\u062f \u06a9\u0647 \u0627\u06cc\u0646 \u06a9\u0644\u06cc\u06a9 \u062f\u0631 \u0648\u0627\u0642\u0639 \u0686\u0647 \u06a9\u0627\u0631\u06cc \u0627\u0646\u062c\u0627\u0645 \u0645\u06cc \u062f\u0647\u062f \u0648 \u0642\u0633\u0645\u062a \u062e\u0646\u062f\u0647 \u062f\u0627\u0631 \u0627\u06cc\u0646 \u0627\u0633\u062a \u06a9\u0647 \u0634\u0645\u0627 \u062f\u0631 \u0648\u0627\u0642\u0639 \u0628\u0647 \u062c\u0627\u06cc\u06cc \u06a9\u0647 \u06a9\u0644\u06cc\u06a9 \u0645\u06cc \u06a9\u0646\u06cc\u062f \u0646\u06af\u0627\u0647 \u0645\u06cc \u06a9\u0646\u06cc\u062f\u060c \u062f\u0631\u0633\u062a \u0627\u0633\u062a\u061f \u0648 \u0628\u0627 \u0627\u0646\u062c\u0627\u0645 \u0627\u06cc\u0646 \u06a9\u0627\u0631\u060c WebGazer \u0645\u06cc \u062a\u0648\u0627\u0646\u062f \u062d\u0631\u06a9\u0627\u062a \u0686\u0634\u0645 \u0634\u0645\u0627 \u0631\u0627 \u06a9\u0645\u06cc \u0628\u0647\u062a\u0631 \u067e\u0631\u062f\u0627\u0632\u0634 \u06a9\u0646\u062f \u0648 \u0646\u062a\u0627\u06cc\u062c \u062f\u0642\u06cc\u0642 \u062a\u0631\u06cc \u0627\u0631\u0627\u0626\u0647 \u062f\u0647\u062f. \u062e\u06cc\u0644\u06cc \u0628\u0627\u062d\u0627\u0644\u0647<\/p>\n

\u0686\u0634\u0645<\/p>\n

\u0645\u0646 \u0642\u0628\u0644\u0627\u064b \u06cc\u06a9 \u067e\u06cc\u0627\u062f\u0647 \u0633\u0627\u0632\u06cc SVG \u0633\u0627\u062f\u0647 \u0628\u0631\u0627\u06cc \u0686\u0634\u0645 \u0627\u0636\u0627\u0641\u0647 \u06a9\u0631\u062f\u0647 \u0628\u0648\u062f\u0645 \u0648 \u0622\u0646 \u0631\u0627 \u0628\u0647 \u0631\u062f\u06cc\u0627\u0628\u06cc \u0645\u062a\u0635\u0644 \u06a9\u0631\u062f\u0647 \u0628\u0648\u062f\u0645\u060c \u0628\u0627 \u0627\u06cc\u0646 \u062d\u0627\u0644 \u0628\u0627\u06cc\u062f \u06a9\u0645\u06cc \u0628\u06cc\u0634\u062a\u0631 \u062a\u0644\u0637\u06cc\u0641 \u0634\u0648\u062f. \u062f\u0631 \u0632\u06cc\u0631 \u06a9\u0645\u06cc \u0646\u062d\u0648\u0647 \u0638\u0627\u0647\u0631 \u0622\u0646 \u0631\u0627 \u0645\u0634\u0627\u0647\u062f\u0647 \u0645\u06cc \u06a9\u0646\u06cc\u062f. \u0627\u0644\u0647\u0627\u0645 \u0628\u062e\u0634 Alucard Eyes \u062a\u0648\u0633\u0637 MIKELopez \u0628\u0648\u062f.<\/p>\n

\u0627\u06cc\u0646 \u06cc\u06a9 \u0646\u0633\u062e\u0647 \u0642\u0628\u0644\u06cc \u0627\u0632 \u0686\u0634\u0645 \u0627\u0633\u062a\u060c \u0627\u0645\u0627 \u062a\u0642\u0631\u06cc\u0628\u0627\u064b 95\u066a \u062f\u0631 \u0622\u0646\u062c\u0627 \u0648\u062c\u0648\u062f \u062f\u0627\u0631\u062f. \u0645\u0646 \u0627\u06cc\u0646 \u0648\u06cc\u062f\u06cc\u0648 \u0631\u0627 \u0628\u0631\u0627\u06cc \u0632\u0648\u062c \u062f\u0648\u0633\u062a\u0627\u0646\u0645 \u0641\u0631\u0633\u062a\u0627\u062f\u0645 \u0648 \u0622\u0646\u0647\u0627 \u0641\u06a9\u0631 \u06a9\u0631\u062f\u0646\u062f \u0628\u0633\u06cc\u0627\u0631 \u062c\u0627\u0644\u0628 \u0627\u0633\u062a\u060c \u0628\u0647 \u062e\u0635\u0648\u0635 \u0648\u0642\u062a\u06cc \u0645\u06cc \u062f\u0627\u0646\u0633\u062a\u0646\u062f \u06a9\u0647 \u062f\u0631 \u0648\u0627\u0642\u0639 \u062d\u0631\u06a9\u0627\u062a \u0686\u0634\u0645 \u0634\u0645\u0627 \u0631\u0627 \u062f\u0646\u0628\u0627\u0644 \u0645\u06cc \u06a9\u0646\u062f! \u0647\u0645\u0686\u0646\u06cc\u0646 \u0645\u06cc\u200c\u062a\u0648\u0627\u0646\u06cc\u062f \u0646\u0642\u0637\u0647 \u067e\u06cc\u0634\u200c\u0628\u06cc\u0646\u06cc WebGazer \u0631\u0627 \u062f\u0631 \u062d\u0627\u0644 \u062d\u0631\u06a9\u062a \u0631\u0648\u06cc \u0635\u0641\u062d\u0647 \u0645\u0634\u0627\u0647\u062f\u0647 \u06a9\u0646\u06cc\u062f.<\/p>\n

\u06a9\u0627\u0645\u067e\u0648\u0646\u0646\u062a \u0686\u0634\u0645 \u062e\u0648\u062f \u06cc\u06a9 SVG \u0628\u0627 \u062a\u0639\u062f\u0627\u062f\u06cc \u0627\u0646\u06cc\u0645\u06cc\u0634\u0646 \u0645\u0633\u06cc\u0631 \u0627\u0632 \u0637\u0631\u06cc\u0642 Motion \u0627\u0633\u062a.<\/p>\n

<svg
\n className={`w-full h-full self-${alignment} max-w-[350px] max-h-[235px]`}
\n viewBox=”-50 0 350 235″
\n preserveAspectRatio=”xMidYMid meet”
\n >
\n {\/* Definitions for gradients and filters *\/}
\n <defs>
\n <filter id=”pupil-blur”>
\n <feGaussianBlur stdDeviation=”0.75″ \/>
\n filter>
\n <radialGradient id=”eyeball-gradient”>
\n <stop offset=”60%” stopColor=”#dcdae0″ \/>
\n <stop offset=”100%” stopColor=”#a8a7ad” \/>
\n radialGradient>
\n <radialGradient
\n id=”pupil-gradient”
\n cx=”0.35″
\n cy=”0.35″
\n r=”0.65″
\n >
\n <stop offset=”0%” stopColor=”#444″ \/>
\n <stop offset=”75%” stopColor=”#000″ \/>
\n <stop offset=”100%” stopColor=”#000″ \/>
\n radialGradient>
\n <radialGradient
\n id=”corner-gradient-left”
\n cx=”0.3″
\n cy=”0.5″
\n r=”0.25″
\n gradientUnits=”objectBoundingBox”
\n >
\n <stop offset=”0%” stopColor=”rgba(0,0,0,0.75)” \/>
\n <stop offset=”100%” stopColor=”rgba(0,0,0,0)” \/>
\n radialGradient><\/p>\n

<radialGradient
\n id=”corner-gradient-right”
\n cx=”0.7″
\n cy=”0.5″
\n r=”0.25″
\n gradientUnits=”objectBoundingBox”
\n >
\n <stop offset=”0%” stopColor=”rgba(0,0,0,0.75)” \/>
\n <stop offset=”100%” stopColor=”rgba(0,0,0,0)” \/>
\n radialGradient><\/p>\n

<filter id=”filter0_f_302_14″ x=”-25″ y=”0″ width=”320″ height=”150″ filterUnits=”userSpaceOnUse” colorInterpolationFilters=”sRGB”>
\n <feGaussianBlur stdDeviation=”4.1″ result=”effect1_foregroundBlur_302_14″\/>
\n filter>
\n <filter id=”filter1_f_302_14″ x=”-25″ y=”85″ width=”320″ height=”150″ filterUnits=”userSpaceOnUse” colorInterpolationFilters=”sRGB”>
\n <feGaussianBlur stdDeviation=”4.1″ result=”effect1_foregroundBlur_302_14″\/>
\n filter>
\n <filter id=”filter2_f_302_14″ x=”-50″ y=”-30″ width=”400″ height=”170″ filterUnits=”userSpaceOnUse” colorInterpolationFilters=”sRGB”>
\n <feGaussianBlur stdDeviation=”7.6″ result=”effect1_foregroundBlur_302_14″\/>
\n filter>
\n <filter id=”filter3_f_302_14″ x=”-50″ y=”95″ width=”400″ height=”170″ filterUnits=”userSpaceOnUse” colorInterpolationFilters=”sRGB”>
\n <feGaussianBlur stdDeviation=”7.6″ result=”effect1_foregroundBlur_302_14″\/>
\n filter>
\n <filter id=”filter4_f_302_14″ x=”0″ y=”-20″ width=”260″ height=”150″ filterUnits=”userSpaceOnUse” colorInterpolationFilters=”sRGB”>
\n <feGaussianBlur stdDeviation=”3.35″ result=”effect1_foregroundBlur_302_14″\/>
\n filter>
\n <filter id=”filter5_f_302_14″ x=”0″ y=”105″ width=”260″ height=”150″ filterUnits=”userSpaceOnUse” colorInterpolationFilters=”sRGB”>
\n <feGaussianBlur stdDeviation=”3.35″ result=”effect1_foregroundBlur_302_14″\/>
\n filter>
\n defs><\/p>\n

{\/* Eyeball *\/}
\n <ellipse
\n cx=”131″
\n cy=”117.5″
\n rx=”100″
\n ry=”65″
\n fill=”url(#eyeball-gradient)”
\n \/><\/p>\n

{\/* After the main eyeball ellipse but before the eyelids, add the corner shadows *\/}
\n <ellipse
\n cx=”50″
\n cy=”117.5″
\n rx=”50″
\n ry=”90″
\n fill=”url(#corner-gradient-left)”
\n \/><\/p>\n

<ellipse
\n cx=”205″
\n cy=”117.5″
\n rx=”50″
\n ry=”90″
\n fill=”url(#corner-gradient-right)”
\n \/><\/p>\n

{\/* Corner reflections – repositioned diagonally *\/}
\n <circle
\n cx={45}
\n cy={135}
\n r=”1.5″
\n fill=”white”
\n className=”opacity-60″
\n \/>
\n <circle
\n cx={215}
\n cy={100}
\n r=”2″
\n fill=”white”
\n className=”opacity-60″
\n \/><\/p>\n

{\/* Smaller companion reflections – repositioned diagonally *\/}
\n <circle
\n cx={35}
\n cy={120}
\n r=”1″
\n fill=”white”
\n className=”opacity-40″
\n \/>
\n <circle
\n cx={222}
\n cy={110}
\n r=”1.5″
\n fill=”white”
\n className=”opacity-40″
\n \/><\/p>\n

{\/* Pupil group with animations *\/}
\n <motion.g
\n variants={pupilVariants}
\n animate={isBlinking ? “hidden” : “visible”}
\n >
\n {\/* Pupil *\/}
\n <motion.ellipse
\n cx={131}
\n cy={117.5}
\n rx=”50″
\n ry=”50″
\n fill=”url(#pupil-gradient)”
\n filter=”url(#pupil-blur)”
\n animate={{
\n cx: 131 + pupilOffsetX,
\n cy: 117.5 + pupilOffsetY
\n }}
\n transition={{
\n type: “spring”,
\n stiffness: 400,
\n damping: 30
\n }}
\n \/><\/p>\n

{\/* Light reflections *\/}
\n <motion.circle
\n cx={111}
\n cy={102.5}
\n r=”5″
\n fill=”white”
\n animate={{
\n cx: 111 + pupilOffsetX,
\n cy: 102.5 + pupilOffsetY
\n }}
\n transition={{
\n type: “spring”,
\n stiffness: 400,
\n damping: 30
\n }}
\n \/>
\n <motion.circle
\n cx={124}
\n cy={102.5}
\n r=”3″
\n fill=”white”
\n animate={{
\n cx: 124 + pupilOffsetX,
\n cy: 102.5 + pupilOffsetY
\n }}
\n transition={{
\n type: “spring”,
\n stiffness: 400,
\n damping: 30
\n }}
\n \/>
\n motion.g><\/p>\n

{\/* Upper eyelid *\/}
\n <motion.path
\n custom={true}
\n variants={eyelidVariants}
\n animate={isBlinking ? “closed” : “open”}
\n fill=”#000″
\n \/><\/p>\n

{\/* Lower eyelid *\/}
\n <motion.path
\n custom={false}
\n variants={eyelidVariants}
\n animate={isBlinking ? “closed” : “open”}
\n fill=”#000″
\n \/><\/p>\n

{\/* Top blurred lines *\/}
\n <g filter=”url(#filter0_f_302_14)”>
\n <motion.path
\n custom={true}
\n variants={blurredLineVariants}
\n animate={isBlinking ? “closed” : “open”}
\n stroke=”#2A2A2A”
\n strokeWidth=”5″
\n strokeLinecap=”round”
\n \/>
\n g>
\n <g filter=”url(#filter2_f_302_14)”>
\n <motion.path
\n custom={true}
\n variants={outerBlurredLineVariants}
\n animate={isBlinking ? “closed” : “open”}
\n stroke=”#777777″
\n strokeWidth=”5″
\n strokeLinecap=”round”
\n \/>
\n g>
\n <g filter=”url(#filter4_f_302_14)”>
\n <motion.path
\n custom={true}
\n variants={arcLineVariants}
\n animate={isBlinking ? “closed” : “open”}
\n stroke=”#838383″
\n strokeWidth=”5″
\n strokeLinecap=”round”
\n \/>
\n g><\/p>\n

{\/* Bottom blurred lines *\/}
\n <g filter=”url(#filter1_f_302_14)”>
\n <motion.path
\n variants={bottomBlurredLineVariants}
\n animate={isBlinking ? “closed” : “open”}
\n stroke=”#2A2A2A”
\n strokeWidth=”5″
\n strokeLinecap=”round”
\n \/>
\n g>
\n <g filter=”url(#filter3_f_302_14)”>
\n <motion.path
\n variants={bottomOuterBlurredLineVariants}
\n animate={isBlinking ? “closed” : “open”}
\n stroke=”#777777″
\n strokeWidth=”5″
\n strokeLinecap=”round”
\n \/>
\n g>
\n <g filter=”url(#filter5_f_302_14)”>
\n <motion.path
\n variants={bottomArcLineVariants}
\n animate={isBlinking ? “closed” : “open”}
\n stroke=”#838383″
\n strokeWidth=”5″
\n strokeLinecap=”round”
\n \/>
\n g>
\n svg><\/p>\n

\u0648\u0627\u0631\u062f \u062d\u0627\u0644\u062a \u062a\u0645\u0627\u0645 \u0635\u0641\u062d\u0647 \u0634\u0648\u06cc\u062f<\/p>\n

\u0627\u0632 \u062d\u0627\u0644\u062a \u062a\u0645\u0627\u0645 \u0635\u0641\u062d\u0647 \u062e\u0627\u0631\u062c \u0634\u0648\u06cc\u062f<\/p>\n

\u0645\u06a9\u0627\u0646 \u0646\u0645\u0627 \u0628\u0647 \u0637\u0631\u0632 \u0634\u06af\u0641\u062a \u0627\u0646\u06af\u06cc\u0632\u06cc \u0628\u0627 \u0645\u0633\u06cc\u0631\u0647\u0627\u06cc SVG \u06a9\u0627\u0631 \u0645\u06cc \u06a9\u0646\u062f. \u0628\u0647 \u0639\u0646\u0648\u0627\u0646 \u0645\u062b\u0627\u0644\u060c \u0627\u0646\u06cc\u0645\u06cc\u0634\u0646 \u0628\u0633\u062a\u0646 \u067e\u0644\u06a9 \u0627\u0633\u0627\u0633\u0627\u064b \u0628\u0627 \u0635\u0627\u0641 \u06a9\u0631\u062f\u0646 \u06cc\u06a9 \u0645\u0633\u06cc\u0631 \u0645\u0646\u062d\u0646\u06cc \u0627\u0646\u062c\u0627\u0645 \u0645\u06cc \u0634\u0648\u062f. \u0645\u0646 \u0628\u0647 \u062a\u0627\u0632\u06af\u06cc \u0645\u0633\u06cc\u0631 \u0631\u0627 \u062f\u0631 \u0648\u06cc\u0631\u0627\u06cc\u0634\u06af\u0631 \u0647\u0627\u06cc\u0644\u0627\u06cc\u062a \u06a9\u0631\u062f\u0647 \u0628\u0648\u062f\u0645\u060c \u0622\u0646 \u0631\u0627 \u062f\u0631 Composer \u0686\u0633\u0628\u0627\u0646\u062f\u0647 \u0628\u0648\u062f\u0645 \u0648 \u062f\u0631\u062e\u0648\u0627\u0633\u062a \u06a9\u0631\u062f\u0645 \u0627\u0646\u06cc\u0645\u06cc\u0634\u0646\u06cc \u0627\u0636\u0627\u0641\u0647 \u06a9\u0646\u0645 \u06a9\u0647 \u0646\u0642\u0627\u0637 \u0631\u0627 \u0635\u0627\u0641 \u06a9\u0646\u062f \u062a\u0627 \u0686\u0634\u0645 \u062f\u0631 \u062d\u0627\u0644 \u0628\u0633\u062a\u0647 \u0634\u062f\u0646\/\u067e\u0644\u06a9 \u0632\u062f\u0646 \u0628\u0647 \u0646\u0638\u0631 \u0628\u0631\u0633\u062f. <\/p>\n

\/\/ Define the open and closed states for both eyelids
\n const upperLidOpen = “M128.5 53.5C59.3 55.5 33 99.6667 28.5 121.5H0V0L261.5 0V121.5H227.5C214.7 65.1 156.167 52.6667 128.5 53.5Z”
\n const upperLidClosed = “M128.5 117.5C59.3 117.5 33 117.5 28.5 117.5H0V0L261.5 0V117.5H227.5C214.7 117.5 156.167 117.5 128.5 117.5Z”<\/p>\n

const lowerLidOpen = “M128.5 181C59.3 179 33 134.833 28.5 113H0V234.5H261.5V113H227.5C214.7 169.4 156.167 181.833 128.5 181Z”
\n const lowerLidClosed = “M128.5 117.5C59.3 117.5 33 117.5 28.5 117.5H0V234.5H261.5V117.5H227.5C214.7 117.5 156.167 117.5 128.5 117.5Z”<\/p>\n

\/\/ Animation variants for the eyelids
\n const eyelidVariants = {
\n open: (isUpper: boolean) => ({
\n d: isUpper ? upperLidOpen : lowerLidOpen,
\n transition: {
\n duration: 0.4,
\n ease: “easeOut”
\n }
\n }),
\n closed: (isUpper: boolean) => ({
\n d: isUpper ? upperLidClosed : lowerLidClosed,
\n transition: {
\n duration: 0.15,
\n ease: “easeIn”
\n }
\n })
\n }<\/p>\n

\u0648\u0627\u0631\u062f \u062d\u0627\u0644\u062a \u062a\u0645\u0627\u0645 \u0635\u0641\u062d\u0647 \u0634\u0648\u06cc\u062f<\/p>\n

\u0627\u0632 \u062d\u0627\u0644\u062a \u062a\u0645\u0627\u0645 \u0635\u0641\u062d\u0647 \u062e\u0627\u0631\u062c \u0634\u0648\u06cc\u062f<\/p>\n

\u062f\u06cc\u062f\u0646 \u0627\u06cc\u0646 \u062f\u0631 \u0639\u0645\u0644 \u062a\u062c\u0631\u0628\u0647 \u0628\u0633\u06cc\u0627\u0631 \u062c\u0627\u0644\u0628\u06cc \u0628\u0648\u062f! \u0645\u0646 \u0647\u0645\u06cc\u0646 \u0631\u0648\u06cc\u06a9\u0631\u062f \u0631\u0627 \u0628\u0631\u0627\u06cc \u062e\u0637\u0648\u0637 \u0627\u0637\u0631\u0627\u0641 \u0627\u0639\u0645\u0627\u0644 \u06a9\u0631\u062f\u0645 \u0648 \u0628\u0647 \u0645\u06a9\u0627\u0646\u200c\u0646\u0645\u0627 \u062f\u0633\u062a\u0648\u0631 \u062f\u0627\u062f\u0645 \u06a9\u0647 \u0622\u0646\u0647\u0627 \u0631\u0627 \u0628\u0647 \u0633\u0645\u062a \u0645\u0631\u06a9\u0632 “\u062c\u0645\u0639 \u06a9\u0646\u062f”: \u06a9\u0647 \u062a\u0642\u0631\u06cc\u0628\u0627\u064b \u0628\u0627 \u06cc\u06a9 \u062d\u0631\u06a9\u062a \u0627\u0646\u062c\u0627\u0645 \u0634\u062f!<\/p>\n

\u0633\u067e\u0633 \u0686\u0634\u0645\u200c\u0647\u0627 \u062f\u0631 \u06cc\u06a9 \u0634\u0628\u06a9\u0647 CSS \u0633\u0627\u062f\u0647 \u0628\u0627 \u0633\u0644\u0648\u0644\u200c\u0647\u0627\u06cc \u062a\u0631\u0627\u0632 \u0634\u062f\u0647 \u0628\u0647\u200c\u06af\u0648\u0646\u0647\u200c\u0627\u06cc \u0646\u0645\u0627\u06cc\u0634 \u062f\u0627\u062f\u0647 \u0645\u06cc\u200c\u0634\u0648\u0646\u062f \u06a9\u0647 \u06cc\u06a9 \u0627\u062a\u0627\u0642 \u06a9\u0627\u0645\u0644 \u0634\u0628\u06cc\u0647 \u06cc\u06a9 \u0686\u0634\u0645 \u0628\u0632\u0631\u06af \u0628\u0647 \u0646\u0638\u0631 \u0628\u0631\u0633\u062f.<\/p>\n

<div className=”fixed inset-0 grid grid-cols-3 grid-rows-3 gap-4 p-8 md:gap-2 md:p-4 lg:max-w-6xl lg:mx-auto”>
\n {Object.entries(roomState.participants).map(([key, presences]) => {
\n const participant = presences[0]\n const eyeData = eyeTrackingState[key]\n if (key === userId.current) return null<\/p>\n

return (
\n <div
\n key={key}
\n className={`flex items-center justify-center ${getGridClass(participant.position)}`}
\n >
\n <Eyes
\n isBlinking={eyeData?.isBlinking ?? false}
\n gazeX={eyeData?.gazeX ?? 0.5}
\n gazeY={eyeData?.gazeY ?? 0.5}
\n alignment={getEyeAlignment(participant.position)}
\n \/>
\n <\/div>
\n )
\n })}
\n <\/div><\/p>\n

\/\/ Helper function to convert position to Tailwind grid classes
\nfunction getGridClass(position: string): string {
\n switch (position) {
\n case ‘center’: return ‘col-start-2 row-start-2’
\n case ‘middleLeft’: return ‘col-start-1 row-start-2’
\n case ‘middleRight’: return ‘col-start-3 row-start-2’
\n case ‘topCenter’: return ‘col-start-2 row-start-1’
\n case ‘bottomCenter’: return ‘col-start-2 row-start-3’
\n case ‘topLeft’: return ‘col-start-1 row-start-1’
\n case ‘topRight’: return ‘col-start-3 row-start-1’
\n case ‘bottomLeft’: return ‘col-start-1 row-start-3’
\n case ‘bottomRight’: return ‘col-start-3 row-start-3’
\n default: return ‘col-start-2 row-start-2’
\n }
\n}<\/p>\n

function getEyeAlignment(position: string): ‘start’ | ‘center’ | ‘end’ {
\n switch (position) {
\n case ‘topLeft’:
\n case ‘topRight’:
\n return ‘end’
\n case ‘bottomLeft’:
\n case ‘bottomRight’:
\n return ‘start’
\n default:
\n return ‘center’
\n }
\n}<\/p>\n

\u0648\u0627\u0631\u062f \u062d\u0627\u0644\u062a \u062a\u0645\u0627\u0645 \u0635\u0641\u062d\u0647 \u0634\u0648\u06cc\u062f<\/p>\n

\u0627\u0632 \u062d\u0627\u0644\u062a \u062a\u0645\u0627\u0645 \u0635\u0641\u062d\u0647 \u062e\u0627\u0631\u062c \u0634\u0648\u06cc\u062f<\/p>\n

\u0644\u0645\u0633 \u0647\u0627\u06cc \u0646\u0647\u0627\u06cc\u06cc<\/p>\n

\u0633\u067e\u0633 \u0686\u0646\u062f \u0635\u0641\u062d\u0647 \u0646\u0645\u0627\u06cc\u0634 \u0645\u0642\u062f\u0645\u0627\u062a\u06cc \u0632\u06cc\u0628\u0627 \u0648 \u0645\u0648\u0633\u06cc\u0642\u06cc \u067e\u0633\u200c\u0632\u0645\u06cc\u0646\u0647 \u0628\u0632\u0646\u06cc\u062f \u0648 \u067e\u0631\u0648\u0698\u0647 \u062e\u0648\u0628 \u0627\u0633\u062a!<\/p>\n

\u0647\u0646\u06af\u0627\u0645\u06cc \u06a9\u0647 \u0634\u0645\u0627 \u0631\u0648\u06cc \u0686\u06cc\u0632\u0647\u0627\u06cc\u06cc \u0645\u0627\u0646\u0646\u062f \u0627\u06cc\u0646 \u06a9\u0627\u0631 \u0645\u06cc \u06a9\u0646\u06cc\u062f\u060c \u0635\u062f\u0627 \u0647\u0645\u06cc\u0634\u0647 \u062a\u062c\u0631\u0628\u0647 \u0631\u0627 \u0628\u0647\u0628\u0648\u062f \u0645\u06cc \u0628\u062e\u0634\u062f\u060c \u0628\u0646\u0627\u0628\u0631\u0627\u06cc\u0646 \u0645\u0646 \u0627\u0632 Stable Audio \u0628\u0631\u0627\u06cc \u062a\u0648\u0644\u06cc\u062f \u0645\u0648\u0633\u06cc\u0642\u06cc \u067e\u0633 \u0632\u0645\u06cc\u0646\u0647 \u0632\u0645\u0627\u0646\u06cc \u06a9\u0647 \u06a9\u0627\u0631\u0628\u0631 “\u0648\u0627\u0631\u062f \u067e\u0631\u062a\u06af\u0627\u0647” \u0645\u06cc \u0634\u0648\u062f \u0627\u0633\u062a\u0641\u0627\u062f\u0647 \u06a9\u0631\u062f\u0645. \u062f\u0631\u062e\u0648\u0627\u0633\u062a\u06cc \u06a9\u0647 \u0628\u0631\u0627\u06cc \u0645\u0648\u0633\u06cc\u0642\u06cc \u0627\u0633\u062a\u0641\u0627\u062f\u0647 \u06a9\u0631\u062f\u0645 \u0627\u06cc\u0646 \u0628\u0648\u062f:<\/p>\n

\u0645\u062d\u06cc\u0637\u060c \u062e\u0632\u0646\u062f\u0647\u060c \u0645\u0648\u0633\u06cc\u0642\u06cc \u067e\u0633\u200c\u0632\u0645\u06cc\u0646\u0647\u060c \u0635\u062f\u0627\u0647\u0627\u06cc \u0632\u0645\u0632\u0645\u0647\u200c\u06a9\u0646\u0646\u062f\u0647\u060c \u0628\u0627\u062f\u0647\u0627\u060c \u0633\u0631\u0639\u062a \u0622\u0647\u0633\u062a\u0647\u060c \u0648\u0647\u0645\u200c\u0622\u0648\u0631\u060c \u067e\u0631\u062a\u06af\u0627\u0647<\/p>\n

\u0645\u0646 \u0647\u0645\u0686\u0646\u06cc\u0646 \u0641\u06a9\u0631 \u0645\u06cc \u06a9\u0631\u062f\u0645 \u06a9\u0647 \u0641\u0642\u0637 \u0635\u0641\u062d\u0647 \u0633\u06cc\u0627\u0647 \u0648 \u0633\u0641\u06cc\u062f \u0633\u0627\u062f\u0647 \u06a9\u0645\u06cc \u062e\u0633\u062a\u0647 \u06a9\u0646\u0646\u062f\u0647 \u0627\u0633\u062a\u060c \u0628\u0646\u0627\u0628\u0631\u0627\u06cc\u0646 \u0686\u0646\u062f \u0641\u06cc\u0644\u062a\u0631 SVG \u0645\u062a\u062d\u0631\u06a9 \u0631\u0627 \u062f\u0631 \u067e\u0633 \u0632\u0645\u06cc\u0646\u0647 \u0627\u0636\u0627\u0641\u0647 \u06a9\u0631\u062f\u0645. \u0639\u0644\u0627\u0648\u0647 \u0628\u0631 \u0627\u06cc\u0646\u060c \u06cc\u06a9 \u062f\u0627\u06cc\u0631\u0647 \u062a\u06cc\u0631\u0647 \u0648 \u062a\u0627\u0631 \u062f\u0631 \u0645\u0631\u06a9\u0632 \u0635\u0641\u062d\u0647 \u0627\u0636\u0627\u0641\u0647 \u06a9\u0631\u062f\u0645 \u062a\u0627 \u062c\u0644\u0648\u0647 \u0645\u062d\u0648 \u0634\u062f\u0646 \u062e\u0648\u0628\u06cc \u062f\u0627\u0634\u062a\u0647 \u0628\u0627\u0634\u062f. \u0627\u062d\u062a\u0645\u0627\u0644\u0627\u064b \u0645\u06cc\u200c\u062a\u0648\u0627\u0646\u0633\u062a\u0645 \u0627\u06cc\u0646 \u06a9\u0627\u0631 \u0631\u0627 \u0628\u0627 \u0641\u06cc\u0644\u062a\u0631\u0647\u0627\u06cc SVG \u0627\u0646\u062c\u0627\u0645 \u062f\u0647\u0645\u060c \u0627\u0645\u0627 \u0646\u0645\u06cc\u200c\u062e\u0648\u0627\u0633\u062a\u0645 \u0632\u0645\u0627\u0646 \u0632\u06cc\u0627\u062f\u06cc \u0631\u0627 \u0628\u0631\u0627\u06cc \u0627\u06cc\u0646 \u06a9\u0627\u0631 \u0635\u0631\u0641 \u06a9\u0646\u0645. \u0633\u067e\u0633 \u0628\u0631\u0627\u06cc \u062f\u0627\u0634\u062a\u0646 \u0645\u0642\u062f\u0627\u0631\u06cc \u062d\u0631\u06a9\u062a \u0628\u06cc\u0634\u062a\u0631\u060c \u067e\u0633\u200c\u0632\u0645\u06cc\u0646\u0647 \u0631\u0627 \u0631\u0648\u06cc \u0645\u062d\u0648\u0631 \u062e\u0648\u062f \u0645\u06cc\u200c\u0686\u0631\u062e\u0627\u0646\u0645. \u06af\u0627\u0647\u06cc \u0627\u0648\u0642\u0627\u062a \u0627\u0646\u062c\u0627\u0645 \u0627\u0646\u06cc\u0645\u06cc\u0634\u0646 \u0628\u0627 \u0641\u06cc\u0644\u062a\u0631\u0647\u0627\u06cc SVG \u06a9\u0645\u06cc \u0628\u062f \u0627\u0633\u062a\u060c \u0628\u0646\u0627\u0628\u0631\u0627\u06cc\u0646 \u062a\u0635\u0645\u06cc\u0645 \u06af\u0631\u0641\u062a\u0645 \u0628\u0647 \u062c\u0627\u06cc \u0622\u0646 \u0627\u06cc\u0646 \u06a9\u0627\u0631 \u0631\u0627 \u0627\u0646\u062c\u0627\u0645 \u062f\u0647\u0645.<\/p>\n

<div style={{ width: ‘100vw’, height: ‘100vh’ }}>
\n {\/* Background Elements *\/}
\n <svg className=”fixed inset-0 w-full h-full -z-10″>
\n <defs>
\n <filter id=”noise”>
\n <feTurbulence
\n id=”turbFreq”
\n type=”fractalNoise”
\n baseFrequency=”0.01″
\n seed=”5″
\n numOctaves=”1″
\n >
\n <\/feTurbulence>
\n <feGaussianBlur stdDeviation=”10″>
\n <animate
\n attributeName=”stdDeviation”
\n values=”10;50;10″
\n dur=”20s”
\n repeatCount=”indefinite”
\n \/>
\n <\/feGaussianBlur>
\n <feColorMatrix
\n type=”matrix”
\n values=”1 0 0 0 1
\n 0 1 0 0 1
\n 0 0 1 0 1
\n 0 0 0 25 -13″
\n \/>
\n <\/filter>
\n <\/defs>
\n <rect width=”200%” height=”200%” filter=”url(#noise)” className=”rotation-animation” \/>
\n <\/svg>
\n <div className=”fixed inset-0 w-[95vw] h-[95vh] bg-black rounded-full blur-[128px] m-auto” \/><\/p>\n

\u0648\u0627\u0631\u062f \u062d\u0627\u0644\u062a \u062a\u0645\u0627\u0645 \u0635\u0641\u062d\u0647 \u0634\u0648\u06cc\u062f<\/p>\n

\u0627\u0632 \u062d\u0627\u0644\u062a \u062a\u0645\u0627\u0645 \u0635\u0641\u062d\u0647 \u062e\u0627\u0631\u062c \u0634\u0648\u06cc\u062f<\/p>\n

\u0628\u0646\u0627\u0628\u0631\u0627\u06cc\u0646 \u0634\u0645\u0627 \u0622\u0646 \u0631\u0627 \u062f\u0627\u0631\u06cc\u062f: \u0646\u0633\u0628\u062a\u0627\u064b \u0645\u0633\u062a\u0642\u06cc\u0645 \u0628\u0647 \u0646\u062d\u0648\u0647 \u0627\u062c\u0631\u0627\u06cc \u06cc\u06a9 \u0631\u062f\u06cc\u0627\u0628\u06cc \u0686\u0634\u0645 \u0633\u0628\u06a9 \u0628\u0627 \u0642\u0627\u0628\u0644\u06cc\u062a \u0647\u0627\u06cc \u0628\u0644\u0627\u062f\u0631\u0646\u06af Supabase \u0646\u06af\u0627\u0647 \u06a9\u0646\u06cc\u062f. \u0634\u062e\u0635\u0627\u064b \u0627\u06cc\u0646 \u0622\u0632\u0645\u0627\u06cc\u0634 \u0628\u0633\u06cc\u0627\u0631 \u062c\u0627\u0644\u0628\u06cc \u0628\u0648\u062f \u0648 \u062f\u0631 \u062d\u06cc\u0646 \u06a9\u0627\u0631 \u0628\u0631 \u0631\u0648\u06cc \u0622\u0646 \u0645\u0634\u06a9\u0644 \u0632\u06cc\u0627\u062f\u06cc \u0646\u062f\u0627\u0634\u062a\u0645. \u0648 \u0628\u0627 \u06a9\u0645\u0627\u0644 \u062a\u0639\u062c\u0628 \u0645\u0646 \u0645\u062c\u0628\u0648\u0631 \u0646\u0628\u0648\u062f\u0645 \u0634\u0628 \u0622\u062e\u0631 \u0642\u0628\u0644 \u0627\u0632 \u0627\u0631\u0633\u0627\u0644 \u067e\u0631\u0648\u0698\u0647 \u06cc\u06a9 \u0634\u0628 \u06a9\u0627\u0645\u0644 \u0627\u0646\u062c\u0627\u0645 \u062f\u0647\u0645!<\/p>\n

\u0628\u0647 \u0631\u0627\u062d\u062a\u06cc \u0645\u06cc \u062a\u0648\u0627\u0646\u06cc\u062f \u067e\u0631\u0648\u0698\u0647 \u06cc\u0627 \u0648\u06cc\u062f\u0626\u0648\u06cc \u0646\u0645\u0627\u06cc\u0634\u06cc \u0631\u0627 \u0628\u0631\u0631\u0633\u06cc \u06a9\u0646\u06cc\u062f \u06a9\u0647 \u0686\u06af\u0648\u0646\u0647 \u0628\u0647 \u0646\u062a\u06cc\u062c\u0647 \u0631\u0633\u06cc\u062f\u0647 \u0627\u0633\u062a. \u0627\u06af\u0631 \u062a\u0639\u062f\u0627\u062f \u0632\u06cc\u0627\u062f\u06cc \u0627\u0632 \u0627\u0641\u0631\u0627\u062f \u0647\u0645\u0632\u0645\u0627\u0646 \u0627\u0632 \u0622\u0646 \u0627\u0633\u062a\u0641\u0627\u062f\u0647 \u06a9\u0646\u0646\u062f \u0645\u0645\u06a9\u0646 \u0627\u0633\u062a \u0645\u0634\u06a9\u0644\u0627\u062a\u06cc \u0648\u062c\u0648\u062f \u062f\u0627\u0634\u062a\u0647 \u0628\u0627\u0634\u062f (\u0622\u0632\u0645\u0627\u06cc\u0634 \u0622\u0646 \u0628\u0633\u06cc\u0627\u0631 \u0633\u062e\u062a \u0627\u0633\u062a \u0632\u06cc\u0631\u0627 \u0628\u0631\u0627\u06cc \u0627\u0646\u062c\u0627\u0645 \u062f\u0631\u0633\u062a \u0622\u0646 \u0628\u0647 \u0686\u0646\u062f\u06cc\u0646 \u062f\u0633\u062a\u06af\u0627\u0647 \u0648 \u0648\u0628 \u06a9\u0645 \u0646\u06cc\u0627\u0632 \u062f\u0627\u0631\u062f)\u060c \u0627\u0645\u0627 \u062d\u062f\u0633 \u0645\u06cc\u200c\u0632\u0646\u0645 \u06a9\u0647 \u0627\u06cc\u0646 \u062f\u0631 \u0645\u062f \u067e\u0631\u0648\u0698\u0647\u200c\u0647\u0627\u06cc \u0647\u06a9\u0627\u062a\u0648\u0646 \u0628\u0627\u0634\u062f\u061f \u0648 \u0627\u06af\u0631 \u0622\u0646 \u0631\u0627 \u0622\u0632\u0645\u0627\u06cc\u0634 \u06a9\u0631\u062f\u06cc\u062f\u060c \u0628\u0647 \u06cc\u0627\u062f \u062f\u0627\u0634\u062a\u0647 \u0628\u0627\u0634\u06cc\u062f \u06a9\u0647 \u0627\u06af\u0631 \u06cc\u06a9 \u0686\u0634\u0645 \u062f\u06cc\u062f\u06cc\u062f\u060c \u0622\u0646 \u0634\u062e\u0635 \u062f\u06cc\u06af\u0631\u06cc \u0627\u0633\u062a \u06a9\u0647 \u0634\u0645\u0627 \u0631\u0627 \u062f\u0631 \u062c\u0627\u06cc\u06cc \u0627\u0632 \u0637\u0631\u06cc\u0642 \u0627\u06cc\u0646\u062a\u0631\u0646\u062a \u062a\u0645\u0627\u0634\u0627 \u0645\u06cc \u06a9\u0646\u062f!<\/p>\n

\n

TL;DR:<\/p>\n

\n