@luxfi/ui 8.0.0 → 8.1.0

package/src/ai-vision.tsx

@@ -0,0 +1,1220 @@
+"use client"
+
+import { variants } from '@hanzo/ui'
+import * as React from "react"
+import {
+  BarChart3,
+  Camera,
+  Copy,
+  Download,
+  Eye,
+  FileText,
+  Link,
+  Loader2,
+  Move,
+  Palette,
+  RotateCw,
+  Smile,
+  Square,
+  Tag,
+  Target,
+  Type,
+  Upload,
+  X,
+  ZoomIn,
+  ZoomOut,
+} from "lucide-react"
+import { toast } from "sonner"
+
+import { cn } from "./utils"
+import { Badge } from "./badge"
+import { Button } from "./button"
+import { Box, Card, CardContent, CardDescription, CardHeader, CardTitle, css, sx } from '@hanzo/ui'
+import {
+  DropdownMenu,
+  DropdownMenuContent,
+  DropdownMenuItem,
+  DropdownMenuSeparator,
+  DropdownMenuTrigger,
+} from "@hanzo/ui"
+import { Input } from "./input"
+import { Label } from "@hanzo/ui"
+import { ScrollArea } from "@hanzo/ui"
+import { Separator } from "./separator"
+import { Slider } from "./slider"
+import { Switch } from "./switch"
+import {
+  Tabs,
+  TabsContent,
+  TabsList,
+  TabsTrigger,
+} from "@hanzo/ui"
+import { Textarea } from "./textarea"
+
+// Types
+export type VisionCapability =
+  | "object-detection"
+  | "scene-description"
+  | "ocr"
+  | "color-analysis"
+  | "tagging"
+  | "face-detection"
+  | "sentiment-analysis"
+  | "image-generation"
+  | "image-editing"
+
+export interface BoundingBox {
+  x: number
+  y: number
+  width: number
+  height: number
+  confidence: number
+  label: string
+  color?: string
+}
+
+export interface DetectedText {
+  text: string
+  confidence: number
+  boundingBox: BoundingBox
+}
+
+export interface ColorPalette {
+  color: string
+  percentage: number
+  name?: string
+}
+
+export interface FaceDetection {
+  boundingBox: BoundingBox
+  confidence: number
+  age?: number
+  gender?: string
+  emotion?: string
+  landmarks?: { x: number; y: number }[]
+}
+
+export interface VisionResults {
+  objects?: BoundingBox[]
+  description?: string
+  text?: DetectedText[]
+  colors?: ColorPalette[]
+  tags?: { label: string; confidence: number }[]
+  faces?: FaceDetection[]
+  sentiment?: {
+    emotion: string
+    confidence: number
+    valence: number
+    arousal: number
+  }
+  metadata?: {
+    width: number
+    height: number
+    format: string
+    size: number
+    exif?: Record<string, any>
+  }
+}
+
+export interface AIVisionProps extends React.HTMLAttributes<HTMLDivElement> {
+  onAnalysis?: (results: VisionResults) => void
+  capabilities?: VisionCapability[]
+  maxFileSize?: number
+  acceptedFormats?: string[]
+  apiEndpoint?: string
+  apiKey?: string
+  defaultImage?: string
+  enableCamera?: boolean
+  enableUrl?: boolean
+  enableGeneration?: boolean
+  enableEditing?: boolean
+  showConfidence?: boolean
+  minConfidence?: number
+}
+
+// Canvas overlay component for visualizations
+interface CanvasOverlayProps {
+  imageRef: React.RefObject<HTMLImageElement | null>
+  results: VisionResults
+  showBoundingBoxes: boolean
+  showConfidence: boolean
+  minConfidence: number
+  selectedTypes: string[]
+}
+
+const CanvasOverlay: React.FC<CanvasOverlayProps> = ({
+  imageRef,
+  results,
+  showBoundingBoxes,
+  showConfidence,
+  minConfidence,
+  selectedTypes,
+}) => {
+  const canvasRef = React.useRef<HTMLCanvasElement>(null)
+
+  React.useEffect(() => {
+    if (!canvasRef.current || !imageRef.current || !results) return
+
+    const canvas = canvasRef.current
+    const ctx = canvas.getContext("2d")
+    const image = imageRef.current
+
+    if (!ctx) return
+
+    // Set canvas size to match image
+    canvas.width = image.naturalWidth
+    canvas.height = image.naturalHeight
+
+    // Clear canvas
+    ctx.clearRect(0, 0, canvas.width, canvas.height)
+
+    // Draw bounding boxes
+    if (
+      showBoundingBoxes &&
+      results.objects &&
+      selectedTypes.includes("objects")
+    ) {
+      results.objects
+        .filter((obj) => obj.confidence >= minConfidence)
+        .forEach((obj) => {
+          ctx.strokeStyle = obj.color || "#3b82f6"
+          ctx.lineWidth = 3
+          ctx.strokeRect(obj.x, obj.y, obj.width, obj.height)
+
+          if (showConfidence) {
+            ctx.fillStyle = obj.color || "#3b82f6"
+            ctx.font = "14px Inter, sans-serif"
+            const text = `${obj.label} (${Math.round(obj.confidence * 100)}%)`
+            const textWidth = ctx.measureText(text).width
+
+            ctx.fillRect(obj.x, obj.y - 25, textWidth + 10, 25)
+            ctx.fillStyle = "white"
+            ctx.fillText(text, obj.x + 5, obj.y - 8)
+          }
+        })
+    }
+
+    // Draw text regions
+    if (showBoundingBoxes && results.text && selectedTypes.includes("text")) {
+      results.text
+        .filter((text) => text.confidence >= minConfidence)
+        .forEach((textItem) => {
+          ctx.strokeStyle = "#10b981"
+          ctx.lineWidth = 2
+          ctx.strokeRect(
+            textItem.boundingBox.x,
+            textItem.boundingBox.y,
+            textItem.boundingBox.width,
+            textItem.boundingBox.height
+          )
+
+          if (showConfidence) {
+            ctx.fillStyle = "#10b981"
+            ctx.font = "12px Inter, sans-serif"
+            const text = `OCR (${Math.round(textItem.confidence * 100)}%)`
+            ctx.fillRect(
+              textItem.boundingBox.x,
+              textItem.boundingBox.y - 20,
+              80,
+              20
+            )
+            ctx.fillStyle = "white"
+            ctx.fillText(
+              text,
+              textItem.boundingBox.x + 5,
+              textItem.boundingBox.y - 6
+            )
+          }
+        })
+    }
+
+    // Draw face detection
+    if (showBoundingBoxes && results.faces && selectedTypes.includes("faces")) {
+      results.faces
+        .filter((face) => face.confidence >= minConfidence)
+        .forEach((face) => {
+          ctx.strokeStyle = "#f59e0b"
+          ctx.lineWidth = 3
+          ctx.strokeRect(
+            face.boundingBox.x,
+            face.boundingBox.y,
+            face.boundingBox.width,
+            face.boundingBox.height
+          )
+
+          if (showConfidence) {
+            ctx.fillStyle = "#f59e0b"
+            ctx.font = "14px Inter, sans-serif"
+            const text = `Face (${Math.round(face.confidence * 100)}%)`
+            const textWidth = ctx.measureText(text).width
+
+            ctx.fillRect(
+              face.boundingBox.x,
+              face.boundingBox.y - 25,
+              textWidth + 10,
+              25
+            )
+            ctx.fillStyle = "white"
+            ctx.fillText(text, face.boundingBox.x + 5, face.boundingBox.y - 8)
+          }
+
+          // Draw landmarks if available
+          if (face.landmarks) {
+            ctx.fillStyle = "#f59e0b"
+            face.landmarks.forEach((landmark) => {
+              ctx.beginPath()
+              ctx.arc(landmark.x, landmark.y, 2, 0, 2 * Math.PI)
+              ctx.fill()
+            })
+          }
+        })
+    }
+  }, [
+    imageRef,
+    results,
+    showBoundingBoxes,
+    showConfidence,
+    minConfidence,
+    selectedTypes,
+  ])
+
+  return (
+    <canvas
+      ref={canvasRef}
+      className="absolute inset-0 pointer-events-none"
+      style={{
+        width: imageRef.current?.offsetWidth || "100%",
+        height: imageRef.current?.offsetHeight || "100%",
+      }}
+    />
+  )
+}
+
+// Results panel component
+interface ResultsPanelProps {
+  results: VisionResults | null
+  isAnalyzing: boolean
+  onExport: (format: "json" | "pdf") => void
+}
+
+const ResultsPanel: React.FC<ResultsPanelProps> = ({
+  results,
+  isAnalyzing,
+  onExport,
+}) => {
+  const copyToClipboard = (text: string) => {
+    navigator.clipboard.writeText(text)
+  }
+
+  const exportResults = (format: "json" | "pdf") => {
+    if (!results) return
+    onExport(format)
+  }
+
+  if (isAnalyzing) {
+    return (
+      <Box className="flex items-center justify-center h-64">
+        <Box className="text-center">
+          <Loader2 style={css('h-8 w-8 animate-spin mx-auto mb-4')} />
+          <Box tag="p" className="text-sm text-muted-foreground">Analyzing image...</Box>
+        </Box>
+      </Box>
+    )
+  }
+
+  if (!results) {
+    return (
+      <Box className="flex items-center justify-center h-64">
+        <Box className="text-center">
+          <Eye style={css('h-8 w-8 mx-auto mb-4 text-muted-foreground')} />
+          <Box tag="p" className="text-sm text-muted-foreground">
+            Upload an image to see analysis results
+          </Box>
+        </Box>
+      </Box>
+    )
+  }
+
+  return (
+    <Box className="space-y-4">
+      {/* Export Controls */}
+      <Box className="flex items-center justify-between">
+        <Box tag="h3" className="text-lg font-semibold">Analysis Results</Box>
+        <DropdownMenu>
+          <DropdownMenuTrigger asChild>
+            <Button variant="outline" size="sm">
+              <Download style={css('h-4 w-4 mr-2')} />
+              Export
+            </Button>
+          </DropdownMenuTrigger>
+          <DropdownMenuContent>
+            <DropdownMenuItem onClick={() => exportResults("json")}>
+              <FileText style={css('h-4 w-4 mr-2')} />
+              Export as JSON
+            </DropdownMenuItem>
+            <DropdownMenuItem onClick={() => exportResults("pdf")}>
+              <FileText style={css('h-4 w-4 mr-2')} />
+              Export as PDF
+            </DropdownMenuItem>
+          </DropdownMenuContent>
+        </DropdownMenu>
+      </Box>
+
+      <Tabs defaultValue="overview" {...sx('w-full')}>
+        <TabsList {...sx('grid w-full grid-cols-4')}>
+          <TabsTrigger value="overview">Overview</TabsTrigger>
+          <TabsTrigger value="objects">Objects</TabsTrigger>
+          <TabsTrigger value="text">Text</TabsTrigger>
+          <TabsTrigger value="details">Details</TabsTrigger>
+        </TabsList>
+
+        <TabsContent value="overview" {...sx('space-y-4')}>
+          {/* Scene Description */}
+          {results.description && (
+            <Card>
+              <CardHeader {...sx('pb-3')}>
+                <CardTitle {...sx('text-sm flex items-center')}>
+                  <Eye style={css('h-4 w-4 mr-2')} />
+                  Scene Description
+                </CardTitle>
+              </CardHeader>
+              <CardContent>
+                <Box tag="p" className="text-sm">{results.description}</Box>
+                <Button
+                  variant="ghost"
+                  size="sm"
+                  {...sx('mt-2 h-6 px-2')}
+                  onClick={() => copyToClipboard(results.description!)}
+                >
+                  <Copy style={css('h-3 w-3')} />
+                </Button>
+              </CardContent>
+            </Card>
+          )}
+
+          {/* Tags */}
+          {results.tags && results.tags.length > 0 && (
+            <Card>
+              <CardHeader {...sx('pb-3')}>
+                <CardTitle {...sx('text-sm flex items-center')}>
+                  <Tag style={css('h-4 w-4 mr-2')} />
+                  Tags
+                </CardTitle>
+              </CardHeader>
+              <CardContent>
+                <Box className="flex flex-wrap gap-2">
+                  {results.tags.map((tag, index) => (
+                    <Badge key={index} colorPalette="gray" {...sx('text-xs')}>
+                      {tag.label} ({Math.round(tag.confidence * 100)}%)
+                    </Badge>
+                  ))}
+                </Box>
+              </CardContent>
+            </Card>
+          )}
+
+          {/* Sentiment */}
+          {results.sentiment && (
+            <Card>
+              <CardHeader {...sx('pb-3')}>
+                <CardTitle {...sx('text-sm flex items-center')}>
+                  <Smile style={css('h-4 w-4 mr-2')} />
+                  Sentiment Analysis
+                </CardTitle>
+              </CardHeader>
+              <CardContent>
+                <Box className="space-y-2">
+                  <Box className="flex items-center justify-between">
+                    <Box tag="span" className="text-sm">Emotion:</Box>
+                    <Badge>{results.sentiment.emotion}</Badge>
+                  </Box>
+                  <Box className="flex items-center justify-between">
+                    <Box tag="span" className="text-sm">Confidence:</Box>
+                    <Box tag="span" className="text-sm">
+                      {Math.round(results.sentiment.confidence * 100)}%
+                    </Box>
+                  </Box>
+                </Box>
+              </CardContent>
+            </Card>
+          )}
+        </TabsContent>
+
+        <TabsContent value="objects" {...sx('space-y-4')}>
+          {results.objects && results.objects.length > 0 ? (
+            <ScrollArea {...sx('h-64')}>
+              <Box className="space-y-2">
+                {results.objects.map((obj, index) => (
+                  <Card key={index}>
+                    <CardContent {...sx('p-3')}>
+                      <Box className="flex items-center justify-between">
+                        <Box className="flex items-center space-x-2">
+                          <Box
+                            className="w-3 h-3 rounded-sm"
+                            style={{ backgroundColor: obj.color || "#3b82f6" }}
+                          />
+                          <Box tag="span" className="text-sm font-medium">
+                            {obj.label}
+                          </Box>
+                        </Box>
+                        <Badge variant="outline">
+                          {Math.round(obj.confidence * 100)}%
+                        </Badge>
+                      </Box>
+                      <Box className="text-xs text-muted-foreground mt-1">
+                        Position: ({obj.x}, {obj.y}) Size: {obj.width}×
+                        {obj.height}
+                      </Box>
+                    </CardContent>
+                  </Card>
+                ))}
+              </Box>
+            </ScrollArea>
+          ) : (
+            <Box className="text-center py-8">
+              <Target style={css('h-8 w-8 mx-auto mb-2 text-muted-foreground')} />
+              <Box tag="p" className="text-sm text-muted-foreground">
+                No objects detected
+              </Box>
+            </Box>
+          )}
+        </TabsContent>
+
+        <TabsContent value="text" {...sx('space-y-4')}>
+          {results.text && results.text.length > 0 ? (
+            <ScrollArea {...sx('h-64')}>
+              <Box className="space-y-2">
+                {results.text.map((textItem, index) => (
+                  <Card key={index}>
+                    <CardContent {...sx('p-3')}>
+                      <Box className="flex items-start justify-between">
+                        <Box className="flex-1">
+                          <Box tag="p" className="text-sm font-medium">{textItem.text}</Box>
+                          <Box className="text-xs text-muted-foreground mt-1">
+                            Confidence: {Math.round(textItem.confidence * 100)}%
+                          </Box>
+                        </Box>
+                        <Button
+                          variant="ghost"
+                          size="sm"
+                          {...sx('h-6 w-6 p-0')}
+                          onClick={() => copyToClipboard(textItem.text)}
+                        >
+                          <Copy style={css('h-3 w-3')} />
+                        </Button>
+                      </Box>
+                    </CardContent>
+                  </Card>
+                ))}
+              </Box>
+            </ScrollArea>
+          ) : (
+            <Box className="text-center py-8">
+              <Type style={css('h-8 w-8 mx-auto mb-2 text-muted-foreground')} />
+              <Box tag="p" className="text-sm text-muted-foreground">No text detected</Box>
+            </Box>
+          )}
+        </TabsContent>
+
+        <TabsContent value="details" {...sx('space-y-4')}>
+          {/* Color Palette */}
+          {results.colors && results.colors.length > 0 && (
+            <Card>
+              <CardHeader {...sx('pb-3')}>
+                <CardTitle {...sx('text-sm flex items-center')}>
+                  <Palette style={css('h-4 w-4 mr-2')} />
+                  Color Palette
+                </CardTitle>
+              </CardHeader>
+              <CardContent>
+                <Box className="space-y-2">
+                  {results.colors.map((color, index) => (
+                    <Box key={index} className="flex items-center space-x-3">
+                      <Box
+                        className="w-6 h-6 rounded border"
+                        style={{ backgroundColor: color.color }}
+                      />
+                      <Box className="flex-1">
+                        <Box className="text-sm font-medium">{color.color}</Box>
+                        {color.name && (
+                          <Box className="text-xs text-muted-foreground">
+                            {color.name}
+                          </Box>
+                        )}
+                      </Box>
+                      <Box className="text-sm">
+                        {color.percentage.toFixed(1)}%
+                      </Box>
+                    </Box>
+                  ))}
+                </Box>
+              </CardContent>
+            </Card>
+          )}
+
+          {/* Face Detection */}
+          {results.faces && results.faces.length > 0 && (
+            <Card>
+              <CardHeader {...sx('pb-3')}>
+                <CardTitle {...sx('text-sm flex items-center')}>
+                  <Smile style={css('h-4 w-4 mr-2')} />
+                  Face Detection
+                </CardTitle>
+              </CardHeader>
+              <CardContent>
+                <Box className="space-y-3">
+                  {results.faces.map((face, index) => (
+                    <Box key={index} className="space-y-2">
+                      <Box className="flex items-center justify-between">
+                        <Box tag="span" className="text-sm font-medium">
+                          Face {index + 1}
+                        </Box>
+                        <Badge variant="outline">
+                          {Math.round(face.confidence * 100)}%
+                        </Badge>
+                      </Box>
+                      {face.age && (
+                        <Box className="text-sm">
+                          <Box tag="span" className="text-muted-foreground">Age:</Box> ~
+                          {face.age}
+                        </Box>
+                      )}
+                      {face.gender && (
+                        <Box className="text-sm">
+                          <Box tag="span" className="text-muted-foreground">Gender:</Box>{" "}
+                          {face.gender}
+                        </Box>
+                      )}
+                      {face.emotion && (
+                        <Box className="text-sm">
+                          <Box tag="span" className="text-muted-foreground">
+                            Emotion:
+                          </Box>{" "}
+                          {face.emotion}
+                        </Box>
+                      )}
+                    </Box>
+                  ))}
+                </Box>
+              </CardContent>
+            </Card>
+          )}
+
+          {/* Metadata */}
+          {results.metadata && (
+            <Card>
+              <CardHeader {...sx('pb-3')}>
+                <CardTitle {...sx('text-sm flex items-center')}>
+                  <BarChart3 style={css('h-4 w-4 mr-2')} />
+                  Image Metadata
+                </CardTitle>
+              </CardHeader>
+              <CardContent>
+                <Box className="space-y-2 text-sm">
+                  <Box className="flex justify-between">
+                    <Box tag="span" className="text-muted-foreground">Dimensions:</Box>
+                    <span>
+                      {results.metadata.width} × {results.metadata.height}
+                    </span>
+                  </Box>
+                  <Box className="flex justify-between">
+                    <Box tag="span" className="text-muted-foreground">Format:</Box>
+                    <span>{results.metadata.format.toUpperCase()}</span>
+                  </Box>
+                  <Box className="flex justify-between">
+                    <Box tag="span" className="text-muted-foreground">Size:</Box>
+                    <span>
+                      {(results.metadata.size / 1024 / 1024).toFixed(2)} MB
+                    </span>
+                  </Box>
+                </Box>
+              </CardContent>
+            </Card>
+          )}
+        </TabsContent>
+      </Tabs>
+    </Box>
+  )
+}
+
+// Main AI Vision component
+const AIVision = React.forwardRef<HTMLDivElement, AIVisionProps>(
+  (
+    {
+      className,
+      onAnalysis,
+      capabilities = [
+        "object-detection",
+        "scene-description",
+        "ocr",
+        "color-analysis",
+        "tagging",
+      ],
+      maxFileSize = 10 * 1024 * 1024, // 10MB
+      acceptedFormats = ["image/jpeg", "image/png", "image/webp", "image/gif"],
+      apiEndpoint = "/api/vision",
+      apiKey,
+      defaultImage,
+      enableCamera = true,
+      enableUrl = true,
+      enableGeneration = false,
+      enableEditing = false,
+      showConfidence = true,
+      minConfidence = 0.5,
+      ...props
+    },
+    ref
+  ) => {
+    // State
+    const [currentImage, setCurrentImage] = React.useState<string | null>(
+      defaultImage || null
+    )
+    const [isAnalyzing, setIsAnalyzing] = React.useState(false)
+    const [results, setResults] = React.useState<VisionResults | null>(null)
+    const [isDragging, setIsDragging] = React.useState(false)
+    const [urlInput, setUrlInput] = React.useState("")
+    const [showBoundingBoxes, setShowBoundingBoxes] = React.useState(true)
+    const [confidenceThreshold, setConfidenceThreshold] =
+      React.useState(minConfidence)
+    const [selectedTypes, setSelectedTypes] = React.useState<string[]>([
+      "objects",
+      "text",
+      "faces",
+    ])
+    const [generationPrompt, setGenerationPrompt] = React.useState("")
+    const [isGenerating, setIsGenerating] = React.useState(false)
+
+    // Refs
+    const fileInputRef = React.useRef<HTMLInputElement>(null)
+    const imageRef = React.useRef<HTMLImageElement>(null)
+    const videoRef = React.useRef<HTMLVideoElement>(null)
+    const [isCameraActive, setIsCameraActive] = React.useState(false)
+
+    // Mock analysis function - replace with actual API call
+    const analyzeImage = async (imageData: string): Promise<VisionResults> => {
+      setIsAnalyzing(true)
+
+      // Simulate API delay
+      await new Promise((resolve) => setTimeout(resolve, 2000))
+
+      // Mock results - replace with actual API call
+      const mockResults: VisionResults = {
+        objects: [
+          {
+            x: 100,
+            y: 150,
+            width: 200,
+            height: 150,
+            confidence: 0.95,
+            label: "Person",
+            color: "#3b82f6",
+          },
+          {
+            x: 350,
+            y: 200,
+            width: 120,
+            height: 80,
+            confidence: 0.87,
+            label: "Car",
+            color: "#ef4444",
+          },
+        ],
+        description:
+          "A street scene with a person walking next to a parked car. The image appears to be taken during daytime with good lighting conditions.",
+        text: [
+          {
+            text: "STOP",
+            confidence: 0.96,
+            boundingBox: {
+              x: 50,
+              y: 50,
+              width: 80,
+              height: 30,
+              confidence: 0.96,
+              label: "STOP",
+            },
+          },
+        ],
+        colors: [
+          { color: "#2563eb", percentage: 25.3, name: "Blue" },
+          { color: "#dc2626", percentage: 18.7, name: "Red" },
+          { color: "#16a34a", percentage: 15.2, name: "Green" },
+          { color: "#6b7280", percentage: 41.8, name: "Gray" },
+        ],
+        tags: [
+          { label: "outdoor", confidence: 0.98 },
+          { label: "street", confidence: 0.92 },
+          { label: "urban", confidence: 0.85 },
+          { label: "daytime", confidence: 0.89 },
+        ],
+        faces: [
+          {
+            boundingBox: {
+              x: 120,
+              y: 160,
+              width: 60,
+              height: 80,
+              confidence: 0.94,
+              label: "Face",
+            },
+            confidence: 0.94,
+            age: 35,
+            gender: "male",
+            emotion: "neutral",
+          },
+        ],
+        sentiment: {
+          emotion: "neutral",
+          confidence: 0.76,
+          valence: 0.2,
+          arousal: 0.1,
+        },
+        metadata: {
+          width: 800,
+          height: 600,
+          format: "jpeg",
+          size: 1024 * 500, // 500KB
+        },
+      }
+
+      setIsAnalyzing(false)
+      return mockResults
+    }
+
+    // Handle file upload
+    const handleFileUpload = async (files: FileList | null) => {
+      if (!files || files.length === 0) return
+
+      const file = files[0]
+
+      // Validate file
+      if (!acceptedFormats.includes(file.type)) {
+        toast.error("Unsupported file format", {
+          description: `Please use: ${acceptedFormats.join(", ")}`,
+        })
+        return
+      }
+
+      if (file.size > maxFileSize) {
+        toast.error("File too large", {
+          description: `Maximum size: ${maxFileSize / 1024 / 1024}MB`,
+        })
+        return
+      }
+
+      // Create image URL
+      const imageUrl = URL.createObjectURL(file)
+      setCurrentImage(imageUrl)
+
+      // Analyze image
+      try {
+        const results = await analyzeImage(imageUrl)
+        setResults(results)
+        onAnalysis?.(results)
+      } catch (error) {
+        console.error("Analysis failed:", error)
+        toast.error("Failed to analyze image", {
+          description: "Please try again",
+          action: {
+            label: "Retry",
+            onClick: () => handleFileUpload(files),
+          },
+        })
+      }
+    }
+
+    // Handle URL input
+    const handleUrlSubmit = async () => {
+      if (!urlInput.trim()) return
+
+      try {
+        // Validate URL
+        new URL(urlInput)
+        setCurrentImage(urlInput)
+
+        const results = await analyzeImage(urlInput)
+        setResults(results)
+        onAnalysis?.(results)
+      } catch (error) {
+        toast.error("Invalid URL or failed to load image", {
+          description: "Please check the URL and try again",
+          action: {
+            label: "Retry",
+            onClick: () => handleUrlSubmit(),
+          },
+        })
+      }
+    }
+
+    // Handle camera capture
+    const startCamera = async () => {
+      try {
+        const stream = await navigator.mediaDevices.getUserMedia({
+          video: { width: 640, height: 480 },
+        })
+        if (videoRef.current) {
+          videoRef.current.srcObject = stream
+          setIsCameraActive(true)
+        }
+      } catch (error) {
+        toast.error("Failed to access camera", {
+          description: "Please check camera permissions",
+        })
+      }
+    }
+
+    const capturePhoto = () => {
+      if (!videoRef.current) return
+
+      const canvas = document.createElement("canvas")
+      const video = videoRef.current
+      canvas.width = video.videoWidth
+      canvas.height = video.videoHeight
+
+      const ctx = canvas.getContext("2d")
+      ctx?.drawImage(video, 0, 0)
+
+      const imageData = canvas.toDataURL("image/jpeg")
+      setCurrentImage(imageData)
+
+      // Stop camera
+      const stream = video.srcObject as MediaStream
+      stream?.getTracks().forEach((track) => track.stop())
+      setIsCameraActive(false)
+
+      // Analyze captured image
+      analyzeImage(imageData).then((results) => {
+        setResults(results)
+        onAnalysis?.(results)
+      })
+    }
+
+    // Handle drag and drop
+    const handleDragOver = (e: React.DragEvent) => {
+      e.preventDefault()
+      setIsDragging(true)
+    }
+
+    const handleDragLeave = (e: React.DragEvent) => {
+      e.preventDefault()
+      setIsDragging(false)
+    }
+
+    const handleDrop = (e: React.DragEvent) => {
+      e.preventDefault()
+      setIsDragging(false)
+      handleFileUpload(e.dataTransfer.files)
+    }
+
+    // Generate image (mock function)
+    const generateImage = async () => {
+      if (!generationPrompt.trim()) return
+
+      setIsGenerating(true)
+      // Simulate generation delay
+      await new Promise((resolve) => setTimeout(resolve, 3000))
+
+      // Mock generated image URL
+      const generatedUrl = `https://picsum.photos/800/600?random=${Date.now()}`
+      setCurrentImage(generatedUrl)
+      setIsGenerating(false)
+
+      // Analyze generated image
+      const results = await analyzeImage(generatedUrl)
+      setResults(results)
+      onAnalysis?.(results)
+    }
+
+    // Export results
+    const exportResults = (format: "json" | "pdf") => {
+      if (!results) return
+
+      if (format === "json") {
+        const dataStr = JSON.stringify(results, null, 2)
+        const dataBlob = new Blob([dataStr], { type: "application/json" })
+        const url = URL.createObjectURL(dataBlob)
+        const link = document.createElement("a")
+        link.href = url
+        link.download = "vision-analysis.json"
+        link.click()
+        URL.revokeObjectURL(url)
+        toast.success("Analysis exported", {
+          description: "JSON file has been downloaded",
+        })
+      } else if (format === "pdf") {
+        // PDF export would require a library like jsPDF
+        toast.info("PDF export not available", {
+          description: "This feature is not implemented in the demo",
+        })
+      }
+    }
+
+    return (
+      <Box
+        ref={ref}
+        className={cn("flex flex-col h-full", className)}
+        {...props}
+      >
+        {/* Header */}
+        <Box className="border-b p-4">
+          <Box className="flex items-center justify-between">
+            <div>
+              <Box tag="h2" className="text-lg font-semibold">AI Vision</Box>
+              <Box tag="p" className="text-sm text-muted-foreground">
+                Analyze images with AI-powered computer vision
+              </Box>
+            </div>
+            <Box className="flex items-center space-x-2">
+              <Label htmlFor="bounding-boxes" {...sx('text-sm')}>
+                Show Overlays
+              </Label>
+              <Switch
+                id="bounding-boxes"
+                checked={showBoundingBoxes}
+                onCheckedChange={setShowBoundingBoxes}
+              />
+            </Box>
+          </Box>
+        </Box>
+
+        <Box className="flex flex-1 overflow-hidden">
+          {/* Main Content */}
+          <Box className="flex-1 flex flex-col">
+            {/* Input Methods */}
+            <Box className="border-b p-4">
+              <Tabs defaultValue="upload" {...sx('w-full')}>
+                <TabsList {...sx('grid w-full grid-cols-4')}>
+                  <TabsTrigger value="upload">Upload</TabsTrigger>
+                  {enableUrl && <TabsTrigger value="url">URL</TabsTrigger>}
+                  {enableCamera && (
+                    <TabsTrigger value="camera">Camera</TabsTrigger>
+                  )}
+                  {enableGeneration && (
+                    <TabsTrigger value="generate">Generate</TabsTrigger>
+                  )}
+                </TabsList>
+
+                <TabsContent value="upload" {...sx('mt-4')}>
+                  <Box
+                    className={cn(
+                      "border-2 border-dashed rounded-lg p-8 text-center transition-colors",
+                      isDragging
+                        ? "border-primary bg-primary/10"
+                        : "border-muted-foreground/25",
+                      "hover:border-primary/50"
+                    )}
+                    onDragOver={handleDragOver}
+                    onDragLeave={handleDragLeave}
+                    onDrop={handleDrop}
+                    onClick={() => fileInputRef.current?.click()}
+                  >
+                    <Upload style={css('h-10 w-10 mx-auto mb-4 text-muted-foreground')} />
+                    <Box tag="p" className="text-sm font-medium mb-2">
+                      Drop an image here or click to upload
+                    </Box>
+                    <Box tag="p" className="text-xs text-muted-foreground">
+                      Supports:{" "}
+                      {acceptedFormats.map((f) => f.split("/")[1]).join(", ")}
+                      (Max: {maxFileSize / 1024 / 1024}MB)
+                    </Box>
+                    <Box tag="input"
+                      ref={fileInputRef}
+                      type="file"
+                      accept={acceptedFormats.join(",")}
+                      onChange={(e) => handleFileUpload(e.target.files)}
+                      className="hidden"
+                    />
+                  </Box>
+                </TabsContent>
+
+                {enableUrl && (
+                  <TabsContent value="url" {...sx('mt-4')}>
+                    <Box className="flex space-x-2">
+                      <Input
+                        placeholder="Enter image URL..."
+                        value={urlInput}
+                        onChange={(e) => setUrlInput(e.target.value)}
+                        onKeyDown={(e) =>
+                          e.key === "Enter" && handleUrlSubmit()
+                        }
+                      />
+                      <Button
+                        onClick={handleUrlSubmit}
+                        disabled={!urlInput.trim()}
+                      >
+                        <Link style={css('h-4 w-4')} />
+                      </Button>
+                    </Box>
+                  </TabsContent>
+                )}
+
+                {enableCamera && (
+                  <TabsContent value="camera" {...sx('mt-4')}>
+                    <Box className="space-y-4">
+                      {!isCameraActive ? (
+                        <Button onClick={startCamera} {...sx('w-full')}>
+                          <Camera style={css('h-4 w-4 mr-2')} />
+                          Start Camera
+                        </Button>
+                      ) : (
+                        <Box className="space-y-2">
+                          <video
+                            ref={videoRef}
+                            autoPlay
+                            playsInline
+                            className="w-full rounded-lg border"
+                          />
+                          <Button onClick={capturePhoto} {...sx('w-full')}>
+                            Capture Photo
+                          </Button>
+                        </Box>
+                      )}
+                    </Box>
+                  </TabsContent>
+                )}
+
+                {enableGeneration && (
+                  <TabsContent value="generate" {...sx('mt-4')}>
+                    <Box className="space-y-3">
+                      <Textarea
+                        placeholder="Describe the image you want to generate..."
+                        value={generationPrompt}
+                        onChange={(e) => setGenerationPrompt(e.target.value)}
+                        {...sx('min-h-20')}
+                      />
+                      <Button
+                        onClick={generateImage}
+                        disabled={!generationPrompt.trim() || isGenerating}
+                        {...sx('w-full')}
+                      >
+                        {isGenerating ? (
+                          <>
+                            <Loader2 style={css('h-4 w-4 mr-2 animate-spin')} />
+                            Generating...
+                          </>
+                        ) : (
+                          "Generate Image"
+                        )}
+                      </Button>
+                    </Box>
+                  </TabsContent>
+                )}
+              </Tabs>
+            </Box>
+
+            {/* Image Display */}
+            <Box className="flex-1 p-4">
+              {currentImage ? (
+                <Box className="relative h-full border rounded-lg overflow-hidden">
+                  <Box tag="img"
+                    ref={imageRef}
+                    src={currentImage}
+                    alt="Analysis target"
+                    className="w-full h-full object-contain"
+                    onLoad={() => {
+                      // Trigger canvas redraw when image loads
+                      if (results) {
+                        // Force re-render of canvas overlay
+                        setShowBoundingBoxes((prev) => !prev)
+                        setTimeout(() => setShowBoundingBoxes(true), 10)
+                      }
+                    }}
+                  />
+                  {results && showBoundingBoxes && (
+                    <CanvasOverlay
+                      imageRef={imageRef}
+                      results={results}
+                      showBoundingBoxes={showBoundingBoxes}
+                      showConfidence={showConfidence}
+                      minConfidence={confidenceThreshold}
+                      selectedTypes={selectedTypes}
+                    />
+                  )}
+                </Box>
+              ) : (
+                <Box className="h-full border-2 border-dashed rounded-lg flex items-center justify-center">
+                  <Box className="text-center">
+                    <Eye style={css('h-12 w-12 mx-auto mb-4 text-muted-foreground')} />
+                    <Box tag="p" className="text-lg font-medium mb-2">
+                      No image selected
+                    </Box>
+                    <Box tag="p" className="text-sm text-muted-foreground">
+                      Upload an image to start analysis
+                    </Box>
+                  </Box>
+                </Box>
+              )}
+            </Box>
+          </Box>
+
+          {/* Results Sidebar */}
+          <Box className="w-96 border-l flex flex-col">
+            <Box className="p-4 border-b">
+              <Box className="space-y-4">
+                {/* Confidence Threshold */}
+                <Box className="space-y-2">
+                  <Label {...sx('text-sm')}>
+                    Confidence Threshold:{" "}
+                    {Math.round(confidenceThreshold * 100)}%
+                  </Label>
+                  <Slider
+                    value={[confidenceThreshold]}
+                    onValueChange={([value]) => setConfidenceThreshold(value)}
+                    max={1}
+                    min={0}
+                    step={0.05}
+                    {...sx('w-full')}
+                  />
+                </Box>
+
+                {/* Detection Types */}
+                <Box className="space-y-2">
+                  <Label {...sx('text-sm')}>Show Detection Types</Label>
+                  <Box className="flex flex-wrap gap-2">
+                    {[
+                      { key: "objects", label: "Objects", icon: Target },
+                      { key: "text", label: "Text", icon: Type },
+                      { key: "faces", label: "Faces", icon: Smile },
+                    ].map(({ key, label, icon: Icon }) => (
+                      <Button
+                        key={key}
+                        variant={
+                          selectedTypes.includes(key) ? "default" : "outline"
+                        }
+                        size="sm"
+                        onClick={() => {
+                          setSelectedTypes((prev) =>
+                            prev.includes(key)
+                              ? prev.filter((t) => t !== key)
+                              : [...prev, key]
+                          )
+                        }}
+                      >
+                        <Icon style={css('h-3 w-3 mr-1')} />
+                        {label}
+                      </Button>
+                    ))}
+                  </Box>
+                </Box>
+              </Box>
+            </Box>
+
+            <Box className="flex-1 overflow-hidden">
+              <ScrollArea {...sx('h-full p-4')}>
+                <ResultsPanel
+                  results={results}
+                  isAnalyzing={isAnalyzing}
+                  onExport={exportResults}
+                />
+              </ScrollArea>
+            </Box>
+          </Box>
+        </Box>
+      </Box>
+    )
+  }
+)
+
+AIVision.displayName = "AIVision"
+
+export { AIVision }