Frontend
The Alchemist frontend is built using React and TypeScript. It leverages Tailwind CSS for styling and Next.js for server-side rendering and routing, ensuring fast loading times.
The application is designed to provide a seamless user experience with a clean, responsive design and user feedback for every step of the image generation process.
Upon visiting the site, the user is greeted by a textbox to enter a prompt and a generate (✨) button. We allow the user to adjust model settings if they would like to override the recommended options but most of the time this should not be necessary, the user can simply enter a prompt, click generate and receive a high quality result.
Upon clicking the generate button, the user will be redirected to the playground page where a they can view the status of their image being generated and create more prompts while waiting. A queue is displayed on the left of the screen to easily keep track of all currently generating images.
If the user wants to view all the images they have generated this session, they can do so by clicking the "history" 🕛 at the top right of the page. To see all generated images they can navigate to the gallery page. There is also an explore page where one can see all user creations.
The metadata for each image is viewable by clicking the ℹ️ button, displaying information such as the original and optimized prompt, as well as workflow settings. There is also a button to download the image.
Last updated