Umfassende Anleitung: Erstellen und Ausführen des „Sample Video Generator' mit Daytona-js-Tutorial-php.cn

Comprehensive Guide: Creating and Running the

Verwandeln Sie Text in ansprechende Videos mit modernster KI-Technologie ✨

In diesem Blogbeitrag werden wir das Projekt Sample Video Generation AI Website untersuchen und eine detaillierte Anleitung für die Integration und Ausführung mithilfe der Daytona-Entwicklungsumgebung bereitstellen. Dieser Leitfaden konzentriert sich auf die Nutzung der Funktionen von Daytona, um den Einrichtungs- und Bereitstellungsprozess zu optimieren, und befasst sich gleichzeitig mit den Kerntechnologien, die der Anwendung zugrunde liegen. Egal, ob Sie Anfänger oder erfahrener Entwickler sind, Daytona vereinfacht Ihren Arbeitsablauf und hilft Ihnen, sich auf das Wesentliche zu konzentrieren – die Entwicklung großartiger Projekte.

Empfohlen:Demo mit Daytona-Video 5 Minuten

Andere Visuals: Demovideos generiert | Demo-Run-Website

Projektübersicht

Die Sample Video Generation AI Website ist eine Next.js SaaS-Plattform, die es Benutzern ermöglicht, ansprechende Videos aus Textabfragen zu generieren. Diese App wurde für Vermarkter, Pädagogen und Social-Media-Ersteller entwickelt und nutzt modernste Technologien, um ein nahtloses und leistungsstarkes Videoerstellungserlebnis zu bieten.

Hauptfunktionen

? KI-Videogenerierung: Verwandeln Sie einfachen Text in dynamische Videos.
? Sichere Authentifizierung: Unterstützt von Clerk für Benutzeranmeldung und -registrierung.
?️ Text-to-Speech: Hochwertige Sprachsynthese mit ElevenLabs.
? Untertitel:Untertitel automatisch mit AssemblyAI generieren.
? Moderne Benutzeroberfläche:Schönes Design mit Shadcn/UI, Framer Motion und Tailwind CSS.
? Datenbankverwaltung:Verwalten Sie Benutzer- und Videodaten mit Drizzle ORM und Neon Database.
? KI-Integrationen: Nutzen Sie OpenAI, Hugging Face und mehr für kreative Ergebnisse.

Verwendete Technologien

Frontend

Next.js: Ein React-Framework zum Erstellen von Hochleistungsanwendungen.
Tailwind CSS: Utility-First-CSS für das Styling.
Shadcn/UI Sonner: Verbessert UI-Komponenten und Toast-Benachrichtigungen.
Spline: 3D-Modellintegration für interaktive Visuals.

Backend

Drizzle ORM: Datenbankabstraktion für Neon Database.
Neon-Datenbank: Cloudbasierte Datenbank für die Benutzer- und Dateiverwaltung.

APIs und Bibliotheken

Remotion-Video: Generieren Sie dynamische Videos aus React-Komponenten.
OpenAI API: Verständnis natürlicher Sprache und textbasierte Inhaltserstellung.
ElevenLabs: Hochwertige Text-zu-Sprache.
AssemblyAI: Automatisierte Audio-Intelligenz für Untertitel.
Umarmendes Gesicht: Zugriff auf vortrainierte KI-Modelle für Videoverbesserungen.

Warum Daytona für die Entwicklung nutzen?

Daytona vereinfacht Entwicklungs- und Bereitstellungsabläufe, indem es eine effiziente Umgebung zum Erstellen, Verwalten und Bereitstellen von Projekten bereitstellt. Es unterstützt Funktionen wie:

Automatisierte Containerumgebungen.
Arbeitsbereichsverwaltung für Remote-Zusammenarbeit.
Vorkonfigurierte Setups für schnelles Projekt-Bootstrapping.

Daytona revolutioniert die Art und Weise, wie Entwickler Anwendungen erstellen und bereitstellen, indem es Folgendes bietet:

✅ Vorkonfigurierte, containerisierte Umgebungen: Eliminieren Sie Einrichtungsprobleme.
✅ Integrierte Arbeitsbereichsverwaltung:Perfekt für die Remote-Zusammenarbeit.
✅ Optimierte Entwicklung: Konzentrieren Sie sich auf den Aufbau, während Daytona den Rest erledigt.

Erste Schritte mit Daytona

Hier finden Sie eine Schritt-für-Schritt-Anleitung zur Integration und Ausführung des Beispielvideogenerators mit Daytona.

Schritt 1: Daytona installieren

Installieren Sie zunächst die Daytona-CLI, indem Sie der offiziellen Daytona-Installationsanleitung folgen. Stellen Sie sicher, dass Docker auf Ihrem System installiert ist und ausgeführt wird.

Linux/macOS

Führen Sie die folgenden Befehle in Ihrem Terminal aus:

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

Nach dem Login kopieren

Windows

Verwenden Sie PowerShell, um Daytona zu installieren:
Dieser Befehl lädt Daytona herunter, installiert es und führt den Daytona-Server aus:

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

Nach dem Login kopieren

Überprüfen Sie die Installation:

daytona --version

Nach dem Login kopieren

Schritt 2: Erstellen Sie einen Daytona-Arbeitsbereich

Verwenden Sie Daytona, um das Projekt zu klonen und in einer Containerumgebung einzurichten.

Führen Sie den folgenden Befehl aus:

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

Nach dem Login kopieren

Daytona richtet automatisch einen Arbeitsbereich mit dem bereitgestellten Repository ein. Es wird:

Klonen Sie das Projekt in einen neuen Daytona-Arbeitsbereich.
Konfigurieren Sie den Arbeitsbereich automatisch mit der .devcontainer-Datei.

Schritt 3: Umgebungsvariablen konfigurieren

Umgebungsvariablen sind für die Verbindung von APIs, Datenbanken und Authentifizierungsdiensten von entscheidender Bedeutung. Navigieren Sie zum Stammverzeichnis Ihres Daytona-Arbeitsbereichs und erstellen Sie eine .env.local-Datei.

Fügen Sie die folgenden Variablen hinzu:

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=

Nach dem Login kopieren

Ersetzen Sie die Platzhalter durch Ihre API-Schlüssel und Datenbank-URLs.

Schritt 4: Erstellen und starten Sie das Projekt

Daytona enthält eine vorkonfigurierte .devcontainer/devcontainer.json-Datei, um die Einrichtung zu optimieren. Diese Datei legt Einstellungen für die Entwicklungsumgebung fest.

Öffnen Sie den Arbeitsbereich mit Daytona:

daytona code

Nach dem Login kopieren

Abhängigkeiten installieren:

npm --legacy-peer-deps i

Nach dem Login kopieren

Starten Sie den Entwicklungsserver:

npm run dev

Nach dem Login kopieren

Die App wird jetzt auf localhost:3000 in Ihrer Daytona-Umgebung ausgeführt.

Schritt 5: Zu erkundende Funktionen

Sobald die Anwendung ausgeführt wird, erkunden Sie ihre Kernfunktionen:

Authentifizierung: Registrieren Sie sich oder melden Sie sich mit Clerk an.
KI-Videogenerierung: Geben Sie eine Abfrage ein, um mithilfe von Remotion- und KI-APIs ein Video zu generieren.
Text-to-Speech: Generieren Sie hochwertige Voiceovers mit ElevenLabs.
Untertitel: Fügen Sie mit AssemblyAI genaue Untertitel hinzu.

Mit Daytona herumspielen

Anpassen der Entwicklungsumgebung

Daytonas Datei .devcontainer/devcontainer.json gibt den Entwicklungscontainer an. Sie können es an spezifische Anforderungen anpassen, z. B. das Hinzufügen neuer Erweiterungen, Portzuordnungen oder Befehle nach der Erstellung.

Beispielausschnitt aus devcontainer.json:

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

Nach dem Login kopieren

Versuchen Sie Folgendes:

Fügen Sie weitere VSCode-Erweiterungen für spezifische Anforderungen hinzu.
Ändern Sie weitergeleitete Ports für zusätzliche Dienste.
Passen Sie den postCreateCommand an, um zusätzliche Abhängigkeiten zu installieren.

Bereitstellung mit Daytona

Daytona vereinfacht die Bereitstellung Ihrer Anwendung in Cloud-Umgebungen. Sobald Sie zur Bereitstellung bereit sind, führen Sie die folgenden Schritte aus:

Übertragen Sie Ihr Projekt in ein Git-Repository.
Verwenden Sie die Bereitstellungstools von Daytona, um Ihre App zu containerisieren und bereitzustellen.

Detaillierte Bereitstellungsschritte finden Sie in den Daytona-Dokumenten

Optional: Zugriff auf den Arbeitsbereich

Daytona ermöglicht Ihnen die gemeinsame Nutzung Ihres Arbeitsbereichs für die Remote-Zusammenarbeit. Verwenden Sie die Arbeitsbereichs-ID, um Teammitgliedern Zugriff zu gewähren.

Für dieses Projekt:

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

Nach dem Login kopieren

Fazit

Durch die Nutzung von Daytona können Sie das Projekt Sample Video Generator mit minimalem Aufwand einrichten, entwickeln und ausführen. Daytonas Containerumgebung und vorkonfigurierte Einstellungen machen es zur perfekten Wahl für Projekte, die nahtlose Entwicklungsabläufe erfordern.

Das Projekt „Sample Video Generation AI Website“ zeigt, wie moderne Tools wie Next.js, Remotion und Daytona die Entwicklung und Bereitstellung von KI-gestützten Anwendungen vereinfachen können. Mit Daytona wird die Einrichtung und Verwaltung komplexer Projekte zum Kinderspiel, sodass Sie sich auf die Entwicklung innovativer Lösungen konzentrieren können.

Beginnen Sie noch heute Ihre Reise und lassen Sie Daytona Ihre Ideen zum Leben erwecken!

Das obige ist der detaillierte Inhalt vonUmfassende Anleitung: Erstellen und Ausführen des „Sample Video Generator' mit Daytona. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!