FastHTML + AI: Building a Revenue-Ready Application from Scratch

fasthtml
htmx
Author

Alex Kelly

Published

November 11, 2024

Introduction

The SafeFast Virtual Tours web app offers an immersive, AI-powered experience that transports you back to ancient Rome through interactive virtual tours. Using a credit-based system, you can generate realistic images of Roman emperors, gladiators, citizens, and iconic scenes, gaining a visual glimpse into Roman life with a twist. The twist is that each of the characters mentioned are pictures of me (Alex Kelly) as that character. The app is designed with secure, password-free authentication, easy credit purchases through Stripe, and image generation powered by the Replicate API. SafeFast Virtual Tours combines education and technology, bringing history to life for an engaging and educational exploration of ancient Rome.

Support Material

The aim of this app is to demonstrate how to create generative AI applications, process payments, and maintain a history of transactions and generate images from text. The app is a fork of Jonathan Witaker from Answer.AI. FastHTML is a new framework for building HTML applications designed to be fast and easy, written in pure Python. You can read more here in my previous post. I have created a companion YouTube video to explain how I built it and to help you understand how to build your own generative AI apps using these services. Creating the video, blog post, and code repository forces me to understand, reflect, and improve my communication skills. Take a look at the video and let me know what you think of the project.

The video first walks you through the app and how it works, then it goes through the code flicking between the code and the app to gain a good understanding of how the code relates to the web app. If you have any questions, let me know on X.

The GitHub repository is here so you can recreate the app and modify it for your own needs.

Key Features

1. User Authentication with Magic Links To streamline the login process and enhance security, the app uses email-based magic links for user authentication. This password-less method ensures that users can easily access their accounts without the hassle of remembering passwords. The Resend API is utilized to send these magic link emails, making the authentication process seamless and efficient.

2. Credit System for Image Generation The app incorporates a credit-based system where users spend credits to generate AI-powered images of ancient Rome. Each image generation costs one credit, encouraging users to manage their credits wisely. Users can purchase additional credits through an integrated payment system, ensuring they can continue exploring the virtual tours without interruption.

3. Secure Payment Processing with Stripe To handle transactions securely, the app integrates Stripe for payment processing. Users can buy credits by selecting the desired amount, and Stripe manages the checkout process. This integration includes handling checkout sessions, processing payments, and managing success or cancellation flows, all while ensuring user data remains secure.

4. AI Image Generation Using Replicate API At the heart of the virtual tours is the AI image generation feature powered by the Replicate API. Users select from predefined prompts related to ancient Rome, such as “Emperors,” “Gladiators,” or “Citizens,” and the app generates corresponding images. The image generation runs in separate threads to ensure the app remains responsive, and users receive real-time previews of their requested images.

5. Responsive and Interactive User Interface The app’s front-end is designed with user experience in mind. Utilizing Tailwind CSS , DaisyUI , and FrankenUI , the interface is both responsive and visually appealing. The navigation bar provides easy access to different sections of the app, and forms are styled for clarity and ease of use. HTMX is employed for dynamic content updates, allowing users to see balance updates and image previews without full page reloads.

6. Session Management and Data Persistence User sessions are managed to maintain authentication states and associate image generations with the correct users. The app uses SQLite databases to store user information and generation records. Data classes define the structure for users and generations, ensuring consistency and reliability in data handling.

8. Asynchronous Operations for Improved Performance To prevent the main application thread from blocking during image generation, the app leverages multithreading . The generate_and_save function runs in a separate thread, allowing users to continue interacting with the app while their images are being processed. This approach enhances the overall performance and user experience.

Conclusion

I learned a lot from this app. Here are some of the key takeaways:

  • Secure Payments with Stripe Implementing secure payment processing turned out to be less daunting than anticipated. Stripe’s intuitive API made it straightforward to integrate payment functionality, demonstrating that secure payments are both accessible and efficient to set up.

  • Replicate for AI Image Generation I used Replicate to generate images and employed multithreading to maintain app responsiveness. Replicate’s wizard-like interface simplifies the fine-tuning process, enabling quick acclimation and the ability to achieve impressive results in a short time frame, even without extensive prior knowledge of diffusion models.

  • Session Management and Data Storage with SQLite I implemented session management and utilized SQLite to store user information and generation records within a web app. The ease with which I could set up and maintain the database was a pleasant surprise, highlighting SQLite’s effectiveness for such applications.

  • Deployment Using Railway Deploying the app with Railway was a first for me, and the experience was smooth and cost-effective. Leveraging Railway’s free tier allowed me to host the app with its own domain at no financial cost, requiring only my investment of time. I’ll be using railway more in the future for my projects.

  • Advancing Skills in HTMX and FastHTML This project provided an opportunity to further develop my proficiency with HTMX and FastHTML. Enhancing these skills contributed significantly to the app’s dynamic user interface and overall performance.

Overall, it was a great project, and I learned a lot from it. I hope to use these skills in the future to build more applications.