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

package/src/studio/components/generate-button-input.tsx

@@ -1,380 +0,0 @@
-"use client"
-
-import {
-  Box,
-  Button,
-  Card,
-  Dialog,
-  Flex,
-  Stack,
-  Text,
-  TextArea,
-} from "@sanity/ui"
-import { type ChangeEvent, useMemo, useState } from "react"
-import {
-  PatchEvent,
-  type ImageValue,
-  type ObjectInputProps,
-  set,
-  setIfMissing,
-  useClient,
-  useFormValue,
-  useSchema,
-} from "sanity"
-import {
-  buildContextFieldPrompt,
-  getDefaultSelectedContextFieldPaths,
-  getSelectableContextFields,
-} from "../../utils/context-fields"
-import {
-  SETTINGS_DOCUMENT_ID,
-  SETTINGS_SCHEMA_TYPE,
-  type GenerateButtonTarget,
-  type ResolvedOptions,
-} from "../../utils/shared"
-import { composePrompt } from "../../utils/prompts"
-import {
-  buildSettingsReferenceImages,
-  fetchSettingsDocument,
-  findTargetSettings,
-  getErrorMessage,
-  resolveSettingsModel,
-} from "../settings-data"
-import { createGeneratedFile } from "../files"
-
-type GenerateResponse = {
-  data: string
-  mimeType: 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 image"
-  }
-}
-
-export function GenerateButtonInput({
-  options,
-  props,
-  target,
-}: {
-  options: ResolvedOptions
-  props: ObjectInputProps<ImageValue>
-  target: GenerateButtonTarget
-}) {
-  const client = useClient({ apiVersion: options.apiVersion })
-  const schema = useSchema()
-  const documentValue = useFormValue([]) as Record<string, unknown> | undefined
-  const documentType = useFormValue(["_type"]) as string | undefined
-  const [isDialogOpen, setIsDialogOpen] = useState(false)
-  const [userPrompt, setUserPrompt] = useState("")
-  const [selectedContextFieldPaths, setSelectedContextFieldPaths] = useState<
-    string[]
-  >([])
-  const [error, setError] = useState<string | null>(null)
-  const [generationPhase, setGenerationPhase] = useState<GenerationPhase>("idle")
-  const isGenerating = generationPhase !== "idle"
-  const currentAssetRef = props.value?.asset?._ref || "empty"
-
-  const selectableContextFields = useMemo(
-    () =>
-      getSelectableContextFields(
-        documentType ? schema.get(documentType) : undefined
-      ),
-    [documentType, schema]
-  )
-  const defaultSelectedContextFieldPaths = useMemo(
-    () =>
-      getDefaultSelectedContextFieldPaths({
-        selectableContextFields,
-        suggestedContextFieldPaths: target.suggestedContextFieldPaths,
-      }),
-    [selectableContextFields, target.suggestedContextFieldPaths]
-  )
-  const runtimePrompt = buildContextFieldPrompt({
-    contextFieldPaths: selectedContextFieldPaths,
-    documentValue,
-  })
-
-  function toggleContextFieldPath(fieldPath: string) {
-    setSelectedContextFieldPaths((currentFieldPaths) =>
-      currentFieldPaths.includes(fieldPath)
-        ? currentFieldPaths.filter(
-            (currentFieldPath) => currentFieldPath !== fieldPath
-          )
-        : [...currentFieldPaths, fieldPath]
-    )
-  }
-
-  async function handleGenerate() {
-    setError(null)
-    setGenerationPhase("preparing")
-
-    try {
-      const settings = await fetchSettingsDocument(
-        client,
-        SETTINGS_DOCUMENT_ID,
-        SETTINGS_SCHEMA_TYPE
-      )
-      const targetSettings = findTargetSettings(settings, target.id)
-      const selectedModel = resolveSettingsModel({
-        allowedModels: options.allowedModels,
-        settings,
-      })
-      const prompt = composePrompt([
-        settings?.globalPrompt
-          ? `Global direction:\n${settings.globalPrompt}`
-          : null,
-        targetSettings?.prompt
-          ? `Target direction:\n${targetSettings.prompt}`
-          : null,
-        runtimePrompt ? `Document context:\n${runtimePrompt}` : null,
-        userPrompt.trim()
-          ? `Additional editor instructions:\n${userPrompt.trim()}`
-          : null,
-      ])
-
-      if (!prompt) {
-        throw new Error("Add a prompt or configure target defaults first.")
-      }
-
-      const referenceImages = await buildSettingsReferenceImages(
-        settings,
-        target.id
-      )
-      const formData = new FormData()
-
-      formData.set("prompt", prompt)
-      formData.set("model", selectedModel)
-
-      for (const referenceImage of referenceImages) {
-        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 basename =
-        String(
-          documentValue?.title ||
-            documentValue?._type ||
-            target.title ||
-            "generated"
-        ).trim() || "generated"
-      const generatedFile = createGeneratedFile(
-        payload,
-        basename,
-        "ai-image-plugin-field"
-      )
-      setGenerationPhase("uploading")
-      const uploadedAsset = await client.assets.upload("image", generatedFile, {
-        filename: generatedFile.name,
-      })
-
-      setGenerationPhase("updating")
-      props.onChange(
-        PatchEvent.from([
-          setIfMissing({ _type: "image" }),
-          set({ _type: "reference", _ref: uploadedAsset._id }, ["asset"]),
-        ])
-      )
-      setIsDialogOpen(false)
-      setUserPrompt("")
-    } catch (nextError) {
-      setError(
-        getErrorMessage(nextError, "Unable to generate an image for this field.")
-      )
-    } finally {
-      setGenerationPhase("idle")
-    }
-  }
-
-  return (
-    <Stack space={4}>
-      <Card padding={3} radius={2} tone="transparent">
-        <Stack space={3}>
-          <Text size={1}>
-            {target.description ||
-              "Generate an image with AI Image Plugin for this field."}
-          </Text>
-          <Flex gap={3}>
-            <Button
-              onClick={() => {
-                setError(null)
-                setSelectedContextFieldPaths(defaultSelectedContextFieldPaths)
-                setIsDialogOpen(true)
-              }}
-              text="Generate"
-              tone="primary"
-            />
-          </Flex>
-        </Stack>
-      </Card>
-
-      <Box key={currentAssetRef}>{props.renderDefault(props)}</Box>
-
-      {isDialogOpen ? (
-        <Dialog
-          header={target.dialogTitle || "Generate Image"}
-          id={`${target.id}-generate-dialog`}
-          onClose={() => {
-            if (isGenerating) {
-              return
-            }
-
-            setError(null)
-            setIsDialogOpen(false)
-          }}
-          width={1}
-        >
-          <Box padding={4}>
-            <Stack space={4}>
-              <Box>
-                <Text size={1} weight="medium">
-                  {target.promptLabel || "Custom prompt"}
-                </Text>
-                <Box marginTop={2}>
-                  <TextArea
-                    onChange={(event: ChangeEvent<HTMLTextAreaElement>) =>
-                      setUserPrompt(event.currentTarget.value)
-                    }
-                    placeholder={
-                      target.promptPlaceholder ||
-                      "Optional custom instructions for this image."
-                    }
-                    rows={6}
-                    value={userPrompt}
-                  />
-                </Box>
-              </Box>
-
-              {selectableContextFields.length > 0 ? (
-                <Box>
-                  <Stack space={3}>
-                    <Stack space={2}>
-                      <Text size={1} weight="medium">
-                        Include document fields
-                      </Text>
-                      <Flex gap={2} style={{ flexWrap: "wrap" }}>
-                        {selectableContextFields.map((field) => {
-                          const isSelected = selectedContextFieldPaths.includes(
-                            field.path
-                          )
-
-                          return (
-                            <Button
-                              key={field.path}
-                              mode={isSelected ? "default" : "ghost"}
-                              onClick={() => toggleContextFieldPath(field.path)}
-                              text={field.label}
-                              tone={isSelected ? "primary" : "default"}
-                            />
-                          )
-                        })}
-                      </Flex>
-                    </Stack>
-                  </Stack>
-                </Box>
-              ) : (
-                <Card padding={3} radius={2} tone="transparent">
-                  <Stack space={2}>
-                    <Text size={1} weight="medium">
-                      Document context
-                    </Text>
-                    <Text muted size={1}>
-                      No supported top-level document fields are available for
-                      this type yet.
-                    </Text>
-                  </Stack>
-                </Card>
-              )}
-
-              {selectableContextFields.length > 0 ? (
-                <Card padding={3} radius={2} tone="transparent">
-                  <Stack space={2}>
-                    <Text size={1} weight="medium">
-                      Document context preview
-                    </Text>
-                    {runtimePrompt ? (
-                      <Text size={1}>{runtimePrompt}</Text>
-                    ) : (
-                      <Text muted size={1}>
-                        No document fields are selected with a usable value yet.
-                      </Text>
-                    )}
-                  </Stack>
-                </Card>
-              ) : null}
-
-              {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
-                  disabled={isGenerating}
-                  mode="ghost"
-                  onClick={() => {
-                    setError(null)
-                    setIsDialogOpen(false)
-                  }}
-                  text="Cancel"
-                />
-                <Button
-                  disabled={isGenerating}
-                  onClick={() => void handleGenerate()}
-                  text={getGenerationPhaseLabel(generationPhase)}
-                  tone="primary"
-                />
-              </Flex>
-            </Stack>
-          </Box>
-        </Dialog>
-      ) : null}
-    </Stack>
-  )
-}

package/src/studio/components/input-router.tsx

@@ -1,41 +0,0 @@
-"use client"
-
-import { useFormValue, type InputProps, type ObjectInputProps } from "sanity"
-import type { ImageValue } from "sanity"
-import { GenerateButtonInput } from "./generate-button-input"
-import { doesTargetMatchField } from "../../utils/document-paths"
-import type { ResolvedOptions } from "../../utils/shared"
-
-export function InputRouter({
-  options,
-  props,
-}: {
-  options: ResolvedOptions
-  props: InputProps
-}) {
-  const documentType = useFormValue(["_type"]) as string | undefined
-
-  if (props.schemaType?.name !== "image") {
-    return props.renderDefault(props)
-  }
-
-  const target = options.targets.find((candidate) =>
-    doesTargetMatchField({
-      documentType,
-      path: props.path,
-      target: candidate,
-    })
-  )
-
-  if (!target) {
-    return props.renderDefault(props)
-  }
-
-  return (
-    <GenerateButtonInput
-      options={options}
-      props={props as ObjectInputProps<ImageValue>}
-      target={target}
-    />
-  )
-}

package/src/studio/files.ts

@@ -1,114 +0,0 @@
-"use client"
-
-function getPngFilename(filename: string): string {
-  const basename = filename.replace(/\.[^/.]+$/, "")
-  return `${basename || "reference"}.png`
-}
-
-export async function convertImageFileToPng(file: File): Promise<File> {
-  if (file.type === "image/png") {
-    return file
-  }
-
-  const imageUrl = URL.createObjectURL(file)
-
-  try {
-    const image = await new Promise<HTMLImageElement>((resolve, reject) => {
-      const nextImage = new Image()
-      nextImage.onload = () => resolve(nextImage)
-      nextImage.onerror = () =>
-        reject(new Error(`Unable to decode ${file.name} as an image.`))
-      nextImage.src = imageUrl
-    })
-    const canvas = document.createElement("canvas")
-    const width = image.naturalWidth || image.width
-    const height = image.naturalHeight || image.height
-
-    canvas.width = width
-    canvas.height = height
-
-    const context = canvas.getContext("2d")
-
-    if (!context) {
-      throw new Error("Unable to convert the reference image to PNG.")
-    }
-
-    context.drawImage(image, 0, 0, width, height)
-
-    const blob = await new Promise<Blob>((resolve, reject) => {
-      canvas.toBlob(
-        (nextBlob) => {
-          if (nextBlob) {
-            resolve(nextBlob)
-            return
-          }
-
-          reject(new Error("Unable to convert the reference image to PNG."))
-        },
-        "image/png",
-        1
-      )
-    })
-
-    return new File([blob], getPngFilename(file.name), { type: "image/png" })
-  } finally {
-    URL.revokeObjectURL(imageUrl)
-  }
-}
-
-export function base64ToBlob(base64: string, mimeType: string): Blob {
-  const binaryString = atob(base64)
-  const bytes = new Uint8Array(binaryString.length)
-
-  for (const [index, character] of Array.from(binaryString).entries()) {
-    bytes[index] = character.charCodeAt(0)
-  }
-
-  return new Blob([bytes], { type: mimeType })
-}
-
-export function fileExtensionFromMimeType(mimeType: string): string {
-  switch (mimeType) {
-    case "image/jpeg":
-      return "jpg"
-    case "image/webp":
-      return "webp"
-    default:
-      return "png"
-  }
-}
-
-export function formatFileSize(bytes: number): string {
-  if (bytes < 1024) {
-    return `${bytes} B`
-  }
-
-  const kilobytes = bytes / 1024
-
-  if (kilobytes < 1024) {
-    return `${kilobytes.toFixed(1)} KB`
-  }
-
-  return `${(kilobytes / 1024).toFixed(1)} MB`
-}
-
-export function createGeneratedFile(
-  result: { data: string; mimeType: string },
-  basename: string,
-  prefix = "ai-image-plugin"
-): File {
-  const extension = fileExtensionFromMimeType(result.mimeType)
-  const timestamp = new Date().toISOString().replaceAll(/[:.]/g, "-")
-  const safeBasename = basename
-    .trim()
-    .toLowerCase()
-    .replaceAll(/[^a-z0-9]+/g, "-")
-    .replaceAll(/^-+|-+$/g, "")
-    .slice(0, 40)
-  const suffix = safeBasename || "generated"
-  const blob = base64ToBlob(result.data, result.mimeType)
-
-  return new File([blob], `${prefix}-${suffix}-${timestamp}.${extension}`, {
-    type: result.mimeType,
-  })
-}

package/src/studio/plugin.tsx

@@ -1,54 +0,0 @@
-import { definePlugin, type AssetSource, type InputProps } from "sanity"
-import { createAssetSource } from "./components/asset-source"
-import { InputRouter } from "./components/input-router"
-import { createSettingsSchema } from "./settings/schema"
-import { createSettingsTool } from "./settings/tool"
-import { normalizeOptions } from "../utils/config"
-import type { PluginOptions } from "../utils/shared"
-
-export const aiImagePlugin = definePlugin<PluginOptions>((rawOptions) => {
-  const options = normalizeOptions(rawOptions)
-  const assetSource = options.assetSourceTarget
-    ? createAssetSource(options)
-    : null
-  const settingsTool = createSettingsTool(options)
-  const settingsSchema = createSettingsSchema(options)
-
-  return {
-    name: "ai-image-plugin",
-    ...(options.registerSettingsSchemaType
-      ? {
-          schema: {
-            types: [settingsSchema],
-          },
-        }
-      : {}),
-    tools: [
-      {
-        name: options.settingsToolName,
-        title: options.settingsToolTitle,
-        component: settingsTool,
-      },
-    ],
-    form: {
-      ...(assetSource
-        ? {
-            image: {
-              assetSources: (previousAssetSources: AssetSource[]) =>
-                previousAssetSources.some(
-                  (previousAssetSource) =>
-                    previousAssetSource.name === assetSource.name
-                )
-                  ? previousAssetSources
-                  : [...previousAssetSources, assetSource],
-            },
-          }
-        : {}),
-      components: {
-        input: (props: InputProps) => (
-          <InputRouter options={options} props={props} />
-        ),
-      },
-    },
-  }
-})

package/src/studio/settings/schema.ts

@@ -1,122 +0,0 @@
-import { defineArrayMember, defineField, defineType } from "sanity"
-import {
-  getDefaultAllowedAiImageModel,
-  getSupportedAiImageModelOptions,
-} from "../../utils/models"
-import {
-  SETTINGS_DOCUMENT_ID,
-  SETTINGS_SCHEMA_TYPE,
-  type ResolvedOptions,
-} from "../../utils/shared"
-
-export function createSettingsSchema(options: ResolvedOptions) {
-  return defineType({
-    name: SETTINGS_SCHEMA_TYPE,
-    title: "AI Image Plugin Settings",
-    type: "document",
-    fields: [
-      defineField({
-        name: "title",
-        title: "Title",
-        type: "string",
-        initialValue: "AI Image Plugin Settings",
-        readOnly: true,
-      }),
-      defineField({
-        name: "globalPrompt",
-        title: "Global Prompt",
-        type: "text",
-        rows: 8,
-        description:
-          "Prompt instructions automatically included in every AI Image Plugin generation.",
-      }),
-      defineField({
-        name: "globalModel",
-        title: "Default Model",
-        type: "string",
-        initialValue: getDefaultAllowedAiImageModel(options.allowedModels),
-        description:
-          "The AI image model used by the plugin unless a different allowed default is configured later.",
-        options: {
-          list: getSupportedAiImageModelOptions(options.allowedModels),
-        },
-      }),
-      defineField({
-        name: "globalReferenceImages",
-        title: "Global Reference Images",
-        type: "array",
-        description:
-          "Reference images automatically included in every AI Image Plugin generation.",
-        of: [
-          defineArrayMember({
-            type: "image",
-            options: { hotspot: true },
-          }),
-        ],
-      }),
-      defineField({
-        name: "targetConfigs",
-        title: "Target Overrides",
-        type: "array",
-        description:
-          "Per-target prompt and reference images for specific AI Image Plugin entry points.",
-        of: [
-          defineArrayMember({
-            type: "object",
-            fields: [
-              defineField({
-                name: "targetId",
-                title: "Target ID",
-                type: "string",
-                validation: (Rule) => Rule.required(),
-                options: {
-                  list: [
-                    ...(options.assetSourceTarget
-                      ? [
-                          {
-                            title:
-                              options.assetSourceTarget.title ||
-                              options.assetSourceTarget.id,
-                            value: options.assetSourceTarget.id,
-                          },
-                        ]
-                      : []),
-                    ...options.targets.map((target) => ({
-                      title: target.title || target.id,
-                      value: target.id,
-                    })),
-                  ],
-                },
-              }),
-              defineField({
-                name: "prompt",
-                title: "Prompt",
-                type: "text",
-                rows: 6,
-              }),
-              defineField({
-                name: "referenceImages",
-                title: "Reference Images",
-                type: "array",
-                of: [
-                  defineArrayMember({
-                    type: "image",
-                    options: { hotspot: true },
-                  }),
-                ],
-              }),
-            ],
-          }),
-        ],
-      }),
-    ],
-    preview: {
-      prepare() {
-        return {
-          title: "AI Image Plugin Settings",
-          subtitle: SETTINGS_DOCUMENT_ID,
-        }
-      },
-    },
-  })
-}