{children}
7 |
6 |
11 | );
12 | };
13 |
14 | export default Loader;
15 |
--------------------------------------------------------------------------------
/app/(landing)/page.tsx:
--------------------------------------------------------------------------------
1 | import LandingNavbar from '@/components/LandingNavbar';
2 | import LandingHero from '@/components/LandingHero';
3 | // import LandingPageContents from '@/components/LandingPageContents';
4 |
5 | const LandingPage = () => {
6 | return (
7 |
7 |
9 | Generating...
10 |
8 |
12 | );
13 | };
14 |
15 | export default LandingPage;
16 |
--------------------------------------------------------------------------------
/components/ModalProvider.tsx:
--------------------------------------------------------------------------------
1 | 'use client';
2 |
3 | import { useEffect, useState } from 'react';
4 | import ProModal from '@/components/ProModal';
5 |
6 | const ModalProvider = () => {
7 | const [isMounted, setIsMounted] = useState(false);
8 |
9 | useEffect(() => {
10 | setIsMounted(true);
11 | }, []);
12 |
13 | if (!isMounted) return null;
14 |
15 | return (
16 | <>
17 |
10 |
20 | );
21 | };
22 |
23 | export default Empty;
24 |
--------------------------------------------------------------------------------
/components/Navbar.tsx:
--------------------------------------------------------------------------------
1 | import { UserButton } from '@clerk/nextjs';
2 | import MobileSidebar from '@/components/MobileSidebar';
3 |
4 | import { getApiLimitCount } from '@/lib/api-limit';
5 | import { getSubscription } from '@/lib/subscription';
6 |
7 | const Navbar = async () => {
8 | const apiLimit = await getApiLimitCount();
9 | const isPro = await getSubscription();
10 |
11 | return (
12 |
11 |
18 | {label}
19 |
13 |
18 | );
19 | };
20 |
21 | export default Navbar;
22 |
--------------------------------------------------------------------------------
/.env.example:
--------------------------------------------------------------------------------
1 |
2 | #! CLERK CONFIGURATION KEYS
3 | NEXT_PUBLIC_CLERK_PUBLISHABLE_KEY=
4 | CLERK_SECRET_KEY=
5 |
6 | NEXT_PUBLIC_CLERK_SIGN_IN_URL=/sign-in
7 | NEXT_PUBLIC_CLERK_SIGN_UP_URL=/sign-up
8 |
9 | NEXT_PUBLIC_CLERK_AFTER_SIGN_IN_URL=/dashboard
10 | NEXT_PUBLIC_CLERK_AFTER_SIGN_UP_URL=/dashboard
11 |
12 | #! OPENAI SECRET KEYS
13 | OPENAI_API_KEY=
14 |
15 | #! REPLICATE AI SECRET KEYS
16 | REPLICATE_API_TOKEN=
17 |
18 | #! PRISMA DB URL
19 | DATABASE_URL=
20 |
21 | #! STRIPE ENV KEYS
22 | STRIPE_SECRET_KEY=
23 | STRIPE_WEBHOOK_SECRET=
24 |
25 | #! NEXT HOST PORT URL FOR ENVIRONMENT
26 | NEXT_PUBLIC_HOST=http://localhost:3000
27 |
28 | #! CRISP CHAT SUPPORT SECRET KEYS
29 | NEXT_PUBLIC_CRISP_WEBSITE_ID=
30 |
--------------------------------------------------------------------------------
/tsconfig.json:
--------------------------------------------------------------------------------
1 | {
2 | "compilerOptions": {
3 | "target": "ES2020",
4 | "lib": ["dom", "dom.iterable", "esnext"],
5 | "allowJs": true,
6 | "skipLibCheck": true,
7 | "strict": true,
8 | "forceConsistentCasingInFileNames": true,
9 | "noEmit": true,
10 | "esModuleInterop": true,
11 | "module": "esnext",
12 | "moduleResolution": "node",
13 | "resolveJsonModule": true,
14 | "isolatedModules": true,
15 | "jsx": "preserve",
16 | "incremental": true,
17 | "plugins": [
18 | {
19 | "name": "next"
20 | }
21 | ],
22 | "paths": {
23 | "@/*": ["./*"]
24 | }
25 | },
26 | "include": ["next-env.d.ts", "**/*.ts", "**/*.tsx", ".next/types/**/*.ts"],
27 | "exclude": ["node_modules"]
28 | }
29 |
--------------------------------------------------------------------------------
/components/ui/label.tsx:
--------------------------------------------------------------------------------
1 | "use client"
2 |
3 | import * as React from "react"
4 | import * as LabelPrimitive from "@radix-ui/react-label"
5 | import { cva, type VariantProps } from "class-variance-authority"
6 |
7 | import { cn } from "@/lib/utils"
8 |
9 | const labelVariants = cva(
10 | "text-sm font-medium leading-none peer-disabled:cursor-not-allowed peer-disabled:opacity-70"
11 | )
12 |
13 | const Label = React.forwardRef<
14 | React.ElementRef
15 |
17 |
21 |
29 | );
30 | };
31 |
32 | export default Heading;
33 |
--------------------------------------------------------------------------------
/app/(dashboard)/layout.tsx:
--------------------------------------------------------------------------------
1 | import Navbar from '@/components/Navbar';
2 | import Sidebar from '@/components/Sidebar';
3 | import { Props } from '@/types';
4 |
5 | import { getApiLimitCount } from '@/lib/api-limit';
6 | import { getSubscription } from '@/lib/subscription';
7 |
8 | const DashboardLayout: React.FC
22 |
24 |
25 |
28 | {title}
26 |{description}
27 |
14 |
18 |
21 |
22 | );
23 | };
24 |
25 | export default DashboardLayout;
26 |
--------------------------------------------------------------------------------
/.eslintrc.json:
--------------------------------------------------------------------------------
1 | {
2 | "$schema": "https://json.schemastore.org/eslintrc",
3 | "root": true,
4 | "extends": [
5 | "next",
6 | "prettier",
7 | "next/core-web-vitals",
8 | "plugin:tailwindcss/recommended"
9 | ],
10 | "plugins": ["tailwindcss"],
11 | "rules": {
12 | "@next/next/no-html-link-for-pages": "off",
13 | "react/jsx-key": "off",
14 | "tailwindcss/no-custom-classname": "off",
15 | "tailwindcss/classnames-order": "error",
16 | "react/no-unescaped-entities": "off",
17 | "@next/next/no-page-custom-font": "off"
18 | },
19 | "settings": {
20 | "tailwindcss": {
21 | "callees": ["cn"],
22 | "config": "tailwind.config.js"
23 | },
24 | "next": {
25 | "rootDir": true
26 | }
27 | },
28 | "overrides": [
29 | {
30 | "files": ["*.ts", "*.tsx"],
31 | "parser": "@typescript-eslint/parser"
32 | }
33 | ]
34 | }
--------------------------------------------------------------------------------
/prisma/schema.prisma:
--------------------------------------------------------------------------------
1 | generator client {
2 | provider = "prisma-client-js"
3 | }
4 |
5 | datasource db {
6 | provider = "mysql"
7 | url = env("DATABASE_URL")
8 | relationMode = "prisma"
9 | }
10 |
11 | model UserApiLimit {
12 | id String @id @default(cuid())
13 | userId String @unique
14 | count Int @default(0)
15 | createdAt DateTime @default(now())
16 | updatedAt DateTime @updatedAt
17 | }
18 |
19 | model UserSubscription {
20 | id String @id @default(cuid())
21 | userId String @unique
22 | stripeCustomerId String? @unique @map(name: "stripe_customer_id")
23 | stripeSubscriptionId String? @unique @map(name: "stripe_subscription_id")
24 | stripePriceId String? @map(name: "stripe_price_id")
25 | stripeCurrentPeriodEnd DateTime? @map(name: "stripe_current_period_end")
26 | }
27 |
--------------------------------------------------------------------------------
/components/ui/progress.tsx:
--------------------------------------------------------------------------------
1 | "use client"
2 |
3 | import * as React from "react"
4 | import * as ProgressPrimitive from "@radix-ui/react-progress"
5 |
6 | import { cn } from "@/lib/utils"
7 |
8 | const Progress = React.forwardRef<
9 | React.ElementRef
15 |
17 |
19 |
30 |
31 | );
32 | };
33 |
34 | export default SettingsPage;
35 |
--------------------------------------------------------------------------------
/public/next.svg:
--------------------------------------------------------------------------------
1 |
--------------------------------------------------------------------------------
/lib/api-limit.ts:
--------------------------------------------------------------------------------
1 | import { auth } from "@clerk/nextjs";
2 |
3 | import { prismadb } from "@/lib/prismadb";
4 | import { MAX_FREE_COUNTS } from "@/constants";
5 |
6 | export const incrementApiLimit = async () => {
7 | const { userId } = auth();
8 |
9 | if (!userId) return;
10 |
11 | const userApiLimit = await prismadb.userApiLimit.findUnique({
12 | where: { userId: userId },
13 | });
14 |
15 | if (userApiLimit) {
16 | await prismadb.userApiLimit.update({
17 | where: { userId: userId },
18 | data: { count: userApiLimit.count + 1 },
19 | });
20 | } else {
21 | await prismadb.userApiLimit.create({
22 | data: { userId: userId, count: 1 },
23 | });
24 | }
25 | };
26 |
27 | export const checkApiLimit = async () => {
28 | const { userId } = auth();
29 |
30 | if (!userId) return false;
31 | const userApiLimit = await prismadb.userApiLimit.findUnique({ where: { userId: userId } });
32 | if (!userApiLimit || userApiLimit.count < MAX_FREE_COUNTS) return true;
33 | else return false;
34 |
35 | };
36 |
37 | export const getApiLimitCount = async () => {
38 | const { userId } = auth();
39 |
40 | if (!userId) return 0;
41 |
42 | const userApiLimit = await prismadb.userApiLimit.findUnique({
43 | where: {
44 | userId
45 | }
46 | });
47 |
48 | if (!userApiLimit) return 0;
49 |
50 | return userApiLimit.count;
51 | };
--------------------------------------------------------------------------------
/contributing.md:
--------------------------------------------------------------------------------
1 | # Contributing
2 |
3 | Welcome to D-prompt-AI! We're excited to have you on board. Contributions from the community help improve and enhance the project for everyone. Here's how you can get started:
4 |
5 | ## How to Contribute
6 |
7 | 1. **Fork** the repository on GitHub.
8 | 2. **Clone** the forked repository to your local machine.
9 | 3. Make your changes or additions in your local repository.
10 | 4. Test your changes to ensure they work as expected.
11 | 5. **Commit** your changes with descriptive commit messages.
12 | 6. **Push** your changes to your forked repository on GitHub.
13 | 7. Create a new **Pull Request** from your forked repository to the main project repository.
14 |
15 | ## Code of Conduct
16 |
17 | Please note that we have a [Code of Conduct](CODE_OF_CONDUCT.md). We expect all contributors to adhere to it to maintain a positive and respectful community.
18 |
19 | ## Report Issues
20 |
21 | If you find any issues or have suggestions for improvements, you can open an [issue](https://github.com/drakkarrr/d-prompt-ai/issues) on GitHub. Be sure to provide as much detail as possible to help us understand and address the problem.
22 |
23 | ## Get in Touch
24 |
25 | If you have questions or need help with the contribution process, feel free to reach out on our [community chat](https://gitter.im/yourproject/community) or by [email](mailto:drakkar.alpha00@gmail.com).
26 |
27 | We appreciate your interest in contributing to [Your Project Name]. Together, we can make this project even better!
28 |
--------------------------------------------------------------------------------
/app/api/video/route.ts:
--------------------------------------------------------------------------------
1 | import Replicate from "replicate";
2 | import { auth } from "@clerk/nextjs";
3 | import { NextResponse } from "next/server";
4 | import { incrementApiLimit, checkApiLimit } from "@/lib/api-limit";
5 | import { getSubscription } from "@/lib/subscription";
6 |
7 | const replicate = new Replicate({
8 | auth: process.env.REPLICATE_API_TOKEN!,
9 | });
10 |
11 | export async function POST(
12 | req: Request
13 | ) {
14 | try {
15 | const { userId } = auth();
16 | const body = await req.json();
17 | const { prompt } = body;
18 |
19 | if (!userId) return new NextResponse("Unauthorized", { status: 401 });
20 | if (!prompt) return new NextResponse("Prompt is required", { status: 400 });
21 |
22 | const freeTier = await checkApiLimit();
23 | const isPro = await getSubscription()
24 |
25 | if (!freeTier && !isPro) return new NextResponse('Free tier limit reached', { status: 403 });
26 |
27 | const response = await replicate.run(
28 | "anotherjesse/zeroscope-v2-xl:9f747673945c62801b13b84701c783929c0ee784e4748ec062204894dda1a351",
29 | {
30 | input: {
31 | prompt
32 | }
33 | }
34 | );
35 |
36 | if (!isPro) {
37 | await incrementApiLimit();
38 | }
39 |
40 | return NextResponse.json(response);
41 | } catch (error) {
42 | console.log('[VIDEO ERROR:]', error);
43 | return new NextResponse("Internal Error", { status: 500 });
44 | }
45 | };
--------------------------------------------------------------------------------
/types/index.d.ts:
--------------------------------------------------------------------------------
1 | import { User } from "@prisma/client"
2 | import type { Icon } from "lucide-react"
3 |
4 | import { Icons } from "@/components/icons"
5 |
6 | export type Props = {
7 | children: React.ReactNode
8 | }
9 |
10 | export type NavItem = {
11 | title: string
12 | href: string
13 | disabled?: boolean
14 | }
15 |
16 | export type MainNavItem = NavItem
17 |
18 | export type SidebarNavItem = {
19 | title: string
20 | disabled?: boolean
21 | external?: boolean
22 | icon?: keyof typeof Icons
23 | } & (
24 | | {
25 | href: string
26 | items?: never
27 | }
28 | | {
29 | href?: string
30 | items: NavLink[]
31 | }
32 | )
33 |
34 | export type SiteConfig = {
35 | name: string
36 | description: string
37 | url: string
38 | ogImage: string
39 | links: {
40 | twitter: string
41 | github: string
42 | }
43 | }
44 |
45 | export type DocsConfig = {
46 | mainNav: MainNavItem[]
47 | sidebarNav: SidebarNavItem[]
48 | }
49 |
50 | export type MarketingConfig = {
51 | mainNav: MainNavItem[]
52 | }
53 |
54 | export type DashboardConfig = {
55 | mainNav: MainNavItem[]
56 | sidebarNav: SidebarNavItem[]
57 | }
58 |
59 | export type SubscriptionPlan = {
60 | name: string
61 | description: string
62 | stripePriceId: string
63 | }
64 |
65 | export type UserSubscriptionPlan = SubscriptionPlan &
66 | Pick
20 | Gain access to advanced features, no limits, priority support, and
21 | exclusive content. Elevate your creative process to new heights with
22 | premium tools and resources, tailored to those who demand the utmost
23 | from their creative journey.
24 |
25 |
26 | {isPro ? 'Current Plan: Pro Plan' : 'Current Plan: Free Plan'}
27 |
28 |
31 |
32 |
33 |
51 |
52 |
53 | );
54 | };
55 |
56 | export default FreeCounter;
57 |
--------------------------------------------------------------------------------
/app/api/image/route.ts:
--------------------------------------------------------------------------------
1 | import { auth } from '@clerk/nextjs';
2 | import { NextResponse } from 'next/server';
3 | import { Configuration, OpenAIApi } from 'openai'
4 | import { checkApiLimit, incrementApiLimit } from '@/lib/api-limit';
5 | import { getSubscription } from '@/lib/subscription';
6 |
7 | const configuration = new Configuration({
8 | apiKey: process.env.OPENAI_API_KEY,
9 | })
10 |
11 | const openai = new OpenAIApi(configuration)
12 |
13 | export const POST = async (req: Request) => {
14 | console.log(req.body);
15 |
16 | try {
17 | const { userId } = auth()
18 | const body = await req.json()
19 | const { prompt, amount = 1, resolution = '512x512' } = body
20 |
21 | if (!userId) return new NextResponse('Unauthorized', { status: 401 });
22 | if (!configuration.apiKey) return new NextResponse('Open AI API Keys not configured', { status: 500 });
23 |
24 | if (!prompt) return new NextResponse('No prompt found', { status: 400 });
25 | if (!amount) return new NextResponse('No amount found', { status: 400 });
26 | if (!resolution) return new NextResponse('No resolution found', { status: 400 });
27 |
28 | const freeTier = await checkApiLimit();
29 | const isPro = await getSubscription()
30 |
31 | if (!freeTier && !isPro) return new NextResponse('Free tier limit reached', { status: 403 });
32 |
33 | const response = await openai.createImage({
34 | prompt,
35 | n: parseInt(amount, 10),
36 | size: resolution,
37 | })
38 |
39 | if (!isPro) {
40 | await incrementApiLimit();
41 | }
42 |
43 | return NextResponse.json(response.data.data);
44 |
45 |
46 | } catch (err) {
47 | console.log(`Image Generator error: ${err}`);
48 | return new NextResponse(`Internal error: ${err}`, { status: 500 });
49 | }
50 | }
--------------------------------------------------------------------------------
/app/api/code/route.ts:
--------------------------------------------------------------------------------
1 | import { auth } from '@clerk/nextjs';
2 | import { NextResponse } from 'next/server';
3 | import { ChatCompletionRequestMessage, Configuration, OpenAIApi } from 'openai'
4 | import { checkApiLimit, incrementApiLimit } from '@/lib/api-limit';
5 | import { getSubscription } from '@/lib/subscription';
6 |
7 | const configuration = new Configuration({
8 | apiKey: process.env.OPENAI_API_KEY,
9 | })
10 |
11 | const openai = new OpenAIApi(configuration)
12 |
13 | const instructionMessage: ChatCompletionRequestMessage = {
14 | role: 'system',
15 | content: "You are a clever code generator. You must answer only in markdown code snippets. Use code comments for explanations."
16 | }
17 |
18 | export const POST = async (req: Request) => {
19 | console.log(req.body);
20 |
21 | try {
22 | const { userId } = auth()
23 | const body = await req.json()
24 | const { messages } = body
25 |
26 | if (!userId) return new NextResponse('Unauthorized', { status: 401 });
27 | if (!configuration.apiKey) return new NextResponse('Open AI API Keys not configured', { status: 500 });
28 | if (!messages) return new NextResponse('No messages found', { status: 400 });
29 |
30 | const freeTier = await checkApiLimit();
31 | const isPro = await getSubscription()
32 |
33 | if (!freeTier && !isPro) return new NextResponse('Free tier limit reached', { status: 403 });
34 |
35 | const response = await openai.createChatCompletion({
36 | model: 'gpt-3.5-turbo',
37 | messages: [instructionMessage, ...messages],
38 | })
39 |
40 | if (!isPro) {
41 | await incrementApiLimit();
42 | }
43 |
44 | return NextResponse.json(response.data.choices[0].message);
45 |
46 |
47 | } catch (err) {
48 | console.log(`Code error: ${err}`);
49 | return new NextResponse(`Code error: ${err}`, { status: 500 });
50 | }
51 | }
--------------------------------------------------------------------------------
/public/technical-support.svg:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 |
--------------------------------------------------------------------------------
/app/globals.css:
--------------------------------------------------------------------------------
1 | @tailwind base;
2 | @tailwind components;
3 | @tailwind utilities;
4 |
5 | @layer base {
6 | :root {
7 | --background: 0 0% 100%;
8 | --foreground: 222.2 84% 4.9%;
9 |
10 | --muted: 210 40% 96.1%;
11 | --muted-foreground: 215.4 16.3% 46.9%;
12 |
13 | --popover: 0 0% 100%;
14 | --popover-foreground: 222.2 84% 4.9%;
15 |
16 | --card: 0 0% 100%;
17 | --card-foreground: 222.2 84% 4.9%;
18 |
19 | --border: 214.3 31.8% 91.4%;
20 | --input: 214.3 31.8% 91.4%;
21 |
22 | --primary: 222.2 47.4% 11.2%;
23 | --primary-foreground: 210 40% 98%;
24 |
25 | --secondary: 210 40% 96.1%;
26 | --secondary-foreground: 222.2 47.4% 11.2%;
27 |
28 | --accent: 210 40% 96.1%;
29 | --accent-foreground: 222.2 47.4% 11.2%;
30 |
31 | --destructive: 0 84.2% 60.2%;
32 | --destructive-foreground: 210 40% 98%;
33 |
34 | --ring: 215 20.2% 65.1%;
35 |
36 | --radius: 0.5rem;
37 | }
38 |
39 | .dark {
40 | --background: 222.2 84% 4.9%;
41 | --foreground: 210 40% 98%;
42 |
43 | --muted: 217.2 32.6% 17.5%;
44 | --muted-foreground: 215 20.2% 65.1%;
45 |
46 | --popover: 222.2 84% 4.9%;
47 | --popover-foreground: 210 40% 98%;
48 |
49 | --card: 222.2 84% 4.9%;
50 | --card-foreground: 210 40% 98%;
51 |
52 | --border: 217.2 32.6% 17.5%;
53 | --input: 217.2 32.6% 17.5%;
54 |
55 | --primary: 210 40% 98%;
56 | --primary-foreground: 222.2 47.4% 11.2%;
57 |
58 | --secondary: 217.2 32.6% 17.5%;
59 | --secondary-foreground: 210 40% 98%;
60 |
61 | --accent: 217.2 32.6% 17.5%;
62 | --accent-foreground: 210 40% 98%;
63 |
64 | --destructive: 0 62.8% 30.6%;
65 | --destructive-foreground: 0 85.7% 97.3%;
66 |
67 | --ring: 217.2 32.6% 17.5%;
68 | }
69 | }
70 |
71 | html,
72 | body,
73 | :root {
74 | height: 100%;
75 | }
76 |
77 | @layer base {
78 | * {
79 | @apply border-border;
80 | }
81 | body {
82 | @apply bg-background text-foreground;
83 | }
84 | }
85 |
--------------------------------------------------------------------------------
/components/LandingHero.tsx:
--------------------------------------------------------------------------------
1 | 'use client';
2 |
3 | import Link from 'next/link';
4 | import TypewriterComponent from 'typewriter-effect';
5 | import { useAuth } from '@clerk/nextjs';
6 | import { Button } from '@/components/ui/button';
7 |
8 | const LandingHero = () => {
9 | const { isSignedIn } = useAuth();
10 |
11 | return (
12 |
34 |
42 |
50 | 35 | {apiLimit} / {MAX_FREE_COUNTS} Free Generations 36 |
37 | 41 |
13 |
57 | );
58 | };
59 |
60 | export default LandingHero;
61 |
--------------------------------------------------------------------------------
/components/ui/button.tsx:
--------------------------------------------------------------------------------
1 | import * as React from 'react';
2 | import { Slot } from '@radix-ui/react-slot';
3 | import { cva, type VariantProps } from 'class-variance-authority';
4 |
5 | import { cn } from '@/lib/utils';
6 |
7 | const buttonVariants = cva(
8 | 'inline-flex items-center justify-center rounded-md text-sm font-medium ring-offset-background transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50',
9 | {
10 | variants: {
11 | variant: {
12 | default: 'bg-primary text-primary-foreground hover:bg-primary/90',
13 | danger:
14 | 'bg-destructive text-destructive-foreground hover:bg-destructive/90',
15 | outline:
16 | 'border border-input bg-background hover:bg-accent hover:text-accent-foreground',
17 | secondary:
18 | 'bg-secondary text-secondary-foreground hover:bg-secondary/80',
19 | ghost: 'hover:bg-accent hover:text-accent-foreground',
20 | link: 'text-primary underline-offset-4 hover:underline',
21 | premium:
22 | 'bg-gradient-to-r from-[#61cfeb] via-[#9281d8d5] to-[#9076fc] text-white border-0',
23 | },
24 | size: {
25 | default: 'h-10 px-4 py-2',
26 | sm: 'h-9 rounded-md px-3',
27 | lg: 'h-11 rounded-md px-8',
28 | icon: 'h-10 w-10',
29 | },
30 | },
31 | defaultVariants: {
32 | variant: 'default',
33 | size: 'default',
34 | },
35 | }
36 | );
37 |
38 | export interface ButtonProps
39 | extends React.ButtonHTMLAttributes
14 |
31 | D-prompt AI Generative for
15 |
16 |
30 |
32 | A Generative AI app that embarks on creative discovery and immerse
33 | yourself in dynamic conversations, captivating visuals, harmonious
34 | melodies, assistive code generation and more.
35 |
No credit card required! 36 |
37 | No credit card required! 36 |
38 |
39 |
45 |
46 |
47 |
48 | Developed by
49 |
53 | Drakkar
54 |
55 |
56 |
40 |
64 | 41 | Testimonials 42 |
43 |
44 | {testimonials.map((testimonial) => (
45 |
49 |
50 |
51 | {testimonial.desc}
52 |
53 |
54 |
59 |
60 |
61 | ))}
62 |
63 |
55 |
58 | {testimonial.name}
56 |{testimonial.title}
57 |
65 | Developed by Drakkar
66 |
67 |
68 | );
69 | };
70 |
71 | export default LandingPageContents;
72 |
--------------------------------------------------------------------------------
/app/api/stripe/route.ts:
--------------------------------------------------------------------------------
1 | import { auth, currentUser } from "@clerk/nextjs";
2 | import { NextResponse } from "next/server";
3 | import { stripe } from "@/lib/stripe-connect";
4 | import { prismadb } from "@/lib/prismadb";
5 | import { absoluteUrl } from "@/lib/utils";
6 |
7 |
8 | const settingsUrl = absoluteUrl("/settings");
9 | export const GET = async () => {
10 | try {
11 | const { userId } = auth();
12 | const user = await currentUser();
13 |
14 | if (!userId || !user) return new NextResponse("Unauthorized", { status: 401 });
15 |
16 | const userSubscription = await prismadb.userSubscription.findUnique({
17 | where: { userId }
18 | })
19 |
20 | if (userSubscription && userSubscription.stripeCustomerId) {
21 | const stripeSession = await stripe.billingPortal.sessions.create({
22 | customer: userSubscription.stripeCustomerId,
23 | return_url: settingsUrl,
24 | })
25 |
26 | return new NextResponse(JSON.stringify({ url: stripeSession.url }))
27 | }
28 |
29 | const stripeSession = await stripe.checkout.sessions.create({
30 | success_url: settingsUrl,
31 | cancel_url: settingsUrl,
32 | payment_method_types: ["card"],
33 | mode: "subscription",
34 | billing_address_collection: "auto",
35 | customer_email: user.emailAddresses[0].emailAddress,
36 | line_items: [
37 | {
38 | price_data: {
39 | currency: "USD",
40 | product_data: {
41 | name: "D-Prompt Pro",
42 | description: "Unlimited AI Generations"
43 | },
44 | unit_amount: 2000,
45 | recurring: {
46 | interval: "month"
47 | }
48 | },
49 | quantity: 1,
50 | },
51 | ],
52 | metadata: {
53 | userId,
54 | },
55 | })
56 |
57 | return new NextResponse(JSON.stringify({ url: stripeSession.url }))
58 | } catch (error) {
59 | console.log("[STRIPE_ERROR]", error);
60 | return new NextResponse("Internal Error", { status: 500 });
61 | }
62 | };
--------------------------------------------------------------------------------
/package.json:
--------------------------------------------------------------------------------
1 | {
2 | "name": "d-prompt-ai",
3 | "version": "0.1.0",
4 | "private": true,
5 | "main": "index.js",
6 | "repository": "https://github.com/Drakkarrr/D-prompt-AI.git",
7 | "author": "Drakkarrr
61 |
68 | 62 | Get started with D-propmt AI 63 |
64 |65 | Generate contents using OpenAI GPT3.5 and Replicate API 66 |
67 |
69 | {tools.map((tool) => (
70 | router.push(tool.href)}
72 | key={tool.href}
73 | className='flex cursor-pointer items-center justify-between border-black/5 p-4 transition hover:shadow-md'
74 | >
75 |
83 | ))}
84 |
85 |
86 | );
87 | };
88 |
89 | export default DashboardPage;
90 |
--------------------------------------------------------------------------------
/components/ProModal.tsx:
--------------------------------------------------------------------------------
1 | 'use client';
2 |
3 | import axios from 'axios';
4 | import { useState } from 'react';
5 | import { Check, Zap } from 'lucide-react';
6 | import { toast } from 'react-hot-toast';
7 |
8 | import {
9 | Dialog,
10 | DialogContent,
11 | DialogHeader,
12 | DialogTitle,
13 | DialogDescription,
14 | DialogFooter,
15 | } from '@/components/ui/dialog';
16 | import { Badge } from '@/components/ui/badge';
17 | import { Button } from '@/components/ui/button';
18 | import { useProModal } from '@/hooks/useProModal';
19 | import { tools } from '@/constants';
20 | import { Card } from '@/components/ui/card';
21 | import { cn } from '@/lib/utils';
22 |
23 | const ProModal = () => {
24 | const proModal = useProModal();
25 | const [loading, setLoading] = useState(false);
26 |
27 | const onSubscribe = async () => {
28 | try {
29 | setLoading(true);
30 | const response = await axios.get('/api/stripe');
31 |
32 | window.location.href = response.data.url;
33 | } catch (error) {
34 | toast.error('Something went wrong');
35 | } finally {
36 | setLoading(false);
37 | }
38 | };
39 |
40 | return (
41 |
83 | );
84 | };
85 |
86 | export default ProModal;
87 |
--------------------------------------------------------------------------------
/components/Sidebar.tsx:
--------------------------------------------------------------------------------
1 | 'use client';
2 |
3 | import Image from 'next/image';
4 | import Link from 'next/link';
5 | import { usePathname } from 'next/navigation';
6 |
7 | import {
8 | CodeIcon,
9 | ImageIcon,
10 | LayoutDashboard,
11 | MessageSquare,
12 | MusicIcon,
13 | Settings,
14 | VideoIcon,
15 | } from 'lucide-react';
16 |
17 | import { Montserrat } from 'next/font/google';
18 | import { cn } from '@/lib/utils';
19 | import FreeCounter from '@/components/FreeCounter';
20 |
21 | const montserrat = Montserrat({
22 | weight: '700',
23 | subsets: ['latin'],
24 | });
25 |
26 | const routes = [
27 | {
28 | label: 'Dashboard',
29 | icon: LayoutDashboard,
30 | href: '/dashboard',
31 | color: 'text-sky-500',
32 | },
33 | {
34 | label: 'Chat Generator',
35 | icon: MessageSquare,
36 | href: '/chat',
37 | color: 'text-violet-500',
38 | },
39 | {
40 | label: 'Image Generator',
41 | icon: ImageIcon,
42 | href: '/image',
43 | color: 'text-orange-700',
44 | },
45 | {
46 | label: 'Video Generator',
47 | icon: VideoIcon,
48 | href: '/video',
49 | color: 'text-pink-300',
50 | },
51 | {
52 | label: 'Music Generator',
53 | icon: MusicIcon,
54 | href: '/music',
55 | color: 'text-emerald-500',
56 | },
57 | {
58 | label: 'Code Generator',
59 | icon: CodeIcon,
60 | href: '/code',
61 | color: 'text-blue-700',
62 | },
63 | {
64 | label: 'Settings',
65 | icon: Settings,
66 | href: '/settings',
67 | },
68 | ];
69 |
70 | interface SidebarProps {
71 | apiLimit: number;
72 | isPro: boolean;
73 | }
74 |
75 | const Sidebar: React.FC
76 |
81 |
77 |
79 | {tool.label}
80 |
80 |
109 | );
110 | };
111 |
112 | export default Sidebar;
113 |
--------------------------------------------------------------------------------
/app/(dashboard)/(routes)/music/page.tsx:
--------------------------------------------------------------------------------
1 | 'use client';
2 |
3 | import { useState } from 'react';
4 | import { useRouter as Router } from 'next/navigation';
5 | import axios from 'axios';
6 |
7 | import Heading from '@/components/Heading';
8 | import { Form, FormControl, FormField, FormItem } from '@/components/ui/form';
9 | import { Input } from '@/components/ui/input';
10 | import { Button } from '@/components/ui/button';
11 | import Empty from '@/components/Empty';
12 | import Loader from '@/components/Loader';
13 |
14 | import { useForm } from 'react-hook-form';
15 | import { z } from 'zod';
16 | import { zodResolver } from '@hookform/resolvers/zod';
17 | import { useProModal } from '@/hooks/useProModal';
18 |
19 | import { Music } from 'lucide-react';
20 | import { formSchema } from './constants';
21 | import toast from 'react-hot-toast';
22 |
23 | const MusicGeneratorPage = () => {
24 | const proModal = useProModal();
25 | const router = Router();
26 | const [music, setMusic] = useState
81 |
82 |
107 |
83 |
85 | 86 | D-prompt 87 |
88 | 89 |
90 | {routes.map((route) => (
91 |
99 |
106 |
100 |
103 |
104 | ))}
105 |
56 |
107 | );
108 | };
109 |
110 | export default MusicGeneratorPage;
111 |
--------------------------------------------------------------------------------
/app/(dashboard)/(routes)/video/page.tsx:
--------------------------------------------------------------------------------
1 | 'use client';
2 |
3 | import { useState } from 'react';
4 | import { useRouter as Router } from 'next/navigation';
5 | import axios from 'axios';
6 | import toast from 'react-hot-toast';
7 |
8 | import Heading from '@/components/Heading';
9 | import { Form, FormControl, FormField, FormItem } from '@/components/ui/form';
10 | import { Input } from '@/components/ui/input';
11 | import { Button } from '@/components/ui/button';
12 | import Empty from '@/components/Empty';
13 | import Loader from '@/components/Loader';
14 |
15 | import { useForm } from 'react-hook-form';
16 | import { useProModal } from '@/hooks/useProModal';
17 | import { z } from 'zod';
18 | import { zodResolver } from '@hookform/resolvers/zod';
19 |
20 | import { Video } from 'lucide-react';
21 | import { formSchema } from './constants';
22 |
23 | const VideoGeneratorPage = () => {
24 | const proModal = useProModal();
25 | const router = Router();
26 | const [video, setVideo] = useState
64 |
93 |
94 | {isLoading && (
95 |
106 |
96 |
98 | )}
99 | {!music && !isLoading &&
56 |
110 | );
111 | };
112 |
113 | export default VideoGeneratorPage;
114 |
--------------------------------------------------------------------------------
/components/ui/dialog.tsx:
--------------------------------------------------------------------------------
1 | "use client"
2 |
3 | import * as React from "react"
4 | import * as DialogPrimitive from "@radix-ui/react-dialog"
5 | import { X } from "lucide-react"
6 |
7 | import { cn } from "@/lib/utils"
8 |
9 | const Dialog = DialogPrimitive.Root
10 |
11 | const DialogTrigger = DialogPrimitive.Trigger
12 |
13 | const DialogPortal = ({
14 | className,
15 | ...props
16 | }: DialogPrimitive.DialogPortalProps) => (
17 |
64 |
93 |
94 | {isLoading && (
95 |
109 |
96 |
98 | )}
99 | {!video && !isLoading && 161 | {body} 162 |
163 | ) 164 | }) 165 | FormMessage.displayName = "FormMessage" 166 | 167 | export { 168 | useFormField, 169 | Form, 170 | FormItem, 171 | FormLabel, 172 | FormControl, 173 | FormDescription, 174 | FormMessage, 175 | FormField, 176 | } 177 | -------------------------------------------------------------------------------- /components/ui/sheet.tsx: -------------------------------------------------------------------------------- 1 | "use client" 2 | 3 | import * as React from "react" 4 | import * as SheetPrimitive from "@radix-ui/react-dialog" 5 | import { cva, type VariantProps } from "class-variance-authority" 6 | import { X } from "lucide-react" 7 | 8 | import { cn } from "@/lib/utils" 9 | 10 | const Sheet = SheetPrimitive.Root 11 | 12 | const SheetTrigger = SheetPrimitive.Trigger 13 | 14 | const SheetClose = SheetPrimitive.Close 15 | 16 | const SheetPortal = ({ 17 | className, 18 | ...props 19 | }: SheetPrimitive.DialogPortalProps) => ( 20 |
82 |
142 |
143 | );
144 | };
145 |
146 | export default ChatGeneratorPage;
147 |
--------------------------------------------------------------------------------
/app/(dashboard)/(routes)/code/page.tsx:
--------------------------------------------------------------------------------
1 | 'use client';
2 |
3 | import { useState } from 'react';
4 | import { useRouter as Router } from 'next/navigation';
5 | import axios, { AxiosError } from 'axios';
6 |
7 | import Heading from '@/components/Heading';
8 | import { Form, FormControl, FormField, FormItem } from '@/components/ui/form';
9 | import { Input } from '@/components/ui/input';
10 | import { Button } from '@/components/ui/button';
11 | import Empty from '@/components/Empty';
12 | import Loader from '@/components/Loader';
13 | import UserAvatar from '@/components/UserAvatar';
14 | import BotAvatar from '@/components/BotAvatar';
15 |
16 | import { useForm } from 'react-hook-form';
17 | import { z } from 'zod';
18 | import { zodResolver } from '@hookform/resolvers/zod';
19 | import { useProModal } from '@/hooks/useProModal';
20 |
21 | import { Code } from 'lucide-react';
22 | import { formSchema } from './constants';
23 | import { cn } from '@/lib/utils';
24 |
25 | import { ChatCompletionRequestMessage } from 'openai';
26 | import { ReactMarkdown } from 'react-markdown/lib/react-markdown';
27 | import toast from 'react-hot-toast';
28 |
29 | const CodeGeneratorPage = () => {
30 | const router = Router();
31 | const proModal = useProModal();
32 | const [messages, setMessages] = useState
83 |
112 |
113 |
114 |
115 |
116 | {isLoading && (
117 |
141 |
118 |
120 | )}
121 | {messages.length === 0 && !isLoading && (
122 |
125 | {messages.map((message: ChatCompletionRequestMessage) => (
126 |
140 |
135 | {message.role === 'user' ?
138 | ))}
139 | {message.content}
137 |
83 |
157 |
158 | );
159 | };
160 |
161 | export default CodeGeneratorPage;
162 |
--------------------------------------------------------------------------------
/README.md:
--------------------------------------------------------------------------------
1 | # Drakkar-prompt AI
2 |
3 | An Open source AI Generative web-based app, an unprecedented platform that harnesses the boundless potential of artificial intelligence to ignite your creative spark! From dynamic dialogues to spellbinding videos, captivating imagery, harmonious melodies, sophisticated code generation, and a host of other features, our app offers an expansive array of AI services tailored to amplify your creativity using OpenAI API and Replicate API LLM..
4 |
5 | # Screenshots
6 |
7 | 
8 | 
9 | 
10 | 
11 |
12 | # Demo
13 |
14 | https://drakkar-prompt-ai.vercel.app/
15 |
16 | # Key Features
17 |
18 | ### ChatGPT Service
19 |
20 | Immerse yourself in lifelike conversations with our AI-powered chat service, reminiscent of ChatGPT. Whether seeking companionship or intellectual exchange, our chat function is designed to cater to your conversational needs.
21 |
22 | ### Video Generation
23 |
24 | Embark on a journey of video creation like never before. Our AI-driven video generation service empowers you to craft bespoke videos aligned with your vision and ideas.
25 |
26 | ### Image Creation
27 |
28 | Unleash your inner artist with AI-generated images that defy conventional imagination. Craft visually stunning masterpieces that challenge the limits of artistic expression.
29 |
30 | ### Music Composition
31 |
32 | Let melodies flow seamlessly as our AI composes music resonating with your deepest emotions. From serene tunes to dynamic compositions, our music generation service paves the way for endless auditory exploration.
33 |
34 | ### Code Generation
35 |
36 | Experience the evolution of programming with our AI-backed code generation service. Whether initiating a new project or seeking coding inspiration, our app assists in generating code snippets to expedite your development endeavors.
37 |
38 | ### Pro Plan Upgrade
39 |
40 | Elevate your journey with our Pro plan, offering not only enhanced and unlimited features but also exclusive chat support to ensure you're fully equipped to bring your ideas to life.
41 |
42 | ### Real-time Chat Support
43 |
44 | With integrated real-time chat support, our team of experts is readily available to provide personalized assistance, answer your questions, and guide you through your creative journey.
45 |
46 | # Configuration
47 |
48 | To run D-propmt AI, you'll need to set up the following environment variables:
49 |
50 | ### Clerk Configuration
51 |
52 | For integrating with Clerk, you should provide these keys:
53 |
54 | - `NEXT_PUBLIC_CLERK_PUBLISHABLE_KEY`: Clerk's public publishable key.
55 | - `CLERK_SECRET_KEY`: Clerk's secret key.
56 | - `NEXT_PUBLIC_CLERK_SIGN_IN_URL`: URL for signing in using Clerk.
57 | - `NEXT_PUBLIC_CLERK_SIGN_UP_URL`: URL for signing up using Clerk.
58 | - `NEXT_PUBLIC_CLERK_AFTER_SIGN_IN_URL`: URL to redirect after successful sign-in.
59 | - `NEXT_PUBLIC_CLERK_AFTER_SIGN_UP_URL`: URL to redirect after successful sign-up.
60 |
61 | ### OpenAI Configuration
62 |
63 | For working with OpenAI's API, you'll need:
64 |
65 | - `OPENAI_API_KEY`: Your OpenAI API key.
66 |
67 | ### Replicate AI Configuration
68 |
69 | If you plan to use Replicate AI, you'll need:
70 |
71 | - `REPLICATE_API_TOKEN`: Your Replicate AI API token.
72 |
73 | ### Prisma Database Configuration
74 |
75 | For connecting to your Prisma database, provide:
76 |
77 | - `DATABASE_URL`: URL for your Prisma database.
78 |
79 | ### Stripe Configuration
80 |
81 | If you are integrating Stripe payments, use:
82 |
83 | - `STRIPE_SECRET_KEY`: Your Stripe secret key.
84 | - `STRIPE_WEBHOOK_SECRET`: Your Stripe webhook secret.
85 |
86 | ### Next.js Host and Port Configuration
87 |
88 | For your Next.js application:
89 |
90 | - `NEXT_PUBLIC_HOST`: The URL of your Next.js application.
91 |
92 | ### Crisp Chat Support Configuration
93 |
94 | If you're using Crisp for chat support:
95 |
96 | - `NEXT_PUBLIC_CRISP_WEBSITE_ID`: Your Crisp website ID.
97 |
98 | Remember to keep your environment variables secure and avoid sharing them publicly.
99 |
100 | # Installation
101 |
102 | Install D-promt-AII with yarn
103 |
104 | ```bash
105 | clone this repo
106 | cd my-project
107 | run: yarn or yarn install
108 | run: yarn run dev (to start the project)
109 | ```
110 |
111 | ## Tech Stack
112 | Drakkarrr/D-prompt-AI is built on the following main stack:
113 | -
84 |
113 |
114 |
115 |
116 |
117 | {isLoading && (
118 |
156 |
119 |
121 | )}
122 | {messages.length === 0 && !isLoading && (
123 |
126 | {messages.map((message: ChatCompletionRequestMessage) => (
127 |
155 |
136 | {message.role === 'user' ? (
140 |
152 |
153 | ))}
154 |
141 |
142 |
143 | ),
144 | code: ({ node, ...props }) => (
145 | 
[Stripe](https://stripe.com) – Payment Services
114 | - 
[Node.js](http://nodejs.org/) – Frameworks (Full Stack)
115 | - 
[React](https://reactjs.org/) – Javascript UI Libraries
116 | - 
[JavaScript](https://developer.mozilla.org/en-US/docs/Web/JavaScript) – Languages
117 | - 
[TypeScript](http://www.typescriptlang.org) – Languages
118 | - 
[Autoprefixer](https://github.com/postcss/autoprefixer) – CSS Pre-processors / Extensions
119 | - 
[ESLint](http://eslint.org/) – Code Review
120 | - 
[Shell](https://en.wikipedia.org/wiki/Shell_script) – Shells
121 | - 
[axios](https://github.com/mzabriskie/axios) – Javascript Utilities & Libraries
122 | - 
[Yarn](https://yarnpkg.com/) – Front End Package Manager
123 | - 
[Next.js](https://nextjs.org/) – Frameworks (Full Stack)
124 | - 
[Prettier](https://prettier.io/) – Code Review
125 | - 
[Prisma](https://www.prisma.io/) – Object Relational Mapper (ORM)
126 | - 
[Zustand](https://github.com/react-spring/zustand) – State Management Library
127 | - 
[GitHub Actions](https://github.com/features/actions) – Continuous Integration
128 | - 
[Docker](https://www.docker.com/) – Virtual Machine Platforms & Containers
129 |
130 |
131 |
132 | ## Contributing
133 |
134 | Contributions are always welcome!
135 |
136 | See `contributing.md` for ways to get started.
137 |
138 | Please adhere to this project's `code of conduct`.
139 |
--------------------------------------------------------------------------------
/app/(dashboard)/(routes)/image/page.tsx:
--------------------------------------------------------------------------------
1 | 'use client';
2 |
3 | import { useState } from 'react';
4 | import { useRouter as Router } from 'next/navigation';
5 | import axios, { AxiosError } from 'axios';
6 |
7 | import Heading from '@/components/Heading';
8 | import { Form, FormControl, FormField, FormItem } from '@/components/ui/form';
9 | import { Input } from '@/components/ui/input';
10 | import { Button } from '@/components/ui/button';
11 | import Empty from '@/components/Empty';
12 | import Loader from '@/components/Loader';
13 | import {
14 | Select,
15 | SelectContent,
16 | SelectItem,
17 | SelectTrigger,
18 | SelectValue,
19 | } from '@/components/ui/select';
20 |
21 | import { useForm } from 'react-hook-form';
22 | import { z } from 'zod';
23 | import { zodResolver } from '@hookform/resolvers/zod';
24 | import { useProModal } from '@/hooks/useProModal';
25 |
26 | import { Download, ImageIcon } from 'lucide-react';
27 | import { amountOptions, formSchema, resolutionOptions } from './constants';
28 | import { Card, CardFooter } from '@/components/ui/card';
29 | import Image from 'next/image';
30 | import toast from 'react-hot-toast';
31 |
32 | const ImageGeneratorPage = () => {
33 | const router = Router();
34 | const proModal = useProModal();
35 | const [images, setImages] = useState
78 |
196 |
197 | );
198 | };
199 |
200 | export default ImageGeneratorPage;
201 |
--------------------------------------------------------------------------------
79 |
163 |
164 |
165 |
166 |
167 | {isLoading && (
168 |
195 |
169 |
171 | )}
172 | {images.length === 0 && !isLoading && (
173 |
176 | {images.map((src) => (
177 |
178 |
182 |
190 |
191 |
192 | ))}
193 |
194 |
179 |
181 |