magician ai

---

Wir stellen Magician AI vor, eine hochgradig interaktive Plattform, die die Leistungsfähigkeit von OpenAIs GPT-3.5 für die Textgenerierung und DALL-E für die Bildgenerierung nutzt. Sowie Replicate AI für die Song- und Videogenerierung. Mit unserer Plattform können Sie mit der KI kommunizieren, sie bitten, Code zu schreiben, zu generierende Bilder oder Videos zu beschreiben und vieles mehr. Unsere Benutzeroberfläche ist benutzerfreundlich und darauf ausgelegt, ein aufregendes, kreatives Erlebnis zu bieten. Entwickelt, um Abonnements und Zahlungen über Stripe abzuwickeln, erhalten Benutzer zunächst begrenzte Nutzungsmöglichkeiten und können anschließend ein Abonnement abschließen, um weiterhin Zugriff zu erhalten.

Anforderungen

Um das Projekt auszuführen, benötigen Sie:

• Knoten 18 LTS

• Next.JS 13+

Merkmale

Unsere Plattform bietet mehrere einzigartige und ansprechende Funktionen zum Erkunden:

Authentifizierung und Kontoverwaltung

Unser System sorgt für nahtlose und sichere Benutzererlebnisse:

• Benutzer können sich mit E-Mail und Passwort anmelden

• Benutzer können sich über Drittanbieter-Authentifizierungsanbieter wie Google und GitHub anmelden

• Benutzer können sich mit E-Mail und Passwort anmelden

• Benutzer können sich abmelden

• Benutzer können ihre Abonnements und Zahlungen verwalten

Gespräche

Benutzer können bereichernde Gespräche mit der KI führen:

• Bitten Sie die KI, Text basierend auf vorgegebenen Eingabeaufforderungen zu generieren

• Besprechen Sie verschiedene Themen im Gespräch mit der KI

Codegenerierung

Benutzer können KI für die Programmierung nutzen:

• Bitten Sie die KI, Code basierend auf spezifischen Anforderungen zu schreiben

• Die KI stellt einen generierten Codeausschnitt zusammen mit einer Erklärung bereit

Bilderzeugung

Die KI erstellt Bilder aus Benutzerbeschreibungen:

• Benutzer beschreiben ein Bild

• Die KI generiert eine Reihe von Bildern, die dieser Beschreibung entsprechen, in einer bestimmten Auflösung

Videogenerierung

Erleben Sie die Kreativität der KI bei der Videogenerierung:

• Benutzer beschreiben ein Video

• Die KI generiert ein Video basierend auf der bereitgestellten Beschreibung

Bitte beachten Sie, dass Benutzer nach einer begrenzten Anzahl von Nutzungen ein Abonnement abschließen müssen, um weiterhin auf diese Funktionen zugreifen zu können. Die Zahlungs- und Abonnementverwaltung erfolgt sicher über Stripe.

Tech-Stack

Das Magician AI-Projekt nutzt eine Reihe robuster moderner Technologien, um ein qualitativ hochwertiges Benutzererlebnis zu bieten:

Frontend

• Next.js : Ein React-basiertes Framework, das Tools und Konventionen für serverseitig gerenderte (SSR) und statisch generierte Webanwendungen bietet.

• Tailwind CSS : Ein Utility-First-CSS-Framework, das hochgradig anpassbares und reaktionsfähiges Design fördert.

• Shadcn-Benutzeroberfläche : Eine Sammlung wiederverwendbarer, zugänglicher und anpassbarer Komponenten, die mit Radix UI und Tailwind CSS erstellt wurden. Shadcn UI bietet Entwicklern einen einfachen Einstieg, unabhängig von ihrer Erfahrung mit Komponentenbibliotheken.

Backend

• Node.js : Eine JavaScript-Laufzeitumgebung, die JavaScript-Code außerhalb eines Webbrowsers ausführt.

• Prisma : Ein Open-Source-ORM, das einen typsicheren Client für effiziente, fehlerfreie Abfragen bereitstellt.

• Axios : Ein auf Versprechen basierender HTTP-Client, der zum Senden von HTTP-Anfragen verwendet wird.

• Clerk Auth : Eine benutzerfreundliche Authentifizierungs- und Benutzerverwaltungsplattform. Clerk bietet mehrere Authentifizierungsstrategien und ein umfassendes Benutzerverwaltungssystem. Es ist sicher, skalierbar und einfach zu verwenden, mit anpassbaren UI-Komponenten.

• Stripe : Eine Online-Zahlungsabwicklungsplattform, die in diesem Projekt zur Abwicklung von Zahlungen und Abonnements verwendet wird.

• Zod : Eine TypeScript-First-Schemadeklarations- und Validierungsbibliothek, die für typsichere REST-APIs verwendet wird.

• MySQL : Ein beliebtes relationales Open-Source-Datenbankverwaltungssystem.

KI und Mediengenerierung

• OpenAI : Wird zum Generieren von Text und Bildern verwendet. Für die Textgenerierung wird GPT-3.5 von OpenAI und für die Bildgenerierung DALL-E verwendet.

• KI replizieren : Wird zum Generieren von Musik und Videos basierend auf Benutzereingaben verwendet.

Jede Technologie in diesem Stack spielt eine entscheidende Rolle bei der Bereitstellung eines nahtlosen und dynamischen Benutzererlebnisses.

Anwendung lokal ausführen

1. Klonen Sie das Projekt lokal

Öffnen Sie Ihr Terminal und verwenden Sie den folgenden Befehl, um das Projekt zu klonen:

 Git-Klon https://github.com/mbeps/magician-ai.git

2. Abhängigkeiten installieren

Navigieren Sie zum Stammverzeichnis des Projekts und installieren Sie die erforderlichen Abhängigkeiten mit dem folgenden Befehl:

 Garn installieren

3. Umgebungsvariablen einrichten

Erstellen Sie eine Kopie der Datei .env.example und benennen Sie sie in .env.local um. Füllen Sie .env.local mit den erforderlichen Geheimnissen.

Hier finden Sie Anweisungen, um einige dieser Geheimnisse zu erfahren:

Sachbearbeiter Auth

1. Erstellen Sie ein Konto auf der Website von Clerk.

2. Erstellen Sie eine neue Anwendung.

3. Gehen Sie in Ihrem Anwendungs-Dashboard zum Abschnitt „Einstellungen“.

4. In diesem Abschnitt finden Sie NEXT_PUBLIC_CLERK_PUBLISHABLE_KEY und CLERK_SECRET_KEY .

5. Fügen Sie diese Schlüssel zu Ihren Umgebungsvariablen in .env.local hinzu.

Sie müssen außerdem die folgenden URLs für Clerk Auth hinzufügen:

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

Informationen zu OPENAI_API_KEY , REPLICATE_API_TOKEN , DATABASE_URL , STRIPE_API_KEY und NEXT_PUBLIC_APP_URL finden Sie in der Dokumentation oder Einstellungsseite des jeweiligen Dienstes, um diese Werte zu erhalten.

4. Datenbank ausführen (Docker)

Dieser Schritt ist erforderlich, wenn Sie das bereitgestellte Docker-Image verwenden möchten. Sie können für MySQL auch einen alternativen Cloud-Dienst nutzen. Stellen Sie sicher, dass Sie die Verbindungszeichenfolge in der .env Datei ändern, wenn Sie dies wünschen.

Führen Sie den folgenden Befehl im Stammverzeichnis des Projekts aus, um Ihren MySQL-Container zu starten:

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

5. Richten Sie Prisma ein

Verwenden Sie die folgenden Befehle, um Prisma einzurichten und das Schema in die Datenbank zu übertragen:

Prisma-Client generieren:

 Garnprisma erzeugen

Prisma-Schema in die Datenbank übertragen:

 Garn Prisma DB Push

5. Richten Sie den Stripe-Webhook ein

Führen Sie die Stripe-CLI aus und lassen Sie sie auf den Webhook lauschen:

 Stripe Listen --forward-to localhost:3000/api/webhook

Dadurch wird Ihr STRIPE_WEBHOOK_SECRET ausgegeben. Fügen Sie dies zu Ihren Umgebungsvariablen in .env.local hinzu.

6. Projekt ausführen

Nachdem Sie die Umgebungsvariablen Prisma und Stripe eingerichtet haben, verwenden Sie die folgenden Befehle, um das Projekt auszuführen:

Führen Sie in einem Terminal den Next.js-Server aus:

 Garnentw

Starten Sie in einem anderen Terminal den Stripe-Listener:

 Stripe Listen --forward-to localhost:3000/api/webhook

Dadurch sollte das Projekt auf localhost:3000 ausgeführt werden.

Hinweis: Sowohl der Frontend-Next.js-Server als auch die Stripe-CLI müssen gleichzeitig ausgeführt werden, damit die Anwendung ordnungsgemäß funktioniert.