HTML Viewer.

Introduction

With the HTML generation functionality completed, my next goal was to make the generated HTML text visible directly inside the tool. Up until now the system could produce the HTML text based on user prompts, but I wanted users to be able to see the actual HTML page being created in real time. This meant taking the raw HTML text and rendering it within the tool itself so users could visually see the outcome of their inputs right away.

Abstract

I began this phase by further developing the user interface. Using the designs I had created earlier, I focused on keeping a simple yet effective layout. I kept the functionalities limited to only the most important components for this prototype: an input bar, a generate button, and the HTML viewer positioned at the top.

With the layout set, the next step was to implement the functionality to view the HTML text as actual HTML. To do this I used an iframe, which is an inline frame that allows one HTML document to be embedded within another. This feature was perfect for my needs because it allowed me to display HTML content inside the tool's interface.

One of the most exciting aspects of this setup was that the HTML being streamed to the tool would build up gradually. Users could watch the web page being build in real time rather than waiting for a loading bar or spinner to complete. This building process made the tool more engaging and also gives immediate feedback to users.

Demo

Conclusion

This development was a good and important step as it allowed users to view the generated HTML in real time. By embedding the HTML within an iframe, users could see their web pages being build right before their eyes. This improvement made the tool more interactive and user friendly.