Merge pull request #23 from LelabsTeam/feat/site-2260

feat/site-2260: sync with upstream and fix canonical without query params

Author: wellingtonjr3873

1001fx/README.md

@@ -0,0 +1,69 @@
+# 1001fx MCP
+
+This app integrates with the 1001fx API to provide media processing capabilities for your applications.
+
+## Features
+
+### Audio2Video
+
+Converts an MP3 audio file into an MP4 video file with images displayed for specified durations. The result is a URL to the MP4 file that is available for 48 hours.
+
+#### Parameters
+
+- `url` (string, required): The URL of the audio file (MP3).
+- `images` (array, optional): Array of images to show in your video. Each object contains:
+  - `imageUrl` (string, required): The URL of an image to show in your video.
+  - `duration` (number, required): The number of seconds this image should be shown.
+- `thumbnailImageUrl` (string, optional): The URL of the thumbnail image.
+- `videoResolution` (object, optional): The resolution of the output video.
+  - `width` (number): Width in pixels (default: 1280).
+  - `height` (number): Height in pixels (default: 720).
+- `presignedUrl` (string, optional): When provided, the video URL will be uploaded to this URL rather than returned directly.
+
+#### Example
+
+```typescript
+// Basic usage with just audio URL and thumbnail
+const result1 = await client.action("1001fx/actions/audio2video", {
+  url: "https://api.1001fx.com/testdata/jingle.mp3",
+  thumbnailImageUrl: "https://api.1001fx.com/testdata/image.jpg"
+});
+
+// Advanced usage with images and video resolution
+const result2 = await client.action("1001fx/actions/audio2video", {
+  url: "https://api.1001fx.com/testdata/jingle.mp3",
+  images: [
+    {
+      imageUrl: "https://example.com/image1.jpg",
+      duration: 2
+    },
+    {
+      imageUrl: "https://example.com/image2.jpg",
+      duration: 3
+    }
+  ],
+  thumbnailImageUrl: "https://example.com/thumbnail.jpg",
+  videoResolution: {
+    width: 1280,
+    height: 720
+  }
+});
+
+// Result: { url: "https://cdn.1001fx.com/output/video123.mp4", statusCode: 200 }
+```
+
+## Installation
+
+To use this app, you need to provide your 1001fx API key when installing the app.
+
+```typescript
+import { createClient } from "deco";
+
+const client = createClient({
+  apps: {
+    "1001fx": {
+      apiKey: "your-api-key"
+    }
+  }
+});
+``` 

1001fx/actions/audio2video.ts

@@ -0,0 +1,182 @@
+import { AppContext } from "../mod.ts";
+import { isValidUrl, validateImages } from "../utils.ts";
+import { ImageConfig, VideoResolution } from "../client.ts";
+import { Buffer } from "node:buffer";
+
+export interface Props {
+  /**
+   * @description The URL of the audio file (MP3).
+   * @example https://api.1001fx.com/testdata/jingle.mp3
+   */
+  url: string;
+
+  /**
+   * @description Array of images to show in your video. The length of your video will be the sum of your image durations.
+   * It is recommended that all your images have the same aspect ratio.
+   * @minItems 1
+   * @maxItems 10
+   */
+  images: ImageConfig[];
+
+  /**
+   * @description The URL of the thumbnail image (optional).
+   * @example https://api.1001fx.com/testdata/image.jpg
+   */
+  thumbnailImageUrl?: string;
+
+  /**
+   * @description The resolution of the output video (optional).
+   * @default { "width": 1280, "height": 720 }
+   */
+  videoResolution?: VideoResolution;
+
+  /**
+   * @description The presigned URLs to upload the result to. When provided, the video URL will be
+   * uploaded to this URL rather than returned directly. This allows for easier integration with storage systems.
+   */
+  presignedUrl: string;
+}
+
+interface AudioVideoResponse {
+  url: string;
+  statusCode: number;
+}
+
+/**
+ * @title Convert MP3 to MP4 with Images
+ * @description Converts an MP3 audio file into an MP4 video file with images displayed for specified durations.
+ * The service adds images to the audio and creates a video file. The result is a URL to the MP4 file that is
+ * available for 48 hours.
+ */
+export default async function audio2videoAction(
+  props: Props,
+  _req: Request,
+  ctx: AppContext,
+): Promise<AudioVideoResponse> {
+  const { url, images, thumbnailImageUrl, videoResolution, presignedUrl } =
+    props;
+
+  // Validate inputs
+  if (!isValidUrl(url)) {
+    throw new Error("Invalid audio URL provided");
+  }
+
+  if (images && !validateImages(images)) {
+    throw new Error(
+      "Invalid images array: must contain 1-10 valid image objects with URLs and durations",
+    );
+  }
+
+  if (thumbnailImageUrl && !isValidUrl(thumbnailImageUrl)) {
+    throw new Error("Invalid thumbnail image URL provided");
+  }
+
+  try {
+    // Prepare request body
+    const requestBody = {
+      url,
+      ...(images && { images }),
+      ...(thumbnailImageUrl && { thumbnailImageUrl }),
+      ...(videoResolution && { videoResolution }),
+    };
+
+    // Make API call to 1001fx
+    const response = await ctx.api["POST /audiovideo/audio2video"](
+      {},
+      { body: requestBody },
+    );
+
+    const data = await response.json();
+
+    // If presignedUrl is provided, upload the result
+    if (presignedUrl && isValidUrl(presignedUrl)) {
+      await uploadToPresignedUrl(data.result.url, presignedUrl);
+      return {
+        url: presignedUrl.split("?")[0].replace("_presigned/", ""), // Return clean URL without query params
+        statusCode: 200,
+      };
+    }
+
+    // Return the direct result from 1001fx
+    return {
+      url: response.url,
+      statusCode: response.statusCode,
+    };
+  } catch (error) {
+    console.error("Error in audio2video conversion:", error);
+
+    // If we have a presignedUrl, try to write error message to it
+    if (presignedUrl) {
+      await writeErrorToPresignedUrl(
+        presignedUrl,
+        error instanceof Error ? error.message : "Unknown error occurred",
+      );
+    }
+
+    throw error;
+  }
+}
+
+/**
+ * Uploads the video URL result to a presigned URL
+ */
+async function uploadToPresignedUrl(
+  videoUrl: string,
+  presignedUrl: string,
+): Promise<void> {
+  try {
+    // Create a JSON response with the video URL
+    const videoResponse = await fetch(videoUrl);
+    const arrayBuffer = await videoResponse.arrayBuffer();
+    const buffer = Buffer.from(arrayBuffer);
+
+    // Upload to presigned URL
+    const response = await fetch(presignedUrl, {
+      method: "PUT",
+      headers: {
+        "Content-Type": "application/octet-stream",
+      },
+      body: buffer,
+    });
+
+    if (!response.ok) {
+      throw new Error(
+        `Failed to upload to presigned URL: ${response.status} ${response.statusText}`,
+      );
+    }
+  } catch (error) {
+    console.error("Error uploading to presigned URL:", error);
+    throw error;
+  }
+}
+
+/**
+ * Writes an error message to the presigned URL
+ */
+async function writeErrorToPresignedUrl(
+  presignedUrl: string,
+  errorMessage: string,
+): Promise<void> {
+  try {
+    const errorJson = JSON.stringify({
+      error: errorMessage,
+      statusCode: 5,
+    });
+
+    const response = await fetch(presignedUrl, {
+      method: "PUT",
+      headers: {
+        "Content-Type": "application/json",
+      },
+      body: errorJson,
+    });
+
+    if (!response.ok) {
+      console.error(
+        `Failed to write error to presigned URL: ${response.status} ${response.statusText}`,
+      );
+    }
+  } catch (error) {
+    console.error("Error writing error to presigned URL:", error);
+  }
+}

1001fx/client.ts

@@ -0,0 +1,45 @@
+import { createHttpClient } from "../utils/http.ts";
+import { fetchSafe } from "../utils/fetch.ts";
+
+export interface ImageConfig {
+  imageUrl: string;
+  duration: number;
+}
+
+export interface VideoResolution {
+  width: number;
+  height: number;
+}
+
+export interface Audio2VideoRequest {
+  url: string;
+  images?: ImageConfig[];
+  thumbnailImageUrl?: string;
+  videoResolution?: VideoResolution;
+}
+
+export interface Audio2VideoResponse {
+  url: string;
+  statusCode: number;
+}
+
+export interface FX1001Client {
+  "POST /audiovideo/audio2video": {
+    body: Audio2VideoRequest;
+    response: Audio2VideoResponse;
+  };
+}
+
+export const createFX1001Client = (
+  apiKey: string,
+  base = "https://api.1001fx.com",
+) => {
+  return createHttpClient<FX1001Client>({
+    base,
+    headers: new Headers({
+      "Content-Type": "application/json",
+      "x-api-key": apiKey,
+    }),
+    fetcher: fetchSafe,
+  });
+};

1001fx/manifest.gen.ts

@@ -0,0 +1,17 @@
+// DO NOT EDIT. This file is generated by deco.
+// This file SHOULD be checked into source version control.
+// This file is automatically updated during development when running `dev.ts`.
+
+import * as $$$$$$$$$0 from "./actions/audio2video.ts";
+
+const manifest = {
+  "actions": {
+    "1001fx/actions/audio2video.ts": $$$$$$$$$0,
+  },
+  "name": "1001fx",
+  "baseUrl": import.meta.url,
+};
+
+export type Manifest = typeof manifest;
+
+export default manifest;

1001fx/mod.ts

@@ -0,0 +1,41 @@
+import { type App, type AppContext as AC } from "@deco/deco";
+import manifest, { Manifest } from "./manifest.gen.ts";
+import { createFX1001Client } from "./client.ts";
+import { Secret } from "../website/loaders/secret.ts";
+
+export interface State {
+  api: ReturnType<typeof createFX1001Client>;
+}
+
+export interface Props {
+  /**
+   * @description Your 1001fx API key
+   */
+  apiKey: Secret | string;
+}
+
+/**
+ * @title 1001fx
+ * @name 1001fx
+ * @description 1001fx API integration for audio and video processing
+ * @category Media
+ * @logo https://1001fx.com/favicon.ico
+ */
+export default function FX1001App(props: Props): App<Manifest, State> {
+  const { apiKey } = props;
+
+  const api = createFX1001Client(
+    typeof apiKey === "string" ? apiKey : apiKey.get() || "",
+  );
+
+  return {
+    state: {
+      api,
+    },
+    manifest,
+    dependencies: [],
+  };
+}
+
+export type FX1001App = ReturnType<typeof FX1001App>;
+export type AppContext = AC<FX1001App>;