”工欲善其事,必先利其器。“—孔子《论语.录灵公》
首页 > 编程 > 使用 ReactJS 构建免费的 AI 图像生成器

使用 ReactJS 构建免费的 AI 图像生成器

发布于2024-11-08
浏览:709

开发者们大家好,
今天,我将向您展示如何使用 ReactJS 创建图像生成器,并且完全可以免费使用,这要感谢黑森林实验室和 Together AI。

第 1 步:设置项目

在本教程中,我们将使用 Vite 来初始化应用程序并使用 Shadcn 来初始化 UI。我假设您已经设置了项目并安装了 Shadcn。

第 2 步:安装 Together AI 软件包

我们需要安装Together AI包来访问免费的Flux模型来生成图像。
在终端中运行以下命令

npm i together-ai

第 3 步:构建用户界面

现在,让我们为我们的应用程序创建 UI。以下是图像生成器组件的完整代码。它包括提示的文本输入。用于选择宽高比的下拉菜单。
请记住,我们需要使用“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"

Generated Image

{imageUrl ? ( Generated
) : (

Your generated image will appear here

)}
); } export default App;

Build a Free AI Image Generator with ReactJS

Build a Free AI Image Generator with ReactJS

最后的想法

通过此设置,您现在拥有一个简单的 ReactJS 应用程序,可以生成和下载 AI 生成的图像。
感谢您的阅读!如果您觉得这篇文章有趣,请不要犹豫,点个赞。快乐编码!

版本声明 本文转载于:https://dev.to/nhd2106/image-generator-app-for-free-2p0d?1如有侵犯,请联系[email protected]删除
最新教程 更多>

免责声明: 提供的所有资源部分来自互联网,如果有侵犯您的版权或其他权益,请说明详细缘由并提供版权或权益证明然后发到邮箱:[email protected] 我们会第一时间内为您处理。

Copyright© 2022 湘ICP备2022001581号-3