AI असिस्टेंट को एनिमेट करें: Listening और Talking
Charmotion टीम द्वारा · अपडेट:
AI असिस्टेंट अवतार को पाँच मुख्य स्टेट चाहिए: idle, listening, thinking, talking और एक confirm रिएक्शन। जब यूज़र टाइप करे या बोले तो listening पर जाएँ, request भेजते ही thinking पर, पहला token या ऑडियो आते ही talking पर, और जवाब खत्म होने पर वापस idle पर। साथ में एक error रिएक्शन और मोशन कम करें के लिए fallback भी जोड़ें।
मुख्य बातें
- अवतार को timers से नहीं, बातचीत के इवेंट से चलाएँ: input शुरू हुआ, request भेजी गई, पहला token आया, stream खत्म हुई।
- thinking सिर्फ़ पहले token से पहले के अंतराल को कवर करे; आउटपुट शुरू होते ही talking पर जाएँ।
- टेक्स्ट चैट के लिए एक talking लूप काफ़ी है। वॉइस प्रोडक्ट मुँह को ऑडियो लेवल या visemes से चला सकते हैं।
- स्टेटस हमेशा टेक्स्ट में भी दिखाएँ, और मोशन कम करें चालू होने पर एक स्थिर fallback दें।
पहले से कोई कैरेक्टर या लोगो है? अपने कैरेक्टर को असली ऐप स्क्रीन में देखें: स्प्लैश, ऑनबोर्डिंग, लोडिंग और एम्प्टी स्टेट स्क्रीन। यह फ़्री है, आपके ब्राउज़र में चलता है और कुछ भी अपलोड नहीं होता।
AI असिस्टेंट अवतार को कौन-सी स्टेट चाहिए?
किसी आम मैस्कॉट की तुलना में असिस्टेंट का जीवन-चक्र ज़्यादा साफ़ होता है, क्योंकि हर बातचीत एक ही लूप में चलती है: यूज़र बोलता है, मॉडल काम करता है, मॉडल जवाब देता है। अवतार इसी चक्र को दिखाता है।
| स्टेट | प्रकार | यूज़र के लिए मतलब |
|---|---|---|
| Idle | लूप | तैयार, इनपुट का इंतज़ार |
| Listening | लूप | यूज़र के बोलते या टाइप करते समय "मैं सुन रहा हूँ" |
| Thinking | लूप | Request भेजी गई, अभी कोई आउटपुट नहीं |
| Talking | लूप | जवाब स्ट्रीम हो रहा है या ऑडियो चल रहा है |
| Confirm / success | वन-शॉट | कोई काम पूरा हुआ, जैसे बुकिंग या सेव किया गया नोट |
| Error | वन-शॉट | Request फ़ेल हुई या मना कर दी गई |
| सोया हुआ | लूप | सेशन निष्क्रिय है या असिस्टेंट म्यूट है |
यह सेट लगभग एक चलन बन चुका है। उदाहरण के लिए, Vercel के AI Elements में Rive से चलने वाला एक Persona component आता है, जिसमें idle, listening, thinking, speaking और asleep स्टेट हैं (AI Elements)। अगर आप अपना अवतार डिज़ाइन करते हैं, तो यही नाम रखने से उसे आसानी से बदला जा सकता है।
AI असिस्टेंट अवतार कैसे डिज़ाइन करें?
असिस्टेंट अवतार आमतौर पर छोटा होता है: मैसेज के पास 32 से 64 px का बैज, या वॉइस स्क्रीन पर एक बड़ा कैरेक्टर। पहले छोटे साइज़ के लिए डिज़ाइन करें।
- चेहरे को फ़ोकस बनाएँ। listening, thinking और talking लगभग पूरी तरह आँखों और मुँह से समझ आते हैं। बड़ा और सरल चेहरा, बारीक डिटेल वाले शरीर से बेहतर काम करता है।
- मुँह को हिलने की जगह दें। talking के लिए कम से कम एक खुला और एक बंद आकार चाहिए। अगर मुँह एक पतली-सी लाइन है, तो बैज साइज़ पर talking दिखेगा ही नहीं।
- हर स्टेट के लिए अलग पोज़ रखें। listening में कैरेक्टर आगे झुक सकता है या सिर टेढ़ा कर सकता है; thinking में ऊपर या बगल में देख सकता है। यूज़र को एक नज़र में, रंग के बिना भी, स्टेट पहचान में आनी चाहिए।
- इंसान जैसा रूप देने से बचें, जब तक आपके पास उसे भरोसेमंद बनाने का बजट न हो। एक दोस्ताना abstract कैरेक्टर या नरम आकार साफ़ बता देता है कि यूज़र सॉफ़्टवेयर से बात कर रहा है।
- इसे शांत रखें। अवतार उस टेक्स्ट के पास होता है जिसे यूज़र पढ़ने की कोशिश कर रहा है। हल्का मोशन ठीक है; उछल-कूद नहीं।
सामने की ओर देखता कैरेक्टर, जिसकी आँखें, मुँह और शरीर के हिस्से अलग-अलग हों, इन सभी स्टेट के लिए एनिमेट करना सबसे आसान होता है। पूरी डिज़ाइन चेकलिस्ट के लिए एनिमेटेड ऐप मैस्कॉट कैसे बनाएँ देखें।
listening, thinking और talking को चैट और वॉइस इवेंट से कैसे जोड़ें?
अवतार को उन इवेंट से जोड़ें जो आपका चैट या वॉइस stack पहले से भेजता है। एक आम मैपिंग:
| इवेंट | अवतार स्टेट |
|---|---|
| Input पर फ़ोकस और यूज़र टाइप करना शुरू करे, या माइक्रोफ़ोन खुले | Listening |
| मैसेज सबमिट हुआ या बोलना खत्म होने का पता चला | Thinking |
| पहला streamed token या पहला ऑडियो chunk | Talking |
| Stream खत्म हुई या ऑडियो खत्म हुआ | Idle |
| Tool call पूरा हुआ (बुकिंग, सेव, भेजना) | Success वन-शॉट, फिर idle |
| नेटवर्क error, rate limit या मना करना | Error वन-शॉट, फिर idle |
| कुछ समय से कोई गतिविधि नहीं, या सेशन बंद | सोया हुआ |
यह लॉजिक एक ही जगह रखें, उदाहरण के लिए एक reducer जो चैट स्टेटस लेकर अवतार की स्टेट लौटाए। एनिमेशन calls को अपने UI components में इधर-उधर न बिखेरें।
दो edge cases जल्दी सामने आते हैं। अगर असिस्टेंट के talking के दौरान यूज़र बीच में बोले, तो सीधे listening पर वापस जाएँ। अगर किसी जवाब में कई tool calls हों, तो उनके बीच thinking में ही रहें, thinking और talking के बीच बार-बार न झपकें।
thinking और talking के बीच की latency को कैसे संभालें?
thinking स्टेट इसलिए है ताकि request भेजने और आउटपुट दिखने के बीच का अंतराल भरा जा सके। आप इस अंतराल को कैसे संभालते हैं, उसी से तय होता है कि असिस्टेंट कितना तेज़ लगता है।
Nielsen की response-time सीमाएँ एक उपयोगी ढाँचा हैं: लगभग 0.1 s तुरंत जैसा लगता है, लगभग 1 s में यूज़र के विचारों का प्रवाह नहीं टूटता, और लगभग 10 s ध्यान बनाए रखने की सीमा है (NN/g)। इन्हें अवतार पर ऐसे लागू करें:
- माइक खुलते या टाइपिंग शुरू होते ही तुरंत listening पर जाएँ। यह फ़ीडबैक तुरंत महसूस होना चाहिए।
- सबमिट के ठीक बाद thinking में जाएँ, लेकिन ट्रांज़िशन हल्का रखें ताकि पहला token जल्दी आने पर झटकेदार झपक न दिखे।
- पहला token आते ही talking पर जाएँ, पूरा जवाब आने का इंतज़ार न करें। streaming टेक्स्ट और बोलता हुआ अवतार साथ में हों तो इंतज़ार छोटा लगता है।
- लगभग 10 सेकंड के बाद "आपकी फ़ाइलें खोजी जा रही हैं" जैसा टेक्स्ट स्टेटस जोड़ें ताकि यूज़र को पता रहे कि क्या हो रहा है।
ऐसा talking लूप न रखें जो टेक्स्ट की streaming खत्म होने के बाद भी चलता रहे। इसे timer से नहीं, stream के completion इवेंट पर खत्म करें।
talking को ऑडियो से कैसे चलाएँ?
fidelity के तीन स्तर हैं। वह सबसे निचला स्तर चुनें जो आपके प्रोडक्ट के लिए काफ़ी हो।
- एक सामान्य talking लूप। आउटपुट stream होने के दौरान मुँह एक दोहराए जाने वाले चक्र में हिलता है। टेक्स्ट चैट के लिए यह काफ़ी है, जहाँ यूज़र जवाब पढ़ते हैं और अवतार पर बस एक नज़र डालते हैं।
- Amplitude से चलने वाला मुँह। वॉइस के लिए आउटपुट ऑडियो का लेवल पढ़ें और उसे एनिमेशन के एक नंबर में भेजें, ताकि तेज़ आवाज़ वाले syllables पर मुँह ज़्यादा खुले और रुकावटों में बंद हो। Rive में यह एक नंबर इनपुट या view-model की number property होती है, जिसे हर फ़्रेम पर अपडेट किया जाता है।
- Visemes। अपने speech engine से मिलने वाले phonemes को मुँह के आकारों से मैप करें। यह सबसे भरोसेमंद लगता है और इसमें सबसे ज़्यादा मेहनत भी लगती है। Duolingo अपने कोर्सों में कैरेक्टर का lip-sync इसी तरह Rive स्टेट मशीन से करता है (Duolingo blog)।
आप कोई भी स्तर चुनें, इनपुट को smooth करें। कच्चे ऑडियो लेवल ऊपर-नीचे उछलते हैं और मुँह को काँपता हुआ दिखाते हैं। एक छोटा moving average या value पर थोड़ी easing कहीं ज़्यादा स्वाभाविक लगती है।
AI अवतार के लिए Rive इस्तेमाल करें या वीडियो?
प्रोडक्ट के अंदर अवतार के लिए Rive जैसा interactive रनटाइम इस्तेमाल करें। असिस्टेंट लगातार और बिना अनुमान के स्टेट बदलता है, अक्सर एक छोटे जवाब के दौरान सेकंड में कई बार। स्टेट मशीन लूप के किसी भी बिंदु से listening से thinking और फिर talking में blend कर सकती है। वीडियो में हर स्टेट एक अलग क्लिप होती है, और लूप के बीच में एक क्लिप से दूसरी पर जाने से साफ़ कट दिखते हैं, जब तक आप crossfade और सावधानी से timing न जोड़ें।
Interactive फ़ाइलें आपको values को लगातार चलाने भी देती हैं, जैसे ऑडियो से मुँह का खुलना, जो वीडियो से संभव नहीं है।
फिर भी वीडियो की अपनी जगह है:
- मार्केटिंग पेज और app store प्रीव्यू, जिनमें असिस्टेंट को काम करते दिखाया जाए।
- ईमेल और हेल्प आर्टिकल जैसे स्थिर संदर्भ।
- एक ही लूपिंग स्टेट वाला सरल वेब widget। ट्रांसपेरेंसी के लिए अल्फ़ा वाला VP9 WebM और अल्फ़ा वाला HEVC MOV, दोनों दें, क्योंकि Safari WebM का अल्फ़ा चैनल हटा देता है (Jake Archibald)।
Charmotion अपने स्टैंडर्ड सेट में असिस्टेंट स्टेट शामिल करता है: listening (मूड 6) और talking (मूड 7) लूप हैं, thinking और sleeping भी लूप हैं, और success, error, yes और no वन-शॉट ट्रिगर हैं, सब एक Rive फ़ाइल में, हर पेड प्लान पर MP4 और ट्रांसपेरेंट वीडियो एक्सपोर्ट के साथ।
असिस्टेंट अवतार को एक्सेसिबल कैसे रखें?
अवतार बातचीत के ऊपर एक सजावट है। जो कुछ भी वह बताता है, वह उसके बिना भी उपलब्ध होना चाहिए।
- स्टेटस टेक्स्ट में दिखाएँ। इनपुट के पास "सुन रहा है", "सोच रहा है" या typing indicator स्क्रीन रीडर इस्तेमाल करने वालों और अवतार को न देख रहे किसी भी व्यक्ति को बताता है कि क्या हो रहा है।
- मोशन कम करें सेटिंग का सम्मान करें। वेब पर
prefers-reduced-motion(MDN) और SwiftUI मेंaccessibilityReduceMotionचेक करें। हर स्टेट के लिए लूप की जगह स्थिर पोज़ दिखाएँ, या हल्का opacity बदलाव। - रोकने का विकल्प दें। चैट के बगल में मिनटों तक चलने वाला idle लूप WCAG 2.2 SC 2.2.2 के दायरे में आता है, जो पाँच सेकंड से लंबे, अपने आप शुरू होने वाले मोशन को रोकने, बंद करने या छिपाने का तरीका माँगता है (W3C)। idle होने पर स्थिर पोज़ में ठहर जाना सबसे आसान समाधान है।
- यूज़र को इसे बंद करने दें। अवतार छिपाने या स्थिर आइकन दिखाने की सेटिंग उन यूज़र्स का ध्यान रखती है जिन्हें टेक्स्ट के पास कोई भी मोशन ध्यान भटकाने वाला लगता है।
- इसे assistive tech से छिपाएँ। अवतार को decorative मार्क करें ताकि स्क्रीन रीडर हर स्टेट बदलाव की घोषणा न करें।
- फ़्लैश होने वाले इफ़ेक्ट से बचें, खासकर error पर।
अक्सर पूछे जाने वाले सवाल
AI चैटबॉट अवतार में कौन-से स्टेट होने चाहिए?
AI चैटबॉट अवतार में idle, listening, thinking और talking लूप होने चाहिए, साथ ही success और error वन-शॉट। निष्क्रिय सेशन के लिए asleep स्टेट भी उपयोगी है। यह Vercel AI Elements के Persona जैसे आम components से मेल खाता है, जो idle, listening, thinking, speaking और asleep इस्तेमाल करता है।
अवतार को thinking से talking पर कब स्विच करना चाहिए?
पहला streamed token या पहला audio chunk आते ही स्विच करें, पूरा जवाब आने पर नहीं। इससे असिस्टेंट तेज़ महसूस होता है और एनिमेशन वही दिखाता है जो यूज़र देख रहा है। stream के completion event पर idle पर लौट आएँ।
क्या वॉइस असिस्टेंट के लिए lip sync ज़रूरी है?
ज़रूरी नहीं। टेक्स्ट चैट के लिए talking लूप काफ़ी है। वॉइस के लिए, audio level से मुँह के खुलने को कंट्रोल करना कम मेहनत में भरोसेमंद दिखता है। पूरा viseme lip sync, यानी phonemes को मुँह के आकारों से मैप करना, सबसे रियलिस्टिक है, लेकिन इसके लिए आपके speech engine से phoneme data चाहिए।
क्या एनिमेटेड AI अवतार के लिए वीडियो फ़ाइल इस्तेमाल कर सकते हैं?
कर सकते हैं, लेकिन यह सीमित है। हर स्टेट एक अलग क्लिप बन जाती है, इसलिए listening, thinking और talking के बीच तेज़ बदलाव में कट दिखते हैं। Rive जैसा इंटरैक्टिव फ़ॉर्मेट किसी भी फ़्रेम से स्टेट बदल सकता है और audio level जैसी लाइव वैल्यू से चल सकता है।
इस गाइड से झटपट जवाब
स्रोत
- Persona component, Vercel AI Elements
- Response Times: The 3 Important Limits, Nielsen Norman Group
- How Duolingo's characters lip sync (visemes), Duolingo Blog
- prefers-reduced-motion, MDN Web Docs
- Understanding SC 2.2.2: Pause, Stop, Hide, W3C WAI
- Video with alpha transparency on the web, Jake Archibald