FaceSearch — Frontend

A multi-page marketing site and search console for an AI face-search engine (YuNet + SFace detection/embedding, Faiss vector index, FastAPI backend).

Visual language: soft-white canvas, frosted "liquid glass" panels, large type, floating translucent objects — inspired by visionOS / Apple.com / Linear / Arc.

Pages

Route	Purpose
/	Marketing landing page (hero, live demo card, features, pricing)
/search	Working search console — upload a photo or paste a URL
/developers	API reference: endpoints, request/response shapes, SDK snippets
/company	Mission, technology, team, privacy

Backend contract

The frontend talks to a FastAPI service via lib/api.ts:

GET    /ping            -> { status: "ok", indexed_faces_count: number }
POST   /search           (multipart: file)         -> SearchResponse
POST   /add               (multipart: name, file)   -> AddResponse
DELETE /remove/{id}                                  -> RemoveResponse

SearchResponse is one of:

{ status: "found"; name: string; confidence: number }
{ status: "no_face" }
{ status: "not_found" }

Getting started

npm install
cp .env.example .env.local   # point NEXT_PUBLIC_API_BASE_URL at your backend
npm run dev

Open http://localhost:3000. The FastAPI backend needs CORS enabled for the frontend's origin, e.g.:

from fastapi.middleware.cors import CORSMiddleware

app.add_middleware(
    CORSMiddleware,
    allow_origins=["http://localhost:3000"],
    allow_methods=["*"],
    allow_headers=["*"],
)

Structure

app/
  layout.tsx           root layout, fonts, Navbar/Footer
  page.tsx              landing page
  search/page.tsx        search console
  developers/page.tsx     API docs
  company/page.tsx        about/mission/team/privacy
components/
  ui/                    button, badge, glass-card primitives
  sections/              landing-page section components
  navbar.tsx, footer.tsx
  floating-scan-orb.tsx  signature visual (SVG + CSS)
  code-block.tsx, endpoint-card.tsx
lib/
  api.ts                 typed client for the FastAPI backend
  utils.ts               cn() class merge helper

Notes

• No stock photography — the "face" imagery is an SVG wireframe scan animation (FloatingScanOrb), not a real face.
• The search page's "paste image URL" flow fetches the image client-side and forwards it to /search as a file, matching the backend's multipart contract.
• Respects prefers-reduced-motion.