feat: animate streaming response to make more smooth

LyricTian · Nov 19, 2023 · 536ace8 · 536ace8
1 parent 9876a1a
commit 536ace8
Showing 1 changed file with 23 additions and 3 deletions.
diff --git a/app/client/platforms/openai.ts b/app/client/platforms/openai.ts
@@ -115,12 +115,33 @@ export class ChatGPTApi implements LLMApi {
 
       if (shouldStream) {
         let responseText = "";
+        let remainText = "";
         let finished = false;
 
+        // animate response to make it looks smooth
+        function animateResponseText() {
+          if (finished || controller.signal.aborted) {
+            responseText += remainText;
+            console.log("[Response Animation] finished");
+            return;
+          }
+
+          if (remainText.length > 0) {
+            responseText += remainText[0];
+            remainText = remainText.slice(1);
+            options.onUpdate?.(responseText, remainText[0]);
+          }
+
+          requestAnimationFrame(animateResponseText);
+        }
+
+        // start animaion
+        animateResponseText();
+
         const finish = () => {
           if (!finished) {
-            options.onFinish(responseText);
             finished = true;
+            options.onFinish(responseText + remainText);
           }
         };
 
@@ -183,8 +204,7 @@ export class ChatGPTApi implements LLMApi {
               };
               const delta = json.choices[0]?.delta?.content;
               if (delta) {
-                responseText += delta;
-                options.onUpdate?.(responseText, delta);
+                remainText += delta;
               }
             } catch (e) {
               console.error("[Request] parse error", text);