Présentation de Magician AI, une plate-forme hautement interactive qui exploite la puissance du GPT-3.5 d'OpenAI pour la génération de texte et du DALL-E pour la génération d'images. Ainsi que Replicate AI pour la génération de chansons et de vidéos. Avec notre plateforme, vous pouvez communiquer avec l'IA, lui demander d'écrire du code, décrire des images ou des vidéos à générer, et bien plus encore. Notre interface est conviviale et conçue pour offrir une expérience passionnante et créative. Conçu pour gérer les abonnements et les paiements à l'aide de Stripe, les utilisateurs bénéficient d'utilisations initiales limitées et peuvent ensuite s'abonner pour un accès continu.
Pour exécuter le projet, vous avez besoin de :
Nœud 18 LTS
Suivant.JS 13+
Notre plateforme offre plusieurs fonctionnalités uniques et attrayantes à explorer :
Notre système garantit des expériences utilisateur transparentes et sécurisées :
Les utilisateurs peuvent s'inscrire en utilisant l'e-mail et le mot de passe
Les utilisateurs peuvent s'inscrire à l'aide de fournisseurs d'authentification tiers tels que Google et GitHub.
Les utilisateurs peuvent se connecter en utilisant l'e-mail et le mot de passe
Les utilisateurs peuvent se déconnecter
Les utilisateurs peuvent gérer leurs abonnements et leurs paiements
Les utilisateurs peuvent avoir des conversations enrichissantes avec l’IA :
Demandez à l'IA de générer du texte en fonction des invites données
Discutez de divers sujets de manière conversationnelle avec l'IA
Les utilisateurs peuvent tirer parti de l'IA pour la programmation :
Demandez à l'IA d'écrire du code en fonction d'exigences spécifiques
L'IA fournit un extrait de code généré ainsi qu'une explication
L'IA crée des images à partir des descriptions des utilisateurs :
Les utilisateurs décrivent une image
L'IA génère un certain nombre d'images correspondant à cette description à une résolution spécifiée
Découvrez la créativité de l'IA avec la génération vidéo :
Les utilisateurs décrivent une vidéo
L'IA génère une vidéo basée sur la description fournie
Veuillez noter qu'après un nombre limité d'utilisations, les utilisateurs doivent s'abonner pour continuer à accéder à ces fonctionnalités. La gestion des paiements et des abonnements est gérée de manière sécurisée à l'aide de Stripe.
Le projet Magician AI utilise un ensemble robuste de technologies modernes pour offrir une expérience utilisateur de haute qualité :
Next.js : Un framework basé sur React offrant des outils et des conventions pour les applications Web rendues côté serveur (SSR) et générées statiquement.
Tailwind CSS : un framework CSS axé sur les utilitaires favorisant une conception hautement personnalisable et réactive.
Shadcn UI : une collection de composants réutilisables, accessibles et personnalisables construits avec Radix UI et Tailwind CSS. Shadcn UI offre un démarrage facile aux développeurs, quelle que soit leur expérience avec les bibliothèques de composants.
Node.js : Un environnement d'exécution JavaScript qui exécute du code JavaScript en dehors d'un navigateur Web.
Prisma : Un ORM open source qui fournit un client de type sécurisé pour des requêtes efficaces et sans bugs.
Axios : Un client HTTP basé sur des promesses utilisé pour effectuer des requêtes HTTP.
Clerk Auth : Une plateforme conviviale d’authentification et de gestion des utilisateurs. Clerk fournit plusieurs stratégies d'authentification et un système complet de gestion des utilisateurs. Il est sécurisé, évolutif et facile à utiliser, avec des composants d'interface utilisateur personnalisables.
Stripe : Une plateforme de traitement des paiements en ligne utilisée dans ce projet pour gérer les paiements et les abonnements.
Zod : une bibliothèque de déclaration et de validation de schéma basée sur TypeScript utilisée pour les API REST de type sécurisé.
MySQL : Un système de gestion de bases de données relationnelles open source populaire.
OpenAI : Utilisé pour générer du texte et des images. Le GPT-3.5 d'OpenAI est utilisé pour la génération de texte et DALL-E pour la génération d'images.
Répliquer l'IA : utilisé pour générer de la musique et des vidéos en fonction des entrées de l'utilisateur.
Chaque technologie de cette pile joue un rôle crucial pour offrir une expérience utilisateur fluide et dynamique.
Ouvrez votre terminal et utilisez la commande suivante pour cloner le projet :
clone git https://github.com/mbeps/magician-ai.git
Accédez au répertoire racine du projet et installez les dépendances requises à l'aide de la commande suivante :
installation de fil
Créez une copie du fichier .env.example
et renommez-la en .env.local
. Remplissez le .env.local
avec les secrets nécessaires.
Voici les instructions pour obtenir certains de ces secrets :
Authentification du commis
Créez un compte sur le site Web du greffier.
Créez une nouvelle application.
Dans le tableau de bord de votre application, accédez à la section paramètres.
Vous trouverez les NEXT_PUBLIC_CLERK_PUBLISHABLE_KEY
et CLERK_SECRET_KEY
dans cette section.
Ajoutez ces clés à vos variables d'environnement dans .env.local
.
Vous devez également ajouter les URL suivantes pour Clerk Auth :
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
Pour OPENAI_API_KEY
, REPLICATE_API_TOKEN
, DATABASE_URL
, STRIPE_API_KEY
et NEXT_PUBLIC_APP_URL
, reportez-vous à la documentation ou à la page de paramètres du service concerné pour obtenir ces valeurs.
Cette étape est nécessaire si vous souhaitez utiliser l'image Docker fournie. Vous pouvez également utiliser un service cloud alternatif pour MySQL. Assurez-vous de modifier la chaîne de connexion sur le fichier .env
si vous souhaitez le faire.
Exécutez la commande suivante depuis la racine du projet pour démarrer votre conteneur MySQL :
docker-compose --env-file .env -f docker/docker-compose.yml dans la base de données
Pour configurer Prisma et transférer le schéma vers la base de données, utilisez les commandes suivantes :
Générer le client Prisma :
fil prisma générer
Transférez le schéma Prisma vers la base de données :
fil prisma db push
Exécutez la Stripe CLI et faites-lui écouter le webhook :
bande écouter --forward-to localhost:3000/api/webhook
Cela affichera votre STRIPE_WEBHOOK_SECRET
. Ajoutez ceci à vos variables d'environnement dans .env.local
.
Une fois que vous avez configuré les variables d'environnement, Prisma et Stripe, utilisez les commandes suivantes pour exécuter le projet :
Dans un terminal, exécutez le serveur Next.js :
développeur de fil
Dans un autre terminal, démarrez l'écouteur Stripe :
bande écouter --forward-to localhost:3000/api/webhook
Cela devrait exécuter le projet sur localhost:3000
.
Remarque : Le serveur frontal Next.js et Stripe CLI doivent être exécutés simultanément pour que l'application fonctionne correctement.