How to display Gemini API's reply from the server response on my website?

Google AI Studio
1

I am using the Gemini API to send an image and accompanying text description to my server. The API processes the input and provides a reply in the response, which I can see in the server logs. However, I am unable to display the reply content dynamically on my website.

I have a simple HTML front-end and an Express.js server that handles the API call. I would like help to troubleshoot why the response isn’t showing on my website, even though the console confirms the API reply is received.

Index.html:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Gemini API - Chat & Image Upload</title>
    <link rel="stylesheet" href="styles.css">
</head>
<body>
    <header>
        <nav>
            <div class="logo">dwp | Sustainability AI</div>
        </nav>
    </header>

    <main>
        <section id="upload">
            <h2>Upload PDFs & Images</h2>
            <p>Upload an image and describe the project to help AI review it for sustainability.</p>
            <textarea id="user-description" rows="5" placeholder="Describe the contents of this image..."></textarea>
            <input type="file" id="image-upload" accept="image/*">
            <button id="upload-button">Upload Image</button>
        </section>

        <section id="response-section">
            <h2>Response</h2>
            <div id="response-container">Waiting for response...</div>
        </section>
    </main>

    <footer>
        <p>&copy; 2024 Sustainability AI. All rights reserved.</p>
    </footer>

    <script>
        document.getElementById("upload-button").addEventListener("click", async () => {
            const file = document.getElementById("image-upload").files[0];
            const description = document.getElementById("user-description").value.trim();
            const responseContainer = document.getElementById("response-container");

            if (!file) {
                responseContainer.textContent = "Please upload an image.";
                return;
            }

            responseContainer.textContent = "Processing, please wait...";

            const formData = new FormData();
            formData.append("image", file);
            formData.append("description", description);

            try {
                const response = await fetch("http://localhost:3000/upload-image", {
                    method: "POST",
                    body: formData
                });

                const data = await response.json();

                if (data.reply) {
                    responseContainer.textContent = data.reply;
                } else {
                    responseContainer.textContent = "No response generated. Please try again.";
                }
            } catch (error) {
                console.error("Error:", error);
                responseContainer.textContent = "An error occurred while fetching the response.";
            }
        });
    </script>
</body>
</html>

Code server.js

const express = require("express");
const axios = require("axios");
const cors = require("cors");
const multer = require("multer");
require("dotenv").config();
const fs = require("fs");

const app = express();
const PORT = 3000;

app.use(cors());
app.use(express.json());

const upload = multer({ dest: "uploads/" });

app.post("/upload-image", upload.single("image"), async (req, res) => {
    const imagePath = req.file.path;
    const description = req.body.description;

    try {
        const geminiApiKey = process.env.GEMINI_API_KEY;
        const geminiApiUrl = `https://generativelanguage.googleapis.com/v1beta/models/gemini-2.0-flash-exp:generateContent?key=${geminiApiKey}`;

        const mimeType = req.file.mimetype;
        const base64Image = fs.readFileSync(imagePath, { encoding: "base64" });

        const requestBody = {
            contents: [
                {
                    parts: [
                        { inlineData: { mimeType, data: base64Image } },
                        { text: description }
                    ]
                }
            ]
        };

        const response = await axios.post(geminiApiUrl, requestBody);

        const reply = response.data?.candidates?.[0]?.content?.parts?.[0]?.text || "No response generated.";
        console.log("Gemini API Response:", reply);

        res.json({ reply });
    } catch (error) {
        console.error("Error processing request:", error.message);
        res.status(500).json({ error: "Failed to fetch response from Gemini API." });
    } finally {
        fs.unlinkSync(imagePath); // Clean up the uploaded file
    }
});

app.listen(PORT, () => {
    console.log(`Server running on http://localhost:${PORT}`);
});