Gemini Vision Studio

Aplikasi web inovatif yang dirancang untuk membantu para kreator dalam mengembangkan skrip video, mulai dari ide sederhana hingga menjadi storyboard lengkap yang siap dijadikan prompt. Dengan memanfaatkan kekuatan AI Gemini dari Google, studio ini memandu pengguna melalui alur kerja terstruktur, menghasilkan konten kreatif di setiap langkah.

✨ Fitur Utama

• Generasi Ide Berbasis AI: Dapatkan ide cerita sinematik hanya dengan satu klik.
• Pengembangan Cerita Terstruktur: Lalui tahapan pengembangan: Konsep, Karakter, Lokasi, Properti, dan Sinopsis.
• Pembuatan Aset Dinamis: Buat profil mendetail untuk karakter, lokasi, dan properti, lengkap dengan visual yang dihasilkan oleh AI.
• Editor Adegan Interaktif: Bangun cerita Anda adegan per adegan, dengan bantuan AI untuk deskripsi cerita, aksi karakter, dan dialog.
• Alat Sinematografi Canggih: Tentukan jenis shot, gerakan kamera, dan efek lensa untuk setiap adegan.
• Generasi Prompt Final: Sintesiskan seluruh proyek menjadi prompt ringkasan yang komprehensif dan prompt per adegan, siap untuk model generator video.
• Dukungan Multi-bahasa: Hasilkan prompt dalam Bahasa Indonesia dan Bahasa Inggris.
• Simpan/Muat Progres: Simpan seluruh status proyek Anda sebagai file JSON dan muat kembali kapan saja.
• Unggah Gambar: Kustomisasi visual aset dengan mengunggah gambar Anda sendiri.

🛠️ Teknologi yang Digunakan

• Frontend: HTML5, CSS3 (Tailwind CSS), JavaScript (ES6 Modules)
• Backend: Node.js, Express.js
• AI: Google Gemini API
• Dependensi Kunci:
  • multer: Untuk menangani unggahan gambar.
  • dotenv: Untuk mengelola variabel lingkungan.

📂 Struktur Proyek

/GeminiVisionStudio
├── backend/
│   ├── node_modules/
│   ├── server.js         # File server utama
│   └── .env              # Variabel lingkungan (JANGAN DI-COMMIT)
├── public/
│   ├── css/
│   ├── js/
│   │   └── modules/      # Logika utama JS (appActions, aiActions, dll.)
│   ├── index.html
│   └── ...               # Aset statis lainnya
├── package.json
└── README.md

🚀 Memulai

Prasyarat

• Node.js dan npm terinstal.
• Kunci API Google Gemini.

Instalasi & Pengaturan

1. Clone repositori:

   git clone <url-repositori-anda>
   cd GeminiVisionStudio

2. Instal dependensi backend:

   cd backend
   npm install

3. Atur variabel lingkungan: Buat file .env di dalam direktori backend dan tambahkan kredensial Anda. Anda bisa menyalin contoh di bawah ini.

   backend/.env:

   GEMINI_API_KEY=KUNCI_API_GEMINI_ANDA_DI_SINI
   GCP_PROJECT_ID=ID_PROYEK_GOOGLE_CLOUD_ANDA_DI_SINI

4. Jalankan server: Dari direktori backend, jalankan:

   npm start

   (Ini mengasumsikan Anda memiliki skrip "start" di package.json seperti "start": "node server.js")

5. Buka aplikasi: Buka http://localhost:3000 (atau port yang dikonfigurasi) di browser web Anda.

📝 Cara Penggunaan

1. Buka aplikasi di browser Anda.
2. Mulai dengan memasukkan ide cerita atau biarkan AI menyarankannya.
3. Klik "Buat Konsep" untuk membuat pengaturan awal cerita (gaya, suasana, dll.).
4. Ikuti tombol-tombol generasi bertahap untuk membuat Karakter, Lokasi, dan Properti. Anda dapat menambahkan lebih banyak aset secara manual atau dengan AI.
5. Buat Sinopsis berdasarkan aset yang telah dibuat. Ini akan mengunci inti cerita.
6. Mulai membangun adegan. Gunakan tombol bantuan AI di dalam setiap kartu adegan untuk menghasilkan detail cerita, aksi karakter, dialog, dan sinematografi.
7. Setelah adegan selesai, gulir ke bawah untuk membuat Prompt Final.
8. Simpan proyek Anda kapan saja menggunakan tombol "Simpan Draft", dan muat kembali nanti dengan "Buka Draft".