OpenAI의 텍스트 생성용 GPT-3.5와 이미지 생성용 DALL-E의 성능을 활용하는 대화형 플랫폼인 Magician AI를 소개합니다. 노래 및 비디오 생성을 위한 Replicate AI도 있습니다. 우리 플랫폼을 사용하면 AI와 통신하고, 코드 작성을 요청하고, 생성할 이미지나 비디오를 설명하는 등의 작업을 수행할 수 있습니다. 우리의 인터페이스는 사용자 친화적이며 흥미롭고 창의적인 경험을 제공하도록 설계되었습니다. Stripe을 사용하여 구독 및 결제를 처리하도록 구축된 사용자는 초기 사용이 제한되며 이후에도 구독하여 계속 액세스할 수 있습니다.
프로젝트를 실행하려면 다음이 필요합니다.
노드 18 LTS
Next.JS 13+
우리 플랫폼은 탐색할 수 있는 몇 가지 독특하고 매력적인 기능을 제공합니다.
우리 시스템은 원활하고 안전한 사용자 경험을 보장합니다.
사용자는 이메일과 비밀번호를 사용하여 가입할 수 있습니다.
사용자는 Google 및 GitHub와 같은 타사 인증 공급자를 사용하여 가입할 수 있습니다.
사용자는 이메일과 비밀번호를 사용하여 로그인할 수 있습니다.
사용자는 로그아웃할 수 있습니다.
사용자는 구독 및 결제를 관리할 수 있습니다.
사용자는 AI와 풍성한 대화를 나눌 수 있습니다.
AI에게 주어진 프롬프트에 따라 텍스트를 생성하도록 요청하세요.
AI와 대화형으로 다양한 주제에 대해 토론해보세요.
사용자는 프로그래밍에 AI를 활용할 수 있습니다.
AI에게 특정 요구 사항에 따라 코드를 작성하도록 요청
AI는 설명과 함께 생성된 코드 조각을 제공합니다.
AI는 사용자 설명에서 이미지를 생성합니다.
사용자가 이미지를 설명합니다.
AI는 지정된 해상도에서 해당 설명과 일치하는 여러 이미지를 생성합니다.
비디오 생성을 통해 AI의 창의성을 경험해 보세요.
사용자가 동영상을 설명합니다.
AI는 제공된 설명을 기반으로 비디오를 생성합니다.
제한된 횟수만큼 사용한 후에도 이러한 기능에 계속 액세스하려면 사용자가 구독해야 합니다. 결제 및 구독 관리는 Stripe을 사용하여 안전하게 처리됩니다.
Magician AI 프로젝트는 강력한 최신 기술을 활용하여 고품질 사용자 경험을 제공합니다.
Next.js : 서버측 렌더링(SSR) 및 정적으로 생성된 웹 애플리케이션을 위한 도구와 규칙을 제공하는 React 기반 프레임워크입니다.
Tailwind CSS : 고도로 맞춤화 가능하고 반응성이 뛰어난 디자인을 촉진하는 유틸리티 우선 CSS 프레임워크입니다.
Shadcn UI : Radix UI 및 Tailwind CSS로 구축된 재사용, 액세스 및 사용자 정의 가능한 구성 요소 모음입니다. Shadcn UI는 구성 요소 라이브러리 경험에 관계없이 개발자에게 쉬운 시작을 제공합니다.
Node.js : 웹 브라우저 외부에서 JavaScript 코드를 실행하는 JavaScript 런타임 환경입니다.
Prisma : 효율적이고 버그 없는 쿼리를 위해 유형이 안전한 클라이언트를 제공하는 오픈 소스 ORM입니다.
Axios : HTTP 요청을 만드는 데 사용되는 약속 기반 HTTP 클라이언트입니다.
Clerk Auth : 사용자 친화적인 인증 및 사용자 관리 플랫폼입니다. Clerk는 다양한 인증 전략과 포괄적인 사용자 관리 시스템을 제공합니다. 사용자 정의 가능한 UI 구성 요소를 통해 안전하고 확장 가능하며 사용하기 쉽습니다.
Stripe : 결제 및 구독 처리를 위해 이 프로젝트에서 사용되는 온라인 결제 처리 플랫폼입니다.
Zod : 유형 안전 REST API에 사용되는 TypeScript 우선 스키마 선언 및 유효성 검사 라이브러리입니다.
MySQL : 널리 사용되는 오픈 소스 관계형 데이터베이스 관리 시스템입니다.
OpenAI : 텍스트 및 이미지 생성에 활용됩니다. OpenAI의 GPT-3.5는 텍스트 생성에 사용되고 DALL-E는 이미지 생성에 사용됩니다.
Replicate AI : 사용자 입력을 기반으로 음악 및 비디오를 생성하는 데 사용됩니다.
이 스택의 각 기술은 원활하고 역동적인 사용자 경험을 제공하는 데 중요한 역할을 합니다.
터미널을 열고 다음 명령을 사용하여 프로젝트를 복제합니다.
자식 클론 https://github.com/mbeps/magician-ai.git
프로젝트의 루트 디렉터리로 이동하고 다음 명령을 사용하여 필요한 종속성을 설치합니다.
원사 설치
.env.example
파일의 복사본을 만들고 이름을 .env.local
로 바꿉니다. .env.local
을 필요한 비밀로 채웁니다.
이러한 비밀 중 일부를 가져오는 방법은 다음과 같습니다.
서기 인증
Clerk의 웹사이트에서 계정을 만드세요.
새 애플리케이션을 만듭니다.
애플리케이션 대시보드에서 설정 섹션으로 이동합니다.
이 섹션에서 NEXT_PUBLIC_CLERK_PUBLISHABLE_KEY
및 CLERK_SECRET_KEY
찾을 수 있습니다.
.env.local
의 환경 변수에 이러한 키를 추가하세요.
서기 인증을 위해 다음 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 up db
Prisma를 설정하고 스키마를 데이터베이스에 푸시하려면 다음 명령을 사용하십시오.
Prisma 클라이언트 생성:
원사 프리즈마 생성
Prisma 스키마를 데이터베이스에 푸시합니다.
원사 프리즈마 DB 푸시
Stripe CLI를 실행하고 웹훅을 수신하도록 설정합니다.
스트라이프 수신 --forward-to localhost:3000/api/webhook
그러면 STRIPE_WEBHOOK_SECRET
이 출력됩니다. .env.local
의 환경 변수에 이를 추가하세요.
환경 변수, Prisma 및 Stripe를 설정한 후 다음 명령을 사용하여 프로젝트를 실행합니다.
한 터미널에서 Next.js 서버를 실행합니다.
원사 개발
다른 터미널에서 Stripe 리스너를 시작합니다.
스트라이프 수신 --forward-to localhost:3000/api/webhook
그러면 localhost:3000
에서 프로젝트가 실행되어야 합니다.
참고: 애플리케이션이 제대로 작동하려면 프런트엔드 Next.js 서버와 Stripe CLI가 동시에 실행되어야 합니다.