Kreasi AI: Teks ke Visual

Selamat datang di Kreasi AI, sebuah aplikasi web inovatif yang mengubah deskripsi teks dalam Bahasa Indonesia menjadi karya visual yang menakjubkan, baik gambar maupun video.

✨ Fitur Utama

• Teks ke Gambar: Buat gambar unik dari deskripsi teks Anda.
• Teks ke Video: Hasilkan klip video pendek lengkap dengan narasi dari sebuah prompt.
• Gambar ke Video: Animasikan gambar statis menjadi sebuah video pendek.
• Dukungan Bahasa Indonesia: Antarmuka dan pemrosesan AI sepenuhnya dalam Bahasa Indonesia.
• Unduh Hasil: Simpan karya yang Anda hasilkan dengan mudah.
• Model Freemium: Coba gratis atau upgrade untuk fitur lebih lanjut.

📸 Tangkapan Layar

Tampilan Halaman Utama Kreasi AI.

🚀 Tumpukan Teknologi

• Framework: Next.js (App Router)
• Bahasa: TypeScript
• Styling: Tailwind CSS
• Komponen UI: ShadCN UI
• Generative AI: Google Gemini & Genkit

🛠️ Menjalankan Proyek Secara Lokal

Prasyarat

• Node.js (versi 18 atau lebih baru)
• npm atau yarn

Instalasi

1. Kloning repositori:

   git clone <URL_REPOSITORI_ANDA>
   cd <NAMA_DIREKTORI>

2. Instal dependensi:

   npm install

3. Konfigurasi Variabel Lingkungan: Buat file .env.local di root proyek dan tambahkan kunci API Google AI Anda:

   GOOGLE_API_KEY="YOUR_API_KEY_HERE"
   

Menjalankan Server Pengembangan

Aplikasi ini memerlukan dua proses yang berjalan bersamaan: server web Next.js dan server Genkit untuk fungsi AI.

1. Jalankan server Next.js:

   npm run dev

   Aplikasi akan tersedia di http://localhost:9002.

2. Jalankan server Genkit (di terminal terpisah):

   npm run genkit:watch

   Ini akan memulai server Genkit dan memantaunya untuk perubahan.

📁 Struktur Proyek

/
├── public/           # Aset statis (logo, gambar)
├── src/
│   ├── app/          # Halaman dan rute (Next.js App Router)
│   ├── components/   # Komponen React yang dapat digunakan kembali
│   ├── ai/           # Konfigurasi dan alur Genkit
│   │   ├── flows/    # Logika inti untuk fitur AI
│   │   └── genkit.ts # Inisialisasi Genkit
│   ├── lib/          # Utilitas dan fungsi pembantu
│   └── hooks/        # React Hooks kustom
├── tailwind.config.ts # Konfigurasi Tailwind CSS
└── next.config.ts     # Konfigurasi Next.js

✍️ Author

• Azwar Riyadh Subarkah
• PT Digi Media Komunika