@moises.ai/design-system 3.4.5 → 3.5.0

package/src/components/StemGenerationForm/CreativeFreedomSection/CreativeFreedomSection.jsx

@@ -0,0 +1,185 @@
+import { Flex, Text, Switch } from '@radix-ui/themes'
+import { Slider } from '../../Slider/Slider'
+import { TooltipWithInfoIcon } from '../../TooltipWithInfoIcon/TooltipWithInfoIcon'
+import { GUIDANCE_SCALE_DEFAULTS } from '../utils'
+import styles from './CreativeFreedomSection.module.css'
+import { useCallback } from 'react'
+
+export function CreativeFreedomSection({
+  formState,
+  instrument,
+  i18n = { _: (text) => text },
+  onFormStateChange,
+  showAdvancedControlsPaywall,
+}) {
+  const isCustomizeEnabled = formState.customizeCreativeFreedom || false
+
+  const handleCustomizeCreativeFreedomChange = useCallback(
+    async (checked) => {
+      if (await showAdvancedControlsPaywall()) {
+        return
+      }
+
+      onFormStateChange({
+        ...formState,
+        customizeCreativeFreedom: checked,
+        // initialize defaults for sliders when enabling
+        guidanceClap: checked
+          ? formState.guidanceClap ??
+            GUIDANCE_SCALE_DEFAULTS[formState.instrument]?.clap ??
+            4
+          : null,
+        guidanceContextAudio: checked
+          ? formState.guidanceContextAudio ??
+            GUIDANCE_SCALE_DEFAULTS[formState.instrument]?.context ??
+            4
+          : null,
+        guidanceContextChroma: checked
+          ? formState.instrument === 'drums'
+            ? null
+            : formState.guidanceContextChroma ??
+              GUIDANCE_SCALE_DEFAULTS[formState.instrument]?.chroma ??
+              4
+          : null,
+      })
+    },
+    [formState, onFormStateChange, showAdvancedControlsPaywall],
+  )
+
+  return (
+    <Flex direction="column" gap="5">
+      <Flex direction="column" gap="2">
+        <Flex justify="between" align="center">
+          <Flex align="center" gap="2">
+            <Text size="2">{i18n._('Creative Control')}</Text>
+            <TooltipWithInfoIcon
+              content={i18n._(
+                'Enable to manually adjust how creative the generation is. Low values are more creative and adventurous, high values are more strict. You can keep all sliders at same value or change them individually to prioritize one aspect over the others.',
+              )}
+            />
+          </Flex>
+
+          <Switch
+            checked={isCustomizeEnabled}
+            onCheckedChange={handleCustomizeCreativeFreedomChange}
+          />
+        </Flex>
+        {isCustomizeEnabled && (
+          <Flex direction="column" gap="2">
+            {/* Conditioning strictness (clap) */}
+            <Flex direction="column" gap="2">
+              <Flex align="center" justify="between">
+                <Flex align="center" gap="2">
+                  <Text size="2">{i18n._('Conditioning strictness')}</Text>
+                  <TooltipWithInfoIcon
+                    content={i18n._(
+                      'How strongly to follow requested conditioning or preset',
+                    )}
+                  />
+                </Flex>
+                <Text size="2" className={styles.neutral9}>
+                  {(
+                    formState.guidanceClap ??
+                    GUIDANCE_SCALE_DEFAULTS[instrument]?.clap ??
+                    4
+                  ).toFixed(1)}
+                </Text>
+              </Flex>
+              <Slider
+                value={[
+                  formState.guidanceClap ??
+                    GUIDANCE_SCALE_DEFAULTS[instrument]?.clap ??
+                    4,
+                ]}
+                size="1"
+                onValueChange={(value) =>
+                  onFormStateChange({ ...formState, guidanceClap: value[0] })
+                }
+                max={16}
+                min={0}
+                step={0.1}
+              />
+            </Flex>
+
+            {/* Context strictness (context_audio) */}
+            <Flex direction="column" gap="2">
+              <Flex align="center" justify="between">
+                <Flex align="center" gap="2">
+                  <Text size="2">{i18n._('Context strictness')}</Text>
+                  <TooltipWithInfoIcon
+                    content={i18n._(
+                      'How strictly to follow your audio context.',
+                    )}
+                  />
+                </Flex>
+                <Text size="2" className={styles.neutral9}>
+                  {(
+                    formState.guidanceContextAudio ??
+                    GUIDANCE_SCALE_DEFAULTS[instrument]?.context ??
+                    4
+                  ).toFixed(1)}
+                </Text>
+              </Flex>
+              <Slider
+                value={[
+                  formState.guidanceContextAudio ??
+                    GUIDANCE_SCALE_DEFAULTS[instrument]?.context ??
+                    4,
+                ]}
+                size="1"
+                onValueChange={(value) =>
+                  onFormStateChange({
+                    ...formState,
+                    guidanceContextAudio: value[0],
+                  })
+                }
+                max={16}
+                min={0}
+                step={0.1}
+              />
+            </Flex>
+
+            {/* Harmonic strictness (context_chroma) */}
+            <Flex direction="column" gap="2">
+              <Flex align="center" justify="between">
+                <Flex align="center" gap="2">
+                  <Text size="2">{i18n._('Harmonic strictness')}</Text>
+                  <TooltipWithInfoIcon
+                    content={i18n._(
+                      'How strictly to follow chords/key of your context',
+                    )}
+                  />
+                </Flex>
+                <Text size="2" className={styles.neutral9}>
+                  {(
+                    formState.guidanceContextChroma ??
+                    GUIDANCE_SCALE_DEFAULTS[instrument]?.chroma ??
+                    4
+                  ).toFixed(1)}
+                </Text>
+              </Flex>
+              <Slider
+                value={[
+                  formState.guidanceContextChroma ??
+                    GUIDANCE_SCALE_DEFAULTS[instrument]?.chroma ??
+                    4,
+                ]}
+                size="1"
+                onValueChange={(value) =>
+                  onFormStateChange({
+                    ...formState,
+                    guidanceContextChroma: value[0],
+                  })
+                }
+                max={16}
+                min={0}
+                step={0.1}
+                disabled={instrument === 'drums'}
+              />
+            </Flex>
+          </Flex>
+        )}
+      </Flex>
+    </Flex>
+  )
+}

package/src/components/StemGenerationForm/CreativeFreedomSection/CreativeFreedomSection.module.css

@@ -0,0 +1,8 @@
+.neutral9 {
+  color: var(--neutral-alpha-9);
+}
+
+.customSeparator {
+  height: 12px;
+  background-color: var(--neutral-alpha-6);
+}

package/src/components/StemGenerationForm/GenerationStatus/GenerationStatus.jsx

@@ -0,0 +1,91 @@
+import { Text } from '@radix-ui/themes'
+import { GenerationSourceCallout } from '../../GenerationSourceCallout/GenerationSourceCallout'
+import { MessageWithAction } from '../../MessageWithAction/MessageWithAction'
+import { secondsToTime } from '../utils'
+
+export function GenerationStatus({
+  generateFromTrack,
+  inpaintingTrack,
+  generateFromSelectionTrack,
+  unmutedTracksCount,
+  onClear,
+  i18n = { _: (text) => text },
+}) {
+  const calloutTooltip = i18n._(
+    'All unmuted tracks or the selected stem/area will be used as context to generate a new stem',
+  )
+
+  //when user click on dropdownMenu in track
+  if (generateFromTrack) {
+    return (
+      <GenerationSourceCallout
+        trackName={generateFromTrack.name}
+        onClick={onClear}
+        ctaLabel={i18n._('Clear')}
+        tooltopContent={calloutTooltip}
+        i18n={i18n}
+      />
+    )
+  }
+
+  //when user click on contextMenu track - Regenerate selection (Custom)
+  if (inpaintingTrack) {
+    return (
+      <GenerationSourceCallout
+        trackName={inpaintingTrack?.name}
+        onClick={onClear}
+        ctaLabel={i18n._('Clear')}
+        tooltopContent={i18n._(
+          'All unmuted tracks or the selected stem/area will be used as context to generate a new stem',
+        )}
+        interval={`(${secondsToTime(inpaintingTrack?.from)} - ${secondsToTime(
+          inpaintingTrack?.to,
+        )})`}
+        i18n={i18n}
+      />
+    )
+  }
+
+  //when user click on contextMenu track - Regenerate from selection
+  if (generateFromSelectionTrack) {
+    return (
+      <GenerationSourceCallout
+        trackName={`${unmutedTracksCount} track${
+          unmutedTracksCount !== 1 ? 's' : ''
+        }`}
+        onClick={onClear}
+        ctaLabel={i18n._('Clear')}
+        tooltopContent={i18n._(
+          'All unmuted tracks or the selected stem/area will be used as context to generate a new stem',
+        )}
+        interval={`(${secondsToTime(
+          generateFromSelectionTrack?.from,
+        )} - ${secondsToTime(generateFromSelectionTrack?.to)})`}
+        i18n={i18n}
+      />
+    )
+  }
+
+  //when user just open the extension
+  if (unmutedTracksCount > 0) {
+    return (
+      <GenerationSourceCallout
+        trackName={`${unmutedTracksCount} track${
+          unmutedTracksCount !== 1 ? 's' : ''
+        }`}
+        tooltopContent={i18n._(
+          'All unmuted tracks or the selected stem/area will be used as context to generate a new stem',
+        )}
+        i18n={i18n}
+      />
+    )
+  }
+
+  return (
+    <MessageWithAction type="error" showIcon={false} showBackground={false}>
+      <Text size="2">
+        {i18n._('No active tracks available for generation context')}
+      </Text>
+    </MessageWithAction>
+  )
+}

package/src/components/StemGenerationForm/StemGenerationForm.jsx

@@ -0,0 +1,342 @@
+import { useState, useEffect, useMemo, useCallback } from 'react'
+import { Flex, Box } from '@radix-ui/themes'
+import { Text } from '../Text/Text'
+import { MessageWithAction } from '../MessageWithAction/MessageWithAction'
+import { SegmentedControl } from '../SegmentedControl/SegmentedControl'
+import { InstrumentSelector } from '../InstrumentSelector/InstrumentSelector'
+import { CreateNew } from './CreateNew/CreateNew'
+import { CreateFromPreset } from './CreateFromPreset/CreateFromPreset'
+import { FooterPanel } from '../FooterPanel/FooterPanel'
+import { SparkleIcon } from '../../icons'
+import { BesideFooter } from './BesideFooter/BesideFooter'
+import { Concurrency } from './Concurrency/Concurrency'
+import { GenerationStatus } from './GenerationStatus/GenerationStatus'
+import {
+  FORM_DEFAULTS,
+  GUIDANCE_SCALE_DEFAULTS,
+  getLocalizedGenerationInstruments,
+} from './utils'
+import { UI_CONFIG } from '../../utils/constants'
+import { useSubmitWithFeedback } from '../../utils/useSubmitWithFeedback'
+
+export const StemGenerationForm = ({
+  formState,
+  onFormStateChange,
+  presets,
+  onAddConditioningAudio,
+  showConditioningTextPaywall,
+  showAdvancedControlsPaywall,
+  i18n = { _: (text) => text },
+  loading,
+  onSubmit,
+  limitReached,
+  showUpgradeConcurrency,
+  onClickUpgradeConcurrency,
+  error,
+  generateFromTrack,
+  inpaintingTrack,
+  generateFromSelectionTrack,
+  unmutedTracksCount,
+  onMountConcurrency,
+  onClear,
+}) => {
+  const [isAnimating, setIsAnimating] = useState(false)
+  const [presetSelected, setPresetSelected] = useState('2')
+  const [visibleType, setVisibleType] = useState(presetSelected)
+  const { submitted, handleSubmit } = useSubmitWithFeedback(onSubmit)
+
+  const presetMode = useMemo(() => {
+    return [
+      { value: '2', label: i18n._('Presets') },
+      { value: '1', label: i18n._('Custom') },
+    ]
+  }, [])
+
+  const hasPresetsForInstrument = (presets ?? []).some(
+    (preset) => preset.instrument === formState.instrument,
+  )
+
+  const disabledGenerateButton = useMemo(() => {
+    const isPresetMode = presetSelected === '2' && hasPresetsForInstrument
+    const isCustomMode = presetSelected === '1' || !hasPresetsForInstrument
+    return (
+      limitReached ||
+      unmutedTracksCount === 0 ||
+      (isPresetMode && !formState.presetId) ||
+      (isCustomMode &&
+        !formState.conditioningText &&
+        !formState.conditioningAudio)
+    )
+  }, [
+    limitReached,
+    unmutedTracksCount,
+    presetSelected,
+    hasPresetsForInstrument,
+    formState.presetId,
+    formState.conditioningText,
+    formState.conditioningAudio,
+  ])
+
+  const instrumentSelector = useMemo(
+    () => getLocalizedGenerationInstruments(i18n),
+    [i18n],
+  )
+
+  const handlePresetModeChange = useCallback(
+    (value) => {
+      setPresetSelected(value)
+      onFormStateChange({
+        ...FORM_DEFAULTS,
+        instrument: formState.instrument,
+        contextAudio: null,
+        presetName: null,
+        weightSchedule: null,
+      })
+    },
+    [onFormStateChange, formState.instrument],
+  )
+
+  const handlePresetChange = useCallback(
+    (value) => {
+      onFormStateChange({
+        ...formState,
+        presetId: value,
+        presetName: presets.find((preset) => preset.id === value).presetName,
+        presetNameLocalized: presets.find((preset) => preset.id === value).name,
+        trackName: generateFromTrack
+          ? generateFromTrack.name
+          : generateFromSelectionTrack
+            ? generateFromSelectionTrack.name
+            : null,
+      })
+    },
+    [
+      onFormStateChange,
+      formState,
+      presets,
+      generateFromTrack,
+      generateFromSelectionTrack,
+    ],
+  )
+
+  const handleInstrumentSelectorChange = useCallback(
+    (value) => {
+      const defaults = GUIDANCE_SCALE_DEFAULTS[value] || {}
+      onFormStateChange((prev) => ({
+        ...prev,
+        instrument: value,
+        presetId: null,
+        presetName: null,
+        // Reset guidance sliders to instrument defaults when switching instruments
+        guidanceClap: prev.customizeCreativeFreedom
+          ? defaults.clap ?? null
+          : null,
+        guidanceContextAudio: prev.customizeCreativeFreedom
+          ? defaults.context ?? null
+          : null,
+        guidanceContextChroma: prev.customizeCreativeFreedom
+          ? value === 'drums'
+            ? null
+            : defaults.chroma ?? null
+          : null,
+      }))
+    },
+    [onFormStateChange, formState],
+  )
+
+  // Effect to handle animation when switching tabs
+  useEffect(() => {
+    if (presetSelected !== visibleType) {
+      setIsAnimating(true)
+      const timer = setTimeout(() => {
+        setVisibleType(presetSelected)
+        setIsAnimating(false)
+      }, UI_CONFIG.timeouts.animationDuration)
+      return () => clearTimeout(timer)
+    }
+  }, [presetSelected, visibleType])
+
+  return (
+    <Flex
+      direction="column"
+      height="100%"
+      style={{
+        backgroundColor: 'var(--neutral-2)',
+      }}
+    >
+      <Box mb="20px">
+
+        <InstrumentSelector
+          items={instrumentSelector}
+          selectedValue={formState?.instrument}
+          handleValueChange={handleInstrumentSelectorChange}
+        />
+        {/* <SegmentedControl
+          items={instrumentSelector}
+          selectedType={formState?.instrument}
+          handleTypeChange={handleInstrumentSelectorChange}
+          size="2"
+          iconProps={{ width: 18, height: 18 }}
+        /> */}
+      </Box>
+      <Flex
+        direction="column"
+        gap="2"
+        pb="3"
+        style={{
+          position: 'sticky',
+          top: 0,
+          zIndex: 10,
+          backgroundColor: 'var(--neutral-2)',
+        }}
+      >
+        {hasPresetsForInstrument && (
+          <SegmentedControl
+            items={presetMode}
+            selectedType={presetSelected}
+            handleTypeChange={handlePresetModeChange}
+            size="2"
+          />
+        )}
+
+        {visibleType === '2' && (
+          <Box
+            style={{
+              position: 'sticky',
+              top: '130px',
+              zIndex: 10,
+              backgroundColor: 'var(--neutral-2)',
+              opacity: isAnimating ? 0 : 1,
+              transition: `opacity ${UI_CONFIG.timeouts.animationDuration}ms ease-in-out`,
+            }}
+          ></Box>
+        )}
+      </Flex>
+      <Flex
+        direction="column"
+        style={{
+          position: 'relative',
+          flex: 1,
+          opacity: isAnimating ? 0 : 1,
+          transition: `opacity ${UI_CONFIG.timeouts.animationDuration}ms ease-in-out`,
+          overflow: 'hidden',
+        }}
+      >
+        {(visibleType === '1' || !hasPresetsForInstrument) && (
+          <CreateNew
+            formState={formState}
+            onFormStateChange={onFormStateChange}
+            i18n={i18n}
+            onAddConditioningAudio={onAddConditioningAudio}
+            onTextConditioningFocus={showConditioningTextPaywall}
+          />
+        )}
+
+        {visibleType === '2' && hasPresetsForInstrument && (
+          <CreateFromPreset
+            formState={formState}
+            presets={presets}
+            handlePresetChange={handlePresetChange}
+          />
+        )}
+      </Flex>
+      <Box
+        style={{
+          position: 'sticky',
+          bottom: 0,
+          left: 0,
+          right: 0,
+          paddingTop: '0px',
+          backgroundColor: 'var(--neutral-2)',
+        }}
+      >
+        <Flex
+          justify="between"
+          gap="2"
+          align="center"
+          direction="row"
+          mb="12px"
+        >
+          <FooterPanel
+            style={{
+              borderTop: '1px solid var(--neutral-alpha-3)',
+            }}
+            besideFooter={
+              <BesideFooter
+                formState={formState}
+                onFormStateChange={onFormStateChange}
+                i18n={i18n}
+                disabledBesideFooter={limitReached}
+                presetSelected={presetSelected}
+                showAdvancedControlsPaywall={showAdvancedControlsPaywall}
+              />
+            }
+            width="100%"
+            disabled={disabledGenerateButton}
+            color="cyan"
+            loading={loading}
+            onClick={handleSubmit}
+            Icon={SparkleIcon}
+            title={i18n._('Generate Stem')}
+          >
+            <Flex pt="4" width="100%">
+              {limitReached && (
+                <Concurrency
+                  showUpgrade={showUpgradeConcurrency}
+                  onClickUpgrade={onClickUpgradeConcurrency}
+                  i18n={i18n}
+                  onMount={onMountConcurrency}
+                />
+              )}
+              {!limitReached && !submitted && !error && (
+                <>
+                  <GenerationStatus
+                    generateFromTrack={generateFromTrack}
+                    inpaintingTrack={inpaintingTrack}
+                    generateFromSelectionTrack={generateFromSelectionTrack}
+                    unmutedTracksCount={unmutedTracksCount}
+                    onClear={onClear}
+                    i18n={i18n}
+                  />
+                </>
+              )}
+              {!limitReached && submitted && !error && (
+                <MessageWithAction
+                  type="success"
+                  showBackground={false}
+                  showIcon={false}
+                >
+                  <Text
+                    size="2"
+                    style={{
+                      color: 'var(--neutral-alpha-12)',
+                    }}
+                  >
+                    {i18n._('A new track has been added to your project!')}
+                  </Text>
+                </MessageWithAction>
+              )}
+              {!limitReached && error && (
+                <MessageWithAction
+                  type="error"
+                  onClick={onClear}
+                  ctaLabel={i18n._('Clear')}
+                  showBackground={false}
+                  showIcon={false}
+                >
+                  <Text size="1">
+                    {i18n._(
+                      'An error occurred while generating the track. Please try again.',
+                    )}
+                  </Text>
+                </MessageWithAction>
+              )}
+            </Flex>
+          </FooterPanel>
+        </Flex>
+      </Box>
+    </Flex>
+  )
+}
+
+StemGenerationForm.displayName = 'StemGenerationForm'