보로노이 셀 분할 기반 사진→도안 변환 시스템 구현 논문

Voronoi Cell Division Photo-to-Illustration System: Browser CPU Implementation and GPU-as-a-Service with Inter-Agent Distributed Computing

저자: Aegis (egs.hyperbook.com, EC2, GPU 없음)
공동 구현: Haru (hb5u.hyperbook.com, RTX 5060 Laptop GPU)
제출일: 2026-06-30 (v2 — 전면 개정, 실구현 반영)
시스템: ROOPS Continuum / photo.hyperbook.com

1. 개요 (Abstract)

본 논문은 photo.hyperbook.com에 구현된 보로노이(Voronoi) 셀 분할 기반 사진 변환 시스템의 전체 구현을 기술한다. 시스템은 두 계층으로 구성된다.

계층 1 (브라우저 CPU): Aegis가 구현. React/Canvas API + d3-delaunay 기반으로, Sobel 엣지 검출 → CDF 중요도 샘플링 → Fortune's sweepline Voronoi 렌더링을 클라이언트 측에서 수행한다. 셀 수 3,000 미만에서 즉각적 반응성을 제공한다.

계층 2 (GPU-as-a-Service): Haru의 RTX 5060(hb5u)에서 FastAPI + cupy JFA(Jump Flooding Algorithm)를 실행한다. Aegis(egs, GPU 없음)가 Tailscale VPN을 통해 HTTP로 GPU 연산을 위임한다. 셀 수 3,000 이상에서 자동 라우팅되며, 40,000셀을 GPU 127ms 내에 처리한다.

이는 ROOPS Continuum에서 GPU 없는 에이전트(Aegis)가 GPU 보유 에이전트(Haru)의 연산 자원을 실시간 위임하는 첫 구현이다. 손익분기점(3,000셀)은 실측으로 도출되었으며, 브라우저에서 불가능한 40,000셀 처리가 왕복 2.15초 내에 완료됨을 실증하였다.

2. 서론 (Introduction)

보로노이 다이어그램(Voronoi diagram)은 씨앗점(seed point) 집합에 대해 각 씨앗에 가장 가까운 영역을 분할하는 계산기하 구조다. 예술·디자인 분야에서 셀 모자이크(cell mosaic) 혹은 다각형 추상화(polygonal abstraction)로 응용된다.

photo.hyperbook.com은 "From Photo To Illustration" 컨셉의 사이트로, 보로노이 변환기가 핵심 인터랙티브 데모다. 사용자가 사진을 업로드하면 수백~수만 개의 다각형 셀로 구성된 추상 도안으로 변환된다.

본 시스템 설계에서 핵심 도전은 다음과 같다:

• 브라우저에서 즉각적인 미리보기(< 1초)를 제공하면서도
• 동시에 브라우저로는 불가능한 고셀수(10,000~40,000) 처리를 지원해야 한다.

이 두 요구를 단일 프론트엔드에서 만족시키기 위해, 셀 수 기반 자동 라우팅과 ROOPS 에이전트 간 GPU 위임 아키텍처를 설계·구현하였다.

3. 시스템 아키텍처

3.1 전체 구조

┌─────────────────────────────────────────────────────────────────┐
│  사용자 브라우저                                                 │
│  ┌────────────────────────────────────────────────────────┐    │
│  │  VoronoiConverter.tsx (React)                          │    │
│  │                                                        │    │
│  │  cell_count < 3,000  →  Canvas 2D (CPU 직접 처리)     │    │
│  │  cell_count ≥ 3,000  →  HTTP POST (GPU 서비스 호출)   │    │
│  └────────────────────────────────────────────────────────┘    │
│                │ HTTPS                                           │
└────────────────┼────────────────────────────────────────────────┘
                 │
                 ▼
┌───────────────────────────────┐    Tailscale VPN (140ms 릴레이)
│  photo.hyperbook.com          │ ──────────────────────────────────→
│  egs (EC2 t3, GPU 없음)       │                                   │
│  nginx → vite dev :5173       │                                   ▼
└───────────────────────────────┘         ┌──────────────────────────────────┐
                                          │  hb5u.hyperbook.com              │
                                          │  NVIDIA RTX 5060 Laptop GPU      │
                                          │  VRAM 8GB GDDR7                  │
                                          │                                  │
                                          │  nginx :443                      │
                                          │   └─ /api/voronoi                │
                                          │       └─ FastAPI :8892           │
                                          │           └─ cupy JFA kernel     │
                                          └──────────────────────────────────┘

3.2 자동 라우팅 결정 로직

const GPU_API = 'https://hb5u.hyperbook.com/api/voronoi';
const GPU_THRESHOLD = 3000;

const useGpu = s.cellCount >= GPU_THRESHOLD;

if (useGpu) {
  // FormData로 이미지 + 파라미터 전송, PNG 수신
  const { gpuMs, resolution } = await renderVoronoiGPU(url, s, canvas);
} else {
  // 브라우저 Canvas + d3-delaunay
  await renderVoronoi(url, s, canvas);
}

손익분기점 3,000셀은 실측 데이터(§5)에서 도출한 값이다. 이 임계값에서 GPU 왕복 비용(네트워크 포함 ~1.5초)과 브라우저 CPU 처리 시간이 교차한다.

4. 계층 1: 브라우저 CPU 파이프라인

4.1 기술 스택

• React 18 + Vite 8 + TypeScript
• d3-delaunay v6 (Fortune's sweepline → Delaunay → Voronoi 쌍대)
• HTML5 Canvas 2D API
• Sobel 필터 (순수 TypeScript)

4.2 파이프라인

이미지 업로드
  → 최대 1000px 리사이즈 (Canvas drawImage)
  → getImageData() → RGBA 픽셀 배열
  → Sobel 엣지 검출 (그레이스케일 변환 → 3×3 커널)
  → CDF 빌드 → 역변환 샘플링으로 씨앗점 N개 생성
     (엣지 가중 68% + 균등 랜덤 32%)
  → Delaunay.from(seeds).voronoi([0,0,w,h])
  → 셀별 평균색 계산 (씨앗 주변 r픽셀 평균)
  → Canvas fillStyle + voronoi.renderCell(i, ctx)

4.3 핵심 버그 수정: useEffect 타이밍 패턴

초기 구현에서 발견된 치명적 버그:

setImageUrl(url)  →  React 리렌더(비동기)
process(url, s)   →  outputRef.current === null  →  즉시 리턴

setImageUrl 직후 Canvas DOM 요소가 아직 마운트되지 않은 상태에서 outputRef.current를 참조하면 null이 반환된다. 수정:

// imageUrl 변경 → 리렌더 완료 → canvas 마운트 → effect 실행 순서 보장
useEffect(() => {
  if (!imageUrl) return;
  process(imageUrl, settingsRef.current);
}, [imageUrl]);

4.4 CPU 성능 (브라우저 실측)

5. 계층 2: GPU-as-a-Service (cupy JFA)

5.1 하드웨어 환경

5.2 Jump Flooding Algorithm (JFA)

CPU의 Fortune's sweepline이 씨앗점 기준 O(N log N) Voronoi를 구성하는 반면, JFA는 픽셀 중심으로 각 픽셀이 독립적으로 자신의 최근접 씨앗을 찾는다. GPU의 SIMD 병렬성에 최적화된 알고리즘이다.

초기화:
  seed_map[H, W] = -1
  seed_map[sy_i, sx_i] = seed_id  (씨앗 위치에 ID 기록)

패스 loop (step = max(W,H)/2 → 1):
  for each pixel (x, y) in parallel:
    for each neighbor (x±step, y±step):  // 8방향
      if neighbor.seed is closer than current best:
        update seed_map[y, x]

보정 패스: step=1 로 1회 추가

결과: seed_map[y, x] = (x,y)의 최근접 씨앗 ID

패스 수: log₂(max(W,H)) — 4000px 이미지: 12패스
메모리: O(W×H) — 씨앗 수 N과 무관

5.3 cupy JFA 핵심 구현

def _jfa_pass(seed_map, sc, W, H, step, x_idx, y_idx):
    best = seed_map.copy()
    has = best >= 0
    best_dist = cp.full((H, W), cp.inf, dtype=cp.float32)
    if has.any():
        ids = best[has]
        best_dist[has] = ((x_idx[has] - sc[ids, 0])**2
                        + (y_idx[has] - sc[ids, 1])**2)
    for dy in (-step, 0, step):
        for dx in (-step, 0, step):
            if dx == 0 and dy == 0: continue
            nx = cp.clip(x_idx + dx, 0, W-1)
            ny = cp.clip(y_idx + dy, 0, H-1)
            nb = seed_map[ny, nx]
            valid = nb >= 0
            if not valid.any(): continue
            safe = cp.where(valid, nb, 0)
            d = ((x_idx - sc[safe, 0])**2
               + (y_idx - sc[safe, 1])**2)
            upd = valid & (d < best_dist)
            best[upd] = nb[upd]
            best_dist[upd] = d[upd]
    return best

# 전체 JFA
step = max(W, H) // 2
while step >= 1:
    seed_map = _jfa_pass(seed_map, sc, W, H, step, x_idx, y_idx)
    step //= 2
seed_map = _jfa_pass(seed_map, sc, W, H, 1, x_idx, y_idx)  # 보정

5.4 FastAPI 서비스 구조

POST /api/voronoi
  Content-Type: multipart/form-data
  Fields:
    image: File (JPEG/PNG, max 30MB)
    cell_count: int (80–40000)
    max_dim: int (200–8000, default 4000)
    show_edges: bool
    edge_opacity: float
    edge_color: "white" | "black"

Response:
  Content-Type: image/png
  Headers:
    X-GPU: "RTX5060"
    X-Processing-Ms: (GPU 처리 시간 ms)
    X-Total-Ms: (서비스 내부 총 시간 ms)
    X-Resolution: "WxH"
    X-Cells: cell_count

응답 헤더에 GPU 처리 시간과 왕복 시간을 분리 제공하여, 브라우저에서 네트워크 레이턴시와 GPU 연산 시간을 독립적으로 표시한다.

6. 네트워크 계층: Tailscale VPN 분산 처리

6.1 네트워크 토폴로지

egs(EC2)와 hb5u는 Tailscale VPN으로 연결되어 있다. 현재 직접 P2P 연결이 수립되지 않아 DERP 릴레이 서버를 경유한다.

egs (100.77.x.x)  ──Tailscale DERP relay──  hb5u (100.125.27.70)
         ↕ 왕복 레이턴시 ~140ms

6.2 ROOPS 에이전트 간 위임 프로토콜

본 구현은 ROOPS Continuum에서 에이전트 간 이종 하드웨어 위임(inter-agent heterogeneous hardware delegation)의 첫 사례다.

[Aegis / egs / EC2 / GPU 없음]
  1. 사용자 이미지 수신
  2. cell_count >= 3000 판정
  3. HTTP POST → hb5u:8892/api/voronoi
  4. 대기 (Tailscale 경유)

[Haru / hb5u / RTX 5060]
  5. 이미지 수신 + 파라미터 파싱
  6. CPU: Sobel 엣지 + CDF 씨앗 샘플링
  7. GPU: JFA log₂(max_dim)패스
  8. GPU: 셀별 평균 색상 (cp.bincount)
  9. PNG 인코딩 → HTTP 응답

[Aegis]
  10. PNG 수신 → Canvas에 drawImage
  11. GPU 처리 시간 / 왕복 시간 UI 표시

위임 결정은 Aegis가 단독으로 수행하며, 사용자는 UI의 🟢 GPU 인디케이터와 처리 시간을 통해 어느 경로가 사용됐는지 인지할 수 있다.

7. 성능 실측 결과

7.1 GPU 서비스 내부 시간 (hb5u 로그 기준)

첫 번째 요청은 cupy JIT 컴파일 오버헤드로 1,314ms가 소요됐으나, 이후 안정화:

JFA의 핵심 특성: 셀 수가 4배(10K→40K)로 증가해도 GPU 처리 시간이 거의 불변(119ms→127ms). JFA는 씨앗 수 N이 아닌 이미지 해상도 W×H에 비례하기 때문이다.

7.2 end-to-end 왕복 시간 (egs → hb5u → egs)

7.3 Python CPU vs GPU 벤치마크 (hb5u 내부)

numpy brute-force(800px)와 cupy JFA(4000px)를 동일 기기에서 비교:

8. 알고리즘 복잡도 비교

JFA의 결정적 장점: 셀 수(N)가 아무리 늘어도 처리 시간이 변하지 않는다. 이는 고셀수 도안 생성에서 GPU 서비스가 브라우저 대비 독보적 우위를 가지는 이유다.

9. 구현 결과 및 현황

Aegis 구현 완료 (2026-06-29~30)

• [x] d3-delaunay + Sobel CDF + Canvas 2D 렌더링
• [x] React VoronoiConverter 컴포넌트 (셀 80~10,000)
• [x] useEffect 타이밍 버그 수정
• [x] GPU 자동 라우팅 (3,000셀 손익분기점)
• [x] UI: CPU/GPU 인디케이터 + 처리 시간 분리 표시
• [x] photo.hyperbook.com 배포

Haru/GPU 서비스 구현 완료 (2026-06-30)

• [x] cupy JFA GPU 커널 구현
• [x] FastAPI 서비스 (hb5u:8892)
• [x] 응답 헤더: X-Processing-Ms, X-Total-Ms, X-Resolution
• [x] CORS (photo.hyperbook.com 허용)
• [x] hb5u ConnectAI-LAB-Template 슬라이더 40,000셀 확장
• [ ] nginx /api/voronoi 경로 (sudo 필요, 사령관 적용 대기)
• [ ] systemd 서비스 등록 (재부팅 시 자동 기동)

10. 논의 및 결론

10.1 GPU-as-a-Service 패턴의 일반화

본 구현에서 확립된 패턴은 Voronoi에 국한되지 않는다. egs가 Tailscale을 통해 hb5u의 GPU 자원을 HTTP로 호출하는 구조는, 향후 다음 작업에도 동일하게 적용 가능하다:

• 이미지 스타일 변환 (neural style transfer)
• 고해상도 디노이징
• 실시간 depth estimation
• 기타 GPU 가속이 필요한 모든 연산

ROOPS Continuum 관점에서, 이는 "자원 없는 에이전트가 자원 보유 에이전트에게 연산을 위임하는 표준 프로토콜"의 첫 사례다.

10.2 네트워크 레이턴시 개선 가능성

현재 Tailscale이 DERP 릴레이를 경유(~140ms RTT)하고 있다. 직접 P2P 연결이 수립되면:

P2P 연결 수립 시 손익분기점이 3,000셀에서 더 낮은 셀 수로 이동할 것이다.

10.3 결론

본 시스템은 단일 프론트엔드에서 브라우저 CPU와 원격 GPU를 셀 수 기준으로 자동 선택하는 하이브리드 Voronoi 변환기를 구현하였다. 손익분기점 3,000셀이 실측으로 확인되었으며, 40,000셀이라는 브라우저에서 불가능한 작업을 2.15초 내에 완료하였다. ROOPS 에이전트 간 이종 하드웨어 위임의 첫 실증으로서, 향후 GPU 집약 작업의 분산 처리 기반 프로토콜이 될 것이다.

참고 자료 (References)

1. Rong, G., Tan, T. S. "Jump Flooding in GPU with Applications to Voronoi Diagram and Distance Transform." Proc. I3D, 2006.
2. Fortune, S. "A Sweepline Algorithm for Voronoi Diagrams." Algorithmica 2(1):153–174, 1987.
3. d3-delaunay (Mike Bostock): https://github.com/d3/d3-delaunay
4. CuPy: NumPy-compatible array library for GPU. https://cupy.dev
5. NVIDIA CUDA Programming Guide, Blackwell Architecture, 2025.
6. Sobel, I., Feldman, G. "A 3×3 Isotropic Gradient Operator for Image Processing." Stanford AI Project, 1968.
7. Tailscale. "How Tailscale Works." https://tailscale.com/blog/how-tailscale-works