Implement demo mode functionality with model selection and annotations

main/public/demo-models/README.md

@@ -0,0 +1,53 @@
+# Demo Models Directory
+
+This directory contains the demo models and their pre-stored annotations for demo mode.
+
+## Directory Structure
+
+```
+demo-models/
+├── demo-config.json          # Configuration file listing all demo models
+├── models/                    # GLB/GLTF model files
+│   ├── brain.glb
+│   ├── heart.glb
+│   ├── engine.glb
+│   ├── skull.glb
+│   └── robot-arm.glb
+├── annotations/              # Pre-generated annotation images
+│   ├── brain-frontal-lobe.png
+│   ├── heart-left-ventricle.png
+│   ├── engine-piston.png
+│   ├── skull-mandible.png
+│   └── robot-arm-end-effector.png
+└── previews/                 # Preview thumbnails (optional)
+    ├── brain-preview.png
+    ├── heart-preview.png
+    ├── engine-preview.png
+    ├── skull-preview.png
+    └── robot-arm-preview.png
+```
+
+## How to Enable Demo Mode
+
+Set the environment variable in your `.env.local` file:
+
+```
+NEXT_PUBLIC_DEMO_MODE=true
+```
+
+## Adding Demo Models
+
+1. Add your GLB/GLTF model files to the `models/` directory
+2. Generate annotation images for specific parts and save them to `annotations/`
+3. Update `demo-config.json` with:
+   - Model metadata (name, description, modelUrl)
+   - Annotated parts with mesh name matching and annotation image paths
+
+## Mesh Name Matching
+
+The `meshName` field in `demo-config.json` should match the `name` property of meshes in your GLB/GLTF file. You can specify:
+- A single string: `"meshName": "Frontal_Lobe"`
+- An array of possible names: `"meshName": ["Frontal_Lobe", "FrontalLobe", "frontal_lobe"]`
+
+The system will try to match the mesh name (case-insensitive, partial matching supported).
+

main/public/demo-models/demo-config.json

@@ -0,0 +1,49 @@
+{
+  "models": [
+    {
+      "id": "demo-1",
+      "name": "Brain Model",
+      "description": "3D brain anatomy model with detailed structures",
+      "modelUrl": "/demo-models/models/brain.glb",
+      "annotatedParts": [
+        {
+          "partName": "Cerebrum",
+          "meshName": ["Cerebrum", "cerebrum", "cerebral cortex"],
+          "annotationImage": "/demo-models/annotations/cerebrum-annotated.png",
+          "description": "The cerebrum is the largest and most superficial part of the brain, responsible for higher-level functions such as thinking, feeling, and movement.",
+          "category": "anatomical"
+        }
+      ]
+    },
+    {
+      "id": "demo-3",
+      "name": "Drone Model",
+      "description": "3D drone assembly model",
+      "modelUrl": "/demo-models/models/drone.glb",
+      "annotatedParts": [
+        {
+          "partName": "Propeller",
+          "meshName": ["Propeller", "propeller", "PROPELLER"],
+          "annotationImage": "/demo-models/annotations/drone-propeller-annotated.jpeg",
+          "description": "A rapidly rotating airfoil that generates thrust by pushing air downwards, providing lift for the drone.",
+          "category": "technical"
+        }
+      ]
+    },
+    {
+      "id": "demo-4",
+      "name": "Porsche Model",
+      "description": "Detailed Porsche gt3 model",
+      "modelUrl": "/demo-models/models/porsche.glb",
+      "annotatedParts": [
+        {
+          "partName": "Front Bumper",
+          "meshName": ["Front_Bumper", "FrontBumper", "front_bumper"],
+          "annotationImage": "/demo-models/annotations/front-bumper-annotated.png",
+          "description": "Located at the front of the vehicle, the bumper absorbs impact in minor collisions and often includes air intakes for cooling and aerodynamic elements like a splitter to improve downforce.",
+          "category": "anatomical"
+        }
+      ]
+    }
+  ]
+}