chore: upgrade dependencies and tooling (#81)

* chore: remove uuid-random dependency * chore: upgrade prettier * chore(client): bump version for release
fal-ai · Aug 7, 2024 · c3a3c3d · c3a3c3d
1 parent 4eb8111
commit c3a3c3d
Show file tree

Hide file tree

Showing 71 changed files with 880 additions and 807 deletions.
diff --git 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
@@ -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
@@ -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
@@ -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: '<rootDir>/tsconfig.spec.json' }],
+    "^.+\\.[tj]s$": ["ts-jest", { tsconfig: "<rootDir>/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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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<HTMLVideoElement | null>;
@@ -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,30 +143,30 @@ export default function WebcamPage() {
   const previewRef = useRef<HTMLCanvasElement | null>(null);
 
   const { send } = fal.realtime.connect<LCMInput, LCMOutput>(
-    '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) => {
     if (!enabled) {
       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 (
-    <main className="flex-col px-32 mx-auto my-20">
-      <h1 className="text-4xl font-mono mb-8 text-current text-center">
+    <main className="mx-auto my-20 flex-col px-32">
+      <h1 className="mb-8 text-center font-mono text-4xl text-current">
         fal<code className="font-light text-pink-600">camera</code>
       </h1>
-      <video ref={videoRef} style={{ display: 'none' }}></video>
-      <div className="py-12 flex items-center justify-center">
+      <video ref={videoRef} style={{ display: "none" }}></video>
+      <div className="flex items-center justify-center py-12">
         <button
-          className="py-3 px-4 bg-indigo-700 text-white text-lg rounded"
+          className="rounded bg-indigo-700 py-3 px-4 text-lg text-white"
           onClick={() => {
             setEnabled(!enabled);
           }}
         >
-          {enabled ? 'Stop' : 'Start'}
+          {enabled ? "Stop" : "Start"}
         </button>
       </div>
-      <div className="flex flex-col lg:flex-row space-y-4 lg:space-y-0 lg:space-x-4 justify-between">
+      <div className="flex flex-col justify-between space-y-4 lg:flex-row lg:space-y-0 lg:space-x-4">
         <canvas ref={previewRef} width="512" height="512"></canvas>
         <img
           ref={processedImageRef}
           src={EMPTY_IMG}
           width={512}
           height={512}
-          className="min-w-[512px] min-h-[512px]"
+          className="min-h-[512px] min-w-[512px]"
           alt="generated"
         />
       </div>