├── .npmrc
├── server
    ├── tsconfig.json
    ├── types.d.ts
    ├── api
    │   ├── user
    │   │   └── index.get.ts
    │   ├── stripe
    │   │   ├── checkStatus.ts
    │   │   ├── index.get.ts
    │   │   └── webhook.ts
    │   ├── conversation
    │   │   └── index.post.ts
    │   ├── music
    │   │   └── index.post.ts
    │   ├── video
    │   │   └── index.post.ts
    │   ├── code
    │   │   └── index.post.ts
    │   └── image
    │   │   └── index.post.ts
    └── utils
    │   └── index.ts
├── components
    ├── ui
    │   ├── progress
    │   │   ├── index.ts
    │   │   └── Progress.vue
    │   ├── sheet
    │   │   ├── Sheet.vue
    │   │   ├── SheetClose.vue
    │   │   ├── SheetTrigger.vue
    │   │   ├── SheetHeader.vue
    │   │   ├── SheetFooter.vue
    │   │   ├── SheetTitle.vue
    │   │   ├── SheetDescription.vue
    │   │   ├── index.ts
    │   │   └── SheetContent.vue
    │   ├── dialog
    │   │   ├── Dialog.vue
    │   │   ├── DialogTrigger.vue
    │   │   ├── DialogHeader.vue
    │   │   ├── index.ts
    │   │   ├── DialogDescription.vue
    │   │   ├── DialogFooter.vue
    │   │   ├── DialogTitle.vue
    │   │   └── DialogContent.vue
    │   ├── dropdown-menu
    │   │   ├── DropdownMenuShortcut.vue
    │   │   ├── DropdownMenuGroup.vue
    │   │   ├── DropdownMenuSeparator.vue
    │   │   ├── DropdownMenuTrigger.vue
    │   │   ├── DropdownMenu.vue
    │   │   ├── DropdownMenuSub.vue
    │   │   ├── DropdownMenuLabel.vue
    │   │   ├── DropdownMenuRadioGroup.vue
    │   │   ├── DropdownMenuItem.vue
    │   │   ├── DropdownMenuSubTrigger.vue
    │   │   ├── DropdownMenuSubContent.vue
    │   │   ├── index.ts
    │   │   ├── DropdownMenuRadioItem.vue
    │   │   ├── DropdownMenuCheckboxItem.vue
    │   │   └── DropdownMenuContent.vue
    │   ├── avatar
    │   │   ├── AvatarImage.vue
    │   │   ├── AvatarFallback.vue
    │   │   ├── Avatar.vue
    │   │   └── index.ts
    │   ├── select
    │   │   ├── SelectValue.vue
    │   │   ├── SelectItemText.vue
    │   │   ├── SelectSeparator.vue
    │   │   ├── SelectGroup.vue
    │   │   ├── SelectLabel.vue
    │   │   ├── Select.vue
    │   │   ├── index.ts
    │   │   ├── SelectItem.vue
    │   │   ├── SelectTrigger.vue
    │   │   └── SelectContent.vue
    │   ├── card
    │   │   ├── CardContent.vue
    │   │   ├── CardFooter.vue
    │   │   ├── CardDescription.vue
    │   │   ├── CardHeader.vue
    │   │   ├── index.ts
    │   │   ├── CardTitle.vue
    │   │   └── Card.vue
    │   ├── badge
    │   │   ├── Badge.vue
    │   │   └── index.ts
    │   └── button
    │   │   ├── Button.vue
    │   │   └── index.ts
    ├── BotAvatar.vue
    ├── Empty.vue
    ├── MobileSidebar.vue
    ├── Loader.vue
    ├── Heading.vue
    ├── UserAvatar.vue
    ├── SubscriptionButton.vue
    ├── ProModal.vue
    ├── Navbar.vue
    └── Sidebar.vue
├── public
    ├── empty.png
    ├── favicon.ico
    ├── logo3.svg
    ├── logo2.svg
    ├── logo.svg
    ├── logo1.svg
    ├── logo4.svg
    └── logo5.svg
├── .vscode
    └── settings.json
├── tsconfig.json
├── layouts
    ├── home.vue
    └── default.vue
├── app.vue
├── types.d.ts
├── plugins
    ├── markdownit.ts
    └── crisp.client.js
├── lib
    └── utils.ts
├── .gitignore
├── components.json
├── store
    └── useProModal.ts
├── pages
    ├── settings.vue
    ├── dashboard.vue
    ├── auth.vue
    ├── music.vue
    ├── video.vue
    ├── conversation.vue
    ├── code.vue
    ├── index.vue
    └── image.vue
├── README.md
├── nuxt.config.ts
├── notes.md
├── prisma
    └── schema.prisma
├── package.json
├── assets
    └── css
    │   └── tailwind.css
├── tailwind.config.js
└── utils
    └── index.ts


/.npmrc:
--------------------------------------------------------------------------------
1 | shamefully-hoist=true
2 | strict-peer-dependencies=false
3 | 


--------------------------------------------------------------------------------
/server/tsconfig.json:
--------------------------------------------------------------------------------
1 | {
2 |   "extends": "../.nuxt/tsconfig.server.json"
3 | }
4 | 


--------------------------------------------------------------------------------
/components/ui/progress/index.ts:
--------------------------------------------------------------------------------
1 | export { default as Progress } from './Progress.vue'
2 | 


--------------------------------------------------------------------------------
/server/types.d.ts:
--------------------------------------------------------------------------------
1 | export type User = {
2 |     id: string
3 |     email: string
4 | };


--------------------------------------------------------------------------------
/public/empty.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/hafizjavaid/Nuxt3-AI-Sass/HEAD/public/empty.png


--------------------------------------------------------------------------------
/.vscode/settings.json:
--------------------------------------------------------------------------------
1 | {
2 |     "vue3snippets.enable-compile-vue-file-on-did-save-code": true
3 | }


--------------------------------------------------------------------------------
/public/favicon.ico:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/hafizjavaid/Nuxt3-AI-Sass/HEAD/public/favicon.ico


--------------------------------------------------------------------------------
/tsconfig.json:
--------------------------------------------------------------------------------
1 | {
2 |   // https://nuxt.com/docs/guide/concepts/typescript
3 |   "extends": "./.nuxt/tsconfig.json"
4 | }
5 | 


--------------------------------------------------------------------------------
/layouts/home.vue:
--------------------------------------------------------------------------------
1 | <template>
2 |   <slot />
3 | </template>
4 | 
5 | <script setup lang="ts"></script>
6 | 
7 | <style scoped></style>
8 | 


--------------------------------------------------------------------------------
/app.vue:
--------------------------------------------------------------------------------
1 | <template>
2 |   <div>
3 |     <NuxtLayout>
4 |       <NuxtPage />
5 |     </NuxtLayout>
6 |   </div>
7 | </template>
8 | <script lang="ts" setup></script>
9 | 


--------------------------------------------------------------------------------
/components/BotAvatar.vue:
--------------------------------------------------------------------------------
1 | <template>
2 |   <Avatar>
3 |     <AvatarImage src="/logo.svg" />
4 |   </Avatar>
5 | </template>
6 | 
7 | <script setup lang="ts"></script>
8 | 


--------------------------------------------------------------------------------
/components/ui/sheet/Sheet.vue:
--------------------------------------------------------------------------------
 1 | <script setup lang="ts">
 2 | import { DialogRoot } from 'radix-vue'
 3 | </script>
 4 | 
 5 | <template>
 6 |   <DialogRoot>
 7 |     <slot />
 8 |   </DialogRoot>
 9 | </template>
10 | 


--------------------------------------------------------------------------------
/types.d.ts:
--------------------------------------------------------------------------------
1 | 
2 | export type ChatCompletionRequestMessage = {
3 |     role: 'user' | 'assistant';
4 |     content: string;
5 | }
6 | export type AudioResponse = {
7 |     audio: string;
8 |     spectrogram: string;
9 | }


--------------------------------------------------------------------------------
/components/ui/dialog/Dialog.vue:
--------------------------------------------------------------------------------
 1 | <script setup lang="ts">
 2 | import { DialogRoot } from 'radix-vue'
 3 | </script>
 4 | 
 5 | <template>
 6 |   <DialogRoot>
 7 |     <slot />
 8 |   </DialogRoot>
 9 | </template>
10 | 


--------------------------------------------------------------------------------
/plugins/markdownit.ts:
--------------------------------------------------------------------------------
 1 | import md from "markdown-it";
 2 | 
 3 | export default defineNuxtPlugin(() => {
 4 |     const renderer = md();
 5 |     return {
 6 |         provide: {
 7 |             mdRenderer: renderer,
 8 |         },
 9 |     };
10 | });


--------------------------------------------------------------------------------
/lib/utils.ts:
--------------------------------------------------------------------------------
1 | import { type ClassValue, clsx } from 'clsx'
2 | import { twMerge } from 'tailwind-merge'
3 | import { camelize, getCurrentInstance, toHandlerKey } from 'vue'
4 | 
5 | export function cn(...inputs: ClassValue[]) {
6 |   return twMerge(clsx(inputs))
7 | }
8 | 


--------------------------------------------------------------------------------
/components/ui/dropdown-menu/DropdownMenuShortcut.vue:
--------------------------------------------------------------------------------
 1 | <script setup lang="ts">
 2 | import { cn } from '@/lib/utils'
 3 | </script>
 4 | 
 5 | <template>
 6 |   <span :class="cn('ml-auto text-xs tracking-widest opacity-60', $attrs.class ?? '')">
 7 |     <slot />
 8 |   </span>
 9 | </template>
10 | 


--------------------------------------------------------------------------------
/components/ui/avatar/AvatarImage.vue:
--------------------------------------------------------------------------------
 1 | <script setup lang="ts">
 2 | import { AvatarImage, type AvatarImageProps } from 'radix-vue'
 3 | 
 4 | const props = defineProps<AvatarImageProps>()
 5 | </script>
 6 | 
 7 | <template>
 8 |   <AvatarImage v-bind="props" class="h-full w-full object-cover" />
 9 | </template>
10 | 


--------------------------------------------------------------------------------
/components/ui/select/SelectValue.vue:
--------------------------------------------------------------------------------
 1 | <script setup lang="ts">
 2 | import { SelectValue, type SelectValueProps } from 'radix-vue'
 3 | 
 4 | const props = defineProps<SelectValueProps>()
 5 | </script>
 6 | 
 7 | <template>
 8 |   <SelectValue v-bind="props">
 9 |     <slot />
10 |   </SelectValue>
11 | </template>
12 | 


--------------------------------------------------------------------------------
/components/ui/sheet/SheetClose.vue:
--------------------------------------------------------------------------------
 1 | <script setup lang="ts">
 2 | import { DialogClose, type DialogCloseProps } from 'radix-vue'
 3 | 
 4 | const props = defineProps<DialogCloseProps>()
 5 | </script>
 6 | 
 7 | <template>
 8 |   <DialogClose v-bind="props">
 9 |     <slot />
10 |   </DialogClose>
11 | </template>
12 | 


--------------------------------------------------------------------------------
/.gitignore:
--------------------------------------------------------------------------------
 1 | # Nuxt dev/build outputs
 2 | .output
 3 | .data
 4 | .nuxt
 5 | .nitro
 6 | .cache
 7 | dist
 8 | 
 9 | # Node dependencies
10 | node_modules
11 | 
12 | # Logs
13 | logs
14 | *.log
15 | 
16 | # Misc
17 | .DS_Store
18 | .fleet
19 | .idea
20 | 
21 | # Local env files
22 | .env
23 | .env.*
24 | !.env.example
25 | 


--------------------------------------------------------------------------------
/components/ui/sheet/SheetTrigger.vue:
--------------------------------------------------------------------------------
 1 | <script setup lang="ts">
 2 | import { DialogTrigger, type DialogTriggerProps } from 'radix-vue'
 3 | 
 4 | const props = defineProps<DialogTriggerProps>()
 5 | </script>
 6 | 
 7 | <template>
 8 |   <DialogTrigger v-bind="props">
 9 |     <slot />
10 |   </DialogTrigger>
11 | </template>
12 | 


--------------------------------------------------------------------------------
/components/ui/dialog/DialogTrigger.vue:
--------------------------------------------------------------------------------
 1 | <script setup lang="ts">
 2 | import { DialogTrigger, type DialogTriggerProps } from 'radix-vue'
 3 | 
 4 | const props = defineProps<DialogTriggerProps>()
 5 | </script>
 6 | 
 7 | <template>
 8 |   <DialogTrigger v-bind="props">
 9 |     <slot />
10 |   </DialogTrigger>
11 | </template>
12 | 


--------------------------------------------------------------------------------
/components/ui/avatar/AvatarFallback.vue:
--------------------------------------------------------------------------------
 1 | <script setup lang="ts">
 2 | import { AvatarFallback, type AvatarFallbackProps } from 'radix-vue'
 3 | 
 4 | const props = defineProps<AvatarFallbackProps>()
 5 | </script>
 6 | 
 7 | <template>
 8 |   <AvatarFallback v-bind="props">
 9 |     <slot />
10 |   </AvatarFallback>
11 | </template>
12 | 


--------------------------------------------------------------------------------
/components/ui/select/SelectItemText.vue:
--------------------------------------------------------------------------------
 1 | <script setup lang="ts">
 2 | import { SelectItemText, type SelectItemTextProps } from 'radix-vue'
 3 | 
 4 | const props = defineProps<SelectItemTextProps>()
 5 | </script>
 6 | 
 7 | <template>
 8 |   <SelectItemText v-bind="props">
 9 |     <slot />
10 |   </SelectItemText>
11 | </template>
12 | 


--------------------------------------------------------------------------------
/components/ui/card/CardContent.vue:
--------------------------------------------------------------------------------
 1 | <script setup lang="ts">
 2 | import { cn } from '@/lib/utils'
 3 | 
 4 | const props = defineProps({
 5 |   class: {
 6 |     type: String,
 7 |     default: '',
 8 |   },
 9 | })
10 | </script>
11 | 
12 | <template>
13 |   <div :class="cn('p-6 pt-0', props.class)">
14 |     <slot />
15 |   </div>
16 | </template>
17 | 


--------------------------------------------------------------------------------
/components/ui/card/CardFooter.vue:
--------------------------------------------------------------------------------
 1 | <script setup lang="ts">
 2 | import { cn } from '@/lib/utils'
 3 | 
 4 | const props = defineProps({
 5 |   class: {
 6 |     type: String,
 7 |     default: '',
 8 |   },
 9 | })
10 | </script>
11 | 
12 | <template>
13 |   <div :class="cn('p-6 pt-0', props.class)">
14 |     <slot />
15 |   </div>
16 | </template>
17 | 


--------------------------------------------------------------------------------
/components/ui/dropdown-menu/DropdownMenuGroup.vue:
--------------------------------------------------------------------------------
 1 | <script setup lang="ts">
 2 | import { DropdownMenuGroup, type DropdownMenuGroupProps } from 'radix-vue'
 3 | 
 4 | const props = defineProps<DropdownMenuGroupProps>()
 5 | </script>
 6 | 
 7 | <template>
 8 |   <DropdownMenuGroup v-bind="props">
 9 |     <slot />
10 |   </DropdownMenuGroup>
11 | </template>
12 | 


--------------------------------------------------------------------------------
/server/api/user/index.get.ts:
--------------------------------------------------------------------------------
 1 | import { User } from "~/server/types";
 2 | export default defineEventHandler(async (event) => {
 3 | 
 4 |     await protectedRoute(event);
 5 |     const user = event.context.user as User
 6 | 
 7 |     const apiCount = await getApiLimitCount(user.id)
 8 | 
 9 |     return {
10 |         ...user,
11 |         apiCount
12 |     }
13 | })


--------------------------------------------------------------------------------
/components/ui/card/CardDescription.vue:
--------------------------------------------------------------------------------
 1 | <script setup lang="ts">
 2 | import { cn } from '@/lib/utils'
 3 | 
 4 | const props = defineProps({
 5 |   class: {
 6 |     type: String,
 7 |     default: '',
 8 |   },
 9 | })
10 | </script>
11 | 
12 | <template>
13 |   <p :class="cn('text-sm text-muted-foreground', props.class)">
14 |     <slot />
15 |   </p>
16 | </template>
17 | 


--------------------------------------------------------------------------------
/components/ui/card/CardHeader.vue:
--------------------------------------------------------------------------------
 1 | <script setup lang="ts">
 2 | import { cn } from '@/lib/utils'
 3 | 
 4 | const props = defineProps({
 5 |   class: {
 6 |     type: String,
 7 |     default: '',
 8 |   },
 9 | })
10 | </script>
11 | 
12 | <template>
13 |   <div :class="cn('flex flex-col space-y-1.5 p-6', props.class)">
14 |     <slot />
15 |   </div>
16 | </template>
17 | 


--------------------------------------------------------------------------------
/components/ui/sheet/SheetHeader.vue:
--------------------------------------------------------------------------------
 1 | <script setup lang="ts">
 2 | import { cn } from '@/lib/utils'
 3 | 
 4 | const props = defineProps<{ class?: string }>()
 5 | </script>
 6 | 
 7 | <template>
 8 |   <div
 9 |     :class="
10 |       cn('flex flex-col space-y-2 text-center sm:text-left', props.class)
11 |     "
12 |   >
13 |     <slot />
14 |   </div>
15 | </template>
16 | 


--------------------------------------------------------------------------------
/components.json:
--------------------------------------------------------------------------------
 1 | {
 2 |   "style": "default",
 3 |   "typescript": true,
 4 |   "tailwind": {
 5 |     "config": "tailwind.config.js",
 6 |     "css": "assets/css/tailwind.css",
 7 |     "baseColor": "slate",
 8 |     "cssVariables": true
 9 |   },
10 |   "framework": "nuxt",
11 |   "aliases": {
12 |     "components": "@/components",
13 |     "utils": "@/lib/utils"
14 |   }
15 | }


--------------------------------------------------------------------------------
/components/ui/card/index.ts:
--------------------------------------------------------------------------------
1 | export { default as Card } from './Card.vue'
2 | export { default as CardHeader } from './CardHeader.vue'
3 | export { default as CardTitle } from './CardTitle.vue'
4 | export { default as CardDescription } from './CardDescription.vue'
5 | export { default as CardContent } from './CardContent.vue'
6 | export { default as CardFooter } from './CardFooter.vue'
7 | 


--------------------------------------------------------------------------------
/store/useProModal.ts:
--------------------------------------------------------------------------------
 1 | import { defineStore } from 'pinia'
 2 | export const useProModal = defineStore('ProModal', {
 3 |     state: () => ({ isOpen: false, }),
 4 | 
 5 |     actions: {
 6 | 
 7 | 
 8 |         onOpen() {
 9 | 
10 |             this.isOpen = true
11 |         },
12 |         onClose() {
13 | 
14 |             this.isOpen = false
15 |         }
16 | 
17 | 
18 |     },
19 | })


--------------------------------------------------------------------------------
/components/ui/dropdown-menu/DropdownMenuSeparator.vue:
--------------------------------------------------------------------------------
 1 | <script setup lang="ts">
 2 | import {
 3 |   DropdownMenuSeparator,
 4 |   type DropdownMenuSeparatorProps,
 5 | } from 'radix-vue'
 6 | 
 7 | const props = defineProps<DropdownMenuSeparatorProps>()
 8 | </script>
 9 | 
10 | <template>
11 |   <DropdownMenuSeparator v-bind="props" class="-mx-1 my-1 h-px bg-muted" />
12 | </template>
13 | 


--------------------------------------------------------------------------------
/components/ui/dropdown-menu/DropdownMenuTrigger.vue:
--------------------------------------------------------------------------------
 1 | <script setup lang="ts">
 2 | import { DropdownMenuTrigger, type DropdownMenuTriggerProps } from 'radix-vue'
 3 | 
 4 | const props = defineProps<DropdownMenuTriggerProps>()
 5 | </script>
 6 | 
 7 | <template>
 8 |   <DropdownMenuTrigger class="outline-none" v-bind="props">
 9 |     <slot />
10 |   </DropdownMenuTrigger>
11 | </template>
12 | 


--------------------------------------------------------------------------------
/components/ui/select/SelectSeparator.vue:
--------------------------------------------------------------------------------
 1 | <script setup lang="ts">
 2 | import { SelectSeparator, type SelectSeparatorProps } from 'radix-vue'
 3 | import { cn } from '@/lib/utils'
 4 | 
 5 | const props = defineProps<SelectSeparatorProps & { class?: string }>()
 6 | </script>
 7 | 
 8 | <template>
 9 |   <SelectSeparator :class="cn('-mx-1 my-1 h-px bg-muted', props.class)" />
10 | </template>
11 | 


--------------------------------------------------------------------------------
/pages/settings.vue:
--------------------------------------------------------------------------------
 1 | <template>
 2 |   <div>
 3 |     <Heading
 4 |       title="Settings"
 5 |       description="Manage account settings."
 6 |       icon="lucide:settings"
 7 |       iconColor="text-gray-700"
 8 |       bgColor="bg-gray-700/10"
 9 |     />
10 | 
11 |     <SubscriptionButton />
12 |   </div>
13 | </template>
14 | 
15 | <script setup lang="ts"></script>
16 | 
17 | <style scoped></style>
18 | 


--------------------------------------------------------------------------------
/components/Empty.vue:
--------------------------------------------------------------------------------
 1 | <template>
 2 |   <div class="h-full p-20 flex flex-col items-center justify-center">
 3 |     <div class="relative h-72 w-72">
 4 |       <img src="/empty.png" alt="Empty" />
 5 |     </div>
 6 |     <p class="text-muted-foreground text-sm text-center">{{ label }}</p>
 7 |   </div>
 8 | </template>
 9 | 
10 | <script setup lang="ts">
11 | defineProps<{ label: string }>();
12 | </script>
13 | 


--------------------------------------------------------------------------------
/components/ui/select/SelectGroup.vue:
--------------------------------------------------------------------------------
 1 | <script setup lang="ts">
 2 | import { SelectGroup, type SelectGroupProps } from 'radix-vue'
 3 | import { cn } from '@/lib/utils'
 4 | 
 5 | const props = defineProps<SelectGroupProps & { class?: string }>()
 6 | </script>
 7 | 
 8 | <template>
 9 |   <SelectGroup :class="cn('p-1 w-full', props.class)" v-bind="props">
10 |     <slot />
11 |   </SelectGroup>
12 | </template>
13 | 


--------------------------------------------------------------------------------
/components/ui/dialog/DialogHeader.vue:
--------------------------------------------------------------------------------
 1 | <script setup lang="ts">
 2 | import { cn } from '@/lib/utils'
 3 | 
 4 | interface DialogHeaderProps {
 5 |   class?: string
 6 | }
 7 | 
 8 | const props = defineProps<DialogHeaderProps>()
 9 | </script>
10 | 
11 | <template>
12 |   <div
13 |     :class="cn('flex flex-col space-y-2 text-center sm:text-left', props.class)"
14 |   >
15 |     <slot />
16 |   </div>
17 | </template>
18 | 


--------------------------------------------------------------------------------
/plugins/crisp.client.js:
--------------------------------------------------------------------------------
 1 | export default defineNuxtPlugin(() => {
 2 |   window.$crisp = [];
 3 |   window.CRISP_WEBSITE_ID = "d65aaebb-bef1-46fc-80ba-562e7c2956ed";
 4 | 
 5 |   (function () {
 6 |     var d = document;
 7 |     var s = d.createElement("script");
 8 | 
 9 |     s.src = "https://client.crisp.chat/l.js";
10 |     s.async = 1;
11 |     d.getElementsByTagName("head")[0].appendChild(s);
12 |   })();
13 | });
14 | 


--------------------------------------------------------------------------------
/components/ui/select/SelectLabel.vue:
--------------------------------------------------------------------------------
 1 | <script setup lang="ts">
 2 | import { SelectLabel, type SelectLabelProps } from 'radix-vue'
 3 | import { cn } from '@/lib/utils'
 4 | 
 5 | const props = defineProps<SelectLabelProps & { class?: string }>()
 6 | </script>
 7 | 
 8 | <template>
 9 |   <SelectLabel :class="cn('py-1.5 pl-8 pr-2 text-sm font-semibold', props.class)">
10 |     <slot />
11 |   </SelectLabel>
12 | </template>
13 | 


--------------------------------------------------------------------------------
/components/ui/sheet/SheetFooter.vue:
--------------------------------------------------------------------------------
 1 | <script setup lang="ts">
 2 | import { cn } from '@/lib/utils'
 3 | 
 4 | const props = defineProps<{ class?: string }>()
 5 | </script>
 6 | 
 7 | <template>
 8 |   <div
 9 |     :class="
10 |       cn(
11 |         'flex flex-col-reverse sm:flex-row sm:justify-end sm:space-x-2',
12 |         props.class,
13 |       )
14 |     "
15 |   >
16 |     <slot />
17 |   </div>
18 | </template>
19 | 


--------------------------------------------------------------------------------
/layouts/default.vue:
--------------------------------------------------------------------------------
 1 | <template>
 2 |   <div class="h-full relative">
 3 |     <div class="hidden h-full md:flex md:w-72 md:flex-col md:fixed md:inset-y-0 z-80">
 4 |       <Sidebar />
 5 |     </div>
 6 |     <main class="md:pl-72 pb-10">
 7 |       <Navbar />
 8 |       <slot />
 9 |     </main>
10 |   </div>
11 |   <ProModal />
12 | </template>
13 | 
14 | <script setup lang="ts"></script>
15 | 
16 | <style scoped></style>
17 | 


--------------------------------------------------------------------------------
/components/ui/card/CardTitle.vue:
--------------------------------------------------------------------------------
 1 | <script setup lang="ts">
 2 | import { cn } from '@/lib/utils'
 3 | 
 4 | const props = defineProps({
 5 |   class: {
 6 |     type: String,
 7 |     default: '',
 8 |   },
 9 | })
10 | </script>
11 | 
12 | <template>
13 |   <h3
14 |     :class="
15 |       cn('text-2xl font-semibold leading-none tracking-tighter', props.class)
16 |     "
17 |   >
18 |     <slot />
19 |   </h3>
20 | </template>
21 | 


--------------------------------------------------------------------------------
/components/ui/select/Select.vue:
--------------------------------------------------------------------------------
 1 | <script setup lang="ts">
 2 | import type { SelectRootEmits, SelectRootProps } from 'radix-vue'
 3 | import { SelectRoot, useEmitAsProps } from 'radix-vue'
 4 | 
 5 | const props = defineProps<SelectRootProps>()
 6 | const emits = defineEmits<SelectRootEmits>()
 7 | </script>
 8 | 
 9 | <template>
10 |   <SelectRoot v-bind="{ ...props, ...useEmitAsProps(emits) }">
11 |     <slot />
12 |   </SelectRoot>
13 | </template>
14 | 


--------------------------------------------------------------------------------
/components/ui/sheet/SheetTitle.vue:
--------------------------------------------------------------------------------
 1 | <script setup lang="ts">
 2 | import { DialogTitle, type DialogTitleProps } from 'radix-vue'
 3 | import { cn } from '@/lib/utils'
 4 | 
 5 | const props = defineProps<DialogTitleProps & { class?: string }>()
 6 | </script>
 7 | 
 8 | <template>
 9 |   <DialogTitle
10 |     :class="cn('text-lg font-semibold text-foreground', props.class)"
11 |     v-bind="props"
12 |   >
13 |     <slot />
14 |   </DialogTitle>
15 | </template>
16 | 


--------------------------------------------------------------------------------
/components/ui/card/Card.vue:
--------------------------------------------------------------------------------
 1 | <script setup lang="ts">
 2 | import { cn } from '@/lib/utils'
 3 | 
 4 | const props = defineProps({
 5 |   class: {
 6 |     type: String,
 7 |     default: '',
 8 |   },
 9 | })
10 | </script>
11 | 
12 | <template>
13 |   <div
14 |     :class="
15 |       cn(
16 |         'rounded-lg border bg-card text-card-foreground shadow-sm',
17 |         props.class,
18 |       )
19 |     "
20 |   >
21 |     <slot />
22 |   </div>
23 | </template>
24 | 


--------------------------------------------------------------------------------
/components/ui/dialog/index.ts:
--------------------------------------------------------------------------------
1 | export { default as Dialog } from './Dialog.vue'
2 | export { default as DialogTrigger } from './DialogTrigger.vue'
3 | export { default as DialogHeader } from './DialogHeader.vue'
4 | export { default as DialogTitle } from './DialogTitle.vue'
5 | export { default as DialogDescription } from './DialogDescription.vue'
6 | export { default as DialogContent } from './DialogContent.vue'
7 | export { default as DialogFooter } from './DialogFooter.vue'
8 | 


--------------------------------------------------------------------------------
/components/ui/dropdown-menu/DropdownMenu.vue:
--------------------------------------------------------------------------------
 1 | <script setup lang="ts">
 2 | import { DropdownMenuRoot, type DropdownMenuRootEmits, type DropdownMenuRootProps, useEmitAsProps } from 'radix-vue'
 3 | 
 4 | const props = defineProps<DropdownMenuRootProps>()
 5 | const emits = defineEmits<DropdownMenuRootEmits>()
 6 | </script>
 7 | 
 8 | <template>
 9 |   <DropdownMenuRoot v-bind="{ ...props, ...useEmitAsProps(emits) }">
10 |     <slot />
11 |   </DropdownMenuRoot>
12 | </template>
13 | 


--------------------------------------------------------------------------------
/components/MobileSidebar.vue:
--------------------------------------------------------------------------------
 1 | <script setup lang="ts">
 2 | import { ref } from 'vue';
 3 | </script>
 4 | 
 5 | <template>
 6 |   <Sheet>
 7 |     <SheetTrigger as-child >
 8 |       <Button variant="outline" class="md:hidden pr-4 hover:opacity-75 transition">
 9 |         <Icon name="lucide:menu" />
10 |       </Button>
11 |     </SheetTrigger>
12 |     <SheetContent side="left"  class="p-0 bg-white">
13 |       <Sidebar  />
14 |     </SheetContent>
15 |   </Sheet>
16 | </template>
17 | 


--------------------------------------------------------------------------------
/components/ui/dialog/DialogDescription.vue:
--------------------------------------------------------------------------------
 1 | <script setup lang="ts">
 2 | import { DialogDescription, type DialogDescriptionProps } from 'radix-vue'
 3 | import { cn } from '@/lib/utils'
 4 | 
 5 | const props = defineProps<DialogDescriptionProps & { class?: string }>()
 6 | </script>
 7 | 
 8 | <template>
 9 |   <DialogDescription
10 |     v-bind="props"
11 |     :class="cn('text-muted-foreground text-sm', props.class)"
12 |   >
13 |     <slot />
14 |   </DialogDescription>
15 | </template>
16 | 


--------------------------------------------------------------------------------
/components/ui/sheet/SheetDescription.vue:
--------------------------------------------------------------------------------
 1 | <script setup lang="ts">
 2 | import { DialogDescription, type DialogDescriptionProps } from 'radix-vue'
 3 | import { cn } from '@/lib/utils'
 4 | 
 5 | const props = defineProps<DialogDescriptionProps & { class?: string }>()
 6 | </script>
 7 | 
 8 | <template>
 9 |   <DialogDescription
10 |     :class="cn('text-sm text-muted-foreground', props.class)"
11 |     v-bind="props"
12 |   >
13 |     <slot />
14 |   </DialogDescription>
15 | </template>
16 | 


--------------------------------------------------------------------------------
/components/ui/dropdown-menu/DropdownMenuSub.vue:
--------------------------------------------------------------------------------
 1 | <script setup lang="ts">
 2 | import {
 3 |   DropdownMenuSub,
 4 |   type DropdownMenuSubEmits,
 5 |   type DropdownMenuSubProps,
 6 | } from 'radix-vue'
 7 | 
 8 | const props = defineProps<DropdownMenuSubProps>()
 9 | 
10 | const emits = defineEmits<DropdownMenuSubEmits>()
11 | </script>
12 | 
13 | <template>
14 |   <DropdownMenuSub v-bind="props" @update:open="emits('update:open', $event)">
15 |     <slot />
16 |   </DropdownMenuSub>
17 | </template>
18 | 


--------------------------------------------------------------------------------
/components/ui/dialog/DialogFooter.vue:
--------------------------------------------------------------------------------
 1 | <script setup lang="ts">
 2 | import { cn } from '@/lib/utils'
 3 | 
 4 | interface DialogFooterProps {
 5 |   class?: string
 6 | }
 7 | 
 8 | const props = defineProps<DialogFooterProps>()
 9 | </script>
10 | 
11 | <template>
12 |   <div
13 |     :class="
14 |       cn(
15 |         'flex flex-col space-y-2 sm:space-y-0 mt-1.5 sm:flex-row sm:justify-end sm:space-x-2',
16 |         props.class,
17 |       )
18 |     "
19 |   >
20 |     <slot />
21 |   </div>
22 | </template>
23 | 


--------------------------------------------------------------------------------
/components/ui/sheet/index.ts:
--------------------------------------------------------------------------------
1 | export { default as Sheet } from './Sheet.vue'
2 | export { default as SheetTrigger } from './SheetTrigger.vue'
3 | export { default as SheetClose } from './SheetClose.vue'
4 | export { default as SheetContent } from './SheetContent.vue'
5 | export { default as SheetHeader } from './SheetHeader.vue'
6 | export { default as SheetTitle } from './SheetTitle.vue'
7 | export { default as SheetDescription } from './SheetDescription.vue'
8 | export { default as SheetFooter } from './SheetFooter.vue'
9 | 


--------------------------------------------------------------------------------
/components/ui/badge/Badge.vue:
--------------------------------------------------------------------------------
 1 | <script setup lang="ts">
 2 | import type { VariantProps } from 'class-variance-authority'
 3 | import { badgeVariants } from '.'
 4 | import { cn } from '@/lib/utils'
 5 | 
 6 | interface BadgeVariantProps extends VariantProps<typeof badgeVariants> {}
 7 | 
 8 | interface Props {
 9 |   variant?: BadgeVariantProps['variant']
10 | }
11 | defineProps<Props>()
12 | </script>
13 | 
14 | <template>
15 |   <div :class="cn(badgeVariants({ variant }), $attrs.class ?? '')">
16 |     <slot />
17 |   </div>
18 | </template>
19 | 


--------------------------------------------------------------------------------
/components/ui/dialog/DialogTitle.vue:
--------------------------------------------------------------------------------
 1 | <script setup lang="ts">
 2 | import { DialogTitle, type DialogTitleProps } from 'radix-vue'
 3 | import { cn } from '@/lib/utils'
 4 | 
 5 | const props = defineProps<DialogTitleProps & { class?: string }>()
 6 | </script>
 7 | 
 8 | <template>
 9 |   <DialogTitle
10 |     v-bind="props"
11 |     :class="
12 |       cn(
13 |         'text-lg text-foreground font-semibold leading-none tracking-tight',
14 |         props.class,
15 |       )
16 |     "
17 |   >
18 |     <slot />
19 |   </DialogTitle>
20 | </template>
21 | 


--------------------------------------------------------------------------------
/components/Loader.vue:
--------------------------------------------------------------------------------
 1 | <template>
 2 |   <div class="h-full flex flex-col gap-y-4 items-center justify-center">
 3 |     <div class="w-10 h-10 relative animate-spin">
 4 |       <img alt="Logo" src="/logo.svg" fill />
 5 |     </div>
 6 |     <p v-if="processing" class="text-sm text-muted-foreground">MultiGeniX is processing...</p>
 7 |   </div>
 8 | </template>
 9 | 
10 | <script setup lang="ts">
11 | interface LoaderProps {
12 |   processing?: boolean;
13 | }
14 | 
15 | withDefaults(defineProps<LoaderProps>(), {
16 |   processing: true,
17 | });
18 | </script>
19 | 


--------------------------------------------------------------------------------
/components/ui/dropdown-menu/DropdownMenuLabel.vue:
--------------------------------------------------------------------------------
 1 | <script setup lang="ts">
 2 | import { DropdownMenuLabel, type DropdownMenuLabelProps } from 'radix-vue'
 3 | import { cn } from '@/lib/utils'
 4 | 
 5 | const props = defineProps<DropdownMenuLabelProps & {
 6 |   inset?: boolean
 7 |   class?: string
 8 | }>()
 9 | </script>
10 | 
11 | <template>
12 |   <DropdownMenuLabel
13 |     v-bind="props"
14 |     :class="
15 |       cn('px-2 py-1.5 text-sm font-semibold',
16 |          inset && 'pl-8', props.class)"
17 |   >
18 |     <slot />
19 |   </DropdownMenuLabel>
20 | </template>
21 | 


--------------------------------------------------------------------------------
/components/ui/dropdown-menu/DropdownMenuRadioGroup.vue:
--------------------------------------------------------------------------------
 1 | <script setup lang="ts">
 2 | import {
 3 |   DropdownMenuRadioGroup,
 4 |   type DropdownMenuRadioGroupEmits,
 5 |   type DropdownMenuRadioGroupProps,
 6 | } from 'radix-vue'
 7 | 
 8 | const props = defineProps<DropdownMenuRadioGroupProps>()
 9 | 
10 | const emits = defineEmits<DropdownMenuRadioGroupEmits>()
11 | </script>
12 | 
13 | <template>
14 |   <DropdownMenuRadioGroup
15 |     v-bind="props"
16 |     @update:model-value="emits('update:modelValue', $event)"
17 |   >
18 |     <slot />
19 |   </DropdownMenuRadioGroup>
20 | </template>
21 | 


--------------------------------------------------------------------------------
/components/ui/select/index.ts:
--------------------------------------------------------------------------------
 1 | export { default as Select } from './Select.vue'
 2 | export { default as SelectValue } from './SelectValue.vue'
 3 | export { default as SelectTrigger } from './SelectTrigger.vue'
 4 | export { default as SelectContent } from './SelectContent.vue'
 5 | export { default as SelectGroup } from './SelectGroup.vue'
 6 | export { default as SelectItem } from './SelectItem.vue'
 7 | export { default as SelectItemText } from './SelectItemText.vue'
 8 | export { default as SelectLabel } from './SelectLabel.vue'
 9 | export { default as SelectSeparator } from './SelectSeparator.vue'
10 | 


--------------------------------------------------------------------------------
/components/ui/button/Button.vue:
--------------------------------------------------------------------------------
 1 | <script setup lang="ts">
 2 | import { buttonVariants } from '.'
 3 | import { cn } from '@/lib/utils'
 4 | 
 5 | interface Props {
 6 |   variant?: NonNullable<Parameters<typeof buttonVariants>[0]>['variant']
 7 |   size?: NonNullable<Parameters<typeof buttonVariants>[0]>['size']
 8 |   as?: string
 9 | }
10 | 
11 | withDefaults(defineProps<Props>(), {
12 |   as: 'button',
13 | })
14 | </script>
15 | 
16 | <template>
17 |   <component
18 |     :is="as"
19 |     :class="cn(buttonVariants({ variant, size }), $attrs.class ?? '')"
20 |   >
21 |     <slot />
22 |   </component>
23 | </template>
24 | 


--------------------------------------------------------------------------------
/components/ui/avatar/Avatar.vue:
--------------------------------------------------------------------------------
 1 | <script setup lang="ts">
 2 | import { AvatarRoot } from 'radix-vue'
 3 | import { avatarVariant } from '.'
 4 | import { cn } from '@/lib/utils'
 5 | 
 6 | interface Props {
 7 |   size?: NonNullable<Parameters<typeof avatarVariant>[0]>['size']
 8 |   shape?: NonNullable<Parameters<typeof avatarVariant>[0]>['shape']
 9 |   class?: string
10 | }
11 | 
12 | const props = withDefaults(defineProps<Props>(), {
13 |   size: 'sm',
14 |   shape: 'circle',
15 | })
16 | </script>
17 | 
18 | <template>
19 |   <AvatarRoot :class="cn(avatarVariant({ size, shape }), props.class)">
20 |     <slot />
21 |   </AvatarRoot>
22 | </template>
23 | 


--------------------------------------------------------------------------------
/components/Heading.vue:
--------------------------------------------------------------------------------
 1 | <template>
 2 |   <div class="px-4 lg:px-8 flex items-center gap-x-3 mb-8">
 3 |     <div :class="`p-2 w-fit rounded-md ${bgColor}`">
 4 |       <Icon :name="icon" :class="`w-10 h-10 ${iconColor}`" />
 5 |     </div>
 6 |     <div>
 7 |       <h2 class="text-3xl font-bold">{{ title }}</h2>
 8 |       <p class="text-sm text-muted-foreground">{{ description }}</p>
 9 |     </div>
10 |   </div>
11 | </template>
12 | 
13 | <script setup lang="ts">
14 | interface HeadingProps {
15 |   title: string;
16 |   description: string;
17 |   icon: string;
18 |   iconColor?: string;
19 |   bgColor?: string;
20 | }
21 | defineProps<HeadingProps>();
22 | </script>
23 | 


--------------------------------------------------------------------------------
/components/ui/avatar/index.ts:
--------------------------------------------------------------------------------
 1 | import { cva } from 'class-variance-authority'
 2 | 
 3 | export { default as Avatar } from './Avatar.vue'
 4 | export { default as AvatarImage } from './AvatarImage.vue'
 5 | export { default as AvatarFallback } from './AvatarFallback.vue'
 6 | 
 7 | export const avatarVariant = cva(
 8 |   'inline-flex items-center justify-center font-normal text-foreground select-none shrink-0 bg-secondary overflow-hidden',
 9 |   {
10 |     variants: {
11 |       size: {
12 |         sm: 'h-10 w-10 text-xs',
13 |         base: 'h-16 w-16 text-2xl',
14 |         lg: 'h-32 w-32 text-5xl',
15 |       },
16 |       shape: {
17 |         circle: 'rounded-full',
18 |         square: 'rounded-md',
19 |       },
20 |     },
21 |   },
22 | )
23 | 


--------------------------------------------------------------------------------
/components/ui/dropdown-menu/DropdownMenuItem.vue:
--------------------------------------------------------------------------------
 1 | <script setup lang="ts">
 2 | import { DropdownMenuItem, type DropdownMenuItemProps } from 'radix-vue'
 3 | import { cn } from '@/lib/utils'
 4 | 
 5 | const props = defineProps<DropdownMenuItemProps & { inset?: boolean; class?: string }>()
 6 | </script>
 7 | 
 8 | <template>
 9 |   <DropdownMenuItem
10 |     v-bind="props"
11 |     :class="[
12 |       cn(
13 |         'relative flex cursor-default select-none items-center rounded-sm px-2 py-1.5 text-sm outline-none transition-colors focus:bg-accent focus:text-accent-foreground data-[disabled]:pointer-events-none data-[disabled]:opacity-50',
14 |         inset && 'pl-8',
15 |         props.class,
16 |       ),
17 |     ]"
18 |   >
19 |     <slot />
20 |   </DropdownMenuItem>
21 | </template>
22 | 


--------------------------------------------------------------------------------
/README.md:
--------------------------------------------------------------------------------
 1 | ---
 2 | Build and Ship Nuxt fullstack starter apps with Auth, DB, Payments, Email & File storage 
 3 | 
 4 | Try [Supersaas today](https://supersaas.dev)
 5 | ---
 6 | 
 7 | 
 8 | [<img src="https://essentials.supersaas.dev/supersaas-banner.png">](https://supersaas.dev?ref=Nuxt3-AI-Sass)
 9 | 
10 | ---
11 | Build Faster, Design Better with QuasarUI Components and Templates.
12 | 
13 | Try [QuasarUI now](https://www.quasarui.com/)
14 | ---
15 | 
16 | 
17 | [<img src="https://www.quasarui.com/img/og.webp">](https://www.quasarui.com/)
18 | 
19 | Build Faster, Design Better with QuasarUI Components and Templates.
20 | 
21 | QuasarUI is a collection of templates and over 480 beautifully crafted UI components built with Quasar, aimed at making your development process easier and faster.
22 | 
23 | 


--------------------------------------------------------------------------------
/components/ui/dropdown-menu/DropdownMenuSubTrigger.vue:
--------------------------------------------------------------------------------
 1 | <script setup lang="ts">
 2 | import {
 3 |   DropdownMenuSubTrigger,
 4 |   type DropdownMenuSubTriggerProps,
 5 | } from 'radix-vue'
 6 | import { ChevronRight } from 'lucide-vue-next'
 7 | import { cn } from '@/lib/utils'
 8 | 
 9 | const props = defineProps<DropdownMenuSubTriggerProps & { class?: string }>()
10 | </script>
11 | 
12 | <template>
13 |   <DropdownMenuSubTrigger
14 |     v-bind="props"
15 |     :class="[
16 |       cn(
17 |         'flex cursor-default select-none items-center rounded-sm px-2 py-1.5 text-sm outline-none focus:bg-accent data-[state=open]:bg-accent',
18 |         props.class,
19 |       ),
20 |     ]"
21 |   >
22 |     <slot />
23 |     <ChevronRight class="ml-auto h-4 w-4" />
24 |   </DropdownMenuSubTrigger>
25 | </template>
26 | 


--------------------------------------------------------------------------------
/components/UserAvatar.vue:
--------------------------------------------------------------------------------
 1 | <template>
 2 |   <Avatar v-if="user?.user_metadata.avatar_url" >
 3 |     <AvatarImage :src="user?.user_metadata.avatar_url" />
 4 |     <AvatarFallback>
 5 |       {{ user?.email?.charAt(0).toUpperCase() }}
 6 |       {{ user?.email?.charAt(1).toUpperCase() }}
 7 |     </AvatarFallback>
 8 |   </Avatar>
 9 |   <Avatar v-else-if="user?.user_metadata.full_name" >
10 |     {{
11 |       user.user_metadata.full_name.split(' ')[0].charAt(0).toUpperCase() +
12 |       ' ' +
13 |       user.user_metadata.full_name.split(' ')[1].charAt(0).toUpperCase()
14 |     }}
15 |   </Avatar>
16 |   <Avatar v-else >
17 |     {{ user?.email?.charAt(0).toUpperCase() }}
18 |     {{ user?.email?.charAt(1).toUpperCase() }}
19 |   </Avatar>
20 | </template>
21 | 
22 | <script setup lang="ts">
23 | const user = useSupabaseUser();
24 | </script>
25 | 
26 | <style scoped></style>
27 | 


--------------------------------------------------------------------------------
/nuxt.config.ts:
--------------------------------------------------------------------------------
 1 | // https://v3.nuxtjs.org/api/configuration/nuxt.config
 2 | export default defineNuxtConfig({
 3 | 
 4 |   modules: ['@nuxtjs/supabase', '@nuxtjs/tailwindcss', 'nuxt-icon', '@pinia/nuxt'],
 5 |   supabase: {
 6 |     redirectOptions: {
 7 |       login: '/auth',
 8 |       callback: '/confirm',
 9 |       // Add URLS which don't require any Authentication like landing page
10 |       exclude: ['/'],
11 |     },
12 |   },
13 |   components: [
14 |     {
15 |       path: '~/components/ui',
16 |       extensions: ['.vue'],
17 |       pathPrefix: false
18 |     },
19 |     {
20 |       path: '~/components',
21 |       extensions: ['.vue'],
22 |       pathPrefix: false
23 |     },
24 |   ],
25 |   runtimeConfig: {
26 |     openaiKey: '',
27 |     replicateKey: '',
28 |     stripeSecret: '',
29 |     stripeWebhookSecret: '',
30 |     appUrl: '',
31 |     public: {
32 |       publicStripeKey: '',
33 |     }
34 |   }
35 | })


--------------------------------------------------------------------------------
/components/ui/progress/Progress.vue:
--------------------------------------------------------------------------------
 1 | <script setup lang="ts">
 2 | import {
 3 |   ProgressIndicator,
 4 |   ProgressRoot,
 5 |   type ProgressRootProps,
 6 | } from 'radix-vue'
 7 | import { cn } from '@/lib/utils'
 8 | 
 9 | const props = withDefaults(
10 |   defineProps<ProgressRootProps & { class?: string }>(),
11 |   {
12 |     class: '',
13 |     modelValue: 0,
14 |   },
15 | )
16 | </script>
17 | 
18 | <template>
19 |   <ProgressRoot
20 |     :class="
21 |       cn(
22 |         'relative h-4 w-full overflow-hidden rounded-full bg-secondary',
23 |         props.class,
24 |       )
25 |     "
26 |     v-bind="props"
27 |   >
28 |     <ProgressIndicator
29 |       :class="
30 |         cn(
31 |           'h-full w-full flex-1 duration-300 bg-foreground transition-all',
32 |           props.class,
33 |         )
34 |       "
35 |       :style="`transform: translateX(-${100 - (props.modelValue ?? 0)}%);`"
36 |     />
37 |   </ProgressRoot>
38 | </template>
39 | 


--------------------------------------------------------------------------------
/public/logo3.svg:
--------------------------------------------------------------------------------
 1 | <svg xmlns="http://www.w3.org/2000/svg" width="158" height="48" fill="none">
 2 |   <path fill="#111827" fill-rule="evenodd"
 3 |     d="m45 4-18 6v19.5l6 2V37l18 6V11.5l-6 2V4ZM35 32.167 45 35.5V15.608l4-1.333v25.95L35 35.56v-3.393Z"
 4 |     clip-rule="evenodd" />
 5 |   <path fill="#111827"
 6 |     d="M69.9 20.45V31h4.447V20.45h3.53v-3.392H66.39v3.393h3.51Zm10.206 4.798c0 3.978 2.3 6.006 6.376 6.006 3.9 0 6.396-1.853 6.396-6.045v-8.15h-4.446v7.994c0 1.833-.39 2.73-1.95 2.73-1.58 0-1.97-.897-1.97-2.71v-8.015h-4.406v8.19Z" />
 7 |   <path fill="#111827" fill-rule="evenodd"
 8 |     d="M95.969 31V17.058h5.558c4.017 0 5.733 1.794 5.733 4.777v.078c0 2.906-1.93 4.544-5.538 4.544h-1.346V31h-4.407Zm5.323-7.507h-.916v-3.14h.936c1.15 0 1.755.43 1.755 1.502v.078c0 1.033-.605 1.56-1.775 1.56Z"
 9 |     clip-rule="evenodd" />
10 |   <path fill="#111827"
11 |     d="M109.562 31V17.058h4.427v10.53h5.07V31h-9.497Zm11.999-13.942V31h10.218v-3.393h-5.811v-2.086h4.368v-3.1h-4.368v-1.97h5.499v-3.393h-9.906Z" />
12 | </svg>


--------------------------------------------------------------------------------
/components/ui/badge/index.ts:
--------------------------------------------------------------------------------
 1 | import { cva } from 'class-variance-authority'
 2 | 
 3 | export { default as Badge } from './Badge.vue'
 4 | 
 5 | export const badgeVariants = cva(
 6 |   'inline-flex items-center rounded-full border px-2.5 py-0.5 text-xs font-semibold transition-colors focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2',
 7 |   {
 8 |     variants: {
 9 |       variant: {
10 |         default:
11 |           'border-transparent bg-primary text-primary-foreground hover:bg-primary/80',
12 |         secondary:
13 |           'border-transparent bg-secondary text-secondary-foreground hover:bg-secondary/80',
14 |         destructive:
15 |           'border-transparent bg-destructive text-destructive-foreground hover:bg-destructive/80',
16 |         outline: 'text-foreground',
17 |         premium: "bg-gradient-to-r from-indigo-500 via-purple-500 to-pink-500 text-primary-foreground border-0"
18 |       },
19 |     },
20 |     defaultVariants: {
21 |       variant: 'default',
22 |     },
23 |   },
24 | )
25 | 


--------------------------------------------------------------------------------
/notes.md:
--------------------------------------------------------------------------------
 1 | 1. Install and Setup ShadCN
 2 | 2. Auth 
 3 | 3. Basic Layout ( )
 4 | 4. All API modules ( Conversation, Code, Music, Video )
 5 | 5. Prisma Setup ( Supabase )
 6 |     
 7 | 
 8 |     1. install prisma: yarn add --dev prisma
 9 |     2. npx prisma init
10 |     3. Insert database url to .env file
11 |     4. Create Prisma Schema
12 |     5. npx prisma generate + npx prisma db push
13 | 
14 | 6. Do the Api counter ( API + UI )
15 | 7. Do the Pro Modal ( Dynamic Open )
16 | 8. Stripe Integration
17 | 
18 | 
19 |     1. Stripe Keys with url key as well
20 |     2. Stripe Util
21 |     3. Update Prisma
22 |     4. Absolute URL
23 |     4. Stripe Basic API
24 |     5. Stripe Webhook ( API )
25 |     6. Webhook login and Keys ( Run every time while development )
26 |     7. User Stripe Status API
27 | 
28 | 9. Settings Page ( Integrate the last step API ) (Must activate Customer Portal Link)
29 | 10. Don't show modal or counter or upgrade button in sidebar if we are already pro
30 | 11. Don't throw 403 error when I'm pro while I'm out above 5 (max count)
31 | <!--  -->


--------------------------------------------------------------------------------
/components/ui/select/SelectItem.vue:
--------------------------------------------------------------------------------
 1 | <script setup lang="ts">
 2 | import {
 3 |   SelectItem,
 4 |   SelectItemIndicator,
 5 |   type SelectItemProps,
 6 |   SelectItemText,
 7 | } from 'radix-vue'
 8 | import { Check } from 'lucide-vue-next'
 9 | import { cn } from '@/lib/utils'
10 | 
11 | const props = defineProps<SelectItemProps & { class?: string }>()
12 | </script>
13 | 
14 | <template>
15 |   <SelectItem
16 |     v-bind="props"
17 |     :class="
18 |       cn(
19 |         'relative flex w-full cursor-default select-none items-center rounded-sm py-1.5 pl-8 pr-2 text-sm outline-none focus:bg-accent focus:text-accent-foreground data-[disabled]:pointer-events-none data-[disabled]:opacity-50',
20 |         props.class,
21 |       )
22 |     "
23 |   >
24 |     <span class="absolute left-2 flex h-3.5 w-3.5 items-center justify-center">
25 |       <SelectItemIndicator>
26 |         <Check class="h-4 w-4" />
27 |       </SelectItemIndicator>
28 |     </span>
29 | 
30 |     <SelectItemText>
31 |       <slot />
32 |     </SelectItemText>
33 |   </SelectItem>
34 | </template>
35 | 


--------------------------------------------------------------------------------
/prisma/schema.prisma:
--------------------------------------------------------------------------------
 1 | // This is your Prisma schema file,
 2 | // learn more about it in the docs: https://pris.ly/d/prisma-schema
 3 | 
 4 | generator client {
 5 |   provider = "prisma-client-js"
 6 | }
 7 | 
 8 | datasource db {
 9 |   provider = "postgresql"
10 |   url      = env("DATABASE_URL")
11 | }
12 | 
13 | model UserApiLimit {
14 |   id        String   @id @default(cuid())
15 |   userId    String   @unique
16 |   count     Int      @default(0)
17 |   createdAt DateTime @default(now())
18 |   updatedAt DateTime @updatedAt
19 | }
20 | model UserSubscription {
21 |   id        String      @id @default(cuid())
22 |   userId    String      @unique
23 |   // the map is just to give another name so we can access by two ways (the maped name is used by stripe that's why)
24 |   stripeCustomerId       String?   @unique @map(name: "stripe_customer_id")
25 |   stripeSubscriptionId   String?   @unique @map(name: "stripe_subscription_id")
26 |   stripePriceId          String?   @map(name: "stripe_price_id")
27 |   stripeCurrentPeriodEnd DateTime? @map(name: "stripe_current_period_end")
28 | }


--------------------------------------------------------------------------------
/components/ui/dropdown-menu/DropdownMenuSubContent.vue:
--------------------------------------------------------------------------------
 1 | <script setup lang="ts">
 2 | import {
 3 |   DropdownMenuSubContent,
 4 |   type DropdownMenuSubContentEmits,
 5 |   type DropdownMenuSubContentProps,
 6 |   useForwardPropsEmits,
 7 | } from 'radix-vue'
 8 | import { cn } from '@/lib/utils'
 9 | 
10 | const props = defineProps<DropdownMenuSubContentProps>()
11 | const emits = defineEmits<DropdownMenuSubContentEmits>()
12 | 
13 | const forwarded = useForwardPropsEmits(props, emits)
14 | </script>
15 | 
16 | <template>
17 |   <DropdownMenuSubContent
18 |     v-bind="forwarded"
19 |     :class="cn('z-50 min-w-[8rem] overflow-hidden rounded-md border bg-popover p-1 text-popover-foreground shadow-lg data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2', $attrs.class ?? '')"
20 |   >
21 |     <slot />
22 |   </DropdownMenuSubContent>
23 | </template>
24 | 


--------------------------------------------------------------------------------
/components/ui/select/SelectTrigger.vue:
--------------------------------------------------------------------------------
 1 | <script setup lang="ts">
 2 | import { SelectIcon, SelectTrigger, type SelectTriggerProps } from 'radix-vue'
 3 | import { ChevronDown } from 'lucide-vue-next'
 4 | import { cn } from '@/lib/utils'
 5 | 
 6 | const props = withDefaults(
 7 |   defineProps<SelectTriggerProps & { class?: string; invalid?: boolean }>(),
 8 |   {
 9 |     class: '',
10 |     invalid: false,
11 |   },
12 | )
13 | </script>
14 | 
15 | <template>
16 |   <SelectTrigger
17 |     v-bind="props"
18 |     :class="[
19 |       cn(
20 |         'flex h-10 w-full items-center justify-between rounded-md border border-input bg-background px-3 py-2 text-sm ring-offset-background placeholder:text-muted-foreground focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50',
21 |         props.class,
22 |       ),
23 |       props.invalid
24 |         ? '!ring-destructive ring-2 placeholder:!text-destructive'
25 |         : '',
26 |     ]"
27 |   >
28 |     <slot />
29 |     <SelectIcon as-child>
30 |       <ChevronDown class="w-4 h-4 opacity-50" />
31 |     </SelectIcon>
32 |   </SelectTrigger>
33 | </template>
34 | 


--------------------------------------------------------------------------------
/server/api/stripe/checkStatus.ts:
--------------------------------------------------------------------------------
 1 | import { PrismaClient } from '@prisma/client';
 2 | import { User } from "~/server/types";
 3 | 
 4 | const prisma = new PrismaClient();
 5 | const DAY_IN_MS = 86_400_000;
 6 | 
 7 | export default defineEventHandler(async (event) => {
 8 | 
 9 |     await protectedRoute(event);
10 |     const user = event.context.user as User
11 | 
12 |     const userSubscription = await prisma.userSubscription.findUnique({
13 |         where: {
14 |             userId: user.id,
15 |         },
16 |         select: {
17 |             stripeSubscriptionId: true,
18 |             stripeCurrentPeriodEnd: true,
19 |             stripeCustomerId: true,
20 |             stripePriceId: true
21 |         }
22 |     })
23 | 
24 |     console.log('[USER_SUBSCRIPTION]', userSubscription);
25 | 
26 | 
27 |     if (!userSubscription) {
28 |         return false;
29 |     }
30 | 
31 |     const isValid =
32 |         userSubscription.stripePriceId &&
33 |         userSubscription.stripeCurrentPeriodEnd?.getTime()! + DAY_IN_MS > Date.now()
34 | 
35 |     console.log('[IS_VALID]', isValid);
36 | 
37 |     // For returning the boolean value 
38 |     return !!isValid;
39 | })


--------------------------------------------------------------------------------
/components/ui/dropdown-menu/index.ts:
--------------------------------------------------------------------------------
 1 | export { DropdownMenuPortal } from 'radix-vue'
 2 | 
 3 | export { default as DropdownMenu } from './DropdownMenu.vue'
 4 | export { default as DropdownMenuTrigger } from './DropdownMenuTrigger.vue'
 5 | export { default as DropdownMenuContent } from './DropdownMenuContent.vue'
 6 | export { default as DropdownMenuGroup } from './DropdownMenuGroup.vue'
 7 | export { default as DropdownMenuRadioGroup } from './DropdownMenuRadioGroup.vue'
 8 | export { default as DropdownMenuItem } from './DropdownMenuItem.vue'
 9 | export { default as DropdownMenuCheckboxItem } from './DropdownMenuCheckboxItem.vue'
10 | export { default as DropdownMenuRadioItem } from './DropdownMenuRadioItem.vue'
11 | export { default as DropdownMenuShortcut } from './DropdownMenuShortcut.vue'
12 | export { default as DropdownMenuSeparator } from './DropdownMenuSeparator.vue'
13 | export { default as DropdownMenuLabel } from './DropdownMenuLabel.vue'
14 | export { default as DropdownMenuSub } from './DropdownMenuSub.vue'
15 | export { default as DropdownMenuSubTrigger } from './DropdownMenuSubTrigger.vue'
16 | export { default as DropdownMenuSubContent } from './DropdownMenuSubContent.vue'
17 | 


--------------------------------------------------------------------------------
/pages/dashboard.vue:
--------------------------------------------------------------------------------
 1 | <template>
 2 |   <div>
 3 |     <div class="mb-8 space-y-4">
 4 |       <h2 class="text-2xl md:text-4xl font-bold text-center">Explore the power of AI</h2>
 5 |       <p class="text-muted-foreground font-light text-sm md:text-lg text-center">
 6 |         Chat with the smartest AI - Experience the power of AI
 7 |       </p>
 8 |     </div>
 9 |     <div class="px-4 md:px-20 lg:px-32 space-y-4">
10 |       <div
11 |         v-for="tool in tools"
12 |         :key="tool.link"
13 |         @click="$router.push(`${tool.link}`)"
14 |         class="p-4 border-muted border flex items-center justify-between hover:shadow-md transition cursor-pointer"
15 |       >
16 |         <div class="flex items-center gap-x-4">
17 |           <div :class="`p-2 w-fit rounded-md ${tool.bgColor}`">
18 |             <Icon :name="tool.icon" :class="`w-8 h-8 ${tool.color}`" />
19 |           </div>
20 | 
21 |           <div class="font-semibold">{{ tool.label }}</div>
22 |         </div>
23 |         <Icon name="lucide:arrow-right" class="w-5 h-5" />
24 |       </div>
25 |     </div>
26 |   </div>
27 | </template>
28 | 
29 | <script setup lang="ts">
30 | 
31 | </script>
32 | 
33 | <style scoped></style>
34 | 


--------------------------------------------------------------------------------
/components/ui/dropdown-menu/DropdownMenuRadioItem.vue:
--------------------------------------------------------------------------------
 1 | <script setup lang="ts">
 2 | import {
 3 |   DropdownMenuItemIndicator,
 4 |   DropdownMenuRadioItem,
 5 |   type DropdownMenuRadioItemEmits,
 6 |   type DropdownMenuRadioItemProps,
 7 |   useEmitAsProps,
 8 | } from 'radix-vue'
 9 | import { Circle } from 'lucide-vue-next'
10 | import { cn } from '@/lib/utils'
11 | 
12 | const props = defineProps<DropdownMenuRadioItemProps & { class?: string }>()
13 | 
14 | const emits = defineEmits<DropdownMenuRadioItemEmits>()
15 | </script>
16 | 
17 | <template>
18 |   <DropdownMenuRadioItem
19 |     v-bind="{ ...props, ...useEmitAsProps(emits) }"
20 |     :class="cn(
21 |       'flex relative items-center rounded-md transition-colors data-[disabled]:opacity-50 data-[disabled]:pointer-events-none data-[highlighted]:bg-outline-hover pl-7 py-1.5 text-sm outline-none select-none cursor-default',
22 |       props.class,
23 |     )"
24 |   >
25 |     <span class="absolute left-2 flex h-3.5 w-3.5 items-center justify-center">
26 | 
27 |       <DropdownMenuItemIndicator>
28 |         <Circle class="h-2 w-2 fill-current" />
29 |       </DropdownMenuItemIndicator>
30 |     </span>
31 |     <slot />
32 |   </DropdownMenuRadioItem>
33 | </template>
34 | 


--------------------------------------------------------------------------------
/package.json:
--------------------------------------------------------------------------------
 1 | {
 2 |   "name": "nuxt-app",
 3 |   "private": true,
 4 |   "type": "module",
 5 |   "scripts": {
 6 |     "build": "nuxt build",
 7 |     "dev": "nuxt dev",
 8 |     "generate": "nuxt generate",
 9 |     "preview": "nuxt preview",
10 |     "postinstall": "nuxt prepare"
11 |   },
12 |   "devDependencies": {
13 |     "@nuxt/devtools": "latest",
14 |     "@nuxtbase/auth-ui-vue": "^0.3.3",
15 |     "@nuxtjs/supabase": "^1.1.2",
16 |     "@supabase/auth-ui-shared": "^0.1.7",
17 |     "@types/markdown-it": "^13.0.2",
18 |     "nuxt": "^3.7.4",
19 |     "nuxt-icon": "^0.5.0",
20 |     "prisma": "^5.4.1",
21 |     "typescript": "^5.2.2",
22 |     "vue": "^3.3.4",
23 |     "vue-router": "^4.2.5"
24 |   },
25 |   "dependencies": {
26 |     "@nuxtjs/tailwindcss": "^6.8.0",
27 |     "@pinia/nuxt": "^0.4.11",
28 |     "@prisma/client": "5.4.1",
29 |     "class-variance-authority": "^0.7.0",
30 |     "clsx": "^2.0.0",
31 |     "lucide-vue-next": "^0.284.0",
32 |     "markdown-it": "^13.0.2",
33 |     "openai": "^4.11.1",
34 |     "pinia": "^2.1.6",
35 |     "radix-vue": "^0.4.1",
36 |     "replicate": "^0.20.0",
37 |     "stripe": "^13.9.0",
38 |     "tailwind-merge": "^1.14.0",
39 |     "tailwindcss-animate": "^1.0.7"
40 |   }
41 | }
42 | 


--------------------------------------------------------------------------------
/components/ui/dropdown-menu/DropdownMenuCheckboxItem.vue:
--------------------------------------------------------------------------------
 1 | <script setup lang="ts">
 2 | import {
 3 |   DropdownMenuCheckboxItem,
 4 |   type DropdownMenuCheckboxItemEmits,
 5 |   type DropdownMenuCheckboxItemProps,
 6 |   DropdownMenuItemIndicator,
 7 |   useEmitAsProps,
 8 | } from 'radix-vue'
 9 | import { Check } from 'lucide-vue-next'
10 | import { cn } from '@/lib/utils'
11 | 
12 | const props = defineProps<DropdownMenuCheckboxItemProps & { class?: string }>()
13 | const emits = defineEmits<DropdownMenuCheckboxItemEmits>()
14 | </script>
15 | 
16 | <template>
17 |   <DropdownMenuCheckboxItem
18 |     v-bind="{ ...props, ...useEmitAsProps(emits) }"
19 |     :class=" cn(
20 |       'relative flex cursor-default select-none items-center rounded-sm py-1.5 pl-8 pr-2 text-sm outline-none transition-colors focus:bg-accent focus:text-accent-foreground data-[disabled]:pointer-events-none data-[disabled]:opacity-50',
21 |       props.class,
22 |     )"
23 |   >
24 |     <span class="absolute left-2 flex h-3.5 w-3.5 items-center justify-center">
25 |       <DropdownMenuItemIndicator>
26 |         <Check class="w-4 h-4" />
27 |       </DropdownMenuItemIndicator>
28 |     </span>
29 |     <slot />
30 |   </DropdownMenuCheckboxItem>
31 | </template>
32 | 


--------------------------------------------------------------------------------
/components/ui/dropdown-menu/DropdownMenuContent.vue:
--------------------------------------------------------------------------------
 1 | <script setup lang="ts">
 2 | import {
 3 |   DropdownMenuContent,
 4 |   type DropdownMenuContentEmits,
 5 |   type DropdownMenuContentProps,
 6 |   DropdownMenuPortal,
 7 |   useForwardPropsEmits,
 8 | } from 'radix-vue'
 9 | import { cn } from '@/lib/utils'
10 | 
11 | const props = withDefaults(
12 |   defineProps<DropdownMenuContentProps & { class?: string }>(),
13 |   {
14 |     sideOffset: 4,
15 |   },
16 | )
17 | const emits = defineEmits<DropdownMenuContentEmits>()
18 | 
19 | const forwarded = useForwardPropsEmits(props, emits)
20 | </script>
21 | 
22 | <template>
23 |   <DropdownMenuPortal>
24 |     <DropdownMenuContent
25 |       :class="[
26 |         cn(
27 |           'z-50 min-w-[8rem] overflow-hidden rounded-md border bg-popover p-1 text-popover-foreground shadow-md data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2',
28 |           props.class,
29 |         ),
30 |       ]"
31 |       v-bind="forwarded"
32 |     >
33 |       <slot />
34 |     </DropdownMenuContent>
35 |   </DropdownMenuPortal>
36 | </template>
37 | 


--------------------------------------------------------------------------------
/server/api/conversation/index.post.ts:
--------------------------------------------------------------------------------
 1 | import OpenAI from "openai";
 2 | import { User } from "~/server/types";
 3 | 
 4 | const config = useRuntimeConfig();
 5 | const openai = new OpenAI({
 6 |     apiKey: config.openaiKey
 7 | });
 8 | 
 9 | export default defineEventHandler(async (event) => {
10 | 
11 |     // TODO: Verify and Get User
12 |     await protectedRoute(event);
13 |     const user = event.context.user as User
14 |     const { messages } = await readBody(event);
15 |     if (!openai.apiKey) {
16 |         throw createError({
17 |             statusCode: 500,
18 |             statusMessage: 'OpenAI API Key not configured.',
19 |         })
20 |     }
21 |     if (!messages) {
22 |         throw createError({
23 |             statusCode: 400,
24 |             statusMessage: 'Messages are required',
25 |         })
26 | 
27 |     }
28 |     const freeTrial = await checkApiLimit(user.id);
29 |     const isPro = await checkSubscription(user.id)
30 |     if (!freeTrial && !isPro) {
31 |         throw createError({
32 |             statusCode: 403,
33 |             statusMessage: 'Free trial has expired. Please upgrade to pro.',
34 |         })
35 | 
36 |     }
37 |     const response = await openai.chat.completions.create({
38 |         model: "gpt-3.5-turbo",
39 |         messages,
40 |     })
41 |     await incrementApiLimit(user.id);
42 |     return response.choices[0].message
43 | 
44 | })


--------------------------------------------------------------------------------
/components/ui/button/index.ts:
--------------------------------------------------------------------------------
 1 | import { cva } from 'class-variance-authority'
 2 | 
 3 | export { default as Button } from './Button.vue'
 4 | 
 5 | export const buttonVariants = cva(
 6 |   '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',
 7 |   {
 8 |     variants: {
 9 |       variant: {
10 |         default: 'bg-primary text-primary-foreground hover:bg-primary/90',
11 |         destructive:
12 |           'bg-destructive text-destructive-foreground hover:bg-destructive/90',
13 |         outline:
14 |           'border border-input bg-background hover:bg-accent hover:text-accent-foreground',
15 |         secondary:
16 |           'bg-secondary text-secondary-foreground hover:bg-secondary/80',
17 |         ghost: 'hover:bg-accent hover:text-accent-foreground',
18 |         link: 'text-primary underline-offset-4 hover:underline',
19 |         premium: "bg-gradient-to-r from-indigo-500 via-purple-500 to-pink-500 text-white border-0",
20 |       },
21 |       size: {
22 |         default: 'h-10 px-4 py-2',
23 |         sm: 'h-9 rounded-md px-3',
24 |         lg: 'h-11 rounded-md px-8',
25 |         icon: 'h-10 w-10',
26 |       },
27 |     },
28 |     defaultVariants: {
29 |       variant: 'default',
30 |       size: 'default',
31 |     },
32 |   },
33 | )
34 | 


--------------------------------------------------------------------------------
/server/api/music/index.post.ts:
--------------------------------------------------------------------------------
 1 | import Replicate from "replicate";
 2 | import { User } from "~/server/types";
 3 | 
 4 | const config = useRuntimeConfig();
 5 | 
 6 | const replicate = new Replicate({
 7 |     auth: config.replicateKey
 8 | })
 9 | 
10 | export default defineEventHandler(async (event) => {
11 | 
12 |     await protectedRoute(event);
13 |     const user = event.context.user as User
14 |     const { prompt } = await readBody(event);
15 |     if (!replicate.auth) {
16 |         throw createError({
17 |             statusCode: 500,
18 |             statusMessage: 'Replicate API Key not configured.',
19 |         })
20 |     }
21 |     if (!prompt) {
22 |         throw createError({
23 |             statusCode: 400,
24 |             statusMessage: 'Prompt is required',
25 |         })
26 | 
27 |     }
28 | 
29 | 
30 |     const freeTrial = await checkApiLimit(user.id);
31 |     const isPro = await checkSubscription(user.id)
32 | 
33 |     if (!freeTrial && !isPro) {
34 |         throw createError({
35 |             statusCode: 403,
36 |             statusMessage: 'Free trial has expired. Please upgrade to pro.',
37 |         })
38 | 
39 |     }
40 |     const model = "riffusion/riffusion:8cf61ea6c56afd61d8f5b9ffd14d7c216c0a93844ce2d82ac1c9ecc9c7f24e05"
41 |     const response = await replicate.run(model, {
42 |         input: {
43 |             prompt_a: prompt
44 |         }
45 |     })
46 |     await incrementApiLimit(user.id);
47 | 
48 |     return response
49 | 
50 | })


--------------------------------------------------------------------------------
/server/api/video/index.post.ts:
--------------------------------------------------------------------------------
 1 | import Replicate from "replicate";
 2 | import { User } from "~/server/types";
 3 | 
 4 | const config = useRuntimeConfig();
 5 | 
 6 | const replicate = new Replicate({
 7 |     auth: config.replicateKey
 8 | })
 9 | 
10 | export default defineEventHandler(async (event) => {
11 | 
12 |     await protectedRoute(event);
13 |     const user = event.context.user as User
14 |     const { prompt } = await readBody(event);
15 |     if (!replicate.auth) {
16 |         throw createError({
17 |             statusCode: 500,
18 |             statusMessage: 'Replicate API Key not configured.',
19 |         })
20 |     }
21 |     if (!prompt) {
22 |         throw createError({
23 |             statusCode: 400,
24 |             statusMessage: 'Prompt is required',
25 |         })
26 | 
27 |     }
28 | 
29 | 
30 |     const freeTrial = await checkApiLimit(user.id);
31 |     const isPro = await checkSubscription(user.id)
32 | 
33 |     if (!freeTrial && !isPro) {
34 |         throw createError({
35 |             statusCode: 403,
36 |             statusMessage: 'Free trial has expired. Please upgrade to pro.',
37 |         })
38 | 
39 |     }
40 |     const model = "anotherjesse/zeroscope-v2-xl:9f747673945c62801b13b84701c783929c0ee784e4748ec062204894dda1a351"
41 |     const response = await replicate.run(model, {
42 |         input: {
43 |             prompt
44 |         }
45 |     })
46 |     await incrementApiLimit(user.id);
47 | 
48 |     return response
49 | 
50 | })


--------------------------------------------------------------------------------
/server/api/code/index.post.ts:
--------------------------------------------------------------------------------
 1 | import OpenAI from "openai";
 2 | import { protectedRoute } from '~/server/utils';
 3 | import { User } from "~/server/types";
 4 | 
 5 | const config = useRuntimeConfig();
 6 | const openai = new OpenAI({
 7 |     apiKey: config.openaiKey
 8 | });
 9 | const instructionMessage = {
10 |     role: "system",
11 |     content: "You are a code generator. You must answer only in markdown code snippets. Use code comments for explanations."
12 | };
13 | export default defineEventHandler(async (event) => {
14 | 
15 |     await protectedRoute(event);
16 |     const user = event.context.user as User
17 | 
18 |     const { messages } = await readBody(event);
19 |     if (!openai.apiKey) {
20 |         throw createError({
21 |             statusCode: 500,
22 |             statusMessage: 'OpenAI API Key not configured.',
23 |         })
24 |     }
25 |     if (!messages) {
26 |         throw createError({
27 |             statusCode: 400,
28 |             statusMessage: 'Messages are required',
29 |         })
30 | 
31 |     }
32 |     const freeTrial = await checkApiLimit(user.id);
33 |     const isPro = await checkSubscription(user.id)
34 |     if (!freeTrial && !isPro) {
35 |         throw createError({
36 |             statusCode: 403,
37 |             statusMessage: 'Free trial has expired. Please upgrade to pro.',
38 |         })
39 | 
40 |     }
41 |     const response = await openai.chat.completions.create({
42 |         model: "gpt-3.5-turbo",
43 |         messages: [instructionMessage, ...messages]
44 |     })
45 |     await incrementApiLimit(user.id);
46 | 
47 |     return response.choices[0].message
48 | 
49 | })


--------------------------------------------------------------------------------
/components/SubscriptionButton.vue:
--------------------------------------------------------------------------------
 1 | <template>
 2 |   <div>
 3 |     <div
 4 |       v-if="isLoading || pending"
 5 |       class="p-8 rounded-lg w-full flex items-center justify-center bg-muted"
 6 |     >
 7 |       <Loader />
 8 |       <!-- <div class="text-red-900 text-5xl">Loading....</div> -->
 9 |     </div>
10 |     <div v-else class="px-4 lg:px-8 space-y-4">
11 |       <div class="text-muted-foreground text-sm">
12 |         {{
13 |           isPro ? 'You are currently on a Pro plan.' : 'You are currently on a free plan.'
14 |         }}
15 |       </div>
16 |       <Button
17 |         class="shadow-none bg-gray-950 text-white"
18 |         v-if="isPro"
19 |         :disabled="isLoading || pending"
20 |         @click="manageSubscription"
21 |       >
22 |         Manage Subscription
23 |       </Button>
24 |       <Button
25 |         v-else
26 |         variant="premium"
27 |         :disabled="isLoading || pending"
28 |         @click="manageSubscription"
29 |       >
30 |         Upgrade
31 |         <Icon name="lucide:zap" class="w-4 h-4 ml-2 fill-white" />
32 |       </Button>
33 |     </div>
34 |   </div>
35 | </template>
36 | 
37 | <script setup lang="ts">
38 | const isLoading = ref(false);
39 | // const isPro = ref(false);
40 | const manageSubscription = async () => {
41 |   isLoading.value = true;
42 |   const { data } = await useFetch('/api/stripe');
43 |   console.log(data.value?.url);
44 | 
45 |   if (data.value) {
46 |     // @ts-ignore
47 |     window.location.href = data.value.url;
48 |   }
49 |   console.log('DONE WITH URL');
50 | 
51 |   isLoading.value = false;
52 | };
53 | 
54 | const { data: isPro, pending } = await useFetch('/api/stripe/checkStatus');
55 | </script>
56 | 
57 | <style scoped></style>
58 | 


--------------------------------------------------------------------------------
/components/ui/select/SelectContent.vue:
--------------------------------------------------------------------------------
 1 | <script setup lang="ts">
 2 | import {
 3 |   SelectContent,
 4 |   type SelectContentEmits,
 5 |   type SelectContentProps,
 6 |   SelectPortal,
 7 |   SelectViewport,
 8 |   useForwardPropsEmits,
 9 | } from 'radix-vue'
10 | import { cn } from '@/lib/utils'
11 | 
12 | const props = withDefaults(
13 |   defineProps<SelectContentProps & { class?: string }>(), {
14 |     position: 'popper',
15 |     sideOffset: 4,
16 |   },
17 | )
18 | const emits = defineEmits<SelectContentEmits>()
19 | 
20 | const forwarded = useForwardPropsEmits(props, emits)
21 | </script>
22 | 
23 | <template>
24 |   <SelectPortal>
25 |     <SelectContent
26 |       v-bind="{ ...forwarded, ...$attrs }"
27 |       :class="
28 |         cn(
29 |           'relative z-50 min-w-[10rem] overflow-hidden rounded-md bg-background border border-border text-foreground shadow-md data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2',
30 |           position === 'popper'
31 |             && 'data-[side=bottom]:translate-y-1 data-[side=left]:-translate-x-1 data-[side=right]:translate-x-1 data-[side=top]:-translate-y-1',
32 |           props.class,
33 |         )
34 |       "
35 |     >
36 |       <SelectViewport
37 |         :class="
38 |           cn('p-1',
39 |              position === 'popper'
40 |                && 'h-[var(--radix-select-trigger-height)] w-full min-w-[var(--radix-select-trigger-width)]')"
41 |       >
42 |         <slot />
43 |       </SelectViewport>
44 |     </SelectContent>
45 |   </SelectPortal>
46 | </template>
47 | 


--------------------------------------------------------------------------------
/server/api/image/index.post.ts:
--------------------------------------------------------------------------------
 1 | import OpenAI from "openai";
 2 | import { protectedRoute } from '~/server/utils';
 3 | import { User } from "~/server/types";
 4 | 
 5 | const config = useRuntimeConfig();
 6 | const openai = new OpenAI({
 7 |     apiKey: config.openaiKey
 8 | });
 9 | 
10 | export default defineEventHandler(async (event) => {
11 | 
12 |     await protectedRoute(event);
13 |     const user = event.context.user as User
14 |     const { prompt, amount = 1, resolution = "512x512" } = await readBody(event);
15 |     if (!openai.apiKey) {
16 |         throw createError({
17 |             statusCode: 500,
18 |             statusMessage: 'OpenAI API Key not configured.',
19 |         })
20 |     }
21 |     if (!prompt) {
22 |         throw createError({
23 |             statusCode: 400,
24 |             statusMessage: 'Prompt are required',
25 |         })
26 | 
27 |     }
28 |     if (!amount) {
29 |         throw createError({
30 |             statusCode: 400,
31 |             statusMessage: 'Amount are required',
32 |         })
33 | 
34 |     }
35 |     if (!resolution) {
36 |         throw createError({
37 |             statusCode: 400,
38 |             statusMessage: 'Resolution are required',
39 |         })
40 | 
41 |     }
42 |     const freeTrial = await checkApiLimit(user.id);
43 |     const isPro = await checkSubscription(user.id)
44 |     
45 |     if (!freeTrial && !isPro) {
46 |         throw createError({
47 |             statusCode: 403,
48 |             statusMessage: 'Free trial has expired. Please upgrade to pro.',
49 |         })
50 | 
51 |     }
52 |     const response = await openai.images.generate({
53 |         prompt,
54 |         n: parseInt(amount, 10),
55 |         size: resolution
56 |     })
57 |     await incrementApiLimit(user.id);
58 | 
59 |     return response.data
60 | 
61 | })


--------------------------------------------------------------------------------
/public/logo2.svg:
--------------------------------------------------------------------------------
1 | <svg xmlns="http://www.w3.org/2000/svg" width="158" height="48" fill="none">
2 |   <path fill="#111827" fill-rule="evenodd"
3 |     d="M63.837 4h-32.11C29.117 4 27 6.107 27 8.706V38.97c0 2.6 2.116 4.706 4.727 4.706h32.11c2.611 0 4.728-2.107 4.728-4.706V8.706c0-2.6-2.117-4.706-4.728-4.706ZM36.48 17.449h3.642c2.085 0 3.392 1.19 3.392 3.086 0 1.923-1.237 3.058-3.35 3.058h-3.684v-6.144Zm0 9.354h3.434l3.74 7.238h4.753l-4.226-7.888c2.308-.913 3.642-3.128 3.642-5.674 0-3.971-2.71-6.407-7.117-6.407h-8.424v19.969h4.198v-7.238Zm23.068-1.992c-.083-2.02-1.306-3.28-3.197-3.28-1.877 0-3.197 1.3-3.336 3.28h6.533Zm-3.044 6.462c1.599 0 2.697-.567 3.128-1.578h3.767c-.612 2.879-3.253 4.678-7.006 4.678-4.67 0-7.423-2.934-7.423-7.888 0-4.968 2.808-8.04 7.367-8.04 4.518 0 7.187 2.865 7.187 7.708v1.231H53v.208c.056 2.27 1.39 3.68 3.503 3.68Zm16.19 2.767h4.045V22.098h3.17V18.93h-3.253V17.67c0-1.3.584-1.923 2.168-1.923.529 0 .946.041 1.21.069v-2.85a12.733 12.733 0 0 0-2.085-.153c-3.698 0-5.255 1.536-5.255 4.566v1.55H70.22v3.17h2.474V34.04Zm22.833-7.638c0 4.996-2.836 7.97-7.548 7.97s-7.548-2.974-7.548-7.97c0-4.94 2.877-7.957 7.548-7.957 4.67 0 7.548 3.003 7.548 7.957Zm-10.94 0c0 2.975 1.223 4.677 3.392 4.677 2.154 0 3.392-1.716 3.392-4.677 0-2.934-1.251-4.663-3.392-4.663-2.155 0-3.392 1.73-3.392 4.663Zm12.82 7.639h4.045v-8.455c0-2.145 1.516-3.446 3.726-3.446.653 0 1.598.125 1.918.25v-3.668c-.347-.125-1.029-.194-1.585-.194-1.946 0-3.53 1.163-3.934 2.685h-.25v-2.436h-3.92v15.264Zm15.163 0h-4.046V18.777h3.92v2.491h.251c.625-1.743 2.224-2.823 4.239-2.823 2.155 0 3.629 1.052 4.24 2.823h.25c.709-1.702 2.475-2.823 4.615-2.823 3.059 0 4.963 1.98 4.963 5.12v10.476h-4.045v-9.41c0-1.813-.848-2.712-2.558-2.712-1.64 0-2.697 1.162-2.697 2.781v9.34h-3.892v-9.575c0-1.62-.945-2.546-2.53-2.546s-2.71 1.231-2.71 2.933v9.189Z"
4 |     clip-rule="evenodd" />
5 | </svg>


--------------------------------------------------------------------------------
/components/ui/dialog/DialogContent.vue:
--------------------------------------------------------------------------------
 1 | <script setup lang="ts">
 2 | import {
 3 |   DialogClose,
 4 |   DialogContent,
 5 |   type DialogContentEmits,
 6 |   type DialogContentProps,
 7 |   DialogOverlay,
 8 |   DialogPortal,
 9 |   useEmitAsProps,
10 | } from 'radix-vue'
11 | import { X } from 'lucide-vue-next'
12 | import { cn } from '@/lib/utils'
13 | 
14 | const props = defineProps<DialogContentProps & { class?: string }>()
15 | const emits = defineEmits<DialogContentEmits>()
16 | 
17 | const emitsAsProps = useEmitAsProps(emits)
18 | </script>
19 | 
20 | <template>
21 |   <DialogPortal>
22 |     <DialogOverlay
23 |       class="fixed inset-0 z-50 bg-background/80 backdrop-blur-sm data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0"
24 |     />
25 |     <DialogContent
26 |       :class="
27 |         cn(
28 |           'fixed left-[50%] top-[50%] z-50 grid w-full max-w-lg translate-x-[-50%] translate-y-[-50%] gap-4 border border-border bg-background p-6 shadow-lg duration-200 data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[state=closed]:slide-out-to-left-1/2 data-[state=closed]:slide-out-to-top-[48%] data-[state=open]:slide-in-from-left-1/2 data-[state=open]:slide-in-from-top-[48%] sm:rounded-lg md:w-full',
29 |           props.class,
30 |         )
31 |       "
32 |       v-bind="{ ...props, ...emitsAsProps }"
33 |     >
34 |       <slot />
35 | 
36 |       <DialogClose
37 |         class="absolute top-3 right-3 p-0.5 transition-colors rounded-md hover:bg-secondary"
38 |       >
39 |         <X class="w-4 h-4" />
40 |         <span class="sr-only">Close</span>
41 |       </DialogClose>
42 |     </DialogContent>
43 |   </DialogPortal>
44 | </template>
45 | 


--------------------------------------------------------------------------------
/assets/css/tailwind.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: 222.2 84% 4.9%;
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: 210 40% 98%;
66 |  
67 |     --ring: 212.7 26.8% 83.9%;
68 |   }
69 | }
70 |  
71 | @layer base {
72 |   * {
73 |     @apply border-border;
74 |   }
75 |   body {
76 |     @apply bg-background text-foreground;
77 |   }
78 | }


--------------------------------------------------------------------------------
/components/ProModal.vue:
--------------------------------------------------------------------------------
 1 | <template>
 2 |   <Dialog :open="proModal.isOpen" @update:open="proModal.onClose">
 3 |     <DialogContent>
 4 |       <DialogHeader>
 5 |         <DialogTitle class="flex justify-center items-center flex-col gap-y-4 pb-2">
 6 |           <div class="flex items-center gap-x-2 font-bold text-xl">
 7 |             Upgrade to MultiGeniX
 8 |             <Badge variant="premium" class="uppercase text-sm py-1"> pro </Badge>
 9 |           </div>
10 |         </DialogTitle>
11 |         <DialogDescription class="text-center pt-2 space-y-2 text-zinc-900 font-medium">
12 |           <Card
13 |             v-for="tool in tools"
14 |             :key="tool.link"
15 |             @click="navigateTo(`${tool.link}`)"
16 |             class="p-3 border-black/5 flex items-center justify-between"
17 |           >
18 |             <div class="flex items-center gap-x-4">
19 |               <div :class="`p-2 w-fit rounded-md ${tool.bgColor}`">
20 |                 <Icon :name="tool.icon" :class="`w-8 h-8 ${tool.color}`" />
21 |               </div>
22 | 
23 |               <div class="font-semibold">{{ tool.label }}</div>
24 |             </div>
25 |             <Icon name="lucide:check" class="w-5 h-5 text-primary" />
26 |           </Card>
27 |         </DialogDescription>
28 |       </DialogHeader>
29 |       <DialogFooter>
30 |         <Button @click="onSubscribe" size="lg" variant="premium" class="w-full">
31 |           Upgrade
32 |           <Icon name="lucide:zap" class="w-4 h-4 ml-2 fill-white" />
33 |         </Button>
34 |       </DialogFooter>
35 |     </DialogContent>
36 |   </Dialog>
37 | </template>
38 | 
39 | <script setup lang="ts">
40 | import { useProModal } from '@/store/useProModal';
41 | const proModal = useProModal();
42 | 
43 | const onSubscribe = async () => {
44 |   const { data } = await useFetch('/api/stripe');
45 |   console.log(data.value?.url);
46 | 
47 |   if (data.value) {
48 |     // @ts-ignore
49 |     window.location.href = data.value.url;
50 |   }
51 | };
52 | </script>
53 | 
54 | <style scoped></style>
55 | 


--------------------------------------------------------------------------------
/components/Navbar.vue:
--------------------------------------------------------------------------------
 1 | <template>
 2 |   <div class="flex items-center p-4">
 3 |     <MobileSidebar />
 4 |     <div class="flex w-full justify-end">
 5 |       <DropdownMenu>
 6 |         <DropdownMenuTrigger as-child>
 7 |           <Button variant="outline">
 8 |             <Icon name="lucide:user-circle" />
 9 |           </Button>
10 |         </DropdownMenuTrigger>
11 |         <DropdownMenuContent align="end" class="w-72 left-[100px]">
12 |           <DropdownMenuLabel>Account Details</DropdownMenuLabel>
13 |           <DropdownMenuSeparator />
14 |           <div class="w-full flex align-items-center p-2 pl-3">
15 |             <Avatar class="mr-2">
16 |               <AvatarImage
17 |                 v-if="user?.user_metadata.avatar_url"
18 |                 :src="user?.user_metadata.avatar_url"
19 |               />
20 |               <AvatarFallback>
21 |                 {{ user?.email?.charAt(0).toUpperCase() }}
22 |                 {{ user?.email?.charAt(1).toUpperCase() }}
23 |               </AvatarFallback>
24 |             </Avatar>
25 | 
26 |             <div>
27 |               <div class="font-bold">{{ user?.user_metadata.full_name }}</div>
28 |               <div class="text-sm">{{ user?.email }}</div>
29 |             </div>
30 |           </div>
31 |           <DropdownMenuSeparator />
32 |           <DropdownMenuItem @click="logout">
33 |             <Icon class="mr-2 h-4 w-4" name="i-heroicons-arrow-left-on-rectangle" />
34 |             <span class="ml-2">Log Out</span>
35 |           </DropdownMenuItem>
36 |         </DropdownMenuContent>
37 |       </DropdownMenu>
38 |     </div>
39 |   </div>
40 | </template>
41 | 
42 | <script setup lang="ts">
43 | const user = useSupabaseUser();
44 | const supabaseClient = useSupabaseClient();
45 | const router = useRouter();
46 | const menu = ref();
47 | const toggle = (event: any) => {
48 |   menu.value.toggle(event);
49 | };
50 | const logout = async () => {
51 |   await supabaseClient.auth.signOut();
52 |   router.push('/auth');
53 | };
54 | </script>
55 | 
56 | <style scoped></style>
57 | 


--------------------------------------------------------------------------------
/server/api/stripe/index.get.ts:
--------------------------------------------------------------------------------
 1 | import { User } from "~/server/types";
 2 | import { PrismaClient } from '@prisma/client';
 3 | const prisma = new PrismaClient();
 4 | const returlUrl = absoluteUrl('/settings');
 5 | export default defineEventHandler(async (event) => {
 6 | 
 7 |     await protectedRoute(event);
 8 |     const user = event.context.user as User
 9 | 
10 |     const userSubscription = await prisma.userSubscription.findUnique({
11 |         where: {
12 |             userId: user.id
13 |         }
14 |     })
15 | 
16 |     // Cancel or Upgrade Subscription
17 |     if (userSubscription && userSubscription.stripeCustomerId) {
18 |         const stripeSession = await stripe.billingPortal.sessions.create({
19 |             customer: userSubscription.stripeCustomerId,
20 |             return_url: returlUrl
21 |         })
22 |         console.log(stripeSession.url);
23 | 
24 |         return {
25 |             url: stripeSession.url
26 |         }
27 | 
28 | 
29 | 
30 | 
31 |     }
32 |     // New Subscription
33 |     const stripeSession = await stripe.checkout.sessions.create({
34 |         success_url: returlUrl,
35 |         cancel_url: returlUrl,
36 |         payment_method_types: ["card"],
37 |         mode: "subscription",
38 |         billing_address_collection: "auto",
39 |         customer_email: user.email,
40 |         line_items: [
41 |             {
42 |                 price_data: {
43 |                     currency: "USD",
44 |                     product_data: {
45 |                         name: "MultiGeniX Pro",
46 |                         description: "Unlimited AI Generations"
47 |                     },
48 |                     unit_amount: 2000, // $20 
49 |                     recurring: {
50 |                         interval: "month"
51 |                     }
52 |                 },
53 |                 quantity: 1,
54 |             },
55 |         ],
56 |         metadata: {
57 |             userId: user.id,
58 |         },
59 |     })
60 |     console.log(stripeSession.url);
61 |     return {
62 |         url: stripeSession.url
63 |     }
64 | })


--------------------------------------------------------------------------------
/public/logo.svg:
--------------------------------------------------------------------------------
1 | <svg id="logo-88" width="40" height="41" viewBox="0 0 40 41" fill="none" xmlns="http://www.w3.org/2000/svg"><path class="ccustom" fill-rule="evenodd" clip-rule="evenodd" d="M13.7146 0.516113C11.4582 0.516113 9.2943 1.41245 7.69881 3.00794L0 10.7067V14.2307C0 16.7204 1.06944 18.9603 2.77401 20.5161C1.06944 22.0719 0 24.3118 0 26.8015V30.3255L7.69881 38.0243C9.2943 39.6198 11.4582 40.5161 13.7146 40.5161C16.2043 40.5161 18.4442 39.4467 20 37.7421C21.5558 39.4467 23.7957 40.5161 26.2854 40.5161C28.5418 40.5161 30.7057 39.6198 32.3012 38.0243L40 30.3255V26.8015C40 24.3118 38.9306 22.0719 37.226 20.5161C38.9306 18.9603 40 16.7204 40 14.2307V10.7067L32.3012 3.00794C30.7057 1.41245 28.5418 0.516113 26.2854 0.516113C23.7957 0.516113 21.5558 1.58555 20 3.29012C18.4442 1.58555 16.2043 0.516113 13.7146 0.516113ZM25.7588 20.5161C25.6629 20.4286 25.5688 20.3387 25.4766 20.2465L20 14.7699L14.5234 20.2465C14.4312 20.3387 14.3371 20.4286 14.2412 20.5161C14.3371 20.6036 14.4312 20.6935 14.5234 20.7857L20 26.2623L25.4766 20.7857C25.5688 20.6935 25.6629 20.6036 25.7588 20.5161ZM22.2222 30.3255L22.2222 32.0085C22.2222 34.2525 24.0414 36.0717 26.2854 36.0717C27.363 36.0717 28.3965 35.6436 29.1585 34.8816L35.5556 28.4845V26.8015C35.5556 24.5575 33.7364 22.7383 31.4924 22.7383C30.4148 22.7383 29.3813 23.1664 28.6193 23.9284L22.2222 30.3255ZM17.7778 30.3255L11.3807 23.9284C10.6187 23.1664 9.58524 22.7383 8.50762 22.7383C6.26359 22.7383 4.44444 24.5575 4.44444 26.8015V28.4845L10.8415 34.8816C11.6035 35.6436 12.637 36.0717 13.7146 36.0717C15.9586 36.0717 17.7778 34.2525 17.7778 32.0085V30.3255ZM17.7778 9.02373V10.7067L11.3807 17.1038C10.6187 17.8658 9.58524 18.2939 8.50762 18.2939C6.26359 18.2939 4.44444 16.4747 4.44444 14.2307V12.5477L10.8415 6.15063C11.6035 5.38864 12.637 4.96056 13.7146 4.96056C15.9586 4.96056 17.7778 6.7797 17.7778 9.02373ZM28.6193 17.1038L22.2222 10.7067L22.2222 9.02373C22.2222 6.7797 24.0414 4.96056 26.2854 4.96056C27.363 4.96056 28.3965 5.38864 29.1585 6.15063L35.5556 12.5477V14.2307C35.5556 16.4747 33.7364 18.2939 31.4924 18.2939C30.4148 18.2939 29.3813 17.8658 28.6193 17.1038Z" fill="#FF630B"></path></svg>


--------------------------------------------------------------------------------
/pages/auth.vue:
--------------------------------------------------------------------------------
 1 | <template>
 2 |   <div class="w-full min-h-screen flex items-center">
 3 |     <div class="max-w-[800px] w-full mx-auto items-center">
 4 |       <Card>
 5 |         <template #title> </template>
 6 |         <CardTitle>
 7 |           <div class="text-center py-4">Welcome to MultiGeniX</div>
 8 |         </CardTitle>
 9 |         <!-- <template #subtitle> Card subtitle </template> -->
10 |         <CardContent>
11 |           <Auth
12 |             :appearance="{
13 |               theme: ThemeSupa,
14 |               style: {
15 |                 button: {
16 |                   borderRadius: borderRadius,
17 |                   borderColor: 'rgba(0,0,0,0.1)',
18 |                 },
19 |                 input: {
20 |                   borderRadius: borderRadius,
21 |                 },
22 |               },
23 |               variables: {
24 |                 default: {
25 |                   colors: {
26 |                     brand: brandColor,
27 |                     brandAccent: `gray`,
28 |                   },
29 |                 },
30 |               },
31 |             }"
32 |             :supabaseClient="supabaseClient"
33 |             :providers="['github', 'google']"
34 |             :socialLayout="socialLayout"
35 |             show-links
36 |             redirect-to="/"
37 |           />
38 |         </CardContent>
39 |       </Card>
40 |     </div>
41 |   </div>
42 | </template>
43 | 
44 | <script setup lang="ts">
45 | // Import predefined theme
46 | import { ThemeSupa } from '@supabase/auth-ui-shared';
47 | import { Auth } from '@nuxtbase/auth-ui-vue';
48 | 
49 | const supabaseClient = useSupabaseClient();
50 | 
51 | const radii = ['5px', '10px', '20px'] as const;
52 | const colors = [
53 |   'rgb(16, 185, 129)',
54 |   'rgb(139, 92, 246)',
55 |   'rgb(217, 70, 239)',
56 |   'rgb(14, 165, 233)',
57 |   'rgb(245, 158, 11)',
58 | ] as const;
59 | 
60 | const socialAlignments = ['horizontal', 'vertical'] as const;
61 | 
62 | const brandColor = ref(colors[0]);
63 | const borderRadius = ref(radii[0]);
64 | const socialLayout = ref(socialAlignments[0]);
65 | definePageMeta({
66 |   layout: 'home',
67 | });
68 | </script>
69 | 
70 | <style scoped></style>
71 | 


--------------------------------------------------------------------------------
/tailwind.config.js:
--------------------------------------------------------------------------------
 1 | /** @type {import('tailwindcss').Config} */
 2 | module.exports = {
 3 |   darkMode: ["class"],
 4 |   
 5 |   theme: {
 6 |     container: {
 7 |       center: true,
 8 |       padding: "2rem",
 9 |       screens: {
10 |         "2xl": "1400px",
11 |       },
12 |     },
13 |     extend: {
14 |       colors: {
15 |         border: "hsl(var(--border))",
16 |         input: "hsl(var(--input))",
17 |         ring: "hsl(var(--ring))",
18 |         background: "hsl(var(--background))",
19 |         foreground: "hsl(var(--foreground))",
20 |         primary: {
21 |           DEFAULT: "hsl(var(--primary))",
22 |           foreground: "hsl(var(--primary-foreground))",
23 |         },
24 |         secondary: {
25 |           DEFAULT: "hsl(var(--secondary))",
26 |           foreground: "hsl(var(--secondary-foreground))",
27 |         },
28 |         destructive: {
29 |           DEFAULT: "hsl(var(--destructive))",
30 |           foreground: "hsl(var(--destructive-foreground))",
31 |         },
32 |         muted: {
33 |           DEFAULT: "hsl(var(--muted))",
34 |           foreground: "hsl(var(--muted-foreground))",
35 |         },
36 |         accent: {
37 |           DEFAULT: "hsl(var(--accent))",
38 |           foreground: "hsl(var(--accent-foreground))",
39 |         },
40 |         popover: {
41 |           DEFAULT: "hsl(var(--popover))",
42 |           foreground: "hsl(var(--popover-foreground))",
43 |         },
44 |         card: {
45 |           DEFAULT: "hsl(var(--card))",
46 |           foreground: "hsl(var(--card-foreground))",
47 |         },
48 |       },
49 |       borderRadius: {
50 |         lg: "var(--radius)",
51 |         md: "calc(var(--radius) - 2px)",
52 |         sm: "calc(var(--radius) - 4px)",
53 |       },
54 |       keyframes: {
55 |         "accordion-down": {
56 |           from: { height: 0 },
57 |           to: { height: "var(--radix-accordion-content-height)" },
58 |         },
59 |         "accordion-up": {
60 |           from: { height: "var(--radix-accordion-content-height)" },
61 |           to: { height: 0 },
62 |         },
63 |       },
64 |       animation: {
65 |         "accordion-down": "accordion-down 0.2s ease-out",
66 |         "accordion-up": "accordion-up 0.2s ease-out",
67 |       },
68 |     },
69 |   },
70 |   plugins: [require("tailwindcss-animate")],
71 | }


--------------------------------------------------------------------------------
/components/Sidebar.vue:
--------------------------------------------------------------------------------
 1 | <template>
 2 |   <div class="space-y-4 py-4 flex flex-col h-full bg-white shadow-sm border-r">
 3 |     <div class="px-3 py-2 flex-1">
 4 |       <NuxtLink to="/dashboard" class="flex items-center pl-3 mb-14">
 5 |         <div class="relative h-8 w-8 mr-4">
 6 |           <img alt="Logo" src="/logo.svg" />
 7 |         </div>
 8 |         <h1 class="text-2xl font-bold">MultiGeniX</h1>
 9 |       </NuxtLink>
10 |       <div class="space-y-1">
11 |         <NuxtLink
12 |           v-for="route in routes"
13 |           :key="route.link"
14 |           :to="route.link"
15 |           class="text-sm group text-primary flex p-3 w-full justify-start font-medium cursor-pointer rounded-lg transition hover:bg-muted"
16 |           :class="{
17 |             'bg-muted': currentRoute.path === route.link,
18 |           }"
19 |         >
20 |           <div class="flex items-center flex-1">
21 |             <Icon :name="route.icon" :class="`h-5 w-5 mr-3 ${route.color}`" />
22 |             {{ route.label }}
23 |           </div>
24 |         </NuxtLink>
25 |       </div>
26 |     </div>
27 |     <!-- Free Counter -->
28 |     <div v-if="!isPro" class="px-3 border-t border-b">
29 |       <div class="bg-white/10 border-0">
30 |         <div class="py-6 px-2">
31 |           <div class="text-center text-sm mb-4 space-y-2">
32 |             <p>{{ user ? user.apiCount : 0 }} / {{ MAX_COUNT }} Free Generations</p>
33 |             <!-- Progress -->
34 |             <Progress v-model="progress" class="w-full" />
35 |           </div>
36 |           <Button class="w-full" variant="premium" @click="proModal.onOpen">
37 |             Upgrade
38 |             <Icon name="lucide:zap" class="w-4 h-4 ml-2 fill-white" />
39 |           </Button>
40 |         </div>
41 |       </div>
42 |     </div>
43 |   </div>
44 | </template>
45 | 
46 | <script setup lang="ts">
47 | import { useProModal } from '@/store/useProModal';
48 | const proModal = useProModal();
49 | const currentRoute = useRoute();
50 | const routes = ref(dashboardRoutes);
51 | const { data: user, pending } = await useFetch('/api/user', {
52 |   key: 'userData',
53 | });
54 | const { data: isPro, pending: isLoading } = await useFetch('/api/stripe/checkStatus');
55 | 
56 | const progress = computed(() => {
57 |   if (user.value) {
58 |     return (user.value.apiCount / MAX_COUNT) * 100;
59 |   }
60 |   return 0;
61 | });
62 | </script>
63 | 
64 | <style scoped></style>
65 | 


--------------------------------------------------------------------------------
/components/ui/sheet/SheetContent.vue:
--------------------------------------------------------------------------------
 1 | <script setup lang="ts">
 2 | import {
 3 |   DialogClose,
 4 |   DialogContent,
 5 |   type DialogContentEmits,
 6 |   type DialogContentProps,
 7 |   DialogOverlay,
 8 |   DialogPortal,
 9 |   useEmitAsProps,
10 | } from 'radix-vue'
11 | import { X } from 'lucide-vue-next'
12 | import { cva } from 'class-variance-authority'
13 | import { cn } from '@/lib/utils'
14 | 
15 | interface SheetContentProps extends DialogContentProps {
16 |   side?: 'left' | 'right' | 'top' | 'bottom'
17 |   class?: string
18 | }
19 | 
20 | const props = defineProps<SheetContentProps>()
21 | 
22 | const emits = defineEmits<DialogContentEmits>()
23 | 
24 | const emitsAsProps = useEmitAsProps(emits)
25 | 
26 | const sheetVariants = cva(
27 |   'fixed z-50 gap-4 bg-background p-6 shadow-lg transition ease-in-out data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:duration-300 data-[state=open]:duration-500',
28 |   {
29 |     variants: {
30 |       side: {
31 |         top: 'inset-x-0 top-0 border-b border-border data-[state=closed]:slide-out-to-top data-[state=open]:slide-in-from-top',
32 |         bottom:
33 |           'inset-x-0 bottom-0 border-t border-border data-[state=closed]:slide-out-to-bottom data-[state=open]:slide-in-from-bottom',
34 |         left: 'inset-y-0 left-0 h-full w-3/4 border-r border-border data-[state=closed]:slide-out-to-left data-[state=open]:slide-in-from-left sm:max-w-sm',
35 |         right:
36 |           'inset-y-0 right-0 h-full w-3/4  border-l border-border data-[state=closed]:slide-out-to-right data-[state=open]:slide-in-from-right sm:max-w-sm',
37 |       },
38 |     },
39 |     defaultVariants: {
40 |       side: 'right',
41 |     },
42 |   },
43 | )
44 | </script>
45 | 
46 | <template>
47 |   <DialogPortal>
48 |     <DialogOverlay
49 |       class="fixed inset-0 z-50 bg-background/80 backdrop-blur-sm data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0"
50 |     />
51 |     <DialogContent
52 |       :class="cn(sheetVariants({ side: props.side }), props.class)"
53 |       v-bind="{ ...props, ...emitsAsProps }"
54 |     >
55 |       <slot />
56 | 
57 |       <DialogClose
58 |         class="absolute top-4 right-4 p-0.5 transition-colors rounded-md hover:bg-secondary"
59 |       >
60 |         <X class="w-4 h-4 text-muted-foreground" />
61 |       </DialogClose>
62 |     </DialogContent>
63 |   </DialogPortal>
64 | </template>
65 | 


--------------------------------------------------------------------------------
/server/api/stripe/webhook.ts:
--------------------------------------------------------------------------------
 1 | import { PrismaClient } from '@prisma/client';
 2 | import Stripe from "stripe"
 3 | 
 4 | const prisma = new PrismaClient();
 5 | const STRIPE_WEBHOOK_SECRET =
 6 |     useRuntimeConfig().stripeWebhookSecret;
 7 | 
 8 | export default defineEventHandler(async (event) => {
 9 |     const signature = getHeader(event, 'Stripe-Signature') as string;
10 |     const body = await readRawBody(event);
11 | 
12 |     // Verify the webhook signature
13 |     let stripeEvent
14 |     try {
15 |         // @ts-ignore
16 |         stripeEvent = stripe.webhooks.constructEvent(body, signature, STRIPE_WEBHOOK_SECRET);
17 |     } catch (error) {
18 |         console.error(error);
19 |         throw createError({
20 |             statusCode: 400,
21 |             statusMessage: 'Invalid signature',
22 |         });
23 |     }
24 | 
25 |     const session = stripeEvent.data.object as Stripe.Checkout.Session
26 | 
27 |     // 
28 |     if (stripeEvent.type === "checkout.session.completed") {
29 | 
30 |         const subscription = await stripe.subscriptions.retrieve(session.subscription as string);
31 | 
32 |         if (!session?.metadata?.userId) {
33 |             throw createError({
34 |                 statusCode: 400,
35 |                 statusMessage: 'User id is required',
36 |             });
37 |         }
38 | 
39 |         await prisma.userSubscription.create({
40 |             data: {
41 |                 userId: session?.metadata?.userId,
42 |                 stripeSubscriptionId: subscription.id,
43 |                 stripeCustomerId: subscription.customer as string,
44 |                 stripePriceId: subscription.items.data[0].price.id,
45 |                 stripeCurrentPeriodEnd: new Date(
46 |                     subscription.current_period_end * 1000
47 |                 ),
48 |             }
49 |         })
50 | 
51 |     }
52 | 
53 |     // If they upgraded or cancelled
54 |     if (stripeEvent.type === "invoice.payment_succeeded") {
55 |         const subscription = await stripe.subscriptions.retrieve(session.subscription as string);
56 |         await prisma.userSubscription.update({
57 |             where: {
58 |                 stripeSubscriptionId: subscription.id,
59 |             },
60 |             data: {
61 |                 stripePriceId: subscription.items.data[0].price.id,
62 |                 stripeCurrentPeriodEnd: new Date(
63 |                     subscription.current_period_end * 1000
64 |                 ),
65 |             },
66 |         })
67 |     }
68 | 
69 |     return 200;
70 | });
71 | 
72 | 


--------------------------------------------------------------------------------
/pages/music.vue:
--------------------------------------------------------------------------------
 1 | <template>
 2 |   <div>
 3 |     <Heading
 4 |       title="Music Generation"
 5 |       description="Turn your prompt into music."
 6 |       icon="lucide:music"
 7 |       iconColor="text-emerald-500"
 8 |       bgColor="bg-emerald-500/10"
 9 |     />
10 |     <div class="px-4 lg:px-8">
11 |       <div>
12 |         <form
13 |           @submit.prevent="submitPrompt"
14 |           class="rounded-lg border w-full p-4 px-3 md:px-6 focus-within:shadow-sm grid grid-cols-12 gap-2"
15 |         >
16 |           <div class="col-span-12 lg:col-span-10">
17 |             <div class="m-0 p-0">
18 |               <input
19 |                 v-model="prompt"
20 |                 placeholder="A picture of a horse in Swiss alps"
21 |                 class="border-0 outline-none focus-visible:ring-0 focus-visible:ring-transparent w-full"
22 |               />
23 |             </div>
24 |           </div>
25 |           <Button
26 |             class="col-span-12 lg:col-span-2 w-full shadow-none bg-gray-950 text-white"
27 |             type="submit"
28 |             :disabled="!prompt || isLoading"
29 |           >
30 |             Generate
31 |           </Button>
32 |         </form>
33 |       </div>
34 |       <div class="space-y-4 mt-4">
35 |         <div
36 |           v-if="isLoading"
37 |           class="p-8 rounded-lg w-full flex items-center justify-center bg-muted"
38 |         >
39 |           <Loader />
40 |         </div>
41 | 
42 |         <Empty v-if="!music && !isLoading" label="No music generated." />
43 | 
44 |         <audio v-if="music" controls class="w-full mt-8">
45 |           <source :src="music" />
46 |         </audio>
47 |       </div>
48 |     </div>
49 |   </div>
50 | </template>
51 | 
52 | <script setup lang="ts">
53 | import { AudioResponse } from '~/types';
54 | import { useProModal } from '@/store/useProModal';
55 | const proModal = useProModal();
56 | const prompt = ref('');
57 | const isLoading = ref(false);
58 | const music = ref<string>();
59 | const submitPrompt = async () => {
60 |   isLoading.value = true;
61 |   music.value = undefined;
62 |   const { data, error } = await useFetch<AudioResponse>('/api/music', {
63 |     method: 'POST',
64 |     body: {
65 |       prompt: prompt.value,
66 |     },
67 |   });
68 |   if (error.value) {
69 |     console.log(error);
70 |     if (error.value.statusCode === 403) {
71 |       proModal.onOpen();
72 |     }
73 |   }
74 |   if (data.value) {
75 |     music.value = data.value.audio;
76 |     await refreshNuxtData('userData');
77 |   }
78 |   prompt.value = '';
79 |   isLoading.value = false;
80 | };
81 | </script>
82 | 


--------------------------------------------------------------------------------
/pages/video.vue:
--------------------------------------------------------------------------------
 1 | <template>
 2 |   <div>
 3 |     <Heading
 4 |       title="Video Generation"
 5 |       description="Turn your prompt into video."
 6 |       icon="lucide:file-audio"
 7 |       iconColor="text-orange-700"
 8 |       bgColor="bg-orange-700/10"
 9 |     />
10 |     <div class="px-4 lg:px-8">
11 |       <div>
12 |         <form
13 |           @submit.prevent="submitPrompt"
14 |           class="rounded-lg border w-full p-4 px-3 md:px-6 focus-within:shadow-sm grid grid-cols-12 gap-2"
15 |         >
16 |           <div class="col-span-12 lg:col-span-10">
17 |             <div class="m-0 p-0">
18 |               <input
19 |                 v-model="prompt"
20 |                 placeholder="An astronaut riding a horse"
21 |                 class="border-0 outline-none focus-visible:ring-0 focus-visible:ring-transparent w-full"
22 |               />
23 |               <!-- An astronaut riding a horse -->
24 |               <!-- Clown fish swimming in a coral reef -->
25 |             </div>
26 |           </div>
27 |           <Button
28 |             class="col-span-12 lg:col-span-2 w-full shadow-none bg-gray-950 text-white"
29 |             type="submit"
30 |             :disabled="!prompt || isLoading"
31 |           >
32 |             Generate
33 |           </Button>
34 |         </form>
35 |       </div>
36 |       <div class="space-y-4 mt-4">
37 |         <div
38 |           v-if="isLoading"
39 |           class="p-8 rounded-lg w-full flex items-center justify-center bg-muted"
40 |         >
41 |           <Loader />
42 |         </div>
43 | 
44 |         <Empty v-if="!video && !isLoading" label="No video files generated." />
45 | 
46 |         <video
47 |           v-if="video"
48 |           controls
49 |           class="w-full aspect-video mt-8 rounded-lg border bg-black"
50 |         >
51 |           <source :src="video" />
52 |         </video>
53 |       </div>
54 |     </div>
55 |   </div>
56 | </template>
57 | 
58 | <script setup lang="ts">
59 | import { useProModal } from '@/store/useProModal';
60 | const proModal = useProModal();
61 | const prompt = ref('');
62 | const isLoading = ref(false);
63 | const video = ref<string>();
64 | const submitPrompt = async () => {
65 |   isLoading.value = true;
66 |   video.value = undefined;
67 |   const { data, error } = await useFetch<string[]>('/api/video', {
68 |     method: 'POST',
69 |     body: {
70 |       prompt: prompt.value,
71 |     },
72 |   });
73 |   if (error.value) {
74 |     console.log(error);
75 |     if (error.value.statusCode === 403) {
76 |       proModal.onOpen();
77 |     }
78 |   }
79 |   if (data.value) {
80 |     video.value = data.value[0];
81 |     await refreshNuxtData('userData');
82 |   }
83 |   prompt.value = '';
84 |   isLoading.value = false;
85 | };
86 | </script>
87 | 


--------------------------------------------------------------------------------
/server/utils/index.ts:
--------------------------------------------------------------------------------
  1 | import { H3Event } from 'h3';
  2 | import { serverSupabaseUser } from '#supabase/server';
  3 | import { PrismaClient } from '@prisma/client';
  4 | import Stripe from 'stripe';
  5 | 
  6 | const prisma = new PrismaClient();
  7 | export const MAX_COUNT = 5
  8 | export const protectedRoute = async (event: H3Event) => {
  9 |     const user = await serverSupabaseUser(event);
 10 | 
 11 |     if (!user) {
 12 |         throw createError({
 13 |             statusCode: 401,
 14 |             statusMessage: 'Unauthorized',
 15 |         });
 16 |     }
 17 |     event.context.user = user
 18 | 
 19 | };
 20 | 
 21 | export const incrementApiLimit = async (userId: string) => {
 22 | 
 23 |     const userApiLimit = await prisma.userApiLimit.findUnique({
 24 |         where: { userId: userId },
 25 |     });
 26 | 
 27 |     if (userApiLimit) {
 28 |         await prisma.userApiLimit.update({
 29 |             where: { userId: userId },
 30 |             data: { count: userApiLimit.count + 1 },
 31 |         });
 32 |     } else {
 33 |         await prisma.userApiLimit.create({
 34 |             data: { userId: userId, count: 1 },
 35 |         });
 36 |     }
 37 | 
 38 | 
 39 | }
 40 | 
 41 | export const checkApiLimit = async (userId: string) => {
 42 | 
 43 |     const userApiLimit = await prisma.userApiLimit.findUnique({
 44 |         where: { userId: userId },
 45 |     });
 46 | 
 47 |     if (!userApiLimit || userApiLimit.count < MAX_COUNT) {
 48 |         return true;
 49 |     } else {
 50 |         return false;
 51 |     }
 52 | };
 53 | 
 54 | export const getApiLimitCount = async (userId: string) => {
 55 | 
 56 | 
 57 |     const userApiLimit = await prisma.userApiLimit.findUnique({
 58 |         where: {
 59 |             userId
 60 |         }
 61 |     });
 62 | 
 63 |     if (!userApiLimit) {
 64 |         return 0;
 65 |     }
 66 | 
 67 |     return userApiLimit.count;
 68 | };
 69 | 
 70 | const config = useRuntimeConfig();
 71 | export const stripe = new Stripe(config.stripeSecret, {
 72 |     apiVersion: '2023-08-16',
 73 |     typescript: true
 74 | });
 75 | 
 76 | export function absoluteUrl(path: string) {
 77 |     return `${config.appUrl}${path}`
 78 | }
 79 | const DAY_IN_MS = 86_400_000;
 80 | 
 81 | export const checkSubscription = async (userId: string) => {
 82 |     const userSubscription = await prisma.userSubscription.findUnique({
 83 |         where: {
 84 |             userId
 85 |         },
 86 |         select: {
 87 |             stripeSubscriptionId: true,
 88 |             stripeCurrentPeriodEnd: true,
 89 |             stripeCustomerId: true,
 90 |             stripePriceId: true
 91 |         }
 92 |     })
 93 | 
 94 |     if (!userSubscription) {
 95 |         return false;
 96 |     }
 97 | 
 98 |     const isValid =
 99 |         userSubscription.stripePriceId &&
100 |         userSubscription.stripeCurrentPeriodEnd?.getTime()! + DAY_IN_MS > Date.now()
101 | 
102 | 
103 |     // For returning the boolean value 
104 |     return !!isValid;
105 | }


--------------------------------------------------------------------------------
/public/logo1.svg:
--------------------------------------------------------------------------------
1 | <svg xmlns="http://www.w3.org/2000/svg" width="158" height="48" fill="#111827">
2 |   <path
3 |     d="M55.42 18.178v-2.491h10.956v2.491H62.3v13.875h-2.834V18.178H55.42Zm18.097 4.577a7.526 7.526 0 0 0-1.33-.116c-1.82 0-2.89 1.188-2.89 3.592v5.793h-2.69v-11.47h2.631v1.622h.058c.52-.985 1.677-2 3.21-2 .433 0 .722.03 1.011.059v2.52Zm12.866 9.269h-2.602v-1.448h-.058c-.78.985-2.024 1.883-3.932 1.883-2.573 0-5.493-2.057-5.493-6.17 0-3.65 2.573-6.083 5.695-6.083 1.908 0 3.065 1.013 3.76 1.911h.057v-1.564h2.602v11.471h-.029Zm-5.898-1.94c1.763 0 3.411-1.536 3.411-3.738 0-2.317-1.503-3.852-3.382-3.852-2.37 0-3.499 1.912-3.499 3.795 0 1.911 1.1 3.795 3.47 3.795Zm9.021-9.531h2.66v1.449h.057c.896-1.304 2.226-1.825 3.498-1.825 2.371 0 4.453 1.564 4.453 5.243v6.604h-2.69v-6.46c0-1.97-.924-3.012-2.457-3.012-1.677 0-2.833 1.188-2.833 3.418v6.083h-2.689l.001-11.5Zm18.792 2.955c-.116-.84-.752-1.39-1.533-1.39-.925 0-1.445.579-1.445 1.216 0 .695.347 1.188 2.341 1.854 2.458.782 3.325 2.057 3.325 3.679 0 2.114-1.59 3.592-4.221 3.592-2.746 0-4.105-1.507-4.308-3.65h2.487c.115.956.694 1.68 1.879 1.68 1.012 0 1.59-.637 1.59-1.42 0-.868-.491-1.419-2.399-2.056-2.14-.695-3.239-1.767-3.239-3.563 0-1.883 1.475-3.273 3.903-3.273 2.458 0 3.759 1.448 4.048 3.33l-2.428.001Zm5.03-8.227h2.978v2.723h-2.978v-2.723Zm.145 5.272h2.688v11.5h-2.688v-11.5Zm10.986 2.955c-.116-.84-.752-1.39-1.533-1.39-.925 0-1.445.579-1.445 1.216 0 .695.347 1.188 2.342 1.854 2.457.782 3.324 2.057 3.324 3.679 0 2.114-1.59 3.592-4.221 3.592-2.746 0-4.105-1.507-4.307-3.65h2.486c.116.956.694 1.68 1.879 1.68 1.012 0 1.59-.637 1.59-1.42 0-.868-.491-1.419-2.399-2.056-2.14-.695-3.238-1.767-3.238-3.563 0-1.883 1.474-3.273 3.903-3.273 2.457 0 3.758 1.448 4.047 3.33l-2.428.001Zm3.845-2.955h1.445v-3.678h2.689v3.678h2.862v2.26h-2.891v5.127c0 1.564.492 1.999 1.59 1.999.463 0 .983-.087 1.388-.203v2.172c-.607.174-1.359.261-2.024.261-2.862 0-3.614-1.738-3.614-4.084v-5.272h-1.445v-2.26Zm14.311-.376c3.585 0 6.129 2.636 6.129 6.112 0 3.389-2.573 6.17-6.129 6.17-3.498 0-6.129-2.694-6.129-6.17 0-3.563 2.66-6.112 6.129-6.112Zm0 9.877c2.024 0 3.411-1.622 3.411-3.765 0-2.028-1.301-3.737-3.411-3.737-2.053 0-3.412 1.593-3.412 3.737 0 2.201 1.562 3.765 3.412 3.765Zm14.052-7.415c-1.822 0-2.891 1.188-2.891 3.592v5.793h-2.689v-11.47h2.631v1.622h.058c.52-.985 1.676-2 3.209-2 .433 0 .722.03 1.012.059v2.52a7.525 7.525 0 0 0-1.33-.116ZM20.812 37.731a1.39 1.39 0 0 1-1.388-1.39V11.37a1.389 1.389 0 0 1 2.369-.982c.26.26.406.614.406.982v24.97c0 .753-.636 1.391-1.387 1.391ZM15.03 25.247H8.38a1.39 1.39 0 0 1-1.387-1.39c0-.783.607-1.391 1.388-1.391h6.65a1.39 1.39 0 1 1 0 2.78v.001Zm18.243 0h-6.678a1.39 1.39 0 0 1-1.388-1.39c0-.783.607-1.391 1.388-1.391h6.65a1.39 1.39 0 0 1 1.387 1.39c0 .782-.607 1.391-1.359 1.391Z" />
4 |   <path
5 |     d="M20.816 44.712C9.338 44.712 0 35.356 0 23.856 0 12.356 9.338 3 20.816 3s20.816 9.356 20.816 20.856c0 11.5-9.338 20.856-20.816 20.856Zm0-38.931c-9.945 0-18.04 8.11-18.04 18.075s8.095 18.075 18.04 18.075c9.946 0 18.04-8.11 18.04-18.075S30.762 5.781 20.816 5.781Z" />
6 | </svg>


--------------------------------------------------------------------------------
/utils/index.ts:
--------------------------------------------------------------------------------
  1 | export const dashboardRoutes = [
  2 |     {
  3 |         label: 'Dashboard',
  4 |         icon: 'lucide:layout-dashboard',
  5 |         link: '/dashboard',
  6 |         color: 'text-sky-500',
  7 |     },
  8 |     {
  9 |         label: 'Conversation',
 10 |         icon: 'lucide:message-square',
 11 |         link: '/conversation',
 12 |         color: 'text-violet-500',
 13 |     },
 14 |     {
 15 |         label: 'Image Generation',
 16 |         icon: 'lucide:image',
 17 |         color: 'text-pink-700',
 18 |         link: '/image',
 19 |     },
 20 |     {
 21 |         label: 'Video Generation',
 22 |         icon: 'lucide:video',
 23 |         color: 'text-orange-700',
 24 |         link: '/video',
 25 |     },
 26 |     {
 27 |         label: 'Music Generation',
 28 |         icon: 'lucide:music',
 29 |         color: 'text-emerald-500',
 30 |         link: '/music',
 31 |     },
 32 |     {
 33 |         label: 'Code Generation',
 34 |         icon: 'lucide:code',
 35 |         color: 'text-green-700',
 36 |         link: '/code',
 37 |     },
 38 |     {
 39 |         label: 'Settings',
 40 |         icon: 'lucide:settings',
 41 |         link: '/settings',
 42 |     },
 43 | ]
 44 | export const tools = [
 45 | 
 46 |     {
 47 |         label: 'Conversation',
 48 |         icon: 'lucide:message-square',
 49 |         link: '/conversation',
 50 |         color: 'text-violet-500',
 51 |         bgColor: "bg-violet-500/10",
 52 |     },
 53 |     {
 54 |         label: 'Image Generation',
 55 |         icon: 'lucide:image',
 56 |         color: 'text-pink-700',
 57 |         link: '/image',
 58 |         bgColor: "bg-pink-700/10",
 59 |     },
 60 |     {
 61 |         label: 'Video Generation',
 62 |         icon: 'lucide:video',
 63 |         color: 'text-orange-700',
 64 |         link: '/video',
 65 |         bgColor: "bg-orange-700/10",
 66 |     },
 67 |     {
 68 |         label: 'Music Generation',
 69 |         icon: 'lucide:music',
 70 |         color: 'text-emerald-500',
 71 |         link: '/music',
 72 |         bgColor: "bg-emerald-500/10",
 73 |     },
 74 |     {
 75 |         label: 'Code Generation',
 76 |         icon: 'lucide:code',
 77 |         color: 'text-green-700',
 78 |         link: '/code',
 79 |         bgColor: "bg-green-700/10",
 80 |     },
 81 | 
 82 | ]
 83 | export const resolutionOptions = [
 84 |     {
 85 |         value: "256x256",
 86 |         text: "256x256",
 87 |     },
 88 |     {
 89 |         value: "512x512",
 90 |         text: "512x512",
 91 |     },
 92 |     {
 93 |         value: "1024x1024",
 94 |         text: "1024x1024",
 95 |     },
 96 | ];
 97 | 
 98 | export const amountOptions = [
 99 |     {
100 |         value: "1",
101 |         text: "1 Photo"
102 |     },
103 |     {
104 |         value: "2",
105 |         text: "2 Photos"
106 |     },
107 |     {
108 |         value: "3",
109 |         text: "3 Photos"
110 |     },
111 |     {
112 |         value: "4",
113 |         text: "4 Photos"
114 |     },
115 |     {
116 |         value: "5",
117 |         text: "5 Photos"
118 |     }
119 | ];
120 | 
121 | export const MAX_COUNT = 5
122 | 


--------------------------------------------------------------------------------
/pages/conversation.vue:
--------------------------------------------------------------------------------
  1 | <template>
  2 |   <div>
  3 |     <Heading
  4 |       title="Conversation"
  5 |       description="Our most advanced conversation model."
  6 |       icon="lucide:message-square"
  7 |       iconColor="text-violet-500"
  8 |       bgColor="bg-violet-500/10"
  9 |     />
 10 |     <div class="px-4 lg:px-8">
 11 |       <div>
 12 |         <form
 13 |           @submit.prevent="submitPrompt"
 14 |           class="rounded-lg border w-full p-4 px-3 md:px-6 focus-within:shadow-sm grid grid-cols-12 gap-2"
 15 |         >
 16 |           <div class="col-span-12 lg:col-span-10">
 17 |             <div class="m-0 p-0">
 18 |               <input
 19 |                 v-model="prompt"
 20 |                 placeholder="How do I calculate the radius of a circle?"
 21 |                 class="border-0 outline-none focus-visible:ring-0 focus-visible:ring-transparent w-full"
 22 |               />
 23 |             </div>
 24 |           </div>
 25 |           <Button
 26 |             class="col-span-12 lg:col-span-2 w-full"
 27 |             type="submit"
 28 |             :disabled="!prompt || isLoading"
 29 |           >
 30 |             Generate
 31 |           </Button>
 32 |         </form>
 33 |       </div>
 34 |       <div class="space-y-4 mt-4">
 35 |         <div
 36 |           v-if="isLoading"
 37 |           class="p-8 rounded-lg w-full flex items-center justify-center bg-muted"
 38 |         >
 39 |           <Loader />
 40 |         </div>
 41 | 
 42 |         <Empty
 43 |           v-if="messages.length === 0 && !isLoading"
 44 |           label="No conversation started."
 45 |         />
 46 | 
 47 |         <div class="flex flex-col-reverse gap-y-4">
 48 |           <div
 49 |             v-for="message in messages"
 50 |             :key="message.content"
 51 |             :class="`p-8 w-full flex
 52 |                items-start gap-x-8 rounded-lg ${
 53 |                  message.role === 'user'
 54 |                    ? 'bg-white border border-black/10'
 55 |                    : 'bg-slate-200'
 56 |                }`"
 57 |           >
 58 |             <UserAvatar v-if="message.role === 'user'" />
 59 |             <BotAvatar v-if="message.role === 'assistant'" />
 60 | 
 61 |             <p class="text-sm">{{ message.content }}</p>
 62 |           </div>
 63 |         </div>
 64 |       </div>
 65 |     </div>
 66 |   </div>
 67 | </template>
 68 | 
 69 | <script setup lang="ts">
 70 | import { ChatCompletionRequestMessage } from '~/types';
 71 | import { useProModal } from '@/store/useProModal';
 72 | const proModal = useProModal();
 73 | 
 74 | const prompt = ref('');
 75 | const isLoading = ref(false);
 76 | const messages = ref<ChatCompletionRequestMessage[]>([]);
 77 | const submitPrompt = async () => {
 78 |   isLoading.value = true;
 79 |   const userMessage: ChatCompletionRequestMessage = {
 80 |     role: 'user',
 81 |     content: prompt.value,
 82 |   };
 83 |   const newMessages = [...messages.value, userMessage];
 84 |   const { data, error } = await useFetch('/api/conversation', {
 85 |     method: 'POST',
 86 |     body: {
 87 |       messages: newMessages,
 88 |     },
 89 |   });
 90 |   if (error.value) {
 91 |     console.log(error.value.statusMessage);
 92 |     if (error.value.statusCode === 403) {
 93 |       proModal.onOpen();
 94 |     }
 95 |   }
 96 |   if (data.value) {
 97 |     messages.value = [
 98 |       ...messages.value,
 99 |       userMessage,
100 |       {
101 |         role: 'assistant',
102 |         content: data.value.content as string,
103 |       },
104 |     ];
105 |     await refreshNuxtData('userData');
106 |   }
107 |   prompt.value = '';
108 |   isLoading.value = false;
109 | };
110 | </script>
111 | 
112 | <style scoped></style>
113 | 


--------------------------------------------------------------------------------
/pages/code.vue:
--------------------------------------------------------------------------------
  1 | <template>
  2 |   <div>
  3 |     <Heading
  4 |       title="Code Generation"
  5 |       description="Generate code using descriptive text."
  6 |       icon="lucide:code"
  7 |       iconColor="text-green-700"
  8 |       bgColor="bg-green-700/10"
  9 |     />
 10 |     <div class="px-4 lg:px-8">
 11 |       <div>
 12 |         <form
 13 |           @submit.prevent="submitPrompt"
 14 |           class="rounded-lg border w-full p-4 px-3 md:px-6 focus-within:shadow-sm grid grid-cols-12 gap-2"
 15 |         >
 16 |           <div class="col-span-12 lg:col-span-10">
 17 |             <div class="m-0 p-0">
 18 |               <input
 19 |                 v-model="prompt"
 20 |                 placeholder="Simple toggle button using react headlessui/vue?"
 21 |                 class="border-0 outline-none focus-visible:ring-0 focus-visible:ring-transparent w-full"
 22 |               />
 23 |             </div>
 24 |           </div>
 25 |           <Button
 26 |             class="col-span-12 lg:col-span-2 w-full shadow-none bg-gray-950 text-white"
 27 |             type="submit"
 28 |             :disabled="!prompt || isLoading"
 29 |           >
 30 |             Generate
 31 |           </Button>
 32 |         </form>
 33 |       </div>
 34 |       <div class="space-y-4 mt-4">
 35 |         <div
 36 |           v-if="isLoading"
 37 |           class="p-8 rounded-lg w-full flex items-center justify-center bg-muted"
 38 |         >
 39 |           <Loader />
 40 |         </div>
 41 | 
 42 |         <Empty
 43 |           v-if="messages.length === 0 && !isLoading"
 44 |           label="No conversation started."
 45 |         />
 46 | 
 47 |         <div class="flex flex-col-reverse gap-y-4">
 48 |           <div
 49 |             v-for="message in messages"
 50 |             :key="message.content"
 51 |             :class="`p-8 w-full flex
 52 |                items-start gap-x-8 rounded-lg ${
 53 |                  message.role === 'user'
 54 |                    ? 'bg-white border border-black/10'
 55 |                    : 'bg-slate-200'
 56 |                }`"
 57 |           >
 58 |             <UserAvatar v-if="message.role === 'user'" />
 59 |             <BotAvatar v-if="message.role === 'assistant'" />
 60 |             <div
 61 |               v-if="message.content"
 62 |               class="prose-pre:overflow-auto prose-pre:w-full prose-pre:my-2 prose-pre:bg-black/10 prose-pre:p-2 prose-pre:rounded-lg prose-code:bg-black/10 prose-code:rounded-lg prose-code:p-1 text-sm overflow-hidden leading-7"
 63 |               v-html="$mdRenderer.render(message.content)"
 64 |             />
 65 |           </div>
 66 |         </div>
 67 |       </div>
 68 |     </div>
 69 |   </div>
 70 | </template>
 71 | 
 72 | <script setup lang="ts">
 73 | import { ChatCompletionRequestMessage } from '~/types';
 74 | import { useProModal } from '@/store/useProModal';
 75 | const proModal = useProModal();
 76 | const prompt = ref('');
 77 | const isLoading = ref(false);
 78 | const messages = ref<ChatCompletionRequestMessage[]>([]);
 79 | const { $mdRenderer } = useNuxtApp();
 80 | const submitPrompt = async () => {
 81 |   isLoading.value = true;
 82 |   const userMessage: ChatCompletionRequestMessage = {
 83 |     role: 'user',
 84 |     content: prompt.value,
 85 |   };
 86 |   const newMessages = [...messages.value, userMessage];
 87 |   const { data, error } = await useFetch('/api/code', {
 88 |     method: 'POST',
 89 |     body: {
 90 |       messages: newMessages,
 91 |     },
 92 |   });
 93 |   if (error.value) {
 94 |     console.log(error);
 95 |     if (error.value.statusCode === 403) {
 96 |       proModal.onOpen();
 97 |     }
 98 |   }
 99 |   if (data.value) {
100 |     messages.value = [
101 |       ...messages.value,
102 |       userMessage,
103 |       {
104 |         role: 'assistant',
105 |         content: data.value.content as string,
106 |       },
107 |     ];
108 |     await refreshNuxtData('userData');
109 |   }
110 |   prompt.value = '';
111 |   isLoading.value = false;
112 | };
113 | </script>
114 | 
115 | <style scoped></style>
116 | 


--------------------------------------------------------------------------------
/public/logo4.svg:
--------------------------------------------------------------------------------
1 | <svg xmlns="http://www.w3.org/2000/svg" width="158" height="48" fill="none">
2 |   <path fill="#111827" fill-rule="evenodd"
3 |     d="M24.005 6.799c13.842-2.43 17.83.244 20.29 14.16 2.463 13.913-.042 17.73-14.206 20.219-14.165 2.487-17.827-.24-20.29-14.158C7.335 13.1 10.164 9.232 24.005 6.799h-.001Zm1.595 6.148c-2.65.466-4.566 1.678-5.668 3.44-.865 1.384-1.141 3.005-.891 4.318.552 2.895 2.95 4.717 7.809 5.085l.38.027.377.03.358.034c1.694.169 2.778.456 3.376.825.4.245.56.513.674 1.162.218 1.232-.745 2.348-3.28 2.793-1.677.295-3.467-.06-5.423-1.123a2.123 2.123 0 0 0-2.873.843 2.103 2.103 0 0 0 .846 2.862c2.76 1.5 5.509 2.044 8.186 1.574 4.673-.821 7.375-3.949 6.715-7.682-.628-3.544-3.136-5.126-8.671-5.528l-.365-.026c-1.782-.136-2.898-.481-3.487-.92-.291-.218-.399-.41-.463-.742-.055-.296.037-.839.325-1.3.443-.706 1.305-1.252 2.811-1.516 1.335-.235 2.625-.01 3.947.706a2.121 2.121 0 0 0 3.117-1.632 2.103 2.103 0 0 0-1.094-2.075c-2.149-1.164-4.41-1.559-6.706-1.155Z"
4 |     clip-rule="evenodd" />
5 |   <path fill="#111827"
6 |     d="M59.792 31.34c3.154 0 5.364-1.654 5.364-4.435v-.042c0-2.463-1.63-3.588-4.807-4.351-2.897-.679-3.583-1.189-3.583-2.335v-.043c0-.975.9-1.76 2.447-1.76 1.18 0 2.295.382 3.454 1.125.215.127.43.191.687.191.686 0 1.244-.531 1.244-1.21 0-.51-.279-.871-.58-1.041-1.35-.891-2.875-1.38-4.764-1.38-2.981 0-5.127 1.762-5.127 4.31v.042c0 2.737 1.802 3.671 5 4.436 2.788.636 3.389 1.21 3.389 2.27v.043c0 1.102-1.03 1.867-2.66 1.867-1.631 0-2.961-.55-4.206-1.527-.171-.127-.407-.234-.772-.234-.686 0-1.245.53-1.245 1.21 0 .424.214.786.516.997a9.418 9.418 0 0 0 5.643 1.867Zm11.398.023c1.738 0 2.918-.722 3.69-1.635v.424c0 .574.516 1.083 1.267 1.083.708 0 1.265-.531 1.265-1.231v-5.518c0-1.465-.386-2.653-1.222-3.46-.794-.806-2.06-1.252-3.755-1.252-1.48 0-2.575.255-3.648.659a1.125 1.125 0 0 0-.708 1.018c0 .594.493 1.06 1.095 1.06a1.47 1.47 0 0 0 .406-.063c.708-.276 1.525-.445 2.511-.445 1.824 0 2.812.848 2.812 2.441v.275a9.563 9.563 0 0 0-3.049-.467c-2.766 0-4.676 1.189-4.676 3.608v.043c0 2.25 1.888 3.46 4.012 3.46Zm.73-1.867c-1.246 0-2.21-.617-2.21-1.7v-.042c0-1.168.986-1.867 2.66-1.867 1.03 0 1.91.19 2.574.445v.765c0 1.42-1.308 2.397-3.025 2.397v.002ZM84.84 31.34c.708 0 1.18-.467 1.48-1.126l3.777-8.573c.093-.192.144-.402.15-.616 0-.7-.557-1.23-1.265-1.23-.687 0-1.03.445-1.223.89l-2.961 7.47-2.919-7.426c-.214-.532-.58-.934-1.287-.934-.708 0-1.287.594-1.287 1.23 0 .233.086.446.15.637l3.777 8.552c.3.68.772 1.125 1.479 1.125h.13Zm12.214 0c.708 0 1.18-.467 1.48-1.126l3.777-8.573c.093-.192.144-.402.15-.616 0-.7-.557-1.23-1.265-1.23-.687 0-1.03.445-1.223.89l-2.962 7.47-2.918-7.426c-.215-.532-.58-.934-1.287-.934-.708 0-1.287.594-1.287 1.23 0 .233.086.446.15.637l3.775 8.552c.302.68.774 1.125 1.482 1.125h.128Zm9.553 3.247c1.825 0 2.854-.849 3.82-3.14l4.141-9.828c.043-.127.107-.402.107-.615 0-.68-.558-1.21-1.244-1.21-.666 0-1.031.446-1.245.976l-2.832 7.45-3.047-7.45c-.236-.594-.601-.975-1.266-.975-.729 0-1.287.53-1.287 1.252 0 .169.063.424.15.615l4.205 9.296-.086.233c-.429.87-.836 1.19-1.609 1.19-.365 0-.601-.065-.901-.15-.129-.042-.257-.085-.472-.085a1.046 1.046 0 0 0-.978.655 1.03 1.03 0 0 0-.073.407c0 .615.429.934.815 1.061.536.211 1.073.318 1.802.318Zm17.771-3.205c2.425 0 4.034-.765 5.451-1.994a1.25 1.25 0 0 0 .429-.934c0-.658-.579-1.21-1.245-1.21-.322 0-.601.128-.794.296-1.094.914-2.168 1.422-3.755 1.422-2.875 0-4.957-2.355-4.957-5.262v-.043c0-2.908 2.104-5.243 4.957-5.243 1.438 0 2.554.51 3.583 1.338a1.3 1.3 0 0 0 .794.254c.731 0 1.31-.551 1.31-1.273 0-.467-.237-.827-.515-1.04-1.31-.998-2.833-1.676-5.151-1.676-4.549 0-7.745 3.46-7.745 7.683v.042c0 4.265 3.261 7.64 7.638 7.64Zm11.785-.021c1.739 0 2.918-.721 3.692-1.634v.424c0 .574.514 1.083 1.264 1.083.709 0 1.267-.531 1.267-1.231v-5.518c0-1.465-.386-2.653-1.224-3.46-.793-.806-2.059-1.252-3.754-1.252-1.481 0-2.575.255-3.648.659a1.126 1.126 0 0 0-.709 1.018c0 .594.495 1.06 1.095 1.06.138-.001.275-.023.407-.063.709-.276 1.524-.445 2.511-.445 1.824 0 2.811.848 2.811 2.441v.275a9.56 9.56 0 0 0-3.047-.467c-2.767 0-4.678 1.189-4.678 3.608v.043c0 2.25 1.889 3.459 4.013 3.459Zm.729-1.868c-1.244 0-2.209-.615-2.209-1.698v-.042c0-1.168.987-1.867 2.66-1.867 1.031 0 1.91.19 2.575.445v.765c0 1.42-1.31 2.397-3.026 2.397Zm10.004 1.74c.73 0 1.309-.55 1.309-1.273V16.803c0-.7-.579-1.273-1.309-1.273-.729 0-1.288.572-1.288 1.273v13.158c0 .723.581 1.274 1.288 1.274Z" />
7 | </svg>


--------------------------------------------------------------------------------
/public/logo5.svg:
--------------------------------------------------------------------------------
1 | <svg xmlns="http://www.w3.org/2000/svg" width="158" height="48" fill="none">
2 |   <path fill="#111827" fill-rule="evenodd"
3 |     d="M35.278 33.677c0 2.443-.85 3.442-3.165 3.442H11.571c-2.316 0-3.165-1-3.165-3.442V28.92c0-2.294-1.105-3.59-2.167-4.184a.497.497 0 0 1 0-.85c1.105-.701 2.167-2.167 2.167-4.121V15.09c0-2.634.722-3.4 3.037-3.4h20.798c2.316 0 3.038.766 3.038 3.4v4.673c0 1.954 1.062 3.42 2.166 4.12.32.213.32.66 0 .85-1.062.616-2.166 1.912-2.166 4.185v4.758ZM15.82 30.555c1.678 1.465 3.484 2.209 5.97 2.209 3.908 0 6.457-1.954 6.457-5.12 0-3.352-3.036-4.207-5.505-4.902-1.693-.477-3.12-.88-3.12-1.96 0-.7.744-1.38 1.997-1.38 1.211 0 2.21.256 3.165.744.32.149.616.255.892.255.404 0 .723-.191 1-.573l.381-.574c.15-.212.213-.446.213-.7 0-.426-.213-.85-.53-1.063-1.276-.807-2.997-1.487-5.333-1.487-3.314 0-5.863 1.742-5.863 4.864 0 3.49 3.102 4.377 5.586 5.085 1.657.473 3.038.867 3.038 1.904 0 .998-.934 1.487-2.103 1.487a7.037 7.037 0 0 1-3.95-1.168c-.362-.234-.702-.383-1.063-.383-.319 0-.595.149-.85.468l-.51.658c-.19.213-.254.489-.254.744 0 .318.106.637.382.892ZM47.556 28.6c-.276 0-.51.107-.722.383l-.425.595c-.17.19-.213.424-.213.637 0 .276.106.552.34.765 1.402 1.21 2.932 1.848 5.035 1.848 3.292 0 5.46-1.657 5.46-4.313 0-2.824-2.569-3.545-4.655-4.131-1.429-.402-2.632-.74-2.632-1.646 0-.616.637-1.17 1.678-1.17a5.76 5.76 0 0 1 2.655.639l.064.024c.252.098.485.188.7.188.32 0 .596-.15.83-.49l.34-.487a1.13 1.13 0 0 0 .17-.616c0-.361-.17-.722-.447-.892-1.083-.723-2.528-1.275-4.503-1.275-2.783 0-4.95 1.487-4.95 4.12 0 2.928 2.615 3.675 4.712 4.273 1.403.4 2.574.735 2.574 1.612 0 .87-.786 1.275-1.784 1.275-1.296 0-2.38-.361-3.335-1-.276-.211-.616-.34-.892-.34Zm20.286 2.295a.89.89 0 0 0-.149-.51l-.276-.446c-.255-.446-.552-.616-.935-.616-.19 0-.403.042-.68.148-.275.107-.594.149-.955.149-1.126 0-1.615-.977-1.615-2.443V22.25h3.25c.616 0 1.126-.51 1.126-1.126v-1.02c0-.615-.51-1.125-1.126-1.125h-3.25v-2.634c0-.616-.51-1.126-1.125-1.126h-1.21c-.617 0-1.127.51-1.127 1.126v10.96c0 3.463 1.147 5.439 4.185 5.439 1.338 0 2.358-.276 3.377-.893.34-.17.51-.574.51-.956Zm6.882-6.755c-2.74 0-4.928 1.402-4.928 4.375 0 2.613 1.763 4.143 4.164 4.164 1.826 0 3.27-.701 3.993-1.72v.445c0 .616.51 1.126 1.126 1.126h.786c.616 0 1.126-.51 1.126-1.126V24.31c0-3.568-1.38-5.607-5.374-5.607-1.38 0-2.72.36-3.888.892-.36.17-.637.573-.637.956a.99.99 0 0 0 .082.355c.016.045.033.09.045.133l.17.36c.213.426.574.639 1.02.639.134 0 .281-.04.421-.078l.11-.03c.637-.211 1.296-.36 2.315-.36 1.87 0 2.507 1.062 2.507 3.038v.404c-.659-.49-1.848-.871-3.038-.871v-.001Zm.68 2.315c.977 0 1.742.212 2.358.659h.021v1.4c-.425.575-1.168 1.212-2.613 1.212-1.104 0-1.933-.573-1.933-1.593 0-1.147 1.02-1.678 2.167-1.678Zm16.91 4.44a.89.89 0 0 0-.15-.51l-.276-.446c-.255-.446-.552-.616-.935-.616-.19 0-.403.042-.68.148-.276.107-.594.149-.955.149-1.126 0-1.615-.977-1.615-2.443V22.25h3.25c.616 0 1.126-.51 1.126-1.126v-1.02c0-.615-.51-1.125-1.126-1.125h-3.25v-2.634c0-.616-.51-1.126-1.126-1.126h-1.21c-.616 0-1.126.51-1.126 1.126v10.96c0 3.463 1.147 5.439 4.184 5.439 1.34 0 2.358-.276 3.378-.893.34-.17.51-.574.51-.956Zm6.881-6.755c-2.74 0-4.928 1.402-4.928 4.375 0 2.613 1.784 4.143 4.163 4.164 1.827 0 3.272-.701 3.994-1.72v.445c0 .616.51 1.126 1.126 1.126h.786c.616 0 1.126-.51 1.126-1.126V24.31c0-3.568-1.381-5.607-5.375-5.607-1.38 0-2.719.36-3.887.892-.36.17-.637.573-.637.956a.992.992 0 0 0 .082.355c.016.045.033.09.045.133l.17.36c.213.426.574.639 1.02.639.134 0 .281-.04.42-.078l.11-.03c.638-.211 1.297-.36 2.316-.36 1.87 0 2.507 1.062 2.507 3.038v.404c-.659-.49-1.848-.871-3.038-.871v-.001Zm.68 2.315c.977 0 1.742.212 2.358.659h.021v1.4c-.425.575-1.168 1.212-2.613 1.212-1.104 0-1.933-.573-1.933-1.593 0-1.147 1.02-1.678 2.167-1.678Zm16.802-7.71c-1.657 0-3.25.658-4.206 1.72h-.063v-.383c0-.616-.51-1.126-1.126-1.126h-1.211c-.616 0-1.126.51-1.126 1.126v11.28c0 .616.51 1.126 1.126 1.126h1.211c.616 0 1.126-.51 1.126-1.126v-7.945c.616-.913 1.614-1.444 2.825-1.444 1.444 0 2.23.913 2.23 2.337v7.01c0 .615.51 1.125 1.126 1.125h1.211c.616 0 1.126-.51 1.126-1.126V24.5c0-.176-.007-.396-.012-.594-.005-.162-.01-.31-.01-.405.468-.913 1.487-1.55 2.783-1.55 1.636 0 2.316.913 2.316 2.59v6.82c0 .616.509 1.126 1.125 1.126h1.211c.616 0 1.126-.51 1.126-1.126v-7.69c0-3.717-1.848-4.928-4.312-4.928-2.082 0-3.59.892-4.546 2.167-.488-1.232-1.869-2.167-3.93-2.167Zm18.608-2.465c.977 0 1.976-.786 1.976-2.167 0-1.21-.999-1.996-1.976-1.996-1.168 0-2.166.786-2.166 1.996 0 1.38.998 2.167 2.166 2.167Zm1.657 3.824c0-.616-.51-1.126-1.126-1.126v-.022h-1.21c-.616 0-1.126.51-1.126 1.126v11.28c0 .616.51 1.126 1.126 1.126h1.21c.616 0 1.126-.51 1.126-1.126V20.104Zm10.94 1.784c.871 0 1.572.149 2.379.53.143.08.298.112.438.14l.135.03c.404 0 .786-.254 1.02-.636l.446-.786c.106-.15.128-.32.128-.49 0-.381-.192-.827-.531-.997-1.317-.723-2.634-1.02-4.44-1.02-4.121 0-6.989 3.144-6.989 7.074 0 4.248 2.953 7.073 7.414 7.073 1.678 0 3.101-.297 4.716-1.593.254-.191.403-.595.403-.956 0-.233-.064-.467-.212-.616l-.51-.637a1.198 1.198 0 0 0-.935-.446c-.233 0-.488.085-.722.234-.786.51-1.551.786-2.613.786-2.039 0-3.887-1.487-3.887-3.866 0-2.358 1.827-3.824 3.76-3.824Z"
4 |     clip-rule="evenodd" />
5 | </svg>


--------------------------------------------------------------------------------
/pages/index.vue:
--------------------------------------------------------------------------------
  1 | <template>
  2 |   <div class="h-screen">
  3 |     <main class="h-full overflow-auto">
  4 |       <!-- Header -->
  5 |       <header class="absolute inset-x-0 top-0 z-50">
  6 |         <nav class="flex items-center justify-between max-w-7xl mx-auto py-4 px-6">
  7 |           <NuxtLink href="/" class="flex items-center">
  8 |             <div class="relative h-8 w-8 mr-4">
  9 |               <img class="object-cover" alt="Logo" src="/logo.svg" />
 10 |             </div>
 11 |             <h1 class="text-2xl font-bold">MultiGeniX</h1>
 12 |           </NuxtLink>
 13 |           <div class="flex items-center gap-x-2">
 14 |             <NuxtLink :to="user ? '/dashboard' : '/auth'">
 15 |               <Button outline class="rounded-full"> Get Started </Button>
 16 |             </NuxtLink>
 17 |           </div>
 18 |         </nav>
 19 |       </header>
 20 |       <!-- Hero -->
 21 |       <div class="relative isolate px-6 pt-14 lg:px-8">
 22 |         <div
 23 |           class="absolute inset-x-0 -top-40 -z-10 transform-gpu overflow-hidden blur-3xl sm:-top-80"
 24 |           aria-hidden="true"
 25 |         >
 26 |           <div
 27 |             class="relative left-[calc(50%-11rem)] aspect-[1155/678] w-[36.125rem] -translate-x-1/2 rotate-[30deg] bg-gradient-to-tr from-[#ff80b5] to-[#9089fc] opacity-30 sm:left-[calc(50%-30rem)] sm:w-[72.1875rem]"
 28 |             style="
 29 |               clip-path: polygon(
 30 |                 74.1% 44.1%,
 31 |                 100% 61.6%,
 32 |                 97.5% 26.9%,
 33 |                 85.5% 0.1%,
 34 |                 80.7% 2%,
 35 |                 72.5% 32.5%,
 36 |                 60.2% 62.4%,
 37 |                 52.4% 68.1%,
 38 |                 47.5% 58.3%,
 39 |                 45.2% 34.5%,
 40 |                 27.5% 76.7%,
 41 |                 0.1% 64.9%,
 42 |                 17.9% 100%,
 43 |                 27.6% 76.8%,
 44 |                 76.1% 97.7%,
 45 |                 74.1% 44.1%
 46 |               );
 47 |             "
 48 |           />
 49 |         </div>
 50 |         <div class="mx-auto max-w-2xl py-32 sm:py-48 lg:py-56">
 51 |           <div class="text-center">
 52 |             <h1 class="text-4xl font-bold tracking-tight text-gray-900 sm:text-6xl">
 53 |               Data to enrich your online business
 54 |             </h1>
 55 |             <p class="mt-6 text-lg leading-8 text-gray-600">
 56 |               Anim aute id magna aliqua ad ad non deserunt sunt. Qui irure qui lorem
 57 |               cupidatat commodo. Elit sunt amet fugiat veniam occaecat fugiat aliqua.
 58 |             </p>
 59 |             <div class="mt-10 flex items-center justify-center gap-x-6">
 60 |               <NuxtLink :to="user ? '/dashboard' : '/auth'">
 61 |                 <Button variant="premium"> Start Generating For Free </Button>
 62 |               </NuxtLink>
 63 |             </div>
 64 |           </div>
 65 |         </div>
 66 |       </div>
 67 | 
 68 |       <!-- Logos -->
 69 |       <div class="bg-white pb-24 sm:pb-32">
 70 |         <div class="mx-auto max-w-7xl px-6 lg:px-8">
 71 |           <h2 class="text-center text-lg font-semibold leading-8 text-gray-900">
 72 |             Trusted by the world’s most innovative teams
 73 |           </h2>
 74 |           <div
 75 |             class="mx-auto mt-10 grid max-w-lg grid-cols-4 items-center gap-x-8 gap-y-10 sm:max-w-xl sm:grid-cols-6 sm:gap-x-10 lg:mx-0 lg:max-w-none lg:grid-cols-5"
 76 |           >
 77 |             <img
 78 |               class="col-span-2 max-h-12 w-full object-contain lg:col-span-1"
 79 |               src="/logo1.svg"
 80 |               alt="Transistor"
 81 |               width="158"
 82 |               height="48"
 83 |             />
 84 |             <img
 85 |               class="col-span-2 max-h-12 w-full object-contain lg:col-span-1"
 86 |               src="/logo2.svg"
 87 |               alt="Reform"
 88 |               width="158"
 89 |               height="48"
 90 |             />
 91 |             <img
 92 |               class="col-span-2 max-h-12 w-full object-contain lg:col-span-1"
 93 |               src="/logo3.svg"
 94 |               alt="Tuple"
 95 |               width="158"
 96 |               height="48"
 97 |             />
 98 |             <img
 99 |               class="col-span-2 max-h-12 w-full object-contain sm:col-start-2 lg:col-span-1"
100 |               src="/logo4.svg"
101 |               alt="SavvyCal"
102 |               width="158"
103 |               height="48"
104 |             />
105 |             <img
106 |               class="col-span-2 col-start-2 max-h-12 w-full object-contain sm:col-start-auto lg:col-span-1"
107 |               src="/logo5.svg"
108 |               alt="Statamic"
109 |               width="158"
110 |               height="48"
111 |             />
112 |           </div>
113 |         </div>
114 |       </div>
115 |     </main>
116 |   </div>
117 | </template>
118 | 
119 | <script setup lang="ts">
120 | const user = useSupabaseUser();
121 | definePageMeta({
122 |   layout: 'home',
123 | });
124 | </script>
125 | 
126 | <style scoped></style>
127 | 


--------------------------------------------------------------------------------
/pages/image.vue:
--------------------------------------------------------------------------------
  1 | <template>
  2 |   <div>
  3 |     <Heading
  4 |       title="Image Generation"
  5 |       description="Turn your prompt into an image."
  6 |       icon="lucide:image"
  7 |       iconColor="text-pink-700"
  8 |       bgColor="bg-pink-700/10"
  9 |     />
 10 |     <div class="px-4 lg:px-8">
 11 |       <div>
 12 |         <form
 13 |           @submit.prevent="submitPrompt"
 14 |           class="rounded-lg border w-full p-4 px-3 md:px-6 focus-within:shadow-sm grid grid-cols-12 gap-2"
 15 |         >
 16 |           <div class="col-span-12 lg:col-span-6">
 17 |             <div class="m-0 p-0">
 18 |               <input
 19 |                 v-model="prompt"
 20 |                 placeholder="A picture of a horse in Swiss alps"
 21 |                 class="border-0 outline-none focus-visible:ring-0 focus-visible:ring-transparent w-full"
 22 |               />
 23 |             </div>
 24 |           </div>
 25 |           <div class="col-span-12 lg:col-span-2">
 26 |             <!-- <Select
 27 |               v-model="resolution"
 28 |               placeholder="Please choose your resolution"
 29 |               :options="resolutionOptions"
 30 |             /> -->
 31 |             <Select v-model="resolution">
 32 |               <SelectTrigger>
 33 |                 <SelectValue placeholder="Please choose your resolution" />
 34 |               </SelectTrigger>
 35 |               <SelectContent>
 36 |                 <SelectGroup>
 37 |                   <SelectItem v-for="(res, i) in resolutionOptions" :value="res.value">
 38 |                     {{ res.text }}
 39 |                   </SelectItem>
 40 |                 </SelectGroup>
 41 |               </SelectContent>
 42 |             </Select>
 43 |           </div>
 44 |           <div class="col-span-12 lg:col-span-2">
 45 |             <Select v-model="amount">
 46 |               <SelectTrigger>
 47 |                 <SelectValue placeholder="Please choose your resolution" />
 48 |               </SelectTrigger>
 49 |               <SelectContent>
 50 |                 <SelectGroup>
 51 |                   <SelectItem v-for="(res, i) in amountOptions" :value="res.value">
 52 |                     {{ res.text }}
 53 |                   </SelectItem>
 54 |                 </SelectGroup>
 55 |               </SelectContent>
 56 |             </Select>
 57 |           </div>
 58 |           <Button
 59 |             class="col-span-12 lg:col-span-2 w-full shadow-none bg-gray-950 text-white"
 60 |             type="submit"
 61 |             :disabled="!prompt || isLoading"
 62 |           >
 63 |             Generate
 64 |           </Button>
 65 |         </form>
 66 |       </div>
 67 |       <div class="space-y-4 mt-4">
 68 |         <div
 69 |           v-if="isLoading"
 70 |           class="p-8 rounded-lg w-full flex items-center justify-center bg-muted"
 71 |         >
 72 |           <Loader />
 73 |         </div>
 74 | 
 75 |         <Empty v-if="photos.length === 0 && !isLoading" label="No images generated." />
 76 | 
 77 |         <div
 78 |           v-else
 79 |           class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4 gap-4 mt-8"
 80 |         >
 81 |           <div
 82 |             v-for="photo in photos"
 83 |             :key="photo"
 84 |             class="rounded-lg overflow-hidden border-black/5 border"
 85 |           >
 86 |             <div class="relative aspect-square">
 87 |               <img alt="Generated" class="w-full" :src="photo" />
 88 |             </div>
 89 |             <div class="p-2">
 90 |               <NuxtLink
 91 |                 :to="photo"
 92 |                 download
 93 |                 target="_blank"
 94 |                 class="w-full bg-slate-200 flex justify-center px-1 py-2 items-center"
 95 |               >
 96 |                 <Icon name="lucide:download" class="h-4 w-4 mr-2" />
 97 |                 Download
 98 |               </NuxtLink>
 99 |             </div>
100 |           </div>
101 |         </div>
102 |       </div>
103 |     </div>
104 |   </div>
105 | </template>
106 | 
107 | <script setup lang="ts">
108 | import { useProModal } from '@/store/useProModal';
109 | const proModal = useProModal();
110 | const prompt = ref('');
111 | const amount = ref('1');
112 | const resolution = ref('256x256');
113 | const isLoading = ref(false);
114 | const photos = ref<string[]>([]);
115 | 
116 | const submitPrompt = async () => {
117 |   isLoading.value = true;
118 |   photos.value = [];
119 | 
120 |   const { data, error } = await useFetch('/api/image', {
121 |     method: 'POST',
122 |     body: {
123 |       prompt: prompt.value,
124 |       amount: amount.value,
125 |       resolution: resolution.value,
126 |     },
127 |   });
128 |   if (error.value) {
129 |     console.log(error.value);
130 |     if (error.value.statusCode === 403) {
131 |       proModal.onOpen();
132 |     }
133 |   }
134 |   if (data.value) {
135 |     photos.value = data.value.map((img) => {
136 |       // This is to avoid Typescript issue as we know we will get the url
137 |       if (img.url) {
138 |         return img.url;
139 |       }
140 |       return '';
141 |     });
142 |     await refreshNuxtData('userData');
143 |   }
144 |   prompt.value = '';
145 |   isLoading.value = false;
146 | };
147 | </script>
148 | 
149 | <style scoped></style>
150 | 


--------------------------------------------------------------------------------