Bina Penjana Imej AI Percuma dengan ReactJS

Hai Devs,
Hari ini, saya akan menunjukkan kepada anda cara membuat penjana imej menggunakan ReactJS, dan semuanya percuma untuk digunakan, terima kasih kepada makmal hutan hitam dan Together AI.

Langkah 1: Menyediakan Projek

Untuk tutorial ini, kami akan menggunakan Vite untuk memulakan apl dan Shadcn untuk UI. Saya akan menganggap anda sudah menyediakan projek dan memasang Shadcn.

Langkah 2: Pasang pakej Together AI

Kami perlu memasang pakej Together AI untuk mengakses model Flux percuma untuk penjanaan imej.
Jalankan arahan berikut dalam terminal anda

npm i together-ai

Langkah 3: Membina UI

Sekarang, mari buat UI untuk apl kami. Di bawah ialah kod penuh untuk komponen penjana imej. ia termasuk input teks untuk gesaan. lungsur turun untuk pemilihan nisbah bidang.
Perlu diingat, kita perlu menggunakan "black-forest-labs/FLUX.1-schnell-Free" kerana ia percuma.

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<HTMLImageElement>(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 (
    <div className="bg-gradient-to-br from-indigo-100 via-purple-100 to-pink-100 p-10 md:p-8">
      <motion.div
        initial={{ opacity: 0, y: 20 }}
        animate={{ opacity: 1, y: 0 }}
        transition={{ duration: 0.5 }}
        className="max-w-7xl mx-auto bg-white/80 backdrop-blur-sm rounded-3xl shadow-2xl overflow-y-auto"
      >
        <div className="flex flex-col md:flex-row h-[calc(100vh-4rem)]">
          <div className="w-full md:w-1/2 p-6 flex flex-col">
            <h2 className="text-3xl font-bold mb-6 text-gray-800 bg-clip-text text-transparent bg-gradient-to-r from-indigo-500 to-purple-600">
              AI Image Generator for "Thảo"
            </h2>
            <div className="flex-grow flex flex-col justify-center">
              <Textarea
                value={input}
                onChange={(e) => 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" />
                  </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={isLoading}
                  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>
            </div>
          </div>
          <Separator orientation="vertical" className="hidden md:block" />
          <div className="w-full md:w-1/2 p-6 bg-gray-50/50 flex flex-col">
            <h2 className="text-3xl font-bold mb-6 text-gray-800 bg-clip-text text-transparent bg-gradient-to-r from-purple-500 to-pink-600">
              Generated Image
            </h2>
            {imageUrl ? (
              <motion.div
                initial={{ opacity: 0, scale: 0.9 }}
                animate={{ opacity: 1, scale: 1 }}
                transition={{ duration: 0.5 }}
                className="flex-grow flex flex-col items-center justify-center"
              >
                <img
                  ref={imageRef}
                  src={imageUrl}
                  alt="Generated"
                  className="max-w-full max-h-[60vh] object-contain rounded-lg shadow-lg mb-6"
                />
                <div className="flex space-x-4">
                  <Button
                    onClick={handleDownloadImage}
                    className="rounded-full bg-gradient-to-r from-purple-500 to-pink-600 hover:from-purple-600 hover:to-pink-700 text-white font-semibold py-2 px-4 transition-all duration-300 ease-in-out transform hover:scale-105 flex items-center space-x-2"
                  >
                    {downloading ? "Downloading..." : <DownloadIcon />}
                    <span>Download</span>
                  </Button>
                </div>
              </motion.div>
            ) : (
              <div className="flex-grow flex items-center justify-center text-gray-400">
                <p className="text-lg italic">
                  Your generated image will appear here
                </p>
              </div>
            )}
          </div>
        </div>
      </motion.div>
    </div>
  );
}

export default App;

Fikiran Akhir

Dengan persediaan ini, anda kini mempunyai apl ReactJS ringkas yang boleh menjana dan memuat turun imej yang dijana AI.
Terima kasih kerana membaca! Jika anda rasa siaran ini menarik, jangan teragak-agak untuk memberinya suka. Selamat mengekod!

Atas ialah kandungan terperinci Bina Penjana Imej AI Percuma dengan ReactJS. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!