Skip to content

README.md

Latest commit

 

History

History
118 lines (83 loc) · 4.57 KB

README.md

File metadata and controls

118 lines (83 loc) · 4.57 KB
Raw

AutoScanlate AI - Frontend

The modern, responsive web interface for the AutoScanlate AI pipeline. Built with Next.js 16 and styled with a custom "Manga/Japanese" aesthetic.

Tech Stack

Key Features

  • Upload Zone: Drag & drop interface for .zip archives and images (.png, .jpg, .webp).
  • Real API Integration: Connected to Go backend for actual translation processing.
  • Status Dashboard: Real-time tracking with Server-Sent Events (SSE) for live progress updates.
  • Results Viewer: Side-by-side comparison reader for original vs. translated pages.
  • Live Progress: Auto-refreshing status with SSE for instant feedback during translation.

Design System (Manga Theme)

The UI follows a strict "Ink & Paper" aesthetic to match the subject matter.

  • Colors:

    • bg-paper (#fdfbf7): Warm white, emulating manga paper.
    • text-ink (#0f0f0f): Deep black for text and borders.
    • accent (#e63946): Stamp red for highlights and actions.

  • Typography:

    • Headers: Potta One (Brush style).
    • Body: Noto Sans JP (Clean, legible).

  • Components:

    • Buttons/Cards: "Panel" style with thick 3px black borders and drop shadows (box-shadow: 4px 4px 0px).
    • Textures: CSS-based "Screentone" overlays (radial gradients).

Getting Started

Prerequisites

  • Node.js 18+
  • pnpm (recommended)

Installation

cd frontend
pnpm install

Configuration

Create a .env.local file for environment variables:

cp .env.local.example .env.local

The frontend needs to know where the backend API is running:

# .env.local
NEXT_PUBLIC_API_URL=http://localhost:8080

Important: Make sure the backend API is running before starting the frontend.

Development

1. Start the backend first:

# In backend-api directory
cd ../backend-api

# Terminal 1: API Server
./api.exe

# Terminal 2: Worker
./api.exe --mode=worker

2. Start the frontend:

# In frontend directory
pnpm dev

Open http://localhost:3000 with your browser to see the result.

Project Structure

frontend/
├── app/                  # Next.js App Router pages & layouts
│   ├── globals.css       # Global theme variables & Tailwind config
│   ├── layout.tsx        # Root layout (Fonts provider)
│   └── page.tsx          # Landing page (Upload Zone)
├── components/
│   ├── features/         # Complex domain components (e.g., UploadZone)
│   └── ui/               # Reusable primitives (Card, Button)
├── lib/                  # Utilities (cn, mock-data)
└── public/               # Static assets

Scripts

Command Description
pnpm dev Start development server at localhost:3000
pnpm build Build the application for production
pnpm start Run the built production server
pnpm lint Run ESLint to check for code quality issues