yuyuanweb/ai-picture-editor

2026 年编程导航 AI 编程实战新项目,基于 React 19 + FastAPI + LangChain + LangGraph + Konva 的 AI 修图智能体,支持自然语言驱动修图、21 种编辑工具、文生图、智能抠图、图层拆分、区域编辑、多步计划。覆盖 AI Agent 架构、SSE 实时推送、异步任务队列、Canvas 画布引擎。用一套教程掌握 AI Agent 全栈开发,不到一周学完,给你的简历增加竞争力

한 문장 요약

이것은 교육용 풀스택 프로젝트입니다: 사용자가 자연어로 한 문장을 입력하면(예: "배경을 해변으로 바꿔줘"), AI가 자동으로 이미지 편집 단계를 계획하고 21가지 내장 편집 도구를 호출하여 전문가 수준의 이미지 편집을 완료합니다—이미지 생성부터 배경 제거, 색상 보정, 부분 편집, 레이어 분리까지 모두 자동으로 수행됩니다.

어떤 문제를 해결하는가

기존 이미지 편집 소프트웨어는 사용자가 수동으로 버튼을 찾고 매개변수를 조정해야 합니다. 이 프로젝트는 한 문장만 말하면 복잡한 이미지 편집 작업을 완료할 수 있게 하며, AI 에이전트가 의도 이해, 단계 계획, 도구 호출 및 실행을 담당하고 마지막으로 캔버스에 실시간으로 결과를 표시합니다.

핵심 기능 (8대 모듈)

  1. AI 텍스트-이미지 생성——프롬프트를 입력하면 4장의 후보 이미지가 생성되고(4분할 표시), 생성 진행 상황은 SSE로 실시간 푸시됩니다.

  2. 전문가급 캔버스 편집기——react-konva 기반, 확대/축소, 이동, 레이어 관리, 실행 취소/다시 실행, 편집 전후 비교 슬라이더를 지원합니다.

  3. 자연어 기반 이미지 편집——핵심 기능: AI가 사용자 지시를 분석하고 단계를 자동 계획하여 도구를 실행합니다.

  4. 21가지 편집 도구——원클릭 배경 제거(rembg), 11가지 색상 보정 매개변수(밝기/대비/채도/색온도 등), 자르기/뒤집기/크기 조정/회전/이동, AI 배경 교체, AI 확장, 초해상도 확대. UI 버튼과 AI 에이전트는 동일한 도구 레지스트리를 공유합니다.

  5. 스마트 영역 선택——SAM(Segment Anything Model) 포인트 선택 기능을 통합하여 클릭 한 번으로 임의의 객체를 선택할 수 있습니다; 브러시 칠하기 모드도 지원합니다. 첫 클릭에서 embedding을 계산하고 이후 클릭은 decoder만 실행하여 응답이 밀리초 단위입니다.

  6. 부분 정밀 편집——선택 영역을 기반으로 부분 제거(AI inpaint로 지우고 배경 자동 보완) 및 부분 교체(프롬프트로 무엇으로 바꿀지 설명하고 선택 영역만 변경)를 수행합니다.

  7. 레이어 분리 및 독립 작업——의미적으로 주체 레이어+배경 레이어로 분리하고, OCR 텍스트 레이어는 선택 사항; 각 레이어는 독립적으로 크기 조정/색상 보정/이동이 가능합니다. 또한 임의의 객체를 클릭하여 독립 레이어로 승격시킬 수 있으며 배경은 자동으로 복구됩니다. 레이어 데이터는 JSONB로 영속화됩니다.

  8. 다단계 계획 및 인간-기계 협업——복잡한 요구 시 AI가 구조화된 JSON 계획(의존성 포함)을 출력하고, 서버 측에서 도구 존재성 검증, 매개변수 유효성 검사, 의존성 보완 및 순환 감지를 수행한 후 위상 정렬로 실행합니다. 사용자는 계획 카드에서 실행 확인, 단일 단계 재시도 또는 이후 단계 취소가 가능합니다.

기술 아키텍처

  • 프론트엔드: React 19 + Konva(Canvas 엔진), 단일 페이지 애플리케이션
  • 백엔드: Python FastAPI, 계층화(라우팅 계층/비즈니스 서비스 계층/데이터 액세스 계층)
  • AI 부분: LangChain으로 계획 모델과 도구 시그니처 연결; LangGraph로 에이전트 계획 오케스트레이션; ToolRegistry로 모든 편집 도구 통합 관리
  • 비동기 작업: 시간이 오래 걸리는 작업(이미지 생성, 배경 제거, 확장)은 ARQ 비동기 큐를 통해 별도 Worker에 전달되고, 결과는 Redis Pub/Sub + SSE로 프론트엔드에 실시간 푸시
  • 데이터 저장: PostgreSQL(비즈니스 데이터), Redis(캐시 및 메시지), MinIO(이미지 리소스)

실행 방법

Docker, Python 3.13, Node.js 18+가 필요합니다. 미들웨어 시작 → 백엔드(uvicorn + ARQ Worker) → 프론트엔드(npm run dev). AI 서비스는 선택적으로 Alibaba Cloud Bailian API 키를 사용할 수 있습니다(mock 모드로 전체 흐름을 무료로 실행 가능). 테스트는 mock으로 대규모 언어 모델 호출을 격리하여 API 할당량을 소비하지 않습니다. 배포는 Docker 다단계 빌드 + compose profile을 사용합니다.

중요 참고 사항

이것은 유료 교육 프로젝트이며, README에 전체 텍스트 튜토리얼, 이력서 작성법, 면접 문제 해설 및 질의응답 서비스가 포함되어 있고, "编程导航" 멤버십에 가입해야 전체 튜토리얼 자료를 얻을 수 있다고 명시되어 있습니다. 핵심 가치는 AI 에이전트 풀스택 개발 방법(일반적인 방법론)을 배우는 데 있으며, 단순히 코드 자체가 아닙니다.

관련

  • 프로젝트
  • 프로젝트
  • 프로젝트
  • 프로젝트