안녕하세요 개발자 여러분,
오늘은 ReactJS를 사용하여 이미지 생성기를 만드는 방법을 보여 드리겠습니다. Black Forest Labs와 Together AI 덕분에 모두 무료로 사용할 수 있습니다.

1단계: 프로젝트 설정

이 튜토리얼에서는 Vite를 사용하여 앱을 초기화하고 Shadcn을 UI로 사용하겠습니다. 이미 프로젝트를 설정하고 Shadcn을 설치했다고 가정하겠습니다.

2단계: Together AI 패키지 설치

이미지 생성을 위한 무료 Flux 모델에 액세스하려면 Together AI 패키지를 설치해야 합니다.
터미널에서 다음 명령을 실행하세요.

npm i together-ai

3단계: UI 구축

이제 앱의 UI를 만들어 보겠습니다. 다음은 이미지 생성기 구성 요소의 전체 코드입니다. 여기에는 프롬프트에 대한 텍스트 입력이 포함됩니다. 종횡비 선택을 위한 드롭다운입니다.
"black-forest-labs/FLUX.1-schnell-Free"는 무료이므로 사용해야 합니다.

import { useRef, useState } from "react";
import Together from "together-ai";
import { ImagesResponse } from "together-ai";
import { Button } from "@/components/ui/button";
import {
  Select,
  SelectContent,
  SelectItem,
  SelectTrigger,
  SelectValue,
} from "@/components/ui/select";
import { Textarea } from "@/components/ui/textarea";
import { motion } from "framer-motion";
import { Separator } from "@/components/ui/separator";
import { DownloadIcon } from "@radix-ui/react-icons";
import { save } from "@tauri-apps/plugin-dialog";
import { writeFile } from "@tauri-apps/plugin-fs";

function App() {
  const [input, setInput] = useState("");
  const [imageUrl, setImageUrl] = useState("");
  const [ratio, setRatio] = useState("9:16");
  const [isLoading, setIsLoading] = useState(false);
  const [downloading, setDownloading] = useState(false);
  const imageRef = useRef(null);

  const hRatio = ratio.split(":").map(Number)[0];
  const vRatio = ratio.split(":").map(Number)[1];

  const width = hRatio === 1 ? 512 : hRatio * 64;
  const height = vRatio === 1 ? 512 : vRatio * 64;

  const together = new Together({
    apiKey: import.meta.env.VITE_TOGETHER_API_KEY,
  });

  const handleGenerateImage = async () => {
    setIsLoading(true);

    try {
      console.log(width, height);
      const response: ImagesResponse = await together.images.create({
        model: "black-forest-labs/FLUX.1-schnell-Free",
        prompt: input,
        width: width,
        height: height,
        // @ts-expect-error response_format is not defined in the type
        response_format: "b64_json",
      });

      const base64Image = response.data[0].b64_json;
      const dataUrl = `data:image/png;base64,${base64Image}`;
      setImageUrl(dataUrl);
    } catch (error) {
      console.error("Error generating image:", error);
      // You might want to add some error handling UI here
    } finally {
      setIsLoading(false);
    }
  };

  const handleDownloadImage = async () => {
    if (imageUrl) {
      setDownloading(true);
      try {
        // Remove the data URL prefix
        const base64Data = imageUrl.replace(/^data:image\/\w ;base64,/, "");

        // Convert base64 to binary
        const imageBuffer = Uint8Array.from(atob(base64Data), (c) =>
          c.charCodeAt(0)
        );

        // Open a save dialog
        const filePath = await save({
          filters: [
            {
              name: "Image",
              extensions: ["png"],
            },
          ],
        });

        if (filePath) {
          // Write the file
          await writeFile(filePath, imageBuffer);
          console.log("File saved successfully");
        }
      } catch (error) {
        console.error("Error saving image:", error);
      } finally {
        setDownloading(false);
      }
    }
  };

  return (
    

      

          

            

              AI Image Generator for "Thảo"
            
            

               setInput(e.target.value)}
                placeholder="Describe the image you want to create..."
                className="mb-4 resize-none rounded-2xl border-2 border-indigo-200 focus:border-indigo-500 transition-colors"
                rows={5}
              />
              <div classname="flex items-center space-x-4 mb-6">
                <select value="{ratio}" onvaluechange="{setRatio}"><selecttrigger classname="w-full rounded-full border-2 border-purple-200 focus:border-purple-500 transition-colors"><selectvalue placeholder="Select ratio"></selectvalue></selecttrigger><selectcontent><selectitem value="1:1">1:1</selectitem><selectitem value="4:3">4:3</selectitem><selectitem value="16:9">16:9</selectitem><selectitem value="3:4">3:4</selectitem><selectitem value="9:16">9:16</selectitem></selectcontent></select><button onclick="{handleGenerateImage}" disabled classname="flex-shrink-0 bg-gradient-to-r from-indigo-500 to-purple-600 hover:from-indigo-600 hover:to-purple-700 text-white font-semibold py-2 px-4 rounded-full transition-all duration-300 ease-in-out transform hover:scale-105">
                 {isLoading ? "Generating..." : "Generate Image"}
                </button>
              </div>
            
          
          

            

              Generated Image
            
            {imageUrl ? (
              

                  
                    {downloading ? "Downloading..." : }
                    Download
                  
                
              
            ) : (
              

                

                  Your generated image will appear here
                
              
            )}
          
        
      
  );
}

export default App;

최종 생각

이 설정을 통해 이제 AI 생성 이미지를 생성하고 다운로드할 수 있는 간단한 ReactJS 앱이 생겼습니다.
읽어주셔서 감사합니다! 이 게시물이 흥미롭다고 생각하시면 주저하지 말고 좋아요를 눌러주세요. 즐거운 코딩하세요!