Panduan Komprehensif: Mencipta dan Menjalankan 'Sample Video Generator' dengan Daytona

Ubah teks kepada video yang menarik dengan teknologi AI termaju ✨

Dalam catatan blog ini, kami akan meneroka projek Sampel Laman Web AI Penjanaan Video dan menyediakan panduan terperinci untuk menyepadukan dan menjalankannya menggunakan persekitaran pembangunan Daytona. Panduan ini akan menumpukan pada penggunaan ciri Daytona untuk menyelaraskan proses persediaan dan penggunaan sambil menyelami teknologi teras yang menjanakan aplikasi. Sama ada anda seorang pemula atau pembangun yang berpengalaman, Daytona memudahkan aliran kerja anda dan membantu anda memfokus pada perkara yang penting—membina projek yang menakjubkan.

Disyorkan: Demo dengan Video Daytona 5 minit

Visual Lain: Video Demo Dihasilkan | Laman Web Larian Demo

---

Gambaran Keseluruhan Projek

Tapak Web AI Penjanaan Video Contoh ialah platform SaaS Next.js yang membolehkan pengguna menjana video yang menarik daripada pertanyaan teks. Direka bentuk untuk pemasar, pendidik dan pencipta media sosial, apl ini memanfaatkan teknologi termaju untuk menawarkan pengalaman penciptaan video yang lancar dan berkuasa.

Ciri Utama

• ? Penjanaan Video AI: Ubah teks biasa kepada video dinamik.
• ? Pengesahan Selamat: Dikuasakan oleh Kerani untuk log masuk dan pendaftaran pengguna.
• ?️ Teks-ke-Pertuturan: Sintesis suara berkualiti tinggi menggunakan ElevenLabs.
• ? Kapsyen: Menjana kapsyen secara automatik dengan AssemblyAI.
• ? UI Moden: Reka bentuk yang cantik menggunakan Shadcn/UI, Framer Motion dan Tailwind CSS.
• ? Pengurusan Pangkalan Data: Urus data pengguna dan video dengan Gerimis ORM dan Pangkalan Data Neon.
• ? Integrasi AI: Gunakan OpenAI, Memeluk Wajah dan banyak lagi untuk hasil kreatif.

---

Teknologi Digunakan

Hadapan

• Next.js: Rangka kerja React untuk membina aplikasi berprestasi tinggi.
• Tailwind CSS: CSS mengutamakan utiliti untuk penggayaan.
• Shadcn/UI Sonner: Meningkatkan komponen UI dan pemberitahuan roti bakar.
• Spline: Penyepaduan model 3D untuk visual interaktif.

Belakang

• Rimbun ORM: Abstraksi pangkalan data untuk Pangkalan Data Neon.
• Pangkalan Data Neon: Pangkalan data berasaskan awan untuk pengurusan pengguna dan fail.

API dan Perpustakaan

• Video Remotion: Hasilkan video dinamik daripada komponen React.
• API OpenAI: Pemahaman bahasa semula jadi dan penciptaan kandungan berasaskan teks.
• ElevenLabs: Teks ke pertuturan berkualiti tinggi.
• AssemblyAI: Perisikan audio automatik untuk kapsyen.
• Muka Berpeluk: Akses kepada model AI yang telah terlatih untuk peningkatan video.

---

Mengapa Gunakan Daytona untuk Pembangunan?

Daytona memudahkan aliran kerja pembangunan dan penggunaan dengan menyediakan persekitaran yang cekap untuk mencipta, mengurus dan melaksanakan projek. Ia menyokong ciri seperti:

• Persekitaran kontena automatik.
• Pengurusan ruang kerja untuk kerjasama jauh.
• Persediaan prakonfigurasi untuk bootstrap projek pantas.

Daytona merevolusikan cara pembangun mencipta dan menggunakan aplikasi dengan menawarkan:

• ✅ Persekitaran berkontena prakonfigurasi: Hilangkan sakit kepala persediaan.
• ✅ Pengurusan ruang kerja bersepadu: Sesuai untuk kerjasama jauh.
• ✅ Pembangunan diperkemas: Fokus pada pembinaan manakala Daytona mengendalikan yang lain.

---

Bermula dengan Daytona

Berikut ialah panduan langkah demi langkah untuk menyepadukan dan menjalankan Sample Video Generator menggunakan Daytona.

---

Langkah 1: Pasang Daytona

Mula-mula, pasang Daytona CLI dengan mengikuti panduan pemasangan Daytona rasmi. Pastikan anda telah memasang dan menjalankan Docker pada sistem anda.

Linux/macOS

Jalankan arahan berikut dalam terminal anda:

curl -sfL https://download.daytona.io/daytona/install.sh | sudo bash && daytona server -y && daytona

Windows

Gunakan PowerShell untuk memasang Daytona:
Perintah ini memuat turun dan memasang Daytona dan menjalankan Pelayan Daytona:

$architecture = if ($env:PROCESSOR_ARCHITECTURE -eq "AMD64") { "amd64" } else { "arm64" }
md -Force "$Env:APPDATA\bin\daytona"; [System.Net.ServicePointManager]::SecurityProtocol = [System.Net.SecurityProtocolType]'Tls,Tls11,Tls12';
Invoke-WebRequest -URI "https://download.daytona.io/daytona/latest/daytona-windows-$architecture.exe" -OutFile "$Env:APPDATA\bin\daytona\daytona.exe";
$env:Path += ";" + $Env:APPDATA + "\bin\daytona"; [Environment]::SetEnvironmentVariable("Path", $env:Path, [System.EnvironmentVariableTarget]::User);
daytona serve;

Sahkan pemasangan:

daytona --version

---

Langkah 2: Cipta Ruang Kerja Daytona

Gunakan Daytona untuk mengklon dan menyediakan projek dalam persekitaran bekas.

Jalankan arahan berikut:

daytona create https://github.com/daytonaio/sample-video-generator.git

Daytona akan menyediakan ruang kerja secara automatik dengan repositori yang disediakan. Ia akan:

• Klon projek ke dalam ruang kerja Daytona baharu.
• Konfigurasikan ruang kerja secara automatik dengan fail .devcontainer.

---

Langkah 3: Konfigurasi Pembolehubah Persekitaran

Pembolehubah persekitaran adalah penting untuk menyambungkan API, pangkalan data dan perkhidmatan pengesahan. Navigasi ke direktori akar ruang kerja Daytona anda dan buat fail .env.local.

Tambah pembolehubah berikut:

NEXT_PUBLIC_DRIZZLE_DATABASE_URL=
NEXT_PUBLIC_CLERK_PUBLISHABLE_KEY=
CLERK_SECRET_KEY=
NEXT_PUBLIC_CLERK_SIGN_IN_URL=/sign-in
NEXT_PUBLIC_CLERK_SIGN_UP_URL=/sign-up
NEXT_PUBLIC_ELEVEN_LABS_API_KEY=
NEXT_PUBLIC_FIREBASE_API_KEY=
NEXT_PUBLIC_CAPTION_API=
NEXT_PUBLIC_OPENAI_API_KEY=

Ganti ruang letak dengan kunci API dan URL pangkalan data anda.

---

Langkah 4: Bina dan Mulakan Projek

Daytona menyertakan fail .devcontainer/devcontainer.json yang diprakonfigurasikan untuk menyelaraskan persediaan. Fail ini menentukan tetapan untuk persekitaran pembangunan.

Buka ruang kerja menggunakan Daytona:

daytona code

Pasang kebergantungan:

npm --legacy-peer-deps i

Mulakan pelayan pembangunan:

npm run dev

Apl kini akan berjalan pada localhost:3000 dalam persekitaran Daytona anda.

---

Langkah 5: Ciri untuk Teroka

Setelah aplikasi berjalan, terokai ciri terasnya:

1. Pengesahan: Daftar atau log masuk menggunakan Kerani.
2. Penjanaan Video AI: Masukkan pertanyaan untuk menjana video menggunakan Remotion dan API AI.
3. Teks-ke-Pertuturan: Hasilkan alih suara berkualiti tinggi menggunakan ElevenLabs.
4. Kapsyen: Tambahkan kapsyen tepat dengan AssemblyAI.

---

Bermain-main dengan Daytona

Menyesuaikan Persekitaran Dev

Fail .devcontainer/devcontainer.json Daytona menentukan bekas pembangunan. Anda boleh menyesuaikannya untuk keperluan khusus seperti menambah sambungan baharu, pemetaan port atau arahan pasca cipta.

Contoh coretan daripada devcontainer.json:

curl -sfL https://download.daytona.io/daytona/install.sh | sudo bash && daytona server -y && daytona

Cuba untuk:

• Tambah lebih banyak sambungan VSCode untuk keperluan khusus.
• Ubah suai port yang dimajukan untuk perkhidmatan tambahan.
• Sesuaikan postCreateCommand untuk memasang kebergantungan tambahan.

---

Menggunakan Daytona

Daytona memudahkan penggunaan aplikasi anda ke persekitaran awan. Setelah anda bersedia untuk digunakan, ikut langkah ini:

1. Tolak projek anda ke repositori Git.
2. Gunakan alatan penggunaan Daytona untuk mengisi kontena dan menggunakan apl anda.

Untuk langkah penggunaan terperinci, rujuk kepada Dokumen Daytona

---

Pilihan: Mengakses Ruang Kerja

Daytona membolehkan anda berkongsi ruang kerja anda untuk kerjasama jauh. Gunakan ID ruang kerja untuk memberikan akses kepada ahli pasukan.

Untuk projek ini:

$architecture = if ($env:PROCESSOR_ARCHITECTURE -eq "AMD64") { "amd64" } else { "arm64" }
md -Force "$Env:APPDATA\bin\daytona"; [System.Net.ServicePointManager]::SecurityProtocol = [System.Net.SecurityProtocolType]'Tls,Tls11,Tls12';
Invoke-WebRequest -URI "https://download.daytona.io/daytona/latest/daytona-windows-$architecture.exe" -OutFile "$Env:APPDATA\bin\daytona\daytona.exe";
$env:Path += ";" + $Env:APPDATA + "\bin\daytona"; [Environment]::SetEnvironmentVariable("Path", $env:Path, [System.EnvironmentVariableTarget]::User);
daytona serve;

---

Kesimpulan

Dengan memanfaatkan Daytona, anda boleh menyediakan, membangun dan menjalankan projek Sample Video Generator dengan geseran yang minimum. Persekitaran bekas Daytona dan tetapan prakonfigurasi menjadikannya pilihan yang tepat untuk projek yang memerlukan aliran kerja pembangunan yang lancar.

Projek Laman Web AI Penjanaan Video Contoh menunjukkan cara alatan moden seperti Next.js, Remotion dan Daytona boleh memudahkan pembangunan dan penggunaan aplikasi berkuasa AI. Dengan Daytona, menyediakan dan mengurus projek yang kompleks menjadi mudah, membolehkan anda menumpukan pada membina penyelesaian yang inovatif.

Mulakan perjalanan anda hari ini dan biarkan Daytona menghidupkan idea anda!

Atas ialah kandungan terperinci Panduan Komprehensif: Mencipta dan Menjalankan 'Sample Video Generator' dengan Daytona. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!