@moises.ai/design-system 3.4.4 → 3.4.6

package/src/components/StemGenerationForm/utils/formatFileInfo.js

@@ -0,0 +1,20 @@
+/**
+ * Formats the file information for the stem generation form
+ * @param {Object} formState - The form state
+ * @returns {string} The formatted file information
+ * @example
+ * formatFileInfo({
+ *   conditioningAudioSize: 1024,
+ *   conditioningAudioDuration: 10,
+ * })
+ * // "1MB"
+ */
+
+export const formatFileInfo = (formState) => {
+  const hasSize = formState.conditioningAudioSize;
+  const value = hasSize
+    ? (formState.conditioningAudioSize / 1024 / 1024).toFixed(2)
+    : formState.conditioningAudioDuration?.toFixed(0);
+  const unit = hasSize ? "MB" : "seconds";
+  return `${value} ${unit}`;
+};

package/src/components/StemGenerationForm/utils/getInstrumentDescription.js

@@ -0,0 +1,27 @@
+/**
+ * Gets the instrument description for the stem generation form
+ * @param {string} instrument - The instrument
+ * @param {Object} i18n - The i18n object
+ * @returns {string} The instrument description
+ * @example
+ * getInstrumentDescription("drums", i18n)
+ * // "rock drums with heavy kick"
+ */
+
+export const getInstrumentDescription = (instrument, i18n) => {
+  switch (instrument) {
+    case "drums":
+      return i18n._("rock drums with heavy kick");
+    case "bass":
+      return i18n._("funky bass line with slap bass");
+    case "guitar":
+      return i18n._("distorted electric guitar");
+    case 'keys':
+      return i18n._("lofi keys");
+    case 'strings':
+      return i18n._("strings with pizzicato");
+    case "generic":
+      return i18n._("lofi piano");
+  }
+};
+

package/src/components/StemGenerationForm/utils/getLocalizedGenerationInstruments.js

@@ -0,0 +1,31 @@
+import {
+  DrumsIcon,
+  BassIcon,
+  ElectricGuitarIcon,
+  Setlist2Icon,
+  KeysIcon,
+  StringsIcon,
+} from '../../../icons'
+
+/**
+ * Gets the localized generation instruments
+ * @param {Object} i18n - The i18n object
+ * @returns {Array} The localized generation instruments
+ * @example
+ * getLocalizedGenerationInstruments(i18n)
+ * // [{ value: "drums", label: "Drums", icon: DrumsIcon }, { value: "bass", label: "Bass", icon: BassIcon }, { value: "guitar", label: "Guitar", icon: ElectricGuitarIcon }, { value: "generic", label: "Others", icon: Setlist2Icon }]
+ */
+
+export const getLocalizedGenerationInstruments = (
+  i18n = { _: (text) => text },
+) => {
+  return [
+    { value: 'drums', label: i18n._('Drums'), icon: DrumsIcon },
+    { value: 'bass', label: i18n._('Bass'), icon: BassIcon },
+    { value: 'guitar', label: i18n._('Guitar'), icon: ElectricGuitarIcon },
+    { value: 'keys', label: i18n._('Keys'), icon: KeysIcon },
+    { value: 'strings', label: i18n._('Strings'), icon: StringsIcon },
+    { value: 'generic', label: i18n._('Others'), icon: Setlist2Icon },
+
+  ]
+}

package/src/components/StemGenerationForm/utils/index.js

@@ -0,0 +1,13 @@
+import { secondsToTime } from './secondsToTime'
+import { formatFileInfo } from './formatFileInfo'
+import { getInstrumentDescription } from './getInstrumentDescription'
+import { getLocalizedGenerationInstruments } from './getLocalizedGenerationInstruments'
+import { FORM_DEFAULTS, GUIDANCE_SCALE_DEFAULTS } from './constants'
+export {
+  formatFileInfo,
+  getInstrumentDescription,
+  getLocalizedGenerationInstruments,
+  GUIDANCE_SCALE_DEFAULTS,
+  FORM_DEFAULTS,
+  secondsToTime,
+}

package/src/components/StemGenerationForm/utils/secondsToTime.js

@@ -0,0 +1,15 @@
+/**
+ * Converts seconds to a time format (MM:SS)
+ * @param {number} seconds - The number of seconds
+ * @returns {string} The time format (MM:SS)
+ * @example
+ * secondsToTime(120)
+ * // "2:00"
+ */
+
+export const secondsToTime = (seconds) => {
+  const total = Math.floor(seconds)
+  const minutes = Math.floor(total / 60)
+  const secs = total % 60
+  return `${minutes}:${String(secs).padStart(2, '0')}`
+}

package/src/components/StemSeparationForm/GenerationStatus/GenerationStatus.jsx

@@ -0,0 +1,70 @@
+import { MessageWithAction, Text } from '../../../index'
+import { GenerationSourceCallout } from '../../GenerationSourceCallout/GenerationSourceCallout'
+
+/**
+ * @param {Object} props
+ * @param {Object { _: (text) => text } } props.i18n
+ * @param {string} props.trackId
+ * @param {string} props.trackName
+ * @param {Function} props.handleLocalFileClick
+ * @param {Function} props.onClearTrack
+ * @param {React.Ref} props.fileInputRef
+ * @param {Function} props.handleFileChange
+ */
+export function GenerationStatus({
+  i18n = { _: (text) => text },
+  trackId,
+  trackName,
+  handleLocalFileClick,
+  onClearTrack,
+  fileInputRef,
+  handleFileChange,
+}) {
+  const calloutTooltip = i18n._(
+    'The selected track will be used as context for stem separation.',
+  )
+
+  //when user click on dropdownMenu in track
+  if (trackId) {
+    return (
+      <GenerationSourceCallout
+        trackName={trackName}
+        onClick={onClearTrack}
+        ctaLabel={i18n._('Clear')}
+        tooltopContent={calloutTooltip}
+      />
+    )
+  }
+
+  //when user add a track from ingestion
+  if (trackName) {
+    return (
+      <GenerationSourceCallout
+        trackName={trackName}
+        onClick={handleLocalFileClick}
+        ctaLabel={i18n._('Remove')}
+        tooltopContent={calloutTooltip}
+      />
+    )
+  }
+
+  return (
+    <>
+      <MessageWithAction
+        ctaLabel={i18n._('Select')}
+        onClick={handleLocalFileClick}
+        showIcon={false}
+        showBackground={false}
+      >
+        <Text size="2">{i18n._('Select audio file to separate')}</Text>
+      </MessageWithAction>
+      <input
+        ref={fileInputRef}
+        type="file"
+        accept="audio/*"
+        style={{ display: 'none' }}
+        onChange={(e) => handleFileChange(e.target.files?.[0] ?? null)}
+      />
+    </>
+  )
+}

package/src/components/StemSeparationForm/StemSeparationForm.jsx

@@ -0,0 +1,354 @@
+import { GenerationStatus } from './GenerationStatus/GenerationStatus'
+import {
+  Box,
+  Flex,
+  FooterPanel,
+  MessageWithAction,
+  MultiSelectCards,
+  Switch,
+  Text,
+} from '../../index'
+import {
+  VocalIcon,
+  VocalsIcon,
+  DrumsIcon,
+  IsolateDrumsIcon,
+  ElectricGuitarIcon,
+  AcousticGuitarIcon,
+  BassIcon,
+  PianoIcon,
+  KeysIcon,
+  MusicIcon,
+  StringsIcon,
+  WindIcon,
+  HiFiIcon,
+} from '../../icons'
+import { useSubmitWithFeedback } from '../../utils/useSubmitWithFeedback'
+
+const iconMap = {
+  freeVocalInstruments: <VocalIcon width={16} height={16} />,
+  freeVocalBassDrumsOthers: <MusicIcon width={16} height={16} />,
+  vocals: <VocalIcon width={16} height={16} />,
+  leadVocals: <VocalsIcon width={16} height={16} />,
+  backingVocals: <VocalsIcon width={16} height={16} />,
+  bass: <BassIcon width={16} height={16} />,
+  guitars: <ElectricGuitarIcon width={16} height={16} />,
+  rhythmGuitars: <ElectricGuitarIcon width={16} height={16} />,
+  soloGuitars: <ElectricGuitarIcon width={16} height={16} />,
+  acousticGuitar: <AcousticGuitarIcon width={16} height={16} />,
+  electricGuitar: <ElectricGuitarIcon width={16} height={16} />,
+  strings: <StringsIcon width={16} height={16} />,
+  piano: <PianoIcon width={16} height={16} />,
+  keys: <KeysIcon width={16} height={16} />,
+  wind: <WindIcon width={16} height={16} />,
+  drums: <DrumsIcon width={16} height={16} />,
+  kickDrums: <IsolateDrumsIcon width={16} height={16} />,
+  snareDrums: <IsolateDrumsIcon width={16} height={16} />,
+  toms: <IsolateDrumsIcon width={16} height={16} />,
+  hiHat: <IsolateDrumsIcon width={16} height={16} />,
+  cymbals: <IsolateDrumsIcon width={16} height={16} />,
+  other: <MusicIcon width={16} height={16} />,
+}
+
+const mutualExclusiveStems = {
+  vocals: ['leadVocals', 'backingVocals'],
+  leadVocals: ['vocals'],
+  backingVocals: ['vocals'],
+  guitars: ['rhythmGuitars', 'soloGuitars', 'acousticGuitar', 'electricGuitar'],
+  rhythmGuitars: ['guitars', 'acousticGuitar', 'electricGuitar'],
+  soloGuitars: ['guitars', 'acousticGuitar', 'electricGuitar'],
+  acousticGuitar: ['guitars', 'rhythmGuitars', 'soloGuitars'],
+  electricGuitar: ['guitars', 'rhythmGuitars', 'soloGuitars'],
+  drums: ['kickDrums', 'snareDrums', 'toms', 'hiHat', 'cymbals'],
+  kickDrums: ['drums'],
+  snareDrums: ['drums'],
+  toms: ['drums'],
+  hiHat: ['drums'],
+  cymbals: ['drums'],
+}
+
+export const StemSeparationForm = ({
+  i18n = { _: (text) => text },
+  freeStems,
+  paidStems,
+  input,
+  onSelectInput,
+  onRemoveInput,
+  onSubmit,
+  formState,
+  onFormStateChange,
+  isLoading,
+  error,
+  showHiFiPaywall,
+  onClearTrack,
+  showStemsPaywall,
+  showHiFiSwitch,
+}) => {
+  const { submitted, handleSubmit } = useSubmitWithFeedback(onSubmit)
+
+  const stems = [
+    {
+      value: 'freeVocalInstruments',
+      name: i18n._('Vocals & Instruments'),
+      category: 'free',
+    },
+    {
+      value: 'freeVocalBassDrumsOthers',
+      name: i18n._('Vocal, Bass, Drums & Others'),
+      category: 'free',
+    },
+    {
+      value: 'vocals',
+      name: i18n._('Vocals'),
+      category: 'paid',
+    },
+    {
+      value: 'leadVocals',
+      name: i18n._('Lead Vocals'),
+      category: 'paid',
+    },
+    {
+      value: 'backingVocals',
+      name: i18n._('Backing Vocals'),
+      category: 'paid',
+    },
+    {
+      value: 'bass',
+      name: i18n._('Bass'),
+      category: 'paid',
+    },
+    {
+      value: 'guitars',
+      name: i18n._('Guitars'),
+      category: 'paid',
+    },
+    {
+      value: 'rhythmGuitars',
+      name: i18n._('Rhythm Guitars'),
+      category: 'paid',
+    },
+    {
+      value: 'soloGuitars',
+      name: i18n._('Solo Guitars'),
+      category: 'paid',
+    },
+    {
+      value: 'acousticGuitar',
+      name: i18n._('Acoustic Guitar'),
+      category: 'paid',
+    },
+    {
+      value: 'electricGuitar',
+      name: i18n._('Electric Guitar'),
+      category: 'paid',
+    },
+    {
+      value: 'strings',
+      name: i18n._('Strings'),
+      category: 'paid',
+    },
+    {
+      value: 'piano',
+      name: i18n._('Piano'),
+      category: 'paid',
+    },
+    {
+      value: 'keys',
+      name: i18n._('Keys'),
+      category: 'paid',
+    },
+    {
+      value: 'wind',
+      name: i18n._('Wind'),
+      category: 'paid',
+    },
+    {
+      value: 'drums',
+      name: i18n._('Drums'),
+      category: 'paid',
+    },
+    {
+      value: 'kickDrums',
+      name: i18n._('Kick Drums'),
+      category: 'paid',
+    },
+    {
+      value: 'snareDrums',
+      name: i18n._('Snare Drums'),
+      category: 'paid',
+    },
+    {
+      value: 'toms',
+      name: i18n._('Toms'),
+      category: 'paid',
+    },
+    {
+      value: 'hiHat',
+      name: i18n._('Hi-Hat'),
+      category: 'paid',
+    },
+    {
+      value: 'cymbals',
+      name: i18n._('Cymbals'),
+      category: 'paid',
+    },
+    {
+      value: 'other',
+      name: i18n._('Other'),
+      category: 'paid',
+    },
+  ]
+
+  const onChangePaidStems = async (item) => {
+    if (item.isLocked) {
+      showStemsPaywall(item.value)
+      return
+    }
+
+    const stem = item.value
+
+    onFormStateChange((prev) => {
+      let newSelectedStems = [...prev.selectedStems]
+
+      // Check if the stem is already selected (toggle behavior)
+      if (newSelectedStems.includes(stem)) {
+        newSelectedStems = newSelectedStems.filter((s) => s !== stem)
+      } else {
+        // If stem being selected has mutually exclusive items that are already selected
+        // remove those items and add the new one
+        const mutuallyExclusiveItems = mutualExclusiveStems[stem] || []
+
+        // Filter out any mutually exclusive items that are already selected
+        newSelectedStems = newSelectedStems.filter(
+          (s) => !mutuallyExclusiveItems.includes(s),
+        )
+
+        // Add the new stem
+        newSelectedStems.push(stem)
+      }
+
+      // Special case for "other" - if it's the only stem selected, clear selection
+      if (newSelectedStems.includes('other') && newSelectedStems.length === 1) {
+        return { ...prev, selectedStems: [] }
+      }
+
+      return { ...prev, selectedStems: newSelectedStems }
+    })
+  }
+
+  const onChangeFreeStems = (item) => {
+    onFormStateChange((prev) => ({
+      ...prev,
+      selectedStems: item.value,
+    }))
+  }
+
+  return (
+    <Flex direction="column" height="100%">
+      {freeStems && (
+        <Flex direction="column" pb="2">
+          <Text size="2" weight="medium" mb="2">
+            {i18n._('Basic Models')}
+          </Text>
+          <MultiSelectCards
+            items={stems
+              .filter((stem) => stem.category === 'free')
+              .map((stem) => ({
+                name: stem.name,
+                value: stem.value,
+                icon: iconMap[stem.value],
+              }))}
+            value={formState.selectedStems}
+            onSelect={onChangeFreeStems}
+          />
+          <Text size="2" weight="medium" mt="2">
+            {i18n._('Music Stems')}
+          </Text>
+        </Flex>
+      )}
+      <MultiSelectCards
+        items={stems
+          .filter((stem) => stem.category === 'paid')
+          .filter((stem) => paidStems.some((p) => p.value === stem.value))
+          .map((stem) => ({
+            name: stem.name,
+            value: stem.value,
+            icon: iconMap[stem.value],
+            disabled:
+              formState.selectedStems.length === 0 && stem.value === 'Other',
+            isLocked: paidStems.find((p) => p.value === stem.value)?.isLocked,
+          }))}
+        value={formState.selectedStems}
+        onSelect={onChangePaidStems}
+        style={{
+          marginBottom: '12px',
+        }}
+      />
+      <Box
+        style={{
+          position: 'sticky',
+          bottom: 0,
+          left: 0,
+          right: 0,
+          borderTop: '1px solid var(--color-border)',
+          marginTop: 'auto',
+        }}
+      >
+        <FooterPanel
+          title={i18n._('Separate Stems')}
+          disabled={!formState?.selectedStems?.length || !formState?.trackName}
+          loading={isLoading}
+          onClick={handleSubmit}
+          besideFooter={
+            <Flex align="center" gap="2">
+              {showHiFiSwitch && (
+                <Switch checked={false} onCheckedChange={showHiFiPaywall} />
+              )}
+
+              <HiFiIcon />
+            </Flex>
+          }
+          color="cyan"
+          style={{
+            paddingBottom: '12px',
+            paddingRight: '12px',
+          }}
+        >
+          <Flex
+            pt="4"
+            width="100%"
+            style={{
+              borderTop: '1px solid var(--neutral-alpha-3)',
+            }}
+          >
+            {!submitted && !error && (
+              <GenerationStatus
+                i18n={i18n}
+                trackId={formState.trackId}
+                trackName={formState.trackName}
+                handleLocalFileClick={onRemoveInput}
+                onClearTrack={onClearTrack}
+                fileInputRef={input}
+                handleFileChange={onSelectInput}
+              />
+            )}
+            {submitted && !error && (
+              <MessageWithAction showIcon={false} showBackground={false}>
+                <Text size="2">{i18n._('Stems separation initialized!')}</Text>
+              </MessageWithAction>
+            )}
+            {error && (
+              <MessageWithAction
+                type="error"
+                showIcon={false}
+                showBackground={false}
+              >
+                <Text size="2">{error}</Text>
+              </MessageWithAction>
+            )}
+          </Flex>
+        </FooterPanel>
+      </Box>
+    </Flex>
+  )
+}