Adibrino/PPT-BUDAYA-INDONESIA-HTML-CONTROL-LOGIC

Interactive Video Presentation Controller

    

Sebuah sistem presentasi video interaktif dengan mode "Controller" dan "Preview" yang disinkronkan secara real-time menggunakan GitHub Gist API.

Tema Presentasi: "Warna-Warni Nusantara: Menyelami Kekayaan Budaya Indonesia"

**(Tautan Demo Langsung di Hugging Face Spaces)**

Konsep

Proyek ini memecahkan masalah presentasi jarak jauh di mana seorang presenter perlu mengontrol pemutaran video di layar audiens secara mulus. Ini dicapai dengan:

1. 1.Pra-pemrosesan Video: Sebuah skrip Python menggunakan OpenCV untuk memotong video presentasi utama menjadi segmen-segmen kecil, baik untuk pemutaran maju (real) maupun mundur (reverse).
2. 2.Frontend Cerdas: Aplikasi React yang melakukan pra-pemuatan (pre-loads) semua segmen video untuk transisi yang instan dan bebas kedipan.
3. 3.Sinkronisasi Real-time:
4. 4.Mode Controller: Digunakan oleh presenter. Memiliki kontrol penuh (maju, mundur, lompat segmen) dan menyimpan status halaman saat ini ke GitHub Gist setiap kali ada perubahan.
5. 5.Mode Preview: Digunakan oleh audiens. Secara berkala mengambil (polls) status terbaru dari GitHub Gist dan secara otomatis memutar segmen video yang sesuai.

Fitur Utama

• —Transisi Video Super Mulus: Menggunakan teknik triple-buffering dengan 3 elemen video untuk menghilangkan kedipan saat berpindah segmen.
• —Pra-pemuatan Cerdas: Semua segmen video diunduh terlebih dahulu saat aplikasi dimuat, memastikan tidak ada buffering saat presentasi.
• —Dua Mode Operasi: Mode controller untuk presenter dan mode preview untuk audiens.
• —Navigasi Penuh: Kontrol maju, mundur, lompat ke segmen tertentu, dan skip.
• —Kontrol Keyboard: Navigasi menggunakan tombol panah (ArrowLeft, ArrowRight) di mode controller.
• —Backend Ringan: Menggunakan GitHub Gist sebagai database real-time yang sederhana dan gratis.

Tumpukan Teknologi

• —Backend & Pemrosesan Video:
• —Python
• —OpenCV
• —tqdm
• —Frontend:
• —React
• —TypeScript
• —Vite (diasumsikan)
• —Sinkronisasi:
• —GitHub Gist API

Struktur Proyek

.
├── python/                 # Skrip untuk pemrosesan video
│   ├── assets/             # Tempat menaruh video sumber (real & reverse)
│   ├── results/            # Folder output untuk segmen video (diabaikan oleh Git)
│   └── cut_video.py        # Skrip utama untuk memotong video
├── public/                 # Aset statis untuk aplikasi React
│   └── assets/            # Folder hasil pemotongan video HARUS dipindahkan ke sini
├── src/                    # Kode sumber aplikasi React
│   ├── components/
│   │   ├── Player.tsx      # Komponen inti pemutar video
│   │   └── ...
│   ├── services/
│   │   └── githubService.ts# Logika untuk interaksi dengan API Gist
│   ├── App.tsx             # Komponen utama yang menangani preloading
│   └── types.ts            # Definisi tipe TypeScript
├── .env.example            # Template untuk variabel lingkungan
├── .gitignore              # Mengabaikan file yang tidak perlu
└── README.md               # Anda sedang membaca ini

Panduan Instalasi dan Penggunaan

Proses ini terdiri dari dua bagian utama: mempersiapkan segmen video dan menjalankan aplikasi web.

Bagian 1: Mempersiapkan Segmen Video (Python)

Langkah ini hanya perlu dilakukan sekali atau setiap kali Anda memiliki video sumber baru.

1. 1.Prasyarat: Pastikan Anda memiliki Python 3.x dan pip terinstal.
2. 2.Instal Dependensi: Buka terminal di dalam folder python/ dan instal pustaka yang diperlukan.

    pip install opencv-python tqdm

1. 1.Siapkan Video Sumber:
2. 2.Letakkan video presentasi utama Anda di dalam folder python/assets/ dengan nama ppt_real.mp4.
3. 3.Letakkan versi terbalik dari video tersebut di dalam folder yang sama dengan nama ppt_reverse.mp4.
4. 4.Jalankan Skrip: Jalankan skrip pemotongan video dari direktori root proyek.

    python python/cut_video.py

Skrip ini akan membuat folder python/results/ yang berisi semua segmen video .mp4 yang sudah dipotong.

Bagian 2: Menjalankan Aplikasi Web (React)

1. 1.Pindahkan Aset Video: Langkah Krusial! Pindahkan folder results yang baru saja dibuat dari dalam python/ ke dalam folder public/. Struktur akhir harus menjadi public/results/.

    public/
    └── results/
        ├── real/
        │   ├── 0.mp4
        │   └── ...
        └── reverse/
            ├── 0.mp4
            └── ...

1. 1.Prasyarat: Pastikan Anda memiliki Node.js dan npm (atau yarn) terinstal.
2. 2.Instal Dependensi Frontend: Buka terminal di direktori root proyek dan jalankan:

    npm install

1. 1.Konfigurasi Variabel Lingkungan:
2. 2.Buat file bernama .env di direktori root proyek.
3. 3.Salin konten dari .env.example ke dalam .env.
4. 4.Isi file .env dengan kredensial Anda:

        VITE_GIST_ID=ID_GIST_ANDA
        VITE_GITHUB_TOKEN=TOKEN_AKSES_PRIBADI_GITHUB_ANDA

• —`VITE_GIST_ID`: ID dari Gist publik/rahasia yang akan Anda gunakan sebagai database.
• —`VITE_GITHUB_TOKEN`: Personal Access Token (PAT) dari GitHub dengan izin (scope) untuk gist.
• —Jalankan Server Pengembangan:

    npm run dev

Buka browser Anda dan kunjungi http://localhost:5173 (atau port yang ditampilkan).

1. 1.Build untuk Produksi:

    npm run build

Hasilnya akan ada di dalam folder dist/, yang siap untuk di-deploy.

Cara Menggunakan

• —Mode Preview (Audiens): Cukup buka aplikasi. Ini adalah mode default. Layar akan secara pasif menunggu pembaruan dari Gist.
• —Mode Controller (Presenter):
• —Klik tombol "Mode" atau ikon sejenisnya.
• —Login (jika ada implementasi login).
• —Sekarang Anda berada di mode controller. Gunakan tombol ⟨ dan ⟩ di layar atau tombol panah keyboard untuk bernavigasi. Setiap perubahan akan secara otomatis disimpan ke Gist, dan layar audiens akan mengikutinya.

Lisensi

Proyek ini dilisensikan di bawah Lisensi Apache 2.0. Lihat file LICENSE untuk detailnya.

Copyright

© 2025 Aditya Dwi Nugraha. All Rights Reserved.