File size: 1,919 Bytes
065d164 |
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 |
import Head from 'next/head';
import dynamic from 'next/dynamic';
import { Inter } from 'next/font/google';
// Import the HandDetector component with dynamic import to avoid SSR issues
const HandDetector = dynamic(() => import('../components/HandDetector'), {
ssr: false
});
const inter = Inter({ subsets: ['latin'] });
const Header = () => {
return (
<div className="fixed 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" />
<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 min-h-screen flex-col items-center justify-center p-4 bg-white font-['Google_Sans',sans-serif] pt-20">
<HandDetector />
</main>
</>
);
}
|