Hola desarrolladores,
Hoy, les mostraré cómo crear un generador de imágenes usando ReactJS, y todo es de uso gratuito, gracias a Black Forest Labs y Together AI.

Paso 1: configurar el proyecto

Para este tutorial, usaremos Vite para inicializar la aplicación y Shadcn para la interfaz de usuario. Asumiré que ya configuró el proyecto e instaló Shadcn.

Paso 2: Instale el paquete Together AI

Necesitamos instalar el paquete Together AI para acceder al modelo Flux gratuito para la generación de imágenes.
Ejecute el siguiente comando en su terminal

npm i together-ai

Paso 3: construir la interfaz de usuario

Ahora, creemos la interfaz de usuario para nuestra aplicación. A continuación se muestra el código completo del componente generador de imágenes. Incluye una entrada de texto para indicaciones. un menú desplegable para la selección de relaciones de aspecto.
Tenga en cuenta que debemos utilizar "black-forest-labs/FLUX.1-schnell-Free" porque es gratis.

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;

Pensamientos finales

Con esta configuración, ahora tienes una aplicación ReactJS simple que puede generar y descargar imágenes generadas por IA.
¡Gracias por leer! Si crees que este post es interesante no dudes en darle me gusta. ¡Feliz codificación!