├── .eslintrc.json
├── .example.env
├── .gitignore
├── .prettierrc.js
├── README.md
├── app
    ├── api
    │   └── generate
    │   │   └── route.ts
    ├── favicon.ico
    ├── globals.css
    ├── layout.tsx
    ├── page.tsx
    ├── start
    │   ├── [id]
    │   │   └── page.tsx
    │   └── page.tsx
    └── waitlist
    │   └── page.tsx
├── components.json
├── components
    ├── Body.tsx
    ├── CTA.tsx
    ├── Footer.tsx
    ├── GradientWrapper.tsx
    ├── Hero.tsx
    ├── NavLink.tsx
    ├── Navbar.tsx
    ├── PromptSuggestion.tsx
    ├── QrCard.tsx
    ├── Testimonials.tsx
    ├── ui
    │   ├── alert.tsx
    │   ├── button.tsx
    │   ├── form.tsx
    │   ├── input.tsx
    │   ├── label.tsx
    │   ├── loading-dots.module.css
    │   ├── loadingdots.tsx
    │   └── textarea.tsx
    └── v0logo.tsx
├── next.config.js
├── package-lock.json
├── package.json
├── postcss.config.js
├── public
    ├── 1.png
    ├── 2.png
    ├── 3.png
    ├── 4.png
    ├── 5.png
    ├── 6.png
    ├── 7.png
    ├── box.svg
    ├── next.svg
    ├── og-image.png
    └── vercel.svg
├── tailwind.config.js
├── tsconfig.json
└── utils
    ├── ReplicateClient.ts
    ├── downloadQrCode.ts
    ├── env.ts
    ├── service.ts
    ├── types.ts
    └── utils.ts


/.eslintrc.json:
--------------------------------------------------------------------------------
1 | {
2 |   "extends": "next",
3 |   "rules": {
4 |     "no-unused-vars": "error"
5 |   }
6 | }
7 | 


--------------------------------------------------------------------------------
/.example.env:
--------------------------------------------------------------------------------
 1 | ## Set up Replicate: https://replicate.com
 2 | REPLICATE_API_KEY=
 3 | 
 4 | ## Set up Vercel Blob: https://vercel.com/docs/storage/vercel-blob/quickstart
 5 | BLOB_READ_WRITE_TOKEN=
 6 | 
 7 | ## Set up Vercel KV: https://vercel.com/docs/storage/vercel-kv/quickstart
 8 | KV_URL=
 9 | KV_REST_API_URL=
10 | KV_REST_API_TOKEN=
11 | KV_REST_API_READ_ONLY_TOKEN=
12 | 


--------------------------------------------------------------------------------
/.gitignore:
--------------------------------------------------------------------------------
 1 | # See https://help.github.com/articles/ignoring-files/ for more about ignoring files.
 2 | 
 3 | # dependencies
 4 | /node_modules
 5 | /.pnp
 6 | .pnp.js
 7 | 
 8 | # testing
 9 | /coverage
10 | 
11 | # next.js
12 | /.next/
13 | /out/
14 | 
15 | # production
16 | /build
17 | 
18 | # misc
19 | .DS_Store
20 | *.pem
21 | 
22 | # debug
23 | npm-debug.log*
24 | yarn-debug.log*
25 | yarn-error.log*
26 | 
27 | # local env files
28 | .env*.local
29 | 
30 | # vercel
31 | .vercel
32 | 
33 | # typescript
34 | *.tsbuildinfo
35 | next-env.d.ts
36 | 


--------------------------------------------------------------------------------
/.prettierrc.js:
--------------------------------------------------------------------------------
1 | module.exports = {
2 |   semi: true,
3 |   trailingComma: 'all',
4 |   singleQuote: true,
5 |   printWidth: 80,
6 |   tabWidth: 2,
7 | };
8 | 


--------------------------------------------------------------------------------
/README.md:
--------------------------------------------------------------------------------
 1 | <a href="https://qrGPT.io">
 2 |   <img alt="QrGPT – Generate beautiful AI QR Codes in seconds." src="/public/og-image.png">
 3 |   <h1 align="center">qrGPT</h1>
 4 | </a>
 5 | 
 6 | <p align="center">
 7 |   Generate beautiful AI QR Codes in seconds. Powered by Vercel and Replicate.
 8 | </p>
 9 | 
10 | <p align="center">
11 |   <a href="https://codeium.com?repo_name=nutlope%2Fqrgpt">
12 |     <img src="https://codeium.com/badges/main" alt="Codium" />
13 |   </a>
14 | </p>
15 | 
16 | <p align="center">
17 |   <a href="#tech-stack"><strong>Tech Stack</strong></a> ·
18 |   <a href="#deploy-your-own"><strong>Deploy Your Own</strong></a> ·
19 |   <a href="#authors"><strong>Authors</strong></a> ·
20 |   <a href="#credits"><strong>Credits</strong></a>
21 | </p>
22 | <br/>
23 | 
24 | ## Tech Stack
25 | 
26 | - Next.js [App Router](https://nextjs.org/docs/app)
27 | - [Replicate](https://replicate.com/) for the AI model
28 | - [Vercel Blob](https://vercel.com/storage/blob) for image storage
29 | - [Vercel KV](https://vercel.com/storage/kv) for redis storage and rate limiting
30 | - [Shadcn UI](https://ui.shadcn.com/) for the component library
31 | 
32 | ## Deploy Your Own
33 | 
34 | You can deploy this template to Vercel with the button below:
35 | 
36 | [![Deploy with Vercel](https://vercel.com/button)](https://vercel.fyi/qrGPT)
37 | 
38 | Note that you'll need to:
39 | 
40 | - Set up [Replicate](https://replicate.com)
41 | - Set up [Vercel KV](https://vercel.com/docs/storage/vercel-kv/quickstart)
42 | - Set up [Vercel Blob](https://vercel.com/docs/storage/vercel-blob/quickstart)
43 | 
44 | ## Authors
45 | 
46 | - Hassan El Mghari ([@nutlope](https://twitter.com/nutlope))
47 | - Kevin Hou ([@kevinhou22](https://twitter.com/kevinhou22))
48 | 
49 | ## Credits
50 | 
51 | - [Codeium](https://codeium.com?repo_name=nutlope%2Fqrgpt) and [v0](https://v0.dev/) for quick prototyping and AI autocomplete
52 | - [Spirals](https://spirals.vercel.app/) for great code patterns and some code (ty Steven)
53 | - [Lim Zi Yang](https://github.com/ZYLIM0702) for the original AI model
54 | 


--------------------------------------------------------------------------------
/app/api/generate/route.ts:
--------------------------------------------------------------------------------
 1 | import { replicateClient } from '@/utils/ReplicateClient';
 2 | import { QrGenerateRequest, QrGenerateResponse } from '@/utils/service';
 3 | import { NextRequest } from 'next/server';
 4 | // import { Ratelimit } from '@upstash/ratelimit';
 5 | import { kv } from '@vercel/kv';
 6 | import { put } from '@vercel/blob';
 7 | import { nanoid } from '@/utils/utils';
 8 | 
 9 | /**
10 |  * Validates a request object.
11 |  *
12 |  * @param {QrGenerateRequest} request - The request object to be validated.
13 |  * @throws {Error} Error message if URL or prompt is missing.
14 |  */
15 | 
16 | const validateRequest = (request: QrGenerateRequest) => {
17 |   if (!request.url) {
18 |     throw new Error('URL is required');
19 |   }
20 |   if (!request.prompt) {
21 |     throw new Error('Prompt is required');
22 |   }
23 | };
24 | 
25 | // const ratelimit = new Ratelimit({
26 | //   redis: kv,
27 | //   // Allow 20 requests from the same IP in 1 day.
28 | //   limiter: Ratelimit.slidingWindow(20, '1 d'),
29 | // });
30 | 
31 | export async function POST(request: NextRequest) {
32 |   const reqBody = (await request.json()) as QrGenerateRequest;
33 | 
34 |   // const ip = request.ip ?? '127.0.0.1';
35 |   // const { success } = await ratelimit.limit(ip);
36 | 
37 |   // if (!success && process.env.NODE_ENV !== 'development') {
38 |   //   return new Response('Too many requests. Please try again after 24h.', {
39 |   //     status: 429,
40 |   //   });
41 |   // }
42 | 
43 |   try {
44 |     validateRequest(reqBody);
45 |   } catch (e) {
46 |     if (e instanceof Error) {
47 |       return new Response(e.message, { status: 400 });
48 |     }
49 |   }
50 | 
51 |   const id = nanoid();
52 |   const startTime = performance.now();
53 | 
54 |   let imageUrl = await replicateClient.generateQrCode({
55 |     url: reqBody.url,
56 |     prompt: reqBody.prompt,
57 |     qr_conditioning_scale: 2,
58 |     num_inference_steps: 30,
59 |     guidance_scale: 5,
60 |     negative_prompt:
61 |       'Longbody, lowres, bad anatomy, bad hands, missing fingers, extra digit, fewer digits, cropped, worst quality, low quality, blurry',
62 |   });
63 | 
64 |   const endTime = performance.now();
65 |   const durationMS = endTime - startTime;
66 | 
67 |   // convert output to a blob object
68 |   const file = await fetch(imageUrl).then((res) => res.blob());
69 | 
70 |   // upload & store in Vercel Blob
71 |   const { url } = await put(`${id}.png`, file, { access: 'public' });
72 | 
73 |   await kv.hset(id, {
74 |     prompt: reqBody.prompt,
75 |     image: url,
76 |     website_url: reqBody.url,
77 |     model_latency: Math.round(durationMS),
78 |   });
79 | 
80 |   const response: QrGenerateResponse = {
81 |     image_url: url,
82 |     model_latency_ms: Math.round(durationMS),
83 |     id: id,
84 |   };
85 | 
86 |   return new Response(JSON.stringify(response), {
87 |     status: 200,
88 |   });
89 | }
90 | 


--------------------------------------------------------------------------------
/app/favicon.ico:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/Nutlope/qrGPT/ff11bf70e3463f0a1f49fedfa7522bb6b83d5627/app/favicon.ico


--------------------------------------------------------------------------------
/app/globals.css:
--------------------------------------------------------------------------------
 1 | @tailwind base;
 2 | @tailwind components;
 3 | @tailwind utilities;
 4 | 
 5 | .custom-screen {
 6 |   @apply max-w-screen-xl mx-auto px-4 md:px-8;
 7 | }
 8 | 
 9 | .gradient-border {
10 |   border: 1px solid transparent;
11 |   background: linear-gradient(white, white),
12 |     linear-gradient(
13 |       25deg,
14 |       rgba(209, 213, 219, 1),
15 |       rgba(209, 213, 219, 1),
16 |       rgba(0, 0, 0, 0.63),
17 |       rgba(209, 213, 219, 1),
18 |       rgba(209, 213, 219, 1)
19 |     );
20 |   background-clip: padding-box, border-box;
21 |   background-origin: padding-box, border-box;
22 | }
23 | 
24 | @layer base {
25 |   :root {
26 |     --background: 0 0% 100%;
27 |     --foreground: 222.2 84% 4.9%;
28 | 
29 |     --card: 0 0% 100%;
30 |     --card-foreground: 222.2 84% 4.9%;
31 | 
32 |     --popover: 0 0% 100%;
33 |     --popover-foreground: 222.2 84% 4.9%;
34 | 
35 |     --primary: 222.2 47.4% 11.2%;
36 |     --primary-foreground: 210 40% 98%;
37 | 
38 |     --secondary: 210 40% 96.1%;
39 |     --secondary-foreground: 222.2 47.4% 11.2%;
40 | 
41 |     --muted: 210 40% 96.1%;
42 |     --muted-foreground: 215.4 16.3% 46.9%;
43 | 
44 |     --accent: 210 40% 96.1%;
45 |     --accent-foreground: 222.2 47.4% 11.2%;
46 | 
47 |     --destructive: 0 84.2% 60.2%;
48 |     --destructive-foreground: 210 40% 98%;
49 | 
50 |     --border: 214.3 31.8% 91.4%;
51 |     --input: 214.3 31.8% 91.4%;
52 |     --ring: 222.2 84% 4.9%;
53 | 
54 |     --radius: 0.5rem;
55 |   }
56 | 
57 |   .dark {
58 |     --background: 222.2 84% 4.9%;
59 |     --foreground: 210 40% 98%;
60 | 
61 |     --card: 222.2 84% 4.9%;
62 |     --card-foreground: 210 40% 98%;
63 | 
64 |     --popover: 222.2 84% 4.9%;
65 |     --popover-foreground: 210 40% 98%;
66 | 
67 |     --primary: 210 40% 98%;
68 |     --primary-foreground: 222.2 47.4% 11.2%;
69 | 
70 |     --secondary: 217.2 32.6% 17.5%;
71 |     --secondary-foreground: 210 40% 98%;
72 | 
73 |     --muted: 217.2 32.6% 17.5%;
74 |     --muted-foreground: 215 20.2% 65.1%;
75 | 
76 |     --accent: 217.2 32.6% 17.5%;
77 |     --accent-foreground: 210 40% 98%;
78 | 
79 |     --destructive: 0 62.8% 30.6%;
80 |     --destructive-foreground: 210 40% 98%;
81 | 
82 |     --border: 217.2 32.6% 17.5%;
83 |     --input: 217.2 32.6% 17.5%;
84 |     --ring: 212.7 26.8% 83.9%;
85 |   }
86 | }
87 | 
88 | @layer base {
89 |   * {
90 |     @apply border-border;
91 |   }
92 |   body {
93 |     @apply bg-background text-foreground;
94 |   }
95 | }
96 | 


--------------------------------------------------------------------------------
/app/layout.tsx:
--------------------------------------------------------------------------------
 1 | import Navbar from '@/components/Navbar';
 2 | import './globals.css';
 3 | import type { Metadata } from 'next';
 4 | import { Inter } from 'next/font/google';
 5 | import Footer from '@/components/Footer';
 6 | import { Analytics } from '@vercel/analytics/react';
 7 | import PlausibleProvider from 'next-plausible';
 8 | 
 9 | const inter = Inter({ subsets: ['latin'] });
10 | 
11 | let title = 'QrGPT - QR Code Generator';
12 | let description = 'Generate your AI QR Code in seconds';
13 | let url = 'https://www.qrgpt.io';
14 | let ogimage = 'https://www.qrgpt.io/og-image.png';
15 | let sitename = 'qrGPT.io';
16 | 
17 | export const metadata: Metadata = {
18 |   metadataBase: new URL(url),
19 |   title,
20 |   description,
21 |   icons: {
22 |     icon: '/favicon.ico',
23 |   },
24 |   openGraph: {
25 |     images: [ogimage],
26 |     title,
27 |     description,
28 |     url: url,
29 |     siteName: sitename,
30 |     locale: 'en_US',
31 |     type: 'website',
32 |   },
33 |   twitter: {
34 |     card: 'summary_large_image',
35 |     images: [ogimage],
36 |     title,
37 |     description,
38 |   },
39 | };
40 | 
41 | export default function RootLayout({
42 |   children,
43 | }: {
44 |   children: React.ReactNode;
45 | }) {
46 |   return (
47 |     <html lang="en">
48 |       <head>
49 |         <PlausibleProvider domain="qrgpt.io" />
50 |       </head>
51 |       <body className={inter.className}>
52 |         <Navbar />
53 |         <main>{children}</main>
54 |         <Analytics />
55 |         <Footer />
56 |       </body>
57 |     </html>
58 |   );
59 | }
60 | 


--------------------------------------------------------------------------------
/app/page.tsx:
--------------------------------------------------------------------------------
 1 | import CTA from '@/components/CTA';
 2 | import GradientWrapper from '@/components/GradientWrapper';
 3 | import Hero from '@/components/Hero';
 4 | 
 5 | export default function Home() {
 6 |   return (
 7 |     <>
 8 |       <Hero />
 9 |       <GradientWrapper></GradientWrapper>
10 |       <CTA />
11 |     </>
12 |   );
13 | }
14 | 


--------------------------------------------------------------------------------
/app/start/[id]/page.tsx:
--------------------------------------------------------------------------------
 1 | import { kv } from '@vercel/kv';
 2 | import { notFound } from 'next/navigation';
 3 | import { Metadata } from 'next';
 4 | import Body from '@/components/Body';
 5 | 
 6 | async function getAllKv(id: string) {
 7 |   const data = await kv.hgetall<{
 8 |     prompt: string;
 9 |     image?: string;
10 |     website_url?: string;
11 |     model_latency?: string;
12 |   }>(id);
13 | 
14 |   return data;
15 | }
16 | 
17 | export async function generateMetadata({
18 |   params,
19 | }: {
20 |   params: {
21 |     id: string;
22 |   };
23 | }): Promise<Metadata | undefined> {
24 |   const data = await getAllKv(params.id);
25 |   if (!data) {
26 |     return;
27 |   }
28 | 
29 |   const title = `QrGPT: ${data.prompt}`;
30 |   const description = `A QR code generated from qrGPT.io linking to: ${data.website_url}`;
31 |   const image = data.image || 'https://qrGPT.io/og-image.png';
32 | 
33 |   return {
34 |     title,
35 |     description,
36 |     openGraph: {
37 |       title,
38 |       description,
39 |       images: [
40 |         {
41 |           url: image,
42 |         },
43 |       ],
44 |     },
45 |     twitter: {
46 |       card: 'summary_large_image',
47 |       title,
48 |       description,
49 |       images: [image],
50 |       creator: '@nutlope',
51 |     },
52 |   };
53 | }
54 | 
55 | export default async function Results({
56 |   params,
57 | }: {
58 |   params: {
59 |     id: string;
60 |   };
61 | }) {
62 |   const data = await getAllKv(params.id);
63 |   if (!data) {
64 |     notFound();
65 |   }
66 |   return (
67 |     <Body
68 |       prompt={data.prompt}
69 |       imageUrl={data.image}
70 |       redirectUrl={data.website_url}
71 |       modelLatency={Number(data.model_latency)}
72 |       id={params.id}
73 |     />
74 |   );
75 | }
76 | 


--------------------------------------------------------------------------------
/app/start/page.tsx:
--------------------------------------------------------------------------------
1 | import Body from '@/components/Body';
2 | 
3 | export default function GeneratePage() {
4 |   return <Body />;
5 | }
6 | 


--------------------------------------------------------------------------------
/app/waitlist/page.tsx:
--------------------------------------------------------------------------------
 1 | import Image from 'next/image';
 2 | 
 3 | export default function WaitlistPage() {
 4 |   return (
 5 |     <div className="mt-20 mx-auto text-center">
 6 |       <div className="flex items-center justify-center flex-col gap-5">
 7 |         <Image src="/box.svg" alt="logo" width={200} height={200} />
 8 |         <div className="font-bold text-4xl">QrGPT</div>
 9 |       </div>
10 | 
11 |       <div className="mt-36 text-center prose mx-auto">
12 |         <h1 className="lg:text-5xl text-3xl font-bold">
13 |           Stop being sneaky and just wait for the launch.
14 |         </h1>
15 |         <h3 className="lg:text-xl text-lg text-gray-500 font-normal mt-5">
16 |           Thank you. It&apos;ll be out soon, I promise.
17 |         </h3>
18 |       </div>
19 |     </div>
20 |   );
21 | }
22 | 


--------------------------------------------------------------------------------
/components.json:
--------------------------------------------------------------------------------
 1 | {
 2 |   "$schema": "https://ui.shadcn.com/schema.json",
 3 |   "style": "default",
 4 |   "rsc": true,
 5 |   "tsx": true,
 6 |   "tailwind": {
 7 |     "config": "tailwind.config.js",
 8 |     "css": "app/globals.css",
 9 |     "baseColor": "slate",
10 |     "cssVariables": true
11 |   },
12 |   "aliases": {
13 |     "components": "@/components",
14 |     "utils": "@/lib/utils"
15 |   }
16 | }
17 | 


--------------------------------------------------------------------------------
/components/Body.tsx:
--------------------------------------------------------------------------------
  1 | 'use client';
  2 | 
  3 | import * as z from 'zod';
  4 | import { zodResolver } from '@hookform/resolvers/zod';
  5 | import { useForm } from 'react-hook-form';
  6 | import {
  7 |   Form,
  8 |   FormControl,
  9 |   FormDescription,
 10 |   FormField,
 11 |   FormItem,
 12 |   FormLabel,
 13 |   FormMessage,
 14 | } from '@/components/ui/form';
 15 | import { Textarea } from '@/components/ui/textarea';
 16 | import { Input } from '@/components/ui/input';
 17 | import { Button } from '@/components/ui/button';
 18 | import { useCallback, useEffect, useState } from 'react';
 19 | import { QrGenerateRequest, QrGenerateResponse } from '@/utils/service';
 20 | import { QrCard } from '@/components/QrCard';
 21 | import { AlertCircle } from 'lucide-react';
 22 | import { Alert, AlertTitle, AlertDescription } from '@/components/ui/alert';
 23 | import LoadingDots from '@/components/ui/loadingdots';
 24 | import downloadQrCode from '@/utils/downloadQrCode';
 25 | import va from '@vercel/analytics';
 26 | import { PromptSuggestion } from '@/components/PromptSuggestion';
 27 | import { useRouter } from 'next/navigation';
 28 | import { toast, Toaster } from 'react-hot-toast';
 29 | 
 30 | const promptSuggestions = [
 31 |   'A city view with clouds',
 32 |   'A beautiful glacier',
 33 |   'A forest overlooking a mountain',
 34 |   'A saharan desert',
 35 | ];
 36 | 
 37 | const generateFormSchema = z.object({
 38 |   url: z.string().min(1),
 39 |   prompt: z.string().min(3).max(160),
 40 | });
 41 | 
 42 | type GenerateFormValues = z.infer<typeof generateFormSchema>;
 43 | 
 44 | const Body = ({
 45 |   imageUrl,
 46 |   prompt,
 47 |   redirectUrl,
 48 |   modelLatency,
 49 |   id,
 50 | }: {
 51 |   imageUrl?: string;
 52 |   prompt?: string;
 53 |   redirectUrl?: string;
 54 |   modelLatency?: number;
 55 |   id?: string;
 56 | }) => {
 57 |   const [isLoading, setIsLoading] = useState(false);
 58 |   const [error, setError] = useState<Error | null>(null);
 59 |   const [response, setResponse] = useState<QrGenerateResponse | null>(null);
 60 |   const [submittedURL, setSubmittedURL] = useState<string | null>(null);
 61 | 
 62 |   const router = useRouter();
 63 | 
 64 |   const form = useForm<GenerateFormValues>({
 65 |     resolver: zodResolver(generateFormSchema),
 66 |     mode: 'onChange',
 67 | 
 68 |     // Set default values so that the form inputs are controlled components.
 69 |     defaultValues: {
 70 |       url: '',
 71 |       prompt: '',
 72 |     },
 73 |   });
 74 | 
 75 |   useEffect(() => {
 76 |     if (imageUrl && prompt && redirectUrl && modelLatency && id) {
 77 |       setResponse({
 78 |         image_url: imageUrl,
 79 |         model_latency_ms: modelLatency,
 80 |         id: id,
 81 |       });
 82 |       setSubmittedURL(redirectUrl);
 83 | 
 84 |       form.setValue('prompt', prompt);
 85 |       form.setValue('url', redirectUrl);
 86 |     }
 87 |   }, [imageUrl, modelLatency, prompt, redirectUrl, id, form]);
 88 | 
 89 |   const handleSuggestionClick = useCallback(
 90 |     (suggestion: string) => {
 91 |       form.setValue('prompt', suggestion);
 92 |     },
 93 |     [form],
 94 |   );
 95 | 
 96 |   const handleSubmit = useCallback(
 97 |     async (values: GenerateFormValues) => {
 98 |       setIsLoading(true);
 99 |       setResponse(null);
100 |       setSubmittedURL(values.url);
101 | 
102 |       try {
103 |         const request: QrGenerateRequest = {
104 |           url: values.url,
105 |           prompt: values.prompt,
106 |         };
107 |         const response = await fetch('/api/generate', {
108 |           method: 'POST',
109 |           body: JSON.stringify(request),
110 |         });
111 | 
112 |         // Handle API errors.
113 |         if (!response.ok || response.status !== 200) {
114 |           const text = await response.text();
115 |           throw new Error(
116 |             `Failed to generate QR code: ${response.status}, ${text}`,
117 |           );
118 |         }
119 | 
120 |         const data = await response.json();
121 | 
122 |         va.track('Generated QR Code', {
123 |           prompt: values.prompt,
124 |         });
125 | 
126 |         router.push(`/start/${data.id}`);
127 |       } catch (error) {
128 |         va.track('Failed to generate', {
129 |           prompt: values.prompt,
130 |         });
131 |         if (error instanceof Error) {
132 |           setError(error);
133 |         }
134 |       } finally {
135 |         setIsLoading(false);
136 |       }
137 |     },
138 |     [router],
139 |   );
140 | 
141 |   return (
142 |     <div className="flex justify-center items-center flex-col w-full lg:p-0 p-4 sm:mb-28 mb-0">
143 |       <div className="max-w-6xl w-full grid grid-cols-1 md:grid-cols-2 gap-6 md:gap-12 mt-10">
144 |         <div className="col-span-1">
145 |           <h1 className="text-3xl font-bold mb-10">Generate a QR Code</h1>
146 |           <Form {...form}>
147 |             <form onSubmit={form.handleSubmit(handleSubmit)}>
148 |               <div className="flex flex-col gap-4">
149 |                 <FormField
150 |                   control={form.control}
151 |                   name="url"
152 |                   render={({ field }) => (
153 |                     <FormItem>
154 |                       <FormLabel>URL</FormLabel>
155 |                       <FormControl>
156 |                         <Input placeholder="roomgpt.io" {...field} />
157 |                       </FormControl>
158 |                       <FormDescription>
159 |                         This is what your QR code will link to.
160 |                       </FormDescription>
161 |                       <FormMessage />
162 |                     </FormItem>
163 |                   )}
164 |                 />
165 |                 <FormField
166 |                   control={form.control}
167 |                   name="prompt"
168 |                   render={({ field }) => (
169 |                     <FormItem>
170 |                       <FormLabel>Prompt</FormLabel>
171 |                       <FormControl>
172 |                         <Textarea
173 |                           placeholder="A city view with clouds"
174 |                           className="resize-none"
175 |                           {...field}
176 |                         />
177 |                       </FormControl>
178 |                       <FormDescription className="">
179 |                         This is what the image in your QR code will look like.
180 |                       </FormDescription>
181 | 
182 |                       <FormMessage />
183 |                     </FormItem>
184 |                   )}
185 |                 />
186 |                 <div className="my-2">
187 |                   <p className="text-sm font-medium mb-3">Prompt suggestions</p>
188 |                   <div className="grid sm:grid-cols-2 grid-cols-1 gap-3 text-center text-gray-500 text-sm">
189 |                     {promptSuggestions.map((suggestion) => (
190 |                       <PromptSuggestion
191 |                         key={suggestion}
192 |                         suggestion={suggestion}
193 |                         onClick={() => handleSuggestionClick(suggestion)}
194 |                         isLoading={isLoading}
195 |                       />
196 |                     ))}
197 |                   </div>
198 |                 </div>
199 |                 <Button
200 |                   type="submit"
201 |                   disabled={isLoading}
202 |                   className="inline-flex justify-center
203 |                  max-w-[200px] mx-auto w-full"
204 |                 >
205 |                   {isLoading ? (
206 |                     <LoadingDots color="white" />
207 |                   ) : response ? (
208 |                     '✨ Regenerate'
209 |                   ) : (
210 |                     'Generate'
211 |                   )}
212 |                 </Button>
213 | 
214 |                 {error && (
215 |                   <Alert variant="destructive">
216 |                     <AlertCircle className="h-4 w-4" />
217 |                     <AlertTitle>Error</AlertTitle>
218 |                     <AlertDescription>{error.message}</AlertDescription>
219 |                   </Alert>
220 |                 )}
221 |               </div>
222 |             </form>
223 |           </Form>
224 |         </div>
225 |         <div className="col-span-1">
226 |           {submittedURL && (
227 |             <>
228 |               <h1 className="text-3xl font-bold sm:mb-5 mb-5 mt-5 sm:mt-0 sm:text-center text-left">
229 |                 Your QR Code
230 |               </h1>
231 |               <div>
232 |                 <div className="flex flex-col justify-center relative h-auto items-center">
233 |                   {response ? (
234 |                     <QrCard
235 |                       imageURL={response.image_url}
236 |                       time={(response.model_latency_ms / 1000).toFixed(2)}
237 |                     />
238 |                   ) : (
239 |                     <div className="relative flex flex-col justify-center items-center gap-y-2 w-[510px] border border-gray-300 rounded shadow group p-2 mx-auto animate-pulse bg-gray-400 aspect-square max-w-full" />
240 |                   )}
241 |                 </div>
242 |                 {response && (
243 |                   <div className="flex justify-center gap-5 mt-4">
244 |                     <Button
245 |                       onClick={() =>
246 |                         downloadQrCode(response.image_url, 'qrCode')
247 |                       }
248 |                     >
249 |                       Download
250 |                     </Button>
251 |                     <Button
252 |                       variant="outline"
253 |                       onClick={() => {
254 |                         navigator.clipboard.writeText(
255 |                           `https://qrgpt.io/start/${id || ''}`,
256 |                         );
257 |                         toast.success('Link copied to clipboard');
258 |                       }}
259 |                     >
260 |                       ✂️ Share
261 |                     </Button>
262 |                   </div>
263 |                 )}
264 |               </div>
265 |             </>
266 |           )}
267 |         </div>
268 |       </div>
269 |       <Toaster />
270 |     </div>
271 |   );
272 | };
273 | 
274 | export default Body;
275 | 


--------------------------------------------------------------------------------
/components/CTA.tsx:
--------------------------------------------------------------------------------
 1 | const CTA = () => (
 2 |   <SectionWrapper>
 3 |     <div className="custom-screen">
 4 |       <div className="max-w-2xl mx-auto text-center">
 5 |         <h2
 6 |           className="text-gray-800 text-3xl font-semibold sm:text-4xl"
 7 |           id="oss"
 8 |         >
 9 |           QrGPT is Proudly Open Source
10 |         </h2>
11 |         <p className="mt-3 text-gray-600">
12 |           Our source code is available on GitHub.
13 |         </p>
14 |         <a
15 |           href="https://github.com/Nutlope/qrGPT"
16 |           className="mt-4 inline-flex justify-center items-center gap-2 font-medium text-sm text-white bg-gray-800 hover:bg-gray-600 active:bg-gray-900 max-w-[200px] py-2.5 px-4 text-center rounded-lg duration-150"
17 |         >
18 |           <svg
19 |             aria-hidden="true"
20 |             className="h-6 w-6 fill-slate-200 group-hover:fill-slate-700"
21 |           >
22 |             <path d="M12 2C6.477 2 2 6.484 2 12.017c0 4.425 2.865 8.18 6.839 9.504.5.092.682-.217.682-.483 0-.237-.008-.868-.013-1.703-2.782.605-3.369-1.343-3.369-1.343-.454-1.158-1.11-1.466-1.11-1.466-.908-.62.069-.608.069-.608 1.003.07 1.531 1.032 1.531 1.032.892 1.53 2.341 1.088 2.91.832.092-.647.35-1.088.636-1.338-2.22-.253-4.555-1.113-4.555-4.951 0-1.093.39-1.988 1.029-2.688-.103-.253-.446-1.272.098-2.65 0 0 .84-.27 2.75 1.026A9.564 9.564 0 0 1 12 6.844a9.59 9.59 0 0 1 2.504.337c1.909-1.296 2.747-1.027 2.747-1.027.546 1.379.202 2.398.1 2.651.64.7 1.028 1.595 1.028 2.688 0 3.848-2.339 4.695-4.566 4.943.359.309.678.92.678 1.855 0 1.338-.012 2.419-.012 2.747 0 .268.18.58.688.482A10.02 10.02 0 0 0 22 12.017C22 6.484 17.522 2 12 2Z" />
23 |           </svg>
24 |           <span>Star on GitHub</span>
25 |         </a>
26 |       </div>
27 |     </div>
28 |   </SectionWrapper>
29 | );
30 | 
31 | const SectionWrapper = ({ children, ...props }: any) => (
32 |   <section {...props} className={`py-16 ${props.className || ''}`}>
33 |     {children}
34 |   </section>
35 | );
36 | 
37 | export default CTA;
38 | 


--------------------------------------------------------------------------------
/components/Footer.tsx:
--------------------------------------------------------------------------------
 1 | import { V0Logo } from './v0logo';
 2 | 
 3 | const Footer = () => (
 4 |   <footer>
 5 |     <div className="custom-screen pt-16">
 6 |       <div className="mt-10 py-10 border-t items-center justify-between flex">
 7 |         <p className="text-gray-600">
 8 |           Created by{' '}
 9 |           <a
10 |             href="https://twitter.com/nutlope"
11 |             className="hover:underline transition"
12 |           >
13 |             Hassan
14 |           </a>{' '}
15 |           and{' '}
16 |           <a
17 |             href="https://twitter.com/kevinhou22"
18 |             className="hover:underline transition"
19 |           >
20 |             Kevin
21 |           </a>
22 |           .
23 |         </p>
24 |         <div className="flex items-center gap-x-6 text-gray-400">
25 |           <a
26 |             className="border border-slate-200 rounded-md px-3 py-1 tracking-tight flex gap-1 hover:scale-105 transition"
27 |             href="https://v0.dev/"
28 |             target="_blank"
29 |           >
30 |             <span className="text-gray-500">Built with</span>
31 |             <V0Logo width={25} />
32 |           </a>
33 |         </div>
34 |       </div>
35 |     </div>
36 |   </footer>
37 | );
38 | 
39 | export default Footer;
40 | 


--------------------------------------------------------------------------------
/components/GradientWrapper.tsx:
--------------------------------------------------------------------------------
 1 | const GradientWrapper = ({ children, ...props }: any) => (
 2 |   <div
 3 |     {...props}
 4 |     className={`relative overflow-hidden my-16 border-t sm:my-28 ${
 5 |       props.className || ''
 6 |     }`}
 7 |   >
 8 |     <div
 9 |       className="blur-[100px] absolute inset-0 w-full h-full"
10 |       style={{
11 |         background:
12 |           'linear-gradient(202.72deg, rgba(237, 78, 80, 0.05) 14.76%, rgba(152, 103, 240, 0.04) 34.37%, rgba(152, 103, 240, 0) 86.62%)',
13 |       }}
14 |     />
15 |     <div className="relative">{children}</div>
16 |   </div>
17 | );
18 | 
19 | export default GradientWrapper;
20 | 


--------------------------------------------------------------------------------
/components/Hero.tsx:
--------------------------------------------------------------------------------
 1 | 'use client';
 2 | 
 3 | import Image from 'next/image';
 4 | import NavLink from './NavLink';
 5 | 
 6 | let heroImages = ['/1.png', '/6.png', '/3.png', '/4.png', '/5.png', '/2.png'];
 7 | 
 8 | export default function Hero() {
 9 |   return (
10 |     <section>
11 |       <div className="custom-screen pt-28 text-gray-600">
12 |         <div className="space-y-5 max-w-4xl mx-auto text-center">
13 |           <h1 className="text-4xl text-gray-800 font-extrabold mx-auto sm:text-6xl">
14 |             Generate your next AI QR Code in seconds
15 |           </h1>
16 |           <p className="max-w-xl mx-auto">
17 |             QRGPT makes it simple for you to generate cool looking AI QR codes
18 |             in seconds, completely for free.
19 |           </p>
20 |           <div className="flex items-center justify-center gap-x-3 font-medium text-sm">
21 |             <NavLink
22 |               href="/start"
23 |               className="text-white bg-gray-800 hover:bg-gray-600 active:bg-gray-900 "
24 |             >
25 |               Generate your QR Code
26 |             </NavLink>
27 |             <NavLink
28 |               target="_blank"
29 |               href="https://github.com/Nutlope/qrGPT"
30 |               className="text-gray-700 border hover:bg-gray-50"
31 |               scroll={false}
32 |             >
33 |               Learn more
34 |             </NavLink>
35 |           </div>
36 |           <div className="grid sm:grid-cols-3 grid-cols-2 gap-4 pt-10">
37 |             {heroImages.map((image, idx) => (
38 |               <Image
39 |                 key={idx}
40 |                 alt="image"
41 |                 src={image}
42 |                 width={500}
43 |                 height={500}
44 |                 className="rounded-lg"
45 |               />
46 |             ))}
47 |           </div>
48 |         </div>
49 |       </div>
50 |     </section>
51 |   );
52 | }
53 | 


--------------------------------------------------------------------------------
/components/NavLink.tsx:
--------------------------------------------------------------------------------
 1 | import Link from 'next/link';
 2 | 
 3 | const NavLink = ({ children, href, ...props }: any) => (
 4 |   <Link
 5 |     href={href}
 6 |     {...props}
 7 |     className={`py-2.5 px-4 text-center rounded-lg duration-150 ${
 8 |       props?.className || ''
 9 |     }`}
10 |   >
11 |     {children}
12 |   </Link>
13 | );
14 | 
15 | export default NavLink;
16 | 


--------------------------------------------------------------------------------
/components/Navbar.tsx:
--------------------------------------------------------------------------------
  1 | 'use client';
  2 | 
  3 | import Link from 'next/link';
  4 | import { useEffect, useState } from 'react';
  5 | import NavLink from './NavLink';
  6 | import Image from 'next/image';
  7 | import { usePathname, useSearchParams } from 'next/navigation';
  8 | 
  9 | const Navbar = () => {
 10 |   const [state, setState] = useState(false);
 11 | 
 12 |   const navigation = [
 13 |     // { title: 'Testimonials', path: '#testimonials' },
 14 |     { title: 'Homepage', path: '/' },
 15 |   ];
 16 | 
 17 |   const pathname = usePathname();
 18 |   const searchParams = useSearchParams();
 19 | 
 20 |   useEffect(() => {
 21 |     // Add closing the navbar menu when navigating
 22 |     const handleState = () => {
 23 |       document.body.classList.remove('overflow-hidden');
 24 |       setState(false);
 25 |     };
 26 | 
 27 |     handleState();
 28 |   }, [pathname, searchParams]);
 29 | 
 30 |   const handleNavMenu = () => {
 31 |     setState(!state);
 32 |     document.body.classList.toggle('overflow-hidden');
 33 |   };
 34 | 
 35 |   return (
 36 |     <header>
 37 |       <nav
 38 |         className={`bg-white w-full md:static md:text-sm ${
 39 |           state ? 'fixed z-10 h-full' : ''
 40 |         }`}
 41 |       >
 42 |         <div className="custom-screen items-center mx-auto md:flex">
 43 |           <div className="flex items-center justify-between py-3 md:py-5 md:block">
 44 |             <Link href="/" className="flex items-center gap-3">
 45 |               <Image src="/box.svg" alt="logo" width={30} height={30} />
 46 |               <div className="font-bold text-lg">QrGPT</div>
 47 |             </Link>
 48 |             <div className="md:hidden">
 49 |               <button
 50 |                 role="button"
 51 |                 aria-label="Open the menu"
 52 |                 className="text-gray-500 hover:text-gray-800"
 53 |                 onClick={handleNavMenu}
 54 |               >
 55 |                 {state ? (
 56 |                   <svg
 57 |                     xmlns="http://www.w3.org/2000/svg"
 58 |                     className="h-6 w-6"
 59 |                     viewBox="0 0 20 20"
 60 |                     fill="currentColor"
 61 |                   >
 62 |                     <path
 63 |                       fillRule="evenodd"
 64 |                       d="M4.293 4.293a1 1 0 011.414 0L10 8.586l4.293-4.293a1 1 0 111.414 1.414L11.414 10l4.293 4.293a1 1 0 01-1.414 1.414L10 11.414l-4.293 4.293a1 1 0 01-1.414-1.414L8.586 10 4.293 5.707a1 1 0 010-1.414z"
 65 |                       clipRule="evenodd"
 66 |                     />
 67 |                   </svg>
 68 |                 ) : (
 69 |                   <svg
 70 |                     xmlns="http://www.w3.org/2000/svg"
 71 |                     fill="none"
 72 |                     viewBox="0 0 24 24"
 73 |                     strokeWidth={1.5}
 74 |                     stroke="currentColor"
 75 |                     className="w-6 h-6"
 76 |                   >
 77 |                     <path
 78 |                       strokeLinecap="round"
 79 |                       strokeLinejoin="round"
 80 |                       d="M3.75 6.75h16.5M3.75 12h16.5m-16.5 5.25h16.5"
 81 |                     />
 82 |                   </svg>
 83 |                 )}
 84 |               </button>
 85 |             </div>
 86 |           </div>
 87 |           <div
 88 |             className={`flex-1 pb-3 mt-8 md:pb-0 md:mt-0 md:block ${
 89 |               state ? '' : 'hidden'
 90 |             }`}
 91 |           >
 92 |             <ul className="text-gray-700 justify-end items-center space-y-6 md:flex md:space-x-6 md:space-y-0 md:text-gray-600 md:font-medium">
 93 |               {navigation.map((item, idx) => {
 94 |                 return (
 95 |                   <li key={idx} className="duration-150 hover:text-gray-900">
 96 |                     <Link href={item.path} className="block">
 97 |                       {item.title}
 98 |                     </Link>
 99 |                   </li>
100 |                 );
101 |               })}
102 |               <li>
103 |                 <NavLink
104 |                   href="/start"
105 |                   className="block font-medium text-sm text-white bg-gray-800 hover:bg-gray-600 active:bg-gray-900 md:inline"
106 |                 >
107 |                   Generate your QR Code
108 |                 </NavLink>
109 |               </li>
110 |             </ul>
111 |           </div>
112 |         </div>
113 |       </nav>
114 |     </header>
115 |   );
116 | };
117 | 
118 | export default Navbar;
119 | 


--------------------------------------------------------------------------------
/components/PromptSuggestion.tsx:
--------------------------------------------------------------------------------
 1 | type PromptSuggestionProps = {
 2 |   suggestion: string;
 3 |   onClick: () => void;
 4 |   isLoading?: boolean;
 5 | };
 6 | 
 7 | /**
 8 |  * Renders a prompt suggestion pill-shaped button.
 9 |  */
10 | export const PromptSuggestion: React.FC<PromptSuggestionProps> = ({
11 |   suggestion,
12 |   onClick,
13 |   isLoading = false,
14 | }) => {
15 |   return (
16 |     <button
17 |       onClick={() => onClick()}
18 |       disabled={isLoading}
19 |       className={`border p-2 rounded-2xl ${
20 |         !isLoading ? 'cursor-pointer' : 'cursor-not-allowed'
21 |       } hover:bg-gray-100 transition`}
22 |     >
23 |       {suggestion}
24 |     </button>
25 |   );
26 | };
27 | 


--------------------------------------------------------------------------------
/components/QrCard.tsx:
--------------------------------------------------------------------------------
 1 | import Image from 'next/image';
 2 | 
 3 | type QrCardProps = {
 4 |   imageURL?: string;
 5 |   time: string;
 6 | };
 7 | 
 8 | export const QrCard: React.FC<QrCardProps> = ({ imageURL, time }) => {
 9 |   if (!imageURL) {
10 |     return (
11 |       <div>
12 |         <p>Image URL not provided</p>
13 |       </div>
14 |     );
15 |   }
16 | 
17 |   return (
18 |     <div className="relative flex flex-col justify-center items-center gap-y-2 w-[510px] border border-gray-300 rounded shadow group p-2 mx-auto max-w-full">
19 |       <Image
20 |         src={imageURL}
21 |         className="rounded "
22 |         alt="qr code"
23 |         width={480}
24 |         height={480}
25 |       />
26 |       <p className="text-gray-400 text-sm italic">
27 |         QR code took {time} seconds to generate.
28 |       </p>
29 |     </div>
30 |   );
31 | };
32 | 


--------------------------------------------------------------------------------
/components/Testimonials.tsx:
--------------------------------------------------------------------------------
  1 | const Testimonials = () => {
  2 |   const testimonials = [
  3 |     {
  4 |       avatar:
  5 |         'https://images.unsplash.com/photo-1599566150163-29194dcaad36?ixlib=rb-4.0.3&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=387&q=80',
  6 |       name: 'Alex wonderson',
  7 |       title: 'Founder of Lyconf',
  8 |       quote:
  9 |         'As a small business owner, I was doing everything and my workload was increasing. With this startup, I was able to save time so I could focus on the things that matter most: my clients and my family.',
 10 |     },
 11 |     {
 12 |       avatar:
 13 |         'https://images.unsplash.com/photo-1507003211169-0a1dd7228f2d?ixlib=rb-4.0.3&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=387&q=80',
 14 |       name: 'Karim ahmed',
 15 |       title: 'DevOps engineer',
 16 |       quote:
 17 |         "My company's software now is easy to use, saves time and money, and is loved by a lot of users. One customer saved $10k over the course of 3 years and another saves 8 hours per week! Thanks to Blinder.",
 18 |     },
 19 |     {
 20 |       avatar:
 21 |         'https://images.unsplash.com/photo-1534528741775-53994a69daeb?ixlib=rb-4.0.3&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=464&q=80',
 22 |       name: 'Lysa stian',
 23 |       title: 'System manger',
 24 |       quote:
 25 |         'My business was in a dire situation. I had no idea what to do, and I felt like I was losing hope. Then I found this Startup and everything changed. It helped me create automated sales.',
 26 |     },
 27 |     {
 28 |       avatar: 'https://randomuser.me/api/portraits/women/79.jpg',
 29 |       name: 'Angela stian',
 30 |       title: 'Product designer',
 31 |       quote:
 32 |         'One day, my company was about to go under and I had no idea what to do. I found Blinder and it helped me get my business back on track.Now, my company is flourishing and I see new opportunities.',
 33 |     },
 34 |     {
 35 |       avatar:
 36 |         'https://images.unsplash.com/photo-1464863979621-258859e62245?ixlib=rb-4.0.3&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=386&q=80',
 37 |       name: 'Jurica koletic',
 38 |       title: 'Founder of Let’s code',
 39 |       quote:
 40 |         'In these difficult economic times, doing business is tough. Funding is hard to come by and many entrepreneurs are struggling to keep their doors open. but when I found this startup everything changed.',
 41 |     },
 42 |     {
 43 |       avatar:
 44 |         'https://images.unsplash.com/photo-1590038767624-dac5740a997b?ixlib=rb-4.0.3&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=387&q=80',
 45 |       name: 'Kavi laron',
 46 |       title: 'Full stack engineer',
 47 |       quote:
 48 |         'We all know how costly it is to find good help. I was faced with this problem when I lost my data entry staff and my business was on the brink of going under. Thankfully, Blinder saved the day.',
 49 |     },
 50 |   ];
 51 | 
 52 |   return (
 53 |     <SectionWrapper className="pb-0">
 54 |       <div id="testimonials" className="max-w-screen-xl mx-auto px-4 md:px-8">
 55 |         <div className="max-w-2xl sm:text-center md:mx-auto">
 56 |           <h2 className="text-gray-800 text-3xl font-semibold sm:text-4xl">
 57 |             See what others saying about us
 58 |           </h2>
 59 |           <p className="mt-3 text-gray-600">
 60 |             Listen to what our users are saying about us.
 61 |           </p>
 62 |         </div>
 63 |         <div className="mt-12">
 64 |           <ul className="grid gap-6 md:grid-cols-2 lg:grid-cols-3">
 65 |             {testimonials.map((item, idx) => (
 66 |               <li key={idx} className="bg-white border p-4 rounded-xl">
 67 |                 <figure>
 68 |                   <div className="flex items-center gap-x-4">
 69 |                     {/* eslint-disable-next-line @next/next/no-img-element */}
 70 |                     <img
 71 |                       src={item.avatar}
 72 |                       className="w-14 h-14 object-cover rounded-full"
 73 |                       alt={item.name}
 74 |                     />
 75 |                     <div>
 76 |                       <span className="block text-gray-800 font-semibold">
 77 |                         {item.name}
 78 |                       </span>
 79 |                       <span className="block text-gray-600 text-sm mt-0.5">
 80 |                         {item.title}
 81 |                       </span>
 82 |                     </div>
 83 |                   </div>
 84 |                   <blockquote>
 85 |                     <p className="mt-6 text-gray-700">{item.quote}</p>
 86 |                   </blockquote>
 87 |                 </figure>
 88 |               </li>
 89 |             ))}
 90 |           </ul>
 91 |         </div>
 92 |       </div>
 93 |     </SectionWrapper>
 94 |   );
 95 | };
 96 | 
 97 | const SectionWrapper = ({ children, ...props }: any) => (
 98 |   <section {...props} className={`py-16 ${props.className || ''}`}>
 99 |     {children}
100 |   </section>
101 | );
102 | 
103 | export default Testimonials;
104 | 


--------------------------------------------------------------------------------
/components/ui/alert.tsx:
--------------------------------------------------------------------------------
 1 | import * as React from 'react';
 2 | import { cva, type VariantProps } from 'class-variance-authority';
 3 | 
 4 | import { cn } from '@/utils/utils';
 5 | 
 6 | const alertVariants = cva(
 7 |   'relative w-full rounded-lg border p-4 [&>svg~*]:pl-7 [&>svg+div]:translate-y-[-3px] [&>svg]:absolute [&>svg]:left-4 [&>svg]:top-4 [&>svg]:text-foreground',
 8 |   {
 9 |     variants: {
10 |       variant: {
11 |         default: 'bg-background text-foreground',
12 |         destructive:
13 |           'border-destructive/50 text-destructive dark:border-destructive [&>svg]:text-destructive',
14 |       },
15 |     },
16 |     defaultVariants: {
17 |       variant: 'default',
18 |     },
19 |   },
20 | );
21 | 
22 | const Alert = React.forwardRef<
23 |   HTMLDivElement,
24 |   React.HTMLAttributes<HTMLDivElement> & VariantProps<typeof alertVariants>
25 | >(({ className, variant, ...props }, ref) => (
26 |   <div
27 |     ref={ref}
28 |     role="alert"
29 |     className={cn(alertVariants({ variant }), className)}
30 |     {...props}
31 |   />
32 | ));
33 | Alert.displayName = 'Alert';
34 | 
35 | const AlertTitle = React.forwardRef<
36 |   HTMLParagraphElement,
37 |   React.HTMLAttributes<HTMLHeadingElement>
38 | >(({ className, ...props }, ref) => (
39 |   <h5
40 |     ref={ref}
41 |     className={cn('mb-1 font-medium leading-none tracking-tight', className)}
42 |     {...props}
43 |   />
44 | ));
45 | AlertTitle.displayName = 'AlertTitle';
46 | 
47 | const AlertDescription = React.forwardRef<
48 |   HTMLParagraphElement,
49 |   React.HTMLAttributes<HTMLParagraphElement>
50 | >(({ className, ...props }, ref) => (
51 |   <div
52 |     ref={ref}
53 |     className={cn('text-sm [&_p]:leading-relaxed', className)}
54 |     {...props}
55 |   />
56 | ));
57 | AlertDescription.displayName = 'AlertDescription';
58 | 
59 | export { Alert, AlertTitle, AlertDescription };
60 | 


--------------------------------------------------------------------------------
/components/ui/button.tsx:
--------------------------------------------------------------------------------
 1 | import * as React from 'react';
 2 | import { Slot } from '@radix-ui/react-slot';
 3 | import { cva, type VariantProps } from 'class-variance-authority';
 4 | 
 5 | import { cn } from '@/utils/utils';
 6 | 
 7 | const buttonVariants = cva(
 8 |   'inline-flex items-center justify-center rounded-md text-sm font-medium ring-offset-background transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-90',
 9 |   {
10 |     variants: {
11 |       variant: {
12 |         default: 'bg-primary text-primary-foreground hover:bg-primary/90',
13 |         destructive:
14 |           'bg-destructive text-destructive-foreground hover:bg-destructive/90',
15 |         outline:
16 |           'border border-input bg-background hover:bg-accent hover:text-accent-foreground',
17 |         secondary:
18 |           'bg-secondary text-secondary-foreground hover:bg-secondary/80',
19 |         ghost: 'hover:bg-accent hover:text-accent-foreground',
20 |         link: 'text-primary underline-offset-4 hover:underline',
21 |       },
22 |       size: {
23 |         default: 'h-10 px-4 py-2',
24 |         sm: 'h-9 rounded-md px-3',
25 |         lg: 'h-11 rounded-md px-8',
26 |         icon: 'h-10 w-10',
27 |       },
28 |     },
29 |     defaultVariants: {
30 |       variant: 'default',
31 |       size: 'default',
32 |     },
33 |   },
34 | );
35 | 
36 | export interface ButtonProps
37 |   extends React.ButtonHTMLAttributes<HTMLButtonElement>,
38 |     VariantProps<typeof buttonVariants> {
39 |   asChild?: boolean;
40 | }
41 | 
42 | const Button = React.forwardRef<HTMLButtonElement, ButtonProps>(
43 |   ({ className, variant, size, asChild = false, ...props }, ref) => {
44 |     const Comp = asChild ? Slot : 'button';
45 |     return (
46 |       <Comp
47 |         className={cn(buttonVariants({ variant, size, className }))}
48 |         ref={ref}
49 |         {...props}
50 |       />
51 |     );
52 |   },
53 | );
54 | Button.displayName = 'Button';
55 | 
56 | export { Button, buttonVariants };
57 | 


--------------------------------------------------------------------------------
/components/ui/form.tsx:
--------------------------------------------------------------------------------
  1 | import * as React from 'react';
  2 | import * as LabelPrimitive from '@radix-ui/react-label';
  3 | import { Slot } from '@radix-ui/react-slot';
  4 | import {
  5 |   Controller,
  6 |   ControllerProps,
  7 |   FieldPath,
  8 |   FieldValues,
  9 |   FormProvider,
 10 |   useFormContext,
 11 | } from 'react-hook-form';
 12 | 
 13 | import { cn } from '@/utils/utils';
 14 | import { Label } from '@/components/ui/label';
 15 | 
 16 | const Form = FormProvider;
 17 | 
 18 | type FormFieldContextValue<
 19 |   TFieldValues extends FieldValues = FieldValues,
 20 |   TName extends FieldPath<TFieldValues> = FieldPath<TFieldValues>,
 21 | > = {
 22 |   name: TName;
 23 | };
 24 | 
 25 | const FormFieldContext = React.createContext<FormFieldContextValue>(
 26 |   {} as FormFieldContextValue,
 27 | );
 28 | 
 29 | const FormField = <
 30 |   TFieldValues extends FieldValues = FieldValues,
 31 |   TName extends FieldPath<TFieldValues> = FieldPath<TFieldValues>,
 32 | >({
 33 |   ...props
 34 | }: ControllerProps<TFieldValues, TName>) => {
 35 |   return (
 36 |     <FormFieldContext.Provider value={{ name: props.name }}>
 37 |       <Controller {...props} />
 38 |     </FormFieldContext.Provider>
 39 |   );
 40 | };
 41 | 
 42 | const useFormField = () => {
 43 |   const fieldContext = React.useContext(FormFieldContext);
 44 |   const itemContext = React.useContext(FormItemContext);
 45 |   const { getFieldState, formState } = useFormContext();
 46 | 
 47 |   const fieldState = getFieldState(fieldContext.name, formState);
 48 | 
 49 |   if (!fieldContext) {
 50 |     throw new Error('useFormField should be used within <FormField>');
 51 |   }
 52 | 
 53 |   const { id } = itemContext;
 54 | 
 55 |   return {
 56 |     id,
 57 |     name: fieldContext.name,
 58 |     formItemId: `${id}-form-item`,
 59 |     formDescriptionId: `${id}-form-item-description`,
 60 |     formMessageId: `${id}-form-item-message`,
 61 |     ...fieldState,
 62 |   };
 63 | };
 64 | 
 65 | type FormItemContextValue = {
 66 |   id: string;
 67 | };
 68 | 
 69 | const FormItemContext = React.createContext<FormItemContextValue>(
 70 |   {} as FormItemContextValue,
 71 | );
 72 | 
 73 | const FormItem = React.forwardRef<
 74 |   HTMLDivElement,
 75 |   React.HTMLAttributes<HTMLDivElement>
 76 | >(({ className, ...props }, ref) => {
 77 |   const id = React.useId();
 78 | 
 79 |   return (
 80 |     <FormItemContext.Provider value={{ id }}>
 81 |       <div ref={ref} className={cn('space-y-2', className)} {...props} />
 82 |     </FormItemContext.Provider>
 83 |   );
 84 | });
 85 | FormItem.displayName = 'FormItem';
 86 | 
 87 | const FormLabel = React.forwardRef<
 88 |   React.ElementRef<typeof LabelPrimitive.Root>,
 89 |   React.ComponentPropsWithoutRef<typeof LabelPrimitive.Root>
 90 | >(({ className, ...props }, ref) => {
 91 |   const { error, formItemId } = useFormField();
 92 | 
 93 |   return (
 94 |     <Label
 95 |       ref={ref}
 96 |       className={cn(error && 'text-destructive', className)}
 97 |       htmlFor={formItemId}
 98 |       {...props}
 99 |     />
100 |   );
101 | });
102 | FormLabel.displayName = 'FormLabel';
103 | 
104 | const FormControl = React.forwardRef<
105 |   React.ElementRef<typeof Slot>,
106 |   React.ComponentPropsWithoutRef<typeof Slot>
107 | >(({ ...props }, ref) => {
108 |   const { error, formItemId, formDescriptionId, formMessageId } =
109 |     useFormField();
110 | 
111 |   return (
112 |     <Slot
113 |       ref={ref}
114 |       id={formItemId}
115 |       aria-describedby={
116 |         !error
117 |           ? `${formDescriptionId}`
118 |           : `${formDescriptionId} ${formMessageId}`
119 |       }
120 |       aria-invalid={!!error}
121 |       {...props}
122 |     />
123 |   );
124 | });
125 | FormControl.displayName = 'FormControl';
126 | 
127 | const FormDescription = React.forwardRef<
128 |   HTMLParagraphElement,
129 |   React.HTMLAttributes<HTMLParagraphElement>
130 | >(({ className, ...props }, ref) => {
131 |   const { formDescriptionId } = useFormField();
132 | 
133 |   return (
134 |     <p
135 |       ref={ref}
136 |       id={formDescriptionId}
137 |       className={cn('text-sm text-muted-foreground', className)}
138 |       {...props}
139 |     />
140 |   );
141 | });
142 | FormDescription.displayName = 'FormDescription';
143 | 
144 | const FormMessage = React.forwardRef<
145 |   HTMLParagraphElement,
146 |   React.HTMLAttributes<HTMLParagraphElement>
147 | >(({ className, children, ...props }, ref) => {
148 |   const { error, formMessageId } = useFormField();
149 |   const body = error ? String(error?.message) : children;
150 | 
151 |   if (!body) {
152 |     return null;
153 |   }
154 | 
155 |   return (
156 |     <p
157 |       ref={ref}
158 |       id={formMessageId}
159 |       className={cn('text-sm font-medium text-destructive', className)}
160 |       {...props}
161 |     >
162 |       {body}
163 |     </p>
164 |   );
165 | });
166 | FormMessage.displayName = 'FormMessage';
167 | 
168 | export {
169 |   useFormField,
170 |   Form,
171 |   FormItem,
172 |   FormLabel,
173 |   FormControl,
174 |   FormDescription,
175 |   FormMessage,
176 |   FormField,
177 | };
178 | 


--------------------------------------------------------------------------------
/components/ui/input.tsx:
--------------------------------------------------------------------------------
 1 | import * as React from 'react';
 2 | 
 3 | import { cn } from '@/utils/utils';
 4 | 
 5 | export interface InputProps
 6 |   extends React.InputHTMLAttributes<HTMLInputElement> {}
 7 | 
 8 | const Input = React.forwardRef<HTMLInputElement, InputProps>(
 9 |   ({ className, type, ...props }, ref) => {
10 |     return (
11 |       <input
12 |         type={type}
13 |         className={cn(
14 |           'flex h-10 w-full rounded-md border border-input bg-background px-3 py-2 text-sm ring-offset-background file:border-0 file:bg-transparent file:text-sm file:font-medium placeholder:text-muted-foreground  disabled:cursor-not-allowed disabled:opacity-50',
15 |           className,
16 |         )}
17 |         ref={ref}
18 |         {...props}
19 |       />
20 |     );
21 |   },
22 | );
23 | Input.displayName = 'Input';
24 | 
25 | export { Input };
26 | 


--------------------------------------------------------------------------------
/components/ui/label.tsx:
--------------------------------------------------------------------------------
 1 | 'use client';
 2 | 
 3 | import * as React from 'react';
 4 | import * as LabelPrimitive from '@radix-ui/react-label';
 5 | import { cva, type VariantProps } from 'class-variance-authority';
 6 | 
 7 | import { cn } from '@/utils/utils';
 8 | 
 9 | const labelVariants = cva(
10 |   'text-sm font-medium leading-none peer-disabled:cursor-not-allowed peer-disabled:opacity-70',
11 | );
12 | 
13 | const Label = React.forwardRef<
14 |   React.ElementRef<typeof LabelPrimitive.Root>,
15 |   React.ComponentPropsWithoutRef<typeof LabelPrimitive.Root> &
16 |     VariantProps<typeof labelVariants>
17 | >(({ className, ...props }, ref) => (
18 |   <LabelPrimitive.Root
19 |     ref={ref}
20 |     className={cn(labelVariants(), className)}
21 |     {...props}
22 |   />
23 | ));
24 | Label.displayName = LabelPrimitive.Root.displayName;
25 | 
26 | export { Label };
27 | 


--------------------------------------------------------------------------------
/components/ui/loading-dots.module.css:
--------------------------------------------------------------------------------
 1 | .loading {
 2 |   display: inline-flex;
 3 |   align-items: center;
 4 | }
 5 | 
 6 | .loading .spacer {
 7 |   margin-right: 2px;
 8 | }
 9 | 
10 | .loading span {
11 |   animation-name: blink;
12 |   animation-duration: 1.4s;
13 |   animation-iteration-count: infinite;
14 |   animation-fill-mode: both;
15 |   width: 5px;
16 |   height: 5px;
17 |   border-radius: 50%;
18 |   display: inline-block;
19 |   margin: 0 1px;
20 | }
21 | 
22 | .loading span:nth-of-type(2) {
23 |   animation-delay: 0.2s;
24 | }
25 | 
26 | .loading span:nth-of-type(3) {
27 |   animation-delay: 0.4s;
28 | }
29 | 
30 | .loading2 {
31 |   display: inline-flex;
32 |   align-items: center;
33 | }
34 | 
35 | .loading2 .spacer {
36 |   margin-right: 2px;
37 | }
38 | 
39 | .loading2 span {
40 |   animation-name: blink;
41 |   animation-duration: 1.4s;
42 |   animation-iteration-count: infinite;
43 |   animation-fill-mode: both;
44 |   width: 4px;
45 |   height: 4px;
46 |   border-radius: 50%;
47 |   display: inline-block;
48 |   margin: 0 1px;
49 | }
50 | 
51 | .loading2 span:nth-of-type(2) {
52 |   animation-delay: 0.2s;
53 | }
54 | 
55 | .loading2 span:nth-of-type(3) {
56 |   animation-delay: 0.4s;
57 | }
58 | 
59 | @keyframes blink {
60 |   0% {
61 |     opacity: 0.2;
62 |   }
63 |   20% {
64 |     opacity: 1;
65 |   }
66 |   100% {
67 |     opacity: 0.2;
68 |   }
69 | }
70 | 


--------------------------------------------------------------------------------
/components/ui/loadingdots.tsx:
--------------------------------------------------------------------------------
 1 | import styles from './loading-dots.module.css';
 2 | 
 3 | const LoadingDots = ({
 4 |   color = '#000',
 5 |   style = 'small',
 6 | }: {
 7 |   color?: string;
 8 |   style: string;
 9 | }) => {
10 |   return (
11 |     <span className={style == 'small' ? styles.loading2 : styles.loading}>
12 |       <span style={{ backgroundColor: color }} />
13 |       <span style={{ backgroundColor: color }} />
14 |       <span style={{ backgroundColor: color }} />
15 |     </span>
16 |   );
17 | };
18 | 
19 | export default LoadingDots;
20 | 
21 | LoadingDots.defaultProps = {
22 |   style: 'small',
23 | };
24 | 


--------------------------------------------------------------------------------
/components/ui/textarea.tsx:
--------------------------------------------------------------------------------
 1 | import * as React from 'react';
 2 | 
 3 | import { cn } from '@/utils/utils';
 4 | 
 5 | export interface TextareaProps
 6 |   extends React.TextareaHTMLAttributes<HTMLTextAreaElement> {}
 7 | 
 8 | const Textarea = React.forwardRef<HTMLTextAreaElement, TextareaProps>(
 9 |   ({ className, ...props }, ref) => {
10 |     return (
11 |       <textarea
12 |         className={cn(
13 |           'flex min-h-[80px] w-full rounded-md border border-input bg-background px-3 py-2 text-sm ring-offset-background placeholder:text-muted-foreground disabled:cursor-not-allowed disabled:opacity-50',
14 |           className,
15 |         )}
16 |         ref={ref}
17 |         {...props}
18 |       />
19 |     );
20 |   },
21 | );
22 | Textarea.displayName = 'Textarea';
23 | 
24 | export { Textarea };
25 | 


--------------------------------------------------------------------------------
/components/v0logo.tsx:
--------------------------------------------------------------------------------
 1 | import { cn } from '@/utils/utils';
 2 | import React from 'react';
 3 | 
 4 | export function V0Logo({
 5 |   width = 40,
 6 |   height,
 7 |   className,
 8 |   ...props
 9 | }: React.ComponentPropsWithoutRef<'svg'>) {
10 |   return (
11 |     <svg
12 |       width={width}
13 |       height={height}
14 |       viewBox="0 0 40 20"
15 |       fill="none"
16 |       xmlns="http://www.w3.org/2000/svg"
17 |       className={cn('text-zinc-950', className)}
18 |       {...props}
19 |     >
20 |       <path
21 |         d="M23.3919 0H32.9188C36.7819 0 39.9136 3.13165 39.9136 6.99475V16.0805H36.0006V6.99475C36.0006 6.90167 35.9969 6.80925 35.9898 6.71766L26.4628 16.079C26.4949 16.08 26.5272 16.0805 26.5595 16.0805H36.0006V19.7762H26.5595C22.6964 19.7762 19.4788 16.6139 19.4788 12.7508V3.68923H23.3919V12.7508C23.3919 12.9253 23.4054 13.0977 23.4316 13.2668L33.1682 3.6995C33.0861 3.6927 33.003 3.68923 32.9188 3.68923H23.3919V0Z"
22 |         fill="currentColor"
23 |       />
24 |       <path
25 |         d="M13.7688 19.0956L0 3.68759H5.53933L13.6231 12.7337V3.68759H17.7535V17.5746C17.7535 19.6705 15.1654 20.6584 13.7688 19.0956Z"
26 |         fill="currentColor"
27 |       />
28 |     </svg>
29 |   );
30 | }
31 | 


--------------------------------------------------------------------------------
/next.config.js:
--------------------------------------------------------------------------------
 1 | /** @type {import('next').NextConfig} */
 2 | const nextConfig = {
 3 |   images: {
 4 |     domains: [
 5 |       'pbxt.replicate.delivery',
 6 |       'g4yqcv8qdhf169fk.public.blob.vercel-storage.com',
 7 |     ],
 8 |   },
 9 | };
10 | 
11 | module.exports = nextConfig;
12 | 


--------------------------------------------------------------------------------
/package.json:
--------------------------------------------------------------------------------
 1 | {
 2 |   "name": "qr-gpt",
 3 |   "version": "0.1.0",
 4 |   "private": true,
 5 |   "scripts": {
 6 |     "dev": "next dev",
 7 |     "build": "next build",
 8 |     "start": "next start",
 9 |     "lint": "next lint",
10 |     "format": "prettier --write ."
11 |   },
12 |   "dependencies": {
13 |     "@hookform/resolvers": "^3.3.1",
14 |     "@radix-ui/react-label": "^2.0.2",
15 |     "@radix-ui/react-slot": "^1.0.2",
16 |     "@tailwindcss/forms": "^0.5.6",
17 |     "@types/node": "20.6.2",
18 |     "@types/react": "18.2.21",
19 |     "@types/react-dom": "18.2.7",
20 |     "@upstash/ratelimit": "^0.4.4",
21 |     "@vercel/analytics": "^1.0.2",
22 |     "@vercel/blob": "^0.12.4",
23 |     "@vercel/kv": "^0.2.2",
24 |     "autoprefixer": "10.4.15",
25 |     "class-variance-authority": "^0.7.0",
26 |     "clsx": "^2.0.0",
27 |     "lucide-react": "^0.279.0",
28 |     "nanoid": "^5.0.1",
29 |     "next": "^13.5.2",
30 |     "next-plausible": "^3.11.3",
31 |     "postcss": "8.4.29",
32 |     "prettier": "^3.0.3",
33 |     "react": "18.2.0",
34 |     "react-dom": "18.2.0",
35 |     "react-hook-form": "^7.46.1",
36 |     "react-hot-toast": "^2.4.1",
37 |     "replicate": "^0.18.0",
38 |     "tailwind-merge": "^1.14.0",
39 |     "tailwindcss": "3.3.3",
40 |     "tailwindcss-animate": "^1.0.7",
41 |     "typescript": "5.2.2",
42 |     "zod": "^3.22.2"
43 |   },
44 |   "devDependencies": {
45 |     "@tailwindcss/typography": "^0.5.10",
46 |     "eslint": "8.49.0",
47 |     "eslint-config-next": "13.4.19"
48 |   }
49 | }
50 | 


--------------------------------------------------------------------------------
/postcss.config.js:
--------------------------------------------------------------------------------
1 | module.exports = {
2 |   plugins: {
3 |     tailwindcss: {},
4 |     autoprefixer: {},
5 |   },
6 | };
7 | 


--------------------------------------------------------------------------------
/public/1.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/Nutlope/qrGPT/ff11bf70e3463f0a1f49fedfa7522bb6b83d5627/public/1.png


--------------------------------------------------------------------------------
/public/2.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/Nutlope/qrGPT/ff11bf70e3463f0a1f49fedfa7522bb6b83d5627/public/2.png


--------------------------------------------------------------------------------
/public/3.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/Nutlope/qrGPT/ff11bf70e3463f0a1f49fedfa7522bb6b83d5627/public/3.png


--------------------------------------------------------------------------------
/public/4.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/Nutlope/qrGPT/ff11bf70e3463f0a1f49fedfa7522bb6b83d5627/public/4.png


--------------------------------------------------------------------------------
/public/5.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/Nutlope/qrGPT/ff11bf70e3463f0a1f49fedfa7522bb6b83d5627/public/5.png


--------------------------------------------------------------------------------
/public/6.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/Nutlope/qrGPT/ff11bf70e3463f0a1f49fedfa7522bb6b83d5627/public/6.png


--------------------------------------------------------------------------------
/public/7.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/Nutlope/qrGPT/ff11bf70e3463f0a1f49fedfa7522bb6b83d5627/public/7.png


--------------------------------------------------------------------------------
/public/box.svg:
--------------------------------------------------------------------------------
1 | <svg id="Layer_1" enable-background="new 0 0 512 512" height="512" viewBox="0 0 512 512" width="512" xmlns="http://www.w3.org/2000/svg"><g><path d="" style="fill:none;stroke:rgb(0,0,0);stroke-width:32;stroke-linecap:round;stroke-linejoin:round;stroke-miterlimit:10"/><path d="" style="fill:none;stroke:rgb(0,0,0);stroke-width:32;stroke-linecap:round;stroke-linejoin:round;stroke-miterlimit:10"/><path d="m236.94 237.109-230-96.842c-3.295-1.388-6.94 1.032-6.94 4.608v258.899c0 6.542 3.983 12.426 10.058 14.855l223.085 89.234c3.284 1.314 6.857-1.105 6.857-4.642v-261.504c0-2.012-1.206-3.827-3.06-4.608z"/><path d="m257.94 209.596 222.315-93.606c3.996-1.682 4.103-7.306.174-9.139l-217.663-101.576c-4.289-2.001-9.243-2.001-13.532 0l-217.663 101.576c-3.929 1.833-3.822 7.457.174 9.139l222.315 93.606c1.24.523 2.64.523 3.88 0z"/><path d="m272 241.717v261.504c0 3.537 3.573 5.956 6.857 4.642l223.085-89.234c6.074-2.43 10.058-8.313 10.058-14.855v-258.899c0-3.576-3.645-5.996-6.94-4.608l-230 96.842c-1.854.781-3.06 2.596-3.06 4.608z"/></g></svg>


--------------------------------------------------------------------------------
/public/next.svg:
--------------------------------------------------------------------------------
1 | <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 394 80"><path fill="#000" d="M262 0h68.5v12.7h-27.2v66.6h-13.6V12.7H262V0ZM149 0v12.7H94v20.4h44.3v12.6H94v21h55v12.6H80.5V0h68.7zm34.3 0h-17.8l63.8 79.4h17.9l-32-39.7 32-39.6h-17.9l-23 28.6-23-28.6zm18.3 56.7-9-11-27.1 33.7h17.8l18.3-22.7z"/><path fill="#000" d="M81 79.3 17 0H0v79.3h13.6V17l50.2 62.3H81Zm252.6-.4c-1 0-1.8-.4-2.5-1s-1.1-1.6-1.1-2.6.3-1.8 1-2.5 1.6-1 2.6-1 1.8.3 2.5 1a3.4 3.4 0 0 1 .6 4.3 3.7 3.7 0 0 1-3 1.8zm23.2-33.5h6v23.3c0 2.1-.4 4-1.3 5.5a9.1 9.1 0 0 1-3.8 3.5c-1.6.8-3.5 1.3-5.7 1.3-2 0-3.7-.4-5.3-1s-2.8-1.8-3.7-3.2c-.9-1.3-1.4-3-1.4-5h6c.1.8.3 1.6.7 2.2s1 1.2 1.6 1.5c.7.4 1.5.5 2.4.5 1 0 1.8-.2 2.4-.6a4 4 0 0 0 1.6-1.8c.3-.8.5-1.8.5-3V45.5zm30.9 9.1a4.4 4.4 0 0 0-2-3.3 7.5 7.5 0 0 0-4.3-1.1c-1.3 0-2.4.2-3.3.5-.9.4-1.6 1-2 1.6a3.5 3.5 0 0 0-.3 4c.3.5.7.9 1.3 1.2l1.8 1 2 .5 3.2.8c1.3.3 2.5.7 3.7 1.2a13 13 0 0 1 3.2 1.8 8.1 8.1 0 0 1 3 6.5c0 2-.5 3.7-1.5 5.1a10 10 0 0 1-4.4 3.5c-1.8.8-4.1 1.2-6.8 1.2-2.6 0-4.9-.4-6.8-1.2-2-.8-3.4-2-4.5-3.5a10 10 0 0 1-1.7-5.6h6a5 5 0 0 0 3.5 4.6c1 .4 2.2.6 3.4.6 1.3 0 2.5-.2 3.5-.6 1-.4 1.8-1 2.4-1.7a4 4 0 0 0 .8-2.4c0-.9-.2-1.6-.7-2.2a11 11 0 0 0-2.1-1.4l-3.2-1-3.8-1c-2.8-.7-5-1.7-6.6-3.2a7.2 7.2 0 0 1-2.4-5.7 8 8 0 0 1 1.7-5 10 10 0 0 1 4.3-3.5c2-.8 4-1.2 6.4-1.2 2.3 0 4.4.4 6.2 1.2 1.8.8 3.2 2 4.3 3.4 1 1.4 1.5 3 1.5 5h-5.8z"/></svg>


--------------------------------------------------------------------------------
/public/og-image.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/Nutlope/qrGPT/ff11bf70e3463f0a1f49fedfa7522bb6b83d5627/public/og-image.png


--------------------------------------------------------------------------------
/public/vercel.svg:
--------------------------------------------------------------------------------
1 | <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 283 64"><path fill="black" d="M141 16c-11 0-19 7-19 18s9 18 20 18c7 0 13-3 16-7l-7-5c-2 3-6 4-9 4-5 0-9-3-10-7h28v-3c0-11-8-18-19-18zm-9 15c1-4 4-7 9-7s8 3 9 7h-18zm117-15c-11 0-19 7-19 18s9 18 20 18c6 0 12-3 16-7l-8-5c-2 3-5 4-8 4-5 0-9-3-11-7h28l1-3c0-11-8-18-19-18zm-10 15c2-4 5-7 10-7s8 3 9 7h-19zm-39 3c0 6 4 10 10 10 4 0 7-2 9-5l8 5c-3 5-9 8-17 8-11 0-19-7-19-18s8-18 19-18c8 0 14 3 17 8l-8 5c-2-3-5-5-9-5-6 0-10 4-10 10zm83-29v46h-9V5h9zM37 0l37 64H0L37 0zm92 5-27 48L74 5h10l18 30 17-30h10zm59 12v10l-3-1c-6 0-10 4-10 10v15h-9V17h9v9c0-5 6-9 13-9z"/></svg>


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


--------------------------------------------------------------------------------
/tsconfig.json:
--------------------------------------------------------------------------------
 1 | {
 2 |   "compilerOptions": {
 3 |     "target": "es5",
 4 |     "lib": ["dom", "dom.iterable", "esnext"],
 5 |     "allowJs": true,
 6 |     "skipLibCheck": true,
 7 |     "strict": true,
 8 |     "noEmit": true,
 9 |     "esModuleInterop": true,
10 |     "module": "esnext",
11 |     "moduleResolution": "bundler",
12 |     "resolveJsonModule": true,
13 |     "isolatedModules": true,
14 |     "jsx": "preserve",
15 |     "incremental": true,
16 |     "plugins": [
17 |       {
18 |         "name": "next"
19 |       }
20 |     ],
21 |     "paths": {
22 |       "@/*": ["./*"]
23 |     }
24 |   },
25 |   "include": ["next-env.d.ts", "**/*.ts", "**/*.tsx", ".next/types/**/*.ts"],
26 |   "exclude": ["node_modules"]
27 | }
28 | 


--------------------------------------------------------------------------------
/utils/ReplicateClient.ts:
--------------------------------------------------------------------------------
 1 | import { getEnv, ENV_KEY } from '@/utils/env';
 2 | import Replicate from 'replicate';
 3 | import { QrCodeControlNetRequest, QrCodeControlNetResponse } from './types';
 4 | 
 5 | export class ReplicateClient {
 6 |   replicate: Replicate;
 7 | 
 8 |   constructor(apiKey: string) {
 9 |     this.replicate = new Replicate({
10 |       auth: apiKey,
11 |     });
12 |   }
13 | 
14 |   /**
15 |    * Generate a QR code.
16 |    */
17 |   generateQrCode = async (
18 |     request: QrCodeControlNetRequest,
19 |   ): Promise<string> => {
20 |     const output = (await this.replicate.run(
21 |       'zylim0702/qr_code_controlnet:628e604e13cf63d8ec58bd4d238474e8986b054bc5e1326e50995fdbc851c557',
22 |       {
23 |         input: {
24 |           url: request.url,
25 |           prompt: request.prompt,
26 |           qr_conditioning_scale: request.qr_conditioning_scale,
27 |           num_inference_steps: request.num_inference_steps,
28 |           guidance_scale: request.guidance_scale,
29 |           negative_prompt: request.negative_prompt,
30 |         },
31 |       },
32 |     )) as QrCodeControlNetResponse;
33 | 
34 |     if (!output) {
35 |       throw new Error('Failed to generate QR code');
36 |     }
37 | 
38 |     return output[0];
39 |   };
40 | }
41 | 
42 | const apiKey = getEnv(ENV_KEY.REPLICATE_API_KEY);
43 | if (!apiKey) {
44 |   throw new Error('REPLICATE_API_KEY is not set');
45 | }
46 | export const replicateClient = new ReplicateClient(apiKey);
47 | 


--------------------------------------------------------------------------------
/utils/downloadQrCode.ts:
--------------------------------------------------------------------------------
 1 | function forceDownload(blobUrl: string, filename: string) {
 2 |   let a: any = document.createElement('a');
 3 |   a.download = filename;
 4 |   a.href = blobUrl;
 5 |   document.body.appendChild(a);
 6 |   a.click();
 7 |   a.remove();
 8 | }
 9 | 
10 | export default function downloadQrCode(url: string, filename: string) {
11 |   fetch(url, {
12 |     headers: new Headers({
13 |       Origin: location.origin,
14 |     }),
15 |     mode: 'cors',
16 |   })
17 |     .then((response) => response.blob())
18 |     .then((blob) => {
19 |       let blobUrl = window.URL.createObjectURL(blob);
20 |       forceDownload(blobUrl, filename);
21 |     })
22 |     .catch((e) => console.error(e));
23 | }
24 | 


--------------------------------------------------------------------------------
/utils/env.ts:
--------------------------------------------------------------------------------
 1 | export enum ENV_KEY {
 2 |   REPLICATE_API_KEY = 'REPLICATE_API_KEY',
 3 | }
 4 | 
 5 | /**
 6 |  * Retrieves the value of the specified environment variable.
 7 |  *
 8 |  * @param {ENV_KEY} key - The key of the environment variable to retrieve.
 9 |  * @param {string | null} fallback - The fallback value to return if the environment variable is not found. Defaults to null.
10 |  * @return {string | null} - The value of the environment variable, or the fallback value if it is not found.
11 |  */
12 | export const getEnv = (key: ENV_KEY): string | null => {
13 |   switch (key) {
14 |     case ENV_KEY.REPLICATE_API_KEY:
15 |       return process.env[key] ?? null;
16 |   }
17 | };
18 | 


--------------------------------------------------------------------------------
/utils/service.ts:
--------------------------------------------------------------------------------
 1 | export interface QrGenerateRequest {
 2 |   /**
 3 |    * URL that the QR code will point to.
 4 |    */
 5 |   url: string;
 6 | 
 7 |   /**
 8 |    * Accompanying text prompt that will decide the style or theme of the code.
 9 |    */
10 |   prompt: string;
11 | 
12 |   /**
13 |    * Conditioning scale for qr controlnet
14 |    */
15 |   qr_conditioning_scale?: number;
16 | 
17 |   /**
18 |    * Steps to run denoising
19 |    */
20 | 
21 |   num_inference_steps?: number;
22 | }
23 | 
24 | export interface QrGenerateResponse {
25 |   /**
26 |    * URL of the QR code images that was generated by the model.
27 |    */
28 |   image_url: string;
29 | 
30 |   /**
31 |    * Response latency in milliseconds.
32 |    */
33 |   model_latency_ms: number;
34 | 
35 |   /**
36 |    * Unique ID of the QR code.
37 |    * This ID can be used to retrieve the QR code image from the API.
38 |    */
39 |   id: string;
40 | }
41 | 


--------------------------------------------------------------------------------
/utils/types.ts:
--------------------------------------------------------------------------------
 1 | export type QrCodeControlNetRequest = {
 2 |   url: string;
 3 |   prompt: string;
 4 |   qr_conditioning_scale?: number;
 5 |   num_inference_steps?: number;
 6 |   guidance_scale?: number;
 7 |   negative_prompt?: string;
 8 | };
 9 | 
10 | export type QrCodeControlNetResponse = [string];
11 | 


--------------------------------------------------------------------------------
/utils/utils.ts:
--------------------------------------------------------------------------------
 1 | import { type ClassValue, clsx } from 'clsx';
 2 | import { twMerge } from 'tailwind-merge';
 3 | import { customAlphabet } from 'nanoid';
 4 | 
 5 | export function cn(...inputs: ClassValue[]) {
 6 |   return twMerge(clsx(inputs));
 7 | }
 8 | 
 9 | export const nanoid = customAlphabet(
10 |   '0123456789ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz',
11 |   7,
12 | );
13 | 


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