Apresentando Magician AI, uma plataforma altamente interativa que aproveita o poder do GPT-3.5 da OpenAI para geração de texto e DALL-E para geração de imagens. Bem como Replicate AI para geração de músicas e vídeos. Com nossa plataforma, você pode se comunicar com a IA, solicitar que ela escreva código, descreva imagens ou vídeos a serem gerados e muito mais. Nossa interface é amigável e projetada para fornecer uma experiência emocionante e criativa. Desenvolvido para lidar com assinaturas e pagamentos usando o Stripe, os usuários obtêm usos iniciais limitados e podem subseqüentemente assinar para obter acesso contínuo.
Para executar o projeto, você precisa de:
Nó 18 LTS
Próximo.JS 13+
Nossa plataforma oferece vários recursos exclusivos e envolventes para explorar:
Nosso sistema garante experiências de usuário perfeitas e seguras:
Os usuários podem se inscrever usando e-mail e senha
Os usuários podem se inscrever usando provedores de autenticação de terceiros, como Google e GitHub
Os usuários podem fazer login usando e-mail e senha
Os usuários podem sair
Os usuários podem gerenciar suas assinaturas e pagamentos
Os usuários podem ter conversas enriquecedoras com a IA:
Peça à IA para gerar texto com base nas instruções fornecidas
Discuta vários tópicos de maneira conversacional com a IA
Os usuários podem aproveitar a IA para programação:
Peça à IA para escrever código com base em requisitos específicos
A IA fornece um trecho de código gerado junto com uma explicação
A IA cria imagens a partir das descrições dos usuários:
Os usuários descrevem uma imagem
A IA gera uma série de imagens que correspondem a essa descrição em uma resolução especificada
Experimente a criatividade da IA com geração de vídeo:
Os usuários descrevem um vídeo
A IA gera um vídeo com base na descrição fornecida
Observe que após um número limitado de usos, os usuários deverão se inscrever para continuar acessando esses recursos. O gerenciamento de pagamentos e assinaturas é feito de forma segura usando o Stripe.
O projeto Magician AI utiliza um conjunto robusto de tecnologias modernas para oferecer uma experiência de usuário de alta qualidade:
Next.js : uma estrutura baseada em React que oferece ferramentas e convenções para aplicativos da web renderizados no lado do servidor (SSR) e gerados estaticamente.
Tailwind CSS : uma estrutura CSS utilitária que promove um design altamente personalizável e responsivo.
Shadcn UI : uma coleção de componentes reutilizáveis, acessíveis e personalizáveis criados com Radix UI e Tailwind CSS. Shadcn UI oferece um começo fácil para desenvolvedores, independentemente de sua experiência com bibliotecas de componentes.
Node.js : um ambiente de tempo de execução JavaScript que executa código JavaScript fora de um navegador da web.
Prisma : um ORM de código aberto que fornece um cliente com segurança de tipo para consultas eficientes e sem erros.
Axios : um cliente HTTP baseado em promessa usado para fazer solicitações HTTP.
Clerk Auth : Uma plataforma fácil de autenticação e gerenciamento de usuários. Clerk fornece múltiplas estratégias de autenticação e um sistema abrangente de gerenciamento de usuários. É seguro, escalonável e fácil de usar, com componentes de UI personalizáveis.
Stripe : Uma plataforma de processamento de pagamentos online usada neste projeto para lidar com pagamentos e assinaturas.
Zod : uma primeira declaração de esquema e biblioteca de validação do TypeScript usada para APIs REST com segurança de tipo.
MySQL : Um popular sistema de gerenciamento de banco de dados relacional de código aberto.
OpenAI : Utilizado para geração de texto e imagens. O GPT-3.5 da OpenAI é usado para geração de texto e DALL-E para geração de imagens.
Replicar IA : usado para gerar músicas e vídeos com base nas entradas do usuário.
Cada tecnologia nesta pilha desempenha um papel crucial no fornecimento de uma experiência de usuário dinâmica e contínua.
Abra seu terminal e use o seguinte comando para clonar o projeto:
clone do git https://github.com/mbeps/magician-ai.git
Navegue até o diretório raiz do projeto e instale as dependências necessárias usando o seguinte comando:
instalação de fio
Crie uma cópia do arquivo .env.example
e renomeie-o para .env.local
. Preencha o .env.local
com os segredos necessários.
Aqui estão as instruções para obter alguns desses segredos:
Autenticação do funcionário
Crie uma conta no site do Clerk.
Crie um novo aplicativo.
No painel do seu aplicativo, vá para a seção de configurações.
Você encontrará NEXT_PUBLIC_CLERK_PUBLISHABLE_KEY
e CLERK_SECRET_KEY
nesta seção.
Adicione essas chaves às variáveis de ambiente em .env.local
.
Você também precisa adicionar os seguintes URLs para 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
Para OPENAI_API_KEY
, REPLICATE_API_TOKEN
, DATABASE_URL
, STRIPE_API_KEY
e NEXT_PUBLIC_APP_URL
, consulte a documentação ou página de configurações do respectivo serviço para obter esses valores.
Esta etapa é necessária se você quiser usar a imagem Docker fornecida. Você também pode usar um serviço de nuvem alternativo para MySQL. Certifique-se de alterar a string de conexão no arquivo .env
se desejar.
Execute o seguinte comando na raiz do projeto para iniciar seu contêiner MySQL:
docker-compose --env-file .env -f docker/docker-compose.yml up db
Para configurar o Prisma e enviar o esquema para o banco de dados, use os seguintes comandos:
Gerar cliente Prisma:
fio prisma gerar
Envie o esquema Prisma para o banco de dados:
fio prisma db push
Execute o Stripe CLI e faça-o ouvir o webhook:
stripe listen --forward-to localhost:3000/api/webhook
Isso gerará seu STRIPE_WEBHOOK_SECRET
. Adicione isso às suas variáveis de ambiente em .env.local
.
Depois de configurar as variáveis de ambiente Prisma e Stripe, use os seguintes comandos para executar o projeto:
Em um terminal, execute o servidor Next.js:
desenvolvedor de fios
Em outro terminal, inicie o ouvinte Stripe:
stripe listen --forward-to localhost:3000/api/webhook
Isso deve executar o projeto em localhost:3000
.
Nota: Tanto o servidor front-end Next.js quanto o Stripe CLI precisam estar em execução simultaneamente para que o aplicativo funcione corretamente.