ASTA — Adaptive Sensory-feedback Telerehabilitation Arm

Purwarupa penelitian lengan bionik transradial modular non-invasif, beserta platform telerehabilitasinya. Fokusnya pada dua hal yang paling sering luput dalam rehabilitasi penyandang amputasi ekstremitas atas: nyeri phantom dan kepatuhan terapi jangka panjang.

Demo langsung: https://asta-id.web.app

ASTA adalah purwarupa penelitian, bukan alat diagnostik, dan tidak menggantikan penilaian klinis. Aplikasi pada tautan di atas berjalan penuh di peramban dengan data demo dan simulator perangkat — tidak ada data pasien sungguhan, dan tidak ada data yang dikirim ke server mana pun.

---

Isi singkat

Bagian	Keterangan
Landing page	Halaman publik bergaya situs perusahaan, dengan penampil 3D langsung di hero
Aplikasi	19 halaman untuk 4 peran: pasien, fisioterapis, prostetis, admin klinik
Model 3D	Lengan bionik dibangun prosedural di Blender, ditampilkan di web lewat three.js
Sistem visual	Motif hiasan dan ilustrasi SVG yang seluruhnya dibangkitkan dari kode

Tidak ada framework dan tidak ada langkah build: seluruh aplikasi berupa HTML, CSS, dan JavaScript biasa (ES5-style, IIFE, tanpa modul bundler). Satu-satunya pustaka pihak ketiga adalah three.js, yang di-vendor lokal di js/vendor/three/ dan dimuat lazy hanya pada halaman yang menampilkan model.

---

Menjalankan secara lokal

Aplikasi memerlukan protokol http — WebGL dan modul ES tidak berjalan lewat file://. Server statis apa pun cukup:

# Python
python -m http.server 8080

# atau Node
npx serve .

Lalu buka http://localhost:8080.

Akun demo tersedia di halaman masuk; kata sandinya apa saja (tidak diverifikasi pada purwarupa frontend). Tombol Setel ulang data demo mengembalikan seluruh data ke keadaan awal.

---

Struktur

├── index.html              Landing page publik
├── masuk.html              Halaman masuk
├── *.html                  19 halaman aplikasi
│
├── css/
│   ├── tokens.css          Token desain (warna, bayangan neumorphic, radius)
│   ├── base.css            Reset dan utilitas
│   ├── components.css      Kartu, tombol, tabel, keadaan kosong
│   ├── layout.css          Shell aplikasi: sidebar, topbar, konten
│   ├── features.css        Gaya khusus fitur
│   ├── mobile.css          Penyesuaian ponsel dan tablet
│   ├── decor.css           Lapisan hiasan SVG dan blok penjelas
│   ├── arm3d.css           Panggung penampil 3D
│   └── landing.css         Landing page
│
├── js/
│   ├── lib/                Utilitas mandiri
│   │   ├── utils.js        Bantuan DOM, tanggal, angka
│   │   ├── icons.js        Ikon UI berukuran kecil
│   │   ├── decor.js        11 motif hiasan SVG prosedural
│   │   ├── illustrations.js  Ilustrasi naratif + 9 adegan keadaan kosong
│   │   ├── store.js        Persistensi localStorage
│   │   ├── ui.js           Toast, modal, kartu statistik, keadaan kosong
│   │   └── chart.js        Grafik garis/batang tanpa dependensi
│   │
│   ├── core/               Logika domain
│   │   ├── auth.js         Peran, sesi, penjagaan halaman
│   │   ├── seed.js         Pembangkit data penelitian demo
│   │   ├── device.js       Simulator lengan: 4 kanal EMG, 8 pola cengkeram
│   │   ├── analytics.js    Kepatuhan, tren nyeri, ringkasan pasien
│   │   ├── study.js        Instrumen penelitian, fase A-B-A, kejadian
│   │   ├── notify.js       Pengingat berjenjang
│   │   └── shell.js        Sidebar, topbar, navigasi per peran
│   │
│   ├── components/         Komponen visual
│   │   ├── arm-3d.js       Penampil 3D + ArmStage (pengganti ArmView)
│   │   ├── arm-view.js     Lengan SVG 2D (cadangan)
│   │   ├── emg-scope.js    Osiloskop sinyal EMG
│   │   ├── mirror.js       Terapi cermin berbasis kamera
│   │   └── ...
│   │
│   ├── pages/              Satu modul per halaman
│   └── vendor/three/       three.js 0.160.0 (di-vendor, bare import dipatch)
│
├── assets/
│   ├── 3d/                 asta-arm.blend, asta-arm.glb
│   └── render/             Render Blender; turunan siap-web di render/web/
│
└── tools/
    ├── blender/            Skrip pembangun model dan perender
    ├── optimize_renders.py Render mentah -> turunan siap-web
    ├── verify-3d.js        Uji penampil 3D dengan peramban sungguhan
    └── ...                 Perkakas video dan tangkapan layar

---

Model 3D

Geometri lengan tidak dipahat manual — seluruhnya dibangkitkan skrip Python di Blender. Satu angka diubah, model tercetak ulang konsisten; hal yang penting untuk alat yang harus pas dengan tubuh berbeda-beda.

BLENDER="/c/Program Files/Blender Foundation/Blender 5.2/blender.exe"

# Bangun model -> assets/3d/asta-arm.{blend,glb}
"$BLENDER" --background --python tools/blender/asta_arm.py

# Render studio -> assets/render/**
"$BLENDER" --background --python tools/blender/render_asta.py -- --preset all --samples 96

# Turunkan untuk web (15 MB -> ~1 MB)
python tools/optimize_renders.py

Rinciannya — konvensi sumbu, hierarki sendi, dan cara nilai pencahayaan dikalibrasi — ada di tools/blender/README.md.

Di sisi web, js/components/arm-3d.js memuat .glb tersebut dan menggerakkannya langsung dari sinyal EMG: pose jari terinterpolasi halus, elektroda menyala mengikuti kekuatan kanal, dan cincin denyut muncul saat umpan balik haptik aktif. Tersedia tiga tingkat penurunan mutu otomatis:

1. WebGL — model 3D penuh, dapat diputar dengan seret
2. Sprite — 36 bingkai render turntable, tetap dapat diputar (tanpa WebGL)
3. SVG — lengan 2D arm-view.js

Kontrak antara Blender dan web adalah nama node: arm-3d.js mencari JNT_<jari>_<ruas> dan EL_<kanal>. Mengganti nama di skrip Blender berarti harus mengganti polanya di arm-3d.js juga.

---

Sistem visual

Seluruh gambar dekoratif dibangkitkan dari kode, bukan aset yang diimpor — ukuran unduhannya nol dan warnanya ikut token tema lewat currentColor.

• js/lib/decor.js — 11 motif latar: pulse (jejak EMG), neuro (peta simpul saraf), circuit, orbit, wave, bars, grid, digits, shield, timeline, mesh. Bentuknya deterministik: benih yang sama selalu menghasilkan gambar identik, jadi tampilan halaman tidak berubah tiap dimuat. Motif dipetakan ke halaman menurut maknanya, lalu dipasang otomatis oleh Shell.mount.

• js/lib/illustrations.js — ilustrasi naratif (skema lengan, jalur sinyal, lingkar telerehabilitasi, terapi cermin), generator avatar parametrik, 8 ikon fitur, dan 9 adegan keadaan kosong yang dipakai UI.empty.

Semua hiasan aria-hidden, tidak menerima pointer, dan otomatis dilepas pada prefers-contrast: more maupun saat dicetak.

---

Video showreel

Dua showreel 1920x1080 (16:9, 30 fps, ±3 menit) yang disusun sebagai profil perusahaan: masalah → produk → cara kerja → pemakaian per peran → spesifikasi → ajakan mencoba.

Berkas	Isi
ASTA-showreel-desktop-1080p.mp4	Aplikasi dalam mockup jendela peramban
ASTA-showreel-android-1080p.mp4	Aplikasi dalam mockup ponsel

Keduanya dirakit dari sumber yang sama; hanya lebar iframe-nya yang berbeda, sehingga tata letak ponsel dan desktop tampil apa adanya.

Susunannya berselang antara dua jenis segmen:

• Adegan halaman — 15 halaman aplikasi yang digulirkan, masing-masing didampingi badge peran, judul, ringkasan, dan tiga butir penjelas yang muncul bergiliran.
• Kartu penjelas — 9 kartu diam berisi paparan: masalah yang dituju, empat langkah cara kerja beserta rantai pemrosesan sinyal, pembatas tiap bagian, tabel spesifikasi, dan catatan teknis di balik layar.

Seluruh angka pada kartu diambil dari konfigurasi alat yang sesungguhnya (js/core/device.js) dan dari model Blender. Tidak ada klaim jumlah pengguna, testimoni, maupun hasil klinis — ASTA masih purwarupa penelitian.

node tools/showreel/record.js --variant desktop   # frame -> video-showreel/
node tools/showreel/build.js  --variant desktop   # frame -> MP4
node tools/showreel/capcut.js --variant desktop   # MP4 -> proyek CapCut
node tools/showreel/verify.js                     # periksa kedua video

Ganti desktop dengan android untuk varian satunya. Tambahkan --only 03,07 pada record.js untuk merekam sebagian adegan saja saat memeriksa perubahan; kartu ikut dilewati supaya pemeriksaan tetap cepat.

Memerlukan playwright. Bila belum ada: PLAYWRIGHT_SKIP_BROWSER_DOWNLOAD=1 npm i --no-save playwright — perekam memakai Chromium yang sudah ada di %LOCALAPPDATA%\ms-playwright.

Daftar halaman, butir penjelas, durasi, dan urutan tayangnya ada di tools/showreel/scenes.js; isi kartu ada pada objek CARDS di tools/showreel/stage.html.

Cara kerjanya. tools/showreel/stage.html adalah panggung 1920x1080 yang memuat aplikasi di dalam <iframe> pada ukuran aslinya, lengkap dengan mockup perangkat, panel penjelas, lockup merek, dan bilah progres. Satu tangkapan layar panggung itu sudah menjadi satu frame video yang final — tidak ada tahap compositing terpisah, dan teksnya tetap tajam 1:1 tanpa penskalaan.

Posisi gulir dan kemunculan butir penjelas dihitung per frame lalu disetel langsung, bukan lewat animasi CSS. Dengan begitu gerakannya terikat pada laju frame video, bebas jitter, dan identik bila perekaman diulang.

Frame mentah (±1,7 GB per varian) dan klip per adegan tidak masuk repositori; keduanya dapat dibuat ulang dengan perintah di atas. Proyek CapCut (capcut-showreel-*/) menyimpan salinan klipnya sendiri, jadi dapat langsung dibuka untuk menambah musik atau menyunting lanjut.

---

Pengujian

node tools/verify-3d.js     # penampil 3D di peramban sungguhan

Skrip ini menyalakan server statis lokal, membuka tiap halaman ber-3D dengan Chromium, lalu memastikan: tidak ada galat JavaScript, tidak ada berkas 404, penampil mencapai keadaan siap, dan ruas jari benar-benar berputar saat pose diubah (14 ruas ditemukan, selisih fleksi terukur dalam radian).

Memerlukan playwright. Bila peramban bawaannya belum terunduh, skrip memakai Chromium yang sudah ada di %LOCALAPPDATA%\ms-playwright.

---

Deployment

Firebase Hosting, proyek asta-id:

firebase deploy --only hosting --project asta-id

firebase.json mengecualikan perkakas dan media mentah dari unggahan, serta menetapkan header cache: HTML selalu divalidasi ulang, sedangkan model 3D dan render dianggap tetap (immutable, 7 hari).

---

Status

Purwarupa penelitian yang masih berjalan. Bagian Tim pada landing page sengaja masih berupa penanda — nama dan potret asli belum dimasukkan.

Belum ada berkas lisensi, sehingga hak cipta sepenuhnya tetap pada penulis.