init

Dockerfile

@@ -0,0 +1,61 @@
+# syntax=docker/dockerfile:1.4
+
+# Adapted from https://github.com/vercel/next.js/blob/e60a1e747c3f521fc24dfd9ee2989e13afeb0a9b/examples/with-docker/Dockerfile
+# For more information, see https://nextjs.org/docs/pages/building-your-application/deploying#docker-image
+
+FROM node:18 AS base
+
+# Install dependencies only when needed
+FROM base AS deps
+WORKDIR /app
+
+# Install dependencies based on the preferred package manager
+COPY --link package.json yarn.lock* package-lock.json* pnpm-lock.yaml* ./
+RUN \
+  if [ -f yarn.lock ]; then yarn --frozen-lockfile; \
+  elif [ -f package-lock.json ]; then npm ci; \
+  elif [ -f pnpm-lock.yaml ]; then yarn global add pnpm && pnpm i --frozen-lockfile; \
+  else echo "Lockfile not found." && exit 1; \
+  fi
+
+
+# Rebuild the source code only when needed
+FROM base AS builder
+WORKDIR /app
+COPY --from=deps --link /app/node_modules ./node_modules
+COPY --link  . .
+
+ENV NEXT_TELEMETRY_DISABLED 1
+
+RUN npm run build
+
+# If using yarn comment out above and use below instead
+# RUN yarn build
+
+# Production image, copy all the files and run next
+FROM base AS runner
+WORKDIR /app
+
+ENV NODE_ENV production
+ENV NEXT_TELEMETRY_DISABLED 1
+
+RUN \
+  addgroup --system --gid 1001 nodejs; \
+  adduser --system --uid 1001 nextjs
+
+COPY --from=builder --link /app/public ./public
+
+# Automatically leverage output traces to reduce image size
+# https://nextjs.org/docs/advanced-features/output-file-tracing
+COPY --from=builder --link --chown=1001:1001 /app/.next/standalone ./
+COPY --from=builder --link --chown=1001:1001 /app/.next/static ./.next/static
+
+USER nextjs
+
+EXPOSE 3000
+
+ENV PORT 3000
+ENV HOSTNAME 0.0.0.0
+
+
+CMD ["node", "server.js"]

README copy.md

@@ -0,0 +1,36 @@
+This is a [Next.js](https://nextjs.org) project bootstrapped with [`create-next-app`](https://nextjs.org/docs/app/api-reference/cli/create-next-app).
+
+## Getting Started
+
+First, run the development server:
+
+```bash
+npm run dev
+# or
+yarn dev
+# or
+pnpm dev
+# or
+bun dev
+```
+
+Open [http://localhost:3000](http://localhost:3000) with your browser to see the result.
+
+You can start editing the page by modifying `app/page.tsx`. The page auto-updates as you edit the file.
+
+This project uses [`next/font`](https://nextjs.org/docs/app/building-your-application/optimizing/fonts) to automatically optimize and load [Geist](https://vercel.com/font), a new font family for Vercel.
+
+## Learn More
+
+To learn more about Next.js, take a look at the following resources:
+
+- [Next.js Documentation](https://nextjs.org/docs) - learn about Next.js features and API.
+- [Learn Next.js](https://nextjs.org/learn) - an interactive Next.js tutorial.
+
+You can check out [the Next.js GitHub repository](https://github.com/vercel/next.js) - your feedback and contributions are welcome!
+
+## Deploy on Vercel
+
+The easiest way to deploy your Next.js app is to use the [Vercel Platform](https://vercel.com/new?utm_medium=default-template&filter=next.js&utm_source=create-next-app&utm_campaign=create-next-app-readme) from the creators of Next.js.
+
+Check out our [Next.js deployment documentation](https://nextjs.org/docs/app/building-your-application/deploying) for more details.

app/api/extract/route.ts

@@ -0,0 +1,48 @@
+import { NextResponse } from "next/server";
+import { GoogleGenerativeAI } from "@google/generative-ai";
+
+const genAI = new GoogleGenerativeAI(process.env.GEMINI_API_KEY!);
+const MODEL_ID = "gemini-2.0-flash";
+
+export async function POST(request: Request) {
+  try {
+    const formData = await request.formData();
+    const file = formData.get("file") as File;
+    const schema = JSON.parse(formData.get("schema") as string);
+
+    // Convert PDF to base64
+    const buffer = await file.arrayBuffer();
+    const base64 = Buffer.from(buffer).toString("base64");
+
+    const model = genAI.getGenerativeModel({
+      model: MODEL_ID,
+      generationConfig: {
+        responseMimeType: "application/json",
+        responseSchema: schema,
+      },
+    });
+
+    const prompt = "Extract the structured data from the following PDF file";
+
+    const result = await model.generateContent([
+      prompt,
+      {
+        inlineData: {
+          mimeType: "application/pdf",
+          data: base64,
+        },
+      },
+    ]);
+
+    const response = await result.response;
+    const extractedData = JSON.parse(response.text());
+
+    return NextResponse.json(extractedData);
+  } catch (error) {
+    console.error("Error extracting data:", error);
+    return NextResponse.json(
+      { error: "Failed to extract data" },
+      { status: 500 }
+    );
+  }
+}

app/api/schema/route.ts

@@ -0,0 +1,144 @@
+import { NextResponse } from "next/server";
+import { GoogleGenerativeAI } from "@google/generative-ai";
+
+const genAI = new GoogleGenerativeAI(process.env.GEMINI_API_KEY!);
+const MODEL_ID = "gemini-2.0-flash";
+
+const META_PROMPT = `
+You are a JSON Schema expert. Your task is to create JSON schema baed on the user input. The schema will be used for extra data.  
+
+You must also make sure:
+- All fields in an object are set as required
+- All objects must have properties defined
+- Order matters! If the values are dependent or would require additional information, make sure to include the additional information in the description. Same counts for "reasoning" or "thinking" should come before the conclusion.
+- $defs must be defined under the schema param
+- Return only the schema JSON not more, use \`\`\`json to start and \`\`\` to end the JSON schema
+
+Restrictions:
+- You cannot use examples, if you think examples are helpful include them in the description.
+- You cannot use default values, If you think default are helpful include them in the description.
+- Top level cannot have a "title" property only "description"
+- You cannot use $defs, directly in the schema, don't use any $defs and $ref in the schema. Directly define the schema in the properties.
+- Never include a $schema
+- The "type" needs to be a single value, no arrays
+
+Guidelines:
+- If the user prompt is short define a single object schema and fields based on your knowledge.
+- If the user prompt is in detail about the data only use the data in the schema. Don't add more fields than the user asked for.
+
+Examples:
+
+Input: Cookie Recipes
+Output: \`\`\`json
+{
+    "description": "Schema for a cookie recipe, including ingredients and quantities. The 'ingredients' array lists each ingredient along with its corresponding quantity and unit of measurement. The 'instructions' array provides a step-by-step guide to preparing the cookies. The order of instructions is important.",
+    "type": "object",
+    "properties": {
+       "name": {
+          "type": "string",
+          "description": "The name of the cookie recipe."
+       },
+       "description": {
+          "type": "string",
+          "description": "A short description of the cookie, including taste and textures."
+       },
+       "ingredients": {
+          "type": "array",
+          "description": "A list of ingredients required for the recipe.",
+          "items": {
+             "type": "object",
+             "description": "An ingredient with its quantity and unit.",
+             "properties": {
+                "name": {
+                   "type": "string",
+                   "description": "The name of the ingredient (e.g., flour, sugar, butter)."
+                },
+                "quantity": {
+                   "type": "number",
+                   "description": "The amount of the ingredient needed."
+                },
+                "unit": {
+                   "type": "string",
+                   "description": "The unit of measurement for the ingredient (e.g., cups, grams, teaspoons). Use abbreviations like 'tsp' for teaspoon and 'tbsp' for tablespoon."
+                }
+             },
+             "required": [
+                "name",
+                "quantity",
+                "unit"
+             ]
+          }
+       },
+       "instructions": {
+          "type": "array",
+          "description": "A sequence of steps to prepare the cookie recipe. The order of instructions matters.",
+          "items": {
+             "type": "string",
+             "description": "A single instruction step."
+          }
+       }
+    },
+    "required": [
+       "name",
+       "description",
+       "ingredients",
+       "instructions"
+    ]
+}
+\`\`\`
+
+Input: Book with title, author, and publication year.
+Output: \`\`\`json
+{
+    "type": "object",
+    "properties": {
+        "title": {
+            "type": "string",
+            "description": "The title of the book."
+        },
+        "author": {
+            "type": "string",
+            "description": "The author of the book."
+        },
+        "publicationYear": {
+            "type": "integer",
+            "description": "The year the book was published."
+        }
+    },
+    "required": [
+        "title",
+        "author",
+        "publicationYear"
+    ],
+}
+\`\`\`
+
+Input: {USER_PROMPT}`.trim();
+
+export async function POST(request: Request) {
+  try {
+    // Get the prompt from the request body
+    const { prompt } = await request.json();
+    // Get the model
+    const model = genAI.getGenerativeModel({ model: MODEL_ID });
+    // Generate the content
+    const result = await model.generateContent(
+      META_PROMPT.replace("{USER_PROMPT}", prompt)
+    );
+    // Get the response
+    const response = await result.response;
+    // Remove markdown code block markers if present
+    const jsonString = response
+      .text()
+      .replace(/^```json\n?/, "")
+      .replace(/\n?```$/, "");
+    // Return the schema
+    return NextResponse.json({ schema: JSON.parse(jsonString) });
+  } catch (error) {
+    console.error("Error generating schema:", error);
+    return NextResponse.json(
+      { error: "Failed to generate schema" },
+      { status: 500 }
+    );
+  }
+}

app/globals.css

@@ -0,0 +1,86 @@
+@tailwind base;
+@tailwind components;
+@tailwind utilities;
+
+body {
+  font-family: Arial, Helvetica, sans-serif;
+}
+
+@layer utilities {
+  .text-balance {
+    text-wrap: balance;
+  }
+}
+
+@layer base {
+    :root {
+      --background: 0 0% 100%;
+      --foreground: 240, 3%, 12%;
+      --card: 0 0% 100%;
+      --card-foreground: 240, 3%, 12%;
+      --popover: 0 0% 100%;
+      --popover-foreground: 240, 3%, 12%;
+      --primary: 214, 82%, 51%;
+      --primary-foreground: 0 0% 98%;
+      --secondary: 240 4.8% 95.9%;
+      --secondary-foreground: 214, 82%, 51%;
+      --muted: 240 4.8% 95.9%;
+      --muted-foreground: 240 3.8% 46.1%;
+      --accent: 240 4.8% 95.9%;
+      --accent-foreground: 214, 82%, 51%;
+      --destructive: 0 84.2% 60.2%;
+      --destructive-foreground: 0 0% 98%;
+      --border: 240 5.9% 90%;
+      --input: 240 5.9% 90%;
+      --ring: 214, 82%, 51%;
+      --radius: 0.5rem;
+      --chart-1: 12 76% 61%;
+      --chart-2: 173 58% 39%;
+      --chart-3: 197 37% 24%;
+      --chart-4: 43 74% 66%;
+      --chart-5: 27 87% 67%;
+    }
+  
+    .dark {
+      --background: 240 3% 12%;
+      --foreground: 0 0% 98%;
+      --card: 220 7% 8%;
+      --card-foreground: 0 0% 98%;
+      --popover: 220 7% 8%;
+      --popover-foreground: 0 0% 98%;
+      --primary: 217 91% 60%;
+      --primary-foreground: 0 0% 98%;
+      --secondary: 240 3% 12%;
+      --secondary-foreground: 0 0% 98%;
+      --muted: 240 3% 12%;
+      --muted-foreground: 215 20.2% 65.1%;
+      --accent: 240 3% 12%;
+      --accent-foreground: 0 0% 98%;
+      --destructive: 0 62.8% 30.6%;
+      --destructive-foreground: 0 0% 98%;
+      --border: 225 9% 15%;
+      --input: 225 9% 15%;
+      --ring: 224 76.3% 48%;
+      --chart-1: 220 70% 50%;
+      --chart-2: 160 60% 45%;
+      --chart-3: 30 80% 55%;
+      --chart-4: 280 65% 60%;
+      --chart-5: 340 75% 55%;
+    }
+  }
+  
+@layer base {
+  * {
+    @apply border-border;
+  }
+  body {
+    @apply bg-background text-foreground;
+  }
+}
+
+h1,h2,h3,h4,h5,h6 {
+  @apply text-foreground dark:text-foreground;
+}
+
+.react-pdf__Page__canvas { display: inline-block; width: auto !important; height: 100% !important; }
+

app/layout.tsx

@@ -0,0 +1,39 @@
+import type { Metadata, Viewport } from "next";
+import { Open_Sans } from "next/font/google";
+import "./globals.css";
+import { ThemeProviders } from "@/components/providers";
+
+const openSans = Open_Sans({
+  weight: ["400", "500", "700"],
+  style: ["normal", "italic"],
+  subsets: ["latin"],
+  variable: "--font-open-sans",
+});
+
+export const metadata: Metadata = {
+  title: "PDF Extractor",
+  description: "Extract data from PDFs using Google DeepMind Gemini 2.0",
+};
+
+export const viewport: Viewport = {
+  themeColor: [
+    { media: "(prefers-color-scheme: light)", color: "white" },
+    { media: "(prefers-color-scheme: dark)", color: "black" },
+  ],
+};
+
+export default function RootLayout({
+  children,
+}: Readonly<{
+  children: React.ReactNode;
+}>) {
+  return (
+    <html lang="en" suppressHydrationWarning>
+      <body
+        className={`${openSans.className} antialiased bg-white dark:bg-slate-950`}
+      >
+        <ThemeProviders>{children}</ThemeProviders>
+      </body>
+    </html>
+  );
+}

app/page.tsx

@@ -0,0 +1,103 @@
+"use client";
+import { useState } from "react";
+import { FileUpload } from "@/components/FileUpload";
+import { PromptInput } from "@/components/PromptInput";
+import { ResultDisplay } from "@/components/ResultDisplay";
+import { FileIcon, FileText } from "lucide-react";
+import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card";
+
+export default function Home() {
+  const [prompt, setPrompt] = useState("");
+  const [schema, setSchema] = useState<string | null>(null);
+  const [file, setFile] = useState<File | null>(null);
+  const [result, setResult] = useState<string | null>(null);
+  const [loading, setLoading] = useState(false);
+
+  const handleFileSelect = (selectedFile: File) => {
+    setFile(selectedFile);
+  };
+
+  const handlePromptSubmit = async (prompt: string) => {
+    try {
+      setLoading(true);
+      // First, get the JSON schema
+      setPrompt(prompt);
+      const schemaResponse = await fetch("/api/schema", {
+        method: "POST",
+        headers: {
+          "Content-Type": "application/json",
+        },
+        body: JSON.stringify({ prompt }),
+      });
+
+      const { schema } = await schemaResponse.json();
+
+      setSchema(schema);
+      setPrompt(prompt);
+      // Then, process the PDF with the schema
+      const formData = new FormData();
+      formData.append("file", file!);
+      formData.append("schema", JSON.stringify(schema));
+
+      const extractResponse = await fetch("/api/extract", {
+        method: "POST",
+        body: formData,
+      });
+
+      const data = await extractResponse.json();
+      setResult(data);
+    } catch (error) {
+      console.error("Error processing request:", error);
+    } finally {
+      setLoading(false);
+    }
+  };
+
+  const handleReset = () => {
+    setFile(null);
+    setResult(null);
+    setPrompt("");
+    setSchema(null);
+    setLoading(false);
+  };
+
+  return (
+    <main className="min-h-screen flex items-center justify-center bg-background p-8">
+      <Card className="w-full max-w-2xl border-0 bg-card shadow-none">
+        <CardHeader className="flex flex-col items-center justify-center space-y-2">
+          <CardTitle className="flex items-center gap-2 text-foreground">
+            <FileText className="w-8 h-8 text-primary" />
+            PDF to Structured Data
+          </CardTitle>
+          <span className="text-sm font-mono text-muted-foreground">
+            powered by Google DeepMind Gemini 2.0 Flash
+          </span>
+        </CardHeader>
+        <CardContent className="space-y-6 pt-6 w-full">
+          {!result && !loading ? (
+            <>
+              <FileUpload onFileSelect={handleFileSelect} />
+              <PromptInput onSubmit={handlePromptSubmit} file={file} />
+            </>
+          ) : loading ? (
+            <div
+              role="status"
+              className="flex items-center mx-auto justify-center h-56 max-w-sm bg-gray-300 rounded-lg animate-pulse dark:bg-secondary"
+            >
+              <FileIcon className="w-10 h-10 text-gray-200 dark:text-muted-foreground" />
+              <span className="pl-4 font-mono font-xs text-muted-foreground">
+                Processing...
+              </span>
+            </div>
+          ) : (
+            <ResultDisplay
+              result={result || ""}
+              schema={schema || ""}
+              onReset={handleReset}
+            />
+          )}
+        </CardContent>
+      </Card>
+    </main>
+  );
+}

components.json

@@ -0,0 +1,21 @@
+{
+  "$schema": "https://ui.shadcn.com/schema.json",
+  "style": "default",
+  "rsc": true,
+  "tsx": true,
+  "tailwind": {
+    "config": "tailwind.config.ts",
+    "css": "app/globals.css",
+    "baseColor": "slate",
+    "cssVariables": true,
+    "prefix": ""
+  },
+  "aliases": {
+    "components": "@/components",
+    "utils": "@/lib/utils",
+    "ui": "@/components/ui",
+    "lib": "@/lib",
+    "hooks": "@/hooks"
+  },
+  "iconLibrary": "lucide"
+}

components/FileUpload.tsx

@@ -0,0 +1,97 @@
+"use client";
+
+import { useCallback, useState } from "react";
+import { useDropzone } from "react-dropzone";
+import { Button } from "./ui/button";
+import { Upload as UploadIcon, File as FileIcon, X } from "lucide-react";
+import PdfViewer from "./PdfViewer";
+
+interface FileUploadProps {
+  onFileSelect: (file: File) => void;
+}
+
+export function formatFileSize(bytes: number): string {
+  if (bytes === 0) return "0 Bytes";
+  const k = 1024;
+  const sizes = ["Bytes", "KB", "MB", "GB", "TB"];
+  const i = Math.floor(Math.log(bytes) / Math.log(k));
+  return (
+    Number.parseFloat((bytes / Math.pow(k, i)).toFixed(2)) + " " + sizes[i]
+  );
+}
+
+export function FileUpload({ onFileSelect }: FileUploadProps) {
+  const [selectedFile, setSelectedFile] = useState<File | null>(null);
+  const [file, setFile] = useState<File | null>(null);
+
+  const onDrop = useCallback(
+    (acceptedFiles: File[]) => {
+      const file = acceptedFiles[0];
+      setSelectedFile(file);
+      onFileSelect(file);
+      setFile(file);
+    },
+    [onFileSelect]
+  );
+
+  const { getRootProps, getInputProps, isDragActive } = useDropzone({
+    onDrop,
+    accept: {
+      "application/pdf": [".pdf"],
+    },
+    maxSize: 100 * 1024 * 1024, // 100MB
+    multiple: false,
+  });
+
+  return (
+    <div className={`"w-full min-h-[150px] `}>
+      {!selectedFile ? (
+        <div
+          {...getRootProps()}
+          className={`min-h-[150px] p-4 rounded-lg
+          ${isDragActive ? "bg-secondary/50" : "bg-secondary"}
+          transition-colors duration-200 ease-in-out hover:bg-secondary/50
+          border-2 border-dashed border-secondary
+          cursor-pointer flex items-center justify-center gap-4
+        `}
+        >
+          <input {...getInputProps()} />
+          <div className="flex flex-row items-center">
+            <UploadIcon className="w-8 h-8 text-primary mr-3 flex-shrink-0" />
+            <div className="">
+              <p className="text-sm font-medium text-foreground">
+                Drop your PDF here or click to browse
+              </p>
+              <p className="text-xs text-muted-foreground">
+                Maximum file size: 100MB
+              </p>
+            </div>
+          </div>
+        </div>
+      ) : (
+        <div className="flex my-auto flex-row items-center p-4 rounded-lg bg-secondary">
+          <FileIcon className="w-8 h-8 text-primary mr-3 flex-shrink-0" />
+          <div className="flex-grow min-w-0">
+            <p className="text-sm font-medium truncate text-foreground">
+              {selectedFile?.name}
+            </p>
+            <p className="text-xs text-muted-foreground">
+              {formatFileSize(selectedFile?.size ?? 0)}
+            </p>
+          </div>
+          {file && <PdfViewer file={file} />}
+
+          <Button
+            variant="ghost"
+            size="icon"
+            onClick={() => setSelectedFile(null)}
+            className="flex-shrink-0 ml-2"
+          >
+            <X className="w-4 h-4" />
+            <span className="sr-only">Remove file</span>
+          </Button>
+        </div>
+      )}
+    </div>
+  );
+}

components/PdfViewer.tsx

@@ -0,0 +1,75 @@
+"use client";
+
+import { useCallback, useState } from "react";
+import { pdfjs, Document, Page } from "react-pdf";
+import "react-pdf/dist/esm/Page/AnnotationLayer.css";
+import "react-pdf/dist/esm/Page/TextLayer.css";
+import { useResizeObserver } from "@wojtekmaj/react-hooks";
+
+import type { PDFDocumentProxy, PDFPageProxy } from "pdfjs-dist";
+import {
+  Sheet,
+  SheetContent,
+  SheetHeader,
+  SheetTitle,
+  SheetTrigger,
+} from "./ui/sheet";
+import { Button } from "./ui/button";
+
+pdfjs.GlobalWorkerOptions.workerSrc = new URL(
+  "pdfjs-dist/build/pdf.worker.min.mjs",
+  import.meta.url
+).toString();
+
+const options = {
+  cMapUrl: "/cmaps/",
+  standardFontDataUrl: "/standard_fonts/",
+};
+
+export default function PdfViewer({ file }: { file: File }) {
+  const [numPages, setNumPages] = useState<number>();
+  const [containerRef, setContainerRef] = useState<HTMLElement | null>(null);
+  const [containerWidth, setContainerWidth] = useState<number>();
+
+  // Add resize observer
+  const onResize = useCallback<ResizeObserverCallback>((entries) => {
+    const [entry] = entries;
+    if (entry) {
+      setContainerWidth(entry.contentRect.width);
+    }
+  }, []);
+
+  useResizeObserver(containerRef, {}, onResize);
+
+  async function onDocumentLoadSuccess(page: PDFDocumentProxy): Promise<void> {
+    setNumPages(page._pdfInfo.numPages);
+  }
+
+  return (
+    <Sheet>
+      <SheetTrigger className="h-10 rounded-lg px-4 py-2 border-input bg-background border-2 hover:bg-accent hover:text-accent-foreground">
+        Preview
+      </SheetTrigger>
+      <SheetContent side="bottom">
+        <SheetHeader>
+          <SheetTitle>{file.name}</SheetTitle>
+        </SheetHeader>
+        <div ref={setContainerRef} className="max-w-2xl mx-auto mt-2">
+          <Document
+            file={file}
+            onLoadSuccess={onDocumentLoadSuccess}
+            options={options}
+          >
+            {Array.from(new Array(numPages), (_el, index) => (
+              <Page
+                key={`page_${index + 1}`}
+                pageNumber={index + 1}
+                width={containerWidth}
+              />
+            ))}
+          </Document>
+        </div>
+      </SheetContent>
+    </Sheet>
+  );
+}

components/PromptInput.tsx

@@ -0,0 +1,49 @@
+"use client";
+
+import { useState } from "react";
+import { Button } from "@/components/ui/button";
+import { Wand2 } from "lucide-react";
+import { Textarea } from "@/components/ui/textarea";
+interface PromptInputProps {
+  onSubmit: (prompt: string) => void;
+  file: File | null;
+}
+
+export function PromptInput({ onSubmit, file }: PromptInputProps) {
+  const [prompt, setPrompt] = useState("");
+
+  const handleSubmit = (e: React.FormEvent) => {
+    e.preventDefault();
+    if (prompt.trim()) {
+      onSubmit(prompt.trim());
+    }
+  };
+
+  return (
+    <form onSubmit={handleSubmit} className="space-y-4 rounded-lg">
+      <div className="space-y-2">
+        <p className="text-sm font-medium text-foreground">
+          Describe the structure and type of data you want to extract from the
+          PDF.
+        </p>
+      </div>
+
+      <Textarea
+        id="prompt"
+        className="min-h-[100px] border-secondary resize-none "
+        placeholder="Example: Extract all invoice details including invoice number, date, items, prices, and total amount..."
+        value={prompt}
+        onChange={(e) => setPrompt(e.target.value)}
+      />
+
+      <Button
+        type="submit"
+        disabled={!prompt.trim() || file === null}
+        className="w-full bg-primary hover:bg-primary/90"
+      >
+        <Wand2 className="w-4 h-4 mr-2" />
+        Extract Data
+      </Button>
+    </form>
+  );
+}

components/ResultDisplay.tsx

@@ -0,0 +1,78 @@
+"use client";
+
+import { Button } from "@/components/ui/button";
+import { Braces, Copy, RotateCcw } from "lucide-react";
+import { useState } from "react";
+import {
+  Popover,
+  PopoverContent,
+  PopoverTrigger,
+} from "@/components/ui/popover";
+interface ResultDisplayProps {
+  result: string;
+  schema: string;
+  onReset: () => void;
+}
+
+export function ResultDisplay({ result, schema, onReset }: ResultDisplayProps) {
+  const [copied, setCopied] = useState(false);
+  const [schemaCopied, setSchemaCopied] = useState(false);
+
+  const handleCopy = () => {
+    navigator.clipboard.writeText(JSON.stringify(result, null, 2));
+    setCopied(true);
+    setTimeout(() => setCopied(false), 2000);
+  };
+  const handleSchemaCopy = () => {
+    navigator.clipboard.writeText(JSON.stringify(schema, null, 2));
+    setSchemaCopied(true);
+    setTimeout(() => setSchemaCopied(false), 2000);
+  };
+
+  return (
+    <div className="space-y-4">
+      <div className="flex items-center justify-between">
+        <h2 className="text-xl font-semibold">Extracted Data</h2>
+        <div className="space-x-2">
+          <Popover>
+            <PopoverTrigger>
+              <Button variant="outline" size="sm">
+                <Braces className="w-4 h-4 mr-2" />
+                Schema
+              </Button>
+            </PopoverTrigger>
+            <PopoverContent className="max-h-[500px] max-w-[700px] w-full overflow-y-auto">
+              <div className="relative p-4 rounded-lg bg-muted">
+                <Button
+                  variant="secondary"
+                  size="sm"
+                  onClick={handleSchemaCopy}
+                  className="absolute top-2 right-2"
+                >
+                  <Copy className="w-4 h-4 mr-2" />
+                  {schemaCopied ? "Copied!" : "Copy"}
+                </Button>
+                <pre className="overflow-auto">
+                  <code className="text-xs">
+                    {JSON.stringify(schema, null, 2)}
+                  </code>
+                </pre>
+              </div>
+            </PopoverContent>
+          </Popover>
+          <Button variant="outline" size="sm" onClick={handleCopy}>
+            <Copy className="w-4 h-4 mr-2" />
+            {copied ? "Copied!" : "Copy"}
+          </Button>
+          <Button variant="outline" size="sm" onClick={onReset}>
+            <RotateCcw className="w-4 h-4 mr-2" />
+            Process Another PDF
+          </Button>
+        </div>
+      </div>
+      <pre className="p-4 rounded-lg bg-muted overflow-auto">
+        <code className="text-sm">{JSON.stringify(result, null, 2)}</code>
+      </pre>
+    </div>
+  );
+}

components/providers.tsx

@@ -0,0 +1,17 @@
+"use client";
+
+import { ThemeProvider } from "next-themes";
+import { ReactNode } from "react";
+
+export function ThemeProviders({ children }: { children: ReactNode }) {
+  return (
+    <ThemeProvider
+      attribute="class"
+      defaultTheme="dark"
+      enableSystem
+      disableTransitionOnChange
+    >
+      {children}
+    </ThemeProvider>
+  );
+}

components/ui/button.tsx

@@ -0,0 +1,56 @@
+import * as React from "react";
+import { Slot } from "@radix-ui/react-slot";
+import { cva, type VariantProps } from "class-variance-authority";
+
+import { cn } from "@/lib/utils";
+
+const buttonVariants = cva(
+  "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",
+  {
+    variants: {
+      variant: {
+        default: "bg-primary text-primary-foreground hover:bg-primary/90",
+        destructive:
+          "bg-destructive text-destructive-foreground hover:bg-destructive/90",
+        outline:
+          "border border-input bg-background hover:bg-accent hover:text-accent-foreground",
+        secondary:
+          "bg-secondary text-secondary-foreground hover:bg-secondary/80",
+        ghost: "hover:bg-accent hover:text-accent-foreground",
+        link: "text-primary underline-offset-4 hover:underline",
+      },
+      size: {
+        default: "h-10 px-4 py-2",
+        sm: "h-9 rounded-md px-3",
+        lg: "h-11 rounded-md px-8",
+        icon: "h-10 w-10",
+      },
+    },
+    defaultVariants: {
+      variant: "default",
+      size: "default",
+    },
+  }
+);
+
+export interface ButtonProps
+  extends React.ButtonHTMLAttributes<HTMLButtonElement>,
+    VariantProps<typeof buttonVariants> {
+  asChild?: boolean;
+}
+
+const Button = React.forwardRef<HTMLButtonElement, ButtonProps>(
+  ({ className, variant, size, asChild = false, ...props }, ref) => {
+    const Comp = asChild ? Slot : "button";
+    return (
+      <Comp
+        className={cn(buttonVariants({ variant, size, className }))}
+        ref={ref}
+        {...props}
+      />
+    );
+  }
+);
+Button.displayName = "Button";
+
+export { Button, buttonVariants };

components/ui/card.tsx

@@ -0,0 +1,79 @@
+import * as React from "react"
+
+import { cn } from "@/lib/utils"
+
+const Card = React.forwardRef<
+  HTMLDivElement,
+  React.HTMLAttributes<HTMLDivElement>
+>(({ className, ...props }, ref) => (
+  <div
+    ref={ref}
+    className={cn(
+      "rounded-lg border bg-card text-card-foreground shadow-sm",
+      className
+    )}
+    {...props}
+  />
+))
+Card.displayName = "Card"
+
+const CardHeader = React.forwardRef<
+  HTMLDivElement,
+  React.HTMLAttributes<HTMLDivElement>
+>(({ className, ...props }, ref) => (
+  <div
+    ref={ref}
+    className={cn("flex flex-col space-y-1.5 p-6", className)}
+    {...props}
+  />
+))
+CardHeader.displayName = "CardHeader"
+
+const CardTitle = React.forwardRef<
+  HTMLDivElement,
+  React.HTMLAttributes<HTMLDivElement>
+>(({ className, ...props }, ref) => (
+  <div
+    ref={ref}
+    className={cn(
+      "text-2xl font-semibold leading-none tracking-tight",
+      className
+    )}
+    {...props}
+  />
+))
+CardTitle.displayName = "CardTitle"
+
+const CardDescription = React.forwardRef<
+  HTMLDivElement,
+  React.HTMLAttributes<HTMLDivElement>
+>(({ className, ...props }, ref) => (
+  <div
+    ref={ref}
+    className={cn("text-sm text-muted-foreground", className)}
+    {...props}
+  />
+))
+CardDescription.displayName = "CardDescription"
+
+const CardContent = React.forwardRef<
+  HTMLDivElement,
+  React.HTMLAttributes<HTMLDivElement>
+>(({ className, ...props }, ref) => (
+  <div ref={ref} className={cn("p-6 pt-0", className)} {...props} />
+))
+CardContent.displayName = "CardContent"
+
+const CardFooter = React.forwardRef<
+  HTMLDivElement,
+  React.HTMLAttributes<HTMLDivElement>
+>(({ className, ...props }, ref) => (
+  <div
+    ref={ref}
+    className={cn("flex items-center p-6 pt-0", className)}
+    {...props}
+  />
+))
+CardFooter.displayName = "CardFooter"
+
+export { Card, CardHeader, CardFooter, CardTitle, CardDescription, CardContent }

components/ui/input.tsx

@@ -0,0 +1,22 @@
+import * as React from "react"
+
+import { cn } from "@/lib/utils"
+
+const Input = React.forwardRef<HTMLInputElement, React.ComponentProps<"input">>(
+  ({ className, type, ...props }, ref) => {
+    return (
+      <input
+        type={type}
+        className={cn(
+          "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",
+          className
+        )}
+        ref={ref}
+        {...props}
+      />
+    )
+  }
+)
+Input.displayName = "Input"
+
+export { Input }

components/ui/popover.tsx

@@ -0,0 +1,31 @@
+"use client"
+
+import * as React from "react"
+import * as PopoverPrimitive from "@radix-ui/react-popover"
+
+import { cn } from "@/lib/utils"
+
+const Popover = PopoverPrimitive.Root
+
+const PopoverTrigger = PopoverPrimitive.Trigger
+
+const PopoverContent = React.forwardRef<
+  React.ElementRef<typeof PopoverPrimitive.Content>,
+  React.ComponentPropsWithoutRef<typeof PopoverPrimitive.Content>
+>(({ className, align = "center", sideOffset = 4, ...props }, ref) => (
+  <PopoverPrimitive.Portal>
+    <PopoverPrimitive.Content
+      ref={ref}
+      align={align}
+      sideOffset={sideOffset}
+      className={cn(
+        "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",
+        className
+      )}
+      {...props}
+    />
+  </PopoverPrimitive.Portal>
+))
+PopoverContent.displayName = PopoverPrimitive.Content.displayName
+
+export { Popover, PopoverTrigger, PopoverContent }

components/ui/sheet.tsx

@@ -0,0 +1,140 @@
+"use client"
+
+import * as React from "react"
+import * as SheetPrimitive from "@radix-ui/react-dialog"
+import { cva, type VariantProps } from "class-variance-authority"
+import { X } from "lucide-react"
+
+import { cn } from "@/lib/utils"
+
+const Sheet = SheetPrimitive.Root
+
+const SheetTrigger = SheetPrimitive.Trigger
+
+const SheetClose = SheetPrimitive.Close
+
+const SheetPortal = SheetPrimitive.Portal
+
+const SheetOverlay = React.forwardRef<
+  React.ElementRef<typeof SheetPrimitive.Overlay>,
+  React.ComponentPropsWithoutRef<typeof SheetPrimitive.Overlay>
+>(({ className, ...props }, ref) => (
+  <SheetPrimitive.Overlay
+    className={cn(
+      "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",
+      className
+    )}
+    {...props}
+    ref={ref}
+  />
+))
+SheetOverlay.displayName = SheetPrimitive.Overlay.displayName
+
+const sheetVariants = cva(
+  "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",
+  {
+    variants: {
+      side: {
+        top: "inset-x-0 top-0 border-b data-[state=closed]:slide-out-to-top data-[state=open]:slide-in-from-top",
+        bottom:
+          "inset-x-0 bottom-0 border-t data-[state=closed]:slide-out-to-bottom data-[state=open]:slide-in-from-bottom",
+        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",
+        right:
+          "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",
+      },
+    },
+    defaultVariants: {
+      side: "right",
+    },
+  }
+)
+
+interface SheetContentProps
+  extends React.ComponentPropsWithoutRef<typeof SheetPrimitive.Content>,
+    VariantProps<typeof sheetVariants> {}
+
+const SheetContent = React.forwardRef<
+  React.ElementRef<typeof SheetPrimitive.Content>,
+  SheetContentProps
+>(({ side = "right", className, children, ...props }, ref) => (
+  <SheetPortal>
+    <SheetOverlay />
+    <SheetPrimitive.Content
+      ref={ref}
+      className={cn(sheetVariants({ side }), className)}
+      {...props}
+    >
+      {children}
+      <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">
+        <X className="h-4 w-4" />
+        <span className="sr-only">Close</span>
+      </SheetPrimitive.Close>
+    </SheetPrimitive.Content>
+  </SheetPortal>
+))
+SheetContent.displayName = SheetPrimitive.Content.displayName
+
+const SheetHeader = ({
+  className,
+  ...props
+}: React.HTMLAttributes<HTMLDivElement>) => (
+  <div
+    className={cn(
+      "flex flex-col space-y-2 text-center sm:text-left",
+      className
+    )}
+    {...props}
+  />
+)
+SheetHeader.displayName = "SheetHeader"
+
+const SheetFooter = ({
+  className,
+  ...props
+}: React.HTMLAttributes<HTMLDivElement>) => (
+  <div
+    className={cn(
+      "flex flex-col-reverse sm:flex-row sm:justify-end sm:space-x-2",
+      className
+    )}
+    {...props}
+  />
+)
+SheetFooter.displayName = "SheetFooter"
+
+const SheetTitle = React.forwardRef<
+  React.ElementRef<typeof SheetPrimitive.Title>,
+  React.ComponentPropsWithoutRef<typeof SheetPrimitive.Title>
+>(({ className, ...props }, ref) => (
+  <SheetPrimitive.Title
+    ref={ref}
+    className={cn("text-lg font-semibold text-foreground", className)}
+    {...props}
+  />
+))
+SheetTitle.displayName = SheetPrimitive.Title.displayName
+
+const SheetDescription = React.forwardRef<
+  React.ElementRef<typeof SheetPrimitive.Description>,
+  React.ComponentPropsWithoutRef<typeof SheetPrimitive.Description>
+>(({ className, ...props }, ref) => (
+  <SheetPrimitive.Description
+    ref={ref}
+    className={cn("text-sm text-muted-foreground", className)}
+    {...props}
+  />
+))
+SheetDescription.displayName = SheetPrimitive.Description.displayName
+
+export {
+  Sheet,
+  SheetPortal,
+  SheetOverlay,
+  SheetTrigger,
+  SheetClose,
+  SheetContent,
+  SheetHeader,
+  SheetFooter,
+  SheetTitle,
+  SheetDescription,
+}

components/ui/textarea.tsx

@@ -0,0 +1,22 @@
+import * as React from "react"
+
+import { cn } from "@/lib/utils"
+
+const Textarea = React.forwardRef<
+  HTMLTextAreaElement,
+  React.ComponentProps<"textarea">
+>(({ className, ...props }, ref) => {
+  return (
+    <textarea
+      className={cn(
+        "flex min-h-[80px] w-full rounded-md border border-input bg-background px-3 py-2 text-base ring-offset-background 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",
+        className
+      )}
+      ref={ref}
+      {...props}
+    />
+  )
+})
+Textarea.displayName = "Textarea"
+
+export { Textarea }

eslint.config.mjs

@@ -0,0 +1,16 @@
+import { dirname } from "path";
+import { fileURLToPath } from "url";
+import { FlatCompat } from "@eslint/eslintrc";
+
+const __filename = fileURLToPath(import.meta.url);
+const __dirname = dirname(__filename);
+
+const compat = new FlatCompat({
+  baseDirectory: __dirname,
+});
+
+const eslintConfig = [
+  ...compat.extends("next/core-web-vitals", "next/typescript"),
+];
+
+export default eslintConfig;

lib/utils.ts

@@ -0,0 +1,6 @@
+import { clsx, type ClassValue } from "clsx";
+import { twMerge } from "tailwind-merge";
+
+export function cn(...inputs: ClassValue[]) {
+  return twMerge(clsx(inputs));
+}

next.config.ts

@@ -0,0 +1,13 @@
+import type { NextConfig } from "next";
+
+const nextConfig: NextConfig = {
+  experimental: {
+    turbo: {
+      resolveAlias: {
+        canvas: "./empty-module.ts",
+      },
+    },
+  },
+};
+
+export default nextConfig;

package.json

@@ -0,0 +1,41 @@
+{
+    "name": "nextjs-gemini-2-0-pdf-structured-data",
+    "version": "0.1.0",
+    "private": true,
+    "scripts": {
+        "dev": "next dev --turbopack",
+        "build": "next build",
+        "start": "next start",
+        "lint": "next lint"
+    },
+    "dependencies": {
+        "@google/generative-ai": "^0.21.0",
+        "@radix-ui/react-dialog": "^1.1.6",
+        "@radix-ui/react-popover": "^1.1.6",
+        "@radix-ui/react-slot": "^1.1.2",
+        "@wojtekmaj/react-hooks": "^1.22.0",
+        "class-variance-authority": "^0.7.1",
+        "clsx": "^2.1.1",
+        "lucide-react": "^0.475.0",
+        "next": "15.1.0",
+        "next-themes": "^0.4.4",
+        "react": "^19.0.0",
+        "react-dom": "^19.0.0",
+        "react-dropzone": "^14.3.5",
+        "react-pdf": "^9.2.1",
+        "tailwind-merge": "^3.0.1",
+        "tailwindcss-animate": "^1.0.7"
+    },
+    "devDependencies": {
+        "@eslint/eslintrc": "^3",
+        "@types/node": "^20",
+        "@types/react": "^19",
+        "@types/react-dom": "^19",
+        "eslint": "^9",
+        "eslint-config-next": "15.1.0",
+        "postcss": "^8",
+        "prettier-eslint": "^16.3.0",
+        "tailwindcss": "^3.4.1",
+        "typescript": "^5"
+    }
+}

postcss.config.mjs

@@ -0,0 +1,8 @@
+/** @type {import('postcss-load-config').Config} */
+const config = {
+  plugins: {
+    tailwindcss: {},
+  },
+};
+
+export default config;

tailwind.config.ts

@@ -0,0 +1,62 @@
+import type { Config } from "tailwindcss";
+
+export default {
+  darkMode: ["class"],
+  content: [
+    "./pages/**/*.{js,ts,jsx,tsx,mdx}",
+    "./components/**/*.{js,ts,jsx,tsx,mdx}",
+    "./app/**/*.{js,ts,jsx,tsx,mdx}",
+  ],
+  theme: {
+    extend: {
+      colors: {
+        background: "hsl(var(--background))",
+        foreground: "hsl(var(--foreground))",
+        card: {
+          DEFAULT: "hsl(var(--card))",
+          foreground: "hsl(var(--card-foreground))",
+        },
+        popover: {
+          DEFAULT: "hsl(var(--popover))",
+          foreground: "hsl(var(--popover-foreground))",
+        },
+        primary: {
+          DEFAULT: "hsl(var(--primary))",
+          foreground: "hsl(var(--primary-foreground))",
+        },
+        secondary: {
+          DEFAULT: "hsl(var(--secondary))",
+          foreground: "hsl(var(--secondary-foreground))",
+        },
+        muted: {
+          DEFAULT: "hsl(var(--muted))",
+          foreground: "hsl(var(--muted-foreground))",
+        },
+        accent: {
+          DEFAULT: "hsl(var(--accent))",
+          foreground: "hsl(var(--accent-foreground))",
+        },
+        destructive: {
+          DEFAULT: "hsl(var(--destructive))",
+          foreground: "hsl(var(--destructive-foreground))",
+        },
+        border: "hsl(var(--border))",
+        input: "hsl(var(--input))",
+        ring: "hsl(var(--ring))",
+        chart: {
+          "1": "hsl(var(--chart-1))",
+          "2": "hsl(var(--chart-2))",
+          "3": "hsl(var(--chart-3))",
+          "4": "hsl(var(--chart-4))",
+          "5": "hsl(var(--chart-5))",
+        },
+      },
+      borderRadius: {
+        lg: "var(--radius)",
+        md: "calc(var(--radius) - 2px)",
+        sm: "calc(var(--radius) - 4px)",
+      },
+    },
+  },
+  plugins: [require("tailwindcss-animate")],
+} satisfies Config;

tsconfig.json

@@ -0,0 +1,27 @@
+{
+  "compilerOptions": {
+    "target": "ES2017",
+    "lib": ["dom", "dom.iterable", "esnext"],
+    "allowJs": true,
+    "skipLibCheck": true,
+    "strict": true,
+    "noEmit": true,
+    "esModuleInterop": true,
+    "module": "esnext",
+    "moduleResolution": "bundler",
+    "resolveJsonModule": true,
+    "isolatedModules": true,
+    "jsx": "preserve",
+    "incremental": true,
+    "plugins": [
+      {
+        "name": "next"
+      }
+    ],
+    "paths": {
+      "@/*": ["./*"]
+    }
+  },
+  "include": ["next-env.d.ts", "**/*.ts", "**/*.tsx", ".next/types/**/*.ts"],
+  "exclude": ["node_modules"]
+}