Implementing User History

Welcome to the fourth lesson in building an image generation web application with Laravel!

In our previous lesson, we implemented the core JavaScript functionality for our application, including tab navigation and the image generation process. We also introduced basic loading states and error handling for the image generation feature.

In this lesson, we will build upon that foundation to create a more comprehensive user experience by focusing on the history tab functionality. We will implement loading states and error handling specifically for the retrieval and display of previously generated images.

When working with web applications that make API calls, it is crucial to provide users with clear feedback regarding what is happening behind the scenes.

Without proper loading indicators, users might wonder whether their actions were registered or if the application has frozen. Similarly, without proper error handling, users might be left confused when something goes wrong.

We have already seen how loading states and error handling work in our generateImage() function. Now, we will apply similar principles to our history feature, ensuring a consistent and user-friendly experience throughout the application.

Our application has two main tabs: one for generating images and another for viewing previously generated images. In this lesson, we focus on implementing the functionality for the history tab, which allows users to retrieve and view their image generation history.

Let's get started by implementing the fetchHistory() function, which handles the retrieval of image history from our backend API.

Now that we understand the importance of providing feedback during API operations, let's implement the fetchHistory() function, which retrieves the user's image generation history from our backend API.

This function is called when the user clicks the "Load Previous Images" button in the history tab. It sends a request to our backend API, retrieves the list of previously generated images, and displays them in the history container.

Here's the implementation of the fetchHistory() function:

function fetchHistory() {
    const historyLoadingMessage = document.getElementById('history-loading-message');
    const historyButton = document.getElementById('history-button');
    const historyContainer = document.getElementById('history-container');

    historyLoadingMessage.style.display = 'block';
    historyButton.style.display = 'none';
    historyContainer.innerHTML = '';

    fetch('/api/get_images')
    .then(response => response.json())
    .then(data => {
        historyLoadingMessage.style.display = 'none';
        historyButton.style.display = 'block';

        if (data.images.length === 0) {
            historyContainer.innerHTML = '<p>No images found.</p>';
            return;
        }

        data.images.forEach(image => {
            const img = document.createElement('img');
            img.src = `data:${image.mime_type};base64,${image.image_base64}`;
            historyContainer.appendChild(img);
        });
    })
    .catch(error => {
        historyLoadingMessage.style.display = 'none';
        historyButton.style.display = 'block';
        alert('Error fetching image history. Please try again.');
        console.error('Error:', error);
    });
}

Let's break down this function step by step:

Before we implement the fetchHistory() function, we need to make a small update to the History tab in our Blade template.

In earlier lessons, the History tab only included:

• a heading,
• a button to load previous images,
• and a container for displaying results.

Now that we want to add a proper loading state, our JavaScript needs to reference two specific elements:

• the history button,
• and a loading message for the history request.

To make that possible, update the History tab markup in resources/views/index.blade.php like this:

<div id="history" class="tab-content" style="display:none;">
    <div class="container">
        <h1>Image History</h1>
        <button id="history-button" onclick="fetchHistory()">Load Previous Images</button>
        <p id="history-loading-message" style="display: none;">Loading history... Please wait.</p>
        <div id="history-container"></div>
    </div>
</div>

This adds two important IDs:

• id="history-button" on the button
• id="history-loading-message" on the loading paragraph

These IDs allow our JavaScript to show feedback while the history is being retrieved.

Now that the History tab includes the required elements, we can safely retrieve them in JavaScript.

Inside fetchHistory(), we begin by selecting the elements we need to control during the request:

const historyLoadingMessage = document.getElementById('history-loading-message');
const historyButton = document.getElementById('history-button');
const historyContainer = document.getElementById('history-container');

Here is what each reference is used for:

• historyLoadingMessage refers to the paragraph that appears while the history is loading.
• historyButton refers to the Load Previous Images button.
• historyContainer refers to the area where previously generated images will be displayed.

By storing these elements in variables, we can easily update the interface while the API request is in progress.

We update the UI to show that the history retrieval is in progress:

historyLoadingMessage.style.display = 'block';
historyButton.style.display = 'none';
historyContainer.innerHTML = '';

This gives users immediate feedback by:

• showing the loading message,
• hiding the button temporarily,
• and clearing any old history results before new ones are loaded.

Next, we send a GET request to our backend API to retrieve the image history:

fetch('/api/get_images')
.then(response => response.json())

Unlike the image generation function, which sends a POST request with user input, this function sends a simple GET request to the /api/get_images endpoint. We expect the response to be a JSON object containing an array of image data, where each entry includes the base64-encoded image data and its MIME type as returned by the Gemini-powered backend.

Once we receive and parse the response, we update the UI based on the data received:

.then(data => {
    historyLoadingMessage.style.display = 'none';
    historyButton.style.display = 'block';

    if (data.images.length === 0) {
        historyContainer.innerHTML = '<p>No images found.</p>';
        return;
    }

    data.images.forEach(image => {
        const img = document.createElement('img');
        img.src = `data:${image.mime_type};base64,${image.image_base64}`;
        historyContainer.appendChild(img);
    });
})

Notice that instead of hardcoding image/png, we use the mime_type field returned by the backend alongside image_base64. Because the Gemini API can return images in different formats, reading the mime_type from the stored backend response ensures each image is rendered correctly, regardless of the format in which it was originally generated.

To ensure a smooth user experience, we handle errors as follows:

.catch(error => {
    historyLoadingMessage.style.display = 'none';
    historyButton.style.display = 'block';
    alert('Error fetching image history. Please try again.');
    console.error('Error:', error);
});

This resets the UI and shows a helpful message.

With this implementation, users see a loading message while their image history is being retrieved. If no images are found, they see a "No images found." message. If an error occurs during the fetch() operation, users receive an alert with an error message.

To test our implementation, follow these steps:

1. Ensure your Laravel application is running and that the /api/get_images endpoint is properly implemented to return a list of previously generated images from the Gemini-powered backend, ideally including both image_base64 and mime_type for each record.
2. Open your application in a web browser and navigate to the history tab by clicking the "View History" tab button.
3. Before testing the feature, make sure your History tab markup includes both id="history-button" and id="history-loading-message" so the JavaScript can control those elements correctly.
4. Click the "Load Previous Images" button to trigger the fetchHistory() function.
5. Observe the loading message that appears while the history is being retrieved.
6. Once the history is retrieved, observe the images displayed in the history container.
7. If there are no images, observe the "No images found." message.
8. To test error handling, you can temporarily modify your code to simulate an error, such as by changing the API endpoint URL to one that does not exist.

Now that we have implemented the fetchHistory() function with proper loading states and error handling, let's review what we have accomplished.

In this lesson, we built upon the foundation laid in the previous lesson to create a more comprehensive user experience for our image generation web application. We implemented the fetchHistory() function, which retrieves and displays the user's image generation history from our Gemini-powered backend. We also added proper loading states and error handling to ensure that users receive appropriate feedback during the history retrieval process. Importantly, we use the mime_type field stored alongside each image to construct the correct data URL, ensuring that Gemini-generated images are rendered accurately regardless of their format.

Remember that proper loading states and error handling are crucial for creating a good user experience in web applications. They provide feedback to users regarding background processes and help them understand and recover from errors.

In the practice exercises that follow this lesson, you will have the opportunity to experiment with the code we have written and further enhance the user experience of our application. You might try adding more sophisticated loading indicators, improving error messages, or implementing additional features such as pagination for the history view.

By mastering the concepts covered in this lesson, you will be well-equipped to create web applications that provide a smooth and user-friendly experience, even when dealing with asynchronous operations and potential errors.