|
import Head from 'next/head'; |
|
import dynamic from 'next/dynamic'; |
|
import { Inter } from 'next/font/google'; |
|
|
|
|
|
const HandDetector = dynamic(() => import('../components/HandDetector'), { |
|
ssr: false |
|
}); |
|
|
|
const inter = Inter({ subsets: ['latin'] }); |
|
|
|
const Header = () => { |
|
return ( |
|
<div className="sticky top-0 left-0 right-0 w-full bg-white p-4 z-50 shadow-sm"> |
|
<div className="w-full flex justify-between items-center text-base max-w-7xl mx-auto"> |
|
<div className="text-gray-500"> |
|
<span className="text-black font-bold text-lg mr-2">HandSpew</span> |
|
Built with <a |
|
href="https://ai.google.dev" |
|
target="_blank" |
|
rel="noopener noreferrer" |
|
className="underline hover:text-gray-800 transition-colors" |
|
> |
|
Gemini 2.0 |
|
</a> + <a |
|
href="https://ai.google.dev/edge/mediapipe/solutions/vision/hand_landmarker" |
|
target="_blank" |
|
rel="noopener noreferrer" |
|
className="underline hover:text-gray-800 transition-colors" |
|
> |
|
MediaPipe |
|
</a> |
|
</div> |
|
</div> |
|
</div> |
|
); |
|
}; |
|
|
|
export default function Home() { |
|
return ( |
|
<> |
|
<Head> |
|
<title>HandSpew</title> |
|
<meta name="description" content="Generate thoughts based on hand gestures using MediaPipe and Gemini" /> |
|
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1" /> |
|
<link rel="icon" href="/favicon.ico" /> |
|
<link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Google+Sans:wght@400;500;700&display=swap" /> |
|
</Head> |
|
<Header /> |
|
<main className="flex flex-col items-center p-4 bg-white font-['Google_Sans',sans-serif] pt-20 overflow-y-auto"> |
|
<HandDetector /> |
|
</main> |
|
</> |
|
); |
|
} |
|
|
