หน้าแรก>การเขียนโปรแกรมที่เกี่ยวข้อง>ซอร์สโค้ดอื่น ๆ
ดาวน์โหลด

ปิดบัง

ขอแนะนำ Magician AI ซึ่งเป็นแพลตฟอร์มที่มีการโต้ตอบสูงซึ่งใช้ประโยชน์จาก GPT-3.5 ของ OpenAI สำหรับการสร้างข้อความและ DALL-E สำหรับการสร้างภาพ รวมถึงการจำลอง AI สำหรับการสร้างเพลงและวิดีโอ ด้วยแพลตฟอร์มของเรา คุณสามารถสื่อสารกับ AI ขอให้เขียนโค้ด อธิบายรูปภาพหรือวิดีโอที่จะสร้าง และอื่นๆ อีกมากมาย อินเทอร์เฟซของเราใช้งานง่ายและออกแบบมาเพื่อมอบประสบการณ์ที่น่าตื่นเต้นและสร้างสรรค์ สร้างขึ้นเพื่อรองรับการสมัครสมาชิกและการชำระเงินโดยใช้ Stripe ผู้ใช้จะได้รับการใช้งานครั้งแรกอย่างจำกัด และสามารถสมัครรับข้อมูลเพื่อเข้าถึงต่อไปได้ในภายหลัง

ความต้องการ

ในการดำเนินโครงการ คุณต้องมี:

  • โหนด 18 LTS

  • ถัดไปJS 13+

คุณสมบัติ

แพลตฟอร์มของเรานำเสนอคุณสมบัติที่เป็นเอกลักษณ์และน่าดึงดูดหลายประการให้สำรวจ:

การรับรองความถูกต้องและการจัดการบัญชี

ระบบของเรารับประกันประสบการณ์ผู้ใช้ที่ราบรื่นและปลอดภัย:

  • ผู้ใช้สามารถลงทะเบียนโดยใช้อีเมลและรหัสผ่าน

  • ผู้ใช้สามารถลงทะเบียนโดยใช้ผู้ให้บริการตรวจสอบความถูกต้องบุคคลที่สาม เช่น Google และ GitHub

  • ผู้ใช้สามารถเข้าสู่ระบบโดยใช้อีเมลและรหัสผ่าน

  • ผู้ใช้สามารถออกจากระบบได้

  • ผู้ใช้สามารถจัดการการสมัครสมาชิกและการชำระเงินได้

บทสนทนา

ผู้ใช้สามารถสนทนากับ AI ได้อย่างเต็มอิ่ม:

  • ขอให้ AI สร้างข้อความตามคำแนะนำที่กำหนด

  • อภิปรายการหัวข้อต่าง ๆ ในลักษณะการสนทนากับ AI

การสร้างรหัส

ผู้ใช้สามารถใช้ประโยชน์จาก AI สำหรับการเขียนโปรแกรม:

  • ขอให้ AI เขียนโค้ดตามความต้องการเฉพาะ

  • AI จัดเตรียมข้อมูลโค้ดที่สร้างขึ้นพร้อมกับคำอธิบาย

การสร้างภาพ

AI สร้างภาพจากคำอธิบายของผู้ใช้:

  • ผู้ใช้อธิบายภาพ

  • AI จะสร้างรูปภาพจำนวนหนึ่งที่ตรงกับคำอธิบายนั้นด้วยความละเอียดที่กำหนด

การสร้างวิดีโอ

สัมผัสประสบการณ์ความคิดสร้างสรรค์ของ AI ด้วยการสร้างวิดีโอ:

  • ผู้ใช้อธิบายวิดีโอ

  • AI สร้างวิดีโอตามคำอธิบายที่ให้ไว้

โปรดทราบว่าหลังจากใช้งานไปในจำนวนที่จำกัด ผู้ใช้จะต้องสมัครสมาชิกเพื่อเข้าถึงคุณสมบัติเหล่านี้ต่อไป การจัดการการชำระเงินและการสมัครสมาชิกได้รับการจัดการอย่างปลอดภัยโดยใช้ Stripe

เทคสแต็ค

โครงการ Magician AI ใช้เทคโนโลยีสมัยใหม่ที่แข็งแกร่งเพื่อมอบประสบการณ์ผู้ใช้คุณภาพสูง:

ส่วนหน้า

  • Next.js : เฟรมเวิร์กที่ใช้ React นำเสนอเครื่องมือและแบบแผนสำหรับการเรนเดอร์ฝั่งเซิร์ฟเวอร์ (SSR) และเว็บแอปพลิเคชันที่สร้างแบบคงที่

  • Tailwind CSS : เฟรมเวิร์ก CSS เน้นยูทิลิตี้เป็นหลัก ส่งเสริมการออกแบบที่ปรับแต่งได้สูงและตอบสนองได้ดี

  • Shadcn UI : ชุดของส่วนประกอบที่ใช้ซ้ำได้ เข้าถึงได้ และปรับแต่งได้ ซึ่งสร้างขึ้นด้วย Radix UI และ Tailwind CSS Shadcn UI ช่วยให้นักพัฒนาเริ่มต้นใช้งานได้ง่าย โดยไม่คำนึงถึงประสบการณ์ในการใช้ไลบรารีส่วนประกอบ

แบ็กเอนด์

  • Node.js : สภาพแวดล้อมรันไทม์ JavaScript ที่รันโค้ด JavaScript ภายนอกเว็บเบราว์เซอร์

  • Prisma : ORM แบบโอเพ่นซอร์สที่ให้ไคลเอนต์ที่ปลอดภัยสำหรับการสืบค้นที่มีประสิทธิภาพและปราศจากข้อบกพร่อง

  • Axios : ไคลเอนต์ HTTP ตามสัญญาที่ใช้สำหรับการร้องขอ HTTP

  • Clerk Auth : แพลตฟอร์มการตรวจสอบสิทธิ์และการจัดการผู้ใช้ที่เป็นมิตรต่อผู้ใช้ เสมียนมีกลยุทธ์การรับรองความถูกต้องที่หลากหลายและระบบการจัดการผู้ใช้ที่ครอบคลุม มีความปลอดภัย ปรับขนาดได้ และใช้งานง่าย พร้อมองค์ประกอบ UI ที่ปรับแต่งได้

  • Stripe : แพลตฟอร์มประมวลผลการชำระเงินออนไลน์ที่ใช้ในโปรเจ็กต์นี้สำหรับจัดการการชำระเงินและการสมัครสมาชิก

  • Zod : การประกาศสคีมาแรกของ TypeScript และไลบรารีการตรวจสอบที่ใช้สำหรับ REST API ที่ปลอดภัยต่อประเภท

  • MySQL : ระบบจัดการฐานข้อมูลเชิงสัมพันธ์แบบโอเพ่นซอร์สยอดนิยม

AI และการสร้างสื่อ

  • OpenAI : ใช้สำหรับสร้างข้อความและรูปภาพ GPT-3.5 ของ OpenAI ใช้สำหรับการสร้างข้อความ และ DALL-E ใช้สำหรับการสร้างภาพ

  • จำลอง AI : ใช้ในการสร้างเพลงและวิดีโอตามอินพุตของผู้ใช้

แต่ละเทคโนโลยีในกลุ่มนี้มีบทบาทสำคัญในการมอบประสบการณ์ผู้ใช้ที่ราบรื่นและไดนามิก

เรียกใช้แอปพลิเคชันในเครื่อง

1. โคลนโครงการในเครื่อง

เปิดเทอร์มินัลของคุณแล้วใช้คำสั่งต่อไปนี้เพื่อโคลนโปรเจ็กต์:

 โคลนคอมไพล์ https://github.com/mbeps/magician-ai.git

2. ติดตั้งการพึ่งพา

นำทางไปยังไดเร็กทอรีรากของโปรเจ็กต์และติดตั้งการขึ้นต่อกันที่จำเป็นโดยใช้คำสั่งต่อไปนี้:

 ติดตั้งเส้นด้าย

3. ตั้งค่าตัวแปรสภาพแวดล้อม

สร้างสำเนาของไฟล์ .env.example และเปลี่ยนชื่อเป็น .env.local เติม .env.local ด้วยความลับที่จำเป็น

คำแนะนำในการรับความลับเหล่านี้มีดังนี้:

เสมียนรับรองความถูกต้อง

  1. สร้างบัญชีบนเว็บไซต์ของเสมียน

  2. สร้างแอปพลิเคชันใหม่

  3. ในแดชบอร์ดแอปพลิเคชันของคุณ ให้ไปที่ส่วนการตั้งค่า

  4. คุณจะพบ NEXT_PUBLIC_CLERK_PUBLISHABLE_KEY และ CLERK_SECRET_KEY ในส่วนนี้

  5. เพิ่มคีย์เหล่านี้ให้กับตัวแปรสภาพแวดล้อมของคุณใน . .env.local

คุณต้องเพิ่ม URL ต่อไปนี้สำหรับ 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

สำหรับ OPENAI_API_KEY , REPLICATE_API_TOKEN , DATABASE_URL , STRIPE_API_KEY และ NEXT_PUBLIC_APP_URL โปรดดูเอกสารประกอบหรือหน้าการตั้งค่าของบริการที่เกี่ยวข้องเพื่อรับค่าเหล่านี้

4. การรันฐานข้อมูล (นักเทียบท่า)

ขั้นตอนนี้จำเป็นหากคุณต้องการใช้อิมเมจ Docker ที่ให้มา คุณยังสามารถใช้บริการคลาวด์ทางเลือกสำหรับ MySQL ได้อีกด้วย ตรวจสอบให้แน่ใจว่าได้เปลี่ยนสตริงการเชื่อมต่อในไฟล์ .env หากคุณต้องการ

รันคำสั่งต่อไปนี้จากรากของโปรเจ็กต์เพื่อเริ่มคอนเทนเนอร์ MySQL ของคุณ:

 นักเทียบท่าเขียน --env-file .env -f นักเทียบท่า/นักเทียบท่า-compose.yml ขึ้น db

5. ตั้งค่าปริมา

หากต้องการตั้งค่า Prisma และพุชสคีมาไปยังฐานข้อมูล ให้ใช้คำสั่งต่อไปนี้:

สร้างไคลเอนต์ Prisma:

 ปริซึมเส้นด้ายสร้าง

พุชสคีมา Prisma ไปยังฐานข้อมูล:

 เส้นด้ายปริซึม db ดัน

5. ตั้งค่า Stripe Webhook

เรียกใช้ Stripe CLI และทำให้มันฟัง webhook:

 stripe Listen --ส่งต่อไปยัง localhost:3000/api/webhook

สิ่งนี้จะส่งออก STRIPE_WEBHOOK_SECRET ของคุณ เพิ่มสิ่งนี้ลงในตัวแปรสภาพแวดล้อมของคุณใน . .env.local

6. ดำเนินโครงการ

เมื่อคุณตั้งค่าตัวแปรสภาพแวดล้อม Prisma และ Stripe แล้ว ให้ใช้คำสั่งต่อไปนี้เพื่อรันโปรเจ็กต์:

ในเทอร์มินัลหนึ่ง ให้รันเซิร์ฟเวอร์ Next.js:

 ผู้พัฒนาเส้นด้าย

ในเทอร์มินัลอื่น ให้เริ่มฟัง Stripe:

 stripe Listen --ส่งต่อไปยัง localhost:3000/api/webhook

สิ่งนี้ควรรันโปรเจ็กต์บน localhost:3000

หมายเหตุ: ทั้งเซิร์ฟเวอร์ส่วนหน้า Next.js และ Stripe CLI จำเป็นต้องทำงานพร้อมกันเพื่อให้แอปพลิเคชันทำงานได้อย่างถูกต้อง

ขยาย
ข้อมูลเพิ่มเติม
แอปที่เกี่ยวข้อง
แนะนำสำหรับคุณ
ข้อมูลที่เกี่ยวข้อง ทั้งหมด