Adding a Story History Tab and API Endpoint with FastAPI

Welcome to this lesson on adding a history tab to your AI Short Story Generator web application. In previous lessons, you set up the basic HTML structure, styled the interface, and implemented user input handling and API calls. Now, you will enhance your application by allowing users to view previously generated stories through a dedicated history tab. This feature will improve the user experience by making it easy to revisit and review past stories, and will lay the groundwork for more advanced features in the future.

To begin, let's update the index.html file to include the necessary UI elements for the history tab. This will allow users to load and view previously generated stories.

First, add a button for "Load Previous Stories." This button will trigger the function to fetch the story history. Here's how you can add it:

<button id="history-button" onclick="fetchHistory()">Load Previous Stories</button>

Next, include a paragraph element for the loading message. This message will be displayed while the stories are being fetched:

<p id="history-loading-message" style="display: none;">Loading history... Please wait.</p>

When working with web applications that make API calls, it's crucial to provide users with clear feedback about what's happening behind the scenes. Without proper loading indicators, users might wonder if their action was registered or if the application is frozen. Similarly, without proper error handling, users might be left confused when something goes wrong.

Finally, add an empty div for the story history container. This is where the fetched stories will be displayed:

<div id="history-container"></div>

By setting the correct element IDs (history-button, history-loading-message, history-container), you ensure that these elements can be easily accessed and manipulated using JavaScript.

Now, let's create and initialize the fetchHistory() function in app/static/script.js. This function will handle the process of fetching and displaying the story history.

Start by retrieving the DOM elements for the loading message, button, and container using their IDs:

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

Next, update the UI to show the loading message and hide the button. This provides immediate feedback to the user that the application is processing their request:

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

By clearing the container's content, you ensure that any previous stories are removed before new data is loaded.