SSE के साथ AI लेटेंसी को नियंत्रित करना
मैंने एक AI autocomplete फीचर बनाया। यूजर्स को यह बिल्कुल पसंद नहीं आया।
हर कीस्ट्रोक (keystroke) के साथ AI मॉडल को एक रिक्वेस्ट भेजी जाती थी। यूजर्स को पूरा रिस्पॉन्स मिलने के लिए 2 से 3 सेकंड इंतज़ार करना पड़ता था। UI टूटा हुआ सा महसूस होता था।
मैंने debouncing, caching और loading spinners का इस्तेमाल किया। कुछ भी काम नहीं आया। मुख्य समस्या वैसी ही बनी रही। यूजर्स को कोई भी डेटा देखने से पहले पूरे उत्तर का इंतज़ार करना पड़ता था।
मैंने इसे Server-Sent Events (SSE) का उपयोग करके हल किया, जिससे रिस्पॉन्स को टुकड़ों (chunk by chunk) में स्ट्रीम किया जा सके।
मूल धीमा फ्लो (flow):
- यूजर कैरेक्टर टाइप करता है
- 300ms debounce
- HTTP POST request
- सर्वर AI API को कॉल करता है (1-2 सेकंड)
- सर्वर पूरा रिस्पॉन्स लौटाता है
- क्लाइंट रेंडर करता है
यूजर को 2 सेकंड तक कुछ भी दिखाई नहीं दिया।
मैंने polling के बारे में सोचा, लेकिन इससे ओवरहेड (overhead) बहुत बढ़ जाता है। WebSockets काम तो करते हैं, लेकिन वन-वे स्ट्रीम (one-way stream) के लिए वे काफी भारी होते हैं।
मैंने SSE को चुना। यह एक स्टैंडर्ड है जहाँ सर्वर एक लंबे कनेक्शन के माध्यम से टेक्स्ट इवेंट्स भेजता है।
AI के लिए SSE क्यों काम करता है:
- यह वन-वे (सर्वर से क्लाइंट) है
- यह टेक्स्ट-आधारित JSON chunks का उपयोग करता है
- यह ऑटोमैटिकली रीकनेक्शन को हैंडल करता है
- आपको अतिरिक्त लाइब्रेरीज़ की ज़रूरत नहीं है
परिणाम तुरंत मिले। पहला शब्द 300ms से भी कम समय में दिखाई देने लगा। यूजर्स ने सुझावों को अक्षर-दर-अक्षर (letter by letter) बनते हुए देखा।
मेरे मेट्रिक्स (metrics) में सुधार हुआ:
- पहले विजुअल रिस्पॉन्स का समय: 2.1s से 0.3s
- यूजर एंगेजमेंट: 40% बढ़ा
- यूजर शिकायतें: शून्य
स्ट्रीमिंग धारणा (perception) के बारे में है। एक धीमा लेकिन प्रोग्रेसिव UI, एक तेज़ लेकिन स्टैटिक UI से बेहतर होता है। यूजर्स टेक्स्ट के पूरे ब्लॉक का इंतज़ार करने के बजाय शब्द-दर-शब्द उत्तर को सामने आते देखना पसंद करते हैं।
यदि आपका AI फीचर सुस्त (sluggish) महसूस होता है, तो पहले स्ट्रीमिंग आज़माएँ।
Optional learning community: https://t.me/GyaanSetuAi