feat: switch measurements to feet, add recorder UI, and persist telemetry to Supabase

- UI: Height (ft), Girth/DBH (ft), conversion note, recorder controls
- API: validators updated to feet; stats return average_height_ft/average_girth_ft
- Telemetry: client sends success/error; server writes to Supabase telemetry_events (file fallback)
- DB support: location_name field supported end-to-end; trees DDL adjusted in repo

app.py

@@ -124,6 +124,7 @@ class Tree(BaseModel):
     id: int
     latitude: float
     longitude: float
+    location_name: Optional[str] = None
     local_name: Optional[str] = None
     scientific_name: Optional[str] = None
     common_name: Optional[str] = None
@@ -145,12 +146,13 @@ class TreeCreate(BaseModel):
     """Model for creating new tree records"""
     latitude: float = Field(..., ge=-90, le=90, description="Latitude in decimal degrees")
     longitude: float = Field(..., ge=-180, le=180, description="Longitude in decimal degrees")
+    location_name: Optional[str] = Field(None, max_length=200, description="Human-readable location (e.g., landmark)")
     local_name: Optional[str] = Field(None, max_length=200, description="Local Assamese name")
     scientific_name: Optional[str] = Field(None, max_length=200, description="Scientific name")
     common_name: Optional[str] = Field(None, max_length=200, description="Common name")
     tree_code: Optional[str] = Field(None, max_length=20, description="Tree reference code")
-    height: Optional[float] = Field(None, gt=0, le=200, description="Height in meters")
-    width: Optional[float] = Field(None, gt=0, le=2000, description="Width/girth in centimeters")
+    height: Optional[float] = Field(None, gt=0, le=1000, description="Height in feet (ft)")
+    width: Optional[float] = Field(None, gt=0, le=200, description="Girth/DBH in feet (ft)")
     utility: Optional[List[str]] = Field(None, description="Ecological/cultural utilities")
     storytelling_text: Optional[str] = Field(None, max_length=5000, description="Stories and narratives")
     storytelling_audio: Optional[str] = Field(None, description="Audio file path")
@@ -217,12 +219,13 @@ class TreeUpdate(BaseModel):
     """Model for updating tree records"""
     latitude: Optional[float] = Field(None, ge=-90, le=90)
     longitude: Optional[float] = Field(None, ge=-180, le=180)
+    location_name: Optional[str] = Field(None, max_length=200)
     local_name: Optional[str] = Field(None, max_length=200)
     scientific_name: Optional[str] = Field(None, max_length=200)
     common_name: Optional[str] = Field(None, max_length=200)
     tree_code: Optional[str] = Field(None, max_length=20)
-    height: Optional[float] = Field(None, gt=0, le=200)
-    width: Optional[float] = Field(None, gt=0, le=2000)
+    height: Optional[float] = Field(None, gt=0, le=1000)
+    width: Optional[float] = Field(None, gt=0, le=200)
     utility: Optional[List[str]] = None
     storytelling_text: Optional[str] = Field(None, max_length=5000)
     storytelling_audio: Optional[str] = None
@@ -740,8 +743,9 @@ async def get_stats():
             "total_trees": total_trees,
             "species_distribution": species_distribution,
             "health_distribution": health_distribution,
-            "average_height": measurements["average_height"],
-            "average_diameter": measurements["average_diameter"],
+            "average_height_ft": measurements["average_height"],
+            "average_girth_ft": measurements["average_diameter"],
+            "units": {"height": "ft", "girth": "ft"},
             "last_updated": datetime.now().isoformat(),
         }
         
@@ -789,6 +793,53 @@ async def get_tree_codes_api():
         return {"tree_codes": [], "error": str(e)}
 
 
+# Telemetry logging
+class TelemetryEvent(BaseModel):
+    event_type: str = Field(..., description="Type of event, e.g., 'upload', 'ui', 'error'")
+    status: Optional[str] = Field(None, description="Status such as success/error")
+    metadata: Optional[Dict[str, Any]] = Field(default_factory=dict)
+    timestamp: Optional[str] = Field(default=None)
+
+
+def _write_telemetry(event: Dict[str, Any]):
+    try:
+        # Ensure timestamp
+        if 'timestamp' not in event or not event['timestamp']:
+            event['timestamp'] = datetime.now().isoformat()
+        # Append as JSON line
+        with open("telemetry.log", "a", encoding="utf-8") as f:
+            f.write(json.dumps(event) + "\n")
+    except Exception as e:
+        logger.warning(f"Failed to write telemetry: {e}")
+
+
+@app.post("/api/telemetry", tags=["System"])
+async def telemetry(event: TelemetryEvent, request: Request, user: Dict[str, Any] = Depends(require_auth)):
+    """Accept telemetry/observability events from the client for troubleshooting."""
+    try:
+        evt = event.model_dump()
+        # Enrich with user and request context
+        evt['user'] = {
+            "username": user.get("username"),
+            "role": user.get("role")
+        }
+        evt['client'] = {
+            "ip": request.client.host if request.client else None,
+            "user_agent": request.headers.get('user-agent')
+        }
+        # Prefer Supabase persistent storage; fallback to file if not configured
+        if getattr(db, 'connected', False):
+            ok = db.log_telemetry(evt)
+            if not ok:
+                _write_telemetry(evt)
+        else:
+            _write_telemetry(evt)
+        return {"ok": True}
+    except Exception as e:
+        logger.error(f"Telemetry error: {e}")
+        raise HTTPException(status_code=500, detail="Failed to record telemetry")
+
+
 # Version info
 @app.get("/api/version", tags=["System"])
 async def get_version():

constants.py

@@ -22,13 +22,13 @@ MAX_TREES_LIMIT = 1000
 DEFAULT_SPECIES_LIMIT = 20
 DEFAULT_OFFSET = 0
 
-# Validation Constants
+# Validation Constants (units in feet)
 MAX_SPECIES_NAME_LENGTH = 200
 MAX_NOTES_LENGTH = 2000
 MAX_STORYTELLING_TEXT_LENGTH = 5000
 MAX_TREE_CODE_LENGTH = 20
-MAX_HEIGHT_METERS = 200
-MAX_WIDTH_CM = 2000
+MAX_HEIGHT_FEET = 1000
+MAX_GIRTH_FEET = 200
 
 # Application Constants
 APP_VERSION = "3.0.0"

static/index.html

@@ -939,9 +939,7 @@
     </script>
 </head>
 <body>
-    <div class="tt-header">
-        <!-- Granim Canvas for Header Background -->
-        <canvas id="header-canvas"></canvas>
+    <div class="tt-header" style="background-image: url('https://images.unsplash.com/photo-1441974231531-c6227db76b6e?q=80&w=1920&auto=format&fit=crop&ixlib=rb-4.0.3'); background-size: cover; background-position: center;">
         
         <div class="tt-header-content">
             <div class="tt-header-brand">
@@ -988,6 +986,11 @@
                                     <input type="number" id="longitude" class="form-input" step="0.0000001" min="-180" max="180" required placeholder="e.g. 91.7362">
                                 </div>
                             </div>
+
+                            <div class="form-group">
+                                <label class="form-label" for="locationName">Location Name (Optional)</label>
+                                <input type="text" id="locationName" class="form-input" placeholder="e.g., Near Old Banyan, Village Center">
+                            </div>
                             
                             <div class="form-group">
                                 <div class="location-buttons">
@@ -1036,16 +1039,17 @@
                                 <p class="section-description">Quantitative assessment of tree dimensions</p>
                             </div>
                             
-                            <div class="form-row">
+                                <div class="form-row">
                                 <div class="form-group">
-                                    <label class="form-label" for="height">Height (meters)</label>
-                                    <input type="number" id="height" class="form-input" step="0.1" min="0" max="200" placeholder="15.5">
+                                    <label class="form-label" for="height">Height (ft)</label>
+                                    <input type="number" id="height" class="form-input" step="0.1" min="0" placeholder="e.g., 50.0">
                                 </div>
                                 <div class="form-group">
-                                    <label class="form-label" for="width">Girth/DBH (cm)</label>
-                                    <input type="number" id="width" class="form-input" step="0.1" min="0" max="2000" placeholder="45.2">
+                                    <label class="form-label" for="width">Girth/DBH (ft)</label>
+                                    <input type="number" id="width" class="form-input" step="0.1" min="0" placeholder="e.g., 3.5">
                                 </div>
                             </div>
+                            <p class="section-description">Note: Enter measurements in feet. If you have metric values, you can convert: 1 meter ≈ 3.28084 ft; 1 cm ≈ 0.0328084 ft.</p>
                         </div>
 
                         <!-- Utility Section -->
@@ -1107,6 +1111,13 @@
                                     <div class="file-upload-text">Click to upload audio file</div>
                                     <div class="file-upload-hint">Or drag and drop (MP3, WAV, M4A)</div>
                                 </div>
+
+                                <div style="display:flex; align-items:center; gap: 0.75rem; margin-top: 0.75rem;">
+                                    <button type="button" id="recordBtn" class="tt-btn tt-btn-secondary">Record</button>
+                                    <span id="recordingStatus" style="font-size:0.9rem; color: var(--gray-600);">Click to start recording</span>
+                                </div>
+                                <audio id="audioPlayback" controls class="hidden" style="margin-top: 0.75rem; width: 100%;"></audio>
+
                                 <div id="audioUploadResult"></div>
                             </div>
                         </div>

static/js/modules/api-client.js

@@ -161,19 +161,81 @@ export class ApiClient {
         }
         
         const endpoint = type === 'image' ? '/api/upload/image' : '/api/upload/audio';
-        
-        const response = await fetch(endpoint, {
-            method: 'POST',
-            headers: {
-                'Authorization': `Bearer ${this.authManager.authToken}`
-            },
-            body: formData
-        });
-        
-        if (!response.ok) {
-            throw new Error('Upload failed');
+        let resJson = null;
+        try {
+            const response = await fetch(endpoint, {
+                method: 'POST',
+                headers: {
+                    'Authorization': `Bearer ${this.authManager.authToken}`
+                },
+                body: formData
+            });
+            
+            if (!response.ok) {
+                const errText = await response.text().catch(() => '');
+                await this.sendTelemetry({
+                    event_type: 'upload',
+                    status: 'error',
+                    metadata: {
+                        type,
+                        category,
+                        filename: file.name,
+                        size: file.size,
+                        content_type: file.type,
+                        response_status: response.status,
+                        response_text: errText
+                    }
+                }).catch(() => {});
+                throw new Error('Upload failed');
+            }
+            resJson = await response.json();
+            await this.sendTelemetry({
+                event_type: 'upload',
+                status: 'success',
+                metadata: {
+                    type,
+                    category,
+                    filename: file.name,
+                    size: file.size,
+                    content_type: file.type,
+                    server_filename: resJson.filename,
+                    bucket: resJson.bucket
+                }
+            }).catch(() => {});
+            return resJson;
+        } catch (e) {
+            // Network or other errors
+            if (!resJson) {
+                await this.sendTelemetry({
+                    event_type: 'upload',
+                    status: 'error',
+                    metadata: {
+                        type,
+                        category,
+                        filename: file?.name,
+                        size: file?.size,
+                        content_type: file?.type,
+                        error: e.message
+                    }
+                }).catch(() => {});
+            }
+            throw e;
+        }
+    }
+
+    async sendTelemetry(payload) {
+        try {
+            const response = await this.authenticatedFetch('/api/telemetry', {
+                method: 'POST',
+                headers: {
+                    'Content-Type': 'application/json'
+                },
+                body: JSON.stringify(payload)
+            });
+            if (!response) return;
+            // Best-effort; ignore response body
+        } catch (_) {
+            // swallow telemetry errors
         }
-        
-        return await response.json();
     }
 }

static/js/modules/form-manager.js

@@ -84,6 +84,7 @@ export class FormManager {
         return {
             latitude: this.getNumericValue('latitude'),
             longitude: this.getNumericValue('longitude'),
+            location_name: this.getStringValue('locationName'),
             local_name: this.getStringValue('localName'),
             scientific_name: this.getStringValue('scientificName'),
             common_name: this.getStringValue('commonName'),
@@ -114,6 +115,7 @@ export class FormManager {
     populateForm(treeData) {
         this.setFieldValue('latitude', treeData.latitude);
         this.setFieldValue('longitude', treeData.longitude);
+        this.setFieldValue('locationName', treeData.location_name || '');
         this.setFieldValue('localName', treeData.local_name || '');
         this.setFieldValue('scientificName', treeData.scientific_name || '');
         this.setFieldValue('commonName', treeData.common_name || '');

static/login.html

@@ -7,8 +7,6 @@
     <link rel="icon" type="image/png" href="/static/image/icons8-tree-96.png">
     <link rel="apple-touch-icon" href="/static/image/icons8-tree-96.png">
     <link rel="stylesheet" href="/static/css/design-system.css">
-    <!-- Granim.js CDN (deferred to avoid blocking render) -->
-    <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/granim.min.js" defer></script>
     <style>
         body {
             min-height: 100vh;
@@ -21,15 +19,19 @@
             font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
         }
         
-        /* Granim Canvas Background */
-        #granim-canvas {
+        /* Static Background Image */
+        .forest-background {
             position: fixed;
             top: 0;
             left: 0;
             width: 100vw;
             height: 100vh;
             z-index: -1;
-            background: linear-gradient(135deg, #0f172a, #1e293b, #334155);
+            background-image: url('https://images.unsplash.com/photo-1441974231531-c6227db76b6e?q=80&w=2560&auto=format&fit=crop&ixlib=rb-4.0.3');
+            background-position: center center;
+            background-size: cover;
+            background-repeat: no-repeat;
+            filter: brightness(0.9);
         }
 
         /* Elegant Login Container */
@@ -304,9 +306,6 @@
     <!-- Forest Background -->
     <div class="forest-background"></div>
     
-    <!-- Granim Canvas -->
-    <canvas id="granim-canvas"></canvas>
-    
     <div class="tt-login-container">
         <div class="logo-section">
             <div class="logo">TreeTrack</div>
@@ -506,74 +505,8 @@
         });
 
         // Auto-fill demo username on page load for development
+        // Auto-select ishita account for easy testing (password still needs to be entered)
         document.addEventListener('DOMContentLoaded', () => {
-            console.log('Initializing Granim...');
-            
-            try {
-                // Define and defer Granim initialization to avoid blocking render
-                function startGranim() {
-                    new Granim({
-                        element: '#granim-canvas',
-                        direction: 'diagonal',
-                        isPausedWhenNotInView: false,
-                        image: {
-                            // Forest path image
-                            source: 'https://images.unsplash.com/photo-1441974231531-c6227db76b6e?q=80&w=2560&auto=format&fit=crop&ixlib=rb-4.0.3',
-                            position: ['center', 'center'],
-                            stretchMode: ['stretch', 'stretch'],
-                            blendingMode: 'multiply'
-                        },
-                        states: {
-                            "default-state": {
-                                gradients: [
-                                    ['#0f172a', '#1e293b', '#16a085'],
-                                    ['#1a202c', '#2d3748', '#27ae60'], 
-                                    ['#2d3748', '#4a5568', '#2ecc71'],
-                                    ['#1a365d', '#2c5282', '#138d75'],
-                                    ['#0f172a', '#2d3748', '#16a085']
-                                ],
-                                transitionSpeed: 10000
-                            }
-                        },
-                        onStart: function() {
-                            console.log('Granim forest animation started');
-                        },
-                        onEnd: function() {
-                            console.log('Granim forest animation ended');
-                        }
-                    });
-                }
-
-                if (window.requestIdleCallback) {
-                    requestIdleCallback(() => { startGranim(); });
-                } else {
-                    setTimeout(() => { startGranim(); }, 0);
-                }
-
-                console.log('Scheduled Granim initialization');
-                
-            } catch (error) {
-                console.error('Granim initialization failed:', error);
-                
-                // Fallback: Create CSS gradient animation instead
-                const canvas = document.getElementById('granim-canvas');
-                if (canvas) {
-                    canvas.style.background = `
-                        linear-gradient(45deg, 
-                            #f8fafc 0%, 
-                            #e2e8f0 25%,
-                            #cbd5e1 50%,
-                            #e2e8f0 75%,
-                            #f8fafc 100%
-                        )
-                    `;
-                    canvas.style.width = '100vw';
-                    canvas.style.height = '100vh';
-                    console.log('Applied elegant neutral fallback CSS background');
-                }
-            }
-            
-            // Auto-select ishita account for easy testing (password still needs to be entered)
             setTimeout(() => {
                 fillCredentials('ishita');
             }, 1000);

static/map.html

@@ -837,9 +837,7 @@ const timestamp = '1754659000'; // Current timestamp for cache busting
 <body>
     <div class="app-container">
         <!-- Header -->
-        <div class="tt-header map-header">
-            <!-- Granim Canvas for Map Header Background -->
-            <canvas id="map-header-canvas"></canvas>
+        <div class="tt-header map-header" style="background-image: url('https://images.unsplash.com/photo-1441974231531-c6227db76b6e?q=80&w=1920&auto=format&fit=crop&ixlib=rb-4.0.3'); background-size: cover; background-position: center;">
             
             <div class="tt-header-content">
                 <div class="tt-header-brand">
@@ -943,21 +941,6 @@ const timestamp = '1754659000'; // Current timestamp for cache busting
     <script src="https://unpkg.com/[email protected]/dist/leaflet.js"></script>
 <script src="/static/map.js?v=4.0.1&t=1754659000">
     
-    <script>
-        // Initialize Granim background animation on page load
-        document.addEventListener('DOMContentLoaded', function() {
-            // Initialize Granim with animated gradients and full coverage
-            var mapHeaderGranimInstance = new Granim({
-                element: '#map-header-canvas',
-                direction: 'diagonal',
-                isPausedWhenNotInView: false,
-                image: {
-                    source: 'https://images.unsplash.com/photo-1441974231531-c6227db76b6e?q=80&w=2560&auto=format&fit=crop&ixlib=rb-4.0.3',
-                    position: ['center', 'center'],
-                    stretchMode: ['stretch', 'stretch'],
-                    blendingMode: 'multiply'
-                },
-                states: {
                     "default-state": {
                         gradients: [
                             ['#0f172a', '#1e293b', '#16a085'],

supabase_client.py

@@ -64,12 +64,13 @@ def create_trees_table():
         id BIGSERIAL PRIMARY KEY,
         latitude DECIMAL(10, 8) NOT NULL CHECK (latitude >= -90 AND latitude <= 90),
         longitude DECIMAL(11, 8) NOT NULL CHECK (longitude >= -180 AND longitude <= 180),
+        location_name VARCHAR(200),
         local_name VARCHAR(200),
         scientific_name VARCHAR(200),
         common_name VARCHAR(200),
         tree_code VARCHAR(20),
-        height DECIMAL(5, 2) CHECK (height > 0 AND height <= 200),
-        width DECIMAL(6, 2) CHECK (width > 0 AND width <= 2000),
+        height DECIMAL(6, 2) CHECK (height > 0 AND height <= 1000), -- feet
+        width DECIMAL(6, 2) CHECK (width > 0 AND width <= 200),   -- feet (girth/DBH)
         utility JSONB,
         storytelling_text TEXT CHECK (LENGTH(storytelling_text) <= 5000),
         storytelling_audio VARCHAR(500),
@@ -85,6 +86,7 @@ def create_trees_table():
     CREATE INDEX IF NOT EXISTS idx_trees_location ON trees(latitude, longitude);
     CREATE INDEX IF NOT EXISTS idx_trees_scientific_name ON trees(scientific_name);
     CREATE INDEX IF NOT EXISTS idx_trees_local_name ON trees(local_name);
+    CREATE INDEX IF NOT EXISTS idx_trees_location_name ON trees(location_name);
     CREATE INDEX IF NOT EXISTS idx_trees_tree_code ON trees(tree_code);
     CREATE INDEX IF NOT EXISTS idx_trees_created_at ON trees(created_at);
     

supabase_database.py

@@ -32,14 +32,15 @@ class SupabaseDatabase:
     
     def initialize_database(self) -> bool:
         """Initialize database tables and indexes (already done via SQL)"""
-        # Tables are created via SQL in Supabase dashboard
-        # This just tests that the table exists
         try:
-            result = self.client.table('trees').select("id").limit(1).execute()
+            # Verify trees table
+            self.client.table('trees').select("id").limit(1).execute()
             logger.info("Trees table verified in Supabase")
+            # Ensure telemetry table exists
+            self._ensure_telemetry_table()
             return True
         except Exception as e:
-            logger.error(f"Failed to verify trees table: {e}")
+            logger.error(f"Failed to verify/initialize database: {e}")
             return False
     
     def test_connection(self) -> bool:
@@ -261,3 +262,34 @@ class SupabaseDatabase:
         """Restore database (not needed for Supabase)"""
         logger.info("Supabase data is persistent - no restore needed")
         return True
+
+    # Telemetry support
+    def _ensure_telemetry_table(self) -> None:
+        """Ensure telemetry_events table exists via SQL RPC if available."""
+        try:
+            # Attempt to select; if it fails, try to create via RPC or ignore
+            self.client.table('telemetry_events').select('id').limit(1).execute()
+            logger.info("Telemetry table verified in Supabase")
+        except Exception as e:
+            logger.info(f"telemetry_events table not accessible: {e}")
+            # As we may not have a generic SQL RPC, we rely on manual creation documented.
+            # We'll create a fallback table via a stored RPC if present; otherwise, first insert will fail gracefully.
+            pass
+
+    def log_telemetry(self, event: Dict[str, Any]) -> bool:
+        """Insert a telemetry event into Supabase telemetry_events table."""
+        try:
+            payload = {
+                'event_type': event.get('event_type'),
+                'status': event.get('status'),
+                'metadata': event.get('metadata'),
+                'username': (event.get('user') or {}).get('username'),
+                'role': (event.get('user') or {}).get('role'),
+                'client': event.get('client'),
+                'timestamp': event.get('timestamp')
+            }
+            self.client.table('telemetry_events').insert(payload).execute()
+            return True
+        except Exception as e:
+            logger.error(f"Failed to log telemetry: {e}")
+            return False