From c4ecca3169d052785af52fdb747007807d14f012 Mon Sep 17 00:00:00 2001
From: Daniel Rochetti <daniel.rochetti@gmail.com>
Date: Tue, 23 Jul 2024 15:18:38 -0700
Subject: [PATCH 01/14] feat(client): binary chunk streaming support

---
 .../app/streaming/audio/page.tsx              | 119 ++++++++++++++++++
 libs/client/package.json                      |   2 +-
 libs/client/src/function.ts                   |   2 +-
 libs/client/src/streaming.ts                  |  45 +++++--
 4 files changed, 158 insertions(+), 10 deletions(-)
 create mode 100644 apps/demo-nextjs-app-router/app/streaming/audio/page.tsx

diff --git a/apps/demo-nextjs-app-router/app/streaming/audio/page.tsx b/apps/demo-nextjs-app-router/app/streaming/audio/page.tsx
new file mode 100644
index 0000000..e66f644
--- /dev/null
+++ b/apps/demo-nextjs-app-router/app/streaming/audio/page.tsx
@@ -0,0 +1,119 @@
+'use client';
+
+import * as fal from '@fal-ai/serverless-client';
+import { useEffect, useRef, useState } from 'react';
+
+fal.config({
+  proxyUrl: '/api/fal/proxy',
+});
+
+type PlayHTInput = {
+  text: string;
+};
+
+export default function AudioStreamingDemo() {
+  const [streamStatus, setStreamStatus] = useState<string>('idle');
+
+  const audioRef = useRef<HTMLAudioElement | null>(null);
+  const mediaSourceRef = useRef<MediaSource | null>(null);
+  const sourceBufferRef = useRef<SourceBuffer | null>(null);
+
+  useEffect(() => {
+    if (!audioRef.current) {
+      console.warn('Audio element not found or not ready');
+      return;
+    }
+    const mimeCodec = 'audio/mpeg';
+
+    let sourceUrl: string | null = null;
+    if ('MediaSource' in window && MediaSource.isTypeSupported(mimeCodec)) {
+      const mediaSource = new MediaSource();
+      mediaSourceRef.current = mediaSource;
+      sourceUrl = URL.createObjectURL(mediaSource);
+      console.log('sourceUrl', sourceUrl);
+      audioRef.current.src = sourceUrl;
+
+      mediaSource.addEventListener('sourceopen', () => {
+        console.log('MediaSource ready - adding source buffer');
+        const sourceBuffer = mediaSource.addSourceBuffer(mimeCodec);
+        // sourceBuffer.addEventListener('updateend', () => {
+        //   mediaSource.endOfStream();
+        // });
+        sourceBufferRef.current = sourceBuffer;
+      });
+    } else {
+      console.error(
+        'Unsupported MIME type or MediaSource API is not available'
+      );
+    }
+
+    return () => {
+      if (sourceUrl) {
+        URL.revokeObjectURL(sourceUrl);
+      }
+    };
+  }, []);
+
+  const runInference = async () => {
+    const stream = await fal.stream<PlayHTInput, Uint8Array>(
+      'fal-ai/playht-tts',
+      {
+        input: {
+          text: 'Do you know who drew this picture and what is the name of it?',
+        },
+      }
+    );
+    setStreamStatus('running');
+
+    stream.on('data', (data: Uint8Array) => {
+      const sourceBuffer = sourceBufferRef.current;
+
+      audioRef.current?.play();
+
+      if (sourceBuffer) {
+        console.log('Appending buffer...');
+        // sourceBuffer.appendBuffer(data);
+        // console.log('sourceBuffer', sourceBuffer);
+      } else {
+        console.warn('Source buffer not found or not ready');
+      }
+    });
+
+    const result = await stream.done();
+    console.log('result', result);
+    setStreamStatus('done');
+    sourceBufferRef.current?.addEventListener('updateend', () => {
+      mediaSourceRef.current?.endOfStream();
+    });
+  };
+
+  return (
+    <div className="min-h-screen dark:bg-gray-900 bg-gray-100">
+      <main className="container dark:text-gray-50 text-gray-900 flex flex-col items-center justify-center w-full flex-1 py-10 space-y-8">
+        <h1 className="text-2xl font-bold mb-8">
+          Hello <code className="text-pink-600">fal</code> +{' '}
+          <code className="text-indigo-500">streaming</code>
+        </h1>
+
+        <div className="flex flex-row space-x-2">
+          <button
+            onClick={runInference}
+            className="bg-indigo-600 hover:bg-indigo-700 text-white font-bold text-lg py-3 px-6 mx-auto rounded focus:outline-none focus:shadow-outline disabled:opacity-70"
+          >
+            Run inference
+          </button>
+        </div>
+
+        <div className="w-full flex flex-col space-y-4">
+          <div className="flex flex-row items-center justify-between">
+            <h2 className="text-2xl font-bold">Answer</h2>
+            <span>
+              streaming: <code className="font-semibold">{streamStatus}</code>
+            </span>
+          </div>
+          <audio controls className="w-full" ref={audioRef} />
+        </div>
+      </main>
+    </div>
+  );
+}
diff --git a/libs/client/package.json b/libs/client/package.json
index 6e979c5..c1433c3 100644
--- a/libs/client/package.json
+++ b/libs/client/package.json
@@ -1,7 +1,7 @@
 {
   "name": "@fal-ai/serverless-client",
   "description": "The fal serverless JS/TS client",
-  "version": "0.14.0-alpha.3",
+  "version": "0.14.0-alpha.5",
   "license": "MIT",
   "repository": {
     "type": "git",
diff --git a/libs/client/src/function.ts b/libs/client/src/function.ts
index be10835..86e5e7f 100644
--- a/libs/client/src/function.ts
+++ b/libs/client/src/function.ts
@@ -390,7 +390,7 @@ export const queue: Queue = {
           );
         }, timeout);
       }
-      status.on('message', (data: QueueStatus) => {
+      status.on('data', (data: QueueStatus) => {
         if (options.onQueueUpdate) {
           // accumulate logs to match previous polling behavior
           if (
diff --git a/libs/client/src/streaming.ts b/libs/client/src/streaming.ts
index cd8d76d..e714d14 100644
--- a/libs/client/src/streaming.ts
+++ b/libs/client/src/streaming.ts
@@ -30,13 +30,19 @@ type StreamOptions<Input> = {
    * The HTTP method, defaults to `post`;
    */
   readonly method?: 'get' | 'post' | 'put' | 'delete' | string;
+
+  /**
+   * The content type the client accepts as response.
+   * By default this is set to `text/event-stream`.
+   */
+  readonly accept?: string;
 };
 
 const EVENT_STREAM_TIMEOUT = 15 * 1000;
 
-type FalStreamEventType = 'message' | 'error' | 'done';
+type FalStreamEventType = 'data' | 'error' | 'done';
 
-type EventHandler = (event: any) => void;
+type EventHandler<T = any> = (event: T) => void;
 
 /**
  * The class representing a streaming response. With t
@@ -91,7 +97,7 @@ export class FalStream<Input, Output> {
       const response = await fetch(url, {
         method: method.toUpperCase(),
         headers: {
-          accept: 'text/event-stream',
+          accept: options.accept ?? 'text/event-stream',
           'content-type': 'application/json',
         },
         body: input && method !== 'get' ? JSON.stringify(input) : undefined,
@@ -127,6 +133,26 @@ export class FalStream<Input, Output> {
       );
       return;
     }
+
+    // any response that is not a text/event-stream will be handled as a binary stream
+    if (response.headers.get('content-type') !== 'text/event-stream') {
+      // pass the binary chunks to this.emit('data', chunk)
+      const reader = body.getReader();
+      const emitRawChunk = () => {
+        reader.read().then(({ done, value }) => {
+          if (done) {
+            this.emit('done', this.currentData);
+            return;
+          }
+          this.currentData = value as Output;
+          this.emit('data', value);
+          emitRawChunk();
+        });
+      };
+      emitRawChunk();
+      return;
+    }
+
     const decoder = new TextDecoder('utf-8');
     const reader = response.body.getReader();
 
@@ -138,7 +164,10 @@ export class FalStream<Input, Output> {
           const parsedData = JSON.parse(data);
           this.buffer.push(parsedData);
           this.currentData = parsedData;
-          this.emit('message', parsedData);
+          this.emit('data', parsedData);
+
+          // also emit 'message'for backwards compatibility
+          this.emit('message' as any, parsedData);
         } catch (e) {
           this.emit('error', e);
         }
@@ -242,16 +271,16 @@ export class FalStream<Input, Output> {
  * object as a result, that can be used to get partial results through either
  * `AsyncIterator` or through an event listener.
  *
- * @param appId the app id, e.g. `fal-ai/llavav15-13b`.
+ * @param endpointId the endpoint id, e.g. `fal-ai/llavav15-13b`.
  * @param options the request options, including the input payload.
  * @returns the `FalStream` instance.
  */
 export async function stream<Input = Record<string, any>, Output = any>(
-  appId: string,
+  endpointId: string,
   options: StreamOptions<Input>
 ): Promise<FalStream<Input, Output>> {
-  const token = await getTemporaryAuthToken(appId);
-  const url = buildUrl(appId, { path: '/stream' });
+  const token = await getTemporaryAuthToken(endpointId);
+  const url = buildUrl(endpointId, { path: '/stream' });
 
   const input =
     options.input && options.autoUpload !== false

From 2c1a2e21d919e588aac0d13235a98143ac1c4094 Mon Sep 17 00:00:00 2001
From: Daniel Rochetti <daniel.rochetti@gmail.com>
Date: Tue, 23 Jul 2024 15:30:16 -0700
Subject: [PATCH 02/14] fix: buffer update

---
 apps/demo-nextjs-app-router/app/streaming/audio/page.tsx | 6 +++---
 1 file changed, 3 insertions(+), 3 deletions(-)

diff --git a/apps/demo-nextjs-app-router/app/streaming/audio/page.tsx b/apps/demo-nextjs-app-router/app/streaming/audio/page.tsx
index e66f644..b624197 100644
--- a/apps/demo-nextjs-app-router/app/streaming/audio/page.tsx
+++ b/apps/demo-nextjs-app-router/app/streaming/audio/page.tsx
@@ -64,15 +64,14 @@ export default function AudioStreamingDemo() {
       }
     );
     setStreamStatus('running');
+    await audioRef.current?.play();
 
     stream.on('data', (data: Uint8Array) => {
       const sourceBuffer = sourceBufferRef.current;
 
-      audioRef.current?.play();
-
       if (sourceBuffer) {
         console.log('Appending buffer...');
-        // sourceBuffer.appendBuffer(data);
+        sourceBuffer.appendBuffer(data);
         // console.log('sourceBuffer', sourceBuffer);
       } else {
         console.warn('Source buffer not found or not ready');
@@ -99,6 +98,7 @@ export default function AudioStreamingDemo() {
           <button
             onClick={runInference}
             className="bg-indigo-600 hover:bg-indigo-700 text-white font-bold text-lg py-3 px-6 mx-auto rounded focus:outline-none focus:shadow-outline disabled:opacity-70"
+            disabled={streamStatus === 'running'}
           >
             Run inference
           </button>

From 7cb65424054557185a7f1667cd6717a8a013f2d7 Mon Sep 17 00:00:00 2001
From: Daniel Rochetti <daniel.rochetti@gmail.com>
Date: Tue, 23 Jul 2024 15:48:32 -0700
Subject: [PATCH 03/14] fix: audio playing

---
 .../app/streaming/audio/page.tsx              | 55 +++++++++++++++----
 1 file changed, 44 insertions(+), 11 deletions(-)

diff --git a/apps/demo-nextjs-app-router/app/streaming/audio/page.tsx b/apps/demo-nextjs-app-router/app/streaming/audio/page.tsx
index b624197..3ca5616 100644
--- a/apps/demo-nextjs-app-router/app/streaming/audio/page.tsx
+++ b/apps/demo-nextjs-app-router/app/streaming/audio/page.tsx
@@ -11,8 +11,13 @@ type PlayHTInput = {
   text: string;
 };
 
+const DEFAULT_PROMPT =
+  'Hey, this is Daniel from fal (dot) ai. Please hold on a moment, let me just um pull up your details real quick. Can you tell me your account email or, your phone number?';
+
 export default function AudioStreamingDemo() {
+  const [prompt, setPrompt] = useState<string>(DEFAULT_PROMPT);
   const [streamStatus, setStreamStatus] = useState<string>('idle');
+  const [timeToFirstChunk, setTimeToFirstChunk] = useState<number | null>(null);
 
   const audioRef = useRef<HTMLAudioElement | null>(null);
   const mediaSourceRef = useRef<MediaSource | null>(null);
@@ -55,31 +60,44 @@ export default function AudioStreamingDemo() {
   }, []);
 
   const runInference = async () => {
+    setTimeToFirstChunk(null);
+    const startedAt = Date.now();
     const stream = await fal.stream<PlayHTInput, Uint8Array>(
       'fal-ai/playht-tts',
       {
         input: {
-          text: 'Do you know who drew this picture and what is the name of it?',
+          text: prompt,
         },
       }
     );
     setStreamStatus('running');
-    await audioRef.current?.play();
+    // await audioRef.current?.play();
+    let firstChunk = true;
 
     stream.on('data', (data: Uint8Array) => {
+      if (audioRef.current?.paused) {
+        audioRef.current?.play();
+      }
+      console.log('Received data', data);
+      if (firstChunk) {
+        setTimeToFirstChunk(Date.now() - startedAt);
+        firstChunk = false;
+      }
       const sourceBuffer = sourceBufferRef.current;
 
+      console.log('sourceBuffer before', sourceBuffer);
       if (sourceBuffer) {
-        console.log('Appending buffer...');
+        // console.log('Appending buffer...');
         sourceBuffer.appendBuffer(data);
-        // console.log('sourceBuffer', sourceBuffer);
+        // console.log('sourceBuffer after', sourceBuffer);
       } else {
         console.warn('Source buffer not found or not ready');
       }
     });
 
     const result = await stream.done();
-    console.log('result', result);
+    // console.log('result', result);
+    sourceBufferRef.current?.appendBuffer(result);
     setStreamStatus('done');
     sourceBufferRef.current?.addEventListener('updateend', () => {
       mediaSourceRef.current?.endOfStream();
@@ -94,10 +112,17 @@ export default function AudioStreamingDemo() {
           <code className="text-indigo-500">streaming</code>
         </h1>
 
-        <div className="flex flex-row space-x-2">
+        <div className="flex flex-col space-y-2 flex-1 w-full">
+          <textarea
+            className="flex-1 p-2 rounded bg-black/10 dark:bg-white/5 border border-black/20 dark:border-white/10 text-sm"
+            value={prompt}
+            onChange={(e) => setPrompt(e.target.value)}
+            placeholder="Prompt"
+            rows={4}
+          ></textarea>
           <button
             onClick={runInference}
-            className="bg-indigo-600 hover:bg-indigo-700 text-white font-bold text-lg py-3 px-6 mx-auto rounded focus:outline-none focus:shadow-outline disabled:opacity-70"
+            className="bg-indigo-600 hover:bg-indigo-700 text-white font-bold py-3 px-6 mx-auto rounded focus:outline-none focus:shadow-outline disabled:opacity-70"
             disabled={streamStatus === 'running'}
           >
             Run inference
@@ -106,10 +131,18 @@ export default function AudioStreamingDemo() {
 
         <div className="w-full flex flex-col space-y-4">
           <div className="flex flex-row items-center justify-between">
-            <h2 className="text-2xl font-bold">Answer</h2>
-            <span>
-              streaming: <code className="font-semibold">{streamStatus}</code>
-            </span>
+            <h2 className="text-2xl font-bold">Result</h2>
+            <div className="space-x-4">
+              <span>
+                time to first chunk:{' '}
+                <code className="font-semibold">
+                  {timeToFirstChunk ? `${timeToFirstChunk}ms` : 'n/a'}
+                </code>
+              </span>
+              <span>
+                streaming: <code className="font-semibold">{streamStatus}</code>
+              </span>
+            </div>
           </div>
           <audio controls className="w-full" ref={audioRef} />
         </div>

From 8de47aff15628ea5aa54dce07fcd38c5862bc8d8 Mon Sep 17 00:00:00 2001
From: Daniel Rochetti <daniel.rochetti@gmail.com>
Date: Tue, 23 Jul 2024 16:00:28 -0700
Subject: [PATCH 04/14] fix: media resource setup

---
 .../app/streaming/audio/page.tsx              | 52 ++++++-------------
 1 file changed, 16 insertions(+), 36 deletions(-)

diff --git a/apps/demo-nextjs-app-router/app/streaming/audio/page.tsx b/apps/demo-nextjs-app-router/app/streaming/audio/page.tsx
index 3ca5616..76e1ed9 100644
--- a/apps/demo-nextjs-app-router/app/streaming/audio/page.tsx
+++ b/apps/demo-nextjs-app-router/app/streaming/audio/page.tsx
@@ -1,7 +1,7 @@
 'use client';
 
 import * as fal from '@fal-ai/serverless-client';
-import { useEffect, useRef, useState } from 'react';
+import { useRef, useState } from 'react';
 
 fal.config({
   proxyUrl: '/api/fal/proxy',
@@ -23,43 +23,24 @@ export default function AudioStreamingDemo() {
   const mediaSourceRef = useRef<MediaSource | null>(null);
   const sourceBufferRef = useRef<SourceBuffer | null>(null);
 
-  useEffect(() => {
+  const setupMediaSource = () => {
     if (!audioRef.current) {
       console.warn('Audio element not found or not ready');
-      return;
+      return null;
     }
-    const mimeCodec = 'audio/mpeg';
-
-    let sourceUrl: string | null = null;
-    if ('MediaSource' in window && MediaSource.isTypeSupported(mimeCodec)) {
-      const mediaSource = new MediaSource();
-      mediaSourceRef.current = mediaSource;
-      sourceUrl = URL.createObjectURL(mediaSource);
-      console.log('sourceUrl', sourceUrl);
-      audioRef.current.src = sourceUrl;
-
-      mediaSource.addEventListener('sourceopen', () => {
-        console.log('MediaSource ready - adding source buffer');
-        const sourceBuffer = mediaSource.addSourceBuffer(mimeCodec);
-        // sourceBuffer.addEventListener('updateend', () => {
-        //   mediaSource.endOfStream();
-        // });
-        sourceBufferRef.current = sourceBuffer;
-      });
-    } else {
-      console.error(
-        'Unsupported MIME type or MediaSource API is not available'
-      );
-    }
-
-    return () => {
-      if (sourceUrl) {
-        URL.revokeObjectURL(sourceUrl);
-      }
-    };
-  }, []);
+    const mediaSource = new MediaSource();
+    mediaSourceRef.current = mediaSource;
+    const url = URL.createObjectURL(mediaSource);
+    audioRef.current.src = url;
+    mediaSource.addEventListener('sourceopen', () => {
+      const sourceBuffer = mediaSource.addSourceBuffer('audio/mpeg');
+      sourceBufferRef.current = sourceBuffer;
+    });
+    return url;
+  };
 
   const runInference = async () => {
+    setupMediaSource();
     setTimeToFirstChunk(null);
     const startedAt = Date.now();
     const stream = await fal.stream<PlayHTInput, Uint8Array>(
@@ -78,14 +59,14 @@ export default function AudioStreamingDemo() {
       if (audioRef.current?.paused) {
         audioRef.current?.play();
       }
-      console.log('Received data', data);
+      // console.log('Received data', data);
       if (firstChunk) {
         setTimeToFirstChunk(Date.now() - startedAt);
         firstChunk = false;
       }
       const sourceBuffer = sourceBufferRef.current;
 
-      console.log('sourceBuffer before', sourceBuffer);
+      // console.log('sourceBuffer before', sourceBuffer);
       if (sourceBuffer) {
         // console.log('Appending buffer...');
         sourceBuffer.appendBuffer(data);
@@ -97,7 +78,6 @@ export default function AudioStreamingDemo() {
 
     const result = await stream.done();
     // console.log('result', result);
-    sourceBufferRef.current?.appendBuffer(result);
     setStreamStatus('done');
     sourceBufferRef.current?.addEventListener('updateend', () => {
       mediaSourceRef.current?.endOfStream();

From 312cee951c42d48916cf08d45af3e1ad0180b057 Mon Sep 17 00:00:00 2001
From: Daniel Rochetti <daniel.rochetti@gmail.com>
Date: Fri, 26 Jul 2024 14:53:19 -0700
Subject: [PATCH 05/14] feat: allow streaming through the proxy

---
 libs/client/package.json     |  2 +-
 libs/client/src/request.ts   | 19 +++++++++++++---
 libs/client/src/streaming.ts | 43 ++++++++++++++++++++++--------------
 3 files changed, 44 insertions(+), 20 deletions(-)

diff --git a/libs/client/package.json b/libs/client/package.json
index c1433c3..0da37bb 100644
--- a/libs/client/package.json
+++ b/libs/client/package.json
@@ -1,7 +1,7 @@
 {
   "name": "@fal-ai/serverless-client",
   "description": "The fal serverless JS/TS client",
-  "version": "0.14.0-alpha.5",
+  "version": "0.14.0-alpha.6",
   "license": "MIT",
   "repository": {
     "type": "git",
diff --git a/libs/client/src/request.ts b/libs/client/src/request.ts
index 618eb7f..bf94f30 100644
--- a/libs/client/src/request.ts
+++ b/libs/client/src/request.ts
@@ -1,14 +1,20 @@
 import { getConfig } from './config';
+import { ResponseHandler } from './response';
 import { getUserAgent, isBrowser } from './runtime';
 
 const isCloudflareWorkers =
   typeof navigator !== 'undefined' &&
   navigator?.userAgent === 'Cloudflare-Workers';
 
+type RequestOptions = {
+  responseHandler?: ResponseHandler<any>;
+};
+
 export async function dispatchRequest<Input, Output>(
   method: string,
   targetUrl: string,
-  input: Input
+  input: Input,
+  options: RequestOptions & RequestInit = {}
 ): Promise<Output> {
   const {
     credentials: credentialsValue,
@@ -39,14 +45,21 @@ export async function dispatchRequest<Input, Output>(
     ...userAgent,
     ...(headers ?? {}),
   } as HeadersInit;
+
+  const { responseHandler: customResponseHandler, ...requestInit } = options;
   const response = await fetch(url, {
+    ...requestInit,
     method,
-    headers: requestHeaders,
+    headers: {
+      ...requestHeaders,
+      ...(requestInit.headers ?? {}),
+    },
     ...(!isCloudflareWorkers && { mode: 'cors' }),
     body:
       method.toLowerCase() !== 'get' && input
         ? JSON.stringify(input)
         : undefined,
   });
-  return await responseHandler(response);
+  const handleResponse = customResponseHandler ?? responseHandler;
+  return await handleResponse(response);
 }
diff --git a/libs/client/src/streaming.ts b/libs/client/src/streaming.ts
index e714d14..f637971 100644
--- a/libs/client/src/streaming.ts
+++ b/libs/client/src/streaming.ts
@@ -1,10 +1,12 @@
 import { createParser } from 'eventsource-parser';
 import { getTemporaryAuthToken } from './auth';
-import { getConfig } from './config';
 import { buildUrl } from './function';
+import { dispatchRequest } from './request';
 import { ApiError, defaultResponseHandler } from './response';
 import { storageImpl } from './storage';
 
+type StreamingConnectionMode = 'client' | 'server';
+
 /**
  * The stream API options. It requires the API input and also
  * offers configuration options.
@@ -36,6 +38,16 @@ type StreamOptions<Input> = {
    * By default this is set to `text/event-stream`.
    */
   readonly accept?: string;
+
+  /**
+   * The streaming connection mode. This is used to determine
+   * whether the streaming will be done from the browser itself (client)
+   * or through your own server, either when running on NodeJS or when
+   * using a proxy that supports streaming.
+   *
+   * It defaults to `client` when running in the browser or `server` otherwise.
+   */
+  readonly connectionMode?: StreamingConnectionMode;
 };
 
 const EVENT_STREAM_TIMEOUT = 15 * 1000;
@@ -92,18 +104,11 @@ export class FalStream<Input, Output> {
   private start = async () => {
     const { url, options } = this;
     const { input, method = 'post' } = options;
-    const { fetch = global.fetch } = getConfig();
     try {
-      const response = await fetch(url, {
-        method: method.toUpperCase(),
-        headers: {
-          accept: options.accept ?? 'text/event-stream',
-          'content-type': 'application/json',
-        },
-        body: input && method !== 'get' ? JSON.stringify(input) : undefined,
+      dispatchRequest(method.toUpperCase(), url, input, {
+        responseHandler: this.handleResponse,
         signal: this.abortController.signal,
       });
-      this.handleResponse(response);
     } catch (error) {
       this.handleError(error);
     }
@@ -279,7 +284,13 @@ export async function stream<Input = Record<string, any>, Output = any>(
   endpointId: string,
   options: StreamOptions<Input>
 ): Promise<FalStream<Input, Output>> {
-  const token = await getTemporaryAuthToken(endpointId);
+  const queryParams: Record<string, string> = {};
+  const connectionMode =
+    options.connectionMode ??
+    (typeof window === 'undefined' ? 'server' : 'client');
+  if (connectionMode === 'client') {
+    queryParams['fal_jwt_token'] = await getTemporaryAuthToken(endpointId);
+  }
   const url = buildUrl(endpointId, { path: '/stream' });
 
   const input =
@@ -287,11 +298,11 @@ export async function stream<Input = Record<string, any>, Output = any>(
       ? await storageImpl.transformInput(options.input)
       : options.input;
 
-  const queryParams = new URLSearchParams({
-    fal_jwt_token: token,
-  });
-
-  return new FalStream<Input, Output>(`${url}?${queryParams}`, {
+  const query =
+    Object.keys(queryParams).length > 0
+      ? '?' + new URLSearchParams(queryParams).toString()
+      : '';
+  return new FalStream<Input, Output>(url + query, {
     ...options,
     input: input as Input,
   });

From b0fb3057e924915d3ba58919b2a478c31fe592f2 Mon Sep 17 00:00:00 2001
From: Daniel Rochetti <daniel.rochetti@gmail.com>
Date: Fri, 26 Jul 2024 14:53:48 -0700
Subject: [PATCH 06/14] fix: legacy urls env

---
 libs/client/src/function.ts | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/libs/client/src/function.ts b/libs/client/src/function.ts
index 86e5e7f..1df5ade 100644
--- a/libs/client/src/function.ts
+++ b/libs/client/src/function.ts
@@ -90,7 +90,7 @@ export function buildUrl<Input>(
 
   // TODO remove this after some time, fal.run should be preferred
   if (parts.length === 2 && isUUIDv4(parts[1])) {
-    const host = 'gateway.shark.fal.ai';
+    const host = 'gateway.alpha.fal.ai';
     return `https://${host}/trigger/${id}/${path}${queryParams}`;
   }
 

From 81c174e6b4e1632ce48ce4a0d8f8541908b921f7 Mon Sep 17 00:00:00 2001
From: Daniel Rochetti <daniel.rochetti@gmail.com>
Date: Fri, 26 Jul 2024 16:07:02 -0700
Subject: [PATCH 07/14] feat: streaming connection mode

---
 .../app/streaming/audio/page.tsx              | 11 +--
 libs/client/src/streaming.ts                  | 67 +++++++++++++------
 2 files changed, 50 insertions(+), 28 deletions(-)

diff --git a/apps/demo-nextjs-app-router/app/streaming/audio/page.tsx b/apps/demo-nextjs-app-router/app/streaming/audio/page.tsx
index 76e1ed9..3aaf684 100644
--- a/apps/demo-nextjs-app-router/app/streaming/audio/page.tsx
+++ b/apps/demo-nextjs-app-router/app/streaming/audio/page.tsx
@@ -12,7 +12,7 @@ type PlayHTInput = {
 };
 
 const DEFAULT_PROMPT =
-  'Hey, this is Daniel from fal (dot) ai. Please hold on a moment, let me just um pull up your details real quick. Can you tell me your account email or, your phone number?';
+  "As she sat watching the world go by, something caught her eye. It wasn't so much its color or shape, but the way it was moving. She squinted to see if she could better understand what it was and where it was going, but it didn't help. As she continued to stare into the distance, she didn't understand why this uneasiness was building inside her body.";
 
 export default function AudioStreamingDemo() {
   const [prompt, setPrompt] = useState<string>(DEFAULT_PROMPT);
@@ -49,35 +49,30 @@ export default function AudioStreamingDemo() {
         input: {
           text: prompt,
         },
+        connectionMode: 'server',
       }
     );
     setStreamStatus('running');
-    // await audioRef.current?.play();
     let firstChunk = true;
 
     stream.on('data', (data: Uint8Array) => {
       if (audioRef.current?.paused) {
         audioRef.current?.play();
       }
-      // console.log('Received data', data);
       if (firstChunk) {
         setTimeToFirstChunk(Date.now() - startedAt);
         firstChunk = false;
       }
       const sourceBuffer = sourceBufferRef.current;
 
-      // console.log('sourceBuffer before', sourceBuffer);
       if (sourceBuffer) {
-        // console.log('Appending buffer...');
         sourceBuffer.appendBuffer(data);
-        // console.log('sourceBuffer after', sourceBuffer);
       } else {
         console.warn('Source buffer not found or not ready');
       }
     });
 
-    const result = await stream.done();
-    // console.log('result', result);
+    await stream.done();
     setStreamStatus('done');
     sourceBufferRef.current?.addEventListener('updateend', () => {
       mediaSourceRef.current?.endOfStream();
diff --git a/libs/client/src/streaming.ts b/libs/client/src/streaming.ts
index f637971..b282b2f 100644
--- a/libs/client/src/streaming.ts
+++ b/libs/client/src/streaming.ts
@@ -1,5 +1,6 @@
 import { createParser } from 'eventsource-parser';
 import { getTemporaryAuthToken } from './auth';
+import { getConfig } from './config';
 import { buildUrl } from './function';
 import { dispatchRequest } from './request';
 import { ApiError, defaultResponseHandler } from './response';
@@ -17,6 +18,11 @@ type StreamOptions<Input> = {
    */
   readonly input?: Input;
 
+  /**
+   * The query parameters to be sent with the request.
+   */
+  readonly queryParams?: Record<string, string>;
+
   /**
    * The maximum time interval in milliseconds between stream chunks. Defaults to 15s.
    */
@@ -61,6 +67,7 @@ type EventHandler<T = any> = (event: T) => void;
  */
 export class FalStream<Input, Output> {
   // properties
+  endpointId: string;
   url: string;
   options: StreamOptions<Input>;
 
@@ -76,8 +83,12 @@ export class FalStream<Input, Output> {
 
   private abortController = new AbortController();
 
-  constructor(url: string, options: StreamOptions<Input>) {
-    this.url = url;
+  constructor(endpointId: string, options: StreamOptions<Input>) {
+    this.endpointId = endpointId;
+    this.url = buildUrl(endpointId, {
+      path: '/stream',
+      query: options.queryParams,
+    });
     this.options = options;
     this.donePromise = new Promise<Output>((resolve, reject) => {
       if (this.streamClosed) {
@@ -102,10 +113,40 @@ export class FalStream<Input, Output> {
   }
 
   private start = async () => {
-    const { url, options } = this;
-    const { input, method = 'post' } = options;
+    const { endpointId, options } = this;
+    const {
+      input,
+      method = 'post',
+      connectionMode = typeof window === 'undefined' ? 'server' : 'client',
+      queryParams = {},
+    } = options;
     try {
-      dispatchRequest(method.toUpperCase(), url, input, {
+      if (connectionMode === 'client') {
+        // if we are in the browser, we need to get a temporary token
+        // to authenticate the request
+        const token = await getTemporaryAuthToken(endpointId);
+        const { fetch = global.fetch } = getConfig();
+        const url = buildUrl(endpointId, {
+          path: '/stream',
+          query: {
+            ...queryParams,
+            fal_jwt_token: token,
+          },
+        });
+        const response = await fetch(url, {
+          method: method.toUpperCase(),
+          headers: {
+            accept: options.accept ?? 'text/event-stream',
+            'content-type': 'application/json',
+          },
+          body: input && method !== 'get' ? JSON.stringify(input) : undefined,
+        });
+        return await this.handleResponse(response);
+      }
+      return await dispatchRequest(method.toUpperCase(), this.url, input, {
+        headers: {
+          accept: options.accept ?? 'text/event-stream',
+        },
         responseHandler: this.handleResponse,
         signal: this.abortController.signal,
       });
@@ -284,25 +325,11 @@ export async function stream<Input = Record<string, any>, Output = any>(
   endpointId: string,
   options: StreamOptions<Input>
 ): Promise<FalStream<Input, Output>> {
-  const queryParams: Record<string, string> = {};
-  const connectionMode =
-    options.connectionMode ??
-    (typeof window === 'undefined' ? 'server' : 'client');
-  if (connectionMode === 'client') {
-    queryParams['fal_jwt_token'] = await getTemporaryAuthToken(endpointId);
-  }
-  const url = buildUrl(endpointId, { path: '/stream' });
-
   const input =
     options.input && options.autoUpload !== false
       ? await storageImpl.transformInput(options.input)
       : options.input;
-
-  const query =
-    Object.keys(queryParams).length > 0
-      ? '?' + new URLSearchParams(queryParams).toString()
-      : '';
-  return new FalStream<Input, Output>(url + query, {
+  return new FalStream<Input, Output>(endpointId, {
     ...options,
     input: input as Input,
   });

From d9561c90d366d073f67a8dca4a8f099a023b0f19 Mon Sep 17 00:00:00 2001
From: Daniel Rochetti <daniel.rochetti@gmail.com>
Date: Fri, 26 Jul 2024 16:14:51 -0700
Subject: [PATCH 08/14] chore: bump client alpha version

---
 libs/client/package.json | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/libs/client/package.json b/libs/client/package.json
index 0da37bb..133d849 100644
--- a/libs/client/package.json
+++ b/libs/client/package.json
@@ -1,7 +1,7 @@
 {
   "name": "@fal-ai/serverless-client",
   "description": "The fal serverless JS/TS client",
-  "version": "0.14.0-alpha.6",
+  "version": "0.14.0-alpha.7",
   "license": "MIT",
   "repository": {
     "type": "git",

From 13ca3a10f73251b51f020bbff587d8cf2b734374 Mon Sep 17 00:00:00 2001
From: Daniel Rochetti <daniel.rochetti@gmail.com>
Date: Fri, 26 Jul 2024 16:16:28 -0700
Subject: [PATCH 09/14] feat(proxy): enable response streaming when supported

---
 libs/proxy/package.json   |   2 +-
 libs/proxy/src/express.ts |  30 ++++++++-
 libs/proxy/src/index.ts   |  14 ++---
 libs/proxy/src/nextjs.ts  |  31 +++++++---
 libs/proxy/src/svelte.ts  |  13 ++--
 package-lock.json         | 125 ++++++++++++++++++++------------------
 package.json              |   2 +-
 7 files changed, 132 insertions(+), 85 deletions(-)

diff --git a/libs/proxy/package.json b/libs/proxy/package.json
index 2ce4d32..855a868 100644
--- a/libs/proxy/package.json
+++ b/libs/proxy/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@fal-ai/serverless-proxy",
-  "version": "0.7.5",
+  "version": "0.8.0-alpha.1",
   "license": "MIT",
   "repository": {
     "type": "git",
diff --git a/libs/proxy/src/express.ts b/libs/proxy/src/express.ts
index 5afb765..a49b312 100644
--- a/libs/proxy/src/express.ts
+++ b/libs/proxy/src/express.ts
@@ -17,11 +17,37 @@ export const handler: RequestHandler = async (request, response, next) => {
   await handleRequest({
     id: 'express',
     method: request.method,
-    respondWith: (status, data) => response.status(status).json(data),
+    getRequestBody: async () => JSON.stringify(request.body),
     getHeaders: () => request.headers,
     getHeader: (name) => request.headers[name],
     sendHeader: (name, value) => response.setHeader(name, value),
-    getBody: async () => JSON.stringify(request.body),
+    respondWith: (status, data) => response.status(status).json(data),
+    sendResponse: async (res) => {
+      if (res.body instanceof ReadableStream) {
+        const reader = res.body.getReader();
+        const stream = async () => {
+          const { done, value } = await reader.read();
+          if (done) {
+            response.end();
+            return response;
+          }
+          response.write(value);
+          return await stream();
+        };
+
+        return await stream().catch((error) => {
+          if (!response.headersSent) {
+            response.status(500).send(error.message);
+          } else {
+            response.end();
+          }
+        });
+      }
+      if (res.headers.get('content-type')?.includes('application/json')) {
+        return response.status(res.status).json(await res.json());
+      }
+      return response.status(res.status).send(await res.text());
+    },
   });
   next();
 };
diff --git a/libs/proxy/src/index.ts b/libs/proxy/src/index.ts
index c920f75..79d1fad 100644
--- a/libs/proxy/src/index.ts
+++ b/libs/proxy/src/index.ts
@@ -19,10 +19,11 @@ export interface ProxyBehavior<ResponseType> {
   method: string;
   // eslint-disable-next-line @typescript-eslint/no-explicit-any
   respondWith(status: number, data: string | any): ResponseType;
+  sendResponse(response: Response): Promise<ResponseType>;
   getHeaders(): Record<string, HeaderValue>;
   getHeader(name: string): HeaderValue;
   sendHeader(name: string, value: string): void;
-  getBody(): Promise<string | undefined>;
+  getRequestBody(): Promise<string | undefined>;
   resolveApiKey?: () => Promise<string | undefined>;
 }
 
@@ -109,7 +110,7 @@ export async function handleRequest<ResponseType>(
     body:
       behavior.method?.toUpperCase() === 'GET'
         ? undefined
-        : await behavior.getBody(),
+        : await behavior.getRequestBody(),
   });
 
   // copy headers from fal to the proxied response
@@ -119,12 +120,7 @@ export async function handleRequest<ResponseType>(
     }
   });
 
-  if (res.headers.get('content-type')?.includes('application/json')) {
-    const data = await res.json();
-    return behavior.respondWith(res.status, data);
-  }
-  const data = await res.text();
-  return behavior.respondWith(res.status, data);
+  return behavior.sendResponse(res);
 }
 
 export function fromHeaders(
@@ -138,3 +134,5 @@ export function fromHeaders(
   });
   return result;
 }
+
+export const responsePassthrough = (res: Response) => Promise.resolve(res);
diff --git a/libs/proxy/src/nextjs.ts b/libs/proxy/src/nextjs.ts
index 4f941b7..f978f78 100644
--- a/libs/proxy/src/nextjs.ts
+++ b/libs/proxy/src/nextjs.ts
@@ -1,6 +1,11 @@
 import { NextResponse, type NextRequest } from 'next/server';
 import type { NextApiHandler } from 'next/types';
-import { DEFAULT_PROXY_ROUTE, fromHeaders, handleRequest } from './index';
+import {
+  DEFAULT_PROXY_ROUTE,
+  fromHeaders,
+  handleRequest,
+  responsePassthrough,
+} from './index';
 
 /**
  * The default Next API route for the fal.ai client proxy.
@@ -11,6 +16,8 @@ export const PROXY_ROUTE = DEFAULT_PROXY_ROUTE;
  * The Next API route handler for the fal.ai client proxy.
  * Use it with the /pages router in Next.js.
  *
+ * Note: the page routers proxy doesn't support streaming responses.
+ *
  * @param request the Next API request object.
  * @param response the Next API response object.
  * @returns a promise that resolves when the request is handled.
@@ -19,11 +26,17 @@ export const handler: NextApiHandler = async (request, response) => {
   return handleRequest({
     id: 'nextjs-page-router',
     method: request.method || 'POST',
-    respondWith: (status, data) => response.status(status).json(data),
+    getRequestBody: async () => JSON.stringify(request.body),
     getHeaders: () => request.headers,
     getHeader: (name) => request.headers[name],
     sendHeader: (name, value) => response.setHeader(name, value),
-    getBody: async () => JSON.stringify(request.body),
+    respondWith: (status, data) => response.status(status).json(data),
+    sendResponse: async (res) => {
+      if (res.headers.get('content-type')?.includes('application/json')) {
+        return response.status(res.status).json(await res.json());
+      }
+      return response.status(res.status).send(await res.text());
+    },
   });
 };
 
@@ -36,18 +49,22 @@ export const handler: NextApiHandler = async (request, response) => {
 async function routeHandler(request: NextRequest) {
   // eslint-disable-next-line @typescript-eslint/no-explicit-any
   const responseHeaders: Record<string, any> = {};
+
+  // check if response if from a streaming request
+
   return await handleRequest({
     id: 'nextjs-app-router',
     method: request.method,
+    getRequestBody: async () => request.text(),
+    getHeaders: () => fromHeaders(request.headers),
+    getHeader: (name) => request.headers.get(name),
+    sendHeader: (name, value) => (responseHeaders[name] = value),
     respondWith: (status, data) =>
       NextResponse.json(data, {
         status,
         headers: responseHeaders,
       }),
-    getHeaders: () => fromHeaders(request.headers),
-    getHeader: (name) => request.headers.get(name),
-    sendHeader: (name, value) => (responseHeaders[name] = value),
-    getBody: async () => request.text(),
+    sendResponse: responsePassthrough,
   });
 }
 
diff --git a/libs/proxy/src/svelte.ts b/libs/proxy/src/svelte.ts
index e820919..56dea0d 100644
--- a/libs/proxy/src/svelte.ts
+++ b/libs/proxy/src/svelte.ts
@@ -1,5 +1,5 @@
 import { type RequestHandler } from '@sveltejs/kit';
-import { fromHeaders, handleRequest } from './index';
+import { fromHeaders, handleRequest, responsePassthrough } from './index';
 
 type RequestHandlerParams = {
   /**
@@ -28,16 +28,17 @@ export const createRequestHandler = ({
     return await handleRequest({
       id: 'svelte-app-router',
       method: request.method,
+      getRequestBody: async () => request.text(),
+      getHeaders: () => fromHeaders(request.headers),
+      getHeader: (name) => request.headers.get(name),
+      sendHeader: (name, value) => (responseHeaders[name] = value),
+      resolveApiKey: () => Promise.resolve(FAL_KEY),
       respondWith: (status, data) =>
         new Response(JSON.stringify(data), {
           status,
           headers: responseHeaders,
         }),
-      getHeaders: () => fromHeaders(request.headers),
-      getHeader: (name) => request.headers.get(name),
-      sendHeader: (name, value) => (responseHeaders[name] = value),
-      getBody: async () => request.text(),
-      resolveApiKey: () => Promise.resolve(FAL_KEY),
+      sendResponse: responsePassthrough,
     });
   };
   return {
diff --git a/package-lock.json b/package-lock.json
index 87ad66c..07dc2d4 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -31,7 +31,7 @@
         "http-proxy": "^1.18.1",
         "http-proxy-middleware": "^2.0.6",
         "js-base64": "^3.7.5",
-        "next": "^14.0.3",
+        "next": "^14.2.5",
         "open": "^10.0.3",
         "ora": "^8.0.1",
         "react": "^18.2.0",
@@ -4764,9 +4764,9 @@
       }
     },
     "node_modules/@next/env": {
-      "version": "14.0.3",
-      "resolved": "https://registry.npmjs.org/@next/env/-/env-14.0.3.tgz",
-      "integrity": "sha512-7xRqh9nMvP5xrW4/+L0jgRRX+HoNRGnfJpD+5Wq6/13j3dsdzxO3BCXn7D3hMqsDb+vjZnJq+vI7+EtgrYZTeA=="
+      "version": "14.2.5",
+      "resolved": "https://registry.npmjs.org/@next/env/-/env-14.2.5.tgz",
+      "integrity": "sha512-/zZGkrTOsraVfYjGP8uM0p6r0BDT6xWpkjdVbcz66PJVSpwXX3yNiRycxAuDfBKGWBrZBXRuK/YVlkNgxHGwmA=="
     },
     "node_modules/@next/eslint-plugin-next": {
       "version": "14.0.3",
@@ -4798,9 +4798,9 @@
       }
     },
     "node_modules/@next/swc-darwin-arm64": {
-      "version": "14.0.3",
-      "resolved": "https://registry.npmjs.org/@next/swc-darwin-arm64/-/swc-darwin-arm64-14.0.3.tgz",
-      "integrity": "sha512-64JbSvi3nbbcEtyitNn2LEDS/hcleAFpHdykpcnrstITFlzFgB/bW0ER5/SJJwUPj+ZPY+z3e+1jAfcczRLVGw==",
+      "version": "14.2.5",
+      "resolved": "https://registry.npmjs.org/@next/swc-darwin-arm64/-/swc-darwin-arm64-14.2.5.tgz",
+      "integrity": "sha512-/9zVxJ+K9lrzSGli1///ujyRfon/ZneeZ+v4ptpiPoOU+GKZnm8Wj8ELWU1Pm7GHltYRBklmXMTUqM/DqQ99FQ==",
       "cpu": [
         "arm64"
       ],
@@ -4813,9 +4813,9 @@
       }
     },
     "node_modules/@next/swc-darwin-x64": {
-      "version": "14.0.3",
-      "resolved": "https://registry.npmjs.org/@next/swc-darwin-x64/-/swc-darwin-x64-14.0.3.tgz",
-      "integrity": "sha512-RkTf+KbAD0SgYdVn1XzqE/+sIxYGB7NLMZRn9I4Z24afrhUpVJx6L8hsRnIwxz3ERE2NFURNliPjJ2QNfnWicQ==",
+      "version": "14.2.5",
+      "resolved": "https://registry.npmjs.org/@next/swc-darwin-x64/-/swc-darwin-x64-14.2.5.tgz",
+      "integrity": "sha512-vXHOPCwfDe9qLDuq7U1OYM2wUY+KQ4Ex6ozwsKxp26BlJ6XXbHleOUldenM67JRyBfVjv371oneEvYd3H2gNSA==",
       "cpu": [
         "x64"
       ],
@@ -4828,9 +4828,9 @@
       }
     },
     "node_modules/@next/swc-linux-arm64-gnu": {
-      "version": "14.0.3",
-      "resolved": "https://registry.npmjs.org/@next/swc-linux-arm64-gnu/-/swc-linux-arm64-gnu-14.0.3.tgz",
-      "integrity": "sha512-3tBWGgz7M9RKLO6sPWC6c4pAw4geujSwQ7q7Si4d6bo0l6cLs4tmO+lnSwFp1Tm3lxwfMk0SgkJT7EdwYSJvcg==",
+      "version": "14.2.5",
+      "resolved": "https://registry.npmjs.org/@next/swc-linux-arm64-gnu/-/swc-linux-arm64-gnu-14.2.5.tgz",
+      "integrity": "sha512-vlhB8wI+lj8q1ExFW8lbWutA4M2ZazQNvMWuEDqZcuJJc78iUnLdPPunBPX8rC4IgT6lIx/adB+Cwrl99MzNaA==",
       "cpu": [
         "arm64"
       ],
@@ -4843,9 +4843,9 @@
       }
     },
     "node_modules/@next/swc-linux-arm64-musl": {
-      "version": "14.0.3",
-      "resolved": "https://registry.npmjs.org/@next/swc-linux-arm64-musl/-/swc-linux-arm64-musl-14.0.3.tgz",
-      "integrity": "sha512-v0v8Kb8j8T23jvVUWZeA2D8+izWspeyeDGNaT2/mTHWp7+37fiNfL8bmBWiOmeumXkacM/AB0XOUQvEbncSnHA==",
+      "version": "14.2.5",
+      "resolved": "https://registry.npmjs.org/@next/swc-linux-arm64-musl/-/swc-linux-arm64-musl-14.2.5.tgz",
+      "integrity": "sha512-NpDB9NUR2t0hXzJJwQSGu1IAOYybsfeB+LxpGsXrRIb7QOrYmidJz3shzY8cM6+rO4Aojuef0N/PEaX18pi9OA==",
       "cpu": [
         "arm64"
       ],
@@ -4858,9 +4858,9 @@
       }
     },
     "node_modules/@next/swc-linux-x64-gnu": {
-      "version": "14.0.3",
-      "resolved": "https://registry.npmjs.org/@next/swc-linux-x64-gnu/-/swc-linux-x64-gnu-14.0.3.tgz",
-      "integrity": "sha512-VM1aE1tJKLBwMGtyBR21yy+STfl0MapMQnNrXkxeyLs0GFv/kZqXS5Jw/TQ3TSUnbv0QPDf/X8sDXuMtSgG6eg==",
+      "version": "14.2.5",
+      "resolved": "https://registry.npmjs.org/@next/swc-linux-x64-gnu/-/swc-linux-x64-gnu-14.2.5.tgz",
+      "integrity": "sha512-8XFikMSxWleYNryWIjiCX+gU201YS+erTUidKdyOVYi5qUQo/gRxv/3N1oZFCgqpesN6FPeqGM72Zve+nReVXQ==",
       "cpu": [
         "x64"
       ],
@@ -4873,9 +4873,9 @@
       }
     },
     "node_modules/@next/swc-linux-x64-musl": {
-      "version": "14.0.3",
-      "resolved": "https://registry.npmjs.org/@next/swc-linux-x64-musl/-/swc-linux-x64-musl-14.0.3.tgz",
-      "integrity": "sha512-64EnmKy18MYFL5CzLaSuUn561hbO1Gk16jM/KHznYP3iCIfF9e3yULtHaMy0D8zbHfxset9LTOv6cuYKJgcOxg==",
+      "version": "14.2.5",
+      "resolved": "https://registry.npmjs.org/@next/swc-linux-x64-musl/-/swc-linux-x64-musl-14.2.5.tgz",
+      "integrity": "sha512-6QLwi7RaYiQDcRDSU/os40r5o06b5ue7Jsk5JgdRBGGp8l37RZEh9JsLSM8QF0YDsgcosSeHjglgqi25+m04IQ==",
       "cpu": [
         "x64"
       ],
@@ -4888,9 +4888,9 @@
       }
     },
     "node_modules/@next/swc-win32-arm64-msvc": {
-      "version": "14.0.3",
-      "resolved": "https://registry.npmjs.org/@next/swc-win32-arm64-msvc/-/swc-win32-arm64-msvc-14.0.3.tgz",
-      "integrity": "sha512-WRDp8QrmsL1bbGtsh5GqQ/KWulmrnMBgbnb+59qNTW1kVi1nG/2ndZLkcbs2GX7NpFLlToLRMWSQXmPzQm4tog==",
+      "version": "14.2.5",
+      "resolved": "https://registry.npmjs.org/@next/swc-win32-arm64-msvc/-/swc-win32-arm64-msvc-14.2.5.tgz",
+      "integrity": "sha512-1GpG2VhbspO+aYoMOQPQiqc/tG3LzmsdBH0LhnDS3JrtDx2QmzXe0B6mSZZiN3Bq7IOMXxv1nlsjzoS1+9mzZw==",
       "cpu": [
         "arm64"
       ],
@@ -4903,9 +4903,9 @@
       }
     },
     "node_modules/@next/swc-win32-ia32-msvc": {
-      "version": "14.0.3",
-      "resolved": "https://registry.npmjs.org/@next/swc-win32-ia32-msvc/-/swc-win32-ia32-msvc-14.0.3.tgz",
-      "integrity": "sha512-EKffQeqCrj+t6qFFhIFTRoqb2QwX1mU7iTOvMyLbYw3QtqTw9sMwjykyiMlZlrfm2a4fA84+/aeW+PMg1MjuTg==",
+      "version": "14.2.5",
+      "resolved": "https://registry.npmjs.org/@next/swc-win32-ia32-msvc/-/swc-win32-ia32-msvc-14.2.5.tgz",
+      "integrity": "sha512-Igh9ZlxwvCDsu6438FXlQTHlRno4gFpJzqPjSIBZooD22tKeI4fE/YMRoHVJHmrQ2P5YL1DoZ0qaOKkbeFWeMg==",
       "cpu": [
         "ia32"
       ],
@@ -4918,9 +4918,9 @@
       }
     },
     "node_modules/@next/swc-win32-x64-msvc": {
-      "version": "14.0.3",
-      "resolved": "https://registry.npmjs.org/@next/swc-win32-x64-msvc/-/swc-win32-x64-msvc-14.0.3.tgz",
-      "integrity": "sha512-ERhKPSJ1vQrPiwrs15Pjz/rvDHZmkmvbf/BjPN/UCOI++ODftT0GtasDPi0j+y6PPJi5HsXw+dpRaXUaw4vjuQ==",
+      "version": "14.2.5",
+      "resolved": "https://registry.npmjs.org/@next/swc-win32-x64-msvc/-/swc-win32-x64-msvc-14.2.5.tgz",
+      "integrity": "sha512-tEQ7oinq1/CjSG9uSTerca3v4AZ+dFa+4Yu6ihaG8Ud8ddqLQgFGcnwYls13H5X5CPDPZJdYxyeMui6muOLd4g==",
       "cpu": [
         "x64"
       ],
@@ -7616,17 +7616,16 @@
       }
     },
     "node_modules/@swc/counter": {
-      "version": "0.1.2",
-      "resolved": "https://registry.npmjs.org/@swc/counter/-/counter-0.1.2.tgz",
-      "integrity": "sha512-9F4ys4C74eSTEUNndnER3VJ15oru2NumfQxS8geE+f3eB5xvfxpWyqE5XlVnxb/R14uoXi6SLbBwwiDSkv+XEw==",
-      "devOptional": true,
-      "peer": true
+      "version": "0.1.3",
+      "resolved": "https://registry.npmjs.org/@swc/counter/-/counter-0.1.3.tgz",
+      "integrity": "sha512-e2BR4lsJkkRlKZ/qCHPw9ZaSxc0MVUd7gtbtaB7aMvHeJVYe8sOB8DBZkP2DtISHGSku9sCK6T6cnY0CtXrOCQ=="
     },
     "node_modules/@swc/helpers": {
-      "version": "0.5.2",
-      "resolved": "https://registry.npmjs.org/@swc/helpers/-/helpers-0.5.2.tgz",
-      "integrity": "sha512-E4KcWTpoLHqwPHLxidpOqQbcrZVgi0rsmmZXUle1jXmJfuIf/UWpczUJ7MZZ5tlxytgJXyp0w4PGkkeLiuIdZw==",
+      "version": "0.5.5",
+      "resolved": "https://registry.npmjs.org/@swc/helpers/-/helpers-0.5.5.tgz",
+      "integrity": "sha512-KGYxvIOXcceOAbEk4bi/dVLEK9z8sZ0uBB3Il5b1rhfClSpcX0yfRO0KmTkqR2cnQDymwLB+25ZyMzICg/cm/A==",
       "dependencies": {
+        "@swc/counter": "^0.1.3",
         "tslib": "^2.4.0"
       }
     },
@@ -10369,9 +10368,9 @@
       }
     },
     "node_modules/caniuse-lite": {
-      "version": "1.0.30001558",
-      "resolved": "https://registry.npmjs.org/caniuse-lite/-/caniuse-lite-1.0.30001558.tgz",
-      "integrity": "sha512-/Et7DwLqpjS47JPEcz6VnxU9PwcIdVi0ciLXRWBQdj1XFye68pSQYpV0QtPTfUKWuOaEig+/Vez2l74eDc1tPQ==",
+      "version": "1.0.30001643",
+      "resolved": "https://registry.npmjs.org/caniuse-lite/-/caniuse-lite-1.0.30001643.tgz",
+      "integrity": "sha512-ERgWGNleEilSrHM6iUz/zJNSQTP8Mr21wDWpdgvRwcTXGAq6jMtOUPP4dqFPTdKqZ2wKTdtB+uucZ3MRpAUSmg==",
       "funding": [
         {
           "type": "opencollective",
@@ -15782,7 +15781,8 @@
     "node_modules/glob-to-regexp": {
       "version": "0.4.1",
       "resolved": "https://registry.npmjs.org/glob-to-regexp/-/glob-to-regexp-0.4.1.tgz",
-      "integrity": "sha512-lkX1HJXwyMcprw/5YUZc2s7DrpAiHB21/V+E1rHUrVNokkvB6bqMzT0VfV6/86ZNabt1k14YOIaT7nDvOX3Iiw=="
+      "integrity": "sha512-lkX1HJXwyMcprw/5YUZc2s7DrpAiHB21/V+E1rHUrVNokkvB6bqMzT0VfV6/86ZNabt1k14YOIaT7nDvOX3Iiw==",
+      "dev": true
     },
     "node_modules/glob/node_modules/minimatch": {
       "version": "3.1.2",
@@ -20608,17 +20608,17 @@
       "dev": true
     },
     "node_modules/next": {
-      "version": "14.0.3",
-      "resolved": "https://registry.npmjs.org/next/-/next-14.0.3.tgz",
-      "integrity": "sha512-AbYdRNfImBr3XGtvnwOxq8ekVCwbFTv/UJoLwmaX89nk9i051AEY4/HAWzU0YpaTDw8IofUpmuIlvzWF13jxIw==",
+      "version": "14.2.5",
+      "resolved": "https://registry.npmjs.org/next/-/next-14.2.5.tgz",
+      "integrity": "sha512-0f8aRfBVL+mpzfBjYfQuLWh2WyAwtJXCRfkPF4UJ5qd2YwrHczsrSzXU4tRMV0OAxR8ZJZWPFn6uhSC56UTsLA==",
       "dependencies": {
-        "@next/env": "14.0.3",
-        "@swc/helpers": "0.5.2",
+        "@next/env": "14.2.5",
+        "@swc/helpers": "0.5.5",
         "busboy": "1.6.0",
-        "caniuse-lite": "^1.0.30001406",
+        "caniuse-lite": "^1.0.30001579",
+        "graceful-fs": "^4.2.11",
         "postcss": "8.4.31",
-        "styled-jsx": "5.1.1",
-        "watchpack": "2.4.0"
+        "styled-jsx": "5.1.1"
       },
       "bin": {
         "next": "dist/bin/next"
@@ -20627,18 +20627,19 @@
         "node": ">=18.17.0"
       },
       "optionalDependencies": {
-        "@next/swc-darwin-arm64": "14.0.3",
-        "@next/swc-darwin-x64": "14.0.3",
-        "@next/swc-linux-arm64-gnu": "14.0.3",
-        "@next/swc-linux-arm64-musl": "14.0.3",
-        "@next/swc-linux-x64-gnu": "14.0.3",
-        "@next/swc-linux-x64-musl": "14.0.3",
-        "@next/swc-win32-arm64-msvc": "14.0.3",
-        "@next/swc-win32-ia32-msvc": "14.0.3",
-        "@next/swc-win32-x64-msvc": "14.0.3"
+        "@next/swc-darwin-arm64": "14.2.5",
+        "@next/swc-darwin-x64": "14.2.5",
+        "@next/swc-linux-arm64-gnu": "14.2.5",
+        "@next/swc-linux-arm64-musl": "14.2.5",
+        "@next/swc-linux-x64-gnu": "14.2.5",
+        "@next/swc-linux-x64-musl": "14.2.5",
+        "@next/swc-win32-arm64-msvc": "14.2.5",
+        "@next/swc-win32-ia32-msvc": "14.2.5",
+        "@next/swc-win32-x64-msvc": "14.2.5"
       },
       "peerDependencies": {
         "@opentelemetry/api": "^1.1.0",
+        "@playwright/test": "^1.41.2",
         "react": "^18.2.0",
         "react-dom": "^18.2.0",
         "sass": "^1.3.0"
@@ -20647,6 +20648,9 @@
         "@opentelemetry/api": {
           "optional": true
         },
+        "@playwright/test": {
+          "optional": true
+        },
         "sass": {
           "optional": true
         }
@@ -30163,6 +30167,7 @@
       "version": "2.4.0",
       "resolved": "https://registry.npmjs.org/watchpack/-/watchpack-2.4.0.tgz",
       "integrity": "sha512-Lcvm7MGST/4fup+ifyKi2hjyIAwcdI4HRgtvTpIUxBRhB+RFtUh8XtDOxUfctVCnhVi+QQj49i91OyvzkJl6cg==",
+      "dev": true,
       "dependencies": {
         "glob-to-regexp": "^0.4.1",
         "graceful-fs": "^4.1.2"
diff --git a/package.json b/package.json
index 72848b9..7b5074e 100644
--- a/package.json
+++ b/package.json
@@ -47,7 +47,7 @@
     "http-proxy": "^1.18.1",
     "http-proxy-middleware": "^2.0.6",
     "js-base64": "^3.7.5",
-    "next": "^14.0.3",
+    "next": "^14.2.5",
     "open": "^10.0.3",
     "ora": "^8.0.1",
     "react": "^18.2.0",

From 4c4055da56e71afac7c3c1c8f1ba8b76bdbba5b9 Mon Sep 17 00:00:00 2001
From: Daniel Rochetti <daniel.rochetti@gmail.com>
Date: Fri, 26 Jul 2024 23:18:34 -0700
Subject: [PATCH 10/14] fix: queue streaming

---
 .../demo-nextjs-app-router/app/queue/page.tsx |  9 +++-
 .../app/streaming/audio/page.tsx              |  1 +
 libs/client/package.json                      |  2 +-
 libs/client/src/function.ts                   | 43 +++++++++++++------
 libs/client/src/streaming.ts                  | 42 +++++++++---------
 5 files changed, 61 insertions(+), 36 deletions(-)

diff --git a/apps/demo-nextjs-app-router/app/queue/page.tsx b/apps/demo-nextjs-app-router/app/queue/page.tsx
index e979728..944e41f 100644
--- a/apps/demo-nextjs-app-router/app/queue/page.tsx
+++ b/apps/demo-nextjs-app-router/app/queue/page.tsx
@@ -25,10 +25,15 @@ function Error(props: ErrorProps) {
   );
 }
 
+const DEFAULT_ENDPOINT_ID = 'fal-ai/fast-sdxl';
+const DEFAULT_INPUT = `{
+  "prompt": "A beautiful sunset over the ocean"
+}`;
+
 export default function Home() {
   // Input state
-  const [endpointId, setEndpointId] = useState<string>('');
-  const [input, setInput] = useState<string>('{}');
+  const [endpointId, setEndpointId] = useState<string>(DEFAULT_ENDPOINT_ID);
+  const [input, setInput] = useState<string>(DEFAULT_INPUT);
   // Result state
   const [loading, setLoading] = useState(false);
   const [error, setError] = useState<Error | null>(null);
diff --git a/apps/demo-nextjs-app-router/app/streaming/audio/page.tsx b/apps/demo-nextjs-app-router/app/streaming/audio/page.tsx
index 3aaf684..883bb6b 100644
--- a/apps/demo-nextjs-app-router/app/streaming/audio/page.tsx
+++ b/apps/demo-nextjs-app-router/app/streaming/audio/page.tsx
@@ -50,6 +50,7 @@ export default function AudioStreamingDemo() {
           text: prompt,
         },
         connectionMode: 'server',
+        accept: 'audio/*',
       }
     );
     setStreamStatus('running');
diff --git a/libs/client/package.json b/libs/client/package.json
index 133d849..fa25e01 100644
--- a/libs/client/package.json
+++ b/libs/client/package.json
@@ -1,7 +1,7 @@
 {
   "name": "@fal-ai/serverless-client",
   "description": "The fal serverless JS/TS client",
-  "version": "0.14.0-alpha.7",
+  "version": "0.14.0-alpha.8",
   "license": "MIT",
   "repository": {
     "type": "git",
diff --git a/libs/client/src/function.ts b/libs/client/src/function.ts
index 1df5ade..b3846f0 100644
--- a/libs/client/src/function.ts
+++ b/libs/client/src/function.ts
@@ -1,7 +1,6 @@
-import { getTemporaryAuthToken } from './auth';
 import { dispatchRequest } from './request';
 import { storageImpl } from './storage';
-import { FalStream } from './streaming';
+import { FalStream, StreamingConnectionMode } from './streaming';
 import {
   CompletedQueueStatus,
   EnqueueResult,
@@ -199,6 +198,12 @@ type QueueSubscribeOptions = {
     }
   | {
       mode: 'streaming';
+
+      /**
+       * The connection mode to use for streaming updates. It defaults to `server`.
+       * Set to `client` if your server proxy doesn't support streaming.
+       */
+      connectionMode?: StreamingConnectionMode;
     }
 );
 
@@ -228,6 +233,14 @@ type QueueStatusOptions = BaseQueueOptions & {
   logs?: boolean;
 };
 
+type QueueStatusStreamOptions = QueueStatusOptions & {
+  /**
+   * The connection mode to use for streaming updates. It defaults to `server`.
+   * Set to `client` if your server proxy doesn't support streaming.
+   */
+  connectionMode?: StreamingConnectionMode;
+};
+
 /**
  * Represents a request queue with methods for submitting requests,
  * checking their status, retrieving results, and subscribing to updates.
@@ -263,7 +276,7 @@ interface Queue {
    */
   streamStatus(
     endpointId: string,
-    options: QueueStatusOptions
+    options: QueueStatusStreamOptions
   ): Promise<FalStream<unknown, QueueStatus>>;
 
   /**
@@ -340,24 +353,26 @@ export const queue: Queue = {
 
   async streamStatus(
     endpointId: string,
-    { requestId, logs = false }: QueueStatusOptions
+    { requestId, logs = false, connectionMode }: QueueStatusStreamOptions
   ): Promise<FalStream<unknown, QueueStatus>> {
     const appId = parseAppId(endpointId);
     const prefix = appId.namespace ? `${appId.namespace}/` : '';
-    const token = await getTemporaryAuthToken(endpointId);
+
+    const queryParams = {
+      logs: logs ? '1' : '0',
+    };
+
     const url = buildUrl(`${prefix}${appId.owner}/${appId.alias}`, {
       subdomain: 'queue',
       path: `/requests/${requestId}/status/stream`,
+      query: queryParams,
     });
 
-    const queryParams = new URLSearchParams({
-      fal_jwt_token: token,
-      logs: logs ? '1' : '0',
-    });
-
-    return new FalStream<unknown, QueueStatus>(`${url}?${queryParams}`, {
-      input: {},
+    return new FalStream<unknown, QueueStatus>(endpointId, {
+      url,
       method: 'get',
+      connectionMode,
+      queryParams,
     });
   },
 
@@ -375,6 +390,10 @@ export const queue: Queue = {
       const status = await queue.streamStatus(endpointId, {
         requestId,
         logs: options.logs,
+        connectionMode:
+          'connectionMode' in options
+            ? (options.connectionMode as StreamingConnectionMode)
+            : undefined,
       });
       const logs: RequestLog[] = [];
       if (timeout) {
diff --git a/libs/client/src/streaming.ts b/libs/client/src/streaming.ts
index b282b2f..769107a 100644
--- a/libs/client/src/streaming.ts
+++ b/libs/client/src/streaming.ts
@@ -6,13 +6,19 @@ import { dispatchRequest } from './request';
 import { ApiError, defaultResponseHandler } from './response';
 import { storageImpl } from './storage';
 
-type StreamingConnectionMode = 'client' | 'server';
+export type StreamingConnectionMode = 'client' | 'server';
 
 /**
  * The stream API options. It requires the API input and also
  * offers configuration options.
  */
 type StreamOptions<Input> = {
+  /**
+   * The endpoint URL. If not provided, it will be generated from the
+   * `endpointId` and the `queryParams`.
+   */
+  readonly url?: string;
+
   /**
    * The API input payload.
    */
@@ -51,7 +57,8 @@ type StreamOptions<Input> = {
    * or through your own server, either when running on NodeJS or when
    * using a proxy that supports streaming.
    *
-   * It defaults to `client` when running in the browser or `server` otherwise.
+   * It defaults to `server`. Set to `client` if your server proxy doesn't
+   * support streaming.
    */
   readonly connectionMode?: StreamingConnectionMode;
 };
@@ -85,10 +92,12 @@ export class FalStream<Input, Output> {
 
   constructor(endpointId: string, options: StreamOptions<Input>) {
     this.endpointId = endpointId;
-    this.url = buildUrl(endpointId, {
-      path: '/stream',
-      query: options.queryParams,
-    });
+    this.url =
+      options.url ??
+      buildUrl(endpointId, {
+        path: '/stream',
+        query: options.queryParams,
+      });
     this.options = options;
     this.donePromise = new Promise<Output>((resolve, reject) => {
       if (this.streamClosed) {
@@ -114,32 +123,24 @@ export class FalStream<Input, Output> {
 
   private start = async () => {
     const { endpointId, options } = this;
-    const {
-      input,
-      method = 'post',
-      connectionMode = typeof window === 'undefined' ? 'server' : 'client',
-      queryParams = {},
-    } = options;
+    const { input, method = 'post', connectionMode = 'server' } = options;
     try {
       if (connectionMode === 'client') {
         // if we are in the browser, we need to get a temporary token
         // to authenticate the request
         const token = await getTemporaryAuthToken(endpointId);
         const { fetch = global.fetch } = getConfig();
-        const url = buildUrl(endpointId, {
-          path: '/stream',
-          query: {
-            ...queryParams,
-            fal_jwt_token: token,
-          },
-        });
-        const response = await fetch(url, {
+        const parsedUrl = new URL(this.url);
+        console.log(this.url);
+        parsedUrl.searchParams.set('fal_jwt_token', token);
+        const response = await fetch(parsedUrl.toString(), {
           method: method.toUpperCase(),
           headers: {
             accept: options.accept ?? 'text/event-stream',
             'content-type': 'application/json',
           },
           body: input && method !== 'get' ? JSON.stringify(input) : undefined,
+          signal: this.abortController.signal,
         });
         return await this.handleResponse(response);
       }
@@ -182,7 +183,6 @@ export class FalStream<Input, Output> {
 
     // any response that is not a text/event-stream will be handled as a binary stream
     if (response.headers.get('content-type') !== 'text/event-stream') {
-      // pass the binary chunks to this.emit('data', chunk)
       const reader = body.getReader();
       const emitRawChunk = () => {
         reader.read().then(({ done, value }) => {

From 55b646c4872c802eac97286a66de558f09eac420 Mon Sep 17 00:00:00 2001
From: Daniel Rochetti <daniel.rochetti@gmail.com>
Date: Sat, 27 Jul 2024 01:31:57 -0700
Subject: [PATCH 11/14] chore: deprecated endpoint id cleanup

---
 libs/client/src/function.ts   |  9 +--------
 libs/client/src/streaming.ts  |  1 -
 libs/client/src/utils.spec.ts | 13 +------------
 libs/client/src/utils.ts      |  9 ---------
 4 files changed, 2 insertions(+), 30 deletions(-)

diff --git a/libs/client/src/function.ts b/libs/client/src/function.ts
index b3846f0..82d2b99 100644
--- a/libs/client/src/function.ts
+++ b/libs/client/src/function.ts
@@ -7,7 +7,7 @@ import {
   QueueStatus,
   RequestLog,
 } from './types';
-import { ensureAppIdFormat, isUUIDv4, isValidUrl, parseAppId } from './utils';
+import { ensureAppIdFormat, isValidUrl, parseAppId } from './utils';
 
 /**
  * The function input and other configuration when running
@@ -79,7 +79,6 @@ export function buildUrl<Input>(
     Object.keys(params).length > 0
       ? `?${new URLSearchParams(params).toString()}`
       : '';
-  const parts = id.split('/');
 
   // if a fal url is passed, just use it
   if (isValidUrl(id)) {
@@ -87,12 +86,6 @@ export function buildUrl<Input>(
     return `${url}${path}${queryParams}`;
   }
 
-  // TODO remove this after some time, fal.run should be preferred
-  if (parts.length === 2 && isUUIDv4(parts[1])) {
-    const host = 'gateway.alpha.fal.ai';
-    return `https://${host}/trigger/${id}/${path}${queryParams}`;
-  }
-
   const appId = ensureAppIdFormat(id);
   const subdomain = options.subdomain ? `${options.subdomain}.` : '';
   const url = `https://${subdomain}fal.run/${appId}/${path}`;
diff --git a/libs/client/src/streaming.ts b/libs/client/src/streaming.ts
index 769107a..bcca90b 100644
--- a/libs/client/src/streaming.ts
+++ b/libs/client/src/streaming.ts
@@ -131,7 +131,6 @@ export class FalStream<Input, Output> {
         const token = await getTemporaryAuthToken(endpointId);
         const { fetch = global.fetch } = getConfig();
         const parsedUrl = new URL(this.url);
-        console.log(this.url);
         parsedUrl.searchParams.set('fal_jwt_token', token);
         const response = await fetch(parsedUrl.toString(), {
           method: method.toUpperCase(),
diff --git a/libs/client/src/utils.spec.ts b/libs/client/src/utils.spec.ts
index dcd6d58..f31b0bd 100644
--- a/libs/client/src/utils.spec.ts
+++ b/libs/client/src/utils.spec.ts
@@ -1,17 +1,6 @@
-import uuid from 'uuid-random';
-import { ensureAppIdFormat, isUUIDv4, parseAppId } from './utils';
+import { ensureAppIdFormat, parseAppId } from './utils';
 
 describe('The utils test suite', () => {
-  it('should match a valid v4 uuid', () => {
-    const id = uuid();
-    expect(isUUIDv4(id)).toBe(true);
-  });
-
-  it('should not match invalid v4 id', () => {
-    const id = 'e726b886-e2c2-11ed-b5ea-0242ac120002';
-    expect(isUUIDv4(id)).toBe(false);
-  });
-
   it('shoud match match a legacy appOwner-appId format', () => {
     const id = '12345-abcde-fgh';
     expect(ensureAppIdFormat(id)).toBe('12345/abcde-fgh');
diff --git a/libs/client/src/utils.ts b/libs/client/src/utils.ts
index dd9117d..e307ba3 100644
--- a/libs/client/src/utils.ts
+++ b/libs/client/src/utils.ts
@@ -1,12 +1,3 @@
-export function isUUIDv4(id: string): boolean {
-  return (
-    typeof id === 'string' &&
-    id.length === 36 &&
-    id[14] === '4' &&
-    ['8', '9', 'a', 'b'].includes(id[19])
-  );
-}
-
 export function ensureAppIdFormat(id: string): string {
   const parts = id.split('/');
   if (parts.length > 1) {

From 29be2b89add87109417037de3001ea81d54ed200 Mon Sep 17 00:00:00 2001
From: Daniel Rochetti <daniel.rochetti@gmail.com>
Date: Sat, 27 Jul 2024 01:38:52 -0700
Subject: [PATCH 12/14] fix: client tests

---
 libs/client/src/function.spec.ts | 13 -------------
 libs/client/src/utils.spec.ts    | 14 --------------
 2 files changed, 27 deletions(-)

diff --git a/libs/client/src/function.spec.ts b/libs/client/src/function.spec.ts
index 6c47667..a204333 100644
--- a/libs/client/src/function.spec.ts
+++ b/libs/client/src/function.spec.ts
@@ -1,19 +1,6 @@
-import uuid from 'uuid-random';
 import { buildUrl } from './function';
 
 describe('The function test suite', () => {
-  it('should build the URL with a function UUIDv4', () => {
-    const id = uuid();
-    const url = buildUrl(`12345/${id}`);
-    expect(url).toMatch(`trigger/12345/${id}`);
-  });
-
-  it('should build the URL with a function user-id-app-alias', () => {
-    const alias = '12345-some-alias';
-    const url = buildUrl(alias);
-    expect(url).toMatch(`fal.run/12345/some-alias`);
-  });
-
   it('should build the URL with a function username/app-alias', () => {
     const alias = 'fal-ai/text-to-image';
     const url = buildUrl(alias);
diff --git a/libs/client/src/utils.spec.ts b/libs/client/src/utils.spec.ts
index f31b0bd..ec9c3c5 100644
--- a/libs/client/src/utils.spec.ts
+++ b/libs/client/src/utils.spec.ts
@@ -1,11 +1,6 @@
 import { ensureAppIdFormat, parseAppId } from './utils';
 
 describe('The utils test suite', () => {
-  it('shoud match match a legacy appOwner-appId format', () => {
-    const id = '12345-abcde-fgh';
-    expect(ensureAppIdFormat(id)).toBe('12345/abcde-fgh');
-  });
-
   it('shoud match a current appOwner/appId format', () => {
     const id = 'fal-ai/fast-sdxl';
     expect(ensureAppIdFormat(id)).toBe(id);
@@ -21,15 +16,6 @@ describe('The utils test suite', () => {
     expect(() => ensureAppIdFormat(id)).toThrowError();
   });
 
-  it('should parse a legacy app id', () => {
-    const id = '12345-abcde-fgh';
-    const parsed = parseAppId(id);
-    expect(parsed).toEqual({
-      owner: '12345',
-      alias: 'abcde-fgh',
-    });
-  });
-
   it('should parse a current app id', () => {
     const id = 'fal-ai/fast-sdxl';
     const parsed = parseAppId(id);

From a2002394b33429ce3a83108ae465431ca896f824 Mon Sep 17 00:00:00 2001
From: Daniel Rochetti <daniel.rochetti@gmail.com>
Date: Mon, 29 Jul 2024 08:30:16 -0700
Subject: [PATCH 13/14] chore: demo page updates

---
 apps/demo-nextjs-app-router/app/streaming/audio/page.tsx | 7 +++++--
 1 file changed, 5 insertions(+), 2 deletions(-)

diff --git a/apps/demo-nextjs-app-router/app/streaming/audio/page.tsx b/apps/demo-nextjs-app-router/app/streaming/audio/page.tsx
index 883bb6b..a9558e9 100644
--- a/apps/demo-nextjs-app-router/app/streaming/audio/page.tsx
+++ b/apps/demo-nextjs-app-router/app/streaming/audio/page.tsx
@@ -2,6 +2,7 @@
 
 import * as fal from '@fal-ai/serverless-client';
 import { useRef, useState } from 'react';
+import uuid from 'uuid-random';
 
 fal.config({
   proxyUrl: '/api/fal/proxy',
@@ -9,6 +10,7 @@ fal.config({
 
 type PlayHTInput = {
   text: string;
+  request_id: string;
 };
 
 const DEFAULT_PROMPT =
@@ -48,9 +50,10 @@ export default function AudioStreamingDemo() {
       {
         input: {
           text: prompt,
+          request_id: uuid(),
         },
-        connectionMode: 'server',
         accept: 'audio/*',
+        connectionMode: 'client',
       }
     );
     setStreamStatus('running');
@@ -97,7 +100,7 @@ export default function AudioStreamingDemo() {
             rows={4}
           ></textarea>
           <button
-            onClick={runInference}
+            onClick={() => runInference().catch(console.error)}
             className="bg-indigo-600 hover:bg-indigo-700 text-white font-bold py-3 px-6 mx-auto rounded focus:outline-none focus:shadow-outline disabled:opacity-70"
             disabled={streamStatus === 'running'}
           >

From 6a773d9eddc23008c130cdce2835d204f23f2a63 Mon Sep 17 00:00:00 2001
From: Daniel Rochetti <daniel.rochetti@gmail.com>
Date: Tue, 6 Aug 2024 09:05:11 -0700
Subject: [PATCH 14/14] chore: bump version for release

---
 .../app/streaming/audio/page.tsx              | 131 ------------------
 libs/client/package.json                      |   2 +-
 libs/proxy/package.json                       |   2 +-
 3 files changed, 2 insertions(+), 133 deletions(-)
 delete mode 100644 apps/demo-nextjs-app-router/app/streaming/audio/page.tsx

diff --git a/apps/demo-nextjs-app-router/app/streaming/audio/page.tsx b/apps/demo-nextjs-app-router/app/streaming/audio/page.tsx
deleted file mode 100644
index a9558e9..0000000
--- a/apps/demo-nextjs-app-router/app/streaming/audio/page.tsx
+++ /dev/null
@@ -1,131 +0,0 @@
-'use client';
-
-import * as fal from '@fal-ai/serverless-client';
-import { useRef, useState } from 'react';
-import uuid from 'uuid-random';
-
-fal.config({
-  proxyUrl: '/api/fal/proxy',
-});
-
-type PlayHTInput = {
-  text: string;
-  request_id: string;
-};
-
-const DEFAULT_PROMPT =
-  "As she sat watching the world go by, something caught her eye. It wasn't so much its color or shape, but the way it was moving. She squinted to see if she could better understand what it was and where it was going, but it didn't help. As she continued to stare into the distance, she didn't understand why this uneasiness was building inside her body.";
-
-export default function AudioStreamingDemo() {
-  const [prompt, setPrompt] = useState<string>(DEFAULT_PROMPT);
-  const [streamStatus, setStreamStatus] = useState<string>('idle');
-  const [timeToFirstChunk, setTimeToFirstChunk] = useState<number | null>(null);
-
-  const audioRef = useRef<HTMLAudioElement | null>(null);
-  const mediaSourceRef = useRef<MediaSource | null>(null);
-  const sourceBufferRef = useRef<SourceBuffer | null>(null);
-
-  const setupMediaSource = () => {
-    if (!audioRef.current) {
-      console.warn('Audio element not found or not ready');
-      return null;
-    }
-    const mediaSource = new MediaSource();
-    mediaSourceRef.current = mediaSource;
-    const url = URL.createObjectURL(mediaSource);
-    audioRef.current.src = url;
-    mediaSource.addEventListener('sourceopen', () => {
-      const sourceBuffer = mediaSource.addSourceBuffer('audio/mpeg');
-      sourceBufferRef.current = sourceBuffer;
-    });
-    return url;
-  };
-
-  const runInference = async () => {
-    setupMediaSource();
-    setTimeToFirstChunk(null);
-    const startedAt = Date.now();
-    const stream = await fal.stream<PlayHTInput, Uint8Array>(
-      'fal-ai/playht-tts',
-      {
-        input: {
-          text: prompt,
-          request_id: uuid(),
-        },
-        accept: 'audio/*',
-        connectionMode: 'client',
-      }
-    );
-    setStreamStatus('running');
-    let firstChunk = true;
-
-    stream.on('data', (data: Uint8Array) => {
-      if (audioRef.current?.paused) {
-        audioRef.current?.play();
-      }
-      if (firstChunk) {
-        setTimeToFirstChunk(Date.now() - startedAt);
-        firstChunk = false;
-      }
-      const sourceBuffer = sourceBufferRef.current;
-
-      if (sourceBuffer) {
-        sourceBuffer.appendBuffer(data);
-      } else {
-        console.warn('Source buffer not found or not ready');
-      }
-    });
-
-    await stream.done();
-    setStreamStatus('done');
-    sourceBufferRef.current?.addEventListener('updateend', () => {
-      mediaSourceRef.current?.endOfStream();
-    });
-  };
-
-  return (
-    <div className="min-h-screen dark:bg-gray-900 bg-gray-100">
-      <main className="container dark:text-gray-50 text-gray-900 flex flex-col items-center justify-center w-full flex-1 py-10 space-y-8">
-        <h1 className="text-2xl font-bold mb-8">
-          Hello <code className="text-pink-600">fal</code> +{' '}
-          <code className="text-indigo-500">streaming</code>
-        </h1>
-
-        <div className="flex flex-col space-y-2 flex-1 w-full">
-          <textarea
-            className="flex-1 p-2 rounded bg-black/10 dark:bg-white/5 border border-black/20 dark:border-white/10 text-sm"
-            value={prompt}
-            onChange={(e) => setPrompt(e.target.value)}
-            placeholder="Prompt"
-            rows={4}
-          ></textarea>
-          <button
-            onClick={() => runInference().catch(console.error)}
-            className="bg-indigo-600 hover:bg-indigo-700 text-white font-bold py-3 px-6 mx-auto rounded focus:outline-none focus:shadow-outline disabled:opacity-70"
-            disabled={streamStatus === 'running'}
-          >
-            Run inference
-          </button>
-        </div>
-
-        <div className="w-full flex flex-col space-y-4">
-          <div className="flex flex-row items-center justify-between">
-            <h2 className="text-2xl font-bold">Result</h2>
-            <div className="space-x-4">
-              <span>
-                time to first chunk:{' '}
-                <code className="font-semibold">
-                  {timeToFirstChunk ? `${timeToFirstChunk}ms` : 'n/a'}
-                </code>
-              </span>
-              <span>
-                streaming: <code className="font-semibold">{streamStatus}</code>
-              </span>
-            </div>
-          </div>
-          <audio controls className="w-full" ref={audioRef} />
-        </div>
-      </main>
-    </div>
-  );
-}
diff --git a/libs/client/package.json b/libs/client/package.json
index fa25e01..49deeb9 100644
--- a/libs/client/package.json
+++ b/libs/client/package.json
@@ -1,7 +1,7 @@
 {
   "name": "@fal-ai/serverless-client",
   "description": "The fal serverless JS/TS client",
-  "version": "0.14.0-alpha.8",
+  "version": "0.14.0",
   "license": "MIT",
   "repository": {
     "type": "git",
diff --git a/libs/proxy/package.json b/libs/proxy/package.json
index 855a868..d5d55cb 100644
--- a/libs/proxy/package.json
+++ b/libs/proxy/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@fal-ai/serverless-proxy",
-  "version": "0.8.0-alpha.1",
+  "version": "0.8.0",
   "license": "MIT",
   "repository": {
     "type": "git",