| 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> |
| </> |
| ); |
| } |
|
|
