System Requirements Document for pakaian-pose

1. Introduction

pakaian-pose adalah alat transformasi gambar berbasis AI untuk penggunaan pribadi. Alat ini menerima dua gambar: Gambar 1 sebagai sumber orang dan Gambar 2 sebagai sumber pakaian, pose, lokasi, dan gaya. Sistem menghasilkan satu gambar gabungan yang menerapkan pakaian, pose, lokasi, dan gaya dari Gambar 2 ke Gambar 1 dengan sangat detail dan akurat, sementara identitas visual Gambar 1 — wajah, bentuk wajah, gaya rambut, warna rambut, warna kulit, tekstur kulit, dan postur tubuh — dipertahankan tanpa perubahan.

Alat ini dirancang untuk satu pengguna pribadi (Heru Pranoto) dan bukan alat publik multi-pengguna. Seluruh alur kerja dijalankan secara lokal/pribadi: unggah dua gambar, tekan satu tombol untuk menghasilkan, lihat hasil, lalu simpan atau unduh untuk pemakaian pribadi.

Audiens: Pengguna pribadi yang bekerja sendiri, biasanya pada malam hari di mesin pribadi, dengan kebutuhan presisi forensik terhadap fidelitas identitas manusia pada gambar sumber.

2. System Overview

Sistem pakaian-pose adalah aplikasi web satu pengguna yang menyediakan alur transformasi gambar end-to-end:

1. Landing — halaman awal anonim yang menjelaskan alat, pengguna pribadi yang dituju, dan alur penerapan gaya Gambar 2 pada Gambar 1.
2. Upload — mengelola unggahan Gambar 1 (sumber orang) dan Gambar 2 (sumber pakaian, pose, lokasi, gaya) dengan peran yang terlihat jelas.
3. Generate — menyediakan satu tombol untuk menjalankan proses penggabungan setelah kedua gambar tersedia.
4. Result — menampilkan gambar gabungan dengan pakaian, pose, lokasi, dan gaya Gambar 2 serta identitas visual Gambar 1 yang dipertahankan.
5. Export — menyediakan penyelesaian penyimpanan atau pengunduhan hasil gambar gabungan untuk pemakaian pribadi.

Aktor: Satu persona aktif manusia — Pengguna Pribadi (Heru). Tidak ada aktor manusia lain. Sistem AI pemrosesan gambar adalah aktor non-persona (system process) yang mendukung alur.

Kepemilikan akses: Seluruh halaman adalah halaman aplikasi milik aplikasi (owner: application) dengan access_requirement: none — tidak ada autentikasi, tidak ada akun, tidak ada sesi pengguna. Ini konsisten dengan batasan eksplisit bahwa alat ini untuk keperluan pribadi, bukan alat publik multi-pengguna.

Batasan sempit (exclusions):

• Bukan alat publik multi-pengguna; tidak ada fitur kolaborasi, berbagi, atau multi-tenant.
• Tidak ada akun pengguna, login, atau manajemen identitas.
• Tidak ada galeri publik, feed, atau berbagi sosial.
• Tidak ada fitur di luar transformasi dua-gambar-ke-satu-gambar.

2a. Product Interpretation and Delivery Boundary

pakaian-pose adalah alat pribadi yang dibangun sebagai aplikasi web satu pengguna. Pengguna mengakses alat melalui browser di mesin pribadinya. Tidak ada lapisan identitas aplikasi: tidak ada pendaftaran, tidak ada login, tidak ada sesi yang perlu dilanjutkan. Setiap kunjungan adalah sesi kerja mandiri yang dimulai dari Landing.

Kepemilikan delivery: Seluruh antarmuka pengguna adalah halaman kustom milik aplikasi (first-party). Pemrosesan AI dijalankan oleh backend aplikasi yang memanggil model pemrosesan gambar. Tidak ada permukaan pihak ketiga yang menghadap pengguna, tidak ada destinasi eksternal yang harus dikunjungi pengguna, dan tidak ada alur headless.

Batas saat ini vs. masa depan: Seluruh perilaku yang dijelaskan dalam dokumen ini adalah current (delivery_horizon: current). Tidak ada fitur masa depan yang dinyatakan dalam sumber otoritatif. Tidak ada halaman, modul, atau kemampuan tambahan yang diinferensikan di luar yang diperlukan untuk membuat alur yang diterima dapat dijalankan.

Kontrak fidelitas: Inti produk adalah kontrak fidelitas — Gambar 2 menyumbang pakaian, pose, lokasi, dan gaya; Gambar 1 menyumbang identitas yang tidak boleh berubah. Kontrak ini ditampilkan kepada pengguna sebelum generasi dan ditampilkan kembali sebagai checklist setelah hasil tersedia.

2b. Source Content Inventory

Tidak ada content_source yang dinyatakan dalam directive referensi. Bagian ini dihilangkan sesuai aturan.

2c. Page Content and Component Coverage

Landing

• Informasi/state: Halaman awal anonim. Menampilkan wordmark PAKAIAN / POSE flush left dalam Archivo uppercase. Satu kalimat kontrak teks di kolom kiri. Bidang hitam besar di kolom kanan dengan kotak merah kecil dan label mono vertikal.
• Aksi utama: Tombol MULAI → (persegi panjang merah datar, uppercase mono) yang membawa pengguna ke Upload.
• Aksi pendukung: Tidak ada.
• Entitas domain: Tidak ada state yang disimpan. Halaman statis informasional.
• Tanggung jawab komponen:
  • Wordmark PAKAIAN / POSE — Archivo uppercase, clamp(40px, 9vw, 96px), flush left, melintasi ~6 kolom.
  • Aturan merah tipis — garis 1px #C8102E dari baseline wordmark ke tepi kanan viewport.
  • Tiga baris teks kontrak mono — di kolom kiri 5 kolom:
    • GAMBAR 1: ORANG — WAJAH, RAMBUT, KULIT, POSTUR TIDAK BERUBAH.
    • GAMBAR 2: PAKAIAN, POSE, LOKASI, GAYA — DITERAPKAN.
    • HASIL: SATU GAMBAR.
  • Tombol MULAI → — persegi panjang merah datar #C8102E, tanpa radius, tanpa shadow, tanpa glow, label uppercase mono dengan awalan →.
  • Kotak merah kecil — di pusat optik kolom kanan 7 kolom.
  • Label mono vertikal — PRIBADI / SATU PENGGUNA diputar 90° di sepanjang margin kanan.
• State:
  • Loading: Tidak berlaku (halaman statis).
  • Empty: Tidak berlaku.
  • Success: Halaman dirender; tombol MULAI → dapat diklik.
  • Error: Tidak berlaku.
  • Recovery: Tidak berlaku.

Upload

• Informasi/state: Dua slot spesimen berdampingan di desktop (ditumpuk pada 375px). Setiap slot menampilkan gambar yang diunggah tanpa crop di dalam bingkai bergaris, dengan caption mono nama file dan dimensi piksel, serta tanda registrasi sudut kecil.
• Aksi utama: Mengunggah Gambar 1 ke slot 01 / SUMBER ORANG dan Gambar 2 ke slot 02 / SUMBER PAKAIAN · POSE · LOKASI · GAYA.
• Aksi pendukung: Mengganti gambar yang sudah diunggah di slot mana pun.
• Entitas domain:
  • Gambar 1 (Sumber Orang) — gambar yang diunggah pengguna; menyumbang identitas yang dipertahankan.
  • Gambar 2 (Sumber Pakaian, Pose, Lokasi, Gaya) — gambar yang diunggah pengguna; menyumbang atribut yang diterapkan.
  • Metadata gambar — nama file, dimensi piksel.
• Tanggung jawab komponen:
  • Slot 01 / SUMBER ORANG — bingkai bergaris dengan tanda registrasi sudut; label 01 / SUMBER ORANG dalam Saville red #C8102E; caption mono nama file dan dimensi di bawah.
  • Slot 02 / SUMBER PAKAIAN · POSE · LOKASI · GAYA — bingkai bergaris dengan tanda registrasi sudut; label 02 / SUMBER PAKAIAN · POSE · LOKASI · GAYA dalam paper white #F2F0EA; caption mono nama file dan dimensi di bawah.
  • Hairline tengah — garis tipis di antara kedua slot dengan kotak merah kecil di tengahnya, menandai transformasi.
  • Daftar bernomor kontrak fidelitas — tujuh atribut identitas yang tidak akan berubah, ditampilkan sebagai kolom mono bernomor di bawah slot:
    1. wajah
    2. bentuk wajah
    3. gaya rambut

4. warna rambut
5. warna kulit
6. tekstur kulit
7. postur tubuh

• State:
  • Loading: Saat gambar sedang diproses setelah dipilih, slot menampilkan indikator mono sederhana (tanpa spinner teatrikal).
  • Empty: Kedua slot kosong dengan bingkai bergaris dan caption mono yang menjelaskan peran masing-masing.
  • Success: Gambar muncul di slot dengan crossfade opacity 200ms; caption mono menampilkan nama file dan dimensi.
  • Error: Jika file tidak dapat dibaca atau bukan format gambar yang didukung, slot menampilkan pesan mono error dan pengguna dapat memilih file lain.
  • Recovery: Pengguna dapat mengganti gambar di slot mana pun kapan saja sebelum menjalankan generasi.

Generate

• Informasi/state: Satu bilah merah penuh lebar yang dipasang di bawah kedua slot. Status mono di atas bilah menunjukkan kesiapan. Bilah dinonaktifkan (warna abu-abu #6E6E6A) sampai kedua gambar tersedia.
• Aksi utama: Menekan tombol → GENERATE untuk menjalankan proses penggabungan setelah kedua gambar tersedia.
• Aksi pendukung: Tidak ada.
• Entitas domain:
  • Status kesiapan — apakah kedua gambar sudah tersedia.
  • Status generasi — idle, running, selesai, gagal.
• Tanggung jawab komponen:
  • Bilah Generate — persegi panjang merah datar #C8102E, tanpa radius, tanpa shadow, tanpa glow, label uppercase mono dengan awalan →.
  • Status mono di atas bilah — menyatakan apakah kedua gambar sudah tersedia atau belum.
  • Aturan merah 1px — menggambar diri dari kiri ke kanan selama 400ms ketika gambar kedua hadir dan kontrol Generate terbuka.
  • Penghitung mono — selama generasi, bilah merah bertahan dan penghitung mono berdetak di tempat (tanpa spinner teatrikal).
• State:
  • Loading: Selama generasi, bilah merah bertahan dan penghitung mono berdetak di tempat.
  • Empty: Bilah dinonaktifkan (abu-abu #6E6E6A) sampai kedua gambar tersedia.
  • Success: Generasi selesai; transisi fade 300ms dari grid unggah ke hasil.
  • Error: Jika generasi gagal, status mono menampilkan pesan error dan pengguna dapat mencoba lagi.
  • Recovery: Pengguna dapat kembali ke Upload untuk mengganti gambar dan menjalankan ulang generasi.

Result

• Informasi/state: Gambar gabungan ditampilkan besar dan rata kiri melintasi 8 kolom, di dalam bingkai paper-white 1px. Blok metadata 4 kolom di sebelah kanan mencantumkan atribut yang dipertahankan sebagai kolom yang dicentang.
• Aksi utama: Melihat gambar gabungan.
• Aksi pendukung: Melanjutkan ke Export untuk menyimpan atau mengunduh.
• Entitas domain:
  • Gambar gabungan — hasil transformasi yang menerapkan pakaian, pose, lokasi, dan gaya Gambar 2 ke Gambar 1 dengan identitas Gambar 1 dipertahankan.
  • Metadata hasil — nama file, dimensi, label UNTUK PENGGUNAAN PRIBADI.
  • Checklist atribut yang dipertahankan — tujuh atribut identitas yang dicentang.
• Tanggung jawab komponen:
  • Bingkai gambar hasil — bingkai paper-white 1px, gambar tanpa crop, tidak ada lapisan di atasnya.
  • Strip metadata mono — di bawah gambar, menampilkan nama file, dimensi, dan UNTUK PENGGUNAAN PRIBADI.
  • Blok metadata 4 kolom — di sebelah kanan, mencantumkan tujuh atribut yang dipertahankan sebagai kolom yang dicentang:
    1. wajah ✓
    2. bentuk wajah ✓
    3. gaya rambut ✓
    4. warna rambut ✓
    5. warna kulit ✓
    6. tekstur kulit ✓
    7. postur tubuh ✓
• State:

• Loading: Transisi fade 300ms dari grid unggah ke hasil.
• Empty: Tidak berlaku (halaman hanya muncul setelah generasi selesai).
• Success: Gambar gabungan ditampilkan dengan checklist atribut yang dipertahankan.
• Error: Jika hasil tidak dapat ditampilkan, pesan mono error ditampilkan dan pengguna dapat kembali ke Generate.
• Recovery: Pengguna dapat kembali ke Upload atau Generate untuk menjalankan ulang.

Export

• Informasi/state: Satu blok mono dengan format dan unduhan, plus baris tenang UNTUK PENGGUNAAN PRIBADI.
• Aksi utama: Menyimpan atau mengunduh gambar gabungan.
• Aksi pendukung: Tidak ada.
• Entitas domain:
  • Gambar gabungan — hasil yang akan disimpan/diunduh.
  • Format file — format gambar untuk ekspor.
• Tanggung jawab komponen:
  • Blok mono format — menampilkan format file yang tersedia untuk unduhan.
  • Tombol unduh — memicu penyimpanan atau pengunduhan gambar gabungan.
  • Baris tenang — UNTUK PENGGUNAAN PRIBADI dalam mono.
• State:
  • Loading: Tidak berlaku.
  • Empty: Tidak berlaku (halaman hanya muncul setelah hasil tersedia).
  • Success: Gambar gabungan tersimpan atau terunduh.
  • Error: Jika unduhan gagal, pesan mono error ditampilkan dan pengguna dapat mencoba lagi.
  • Recovery: Pengguna dapat mencoba unduhan lagi atau kembali ke Result.

3. Functional Requirements

FR-01 — Unggah dua gambar dengan peran yang jelas As a Pengguna Pribadi (Heru), I should mengunggah dua gambar — Gambar 1 sebagai sumber orang dan Gambar 2 sebagai sumber pakaian, pose, lokasi, dan gaya — dengan peran masing-masing ditampilkan secara jelas sebelum proses dijalankan.

• Provenance: explicit
• Trigger/input: Pengguna memilih file gambar untuk slot 01 / SUMBER ORANG dan slot 02 / SUMBER PAKAIAN · POSE · LOKASI · GAYA.
• Observable result: Kedua gambar muncul di slot masing-masing dengan caption mono nama file dan dimensi; label peran terlihat jelas.
• Access state: Halaman Upload dapat diakses tanpa autentikasi (access_requirement: none).
• Failure/recovery: Jika file tidak dapat dibaca, slot menampilkan pesan mono error dan pengguna dapat memilih file lain.
• Continuation: Setelah kedua gambar tersedia, pengguna dapat melanjutkan ke Generate.

FR-02 — Kedua gambar tersedia sebelum tombol penggabungan dijalankan As a Pengguna Pribadi (Heru), I should memastikan kedua gambar tersedia sebelum tombol penggabungan dijalankan.

• Provenance: required_inference
• Trigger/input: Pengguna mengunggah gambar ke kedua slot.
• Observable result: Tombol Generate terbuka (merah #C8102E) hanya setelah kedua gambar hadir; aturan merah 1px menggambar diri dari kiri ke kanan selama 400ms.
• Access state: Halaman Generate dapat diakses tanpa autentikasi.
• Failure/recovery: Jika salah satu gambar belum diunggah, tombol tetap dinonaktifkan (abu-abu #6E6E6A).
• Continuation: Pengguna dapat menekan tombol Generate setelah kedua gambar tersedia.

FR-03 — Menjalankan proses dengan satu tombol As a Pengguna Pribadi (Heru), I should menjalankan alur kerja dengan menekan satu tombol untuk menghasilkan hasil setelah kedua gambar diunggah.

• Provenance: explicit
• Trigger/input: Pengguna menekan tombol → GENERATE.
• Observable result: Proses penggabungan dimulai; bilah merah bertahan dan penghitung mono berdetak di tempat.
• Access state: Halaman Generate dapat diakses tanpa autentikasi.
• Failure/recovery: Jika generasi gagal, status mono menampilkan pesan error dan pengguna dapat mencoba lagi.
• Continuation: Setelah generasi selesai, pengguna dibawa ke Result dengan transisi fade 300ms.

FR-04 — Pemrosesan AI menghasilkan gambar gabungan dengan identitas Gambar 1 dipertahankan As a Pengguna Pribadi (Heru), I should mendapatkan gambar gabungan yang dihasilkan oleh pemrosesan AI dengan atribut identitas Gambar 1 tetap dipertahankan.

• Provenance: required_inference
• Trigger/input: Tombol Generate ditekan dengan kedua gambar tersedia.
• Observable result: Gambar gabungan dihasilkan yang menerapkan pakaian, pose, lokasi, dan gaya Gambar 2 ke Gambar 1, sementara wajah, bentuk wajah, gaya rambut, warna rambut, warna kulit, tekstur kulit, dan postur tubuh Gambar 1 tidak berubah.
• Access state: Pemrosesan berjalan di backend aplikasi; tidak ada autentikasi yang diperlukan.
• Failure/recovery: Jika pemrosesan gagal, pengguna dapat menjalankan ulang generasi.
• Continuation: Hasil tersedia untuk dilihat di Result.

FR-05 — Menerapkan pakaian, pose, lokasi, dan gaya dari Gambar 2 dengan sangat detail dan akurat As a Pengguna Pribadi (Heru), I should mendapatkan gambar gabungan yang menerapkan pakaian, pose, lokasi, dan gaya dari Gambar 2 dengan sangat detail dan akurat.

• Provenance: explicit
• Trigger/input: Generasi dijalankan dengan Gambar 2 sebagai sumber gaya.
• Observable result: Gambar gabungan menampilkan pakaian, pose, lokasi, dan gaya dari Gambar 2.
• Access state: Tidak ada autentikasi.
• Failure/recovery: Jika hasil tidak sesuai, pengguna dapat mengganti Gambar 2 dan menjalankan ulang.
• Continuation: Pengguna dapat melihat hasil di Result.

FR-06 — Mempertahankan identitas Gambar 1 tanpa perubahan As a Pengguna Pribadi (Heru), I should mendapatkan gambar gabungan di mana wajah, bentuk wajah, gaya rambut, warna rambut, warna kulit, tekstur kulit, dan postur tubuh dari Gambar 1 tidak berubah.

• Provenance: explicit
• Trigger/input: Generasi dijalankan dengan Gambar 1 sebagai sumber orang.
• Observable result: Ketujuh atribut identitas Gambar 1 tetap tidak berubah pada gambar gabungan; checklist di Result menampilkan ketujuh atribut sebagai tercentang.
• Access state: Tidak ada autentikasi.
• Failure/recovery: Jika ada atribut yang berubah, pengguna dapat menjalankan ulang generasi.
• Continuation: Pengguna dapat memverifikasi hasil melalui checklist di Result.

FR-07 — Melihat gambar gabungan As a Pengguna Pribadi (Heru), I should melihat gambar gabungan dengan pakaian, pose, lokasi, dan gaya Gambar 2 serta identitas visual Gambar 1 yang dipertahankan.

• Provenance: required_inference
• Trigger/input: Generasi selesai.
• Observable result: Gambar gabungan ditampilkan besar dan rata kiri di dalam bingkai paper-white 1px, dengan strip metadata mono di bawahnya dan blok metadata 4 kolom di sebelah kanan.
• Access state: Halaman Result dapat diakses tanpa autentikasi.
• Failure/recovery: Jika hasil tidak dapat ditampilkan, pesan mono error ditampilkan dan pengguna dapat kembali ke Generate.
• Continuation: Pengguna dapat melanjutkan ke Export.

FR-08 — Hasil tersedia sebelum menyimpan atau mengunduh As a Pengguna Pribadi (Heru), I should memastikan hasil tersedia sebelum menyimpan atau mengunduhnya.

• Provenance: required_inference
• Trigger/input: Generasi selesai dan gambar gabungan ditampilkan di Result.
• Observable result: Tombol unduh di Export tersedia hanya setelah hasil ada.
• Access state: Halaman Export dapat diakses tanpa autentikasi.
• Failure/recovery: Jika hasil belum tersedia, pengguna diarahkan kembali ke Generate.
• Continuation: Pengguna dapat menyimpan atau mengunduh hasil.

FR-09 — Menyimpan atau mengunduh hasil untuk pemakaian pribadi As a Pengguna Pribadi (Heru), I should menyimpan atau mengunduh gambar gabungan untuk pemakaian pribadi.

• Provenance: required_inference
• Trigger/input: Pengguna menekan tombol unduh di Export.
• Observable result: Gambar gabungan tersimpan atau terunduh; baris tenang UNTUK PENGGUNAAN PRIBADI ditampilkan.
• Access state: Halaman Export dapat diakses tanpa autentikasi.
• Failure/recovery: Jika unduhan gagal, pesan mono error ditampilkan dan pengguna dapat mencoba lagi.
• Continuation: Pengguna dapat kembali ke Result atau memulai alur baru dari Landing.

FR-10 — Penggunaan terbatas untuk keperluan pribadi As a Pengguna Pribadi (Heru), I should menggunakan alat ini hanya untuk keperluan pribadi, bukan sebagai alat publik yang dipakai banyak orang.

• Provenance: explicit
• Trigger/input: Pengguna mengakses alat.
• Observable result: Tidak ada fitur multi-pengguna, berbagi, kolaborasi, atau akun; seluruh halaman dapat diakses tanpa autentikasi.
• Access state: access_requirement: none untuk semua halaman.
• Failure/recovery: Tidak berlaku.
• Continuation: Tidak berlaku.

4. User Personas

Pengguna Pribadi (Heru)

Konteks produk: Heru adalah satu-satunya pengguna alat pakaian-pose. Ia menggunakan alat ini untuk keperluan pribadi, bukan untuk publik atau multi-pengguna. Ia bekerja sendiri, biasanya pada malam hari di mesin pribadinya, dengan kebutuhan presisi forensik terhadap fidelitas identitas manusia pada gambar sumber.

Tujuan utama: Menghasilkan satu gambar gabungan di mana pakaian, pose, lokasi, dan gaya dari Gambar 2 diterapkan pada Gambar 1 dengan sangat detail dan akurat, sementara wajah, bentuk wajah, gaya rambut, warna rambut, warna kulit, tekstur kulit, dan postur tubuh Gambar 1 tetap tidak berubah.

Tanggung jawab yang diterima:

• Mengunggah Gambar 1 sebagai sumber orang dan Gambar 2 sebagai sumber pakaian, pose, lokasi, dan gaya.
• Memastikan peran kedua gambar terlihat jelas sebelum proses dijalankan.
• Menjalankan proses penggabungan dengan menekan satu tombol setelah kedua gambar tersedia.
• Melihat gambar gabungan dengan pakaian, pose, lokasi, dan gaya Gambar 2 serta identitas visual Gambar 1 yang dipertahankan.
• Menyimpan atau mengunduh hasil gambar gabungan untuk pemakaian pribadi.

Input atau keputusan relevan:

• Memilih file Gambar 1 (sumber orang).
• Memilih file Gambar 2 (sumber pakaian, pose, lokasi, gaya).
• Memutuskan kapan menjalankan generasi (setelah kedua gambar tersedia).
• Memutuskan apakah hasil memenuhi kontrak fidelitas (tujuh atribut identitas tidak berubah).
• Memutuskan untuk menyimpan atau mengunduh hasil.

Interaksi dengan peserta lain: Tidak ada peserta manusia lain. Heru adalah satu-satunya aktor manusia. Sistem AI pemrosesan gambar adalah aktor non-persona yang mendukung alur.

Keberhasilan yang dapat diamati: Gambar gabungan yang dapat ia lihat dan simpan untuk pemakaian pribadi, dengan pakaian, pose, lokasi, dan gaya dari Gambar 2 diterapkan secara detail dan akurat, dan ketujuh atribut identitas Gambar 1 tetap tidak berubah.

Batasan yang didukung sumber: Penggunaan terbatas untuk keperluan pribadi; bukan alat publik multi-pengguna. Tidak ada akun, login, atau fitur kolaborasi.

5. Core User Flows

Alur 1: Transformasi Gambar Pribadi (Heru)

Konteks awal: Heru membuka alat pakaian-pose di browser pada mesin pribadinya. Ia memiliki dua file gambar: Gambar 1 (orang) dan Gambar 2 (referensi pakaian, pose, lokasi, gaya).

1. Landing — Heru membuka halaman Landing. Ia melihat wordmark PAKAIAN / POSE flush left, aturan merah tipis dari baseline wordmark ke tepi kanan viewport, dan tiga baris teks kontrak mono di kolom kiri:

   • GAMBAR 1: ORANG — WAJAH, RAMBUT, KULIT, POSTUR TIDAK BERUBAH.
   • GAMBAR 2: PAKAIAN, POSE, LOKASI, GAYA — DITERAPKAN.
   • HASIL: SATU GAMBAR. Ia juga melihat kotak merah kecil di pusat optik kolom kanan dan label mono vertikal PRIBADI / SATU PENGGUNA di margin kanan. Ia menekan tombol MULAI →.

2. Upload — Heru tiba di halaman Upload. Ia melihat dua slot spesimen berdampingan (ditumpuk pada 375px):

   • Slot 01 / SUMBER ORANG dengan label Saville red #C8102E.
   • Slot 02 / SUMBER PAKAIAN · POSE · LOKASI · GAYA dengan label paper white #F2F0EA. Di antara kedua slot ada hairline tengah dengan kotak merah kecil. Di bawah slot ada daftar bernomor kontrak fidelitas: tujuh atribut identitas yang tidak akan berubah (wajah, bentuk wajah, gaya rambut, warna rambut, warna kulit, tekstur kulit, postur tubuh).

3. Unggah Gambar 1 — Heru memilih file Gambar 1 dan mengunggahnya ke slot 01 / SUMBER ORANG. Gambar muncul dengan crossfade opacity 200ms; caption mono menampilkan nama file dan dimensi piksel; tanda registrasi sudut terlihat.

4. Unggah Gambar 2 — Heru memilih file Gambar 2 dan mengunggahnya ke slot 02 / SUMBER PAKAIAN · POSE · LOKASI · GAYA. Gambar muncul dengan crossfade opacity 200ms; caption mono menampilkan nama file dan dimensi piksel.

5. Kedua gambar tersedia — Setelah kedua gambar hadir, aturan merah 1px menggambar diri dari kiri ke kanan selama 400ms dan tombol Generate terbuka (merah #C8102E). Status mono di atas bilah menyatakan bahwa kedua gambar sudah tersedia.

6. Generate — Heru menekan tombol → GENERATE. Bilah merah bertahan dan penghitung mono berdetak di tempat. Tidak ada spinner teatrikal.

7. Pemrosesan AI — Sistem AI memproses kedua gambar: menerapkan pakaian, pose, lokasi, dan gaya dari Gambar 2 ke Gambar 1 dengan sangat detail dan akurat, sementara wajah, bentuk wajah, gaya rambut, warna rambut, warna kulit, tekstur kulit, dan postur tubuh Gambar 1 tetap tidak berubah.

8. Result — Setelah generasi selesai, transisi fade 300ms membawa Heru dari grid unggah ke Result. Gambar gabungan ditampilkan besar dan rata kiri melintasi 8 kolom di dalam bingkai paper-white 1px. Strip metadata mono di bawahnya menampilkan nama file, dimensi, dan UNTUK PENGGUNAAN PRIBADI. Blok metadata 4 kolom di sebelah kanan mencantumkan tujuh atribut yang dipertahankan sebagai kolom yang dicentang:

   • wajah ✓
   • bentuk wajah ✓
   • gaya rambut ✓
   • warna rambut ✓
   • warna kulit ✓
   • tekstur kulit ✓
   • postur tubuh ✓

9. Verifikasi — Heru memeriksa gambar gabungan dan checklist atribut yang dipertahankan. Jika ia puas bahwa kontrak fidelitas terpenuhi, ia melanjutkan ke Export.

10. Export — Heru tiba di halaman Export. Ia melihat blok mono dengan format dan unduhan, plus baris tenang UNTUK PENGGUNAAN PRIBADI. Ia menekan tombol unduh.

11. Hasil — Gambar gabungan tersimpan atau terunduh untuk pemakaian pribadi. Heru dapat kembali ke Result atau memulai alur baru dari Landing.

Kegagalan dan pemulihan:

• Jika file tidak dapat dibaca saat unggah, slot menampilkan pesan mono error dan Heru dapat memilih file lain.
• Jika generasi gagal, status mono menampilkan pesan error dan Heru dapat mencoba lagi.
• Jika hasil tidak dapat ditampilkan, pesan mono error ditampilkan dan Heru dapat kembali ke Generate.
• Jika unduhan gagal, pesan mono error ditampilkan dan Heru dapat mencoba lagi.
• Jika hasil tidak memenuhi kontrak fidelitas, Heru dapat kembali ke Upload untuk mengganti gambar dan menjalankan ulang generasi.

Kontinuasi: Setelah hasil tersimpan atau terunduh, Heru dapat memulai alur baru dari Landing untuk transformasi berikutnya.

6. Visuals Colors and Theme

Muse: Peter Saville. Headline: Austere reference: one exact artefact, one coded colour, a lot of silence.

Mode: Dark mode.

Palet (peran):

Tidak ada hue kedua di mana pun — tidak ada teal, tidak ada violet, tidak ada gradien. Warna adalah kode, bukan dekorasi.

Tipografi:

• Headings: Archivo, weight 500–600, uppercase, letterspacing +0.14em, ukuran kecil-sedang (bukan besar). Display moments (wordmark PAKAIAN/POSE dan caption hasil) menggunakan Archivo Expanded-style tracking pada clamp(40px, 9vw, 96px), selalu uppercase, selalu flush left, tidak pernah centered.
• Body dan metadata: IBM Plex Mono, 12–14px, tracking +0.06em, uppercase untuk label, sentence case untuk prosa. Body 16px mono dengan line-height 1.7 untuk teks kontrak.
• Skala: 1.25 modular dengan bottom lebar: 96/64/40/28/20/16/14/12. Display clamp(40px→96px); section headings clamp(24px→40px); label fixed 12px uppercase mono.

Shape language: Hard edges only — zero border radius pada setiap panel, tombol, input, dan bingkai gambar. Struktur berasal dari hairline 1px (#2A2A2C) dan dari full-bleed black, bukan dari kartu. Dua slot unggah digambar sebagai persegi panjang bergaris dengan tanda registrasi sudut kecil dan caption mono di bawahnya. Kontrol Generate adalah persegi panjang merah datar, tanpa shadow, tanpa glow, label uppercase mono dengan awalan →. Gambar hasil berada di dalam bingkai paper-white 1px dengan strip metadata mono di bawahnya. Tidak ada yang mengambang, tidak ada yang transparan, tidak ada soft shadow.

Layout: Grid 12 kolom ketat pada bidang near-black, margin luar generous (clamp(20px, 6vw, 96px)), konten tidak pernah centered — selalu flush left ke tepi kolom keras.

• Landing: Wordmark di kiri atas, satu kalimat teks kontrak di 5 kolom kiri, bidang hitam besar di 7 kolom kanan, dipecah hanya oleh kotak merah kecil dan baris mono DUA GAMBAR. SATU HASIL.
• Upload: Dua slot spesimen sama besar berdampingan di desktop (ditumpuk pada 375px), masing-masing dengan kode peran — 01 / SUMBER ORANG dalam merah, 02 / SUMBER PAKAIAN · POSE · LOKASI · GAYA dalam paper white — dan di bawahnya daftar bernomor tujuh atribut identitas yang tidak akan berubah.
• Generate: Satu bilah merah penuh lebar dipasang di bawah kedua slot, dinonaktifkan sampai keduanya hadir, dengan baris status mono di atasnya.
• Result: Gambar gabungan besar dan rata kiri melintasi 8 kolom, dengan blok metadata 4 kolom di sebelah kanan yang mencantumkan atribut yang dipertahankan sebagai kolom yang dicentang.
• Export: Satu blok mono dengan format dan unduhan, plus baris tenang UNTUK PENGGUNAAN PRIBADI.

Imagery: Dua foto pengguna adalah satu-satunya imagery — diperlakukan sebagai spesimen, bukan dekorasi. Setiap gambar yang diunggah ditampilkan tanpa crop di dalam slot bergaris dengan caption mono nama file dan dimensi piksel, serta tanda registrasi sudut kecil. Tidak ada stock photography, tidak ada ilustrasi, tidak ada 3D, tidak ada ikon di luar tanda geometris hairline (persegi, garis, centang). Di antara slot, hairline tunggal yang centered dengan kotak merah kecil menandai transformasi. Hasil ditampilkan pada fidelitas penuh di dalam bingkai paper-white; tidak ada yang dilapisi di atasnya.

Aksesibilitas teks dan kontrol: Headline, wordmark, label, angka, teks kartu, dan kontrol tetap utuh di dalam viewport dan container pada 375px, 768px, dan 1280px, membungkus atau menskalakan (misalnya font-size: clamp(...) dengan ukuran mobile-nya) agar pas. Tidak ada elemen lain yang menutupi bagian mana pun dari teks atau kontrol yang dapat dibaca.

7. Signature Design Concept

Konsep: Record sleeve, bukan SaaS hero.

Layar pertama adalah bidang hitam tanpa headline centered dan tanpa hero image. Wordmark PAKAIAN / POSE diset flush left dalam uppercase Archivo pada clamp(40px, 9vw, 96px) melintasi sekitar 6 kolom, dengan aturan merah tipis berjalan dari baseline wordmark sampai ke tepi kanan viewport. Di bawahnya, di 5 kolom kiri, tiga baris teks kontrak mono:

• GAMBAR 1: ORANG — WAJAH, RAMBUT, KULIT, POSTUR TIDAK BERUBAH.
• GAMBAR 2: PAKAIAN, POSE, LOKASI, GAYA — DITERAPKAN.
• HASIL: SATU GAMBAR.

Di bawahnya, persegi panjang merah datar bertuliskan MULAI → dalam uppercase mono. Tujuh kolom kanan tetap hampir seluruhnya hitam kosong, hanya menampung kotak merah kecil di pusat optik dan label mono vertikal PRIBADI / SATU PENGGUNA diputar 90° di sepanjang margin kanan.

Komposisi ini dibaca sebagai record sleeve, bukan sebagai SaaS hero. Ia hanya merekomposisi konten, state, dan kontrol yang diterima — tidak ada perilaku, halaman, atau destinasi baru.

Signature moves:

• Aturan merah hairline yang berjalan dari baseline wordmark ke tepi kanan viewport pada landing hero, dan menggambar diri dari kiri ke kanan ketika kontrol Generate terbuka.
• Dua slot spesimen yang dikodekan seperti alfabet warna: 01 / SUMBER ORANG dalam Saville red #C8102E, 02 / SUMBER PAKAIAN · POSE · LOKASI · GAYA dalam paper white #F2F0EA — peran terbaca sebelum apa pun dijalankan.
• Kontrak fidelitas dirender sebagai kolom mono bernomor dari tujuh atribut yang dipertahankan (wajah, bentuk wajah, gaya rambut, warna rambut, warna kulit, tekstur kulit, postur tubuh), ditampilkan sebelum generasi dan ditampilkan kembali sebagai checklist yang dicentang di samping hasil.
• Satu bilah Generate merah datar penuh lebar tanpa radius, tanpa shadow, dan tanpa glow, dipasang di bawah kedua slot, dinonaktifkan ke abu-abu #6E6E6A sampai kedua spesimen hadir.
• Hasil dipresentasikan sebagai artefak: tanpa crop di dalam bingkai paper-white 1px, dengan strip metadata mono di bawahnya yang memberikan nama file, dimensi, dan UNTUK PENGGUNAAN PRIBADI.

8. Interaction Model & Motion Direction

Interaction Model: Static (direction) Motion Tempo: still Hero Dimensionality: flat

Landing Hero Motion Brief:

• Focal subject: Wordmark PAKAIAN / POSE flush left dalam uppercase Archivo pada clamp(40px, 9vw, 96px), dengan aturan merah tipis berjalan dari baseline-nya ke tepi kanan viewport.
• Input → transformation → outcome thesis: Pengguna tiba di bidang hitam → membaca tiga baris teks kontrak mono yang menyatakan peran Gambar 1 dan Gambar 2 serta hasilnya → menekan tombol MULAI → untuk memulai alur transformasi. Tidak ada animasi yang mengubah konten; gerakan hanya menandai transisi state.
• Motion vocabulary: Hampir tidak ada — plafon Saville adalah keheningan. Gerakan yang diizinkan: crossfade opacity 200ms ketika gambar spesimen mendarat di slotnya; aturan merah 1px yang menggambar diri dari kiri ke kanan selama 400ms ketika gambar kedua hadir dan kontrol Generate terbuka; fade 300ms dari grid unggah ke hasil. Tidak ada parallax, tidak ada hover-lift, tidak ada scale, tidak ada bounce, tidak ada spinner teatrikal — selama generasi, bilah merah bertahan dan penghitung mono berdetak di tempat.
• Composed first frame: Bidang hitam #0B0B0C. Wordmark flush left di kiri atas. Aturan merah tipis dari baseline wordmark ke tepi kanan. Tiga baris teks kontrak mono di 5 kolom kiri. Tombol merah datar MULAI → di bawahnya. Kotak merah kecil di pusat optik 7 kolom kanan. Label mono vertikal PRIBADI / SATU PENGGUNA di margin kanan.
• Reduced-motion state: Dengan prefers-reduced-motion, semua transisi menjadi perubahan state instan tanpa crossfade, dan aturan merah muncul sudah tergambar.

9. Non-Functional Requirements

NFR-01 — Penggunaan pribadi (explicit) Sistem digunakan terbatas untuk keperluan pribadi pengguna, bukan alat publik yang dipakai banyak orang. Tidak ada fitur multi-pengguna, berbagi, kolaborasi, atau multi-tenant. Rationale: Batasan keras eksplisit dalam sumber otoritatif.

NFR-02 — Fidelitas identitas Gambar 1 (explicit) Wajah, bentuk wajah, gaya rambut, warna rambut, warna kulit, tekstur kulit, dan postur tubuh dari Gambar 1 tidak boleh berubah pada gambar gabungan. Rationale: Batasan keras eksplisit dalam sumber otoritatif.

NFR-03 — Akurasi penerapan atribut Gambar 2 (explicit) Pakaian, pose, lokasi, dan gaya harus diambil dari Gambar 2 dengan sangat detail dan akurat. Rationale: Batasan keras eksplisit dalam sumber otoritatif.

NFR-04 — Akses tanpa autentikasi (required_inference) Seluruh halaman dapat diakses tanpa autentikasi (access_requirement: none). Tidak ada akun, login, atau sesi pengguna. Rationale: Diperlukan untuk membuat alur yang diterima dapat dijalankan tanpa menambahkan kemampuan produk; konsisten dengan batasan penggunaan pribadi.

NFR-05 — Aksesibilitas teks dan kontrol (required_inference) Headline, wordmark, label, angka, teks kartu, dan kontrol tetap utuh di dalam viewport dan container pada 375px, 768px, dan 1280px. Rationale: Diperlukan untuk memastikan antarmuka dapat digunakan pada berbagai ukuran layar.

NFR-06 — Dukungan reduced-motion (required_inference) Dengan prefers-reduced-motion, semua transisi menjadi perubahan state instan tanpa crossfade, dan aturan merah muncul sudah tergambar. Rationale: Diperlukan untuk aksesibilitas pengguna yang sensitif terhadap gerakan.

10. Tech Stack

Frontend:

• React (aplikasi web satu halaman).
• Font: Archivo (headings), IBM Plex Mono (body dan metadata).
• Palet: dark mode sesuai bagian 6.

Backend:

• Python / FastAPI untuk API unggah gambar, menjalankan generasi, dan menyajikan hasil.
• Pemrosesan AI untuk transformasi gambar (menerapkan pakaian, pose, lokasi, gaya dari Gambar 2 ke Gambar 1 dengan identitas Gambar 1 dipertahankan).

Storage:

• Penyimpanan gambar yang diunggah dan hasil generasi untuk sesi kerja pribadi.

Deployment:

• Docker / docker-compose untuk menjalankan frontend dan backend.

Catatan: Tidak ada Kubernetes (deployment tidak memerlukannya untuk alat pribadi satu pengguna). Tidak ada layanan autentikasi (tidak ada akun). Tidak ada layanan pihak ketiga yang menghadap pengguna.

11. Assumptions and Constraints

Asumsi:

• A-01: Pengguna mengakses alat melalui browser di mesin pribadinya. (required_inference)
• A-02: Pengguna memiliki dua file gambar yang siap diunggah: Gambar 1 (orang) dan Gambar 2 (referensi gaya). (required_inference)
• A-03: Pemrosesan AI dijalankan di backend aplikasi dan tidak memerlukan interaksi pengguna selain menekan tombol Generate. (required_inference)
• A-04: Hasil generasi tersedia untuk dilihat sebelum pengguna menyimpan atau mengunduhnya. (required_inference)

Batasan:

• C-01: Penggunaan terbatas untuk keperluan pribadi pengguna, bukan alat publik yang dipakai banyak orang. (explicit)
• C-02: Wajah, bentuk wajah, gaya rambut, warna rambut, warna kulit, tekstur kulit, dan postur tubuh dari Gambar 1 tidak boleh berubah. (explicit)
• C-03: Pakaian, pose, lokasi, dan gaya harus diambil dari Gambar 2 dengan sangat detail dan akurat. (explicit)
• C-04: Tidak ada akun, login, atau manajemen identitas. (required_inference)
• C-05: Tidak ada fitur kolaborasi, berbagi, atau multi-tenant. (explicit)

12. Glossary

• Gambar 1 (Sumber Orang): Gambar yang diunggah pengguna sebagai sumber orang; menyumbang identitas yang dipertahankan (wajah, bentuk wajah, gaya rambut, warna rambut, warna kulit, tekstur kulit, postur tubuh).
• Gambar 2 (Sumber Pakaian, Pose, Lokasi, Gaya): Gambar yang diunggah pengguna sebagai sumber atribut yang diterapkan ke Gambar 1.
• Gambar Gabungan: Hasil transformasi yang menerapkan pakaian, pose, lokasi, dan gaya dari Gambar 2 ke Gambar 1 dengan identitas Gambar 1 dipertahankan.
• Kontrak Fidelitas: Tujuh atribut identitas Gambar 1 yang tidak boleh berubah: wajah, bentuk wajah, gaya rambut, warna rambut, warna kulit, tekstur kulit, postur tubuh.
• Spesimen: Istilah untuk gambar yang diunggah pengguna, diperlakukan sebagai artefak presisi, bukan dekorasi.
• Saville Red: Warna aksen tunggal #C8102E yang menandai spesimen SOURCE-1, kontrol Generate, dan hairline kontrak.
• Pengguna Pribadi (Heru): Satu-satunya persona aktif manusia; menggunakan alat untuk keperluan pribadi.