Neural Style Transfer (NST) Web Application

A full-stack, AI-powered web application that allows users to apply neural style transfer to their images. It consists of a robust Next.js frontend and a scalable FastAPI backend that delegates heavy machine learning processing to Celery workers.

Live Application: https://www.neuralart.app/

Tech Stack

Frontend

• Framework: Next.js 16 (App Router)
• Library: React 19
• Styling: Tailwind CSS v4
• Language: TypeScript
• Package Manager: pnpm

Backend

• API Framework: FastAPI
• Machine Learning: TensorFlow & TensorFlow Hub
• Task Queue: Celery with Redis broker
• Database: PostgreSQL (with SQLModel for ORM)
• Authentication: PyJWT, Argon2 (Password Hashing)

Infrastructure

• ** Docker & Docker Compose (Containerization)
• ** Nginx (Reverse Proxy & Max Body Size configuration for large uploads)
• ** DigitalOcean Droplet (Hosting)
• ** DigitalOcean Spaces (Object Storage / CDN)

Features

• Neural Style Transfer: Process content images with style images using pre-trained deep learning models.
• Asynchronous Processing: Heavy ML tasks run in the background using Celery workers, ensuring the API stays fast and responsive.
• Authentication System: Secure JWT-based user authentication and authorization.
• Database Persistence: Stores user details and job statuses securely in PostgreSQL.

Getting Started

Prerequisites

• Docker and Docker Compose
• Node.js (v20+)
• pnpm

Environment Variables

Before running the application, you need to configure the environment variables for both the backend and frontend.

Backend

Create a .env file in the backend/ directory with the following variables:

# Authentication
SECRET_KEY=
ALGORITHM=
ACCESS_TOKEN_EXPIRE_MINUTES=

# CORS / Frontend connection
FRONTEND_URL=

# PostgreSQL Database Configuration
POSTGRES_USER=
POSTGRES_PASSWORD=
POSTGRES_DB=
DATABASE_URL=

# Redis Broker Configuration
REDIS_URL=

# S3 Compatible Object Storage (e.g., DigitalOcean Spaces, AWS S3)
# Note: You MUST have an S3 compatible storage bucket to handle image uploads and processed results.
DO_SPACE_NAME=
DO_SPACE_REGION=
DO_ACCESS_KEY=
DO_SECRET_KEY=

Frontend

Create a .env.local file in the frontend/ directory with the following variables:

# URL where your FastAPI backend is running
NEXT_PUBLIC_API_URL=

Running the Application

1. Start the Backend (API, Database, Redis, Celery Worker)

The backend is fully dockerized for easy setup. First, navigate to the backend directory:

cd backend

Create a .env file from any example templates provided, or ensure you have valid POSTGRES and API configuration variables. Then, build and start the containers:

docker-compose up --build

This will start:

• FastAPI Web Server on http://localhost:8000
• PostgreSQL Database (nst_db)
• Redis Broker (nst_redis)
• Celery Task Worker (nst_worker)

You can check the API documentation by visiting http://localhost:8000/docs once running.

2. Start the Frontend

In a new terminal, navigate to the frontend directory:

cd frontend

Install the dependencies:

pnpm install

Start the Next.js development server:

pnpm dev

The frontend will become available at http://localhost:3000.

Project Structure

NST/
├── backend/
│   ├── app/                # FastAPI application (routers, auth, db models)
│   ├── ml_engine/          # Neural Style Transfer scripts & model logic
│   ├── celery_worker.py    # Celery worker configuration
│   ├── docker-compose.yml  # Container orchestration
│   ├── requirements.txt    # Python dependencies
│   └── Dockerfile          # Backend build instructions
└── frontend/
    ├── src/                # Next.js Source (components, app layout)
    ├── public/             # Static assets
    ├── package.json        # Node dependencies and scripts
    └── tailwind.config.ts  # Tailwind specifications