feat(client): endpoint type definitions (#102)

* feat(client): endpoint type definitions * fix(client): endpoint generation * fix(demo): streaming page type * chore: update reference docs * chore: prepare client release * chore: update reference docs
fal-ai · Nov 13, 2024 · ecded55 · ecded55
1 parent 5a1d115
commit ecded55
Show file tree

Hide file tree

Showing 49 changed files with 19,159 additions and 203 deletions.
diff --git a/.gitattributes b/.gitattributes
@@ -1,2 +1,3 @@
 package-lock.json linguist-generated
 docs/reference/** linguist-generated
+libs/client/src/types/endpoints.ts linguist-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
@@ -1,7 +1,7 @@
 /* eslint-disable @next/next/no-img-element */
 "use client";
 
-import { createFalClient } from "@fal-ai/client";
+import { createFalClient, Result } from "@fal-ai/client";
 import { useMemo, useState } from "react";
 
 const fal = createFalClient({
@@ -80,7 +80,7 @@ export default function ComfyImageToImagePage() {
     setLoading(true);
     const start = Date.now();
     try {
-      const { data } = await fal.subscribe<ComfyOutput>(
+      const { data }: Result<ComfyOutput> = await fal.subscribe(
         "comfy/fal-ai/image-to-image",
         {
           input: {

diff --git a/apps/demo-nextjs-app-router/app/comfy/image-to-video/page.tsx b/apps/demo-nextjs-app-router/app/comfy/image-to-video/page.tsx
@@ -1,6 +1,6 @@
 "use client";
 
-import { createFalClient } from "@fal-ai/client";
+import { createFalClient, Result } from "@fal-ai/client";
 import { useMemo, useState } from "react";
 
 const fal = createFalClient({
@@ -75,7 +75,7 @@ export default function ComfyImageToVideoPage() {
     setLoading(true);
     const start = Date.now();
     try {
-      const { data } = await fal.subscribe<ComfyOutput>(
+      const { data }: Result<ComfyOutput> = await fal.subscribe(
         "comfy/fal-ai/image-to-video",
         {
           input: {

diff --git a/apps/demo-nextjs-app-router/app/comfy/text-to-image/page.tsx b/apps/demo-nextjs-app-router/app/comfy/text-to-image/page.tsx
@@ -1,6 +1,6 @@
 "use client";
 
-import { createFalClient } from "@fal-ai/client";
+import { createFalClient, Result } from "@fal-ai/client";
 import { useMemo, useState } from "react";
 
 const fal = createFalClient({
@@ -78,7 +78,7 @@ export default function ComfyTextToImagePage() {
     setLoading(true);
     const start = Date.now();
     try {
-      const { data } = await fal.subscribe<ComfyOutput>(
+      const { data }: Result<ComfyOutput> = await fal.subscribe(
         "comfy/fal-ai/text-to-image",
         {
           input: {

diff --git a/apps/demo-nextjs-app-router/app/page.tsx b/apps/demo-nextjs-app-router/app/page.tsx
@@ -1,6 +1,7 @@
 "use client";
 
 import { createFalClient } from "@fal-ai/client";
+import { IllusionDiffusionOutput } from "@fal-ai/client/endpoints";
 import { useMemo, useState } from "react";
 
 const fal = createFalClient({
@@ -9,16 +10,6 @@ const fal = createFalClient({
   // proxyUrl: 'http://localhost:3333/api/fal/proxy', // or your own external proxy
 });
 
-type Image = {
-  url: string;
-  file_name: string;
-  file_size: number;
-};
-type Output = {
-  image: Image;
-};
-// @snippet:end
-
 type ErrorProps = {
   error: any;
 };
@@ -48,7 +39,7 @@ export default function Home() {
   // Result state
   const [loading, setLoading] = useState(false);
   const [error, setError] = useState<Error | null>(null);
-  const [result, setResult] = useState<Output | null>(null);
+  const [result, setResult] = useState<IllusionDiffusionOutput | null>(null);
   const [logs, setLogs] = useState<string[]>([]);
   const [elapsedTime, setElapsedTime] = useState<number>(0);
   // @snippet:end
@@ -71,12 +62,13 @@ export default function Home() {
   };
 
   const generateImage = async () => {
+    if (!imageFile) return;
     reset();
     // @snippet:start("client.queue.subscribe")
     setLoading(true);
     const start = Date.now();
     try {
-      const result = await fal.subscribe<Output>("fal-ai/illusion-diffusion", {
+      const result = await fal.subscribe("fal-ai/illusion-diffusion", {
         input: {
           prompt,
           image_url: imageFile,

diff --git a/apps/demo-nextjs-app-router/app/streaming/page.tsx b/apps/demo-nextjs-app-router/app/streaming/page.tsx
@@ -1,85 +1,149 @@
 "use client";
 
-import { createFalClient } from "@fal-ai/client";
+import { fal } from "@fal-ai/client";
 import { useState } from "react";
 
-const fal = createFalClient({
+fal.config({
   proxyUrl: "/api/fal/proxy",
 });
 
-type LlavaInput = {
-  prompt: string;
-  image_url: string;
-  max_new_tokens?: number;
-  temperature?: number;
-  top_p?: number;
+type ErrorProps = {
+  error: any;
 };
 
-type LlavaOutput = {
-  output: string;
-  partial: boolean;
-  stats: {
-    num_input_tokens: number;
-    num_output_tokens: number;
-  };
+function Error(props: ErrorProps) {
+  if (!props.error) {
+    return null;
+  }
+  return (
+    <div
+      className="mb-4 rounded bg-red-50 p-4 text-sm text-red-800 dark:bg-gray-800 dark:text-red-400"
+      role="alert"
+    >
+      <span className="font-medium">Error</span> {props.error.message}
+    </div>
+  );
+}
+
+const DEFAULT_ENDPOINT_ID = "fal-ai/llavav15-13b";
+const DEFAULT_INPUT = {
+  prompt: "Do you know who drew this picture and what is the name of it?",
+  image_url: "https://llava-vl.github.io/static/images/monalisa.jpg",
+  max_new_tokens: 100,
+  temperature: 0.2,
+  top_p: 1,
 };
 
-export default function StreamingDemo() {
-  const [answer, setAnswer] = useState<string>("");
-  const [streamStatus, setStreamStatus] = useState<string>("idle");
+export default function StreamingTest() {
+  // Input state
+  const [endpointId, setEndpointId] = useState<string>(DEFAULT_ENDPOINT_ID);
+  const [input, setInput] = useState<string>(
+    JSON.stringify(DEFAULT_INPUT, null, 2),
+  );
+  // Result state
+  const [loading, setLoading] = useState(false);
+  const [error, setError] = useState<Error | null>(null);
+  const [events, setEvents] = useState<any[]>([]);
+  const [elapsedTime, setElapsedTime] = useState<number>(0);
+
+  const reset = () => {
+    setLoading(false);
+    setError(null);
+    setEvents([]);
+    setElapsedTime(0);
+  };
 
-  const runInference = async () => {
-    const stream = await fal.stream<LlavaOutput, LlavaInput>(
-      "fal-ai/llavav15-13b",
-      {
-        input: {
-          prompt:
-            "Do you know who drew this picture and what is the name of it?",
-          image_url: "https://llava-vl.github.io/static/images/monalisa.jpg",
-          max_new_tokens: 100,
-          temperature: 0.2,
-          top_p: 1,
-        },
-      },
-    );
-    setStreamStatus("running");
+  const run = async () => {
+    reset();
+    setLoading(true);
+    const start = Date.now();
+    try {
+      const stream = await fal.stream(endpointId, {
+        input: JSON.parse(input),
+      });
 
-    for await (const partial of stream) {
-      setAnswer(partial.output);
-    }
+      for await (const partial of stream) {
+        setEvents((events) => [partial, ...events]);
+      }
 
-    const result = await stream.done();
-    setStreamStatus("done");
-    setAnswer(result.output);
+      const result = await stream.done();
+      setEvents((events) => [result, ...events]);
+    } catch (error: any) {
+      setError(error);
+    } finally {
+      setLoading(false);
+      setElapsedTime(Date.now() - start);
+    }
   };
-
   return (
     <div className="min-h-screen bg-gray-100 dark:bg-gray-900">
       <main className="container flex w-full flex-1 flex-col items-center justify-center space-y-8 py-10 text-gray-900 dark:text-gray-50">
         <h1 className="mb-8 text-4xl font-bold">
-          Hello <code className="text-pink-600">fal</code> +{" "}
-          <code className="text-indigo-500">streaming</code>
+          <code className="font-light text-pink-600">fal</code>
+          <code>queue</code>
         </h1>
-
-        <div className="flex flex-row space-x-2">
-          <button
-            onClick={runInference}
-            className="focus:shadow-outline mx-auto rounded bg-indigo-600 py-3 px-6 text-lg font-bold text-white hover:bg-indigo-700 focus:outline-none disabled:opacity-70"
-          >
-            Run inference
-          </button>
+        <div className="w-full text-lg">
+          <label htmlFor="prompt" className="mb-2 block text-current">
+            Endpoint ID
+          </label>
+          <input
+            className="w-full rounded border border-black/20 bg-black/10 p-2 text-base dark:border-white/10 dark:bg-white/5"
+            id="endpointId"
+            name="endpointId"
+            autoComplete="off"
+            placeholder="Endpoint ID"
+            value={endpointId}
+            spellCheck={false}
+            onChange={(e) => setEndpointId(e.target.value)}
+          />
+        </div>
+        <div className="w-full text-lg">
+          <label htmlFor="prompt" className="mb-2 block text-current">
+            JSON Input
+          </label>
+          <textarea
+            className="w-full rounded border border-black/20 bg-black/10 p-2 font-mono text-sm dark:border-white/10 dark:bg-white/5"
+            id="input"
+            name="Input"
+            placeholder="JSON"
+            value={input}
+            autoComplete="off"
+            spellCheck={false}
+            onChange={(e) => setInput(e.target.value)}
+            rows={8}
+          ></textarea>
         </div>
 
+        <button
+          onClick={(e) => {
+            e.preventDefault();
+            run();
+          }}
+          className="focus:shadow-outline mx-auto rounded bg-indigo-600 py-3 px-6 text-lg font-bold text-white hover:bg-indigo-700 focus:outline-none"
+          disabled={loading}
+        >
+          {loading ? "Running..." : "Run"}
+        </button>
+
+        <Error error={error} />
+
         <div className="flex w-full 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 className="space-y-2">
+            <h3 className="text-xl font-light">JSON Result</h3>
+            <p className="text-current/80 text-sm">
+              {`Elapsed Time (seconds): ${(elapsedTime / 1000).toFixed(2)}`}
+            </p>
+            <div className="flex flex-col gap-4">
+              {events.map((event, index) => (
+                <pre
+                  key={index}
+                  className="w-full overflow-auto whitespace-pre rounded bg-black/80 font-mono text-sm text-white/90"
+                >
+                  {JSON.stringify(event, null, 2)}
+                </pre>
+              ))}
+            </div>
           </div>
-          <p className="min-h-[12rem] rounded border border-gray-300 bg-gray-200 p-4 text-lg dark:border-gray-700 dark:bg-gray-800">
-            {answer}
-          </p>
         </div>
       </main>
     </div>

diff --git a/apps/demo-nextjs-app-router/app/whisper/page.tsx b/apps/demo-nextjs-app-router/app/whisper/page.tsx
@@ -108,10 +108,10 @@ export default function WhisperDemo() {
     setLoading(true);
     const start = Date.now();
     try {
-      const result = await fal.subscribe("fal-ai/whisper", {
+      const result = await fal.subscribe("fal-ai/wizper", {
         input: {
-          file_name: "recording.wav",
           audio_url: audioFile,
+          version: "3",
         },
         logs: true,
         onQueueUpdate(update) {

diff --git a/docs/reference/classes/ApiError.html b/docs/reference/classes/ApiError.html
diff --git a/docs/reference/classes/FalStream.html b/docs/reference/classes/FalStream.html
diff --git a/docs/reference/classes/ValidationError.html b/docs/reference/classes/ValidationError.html