HTML Generation.

Introduction

Now that I could connect to my Azure deployments, I was ready to get started on creating a very simplified version of the tool. This first version would be basic and only have an input and generate a response in the form of a simple page HTML. My goal was to get a base so I could get a feel for how the system would function and make sure that the connection to Azure was working well. By starting simple, I could find and troubleshoot any issues early on before adding more features.

Abstract

I began by creating a simple and straightforward page that has an input field and a submit button. You could type a prompt into the input field and click the button to send the input to the AI. I had defined a set of instructions for the AI which helped the AI on how to handle the input and what to return. When the user submitted their input, the AI would process it according to these prompts and generate a response that would be displayed below the input field.

This is the set of instructions I gave the AI as system prompts   For the initial setup the system prompts were designed to return only the body of the HTML. This was intentional because it allowed me to focus on the core functionality without worrying about the full HTML structure. By using an iframe, I could later convert the text of the HTML into actual HTML. At this stage, displaying just the text of the HTML was enough for my needs and helped me confirm that the AI was generating the correct content.

Demo

Conclusion

With this prototype I now had a basic tool that could generate HTML based on a prompt describing the desired page. This base allowed me to further add features and improvements. I could now work on improving the tool by adding HTML styling, embedding images, and other functionalities that would make the generated pages better looking and useful.