SSE ਨਾਲ AI Latency ਨੂੰ ਕਾਬੂ ਕਰਨਾ
ਮੈਂ ਇੱਕ AI autocomplete ਫੀਚਰ ਬਣਾਇਆ। ਯੂਜ਼ਰਸ ਨੂੰ ਇਹ ਬਿਲਕੁਲ ਪਸੰਦ ਨਹੀਂ ਆਇਆ।
ਹਰ ਇੱਕ ਕੀਸਟ੍ਰੋਕ (keystroke) ਨਾਲ ਇੱਕ AI ਰਿਕੁਐਸ ਟ੍ਰਿਗਰ ਹੁੰਦੀ ਸੀ। ਯੂਜ਼ਰਸ ਨੂੰ ਪੂਰਾ JSON ਰਿਸਪਾਂਸ ਮਿਲਣ ਲਈ 2 ਤੋਂ 3 ਸੈਕਿੰਡ ਤੱਕ ਇੰਤਜ਼ਾਰ ਕਰਨਾ ਪੈਂਦਾ ਸੀ। UI ਖਰਾਬ ਲੱਗ ਰਿਹਾ ਸੀ। ਮੈਂ debouncing ਅਤੇ caching ਦੀ ਕੋਸ਼ਿਸ਼ ਕੀਤੀ, ਪਰ ਕੁਝ ਵੀ ਕੰਮ ਨਹੀਂ ਆਇਆ। ਮੁੱਖ ਸਮੱਸਿਆ ਉਹੀ ਰਹੀ: ਜਦੋਂ ਤੱਕ ਪੂਰਾ ਜਵਾਬ ਨਹੀਂ ਆ ਜਾਂਦਾ ਸੀ, ਯੂਜ਼ਰਸ ਨੂੰ ਕੁਝ ਵੀ ਦਿਖਾਈ ਨਹੀਂ ਦਿੰਦਾ ਸੀ।
ਮੈਂ ਇਸ ਨੂੰ Server-Sent Events (SSE) ਦੀ ਵਰਤੋਂ ਕਰਕੇ ਹੱਲ ਕੀਤਾ ਤਾਂ ਜੋ ਰਿਸਪਾਂਸ ਨੂੰ ਟੁਕੜਿਆਂ ਵਿੱਚ ਸਟ੍ਰੀਮ (stream) ਕੀਤਾ ਜਾ ਸਕੇ।
ਪੁਰਾਣਾ ਫਲੋਅ ਇਸ ਤਰ੍ਹਾਂ ਸੀ:
- ਯੂਜ਼ਰ ਟਾਈਪ ਕਰਦਾ ਹੈ
- 300ms debounce
- HTTP POST ਰਿਕੁਐਸ
- AI ਪ੍ਰੋਸੈਸ ਕਰਦਾ ਹੈ (1-2 ਸੈਕਿੰਡ)
- ਸਰਵਰ ਪੂਰਾ ਰਿਸਪਾਂਸ ਵਾਪਸ ਭੇਜਦਾ ਹੈ
- ਕਲਾਇੰਟ ਰੈਂਡਰ (render) ਕਰਦਾ ਹੈ
ਯੂਜ਼ਰਸ ਨੂੰ ਕਈ ਸੈਕਿੰਡਾਂ ਤੱਕ ਖਾਲੀ ਸਕ੍ਰੀਨ ਦਿਖਾਈ ਦਿੰਦੀ ਸੀ। ਲੋਡਿੰਗ ਸਪਿਨਰ (loading spinner) ਹੋਣ ਦੇ ਬਾਵਜੂਦ, ਇਹ ਬਹੁਤ ਹੌਲੀ ਲੱਗ ਰਿਹਾ ਸੀ।
ਮੈਂ polling ਜਾਂ WebSockets ਬਾਰੇ ਸੋਚਿਆ। Polling ਨਾਲ ਬਹੁਤ ਜ਼ਿਆਦਾ overhead ਵਧ ਜਾਂਦਾ ਹੈ। WebSockets ਇੱਕ-ਤਰਫਾ ਸਟ੍ਰੀਮ ਲਈ ਬਹੁਤ ਭਾਰੀ ਹਨ।
ਮੈਂ SSE ਚੁਣਿਆ ਕਿਉਂਕਿ:
- ਇਹ ਸਰਵਰ ਤੋਂ ਕਲਾਇੰਟ ਤੱਕ ਇੱਕ-ਤਰਫਾ ਕੰਮ ਕਰਦਾ ਹੈ
- ਇਹ ਸਧਾਰਨ ਟੈਕਸਟ ਅਤੇ JSON ਚੰਕਸ (chunks) ਦੀ ਵਰਤੋਂ ਕਰਦਾ ਹੈ
- ਜੇਕਰ ਕਨੈਕਸ਼ਨ ਟੁੱਟ ਜਾਂਦਾ ਹੈ, ਤਾਂ ਇਹ ਆਪਣੇ ਆਪ ਦੁਬਾਰਾ ਜੁੜ ਜਾਂਦਾ ਹੈ
- ਇਸ ਲਈ ਤੁਹਾਡੇ ਸਰਵਰ 'ਤੇ ਕਿਸੇ ਵਾਧੂ ਲਾਇਬ੍ਰੇਰੀ ਦੀ ਲੋੜ ਨਹੀਂ ਹੈ
ਨਤੀਜਿਆਂ ਨੇ ਸਭ ਕੁਝ ਬਦਲ ਦਿੱਤਾ:
- ਪਹਿਲੇ ਵਿਜ਼ੂਅਲ ਰਿਸਪਾਂਸ ਦਾ ਸਮਾਂ: 2.1s ਤੋਂ ਘਟ ਕੇ 0.3s ਰਹਿ ਗਿਆ
- ਯੂਜ਼ਰ ਇੰਗੇਜਮੈਂਟ: 40% ਵਧ ਗਈ
- ਯੂਜ਼ਰ ਸ਼ਿਕਾਇਤਾਂ: ਜ਼ੀਰੋ
ਸਟ੍ਰੀਮਿੰਗ (Streaming) ਅਸਲ ਵਿੱਚ ਅਨੁਭਵ (perception) ਬਾਰੇ ਹੈ। ਇੱਕ ਪ੍ਰੋਗਰੈਸਿਵ UI ਸਟੈਟਿਕ UI ਨਾਲੋਂ ਤੇਜ਼ ਮਹਿਸੂਸ ਹੁੰਦਾ ਹੈ। ਯੂਜ਼ਰਸ ਟੈਕਸਟ ਦੇ ਇੱਕ ਪੂਰੇ ਬਲਾਕ ਦੀ ਉਡੀਕ ਕਰਨ ਦੀ ਬਜਾਏ ਸ਼ਬਦਾਂ ਨੂੰ ਇੱਕ-ਇੱਕ ਕਰਕੇ ਆਉਂਦੇ ਦੇਖਣਾ ਪਸੰਦ ਕਰਦੇ ਹਨ।
ਜੇਕਰ ਤੁਹਾਡੇ AI ਰਿਸਪਾਂਸ ਬਹੁਤ ਛੋਟੇ ਹਨ, ਤਾਂ ਸਟੈਂਡਰਡ ਰਿਕੁਐਸਾਂ ਦੀ ਵਰਤੋਂ ਕਰੋ। ਜੇਕਰ ਤੁਹਾਨੂੰ ਦੋ-ਤਰਫਾ ਗੱਲਬਾਤ ਦੀ ਲੋੜ ਹੈ, ਤਾਂ WebSockets ਦੀ ਵਰਤੋਂ ਕਰੋ। ਪਰ ਜ਼ਿਆਦਾਤਰ AI ਸਟ੍ਰੀਮਿੰਗ ਲੋੜਾਂ ਲਈ, SSE ਸਭ ਤੋਂ ਵਧੀਆ ਚੋਣ ਹੈ।
ਤੁਸੀਂ ਆਪਣੇ ਐਪਸ ਵਿੱਚ AI latency ਨੂੰ ਕਿਵੇਂ ਸੰਭਾਲਦੇ ਹੋ? ਕੀ ਤੁਸੀਂ ਸਟ੍ਰੀਮਿੰਗ ਕਰਦੇ ਹੋ ਜਾਂ ਪੂਰੇ ਰਿਸਪਾਂਸ ਦੀ ਉਡੀਕ ਕਰਦੇ ਹੋ?