코드를 실행하면 AI가 시각화를 완성하는 알고리즘 디버거

브라우저에서 Python / JavaScript / Java 코드를 돌리면, AI가 알고리즘을 분류하고
실행 흐름을 스텝별 시각화로 변환합니다.

1. 코드 실행 → AI 시각화

갤러리에서 예제를 선택하거나 직접 코드를 작성하면, 브라우저에서 즉시 실행하고 AI가 알고리즘을 분류해 최적의 시각화를 자동 생성합니다.

2. 스텝 디버깅

코드 라인 클릭으로 해당 스텝에 점프하고, 속도 조절과 Edit 모드로 코드를 수정한 뒤 바로 재실행할 수 있습니다.

3. 편의 기능

가이드 투어로 처음 사용자를 안내하고, 한국어/영어 전환과 버그 리포팅을 지원합니다.

Frontend

Visualization

Execution

Cloud

AI

Testing

TRACE   AI   RENDER

^{TRACE - Web Worker에서 코드를 실행하고 줄 단위 rawTrace를 수집합니다.
AI - analyze로 알고리즘과 변수를 분류하고, 최적의 시각화 전략을 결정합니다.
RENDER - mergedTrace를 기준으로 Grid / Graph / Linear 등 시각화 패널을 그립니다.}

파이프라인 전체 보기

설치 및 실행

# 저장소 클론
git clone https://github.com/ultra-ai-dle/frogger.git

# 프로젝트 루트로 이동
cd frogger

# 의존성 설치
npm install

# 환경 변수 파일 생성 (아래「환경변수」참고)
cp env.example .env.local

# 개발 서버 실행 — http://localhost:3000
npm run dev

환경변수

# ─── AI API Keys (사용할 provider 만 설정)
GEMINI_API_KEY=
OPENAI_API_KEY=
GROQ_API_KEY=
ANTHROPIC_API_KEY=
OPENROUTER_API_KEY=

# ─── 메인 / 폴백 모델
AI_PROVIDER=gemini
AI_MODEL=gemini-2.5-flash
FALLBACK_PROVIDER=gemini
FALLBACK_MODEL=gemini-2.5-flash-lite

# ─── Java 원격 실행 (Java 언어 사용 시 필수 · 토큰은 upstream 정책에 따라)
JAVA_EXECUTION_SERVICE_URL=
JAVA_EXECUTION_SERVICE_TOKEN=

# ─── Contact Email (SMTP · 문의 메일 수신 시 필수)
CONTACT_TO_EMAIL=
CONTACT_FROM_EMAIL=
SMTP_HOST=
SMTP_PORT=
SMTP_USER=
SMTP_PASS=

브라우저에서 코드를 실행하고, AI가 흐름을 시각화하는
Frogger를 만듭니다.

김근선	정아현	현승준	홍민정
하 이 시간이 와버린 것인가	저 못하겠어요	AI 는 신이야!	컴퓨터 잘 몰라요

• 전체 파이프라인
• Execution Engine
• Trace 병합
• AI Pipeline
• Visualization
• 커맨드 가이드

MIT License · Copyright (c) 2026 ultra-ai-dle