Imagen

Say hello to your creative side!
View Project »

Report Bug • Request Feature

Ever wanted to create a picture just by describing it? That's what Imagen does. Just type out your idea, and DALL-E will generate an image for you. If you're drawing a blank, don't worry – you can use our intelligent prompt suggestions to get some inspiration and see what you can create.

The diagram below illustrates the high-level architecture of the Imagen application.

graph TD
    User --> Frontend[Next.js Frontend];
    Frontend -- "API Requests" --> Backend[Azure Functions];
    Backend -- "Rate Limiting & Caching" --> Redis[Upstash Redis];
    Backend -- "AI Models (DALL-E & GPT)" --> OpenAI[OpenAI API];
    Backend -- "Image Upload" --> Storage[Azure Blob Storage];
    Storage -- "Serves Images" --> Frontend;

    style Frontend fill:#F5F5F5,color:#000,stroke:#333,stroke-width:2px;
    style Backend fill:#3CCBF4,color:#000,stroke:#333,stroke-width:2px;
    style Redis fill:#00E9A3,color:#000,stroke:#333,stroke-width:2px;
    style OpenAI fill:#74AA9C,color:#000,stroke:#333,stroke-width:2px;
    style Storage fill:#3CCBF4,color:#000,stroke:#333,stroke-width:2px;

This project is split into two main parts: a Next.js frontend and an Azure Functions backend. Follow these steps to get both services running on your local machine.

This setup requires:

• Node.js v20.14.0+
• Visual Studio Code
• Azure Functions Core Tools v4+ (can be installed via npm install -g azure-functions-core-tools@4)
• Azure Functions for VS Code extension
• An active Azure account (a free account is sufficient)

First, clone the repository to your local machine:

git clone https://github.com/nabarvn/imagen.git
cd imagen

The backend is powered by Azure Functions. We will use the VS Code extension to create the necessary cloud resources and configure our local environment.

1. Sign in to Azure: Open the project in VS Code. Use the command palette (Cmd+Shift+P or Ctrl+Shift+P) to run the Azure: Sign In command and follow the prompts.

2. Create Azure Resources:

   • In the VS Code command palette, run Azure Functions: Create Function App in Azure....
   • The extension will guide you. Choose a unique name, select Node.js 20 as the runtime, and pick a geographical region.
   • Crucially, when prompted, choose to + Create new storage account and + Create new resource group. This ensures everything is linked automatically.

3. Download Cloud Settings:

   • Once the Function App is created, find it in the Azure extension sidebar under your subscription.
   • Expand its tree, right-click on Application Settings, and select Download Remote Settings....
   • This will automatically create a local.settings.json file inside the /azure directory, pre-populated with the necessary connection string for your storage account.

4. Add API Keys: Open the newly created azure/local.settings.json file. You need to add the following keys to the Values object.

The frontend needs to connect to your local backend and know the hostname of your Azure Storage Account to display the generated images.

1. Create Environment File: In the root of the project, create a local environment file by copying the example.

   cp .env.example .env

2. Configure Storage Hostname:

   • Open the newly created .env file.
   • In the AZURE_STORAGE_HOSTNAME variable, replace the placeholder <your-storage-account-name> with the actual name of the Storage Account you created earlier.
   • You can find your Storage Account name in the VS Code Azure extension sidebar.

You will need two separate terminals to install dependencies for both the frontend and backend.

• Terminal 1 (Root Directory): Install frontend dependencies.

  npm install

• Terminal 2 (azure Directory): Install backend dependencies.

  cd azure
  npm install

• Terminal 1 (Root Directory): Start the frontend.

  npm run dev

• Terminal 2 (azure Directory): Start the backend.

  npm start

Once the services are running, you can access them at the following URLs:

• Frontend: http://localhost:3000
• Backend: http://localhost:7071

Once you have tested the application locally, you can deploy the backend to Azure.

1. In VS Code, right-click the azure project folder.
2. Select Deploy to Function App....
3. Choose the Function App you created during the setup process.
4. A prompt should appear asking if you want to upload your settings. Click Upload to synchronize the API keys from your local.settings.json file to the cloud. This is a critical step.

Your API is now live! The frontend, when deployed to a service like Vercel, will need its FUNCTION_APP_URL environment variable updated to point to your new Azure Function App URL.

You can manage the Redis database from your host machine by running the following commands from the azure directory:

• Clear usage keys:

  npm run clear-redis:usage

• Clear rate limiting keys:

  npm run clear-redis:rate

• Clear all keys from the database:

  npm run clear-redis:all

• Language: TypeScript
• Framework: Next.js
• Styling: Tailwind CSS
• Data Fetching: SWR
• Identification: FingerprintJS
• Deployment: Vercel

• Language: TypeScript
• Serverless Compute: Azure Functions
• Blob Storage: Azure Blob Storage
• Rate Limiting: Upstash Redis
• Usage Tracking: Upstash Redis
• LLM Provider: OpenAI
• Image Processing: Sharp