綜合指南：使用 Daytona 建立並運行'範例視訊產生器”-js教程-PHP中文網

Comprehensive Guide: Creating and Running the

利用尖端人工智慧技術將文字轉化為引人入勝的影片 ✨

在這篇文章中，我們將探索範例影片產生人工智慧網站項目，並提供使用 Daytona 開發環境整合和運行它的詳細演練。本指南將重點放在利用 Daytona 的功能來簡化設定和部署流程，同時深入探討為應用程式提供支援的核心技術。無論您是初學者還是經驗豐富的開發人員，Daytona 都能簡化您的工作流程並幫助您專注於重要的事情 - 建立令人驚嘆的專案。

建議： Daytona 影片示範 5 分鐘

其他視覺效果： 示範影片已產生 |示範運行網站

專案概況

範例影片產生 AI 網站 是一個 Next.js SaaS 平台，讓使用者透過文字查詢產生引人入勝的影片。該應用程式專為行銷人員、教育工作者和社交媒體創作者設計，利用尖端技術提供無縫且強大的視訊創作體驗。

主要特點

？ 人工智慧影片產生：將純文字轉換為動態影片。
？ 安全身份驗證： 由 Clerk 提供支持，用於使用者登入和註冊。
?️ 文字轉語音： 使用 ElevenLabs 進行高品質語音合成。
？ 字幕：使用AssemblyAI自動產生字幕。
？ 現代 UI： 使用 Shadcn/UI、Framer Motion 和 Tailwind CSS 進行精美設計。
？ 資料庫管理：使用 Drizzle ORM 和 Neon 資料庫管理使用者和視訊資料。
？ AI 整合： 利用 OpenAI、Hugging Face 等進行創意輸出。

使用的技術

前端

Next.js：用於建立高效能應用程式的 React 框架。
Tailwind CSS：實用優先的 CSS 樣式。
Shadcn/UI Sonner：增強 UI 元件和 toast 通知。
Spline：互動式視覺效果的 3D 模型整合。

後端

Drizzle ORM：Neon 資料庫的資料庫抽象化。
Neon 資料庫：用於使用者和檔案管理的基於雲端的資料庫。

API 與函式庫

Remotion Video：從 React 元件產生動態視訊。
OpenAI API：自然語言理解和基於文字的內容創建。
ElevenLabs：高品質的文字轉語音。
AssemblyAI：用於字幕的自動化音訊智慧。
擁抱臉部：存取預先訓練的 AI 模型以進行視訊增強。

為什麼要使用 Daytona 來開發？

Daytona 透過提供建立、管理和部署專案的高效環境，簡化了開發和部署工作流程。它支援以下功能：

自動化容器化環境。
用於遠端協作的工作區管理。
用於快速專案引導的預先配置設定。

Daytona 透過提供以下功能徹底改變了開發人員創建和部署應用程式的方式：

✅ 預先配置的容器化環境： 消除設定難題。
✅ 整合工作區管理： 非常適合遠端協作。
✅ 簡化開發： 專注於構建，而 Daytona 處理其餘的事情。

代托納入門

這是使用 Daytona 整合和運行範例視訊產生器的逐步指南。

第 1 步：安裝 Daytona

首先，請按照官方 Daytona 安裝指南安裝 Daytona CLI。確保您的系統上已安裝並執行 Docker。

Linux/macOS

在終端機中執行以下命令：

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

登入後複製

視窗

使用 PowerShell 安裝 Daytona：
此命令下載並安裝 Daytona 並執行 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;

登入後複製

驗證安裝：

daytona --version

登入後複製

第 2 步：建立 Daytona 工作空間

使用 Daytona 在容器化環境中複製和設定項目。

執行以下指令：

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

登入後複製

Daytona 將自動使用提供的儲存庫設定一個工作區。它將：

將專案複製到新的 Daytona 工作區。
使用 .devcontainer 檔案自動配置工作區。

第3步：設定環境變數

環境變數對於連接 API、資料庫和驗證服務至關重要。導覽至 Daytona 工作區的根目錄並建立一個 .env.local 檔案。

加入以下變數：

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=

登入後複製

將佔位符替換為您的 API 金鑰和資料庫 URL。

第 4 步：建置並啟動專案

Daytona 包含一個預先配置的 .devcontainer/devcontainer.json 檔案以簡化設定。該文件指定開發環境的設定。

使用 Daytona 開啟工作區：

daytona code

登入後複製

安裝依賴項：

npm --legacy-peer-deps i

登入後複製

啟動開發伺服器：

npm run dev

登入後複製

應用程式現在將在您的 Daytona 環境中的 localhost:3000 上運行。

第 5 步：探索功能

應用程式運行後，請探索其核心功能：

驗證：使用 Clerk 註冊或登入。
AI 視訊產生：輸入查詢以使用 Remotion 和 AI API 產生視訊。
文字轉語音：使用 ElevenLabs 產生高品質的配音。
字幕：使用 AssemblyAI 添加準確的字幕。

玩代托納

自訂開發環境

Daytona 的 .devcontainer/devcontainer.json 檔案指定開發容器。您可以根據特定需求進行自訂，例如新增擴充功能、連接埠對映或建立後命令。

來自 devcontainer.json 的範例片段：

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

登入後複製

嘗試：

增加更多 VSCode 擴充以滿足特定需求。
修改轉送連接埠以取得附加服務。
自訂 postCreateCommand 以安裝其他相依性。

使用 Daytona 部署

Daytona 簡化了將應用程式部署到雲端環境的過程。準備好部署後，請按照以下步驟操作：

將您的專案推送到 Git 儲存庫。
使用 Daytona 的部署工具來容器化和部署您的應用程式。

詳細部署步驟，請參閱 Daytona 文件

可選：訪問工作區

Daytona 允許您共享工作空間以進行遠端協作。使用工作區 ID 為團隊成員提供存取權限。

對於這個項目：

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

登入後複製