npm - mudra-skills - Versions diffs - 1.0.0 - Mend

mudra-skills 1.0.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (149) hide show

package/skills/mudra-xr/assets/demos/ballpit.html ADDED Viewed

@@ -0,0 +1,284 @@
+<!doctype html>
+<!-- reference: demos/ballpit -->
+<html lang="en">
+  <head>
+    <title>Ballpit</title>
+    <meta
+      name="viewport"
+      content="width=device-width, initial-scale=1.0, user-scalable=no"
+    />
+    <link type="text/css" rel="stylesheet" href="https://xrblocks.github.io/css/xr.css" />
+    <script>
+      window.litDisableBundleWarning = true;
+    </script>
+    <script type="importmap">
+      {
+        "imports": {
+          "@dimforge/rapier3d-simd-compat": "https://cdn.jsdelivr.net/npm/@dimforge/rapier3d-simd-compat@0.19.2/rapier.mjs",
+          "three": "https://cdn.jsdelivr.net/npm/three@0.182.0/build/three.module.js",
+          "three/addons/": "https://cdn.jsdelivr.net/npm/three@0.182.0/examples/jsm/",
+          "troika-three-text": "https://cdn.jsdelivr.net/gh/protectwise/troika@028b81cf308f0f22e5aa8e78196be56ec1997af5/packages/troika-three-text/src/index.js",
+          "troika-three-utils": "https://cdn.jsdelivr.net/gh/protectwise/troika@v0.52.4/packages/troika-three-utils/src/index.js",
+          "troika-worker-utils": "https://cdn.jsdelivr.net/gh/protectwise/troika@v0.52.4/packages/troika-worker-utils/src/index.js",
+          "bidi-js": "https://esm.sh/bidi-js@%5E1.0.2?target=es2022",
+          "webgl-sdf-generator": "https://esm.sh/webgl-sdf-generator@1.1.1/es2022/webgl-sdf-generator.mjs",
+          "lit": "https://cdn.jsdelivr.net/gh/lit/dist@3/core/lit-core.min.js",
+          "lit/": "https://esm.run/lit@3/",
+          "xrblocks": "https://cdn.jsdelivr.net/npm/xrblocks@0.11.0/build/xrblocks.js",
+          "xrblocks/addons/": "https://cdn.jsdelivr.net/npm/xrblocks@0.11.0/build/addons/"
+        }
+      }
+    </script>
+  </head>
+  <body>
+    <div
+      class="background-image"
+      style="background-image: url('textures/background.webp')"
+    ></div>
+    <script type="module">
+import 'xrblocks/addons/simulator/SimulatorAddons.js';
+import RAPIER from '@dimforge/rapier3d-simd-compat';
+import * as xb from 'xrblocks';
+import * as THREE from 'three';
+import {palette} from 'xrblocks/addons/utils/Palette.js';
+// --- BallShooter inlined ---
+class BallShooter extends xb.Script {
+  constructor({
+    numBalls = 100,
+    radius = 0.08,
+    palette: pal = null,
+    liveDuration = 3000,
+    deflateDuration = 200,
+    distanceThreshold = 0.25,
+    distanceFadeout = 0.25,
+  }) {
+    super();
+    this.liveDuration = liveDuration;
+    this.deflateDuration = deflateDuration;
+    this.distanceThreshold = distanceThreshold;
+    this.distanceFadeout = distanceFadeout;
+    const geometry = new THREE.IcosahedronGeometry(radius, 3);
+    this.spheres = [];
+    for (let i = 0; i < numBalls; ++i) {
+      const material = new THREE.MeshLambertMaterial({transparent: true});
+      const sphere = new THREE.Mesh(geometry, material);
+      sphere.castShadow = true;
+      sphere.receiveShadow = true;
+      this.spheres.push(sphere);
+    }
+    for (let i = 0; i < this.spheres.length; i++) {
+      this.spheres[i].position.set(Math.random() * 2 - 2, Math.random() * 2, Math.random() * 2 - 2);
+      if (pal != null) this.spheres[i].material.color.copy(pal.getRandomLiteGColor());
+    }
+    const now = performance.now();
+    this.spawnTimes = [];
+    for (let i = 0; i < numBalls; ++i) this.spawnTimes[i] = now;
+    this.nextBall = 0;
+    this.rigidBodies = [];
+    this.colliders = [];
+    this.colliderHandleToIndex = new Map();
+    this.viewSpacePosition = new THREE.Vector3();
+    this.clipSpacePosition = new THREE.Vector3();
+    this.projectedPosition = new THREE.Vector3();
+    this.clipFromWorld = new THREE.Matrix4();
+  }
+  initPhysics(physics) {
+    this.setupPhysics({
+      RAPIER: physics.RAPIER,
+      blendedWorld: physics.blendedWorld,
+      colliderActiveEvents: physics.RAPIER.ActiveEvents.CONTACT_FORCE_EVENTS,
+    });
+  }
+  setupPhysics({RAPIER, blendedWorld, colliderActiveEvents = 0, continuousCollisionDetection = false}) {
+    this.RAPIER = RAPIER;
+    this.blendedWorld = blendedWorld;
+    this.colliderActiveEvents = colliderActiveEvents;
+    this.continuousCollisionDetection = continuousCollisionDetection;
+  }
+  spawnBallAt(position, velocity = new THREE.Vector3(), now = performance.now()) {
+    const ball = this.spheres[this.nextBall];
+    ball.position.copy(position);
+    ball.scale.setScalar(1.0);
+    ball.opacity = 1.0;
+    this._createRigidBody(this.nextBall, position, velocity, ball.geometry.parameters.radius);
+    this.spawnTimes[this.nextBall] = now;
+    this.nextBall = (this.nextBall + 1) % this.spheres.length;
+    this.add(ball);
+  }
+  _createRigidBody(index, position, velocity, radius) {
+    if (this.rigidBodies[index] != null) this.blendedWorld.removeRigidBody(this.rigidBodies[index]);
+    const desc = this.RAPIER.RigidBodyDesc.dynamic().setTranslation(position.x, position.y, position.z).setLinvel(velocity.x, velocity.y, velocity.z).setCcdEnabled(this.continuousCollisionDetection);
+    const body = this.blendedWorld.createRigidBody(desc);
+    const shape = this.RAPIER.ColliderDesc.ball(radius).setActiveEvents(this.colliderActiveEvents);
+    const collider = this.blendedWorld.createCollider(shape, body);
+    this.colliderHandleToIndex.set(collider.handle, index);
+    this.rigidBodies[index] = body;
+    this.colliders[index] = collider;
+  }
+  physicsStep(now = performance.now()) {
+    for (let i = 0; i < this.spheres.length; i++) {
+      const sphere = this.spheres[i];
+      const body = this.rigidBodies[i];
+      let spawnTime = this.spawnTimes[i];
+      if (this.isBallActive(i) && body != null) {
+        let ballVisibility = 1.0;
+        const position = sphere.position.copy(body.translation());
+        const viewMatrix = xb.depth?.enabled ? xb.depth.depthViewMatrices[0] : xb.core.camera.matrixWorldInverse;
+        const projectionMatrix = xb.depth?.enabled ? xb.depth.depthProjectionMatrices[0] : xb.core.camera.projectionMatrix;
+        const viewSpacePosition = this.viewSpacePosition.copy(position).applyMatrix4(viewMatrix);
+        const clipSpacePosition = this.clipSpacePosition.copy(viewSpacePosition).applyMatrix4(projectionMatrix);
+        const ballIsInView = -1.0 <= clipSpacePosition.x && clipSpacePosition.x <= 1.0 && -1.0 <= clipSpacePosition.y && clipSpacePosition.y <= 1.0;
+        if (ballIsInView && xb.depth.enabled) {
+          const projectedPosition = xb.depth.getProjectedDepthViewPositionFromWorldPosition(position, this.projectedPosition);
+          const distanceBehindDepth = Math.max(projectedPosition.z - viewSpacePosition.z, 0.0);
+          if (distanceBehindDepth > this.distanceThreshold) {
+            const deflateAmount = Math.max((distanceBehindDepth - this.distanceThreshold) / this.distanceFadeout, 1.0);
+            spawnTime = Math.min(spawnTime, now - this.liveDuration - this.deflateDuration * deflateAmount);
+          }
+        }
+        if (now - spawnTime > this.liveDuration) {
+          const timeSinceDeflateStarted = now - spawnTime - this.liveDuration;
+          const deflateAmount = Math.min(1, timeSinceDeflateStarted / this.deflateDuration);
+          ballVisibility = 1.0 - deflateAmount;
+        }
+        sphere.material.opacity = ballVisibility;
+        if (ballVisibility < 0.001) { this.removeBall(i); }
+        else { sphere.position.copy(body.translation()); sphere.quaternion.copy(body.rotation()); }
+      }
+    }
+  }
+  getIndexForColliderHandle(handle) { return this.colliderHandleToIndex.get(handle); }
+  removeBall(index) {
+    const ball = this.spheres[index];
+    ball.material.opacity = 0.0;
+    ball.scale.setScalar(0);
+    const body = this.rigidBodies[index];
+    if (body != null) { this.blendedWorld.removeRigidBody(body); this.rigidBodies[index] = null; this.colliders[index] = null; }
+    this.remove(ball);
+  }
+  isBallActive(index) { return this.spheres[index].parent == this; }
+}
+// --- BallPit inlined ---
+const kTimeLiveMs = xb.getUrlParamInt('timeLiveMs', 3000);
+const kDefalteMs = xb.getUrlParamInt('defalteMs', 200);
+const kLightX = xb.getUrlParamFloat('lightX', 0);
+const kLightY = xb.getUrlParamFloat('lightY', 500);
+const kLightZ = xb.getUrlParamFloat('lightZ', -10);
+const kRadius = xb.getUrlParamFloat('radius', 0.08);
+const kBallsPerSecond = xb.getUrlParamFloat('ballsPerSecond', 30);
+const kVelocityScale = xb.getUrlParamInt('velocityScale', 1.0);
+const kNumSpheres = 100;
+class BallPit extends xb.Script {
+  constructor() {
+    super();
+    this.ballShooter = new BallShooter({numBalls: kNumSpheres, radius: kRadius, palette: palette, liveDuration: kTimeLiveMs, deflateDuration: kDefalteMs});
+    this.add(this.ballShooter);
+    this.addLights();
+    this.lastBallCreatedTimeForController = new Map();
+    this.pointer = new THREE.Vector2();
+    this.velocity = new THREE.Vector3();
+  }
+  init() { xb.add(this); }
+  update() {
+    super.update();
+    for (const controller of xb.core.input.controllers) this.controllerUpdate(controller);
+  }
+  addLights() {
+    this.add(new THREE.HemisphereLight(0xbbbbbb, 0x888888, 3));
+    const light = new THREE.DirectionalLight(0xffffff, 2);
+    light.position.set(kLightX, kLightY, kLightZ);
+    light.castShadow = true;
+    light.shadow.mapSize.width = 2048;
+    light.shadow.mapSize.height = 2048;
+    this.add(light);
+  }
+  updatePointerPosition(event) {
+    this.pointer.x = (event.clientX / window.innerWidth) * 2 - 1;
+    this.pointer.y = -(event.clientY / window.innerHeight) * 2 + 1;
+    this.pointer.x = 1 + 2 * this.pointer.x;
+  }
+  onPointerDown(event) {
+    this.updatePointerPosition(event);
+    const cameras = xb.core.renderer.xr.getCamera().cameras;
+    if (cameras.length == 0) return;
+    const camera = cameras[0];
+    const position = new THREE.Vector3(0.0, 0.0, -0.2).applyQuaternion(camera.quaternion).add(camera.position);
+    const matrix = new THREE.Matrix4();
+    matrix.setPosition(position.x, position.y, position.z);
+    const vector = new THREE.Vector4(this.pointer.x, this.pointer.y, 1.0, 1);
+    const inverseProjectionMatrix = camera.projectionMatrix.clone().invert();
+    vector.applyMatrix4(inverseProjectionMatrix);
+    vector.multiplyScalar(1 / vector.w);
+    this.velocity.copy(vector);
+    this.velocity.normalize().multiplyScalar(4.0);
+    this.velocity.applyQuaternion(camera.quaternion);
+    this.ballShooter.spawnBallAt(position, this.velocity);
+  }
+  controllerUpdate(controller) {
+    const now = performance.now();
+    if (!this.lastBallCreatedTimeForController.has(controller)) this.lastBallCreatedTimeForController.set(controller, -99);
+    if (controller.userData.selected && now - this.lastBallCreatedTimeForController.get(controller) >= 1000 / kBallsPerSecond) {
+      const newPosition = new THREE.Vector3(0.0, 0.0, -0.08).applyQuaternion(controller.quaternion).add(controller.position);
+      this.velocity.set(0, 0, -5.0 * kVelocityScale);
+      this.velocity.applyQuaternion(controller.quaternion);
+      this.ballShooter.spawnBallAt(newPosition, this.velocity);
+      this.lastBallCreatedTimeForController.set(controller, now);
+    }
+  }
+}
+const depthMeshColliderUpdateFps = xb.getUrlParamFloat('depthMeshColliderUpdateFps', 5);
+const useSceneMesh = xb.getUrlParamBool('scenemesh', false);
+const sceneMeshDebug = xb.getUrlParamBool('scenemeshdebug', false);
+const options = new xb.Options();
+options.simulator.instructions.enabled = false;
+if (useSceneMesh) {
+  options.world.enableMeshDetection();
+  options.world.meshes.showDebugVisualizations = sceneMeshDebug;
+} else {
+  options.depth = new xb.DepthOptions(xb.xrDepthMeshPhysicsOptions);
+  options.depth.depthMesh.colliderUpdateFps = depthMeshColliderUpdateFps;
+  options.depth.matchDepthView = false;
+}
+options.reticles.enabled = false;
+options.controllers.performRaycastOnUpdate = false;
+options.xrButton = {
+  ...options.xrButton,
+  startText: '<i id="xrlogo"></i> LET THE FUN BEGIN',
+  endText: '<i id="xrlogo"></i> MISSION COMPLETE',
+};
+options.physics.RAPIER = RAPIER;
+async function start() {
+  xb.add(new BallPit());
+  await xb.init(options);
+}
+document.addEventListener('DOMContentLoaded', function () {
+  start();
+});
+</script>
+  </body>
+</html>

package/skills/mudra-xr/assets/demos/drone.html ADDED Viewed

@@ -0,0 +1,41 @@
+<!doctype html>
+<!-- reference: demos/drone -->
+<html lang="en">
+  <head>
+    <title>Drone</title>
+    <meta
+      name="viewport"
+      content="width=device-width, initial-scale=1.0, user-scalable=no"
+    />
+    <link type="text/css" rel="stylesheet" href="https://xrblocks.github.io/css/xr.css" />
+    <script>
+      window.litDisableBundleWarning = true;
+    </script>
+    <script type="importmap">
+      {
+        "imports": {
+          "@dimforge/rapier3d-simd-compat": "https://cdn.jsdelivr.net/npm/@dimforge/rapier3d-simd-compat@0.19.2/rapier.mjs",
+          "three": "https://cdn.jsdelivr.net/npm/three@0.182.0/build/three.module.js",
+          "three/addons/": "https://cdn.jsdelivr.net/npm/three@0.182.0/examples/jsm/",
+          "troika-three-text": "https://cdn.jsdelivr.net/gh/protectwise/troika@028b81cf308f0f22e5aa8e78196be56ec1997af5/packages/troika-three-text/src/index.js",
+          "troika-three-utils": "https://cdn.jsdelivr.net/gh/protectwise/troika@v0.52.4/packages/troika-three-utils/src/index.js",
+          "troika-worker-utils": "https://cdn.jsdelivr.net/gh/protectwise/troika@v0.52.4/packages/troika-worker-utils/src/index.js",
+          "bidi-js": "https://esm.sh/bidi-js@%5E1.0.2?target=es2022",
+          "webgl-sdf-generator": "https://esm.sh/webgl-sdf-generator@1.1.1/es2022/webgl-sdf-generator.mjs",
+          "lit": "https://cdn.jsdelivr.net/gh/lit/dist@3/core/lit-core.min.js",
+          "lit/": "https://esm.run/lit@3/",
+          "xrblocks": "https://cdn.jsdelivr.net/npm/xrblocks@0.11.0/build/xrblocks.js",
+          "xrblocks/addons/": "https://cdn.jsdelivr.net/npm/xrblocks@0.11.0/build/addons/"
+        }
+      }
+    </script>
+  </head>
+  <body>
+    <!-- NOTE: The original drone demo references build/main.js (a compiled build artifact
+         not included in xrpromt.md). No companion JS source was provided for this demo.
+         This file preserves the original HTML shell as-is from the reference corpus. -->
+    <script type="module" src="build/main.js"></script>
+  </body>
+</html>

package/skills/mudra-xr/assets/demos/gemini-icebreakers.html ADDED Viewed

@@ -0,0 +1,338 @@
+<!doctype html>
+<!-- reference: demos/gemini-icebreakers -->
+<html lang="en">
+  <head>
+    <title>Gemini Icebreakers</title>
+    <meta
+      name="viewport"
+      content="width=device-width, initial-scale=1.0, user-scalable=no"
+    />
+    <link type="text/css" rel="stylesheet" href="https://xrblocks.github.io/css/xr.css" />
+    <script>
+      window.litDisableBundleWarning = true;
+    </script>
+    <script type="importmap">
+      {
+        "imports": {
+          "three": "https://cdn.jsdelivr.net/npm/three@0.182.0/build/three.module.js",
+          "three/addons/": "https://cdn.jsdelivr.net/npm/three@0.182.0/examples/jsm/",
+          "troika-three-text": "https://cdn.jsdelivr.net/gh/protectwise/troika@028b81cf308f0f22e5aa8e78196be56ec1997af5/packages/troika-three-text/src/index.js",
+          "troika-three-utils": "https://cdn.jsdelivr.net/gh/protectwise/troika@v0.52.4/packages/troika-three-utils/src/index.js",
+          "troika-worker-utils": "https://cdn.jsdelivr.net/gh/protectwise/troika@v0.52.4/packages/troika-worker-utils/src/index.js",
+          "bidi-js": "https://esm.sh/bidi-js@%5E1.0.2?target=es2022",
+          "webgl-sdf-generator": "https://esm.sh/webgl-sdf-generator@1.1.1/es2022/webgl-sdf-generator.mjs",
+          "lit": "https://cdn.jsdelivr.net/gh/lit/dist@3/core/lit-core.min.js",
+          "lit/": "https://esm.run/lit@3/",
+          "xrblocks": "https://cdn.jsdelivr.net/npm/xrblocks@0.11.0/build/xrblocks.js",
+          "xrblocks/addons/": "https://cdn.jsdelivr.net/npm/xrblocks@0.11.0/build/addons/",
+          "@google/genai": "https://cdn.jsdelivr.net/npm/@google/genai/+esm"
+        }
+      }
+    </script>
+  </head>
+  <body>
+    <div
+      id="background-image"
+      class="background-image"
+      style="background-image: url('textures/background.webp')"
+    ></div>
+    <script type="module">
+import 'xrblocks/addons/simulator/SimulatorAddons.js';
+import * as THREE from 'three';
+import * as xb from 'xrblocks';
+// --- EarthAnimation inlined ---
+class EarthAnimation {
+  model = null;
+  speed = 0.2;
+  setModel(model) { this.model = model; }
+  update(deltaTime) {
+    const gltfScene = this?.model?.gltf?.scene;
+    if (gltfScene) gltfScene.rotation.y += this.speed * deltaTime;
+  }
+}
+// --- TranscriptionManager inlined ---
+class TranscriptionManager {
+  constructor(responseDisplay) {
+    this.responseDisplay = responseDisplay;
+    this.currentInputText = '';
+    this.currentOutputText = '';
+    this.conversationHistory = [];
+  }
+  handleInputTranscription(text) {
+    if (!text) return;
+    this.currentInputText += text;
+    this.updateLiveDisplay();
+  }
+  handleOutputTranscription(text) {
+    if (!text) return;
+    this.currentOutputText += text;
+    this.updateLiveDisplay();
+  }
+  finalizeTurn() {
+    if (this.currentInputText.trim()) this.conversationHistory.push({speaker: 'You', text: this.currentInputText.trim()});
+    if (this.currentOutputText.trim()) this.conversationHistory.push({speaker: 'AI', text: this.currentOutputText.trim()});
+    this.currentInputText = '';
+    this.currentOutputText = '';
+    this.updateFinalDisplay();
+  }
+  updateLiveDisplay() {
+    let displayText = '';
+    for (const entry of this.conversationHistory.slice(-2)) displayText += `${entry.speaker}: ${entry.text}\n\n`;
+    if (this.currentInputText.trim()) displayText += `You: ${this.currentInputText}`;
+    if (this.currentOutputText.trim()) { if (this.currentInputText.trim()) displayText += '\n\n'; displayText += `AI: ${this.currentOutputText}`; }
+    this.responseDisplay?.setText(displayText);
+  }
+  updateFinalDisplay() {
+    let displayText = '';
+    for (const entry of this.conversationHistory) displayText += `${entry.speaker}: ${entry.text}\n\n`;
+    this.responseDisplay?.setText(displayText);
+  }
+  clear() { this.currentInputText = ''; this.currentOutputText = ''; this.conversationHistory = []; }
+  addText(text) { this.responseDisplay?.addText(text + '\n\n'); }
+  setText(text) { this.responseDisplay?.setText(text); }
+}
+// --- GeminiIcebreakers inlined ---
+const ASSETS_BASE_URL = 'https://cdn.jsdelivr.net/gh/xrblocks/assets@main/';
+const PROPRIETARY_ASSETS_BASE_URL = 'https://cdn.jsdelivr.net/gh/xrblocks/proprietary-assets@main/';
+const DATA = [
+  {
+    model: {scale: {x: 4.0, y: 4.0, z: 4.0}, path: PROPRIETARY_ASSETS_BASE_URL + 'monalisa/', model: 'mona_lisa_picture_frame_compressed.glb', verticallyAlignObject: false},
+    prompt: '"What is she smiling about?"',
+  },
+  {
+    model: {scale: {x: 0.03, y: 0.03, z: 0.03}, rotation: {x: 80, y: 0, z: 0}, position: {x: 0, y: -0.2, z: -3.0}, path: PROPRIETARY_ASSETS_BASE_URL + 'chess/', model: 'chess_compressed.glb', verticallyAlignObject: false},
+    prompt: '"What\'s a good strategy for this game?"',
+  },
+  {
+    model: {scale: {x: 0.9, y: 0.9, z: 0.9}, rotation: {x: 75, y: 0, z: 0}, position: {x: 0, y: 0.0, z: 0}, path: PROPRIETARY_ASSETS_BASE_URL + 'vegetable_on_board/', model: 'vegetable_on_board_compressed.glb', verticallyAlignObject: false},
+    prompt: '"What is the most unexpected dish you could make with these ingredients?"',
+  },
+  {
+    model: {path: ASSETS_BASE_URL + 'models/', model: 'Parasaurolophus.glb', scale: {x: 0.3, y: 0.3, z: 0.3}, position: {x: 0, y: -0.6, z: 0}, verticallyAlignObject: false, horizontallyAlignObject: false},
+    prompt: '"If this dinosaur could talk, what would it say?"',
+  },
+  {
+    model: {path: PROPRIETARY_ASSETS_BASE_URL + 'earth/', model: 'Earth_1_12756.glb', scale: {x: 0.001, y: 0.001, z: 0.001}, position: {x: 0, y: 0, z: 0}, verticallyAlignObject: false},
+    modelAnimation: new EarthAnimation(),
+    prompt: '"How big would I need to be to hold this in my hands?"',
+  },
+];
+class GeminiIcebreakers extends xb.Script {
+  constructor() {
+    super();
+    this.data = DATA;
+    this.journeyId = 0;
+    this.models = [];
+    this.isAIRunning = false;
+    this.screenshotInterval = null;
+    this.time = 0;
+    this.micButtonInitialY = null;
+    this.transcriptionManager = null;
+    const panel = new xb.SpatialPanel({backgroundColor: '#00000000', useDefaultPosition: false, showEdge: false});
+    this.add(panel);
+    this.descriptionPagerState = new xb.PagerState({pages: DATA.length});
+    const grid = panel.addGrid();
+    const imageRow = grid.addRow({weight: 0.5});
+    imageRow.addCol({weight: 0.1});
+    this.imagePager = new xb.HorizontalPager({state: this.descriptionPagerState});
+    imageRow.addCol({weight: 0.8}).add(this.imagePager);
+    imageRow.addCol({weight: 0.1});
+    for (let i = 0; i < DATA.length; i++) {
+      if (DATA[i].src) this.imagePager.children[i].addImage({src: DATA[i].src});
+      else this.imagePager.children[i].add(new xb.View());
+    }
+    grid.addRow({weight: 0.15});
+    const controlRow = grid.addRow({weight: 0.35});
+    const ctrlPanel = controlRow.addPanel({backgroundColor: '#000000D9'});
+    const ctrlGrid = ctrlPanel.addGrid();
+    {
+      const leftColumn = ctrlGrid.addCol({weight: 0.1});
+      this.backButton = leftColumn.addIconButton({text: 'arrow_back', fontSize: 0.5, paddingX: 0.2});
+      const midColumn = ctrlGrid.addCol({weight: 0.8});
+      const descRow = midColumn.addRow({weight: 0.8});
+      this.descRow = descRow;
+      this.add(this.descriptionPagerState);
+      this.descriptionPager = new xb.HorizontalPager({state: this.descriptionPagerState, enableRaycastOnChildren: false});
+      descRow.add(this.descriptionPager);
+      this.transcriptView = new xb.ScrollingTroikaTextView({text: '', fontSize: 0.05, textAlign: 'left'});
+      for (let i = 0; i < DATA.length; i++) {
+        this.descriptionPager.children[i].add(new xb.TextView({text: this.data[i].prompt, fontColor: '#ffffff', imageOverlay: 'images/gradient.png', imageOffsetX: 0.2}));
+      }
+      const botRow = midColumn.addRow({weight: 0.1});
+      botRow.add(new xb.PageIndicator({pagerState: this.descriptionPager.state, fontColor: '#FFFFFF'}));
+      const rightColumn = ctrlGrid.addCol({weight: 0.1});
+      this.forwardButton = rightColumn.addIconButton({text: 'arrow_forward', fontSize: 0.5, paddingX: -0.2});
+      this.micButton = ctrlGrid.addCol({weight: 0.1}).addIconButton({text: 'mic', fontSize: 0.8, paddingX: -2, paddingY: -1, fontColor: '#fdfdfdff'});
+      this.micButton.onTriggered = () => { this.toggleGeminiLive(); };
+    }
+    const orbiter = ctrlGrid.addOrbiter();
+    orbiter.addExitButton();
+    panel.updateLayouts();
+    this.panel = panel;
+    this.backButton.onTriggered = (id) => { this.loadPrevious(); };
+    this.forwardButton.onTriggered = (id) => { this.loadNext(); };
+  }
+  init() {
+    this.loadModels();
+    xb.core.renderer.localClippingEnabled = true;
+    this.add(new THREE.HemisphereLight(0x888877, 0x777788, 3));
+    const light = new THREE.DirectionalLight(0xffffff, 5.0);
+    light.position.set(-0.5, 4, 1.0);
+    this.add(light);
+    this.panel.position.set(0, 1.2, -1.0);
+    if (!xb.core.ai || !xb.core.ai.options.gemini.apiKey) this.micButton.visible = false;
+  }
+  reload() {
+    const roundedCurrentPage = Math.round(this.descriptionPagerState.currentPage);
+    if (roundedCurrentPage != this.journeyId) this.descriptionPagerState.currentPage = this.journeyId;
+  }
+  loadPrevious() { this.journeyId = (this.journeyId - 1 + this.data.length) % this.data.length; this.reload(); }
+  loadNext() { this.journeyId = (this.journeyId + 1 + this.data.length) % this.data.length; this.reload(); }
+  update() {
+    const deltaTime = xb.getDeltaTime();
+    this.time += deltaTime;
+    if (this.micButtonInitialY === null && this.micButton.visible) this.micButtonInitialY = this.micButton.position.y;
+    const roundedCurrentPage = Math.round(this.descriptionPagerState.currentPage);
+    if (this.journeyId != roundedCurrentPage) { this.journeyId = roundedCurrentPage; this.reload(); }
+    for (const model of this.data) model.modelAnimation?.update(deltaTime);
+    if (this.micButtonInitialY !== null && this.micButton.visible && this.isAIRunning) {
+      const jumpHeight = 0.05, jumpSpeed = 4;
+      this.micButton.position.y = this.micButtonInitialY + Math.abs(Math.sin(this.time * jumpSpeed)) * jumpHeight;
+    } else if (this.micButtonInitialY !== null) {
+      this.micButton.position.y = this.micButtonInitialY;
+    }
+  }
+  loadModels() {
+    for (let i = 0; i < this.data.length; i++) {
+      if (this.data[i].model) {
+        const data = this.data[i];
+        const model = new xb.ModelViewer({});
+        model.loadGLTFModel({
+          data: this.data[i].model,
+          setupPlatform: false,
+          setupRaycastCylinder: false,
+          setupRaycastBox: true,
+          renderer: xb.core.renderer,
+          onSceneLoaded: () => {
+            this.reload();
+            this.imagePager.children[i].children[0].add(model);
+            data.modelAnimation?.setModel(model);
+          },
+        });
+        this.models[i] = model;
+      }
+    }
+  }
+  async toggleGeminiLive() { return this.isAIRunning ? this.stopGeminiLive() : this.startGeminiLive(); }
+  async startGeminiLive() {
+    if (this.isAIRunning) return;
+    try {
+      this.descriptionPager.visible = false;
+      this.descRow.add(this.transcriptView);
+      this.transcriptView.visible = true;
+      this.transcriptionManager = new TranscriptionManager(this.transcriptView);
+      await xb.core.sound.enableAudio();
+      await this.startLiveAI();
+      this.startScreenshotCapture();
+      this.isAIRunning = true;
+    } catch (error) { console.error('Failed to start AI session:', error); this.cleanup(); this.isAIRunning = false; }
+  }
+  async stopGeminiLive() {
+    if (this.transcriptionManager) this.transcriptionManager.clear();
+    if (!this.isAIRunning) return;
+    this.descriptionPager.state.currentPage = this.journeyId;
+    this.descriptionPager.visible = true;
+    this.transcriptView.visible = false;
+    await xb.core.ai?.stopLiveSession?.();
+    this.cleanup();
+    if (this.screenshotInterval) { clearInterval(this.screenshotInterval); this.screenshotInterval = null; }
+  }
+  async startLiveAI() {
+    return new Promise((resolve, reject) => {
+      xb.core.ai.setLiveCallbacks({
+        onopen: resolve,
+        onmessage: (message) => this.handleAIMessage(message),
+        onerror: reject,
+        onclose: (closeEvent) => { this.cleanup(); this.isAIRunning = false; },
+      });
+      xb.core.ai.startLiveSession().catch(reject);
+    });
+  }
+  handleAIMessage(message) {
+    message.data && xb.core.sound.playAIAudio(message.data);
+    const content = message.serverContent;
+    if (content) {
+      content.inputTranscription?.text && this.transcriptionManager.handleInputTranscription(content.inputTranscription.text);
+      content.outputTranscription?.text && this.transcriptionManager.handleOutputTranscription(content.outputTranscription.text);
+      content.turnComplete && this.transcriptionManager.finalizeTurn();
+    }
+  }
+  cleanup() { this.isAIRunning = false; }
+  startScreenshotCapture() {
+    this.screenshotInterval = setInterval(async () => {
+      const base64Image = await xb.core.screenshotSynthesizer.getScreenshot();
+      if (base64Image) {
+        const base64Data = base64Image.startsWith('data:') ? base64Image.split(',')[1] : base64Image;
+        try { xb.core.ai?.sendRealtimeInput?.({video: {data: base64Data, mimeType: 'image/png'}}); }
+        catch (error) { console.warn(error); this.stopGeminiLive(); }
+      }
+    }, 1000);
+  }
+}
+const options = new xb.Options({antialias: true, reticles: {enabled: true}, visualizeRays: true});
+options.simulator.instructions.enabled = false;
+options.enableAI();
+options.enableCamera();
+async function start() {
+  xb.add(new GeminiIcebreakers());
+  await xb.init(options);
+}
+document.addEventListener('DOMContentLoaded', function () {
+  start();
+});
+</script>
+  </body>
+</html>