Hugging Face Spaces에서 3Dmol.js와 Gradio HTML 블록을 조합해 PDB 파일 기반 단백질 3D 구조를 브라우저에서 직접 시각화

Context

Gradio는 기본적으로 단백질 3D 구조 시각화를 위한 내장 컴포넌트를 제공하지 않아, 웹 브라우저에서 단백질 구조를 표시할 수 없었다. 단백질 ML 모델의 예측 결과(AlphaFold2, OmegaFold 등)를 사용자에게 시각적으로 전달하기 위해 별도의 시각화 솔루션이 필요했다.

Technical Solution

• RCSB Protein Databank에서 PDB 파일 조회: 4자리 PDB 코드를 입력받아 wget을 통해 자동으로 PDB 파일 다운로드
• 3Dmol.js 라이브러리를 iframe srcdoc 속성을 통해 로드: CDN에서 jQuery와 3Dmol.js를 로드하고, 브라우저 보안 정책에 대응하기 위해 iframe 내부에 HTML 문서 직접 삽입
• PDB 파일 내용을 HTML 템플릿 리터럴에 포함: 단백질 구조 데이터를 JavaScript 변수로 HTML 문서에 직접 삽입하고 3Dmol.js API로 렌더링
• Gradio Blocks 인터페이스와 통합: Textbox(PDB 코드), File(PDB 파일 업로드), Button, HTML 블록을 조합하여 사용자 입력 처리
• 3Dmol.js 스타일 설정: cartoon 표현 방식과 whiteCarbon 색상 스키마로 단백질 뼈대 시각화, 뷰어 크기는 CSS로 너비 100%, 높이 700px로 지정

Key Takeaway

브라우저 보안 제약이 있을 때 iframe의 srcdoc 속성을 활용하면 외부 라이브러리를 안전하게 격리된 환경에서 로드할 수 있으며, 이를 통해 Gradio와 같은 프로토타이핑 프레임워크에서 기본 제공하지 않는 시각화 기능을 추가할 수 있다.