Gemini Template for image processing

main.js

import { useState } from "react";
import { GoogleGenerativeAI } from "@google/generative-ai";

function Gemini() {
  const [loading, setLoading] = useState(false);
  const [apiData, setApiData] = useState("");
  const [selectedFile, setSelectedFile] = useState(null);

  const genAI = new GoogleGenerativeAI(process.env.NEXT_PUBLIC__API_GEN_API);

  const fileToGenerativePart = async (file) => {
    const base64EncodedDataPromise = new Promise((resolve) => {
      const reader = new FileReader();
      reader.onloadend = () => resolve(reader.result.split(',')[1]);
      reader.readAsDataURL(file);
    });
    return {
      inlineData: { data: await base64EncodedDataPromise, mimeType: file.type },
    };
  };

  const imageUpload = async () => {
    if (!selectedFile) {
      alert("Please select an image first.");
      return;
    }

    setLoading(true);
    const imagePart = await fileToGenerativePart(selectedFile);

    const model = genAI.getGenerativeModel({ model: "gemini-1.5-flash" },

    );
    const prompt = `You receive images and analyse them to  produce an instagram captions from that image`;

    const result = await model.generateContent([prompt, imagePart]);
    const response = await result.response;
    console.log(await response.text());
    const text = await response.text();
    setApiData(text);
    setLoading(false);
  };

  const handleFileChange = (e) => {
    setSelectedFile(e.target.files[0]);
  };

  return (
    <div className="container">
      <h1>Google Gemini Pro AI Integration With React</h1>
      <div className="mt-5 mb-5">
        <form>
          <div className="row d-flex align-items-end">
            <div className="col-lg-2">

              <input
                type="file"
                className="form-control"
                id="image"
                onChange={handleFileChange}
                accept="image/*"
              />
            </div>
          </div>
        </form>
        <button className="btn btn-primary mt-3" onClick={imageUpload}>
          Analyze Image
        </button>
      </div>
      <div className="">
        {!loading && <p className="text-align-left">{apiData}</p>}
        {loading && <p>Loading...</p>}

      </div>
    </div>
  );
}

export default Gemini;