ASCII Forge

A full-stack web application that transforms images into ASCII art with real-time customization and a retro terminal-inspired interface.

🔗 Live Demo: asciiforge.vercel.app

Features

• 15+ ASCII Libraries: Classic, Detailed, Blocks, Matrix, Cyberpunk, and more
• Real-time Controls: Width, brightness, gamma, and color inversion
• Terminal Aesthetic: Retro UI with monospace fonts and terminal colors
• Responsive Design: Works seamlessly on desktop and mobile
• API Health Monitoring: Visual status banners for backend connectivity
• Export Ready: Save your ASCII creations

How It Works

1. User uploads image via drag-and-drop or file picker
2. Image and settings sent to API as FormData
3. Backend processes using selected ASCII library
4. Generated ASCII art rendered in terminal-style preview
5. Real-time adjustments with instant regeneration

Architecture

Three-tier design with clear separation:

Image2Ascii/
├── src/
│   ├── Image2Ascii/       # Core conversion library
│   ├── Image2AsciiApi/    # ASP.NET Core Web API
│   └── Image2AsciiWeb/    # Angular frontend

• Core Library: Standalone image-to-ASCII conversion logic
• API: RESTful backend exposing conversion endpoints
• Frontend: Modern Angular SPA with reactive forms

Quick Start

Prerequisites

• .NET 8.0 SDK
• Node.js 18+
• npm 11.7+

Local Development

Backend:

cd src/Image2AsciiApi
dotnet run
# API runs on http://localhost:5071

Frontend:

cd src/Image2AsciiWeb
npm install
npm start
# App runs on http://localhost:4200

Deployment

• Frontend: Vercel - Always-on CDN delivery
• Backend: Render - Dockerized API service

The app intelligently handles API cold starts with status banners and health checks.

API Reference

Health Check

GET /health

Convert Image

POST /api/ascii
Content-Type: multipart/form-data

Parameters:

• image (file): Image to convert
• width (number): Character width
• brightness (number): -1.0 to 1.0
• gamma (number): 0.1 to 3.0
• asciiLibrary (string): Character set
• invert (boolean): Invert colors

Response:

{
  "ascii": "string"
}

CORS

Allowed origins:

• http://localhost:4200 (development)
• https://asciiforge.vercel.app (production)

Tech Stack

Layer	Technology
Backend	.NET 8.0, ASP.NET Core, SixLabors.ImageSharp
Frontend	Angular 21, TypeScript 5.9, RxJS, SCSS
Deployment	Docker, Vercel, Render

Building for Production

# Frontend
cd src/Image2AsciiWeb
npm run build
# Output: dist/Image2AsciiWeb/browser/

# Backend (Docker)
docker build -f src/Image2AsciiApi/Dockerfile -t ascii-api .

Contributing

This is a portfolio project, but feedback and suggestions are welcome!

1. Fork the repository
2. Create a feature branch
3. Make your changes
4. Submit a pull request

License

Available for portfolio and educational purposes.

---

Made with ❤️ and ASCII art | Report Bug