Image Regeneration.

Introduction

At this stage of development users had the ability to regenerate sections of the webpage, but they couldn't regenerate images. When a user wanted to regenerate a section, the text in that section would change but the images would stay the same. During a stakeholder meeting one of the feedback was the ability to regenerate images as well. They believed that this feature would improve the overall user experience and allow for more customization, and I agreed. So I took this feedback and started to work on a solution that would allow users to regenerate images as well.

Abstract

To implement the new feature I needed to find a way to detect all the images within a generated page and create an overlay that users could interact with. For the iFrame I developed a function that scans for all the <img> tags inside the generated page. I did this using a React Portal which allows you to render elements into a DOM node that exists outside the regular DOM hierarchy of the parent component.

Once I had the image detection created, I made an overlay for the images. This overlay has a regenerate button and back and forward buttons, which allows users to switch between different generated images. The overlay made it easier for users to interact with the images and choose the ones they prefer.

Next I developed the logic for the front end and back end of the tool. The system works by taking the page prompt and, like the image generation process, it creates a new prompt specifically for the image AI. This prompt instructs the AI to generate new images based on the content of the section, which makes sure that the images match the context.

Demo

Conclusion

This new feature improved the flexibility for users to customize their pages. By allowing users to regenerate both text and images the tool became much more flexible and customizable. Stakeholders were also happy with the added functionality and I felt that the tool was now also better in meeting the needs of the end users.