reconfig

.gitattributes

@@ -1,35 +0,0 @@
-*.7z filter=lfs diff=lfs merge=lfs -text
-*.arrow filter=lfs diff=lfs merge=lfs -text
-*.bin filter=lfs diff=lfs merge=lfs -text
-*.bz2 filter=lfs diff=lfs merge=lfs -text
-*.ckpt filter=lfs diff=lfs merge=lfs -text
-*.ftz filter=lfs diff=lfs merge=lfs -text
-*.gz filter=lfs diff=lfs merge=lfs -text
-*.h5 filter=lfs diff=lfs merge=lfs -text
-*.joblib filter=lfs diff=lfs merge=lfs -text
-*.lfs.* filter=lfs diff=lfs merge=lfs -text
-*.mlmodel filter=lfs diff=lfs merge=lfs -text
-*.model filter=lfs diff=lfs merge=lfs -text
-*.msgpack filter=lfs diff=lfs merge=lfs -text
-*.npy filter=lfs diff=lfs merge=lfs -text
-*.npz filter=lfs diff=lfs merge=lfs -text
-*.onnx filter=lfs diff=lfs merge=lfs -text
-*.ot filter=lfs diff=lfs merge=lfs -text
-*.parquet filter=lfs diff=lfs merge=lfs -text
-*.pb filter=lfs diff=lfs merge=lfs -text
-*.pickle filter=lfs diff=lfs merge=lfs -text
-*.pkl filter=lfs diff=lfs merge=lfs -text
-*.pt filter=lfs diff=lfs merge=lfs -text
-*.pth filter=lfs diff=lfs merge=lfs -text
-*.rar filter=lfs diff=lfs merge=lfs -text
-*.safetensors filter=lfs diff=lfs merge=lfs -text
-saved_model/**/* filter=lfs diff=lfs merge=lfs -text
-*.tar.* filter=lfs diff=lfs merge=lfs -text
-*.tar filter=lfs diff=lfs merge=lfs -text
-*.tflite filter=lfs diff=lfs merge=lfs -text
-*.tgz filter=lfs diff=lfs merge=lfs -text
-*.wasm filter=lfs diff=lfs merge=lfs -text
-*.xz filter=lfs diff=lfs merge=lfs -text
-*.zip filter=lfs diff=lfs merge=lfs -text
-*.zst filter=lfs diff=lfs merge=lfs -text
-*tfevents* filter=lfs diff=lfs merge=lfs -text

components/CameraSetup.js

@@ -35,15 +35,19 @@ const CameraSetup = ({
           tracks.forEach(track => track.stop());
         }
         
-        // Get camera stream
-        const stream = await navigator.mediaDevices.getUserMedia({
-          video: { 
+        // Set camera constraints based on device type
+        const constraints = {
+          video: {
             facingMode: facingMode,
-            width: { ideal: 1920 },
-            height: { ideal: 1080 }
+            width: { ideal: isMobile ? 1280 : 1920 },
+            height: { ideal: isMobile ? 720 : 1080 },
+            aspectRatio: isMobile ? { ideal: 4/3 } : undefined // Prefer 4:3 on mobile
           },
           audio: false
-        });
+        };
+        
+        // Get camera stream
+        const stream = await navigator.mediaDevices.getUserMedia(constraints);
         
         // Check if component is still mounted before continuing
         if (!isMounted.current) {
@@ -71,6 +75,9 @@ const CameraSetup = ({
           const videoWidth = videoRef.current.videoWidth;
           const videoHeight = videoRef.current.videoHeight;
           const aspectRatio = videoWidth / videoHeight;
+          
+          console.log(`Camera dimensions: ${videoWidth}x${videoHeight}, aspect ratio: ${aspectRatio}`);
+          
           setVideoAspectRatio(aspectRatio);
           
           // Update canvas size with the correct aspect ratio
@@ -103,7 +110,7 @@ const CameraSetup = ({
         tracks.forEach(track => track.stop());
       }
     };
-  }, [videoRef, canvasRef, containerRef, facingMode, setCameraError, setVideoAspectRatio, updateCanvasSize]);
+  }, [videoRef, canvasRef, containerRef, facingMode, setCameraError, setVideoAspectRatio, updateCanvasSize, isMobile]);
 
   // Function to switch camera
   const switchCamera = async () => {
@@ -126,8 +133,9 @@ const CameraSetup = ({
       const stream = await navigator.mediaDevices.getUserMedia({
         video: { 
           facingMode: newFacingMode,
-          width: { ideal: 1920 },
-          height: { ideal: 1080 }
+          width: { ideal: isMobile ? 1280 : 1920 },
+          height: { ideal: isMobile ? 720 : 1080 },
+          aspectRatio: isMobile ? { ideal: 4/3 } : undefined
         },
         audio: false
       });
@@ -183,7 +191,9 @@ const CameraSetup = ({
           aria-label={`Switch to ${facingMode === 'user' ? 'back' : 'front'} camera`}
         >
           <svg xmlns="http://www.w3.org/2000/svg" className="h-6 w-6 text-gray-800" fill="none" viewBox="0 0 24 24" stroke="currentColor">
-            <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M4 4v5h.582m15.356 2A8.001 8.001 0 004.582 9m0 0H9m11 11v-5h-.581m0 0a8.003 8.003 0 01-15.357-2m15.357 2H15" />
+            <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M3 9a2 2 0 012-2h.93a2 2 0 001.664-.89l.812-1.22A2 2 0 0110.07 4h3.86a2 2 0 011.664.89l.812 1.22A2 2 0 0018.07 7H19a2 2 0 012 2v9a2 2 0 01-2 2H5a2 2 0 01-2-2V9z" />
+            <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M15 13a3 3 0 11-6 0 3 3 0 016 0z" />
+            <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M15 9l-6 6" />
           </svg>
         </button>
       )}

components/HandDetector.js

@@ -12,8 +12,8 @@ const HandDetector = () => {
   const canvasRef = useRef(null);
   const containerRef = useRef(null);
   
-  // Camera state
-  const [facingMode, setFacingMode] = useState('user'); // 'user' for front camera, 'environment' for back camera
+  // Camera state - Set default to 'environment' (back camera) for mobile
+  const [facingMode, setFacingMode] = useState('environment');
   const [cameraError, setCameraError] = useState(false);
   
   // Prompt state
@@ -32,13 +32,6 @@ const HandDetector = () => {
     updateCanvasSize 
   } = useDeviceAndCanvas();
   
-  // Set default camera to back camera on mobile devices
-  useEffect(() => {
-    if (isMobile) {
-      setFacingMode('environment');
-    }
-  }, [isMobile]);
-  
   const {
     handDetected,
     isMouthOpen,

components/MainContent.js

@@ -34,15 +34,13 @@ const MainContent = ({
   createPopParticles
 }) => {
   return (
-    <div className="w-full flex flex-col items-center space-y-2">
-      {/* Conditionally render Prompt Editor based on device */}
-      {!isMobile && (
-        <PromptEditor 
-          customPrompt={customPrompt} 
-          setCustomPrompt={setCustomPrompt} 
-          isMac={isMac} 
-        />
-      )}
+    <>
+      {/* Prompt Editor */}
+      <PromptEditor 
+        customPrompt={customPrompt} 
+        setCustomPrompt={setCustomPrompt} 
+        isMac={isMac} 
+      />
       
       <div ref={containerRef} className="relative w-full max-w-4xl canvas-container">
         {/* Camera Setup */}
@@ -61,8 +59,12 @@ const MainContent = ({
         {/* Canvas for hand detection */}
         <canvas 
           ref={canvasRef} 
-          className="rounded-lg shadow-lg w-full"
-          style={{ height: `${canvasHeight}px` }}
+          className="rounded-lg shadow-lg w-full object-contain"
+          style={{ 
+            height: `${canvasHeight}px`,
+            maxHeight: isMobile ? '70vh' : 'none',
+            objectFit: 'contain'
+          }}
           width={canvasWidth}
           height={canvasHeight}
         />
@@ -92,17 +94,7 @@ const MainContent = ({
           createPopParticles={createPopParticles}
         />
       </div>
-      
-      {/* Render Prompt Editor below camera on mobile */}
-      {isMobile && (
-        <PromptEditor 
-          customPrompt={customPrompt} 
-          setCustomPrompt={setCustomPrompt} 
-          isMac={isMac}
-          isMobile={isMobile}
-        />
-      )}
-    </div>
+    </>
   );
 };
 

components/PromptEditor.js

@@ -1,29 +1,24 @@
 import { useState } from 'react';
 
-const PromptEditor = ({ customPrompt, setCustomPrompt, isMac, isMobile }) => {
+const PromptEditor = ({ customPrompt, setCustomPrompt, isMac }) => {
   const [isEditingPrompt, setIsEditingPrompt] = useState(false);
-  const [isCollapsed, setIsCollapsed] = useState(isMobile); // Collapsed by default on mobile
   const [tempPrompt, setTempPrompt] = useState("");
 
   return (
-    <div className={`w-full max-w-4xl ${isMobile ? 'mt-2 mb-4' : 'mb-4'}`}>
+    <div className="w-full max-w-4xl mb-4">
       <div className="flex justify-between items-center mb-1">
-        <label 
-          htmlFor="system-prompt" 
-          className={`block ${isMobile ? 'text-xs' : 'text-sm'} font-medium text-gray-700 cursor-pointer`}
-          onClick={() => isMobile && setIsCollapsed(!isCollapsed)}
-        >
-          System Prompt {isMobile && (isCollapsed ? '▼' : '▲')}
+        <label htmlFor="system-prompt" className="block text-sm font-medium text-gray-700">
+          System Prompt
         </label>
-        {!isEditingPrompt && !isCollapsed ? (
+        {!isEditingPrompt ? (
           <button
             onClick={() => {
               setTempPrompt(customPrompt);
               setIsEditingPrompt(true);
             }}
-            className={`${isMobile ? 'text-xs' : 'text-sm'} text-blue-600 hover:text-blue-800 flex items-center`}
+            className="text-sm text-blue-600 hover:text-blue-800 flex items-center"
           >
-            <svg xmlns="http://www.w3.org/2000/svg" className={`${isMobile ? 'h-3 w-3' : 'h-4 w-4'} mr-1`} fill="none" viewBox="0 0 24 24" stroke="currentColor">
+            <svg xmlns="http://www.w3.org/2000/svg" className="h-4 w-4 mr-1" fill="none" viewBox="0 0 24 24" stroke="currentColor">
               <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M15.232 5.232l3.536 3.536m-2.036-5.036a2.5 2.5 0 113.536 3.536L6.5 21.036H3v-3.572L16.732 3.732z" />
             </svg>
             Edit
@@ -31,53 +26,49 @@ const PromptEditor = ({ customPrompt, setCustomPrompt, isMac, isMobile }) => {
         ) : null}
       </div>
       
-      {!isCollapsed && (
-        <>
-          {isEditingPrompt ? (
-            <div>
-              <textarea
-                id="system-prompt"
-                value={tempPrompt}
-                onChange={(e) => setTempPrompt(e.target.value)}
-                onKeyDown={(e) => {
-                  // Save on Ctrl+Enter or Cmd+Enter
-                  if ((e.ctrlKey || e.metaKey) && e.key === 'Enter') {
-                    e.preventDefault();
-                    setCustomPrompt(tempPrompt);
-                    setIsEditingPrompt(false);
-                  }
-                }}
-                className={`w-full p-3 border border-gray-300 rounded-lg shadow-sm focus:ring-blue-500 focus:border-blue-500 ${isMobile ? 'text-xs' : 'text-sm'}`}
-                rows={isMobile ? 3 : 4}
-                placeholder="Enter your custom prompt for Gemini..."
-              />
-              <div className="flex justify-end mt-2 space-x-2">
-                <span className={`${isMobile ? 'text-xxs' : 'text-xs'} text-gray-500 self-center mr-auto`}>
-                  Tip: Press {isMac ? '⌘' : 'Ctrl'}+Enter to save
-                </span>
-                <button
-                  onClick={() => setIsEditingPrompt(false)}
-                  className={`px-3 py-1 ${isMobile ? 'text-xs' : 'text-sm'} text-gray-600 border border-gray-300 rounded-md hover:bg-gray-100`}
-                >
-                  Cancel
-                </button>
-                <button
-                  onClick={() => {
-                    setCustomPrompt(tempPrompt);
-                    setIsEditingPrompt(false);
-                  }}
-                  className={`px-3 py-1 ${isMobile ? 'text-xs' : 'text-sm'} text-white bg-blue-600 rounded-md hover:bg-blue-700`}
-                >
-                  Save
-                </button>
-              </div>
-            </div>
-          ) : (
-            <div className={`p-2 bg-gray-50 border border-gray-200 rounded-lg ${isMobile ? 'text-xs' : 'text-sm'} text-gray-800 whitespace-pre-wrap ${isMobile ? 'max-h-20' : 'max-h-32'} overflow-y-auto`}>
-              {customPrompt}
-            </div>
-          )}
-        </>
+      {isEditingPrompt ? (
+        <div>
+          <textarea
+            id="system-prompt"
+            value={tempPrompt}
+            onChange={(e) => setTempPrompt(e.target.value)}
+            onKeyDown={(e) => {
+              // Save on Ctrl+Enter or Cmd+Enter
+              if ((e.ctrlKey || e.metaKey) && e.key === 'Enter') {
+                e.preventDefault();
+                setCustomPrompt(tempPrompt);
+                setIsEditingPrompt(false);
+              }
+            }}
+            className="w-full p-3 border border-gray-300 rounded-lg shadow-sm focus:ring-blue-500 focus:border-blue-500 text-sm"
+            rows={4}
+            placeholder="Enter your custom prompt for Gemini..."
+          />
+          <div className="flex justify-end mt-2 space-x-2">
+            <span className="text-xs text-gray-500 self-center mr-auto">
+              Tip: Press {isMac ? '⌘' : 'Ctrl'}+Enter to save
+            </span>
+            <button
+              onClick={() => setIsEditingPrompt(false)}
+              className="px-3 py-1 text-sm text-gray-600 border border-gray-300 rounded-md hover:bg-gray-100"
+            >
+              Cancel
+            </button>
+            <button
+              onClick={() => {
+                setCustomPrompt(tempPrompt);
+                setIsEditingPrompt(false);
+              }}
+              className="px-3 py-1 text-sm text-white bg-blue-600 rounded-md hover:bg-blue-700"
+            >
+              Save
+            </button>
+          </div>
+        </div>
+      ) : (
+        <div className="p-3 bg-gray-50 border border-gray-200 rounded-lg text-xs md:text-sm text-gray-800 whitespace-pre-wrap">
+          {customPrompt}
+        </div>
       )}
     </div>
   );

hooks/useDeviceAndCanvas.js

@@ -43,21 +43,35 @@ const useDeviceAndCanvas = () => {
     if (!isComponentMounted.current) return;
     
     const containerWidth = document.querySelector('.canvas-container')?.clientWidth || window.innerWidth;
-    // Set maximum width for the canvas - increased for desktop
-    const maxWidth = Math.min(containerWidth, isMobile ? 640 : 960);
-    let height = maxWidth / aspectRatio;
     
-    // Limit height on mobile to ensure system prompt is visible without scrolling
+    // Scale down for mobile devices
+    let maxWidth;
     if (isMobile) {
-      const viewportHeight = window.innerHeight;
-      // Use a fixed height on mobile that's appropriate for most devices
-      // This ensures the camera and prompt are both visible without scrolling
-      const maxMobileHeight = Math.min(viewportHeight * 0.5, 350); // 50% of viewport or 350px max
-      height = Math.min(height, maxMobileHeight);
+      // On mobile, use a smaller canvas size to prevent it from being too tall
+      maxWidth = Math.min(containerWidth, 400);
+      
+      // Ensure we maintain the correct aspect ratio
+      // For mobile, we want to ensure the height isn't too tall
+      // Most phone cameras have aspect ratios around 4:3 or 16:9
+      // If the aspect ratio is very wide or very tall, we'll normalize it
+      let normalizedAspectRatio = aspectRatio;
+      
+      // If aspect ratio is extreme, normalize it to prevent stretching
+      if (aspectRatio < 0.5) normalizedAspectRatio = 0.5; // Very tall
+      if (aspectRatio > 2) normalizedAspectRatio = 2; // Very wide
+      
+      const height = maxWidth / normalizedAspectRatio;
+      
+      setCanvasWidth(maxWidth);
+      setCanvasHeight(height);
+    } else {
+      // On desktop, use a larger canvas size
+      maxWidth = Math.min(containerWidth, 960);
+      const height = maxWidth / aspectRatio;
+      
+      setCanvasWidth(maxWidth);
+      setCanvasHeight(height);
     }
-    
-    setCanvasWidth(maxWidth);
-    setCanvasHeight(height);
   }, [isMobile]);
   
   return {

pages/index.js

@@ -11,7 +11,7 @@ const inter = Inter({ subsets: ['latin'] });
 
 const Header = () => {
   return (
-    <div className="sticky top-0 left-0 right-0 w-full bg-white p-3 z-50 shadow-sm">
+    <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>
@@ -42,15 +42,13 @@ export default function Home() {
       <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" />
+        <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-start p-3 bg-white font-['Google_Sans',sans-serif] pt-16">
-        <div className="w-full max-w-4xl flex flex-col items-center">
-          <HandDetector />
-        </div>
+      <main className="flex min-h-screen flex-col items-center justify-start p-4 bg-white font-['Google_Sans',sans-serif] pt-20 overflow-y-auto">
+        <HandDetector />
       </main>
     </>
   );

styles/globals.css

@@ -18,8 +18,8 @@
 
 html, body {
   height: 100%;
-  width: 100%;
   overflow-x: hidden;
+  overflow-y: auto;
   -webkit-overflow-scrolling: touch;
 }
 
@@ -30,6 +30,27 @@ body {
   position: relative;
 }
 
+/* Canvas container styling */
+.canvas-container {
+  display: flex;
+  justify-content: center;
+  align-items: center;
+}
+
+.canvas-container canvas {
+  object-fit: contain;
+  max-width: 100%;
+  height: auto;
+  aspect-ratio: auto;
+}
+
+/* Prevent stretching on mobile */
+@media (max-width: 767px) {
+  .canvas-container canvas {
+    max-height: 70vh;
+  }
+}
+
 /* Minimal thought bubble styling */
 .thought-bubble {
   position: absolute;
@@ -74,10 +95,4 @@ body {
     font-size: 12px;
     line-height: 1.3;
   }
-  
-  /* Add text-xxs class for very small text on mobile */
-  .text-xxs {
-    font-size: 0.65rem;
-    line-height: 1rem;
-  }
 }