[V0_FILE]typescriptreact:file="app/page.tsx" isEdit="true" isMerged="true" import { UploadForm } from "@/components/upload-form" import { ApiStatus } from "@/components/api-status" import { CriteriaInfo } from "@/components/criteria-info" export default function Home() { return (

O-1A Visa Assessment Tool

Upload your CV to assess your eligibility for an O-1A visa

) } [V0_FILE]typescriptreact:file="components/assessment-result.tsx" isMerged="true" import { Card, CardContent, CardDescription, CardHeader, CardTitle } from "@/components/ui/card" import { Badge } from "@/components/ui/badge" import { CheckCircle2, XCircle, AlertCircle } from "lucide-react" interface AssessmentResultProps { result: any } export function AssessmentResult({ result }: AssessmentResultProps) { if (!result || result.status !== "success") { return ( Analysis Failed {result?.message || "Unable to process the CV file"} ) } const assessment = result.assessment const rating = assessment.qualification_rating.toLowerCase() const getBadgeVariant = (rating: string) => { switch (rating) { case "excellent": return "default" case "good": return "secondary" case "moderate": return "outline" default: return "destructive" } } const getIcon = (rating: string) => { switch (rating) { case "excellent": case "good": return case "moderate": return default: return } } // Get top 3 criteria const detailedAssessment = assessment.detailed_assessment || {} const sortedCriteria = Object.entries(detailedAssessment) .sort((a: any, b: any) => b[1].confidence - a[1].confidence) .slice(0, 3) return (

{getIcon(rating)} Assessment Results {assessment.qualification_rating}

{assessment.rating_explanation}

Top Criteria:

{index + 1}. {name}

Confidence: {(criterion.confidence * 100).toFixed(0)}%
{criterion.matches && criterion.matches.length > 0 && (
Key evidence: {criterion.matches[0].substring(0, 100)}...
)}

) } [V0_FILE]typescriptreact:file="components/api-status.tsx" isQuickEdit="true" isMerged="true" "use client" import { useState, useEffect } from "react" import { Card, CardContent, CardDescription, CardHeader, CardTitle } from "@/components/ui/card" import { Button } from "@/components/ui/button" import { Input } from "@/components/ui/input" import { Label } from "@/components/ui/label" import { RefreshCw, CheckCircle, XCircle } from "lucide-react" import { Badge } from "@/components/ui/badge" export function ApiStatus() { const [apiUrl, setApiUrl] = useState("https://09c9-38-242-232-192.ngrok-free.app") const [status, setStatus] = useState<"online" | "offline" | "checking">("checking") const [lastChecked, setLastChecked] = useState(null) const [isLoading, setIsLoading] = useState(false) const checkApiStatus = async () => { setIsLoading(true) setStatus("checking") try { const response = await fetch(`${apiUrl}/api/health`, { method: "GET", headers: { Accept: "application/json", }, }) if (response.ok) { setStatus("online") } else { setStatus("offline") } } catch (error) { setStatus("offline") } finally { setIsLoading(false) setLastChecked(new Date().toLocaleTimeString()) } } useEffect(() => { checkApiStatus() }, []) return ( API Status {status === "online" ? ( Online ) : status === "checking" ? ( "Checking..." ) : ( Offline )} Check if the O-1A API is operational {lastChecked && Last checked: {lastChecked}}

API URL

setApiUrl(e.target.value)} placeholder="http://localhost:8000" />

) } [V0_FILE]typescriptreact:file="components/criteria-info.tsx" isQuickEdit="true" isMerged="true" "use client" import { useState, useEffect } from "react" import { Card, CardContent, CardDescription, CardHeader, CardTitle } from "@/components/ui/card" import { Button } from "@/components/ui/button" import { Input } from "@/components/ui/input" import { Label } from "@/components/ui/label" import { Accordion, AccordionContent, AccordionItem, AccordionTrigger } from "@/components/ui/accordion" import { RefreshCw, Info } from "lucide-react" import { Alert, AlertDescription } from "@/components/ui/alert" export function CriteriaInfo() { const [apiUrl, setApiUrl] = useState("https://09c9-38-242-232-192.ngrok-free.app") const [criteria, setCriteria] = useState(null) const [isLoading, setIsLoading] = useState(false) const [error, setError] = useState(null) const fetchCriteria = async () => { setIsLoading(true) setError(null) try { const response = await fetch(`${apiUrl}/api/criteria`, { method: "GET", headers: { Accept: "application/json", }, }) if (!response.ok) { throw new Error(`Failed to fetch criteria: ${response.status}`) } const data = await response.json() setCriteria(data) } catch (error) { setError(error instanceof Error ? error.message : "Failed to fetch criteria") } finally { setIsLoading(false) } } useEffect(() => { fetchCriteria() }, []) return ( O-1A Criteria Learn about the criteria used for O-1A visa assessment

API URL

setApiUrl(e.target.value)} placeholder="http://localhost:8000" />

{error && ( {error} )} {isLoading ? (

Loading criteria...

) : criteria ? ( {Object.entries(criteria.criteria || {}).map(([key, value]: [string, any]) => ( {value.name || key}

{value.description}

{value.examples && value.examples.length > 0 && (

Examples:

{example}

)}

))} ) : (

No criteria information available

)}

) } [V0_FILE]typescriptreact:file="app/layout.tsx" isEdit="true" isMerged="true" import type React from "react" import type { Metadata } from "next" import { Inter } from "next/font/google" import "./globals.css" import { ThemeProvider } from "@/components/theme-provider" const inter = Inter({ subsets: ["latin"] }) export const metadata: Metadata = { title: "O-1A Visa Assessment Tool", description: "Upload your CV to assess your eligibility for an O-1A visa", } export default function RootLayout({ children, }: Readonly<{ children: React.ReactNode }>) { return ( {children} ) } [V0_FILE]css:file="app/globals.css" isMerged="true" @tailwind base; @tailwind components; @tailwind utilities; @layer base { :root { --background: 0 0% 100%; --foreground: 222.2 84% 4.9%; --card: 0 0% 100%; --card-foreground: 222.2 84% 4.9%; --popover: 0 0% 100%; --popover-foreground: 222.2 84% 4.9%; --primary: 221.2 83.2% 53.3%; --primary-foreground: 210 40% 98%; --secondary: 210 40% 96.1%; --secondary-foreground: 222.2 47.4% 11.2%; --muted: 210 40% 96.1%; --muted-foreground: 215.4 16.3% 46.9%; --accent: 210 40% 96.1%; --accent-foreground: 222.2 47.4% 11.2%; --destructive: 0 84.2% 60.2%; --destructive-foreground: 210 40% 98%; --border: 214.3 31.8% 91.4%; --input: 214.3 31.8% 91.4%; --ring: 221.2 83.2% 53.3%; --radius: 0.5rem; } .dark { --background: 222.2 84% 4.9%; --foreground: 210 40% 98%; --card: 222.2 84% 4.9%; --card-foreground: 210 40% 98%; --popover: 222.2 84% 4.9%; --popover-foreground: 210 40% 98%; --primary: 217.2 91.2% 59.8%; --primary-foreground: 222.2 47.4% 11.2%; --secondary: 217.2 32.6% 17.5%; --secondary-foreground: 210 40% 98%; --muted: 217.2 32.6% 17.5%; --muted-foreground: 215 20.2% 65.1%; --accent: 217.2 32.6% 17.5%; --accent-foreground: 210 40% 98%; --destructive: 0 62.8% 30.6%; --destructive-foreground: 210 40% 98%; --border: 217.2 32.6% 17.5%; --input: 217.2 32.6% 17.5%; --ring: 224.3 76.3% 48%; } } @layer base { * { @apply border-border; } body { @apply bg-background text-foreground; } } [V0_FILE]typescriptreact:file="tailwind.config.ts" isMerged="true" import type { Config } from "tailwindcss" const config = { darkMode: ["class"], content: [ "./pages/**/*.{ts,tsx}", "./components/**/*.{ts,tsx}", "./app/**/*.{ts,tsx}", "./src/**/*.{ts,tsx}", "*.{js,ts,jsx,tsx,mdx}", ], prefix: "", theme: { container: { center: true, padding: "2rem", screens: { "2xl": "1400px", }, }, extend: { colors: { border: "hsl(var(--border))", input: "hsl(var(--input))", ring: "hsl(var(--ring))", background: "hsl(var(--background))", foreground: "hsl(var(--foreground))", primary: { DEFAULT: "hsl(var(--primary))", foreground: "hsl(var(--primary-foreground))", }, secondary: { DEFAULT: "hsl(var(--secondary))", foreground: "hsl(var(--secondary-foreground))", }, destructive: { DEFAULT: "hsl(var(--destructive))", foreground: "hsl(var(--destructive-foreground))", }, muted: { DEFAULT: "hsl(var(--muted))", foreground: "hsl(var(--muted-foreground))", }, accent: { DEFAULT: "hsl(var(--accent))", foreground: "hsl(var(--accent-foreground))", }, popover: { DEFAULT: "hsl(var(--popover))", foreground: "hsl(var(--popover-foreground))", }, card: { DEFAULT: "hsl(var(--card))", foreground: "hsl(var(--card-foreground))", }, }, borderRadius: { lg: "var(--radius)", md: "calc(var(--radius) - 2px)", sm: "calc(var(--radius) - 4px)", }, keyframes: { "accordion-down": { from: { height: "0" }, to: { height: "var(--radix-accordion-content-height)" }, }, "accordion-up": { from: { height: "var(--radix-accordion-content-height)" }, to: { height: "0" }, }, }, animation: { "accordion-down": "accordion-down 0.2s ease-out", "accordion-up": "accordion-up 0.2s ease-out", }, }, }, plugins: [require("tailwindcss-animate")], } satisfies Config export default config [V0_FILE]typescriptreact:file="components/processing-notification.tsx" isQuickEdit="true" isMerged="true" "use client" import { Card, CardContent, CardDescription, CardHeader, CardTitle } from "@/components/ui/card" import { Progress } from "@/components/ui/progress" import { useState, useEffect } from "react" import { Clock, FileSearch, CheckCircle } from "lucide-react" interface ProcessingNotificationProps { isVisible: boolean } export function ProcessingNotification({ isVisible }: ProcessingNotificationProps) { const [progress, setProgress] = useState(0) const [stage, setStage] = useState(0) const stages = [ { icon: FileSearch, text: "Extracting information from your CV..." }, { icon: Clock, text: "Analyzing against O-1A criteria..." }, { icon: CheckCircle, text: "Finalizing assessment..." }, ] useEffect(() => { if (!isVisible) { setProgress(0) setStage(0) return } const totalDuration = 120 * 1000 // 2 minutes in milliseconds const interval = 500 // Update every 500ms const incrementAmount = (interval / totalDuration) * 100 const timer = setInterval(() => { setProgress((prev) => Math.min(prev + incrementAmount, 100)) }, interval) return () => clearInterval(timer) }, [isVisible]) useEffect(() => { if (progress > 75) { setStage(2) } else if (progress > 30) { setStage(1) } }, [progress]) if (!isVisible) return null const CurrentIcon = stages[stage].icon return ( Processing Your CV Please wait approximately 2 minutes while we analyze your CV

{stages[stage].text}

Started ~2 minutes

) } [V0_FILE]typescriptreact:file="components/resume-analyzer-animation.tsx" isMerged="true" "use client" import { useEffect, useState } from "react" import { Card, CardContent } from "@/components/ui/card" import { Cpu, CheckCircle, XCircle, AlertTriangle } from "lucide-react" interface ResumeAnalyzerAnimationProps { isVisible: boolean } export function ResumeAnalyzerAnimation({ isVisible }: ResumeAnalyzerAnimationProps) { const [currentCriteria, setCurrentCriteria] = useState(0) const criteria = [ { name: "Awards", status: "positive" }, { name: "Publications", status: "neutral" }, { name: "Leadership", status: "positive" }, { name: "Salary", status: "negative" }, { name: "Judging", status: "neutral" }, { name: "Critical Employment", status: "positive" }, ] useEffect(() => { if (!isVisible) return const interval = setInterval(() => { setCurrentCriteria((prev) => (prev + 1) % criteria.length) }, 1500) return () => clearInterval(interval) }, [isVisible, criteria.length]) if (!isVisible) return null const getStatusIcon = (status: string) => { switch (status) { case "positive": return case "negative": return default: return } } return (

AI Analysis in Progress

{criteria.map((criterion, index) => (

{criterion.name}

{index === currentCriteria ? "Analyzing..." : index < currentCriteria ? "Analyzed" : "Pending"} {index < currentCriteria && getStatusIcon(criterion.status)}

))}

) } [V0_FILE]typescriptreact:file="components/pdf-viewer.tsx" isEdit="true" "use client" import { useState, useEffect } from "react" import { Card, CardContent } from "@/components/ui/card" import { Loader2, FileText, AlertCircle } from "lucide-react" import { Alert, AlertDescription } from "@/components/ui/alert" interface PDFViewerProps { file: File isProcessing: boolean } export function PDFViewer({ file, isProcessing }: PDFViewerProps) { const [pdfUrl, setPdfUrl] = useState(null) const [loading, setLoading] = useState(true) const [error, setError] = useState(null) const [highlightPosition, setHighlightPosition] = useState({ top: 0, left: 0, width: 100, height: 20 }) useEffect(() => { // Create a URL for the PDF file const url = URL.createObjectURL(file) setPdfUrl(url) setLoading(false) // Clean up the URL when the component unmounts return () => { URL.revokeObjectURL(url) } }, [file]) // Animation for highlighting different parts of the PDF useEffect(() => { if (!isProcessing) return const interval = setInterval(() => { // Get the iframe dimensions const iframe = document.querySelector("iframe") if (!iframe) return const iframeHeight = iframe.clientHeight const iframeWidth = iframe.clientWidth // Randomly position the highlight within the iframe setHighlightPosition({ top: Math.random() * (iframeHeight - 40), left: Math.random() * (iframeWidth - 200), width: 150 + Math.random() * 200, height: 15 + Math.random() * 20, }) }, 1500) return () => clearInterval(interval) }, [isProcessing]) if (loading) { return ( ) } if (error) { return ( Error loading PDF: {error}

PDF Preview Not Available

Your PDF is still being processed

) } return (

{pdfUrl &&