ai gifs

人工智慧動圖

AI GIF 是一款功能強大的應用程序，可讓您使用先進的 AI 技術產生 GIF。無論您是在尋找獨特的迷因、迷人的動畫，還是只是探索 AI 生成內容的邊界，AI GIF 都能滿足您的需求。

它是根據官方 Next.js + TailwindCSS 啟動器建構的。

該存儲庫雖然展示了特定的人工智慧應用程序，但旨在作為入門工具。您可以接受它，在後端修改模型（探索 Replicate 提供的眾多選項），然後瞧，您就有了一個新應用程式！

AI應用程式製作清單

我在這裡快速介紹一下。

以下是應用程式開發過程中採取的步驟。它們可作為建立基於人工智慧的應用程式時的一般指南。

應用程式架構：應用程式架構很簡單。使用者透過表單輸入提示。提交後，會觸發後端路由處理程序，然後呼叫 AI 模型並傳回結果。

AI 模型託管：我們使用 Replicate 來託管我們的 AI 模型。這消除了單獨部署、處理推理、擴展以及通常繁瑣的 DevOps 相關任務的需要。

最佳化:

• 提示建議：利用promptmaker等庫可以預先填入表單，提供使用者創意。

• 載入狀態：為了增強等待結果時的使用者體驗，我們實作了載入 GIF，與我們應用程式的主題保持一致。

• 安全性檢查：對於初始內容過濾，使用了一個名為bad-words的舊函式庫。要進行更深入的內容檢查，請考慮使用現代庫，例如 nsfw-filter。

速率限制：在啟動之前，尤其是對於免費應用程序，考慮與無伺服器架構相關的潛在成本至關重要。為了避免意外帳單，我們使用 Upstash 整合了速率限制，確保請求流受控。設定過程輕鬆有效率。

現在，一切就緒後，很容易立即邀請用戶。然而，始終確保制定預防措施以維持預算和績效。

部署：該站點部署在 Vercel 上。

入門

安裝依賴項：

 npm install# oryarn# orpnpm install# orbun install

此儲存庫利用 Replicate 進行模型推理，並利用 Upstash 進行速率限制。確保您已為這兩項服務設定了帳戶。

要新增的環境變數：

建立一個 .env.local 檔案並加入這些變數。

 REPLICATE_API_TOKEN=
UPSTASH_REDIS_REST_URL=
UPSTASH_REDIS_REST_TOKEN=

運行開發伺服器：

 npm run dev# oryarn dev# orpnpm dev# orbun dev

用瀏覽器開啟http://localhost:3000查看結果。

您可以透過修改app/page.tsx開始編輯頁面。當您編輯文件時，頁面會自動更新。

該專案使用next/font自動優化和載入 Inter（一種自訂 Google 字體）。

了解更多

要了解有關 Next.js 的更多信息，請查看以下資源：

• Next.js 文件 - 了解 Next.js 功能和 API。

• Learn Next.js - 互動式 Next.js 教學。

您可以查看 Next.js GitHub 儲存庫 - 歡迎您提供回饋和貢獻！

在 Vercel 上部署

部署 Next.js 應用程式最簡單的方法是使用 Next.js 創建者提供的 Vercel 平台。

查看我們的 Next.js 部署文件以了解更多詳細資訊。