magician ai

---

隆重介紹 Magician AI，這是一個高度互動的平台，利用 OpenAI 的 GPT-3.5 的強大功能進行文字生成，並利用 DALL-E 進行圖像生成。以及用於歌曲和視訊生成的複製人工智慧。透過我們的平台，您可以與人工智慧進行交流，要求它編寫程式碼、描述要產生的圖像或影片等等。我們的介面易於使用，旨在提供令人興奮的創意體驗。專為使用 Stripe 處理訂閱和付款而設計，用戶的初始使用受到限制，隨後可以訂閱以繼續存取。

要求

要運行該項目，您需要：

• 節點 18 LTS

• 下一步.JS 13+

特徵

我們的平台提供了幾個獨特且引人入勝的功能供您探索：

身份驗證和帳戶管理

我們的系統確保無縫且安全的使用者體驗：

• 使用者可以使用電子郵件和密碼註冊

• 使用者可以使用第三方身份驗證提供者（例如 Google 和 GitHub）進行註冊

• 使用者可以使用電子郵件和密碼登入

• 用戶可以註銷

• 用戶可以管理他們的訂閱和付款

對話

使用者可以與人工智慧進行豐富的對話：

• 要求 AI 根據給定的提示生成文本

• 與人工智慧以對話方式討論各種話題

程式碼生成

用戶可以利用人工智慧進行程式設計：

• 讓AI根據具體需求編寫程式碼

• AI 提供產生的程式碼片段以及解釋

影像生成

人工智慧根據用戶描述創建圖像：

• 使用者描述圖像

• AI 會產生許多與指定解析度的描述相符的影像

影片生成

透過視訊生成體驗人工智慧的創造力：

• 用戶描述視頻

• AI根據提供的描述生成視頻

請注意，在有限的使用次數後，用戶必須訂閱才能繼續存取這些功能。使用 Stripe 安全地處理付款和訂閱管理。

技術堆疊

Magician AI 專案利用一套強大的現代技術來提供高品質的使用者體驗：

前端

• Next.js ：一個基於 React 的框架，為伺服器端渲染 (SSR) 和靜態產生的 Web 應用程式提供工具和約定。

• Tailwind CSS ：實用程式優先的 CSS 框架，促進高度可自訂和響應式設計。

• Shadcn UI ：使用 Radix UI 和 Tailwind CSS 建立的可重複使用、可存取和可自訂的元件的集合。 Shadcn UI 為開發人員提供了一個輕鬆的起點，無論他們對元件庫的經驗如何。

後端

• Node.js ：在 Web 瀏覽器之外執行 JavaScript 程式碼的 JavaScript 執行環境。

• Prisma ：一種開源 ORM，為高效能、無錯誤的查詢提供類型安全的用戶端。

• Axios ：基於 Promise 的 HTTP 用戶端，用於發出 HTTP 請求。

• Clerk Auth ：一個使用者友善的身份驗證和使用者管理平台。 Clerk提供多種認證策略和完善的使用者管理系統。它安全、可擴展且易於使用，並具有可自訂的 UI 元件。

• Stripe ：此專案中使用的線上支付處理平台，用於處理付款和訂閱。

• Zod ：用於類型安全性 REST API 的 TypeScript 優先架構聲明和驗證程式庫。

• MySQL ：一種流行的開源關係型資料庫管理系統。

人工智慧和媒體生成

• OpenAI ：用於產生文字和圖像。 OpenAI的GPT-3.5用於文字生成，DALL-E用於影像生成。

• 複製人工智慧：用於根據用戶輸入生成音樂和影片。

此堆疊中的每項技術在提供無縫、動態的使用者體驗方面都發揮著至關重要的作用。

本地運行應用程式

1.將項目克隆到本地

打開終端機並使用以下命令克隆項目：

 git 克隆 https://github.com/mbeps/magician-ai.git

2.安裝依賴項

導航到專案的根目錄並使用以下命令安裝所需的依賴項：

紗線安裝

3.設定環境變數

建立.env.example檔案的副本並將其重新命名為.env.local 。使用必要的機密填充.env.local 。

以下是獲取其中一些秘密的說明：

職員授權

1. 在 Clerk 的網站上建立一個帳戶。

2. 建立一個新應用程式。

3. 在您的應用程式儀表板中，轉到設定部分。

4. 您將在此部分中找到NEXT_PUBLIC_CLERK_PUBLISHABLE_KEY和CLERK_SECRET_KEY 。

5. 將這些鍵加入.env.local中的環境變數。

您還需要為 Clerk Auth 新增以下 URL：

NEXT_PUBLIC_CLERK_SIGN_IN_URL=/sign-in
NEXT_PUBLIC_CLERK_SIGN_UP_URL=/sign-up
NEXT_PUBLIC_CLERK_AFTER_SIGN_IN_URL=/dashboard
NEXT_PUBLIC_CLERK_AFTER_SIGN_UP_URL=/dashboard

對於OPENAI_API_KEY 、 REPLICATE_API_TOKEN 、 DATABASE_URL 、 STRIPE_API_KEY和NEXT_PUBLIC_APP_URL ，請參閱對應服務的文件或設定頁面以取得這些值。

4.運行資料庫（Docker）

如果您要使用已提供的 Docker 映像，則此步驟是必要的。您也可以使用 MySQL 的替代雲端服務。如果您願意，請確保更改.env檔案上的連接字串。

從專案的根目錄執行以下命令來啟動 MySQL 容器：

 docker-compose --env-file .env -f docker/docker-compose.yml up db

5.設定 Prisma

若要設定 Prisma 並將架構推送到資料庫，請使用以下命令：

產生 Prisma 客戶端：

紗線棱鏡生成

將 Prisma 架構推送到資料庫：

紗線 Prisma 資料庫推送

5.設定 Stripe Webhook

執行 Stripe CLI 並使其監聽 webhook：

條帶監聽 --forward-to localhost:3000/api/webhook

這將輸出您的STRIPE_WEBHOOK_SECRET 。將其加入.env.local中的環境變數。

6.運行項目

設定環境變數、Prisma 和 Stripe 後，使用以下命令執行專案：

在一個終端機中，運行 Next.js 伺服器：

紗線開發

在另一個終端中，啟動 Stripe 監聽器：

條帶監聽 --forward-to localhost:3000/api/webhook

這應該會在localhost:3000上執行該專案。

注意：前端 Next.js 伺服器和 Stripe CLI 需要同時運行，應用程式才能正常運作。