Replace default README with project documentation

Author: bohee-connectome

README.md

@@ -1,73 +1,91 @@
-# React + TypeScript + Vite
+# ARPA-H AI Foundation Model Demo
 
-This template provides a minimal setup to get React working in Vite with HMR and some ESLint rules.
+> **Restricted Access** — 이 데모 페이지는 접근 코드가 필요합니다.
 
-Currently, two official plugins are available:
+ARPA-H 과제를 위한 AI Foundation Model 시연 웹페이지입니다.
+뇌영상(fMRI) 및 뇌파(EEG/iEEG) 데이터에 대한 AI 파운데이션 모델의 임상 예측 파이프라인을 인터랙티브하게 시연합니다.
 
-- [@vitejs/plugin-react](https://github.com/vitejs/vite-plugin-react/blob/main/packages/plugin-react) uses [Babel](https://babeljs.io/) (or [oxc](https://oxc.rs) when used in [rolldown-vite](https://vite.dev/guide/rolldown)) for Fast Refresh
-- [@vitejs/plugin-react-swc](https://github.com/vitejs/vite-plugin-react/blob/main/packages/plugin-react-swc) uses [SWC](https://swc.rs/) for Fast Refresh
+## Live Demo
 
-## React Compiler
+🔗 https://transconnectome.github.io/arpa-h_webdemo/
 
-The React Compiler is not enabled on this template because of its impact on dev & build performances. To add it, see [this documentation](https://react.dev/learn/react-compiler/installation).
+## Overview
 
-## Expanding the ESLint configuration
+패럴랙스 스크롤 원페이지로 구성된 5단계 AI 파이프라인 시연:
 
-If you are developing a production application, we recommend updating the configuration to enable type-aware lint rules:
+| Step | Section | Description |
+|:----:|---------|-------------|
+| — | **Hero** | AI Foundation Model의 필요성 (모션 그래픽) |
+| 01 | **Data Upload** | 뇌영상/뇌파 데이터 업로드 → 확장자 기반 모달리티 자동 분류 |
+| 02 | **Model Selection** | 모달리티에 따른 Foundation Model 자동 선택 (SWIFT / DIVER / VLM) |
+| 03 | **Task Selection** | 임상 예측 과제 선택 (MCI→AD, MDD, OCD, 치료반응) |
+| 04 | **Progress** | 모델 처리 파이프라인 시각화 |
+| 05 | **Results** | 예측 결과 및 성능 메트릭 시각화 (Accuracy, AUC 등) |
 
-```js
-export default defineConfig([
-  globalIgnores(['dist']),
-  {
-    files: ['**/*.{ts,tsx}'],
-    extends: [
-      // Other configs...
+## Foundation Models
 
-      // Remove tseslint.configs.recommended and replace with this
-      tseslint.configs.recommendedTypeChecked,
-      // Alternatively, use this for stricter rules
-      tseslint.configs.strictTypeChecked,
-      // Optionally, add this for stylistic rules
-      tseslint.configs.stylisticTypeChecked,
+| Model | Modality | Description |
+|-------|----------|-------------|
+| **SWIFT** | fMRI | Spatiotemporal representation learning for functional brain imaging |
+| **DIVER** | EEG / iEEG | Foundation model for electrophysiological brain signals |
+| **VLM** | Visual / Structural | Vision-language model for structural brain imaging |
 
-      // Other configs...
-    ],
-    languageOptions: {
-      parserOptions: {
-        project: ['./tsconfig.node.json', './tsconfig.app.json'],
-        tsconfigRootDir: import.meta.dirname,
-      },
-      // other options...
-    },
-  },
-])
+## Tech Stack
+
+| Category | Technology |
+|----------|-----------|
+| Framework | React 19 + TypeScript |
+| Build | Vite 7 |
+| Styling | Tailwind CSS 4 |
+| Animation | Framer Motion, GSAP |
+| Charts | Chart.js + react-chartjs-2 |
+| Deployment | GitHub Pages (via GitHub Actions) |
+
+## Development
+
+```bash
+# Install dependencies
+npm install
+
+# Start dev server
+npm run dev
+
+# Build for production
+npm run build
+
+# Preview production build
+npm run preview
+```
+
+## Deployment
+
+`main` 브랜치에 push 시 GitHub Actions를 통해 자동 배포됩니다.
+수동 배포가 필요한 경우:
+
+```bash
+gh workflow run "Deploy to GitHub Pages" --repo Transconnectome/arpa-h_webdemo --ref main
 ```
 
-You can also install [eslint-plugin-react-x](https://github.com/Rel1cx/eslint-react/tree/main/packages/plugins/eslint-plugin-react-x) and [eslint-plugin-react-dom](https://github.com/Rel1cx/eslint-react/tree/main/packages/plugins/eslint-plugin-react-dom) for React-specific lint rules:
-
-```js
-// eslint.config.js
-import reactX from 'eslint-plugin-react-x'
-import reactDom from 'eslint-plugin-react-dom'
-
-export default defineConfig([
-  globalIgnores(['dist']),
-  {
-    files: ['**/*.{ts,tsx}'],
-    extends: [
-      // Other configs...
-      // Enable lint rules for React
-      reactX.configs['recommended-typescript'],
-      // Enable lint rules for React DOM
-      reactDom.configs.recommended,
-    ],
-    languageOptions: {
-      parserOptions: {
-        project: ['./tsconfig.node.json', './tsconfig.app.json'],
-        tsconfigRootDir: import.meta.dirname,
-      },
-      // other options...
-    },
-  },
-])
+## Project Structure
+
 ```
+src/
+├── components/          # 재사용 컴포넌트
+│   ├── CountUp.tsx        # 숫자 카운트업 애니메이션
+│   ├── NeuralParticles.tsx # 뉴럴 네트워크 파티클 캔버스
+│   ├── PasswordGate.tsx    # 접근 코드 게이트
+│   ├── SectionTransition.tsx # 다크↔라이트 전환
+│   └── TypingText.tsx      # 타이핑 애니메이션
+├── sections/            # 페이지 섹션
+│   ├── HeroSection.tsx
+│   ├── DataUploadSection.tsx
+│   ├── ModelSelectionSection.tsx
+│   ├── TaskSelectionSection.tsx
+│   ├── ProgressSection.tsx
+│   └── ResultsSection.tsx
+└── App.tsx              # 파이프라인 상태 관리 + 라우팅
+```
+
+## License
+
+Internal use only — Transconnectome