مرحبًا المطورين،
اليوم، سأوضح لك كيفية إنشاء منشئ صور باستخدام ReactJS، وكل ذلك مجاني للاستخدام، وذلك بفضل Black Forest Labs وTogether AI.

الخطوة 1: إعداد المشروع

في هذا البرنامج التعليمي، سنستخدم Vite لتهيئة التطبيق وShadcn لواجهة المستخدم. سأفترض أنك قمت بالفعل بإعداد المشروع وتثبيت Shadcn.

الخطوة 2: قم بتثبيت حزمة Together AI

نحتاج إلى تثبيت حزمة Together AI للوصول إلى نموذج Flux المجاني لإنشاء الصور.
قم بتشغيل الأمر التالي في المحطة الطرفية الخاصة بك

npm i together-ai

الخطوة 3: بناء واجهة المستخدم

الآن، لنقم بإنشاء واجهة المستخدم لتطبيقنا. يوجد أدناه الكود الكامل لمكون مولد الصور. يتضمن إدخال نص للمطالبات. قائمة منسدلة لاختيار نسب العرض إلى الارتفاع.
ضع في اعتبارك أننا بحاجة إلى استخدام "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;

الأفكار النهائية

بفضل هذا الإعداد، أصبح لديك الآن تطبيق ReactJS بسيط يمكنه إنشاء وتنزيل صور تم إنشاؤها بواسطة الذكاء الاصطناعي.
شكرا للقراءة! إذا كنت تعتقد أن هذا المنشور مثير للاهتمام، فلا تتردد في الإعجاب به. برمجة سعيدة!