Next.js 서버 액션으로 AI Text-to-Image 구현하기

// 서버 컴포넌트
const ServerComponent = () => {
  // 서버 액션
  const handleSubmit = async (formData) => {
    "use server";
    console.log(formData.get("title")); // 이 console은 서버에서만 보입니다.
  };
 
  return (
    <form action={handleSubmit}>
      <input type="text" name="title" />
      <button type="submit">Submit</button>
    </form>
  );
};
 
export default ServerComponent;

import Replicate from "replicate";
 
const replicate = new Replicate({
  auth: process.env.REPLICATE_API_TOKEN, // 발급받은 API 토큰
});
 
const output = await replicate.run(
  // 실행시킬 ai 모델
  "stability-ai/stable-diffusion:d70beb400d223e6432425a5299910329c6050c6abcf97b8c70537d6a1fcb269a",
  {
    input: {
      prompt: "multicolor hyperspace", // input 프롬프트
    },
  }
);
console.log(output);

"use server";
import Replicate from "replicate";
import {
  ReplicateRequestSchema,
  type ReplicateRequest,
} from "@/lib/replicate-schema";
import { enforceRateLimit } from "@/lib/rate-limit";
import { verifyRecaptcha } from "@/lib/recaptcha";
 
type ModelVersion = `${string}/${string}:${string}`;
 
interface ReplicateSuccess {
  images: string[];
  ok: true;
}
 
interface ReplicateFailure {
  code:
    | "invalid_request"
    | "blocked"
    | "provider_failed"
    | "temporarily_unavailable";
  ok: false;
}
 
type ReplicateResult = ReplicateSuccess | ReplicateFailure;
 
const modelVersions: Record<ReplicateRequest["model"], string | undefined> = {
  stableDiffusion: process.env.REPLICATE_STABLE_DIFFUSION_VERSION,
  sdxl: process.env.REPLICATE_SDXL_VERSION,
};
 
const isStringArray = (value: unknown): value is string[] => {
  return (
    Array.isArray(value) &&
    value.every((item) => typeof item === "string")
  );
};
 
const isModelVersion = (
  value: string | undefined,
): value is ModelVersion => {
  return typeof value === "string" && /^[^/]+\/[^:]+:[^:]+$/.test(value);
};
 
const getReplicateOutput = async (request: unknown): Promise<ReplicateResult> => {
  const parsed = ReplicateRequestSchema.safeParse(request);
 
  if (!parsed.success) {
    return { code: "invalid_request", ok: false };
  }
 
  const { model, prompt, recaptchaToken } = parsed.data;
 
  try {
    // Redis나 DB처럼 클라이언트가 바꿀 수 없는 저장소에서 제한한다.
    const requestAllowed = await enforceRateLimit();
 
    if (!requestAllowed) {
      return { code: "blocked", ok: false };
    }
 
    // 비용이 발생하는 모든 요청에서 응답 토큰을 다시 검증한다.
    const captchaVerified = await verifyRecaptcha(recaptchaToken);
 
    if (!captchaVerified) {
      return { code: "blocked", ok: false };
    }
 
    const version = modelVersions[model];
 
    if (!isModelVersion(version)) {
      return { code: "invalid_request", ok: false };
    }
 
    const replicate = new Replicate({
      auth: process.env.REPLICATE_API_TOKEN,
    });
 
    const output: unknown = await replicate.run(version, {
      input: { prompt },
    });
 
    if (!isStringArray(output)) {
      return { code: "provider_failed", ok: false };
    }
 
    return { images: output, ok: true };
  } catch {
    console.error("Image generation request failed.");
    return { code: "temporarily_unavailable", ok: false };
  }
};
 
export { getReplicateOutput };
export type { ReplicateResult };

import { useForm } from "react-hook-form";
import type { ReplicateRequest } from "@/lib/replicate-schema";
 
type ReplicateFormValues = Omit<ReplicateRequest, "recaptchaToken">;
 
interface ReplicateFormProps {
  recaptchaToken: string;
  submitFn: (request: ReplicateRequest) => Promise<void>;
}
 
const ReplicateForm = ({ recaptchaToken, submitFn }: ReplicateFormProps) => {
  const form = useForm<ReplicateFormValues>();
 
  const handleValidSubmit = (values: ReplicateFormValues) => {
    void submitFn({ ...values, recaptchaToken });
  };
 
  const handleSubmit = form.handleSubmit(handleValidSubmit);
 
  return (
    <Form {...form}>
      <form onSubmit={handleSubmit}>
        <Input {...form.register("prompt")} placeholder="robot, cat, rainbow" />
        <Select {...form.register("model")}>
          <option value="stableDiffusion">Stable Diffusion</option>
          <option value="sdxl">SDXL</option>
        </Select>
        <Button disabled={!recaptchaToken} type="submit">
          실행
        </Button>
      </form>
    </Form>
  );
};
 
export { ReplicateForm };

"use client";
 
import { useState } from "react";
import { getReplicateOutput } from "@/action/replicate-action";
import { ReCaptcha } from "@/components/re-captcha";
import { ReplicateForm } from "@/components/replicate-form";
import type { ReplicateRequest } from "@/lib/replicate-schema";
 
const ReplicatePage = () => {
  const [imgSrc, setImgSrc] = useState<string[] | null>(null);
  const [recaptchaToken, setRecaptchaToken] = useState<string | null>(null);
  const [recaptchaKey, setRecaptchaKey] = useState(0);
 
  const handleCaptchaChange = (token: string | null) => {
    setRecaptchaToken(token);
  };
 
  const handleReplicateSubmit = async (request: ReplicateRequest) => {
    try {
      const result = await getReplicateOutput(request);
 
      if (!result.ok) {
        setImgSrc(null);
        return;
      }
 
      setImgSrc(result.images);
    } catch {
      setImgSrc(null);
    } finally {
      setRecaptchaToken(null);
      setRecaptchaKey((currentKey) => currentKey + 1);
    }
  };
 
  return (
    <GridBox>
      <ReCaptcha key={recaptchaKey} onChange={handleCaptchaChange} />
      <ReplicateForm
        recaptchaToken={recaptchaToken ?? ""}
        submitFn={handleReplicateSubmit}
      />
      {imgSrc && <GeneratedImageList srcList={imgSrc} />}
    </GridBox>
  );
};
 
export default ReplicatePage;

import { z } from "zod";
 
const ReplicateRequestSchema = z.object({
  prompt: z
    .string()
    .trim()
    .min(1, { message: "프롬프트는 비어 있을 수 없습니다." })
    .max(500, { message: "프롬프트는 500자 이하여야 합니다." })
    .regex(/^[a-zA-Z\s,]*$/, {
      message: "영단어, 공백, 쉼표만 사용할 수 있습니다.",
    }),
  model: z.enum(["stableDiffusion", "sdxl"]),
  recaptchaToken: z.string().min(1),
});
 
type ReplicateRequest = z.infer<typeof ReplicateRequestSchema>;
 
export { ReplicateRequestSchema };
export type { ReplicateRequest };

"use client";
import ReCAPTCHA from "react-google-recaptcha";
 
interface ReCaptchaProps {
  onChange: (token: string | null) => void;
}
 
const ReCaptcha = ({ onChange }: ReCaptchaProps) => {
  const siteKey = process.env.NEXT_PUBLIC_GOOGLE_RECAPTCHA_KEY;
 
  if (!siteKey) {
    return null;
  }
 
  const handleReset = () => {
    onChange(null);
  };
 
  return (
    <ReCAPTCHA
      theme="dark"
      sitekey={siteKey}
      onChange={onChange}
      onErrored={handleReset}
      onExpired={handleReset}
    />
  );
};
 
export { ReCaptcha };

import { z } from "zod";
 
const RecaptchaResponseSchema = z.object({
  hostname: z.string().optional(),
  success: z.boolean(),
});
 
const verifyRecaptcha = async (token: string): Promise<boolean> => {
  const secret = process.env.RECAPTCHA_SECRET_KEY;
  const expectedHostname = process.env.RECAPTCHA_HOSTNAME;
 
  if (!secret || !expectedHostname) {
    return false;
  }
 
  try {
    const body = new URLSearchParams({ response: token, secret });
    const response = await fetch(
      "https://www.google.com/recaptcha/api/siteverify",
      { body, method: "POST" },
    );
 
    if (!response.ok) {
      return false;
    }
 
    const result: unknown = await response.json();
    const parsed = RecaptchaResponseSchema.safeParse(result);
 
    return (
      parsed.success &&
      parsed.data.success &&
      parsed.data.hostname === expectedHostname
    );
  } catch {
    return false;
  }
};
 
export { verifyRecaptcha };