andfanilo/streamlit-drawable-canvas

해결하는 문제

Streamlit 앱에 인터랙티브한 스케치 캔버스를 통합할 수 있는 방법을 제공하여, 사용자가 웹 앱 내에서 직접 도형을 그리거나 주석을 달고 조작할 수 있도록 합니다. 사용자가 커스텀 프론트엔드 컴포넌트를 처음부터 구축할 필요 없이도 가능합니다.

작동 방식

Fabric.js를 사용해 Streamlit 컴포넌트로 구현되었으며, 브라우저에 다양한 그리기 모드(자유형, 선, 사각형, 원, 다각형, 텍스트)를 지원하는 캔버스를 렌더링합니다. 배경 이미지나 색상으로 초기화할 수 있으며, 결과 이미지 데이터(넘파이 배열로) 또는 객체 속성(JSON으로)을 Streamlit 백엔드로 전송하여 추가 처리할 수 있습니다.

대상 사용자

이미지 주석 도구, 스케치 인터페이스, 또는 간단한 그래픽 에디터가 필요한 Streamlit 앱을 개발하는 개발자들입니다.

주요 기능

• 다양한 그리기 모드: 자유형 그리기, 점, 선, 사각형, 원, 다각형, 텍스트를 지원합니다.
• 객체 조작: 캔버스에 이미 배치된 객체를 회전, 기울이기, 크기 조절, 이동할 수 있습니다.
• 데이터 통합: 원본 이미지 데이터와 그려진 모든 객체의 상세한 JSON 속성을 파이썬 백엔드로 반환합니다.
• 주석 지원: 레이블이 붙은 경계 상자(바운딩 박스)를 생성하기 위한 특수한 labeled_rect 모드를 포함합니다.
• 사용자 정의 배경: 스트레칭 또는 컨테이닝 방식으로 배경 이미지를 지원합니다.