// 서버 컴포넌트
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";
 
type ReplicateOutPut = (
  prompt: string,
  model: `${string}/${string}` | `${string}/${string}:${string}`
) => Promise<string | string[]>;
 
export const getReplicateOutput: ReplicateOutPut = async (prompt, model) => {
  try {
    const replicate = new Replicate({
      auth: process.env.NEXT_PUBLIC_REPLICATE_API_TOKEN,
    });
 
    const input = {
      prompt: prompt,
      // width,height,negative prompt 등 ai 모델에 따라 다양한 옵션 넣기가능
    };
 
    const output = await replicate.run(model, {
      input,
    });
 
    return output;
  } catch (err) {
    console.log(err);
    return String(err);
  }
};

import { useForm } from "react-hook-form";
 
const ReplicateForm = ({ submitFn }: ReplicateFormProps) => {
  const form = useForm();
  const onSubmit = form.handleSubmit(submitFn);
 
  return (
    <Form {...form}>
      <form onSubmit={onSubmit}>
        <Input name="prompt" placeholder="robot, cat, rainbow" />
        <Select name="select" placeholder="AI 모델을 선택해주세요." />
        <Button type="submit">실행</Button>
      </form>
    </Form>
  );
};
 
export default ReplicateForm;

"use client";
import { getReplicateOutput } from "@/action/replicate-action";
 
const ReplicatePage = () => {
  const [imgSrc, setImgSrc] = useState<string[] | null>(null);
 
  const getReplicateData = async (formData: FormCustomData) => {
    const promptValue = formData.prompt;
    const model = formData.select;
 
    // 서버 액션 prompt와 model을 받음
    const output = await getReplicateOutput(promptValue, model);
    setImgSrc(output);
  };
 
  return (
    <GridBox>
      <ReplicateForm submitFn={getReplicateData} />
      {imgSrc && <Image alt="ai-image" src={imgSrc[0]} />}
    </GridBox>
  );
};
 
export default ReplicatePage;

import { z } from "zod";
import { zodResolver } from "@hookform/resolvers/zod";
 
const FormSchema = z.object({
  prompt: z
    .string({
      required_error: "프롬프트는 빈칸일 수 없습니다.", // 프롬프트 작성 필수
    })
    .min(1, { message: "프롬프트는 빈칸일 수 없습니다." }) // 빈 프롬프트 방지
    .regex(/^[a-zA-Z\s,]*$/, {
      message: "영단어, 공백, 쉼표만 사용 가능합니다.", // 영단어, 공백, 쉼표만 가능
    }),
  select: z.string({
    required_error: "ai 모델을 선택해야 합니다.", // ai 선택 필수
  }),
});
 
type FormZodType = typeof FormSchema;
 
const ReplicateForm = ({ submitFn }: ReplicateFormProps) => {
  const form = useForm<z.infer<FormZodType>>({
    resolver: zodResolver(FormSchema),
  });
  // ...
};

"use client";
import ReCAPTCHA from "react-google-recaptcha";
 
const sitekey = String(process.env.NEXT_PUBLIC_GOOGLE_RECAPTCHA_KEY);
 
interface ReCaptchaProps {
  onChange: () => void;
}
 
const ReCaptcha = ({ onChange }: ReCaptchaProps) => {
  return <ReCAPTCHA theme="dark" sitekey={sitekey} onChange={onChange} />;
};
 
export default ReCaptcha;

"use client";
import ReCaptcha from "@/components/re-captcha";
 
const ReplicatePage = () => {
  // 나머지 코드
  const [isCertification, setIsCertification] = useState<boolean>(false);
 
  const setCertificationSuccess = () => {
    setIsCertification(true);
    sessionStorage.setItem("certification", String(true)); // 세션 스토리지 설정
  };
 
  useEffect(() => {
    setIsCertification(
      Boolean(sessionStorage.getItem("certification")) || false // 진입시 세션 스토리지 접근
    );
  }, []);
 
  return (
    <GridBox>
      {/* 나머지 코드 */}
      {!certification && <ReCaptcha onChange={certificationSuccess} />}
    </GridBox>
  );
};
 
export default ReplicatePage;