Create a Dynamic AI Image Generator with React and Hugging Face API – Build like MidJourney

Create a Dynamic AI Image Generator with React and Hugging Face API – Build like MidJourney. Watch video tutorial, you’ll learn how to build a cutting-edge AI Image Generator using React and the Hugging Face API. You’ll be able to create high-quality images with the stable-diffusion-v1-5 model, just like MidJourney. This project is perfect for developers who want to explore the capabilities of AI and React.

You’ll learn how to:

Use React for front-end development

Generate images with Hugging Face API’s stable-diffusion-v1-5 model

Customize the images with text and background color Build a user-friendly AI Image Generator from scratch

This tutorial is suitable for developers of all skill levels, from beginners to experts. Whether you’re new to React or have experience with AI, this video will provide you with the knowledge and skills you need to create your own Dynamic AI Image Generator.

Hugging Face: https://huggingface.co/models

import React, { useState } from "react";

const API_TOKEN = "YOUR_API";

const ImageGenerationForm = () => {
  const [loading, setLoading] = useState(false);
  const [output, setOutput] = useState(null);

  const handleSubmit = async (event) => {
    event.preventDefault();
    setLoading(true);

    const input = event.target.elements.input.value;
    const response = await fetch(
      "https://api-inference.huggingface.co/models/prompthero/openjourney",
      {
        method: "POST",
        headers: {
          "Content-Type": "application/json",
          Authorization: `Bearer ${API_TOKEN}`,
        },
        body: JSON.stringify({ inputs: input }),
      }
    );

    if (!response.ok) {
      throw new Error("Failed to generate image");
    }

    const blob = await response.blob();
    setOutput(URL.createObjectURL(blob));
    setLoading(false);
  };

  return (<div className="container al-c mt-3">
    <h1>Stable <span>Diffusion</span></h1>
    <p>Pellentesque vulputate dignissim enim, et sollicitudin massa pellentesque ut. Proin luctus dui ut sem varius eleifend.</p>
    <form className="gen-form" onSubmit={handleSubmit}>
      <input type="text" name="input" placeholder="type your prompt here..." />
      <button type="submit">Generate</button>
    </form>
    <div>
    {loading && <div className="loading">Loading...</div>}
    {!loading && output && (
      <div className="result-image">
        <img src={output} alt="art"  />
      </div>
    )}
    </div>

    </div>);
  
};

export default ImageGenerationForm;

Leave a Reply

For News Subscribe Us!

Can curiosity may end shameless explained. True high on said mr on come. An do mr design at little myself wholly entire though. Attended of on stronger or mr pleasure.

You have been successfully Subscribed! Ops! Something went wrong, please try again.

© 2022 Code With AM