Connecting the UI to the Backend with Spring Boot and JavaScript

Welcome to the third lesson in our course on building an image generation web application with Spring Boot! In our previous lessons, we built a solid foundation for our application by creating the HTML structure and styling it with CSS. We now have a visually appealing interface with tabs, form elements, and containers for displaying generated images.

However, our application is still static — clicking buttons does not do anything, and there is no way to actually generate images or switch between tabs. This is where JavaScript comes in. JavaScript is the programming language that brings web pages to life by adding interactivity and dynamic behavior.

In this lesson, we will focus on implementing the client-side functionality that will allow users to interact with our application. We will write JavaScript code to handle tab navigation, capture user input, send requests to our backend API, and display the generated images.

The JavaScript file we will be creating will serve as the bridge between our user interface and the Spring Boot backend. When a user submits a prompt, the frontend sends it to the Spring Boot application, which then calls the official Gemini API using the gemini-3.1-flash-image model to generate the image. The backend processes the Gemini response and returns a simplified result to the frontend for display. This JavaScript handles all the client-side logic — from validating user input to making requests to the Spring Boot backend and updating the DOM based on the responses.

Let's get started by implementing the tab navigation functionality, which will allow users to switch between the "Generate Image" and "View History" tabs.

Our application has two main tabs: "Generate Image" and "View History." We need to implement a function that will show the selected tab and hide the others when a user clicks on a tab button.

Let's create a file named script.js in the static/js folder of our Spring Boot application. This is the same folder where we placed our style.css file in the previous lesson.

src/main/resources/
└── static/
    ├── css/
    │   └── style.css
    ├── js/
    │   └── script.js
    └── index.html

Now, let's implement the openTab() function that will handle the tab switching:

function openTab(tabName) {
    document.querySelectorAll('.tab-content').forEach(tab => {
        tab.style.display = 'none';
    });
    document.getElementById(tabName).style.display = 'block';
}

This function does two main things:

1. First, it selects all elements with the class .tab-content using document.querySelectorAll() and hides them by setting their display style property to 'none'.
2. Then, it selects the specific tab content element with the ID matching the tabName parameter using document.getElementById() and shows it by setting its display style property to 'block'.

When a user clicks on a tab button, this function will be called with the ID of the corresponding tab content as the argument. For example, when the user clicks on the "Generate Image" tab button, the function will be called as openTab('generate'), and when they click on the "View History" tab button, it will be called as openTab('history').

Remember that in our HTML, we have already set up the tab buttons to call this function with the appropriate arguments:

<button class="tab-button" onclick="openTab('generate')">Generate Image</button>
<button class="tab-button" onclick="openTab('history')">View History</button>

With this function in place, users can now switch between tabs by clicking on the tab buttons. The selected tab's content will be displayed, while the other tab's content will be hidden.

Now that we have the tab navigation working, let's move on to implementing the image generation functionality.

The core functionality of our application is generating images based on user input. We need to implement a function that will capture the user's input, validate it, and send it to our Spring Boot backend — which in turn calls the Gemini API with gemini-3.1-flash-image to produce the image.

Let's add the generateImage() function to our script.js file:

function generateImage() {
    const promptInput = document.getElementById('prompt').value;
    const aspectRatio = document.getElementById('aspect-ratio').value;
    const loadingMessage = document.getElementById('loading-message');
    const generateButton = document.getElementById('generate-button');
    const imageContainer = document.getElementById('image-container');
    
    if (!promptInput) {
        alert('Please enter a prompt');
        return;
    }
    
    loadingMessage.style.display = 'block';
    generateButton.style.display = 'none';
    imageContainer.innerHTML = '';
    
    fetch('/api/generate_image', {
        method: 'POST',
        headers: { 'Content-Type': 'application/json' },
        body: JSON.stringify({ user_input: promptInput, aspect_ratio: aspectRatio })
    })
    .then(response => response.json())
    .then(data => {
        loadingMessage.style.display = 'none';
        generateButton.style.display = 'block';
        
        if (data.error) {
            alert(data.error);
        } else {
            const img = document.createElement('img');
            img.src = `data:image/png;base64,${data.image}`;
            imageContainer.appendChild(img);
        }
    })
    .catch(error => {
        loadingMessage.style.display = 'none';
        generateButton.style.display = 'block';
        alert('Error generating image. Please try again.');
        console.error('Error:', error);
    });
}

Let's break down this function step by step.

First, we need to retrieve the values from the input fields where the user enters a prompt and selects an aspect ratio:

const promptInput = document.getElementById('prompt').value;
const aspectRatio = document.getElementById('aspect-ratio').value;

These values will be included in the request to our backend API.

Next, we get references to the key elements in the UI that we will need to interact with:

const loadingMessage = document.getElementById('loading-message');
const generateButton = document.getElementById('generate-button');
const imageContainer = document.getElementById('image-container');

These elements will be used to show a loading state, hide the button, and display the generated image.

Before proceeding, we check that the user has entered a prompt:

if (!promptInput) {
    alert('Please enter a prompt');
    return;
}

This prevents the user from submitting an empty prompt and ensures meaningful input is sent to the backend.

To indicate that the image is being generated, we update the UI accordingly:

loadingMessage.style.display = 'block';
generateButton.style.display = 'none';
imageContainer.innerHTML = '';

This gives the user feedback and prepares the page to display a new image.

We use the Fetch API to send the user's input to our Spring Boot backend:

fetch('/api/generate_image', {
    method: 'POST',
    headers: { 'Content-Type': 'application/json' },
    body: JSON.stringify({ user_input: promptInput, aspect_ratio: aspectRatio })
})

This makes a POST request to the /api/generate_image endpoint, which is a route defined in our Spring Boot application — not a direct call to the Gemini API. The JSON body shown here (user_input, aspect_ratio) is the contract between our frontend and our own backend, not the Gemini API's native request format.

Once the Spring Boot controller receives this request, it internally builds a generateContent call to the Gemini API using the gemini-3.1-flash-image model, passing the user's prompt along with any image-generation parameters. The browser never communicates with Gemini directly; that interaction is entirely handled on the server side.

Once we receive a response from the backend, we parse the JSON and update the UI:

.then(response => response.json())
.then(data => {
    loadingMessage.style.display = 'none';
    generateButton.style.display = 'block';

    if (data.error) {
        alert(data.error);
    } else {
        const img = document.createElement('img');
        img.src = `data:image/png;base64,${data.image}`;
        imageContainer.appendChild(img);
    }
})

This code resets the UI, checks for errors, and displays the generated image if the request was successful. Note that the Spring Boot backend has already extracted and normalized the image data from the Gemini API response before returning it here — the data.image field is a plain base64 string that the frontend can use directly, rather than the raw Gemini response structure.

Finally, we handle any unexpected issues that may occur during the request:

.catch(error => {
    loadingMessage.style.display = 'none';
    generateButton.style.display = 'block';
    alert('Error generating image. Please try again.');
    console.error('Error:', error);
});

This ensures the user is informed and the UI returns to a usable state if something goes wrong.

Now, we are ready to send the request to our backend API. We will explore this in more detail in the next section.

To send the user's input to our Spring Boot backend, we will use the Fetch API, which is a modern interface for making HTTP requests in JavaScript.

In our generateImage() function, we use fetch() to send a POST request to the /api/generate_image endpoint:

fetch('/api/generate_image', {
    method: 'POST',
    headers: { 'Content-Type': 'application/json' },
    body: JSON.stringify({ user_input: promptInput, aspect_ratio: aspectRatio })
})

Let's break down this fetch request:

• The first argument is the URL of the endpoint we are sending the request to: /api/generate_image. This is a route served by our local Spring Boot application.
• The second argument is an object with options for the request:
  • method: 'POST' specifies that we are sending a POST request, which is appropriate for creating new resources (in this case, generating a new image).
  • headers: { 'Content-Type': 'application/json' } tells the server that we are sending JSON data.
  • body: JSON.stringify({ user_input: promptInput, aspect_ratio: aspectRatio }) converts our JavaScript object containing the user's input into a JSON string. This is the format our Spring Boot backend expects — it is not the Gemini API's native generateContent request format. The backend is responsible for translating these fields into a proper Gemini API call using gemini-3.1-flash-image.

The fetch() function returns a Promise that resolves to the Response object representing the response to the request. We can use the .then() method to handle the response:

.then(response => response.json())

This line takes the Response object and calls its .json() method, which returns another Promise that resolves to the parsed JSON data from the response body.

We can chain another .then() to handle the parsed data:

.then(data => {
    loadingMessage.style.display = 'none';
    generateButton.style.display = 'block';
    
    if (data.error) {
        alert(data.error);
    } else {
        const img = document.createElement('img');
        img.src = `data:image/png;base64,${data.image}`;
        imageContainer.appendChild(img);
    }
})

This is where we process the response from our backend API and update the UI accordingly. We will explore this in more detail in the next section.

Finally, we add a .catch() to handle any errors that might occur during the fetch operation:

.catch(error => {
    loadingMessage.style.display = 'none';
    generateButton.style.display = 'block';
    alert('Error generating image. Please try again.');
    console.error('Error:', error);
});

If an error occurs, we reset the UI (hide the loading message, show the generate button), display an error message to the user, and log the error to the console for debugging purposes.

Now that we have sent the request to our backend API, let's see how we handle the response.

After sending the request to our Spring Boot backend, we need to process the response and update our UI accordingly. This happens in the second .then() callback of our fetch operation:

.then(data => {
    loadingMessage.style.display = 'none';
    generateButton.style.display = 'block';
    
    if (data.error) {
        alert(data.error);
    } else {
        const img = document.createElement('img');
        img.src = `data:image/png;base64,${data.image}`;
        imageContainer.appendChild(img);
    }
})

First, we reset the UI to its normal state by hiding the loading message and showing the generate button:

loadingMessage.style.display = 'none';
generateButton.style.display = 'block';

Then, we check if the response contains an error message:

if (data.error) {
    alert(data.error);
}

If there is an error, we display it to the user using an alert.

If there is no error, we assume the response contains the generated image as a base64-encoded string:

else {
    const img = document.createElement('img');
    img.src = `data:image/png;base64,${data.image}`;
    imageContainer.appendChild(img);
}

Here, we:

1. Create a new img element using document.createElement('img').
2. Set its src attribute to a data URL that includes the base64-encoded image data from the response. The format data:image/png;base64,${data.image} tells the browser that this is a PNG image encoded in base64.
3. Append the image element to the imageContainer using imageContainer.appendChild(img).

Base64 encoding converts binary image data into a plain text format, which lets us embed the image directly into the HTML using a data: URI — avoiding additional file requests.

It's important to note that the frontend is working with a backend-normalized response. The Spring Boot application called the Gemini API's generateContent endpoint with gemini-3.1-flash-image, extracted the image bytes from the Gemini response, encoded them as base64, and placed them in the data.image field. The frontend never sees the raw Gemini response structure — it only sees the simplified JSON shape our backend provides.

This will display the generated image on the page, allowing the user to see the result of their prompt.

It is worth noting that we are using a data URL to display the image directly, rather than loading it from a separate URL. This is a common approach for small images or when you want to avoid making additional HTTP requests.

With this code in place, our application can now generate images based on user input and display them on the page. The user can enter a prompt, select an aspect ratio, click the "Generate Image" button, and see the resulting image appear below the form.

Congratulations! In this lesson, we have implemented the client-side functionality for our image generation web application. Let's review what we have accomplished:

1. We created a JavaScript file to handle the client-side logic of our application.
2. We implemented the openTab() function to allow users to switch between tabs.
3. We built the generateImage() function to capture user input, validate it, and send it to our Spring Boot backend.
4. We used the Fetch API to make asynchronous requests to our Spring Boot server — which internally calls the official Gemini API using gemini-3.1-flash-image to generate images.
5. We processed the backend-normalized responses and updated the UI to display the generated images.

Our application now has a functional user interface that allows users to generate images based on their input. However, there is still room for improvement. In the next lesson, we will enhance our application by adding more robust loading states and error handling, as well as implementing the functionality to view previously generated images in the history tab.

In the practice exercises that follow this lesson, you will have the opportunity to experiment with the JavaScript code we have written. You might try modifying the validation logic, adding additional features, or improving the error handling. These exercises will help reinforce your understanding of the concepts we've covered and give you hands-on experience with client-side JavaScript development.

Remember, JavaScript is a powerful language that can greatly enhance the user experience of your web applications. The skills you are learning in this course will be valuable not only for this specific project but for many other web development tasks you might encounter in the future.