Add Supabase upload and base64 API + TS client

api_client.ts

@@ -8,15 +8,10 @@
  *   npx ts-node api_client.ts image1.jpg image2.jpg image3.jpg
  *
  * Environment variables:
- *   INSTANTSPLAT_SPACE - HuggingFace Space URL (default: http://localhost:7860)
+ *   INSTANTSPLAT_API_URL - Base URL of the Space (e.g. https://longh37-InstantSplat.hf.space)
+ *   HF_TOKEN             - Hugging Face API token (optional, for private Spaces)
  */
 
-// Polyfill for Node.js environment (Gradio client expects browser globals)
-if (typeof window === "undefined") {
-  (global as any).window = {};
-}
-
-import { client } from "@gradio/client";
 import * as fs from "fs";
 import * as path from "path";
 
@@ -29,24 +24,12 @@ interface ProcessResult {
   message?: string;
 }
 
-interface InstantSplatResponse {
-  video_path: string;
-  ply_url: string;
-  ply_download: string;
-  ply_model: string;
-  glb_model: string;
-  glb_url: string;
-}
-
-type GradioClient = Awaited<ReturnType<typeof client>>;
-type PredictReturn = any; // Gradio client predict return type
-
 /**
  * Submit images to InstantSplat and get GLB URL.
  */
 export async function processImages(
   imagePaths: string[],
-  spaceUrl?: string,
+  apiBaseUrl?: string,
   hfToken?: string
 ): Promise<ProcessResult> {
   // Validate inputs
@@ -68,36 +51,6 @@ export async function processImages(
   }
 
   try {
-    // Connect to Space
-    const url =
-      spaceUrl || process.env.INSTANTSPLAT_SPACE || "longh37/InstantSplat";
-    const token = hfToken || process.env.HF_TOKEN;
-
-    console.log(`Connecting to: ${url}`);
-    if (token) {
-      console.log(`Using HF token: ${token.substring(0, 10)}...`);
-    }
-
-    const app = await client(url, { hf_token: token });
-
-    console.log(`✅ Connected to Space: ${url}`);
-    console.log(`Submitting ${imagePaths.length} images for processing...`);
-    imagePaths.forEach((img, i) => {
-      console.log(`  ${i + 1}. ${img}`);
-    });
-
-    // Check available endpoints for debugging
-    try {
-      const apiInfo = await app.view_api();
-      console.log(
-        `📋 Available endpoints: ${Object.keys(
-          apiInfo.named_endpoints || {}
-        ).join(", ")}`
-      );
-    } catch (e) {
-      console.log("   (Could not fetch API info)");
-    }
-
     // Prepare file info for logging
     console.log("Preparing files...");
     imagePaths.forEach((imgPath, index) => {
@@ -119,56 +72,90 @@ export async function processImages(
         2
       )} MB)`
     );
-    console.log("📤 Uploading files and starting processing...");
-    console.log(
-      "   (The Gradio client will handle file uploads automatically)"
-    );
-    console.log(
-      "   (This may take a few minutes - processing includes 3D reconstruction)"
-    );
 
+    // Convert files to base64 data URLs
+    const imagesB64 = imagePaths.map((imgPath) => {
+      const data = fs.readFileSync(imgPath);
+      const ext = path.extname(imgPath).toLowerCase();
+      let mimeType = "image/jpeg";
+      if (ext === ".png") mimeType = "image/png";
+      else if (ext === ".jpg" || ext === ".jpeg") mimeType = "image/jpeg";
+      else if (ext === ".webp") mimeType = "image/webp";
+      const base64 = data.toString("base64");
+      return `data:${mimeType};base64,${base64}`;
+    });
+
+    // Determine API base URL
+    const baseUrl =
+      apiBaseUrl ||
+      process.env.INSTANTSPLAT_API_URL ||
+      process.env.INSTANTSPLAT_SPACE ||
+      "https://longh37-InstantSplat.hf.space";
+
+    const url = `${baseUrl.replace(/\/+$/, "")}/api/base64`;
+    const token = hfToken || process.env.HF_TOKEN;
+
+    console.log(`Connecting to API: ${url}`);
+    if (token) {
+      console.log(`Using HF token: ${token.substring(0, 10)}...`);
+    }
+
+    const headers: Record<string, string> = {
+      "Content-Type": "application/json"
+    };
+    if (token) {
+      headers["Authorization"] = `Bearer ${token}`;
+    }
+
+    console.log("📤 Uploading images as base64 and starting processing...");
     const startTime = Date.now();
-    let result: any;
-    try {
-      console.log("   Calling /process endpoint...");
-      // Pass file paths directly - the Gradio client will handle uploading them
-      // This matches how the Python client works
-      result = (await app.predict("/process", [imagePaths])) as any;
-      const elapsedSeconds = ((Date.now() - startTime) / 1000).toFixed(1);
-      console.log(`✅ Processing completed in ${elapsedSeconds} seconds`);
-    } catch (predictError: any) {
-      const elapsedSeconds = ((Date.now() - startTime) / 1000).toFixed(1);
-      console.error(`❌ Error after ${elapsedSeconds} seconds:`);
-      console.error("   Error type:", predictError?.constructor?.name);
-      console.error("   Error message:", predictError?.message);
-      if (predictError?.stage) {
-        console.error("   Stage:", predictError.stage);
-      }
-      throw predictError;
+
+    const resp = await fetch(url, {
+      method: "POST",
+      headers,
+      body: JSON.stringify({ images: imagesB64 })
+    });
+
+    const elapsedSeconds = ((Date.now() - startTime) / 1000).toFixed(1);
+    console.log(`⏱  Server responded in ${elapsedSeconds} seconds`);
+
+    if (!resp.ok) {
+      const text = await resp.text();
+      console.error(
+        `❌ HTTP ${resp.status} ${resp.statusText} from API: ${text}`
+      );
+      return {
+        status: "error",
+        error: `HTTP ${resp.status} ${resp.statusText}: ${text}`
+      };
     }
 
-    // Extract results
-    // result.data is an array: [video, ply_url, download, model_ply, model_glb, glb_url]
-    const resultData = result.data || result;
-    const videoPath = resultData[0];
-    const plyUrl = resultData[1];
-    const glbUrl = resultData[5];
+    const json = (await resp.json()) as {
+      glb_url?: string;
+      ply_url?: string;
+      video_available?: boolean;
+      status?: string;
+    };
+
+    const glbUrl = json.glb_url;
+    const plyUrl = json.ply_url;
 
-    // Check if upload succeeded
-    if (glbUrl && !glbUrl.startsWith("Error")) {
+    if (json.status === "success" && glbUrl && !glbUrl.startsWith("ERROR:")) {
       return {
         status: "success",
         glb_url: glbUrl,
         ply_url: plyUrl,
-        video_available: videoPath !== null,
+        video_available: json.video_available ?? false,
         message: "Processing complete!"
       };
-    } else {
-      return {
-        status: "error",
-        error: glbUrl || "Upload failed"
-      };
     }
+
+    // Error case
+    return {
+      status: "error",
+      error:
+        glbUrl || plyUrl || json.status || "Unknown error from API (base64)"
+    };
   } catch (error) {
     console.error("Full error details:", error);
     return {
@@ -206,12 +193,12 @@ export async function downloadFile(
 export async function completeWorkflow(
   imagePaths: string[],
   outputDir: string = "./outputs",
-  spaceUrl?: string,
+  apiBaseUrl?: string,
   hfToken?: string
 ): Promise<string | null> {
   console.log("🚀 Processing images...");
 
-  const result = await processImages(imagePaths, spaceUrl, hfToken);
+  const result = await processImages(imagePaths, apiBaseUrl, hfToken);
 
   if (result.status === "error") {
     console.error(`❌ Error: ${result.error}`);
@@ -254,21 +241,23 @@ async function main() {
     console.log("\nExample:");
     console.log("  npx ts-node api_client.ts img1.jpg img2.jpg img3.jpg");
     console.log("\nEnvironment Variables:");
-    console.log("  INSTANTSPLAT_SPACE - HuggingFace Space URL (optional)");
-    console.log("                       e.g., your-username/InstantSplat");
-    console.log("  HF_TOKEN          - HuggingFace API token (optional)");
+    console.log(
+      "  INSTANTSPLAT_API_URL - Base URL of the Space (e.g. https://longh37-InstantSplat.hf.space)"
+    );
+    console.log("  HF_TOKEN           - Hugging Face API token (optional)");
     process.exit(1);
   }
 
   const imagePaths = args;
-  const spaceUrl = process.env.INSTANTSPLAT_SPACE;
+  const apiBaseUrl =
+    process.env.INSTANTSPLAT_API_URL || process.env.INSTANTSPLAT_SPACE;
   const hfToken = process.env.HF_TOKEN;
 
   console.log("=".repeat(80));
   console.log("InstantSplat API Client (TypeScript)");
   console.log("=".repeat(80));
 
-  const result = await processImages(imagePaths, spaceUrl, hfToken);
+  const result = await processImages(imagePaths, apiBaseUrl, hfToken);
 
   console.log("\n" + "=".repeat(80));
 

app.py

@@ -8,6 +8,9 @@ import uuid
 import spaces
 import requests
 from typing import Optional
+import base64
+import tempfile
+from pydantic import BaseModel
 
 # --- FIX: make gradio compatible by downgrading huggingface_hub -----------
 # Gradio 5.0.1 requires huggingface_hub<1.0.0 due to HfFolder import
@@ -454,6 +457,53 @@ def process_api(inputfiles):
     }
 
 
+def process_base64_api(images_b64):
+    """
+    API entrypoint that accepts a list of base64-encoded images,
+    decodes them to temporary files, and runs the full pipeline.
+    """
+    # Create a temporary directory under the Gradio cache folder
+    tmp_root = os.path.join(GRADIO_CACHE_FOLDER, "api_uploads")
+    os.makedirs(tmp_root, exist_ok=True)
+    tmp_dir = tempfile.mkdtemp(prefix="api_", dir=tmp_root)
+
+    decoded_paths = []
+    for idx, img_str in enumerate(images_b64):
+        if not isinstance(img_str, str):
+            continue
+
+        # Handle optional data URL prefix
+        if img_str.startswith("data:"):
+            try:
+                header, b64_data = img_str.split(",", 1)
+            except ValueError:
+                b64_data = img_str
+        else:
+            b64_data = img_str
+
+        try:
+            img_bytes = base64.b64decode(b64_data)
+        except Exception:
+            # Skip invalid entries
+            continue
+
+        out_path = os.path.join(tmp_dir, f"img_{idx:02d}.jpg")
+        with open(out_path, "wb") as f:
+            f.write(img_bytes)
+        decoded_paths.append(out_path)
+
+    if len(decoded_paths) < 2:
+        return {
+            "glb_url": "ERROR: Need at least 2 valid base64 images",
+            "ply_url": "ERROR: Need at least 2 valid base64 images",
+            "video_available": False,
+            "status": "error",
+        }
+
+    # Reuse process_api to run the pipeline and format the response
+    return process_api(decoded_paths)
+
+
 _TITLE = '''InstantSplat'''
 _DESCRIPTION = '''
 <div style="display: flex; justify-content: center; align-items: center;">
@@ -605,4 +655,21 @@ with block:
         label='Sparse-view Examples'
     )
 
+
+class Base64Request(BaseModel):
+    images: list[str]
+
+
+fastapi_app = block.app
+
+
+@fastapi_app.post("/api/base64")
+async def api_base64_endpoint(req: Base64Request):
+    """
+    FastAPI endpoint that accepts base64-encoded images and returns
+    the same JSON structure as process_api/process_base64_api.
+    """
+    return process_base64_api(req.images)
+
+
 block.launch(server_name="0.0.0.0", share=False, show_api=True)