Guide complet : création et exécution du « générateur de vidéo d'exemple » avec Daytona

Transformez du texte en vidéos attrayantes grâce à une technologie d'IA de pointe ✨

Dans cet article de blog, nous explorerons le projet Sample Video Generation AI Website et fournirons une présentation détaillée de son intégration et de son exécution à l'aide de l'environnement de développement Daytona. Ce guide se concentrera sur l'utilisation des fonctionnalités de Daytona pour rationaliser le processus de configuration et de déploiement tout en plongeant dans les technologies de base qui alimentent l'application. Que vous soyez un développeur débutant ou expérimenté, Daytona simplifie votre flux de travail et vous aide à vous concentrer sur ce qui compte : créer des projets incroyables.

Recommandé : Démo avec Daytona Video 5 minutes

Autres visuels : Vidéos de démonstration générées | Site Web de démonstration

---

Aperçu du projet

Le Sample Video Generation AI Website est une Plateforme SaaS Next.js qui permet aux utilisateurs de générer des vidéos attrayantes à partir de requêtes textuelles. Conçue pour les spécialistes du marketing, les enseignants et les créateurs de médias sociaux, cette application exploite des technologies de pointe pour offrir une expérience de création vidéo fluide et puissante.

Fonctionnalités clés

• ? Génération vidéo IA : Transformez du texte brut en vidéos dynamiques.
• ? Authentification sécurisée : Propulsé par le commis pour la connexion et l'inscription des utilisateurs.
• ?️ Texte-parole : Synthèse vocale de haute qualité à l'aide d'ElevenLabs.
• ? Sous-titres : Générez automatiquement des sous-titres avec AssemblyAI.
• ? Interface utilisateur moderne : Beau design utilisant Shadcn/UI, Framer Motion et Tailwind CSS.
• ? Gestion de base de données : Gérez les données utilisateur et vidéo avec Drizzle ORM et Neon Database.
• ? Intégrations IA : Utilisez OpenAI, Hugging Face et bien plus encore pour des résultats créatifs.

---

Technologies utilisées

Frontend

• Next.js : Un framework React pour créer des applications hautes performances.
• Tailwind CSS : CSS d'abord utilitaire pour le style.
• Shadcn/UI Sonner : améliore les composants de l'interface utilisateur et les notifications toast.
• Spline : intégration de modèles 3D pour des visuels interactifs.

Backend

• Drizzle ORM : Abstraction de base de données pour Neon Database.
• Neon Database : base de données basée sur le cloud pour la gestion des utilisateurs et des fichiers.

API et bibliothèques

• Vidéo Remotion : Générez des vidéos dynamiques à partir des composants React.
• API OpenAI : compréhension du langage naturel et création de contenu textuel.
• ElevenLabs : synthèse vocale de haute qualité.
• AssemblyAI : Intelligence audio automatisée pour le sous-titrage.
• Hugging Face : accès à des modèles d'IA pré-entraînés pour les améliorations vidéo.

---

Pourquoi utiliser Daytona pour le développement ?

Daytona simplifie les workflows de développement et de déploiement en fournissant un environnement efficace pour créer, gérer et déployer des projets. Il prend en charge des fonctionnalités telles que :

• Environnements conteneurisés automatisés.
• Gestion de l'espace de travail pour la collaboration à distance.
• Configurations préconfigurées pour un démarrage rapide du projet.

Daytona révolutionne la façon dont les développeurs créent et déploient des applications en proposant :

• ✅ Environnements conteneurisés préconfigurés : Éliminez les problèmes de configuration.
• ✅ Gestion intégrée de l'espace de travail : Parfait pour la collaboration à distance.
• ✅ Développement rationalisé : Concentrez-vous sur la construction tandis que Daytona s'occupe du reste.

---

Démarrez avec Daytona

Voici un guide étape par étape pour intégrer et exécuter le Sample Video Generator à l'aide de Daytona.

---

Étape 1 : Installer Daytona

Tout d'abord, installez la CLI Daytona en suivant le guide d'installation officiel de Daytona. Assurez-vous que Docker est installé et exécuté sur votre système.

Linux/macOS

Exécutez les commandes suivantes dans votre terminal :

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

Fenêtres

Utilisez PowerShell pour installer Daytona :
Cette commande télécharge et installe Daytona et exécute le serveur 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;

Vérifiez l'installation :

daytona --version

---

Étape 2 : Créer un espace de travail Daytona

Utilisez Daytona pour cloner et configurer le projet dans un environnement conteneurisé.

Exécutez la commande suivante :

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

Daytona configurera automatiquement un espace de travail avec le référentiel fourni. Ce sera :

• Clonez le projet dans un nouvel espace de travail Daytona.
• Configurez automatiquement l'espace de travail avec le fichier .devcontainer.

---

Étape 3 : Configurer les variables d'environnement

Les variables d'environnement sont cruciales pour connecter les API, les bases de données et les services d'authentification. Accédez au répertoire racine de votre espace de travail Daytona et créez un fichier .env.local.

Ajoutez les variables suivantes :

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=

Remplacez les espaces réservés par vos clés API et les URL de votre base de données.

---

Étape 4 : Construire et démarrer le projet

Daytona inclut un fichier .devcontainer/devcontainer.json préconfiguré pour rationaliser la configuration. Ce fichier spécifie les paramètres de l'environnement de développement.

Ouvrez l'espace de travail à l'aide de Daytona :

daytona code

Installer les dépendances :

npm --legacy-peer-deps i

Démarrez le serveur de développement :

npm run dev

L'application fonctionnera désormais sur localhost:3000 dans votre environnement Daytona.

---

Étape 5 : Fonctionnalités à explorer

Une fois l'application lancée, explorez ses principales fonctionnalités :

1. Authentification : inscrivez-vous ou connectez-vous à l'aide de Clerk.
2. AI Video Generation : saisissez une requête pour générer une vidéo à l'aide des API Remotion et AI.
3. Text-to-Speech : générez des voix off de haute qualité à l'aide d'ElevenLabs.
4. Légendes : ajoutez des légendes précises avec AssemblyAI.

---

Jouer avec Daytona

Personnalisation de l'environnement de développement

Le fichier .devcontainer/devcontainer.json de Daytona spécifie le conteneur de développement. Vous pouvez le personnaliser pour des besoins spécifiques, comme l'ajout de nouvelles extensions, des mappages de ports ou des commandes post-création.

Exemple d'extrait de devcontainer.json :

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

Essayez de :

• Ajoutez plus d'extensions VSCode pour des besoins spécifiques.
• Modifiez les ports transférés pour des services supplémentaires.
• Personnalisez postCreateCommand pour installer des dépendances supplémentaires.

---

Déploiement avec Daytona

Daytona simplifie le déploiement de votre application dans des environnements cloud. Une fois que vous êtes prêt à déployer, suivez ces étapes :

1. Poussez votre projet vers un référentiel Git.
2. Utilisez les outils de déploiement de Daytona pour conteneuriser et déployer votre application.

Pour les étapes de déploiement détaillées, reportez-vous aux documents Daytona

---

Facultatif : accéder à l'espace de travail

Daytona vous permet de partager votre espace de travail pour une collaboration à distance. Utilisez l'ID de l'espace de travail pour fournir l'accès aux membres de l'équipe.

Pour ce projet :

$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;

---

Conclusion

En tirant parti de Daytona, vous pouvez configurer, développer et exécuter le projet Sample Video Generator avec un minimum de frictions. L'environnement conteneurisé et les paramètres préconfigurés de Daytona en font un choix idéal pour les projets nécessitant des flux de travail de développement transparents.

Le projet Sample Video Generation AI Website démontre comment des outils modernes tels que Next.js, Remotion et Daytona peuvent simplifier le développement et le déploiement d'applications basées sur l'IA. Avec Daytona, monter et gérer des projets complexes devient un jeu d'enfant, vous permettant de vous concentrer sur la construction de solutions innovantes.

Commencez votre voyage aujourd'hui et laissez Daytona donner vie à vos idées !

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!