@memori.ai/memori-react 8.45.1 → 8.45.4

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

@@ -1,141 +0,0 @@
-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,
-      'mouthSmileLeft': -0.2,
-      'mouthSmileRight': -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,
-      'mouthSmileLeft': -0.6,
-      'mouthSmileRight': -0.6,
-    },
-  },
-  {
-    emotion: { italian: 'Sorpresa', english: 'Surprise' },
-    blendShapes: {
-      'browInnerUp': 0.5,
-      'browOuterUpLeft': 0.5,
-      'browOuterUpRight': 0.5,
-      'eyeWideLeft': 0.5,
-      'eyeWideRight': 0.5,
-      'mouthSmileLeft': 0.5,
-      'mouthSmileRight': 0.5,
-    },
-  },
-  {
-    emotion: { italian: 'Gioia', english: 'Joy' },
-    blendShapes: {
-      'browDownLeft': 0.5,
-      'browDownRight': 0.5,
-      'browInnerUp': 0.5,
-      'mouthSmileLeft': 0.5,
-      'mouthSmileRight': 0.5,
-    },
-  },
-];
-
-// 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',
-};
-
-/** Idle clips excluded from the male animation pack. */
-export const MALE_EXCLUDED_ANIMATIONS = new Set([
-  'Idle',
-  'Idle2'
-]);
-
-// 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;
-/** Multiplier applied to emotion morph target values before clamping (1 = raw mapping). */
-export const EMOTION_INTENSITY = 1.5;

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

@@ -1,145 +0,0 @@
-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

@@ -1,111 +0,0 @@
-.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: 340px;
-  max-height: 340px;
-  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

@@ -1,201 +0,0 @@
-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;