magician ai
1.0.0
Magician AI は、テキスト生成に OpenAI の GPT-3.5、画像生成に DALL-E の力を活用する高度にインタラクティブなプラットフォームです。曲とビデオの生成のための Replicate AI も同様です。私たちのプラットフォームを使用すると、AI と通信したり、AI にコードの作成を依頼したり、生成される画像やビデオを記述したりすることができます。私たちのインターフェースはユーザーフレンドリーで、エキサイティングでクリエイティブな体験を提供するように設計されています。 Stripe を使用してサブスクリプションと支払いを処理するように構築されているため、ユーザーは初回使用が制限されており、その後は継続的なアクセスをサブスクライブできます。
プロジェクトを実行するには、以下が必要です。
ノード18 LTS
次へ.JS 13+
私たちのプラットフォームは、探索できるいくつかのユニークで魅力的な機能を提供します。
当社のシステムは、シームレスで安全なユーザー エクスペリエンスを保証します。
ユーザーは電子メールとパスワードを使用してサインアップできます
ユーザーは、Google や GitHub などのサードパーティ認証プロバイダーを使用してサインアップできます。
ユーザーは電子メールとパスワードを使用してログインできます
ユーザーはログアウトできます
ユーザーはサブスクリプションと支払いを管理できます
ユーザーは AI と充実した会話を行うことができます。
与えられたプロンプトに基づいてテキストを生成するように AI に依頼します
AIと会話形式でさまざまなトピックについて話し合う
ユーザーはプログラミングに AI を活用できます。
AI に特定の要件に基づいてコードを作成するよう依頼する
AI は生成されたコード スニペットと説明を提供します
AI はユーザーの説明から画像を作成します。
ユーザーが画像を説明する
AI は、指定された解像度でその説明に一致する多数の画像を生成します
ビデオ生成による AI の創造性を体験してください。
ユーザーがビデオについて説明する
AIは提供された説明に基づいてビデオを生成します
限られた回数の使用後、ユーザーがこれらの機能にアクセスし続けるには購読する必要があることに注意してください。支払いとサブスクリプションの管理は、Stripe を使用して安全に処理されます。
Magician AI プロジェクトは、最新のテクノロジーの堅牢なセットを利用して、高品質のユーザー エクスペリエンスを提供します。
Next.js : サーバーサイド レンダリング (SSR) および静的に生成された Web アプリケーション用のツールと規約を提供する React ベースのフレームワーク。
Tailwind CSS : 高度にカスタマイズ可能で応答性の高いデザインを促進するユーティリティファーストの CSS フレームワーク。
Shadcn UI : Radix UI と Tailwind CSS で構築された、再利用可能、アクセス可能、カスタマイズ可能なコンポーネントのコレクション。 Shadcn UI は、コンポーネント ライブラリの経験に関係なく、開発者にとって簡単なスタートを提供します。
Node.js : Web ブラウザーの外部で JavaScript コードを実行する JavaScript ランタイム環境。
Prisma : 効率的でバグのないクエリのためのタイプセーフなクライアントを提供するオープンソース ORM。
Axios : HTTP リクエストの作成に使用される Promise ベースの HTTP クライアント。
Clerk Auth : ユーザーフレンドリーな認証およびユーザー管理プラットフォーム。 Clerk は、複数の認証戦略と包括的なユーザー管理システムを提供します。安全でスケーラブルで使いやすく、カスタマイズ可能な UI コンポーネントを備えています。
Stripe : このプロジェクトで支払いとサブスクリプションを処理するために使用されるオンライン支払い処理プラットフォーム。
Zod : タイプセーフな REST API に使用される TypeScript ファーストのスキーマ宣言および検証ライブラリ。
MySQL : 人気のあるオープンソースのリレーショナル データベース管理システム。
OpenAI : テキストや画像の生成に利用されます。テキスト生成には OpenAI の GPT-3.5 が、画像生成には DALL-E が使用されます。
Replicate AI : ユーザー入力に基づいて音楽やビデオを生成するために使用されます。
このスタック内の各テクノロジーは、シームレスで動的なユーザー エクスペリエンスを提供する上で重要な役割を果たします。
ターミナルを開き、次のコマンドを使用してプロジェクトのクローンを作成します。
git クローン https://github.com/mbeps/magician-ai.git
プロジェクトのルート ディレクトリに移動し、次のコマンドを使用して必要な依存関係をインストールします。
糸のインストール
.env.exampleファイルのコピーを作成し、名前を.env.localに変更します。 .env.localに必要なシークレットを入力します。
これらのシークレットの一部を取得する手順は次のとおりです。
事務員の認証
Clerk の Web サイトでアカウントを作成します。
新しいアプリケーションを作成します。
アプリケーションのダッシュボードで、設定セクションに移動します。
このセクションには、 NEXT_PUBLIC_CLERK_PUBLISHABLE_KEYとCLERK_SECRET_KEYがあります。
これらのキーを.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については、それぞれのサービスのドキュメントまたは設定ページを参照してこれらの値を取得してください。
この手順は、提供されている Docker イメージを使用する場合に必要です。 MySQL の代替クラウド サービスを使用することもできます。必要に応じて、 .envファイルの接続文字列を必ず変更してください。
プロジェクトのルートから次のコマンドを実行して、MySQL コンテナを起動します。
docker-compose --env-file .env -f docker/docker-compose.yml アップ データベース
Prisma をセットアップしてスキーマをデータベースにプッシュするには、次のコマンドを使用します。
Prisma クライアントを生成します。
糸プリズマ生成
Prisma スキーマをデータベースにプッシュします。
糸プリズマ DB プッシュ
Stripe CLI を実行し、Webhook をリッスンするようにします。
ストライプリッスン --forward-to localhost:3000/api/webhook
これにより、 STRIPE_WEBHOOK_SECRETが出力されます。これを.env.localの環境変数に追加します。
環境変数 Prisma および Stripe を設定したら、次のコマンドを使用してプロジェクトを実行します。
1 つのターミナルで Next.js サーバーを実行します。
糸開発
別の端末で、Stripe リスナーを開始します。
ストライプリッスン --forward-to localhost:3000/api/webhook
これにより、プロジェクトがlocalhost:3000で実行されるはずです。
注:アプリケーションが適切に機能するには、フロントエンド Next.js サーバーと Stripe CLI の両方が同時に実行されている必要があります。
