@canva/cli 1.19.0 → 1.21.0

package/templates/gen_ai/scripts/start/start.ts

@@ -1,46 +0,0 @@
-#!/usr/bin/env node
-import yargs from "yargs";
-import { hideBin } from "yargs/helpers";
-import { AppRunner } from "./app_runner";
-import { Context } from "./context";
-
-const appRunner = new AppRunner();
-
-yargs(hideBin(process.argv))
-  .version(false)
-  .help()
-  .option("ngrok", {
-    description: "Run backend server via ngrok.",
-    type: "boolean",
-    // npm swallows command line args instead of forwarding to the script
-    default:
-      process.env.npm_config_ngrok?.toLocaleLowerCase().trim() === "true",
-  })
-  .option("use-https", {
-    description: "Start local development server on HTTPS.",
-    type: "boolean",
-    // npm swallows commands line args instead of forwarding to the script
-    default:
-      process.env.npm_config_use_https?.toLocaleLowerCase().trim() === "true",
-  })
-  .option("override-frontend-port", {
-    description:
-      "Port to run the local development server on. Overrides the frontend port set in the .env file.",
-    type: "number",
-    alias: "p",
-  })
-  .option("preview", {
-    description: "Open the app in Canva.",
-    type: "boolean",
-    default: false,
-  })
-  .command(
-    "$0",
-    "Starts local development",
-    () => {},
-    (args) => {
-      const ctx = new Context(process.env, args);
-      appRunner.run(ctx);
-    },
-  )
-  .parse();

package/templates/gen_ai/src/api/api.ts

@@ -1,194 +0,0 @@
-import { auth } from "@canva/user";
-import { POLLING_INTERVAL_IN_SECONDS } from "src/config";
-
-/**
- * Represents the structure of an image.
- */
-export interface ImageType {
-  /** The label of the image. */
-  label: string;
-  /** Information about the full-size version of the image. */
-  fullsize: { width: number; height: number; url: string };
-  /** Information about the thumbnail version of the image. */
-  thumbnail: { width: number; height: number; url: string };
-}
-
-/**
- * Represents the result of generating images.
- */
-interface ImageGenerationResult {
-  /** An array of generated images. */
-  images: ImageType[];
-  /** The remaining credits. */
-  credits: number;
-}
-
-interface ImageGenerationJobStatusResponse {
-  status: "completed" | "processing";
-  images: ImageType[];
-  credits: number;
-}
-
-interface QueueImageGenerationResponse {
-  jobId: string;
-}
-
-/**
- * Represents the result of retrieving remaining credits.
- */
-interface RemainingCreditsResult {
-  /** The remaining credits. */
-  credits: number;
-}
-
-const endpoints = {
-  queueImageGeneration: "/api/queue-image-generation",
-  getImageGenerationJobStatus: "/api/job-status",
-  cancelImageGenerationJob: "/api/job-status/cancel",
-  getRemainingCredits: "/api/credits",
-  purchaseCredits: "/api/purchase-credits",
-};
-
-/**
- * queues image generation based on the provided prompt and number of images.
- * @param {Object} options - The options for generating images.
- * @param {string} options.prompt - The prompt for generating images.
- * @param {number} options.numberOfImages - The number of images to generate.
- * @returns {Promise<QueueImageGenerationResponse>} A promise that resolves to the created job ID.
- */
-export const queueImageGeneration = async ({
-  prompt,
-  numberOfImages,
-}: {
-  prompt: string;
-  numberOfImages: number;
-}): Promise<QueueImageGenerationResponse> => {
-  const url = new URL(endpoints.queueImageGeneration, BACKEND_HOST);
-  url.searchParams.append("count", numberOfImages.toString());
-  url.searchParams.append("prompt", prompt);
-
-  const result: QueueImageGenerationResponse = await sendRequest(url);
-
-  return result;
-};
-
-/**
- * Retrieves the status of an image generation job.
- * @param {string} jobId - The ID of the job to retrieve status for.
- * @returns {Promise<ImageGenerationResult>} A promise that resolves to the image generation result.
- */
-export const getImageGenerationJobStatus = async ({
-  jobId,
-}: {
-  jobId: string;
-}): Promise<ImageGenerationResult> => {
-  const url = new URL(endpoints.getImageGenerationJobStatus, BACKEND_HOST);
-  url.searchParams.append("jobId", jobId);
-
-  // Define a maximum number of polling attempts
-  const maxAttempts = 10;
-  let attempts = 0;
-
-  while (attempts < maxAttempts) {
-    try {
-      const response = (await sendRequest(
-        url,
-      )) as ImageGenerationJobStatusResponse;
-      if (response.status === "completed") {
-        return { images: response.images, credits: response.credits };
-      } else if (response.status === "processing") {
-        // Job is still processing, wait and continue polling
-        await new Promise((resolve) =>
-          setTimeout(resolve, POLLING_INTERVAL_IN_SECONDS * 1000),
-        );
-        attempts++;
-      } else if (response.status === "cancelled") {
-        throw new Error("Job not found");
-      }
-    } catch (error) {
-      // Handle errors here
-      throw new Error(`Error while polling job status ${error}`);
-    }
-  }
-
-  throw new Error("Maximum polling attempts reached");
-};
-
-/**
- * Cancels an image generation job based on the provided job ID.
- * @param {string} jobId - The ID of the job to cancel.
- * @returns {Promise<void>} - A promise that resolves if the job is successfully cancelled, otherwise rejects with an error.
- */
-export const cancelImageGenerationJob = async (
-  jobId: string,
-): Promise<void> => {
-  const url = new URL(endpoints.cancelImageGenerationJob, BACKEND_HOST);
-  url.searchParams.append("jobId", jobId);
-
-  try {
-    await sendRequest(url, {
-      method: "POST",
-    });
-  } catch {
-    throw new Error("Failed to cancel job.");
-  }
-};
-
-/**
- * Retrieves the remaining credits.
- * @returns {Promise<RemainingCreditsResult>} - A promise that resolves to the remaining credits.
- */
-export const getRemainingCredits =
-  async (): Promise<RemainingCreditsResult> => {
-    const url = new URL(endpoints.getRemainingCredits, BACKEND_HOST);
-
-    const result: RemainingCreditsResult = await sendRequest(url);
-
-    return result;
-  };
-
-/**
- * Purchases credits for the user.
- * @returns {Promise<RemainingCreditsResult>} - A promise that resolves to the remaining credits after purchasing.
- */
-export const purchaseCredits = async (): Promise<RemainingCreditsResult> => {
-  const url = new URL(endpoints.purchaseCredits, BACKEND_HOST);
-
-  const result: RemainingCreditsResult = await sendRequest(url, {
-    method: "POST",
-  });
-
-  return result;
-};
-
-/**
- * Sends a request to the specified URL.
- * @param {URL} url - The URL to send the request to.
- * @param {RequestInit} [options] - Optional fetch options to be passed to the fetch function.
- * @returns {Promise<Object>} - A promise that resolves to the response body.
- */
-const sendRequest = async <T>(url: URL, options?: RequestInit): Promise<T> => {
-  const userToken = await auth.getCanvaUserToken();
-
-  const res = await fetch(url, {
-    headers: {
-      Authorization: `Bearer ${userToken}`,
-      ...options?.headers,
-    },
-    ...options,
-  });
-
-  if (!res.ok) {
-    throw new Error(`Request failed with status ${res.status}`);
-  }
-
-  // Check Content-Type header to determine how to parse response body
-  const contentType = res.headers.get("content-type");
-  if (contentType && contentType.includes("application/json")) {
-    // Parse response body as JSON
-    return (await res.json()) as T;
-  } else {
-    // Parse response body as text
-    return (await res.text()) as unknown as T;
-  }
-};

package/templates/gen_ai/src/api/index.ts

@@ -1 +0,0 @@
-export * from "./api";

package/templates/gen_ai/src/components/app_error.tsx

@@ -1,18 +0,0 @@
-import { Alert } from "@canva/app-ui-kit";
-import { useAppContext } from "src/context";
-
-export const AppError = () => {
-  const { loadingApp, creditsError, appError, setAppError } = useAppContext();
-  if (loadingApp || (!appError && !creditsError)) {
-    return null;
-  }
-
-  return (
-    <Alert
-      tone="critical"
-      onDismiss={creditsError ? undefined : () => setAppError("")}
-    >
-      {creditsError || appError}
-    </Alert>
-  );
-};

package/templates/gen_ai/src/components/footer.messages.ts

@@ -1,48 +0,0 @@
-import { defineMessages } from "react-intl";
-
-export const FooterMessages = defineMessages({
-  /** Indicates actions users can take or instructions provided to the user. */
-  generateAgain: {
-    defaultMessage: "Generate again",
-    description:
-      "A button label to generate another image based on the previous prompt",
-  },
-  generateImage: {
-    defaultMessage: "Generate image",
-    description: "A button label to generate an image from a prompt",
-  },
-  purchaseMoreCredits: {
-    defaultMessage: "Purchase more credits",
-    description:
-      "A button label to open a page where the user can purchase more credits",
-  },
-  startOver: {
-    defaultMessage: "Start over",
-    description: "A button label to start the image generation process over",
-  },
-
-  /** Messages related to handling errors that occur during operations. */
-  appErrorGeneratingImagesFailed: {
-    defaultMessage: "Generating images has failed, please try again.",
-    description:
-      "A message to indicate that generating images has failed, but the user is able to make another attempt",
-  },
-
-  /** Messages related to prompts and user input validation. */
-  promptMissingErrorMessage: {
-    defaultMessage: "Please describe what you want to create",
-    description:
-      "An error message to indicate that the user did not supply a prompt to generate an image, and this has to be provided before generating",
-  },
-  promptNoCreditsRemaining: {
-    defaultMessage: "No credits remaining.",
-    description:
-      "A message to indicate that the user has no credits remaining, and is unable to generate an image",
-  },
-  promptObscenityErrorMessage: {
-    defaultMessage:
-      "Something you typed may result in content that doesn’t meet our policies.",
-    description:
-      "An error message to indicate that the user typed something that may result in content that for example could be offensive or violent",
-  },
-});

package/templates/gen_ai/src/components/footer.tsx

@@ -1,156 +0,0 @@
-import { Button, Rows } from "@canva/app-ui-kit";
-import { getPlatformInfo } from "@canva/platform";
-import { useIntl } from "react-intl";
-import { useLocation, useNavigate } from "react-router-dom";
-import { purchaseCredits, queueImageGeneration } from "src/api";
-import { RemainingCredits } from "src/components";
-import { NUMBER_OF_IMAGES_TO_GENERATE } from "src/config";
-import { useAppContext } from "src/context";
-import { Paths } from "src/routes/paths";
-import { getObsceneWords } from "src/utils";
-import { FooterMessages as Messages } from "./footer.messages";
-
-export const Footer = () => {
-  const navigate = useNavigate();
-  const { pathname } = useLocation();
-  const isRootRoute = pathname === Paths.HOME;
-  const platformInfo = getPlatformInfo();
-  const {
-    setAppError,
-    promptInput,
-    setPromptInput,
-    setPromptInputError,
-    loadingApp,
-    isLoadingImages,
-    setJobId,
-    setIsLoadingImages,
-    remainingCredits,
-    setRemainingCredits,
-  } = useAppContext();
-  const intl = useIntl();
-
-  const hasRemainingCredits = remainingCredits > 0;
-
-  const isCreditRemaining = () => {
-    if (!hasRemainingCredits) {
-      setPromptInputError(
-        intl.formatMessage(Messages.promptNoCreditsRemaining),
-      );
-      return false;
-    }
-    return true;
-  };
-
-  const isPromptInputFilled = () => {
-    if (!promptInput) {
-      setPromptInputError(
-        intl.formatMessage(Messages.promptMissingErrorMessage),
-      );
-      return false;
-    }
-    return true;
-  };
-
-  const isPromptInputClean = () => {
-    const obsceneWords = getObsceneWords(promptInput);
-    if (obsceneWords.length > 0) {
-      setPromptInputError(
-        intl.formatMessage(Messages.promptObscenityErrorMessage),
-      );
-      return false;
-    }
-    return true;
-  };
-
-  const onGenerateClick = async () => {
-    if (
-      !isCreditRemaining() ||
-      !isPromptInputFilled() ||
-      !isPromptInputClean()
-    ) {
-      return;
-    }
-
-    setIsLoadingImages(true);
-    try {
-      const { jobId } = await queueImageGeneration({
-        prompt: promptInput,
-        numberOfImages: NUMBER_OF_IMAGES_TO_GENERATE,
-      });
-
-      setJobId(jobId);
-    } catch {
-      setAppError(intl.formatMessage(Messages.appErrorGeneratingImagesFailed));
-    }
-    navigate(Paths.RESULTS);
-  };
-
-  const onPurchaseMoreCredits = async () => {
-    if (!platformInfo.canAcceptPayments) {
-      return;
-    }
-
-    const { credits } = await purchaseCredits();
-    setRemainingCredits(credits);
-  };
-
-  const reset = () => {
-    setPromptInput("");
-    navigate(Paths.HOME);
-  };
-
-  const footerButtons = [
-    {
-      variant: "primary" as const,
-      onClick: onGenerateClick,
-      value: isRootRoute
-        ? intl.formatMessage(Messages.generateImage)
-        : intl.formatMessage(Messages.generateAgain),
-      visible: hasRemainingCredits,
-    },
-    {
-      variant: "primary" as const,
-      onClick: onPurchaseMoreCredits,
-      value: intl.formatMessage(Messages.purchaseMoreCredits),
-      visible: !hasRemainingCredits,
-      disabled: !platformInfo.canAcceptPayments,
-      tooltip: intl.formatMessage({
-        defaultMessage: "Payment not available on this platform.",
-        description:
-          "Tooltip text when payment functionality is not available on the current platform. ",
-      }),
-    },
-    {
-      variant: "secondary" as const,
-      onClick: reset,
-      value: intl.formatMessage(Messages.startOver),
-      visible: !isRootRoute,
-    },
-  ];
-
-  if (isLoadingImages) {
-    return null;
-  }
-
-  return (
-    <Rows spacing="1u">
-      {footerButtons.map(
-        ({ visible, variant, onClick, value, disabled, tooltip }) =>
-          visible && (
-            <Button
-              key={value}
-              variant={variant}
-              onClick={onClick}
-              loading={loadingApp}
-              stretch={true}
-              disabled={disabled}
-              tooltipLabel={tooltip}
-            >
-              {value}
-            </Button>
-          ),
-      )}
-      <RemainingCredits />
-    </Rows>
-  );
-};

package/templates/gen_ai/src/components/image_grid.tsx

@@ -1,103 +0,0 @@
-import { Grid, ImageCard, Rows, Text } from "@canva/app-ui-kit";
-import type { QueuedImage } from "@canva/asset";
-import { upload } from "@canva/asset";
-import { addElementAtPoint, ui } from "@canva/design";
-import type { DragEvent } from "react";
-import { FormattedMessage, useIntl } from "react-intl";
-import type { ImageType } from "src/api";
-import { useAppContext } from "src/context";
-import * as styles from "styles/utils.css";
-
-const THUMBNAIL_HEIGHT = 150;
-
-const uploadImage = async (image: ImageType): Promise<QueuedImage> => {
-  // Upload the image using @canva/asset.
-  const queuedImage = await upload({
-    type: "image",
-    mimeType: "image/jpeg",
-    thumbnailUrl: image.thumbnail.url,
-    url: image.fullsize.url,
-    width: image.fullsize.width,
-    height: image.fullsize.height,
-    aiDisclosure: "app_generated",
-  });
-
-  return queuedImage;
-};
-
-export const ImageGrid = () => {
-  const { generatedImages } = useAppContext();
-
-  const onDragStart = async (
-    event: DragEvent<HTMLElement>,
-    image: ImageType,
-  ) => {
-    const parentNode = event.currentTarget.parentElement;
-    try {
-      if (styles.hidden) {
-        parentNode?.classList.add(styles.hidden);
-      }
-
-      await ui.startDragToPoint(event, {
-        type: "image",
-        resolveImageRef: () => uploadImage(image),
-        previewUrl: image.thumbnail.url,
-        previewSize: {
-          width: image.thumbnail.width,
-          height: image.thumbnail.height,
-        },
-        fullSize: {
-          width: image.fullsize.width,
-          height: image.fullsize.height,
-        },
-      });
-    } finally {
-      if (styles.hidden) {
-        parentNode?.classList.remove(styles.hidden);
-      }
-    }
-  };
-
-  const onImageClick = async (image: ImageType) => {
-    const queuedImage = await uploadImage(image);
-
-    await addElementAtPoint({
-      type: "image",
-      altText: { text: image.label, decorative: false },
-      ref: queuedImage.ref,
-    });
-  };
-
-  const intl = useIntl();
-
-  return (
-    <Rows spacing="1u">
-      <Text size="medium" variant="bold">
-        <FormattedMessage
-          defaultMessage="Select or drag to add to design"
-          description="Instruction to the user on how they can add the generated image to their design"
-        />
-      </Text>
-      <Grid columns={2} spacing="2u">
-        {generatedImages.map((image, index) => (
-          <ImageCard
-            key={index}
-            thumbnailUrl={image.thumbnail.url}
-            onClick={() => onImageClick(image)}
-            ariaLabel={intl.formatMessage({
-              defaultMessage: "Add image to design",
-              description:
-                "Aria label for the image card. When the image card is pressed, it will add the image to the design",
-            })}
-            alt={image.label}
-            thumbnailHeight={THUMBNAIL_HEIGHT}
-            borderRadius="standard"
-            onDragStart={(event: DragEvent<HTMLElement>) =>
-              onDragStart(event, image)
-            }
-          />
-        ))}
-      </Grid>
-    </Rows>
-  );
-};

package/templates/gen_ai/src/components/index.ts

@@ -1,7 +0,0 @@
-export * from "./app_error";
-export * from "./footer";
-export * from "./image_grid";
-export * from "./loading_results";
-export * from "./prompt_input";
-export * from "./report_box";
-export * from "./remaining_credits";