@basementstudio/sanity-ai-image-plugin 0.0.1 → 0.1.0

package/src/server/utils.ts

@@ -1,395 +0,0 @@
-import { Buffer } from "node:buffer";
-import { createGoogleGenerativeAI } from "@ai-sdk/google";
-import { createOpenAI } from "@ai-sdk/openai";
-import * as aiSdk from "ai";
-import {
-  DEFAULT_SUPPORTED_AI_IMAGE_MODEL,
-  getDefaultAllowedAiImageModel,
-  getSupportedAiImageModelDefinition,
-  normalizeAllowedAiImageModels,
-  type SupportedAiImageModelId,
-} from "../utils/models";
-import { MAX_REFERENCE_IMAGES } from "../utils/shared";
-import {
-  DEFAULT_MAX_REFERENCE_FILE_BYTES,
-  OPENAI_SUPPORTED_REFERENCE_IMAGE_TYPES,
-  SUPPORTED_REFERENCE_IMAGE_TYPES,
-} from "./constants";
-import type {
-  GenerateImageFunction,
-  GeneratedImagePayload,
-  RequestOptions,
-} from "./types";
-
-type ResolvedRequestOptions = {
-  allowedModels: SupportedAiImageModelId[];
-  defaultModel: SupportedAiImageModelId;
-  enforceSameOrigin: boolean;
-  maxReferenceFileBytes: number;
-  maxReferences: number;
-  maxTotalReferenceBytes: number;
-};
-
-type ValidationError = {
-  error: string;
-  status: number;
-};
-
-// Small request-parsing helpers used directly by the main request handler.
-export function jsonResponse(
-  body: Record<string, unknown>,
-  status = 200,
-): Response {
-  return Response.json(body, { status });
-}
-
-export function isFileEntry(value: FormDataEntryValue): value is File {
-  return typeof value !== "string";
-}
-
-export function isMultipartFormData(contentType: string | null): boolean {
-  return typeof contentType === "string"
-    ? contentType.toLowerCase().startsWith("multipart/form-data")
-    : false;
-}
-
-export function parseHeaderByteLength(value: string | null): number | null {
-  if (!value) {
-    return null;
-  }
-
-  const parsedValue = Number(value);
-
-  return Number.isFinite(parsedValue) && parsedValue >= 0 ? parsedValue : null;
-}
-
-// Request-level validation helpers keep the handler readable while still
-// returning precise HTTP errors for common failure modes.
-export function getSameOriginValidationError(
-  request: Request,
-): ValidationError | null {
-  const requestOrigin = getRequestOrigin(request);
-  const normalizedOrigin = getNormalizedOrigin(request.headers.get("origin"));
-
-  if (!requestOrigin) {
-    return {
-      error: "AI Image Plugin could not determine the request origin.",
-      status: 400,
-    };
-  }
-
-  if (!normalizedOrigin || normalizedOrigin !== requestOrigin) {
-    return {
-      error:
-        "AI Image Plugin only accepts same-origin browser requests from Sanity Studio.",
-      status: 403,
-    };
-  }
-
-  return null;
-}
-
-export function resolveRequestOptions(
-  options: RequestOptions,
-): ResolvedRequestOptions {
-  const allowedModels = normalizeAllowedModels(options);
-  const defaultModel = getDefaultModel(options, allowedModels);
-  const enforceSameOrigin = options.enforceSameOrigin !== false;
-  const maxReferenceFileBytes =
-    options.maxReferenceFileBytes ?? DEFAULT_MAX_REFERENCE_FILE_BYTES;
-  const maxReferences = options.maxReferences ?? MAX_REFERENCE_IMAGES;
-  const maxTotalReferenceBytes =
-    options.maxTotalReferenceBytes ?? maxReferences * maxReferenceFileBytes;
-
-  return {
-    allowedModels,
-    defaultModel,
-    enforceSameOrigin,
-    maxReferenceFileBytes,
-    maxReferences,
-    maxTotalReferenceBytes,
-  };
-}
-
-export function getFormRequestPayload(
-  formData: FormData,
-  maxReferences: number,
-): {
-  prompt: string;
-  referenceImages: File[];
-  requestedModel: string;
-} {
-  return {
-    prompt: String(formData.get("prompt") || "").trim(),
-    requestedModel: String(formData.get("model") || "").trim(),
-    referenceImages: formData
-      .getAll("references")
-      .filter(isFileEntry)
-      .slice(0, maxReferences),
-  };
-}
-
-// Reference image rules depend on both configured byte limits and the
-// capabilities of the selected model provider.
-export function getReferenceImageValidationError(options: {
-  maxReferenceFileBytes: number;
-  maxTotalReferenceBytes: number;
-  model: SupportedAiImageModelId;
-  referenceImages: File[];
-}): ValidationError | null {
-  const totalReferenceBytes = options.referenceImages.reduce(
-    (totalBytes, referenceImage) => totalBytes + referenceImage.size,
-    0,
-  );
-
-  if (totalReferenceBytes > options.maxTotalReferenceBytes) {
-    return {
-      error: `Reference images cannot exceed ${options.maxTotalReferenceBytes} bytes in total.`,
-      status: 413,
-    };
-  }
-
-  const modelDefinition = getSupportedAiImageModelDefinition(options.model);
-
-  for (const referenceImage of options.referenceImages) {
-    if (referenceImage.size > options.maxReferenceFileBytes) {
-      return {
-        error: `Reference images cannot exceed ${options.maxReferenceFileBytes} bytes each.`,
-        status: 413,
-      };
-    }
-
-    if (!SUPPORTED_REFERENCE_IMAGE_TYPES.has(referenceImage.type)) {
-      return {
-        error: "Reference images must be PNG, JPEG, WEBP, HEIC, or HEIF files.",
-        status: 400,
-      };
-    }
-
-    if (
-      modelDefinition.provider === "openai" &&
-      !OPENAI_SUPPORTED_REFERENCE_IMAGE_TYPES.has(referenceImage.type)
-    ) {
-      return {
-        error:
-          "Reference images for OpenAI models must be PNG, JPEG, or WEBP files.",
-        status: 400,
-      };
-    }
-  }
-
-  return null;
-}
-
-// Provider helpers centralize API-key selection and user-facing provider names
-// so the request handler stays focused on control flow.
-export function getProviderApiKey(
-  model: SupportedAiImageModelId,
-  options: RequestOptions,
-): string | null {
-  const modelDefinition = getSupportedAiImageModelDefinition(model);
-
-  if (modelDefinition.provider === "google") {
-    return options.googleApiKey || options.apiKey || null;
-  }
-
-  return options.openAiApiKey || null;
-}
-
-export function getProviderDisplayName(model: SupportedAiImageModelId): string {
-  const modelDefinition = getSupportedAiImageModelDefinition(model);
-
-  return modelDefinition.provider === "google" ? "Google" : "OpenAI";
-}
-
-export function getMissingApiKeyErrorMessage(
-  model: SupportedAiImageModelId,
-): string {
-  const modelDefinition = getSupportedAiImageModelDefinition(model);
-
-  if (modelDefinition.provider === "google") {
-    return "Missing Google API key. Add googleApiKey (or apiKey for backwards compatibility) before using AI Image Plugin.";
-  }
-
-  return "Missing OpenAI API key. Add openAiApiKey before using AI Image Plugin.";
-}
-
-export function getErrorMessage(error: unknown): string | null {
-  if (!(error instanceof Error) || !error.message.trim()) {
-    return null;
-  }
-
-  return error.message;
-}
-
-// Provider SDKs do not share a single error shape, so we look through a few
-// common status locations before falling back to a generic 502.
-export function getErrorStatusCode(error: unknown): number | null {
-  if (!error || typeof error !== "object") {
-    return null;
-  }
-
-  if ("statusCode" in error && typeof error.statusCode === "number") {
-    return error.statusCode;
-  }
-
-  if ("status" in error && typeof error.status === "number") {
-    return error.status;
-  }
-
-  if (
-    "response" in error &&
-    error.response &&
-    typeof error.response === "object" &&
-    "status" in error.response &&
-    typeof error.response.status === "number"
-  ) {
-    return error.response.status;
-  }
-
-  return null;
-}
-
-// This wraps the AI SDK differences so the request handler can ask for "an
-// image from model X" without caring which provider implementation is behind it.
-export async function generateImageWithModel(options: {
-  apiKey: string;
-  geminiApiUrl?: string;
-  model: SupportedAiImageModelId;
-  prompt: string;
-  referenceImages: File[];
-}): Promise<{ data: string; mimeType: string } | null> {
-  const generateImage = getGenerateImage();
-  const modelDefinition = getSupportedAiImageModelDefinition(options.model);
-  const prompt =
-    options.referenceImages.length > 0
-      ? {
-          images: await Promise.all(options.referenceImages.map(toModelInput)),
-          text: options.prompt,
-        }
-      : options.prompt;
-
-  const model =
-    modelDefinition.provider === "google"
-      ? createGoogleGenerativeAI({
-          apiKey: options.apiKey,
-          ...(options.geminiApiUrl ? { baseURL: options.geminiApiUrl } : {}),
-        }).image(options.model)
-      : createOpenAI({
-          apiKey: options.apiKey,
-        }).image(options.model);
-
-  const result = await generateImage({
-    aspectRatio: modelDefinition.defaultAspectRatio ?? null,
-    model,
-    prompt,
-    size: modelDefinition.defaultSize ?? null,
-  });
-
-  return getGeneratedImagePayload(result.image);
-}
-
-// Internal helpers below support the exported request/provider helpers without
-// needing to leak implementation details across the server module boundary.
-function getGenerateImage(): GenerateImageFunction {
-  const aiModule = aiSdk as Record<string, unknown>;
-  const generateImage = (
-    "generateImage" in aiModule
-      ? aiModule.generateImage
-      : aiModule.experimental_generateImage
-  ) as GenerateImageFunction | undefined;
-
-  if (typeof generateImage !== "function") {
-    throw new Error(
-      'AI Image Plugin could not find generateImage in the installed "ai" package.',
-    );
-  }
-
-  return generateImage;
-}
-
-function getNormalizedOrigin(value: string | null): string | null {
-  if (!value || value === "null") {
-    return null;
-  }
-
-  try {
-    return new URL(value).origin;
-  } catch {
-    return null;
-  }
-}
-
-function getRequestOrigin(request: Request): string | null {
-  try {
-    return new URL(request.url).origin;
-  } catch {
-    return null;
-  }
-}
-
-function normalizeAllowedModels(
-  options: RequestOptions,
-): SupportedAiImageModelId[] {
-  if (options.allowedModels) {
-    return normalizeAllowedAiImageModels(options.allowedModels);
-  }
-
-  if (options.model) {
-    return normalizeAllowedAiImageModels([options.model]);
-  }
-
-  return normalizeAllowedAiImageModels();
-}
-
-function getDefaultModel(
-  options: RequestOptions,
-  allowedModels: SupportedAiImageModelId[],
-): SupportedAiImageModelId {
-  if (!options.model) {
-    return getDefaultAllowedAiImageModel(allowedModels);
-  }
-
-  if (!allowedModels.includes(options.model)) {
-    throw new Error(
-      `AI Image Plugin server configuration must include "${options.model}" in allowedModels.`,
-    );
-  }
-
-  return options.model;
-}
-
-function getGeneratedImagePayload(
-  image: unknown,
-): { data: string; mimeType: string } | null {
-  if (!image || typeof image !== "object") {
-    return null;
-  }
-
-  const generatedImage = image as GeneratedImagePayload;
-  const mimeType =
-    typeof generatedImage.mediaType === "string" &&
-    generatedImage.mediaType.trim()
-      ? generatedImage.mediaType
-      : "image/png";
-
-  if (typeof generatedImage.base64 === "string" && generatedImage.base64) {
-    return {
-      data: generatedImage.base64.replace(/^data:[^;]+;base64,/, ""),
-      mimeType,
-    };
-  }
-
-  if (generatedImage.uint8Array instanceof Uint8Array) {
-    return {
-      data: Buffer.from(generatedImage.uint8Array).toString("base64"),
-      mimeType,
-    };
-  }
-
-  return null;
-}
-
-async function toModelInput(file: File): Promise<Buffer> {
-  return Buffer.from(await file.arrayBuffer());
-}

package/src/server.ts

@@ -1,14 +0,0 @@
-export {
-  DEFAULT_MODEL,
-  DEFAULT_MAX_REFERENCE_FILE_BYTES,
-  handleAiImageRequest,
-} from "./server/handle-request";
-export {
-  DEFAULT_PROVIDER_API_URL,
-  SUPPORTED_REFERENCE_IMAGE_TYPES,
-} from "./server/constants";
-export type { RequestOptions, SuccessResponse } from "./server/types";
-export {
-  SUPPORTED_AI_IMAGE_MODELS,
-  type SupportedAiImageModelId,
-} from "./utils/models";

package/src/studio/components/asset-source.tsx

@@ -1,297 +0,0 @@
-"use client"
-
-import { Box, Button, Card, Flex, Stack, Text, TextArea } from "@sanity/ui"
-import { type ChangeEvent, useState } from "react"
-import {
-  type AssetSource,
-  type AssetSourceComponentProps,
-  useClient,
-} from "sanity"
-import {
-  MAX_REFERENCE_IMAGES,
-  SETTINGS_DOCUMENT_ID,
-  SETTINGS_SCHEMA_TYPE,
-  SOURCE_NAME,
-  SOURCE_TITLE,
-  type ResolvedOptions,
-} from "../../utils/shared"
-import { composePrompt } from "../../utils/prompts"
-import {
-  buildSettingsReferenceImages,
-  fetchSettingsDocument,
-  findTargetSettings,
-  getErrorMessage,
-  resolveSettingsModel,
-} from "../settings-data"
-import {
-  convertImageFileToPng,
-  createGeneratedFile,
-  formatFileSize,
-} from "../files"
-
-type GenerateResponse = {
-  data: string
-  mimeType: string
-  model: string
-}
-
-type GenerationPhase = "idle" | "preparing" | "generating" | "uploading" | "updating"
-
-function getGenerationPhaseLabel(phase: GenerationPhase): string {
-  switch (phase) {
-    case "preparing":
-      return "Preparing..."
-    case "generating":
-      return "Generating..."
-    case "uploading":
-      return "Uploading to Sanity..."
-    case "updating":
-      return "Updating field..."
-    default:
-      return "Generate with AI Image Plugin"
-  }
-}
-
-export function createAssetSource(options: ResolvedOptions): AssetSource {
-  const assetSourceTarget = options.assetSourceTarget
-
-  function AssetSourceComponent({
-    onClose,
-    onSelect,
-  }: AssetSourceComponentProps) {
-    const client = useClient({ apiVersion: options.apiVersion })
-    const [prompt, setPrompt] = useState("")
-    const [referenceImages, setReferenceImages] = useState<File[]>([])
-    const [error, setError] = useState<string | null>(null)
-    const [generationPhase, setGenerationPhase] = useState<GenerationPhase>("idle")
-    const isGenerating = generationPhase !== "idle"
-
-    function handleReferenceImageChange(event: ChangeEvent<HTMLInputElement>) {
-      const nextFiles = Array.from(event.currentTarget.files ?? [])
-
-      if (nextFiles.length === 0) {
-        return
-      }
-
-      setReferenceImages((currentFiles) =>
-        [...currentFiles, ...nextFiles].slice(0, MAX_REFERENCE_IMAGES)
-      )
-      event.currentTarget.value = ""
-    }
-
-    function handleRemoveReferenceImage(indexToRemove: number) {
-      setReferenceImages((currentFiles) =>
-        currentFiles.filter((_, index) => index !== indexToRemove)
-      )
-    }
-
-    async function handleGenerate() {
-      setError(null)
-      setGenerationPhase("preparing")
-
-      try {
-        const settings = await fetchSettingsDocument(
-          client,
-          SETTINGS_DOCUMENT_ID,
-          SETTINGS_SCHEMA_TYPE
-        )
-        const targetSettings = assetSourceTarget
-          ? findTargetSettings(settings, assetSourceTarget.id)
-          : null
-        const selectedModel = resolveSettingsModel({
-          allowedModels: options.allowedModels,
-          settings,
-        })
-        const composedPrompt = composePrompt([
-          settings?.globalPrompt
-            ? `Global direction:\n${settings.globalPrompt}`
-            : null,
-          targetSettings?.prompt
-            ? `Asset source direction:\n${targetSettings.prompt}`
-            : null,
-          prompt.trim()
-            ? `Editor prompt:\n${prompt.trim()}`
-            : null,
-        ])
-
-        if (!composedPrompt) {
-          throw new Error("Add a prompt or configure a default prompt first.")
-        }
-
-        const formData = new FormData()
-        const normalizedReferenceImages = await Promise.all(
-          referenceImages.map(convertImageFileToPng)
-        )
-        const settingsReferenceImages = await buildSettingsReferenceImages(
-          settings,
-          assetSourceTarget?.id
-        )
-        const allReferenceImages = [
-          ...settingsReferenceImages,
-          ...normalizedReferenceImages,
-        ].slice(0, MAX_REFERENCE_IMAGES)
-
-        formData.set("prompt", composedPrompt)
-        formData.set("model", selectedModel)
-
-        for (const referenceImage of allReferenceImages) {
-          formData.append("references", referenceImage)
-        }
-
-        setGenerationPhase("generating")
-        const response = await fetch(options.apiEndpoint, {
-          method: "POST",
-          body: formData,
-        })
-        const payload = (await response.json()) as
-          | GenerateResponse
-          | { error?: string }
-
-        if (!response.ok) {
-          throw new Error(
-            "error" in payload && payload.error
-              ? payload.error
-              : "AI image generation failed."
-          )
-        }
-
-        if (
-          !("data" in payload) ||
-          typeof payload.data !== "string" ||
-          typeof payload.mimeType !== "string"
-        ) {
-          throw new Error("AI Image Plugin returned an invalid image payload.")
-        }
-
-        const generatedFile = createGeneratedFile(
-          payload,
-          prompt,
-          "ai-image-plugin"
-        )
-        setGenerationPhase("uploading")
-        const uploadedAsset = await client.assets.upload("image", generatedFile, {
-          filename: generatedFile.name,
-        })
-
-        setGenerationPhase("updating")
-        onSelect([{ kind: "assetDocumentId", value: uploadedAsset._id }])
-        onClose()
-      } catch (nextError) {
-        setError(getErrorMessage(nextError))
-      } finally {
-        setGenerationPhase("idle")
-      }
-    }
-
-    return (
-      <Card padding={4}>
-        <Stack space={4}>
-          <Stack space={2}>
-            <Text size={2} weight="semibold">
-              Generate an image with AI Image Plugin and drop it straight into this
-              field.
-            </Text>
-            <Text muted size={1}>
-              Project defaults from the AI Image Plugin settings tool are included
-              automatically when configured.
-            </Text>
-          </Stack>
-
-          <Box>
-            <Text size={1} weight="medium">
-              {assetSourceTarget?.promptLabel || "Prompt"}
-            </Text>
-            <Box marginTop={2}>
-              <TextArea
-                onChange={(event: ChangeEvent<HTMLTextAreaElement>) =>
-                  setPrompt(event.currentTarget.value)
-                }
-                placeholder={
-                  assetSourceTarget?.promptPlaceholder ||
-                  "Turn these references into a clean homepage hero image with warm daylight and subtle depth."
-                }
-                rows={6}
-                value={prompt}
-              />
-            </Box>
-          </Box>
-
-          <Box>
-            <Text size={1} weight="medium">
-              Reference images
-            </Text>
-            <Box marginTop={2}>
-              <input
-                accept="image/*"
-                multiple
-                onChange={handleReferenceImageChange}
-                type="file"
-              />
-            </Box>
-            {referenceImages.length > 0 ? (
-              <Box marginTop={3}>
-                <Stack space={2}>
-                  {referenceImages.map((referenceImage, index) => (
-                    <Card
-                      key={`${referenceImage.name}-${index}`}
-                      padding={3}
-                      radius={2}
-                      tone="transparent"
-                    >
-                      <Flex align="center" gap={3} justify="space-between">
-                        <Box flex={1}>
-                          <Text size={1} weight="medium">
-                            {referenceImage.name}
-                          </Text>
-                          <Text muted size={1}>
-                            {formatFileSize(referenceImage.size)}
-                          </Text>
-                        </Box>
-                        <Button
-                          mode="bleed"
-                          onClick={() => handleRemoveReferenceImage(index)}
-                          text="Remove"
-                        />
-                      </Flex>
-                    </Card>
-                  ))}
-                </Stack>
-              </Box>
-            ) : null}
-          </Box>
-
-          {error ? (
-            <Card padding={3} radius={2} tone="critical">
-              <Text size={1}>{error}</Text>
-            </Card>
-          ) : null}
-
-          {isGenerating ? (
-            <Card padding={3} radius={2} tone="transparent">
-              <Text size={1}>
-                {getGenerationPhaseLabel(generationPhase)} This can take a minute
-                or two for slower models.
-              </Text>
-            </Card>
-          ) : null}
-
-          <Flex gap={3} justify="flex-end">
-            <Button mode="ghost" onClick={onClose} text="Cancel" />
-            <Button
-              disabled={isGenerating}
-              onClick={() => void handleGenerate()}
-              text={getGenerationPhaseLabel(generationPhase)}
-              tone="primary"
-            />
-          </Flex>
-        </Stack>
-      </Card>
-    )
-  }
-
-  return {
-    name: SOURCE_NAME,
-    title: SOURCE_TITLE,
-    component: AssetSourceComponent,
-  }
-}