From 302c2c223ff0e364fed8658f2571893a0484668a Mon Sep 17 00:00:00 2001 From: Daniel Rochetti Date: Wed, 7 Aug 2024 12:17:33 -0700 Subject: [PATCH 1/3] chore: remove uuid-random dependency --- libs/client/package.json | 3 +-- libs/client/src/realtime.ts | 5 ++--- package-lock.json | 8 +------- package.json | 3 +-- 4 files changed, 5 insertions(+), 14 deletions(-) diff --git a/libs/client/package.json b/libs/client/package.json index 36812fc..fcb7612 100644 --- a/libs/client/package.json +++ b/libs/client/package.json @@ -18,8 +18,7 @@ "dependencies": { "@msgpack/msgpack": "^3.0.0-beta2", "eventsource-parser": "^1.1.2", - "robot3": "^0.4.1", - "uuid-random": "^1.3.2" + "robot3": "^0.4.1" }, "engines": { "node": ">=18.0.0" diff --git a/libs/client/src/realtime.ts b/libs/client/src/realtime.ts index cea3621..8722ca3 100644 --- a/libs/client/src/realtime.ts +++ b/libs/client/src/realtime.ts @@ -12,7 +12,6 @@ import { state, transition, } from 'robot3'; -import uuid from 'uuid-random'; import { TOKEN_EXPIRATION_SECONDS, getTemporaryAuthToken } from './auth'; import { ApiError } from './response'; import { isBrowser } from './runtime'; @@ -358,7 +357,7 @@ export const realtimeImpl: RealtimeClient = { const { // if running on React in the server, set clientOnly to true by default clientOnly = isReact() && !isBrowser(), - connectionKey = uuid(), + connectionKey = crypto.randomUUID(), maxBuffering, throttleInterval = DEFAULT_THROTTLE_INTERVAL, } = handler; @@ -503,7 +502,7 @@ export const realtimeImpl: RealtimeClient = { ? input : { ...input, - request_id: input['request_id'] ?? uuid(), + request_id: input['request_id'] ?? crypto.randomUUID(), }; stateMachine.throttledSend({ diff --git a/package-lock.json b/package-lock.json index 07dc2d4..ef148a3 100644 --- a/package-lock.json +++ b/package-lock.json @@ -39,8 +39,7 @@ "regenerator-runtime": "0.13.7", "robot3": "^0.4.1", "ts-morph": "^17.0.1", - "tslib": "^2.3.0", - "uuid-random": "^1.3.2" + "tslib": "^2.3.0" }, "devDependencies": { "@commitlint/cli": "^17.0.0", @@ -29956,11 +29955,6 @@ "uuid": "dist/bin/uuid" } }, - "node_modules/uuid-random": { - "version": "1.3.2", - "resolved": "https://registry.npmjs.org/uuid-random/-/uuid-random-1.3.2.tgz", - "integrity": "sha512-UOzej0Le/UgkbWEO8flm+0y+G+ljUon1QWTEZOq1rnMAsxo2+SckbiZdKzAHHlVh6gJqI1TjC/xwgR50MuCrBQ==" - }, "node_modules/v8-compile-cache": { "version": "2.3.0", "resolved": "https://registry.npmjs.org/v8-compile-cache/-/v8-compile-cache-2.3.0.tgz", diff --git a/package.json b/package.json index 7b5074e..e3a071a 100644 --- a/package.json +++ b/package.json @@ -55,8 +55,7 @@ "regenerator-runtime": "0.13.7", "robot3": "^0.4.1", "ts-morph": "^17.0.1", - "tslib": "^2.3.0", - "uuid-random": "^1.3.2" + "tslib": "^2.3.0" }, "devDependencies": { "@commitlint/cli": "^17.0.0", From 72dfb5cbfbd39bdb97ca8e8c37bc668b8e5af228 Mon Sep 17 00:00:00 2001 From: Daniel Rochetti Date: Wed, 7 Aug 2024 15:35:28 -0700 Subject: [PATCH 2/3] chore: upgrade prettier --- .github/workflows/build.yml | 4 +- .github/workflows/release.yml | 6 +- README.md | 12 +- apps/demo-express-app/jest.config.ts | 12 +- apps/demo-express-app/src/main.ts | 28 ++-- apps/demo-express-app/tsconfig.json | 10 +- apps/demo-express-app/webpack.config.js | 2 +- .../app/api/fal/proxy/route.ts | 2 +- .../app/camera-turbo/page.tsx | 44 +++--- .../app/comfy/image-to-image/page.tsx | 56 ++++---- .../app/comfy/image-to-video/page.tsx | 48 +++---- .../demo-nextjs-app-router/app/comfy/page.tsx | 26 ++-- .../app/comfy/text-to-image/page.tsx | 46 +++--- apps/demo-nextjs-app-router/app/layout.tsx | 6 +- apps/demo-nextjs-app-router/app/page.tsx | 54 +++---- .../demo-nextjs-app-router/app/queue/page.tsx | 54 +++---- .../app/realtime/page.tsx | 38 ++--- .../app/streaming/page.tsx | 38 ++--- .../app/whisper/page.tsx | 58 ++++---- .../components/drawing.tsx | 36 ++--- apps/demo-nextjs-app-router/index.d.ts | 2 +- apps/demo-nextjs-app-router/jest.config.ts | 12 +- apps/demo-nextjs-app-router/next.config.js | 2 +- apps/demo-nextjs-app-router/postcss.config.js | 4 +- .../demo-nextjs-app-router/tailwind.config.js | 8 +- apps/demo-nextjs-app-router/tsconfig.json | 12 +- apps/demo-nextjs-page-router/index.d.ts | 2 +- apps/demo-nextjs-page-router/jest.config.ts | 12 +- apps/demo-nextjs-page-router/next.config.js | 2 +- apps/demo-nextjs-page-router/pages/_app.tsx | 6 +- .../pages/api/fal/proxy.ts | 2 +- apps/demo-nextjs-page-router/pages/index.tsx | 48 +++---- .../demo-nextjs-page-router/postcss.config.js | 4 +- .../specs/index.spec.tsx | 10 +- .../tailwind.config.js | 8 +- apps/demo-nextjs-page-router/tsconfig.json | 4 +- jest.config.ts | 2 +- jest.preset.js | 2 +- libs/client/README.md | 14 +- libs/client/jest.config.ts | 16 +-- libs/client/src/auth.ts | 14 +- libs/client/src/config.spec.ts | 8 +- libs/client/src/config.ts | 30 ++-- libs/client/src/function.spec.ts | 8 +- libs/client/src/function.ts | 120 ++++++++-------- libs/client/src/index.ts | 22 +-- libs/client/src/middleware.ts | 8 +- libs/client/src/realtime.ts | 134 +++++++++--------- libs/client/src/request.ts | 24 ++-- libs/client/src/response.ts | 26 ++-- libs/client/src/runtime.spec.ts | 10 +- libs/client/src/runtime.ts | 4 +- libs/client/src/storage.ts | 22 +-- libs/client/src/streaming.ts | 84 +++++------ libs/client/src/types.ts | 18 +-- libs/client/src/utils.spec.ts | 44 +++--- libs/client/src/utils.ts | 20 +-- libs/client/tsconfig.json | 8 +- libs/create-app/jest.config.ts | 12 +- libs/create-app/src/index.ts | 104 +++++++------- libs/create-app/tsconfig.json | 8 +- libs/proxy/README.md | 12 +- libs/proxy/jest.config.ts | 16 +-- libs/proxy/src/express.ts | 8 +- libs/proxy/src/index.ts | 28 ++-- libs/proxy/src/nextjs.ts | 14 +- libs/proxy/src/svelte.ts | 10 +- libs/proxy/tsconfig.json | 8 +- package-lock.json | 83 ++++++++++- package.json | 9 +- 70 files changed, 875 insertions(+), 793 deletions(-) diff --git a/.github/workflows/build.yml b/.github/workflows/build.yml index 1e20b85..3a0637f 100644 --- a/.github/workflows/build.yml +++ b/.github/workflows/build.yml @@ -16,8 +16,8 @@ jobs: - name: Setup Node.js uses: actions/setup-node@v3 with: - node-version: '18.x' - cache: 'npm' + node-version: "18.x" + cache: "npm" - name: Install dependencies run: npm ci - name: Format check diff --git a/.github/workflows/release.yml b/.github/workflows/release.yml index e1094eb..2907c87 100644 --- a/.github/workflows/release.yml +++ b/.github/workflows/release.yml @@ -17,9 +17,9 @@ jobs: - name: Setup Node.js uses: actions/setup-node@v3 with: - node-version: '16.x' - registry-url: 'https://registry.npmjs.org' - scope: '@fal' + node-version: "16.x" + registry-url: "https://registry.npmjs.org" + scope: "@fal" - name: Install dependencies run: npm ci - name: Publish to NPM diff --git a/README.md b/README.md index 3d87495..8b384ea 100644 --- a/README.md +++ b/README.md @@ -27,17 +27,17 @@ This client library is crafted as a lightweight layer atop platform standards li 2. Start by configuring your credentials: ```ts - import * as fal from '@fal-ai/serverless-client'; + import * as fal from "@fal-ai/serverless-client"; fal.config({ // Can also be auto-configured using environment variables: - credentials: 'FAL_KEY', + credentials: "FAL_KEY", }); ``` 3. Retrieve your function id and execute it: ```ts - const result = await fal.run('user/app-alias'); + const result = await fal.run("user/app-alias"); ``` The result's type is contingent upon your Python function's output. Types in Python are mapped to their corresponding types in JavaScript. @@ -56,13 +56,13 @@ For example, if you are using Next.js, you can: ``` 2. Add the proxy as an API endpoint of your app, see an example here in [pages/api/fal/proxy.ts](https://github.com/fal-ai/fal-js/blob/main/apps/demo-nextjs-page-router/pages/api/fal/proxy.ts) ```ts - export { handler as default } from '@fal-ai/serverless-proxy/nextjs'; + export { handler as default } from "@fal-ai/serverless-proxy/nextjs"; ``` 3. Configure the client to use the proxy: ```ts - import * as fal from '@fal-ai/serverless-client'; + import * as fal from "@fal-ai/serverless-client"; fal.config({ - proxyUrl: '/api/fal/proxy', + proxyUrl: "/api/fal/proxy", }); ``` 4. Make sure your server has `FAL_KEY` as environment variable with a valid API Key. That's it! Now your client calls will route through your server proxy, so your credentials are protected. diff --git a/apps/demo-express-app/jest.config.ts b/apps/demo-express-app/jest.config.ts index ca1fd62..acb63a0 100644 --- a/apps/demo-express-app/jest.config.ts +++ b/apps/demo-express-app/jest.config.ts @@ -1,11 +1,11 @@ /* eslint-disable */ export default { - displayName: 'demo-express-app', - preset: '../../jest.preset.js', - testEnvironment: 'node', + displayName: "demo-express-app", + preset: "../../jest.preset.js", + testEnvironment: "node", transform: { - '^.+\\.[tj]s$': ['ts-jest', { tsconfig: '/tsconfig.spec.json' }], + "^.+\\.[tj]s$": ["ts-jest", { tsconfig: "/tsconfig.spec.json" }], }, - moduleFileExtensions: ['ts', 'js', 'html'], - coverageDirectory: '../../coverage/apps/demo-express-app', + moduleFileExtensions: ["ts", "js", "html"], + coverageDirectory: "../../coverage/apps/demo-express-app", }; diff --git a/apps/demo-express-app/src/main.ts b/apps/demo-express-app/src/main.ts index 7f11332..5b19b5f 100644 --- a/apps/demo-express-app/src/main.ts +++ b/apps/demo-express-app/src/main.ts @@ -3,34 +3,34 @@ * This is only a minimal backend to get started. */ -import * as fal from '@fal-ai/serverless-client'; -import * as falProxy from '@fal-ai/serverless-proxy/express'; -import cors from 'cors'; -import { configDotenv } from 'dotenv'; -import express from 'express'; -import * as path from 'path'; +import * as fal from "@fal-ai/serverless-client"; +import * as falProxy from "@fal-ai/serverless-proxy/express"; +import cors from "cors"; +import { configDotenv } from "dotenv"; +import express from "express"; +import * as path from "path"; -configDotenv({ path: './env.local' }); +configDotenv({ path: "./env.local" }); const app = express(); // Middlewares -app.use('/assets', express.static(path.join(__dirname, 'assets'))); +app.use("/assets", express.static(path.join(__dirname, "assets"))); app.use(express.json()); // fal.ai client proxy app.all(falProxy.route, cors(), falProxy.handler); // Your API endpoints -app.get('/api', (req, res) => { - res.send({ message: 'Welcome to demo-express-app!' }); +app.get("/api", (req, res) => { + res.send({ message: "Welcome to demo-express-app!" }); }); -app.get('/fal-on-server', async (req, res) => { - const result = await fal.run('110602490-lcm', { +app.get("/fal-on-server", async (req, res) => { + const result = await fal.run("110602490-lcm", { input: { prompt: - 'a black cat with glowing eyes, cute, adorable, disney, pixar, highly detailed, 8k', + "a black cat with glowing eyes, cute, adorable, disney, pixar, highly detailed, 8k", }, }); res.send(result); @@ -40,4 +40,4 @@ const port = process.env.PORT || 3333; const server = app.listen(port, () => { console.log(`Listening at http://localhost:${port}/api`); }); -server.on('error', console.error); +server.on("error", console.error); diff --git a/apps/demo-express-app/tsconfig.json b/apps/demo-express-app/tsconfig.json index 3c98d67..c1e2dd4 100644 --- a/apps/demo-express-app/tsconfig.json +++ b/apps/demo-express-app/tsconfig.json @@ -4,13 +4,13 @@ "include": [], "references": [ { - "path": "./tsconfig.app.json", + "path": "./tsconfig.app.json" }, { - "path": "./tsconfig.spec.json", - }, + "path": "./tsconfig.spec.json" + } ], "compilerOptions": { - "esModuleInterop": true, - }, + "esModuleInterop": true + } } diff --git a/apps/demo-express-app/webpack.config.js b/apps/demo-express-app/webpack.config.js index 81db92b..0ab513e 100644 --- a/apps/demo-express-app/webpack.config.js +++ b/apps/demo-express-app/webpack.config.js @@ -1,4 +1,4 @@ -const { composePlugins, withNx } = require('@nx/webpack'); +const { composePlugins, withNx } = require("@nx/webpack"); // Nx plugins for webpack. module.exports = composePlugins(withNx(), (config) => { diff --git a/apps/demo-nextjs-app-router/app/api/fal/proxy/route.ts b/apps/demo-nextjs-app-router/app/api/fal/proxy/route.ts index 9a14c5c..db10d70 100644 --- a/apps/demo-nextjs-app-router/app/api/fal/proxy/route.ts +++ b/apps/demo-nextjs-app-router/app/api/fal/proxy/route.ts @@ -1,3 +1,3 @@ -import { route } from '@fal-ai/serverless-proxy/nextjs'; +import { route } from "@fal-ai/serverless-proxy/nextjs"; export const { GET, POST, PUT } = route; diff --git a/apps/demo-nextjs-app-router/app/camera-turbo/page.tsx b/apps/demo-nextjs-app-router/app/camera-turbo/page.tsx index 1c10e01..ce74a8d 100644 --- a/apps/demo-nextjs-app-router/app/camera-turbo/page.tsx +++ b/apps/demo-nextjs-app-router/app/camera-turbo/page.tsx @@ -1,15 +1,15 @@ /* eslint-disable @next/next/no-img-element */ -'use client'; +"use client"; -import * as fal from '@fal-ai/serverless-client'; -import { MutableRefObject, useEffect, useRef, useState } from 'react'; +import * as fal from "@fal-ai/serverless-client"; +import { MutableRefObject, useEffect, useRef, useState } from "react"; fal.config({ - proxyUrl: '/api/fal/proxy', + proxyUrl: "/api/fal/proxy", }); const EMPTY_IMG = - 'data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAAAXNSR0IArs4c6QAAAA1JREFUGFdjOHPmzH8ACDADZKt3GNsAAAAASUVORK5CYII='; + "data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAAAXNSR0IArs4c6QAAAA1JREFUGFdjOHPmzH8ACDADZKt3GNsAAAAASUVORK5CYII="; type WebcamOptions = { videoRef: MutableRefObject; @@ -65,7 +65,7 @@ const useWebcam = ({ canvas.width = width; canvas.height = height; - const context = canvas.getContext('2d'); + const context = canvas.getContext("2d"); if (context === null) { return; } @@ -80,7 +80,7 @@ const useWebcam = ({ 0, 0, width, - height + height, ); // Callback with frame data @@ -92,8 +92,8 @@ const useWebcam = ({ onFrameUpdate(frameData); }); }, - 'image/jpeg', - 0.7 + "image/jpeg", + 0.7, ); } }; @@ -143,22 +143,22 @@ export default function WebcamPage() { const previewRef = useRef(null); const { send } = fal.realtime.connect( - 'fal-ai/fast-turbo-diffusion/image-to-image', + "fal-ai/fast-turbo-diffusion/image-to-image", { - connectionKey: 'camera-turbo-demo', + connectionKey: "camera-turbo-demo", // not throttling the client, handling throttling of the camera itself // and letting all requests through in real-time throttleInterval: 0, onResult(result) { if (processedImageRef.current && result.images && result.images[0]) { const blob = new Blob([result.images[0].content], { - type: 'image/jpeg', + type: "image/jpeg", }); const url = URL.createObjectURL(blob); processedImageRef.current.src = url; } }, - } + }, ); const onFrameUpdate = (data: Uint8Array) => { @@ -166,7 +166,7 @@ export default function WebcamPage() { return; } send({ - prompt: 'a picture of george clooney, elegant, in a suit, 8k, uhd', + prompt: "a picture of george clooney, elegant, in a suit, 8k, uhd", image_bytes: data, num_inference_steps: 3, strength: 0.6, @@ -182,29 +182,29 @@ export default function WebcamPage() { }); return ( -
-

+
+

falcamera

- -
+ +
-
+
generated
diff --git a/apps/demo-nextjs-app-router/app/comfy/image-to-image/page.tsx b/apps/demo-nextjs-app-router/app/comfy/image-to-image/page.tsx index 6a4c4de..c8e9ab6 100644 --- a/apps/demo-nextjs-app-router/app/comfy/image-to-image/page.tsx +++ b/apps/demo-nextjs-app-router/app/comfy/image-to-image/page.tsx @@ -1,11 +1,11 @@ -'use client'; +"use client"; -import * as fal from '@fal-ai/serverless-client'; -import { useMemo, useState } from 'react'; +import * as fal from "@fal-ai/serverless-client"; +import { useMemo, useState } from "react"; // @snippet:start(client.config) fal.config({ - proxyUrl: '/api/fal/proxy', // the built-int nextjs proxy + proxyUrl: "/api/fal/proxy", // the built-int nextjs proxy // proxyUrl: 'http://localhost:3333/api/fal/proxy', // or your own external proxy }); // @snippet:end @@ -35,7 +35,7 @@ function Error(props: ErrorProps) { } return (
Error {props.error.message} @@ -44,7 +44,7 @@ function Error(props: ErrorProps) { } const DEFAULT_PROMPT = - 'photograph of victorian woman with wings, sky clouds, meadow grass'; + "photograph of victorian woman with wings, sky clouds, meadow grass"; export default function ComfyImageToImagePage() { // @snippet:start("client.ui.state") @@ -84,7 +84,7 @@ export default function ComfyImageToImagePage() { const start = Date.now(); try { const result: Result = await fal.subscribe( - 'comfy/fal-ai/image-to-image', + "comfy/fal-ai/image-to-image", { input: { prompt: prompt, @@ -94,13 +94,13 @@ export default function ComfyImageToImagePage() { onQueueUpdate(update) { setElapsedTime(Date.now() - start); if ( - update.status === 'IN_PROGRESS' || - update.status === 'COMPLETED' + update.status === "IN_PROGRESS" || + update.status === "COMPLETED" ) { setLogs((update.logs || []).map((log) => log.message)); } }, - } + }, ); setResult(getImageURL(result)); } catch (error: any) { @@ -112,16 +112,16 @@ export default function ComfyImageToImagePage() { // @snippet:end }; return ( -
-
-

+
+
+

Comfy SD1.5 - Image to Image

-
-