Learning Timeline
Key Insights
Kualiti Video Sangat Penting
Pastikan video rakaman skrin anda mempunyai resolusi yang jelas dan menunjukkan setiap 'state' aplikasi (seperti hover effect, pesan error, atau loading states) supaya Gemini dapat menulis logik yang lengkap.
Had Token (Context Window)
Jika video terlalu panjang, Gemini mungkin akan terlepas butiran kecil. Sebaiknya gunakan video pendek berdurasi 30-60 saat yang fokus kepada satu fungsi spesifik pada satu-satu masa.
Prompts
Prompt Analisa Video ke Aplikasi
Target:
Gemini 1.5 Pro
I have uploaded a video of an application interface and its workflow. Please analyze the video step-by-step. Identify all UI elements, color schemes, animations, and the underlying logic of the interactions. Based on this analysis, write a single-file HTML solution using Tailwind CSS and vanilla JavaScript that replicates the exact functionality and look-and-feel shown in the video.
Step by Step
Langkah Membina Aplikasi daripada Video menggunakan Gemini
- Layari laman web Google AI Studio melalui pelayar web anda.
- Di bahagian panel kanan, klik pada dropdown 'Model' dan pilih 'Gemini 1.5 Pro' atau 'Gemini 1.5 Flash' (pastikan versi yang menyokong input video).
- Klik pada ikon '+' (Plus) atau butang 'Upload' di dalam ruangan input.
- Pilih fail video rakaman skrin (simulasi aplikasi) yang ingin anda tukarkan menjadi kod.
- Tunggu sehingga bar pemprosesan video selesai dimuat naik sepenuhnya ke dalam context window.
- Taip prompt arahan yang spesifik di bawah video tersebut untuk mengarahkan AI menganalisa UI dan logik aplikasi.
- Klik butang 'Run' dan tunggu Gemini menjana blok kod (HTML, CSS, JavaScript, atau Python).
- Klik ikon 'Copy' pada penjuru atas blok kod yang dihasilkan.
- Buka editor kod pilihan anda (seperti VS Code atau CodePen) dan 'Paste' kod tersebut.
- Simpan fail dan jalankan aplikasi untuk melihat hasilnya.
