Salut les développeurs,
Aujourd'hui, je vais vous montrer comment créer un générateur d'images à l'aide de ReactJS, et tout est gratuit, grâce aux laboratoires de la Forêt-Noire et à Together AI.

Étape 1 : Mise en place du projet

Pour ce didacticiel, nous utiliserons Vite pour initialiser l'application et Shadcn pour l'interface utilisateur. Je suppose que vous avez déjà configuré le projet et installé Shadcn.

Étape 2 : Installer le package Together AI

Nous devons installer le package Together AI pour accéder au modèle Flux gratuit pour la génération d'images.
Exécutez la commande suivante dans votre terminal

npm i together-ai

Étape 3 : Créer l'interface utilisateur

Maintenant, créons l'interface utilisateur de notre application. Vous trouverez ci-dessous le code complet du composant générateur d’images. il comprend une saisie de texte pour les invites. une liste déroulante pour la sélection des proportions.
Gardez à l'esprit que nous devons utiliser "black-forest-labs/FLUX.1-schnell-Free" car c'est gratuit.

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;

Pensées finales

Avec cette configuration, vous disposez désormais d'une application ReactJS simple qui peut générer et télécharger des images générées par l'IA.
Merci d'avoir lu! Si vous pensez que cet article est intéressant, n’hésitez pas à le liker. Bon codage !