Page Section Regeneration.

Introduction

Now that pages can be generated with the most important features implemented, there was another step needed to make these pages more flexible and user friendly. As an end user, you want to be able to change certain parts of the page because it won't always be exactly as you want it the first try. To address this issue, I implemented a section regenerate feature. This feature allows users to update and modify specific sections of the generated page without having to start from scratch. By making the pages more customizable, users can get a final product that better meets their needs and preferences.

Abstract

To implement this feature, I added more system prompts to the AI, using the research on AI Prompting that I had done previously. These prompts help the AI to split the pages it generates into sections, each with a descriptive ID.

With this structure in place, I could then identify these sections within the generated HTML on the frontend and interact with them using their unique IDs. I also added an edit mode option to the tool that becomes available once a page is generated. In this mode, users can select a section inside the iFrame. I designed it so that the selected section lights up, making it clear to the user which part of the page is currently selected.

Once a section is selected, users can enter a new prompt describing the changes they would like to make to that specific section. This allows for targeted modifications, which makes the tool more flexible.

Demo

Conclusion

This section regenerate feature allows users to further iterate on a generated page by making changes using prompts. This added functionality gives end users more flexibility, as they can finetune specific sections without having to regenerate the entire page. By giving this level of customization, the tool becomes more useful and adaptable to the needs of users/companies.