@memori.ai/memori-react 6.8.1 → 6.8.4

package/src/components/Avatar/AvatarView/AvatarComponent/constants.ts

@@ -0,0 +1,128 @@
+import { Vector3, Euler } from 'three';
+import { AnimationConfig } from './components/FullbodyAvatar/types';
+
+// Position and rotation of the avatar
+export const AVATAR_POSITION = new Vector3(0, -1, 0);
+export const AVATAR_ROTATION = new Euler(0.175, 0, 0);
+export const AVATAR_POSITION_ZOOMED = new Vector3(0, -1.45, 0);
+
+// Factor for lerping the scale of the avatar
+export const SCALE_LERP_FACTOR = 0.1;
+
+// Maximum number of idle loops before forcing change
+export const MAX_IDLE_LOOPS_DEFAULT = 5;
+// Type definitions for emotion handling
+interface EmotionMappingItem {
+  italian: string;
+  english: string;
+}
+export type EmotionMapping = EmotionMappingItem[];
+
+interface BlendShapeMapItem {
+  emotion: { italian: string; english: string };
+  blendShapes: Record<string, number>;
+}
+export type BlendShapeMap = BlendShapeMapItem[];
+
+// Italian to English emotion mapping
+// Italian to English emotion mapping
+export const MAPPING_EMOTIONS_ITALIAN_TO_ENGLISH: EmotionMapping = [
+  {
+    italian: 'Gioia',
+    english: 'Joy',
+  },
+  {
+    italian: 'Rabbia',
+    english: 'Anger',
+  },
+  {
+    italian: 'Sorpresa',
+    english: 'Surprise',
+  },
+  {
+    italian: 'Tristezza',
+    english: 'Sadness',
+  },
+  {
+    italian: 'Timore',
+    english: 'Fear',
+  },
+];
+
+// Mapping of blend shapes to emotions for RPM avatars
+export const MAPPING_BLEND_SHAPE_TO_EMOTION_RPM: BlendShapeMap = [
+  {
+    emotion: { italian: 'Rabbia', english: 'Anger' },
+    blendShapes: {
+      'browDownLeft': 0.5,
+      'browDownRight': 0.5,
+      'browOuterUpLeft': 0.5,
+      'browOuterUpRight': 0.5,
+      'mouthSmile': -0.2,
+    },
+  },
+  {
+    emotion: { italian: 'Timore', english: 'Fear' },
+    blendShapes: {
+      'browOuterUpLeft': -0.5,
+      'browOuterUpRight': -0.5,
+      'eyeWideLeft': -0.5,
+      'eyeWideRight': -0.5,
+    },
+  },
+  {
+    emotion: { italian: 'Tristezza', english: 'Sadness' },
+    blendShapes: {
+      'browDownLeft': -0.5,
+      'browDownRight': -0.5,
+      'eyeSquintLeft': 0.5,
+      'eyeSquintRight': 0.5,
+      'mouthSmile': -0.6,
+    },
+  },
+  {
+    emotion: { italian: 'Sorpresa', english: 'Surprise' },
+    blendShapes: {
+      'browInnerUp': 0.5,
+      'browOuterUpLeft': 0.5,
+      'browOuterUpRight': 0.5,
+      'eyeWideLeft': 0.5,
+      'eyeWideRight': 0.5,
+    },
+  },
+  {
+    emotion: { italian: 'Gioia', english: 'Joy' },
+    blendShapes: {
+      'browDownLeft': 0.5,
+      'browDownRight': 0.5,
+      'browInnerUp': 0.5,
+      'mouthSmile': 0.8,
+    },
+  },
+];
+
+// URL for the male avatar
+export const ANIMATION_URLS = {
+  MALE: 'https://assets.memori.ai/api/v2/asset/2c5e88a4-cf62-408b-9ef0-518b099dfcb2.glb',
+  FEMALE:
+    'https://assets.memori.ai/api/v2/asset/2adc934b-24b2-45bd-94ad-ffec58d3cb32.glb',
+};
+
+// Blink configuration
+export const BLINK_CONFIG = {
+  minInterval: 1000,
+  maxInterval: 5000,
+  blinkDuration: 150,
+};
+
+// Default animation configuration
+export const DEFAULT_CONFIG: AnimationConfig = {
+  fadeInDuration: 0.8,
+  fadeOutDuration: 0.8,
+  idleCount: 5,
+  timeScale: 1.0,
+};
+
+// Smoothing factors for emotion and viseme morphs
+export const EMOTION_SMOOTHING = 0.3;
+export const VISEME_SMOOTHING = 0.5;

package/src/components/Avatar/AvatarView/AvatarComponent/lights/Lights.tsx

@@ -0,0 +1,145 @@
+import { useThree } from '@react-three/fiber';
+import React, { FC, useEffect, useState } from 'react';
+import { Object3D, Vector3 } from 'three';
+
+export interface LightingProps {
+  keyLightIntensity?: number;
+  keyLightColor?: string; // css-color string
+
+  fillLightIntensity?: number;
+  fillLightColor?: string; // css-color string
+  fillLightPosition?: Vector3;
+
+  backLightIntensity?: number;
+  backLightColor?: string; // css-color string
+  backLightPosition?: Vector3;
+
+  /**
+   * The position in space which is used by the lights to shine at. (Defaults to approximate head height)
+   */
+  lightTarget?: Vector3;
+}
+
+const fromEntries = (arr: Array<any>) =>
+  Object.assign({}, ...arr.map(([k, v]) => ({ [k]: v })));
+
+export const definedProps = (obj: Object) =>
+  fromEntries(
+    // eslint-disable-next-line
+    Object.entries(obj).filter(([_, v]) => v !== undefined)
+  );
+
+export const LIGHT_CONFIG = Object.freeze({
+  fillLightAngle: Math.PI / 3,
+  backLightAngle: Math.PI / 8,
+  keyLightAngle: Math.PI / 2, // Reduced angle for more focused key light
+  silhouetteLightAngle: Math.PI * 1.25, // Slightly reduced angle
+  keyLightPosition: new Vector3(0.75, 1.75, 0.75), // Adjusted for better face illumination
+  liftLightPosition: new Vector3(0.25, 1.5, 2.0), // Lower height for better body lighting
+  dirLightPosition: new Vector3(-0.75, 2.5, -1.0),
+  silhouetteLightPosition: new Vector3(-1.25, 0.25, -1.25), // Adjusted for better rim lighting
+  defaultProps: {
+    keyLightIntensity: 1.2, // Increased for better main illumination
+    keyLightColor: '#FFF5EB', // Slightly warmer white
+    fillLightIntensity: 2.5, // Reduced to prevent over-exposure
+    fillLightColor: '#A4C4FF', // Softer blue
+    fillLightPosition: new Vector3(-0.6, 1.7, -0.4), // Adjusted for better fill
+    backLightIntensity: 4.0, // Reduced to prevent over-exposure
+    backLightColor: '#FFD4A8', // Softer orange
+    backLightPosition: new Vector3(0.6, 1.7, -1.0), // Adjusted for better rim light
+    lightTarget: new Vector3(0.0, 1.65, 0.0), // Slightly lower target point
+  } as Required<LightingProps>,
+});
+
+const Lights: FC<LightingProps> = lightingProps => {
+  const {
+    keyLightIntensity,
+    keyLightColor,
+    fillLightIntensity,
+    fillLightColor,
+    fillLightPosition,
+    backLightIntensity,
+    backLightColor,
+    backLightPosition,
+    lightTarget,
+  } = Object.assign(LIGHT_CONFIG.defaultProps, definedProps(lightingProps));
+
+  const { scene } = useThree();
+
+  const [targets] = useState<{ head: Object3D; shoe: Object3D }>({
+    head: new Object3D(),
+    shoe: new Object3D(),
+  });
+
+  useEffect(() => {
+    targets.head.position.copy(lightTarget);
+    targets.shoe.position.set(0.0, 0.1, 0.0); // Slightly raised shoe target
+
+    scene.add(targets.head);
+    scene.add(targets.shoe);
+
+    return () => {
+      scene.remove(targets.head);
+      scene.remove(targets.shoe);
+    };
+  }, [scene, targets, lightTarget]);
+
+  return (
+    <group>
+      {/* Fill light - creates soft blue rim on the right face side */}
+      <spotLight
+        position={fillLightPosition}
+        target={targets.head}
+        angle={LIGHT_CONFIG.fillLightAngle}
+        color={fillLightColor}
+        intensity={fillLightIntensity}
+        castShadow
+        shadow-bias={-0.0001}
+        penumbra={0.2}
+      />
+      {/* Back light - creates warm rim on the left face side */}
+      <spotLight
+        position={backLightPosition}
+        target={targets.head}
+        angle={LIGHT_CONFIG.backLightAngle}
+        color={backLightColor}
+        intensity={backLightIntensity}
+        castShadow
+        shadow-bias={-0.0001}
+        penumbra={0.2}
+      />
+      {/* Key light - main face illumination */}
+      <spotLight
+        position={LIGHT_CONFIG.keyLightPosition}
+        target={targets.head}
+        angle={LIGHT_CONFIG.keyLightAngle}
+        color={keyLightColor}
+        intensity={keyLightIntensity}
+        penumbra={0.3}
+        castShadow
+      />
+      {/* Lift light - soft body and shoe illumination */}
+      <spotLight
+        position={LIGHT_CONFIG.liftLightPosition}
+        target={targets.shoe}
+        angle={LIGHT_CONFIG.keyLightAngle}
+        color={keyLightColor}
+        intensity={keyLightIntensity * 0.3}
+        penumbra={0.4}
+      />
+      {/* Silhouette light - rim lighting for arms and legs */}
+      <spotLight
+        position={LIGHT_CONFIG.silhouetteLightPosition}
+        target={targets.head}
+        angle={LIGHT_CONFIG.silhouetteLightAngle}
+        color={keyLightColor}
+        intensity={keyLightIntensity * 0.3}
+        penumbra={0.3}
+      />
+      {/* Ambient light for overall scene brightness */}
+      <ambientLight intensity={0.2} color="#FFF8EF" />
+    </group>
+  );
+};
+
+export default Lights;

package/src/components/Avatar/AvatarView/AvatarComponent/positionControls/positionControls.css

@@ -0,0 +1,111 @@
+.memori--position-controls {
+  position: fixed;
+  z-index: 1000;
+  top: auto; /* Remove top positioning */
+  top: 65px; /* Position from bottom to avoid overlapping with buttons */
+  left: 15px; /* Remove left positioning */
+  display: flex;
+  width: 380px; /* Fixed width */
+  max-width: 100%; /* Maximum width relative to screen */
+  height: 320px;
+  max-height: 320px;
+  flex-direction: column;
+  padding: 16px;
+  border-radius: 16px;
+  -webkit-backdrop-filter: blur(10px);
+  backdrop-filter: blur(10px);
+  background-color: var(--memori-inner-bg, #fff);
+  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.15);
+  gap: 0.5rem;
+  text-align: left;
+  transform: none; /* Remove transform */
+}
+
+/* Slider adjustments */
+.memori--slider-container {
+  display: flex;
+  flex-direction: column;
+  padding: 8px 0;
+  gap: 0.75rem;
+}
+
+.memori--slider-label {
+  color: var(--memori-text-color, #333);
+  /* margin-bottom: 8px; */
+  font-size: 1.2rem;
+}
+
+/* Button adjustments */
+.memori--preset-buttons {
+  display: flex;
+  flex-direction: row;
+  margin-top: 0px;
+  margin-bottom: 12px;
+  /* justify-content: space-between; */
+  /* margin-top: 36px; */
+  gap: 8px;
+}
+
+.memori--preset-buttons button {
+  min-height: 36px;
+  flex: 1;
+  padding: 8px 4px;
+  font-size: 0.9rem;
+}
+
+/* Close button */
+.memori--position-controls-close {
+  position: absolute;
+  top: -25px;
+  right: -30px;
+  border-radius: 50%;
+  background-color: var(--memori-inner-bg, #fff);
+}
+
+.memori--position-controls-close-button {
+  min-width: 36px;
+  min-height: 36px;
+  padding: 8px;
+}
+
+/* Totem specific adjustments */
+@media screen and (max-width: 480px) {
+  .memori--position-controls {
+    right: 10px;
+    bottom: 80px;
+    width: 280px;
+  }
+
+  .memori--preset-buttons {
+    margin-top: 32px;
+  }
+  
+  .memori--preset-buttons button {
+    padding: 6px 4px;
+    font-size: 0.85rem;
+  }
+  
+  .memori--slider-container {
+    padding: 6px 0;
+  }
+}
+
+/* Portrait/vertical orientation */
+@media screen and (min-height: 800px) {
+  .memori--position-controls {
+    bottom: 120px;
+  }
+
+  /* .memori--preset-buttons {
+    margin-top: 32px;
+  } */
+  
+  .memori--slider-label {
+    font-size: 1.1rem;
+  }
+  
+  .memori--preset-buttons button {
+    padding: 10px 6px;
+    font-size: 1rem;
+  }
+}

package/src/components/Avatar/AvatarView/AvatarComponent/positionControls/positionControls.tsx

@@ -0,0 +1,201 @@
+import { useEffect, useRef } from 'react';
+import { setLocalConfig } from '../../../../../helpers/configuration';
+import { useTranslation } from 'react-i18next';
+import Slider from '../../../../../components/ui/Slider';
+import Button from '../../../../ui/Button';
+import Close from '../../../../icons/Close';
+
+interface PositionControlsProps {
+  avatarHeight: number;
+  avatarDepth: number;
+  halfBody: boolean;
+  setAvatarHeight: (value: number) => void;
+  setAvatarDepth: (value: number) => void;
+  setEnablePositionControls: (value: boolean) => void;
+}
+
+// eslint-disable-next-line no-undef
+const PositionControls: React.FC<PositionControlsProps> = ({
+  avatarHeight,
+  avatarDepth,
+  setAvatarHeight,
+  setAvatarDepth,
+  halfBody,
+  setEnablePositionControls,
+}: PositionControlsProps) => {
+  const normalPosition = halfBody
+    ? { height: 80, depth: 50 }
+    : { height: 25, depth: 25 };
+  const zoomedPosition = halfBody
+    ? { height: 55, depth: 10 }
+    : { height: 15, depth: 5 };
+  const farPosition = halfBody
+    ? { height: 100, depth: 80 }
+    : { height: 65, depth: 100 };
+  const settingsRef = useRef<Record<string, any>>({
+    height: avatarHeight,
+    depth: avatarDepth,
+    zoomed: false,
+    normal: false,
+    far: false,
+  });
+  const { t } = useTranslation();
+
+  // Update settings when values change externally
+  useEffect(() => {
+    settingsRef.current.height = avatarHeight;
+    settingsRef.current.depth = avatarDepth;
+  }, [avatarHeight, avatarDepth]);
+
+  // Keyboard controls for depth
+  useEffect(() => {
+    const handleKeyDown = (event: KeyboardEvent) => {
+      if (
+        event.key === '-' ||
+        (event.key === '_' && settingsRef.current.depth < 100)
+      ) {
+        const newValue = Math.min(settingsRef.current.depth + 10, 100);
+        setAvatarDepth(newValue);
+        setLocalConfig('avatarDepth', newValue);
+      } else if (
+        (event.key === '+' || event.key === '=') &&
+        settingsRef.current.depth > -100
+      ) {
+        const newValue = Math.max(settingsRef.current.depth - 10, -100);
+        setAvatarDepth(newValue);
+        setLocalConfig('avatarDepth', newValue);
+      }
+    };
+
+    //add event listeners for plus and minus
+    window.addEventListener('keydown', handleKeyDown);
+    return () => {
+      window.removeEventListener('keydown', handleKeyDown);
+    };
+  }, [setAvatarDepth]);
+
+  useEffect(() => {
+    const handleArrowUp = (event: KeyboardEvent) => {
+      if (event.key === 'ArrowUp' && settingsRef.current.height < 100) {
+        const newValue = settingsRef.current.height + 5;
+        setAvatarHeight(newValue);
+        setLocalConfig('avatarHeight', newValue);
+      }
+    };
+
+    const handleArrowDown = (event: KeyboardEvent) => {
+      if (event.key === 'ArrowDown' && settingsRef.current.height > 0) {
+        const newValue = settingsRef.current.height - 5;
+        setAvatarHeight(newValue);
+        setLocalConfig('avatarHeight', newValue);
+      }
+    };
+
+    window.addEventListener('keydown', handleArrowUp);
+    window.addEventListener('keydown', handleArrowDown);
+
+    return () => {
+      window.removeEventListener('keydown', handleArrowUp);
+      window.removeEventListener('keydown', handleArrowDown);
+    };
+  }, [setAvatarHeight]);
+
+  return (
+    <div className="memori--position-controls">
+      <div className="memori--position-controls-close">
+        <Button
+          ghost
+          icon={<Close />}
+          outlined
+          danger
+          shape="circle"
+          className="memori--position-controls-close-button"
+          onClick={() => {
+            setEnablePositionControls(false);
+          }}
+        />
+      </div>
+      {/* <div className="memori--slider-container"> */}
+        <Slider
+          defaultValue={settingsRef.current.height}
+          min={0.5}
+          max={100}
+          label={t('write_and_speak.height')}
+          step={1}
+          onChange={(value: number) => {
+            setAvatarHeight(value);
+            setLocalConfig('avatarHeight', value);
+          }}
+        />
+      {/* </div> */}
+      {/* <div className="memori--slider-container"> */}
+        <Slider
+          defaultValue={settingsRef.current.depth}
+          min={0.5}
+          max={100}
+          step={5}
+          label={t('write_and_speak.depth')}
+          onChange={(value: number) => {
+            setAvatarDepth(value);
+            setLocalConfig('avatarDepth', value);
+          }}
+        />
+      {/* </div> */}
+      <div className="memori--preset-buttons">
+        <Button
+          outlined
+          isActive={
+            avatarHeight ===
+              (halfBody ? zoomedPosition.height : normalPosition.height) &&
+            avatarDepth ===
+              (halfBody ? zoomedPosition.depth : normalPosition.depth)
+          }
+          onClick={() => {
+            setAvatarHeight(zoomedPosition.height);
+            setAvatarDepth(zoomedPosition.depth);
+            setLocalConfig('avatarHeight', zoomedPosition.height);
+            setLocalConfig('avatarDepth', zoomedPosition.depth);
+          }}
+        >
+          {t('write_and_speak.zoomed')}
+        </Button>
+        <Button
+          outlined
+          isActive={
+            avatarHeight ===
+              (halfBody ? normalPosition.height : zoomedPosition.height) &&
+            avatarDepth ===
+              (halfBody ? normalPosition.depth : zoomedPosition.depth)
+          }
+          onClick={() => {
+            setAvatarHeight(normalPosition.height);
+            setAvatarDepth(normalPosition.depth);
+            setLocalConfig('avatarHeight', normalPosition.height);
+            setLocalConfig('avatarDepth', normalPosition.depth);
+          }}
+        >
+          {t('write_and_speak.normal')}
+        </Button>
+        <Button
+          outlined
+          isActive={
+            avatarHeight ===
+              (halfBody ? farPosition.height : normalPosition.height) &&
+            avatarDepth ===
+              (halfBody ? farPosition.depth : normalPosition.depth)
+          }
+          onClick={() => {
+            setAvatarHeight(farPosition.height);
+            setAvatarDepth(farPosition.depth);
+            setLocalConfig('avatarHeight', farPosition.height);
+            setLocalConfig('avatarDepth', farPosition.depth);
+          }}
+        >
+          {t('write_and_speak.far')}
+        </Button>
+      </div>
+    </div>
+  );
+};
+
+export default PositionControls;