garrardkitchen/gif-creator-api repository overview

cd src/GifCreator.Api
dotnet run
# API available at http://localhost:5232
# Swagger UI at http://localhost:5232/swagger

cd src/GifCreator.Web
npm install
npm run dev
# Frontend available at http://localhost:5173

services:
  api:
    image: garrardkitchen/gif-creator-api:latest
    container_name: gif-creator-api
    restart: unless-stopped
    volumes:
      - gif_data:/data
    environment:
      - ASPNETCORE_ENVIRONMENT=Production
      - ConnectionStrings__DefaultConnection=Data Source=/data/gifcreator.db
      - Storage__BasePath=/data/storage
      - Ai__GitHubToken=${GH_TOKEN}
      - Ai__DefaultModelId=gpt-4o
      - Ai__CropLeftPercent=37
      - Ai__CropTopPercent=28
      - Cors__AllowedOrigins=http://localhost
      - Encoder__BaseUrl=http://encoder:8002
      - Api__InternalBaseUrl=http://api:8002
    ports:
      - "5232:8002"
    depends_on:
      - encoder
    healthcheck:
      test: ["CMD", "curl", "-f", "http://localhost:8002/health"]
      interval: 30s
      timeout: 10s
      retries: 3
      start_period: 20s

  encoder:
    image: garrardkitchen/gif-creator-encoder:latest
    container_name: gif-creator-encoder
    restart: unless-stopped
    volumes:
      - gif_data:/data
    environment:
      - ASPNETCORE_ENVIRONMENT=Production
      - Storage__BasePath=/data/storage
    healthcheck:
      test: ["CMD", "curl", "-f", "http://localhost:8002/health"]
      interval: 30s
      timeout: 10s
      retries: 3
      start_period: 20s

  web:
    image: garrardkitchen/gif-creator-web:latest
    container_name: gif-creator-web
    restart: unless-stopped
    depends_on:
      - api
    ports:
      - "8001:80"
    healthcheck:
      test: ["CMD", "curl", "-f", "http://localhost:80"]
      interval: 30s
      timeout: 10s
      retries: 3

volumes:
  gif_data:
    driver: local

GH_TOKEN=ghp_your_token_here

docker compose up -d

# Frontend: http://localhost:8001
# API:      http://localhost:5232
# Swagger:  http://localhost:5232/swagger

# Clone and start — images are built locally from source
git clone https://github.com/garrardkitchen/gif-creator.git
cd gif-creator

# Set your GitHub token (required for AI blur detection)
export GH_TOKEN=ghp_your_token_here

docker compose up --build

# Frontend: http://localhost:8001
# API:      http://localhost:5232
# Swagger:  http://localhost:5232/swagger

# Stop
docker compose down

# Stop and remove volumes (data)
docker compose down -v

dotnet test tests/GifCreator.Tests/GifCreator.Tests.csproj

dotnet test tests/GifCreator.Tests/GifCreator.Tests.csproj \
  --collect:"XPlat Code Coverage"

# Generate HTML report (requires reportgenerator tool)
dotnet tool install -g dotnet-reportgenerator-globaltool
reportgenerator \
  -reports:**/coverage.cobertura.xml \
  -targetdir:coverage-report

cd src/GifCreator.Api
dotnet user-secrets set "Ai:GitHubToken" "ghp_your_token_here"

- Ai__GitHubToken=ghp_your_token_here

graph TB
    subgraph Browser["🌐 Browser"]
        UI["Vue 3 SPA<br/>(Vite + Tailwind CSS)<br/>fetches x-api-key on mount"]
    end

    subgraph Docker["🐳 Docker Compose"]
        subgraph Web["web · :8001"]
            Nginx["nginx<br/>reverse proxy / SPA host"]
        end

        subgraph API["api · :5232 (host) / :8002 (internal)"]
            AspNet["ASP.NET Core 10<br/>REST API + SignalR hub"]
            ApiKey["🔑 ApiKeyMiddleware<br/>x-api-key header<br/>256-bit · per session"]
            EF["EF Core · SQLite<br/>(projects · frames · blur regions<br/>AI token usage)"]
            Infra["Infrastructure<br/>VideoProcessor · BlurRender · AI Client"]
        end

        subgraph Enc["encoder · :8003 (internal only — not port-exposed)"]
            Queue["Encode Queue Service<br/>Channel&lt;Guid&gt; · BackgroundService"]
            EncKey["🔑 ApiKeyMiddleware<br/>key seeded from first job"]
            FFmpeg["FFMpegCore<br/>Two-pass palette GIF encoding"]
        end

        Vol[("📦 gif_data volume<br/>/data/storage<br/>frames · GIFs · DB")]
    end

    subgraph External["☁️ External"]
        GHModels["GitHub Models API<br/>models.inference.ai.azure.com<br/>─────────────────────<br/>GET /models → model catalogue<br/>POST /chat/completions → vision analysis"]
    end

    UI -- "GET /api/config → { apiKey }<br/>(public bootstrap, exempt)" --> Nginx
    UI -- "HTTP/WS :8001<br/>x-api-key on all requests" --> Nginx
    Nginx -- "/api/* → :8002" --> ApiKey
    Nginx -- "/hubs/* → WS :8002<br/>?access_token=" --> ApiKey
    Nginx -- "GET /api/encode/* → :8002<br/>(SSE · read-only)" --> ApiKey
    ApiKey --> AspNet

    AspNet -- "POST /jobs + x-api-key<br/>+ SharedApiKey in payload" --> EncKey
    EncKey --> Queue
    Queue -- "callback POST /api/internal/...<br/>x-api-key" --> ApiKey

    AspNet <--> EF
    AspNet --> Infra
    Infra -- "GET /models (cached 1 hr)<br/>POST /chat/completions (vision)" --> GHModels

    EF -- "reads/writes" --> Vol
    Infra -- "frame files" --> Vol
    FFmpeg -- "reads frames / writes GIF" --> Vol

    Queue --> FFmpeg

    classDef browser  fill:#1e3a5f,stroke:#3b82f6,color:#93c5fd
    classDef proxy    fill:#0f3b3b,stroke:#14b8a6,color:#5eead4
    classDef api      fill:#2d1b69,stroke:#8b5cf6,color:#c4b5fd
    classDef auth     fill:#4a1942,stroke:#ec4899,color:#f9a8d4
    classDef db       fill:#1a2e1a,stroke:#22c55e,color:#86efac
    classDef encoder  fill:#3b1f00,stroke:#f97316,color:#fdba74
    classDef volume   fill:#1f1f2e,stroke:#6366f1,color:#a5b4fc
    classDef external fill:#0f2b1a,stroke:#10b981,color:#6ee7b7

    class UI browser
    class Nginx proxy
    class AspNet,Infra api
    class ApiKey,EncKey auth
    class EF db
    class Queue,FFmpeg encoder
    class Vol volume
    class GHModels external

src/
├── GifCreator.Core/           # Domain models + interfaces (no infrastructure deps)
├── GifCreator.Infrastructure/ # EF Core/SQLite · FFMpegCore · BlurRender · AI client · Storage
├── GifCreator.Api/            # ASP.NET Core 10 REST API + SignalR hub
├── GifCreator.Encoder/        # Encode microservice — queue, two-pass FFmpeg, SSE progress
└── GifCreator.Web/            # Vite + Vue 3 + Tailwind CSS v4 SPA
tests/
└── GifCreator.Tests/          # xUnit 3 + Moq · unit + integration · code coverage