Hallo Entwickler,
Heute zeige ich Ihnen, wie Sie mit ReactJS einen Bildgenerator erstellen, und die Nutzung ist dank Black Forest Labs und Together AI kostenlos.

Schritt 1: Einrichten des Projekts

Für dieses Tutorial verwenden wir Vite zum Initialisieren der App und Shadcn für die Benutzeroberfläche. Ich gehe davon aus, dass Sie das Projekt bereits eingerichtet und Shadcn installiert haben.

Schritt 2: Installieren Sie das Together AI-Paket

Wir müssen das Together AI-Paket installieren, um auf das kostenlose Flux-Modell für die Bildgenerierung zuzugreifen.
Führen Sie den folgenden Befehl in Ihrem Terminal aus

npm i together-ai

Schritt 3: Erstellen der Benutzeroberfläche

Jetzt erstellen wir die Benutzeroberfläche für unsere App. Unten finden Sie den vollständigen Code für die Bildgeneratorkomponente. Es enthält eine Texteingabe für Eingabeaufforderungen. ein Dropdown-Menü zur Auswahl des Seitenverhältnisses.
Denken Sie daran, dass wir „black-forest-labs/FLUX.1-schnell-Free“ verwenden müssen, da es kostenlos ist.

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;

Letzte Gedanken

Mit diesem Setup verfügen Sie jetzt über eine einfache ReactJS-App, die KI-generierte Bilder generieren und herunterladen kann.
Danke fürs Lesen! Wenn Sie denken, dass dieser Beitrag interessant ist, zögern Sie nicht, ihm ein „Gefällt mir“ zu geben. Viel Spaß beim Codieren!