Stable Diffusion

Overview

This is an intuitive application leveraging the power of AI through Stability.ai's Stable Diffusion API to transform textual descriptions into compelling images. Our application is designed for creatives, developers, and anyone in between who is interested in exploring the boundaries of AI-generated art.

Features

Text-to-Image Transformation:

• Utilize cutting-edge AI to generate images from text prompts. Simply type in a description and let the AI bring your vision to life.

Image Gallery:

• View a curated gallery of images generated by the Stable Diffusion API. Get inspired by the possibilities of AI-assisted art creation.

Generation History:

• Keep track of your creative journey with a comprehensive history of your generated images. Revisit your past prompts and their resulting images anytime.

Sample Creations:

• Explore a collection of sample creations to see what our app is capable of. These samples provide a glimpse into the diverse range of styles and concepts that the Stable Diffusion API can realize.

Technology Stack

Frontend: React.js

React.js is a declarative, efficient, and flexible JavaScript library for building user interfaces, enabling the creation of complex interactive UIs from isolated pieces of code called components.

Backend: Node.js

Node.js is an event-driven, non-blocking I/O model built on Chrome's V8 JavaScript engine, ideal for building scalable network applications. It enables JavaScript use on the server-side, unifying web application development around a single programming language, rather than different languages for server and client-side scripts.

Database: MongoDB

MongoDB is a powerful, flexible, and scalable NoSQL database favored for its high performance, availability, and scalability. It uses a document-oriented data model and enables rapid development with its schema-less structure, making it a popular choice for modern web applications and big data solutions.

High Level Design

Working

User Interaction

Frontend Interaction: Users interact with the application through a React.js-based frontend, designed for a seamless and engaging user experience. By entering text prompts into the interface, users can effortlessly initiate the process of generating images via the Stable Diffusion AI. The platform also provides features for users to view their past image generations and explore sample creations for inspiration, all within a user-friendly and responsive environment.

System Operations

Backend Communication: User requests for generating images or retrieving historical data are handled by a Node.js backend. This setup ensures efficient processing of asynchronous operations, such as calling the Stable Diffusion API and managing user-generated content. Node.js's non-blocking I/O model facilitates quick responses to user requests, maintaining a fluid interaction within the application.

Data Management and Responses

Database Interactions: User prompts, generated images, and related metadata are stored in a MongoDB database, taking advantage of its flexible schema and efficient handling of large volumes of unstructured data. This setup supports dynamic content creation and retrieval, enabling users to save and revisit their generated images and prompts.

Response Handling: Upon processing a user's request to generate an image or access historical data, the backend formulates a response that is conveyed back to the frontend. The React.js interface then dynamically updates to display the newly generated images or historical content. This process ensures that users receive immediate feedback on their actions, allowing for an interactive and productive session with the application.

Getting Started

Acquiring a Stability.ai API Key

To use the Stable Diffusion feature of our application, you'll need to obtain an API key from Stability.ai. Follow these steps to get started:

• Sign Up: Visit the Stability.ai Developer Portal and sign up for an account if you haven't already.
• Generate API Key: Once logged in, navigate to the API section and follow the instructions to generate a new API key for Stable Diffusion.

Configuring Your API Key in the Application

After obtaining your API key, you need to set it up in the application to start generating images. Follow these steps for configuration:

• Create a .env File: In the root directory of the application, create a file named .env. This file will store your API key securely.

• Add API Key to .env File: Open the .env file and add the following line, replacing your_api_key_here with the API key you obtained from Stability.ai:

API_KEY=your_api_key_here

• Example Configuration: For your reference, an example .env file configuration is provided in .env.example located in the root directory. This example illustrates how to properly format your .env file.

By following these configuration steps, you'll enable the application to communicate with Stability.ai's Stable Diffusion API using your API key.

Installation

Prerequisites

• Docker

Run locally:

git clone https://github.com/devzero-inc/stable-diffusion.git
cd stable-diffusion
docker compose up

App will be running on PORT:4173 -> http://localhost:4173/

Now just go to http://localhost:4173/ and explore the application.