Merge branch 'main' into support-deployments

Author: mattt

.github/workflows/ci.yml

@@ -64,9 +64,6 @@ jobs:
         # See supported Node.js release schedule at https://nodejs.org/en/about/previous-releases
         node-version: [18.x, 20.x]
         suite: [commonjs, esm, typescript]
-        exclude:
-          - suite: cloudflare-worker
-            node-version: 18.x # Only test Cloudflare suite with the latest Node version
       fail-fast: false
 
     steps:
@@ -84,6 +81,36 @@ jobs:
           npm --prefix integration/${{ matrix.suite }} install "./${{ needs.build.outputs.tarball-name }}"
           npm --prefix integration/${{ matrix.suite }} test
 
+  integration-browser:
+    needs: [test, build]
+    runs-on: ubuntu-latest
+
+    env:
+      REPLICATE_API_TOKEN: ${{ secrets.REPLICATE_API_TOKEN }}
+
+    strategy:
+      matrix:
+        browser: ["chromium", "firefox", "webkit"]
+        suite: ["browser"]
+      fail-fast: false
+
+    steps:
+      - uses: actions/checkout@v3
+      - uses: actions/download-artifact@v3
+        with:
+          name: package-tarball
+      - name: Use Node.js ${{ matrix.node-version }}
+        uses: actions/setup-node@v3
+        with:
+          node-version: ${{ matrix.node-version }}
+          cache: "npm"
+      - run: |
+          cd integration/${{ matrix.suite }}
+          npm install
+          npm install "../../${{ needs.build.outputs.tarball-name }}"
+          npm exec -- playwright install ${{ matrix.browser }}
+          npm exec -- playwright install-deps ${{ matrix.browser }}
+          npm exec -- playwright test --browser ${{ matrix.browser }}
 
   integration-edge:
     needs: [test, build]
@@ -139,4 +166,4 @@ jobs:
           cd integration/${{ matrix.suite }}
           bun uninstall replicate
           bun install "file:../../${{ needs.build.outputs.tarball-name }}"
-          bun test
+          bun test --timeout 30000

README.md

@@ -110,7 +110,7 @@ app.get('/webhooks/replicate', async (c) => {
   const prediction = await c.req.json();
 	console.log(prediction);
   //=> {"id": "xyz", "status": "successful", ... }
-  
+
   // Acknowledge the webhook.
   c.status(200);
   c.json({ok: true});
@@ -217,15 +217,15 @@ Run a model and await the result. Unlike [`replicate.prediction.create`](#replic
 const output = await replicate.run(identifier, options, progress);
 ```
 
-| name                            | type     | description                                                                                                                                                                                                |
-| ------------------------------- | -------- | ---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
-| `identifier`                    | string   | **Required**. The model version identifier in the format `{owner}/{name}:{version}`, for example `stability-ai/sdxl:8beff3369e81422112d93b89ca01426147de542cd4684c244b673b105188fe5f`                      |
-| `options.input`                 | object   | **Required**. An object with the model inputs.                                                                                                                                                             |
-| `options.wait`                  | object   | Options for waiting for the prediction to finish                                                                                                                                                           |
-| `options.wait.interval`         | number   | Polling interval in milliseconds. Defaults to 500                                                                                                                                                          |
-| `options.webhook`               | string   | An HTTPS URL for receiving a webhook when the prediction has new output                                                                                                                                    |
-| `options.webhook_events_filter` | string[] | An array of events which should trigger [webhooks](https://replicate.com/docs/webhooks). Allowable values are `start`, `output`, `logs`, and `completed`                                                   |
-| `options.signal`                | object   | An [AbortSignal](https://developer.mozilla.org/en-US/docs/Web/API/AbortSignal) to cancel the prediction                                                                                                    |
+| name                            | type     | description                                                                                                                                                                                                 |
+| ------------------------------- | -------- | ----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
+| `identifier`                    | string   | **Required**. The model version identifier in the format `{owner}/{name}:{version}`, for example `stability-ai/sdxl:8beff3369e81422112d93b89ca01426147de542cd4684c244b673b105188fe5f`                       |
+| `options.input`                 | object   | **Required**. An object with the model inputs.                                                                                                                                                              |
+| `options.wait`                  | object   | Options for waiting for the prediction to finish                                                                                                                                                            |
+| `options.wait.interval`         | number   | Polling interval in milliseconds. Defaults to 500                                                                                                                                                           |
+| `options.webhook`               | string   | An HTTPS URL for receiving a webhook when the prediction has new output                                                                                                                                     |
+| `options.webhook_events_filter` | string[] | An array of events which should trigger [webhooks](https://replicate.com/docs/webhooks). Allowable values are `start`, `output`, `logs`, and `completed`                                                    |
+| `options.signal`                | object   | An [AbortSignal](https://developer.mozilla.org/en-US/docs/Web/API/AbortSignal) to cancel the prediction                                                                                                     |
 | `progress`                      | function | Callback function that receives the prediction object as it's updated. The function is called when the prediction is created, each time it's updated while polling for completion, and when it's completed. |
 
 Throws `Error` if the prediction failed.
@@ -246,7 +246,7 @@ Example that logs progress as the model is running:
 const model = "stability-ai/sdxl:8beff3369e81422112d93b89ca01426147de542cd4684c244b673b105188fe5f";
 const input = { prompt: "a 19th century portrait of a raccoon gentleman wearing a suit" };
 const onProgress = (prediction) => {
-   const last_log_line = prediction.logs.split("\n").pop() 
+   const last_log_line = prediction.logs.split("\n").pop()
    console.log({id: prediction.id, log: last_log_line})
 }
 const output = await replicate.run(model, { input }, onProgress)
@@ -875,6 +875,21 @@ The `Replicate` constructor and all `replicate.*` methods are fully typed.
 
 We have a few dependencies that have been bundled into the vendor directory rather than adding external npm dependencies.
 
-These have been generated using bundlejs.com and copied into the appropriate directory along with the license and repository information. 
+These have been generated using bundlejs.com and copied into the appropriate directory along with the license and repository information.
 
 * [eventsource-parser/stream](https://bundlejs.com/?bundle&q=eventsource-parser%40latest%2Fstream&config=%7B%22esbuild%22%3A%7B%22format%22%3A%22cjs%22%2C%22minify%22%3Afalse%2C%22platform%22%3A%22neutral%22%7D%7D)
+* [streams-text-encoding/text-decoder-stream](https://bundlejs.com/?q=%40stardazed%2Fstreams-text-encoding&treeshake=%5B%7B+TextDecoderStream+%7D%5D&config=%7B%22esbuild%22%3A%7B%22format%22%3A%22cjs%22%2C%22minify%22%3Afalse%7D%7D)
+
+> [!NOTE]
+> The vendored implementation of `TextDecoderStream` requires
+> the following patch to be applied to the output of bundlejs.com:
+>
+> ```diff
+>   constructor(label, options) {
+> -   this[decDecoder] = new TextDecoder(label, options);
+> -   this[decTransform] = new TransformStream(new TextDecodeTransformer(this[decDecoder]));
+> +   const decoder = new TextDecoder(label || "utf-8", options || {});
+> +   this[decDecoder] = decoder;
+> +   this[decTransform] = new TransformStream(new TextDecodeTransformer(decoder));
+>   }
+> ```

index.js

@@ -5,6 +5,7 @@ const {
   withAutomaticRetries,
   validateWebhook,
   parseProgressFromLogs,
+  streamAsyncIterator,
 } = require("./lib/util");
 
 const accounts = require("./lib/accounts");
@@ -299,7 +300,8 @@ class Replicate {
         fetch: this.fetch,
         options: { signal },
       });
-      yield* stream;
+
+      yield* streamAsyncIterator(stream);
     } else {
       throw new Error("Prediction does not support streaming");
     }

integration/browser/.npmrc

@@ -0,0 +1,3 @@
+package-lock=false
+audit=false
+fund=false

integration/browser/README.md

@@ -0,0 +1,39 @@
+# Browser integration tests
+
+Uses [`playwright`](https://playwright.dev/docs) to run a basic integration test against the three most common browser engines, Firefox, Chromium and WebKit.
+
+It uses the `replicate/canary` model for the moment, which requires a Replicate API token available in the environment under `REPLICATE_API_TOKEN`.
+
+The entire suite is a single `main()` function that calls a single model exercising the streaming API.
+
+The test uses `esbuild` within the test generate a browser friendly version of the `index.js` file which is loaded into the given browser and calls the `main()` function asserting the response content.
+
+## CORS
+
+The Replicate API doesn't support Cross Origin Resource Sharing at this time. We work around this in Playwright by intercepting the request in a `page.route` handler. We don't modify the request/response, but this seems to work around the restriction.
+
+## Setup
+
+    npm install
+
+## Local
+
+The following command will run the tests across all browsers.
+
+    npm test
+
+To run against the default browser (chromium) run:
+
+    npm exec playwright test
+
+Or, specify a browser with:
+
+    npm exec playwright test --browser firefox
+
+## Debugging
+
+Running `playwright test` with the `--debug` flag opens a browser window with a debugging interface, and a breakpoint set at the start of the test. It can also be connected directly to VSCode.
+
+    npm exec playwright test --debug
+
+The browser.js file is injected into the page via a script tag, to be able to set breakpoints in this file you'll need to use a `debugger` statement and open the devtools in the spawned browser window before continuing the test suite.

integration/browser/index.js

@@ -0,0 +1,22 @@
+import Replicate from "replicate";
+
+/**
+ * @param {string} - token the REPLICATE_API_TOKEN
+ */
+window.main = async (token) => {
+  const replicate = new Replicate({ auth: token });
+  const stream = replicate.stream(
+    "replicate/canary:30e22229542eb3f79d4f945dacb58d32001b02cc313ae6f54eef27904edf3272",
+    {
+      input: {
+        text: "Betty Browser",
+      },
+    }
+  );
+
+  const output = [];
+  for await (const event of stream) {
+    output.push(String(event));
+  }
+  return output.join("");
+};

integration/browser/index.test.js

@@ -0,0 +1,34 @@
+import { test, expect } from "@playwright/test";
+import { build } from "esbuild";
+
+// Convert the source file from commonjs to a browser script.
+const result = await build({
+  entryPoints: ["index.js"],
+  bundle: true,
+  platform: "browser",
+  external: ["node:crypto"],
+  write: false,
+});
+const source = new TextDecoder().decode(result.outputFiles[0].contents);
+
+// https://playwright.dev/docs/network#modify-requests
+
+test("browser", async ({ page }) => {
+  // Patch the API endpoint to work around CORS for now.
+  await page.route(
+    "https://api.replicate.com/v1/predictions",
+    async (route) => {
+      // Fetch original response.
+      const response = await route.fetch();
+      // Add a prefix to the title.
+      return route.fulfill({ response });
+    }
+  );
+
+  await page.addScriptTag({ content: source });
+  const result = await page.evaluate(
+    (token) => window.main(token),
+    [process.env.REPLICATE_API_TOKEN]
+  );
+  expect(result).toBe("hello there, Betty Browser");
+});

integration/browser/package.json

@@ -0,0 +1,19 @@
+{
+  "name": "replicate-app-browser",
+  "private": true,
+  "version": "0.0.0",
+  "description": "",
+  "main": "index.js",
+  "type": "module",
+  "scripts": {
+    "test": "playwright test --browser all"
+  },
+  "license": "ISC",
+  "dependencies": {
+    "replicate": "../../"
+  },
+  "devDependencies": {
+    "@playwright/test": "^1.42.1",
+    "esbuild": "^0.20.1"
+  }
+}

integration/browser/playwright.config.ts

@@ -0,0 +1,3 @@
+import { defineConfig } from "@playwright/test";
+
+export default defineConfig({});

integration/bun/index.test.ts

@@ -19,5 +19,5 @@ import type {
 
 test("main", async () => {
   const output = await main();
-  expect(output as any).toEqual("hello Brünnhilde Bun");
+  expect(output).toContain("Brünnhilde Bun");
 });

integration/bun/index.ts

@@ -5,12 +5,20 @@ const replicate = new Replicate({
 });
 
 export default async function main() {
-  return await replicate.run(
-    "replicate/hello-world:5c7d5dc6dd8bf75c1acaa8565735e7986bc5b66206b55cca93cb72c9bf15ccaa",
-    {
-      input: {
-        text: "Brünnhilde Bun",
-      },
+  const model =
+    "replicate/canary:30e22229542eb3f79d4f945dacb58d32001b02cc313ae6f54eef27904edf3272";
+  const options = {
+    input: {
+      text: "Brünnhilde Bun",
+    },
+  };
+  const output = [];
+
+  for await (const { event, data } of replicate.stream(model, options)) {
+    if (event === "output") {
+      output.push(data);
     }
-  );
+  }
+
+  return output.join("").trim();
 }

lib/stream.js

@@ -1,9 +1,14 @@
 // Attempt to use readable-stream if available, attempt to use the built-in stream module.
 
 const ApiError = require("./error");
+const { streamAsyncIterator } = require("./util");
 const {
   EventSourceParserStream,
 } = require("../vendor/eventsource-parser/stream");
+const { TextDecoderStream } =
+  typeof globalThis.TextDecoderStream === "undefined"
+    ? require("../vendor/streams-text-encoding/text-decoder-stream")
+    : globalThis;
 
 /**
  * A server-sent event.
@@ -73,7 +78,7 @@ function createReadableStream({ url, fetch, options = {} }) {
         .pipeThrough(new TextDecoderStream())
         .pipeThrough(new EventSourceParserStream());
 
-      for await (const event of stream) {
+      for await (const event of streamAsyncIterator(stream)) {
         if (event.event === "error") {
           controller.error(new Error(event.data));
           break;

lib/util.js

@@ -354,9 +354,33 @@ function parseProgressFromLogs(input) {
   return null;
 }
 
+/**
+ * Helper to make any `ReadableStream` iterable, this is supported
+ * by most server runtimes but browsers still haven't implemented
+ * it yet.
+ * See: https://developer.mozilla.org/en-US/docs/Web/API/ReadableStream#browser_compatibility
+ *
+ * @template T
+ * @param {ReadableStream<T>} stream an instance of a `ReadableStream`
+ * @yields {T} a chunk/event from the stream
+ */
+async function* streamAsyncIterator(stream) {
+  const reader = stream.getReader();
+  try {
+    while (true) {
+      const { done, value } = await reader.read();
+      if (done) return;
+      yield value;
+    }
+  } finally {
+    reader.releaseLock();
+  }
+}
+
 module.exports = {
   transformFileInputs,
   validateWebhook,
   withAutomaticRetries,
   parseProgressFromLogs,
+  streamAsyncIterator,
 };