AI Tattoo Generator: App Development Use Case for AI Engineers

I strongly believe that there is still so much potential in generative AI that is untapped, even in this oversatured market where AI is added to everything. This potential can be realized more by individuals or very small teams focussing on very niche problems. I feel that besides problems to solve we can use gen AI in entertaining ways that are just for fun. Individuals have more unique perspectives than teams and now with tools such as chatGPT one person can build a full app.

This article is for experts in AI/data that lack the conventional software engineering skills. The reader might be very skilled in Python or R, build MLOps pipelines, trains models and has deep knowledge of how LLMs (and other transformers/ML methods) work. But the reader might lack the experience of building full apps with a front/back end. This article is for you! I believe that the people with the deepest AI knowledge have the most potential to build AI apps where AI is used in the most interesting ways. The use case in this article is a simple ‘ai tattoo generator’. Not unique at all, but it shows all the elements to build a full application. For a more unique app I made check my AI tarot card reader.

Defining our goals

So you’re an AI engineer who wants to build an app, where to start? Let’s get our goals straight first. I will describe how to build an advanced ‘POC’. One that has account login, payment system and runs on a server in the cloud so users can visit it on the web. Scalling it for use by many 1000s of users will require changes, but those are good issues to have down the line.

These topics will be discussed to show what is needed for a full working app (POC):

• code management (Github)
• code deployment (Github pages, Vercel, Firebase)
• front end (Javascript, React)
• Account management (Google auth)
• Payment system (Stripe integration)

Code Management

Regardless how you choose to deploy your app, Github is not suprisingly a great way for code management. In this article I use Firebase for code deployment but both Github Pages and Vercel have ways to deploy code from a Github repo. Therefore Github is great is most situations.

My AI tattoo gen code is open source so feel free to make a branch and play around with it. It could serve as a good start, although you would have to begin with adjusting the Firebase code (see the Firebase chapter in this article on how to do this).

defreeze/AItattoogen: another ai tattoo generator (github.com)

Code Deployment

Github pages

There are many ways to deploy code, here are three easy and common methods. The first one being Github pages which works well for single page apps. It does not support account management so I would only advice it for portfolio websites or basic non-interactive POCs. Learn more HERE.

Vercel

Vercel is a great way to host your app. It is very convenient, free like all other options mentioned and scallable. If you do not need account management then i would advice Vercel as it is most flexible and easy to use. For an easy roll out of account management with account database it is more limited. I feel everything is possible using Vercel but the last option in our list Firebase makes certain steps a little easier.

Firebase

Firebase is the most complex option on our list but also with the most features. For account management with Google login this is what I’ve found to be the best method. It also scales quite well as Google has made Firebase in such a way it is free until you gain some traction and need a bigger account database (more than 100). Very user friendly altough the learning curve is the greatest for Firebase compared to Github pages and Vercel.

Adjust the AItattoogen Firebase code

Making a clone of my AItattoogen repo is step 1. Step 2 is creating a Firebase project. Step 3 is adjusting the code in the repo to connect to your Firebase project (as the code is connected to my firebase project). Here are the files that need changing.

.firebaserc: change the name of the project in this file to the name of your firebase project. This file exists in the root directory and in public/src.

{
  "projects": {
    "default": "aitattoogen"
  },
  "targets": {},
  "etags": {
    "aitattoogen": {
      "extensionInstances": {}
    }
  }
}

Firebase.Config: this file is in public/src. This is the core file that makes the connection with Firebase. ALl the required information can be found in your Firebase project such as the api key, authdomain and url. If there are any issues this file is likely the cause.

// Import the functions you need from the SDKs you need
import { initializeApp } from "firebase/app";
import { getAnalytics } from "firebase/analytics";
import { getAuth } from "firebase/auth"; // Import for Firebase Authentication

// Your web app's Firebase configuration
// For Firebase JS SDK v7.20.0 and later, measurementId is optional
const firebaseConfig = {
    apiKey: "AIzaSyA0X83dY3qtestesttesttbl5kiqxoz64x4",
    authDomain: "aitattoogen.firebaseapp.com",
    databaseURL: "https://aitattoogen-default-rtdb.europe-west1.firebasedatabase.app",
    projectId: "aitattoogen",
    storageBucket: "aitattoogen.appspot.com",
    messagingSenderId: "664405830740",
    appId: "1:66440ttt0740:web:3fd7bcc7fteeee492d91c1",
    measurementId: "G-J0ttttM44N"
  };

// Initialize Firebase
const app = initializeApp(firebaseConfig);
const analytics = getAnalytics(app);

// Initialize Firebase Authentication and export it
const auth = getAuth(app);
export { auth, app, analytics };

Front End Development

I will not go into detail about this, feel free to check the repo itself. This is the part that will require your own input to build a new app. Good luck with that! In this app I’ve used Javascript and React so here is an introduction of that.

JavaScript is a versatile scripting language that powers the dynamic behavior on most websites. It interacts with HTML and CSS to manipulate web content, making it interactive. Before diving into React, a solid understanding of JavaScript, including ES6 features like classes, modules, arrow functions, and promises, is crucial. Understanding asynchronous JavaScript (like using async/await) and handling API calls are also essential skills for modern web development.

React introduces a component-based architecture, which means the UI is broken down into individual components. Each component has its own logic and controls a part of the user interface. React uses a declarative approach, making it simpler to reason about your app and aim for efficient updates and rendering with its virtual DOM.

Account Management

Setting Up Firebase and Google Authentication: First, you need to set up Firebase in your project. Begin by creating a Firebase project through the Firebase Console. Once the project is created, register your application in the console and obtain the Firebase configuration keys which include API key, Auth domain, etc. Install Firebase in your React project by running npm install firebase. Then, initialize Firebase within your React application using these configuration keys. You can place the initialization logic in a separate module (e.g., firebase-config.js) to keep your application organized.

In the Firebase console, enable Google Authentication under the Authentication section. This involves setting up a consent screen and configuring OAuth 2.0 client IDs. Once Google Authentication is enabled, you can integrate it into your React application.

Implementing Authentication in React: In your React app, use Firebase’s authentication API to integrate Google sign-in. This typically involves setting up a sign-in method that invokes Firebase’s signInWithPopup or signInWithRedirect methods using GoogleAuthProvider. For example, you could create a “Sign in with Google” button that, when clicked, triggers one of these methods. Firebase handles the authentication flow, including the popup window for Google login.

To handle user sessions, listen to authentication state changes using Firebase’s onAuthStateChanged listener. This method helps in managing user sessions by automatically detecting the user’s sign-in state across pages. Implement this in a central component (like App.js) to check if a user is logged in and render UI elements accordingly.

By integrating Google Authentication via Firebase, your application benefits from a robust, secure authentication system managed by Google, simplifying user login processes and enhancing user management without the need to handle login data and passwords directly.

Payment system

To integrate Stripe with your JavaScript React application, you’ll start by setting up Stripe on both the frontend and backend of your application. On the frontend, begin by installing Stripe’s JavaScript library and the React-specific wrapper. You can do this by running npm install @stripe/stripe-js @stripe/react-stripe-js in your project directory. Once installed, import the necessary components from these libraries into your React components. Key components include Elements, which wraps your application’s payment components, and CardElement, which provides a ready-made input field for card details.

For the backend integration, set up a server that can handle Stripe’s payment processing. Use official Stripe libraries (for Node.js, you can install it using npm install stripe) to communicate with Stripe’s API. Create routes that handle API calls for payment intents, which involve creating and confirming payments based on user interactions on the frontend. Ensure to handle the secret keys securely and set up environment variables for them. Once your backend is ready, connect it with the frontend by making API calls to these routes from your React application to process payments. This setup not only helps in processing payments securely but also leverages Stripe’s robust features like fraud detection, card authentication, and more.

🐈 <- free cat for the person that scrolled this far 😉