+ Order +	+ X +	+ Y +	+ Intensity +
+ + {point.rank} + +	+ {Math.round(point.x)} +	+ {Math.round(point.y)} +	+ + + + + + {(point.intensity * 100).toFixed(0)}% + + +

+ Order +

+ X +

+ Y +

+ Intensity +

+ + {point.rank} + +

+ {Math.round(point.x)} +

+ {Math.round(point.y)} +

+ + {(point.intensity * 100).toFixed(0)}% + +

+ {top5.map((hotspot) => { + const barWidth = (hotspot.intensity / maxIntensity) * 100; + return ( +

+ + {hotspot.rank} + + + {hotspot.label || `Region ${hotspot.rank}`} + +

+ + ({Math.round(hotspot.center_x ?? hotspot.x)}, {Math.round(hotspot.center_y ?? hotspot.y)}) + +

+ {(hotspot.intensity * 100).toFixed(1)}% intensity +

+ ); + })} +

+ )} + + ); +} diff --git a/frontend/src/components/analysis/InsightsPanel.tsx b/frontend/src/components/analysis/InsightsPanel.tsx new file mode 100644 index 0000000..5238ebe --- /dev/null +++ b/frontend/src/components/analysis/InsightsPanel.tsx @@ -0,0 +1,99 @@ +import type { Insight } from "../../types/analysis"; +import Card from "../common/Card"; + +const iconMap = { + success: ( + + ), + info: ( + + ), + warning: ( + + ), +}; + +const borderColorMap = { + success: "border-l-green-500", + info: "border-l-blue-500", + warning: "border-l-amber-500", +}; + +function InsightCard({ insight, isAI }: { insight: Insight; isAI?: boolean }) { + const bgClass = isAI ? "bg-purple-50/60" : "bg-gray-50"; + return ( +

+ {iconMap[insight.type]} +

{insight.title}

{insight.description}

+ ); +} + +interface InsightsPanelProps { + insights: Insight[]; + aiInsights?: Insight[]; + aiCostUsd?: number | null; +} + +export default function InsightsPanel({ insights, aiInsights, aiCostUsd }: InsightsPanelProps) { + const hasInsights = insights && insights.length > 0; + const hasAI = aiInsights && aiInsights.length > 0; + + if (!hasInsights && !hasAI) return null; + + return ( +

+ {hasInsights && ( + +

+ Analysis Insights +

+ {insights.map((insight, i) => ( + + ))} +

+ + )} + + {hasAI && ( + +

+ AI Design Analysis +

+ + AI + +

+ {aiInsights!.map((insight, i) => ( + + ))} +

+ Powered by Claude Sonnet 4.6. AI insights are supplementary and should be validated against your design objectives. +

+ {aiCostUsd != null && ( + + Cost: ${aiCostUsd.toFixed(4)} + + )} +

+ + )} +

+ ); +} diff --git a/frontend/src/components/aoi/AOICanvas.tsx b/frontend/src/components/aoi/AOICanvas.tsx new file mode 100644 index 0000000..bf566dc --- /dev/null +++ b/frontend/src/components/aoi/AOICanvas.tsx @@ -0,0 +1,334 @@ +import { useEffect, useRef, useState, useCallback } from "react"; +import { Stage, Layer, Image as KonvaImage, Rect, Transformer, Text, Group } from "react-konva"; +import type Konva from "konva"; +import { useAnalysisStore } from "../../stores/analysisStore"; +import type { AOIRectangle } from "../../types/aoi"; +import type { AOIRegion } from "../../types/analysis"; +import { createAOIs } from "../../api/analysis"; +import Button from "../common/Button"; +import Card from "../common/Card"; + +const AOI_COLORS = ["#ef4444", "#3b82f6", "#f59e0b", "#8b5cf6", "#ec4899", "#ffc407", "#f97316"]; + +interface AOICanvasProps { + analysisId: string; + imageUrl: string; +} + +export default function AOICanvas({ analysisId, imageUrl }: AOICanvasProps) { + const containerRef = useRef(null); + const transformerRef = useRef(null); + const [image, setImage] = useState(null); + const [stageSize, setStageSize] = useState({ width: 800, height: 600 }); + const [scale, setScale] = useState(1); + const [isDrawing, setIsDrawing] = useState(false); + const [drawMode, setDrawMode] = useState(false); + const [drawStart, setDrawStart] = useState({ x: 0, y: 0 }); + const [tempRect, setTempRect] = useState<{ x: number; y: number; width: number; height: number } | null>(null); + const [selectedId, setSelectedId] = useState(null); + const [loading, setLoading] = useState(false); + const [editingLabel, setEditingLabel] = useState(null); + + const regions = useAnalysisStore((s) => s.aoiRegions); + const setRegions = useAnalysisStore((s) => s.setAoiRegions); + const addRegion = useAnalysisStore((s) => s.addAoiRegion); + const updateRegion = useAnalysisStore((s) => s.updateAoiRegion); + const removeRegion = useAnalysisStore((s) => s.removeAoiRegion); + const setAoiResults = useAnalysisStore((s) => s.setAoiResults); + + useEffect(() => { + const img = new window.Image(); + img.crossOrigin = "anonymous"; + img.onload = () => { + setImage(img); + if (containerRef.current) { + const maxWidth = containerRef.current.clientWidth; + const s = Math.min(1, maxWidth / img.naturalWidth); + setScale(s); + setStageSize({ + width: Math.round(img.naturalWidth * s), + height: Math.round(img.naturalHeight * s), + }); + } + }; + img.src = imageUrl; + }, [imageUrl]); + + const handleMouseDown = useCallback( + (e: Konva.KonvaEventObject) => { + if (!drawMode) return; + const stage = e.target.getStage(); + if (!stage) return; + const pos = stage.getPointerPosition(); + if (!pos) return; + setIsDrawing(true); + setDrawStart({ x: pos.x, y: pos.y }); + setTempRect({ x: pos.x, y: pos.y, width: 0, height: 0 }); + }, + [drawMode], + ); + + const handleMouseMove = useCallback( + (e: Konva.KonvaEventObject) => { + if (!isDrawing) return; + const stage = e.target.getStage(); + if (!stage) return; + const pos = stage.getPointerPosition(); + if (!pos) return; + setTempRect({ + x: Math.min(drawStart.x, pos.x), + y: Math.min(drawStart.y, pos.y), + width: Math.abs(pos.x - drawStart.x), + height: Math.abs(pos.y - drawStart.y), + }); + }, + [isDrawing, drawStart], + ); + + const handleMouseUp = useCallback(() => { + if (!isDrawing || !tempRect) return; + setIsDrawing(false); + if (tempRect.width > 10 && tempRect.height > 10) { + const newRegion: AOIRectangle = { + id: `aoi-${Date.now()}`, + label: `Region ${regions.length + 1}`, + x: tempRect.x / scale, + y: tempRect.y / scale, + width: tempRect.width / scale, + height: tempRect.height / scale, + color: AOI_COLORS[regions.length % AOI_COLORS.length], + }; + addRegion(newRegion); + } + setTempRect(null); + setDrawMode(false); + }, [isDrawing, tempRect, regions.length, scale, addRegion]); + + const handleDragEnd = useCallback( + (id: string, e: Konva.KonvaEventObject) => { + updateRegion(id, { + x: e.target.x() / scale, + y: e.target.y() / scale, + }); + }, + [scale, updateRegion], + ); + + const handleTransformEnd = useCallback( + (id: string, e: Konva.KonvaEventObject) => { + const node = e.target; + const scaleX = node.scaleX(); + const scaleY = node.scaleY(); + node.scaleX(1); + node.scaleY(1); + updateRegion(id, { + x: node.x() / scale, + y: node.y() / scale, + width: (node.width() * scaleX) / scale, + height: (node.height() * scaleY) / scale, + }); + }, + [scale, updateRegion], + ); + + useEffect(() => { + if (!transformerRef.current) return; + const stage = transformerRef.current.getStage(); + if (!stage || !selectedId) { + transformerRef.current.nodes([]); + return; + } + const node = stage.findOne(`#${selectedId}`); + if (node) { + transformerRef.current.nodes([node]); + } else { + transformerRef.current.nodes([]); + } + transformerRef.current.getLayer()?.batchDraw(); + }, [selectedId]); + + const handleAnalyze = async () => { + if (regions.length === 0) return; + setLoading(true); + try { + const apiRegions: AOIRegion[] = regions.map((r) => ({ + label: r.label, + x: r.x, + y: r.y, + width: r.width, + height: r.height, + })); + const results = await createAOIs(analysisId, apiRegions); + setAoiResults(results); + } catch (err) { + console.error("AOI analysis failed:", err); + } finally { + setLoading(false); + } + }; + + const handleLabelChange = (id: string, label: string) => { + updateRegion(id, { label }); + setEditingLabel(null); + }; + + return ( +

+ + + {regions.length > 0 && ( + + )} + {drawMode && ( + + Click and drag on the image to draw a region + + )} +

+ +

+ {image && ( + { + if (e.target === e.target.getStage()) { + setSelectedId(null); + } + }} + > + + + {regions.map((region) => ( + + setSelectedId(region.id)} + onDragEnd={(e) => handleDragEnd(region.id, e)} + onTransformEnd={(e) => handleTransformEnd(region.id, e)} + /> + + + ))} + {tempRect && ( + + )} + { + if (newBox.width < 10 || newBox.height < 10) return oldBox; + return newBox; + }} + /> + + + )} +

+ + {regions.length > 0 && ( + +

+ Defined Regions +

+ {regions.map((r) => ( +

+ + {editingLabel === r.id ? ( + handleLabelChange(r.id, e.target.value)} + onKeyDown={(e) => { + if (e.key === "Enter") { + handleLabelChange(r.id, e.currentTarget.value); + } + }} + className="border border-gray-300 rounded px-2 py-0.5 text-sm flex-1" + /> + ) : ( + setEditingLabel(r.id)} + > + {r.label} + + )} + + {Math.round(r.width)}x{Math.round(r.height)} + + +

+ ))} +

+ + )} +

+ ); +} diff --git a/frontend/src/components/aoi/AOIResults.tsx b/frontend/src/components/aoi/AOIResults.tsx new file mode 100644 index 0000000..9cadb81 --- /dev/null +++ b/frontend/src/components/aoi/AOIResults.tsx @@ -0,0 +1,91 @@ +import type { AOIResult } from "../../types/analysis"; +import Card from "../common/Card"; + +interface AOIResultsProps { + results: AOIResult[]; +} + +export default function AOIResults({ results }: AOIResultsProps) { + if (results.length === 0) return null; + + return ( + +

+ AOI Analysis Results +

+ + + + + + + + + + + {results.map((result, idx) => { + const densityColor = + result.density >= 1 ? "#ffc407" : "#ef4444"; + return ( + + + + + + + ); + })} + +

+ Region +	+ Attention % +	+ Area % +	+ Density +
+ {result.label} +	+ + + + + + {result.attention_percent.toFixed(1)}% + + +	+ {result.area_percent.toFixed(1)}% +	+ = 1 + ? "#ffc40720" + : "#ef444420", + }} + > + {result.density.toFixed(2)}x + +

+ Density = Attention% / Area%. Values above 1.0 indicate the region + attracts more attention than its size would suggest. +

+ + ); +} diff --git a/frontend/src/components/common/Button.tsx b/frontend/src/components/common/Button.tsx new file mode 100644 index 0000000..f906e6b --- /dev/null +++ b/frontend/src/components/common/Button.tsx @@ -0,0 +1,64 @@ +import type { ButtonHTMLAttributes, ReactNode } from "react"; + +type Variant = "primary" | "secondary" | "danger"; + +interface ButtonProps extends ButtonHTMLAttributes { + variant?: Variant; + children: ReactNode; + loading?: boolean; +} + +const variantClasses: Record = { + primary: "text-gray-900", + secondary: + "bg-transparent border-2 border-gray-300 text-gray-700 hover:bg-gray-50", + danger: "bg-red-500 text-white hover:bg-red-600", +}; + +const variantStyles: Record = { + primary: { backgroundColor: "#ffc407" }, + secondary: {}, + danger: {}, +}; + +export default function Button({ + variant = "primary", + children, + loading = false, + className = "", + disabled, + style, + ...props +}: ButtonProps) { + return ( + + ); +} diff --git a/frontend/src/components/common/Card.tsx b/frontend/src/components/common/Card.tsx new file mode 100644 index 0000000..8c0edbc --- /dev/null +++ b/frontend/src/components/common/Card.tsx @@ -0,0 +1,23 @@ +import type { ReactNode } from "react"; + +interface CardProps { + children: ReactNode; + className?: string; + padding?: boolean; +} + +export default function Card({ + children, + className = "", + padding = true, +}: CardProps) { + return ( +

+ {children} +

+ ); +} diff --git a/frontend/src/components/common/LoadingSpinner.tsx b/frontend/src/components/common/LoadingSpinner.tsx new file mode 100644 index 0000000..bb6e5b5 --- /dev/null +++ b/frontend/src/components/common/LoadingSpinner.tsx @@ -0,0 +1,40 @@ +interface LoadingSpinnerProps { + size?: "sm" | "md" | "lg"; + message?: string; +} + +const sizeClasses = { + sm: "w-5 h-5", + md: "w-8 h-8", + lg: "w-12 h-12", +}; + +export default function LoadingSpinner({ + size = "md", + message, +}: LoadingSpinnerProps) { + return ( +

+ + {message &&

{message}

} +

+ ); +} diff --git a/frontend/src/components/layout/AppLayout.tsx b/frontend/src/components/layout/AppLayout.tsx new file mode 100644 index 0000000..3eaf5ca --- /dev/null +++ b/frontend/src/components/layout/AppLayout.tsx @@ -0,0 +1,24 @@ +import { Outlet } from "react-router-dom"; +import Header from "./Header"; +import Sidebar from "./Sidebar"; +import { useUIStore } from "../../stores/uiStore"; + +export default function AppLayout() { + const sidebarOpen = useUIStore((s) => s.sidebarOpen); + + return ( +

+ +

+ ); +} diff --git a/frontend/src/components/layout/Header.tsx b/frontend/src/components/layout/Header.tsx new file mode 100644 index 0000000..813f3e2 --- /dev/null +++ b/frontend/src/components/layout/Header.tsx @@ -0,0 +1,77 @@ +import { Link } from "react-router-dom"; +import { useUIStore } from "../../stores/uiStore"; + +export default function Header() { + const toggleSidebar = useUIStore((s) => s.toggleSidebar); + + return ( +

+ + + + OliVAS + + + Visual Attention Suite + + +

+ + +

+ ); +} diff --git a/frontend/src/components/layout/Sidebar.tsx b/frontend/src/components/layout/Sidebar.tsx new file mode 100644 index 0000000..b59fb70 --- /dev/null +++ b/frontend/src/components/layout/Sidebar.tsx @@ -0,0 +1,80 @@ +import { NavLink } from "react-router-dom"; +import { useUIStore } from "../../stores/uiStore"; + +const navItems = [ + { + to: "/", + label: "Dashboard", + icon: ( + + ), + }, + { + to: "/analyze", + label: "New Analysis", + icon: ( + + ), + }, + { + to: "/help", + label: "Help", + icon: ( + + ), + }, + { + to: "/about", + label: "About", + icon: ( + + ), + }, +]; + +export default function Sidebar() { + const sidebarOpen = useUIStore((s) => s.sidebarOpen); + + return ( + + ); +} diff --git a/frontend/src/components/upload/DropZone.tsx b/frontend/src/components/upload/DropZone.tsx new file mode 100644 index 0000000..2e72b63 --- /dev/null +++ b/frontend/src/components/upload/DropZone.tsx @@ -0,0 +1,96 @@ +import { useCallback, useState } from "react"; +import { useDropzone } from "react-dropzone"; + +interface DropZoneProps { + onFileSelected: (file: File) => void; + disabled?: boolean; +} + +export default function DropZone({ onFileSelected, disabled }: DropZoneProps) { + const [preview, setPreview] = useState(null); + const [selectedFile, setSelectedFile] = useState(null); + + const onDrop = useCallback( + (acceptedFiles: File[]) => { + const file = acceptedFiles[0]; + if (!file) return; + setSelectedFile(file); + setPreview(URL.createObjectURL(file)); + onFileSelected(file); + }, + [onFileSelected], + ); + + const { getRootProps, getInputProps, isDragActive } = useDropzone({ + onDrop, + accept: { + "image/jpeg": [".jpg", ".jpeg"], + "image/png": [".png"], + "image/tiff": [".tiff", ".tif"], + "image/webp": [".webp"], + }, + maxFiles: 1, + disabled, + }); + + return ( +

+ + {preview ? ( +

{selectedFile?.name}

+ {selectedFile + ? `${(selectedFile.size / 1024 / 1024).toFixed(2)} MB` + : ""} +

+ Drop a new image to replace +

+ ) : ( +

+ +

+ {isDragActive + ? "Drop your image here" + : "Drag and drop an image, or click to browse"} +

+ JPEG, PNG, TIFF, or WebP +

+ )} +

+ ); +} diff --git a/frontend/src/components/upload/UploadPreview.tsx b/frontend/src/components/upload/UploadPreview.tsx new file mode 100644 index 0000000..d4b28ba --- /dev/null +++ b/frontend/src/components/upload/UploadPreview.tsx @@ -0,0 +1,51 @@ +import { useEffect, useState } from "react"; +import Card from "../common/Card"; + +interface UploadPreviewProps { + file: File; +} + +export default function UploadPreview({ file }: UploadPreviewProps) { + const [dimensions, setDimensions] = useState<{ + width: number; + height: number; + } | null>(null); + const [previewUrl, setPreviewUrl] = useState(""); + + useEffect(() => { + const url = URL.createObjectURL(file); + setPreviewUrl(url); + + const img = new Image(); + img.onload = () => { + setDimensions({ width: img.naturalWidth, height: img.naturalHeight }); + }; + img.src = url; + + return () => URL.revokeObjectURL(url); + }, [file]); + + const sizeMB = (file.size / 1024 / 1024).toFixed(2); + + return ( + + {previewUrl && ( + Preview

+ )} +

{file.name}

{sizeMB} MB

+ {dimensions && ( +

+ {dimensions.width} x {dimensions.height} px +

+ )} +

{file.type}

+ + ); +} diff --git a/frontend/src/globals.css b/frontend/src/globals.css new file mode 100644 index 0000000..74631d8 --- /dev/null +++ b/frontend/src/globals.css @@ -0,0 +1,13 @@ +@import "tailwindcss"; + +body { + font-family: + "Montserrat", + -apple-system, + BlinkMacSystemFont, + "Segoe UI", + Roboto, + sans-serif; + -webkit-font-smoothing: antialiased; + -moz-osx-font-smoothing: grayscale; +} diff --git a/frontend/src/hooks/useAnalysis.ts b/frontend/src/hooks/useAnalysis.ts new file mode 100644 index 0000000..87425c9 --- /dev/null +++ b/frontend/src/hooks/useAnalysis.ts @@ -0,0 +1,27 @@ +import { useQuery } from "@tanstack/react-query"; +import { getAnalysis, getAnalysisStatus } from "../api/analysis"; +import type { AnalysisDetail, AnalysisStatus } from "../types/analysis"; + +export function useAnalysis(analysisId: string | undefined) { + return useQuery({ + queryKey: ["analysis", analysisId], + queryFn: () => getAnalysis(analysisId!), + enabled: !!analysisId, + }); +} + +export function useAnalysisStatus( + analysisId: string | undefined, + enabled: boolean = true, +) { + return useQuery({ + queryKey: ["analysisStatus", analysisId], + queryFn: () => getAnalysisStatus(analysisId!), + enabled: !!analysisId && enabled, + refetchInterval: (query) => { + const status = query.state.data?.status; + if (status === "completed" || status === "failed") return false; + return 2000; + }, + }); +} diff --git a/frontend/src/hooks/useProjects.ts b/frontend/src/hooks/useProjects.ts new file mode 100644 index 0000000..40940b2 --- /dev/null +++ b/frontend/src/hooks/useProjects.ts @@ -0,0 +1,63 @@ +import { useQuery, useMutation, useQueryClient } from "@tanstack/react-query"; +import { + listProjects, + getProject, + createProject, + updateProject, + deleteProject, +} from "../api/projects"; +import type { Project, ProjectDetail, ProjectCreate } from "../types/project"; + +export function useProjects(page: number = 1, perPage: number = 20) { + return useQuery({ + queryKey: ["projects", page, perPage], + queryFn: () => listProjects(page, perPage), + }); +} + +export function useProject(projectId: string | undefined) { + return useQuery({ + queryKey: ["project", projectId], + queryFn: () => getProject(projectId!), + enabled: !!projectId, + }); +} + +export function useCreateProject() { + const queryClient = useQueryClient(); + + return useMutation({ + mutationFn: ({ name, description }: ProjectCreate) => + createProject(name, description), + onSuccess: () => { + queryClient.invalidateQueries({ queryKey: ["projects"] }); + }, + }); +} + +export function useUpdateProject() { + const queryClient = useQueryClient(); + + return useMutation({ + mutationFn: ({ + id, + ...updates + }: Partial & { id: string }) => + updateProject(id, updates), + onSuccess: (_, variables) => { + queryClient.invalidateQueries({ queryKey: ["projects"] }); + queryClient.invalidateQueries({ queryKey: ["project", variables.id] }); + }, + }); +} + +export function useDeleteProject() { + const queryClient = useQueryClient(); + + return useMutation({ + mutationFn: (id: string) => deleteProject(id), + onSuccess: () => { + queryClient.invalidateQueries({ queryKey: ["projects"] }); + }, + }); +} diff --git a/frontend/src/hooks/useUpload.ts b/frontend/src/hooks/useUpload.ts new file mode 100644 index 0000000..0d2c06e --- /dev/null +++ b/frontend/src/hooks/useUpload.ts @@ -0,0 +1,48 @@ +import { useState, useCallback } from "react"; +import { useMutation } from "@tanstack/react-query"; +import { createAnalysis } from "../api/analysis"; +import type { AnalysisDetail } from "../types/analysis"; + +interface UseUploadOptions { + onSuccess?: (analysis: AnalysisDetail) => void; + onError?: (error: Error) => void; +} + +export function useUpload(options?: UseUploadOptions) { + const [progress, setProgress] = useState(0); + + const mutation = useMutation< + AnalysisDetail, + Error, + { projectId: string; file: File; name?: string; model?: string } + >({ + mutationFn: async ({ projectId, file, name, model }) => { + setProgress(10); + const result = await createAnalysis(projectId, file, name, model); + setProgress(100); + return result; + }, + onSuccess: (data) => { + options?.onSuccess?.(data); + }, + onError: (error) => { + setProgress(0); + options?.onError?.(error); + }, + }); + + const reset = useCallback(() => { + setProgress(0); + mutation.reset(); + }, [mutation]); + + return { + upload: mutation.mutate, + uploadAsync: mutation.mutateAsync, + isUploading: mutation.isPending, + progress, + error: mutation.error, + data: mutation.data, + reset, + }; +} diff --git a/frontend/src/main.tsx b/frontend/src/main.tsx new file mode 100644 index 0000000..a601f65 --- /dev/null +++ b/frontend/src/main.tsx @@ -0,0 +1,26 @@ +import { StrictMode } from "react"; +import { createRoot } from "react-dom/client"; +import { BrowserRouter } from "react-router-dom"; +import { QueryClient, QueryClientProvider } from "@tanstack/react-query"; +import App from "./App"; +import "./globals.css"; + +const queryClient = new QueryClient({ + defaultOptions: { + queries: { + retry: 1, + refetchOnWindowFocus: false, + staleTime: 30_000, + }, + }, +}); + +createRoot(document.getElementById("root")!).render( + + + + + + + , +); diff --git a/frontend/src/pages/About.tsx b/frontend/src/pages/About.tsx new file mode 100644 index 0000000..1feeda9 --- /dev/null +++ b/frontend/src/pages/About.tsx @@ -0,0 +1,468 @@ +import { useState } from "react"; +import Card from "../components/common/Card"; + +function Section({ + title, + children, +}: { + title: string; + children: React.ReactNode; +}) { + return ( + +

+ {title} +

+ {children} +

+ + ); +} + +function Expandable({ + label, + children, +}: { + label: string; + children: React.ReactNode; +}) { + const [open, setOpen] = useState(false); + return ( +

+ + {open && ( +

+ {children} +

+ )} +

+ ); +} + +function Citation({ + authors, + year, + title, + venue, + url, +}: { + authors: string; + year: string; + title: string; + venue: string; + url: string; +}) { + return ( +

+ {authors} ({year}).{" "} + + “{title}” + + . {venue}. +

+ ); +} + +export default function About() { + return ( +

+ {/* Hero */} +

+ The Science Behind Oli + VAS +

+ How we predict where people look — and why you can trust the results +

+ + {/* Layman's explanation */} +

+ When you look at an image — an ad, a product package, a web page — your + eyes don't scan everything equally. In the first 3–5 seconds, your gaze + is drawn to specific areas: faces, high-contrast text, bright colours, + and unusual shapes. This is called visual saliency. +

+ OliVAS uses deep neural networks to predict this + behaviour. These networks were trained on data from thousands of{" "} + real eye-tracking experiments, where researchers recorded + exactly where people looked when shown different images. The models + learned the patterns that drive human attention — and can now predict + them for any new image you upload. +

+ The result is a heatmap showing where viewers are most + likely to look, a gaze sequence predicting the order of + fixations, and attention metrics that quantify how + effectively your design captures attention. +

+ + {/* The Models */} +

+ OliVAS uses the DeepGaze family of models, developed at + the University of Tübingen by Matthias Kümmerer, Matthias Bethge, and + colleagues. These are consistently among the{" "} + top-ranked models on the{" "} + + MIT/Tübingen Saliency Benchmark + + , the standard evaluation platform for saliency prediction. +

+ + {/* DeepGaze IIE */} +

DeepGaze IIE

+ + Recommended + +

+ Our recommended model for most use cases. It combines features from + two powerful image recognition networks (ResNet and DenseNet) to + predict where people look. It is calibrated — meaning + its confidence scores closely match actual fixation probabilities, even + on images very different from its training data. +

+ +

+ DeepGaze IIE uses an ensemble of ResNet-50 and DenseNet-201 features + with a readout network and learned center bias prior. It was the + first model to demonstrate strong out-of-domain generalisation across + different saliency datasets. It achieves state-of-the-art performance + on the MIT/Tübingen benchmark with an Information Gain (IG) score + that significantly outperforms previous models. +

+ + +

+ + {/* DeepGaze III */} +

DeepGaze III

+ The latest model in the family, designed to predict not just{" "} + where people look but the sequence of fixations + over time. It uses a transformer-based architecture that can capture + long-range dependencies in an image — useful for complex layouts with + many elements. +

+ +

+ DeepGaze III models scanpaths (sequences of fixations) rather than + just static saliency maps. It uses a deep neural network with a + fixation selection mechanism that accounts for the temporal dynamics + of visual exploration. Published in the Journal of Vision, the + leading peer-reviewed journal for vision science. +

+ + +

+ + {/* DeepGaze I */} +

DeepGaze I

+ The original DeepGaze model that pioneered using deep learning features + for saliency prediction. It demonstrated that features learned for + object recognition (on ImageNet) naturally encode information about + where humans look. Faster than the newer variants but less accurate on + complex designs. +

+ +

+ DeepGaze I uses features from AlexNet (trained on ImageNet) with a + linear readout to predict fixation density. It was the first model to + show that deep features trained for object classification transfer + well to saliency prediction, significantly outperforming + hand-engineered feature models. +

+ + +

+ + {/* Validation */} +

+ How do we know these predictions are accurate? The models are evaluated + against real human eye-tracking data. In eye-tracking + studies, participants view images while a camera tracks their exact gaze + position at high speed (typically 250–1000 times per second). This + produces ground truth "fixation maps" showing where humans actually + looked. +

+ The{" "} + + MIT/Tübingen Saliency Benchmark + {" "} + is the standard platform for comparing saliency models. It uses hidden + test sets so models cannot be tuned to the evaluation data. DeepGaze + models consistently rank among the top performers. +

+ Key evaluation datasets include: +

+ MIT1003 — 1,003 natural images with eye-tracking data + from 15 viewers each ( + + Judd et al., 2009 + + ) +
+ CAT2000 — 4,000 images across 20 categories with + fixation data from 24 observers ( + + Borji & Itti, 2015 + + ) +

+ + +

+ Models are evaluated on multiple metrics: AUC (Area Under the ROC + Curve), Information Gain (IG), Normalized Scanpath Saliency (NSS), + and KL Divergence. These measure different aspects of prediction + quality — from binary "is this a fixated location" to fine-grained + probability calibration. +

+ DeepGaze IIE achieves some of the highest Information Gain scores on + the MIT benchmark, meaning its predicted probability distributions + closely match actual human fixation patterns. +

+ +

+ + {/* Foundational Research */} +

+ The scientific study of visual attention goes back decades. In 1998, + Laurent Itti, Christof Koch, and Ernst Niebur published a landmark + computational model of visual attention based on neuroscience principles + — centre-surround contrast in colour, intensity, and orientation. This + model established the field of computational saliency prediction. +

+ Since then, the field has evolved from hand-crafted feature models to + deep learning approaches. DeepGaze I (2015) was a pivotal moment, + showing that neural networks trained for object recognition naturally + learn to predict human attention. Each subsequent version has improved + accuracy and generalisation. +

+ + + + +

+ + {/* Important caveats */} +

+ While saliency models are powerful tools, they have important + limitations to keep in mind: +

+ First-glance only — Predictions model the first 3–5 + seconds of free viewing. They do not predict reading behaviour, + task-driven search, or extended engagement. +
+ Bottom-up attention — Models predict attention driven + by visual features (contrast, faces, objects). They do not account for + top-down factors like user intent, cultural context, or brand + recognition. +
+ Aggregated viewers — Predictions represent an + average across many viewers. Individual variation can be substantial. +
+ Static images only — Models are trained on and + predict for static images, not video or interactive content. +

+ For best results, use OliVAS as one input in your design review process + alongside user testing, A/B testing, and domain expertise. +

+ + {/* Full References */} +

+ + + + + + + + +

+ Open-source implementation:{" "} + + github.com/matthias-k/DeepGaze + {" "} + | Benchmark:{" "} + + saliency.tuebingen.ai + +

+ +

+ OliVAS — Open-Source Visual Attention Software by OLIVER +

+ ); +} diff --git a/frontend/src/pages/AnalysisView.tsx b/frontend/src/pages/AnalysisView.tsx new file mode 100644 index 0000000..be1cea2 --- /dev/null +++ b/frontend/src/pages/AnalysisView.tsx @@ -0,0 +1,274 @@ +import { useEffect, useState } from "react"; +import { useParams } from "react-router-dom"; +import { useAnalysis } from "../hooks/useAnalysis"; +import { useAnalysisStore, type AnalysisTab } from "../stores/analysisStore"; +import { getAnalysisImageUrl, checkAIInsightsAvailable, generateAIInsights } from "../api/analysis"; +import type { Insight } from "../types/analysis"; + +function ZoomableImage({ src, alt }: { src: string; alt: string }) { + const zoom = useAnalysisStore((s) => s.zoom); + return ( +

+ ); +} + +function ZoomControls() { + const zoom = useAnalysisStore((s) => s.zoom); + const setZoom = useAnalysisStore((s) => s.setZoom); + return ( +

+ + {Math.round(zoom * 100)}% + + {zoom !== 1 && ( + + )} +

+ ); +} +import { downloadReport } from "../api/reports"; +import HeatmapOverlay from "../components/analysis/HeatmapOverlay"; +import HeatmapControls from "../components/analysis/HeatmapControls"; +import GazeSequence from "../components/analysis/GazeSequence"; +import HotspotList from "../components/analysis/HotspotList"; +import InsightsPanel from "../components/analysis/InsightsPanel"; +import AOICanvas from "../components/aoi/AOICanvas"; +import AOIResults from "../components/aoi/AOIResults"; +import Card from "../components/common/Card"; +import Button from "../components/common/Button"; +import LoadingSpinner from "../components/common/LoadingSpinner"; + +const tabs: { key: AnalysisTab; label: string }[] = [ + { key: "heatmap", label: "Heatmap" }, + { key: "gaze", label: "Gaze Sequence" }, + { key: "hotspots", label: "Hotspots" }, + { key: "aoi", label: "AOI Analysis" }, +]; + +export default function AnalysisView() { + const { analysisId } = useParams<{ analysisId: string }>(); + const { data: analysis, isLoading, error } = useAnalysis(analysisId); + const activeTab = useAnalysisStore((s) => s.activeTab); + const setActiveTab = useAnalysisStore((s) => s.setActiveTab); + const setCurrentAnalysis = useAnalysisStore((s) => s.setCurrentAnalysis); + const aoiResults = useAnalysisStore((s) => s.aoiResults); + const reset = useAnalysisStore((s) => s.reset); + + const [aiAvailable, setAiAvailable] = useState(false); + const [aiInsights, setAiInsights] = useState([]); + const [aiCostUsd, setAiCostUsd] = useState(null); + const [aiLoading, setAiLoading] = useState(false); + const [aiError, setAiError] = useState(null); + + useEffect(() => { + checkAIInsightsAvailable().then(setAiAvailable); + }, []); + + // Load saved AI insights from DB when analysis loads + useEffect(() => { + if (analysis?.ai_insights && analysis.ai_insights.length > 0) { + setAiInsights(analysis.ai_insights); + setAiCostUsd(analysis.ai_cost_usd ?? null); + } + }, [analysis]); + + const handleGenerateAI = async () => { + if (!analysisId) return; + setAiLoading(true); + setAiError(null); + try { + const result = await generateAIInsights(analysisId); + setAiInsights(result.insights); + setAiCostUsd(result.cost_usd); + } catch (err: any) { + setAiError(err?.response?.data?.detail || "AI analysis failed"); + } finally { + setAiLoading(false); + } + }; + + useEffect(() => { + if (analysis) { + setCurrentAnalysis(analysis); + } + return () => { + reset(); + }; + }, [analysis, setCurrentAnalysis, reset]); + + const handleDownloadPdf = async () => { + if (!analysisId) return; + try { + await downloadReport(analysisId); + } catch (err) { + console.error("Failed to download report:", err); + } + }; + + if (isLoading) { + return ; + } + + if (error || !analysis) { + return ( +

+ Failed to load analysis. It may not exist or is still processing. +

+ +

+ ); + } + + const originalUrl = getAnalysisImageUrl(analysis.id, "original"); + const saliencyUrl = getAnalysisImageUrl(analysis.id, "saliency-raw"); + const gazeUrl = getAnalysisImageUrl(analysis.id, "gaze-sequence"); + + return ( +

+ {/* Header */} +

+ {analysis.name} +

+ Model: {analysis.model_used || analysis.model} + + {new Date(analysis.created_at).toLocaleDateString()} + + {analysis.overall_score !== undefined && ( + + Score: {analysis.overall_score.toFixed(1)} + + )} +

+ {aiAvailable && analysis.status === "completed" && aiInsights.length === 0 && ( + + )} + +

+ + {/* Tabs + Zoom */} +

+ {tabs.map((tab) => ( + + ))} +

+ +

+ + {/* Insights */} + {((analysis.insights && analysis.insights.length > 0) || aiInsights.length > 0) && ( + + )} + {aiError && ( +

+ {aiError} +

+ )} + + {/* Tab content */} + {activeTab === "heatmap" && ( +

+ + + +

+ +

+ )} + + {activeTab === "gaze" && ( + ({ + rank: p.rank, + x: p.x, + y: p.y, + intensity: p.probability ?? p.intensity ?? 0, + })) + } + /> + )} + + {activeTab === "hotspots" && ( +

+ + + + +

+ )} + + {activeTab === "aoi" && ( +

+ + +

+ )} +

+ ); +} diff --git a/frontend/src/pages/ComparisonView.tsx b/frontend/src/pages/ComparisonView.tsx new file mode 100644 index 0000000..e19de9e --- /dev/null +++ b/frontend/src/pages/ComparisonView.tsx @@ -0,0 +1,175 @@ +import { useEffect, useState } from "react"; +import { useParams, useNavigate } from "react-router-dom"; +import { useProject } from "../hooks/useProjects"; +import { getAnalysisImageUrl } from "../api/analysis"; +import Card from "../components/common/Card"; +import Button from "../components/common/Button"; +import LoadingSpinner from "../components/common/LoadingSpinner"; + +export default function ComparisonView() { + const { comparisonId } = useParams<{ comparisonId: string }>(); + const navigate = useNavigate(); + const { data: project, isLoading } = useProject(comparisonId); + const [selectedIds, setSelectedIds] = useState([]); + + const analyses = (project?.analyses || []).filter( + (a) => a.status === "completed", + ); + + useEffect(() => { + if (analyses.length >= 2 && selectedIds.length === 0) { + setSelectedIds(analyses.slice(0, 2).map((a) => a.id)); + } + }, [analyses, selectedIds.length]); + + const toggleSelection = (id: string) => { + setSelectedIds((prev) => + prev.includes(id) ? prev.filter((i) => i !== id) : [...prev, id], + ); + }; + + if (isLoading) { + return ; + } + + if (!project) { + return ( +

Project not found.

+ +

+ ); + } + + const selected = analyses.filter((a) => selectedIds.includes(a.id)); + + return ( +

+ Compare Analyses +

+ {project.name} -- Side-by-side heatmap comparison +

+ + {/* Selection */} + +

+ Select analyses to compare: +

+ {analyses.map((a) => ( + + ))} +

+ + + {/* Side-by-side view */} + {selected.length >= 2 ? ( +

+ {selected.map((analysis) => ( + +

+ {analysis.name} +

{analysis.model}

+ + ))} +

+ ) : ( + +

+ Select at least 2 completed analyses to compare. +

+ + )} + + {/* Comparison table */} + {selected.length >= 2 && ( + +

+ Comparison Metrics +

+ + + + + {selected.map((a) => ( + + ))} + + + + + + {selected.map((a) => ( + + ))} + + + + {selected.map((a) => ( + + ))} + + + + {selected.map((a) => ( + + ))} + + +

+ Metric +	+ {a.name} +
Model	+ {a.model} +
Status	+ + {a.status} + +
Date	+ {new Date(a.created_at).toLocaleDateString()} +

+ + )} +

+ ); +} diff --git a/frontend/src/pages/Dashboard.tsx b/frontend/src/pages/Dashboard.tsx new file mode 100644 index 0000000..65d1f9e --- /dev/null +++ b/frontend/src/pages/Dashboard.tsx @@ -0,0 +1,174 @@ +import { useState } from "react"; +import { Link } from "react-router-dom"; +import { useProjects, useCreateProject } from "../hooks/useProjects"; +import Card from "../components/common/Card"; +import Button from "../components/common/Button"; +import LoadingSpinner from "../components/common/LoadingSpinner"; + +export default function Dashboard() { + const { data, isLoading, error } = useProjects(); + const createProject = useCreateProject(); + const [showCreateModal, setShowCreateModal] = useState(false); + const [newName, setNewName] = useState(""); + const [newDescription, setNewDescription] = useState(""); + + const handleCreate = async () => { + if (!newName.trim()) return; + await createProject.mutateAsync({ + name: newName.trim(), + description: newDescription.trim() || undefined, + }); + setNewName(""); + setNewDescription(""); + setShowCreateModal(false); + }; + + if (isLoading) return ; + + if (error) { + return ( +

Failed to load projects. Please try again.

+ ); + } + + const projects = data || []; + + return ( +

+ Dashboard +

+ Manage your visual attention analysis projects +

+ +

+ + {projects.length === 0 ? ( + + +

+ No projects yet +

+ Create a project to start analyzing visual attention in your + creative assets. +

+ + + ) : ( +

+ {projects.map((project) => ( + + +

+ {project.name} +

+ + {project.analysis_count} analyses + +

+ {project.description && ( +

+ {project.description} +

+ )} +

+ Updated{" "} + {new Date(project.updated_at).toLocaleDateString()} +

+ + + ))} +

+ )} + + {showCreateModal && ( +

+ +

+ Create New Project +

+ + Project Name + + setNewName(e.target.value)} + placeholder="e.g., Q1 Campaign Creatives" + className="w-full border border-gray-300 rounded-lg px-3 py-2 text-sm focus:outline-none focus:ring-2 focus:ring-[#ffc407] focus:border-transparent" + autoFocus + onKeyDown={(e) => e.key === "Enter" && handleCreate()} + /> +

+ + Description (optional) + +

setNewDescription(e.target.value)}
+                  placeholder="Brief description of this project..."
+                  rows={3}
+                  className="w-full border border-gray-300 rounded-lg px-3 py-2 text-sm focus:outline-none focus:ring-2 focus:ring-[#ffc407] focus:border-transparent resize-none"
+                />
+              </div>
+              <div className="flex justify-end gap-3">
+                <Button
+                  variant="secondary"
+                  onClick={() => setShowCreateModal(false)}
+                >
+                  Cancel
+                </Button>
+                <Button
+                  onClick={handleCreate}
+                  loading={createProject.isPending}
+                  disabled={!newName.trim()}
+                >
+                  Create
+                </Button>
+              </div>
+            </div>
+          </Card>
+        </div>
+      )}
+    </div>
+  );
+}
diff --git a/frontend/src/pages/Help.tsx b/frontend/src/pages/Help.tsx
new file mode 100644
index 0000000..4ae3e7f
--- /dev/null
+++ b/frontend/src/pages/Help.tsx
@@ -0,0 +1,230 @@
+import Card from "../components/common/Card";
+
+function Section({
+  title,
+  children,
+}: {
+  title: string;
+  children: React.ReactNode;
+}) {
+  return (
+    <Card>
+      <h2
+        className="text-lg font-semibold mb-3"
+        style={{ color: "#1a1a2e" }}
+      >
+        {title}
+      </h2>
+      <div className="text-sm text-gray-600 space-y-2">{children}</div>
+    </Card>
+  );
+}
+
+export default function Help() {
+  return (
+    <div className="max-w-3xl mx-auto space-y-6">
+      <div>
+        <h1 className="text-2xl font-bold" style={{ color: "#1a1a2e" }}>
+          Help & Documentation
+        </h1>
+        <p className="text-gray-500 text-sm mt-1">
+          Learn how to use OliVAS to analyze visual attention in your designs
+        </p>
+      </div>
+
+      <Section title="Getting Started">
+        <p>
+          <strong>1. Create a project</strong> — Projects group related analyses
+          together (e.g., "Summer Campaign 2026"). Go to{" "}
+          <strong>New Analysis</strong> and either pick an existing project or type a
+          new name.
+        </p>
+        <p>
+          <strong>2. Upload an image</strong> — Drag and drop or click to select. Supported
+          formats: PNG, JPEG, TIFF, WebP, BMP. Max file size: 50 MB.
+        </p>
+        <p>
+          <strong>3. Choose a model & analyze</strong> — Select a saliency model
+          (DeepGaze IIE is recommended), optionally name your analysis, and hit
+          <strong> Analyze</strong>. Processing takes 5–30 seconds depending on image size
+          and server hardware.
+        </p>
+        <p>
+          <strong>4. Review results</strong> — Once complete, you'll see the heatmap,
+          gaze sequence, hotspots, and insights. Use the tabs to explore each view.
+        </p>
+      </Section>
+
+      <Section title="Understanding the Heatmap">
+        <p>
+          The heatmap predicts where humans will look during the <strong>first
+          3–5 seconds</strong> of viewing your image. It is generated by a neural network
+          trained on thousands of eye-tracking studies.
+        </p>
+        <p>
+          <strong>Warm colors</strong> (red, yellow) = high predicted attention.{" "}
+          <strong>Cool colors</strong> (blue, purple) = low attention.{" "}
+          <strong>Transparent</strong> areas = negligible attention.
+        </p>
+        <p>
+          Use the <strong>Opacity</strong> slider to blend the heatmap with the original
+          image, and the <strong>Colormap</strong> selector to switch between different
+          color schemes (Jet, Viridis, Inferno, etc.). All adjustments are instant —
+          no server round-trip needed.
+        </p>
+      </Section>
+
+      <Section title="Gaze Sequence">
+        <p>
+          The gaze sequence shows the <strong>predicted order</strong> in which viewers
+          will fixate on different areas. Point #1 is where the eye lands first,
+          #2 is the second fixation, and so on.
+        </p>
+        <p>
+          This is computed using <strong>inhibition-of-return</strong> — after each
+          peak is found, a circular region is suppressed before searching for the
+          next peak, mimicking how human attention naturally moves on after fixating.
+        </p>
+        <p>
+          <strong>Key takeaway:</strong> Place your most important content (brand logo,
+          CTA, headline) where fixation #1 or #2 lands.
+        </p>
+      </Section>
+
+      <Section title="Hotspots">
+        <p>
+          Hotspots are the top 5 regions ranked by predicted attention intensity.
+          Each hotspot shows:
+        </p>
+        <ul className="list-disc pl-5 space-y-1">
+          <li><strong>Rank</strong> — higher rank = more attention</li>
+          <li><strong>Position</strong> — (x, y) center coordinates in pixels</li>
+          <li><strong>Intensity</strong> — saliency value at the peak (0–100%)</li>
+        </ul>
+        <p>
+          The hotspot image shows the heatmap overlay so you can see which areas
+          correspond to each ranked region.
+        </p>
+      </Section>
+
+      <Section title="Attention Score">
+        <p>
+          The overall <strong>Attention Score</strong> (0–100) measures how{" "}
+          <strong>concentrated</strong> the predicted attention is:
+        </p>
+        <ul className="list-disc pl-5 space-y-1">
+          <li><strong>High score (60+)</strong> — attention is focused on specific areas, strong visual hierarchy</li>
+          <li><strong>Medium score (30–60)</strong> — moderate spread, multiple areas compete for attention</li>
+          <li><strong>Low score (<30)</strong> — attention is diffuse, no clear focal point</li>
+        </ul>
+        <p>
+          A high score isn't always "better" — it depends on your design goal. A product
+          ad typically wants focused attention, while an infographic may intentionally
+          spread attention across many elements.
+        </p>
+      </Section>
+
+      <Section title="Areas of Interest (AOI)">
+        <p>
+          Draw rectangles over specific regions of your design to measure how much
+          predicted attention each region captures.
+        </p>
+        <p>
+          For each AOI, three metrics are computed:
+        </p>
+        <ul className="list-disc pl-5 space-y-1">
+          <li><strong>Attention %</strong> — what fraction of total saliency falls within this region</li>
+          <li><strong>Area %</strong> — what fraction of the total image area this region occupies</li>
+          <li>
+            <strong>Attention Density</strong> — attention % divided by area %. A density{" "}
+            <strong>> 1.0</strong> means the region captures <em>more</em> attention
+            than its size would suggest — it punches above its weight.
+          </li>
+        </ul>
+      </Section>
+
+      <Section title="Saliency Models">
+        <p>OliVAS offers three saliency prediction models from the DeepGaze family:</p>
+        <div className="mt-2 space-y-3">
+          <div className="bg-gray-50 rounded-lg p-3 border border-gray-200">
+            <p className="font-semibold text-gray-800">DeepGaze IIE (recommended)</p>
+            <p className="text-xs mt-1">
+              Gold standard for saliency prediction. Uses a ResNet + DenseNet ensemble
+              backbone. Best accuracy on standard benchmarks (MIT/CAT2000). Recommended
+              for most use cases.
+            </p>
+          </div>
+          <div className="bg-gray-50 rounded-lg p-3 border border-gray-200">
+            <p className="font-semibold text-gray-800">DeepGaze III</p>
+            <p className="text-xs mt-1">
+              Latest model in the DeepGaze series. Uses a transformer-based architecture.
+              Can capture longer-range spatial dependencies. Good for complex layouts
+              with many elements.
+            </p>
+          </div>
+          <div className="bg-gray-50 rounded-lg p-3 border border-gray-200">
+            <p className="font-semibold text-gray-800">DeepGaze I</p>
+            <p className="text-xs mt-1">
+              The original DeepGaze model. Lightweight and fast. Good for quick
+              preliminary analysis or when processing many images. Less accurate than
+              IIE and III on complex designs.
+            </p>
+          </div>
+        </div>
+      </Section>
+
+      <Section title="PDF Reports">
+        <p>
+          Click <strong>Download PDF</strong> on any completed analysis to generate a
+          professional report. The report includes:
+        </p>
+        <ul className="list-disc pl-5 space-y-1">
+          <li>Cover page with analysis metadata</li>
+          <li>Heatmap overlay visualization</li>
+          <li>Gaze sequence with fixation table</li>
+          <li>AOI results (if any regions are defined)</li>
+        </ul>
+        <p>
+          Reports are cached — downloading the same analysis again is instant.
+        </p>
+      </Section>
+
+      <Section title="FAQ">
+        <div className="space-y-3">
+          <div>
+            <p className="font-semibold text-gray-800">What image formats are supported?</p>
+            <p>PNG, JPEG, TIFF, WebP, and BMP. Max file size is 50 MB.</p>
+          </div>
+          <div>
+            <p className="font-semibold text-gray-800">How accurate are the predictions?</p>
+            <p>
+              DeepGaze models are trained on thousands of real eye-tracking experiments and
+              are among the top-performing models on academic benchmarks. However, predictions
+              are for the <em>first 3–5 seconds</em> of free viewing — they don't account
+              for task-specific viewing, reading order, or cultural differences.
+            </p>
+          </div>
+          <div>
+            <p className="font-semibold text-gray-800">Does it work with text-heavy designs?</p>
+            <p>
+              Saliency models predict <em>bottom-up</em> visual attention (contrast, faces,
+              objects) rather than reading behavior. For text-heavy layouts, combine OliVAS
+              results with readability and layout best practices.
+            </p>
+          </div>
+          <div>
+            <p className="font-semibold text-gray-800">Can I compare two designs?</p>
+            <p>
+              Yes — upload both design variants to the same project, run analyses on each,
+              and use the Comparison view to see them side by side with metrics.
+            </p>
+          </div>
+        </div>
+      </Section>
+
+      <div className="text-center py-6 text-xs text-gray-400">
+        OliVAS — Open-Source Visual Attention Software by OLIVER
+      </div>
+    </div>
+  );
+}
diff --git a/frontend/src/pages/NewAnalysis.tsx b/frontend/src/pages/NewAnalysis.tsx
new file mode 100644
index 0000000..a049b70
--- /dev/null
+++ b/frontend/src/pages/NewAnalysis.tsx
@@ -0,0 +1,338 @@
+import { useState, useEffect } from "react";
+import { useNavigate } from "react-router-dom";
+import { useProjects, useCreateProject } from "../hooks/useProjects";
+import { useUpload } from "../hooks/useUpload";
+import { useAnalysisStatus } from "../hooks/useAnalysis";
+import DropZone from "../components/upload/DropZone";
+import UploadPreview from "../components/upload/UploadPreview";
+import Card from "../components/common/Card";
+import Button from "../components/common/Button";
+import LoadingSpinner from "../components/common/LoadingSpinner";
+
+type Step = "project" | "upload" | "configure" | "processing";
+
+const MODELS = [
+  { value: "deepgaze_iie", label: "DeepGaze IIE (recommended)", desc: "Best accuracy — ResNet + DenseNet ensemble" },
+  { value: "deepgaze_iii", label: "DeepGaze III", desc: "Latest version — transformer-based architecture" },
+  { value: "deepgaze_i", label: "DeepGaze I", desc: "Lightweight classic model — fastest inference" },
+];
+
+export default function NewAnalysis() {
+  const navigate = useNavigate();
+  const { data: projectsData, isLoading: loadingProjects } = useProjects();
+  const createProject = useCreateProject();
+
+  const [step, setStep] = useState<Step>("project");
+  const [selectedProjectId, setSelectedProjectId] = useState<string>("");
+  const [newProjectName, setNewProjectName] = useState("");
+  const [selectedFile, setSelectedFile] = useState<File | null>(null);
+  const [analysisName, setAnalysisName] = useState("");
+  const [selectedModel, setSelectedModel] = useState("deepgaze_iie");
+  const [createdAnalysisId, setCreatedAnalysisId] = useState<string | null>(null);
+
+  const { upload, isUploading, progress, error: uploadError } = useUpload({
+    onSuccess: (analysis) => {
+      setCreatedAnalysisId(analysis.id);
+      setStep("processing");
+    },
+  });
+
+  const { data: statusData } = useAnalysisStatus(
+    createdAnalysisId ?? undefined,
+    step === "processing",
+  );
+
+  useEffect(() => {
+    if (statusData?.status === "completed" && createdAnalysisId) {
+      navigate(`/analyze/${createdAnalysisId}`);
+    }
+  }, [statusData, createdAnalysisId, navigate]);
+
+  const handleProjectNext = async () => {
+    if (!selectedProjectId && newProjectName.trim()) {
+      const project = await createProject.mutateAsync({
+        name: newProjectName.trim(),
+      });
+      setSelectedProjectId(project.id);
+    }
+    if (selectedProjectId || newProjectName.trim()) {
+      setStep("upload");
+    }
+  };
+
+  const handleUploadNext = () => {
+    if (selectedFile) {
+      setStep("configure");
+    }
+  };
+
+  const handleAnalyze = () => {
+    if (!selectedFile || !selectedProjectId) return;
+    upload({
+      projectId: selectedProjectId,
+      file: selectedFile,
+      name: analysisName || undefined,
+      model: selectedModel,
+    });
+  };
+
+  const projects = projectsData || [];
+
+  return (
+    <div className="max-w-2xl mx-auto space-y-6">
+      <div>
+        <h1 className="text-2xl font-bold" style={{ color: "#1a1a2e" }}>
+          New Analysis
+        </h1>
+        <p className="text-gray-500 text-sm mt-1">
+          Upload an image to analyze visual attention patterns
+        </p>
+      </div>
+
+      {/* Step indicators */}
+      <div className="flex items-center gap-2 text-sm">
+        {(["project", "upload", "configure", "processing"] as Step[]).map(
+          (s, i) => (
+            <div key={s} className="flex items-center gap-2">
+              {i > 0 && <div className="w-8 h-px bg-gray-300" />}
+              <span
+                className={`inline-flex items-center justify-center w-7 h-7 rounded-full text-xs font-bold ${
+                  step === s
+                    ? "text-white"
+                    : i <
+                        ["project", "upload", "configure", "processing"].indexOf(step)
+                      ? "bg-[#ffc407]/20 text-[#ffc407]"
+                      : "bg-gray-200 text-gray-400"
+                }`}
+                style={step === s ? { backgroundColor: "#ffc407" } : {}}
+              >
+                {i + 1}
+              </span>
+              <span
+                className={`hidden sm:inline ${
+                  step === s ? "text-gray-800 font-medium" : "text-gray-400"
+                }`}
+              >
+                {s.charAt(0).toUpperCase() + s.slice(1)}
+              </span>
+            </div>
+          ),
+        )}
+      </div>
+
+      {/* Step 1: Select Project */}
+      {step === "project" && (
+        <Card>
+          <h2
+            className="text-lg font-semibold mb-4"
+            style={{ color: "#1a1a2e" }}
+          >
+            Select or Create a Project
+          </h2>
+          {loadingProjects ? (
+            <LoadingSpinner size="sm" />
+          ) : (
+            <div className="space-y-4">
+              {projects.length > 0 && (
+                <div>
+                  <label className="block text-sm font-medium text-gray-700 mb-1">
+                    Existing Project
+                  </label>
+                  <select
+                    value={selectedProjectId}
+                    onChange={(e) => {
+                      setSelectedProjectId(e.target.value);
+                      setNewProjectName("");
+                    }}
+                    className="w-full border border-gray-300 rounded-lg px-3 py-2 text-sm focus:outline-none focus:ring-2 focus:ring-[#ffc407] focus:border-transparent"
+                  >
+                    <option value="">-- Select a project --</option>
+                    {projects.map((p) => (
+                      <option key={p.id} value={p.id}>
+                        {p.name}
+                      </option>
+                    ))}
+                  </select>
+                </div>
+              )}
+              <div className="flex items-center gap-3">
+                <div className="h-px flex-1 bg-gray-200" />
+                <span className="text-xs text-gray-400">or create new</span>
+                <div className="h-px flex-1 bg-gray-200" />
+              </div>
+              <div>
+                <label className="block text-sm font-medium text-gray-700 mb-1">
+                  New Project Name
+                </label>
+                <input
+                  type="text"
+                  value={newProjectName}
+                  onChange={(e) => {
+                    setNewProjectName(e.target.value);
+                    setSelectedProjectId("");
+                  }}
+                  placeholder="e.g., Summer Campaign 2026"
+                  className="w-full border border-gray-300 rounded-lg px-3 py-2 text-sm focus:outline-none focus:ring-2 focus:ring-[#ffc407] focus:border-transparent"
+                />
+              </div>
+              <div className="flex justify-end">
+                <Button
+                  onClick={handleProjectNext}
+                  disabled={
+                    !selectedProjectId && !newProjectName.trim()
+                  }
+                  loading={createProject.isPending}
+                >
+                  Next
+                </Button>
+              </div>
+            </div>
+          )}
+        </Card>
+      )}
+
+      {/* Step 2: Upload Image */}
+      {step === "upload" && (
+        <Card>
+          <h2
+            className="text-lg font-semibold mb-4"
+            style={{ color: "#1a1a2e" }}
+          >
+            Upload Image
+          </h2>
+          <div className="space-y-4">
+            <DropZone
+              onFileSelected={(file) => setSelectedFile(file)}
+            />
+            {selectedFile && <UploadPreview file={selectedFile} />}
+            <div className="flex justify-between">
+              <Button variant="secondary" onClick={() => setStep("project")}>
+                Back
+              </Button>
+              <Button
+                onClick={handleUploadNext}
+                disabled={!selectedFile}
+              >
+                Next
+              </Button>
+            </div>
+          </div>
+        </Card>
+      )}
+
+      {/* Step 3: Configure */}
+      {step === "configure" && (
+        <Card>
+          <h2
+            className="text-lg font-semibold mb-4"
+            style={{ color: "#1a1a2e" }}
+          >
+            Configure Analysis
+          </h2>
+          <div className="space-y-4">
+            <div>
+              <label className="block text-sm font-medium text-gray-700 mb-1">
+                Analysis Name (optional)
+              </label>
+              <input
+                type="text"
+                value={analysisName}
+                onChange={(e) => setAnalysisName(e.target.value)}
+                placeholder={selectedFile?.name || "My Analysis"}
+                className="w-full border border-gray-300 rounded-lg px-3 py-2 text-sm focus:outline-none focus:ring-2 focus:ring-[#ffc407] focus:border-transparent"
+              />
+            </div>
+            <div>
+              <label className="block text-sm font-medium text-gray-700 mb-1">
+                Saliency Model
+              </label>
+              <select
+                value={selectedModel}
+                onChange={(e) => setSelectedModel(e.target.value)}
+                className="w-full border border-gray-300 rounded-lg px-3 py-2 text-sm focus:outline-none focus:ring-2 focus:ring-[#ffc407] focus:border-transparent"
+              >
+                {MODELS.map((m) => (
+                  <option key={m.value} value={m.value}>
+                    {m.label}
+                  </option>
+                ))}
+              </select>
+              <p className="text-xs text-gray-400 mt-1">
+                {MODELS.find((m) => m.value === selectedModel)?.desc}
+              </p>
+            </div>
+
+            {uploadError && (
+              <p className="text-sm text-red-500">
+                Upload failed: {uploadError.message}
+              </p>
+            )}
+
+            <div className="flex justify-between">
+              <Button variant="secondary" onClick={() => setStep("upload")}>
+                Back
+              </Button>
+              <Button onClick={handleAnalyze} loading={isUploading}>
+                Analyze
+              </Button>
+            </div>
+          </div>
+        </Card>
+      )}
+
+      {/* Step 4: Processing */}
+      {step === "processing" && (
+        <Card className="text-center py-8">
+          <LoadingSpinner size="lg" message="Analyzing your image..." />
+          {statusData && (
+            <div className="mt-4 space-y-2">
+              <p className="text-sm text-gray-600 capitalize">
+                Status: {statusData.status}
+              </p>
+              {statusData.progress !== undefined && (
+                <div className="w-64 mx-auto bg-gray-200 rounded-full h-2">
+                  <div
+                    className="h-2 rounded-full transition-all duration-500"
+                    style={{
+                      width: `${statusData.progress}%`,
+                      backgroundColor: "#ffc407",
+                    }}
+                  />
+                </div>
+              )}
+              {statusData.message && (
+                <p className="text-xs text-gray-400">{statusData.message}</p>
+              )}
+              {statusData.status === "failed" && (
+                <div className="mt-4">
+                  <p className="text-sm text-red-500 mb-3">
+                    Analysis failed. Please try again.
+                  </p>
+                  <Button onClick={() => setStep("configure")}>
+                    Try Again
+                  </Button>
+                </div>
+              )}
+            </div>
+          )}
+          {isUploading && (
+            <div className="mt-4">
+              <div className="w-64 mx-auto bg-gray-200 rounded-full h-2">
+                <div
+                  className="h-2 rounded-full transition-all duration-300"
+                  style={{
+                    width: `${progress}%`,
+                    backgroundColor: "#ffc407",
+                  }}
+                />
+              </div>
+              <p className="text-xs text-gray-400 mt-1">
+                Uploading... {progress}%
+              </p>
+            </div>
+          )}
+        </Card>
+      )}
+    </div>
+  );
+}
diff --git a/frontend/src/pages/ProjectDetail.tsx b/frontend/src/pages/ProjectDetail.tsx
new file mode 100644
index 0000000..70359f8
--- /dev/null
+++ b/frontend/src/pages/ProjectDetail.tsx
@@ -0,0 +1,154 @@
+import { useParams, Link, useNavigate } from "react-router-dom";
+import { useProject, useDeleteProject } from "../hooks/useProjects";
+import { getAnalysisImageUrl } from "../api/analysis";
+import Card from "../components/common/Card";
+import Button from "../components/common/Button";
+import LoadingSpinner from "../components/common/LoadingSpinner";
+
+export default function ProjectDetail() {
+  const { projectId } = useParams<{ projectId: string }>();
+  const navigate = useNavigate();
+  const { data: project, isLoading, error } = useProject(projectId);
+  const deleteProject = useDeleteProject();
+
+  const handleDelete = async () => {
+    if (!projectId) return;
+    if (!window.confirm("Are you sure you want to delete this project and all its analyses?")) return;
+    await deleteProject.mutateAsync(projectId);
+    navigate("/");
+  };
+
+  if (isLoading) {
+    return <LoadingSpinner size="lg" message="Loading project..." />;
+  }
+
+  if (error || !project) {
+    return (
+      <div className="text-center py-12">
+        <p className="text-red-500 mb-4">Failed to load project.</p>
+        <Button variant="secondary" onClick={() => navigate("/")}>
+          Back to Dashboard
+        </Button>
+      </div>
+    );
+  }
+
+  const analyses = project.analyses || [];
+
+  return (
+    <div className="max-w-6xl mx-auto space-y-6">
+      <div className="flex flex-col sm:flex-row sm:items-start justify-between gap-4">
+        <div>
+          <div className="flex items-center gap-3 mb-1">
+            <Link to="/" className="text-gray-400 hover:text-gray-600 text-sm">
+              Dashboard
+            </Link>
+            <span className="text-gray-300">/</span>
+          </div>
+          <h1 className="text-2xl font-bold" style={{ color: "#1a1a2e" }}>
+            {project.name}
+          </h1>
+          {project.description && (
+            <p className="text-gray-500 text-sm mt-1">
+              {project.description}
+            </p>
+          )}
+          <p className="text-xs text-gray-400 mt-2">
+            Created {new Date(project.created_at).toLocaleDateString()} --{" "}
+            {analyses.length} {analyses.length === 1 ? "analysis" : "analyses"}
+          </p>
+        </div>
+        <div className="flex items-center gap-3">
+          <Link to={`/analyze?project=${projectId}`}>
+            <Button>New Analysis</Button>
+          </Link>
+          {analyses.length >= 2 && (
+            <Button variant="secondary" onClick={() => navigate(`/compare/${projectId}`)}>
+              Compare
+            </Button>
+          )}
+          <Button variant="danger" onClick={handleDelete} loading={deleteProject.isPending}>
+            Delete
+          </Button>
+        </div>
+      </div>
+
+      {analyses.length === 0 ? (
+        <Card className="text-center py-12">
+          <svg
+            className="w-12 h-12 text-gray-300 mx-auto mb-3"
+            fill="none"
+            stroke="currentColor"
+            viewBox="0 0 24 24"
+          >
+            <path
+              strokeLinecap="round"
+              strokeLinejoin="round"
+              strokeWidth={1.5}
+              d="M4 16l4.586-4.586a2 2 0 012.828 0L16 16m-2-2l1.586-1.586a2 2 0 012.828 0L20 14m-6-6h.01M6 20h12a2 2 0 002-2V6a2 2 0 00-2-2H6a2 2 0 00-2 2v12a2 2 0 002 2z"
+            />
+          </svg>
+          <h3 className="text-lg font-medium text-gray-600 mb-2">
+            No analyses yet
+          </h3>
+          <p className="text-gray-400 mb-4">
+            Upload an image to get started with visual attention analysis.
+          </p>
+          <Link to={`/analyze?project=${projectId}`}>
+            <Button>Run First Analysis</Button>
+          </Link>
+        </Card>
+      ) : (
+        <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-4">
+          {analyses.map((analysis) => (
+            <Link key={analysis.id} to={`/analyze/${analysis.id}`}>
+              <Card
+                padding={false}
+                className="hover:shadow-md transition-shadow cursor-pointer overflow-hidden"
+              >
+                <div className="aspect-video bg-gray-100 relative">
+                  <img
+                    src={
+                      analysis.thumbnail_url ||
+                      getAnalysisImageUrl(analysis.id, "heatmap")
+                    }
+                    alt={analysis.name}
+                    className="w-full h-full object-cover"
+                    onError={(e) => {
+                      (e.target as HTMLImageElement).style.display = "none";
+                    }}
+                  />
+                  <span
+                    className={`absolute top-2 right-2 text-xs px-2 py-0.5 rounded-full font-medium ${
+                      analysis.status === "completed"
+                        ? "bg-green-100 text-green-700"
+                        : analysis.status === "failed"
+                          ? "bg-red-100 text-red-700"
+                          : "bg-yellow-100 text-yellow-700"
+                    }`}
+                  >
+                    {analysis.status}
+                  </span>
+                </div>
+                <div className="p-4">
+                  <h3
+                    className="font-medium truncate"
+                    style={{ color: "#1a1a2e" }}
+                  >
+                    {analysis.name}
+                  </h3>
+                  <div className="flex items-center justify-between mt-1 text-xs text-gray-400">
+                    <span>{analysis.model}</span>
+                    <span>
+                      {new Date(analysis.created_at).toLocaleDateString()}
+                    </span>
+                  </div>
+                </div>
+              </Card>
+            </Link>
+          ))}
+        </div>
+      )}
+    </div>
+  );
+}
diff --git a/frontend/src/stores/analysisStore.ts b/frontend/src/stores/analysisStore.ts
new file mode 100644
index 0000000..bb308dc
--- /dev/null
+++ b/frontend/src/stores/analysisStore.ts
@@ -0,0 +1,97 @@
+import { create } from "zustand";
+import type { AnalysisDetail, AOIResult } from "../types/analysis";
+import type { AOIRectangle } from "../types/aoi";
+
+export type AnalysisTab = "heatmap" | "gaze" | "hotspots" | "aoi";
+
+interface HeatmapSettings {
+  opacity: number;
+  colormap: string;
+  visible: boolean;
+}
+
+interface AnalysisState {
+  currentAnalysis: AnalysisDetail | null;
+  heatmapSettings: HeatmapSettings;
+  activeTab: AnalysisTab;
+  zoom: number;
+  aoiRegions: AOIRectangle[];
+  aoiResults: AOIResult[];
+
+  setCurrentAnalysis: (analysis: AnalysisDetail | null) => void;
+  setHeatmapOpacity: (opacity: number) => void;
+  setHeatmapColormap: (colormap: string) => void;
+  setHeatmapVisible: (visible: boolean) => void;
+  setActiveTab: (tab: AnalysisTab) => void;
+  setZoom: (zoom: number) => void;
+  setAoiRegions: (regions: AOIRectangle[]) => void;
+  addAoiRegion: (region: AOIRectangle) => void;
+  updateAoiRegion: (id: string, updates: Partial<AOIRectangle>) => void;
+  removeAoiRegion: (id: string) => void;
+  setAoiResults: (results: AOIResult[]) => void;
+  reset: () => void;
+}
+
+const initialHeatmapSettings: HeatmapSettings = {
+  opacity: 0.6,
+  colormap: "jet",
+  visible: true,
+};
+
+export const useAnalysisStore = create<AnalysisState>((set) => ({
+  currentAnalysis: null,
+  heatmapSettings: { ...initialHeatmapSettings },
+  activeTab: "heatmap",
+  zoom: 1,
+  aoiRegions: [],
+  aoiResults: [],
+
+  setCurrentAnalysis: (analysis) => set({ currentAnalysis: analysis }),
+
+  setHeatmapOpacity: (opacity) =>
+    set((state) => ({
+      heatmapSettings: { ...state.heatmapSettings, opacity },
+    })),
+
+  setHeatmapColormap: (colormap) =>
+    set((state) => ({
+      heatmapSettings: { ...state.heatmapSettings, colormap },
+    })),
+
+  setHeatmapVisible: (visible) =>
+    set((state) => ({
+      heatmapSettings: { ...state.heatmapSettings, visible },
+    })),
+
+  setActiveTab: (tab) => set({ activeTab: tab }),
+  setZoom: (zoom) => set({ zoom }),
+
+  setAoiRegions: (regions) => set({ aoiRegions: regions }),
+
+  addAoiRegion: (region) =>
+    set((state) => ({ aoiRegions: [...state.aoiRegions, region] })),
+
+  updateAoiRegion: (id, updates) =>
+    set((state) => ({
+      aoiRegions: state.aoiRegions.map((r) =>
+        r.id === id ? { ...r, ...updates } : r,
+      ),
+    })),
+
+  removeAoiRegion: (id) =>
+    set((state) => ({
+      aoiRegions: state.aoiRegions.filter((r) => r.id !== id),
+    })),
+
+  setAoiResults: (results) => set({ aoiResults: results }),
+
+  reset: () =>
+    set({
+      currentAnalysis: null,
+      heatmapSettings: { ...initialHeatmapSettings },
+      activeTab: "heatmap",
+      zoom: 1,
+      aoiRegions: [],
+      aoiResults: [],
+    }),
+}));
diff --git a/frontend/src/stores/uiStore.ts b/frontend/src/stores/uiStore.ts
new file mode 100644
index 0000000..c755319
--- /dev/null
+++ b/frontend/src/stores/uiStore.ts
@@ -0,0 +1,23 @@
+import { create } from "zustand";
+
+interface UIState {
+  sidebarOpen: boolean;
+  globalLoading: boolean;
+  uploadProgress: number;
+
+  toggleSidebar: () => void;
+  setSidebarOpen: (open: boolean) => void;
+  setGlobalLoading: (loading: boolean) => void;
+  setUploadProgress: (progress: number) => void;
+}
+
+export const useUIStore = create<UIState>((set) => ({
+  sidebarOpen: true,
+  globalLoading: false,
+  uploadProgress: 0,
+
+  toggleSidebar: () => set((state) => ({ sidebarOpen: !state.sidebarOpen })),
+  setSidebarOpen: (open) => set({ sidebarOpen: open }),
+  setGlobalLoading: (loading) => set({ globalLoading: loading }),
+  setUploadProgress: (progress) => set({ uploadProgress: progress }),
+}));
diff --git a/frontend/src/types/analysis.ts b/frontend/src/types/analysis.ts
new file mode 100644
index 0000000..1b298fd
--- /dev/null
+++ b/frontend/src/types/analysis.ts
@@ -0,0 +1,81 @@
+export interface Analysis {
+  id: string;
+  project_id: string;
+  name: string;
+  model: string;
+  status: "pending" | "processing" | "completed" | "failed";
+  created_at: string;
+  updated_at: string;
+  thumbnail_url?: string;
+}
+
+export interface GazePoint {
+  rank: number;
+  x: number;
+  y: number;
+  intensity: number;
+  duration_ms?: number;
+}
+
+export interface Hotspot {
+  rank: number;
+  x: number;
+  y: number;
+  center_x?: number;
+  center_y?: number;
+  width?: number;
+  height?: number;
+  radius?: number;
+  intensity: number;
+  label?: string;
+}
+
+export interface Insight {
+  type: "info" | "success" | "warning";
+  title: string;
+  description: string;
+}
+
+export interface AnalysisDetail extends Analysis {
+  image_width: number;
+  image_height: number;
+  file_format?: string;
+  model_used?: string;
+  original_filename?: string;
+  overall_score?: number;
+  gaze_points?: GazePoint[];
+  gaze_sequence?: any[];
+  hotspots: Hotspot[];
+  insights?: Insight[];
+  ai_insights?: Insight[];
+  ai_cost_usd?: number;
+  processing_time_ms?: number;
+  error_message?: string;
+}
+
+export interface AnalysisStatus {
+  id: string;
+  status: "pending" | "processing" | "completed" | "failed";
+  progress?: number;
+  message?: string;
+}
+
+export interface AOIRegion {
+  label: string;
+  x: number;
+  y: number;
+  width: number;
+  height: number;
+}
+
+export interface AOIResult {
+  id?: string;
+  label: string;
+  x: number;
+  y: number;
+  width: number;
+  height: number;
+  attention_percent: number;
+  area_percent: number;
+  density: number;
+}
diff --git a/frontend/src/types/aoi.ts b/frontend/src/types/aoi.ts
new file mode 100644
index 0000000..afc3943
--- /dev/null
+++ b/frontend/src/types/aoi.ts
@@ -0,0 +1,19 @@
+export type { AOIRegion, AOIResult } from "./analysis";
+
+export interface AOIDrawingState {
+  isDrawing: boolean;
+  startX: number;
+  startY: number;
+  currentX: number;
+  currentY: number;
+}
+
+export interface AOIRectangle {
+  id: string;
+  label: string;
+  x: number;
+  y: number;
+  width: number;
+  height: number;
+  color: string;
+}
diff --git a/frontend/src/types/project.ts b/frontend/src/types/project.ts
new file mode 100644
index 0000000..d39be39
--- /dev/null
+++ b/frontend/src/types/project.ts
@@ -0,0 +1,19 @@
+import type { Analysis } from "./analysis";
+
+export interface Project {
+  id: string;
+  name: string;
+  description?: string;
+  analysis_count: number;
+  created_at: string;
+  updated_at: string;
+}
+
+export interface ProjectDetail extends Project {
+  analyses: Analysis[];
+}
+
+export interface ProjectCreate {
+  name: string;
+  description?: string;
+}
diff --git a/frontend/tsconfig.app.json b/frontend/tsconfig.app.json
new file mode 100644
index 0000000..a9b5a59
--- /dev/null
+++ b/frontend/tsconfig.app.json
@@ -0,0 +1,28 @@
+{
+  "compilerOptions": {
+    "tsBuildInfoFile": "./node_modules/.tmp/tsconfig.app.tsbuildinfo",
+    "target": "ES2022",
+    "useDefineForClassFields": true,
+    "lib": ["ES2022", "DOM", "DOM.Iterable"],
+    "module": "ESNext",
+    "types": ["vite/client"],
+    "skipLibCheck": true,
+
+    /* Bundler mode */
+    "moduleResolution": "bundler",
+    "allowImportingTsExtensions": true,
+    "verbatimModuleSyntax": true,
+    "moduleDetection": "force",
+    "noEmit": true,
+    "jsx": "react-jsx",
+
+    /* Linting */
+    "strict": true,
+    "noUnusedLocals": true,
+    "noUnusedParameters": true,
+    "erasableSyntaxOnly": true,
+    "noFallthroughCasesInSwitch": true,
+    "noUncheckedSideEffectImports": true
+  },
+  "include": ["src"]
+}
diff --git a/frontend/tsconfig.json b/frontend/tsconfig.json
new file mode 100644
index 0000000..1ffef60
--- /dev/null
+++ b/frontend/tsconfig.json
@@ -0,0 +1,7 @@
+{
+  "files": [],
+  "references": [
+    { "path": "./tsconfig.app.json" },
+    { "path": "./tsconfig.node.json" }
+  ]
+}
diff --git a/frontend/tsconfig.node.json b/frontend/tsconfig.node.json
new file mode 100644
index 0000000..8a67f62
--- /dev/null
+++ b/frontend/tsconfig.node.json
@@ -0,0 +1,26 @@
+{
+  "compilerOptions": {
+    "tsBuildInfoFile": "./node_modules/.tmp/tsconfig.node.tsbuildinfo",
+    "target": "ES2023",
+    "lib": ["ES2023"],
+    "module": "ESNext",
+    "types": ["node"],
+    "skipLibCheck": true,
+
+    /* Bundler mode */
+    "moduleResolution": "bundler",
+    "allowImportingTsExtensions": true,
+    "verbatimModuleSyntax": true,
+    "moduleDetection": "force",
+    "noEmit": true,
+
+    /* Linting */
+    "strict": true,
+    "noUnusedLocals": true,
+    "noUnusedParameters": true,
+    "erasableSyntaxOnly": true,
+    "noFallthroughCasesInSwitch": true,
+    "noUncheckedSideEffectImports": true
+  },
+  "include": ["vite.config.ts"]
+}
diff --git a/frontend/vite.config.ts b/frontend/vite.config.ts
new file mode 100644
index 0000000..10f1df7
--- /dev/null
+++ b/frontend/vite.config.ts
@@ -0,0 +1,16 @@
+import { defineConfig } from 'vite'
+import react from '@vitejs/plugin-react'
+import tailwindcss from '@tailwindcss/vite'
+
+export default defineConfig({
+  plugins: [react(), tailwindcss()],
+  server: {
+    port: 1577,
+    proxy: {
+      '/api': {
+        target: 'http://localhost:8000',
+        changeOrigin: true,
+      },
+    },
+  },
+})

+ Predicted Gaze Sequence +

+ Heatmap Controls +

+ Top Attention Hotspots +

+ Analysis Insights +

+ AI Design Analysis +

+ Defined Regions +

+ AOI Analysis Results +

+ {title} +

+ The Science Behind Oli + VAS +

DeepGaze IIE

DeepGaze III

DeepGaze I

+ {analysis.name} +

+ Compare Analyses +

+ Select analyses to compare: +

+ {analysis.name} +

+ Comparison Metrics +

+ Dashboard +

+ No projects yet +

+ {project.name} +

+ Create New Project +