├── empty-module.ts ├── .env.example ├── README.md ├── .DS_Store ├── app ├── favicon.ico ├── globals.css ├── layout.tsx ├── api │ └── image │ │ └── route.ts └── page.tsx ├── postcss.config.mjs ├── lib ├── utils.ts └── types.ts ├── next-env.d.ts ├── next.config.ts ├── public ├── window.svg ├── file.svg └── globe.svg ├── components ├── providers.tsx ├── Header.tsx ├── ui │ ├── textarea.tsx │ ├── input.tsx │ ├── popover.tsx │ ├── button.tsx │ ├── card.tsx │ └── sheet.tsx ├── Footer.tsx ├── PromptSuggestions.tsx ├── ImagePromptInput.tsx ├── ImageResultDisplay.tsx └── ImageUpload.tsx ├── eslint.config.mjs ├── components.json ├── tsconfig.json ├── package.json ├── tailwind.config.ts ├── Dockerfile ├── .gitignore └── LICENSE /empty-module.ts: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /.env.example: -------------------------------------------------------------------------------- 1 | GEMINI_API_KEY=your_gemini_api_key -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 | # Gemini 2.0 Flash Image Generation and Editing 2 | 3 | -------------------------------------------------------------------------------- /.DS_Store: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/ekramasif/ai_img_edit/main/.DS_Store -------------------------------------------------------------------------------- /app/favicon.ico: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/ekramasif/ai_img_edit/main/app/favicon.ico -------------------------------------------------------------------------------- /postcss.config.mjs: -------------------------------------------------------------------------------- 1 | /** @type {import('postcss-load-config').Config} */ 2 | const config = { 3 | plugins: { 4 | tailwindcss: {}, 5 | }, 6 | }; 7 | 8 | export default config; 9 | -------------------------------------------------------------------------------- /lib/utils.ts: -------------------------------------------------------------------------------- 1 | import { clsx, type ClassValue } from "clsx"; 2 | import { twMerge } from "tailwind-merge"; 3 | 4 | export function cn(...inputs: ClassValue[]) { 5 | return twMerge(clsx(inputs)); 6 | } 7 | -------------------------------------------------------------------------------- /next-env.d.ts: -------------------------------------------------------------------------------- 1 | /// 2 | /// 3 | 4 | // NOTE: This file should not be edited 5 | // see https://nextjs.org/docs/app/api-reference/config/typescript for more information. 6 | -------------------------------------------------------------------------------- /next.config.ts: -------------------------------------------------------------------------------- 1 | import type { NextConfig } from "next"; 2 | 3 | const nextConfig: NextConfig = { 4 | output: "standalone", 5 | experimental: { 6 | turbo: { 7 | resolveAlias: { 8 | canvas: "./empty-module.ts", 9 | }, 10 | }, 11 | }, 12 | }; 13 | 14 | export default nextConfig; 15 | -------------------------------------------------------------------------------- /public/window.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /public/file.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /components/providers.tsx: -------------------------------------------------------------------------------- 1 | "use client"; 2 | 3 | import { ThemeProvider } from "next-themes"; 4 | import { ReactNode } from "react"; 5 | 6 | export function ThemeProviders({ children }: { children: ReactNode }) { 7 | return ( 8 | 14 | {children} 15 | 16 | ); 17 | } 18 | -------------------------------------------------------------------------------- /eslint.config.mjs: -------------------------------------------------------------------------------- 1 | import { dirname } from "path"; 2 | import { fileURLToPath } from "url"; 3 | import { FlatCompat } from "@eslint/eslintrc"; 4 | 5 | const __filename = fileURLToPath(import.meta.url); 6 | const __dirname = dirname(__filename); 7 | 8 | const compat = new FlatCompat({ 9 | baseDirectory: __dirname, 10 | }); 11 | 12 | const eslintConfig = [ 13 | ...compat.extends("next/core-web-vitals", "next/typescript"), 14 | ]; 15 | 16 | export default eslintConfig; 17 | -------------------------------------------------------------------------------- /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.ts", 8 | "css": "app/globals.css", 9 | "baseColor": "slate", 10 | "cssVariables": true, 11 | "prefix": "" 12 | }, 13 | "aliases": { 14 | "components": "@/components", 15 | "utils": "@/lib/utils", 16 | "ui": "@/components/ui", 17 | "lib": "@/lib", 18 | "hooks": "@/hooks" 19 | }, 20 | "iconLibrary": "lucide" 21 | } -------------------------------------------------------------------------------- /tsconfig.json: -------------------------------------------------------------------------------- 1 | { 2 | "compilerOptions": { 3 | "target": "ES2017", 4 | "lib": ["dom", "dom.iterable", "esnext"], 5 | "allowJs": true, 6 | "skipLibCheck": true, 7 | "strict": false, 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 | -------------------------------------------------------------------------------- /components/Header.tsx: -------------------------------------------------------------------------------- 1 | 2 | import React from 'react'; 3 | import { FilePenLine } from 'lucide-react'; 4 | 5 | const Header: React.FC = () => { 6 | return ( 7 |

8 |

9 | 10 |

AI Image Editor

11 |

12 |

13 | Created by Dendritesoft 14 |

15 |

16 | ); 17 | }; 18 | 19 | export default Header; 20 | -------------------------------------------------------------------------------- /components/ui/textarea.tsx: -------------------------------------------------------------------------------- 1 | import * as React from "react" 2 | 3 | import { cn } from "@/lib/utils" 4 | 5 | const Textarea = React.forwardRef< 6 | HTMLTextAreaElement, 7 | React.ComponentProps<"textarea"> 8 | >(({ className, ...props }, ref) => { 9 | return ( 10 |

18 |   )
19 | })
20 | Textarea.displayName = "Textarea"
21 | 
22 | export { Textarea }
23 |

--------------------------------------------------------------------------------
/lib/types.ts:
--------------------------------------------------------------------------------
 1 | // Define the interface for conversation history items
 2 | export interface HistoryItem {
 3 |   // Role can be either "user" or "model"
 4 |   role: "user" | "model";
 5 |   // Parts can contain text and/or images
 6 |   parts: HistoryPart[];
 7 | }
 8 | 
 9 | // Define the interface for history parts
10 | export interface HistoryPart {
11 |   // Text content (optional)
12 |   text?: string;
13 |   // Image content as data URL (optional)
14 |   // Format: data:image/png;base64,... or data:image/jpeg;base64,...
15 |   image?: string;
16 | }
17 | 
18 | // Note: When sending to the Gemini API:
19 | // 1. User messages can contain both text and images (as inlineData)
20 | // 2. Model messages should only contain text parts
21 | // 3. Images in history are stored as data URLs in our app, but converted to base64 for the API
22 |

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

--------------------------------------------------------------------------------
/public/globe.svg:
--------------------------------------------------------------------------------
1 | <svg fill="none" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16"><g clip-path="url(#a)"><path fill-rule="evenodd" clip-rule="evenodd" d="M10.27 14.1a6.5 6.5 0 0 0 3.67-3.45q-1.24.21-2.7.34-.31 1.83-.97 3.1M8 16A8 8 0 1 0 8 0a8 8 0 0 0 0 16m.48-1.52a7 7 0 0 1-.96 0H7.5a4 4 0 0 1-.84-1.32q-.38-.89-.63-2.08a40 40 0 0 0 3.92 0q-.25 1.2-.63 2.08a4 4 0 0 1-.84 1.31zm2.94-4.76q1.66-.15 2.95-.43a7 7 0 0 0 0-2.58q-1.3-.27-2.95-.43a18 18 0 0 1 0 3.44m-1.27-3.54a17 17 0 0 1 0 3.64 39 39 0 0 1-4.3 0 17 17 0 0 1 0-3.64 39 39 0 0 1 4.3 0m1.1-1.17q1.45.13 2.69.34a6.5 6.5 0 0 0-3.67-3.44q.65 1.26.98 3.1M8.48 1.5l.01.02q.41.37.84 1.31.38.89.63 2.08a40 40 0 0 0-3.92 0q.25-1.2.63-2.08a4 4 0 0 1 .85-1.32 7 7 0 0 1 .96 0m-2.75.4a6.5 6.5 0 0 0-3.67 3.44 29 29 0 0 1 2.7-.34q.31-1.83.97-3.1M4.58 6.28q-1.66.16-2.95.43a7 7 0 0 0 0 2.58q1.3.27 2.95.43a18 18 0 0 1 0-3.44m.17 4.71q-1.45-.12-2.69-.34a6.5 6.5 0 0 0 3.67 3.44q-.65-1.27-.98-3.1" fill="#666"/></g><defs><clipPath id="a"><path fill="#fff" d="M0 0h16v16H0z"/></clipPath></defs></svg>

--------------------------------------------------------------------------------
/components/Footer.tsx:
--------------------------------------------------------------------------------
 1 | import React from "react";
 2 | 
 3 | const Footer: React.FC = () => {
 4 |   return (
 5 |     <footer className="bg-gray-900 text-gray-300 py-6">
 6 |       <div className="max-w-screen-xl mx-auto px-4 sm:px-8 flex flex-col sm:flex-row justify-between items-center">
 7 |         <div className="text-center sm:text-left mb-4 sm:mb-0">
 8 |           <p className="text-sm">© {new Date().getFullYear()} DendriteSoft. All rights reserved.</p>
 9 |         </div>
10 |         <div className="flex space-x-6 justify-center sm:justify-end">
11 |           <a href="http://dendritesoft.com/" className="hover:text-white transition-colors duration-300">Privacy Policy</a>
12 |           <a href="http://dendritesoft.com/" className="hover:text-white transition-colors duration-300">Terms of Service</a>
13 |           <a href="http://dendritesoft.com/" className="hover:text-white transition-colors duration-300">Contact</a>
14 |         </div>
15 |       </div>
16 |     </footer>
17 |   );
18 | };
19 | 
20 | export default Footer;
21 | 
22 |

--------------------------------------------------------------------------------
/components/ui/popover.tsx:
--------------------------------------------------------------------------------
 1 | "use client"
 2 | 
 3 | import * as React from "react"
 4 | import * as PopoverPrimitive from "@radix-ui/react-popover"
 5 | 
 6 | import { cn } from "@/lib/utils"
 7 | 
 8 | const Popover = PopoverPrimitive.Root
 9 | 
10 | const PopoverTrigger = PopoverPrimitive.Trigger
11 | 
12 | const PopoverContent = React.forwardRef<
13 |   React.ElementRef<typeof PopoverPrimitive.Content>,
14 |   React.ComponentPropsWithoutRef<typeof PopoverPrimitive.Content>
15 | >(({ className, align = "center", sideOffset = 4, ...props }, ref) => (
16 |   <PopoverPrimitive.Portal>
17 |     <PopoverPrimitive.Content
18 |       ref={ref}
19 |       align={align}
20 |       sideOffset={sideOffset}
21 |       className={cn(
22 |         "z-50 w-72 rounded-md border bg-popover p-4 text-popover-foreground shadow-md outline-none 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",
23 |         className
24 |       )}
25 |       {...props}
26 |     />
27 |   </PopoverPrimitive.Portal>
28 | ))
29 | PopoverContent.displayName = PopoverPrimitive.Content.displayName
30 | 
31 | export { Popover, PopoverTrigger, PopoverContent }
32 |

--------------------------------------------------------------------------------
/package.json:
--------------------------------------------------------------------------------
 1 | {
 2 |     "name": "nextjs-gemini-2-0-pdf-structured-data",
 3 |     "version": "0.1.0",
 4 |     "private": true,
 5 |     "scripts": {
 6 |         "dev": "next dev --turbopack",
 7 |         "build": "next build",
 8 |         "start": "next start",
 9 |         "lint": "next lint"
10 |     },
11 |     "dependencies": {
12 |         "@google/generative-ai": "^0.21.0",
13 |         "@radix-ui/react-dialog": "^1.1.6",
14 |         "@radix-ui/react-popover": "^1.1.6",
15 |         "@radix-ui/react-slot": "^1.1.2",
16 |         "@wojtekmaj/react-hooks": "^1.22.0",
17 |         "class-variance-authority": "^0.7.1",
18 |         "clsx": "^2.1.1",
19 |         "framer-motion": "^12.6.0",
20 |         "lucide-react": "^0.475.0",
21 |         "next": "^15.2.2",
22 |         "next-themes": "^0.4.4",
23 |         "react": "^19.0.0",
24 |         "react-dom": "^19.0.0",
25 |         "react-dropzone": "^14.3.8",
26 |         "tailwind-merge": "^3.0.1",
27 |         "tailwindcss-animate": "^1.0.7"
28 |     },
29 |     "devDependencies": {
30 |         "@eslint/eslintrc": "^3",
31 |         "@types/node": "^20",
32 |         "@types/react": "^19",
33 |         "@types/react-dom": "^19",
34 |         "eslint": "^9",
35 |         "eslint-config-next": "15.1.0",
36 |         "postcss": "^8",
37 |         "prettier-eslint": "^16.3.0",
38 |         "tailwindcss": "^3.4.1",
39 |         "typescript": "^5"
40 |     }
41 | }
42 |

--------------------------------------------------------------------------------
/components/PromptSuggestions.tsx:
--------------------------------------------------------------------------------
 1 | import React from 'react';
 2 | import { cn } from '@/lib/utils';
 3 | import { motion } from 'framer-motion';
 4 | 
 5 | interface PromptSuggestionsProps {
 6 |   onSelectSuggestion: (suggestion: string) => void;
 7 |   className?: string;
 8 | }
 9 | 
10 | const PromptSuggestions: React.FC<PromptSuggestionsProps> = ({
11 |   onSelectSuggestion,
12 |   className
13 | }) => {
14 |   const suggestions = [
15 |     "A breathtaking cyberpunk skyline at night",
16 |     "Mystical forest with glowing mushrooms and fireflies",
17 |     "A space station orbiting a gas giant",
18 |     "A lost underwater city with ancient ruins",
19 |     "A steampunk airship floating above the clouds",
20 |     "A futuristic AI-controlled metropolis"
21 |   ];
22 | 
23 |   return (
24 |     <div className={cn("w-full max-w-3xl mx-auto py-6 text-center", className)}>
25 |       <h3 className="text-lg font-semibold text-muted-foreground mb-4">Feeling uninspired? Try one of these prompts:</h3>
26 |       <div className="grid grid-cols-2 md:grid-cols-3 gap-4">
27 |         {suggestions.map((suggestion, index) => (
28 |           <motion.button
29 |             key={index}
30 |             onClick={() => onSelectSuggestion(suggestion)}
31 |             className="px-5 py-3 rounded-lg text-sm bg-gray-700 text-gray-200 shadow-neumorphic hover:shadow-neumorphic-hover hover:scale-105 transition-all duration-300"
32 |             whileHover={{ scale: 1.05 }}
33 |             whileTap={{ scale: 0.95 }}
34 |           >
35 |             {suggestion}
36 |           </motion.button>
37 |         ))}
38 |       </div>
39 |     </div>
40 |   );
41 | };
42 | 
43 | export default PromptSuggestions;
44 |

--------------------------------------------------------------------------------
/components/ImagePromptInput.tsx:
--------------------------------------------------------------------------------
 1 | "use client";
 2 | 
 3 | import { useState } from "react";
 4 | import { Button } from "@/components/ui/button";
 5 | import { ImageIcon, Sparkles } from "lucide-react";
 6 | import { Input } from "./ui/input";
 7 | 
 8 | interface ImagePromptInputProps {
 9 |   onSubmit: (prompt: string) => void;
10 |   isEditing: boolean;
11 |   isLoading: boolean;
12 | }
13 | 
14 | export function ImagePromptInput({
15 |   onSubmit,
16 |   isEditing,
17 |   isLoading,
18 | }: ImagePromptInputProps) {
19 |   const [prompt, setPrompt] = useState("");
20 | 
21 |   const handleSubmit = (e: React.FormEvent) => {
22 |     e.preventDefault();
23 |     if (prompt.trim()) {
24 |       onSubmit(prompt.trim());
25 |       setPrompt("");
26 |     }
27 |   };
28 | 
29 |   return (
30 |     <form 
31 |       onSubmit={handleSubmit}
32 |       className="w-full max-w-2xl mx-auto animate-slide-up"
33 |     >
34 |       <div className="relative group">
35 |         <Input
36 |           type="text"
37 |           placeholder="Describe the image you want to create..."
38 |           className="w-full py-6 pl-12 pr-36 text-base backdrop-blur-sm transition-all duration-200 glass focus-visible:ring-2 focus-visible:ring-primary/20"
39 |           value={prompt}
40 |           onChange={(e) => setPrompt(e.target.value)}
41 |           disabled={isLoading}
42 |         />
43 |         <ImageIcon className="absolute left-4 top-1/2 transform -translate-y-1/2 h-5 w-5 text-muted-foreground" />
44 |         <Button 
45 |           type="submit" 
46 |           className="absolute right-2 top-1/2 transform -translate-y-1/2 transition-all duration-300 bg-primary/90 hover:bg-primary text-primary-foreground"
47 |           size="sm"
48 |           disabled={isLoading || !prompt.trim()}
49 |         >
50 |           <span className="mr-2">{isEditing ? "Edit Image" : "Generate"}</span>
51 |           <Sparkles className="h-4 w-4" />
52 |         </Button>
53 |       </div>
54 |     </form>
55 |   );
56 | }
57 |

--------------------------------------------------------------------------------
/tailwind.config.ts:
--------------------------------------------------------------------------------
 1 | import type { Config } from "tailwindcss";
 2 | 
 3 | export default {
 4 |   darkMode: ["class"],
 5 |   content: [
 6 |     "./pages/**/*.{js,ts,jsx,tsx,mdx}",
 7 |     "./components/**/*.{js,ts,jsx,tsx,mdx}",
 8 |     "./app/**/*.{js,ts,jsx,tsx,mdx}",
 9 |   ],
10 |   theme: {
11 |     extend: {
12 |       colors: {
13 |         background: "hsl(var(--background))",
14 |         foreground: "hsl(var(--foreground))",
15 |         card: {
16 |           DEFAULT: "hsl(var(--card))",
17 |           foreground: "hsl(var(--card-foreground))",
18 |         },
19 |         popover: {
20 |           DEFAULT: "hsl(var(--popover))",
21 |           foreground: "hsl(var(--popover-foreground))",
22 |         },
23 |         primary: {
24 |           DEFAULT: "hsl(var(--primary))",
25 |           foreground: "hsl(var(--primary-foreground))",
26 |         },
27 |         secondary: {
28 |           DEFAULT: "hsl(var(--secondary))",
29 |           foreground: "hsl(var(--secondary-foreground))",
30 |         },
31 |         muted: {
32 |           DEFAULT: "hsl(var(--muted))",
33 |           foreground: "hsl(var(--muted-foreground))",
34 |         },
35 |         accent: {
36 |           DEFAULT: "hsl(var(--accent))",
37 |           foreground: "hsl(var(--accent-foreground))",
38 |         },
39 |         destructive: {
40 |           DEFAULT: "hsl(var(--destructive))",
41 |           foreground: "hsl(var(--destructive-foreground))",
42 |         },
43 |         border: "hsl(var(--border))",
44 |         input: "hsl(var(--input))",
45 |         ring: "hsl(var(--ring))",
46 |         chart: {
47 |           "1": "hsl(var(--chart-1))",
48 |           "2": "hsl(var(--chart-2))",
49 |           "3": "hsl(var(--chart-3))",
50 |           "4": "hsl(var(--chart-4))",
51 |           "5": "hsl(var(--chart-5))",
52 |         },
53 |       },
54 |       borderRadius: {
55 |         lg: "var(--radius)",
56 |         md: "calc(var(--radius) - 2px)",
57 |         sm: "calc(var(--radius) - 4px)",
58 |       },
59 |     },
60 |   },
61 |   plugins: [require("tailwindcss-animate")],
62 | } satisfies Config;
63 |

--------------------------------------------------------------------------------
/components/ui/button.tsx:
--------------------------------------------------------------------------------
 1 | import * as React from "react";
 2 | import { Slot } from "@radix-ui/react-slot";
 3 | import { cva, type VariantProps } from "class-variance-authority";
 4 | 
 5 | import { cn } from "@/lib/utils";
 6 | 
 7 | const buttonVariants = cva(
 8 |   "inline-flex items-center justify-center gap-2 whitespace-nowrap 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 [&_svg]:pointer-events-none [&_svg]:size-4 [&_svg]:shrink-0",
 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/card.tsx:
--------------------------------------------------------------------------------
 1 | import * as React from "react"
 2 | 
 3 | import { cn } from "@/lib/utils"
 4 | 
 5 | const Card = React.forwardRef<
 6 |   HTMLDivElement,
 7 |   React.HTMLAttributes<HTMLDivElement>
 8 | >(({ className, ...props }, ref) => (
 9 |   <div
10 |     ref={ref}
11 |     className={cn(
12 |       "rounded-lg border bg-card text-card-foreground shadow-sm",
13 |       className
14 |     )}
15 |     {...props}
16 |   />
17 | ))
18 | Card.displayName = "Card"
19 | 
20 | const CardHeader = React.forwardRef<
21 |   HTMLDivElement,
22 |   React.HTMLAttributes<HTMLDivElement>
23 | >(({ className, ...props }, ref) => (
24 |   <div
25 |     ref={ref}
26 |     className={cn("flex flex-col space-y-1.5 p-6", className)}
27 |     {...props}
28 |   />
29 | ))
30 | CardHeader.displayName = "CardHeader"
31 | 
32 | const CardTitle = React.forwardRef<
33 |   HTMLDivElement,
34 |   React.HTMLAttributes<HTMLDivElement>
35 | >(({ className, ...props }, ref) => (
36 |   <div
37 |     ref={ref}
38 |     className={cn(
39 |       "text-2xl font-semibold leading-none tracking-tight",
40 |       className
41 |     )}
42 |     {...props}
43 |   />
44 | ))
45 | CardTitle.displayName = "CardTitle"
46 | 
47 | const CardDescription = React.forwardRef<
48 |   HTMLDivElement,
49 |   React.HTMLAttributes<HTMLDivElement>
50 | >(({ className, ...props }, ref) => (
51 |   <div
52 |     ref={ref}
53 |     className={cn("text-sm text-muted-foreground", className)}
54 |     {...props}
55 |   />
56 | ))
57 | CardDescription.displayName = "CardDescription"
58 | 
59 | const CardContent = React.forwardRef<
60 |   HTMLDivElement,
61 |   React.HTMLAttributes<HTMLDivElement>
62 | >(({ className, ...props }, ref) => (
63 |   <div ref={ref} className={cn("p-6 pt-0", className)} {...props} />
64 | ))
65 | CardContent.displayName = "CardContent"
66 | 
67 | const CardFooter = React.forwardRef<
68 |   HTMLDivElement,
69 |   React.HTMLAttributes<HTMLDivElement>
70 | >(({ className, ...props }, ref) => (
71 |   <div
72 |     ref={ref}
73 |     className={cn("flex items-center p-6 pt-0", className)}
74 |     {...props}
75 |   />
76 | ))
77 | CardFooter.displayName = "CardFooter"
78 | 
79 | export { Card, CardHeader, CardFooter, CardTitle, CardDescription, CardContent }
80 |

--------------------------------------------------------------------------------
/app/globals.css:
--------------------------------------------------------------------------------
 1 | @tailwind base;
 2 | @tailwind components;
 3 | @tailwind utilities;
 4 | 
 5 | body {
 6 |   font-family: Arial, Helvetica, sans-serif;
 7 | }
 8 | 
 9 | @layer utilities {
10 |   .text-balance {
11 |     text-wrap: balance;
12 |   }
13 | }
14 | 
15 | @layer base {
16 |     :root {
17 |       --background: 0 0% 100%;
18 |       --foreground: 240, 3%, 12%;
19 |       --card: 0 0% 100%;
20 |       --card-foreground: 240, 3%, 12%;
21 |       --popover: 0 0% 100%;
22 |       --popover-foreground: 240, 3%, 12%;
23 |       --primary: 214, 82%, 51%;
24 |       --primary-foreground: 0 0% 98%;
25 |       --secondary: 240 4.8% 95.9%;
26 |       --secondary-foreground: 214, 82%, 51%;
27 |       --muted: 240 4.8% 95.9%;
28 |       --muted-foreground: 240 3.8% 46.1%;
29 |       --accent: 240 4.8% 95.9%;
30 |       --accent-foreground: 214, 82%, 51%;
31 |       --destructive: 0 84.2% 60.2%;
32 |       --destructive-foreground: 0 0% 98%;
33 |       --border: 240 5.9% 90%;
34 |       --input: 240 5.9% 90%;
35 |       --ring: 214, 82%, 51%;
36 |       --radius: 0.5rem;
37 |       --chart-1: 12 76% 61%;
38 |       --chart-2: 173 58% 39%;
39 |       --chart-3: 197 37% 24%;
40 |       --chart-4: 43 74% 66%;
41 |       --chart-5: 27 87% 67%;
42 |     }
43 |   
44 |     .dark {
45 |       --background: 240 3% 12%;
46 |       --foreground: 0 0% 98%;
47 |       --card: 220 7% 8%;
48 |       --card-foreground: 0 0% 98%;
49 |       --popover: 220 7% 8%;
50 |       --popover-foreground: 0 0% 98%;
51 |       --primary: 217 91% 60%;
52 |       --primary-foreground: 0 0% 98%;
53 |       --secondary: 240 3% 12%;
54 |       --secondary-foreground: 0 0% 98%;
55 |       --muted: 240 3% 12%;
56 |       --muted-foreground: 215 20.2% 65.1%;
57 |       --accent: 240 3% 12%;
58 |       --accent-foreground: 0 0% 98%;
59 |       --destructive: 0 62.8% 30.6%;
60 |       --destructive-foreground: 0 0% 98%;
61 |       --border: 225 9% 15%;
62 |       --input: 225 9% 15%;
63 |       --ring: 224 76.3% 48%;
64 |       --chart-1: 220 70% 50%;
65 |       --chart-2: 160 60% 45%;
66 |       --chart-3: 30 80% 55%;
67 |       --chart-4: 280 65% 60%;
68 |       --chart-5: 340 75% 55%;
69 |     }
70 |   }
71 |   
72 | @layer base {
73 |   * {
74 |     @apply border-border;
75 |   }
76 |   body {
77 |     @apply bg-background text-foreground;
78 |   }
79 | }
80 | 
81 | h1,h2,h3,h4,h5,h6 {
82 |   @apply text-foreground dark:text-foreground;
83 | }
84 | 
85 |

--------------------------------------------------------------------------------
/app/layout.tsx:
--------------------------------------------------------------------------------
 1 | import type { Metadata, Viewport } from "next";
 2 | import { Open_Sans } from "next/font/google";
 3 | import "./globals.css";
 4 | import { ThemeProviders } from "@/components/providers";
 5 | 
 6 | const openSans = Open_Sans({
 7 |   weight: ["400", "500", "700"],
 8 |   style: ["normal", "italic"],
 9 |   subsets: ["latin"],
10 |   variable: "--font-open-sans",
11 | });
12 | 
13 | export const metadata: Metadata = {
14 |   title: "DendriteSoft AI Image Editor",
15 |   description: "Transform your images with our advanced AI-powered editor. Enhance, edit, and create stunning visuals effortlessly.",
16 |   keywords: ["AI image editor", "photo editing", "image enhancement", "AI art", "creative tools", "online image editor"],
17 |   authors: [{ name: "DendriteSoft" }],
18 |   openGraph: {
19 |     type: "website",
20 |     url: "https://www.dendritesoft.com",
21 |     title: "DendriteSoft AI Image Editor",
22 |     description: "Experience the future of image editing with our AI-powered tools. Edit, enhance, and create stunning images with ease.",
23 |     images: [
24 |       {
25 |         url: "https://www.dendritesoft.com/og-image.png",
26 |         width: 1200,
27 |         height: 630,
28 |         alt: "DendriteSoft AI Image Editor",
29 |       },
30 |     ],
31 |   },
32 |   twitter: {
33 |     card: "summary_large_image",
34 |     title: "DendriteSoft AI Image Editor",
35 |     description: "Transform your images with our advanced AI-powered editor. Enhance, edit, and create stunning visuals effortlessly.",
36 |     images: ["https://www.dendritesoft.com/og-image.png"],
37 |   },
38 | };
39 | 
40 | export const viewport: Viewport = {
41 |   themeColor: [
42 |     { media: "(prefers-color-scheme: light)", color: "white" },
43 |     { media: "(prefers-color-scheme: dark)", color: "black" },
44 |   ],
45 | };
46 | 
47 | export default function RootLayout({
48 |   children,
49 | }: Readonly<{
50 |   children: React.ReactNode;
51 | }>) {
52 |   return (
53 |     <html lang="en" suppressHydrationWarning>
54 |       <head>
55 |         <meta charSet="UTF-8" />
56 |         <meta name="viewport" content="width=device-width, initial-scale=1.0" />
57 |         <meta name="description" content="Transform your images with our advanced AI-powered editor. Enhance, edit, and create stunning visuals effortlessly." />
58 |         <meta name="keywords" content="AI image editor, photo editing, image enhancement, AI art, creative tools, online image editor" />
59 |         <meta name="author" content="DendriteSoft" />
60 |         <meta name="robots" content="index, follow" />
61 |         <meta property="og:type" content="website" />
62 |         <meta property="og:url" content="https://www.dendritesoft.com" />
63 |         <meta property="og:title" content="DendriteSoft AI Image Editor" />
64 |         <meta property="og:description" content="Experience the future of image editing with our AI-powered tools. Edit, enhance, and create stunning images with ease." />
65 |         <meta property="og:image" content="https://www.dendritesoft.com/og-image.png" />
66 |         <meta property="og:image:width" content="1200" />
67 |         <meta property="og:image:height" content="630" />
68 |         <meta property="og:image:alt" content="DendriteSoft AI Image Editor" />
69 |         <meta name="twitter:card" content="summary_large_image" />
70 |         <meta name="twitter:title" content="DendriteSoft AI Image Editor" />
71 |         <meta name="twitter:description" content="Transform your images with our advanced AI-powered editor. Enhance, edit, and create stunning visuals effortlessly." />
72 |         <meta name="twitter:image" content="https://www.dendritesoft.com/og-image.png" />
73 |         <link rel="icon" href="/globe.svg" />
74 |         <link rel="canonical" href="https://www.dendritesoft.com" />
75 |         <title>DendriteSoft's AI Image Editor</title>
76 |       </head>
77 |       <body
78 |         className={`${openSans.className} antialiased bg-white dark:bg-slate-950`}
79 |         suppressHydrationWarning
80 |       >
81 |         <ThemeProviders>{children}</ThemeProviders>
82 |       </body>
83 |     </html>
84 |   );
85 | }
86 |

--------------------------------------------------------------------------------
/components/ImageResultDisplay.tsx:
--------------------------------------------------------------------------------
  1 | "use client";
  2 | 
  3 | import { Button } from "@/components/ui/button";
  4 | import { Download, RotateCcw, MessageCircle } from "lucide-react";
  5 | import { useState } from "react";
  6 | import { HistoryItem, HistoryPart } from "@/lib/types";
  7 | import { cn } from "@/lib/utils"; // Assuming you have a utility function for class names
  8 | 
  9 | interface ImageResultDisplayProps {
 10 |   imageUrl: string;
 11 |   description: string | null;
 12 |   onReset: () => void;
 13 |   conversationHistory?: HistoryItem[];
 14 |   className?: string;
 15 | }
 16 | 
 17 | export function ImageResultDisplay({
 18 |   imageUrl,
 19 |   description,
 20 |   onReset,
 21 |   conversationHistory = [],
 22 |   className,
 23 | }: ImageResultDisplayProps) {
 24 |   const [showHistory, setShowHistory] = useState(false);
 25 |   const [isLoaded, setIsLoaded] = useState(false);
 26 | 
 27 |   const handleDownload = () => {
 28 |     const link = document.createElement("a");
 29 |     link.href = imageUrl;
 30 |     link.download = `dendritesoft${Date.now()}.png`;
 31 |     document.body.appendChild(link);
 32 |     link.click();
 33 |     document.body.removeChild(link);
 34 |   };
 35 | 
 36 |   const toggleHistory = () => {
 37 |     setShowHistory(!showHistory);
 38 |   };
 39 | 
 40 |   return (
 41 |     <div
 42 |       className={cn(
 43 |         "w-full max-w-2xl mx-auto mt-8 rounded-2xl overflow-hidden glass transition-all duration-500",
 44 |         !imageUrl && "hidden",
 45 |         className
 46 |       )}
 47 |     >
 48 |       {imageUrl && (
 49 |         <div className="relative">
 50 |           <div
 51 |             className={cn(
 52 |               "w-full overflow-hidden bg-secondary/20",
 53 |               !isLoaded && "shimmer"
 54 |             )}
 55 |           >
 56 |             <img
 57 |               src={imageUrl}
 58 |               alt={description || "Generated Image"}
 59 |               className={cn(
 60 |                 "w-full h-auto object-contain",
 61 |                 isLoaded ? "opacity-100" : "opacity-0"
 62 |               )}
 63 |               onLoad={() => setIsLoaded(true)}
 64 |             />
 65 |           </div>
 66 |           <div className="p-4 flex justify-between items-start">
 67 |             <p className="text-sm leading-relaxed text-foreground/80 font-medium max-w-[80%]">
 68 |               {description}
 69 |             </p>
 70 |             <Button
 71 |               variant="ghost"
 72 |               size="icon"
 73 |               onClick={handleDownload}
 74 |               className="text-muted-foreground hover:text-foreground"
 75 |             >
 76 |               <Download className="h-5 w-5" />
 77 |             </Button>
 78 |           </div>
 79 |         </div>
 80 |       )}
 81 | 
 82 |       {showHistory && conversationHistory.length > 0 && (
 83 |         <div className="p-4 rounded-lg mb-4">
 84 |           <h3 className="text-sm font-medium mb-4">Conversation History</h3>
 85 |           <div className="space-y-4">
 86 |             {conversationHistory.map((item, index) => (
 87 |               <div key={index} className={`p-3 rounded-lg bg-secondary`}>
 88 |                 <p
 89 |                   className={`text-sm font-medium mb-2 ${
 90 |                     item.role === "user" ? "text-foreground" : "text-primary"
 91 |                   }`}
 92 |                 >
 93 |                   {item.role === "user" ? "You" : "DendriteSoft"}
 94 |                 </p>
 95 |                 <div className="space-y-2">
 96 |                   {item.parts.map((part: HistoryPart, partIndex) => (
 97 |                     <div key={partIndex}>
 98 |                       {part.text && <p className="text-sm">{part.text}</p>}
 99 |                       {part.image && (
100 |                         <div className="mt-2 overflow-hidden rounded-md">
101 |                           <img
102 |                             src={part.image}
103 |                             alt={`${item.role} image`}
104 |                             className="w-full h-auto object-contain"
105 |                           />
106 |                         </div>
107 |                       )}
108 |                     </div>
109 |                   ))}
110 |                 </div>
111 |               </div>
112 |             ))}
113 |           </div>
114 |         </div>
115 |       )}
116 | 
117 |       <div className="flex items-center justify-between mt-2 mb-4">
118 |         <Button variant="outline" size="sm" onClick={onReset}>
119 |           <RotateCcw className="w-4 h-4 mr-2" />
120 |           Create New Image
121 |         </Button>
122 |         {conversationHistory.length > 0 && (
123 |           <Button variant="outline" size="sm" onClick={toggleHistory}>
124 |             <MessageCircle className="w-4 h-4 mr-2" />
125 |             {showHistory ? "Hide History" : "Show History"}
126 |           </Button>
127 |         )}
128 |       </div>
129 |     </div>
130 |   );
131 | }
132 |

--------------------------------------------------------------------------------
/components/ImageUpload.tsx:
--------------------------------------------------------------------------------
  1 | "use client";
  2 | 
  3 | import { useCallback, useState, useEffect } from "react";
  4 | import { useDropzone } from "react-dropzone";
  5 | import { Button } from "./ui/button";
  6 | import { Upload as UploadIcon, Image as ImageIcon, X } from "lucide-react";
  7 | 
  8 | interface ImageUploadProps {
  9 |   onImageSelect: (imageData: string) => void;
 10 |   currentImage: string | null;
 11 | }
 12 | 
 13 | export function formatFileSize(bytes: number): string {
 14 |   if (bytes === 0) return "0 Bytes";
 15 |   const k = 1024;
 16 |   const sizes = ["Bytes", "KB", "MB", "GB", "TB"];
 17 |   const i = Math.floor(Math.log(bytes) / Math.log(k));
 18 |   return (
 19 |     Number.parseFloat((bytes / Math.pow(k, i)).toFixed(2)) + " " + sizes[i]
 20 |   );
 21 | }
 22 | 
 23 | export function ImageUpload({ onImageSelect, currentImage }: ImageUploadProps) {
 24 |   const [selectedFile, setSelectedFile] = useState<File | null>(null);
 25 | 
 26 |   // Reset the selected file when the current image changes externally
 27 |   useEffect(() => {
 28 |     if (!currentImage) {
 29 |       setSelectedFile(null);
 30 |     }
 31 |   }, [currentImage]);
 32 | 
 33 |   const onDrop = useCallback(
 34 |     (acceptedFiles: File[]) => {
 35 |       const file = acceptedFiles[0];
 36 |       if (!file) return;
 37 | 
 38 |       setSelectedFile(file);
 39 | 
 40 |       // Convert the file to base64
 41 |       const reader = new FileReader();
 42 |       reader.onload = (event) => {
 43 |         if (event.target && event.target.result) {
 44 |           const result = event.target.result as string;
 45 |           console.log("Image loaded, length:", result.length);
 46 |           onImageSelect(result);
 47 |         }
 48 |       };
 49 |       reader.onerror = (error) => {
 50 |         console.error("Error reading file:", error);
 51 |       };
 52 |       reader.readAsDataURL(file);
 53 |     },
 54 |     [onImageSelect]
 55 |   );
 56 | 
 57 |   const { getRootProps, getInputProps, isDragActive } = useDropzone({
 58 |     onDrop,
 59 |     accept: {
 60 |       "image/png": [".png"],
 61 |       "image/jpeg": [".jpg", ".jpeg"],
 62 |     },
 63 |     maxSize: 10 * 1024 * 1024, // 10MB
 64 |     multiple: false,
 65 |   });
 66 | 
 67 |   const handleRemove = () => {
 68 |     setSelectedFile(null);
 69 |     onImageSelect("");
 70 |   };
 71 | 
 72 |   return (
 73 |     <div className="w-full max-w-2xl mx-auto animate-slide-up mb-4">
 74 |       {!currentImage ? (
 75 |         <div
 76 |           {...getRootProps()}
 77 |           className={`min-h-[150px] p-6 rounded-lg border-2 border-dashed flex flex-col items-center justify-center gap-4 cursor-pointer hover:bg-secondary/10 transition-colors duration-200 ease-in-out ${
 78 |             isDragActive ? "bg-secondary/10" : "bg-background"
 79 |           }`}
 80 |         >
 81 |           <input {...getInputProps()} />
 82 |           <div className="flex flex-row items-center gap-4">
 83 |             <UploadIcon className="w-8 h-8 text-primary" />
 84 |             <div className="text-center">
 85 |               <p className="text-sm font-medium text-foreground">
 86 |                 Drop your image here or click to browse
 87 |               </p>
 88 |               <p className="text-xs text-muted-foreground">
 89 |                 Supported formats: PNG, JPG, JPEG. Max size: 10MB
 90 |               </p>
 91 |             </div>
 92 |           </div>
 93 |         </div>
 94 |       ) : (
 95 |         <div className="flex flex-col items-center p-6 rounded-lg bg-background shadow-md animate-fade-in">
 96 |           <div className="flex w-full items-center justify-between mb-4">
 97 |             <div className="flex items-center gap-3">
 98 |               <ImageIcon className="w-8 h-8 text-primary" />
 99 |               <div className="flex-grow min-w-0">
100 |                 <p className="text-sm font-medium truncate text-foreground">
101 |                   {selectedFile?.name || "Uploaded Image"}
102 |                 </p>
103 |                 {selectedFile && (
104 |                   <p className="text-xs text-muted-foreground">
105 |                     {formatFileSize(selectedFile.size)}
106 |                   </p>
107 |                 )}
108 |               </div>
109 |             </div>
110 |             <Button
111 |               variant="ghost"
112 |               size="icon"
113 |               onClick={handleRemove}
114 |               className="flex-shrink-0 ml-2"
115 |             >
116 |               <X className="w-4 h-4" />
117 |               <span className="sr-only">Remove image</span>
118 |             </Button>
119 |           </div>
120 |           <div className="w-full overflow-hidden rounded-md">
121 |             <img
122 |               src={currentImage}
123 |               alt="Selected"
124 |               className="w-full h-auto object-contain max-h-[300px]"
125 |             />
126 |           </div>
127 |         </div>
128 |       )}
129 |     </div>
130 |   );
131 | }
132 |

--------------------------------------------------------------------------------
/components/ui/sheet.tsx:
--------------------------------------------------------------------------------
  1 | "use client"
  2 | 
  3 | import * as React from "react"
  4 | import * as SheetPrimitive from "@radix-ui/react-dialog"
  5 | import { cva, type VariantProps } from "class-variance-authority"
  6 | import { X } from "lucide-react"
  7 | 
  8 | import { cn } from "@/lib/utils"
  9 | 
 10 | const Sheet = SheetPrimitive.Root
 11 | 
 12 | const SheetTrigger = SheetPrimitive.Trigger
 13 | 
 14 | const SheetClose = SheetPrimitive.Close
 15 | 
 16 | const SheetPortal = SheetPrimitive.Portal
 17 | 
 18 | const SheetOverlay = React.forwardRef<
 19 |   React.ElementRef<typeof SheetPrimitive.Overlay>,
 20 |   React.ComponentPropsWithoutRef<typeof SheetPrimitive.Overlay>
 21 | >(({ className, ...props }, ref) => (
 22 |   <SheetPrimitive.Overlay
 23 |     className={cn(
 24 |       "fixed inset-0 z-50 bg-black/80  data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0",
 25 |       className
 26 |     )}
 27 |     {...props}
 28 |     ref={ref}
 29 |   />
 30 | ))
 31 | SheetOverlay.displayName = SheetPrimitive.Overlay.displayName
 32 | 
 33 | const sheetVariants = cva(
 34 |   "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",
 35 |   {
 36 |     variants: {
 37 |       side: {
 38 |         top: "inset-x-0 top-0 border-b data-[state=closed]:slide-out-to-top data-[state=open]:slide-in-from-top",
 39 |         bottom:
 40 |           "inset-x-0 bottom-0 border-t data-[state=closed]:slide-out-to-bottom data-[state=open]:slide-in-from-bottom",
 41 |         left: "inset-y-0 left-0 h-full w-3/4 border-r data-[state=closed]:slide-out-to-left data-[state=open]:slide-in-from-left sm:max-w-sm",
 42 |         right:
 43 |           "inset-y-0 right-0 h-full w-3/4  border-l data-[state=closed]:slide-out-to-right data-[state=open]:slide-in-from-right sm:max-w-sm",
 44 |       },
 45 |     },
 46 |     defaultVariants: {
 47 |       side: "right",
 48 |     },
 49 |   }
 50 | )
 51 | 
 52 | interface SheetContentProps
 53 |   extends React.ComponentPropsWithoutRef<typeof SheetPrimitive.Content>,
 54 |     VariantProps<typeof sheetVariants> {}
 55 | 
 56 | const SheetContent = React.forwardRef<
 57 |   React.ElementRef<typeof SheetPrimitive.Content>,
 58 |   SheetContentProps
 59 | >(({ side = "right", className, children, ...props }, ref) => (
 60 |   <SheetPortal>
 61 |     <SheetOverlay />
 62 |     <SheetPrimitive.Content
 63 |       ref={ref}
 64 |       className={cn(sheetVariants({ side }), className)}
 65 |       {...props}
 66 |     >
 67 |       {children}
 68 |       <SheetPrimitive.Close className="absolute right-4 top-4 rounded-sm opacity-70 ring-offset-background transition-opacity hover:opacity-100 focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2 disabled:pointer-events-none data-[state=open]:bg-secondary">
 69 |         <X className="h-4 w-4" />
 70 |         <span className="sr-only">Close</span>
 71 |       </SheetPrimitive.Close>
 72 |     </SheetPrimitive.Content>
 73 |   </SheetPortal>
 74 | ))
 75 | SheetContent.displayName = SheetPrimitive.Content.displayName
 76 | 
 77 | const SheetHeader = ({
 78 |   className,
 79 |   ...props
 80 | }: React.HTMLAttributes<HTMLDivElement>) => (
 81 |   <div
 82 |     className={cn(
 83 |       "flex flex-col space-y-2 text-center sm:text-left",
 84 |       className
 85 |     )}
 86 |     {...props}
 87 |   />
 88 | )
 89 | SheetHeader.displayName = "SheetHeader"
 90 | 
 91 | const SheetFooter = ({
 92 |   className,
 93 |   ...props
 94 | }: React.HTMLAttributes<HTMLDivElement>) => (
 95 |   <div
 96 |     className={cn(
 97 |       "flex flex-col-reverse sm:flex-row sm:justify-end sm:space-x-2",
 98 |       className
 99 |     )}
100 |     {...props}
101 |   />
102 | )
103 | SheetFooter.displayName = "SheetFooter"
104 | 
105 | const SheetTitle = React.forwardRef<
106 |   React.ElementRef<typeof SheetPrimitive.Title>,
107 |   React.ComponentPropsWithoutRef<typeof SheetPrimitive.Title>
108 | >(({ className, ...props }, ref) => (
109 |   <SheetPrimitive.Title
110 |     ref={ref}
111 |     className={cn("text-lg font-semibold text-foreground", className)}
112 |     {...props}
113 |   />
114 | ))
115 | SheetTitle.displayName = SheetPrimitive.Title.displayName
116 | 
117 | const SheetDescription = React.forwardRef<
118 |   React.ElementRef<typeof SheetPrimitive.Description>,
119 |   React.ComponentPropsWithoutRef<typeof SheetPrimitive.Description>
120 | >(({ className, ...props }, ref) => (
121 |   <SheetPrimitive.Description
122 |     ref={ref}
123 |     className={cn("text-sm text-muted-foreground", className)}
124 |     {...props}
125 |   />
126 | ))
127 | SheetDescription.displayName = SheetPrimitive.Description.displayName
128 | 
129 | export {
130 |   Sheet,
131 |   SheetPortal,
132 |   SheetOverlay,
133 |   SheetTrigger,
134 |   SheetClose,
135 |   SheetContent,
136 |   SheetHeader,
137 |   SheetFooter,
138 |   SheetTitle,
139 |   SheetDescription,
140 | }
141 |

--------------------------------------------------------------------------------
/app/api/image/route.ts:
--------------------------------------------------------------------------------
  1 | import { NextRequest, NextResponse } from "next/server";
  2 | import { GoogleGenerativeAI } from "@google/generative-ai";
  3 | import { HistoryItem, HistoryPart } from "@/lib/types";
  4 | 
  5 | // Initialize the Google Gen AI client with your API key
  6 | const GEMINI_API_KEY = process.env.GEMINI_API_KEY || "";
  7 | const genAI = new GoogleGenerativeAI(GEMINI_API_KEY);
  8 | 
  9 | // Define the model ID for Gemini 2.0 Flash experimental
 10 | const MODEL_ID = "gemini-2.0-flash-exp";
 11 | 
 12 | // Define interface for the formatted history item
 13 | interface FormattedHistoryItem {
 14 |   role: "user" | "model";
 15 |   parts: Array<{
 16 |     text?: string;
 17 |     inlineData?: { data: string; mimeType: string };
 18 |   }>;
 19 | }
 20 | 
 21 | export async function POST(req: NextRequest) {
 22 |   try {
 23 |     // Parse JSON request instead of FormData
 24 |     const requestData = await req.json();
 25 |     const { prompt, image: inputImage, history } = requestData;
 26 | 
 27 |     if (!prompt) {
 28 |       return NextResponse.json(
 29 |         { error: "Prompt is required" },
 30 |         { status: 400 }
 31 |       );
 32 |     }
 33 | 
 34 |     // Get the model with the correct configuration
 35 |     const model = genAI.getGenerativeModel({
 36 |       model: MODEL_ID,
 37 |       generationConfig: {
 38 |         temperature: 1,
 39 |         topP: 0.95,
 40 |         topK: 40,
 41 |         // @ts-expect-error - Gemini API JS is missing this type
 42 |         responseModalities: ["Text", "Image"],
 43 |       },
 44 |     });
 45 | 
 46 |     let result;
 47 | 
 48 |     try {
 49 |       // Convert history to the format expected by Gemini API
 50 |       const formattedHistory =
 51 |         history && history.length > 0
 52 |           ? history
 53 |               .map((item: HistoryItem) => {
 54 |                 return {
 55 |                   role: item.role,
 56 |                   parts: item.parts
 57 |                     .map((part: HistoryPart) => {
 58 |                       if (part.text) {
 59 |                         return { text: part.text };
 60 |                       }
 61 |                       if (part.image && item.role === "user") {
 62 |                         const imgParts = part.image.split(",");
 63 |                         if (imgParts.length > 1) {
 64 |                           return {
 65 |                             inlineData: {
 66 |                               data: imgParts[1],
 67 |                               mimeType: part.image.includes("image/png")
 68 |                                 ? "image/png"
 69 |                                 : "image/jpeg",
 70 |                             },
 71 |                           };
 72 |                         }
 73 |                       }
 74 |                       return { text: "" };
 75 |                     })
 76 |                     .filter((part) => Object.keys(part).length > 0), // Remove empty parts
 77 |                 };
 78 |               })
 79 |               .filter((item: FormattedHistoryItem) => item.parts.length > 0) // Remove items with no parts
 80 |           : [];
 81 | 
 82 |       // Create a chat session with the formatted history
 83 |       const chat = model.startChat({
 84 |         history: formattedHistory,
 85 |       });
 86 | 
 87 |       // Prepare the current message parts
 88 |       const messageParts = [];
 89 | 
 90 |       // Add the text prompt
 91 |       messageParts.push({ text: prompt });
 92 | 
 93 |       // Add the image if provided
 94 |       if (inputImage) {
 95 |         // For image editing
 96 |         console.log("Processing image edit request");
 97 | 
 98 |         // Check if the image is a valid data URL
 99 |         if (!inputImage.startsWith("data:")) {
100 |           throw new Error("Invalid image data URL format");
101 |         }
102 | 
103 |         const imageParts = inputImage.split(",");
104 |         if (imageParts.length < 2) {
105 |           throw new Error("Invalid image data URL format");
106 |         }
107 | 
108 |         const base64Image = imageParts[1];
109 |         const mimeType = inputImage.includes("image/png")
110 |           ? "image/png"
111 |           : "image/jpeg";
112 |         console.log(
113 |           "Base64 image length:",
114 |           base64Image.length,
115 |           "MIME type:",
116 |           mimeType
117 |         );
118 | 
119 |         // Add the image to message parts
120 |         messageParts.push({
121 |           inlineData: {
122 |             data: base64Image,
123 |             mimeType: mimeType,
124 |           },
125 |         });
126 |       }
127 | 
128 |       // Send the message to the chat
129 |       console.log("Sending message with", messageParts.length, "parts");
130 |       result = await chat.sendMessage(messageParts);
131 |     } catch (error) {
132 |       console.error("Error in chat.sendMessage:", error);
133 |       throw error;
134 |     }
135 | 
136 |     const response = result.response;
137 | 
138 |     let textResponse = null;
139 |     let imageData = null;
140 |     let mimeType = "image/png";
141 | 
142 |     // Process the response
143 |     if (response.candidates && response.candidates.length > 0) {
144 |       const parts = response.candidates[0].content.parts;
145 |       console.log("Number of parts in response:", parts.length);
146 | 
147 |       for (const part of parts) {
148 |         if ("inlineData" in part && part.inlineData) {
149 |           // Get the image data
150 |           imageData = part.inlineData.data;
151 |           mimeType = part.inlineData.mimeType || "image/png";
152 |           console.log(
153 |             "Image data received, length:",
154 |             imageData.length,
155 |             "MIME type:",
156 |             mimeType
157 |           );
158 |         } else if ("text" in part && part.text) {
159 |           // Store the text
160 |           textResponse = part.text;
161 |           console.log(
162 |             "Text response received:",
163 |             textResponse.substring(0, 50) + "..."
164 |           );
165 |         }
166 |       }
167 |     }
168 | 
169 |     // Return just the base64 image and description as JSON
170 |     return NextResponse.json({
171 |       image: imageData ? `data:${mimeType};base64,${imageData}` : null,
172 |       description: textResponse,
173 |     });
174 |   } catch (error) {
175 |     console.error("Error generating image:", error);
176 |     return NextResponse.json(
177 |       {
178 |         error: "Failed to generate image",
179 |         details: error instanceof Error ? error.message : String(error),
180 |       },
181 |       { status: 500 }
182 |     );
183 |   }
184 | }
185 |

--------------------------------------------------------------------------------
/app/page.tsx:
--------------------------------------------------------------------------------
  1 | "use client";
  2 | import { useState } from "react";
  3 | import { ImageUpload } from "@/components/ImageUpload";
  4 | import { ImagePromptInput } from "@/components/ImagePromptInput";
  5 | import { ImageResultDisplay } from "@/components/ImageResultDisplay";
  6 | import { ImageIcon } from "lucide-react";
  7 | import { HistoryItem } from "@/lib/types";
  8 | import Header from "@/components/Header";
  9 | import PromptSuggestions from "@/components/PromptSuggestions";
 10 | import Footer from "@/components/Footer"; // Import the Footer component
 11 | 
 12 | export default function Home() {
 13 |   const [image, setImage] = useState<string | null>(null);
 14 |   const [generatedImage, setGeneratedImage] = useState<string | null>(null);
 15 |   const [description, setDescription] = useState<string | null>(null);
 16 |   const [loading, setLoading] = useState(false);
 17 |   const [error, setError] = useState<string | null>(null);
 18 |   const [history, setHistory] = useState<HistoryItem[]>([]);
 19 | 
 20 |   const handleImageSelect = (imageData: string) => {
 21 |     setImage(imageData || null);
 22 |   };
 23 | 
 24 |   const handlePromptSubmit = async (prompt: string) => {
 25 |     try {
 26 |       setLoading(true);
 27 |       setError(null);
 28 | 
 29 |       const imageToEdit = generatedImage || image;
 30 |       const requestData = {
 31 |         prompt,
 32 |         image: imageToEdit,
 33 |         history: history.length > 0 ? history : undefined,
 34 |       };
 35 | 
 36 |       const response = await fetch("/api/image", {
 37 |         method: "POST",
 38 |         headers: {
 39 |           "Content-Type": "application/json",
 40 |         },
 41 |         body: JSON.stringify(requestData),
 42 |       });
 43 | 
 44 |       if (!response.ok) {
 45 |         const errorData = await response.json();
 46 |         throw new Error(errorData.error || "Failed to generate image");
 47 |       }
 48 | 
 49 |       const data = await response.json();
 50 | 
 51 |       if (data.image) {
 52 |         setGeneratedImage(data.image);
 53 |         setDescription(data.description || null);
 54 | 
 55 |         const userMessage: HistoryItem = {
 56 |           role: "user",
 57 |           parts: [
 58 |             { text: prompt },
 59 |             ...(imageToEdit ? [{ image: imageToEdit }] : []),
 60 |           ],
 61 |         };
 62 | 
 63 |         const aiResponse: HistoryItem = {
 64 |           role: "model",
 65 |           parts: [
 66 |             ...(data.description ? [{ text: data.description }] : []),
 67 |             ...(data.image ? [{ image: data.image }] : []),
 68 |           ],
 69 |         };
 70 | 
 71 |         setHistory((prevHistory) => [...prevHistory, userMessage, aiResponse]);
 72 |       } else {
 73 |         setError("Server Error! Please try again later");
 74 |       }
 75 |     } catch (error) {
 76 |       setError(error instanceof Error ? error.message : "An error occurred");
 77 |       console.error("Error processing request:", error);
 78 |     } finally {
 79 |       setLoading(false);
 80 |     }
 81 |   };
 82 | 
 83 |   const handleReset = () => {
 84 |     setImage(null);
 85 |     setGeneratedImage(null);
 86 |     setDescription(null);
 87 |     setLoading(false);
 88 |     setError(null);
 89 |     setHistory([]);
 90 |   };
 91 | 
 92 |   const currentImage = generatedImage || image;
 93 |   const isEditing = !!currentImage;
 94 |   const displayImage = generatedImage;
 95 | 
 96 |   return (
 97 |     <div className="min-h-screen bg-gradient-to-b from-background to-secondary/20 flex flex-col">
 98 |       <div className="flex-grow">
 99 |         <div className="max-w-screen-xl mx-auto pb-20">
100 |           <Header />
101 | 
102 |           <main className="px-4 sm:px-8 pt-8">
103 |             <div className="max-w-3xl mx-auto text-center mb-12 animate-fade-in">
104 |               <h2 className="text-3xl font-bold tracking-tight mb-3">Transform Your Ideas Into Art</h2>
105 |               <p className="text-muted-foreground max-w-lg mx-auto">
106 |                 Describe the image you want to create, and watch as AI brings your vision to life with stunning detail.
107 |               </p>
108 |             </div>
109 | 
110 |             {/* Error Display */}
111 |             {error && (
112 |               <div
113 |                 className="p-4 mb-4 text-sm text-red-700 bg-red-100 rounded-lg dark:bg-red-900 dark:text-red-300"
114 |                 role="alert"
115 |               >
116 |                 {error}
117 |               </div>
118 |             )}
119 | 
120 |             {/* Main Content */}
121 |             {!displayImage && !loading ? (
122 |               <>
123 |                 {/* Image Upload Section */}
124 |                 <ImageUpload
125 |                   onImageSelect={handleImageSelect}
126 |                   currentImage={currentImage}
127 |                 />
128 | 
129 |                 {/* Prompt Input Section */}
130 |                 <ImagePromptInput
131 |                   onSubmit={handlePromptSubmit}
132 |                   isEditing={isEditing}
133 |                   isLoading={loading}
134 |                 />
135 | 
136 |                 <PromptSuggestions onSelectSuggestion={(suggestion) => handlePromptSubmit(suggestion)} />
137 |               </>
138 |             ) : loading ? (
139 |               /* Loading State */
140 |               <div
141 |                 role="status"
142 |                 className="flex flex-col items-center justify-center h-56 bg-gray-100 dark:bg-gray-800 rounded-lg animate-pulse"
143 |                 aria-label="Loading"
144 |               >
145 |                 <ImageIcon className="w-12 h-12 text-gray-300 dark:text-gray-600" />
146 |                 <span className="mt-2 text-sm font-medium text-gray-500 dark:text-gray-400">
147 |                   Editing your image...
148 |                 </span>
149 |               </div>
150 |             ) : (
151 |               <>
152 |                 {/* Image Result Display */}
153 |                 <ImageResultDisplay
154 |                   imageUrl={displayImage || ""}
155 |                   description={description}
156 |                   onReset={handleReset}
157 |                   conversationHistory={history}
158 |                 />
159 | 
160 |                 {/* Prompt Input for Further Editing */}
161 |                 <ImagePromptInput
162 |                   onSubmit={handlePromptSubmit}
163 |                   isEditing={true}
164 |                   isLoading={loading}
165 |                 />
166 |               </>
167 |             )}
168 |           </main>
169 |         </div>
170 |       </div>
171 |       <Footer /> {/* Include the Footer component */}
172 |     </div>
173 |   );
174 | }
175 |

--------------------------------------------------------------------------------
/LICENSE:
--------------------------------------------------------------------------------
  1 |                                  Apache License
  2 |                            Version 2.0, January 2004
  3 |                         http://www.apache.org/licenses/
  4 | 
  5 |    TERMS AND CONDITIONS FOR USE, REPRODUCTION, AND DISTRIBUTION
  6 | 
  7 |    1. Definitions.
  8 | 
  9 |       "License" shall mean the terms and conditions for use, reproduction,
 10 |       and distribution as defined by Sections 1 through 9 of this document.
 11 | 
 12 |       "Licensor" shall mean the copyright owner or entity authorized by
 13 |       the copyright owner that is granting the License.
 14 | 
 15 |       "Legal Entity" shall mean the union of the acting entity and all
 16 |       other entities that control, are controlled by, or are under common
 17 |       control with that entity. For the purposes of this definition,
 18 |       "control" means (i) the power, direct or indirect, to cause the
 19 |       direction or management of such entity, whether by contract or
 20 |       otherwise, or (ii) ownership of fifty percent (50%) or more of the
 21 |       outstanding shares, or (iii) beneficial ownership of such entity.
 22 | 
 23 |       "You" (or "Your") shall mean an individual or Legal Entity
 24 |       exercising permissions granted by this License.
 25 | 
 26 |       "Source" form shall mean the preferred form for making modifications,
 27 |       including but not limited to software source code, documentation
 28 |       source, and configuration files.
 29 | 
 30 |       "Object" form shall mean any form resulting from mechanical
 31 |       transformation or translation of a Source form, including but
 32 |       not limited to compiled object code, generated documentation,
 33 |       and conversions to other media types.
 34 | 
 35 |       "Work" shall mean the work of authorship, whether in Source or
 36 |       Object form, made available under the License, as indicated by a
 37 |       copyright notice that is included in or attached to the work
 38 |       (an example is provided in the Appendix below).
 39 | 
 40 |       "Derivative Works" shall mean any work, whether in Source or Object
 41 |       form, that is based on (or derived from) the Work and for which the
 42 |       editorial revisions, annotations, elaborations, or other modifications
 43 |       represent, as a whole, an original work of authorship. For the purposes
 44 |       of this License, Derivative Works shall not include works that remain
 45 |       separable from, or merely link (or bind by name) to the interfaces of,
 46 |       the Work and Derivative Works thereof.
 47 | 
 48 |       "Contribution" shall mean any work of authorship, including
 49 |       the original version of the Work and any modifications or additions
 50 |       to that Work or Derivative Works thereof, that is intentionally
 51 |       submitted to Licensor for inclusion in the Work by the copyright owner
 52 |       or by an individual or Legal Entity authorized to submit on behalf of
 53 |       the copyright owner. For the purposes of this definition, "submitted"
 54 |       means any form of electronic, verbal, or written communication sent
 55 |       to the Licensor or its representatives, including but not limited to
 56 |       communication on electronic mailing lists, source code control systems,
 57 |       and issue tracking systems that are managed by, or on behalf of, the
 58 |       Licensor for the purpose of discussing and improving the Work, but
 59 |       excluding communication that is conspicuously marked or otherwise
 60 |       designated in writing by the copyright owner as "Not a Contribution."
 61 | 
 62 |       "Contributor" shall mean Licensor and any individual or Legal Entity
 63 |       on behalf of whom a Contribution has been received by Licensor and
 64 |       subsequently incorporated within the Work.
 65 | 
 66 |    2. Grant of Copyright License. Subject to the terms and conditions of
 67 |       this License, each Contributor hereby grants to You a perpetual,
 68 |       worldwide, non-exclusive, no-charge, royalty-free, irrevocable
 69 |       copyright license to reproduce, prepare Derivative Works of,
 70 |       publicly display, publicly perform, sublicense, and distribute the
 71 |       Work and such Derivative Works in Source or Object form.
 72 | 
 73 |    3. Grant of Patent License. Subject to the terms and conditions of
 74 |       this License, each Contributor hereby grants to You a perpetual,
 75 |       worldwide, non-exclusive, no-charge, royalty-free, irrevocable
 76 |       (except as stated in this section) patent license to make, have made,
 77 |       use, offer to sell, sell, import, and otherwise transfer the Work,
 78 |       where such license applies only to those patent claims licensable
 79 |       by such Contributor that are necessarily infringed by their
 80 |       Contribution(s) alone or by combination of their Contribution(s)
 81 |       with the Work to which such Contribution(s) was submitted. If You
 82 |       institute patent litigation against any entity (including a
 83 |       cross-claim or counterclaim in a lawsuit) alleging that the Work
 84 |       or a Contribution incorporated within the Work constitutes direct
 85 |       or contributory patent infringement, then any patent licenses
 86 |       granted to You under this License for that Work shall terminate
 87 |       as of the date such litigation is filed.
 88 | 
 89 |    4. Redistribution. You may reproduce and distribute copies of the
 90 |       Work or Derivative Works thereof in any medium, with or without
 91 |       modifications, and in Source or Object form, provided that You
 92 |       meet the following conditions:
 93 | 
 94 |       (a) You must give any other recipients of the Work or
 95 |           Derivative Works a copy of this License; and
 96 | 
 97 |       (b) You must cause any modified files to carry prominent notices
 98 |           stating that You changed the files; and
 99 | 
100 |       (c) You must retain, in the Source form of any Derivative Works
101 |           that You distribute, all copyright, patent, trademark, and
102 |           attribution notices from the Source form of the Work,
103 |           excluding those notices that do not pertain to any part of
104 |           the Derivative Works; and
105 | 
106 |       (d) If the Work includes a "NOTICE" text file as part of its
107 |           distribution, then any Derivative Works that You distribute must
108 |           include a readable copy of the attribution notices contained
109 |           within such NOTICE file, excluding those notices that do not
110 |           pertain to any part of the Derivative Works, in at least one
111 |           of the following places: within a NOTICE text file distributed
112 |           as part of the Derivative Works; within the Source form or
113 |           documentation, if provided along with the Derivative Works; or,
114 |           within a display generated by the Derivative Works, if and
115 |           wherever such third-party notices normally appear. The contents
116 |           of the NOTICE file are for informational purposes only and
117 |           do not modify the License. You may add Your own attribution
118 |           notices within Derivative Works that You distribute, alongside
119 |           or as an addendum to the NOTICE text from the Work, provided
120 |           that such additional attribution notices cannot be construed
121 |           as modifying the License.
122 | 
123 |       You may add Your own copyright statement to Your modifications and
124 |       may provide additional or different license terms and conditions
125 |       for use, reproduction, or distribution of Your modifications, or
126 |       for any such Derivative Works as a whole, provided Your use,
127 |       reproduction, and distribution of the Work otherwise complies with
128 |       the conditions stated in this License.
129 | 
130 |    5. Submission of Contributions. Unless You explicitly state otherwise,
131 |       any Contribution intentionally submitted for inclusion in the Work
132 |       by You to the Licensor shall be under the terms and conditions of
133 |       this License, without any additional terms or conditions.
134 |       Notwithstanding the above, nothing herein shall supersede or modify
135 |       the terms of any separate license agreement you may have executed
136 |       with Licensor regarding such Contributions.
137 | 
138 |    6. Trademarks. This License does not grant permission to use the trade
139 |       names, trademarks, service marks, or product names of the Licensor,
140 |       except as required for reasonable and customary use in describing the
141 |       origin of the Work and reproducing the content of the NOTICE file.
142 | 
143 |    7. Disclaimer of Warranty. Unless required by applicable law or
144 |       agreed to in writing, Licensor provides the Work (and each
145 |       Contributor provides its Contributions) on an "AS IS" BASIS,
146 |       WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or
147 |       implied, including, without limitation, any warranties or conditions
148 |       of TITLE, NON-INFRINGEMENT, MERCHANTABILITY, or FITNESS FOR A
149 |       PARTICULAR PURPOSE. You are solely responsible for determining the
150 |       appropriateness of using or redistributing the Work and assume any
151 |       risks associated with Your exercise of permissions under this License.
152 | 
153 |    8. Limitation of Liability. In no event and under no legal theory,
154 |       whether in tort (including negligence), contract, or otherwise,
155 |       unless required by applicable law (such as deliberate and grossly
156 |       negligent acts) or agreed to in writing, shall any Contributor be
157 |       liable to You for damages, including any direct, indirect, special,
158 |       incidental, or consequential damages of any character arising as a
159 |       result of this License or out of the use or inability to use the
160 |       Work (including but not limited to damages for loss of goodwill,
161 |       work stoppage, computer failure or malfunction, or any and all
162 |       other commercial damages or losses), even if such Contributor
163 |       has been advised of the possibility of such damages.
164 | 
165 |    9. Accepting Warranty or Additional Liability. While redistributing
166 |       the Work or Derivative Works thereof, You may choose to offer,
167 |       and charge a fee for, acceptance of support, warranty, indemnity,
168 |       or other liability obligations and/or rights consistent with this
169 |       License. However, in accepting such obligations, You may act only
170 |       on Your own behalf and on Your sole responsibility, not on behalf
171 |       of any other Contributor, and only if You agree to indemnify,
172 |       defend, and hold each Contributor harmless for any liability
173 |       incurred by, or claims asserted against, such Contributor by reason
174 |       of your accepting any such warranty or additional liability.
175 | 
176 |    END OF TERMS AND CONDITIONS
177 | 
178 |    APPENDIX: How to apply the Apache License to your work.
179 | 
180 |       To apply the Apache License to your work, attach the following
181 |       boilerplate notice, with the fields enclosed by brackets "[]"
182 |       replaced with your own identifying information. (Don't include
183 |       the brackets!)  The text should be enclosed in the appropriate
184 |       comment syntax for the file format. We also recommend that a
185 |       file or class name and description of purpose be included on the
186 |       same "printed page" as the copyright notice for easier
187 |       identification within third-party archives.
188 | 
189 |    Copyright [yyyy] [name of copyright owner]
190 | 
191 |    Licensed under the Apache License, Version 2.0 (the "License");
192 |    you may not use this file except in compliance with the License.
193 |    You may obtain a copy of the License at
194 | 
195 |        http://www.apache.org/licenses/LICENSE-2.0
196 | 
197 |    Unless required by applicable law or agreed to in writing, software
198 |    distributed under the License is distributed on an "AS IS" BASIS,
199 |    WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
200 |    See the License for the specific language governing permissions and
201 |    limitations under the License.
202 |

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