@remotion/studio 4.0.521 → 4.0.523

package/dist/components/Transcription/TranscriptionModal.js

@@ -0,0 +1,428 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.TranscriptionModal = void 0;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const studio_shared_1 = require("@remotion/studio-shared");
+const whisper_webgpu_1 = require("@remotion/whisper-webgpu");
+const react_1 = require("react");
+const browser_studio_operations_1 = require("../../helpers/browser-studio-operations");
+const colors_1 = require("../../helpers/colors");
+const get_file_manager_name_1 = require("../../helpers/get-file-manager-name");
+const Checkmark_1 = require("../../icons/Checkmark");
+const folder_1 = require("../../icons/folder");
+const gear_1 = require("../../icons/gear");
+const models_1 = require("../../icons/models");
+const transcription_1 = require("../../icons/transcription");
+const modals_1 = require("../../state/modals");
+const sidebar_1 = require("../../state/sidebar");
+const Button_1 = require("../Button");
+const Checkbox_1 = require("../Checkbox");
+const InlineAction_1 = require("../InlineAction");
+const layout_1 = require("../layout");
+const is_menu_item_1 = require("../Menu/is-menu-item");
+const ModalHeader_1 = require("../ModalHeader");
+const ComboBox_1 = require("../NewComposition/ComboBox");
+const DismissableModal_1 = require("../NewComposition/DismissableModal");
+const RemInput_1 = require("../NewComposition/RemInput");
+const ValidationMessage_1 = require("../NewComposition/ValidationMessage");
+const NotificationCenter_1 = require("../Notifications/NotificationCenter");
+const options_sidebar_tabs_1 = require("../options-sidebar-tabs");
+const OptionsPanel_1 = require("../OptionsPanel");
+const InfoBubble_1 = require("../RenderModal/InfoBubble");
+const layout_2 = require("../RenderModal/layout");
+const NumberSetting_1 = require("../RenderModal/NumberSetting");
+const render_modals_1 = require("../RenderModal/render-modals");
+const RenderModalHr_1 = require("../RenderModal/RenderModalHr");
+const actions_1 = require("../RenderQueue/actions");
+const context_1 = require("../RenderQueue/context");
+const vertical_1 = require("../Tabs/vertical");
+const use_model_cache_status_1 = require("../use-model-cache-status");
+const use_static_files_1 = require("../use-static-files");
+const caption_output_name_1 = require("./caption-output-name");
+const Models_1 = require("./Models");
+const whisper_languages_1 = require("./whisper-languages");
+const TRANSCRIPTION_OUTPUT_MESSAGE_ID = 'remotion-transcription-output-message';
+const TRANSCRIPTION_CHUNK_MESSAGE_ID = 'remotion-transcription-chunk-message';
+const TRANSCRIPTION_DECODING_MESSAGE_ID = 'remotion-transcription-decoding-message';
+const TRANSCRIPTION_TASK_MESSAGE_ID = 'remotion-transcription-task-message';
+const DEFAULT_CHUNK_LENGTH_IN_SECONDS = 30;
+const DEFAULT_STRIDE_LENGTH_IN_SECONDS = 5;
+const DEFAULT_TEMPERATURE = 1;
+const DEFAULT_TOP_K = 50;
+const DEFAULT_REPETITION_PENALTY = 1;
+const DEFAULT_NO_REPEAT_NGRAM_SIZE = 0;
+const MAX_CHUNK_LENGTH_IN_SECONDS = 30;
+const AVAILABLE_MODELS = (0, whisper_webgpu_1.getAvailableModels)();
+const settingsPanel = {
+    ...render_modals_1.optionsPanel,
+    flexDirection: 'column',
+    paddingTop: 16,
+};
+const advancedPanel = {
+    ...settingsPanel,
+    paddingTop: 0,
+};
+const transcriptionModalStyle = {
+    ...render_modals_1.outerModalStyle,
+    outline: 'none',
+};
+const transcriptionLayout = {
+    ...render_modals_1.horizontalLayout,
+    flex: '1 1 auto',
+};
+const controlStyle = {
+    width: 330,
+    maxWidth: '100%',
+};
+const nestedLabelStyle = {
+    color: 'inherit',
+    fontFamily: 'inherit',
+    fontSize: 'inherit',
+    lineHeight: 'inherit',
+};
+const taskMessageRow = {
+    display: 'flex',
+    justifyContent: 'flex-end',
+    padding: '0 16px 8px',
+};
+const outputRow = {
+    display: 'flex',
+    flexDirection: 'row',
+    alignItems: 'flex-start',
+    paddingLeft: 16,
+    paddingRight: 16,
+    paddingTop: 4,
+    paddingBottom: 12,
+};
+const outputRightRow = {
+    display: 'flex',
+    flex: 1,
+    flexDirection: 'row',
+    alignItems: 'flex-start',
+    justifyContent: 'flex-end',
+    minWidth: 0,
+};
+const tooltipContent = {
+    color: colors_1.LIGHT_TEXT,
+    fontSize: 13,
+    lineHeight: 1.5,
+    maxWidth: 360,
+    padding: 12,
+};
+const tooltipInlineCode = {
+    color: colors_1.WHITE,
+    fontFamily: 'monospace',
+    fontSize: 'inherit',
+    lineHeight: 'inherit',
+};
+const hiddenPanel = {
+    display: 'none',
+};
+const existsMessageStyle = {
+    display: 'inline-flex',
+    alignItems: 'center',
+    minWidth: 0,
+    fontFamily: 'sans-serif',
+    fontSize: 13,
+    lineHeight: '18px',
+    color: colors_1.WHITE,
+    whiteSpace: 'nowrap',
+};
+const openIconStyle = {
+    width: 12,
+    height: 12,
+    flexShrink: 0,
+};
+const TranscriptionSettingLabel = ({ children, inputId, name }) => {
+    return (jsx_runtime_1.jsxs("div", { style: layout_2.label, children: [inputId === null ? (name) : (jsx_runtime_1.jsx("label", { htmlFor: inputId, style: nestedLabelStyle, children: name })), jsx_runtime_1.jsx(layout_1.Spacing, { x: 0.5 }), jsx_runtime_1.jsx(InfoBubble_1.InfoBubble, { title: `Learn more about ${name}`, children: jsx_runtime_1.jsx("div", { style: tooltipContent, children: children }) })
+        ] }));
+};
+const ModelSettings = ({ cachedModels, selectedLanguage, selectedModel, selectedTask, setSelectedLanguage, setSelectedModel, setSelectedTask, supportState, }) => {
+    const selectedModelInfo = AVAILABLE_MODELS.find(({ name }) => name === selectedModel);
+    if (!selectedModelInfo) {
+        throw new Error(`Unknown Whisper model: ${selectedModel}`);
+    }
+    const modelOptions = (0, react_1.useMemo)(() => {
+        return AVAILABLE_MODELS.map((model) => {
+            return {
+                type: 'item',
+                id: model.name,
+                value: model.name,
+                label: `${model.name} · ${(0, studio_shared_1.formatBytes)(model.webGpuDownloadSize)}${cachedModels.has(model.name) ? ' · Downloaded' : ''}`,
+                leftItem: model.name === selectedModel ? jsx_runtime_1.jsx(Checkmark_1.Checkmark, {}) : null,
+                keyHint: null,
+                quickSwitcherLabel: null,
+                subMenu: null,
+                disabled: false,
+                onClick: () => setSelectedModel(model.name),
+            };
+        });
+    }, [cachedModels, selectedModel, setSelectedModel]);
+    const languageOptions = (0, react_1.useMemo)(() => {
+        return whisper_languages_1.WHISPER_LANGUAGES.map(([languageCode, languageName]) => ({
+            type: 'item',
+            id: languageCode,
+            value: languageCode,
+            label: languageName,
+            leftItem: languageCode === selectedLanguage ? jsx_runtime_1.jsx(Checkmark_1.Checkmark, {}) : null,
+            keyHint: null,
+            quickSwitcherLabel: null,
+            subMenu: null,
+            disabled: false,
+            onClick: () => setSelectedLanguage(languageCode),
+        }));
+    }, [selectedLanguage, setSelectedLanguage]);
+    const effectiveTask = selectedModelInfo.supportsTranslation
+        ? selectedTask
+        : 'transcribe';
+    const taskOptions = (0, react_1.useMemo)(() => {
+        return [
+            {
+                type: 'item',
+                id: 'transcribe',
+                value: 'transcribe',
+                label: (jsx_runtime_1.jsxs(jsx_runtime_1.Fragment, { children: [
+                        jsx_runtime_1.jsx("span", { "aria-hidden": "true", style: nestedLabelStyle, children: "Transcribe" }), jsx_runtime_1.jsx("span", { style: { position: 'absolute', clip: 'rect(0 0 0 0)' }, children: "Task: Transcribe" })
+                    ] })),
+                leftItem: effectiveTask === 'transcribe' ? jsx_runtime_1.jsx(Checkmark_1.Checkmark, {}) : null,
+                keyHint: null,
+                quickSwitcherLabel: null,
+                subMenu: null,
+                disabled: false,
+                onClick: () => setSelectedTask('transcribe'),
+            },
+            {
+                type: 'item',
+                id: 'translate',
+                value: 'translate',
+                label: (jsx_runtime_1.jsxs(jsx_runtime_1.Fragment, { children: [
+                        jsx_runtime_1.jsx("span", { "aria-hidden": "true", style: nestedLabelStyle, children: "Translate to English" }), jsx_runtime_1.jsx("span", { style: { position: 'absolute', clip: 'rect(0 0 0 0)' }, children: "Task: Translate to English" })
+                    ] })),
+                leftItem: effectiveTask === 'translate' ? jsx_runtime_1.jsx(Checkmark_1.Checkmark, {}) : null,
+                keyHint: null,
+                quickSwitcherLabel: null,
+                subMenu: null,
+                disabled: false,
+                onClick: () => setSelectedTask('translate'),
+            },
+        ];
+    }, [effectiveTask, setSelectedTask]);
+    (0, react_1.useEffect)(() => {
+        if (!selectedModelInfo.supportsTranslation) {
+            setSelectedTask('transcribe');
+        }
+    }, [selectedModelInfo.supportsTranslation, setSelectedTask]);
+    return (jsx_runtime_1.jsxs(jsx_runtime_1.Fragment, { children: [
+            jsx_runtime_1.jsxs("div", { style: layout_2.optionRow, children: [
+                    jsx_runtime_1.jsx("div", { style: layout_2.label, children: "Whisper model" }), jsx_runtime_1.jsx("div", { style: layout_2.rightRow, children: jsx_runtime_1.jsx(ComboBox_1.Combobox, { values: modelOptions, selectedId: selectedModel, title: "Whisper model", style: controlStyle }) })
+                ] }), selectedModelInfo.multilingual ? (jsx_runtime_1.jsxs("div", { style: layout_2.optionRow, children: [
+                    jsx_runtime_1.jsx("div", { style: layout_2.label, children: "Spoken language" }), jsx_runtime_1.jsx("div", { style: layout_2.rightRow, children: jsx_runtime_1.jsx(ComboBox_1.Combobox, { values: languageOptions, selectedId: selectedLanguage, title: "Spoken language", style: controlStyle }) })
+                ] })) : null, selectedModelInfo.supportsTranslation ? (jsx_runtime_1.jsxs("div", { style: layout_2.optionRow, children: [
+                    jsx_runtime_1.jsx("div", { style: layout_2.label, children: "Task" }), jsx_runtime_1.jsx("div", { style: layout_2.rightRow, children: jsx_runtime_1.jsx(ComboBox_1.Combobox, { values: taskOptions, selectedId: effectiveTask, title: "Task", style: controlStyle }) })
+                ] })) : null, effectiveTask === 'translate' ? (jsx_runtime_1.jsx("div", { id: TRANSCRIPTION_TASK_MESSAGE_ID, "aria-live": "polite", style: taskMessageRow, children: jsx_runtime_1.jsx(ValidationMessage_1.ValidationMessage, { align: "flex-end", message: "Word timings may be less accurate when translating to English.", type: "warning" }) })) : null, supportState.type === 'unsupported' ? (jsx_runtime_1.jsx("div", { style: { padding: '0 16px' }, children: jsx_runtime_1.jsx(ValidationMessage_1.ValidationMessage, { align: "flex-end", message: supportState.message, type: "error" }) })) : null] }));
+};
+const OutputSettings = ({ exists, onOutNameChange, outName, validationMessage }) => {
+    const openExistingOutput = (0, react_1.useCallback)(() => {
+        if (!window.remotion_publicFolderExists) {
+            (0, NotificationCenter_1.showNotification)('Could not find the public folder', 2000);
+            return;
+        }
+        (0, actions_1.openInFileExplorer)({
+            directory: `${window.remotion_publicFolderExists}/${outName}`,
+        }).catch((err) => {
+            (0, NotificationCenter_1.showNotification)(`Could not open file: ${err.message}`, 2000);
+        });
+    }, [outName]);
+    const renderOpenIcon = (0, react_1.useCallback)((color) => {
+        return jsx_runtime_1.jsx(folder_1.ExpandedFolderIconSolid, { style: openIconStyle, color: color });
+    }, []);
+    const fileManagerName = (0, get_file_manager_name_1.getFileManagerName)(window.remotion_fileSystemPlatform);
+    const isBrowserStudio = (0, browser_studio_operations_1.getBrowserStudioOperations)() !== null;
+    return (jsx_runtime_1.jsxs("div", { style: outputRow, children: [
+            jsx_runtime_1.jsxs(TranscriptionSettingLabel, { inputId: null, name: "Output in public/", children: ["Studio writes a JSON array compatible with", ' ', jsx_runtime_1.jsx("code", { style: tooltipInlineCode, children: "Caption[]" }),
+                    ". Load it from your composition with ",
+                    jsx_runtime_1.jsx("code", { style: tooltipInlineCode, children: "staticFile()" }),
+                    "."] }), jsx_runtime_1.jsx("div", { style: outputRightRow, children: jsx_runtime_1.jsxs("div", { style: controlStyle, children: [
+                        jsx_runtime_1.jsx(RemInput_1.RemotionInput, { "aria-label": "Caption output file", "aria-describedby": validationMessage || exists
+                                ? TRANSCRIPTION_OUTPUT_MESSAGE_ID
+                                : undefined, "aria-invalid": validationMessage ? true : undefined, status: validationMessage ? 'error' : exists ? 'warning' : 'ok', style: layout_2.input, type: "text", value: outName, onChange: onOutNameChange, rightAlign: true }), validationMessage || exists ? (jsx_runtime_1.jsxs("div", { id: TRANSCRIPTION_OUTPUT_MESSAGE_ID, "aria-live": "polite", children: [
+                                jsx_runtime_1.jsx(layout_1.Spacing, { y: 1, block: true }), jsx_runtime_1.jsx(ValidationMessage_1.ValidationMessage, { align: "flex-end", message: validationMessage !== null && validationMessage !== void 0 ? validationMessage : (jsx_runtime_1.jsxs("span", { style: existsMessageStyle, children: [isBrowserStudio ? null : (jsx_runtime_1.jsx(InlineAction_1.InlineAction, { onClick: openExistingOutput, renderAction: renderOpenIcon, title: `Open in ${fileManagerName}`, variant: null })), "Exists, will be overwritten"] })), type: validationMessage ? 'error' : 'warning' })] })) : null] }) })
+        ] }));
+};
+const AdvancedSettings = ({ chunkLengthInSeconds, doSample, forceFullSequences, noRepeatNgramSize, repetitionPenalty, setChunkLengthInSeconds, setDoSample, setForceFullSequences, setNoRepeatNgramSize, setRepetitionPenalty, setStrideLengthInSeconds, setTemperature, setTopK, strideLengthInSeconds, temperature, topK, decodingValidationMessage, validationMessage, }) => {
+    const onForceFullSequencesChange = (0, react_1.useCallback)((event) => setForceFullSequences(event.target.checked), [setForceFullSequences]);
+    const onDoSampleChange = (0, react_1.useCallback)((event) => setDoSample(event.target.checked), [setDoSample]);
+    return (jsx_runtime_1.jsxs(jsx_runtime_1.Fragment, { children: [
+            jsx_runtime_1.jsxs("div", { "aria-describedby": validationMessage ? TRANSCRIPTION_CHUNK_MESSAGE_ID : undefined, "aria-invalid": validationMessage ? true : undefined, "aria-label": "Chunk settings", role: "group", children: [jsx_runtime_1.jsx(NumberSetting_1.NumberSetting, { formatter: (value) => `${value}s`, hint: {
+                            content: (jsx_runtime_1.jsx("div", { style: tooltipContent, children: "Studio splits long audio into chunks of up to 30 seconds. Longer chunks need fewer transcription passes." })),
+                            title: 'Learn more about Chunk length',
+                        }, max: MAX_CHUNK_LENGTH_IN_SECONDS, min: 1, name: "Chunk length", onValueChanged: setChunkLengthInSeconds, step: 1, value: chunkLengthInSeconds }), jsx_runtime_1.jsx(NumberSetting_1.NumberSetting, { formatter: (value) => `${value}s`, hint: {
+                            content: (jsx_runtime_1.jsx("div", { style: tooltipContent, children: "Overlaps both sides of each chunk to help preserve words at the boundaries." })),
+                            title: 'Learn more about Stride length',
+                        }, min: 0, name: "Stride length", onValueChanged: setStrideLengthInSeconds, step: 1, value: strideLengthInSeconds })] }), validationMessage ? (jsx_runtime_1.jsx("div", { id: TRANSCRIPTION_CHUNK_MESSAGE_ID, "aria-live": "polite", style: { padding: '0 16px' }, children: jsx_runtime_1.jsx(ValidationMessage_1.ValidationMessage, { align: "flex-end", message: validationMessage, type: "error" }) })) : null, jsx_runtime_1.jsxs("div", { "aria-describedby": decodingValidationMessage
+                    ? TRANSCRIPTION_DECODING_MESSAGE_ID
+                    : undefined, "aria-invalid": decodingValidationMessage ? true : undefined, "aria-label": "Decoding settings", role: "group", children: [
+                    jsx_runtime_1.jsx(RenderModalHr_1.RenderModalHr, {}), jsx_runtime_1.jsxs("div", { style: layout_2.optionRow, children: [
+                            jsx_runtime_1.jsx(TranscriptionSettingLabel, { inputId: "force-full-sequences", name: "Force full sequences", children: "Makes the job fail if Whisper leaves an incomplete timestamp sequence." }), jsx_runtime_1.jsx("div", { style: layout_2.rightRow, children: jsx_runtime_1.jsx(Checkbox_1.Checkbox, { checked: forceFullSequences, inputId: "force-full-sequences", name: "force-full-sequences", onChange: onForceFullSequencesChange }) })
+                        ] }), jsx_runtime_1.jsx(RenderModalHr_1.RenderModalHr, {}), jsx_runtime_1.jsxs("div", { style: layout_2.optionRow, children: [
+                            jsx_runtime_1.jsx(TranscriptionSettingLabel, { inputId: "use-sampling", name: "Use sampling", children: "Makes decoding nondeterministic." }), jsx_runtime_1.jsx("div", { style: layout_2.rightRow, children: jsx_runtime_1.jsx(Checkbox_1.Checkbox, { checked: doSample, inputId: "use-sampling", name: "use-sampling", onChange: onDoSampleChange }) })
+                        ] }), doSample ? (jsx_runtime_1.jsxs(jsx_runtime_1.Fragment, { children: [jsx_runtime_1.jsx(NumberSetting_1.NumberSetting, { hint: {
+                                    content: (jsx_runtime_1.jsx("div", { style: tooltipContent, children: "Controls randomness when sampling." })),
+                                    title: 'Learn more about Temperature',
+                                }, min: 0.1, name: "Temperature", onValueChanged: setTemperature, step: 0.1, value: temperature }), jsx_runtime_1.jsx(NumberSetting_1.NumberSetting, { hint: {
+                                    content: (jsx_runtime_1.jsx("div", { style: tooltipContent, children: "Limits the candidate tokens when sampling." })),
+                                    title: 'Learn more about Top K',
+                                }, min: 0, name: "Top K", onValueChanged: setTopK, step: 1, value: topK })] })) : null, jsx_runtime_1.jsx(NumberSetting_1.NumberSetting, { hint: {
+                            content: (jsx_runtime_1.jsx("div", { style: tooltipContent, children: "Discourages repeated tokens. A value of 1 disables the penalty." })),
+                            title: 'Learn more about Repetition penalty',
+                        }, min: 0.1, name: "Repetition penalty", onValueChanged: setRepetitionPenalty, step: 0.1, value: repetitionPenalty }), jsx_runtime_1.jsx(NumberSetting_1.NumberSetting, { hint: {
+                            content: (jsx_runtime_1.jsx("div", { style: tooltipContent, children: "Prevents repeated phrases of this many tokens. A value of 0 disables the filter." })),
+                            title: 'Learn more about No-repeat n-gram size',
+                        }, min: 0, name: "No-repeat n-gram size", onValueChanged: setNoRepeatNgramSize, step: 1, value: noRepeatNgramSize })] }), decodingValidationMessage ? (jsx_runtime_1.jsx("div", { id: TRANSCRIPTION_DECODING_MESSAGE_ID, "aria-live": "polite", style: { padding: '0 16px' }, children: jsx_runtime_1.jsx(ValidationMessage_1.ValidationMessage, { align: "flex-end", message: decodingValidationMessage, type: "error" }) })) : null] }));
+};
+const TranscriptionModal = ({ audioStreamIndex, displayName, requestInit, src, }) => {
+    var _a, _b, _c;
+    const [tab, setTab] = (0, react_1.useState)('transcribe');
+    const isModelCached = (0, react_1.useCallback)((model) => (0, whisper_webgpu_1.isWhisperModelCached)({ model }), []);
+    const cachedModels = (0, use_model_cache_status_1.useModelCacheStatus)({
+        isModelCached,
+        models: AVAILABLE_MODELS,
+        refreshKey: tab,
+    });
+    const [selectedModel, setSelectedModel] = (0, react_1.useState)('small.en');
+    const [selectedLanguage, setSelectedLanguage] = (0, react_1.useState)('en');
+    const [selectedTask, setSelectedTask] = (0, react_1.useState)('transcribe');
+    const [chunkLengthInSeconds, setChunkLengthInSeconds] = (0, react_1.useState)(DEFAULT_CHUNK_LENGTH_IN_SECONDS);
+    const [strideLengthInSeconds, setStrideLengthInSeconds] = (0, react_1.useState)(DEFAULT_STRIDE_LENGTH_IN_SECONDS);
+    const [forceFullSequences, setForceFullSequences] = (0, react_1.useState)(false);
+    const [doSample, setDoSample] = (0, react_1.useState)(false);
+    const [temperature, setTemperature] = (0, react_1.useState)(DEFAULT_TEMPERATURE);
+    const [topK, setTopK] = (0, react_1.useState)(DEFAULT_TOP_K);
+    const [repetitionPenalty, setRepetitionPenalty] = (0, react_1.useState)(DEFAULT_REPETITION_PENALTY);
+    const [noRepeatNgramSize, setNoRepeatNgramSize] = (0, react_1.useState)(DEFAULT_NO_REPEAT_NGRAM_SIZE);
+    const [supportState, setSupportState] = (0, react_1.useState)({
+        type: 'checking',
+    });
+    const [outName, setOutName] = (0, react_1.useState)(() => (0, caption_output_name_1.getDefaultCaptionOutputName)(src, displayName));
+    const { addCaptionJob, captionJobs } = (0, react_1.useContext)(context_1.RenderQueueContext);
+    const { setSelectedModal } = (0, react_1.useContext)(modals_1.SetSelectedModalContext);
+    const { setSidebarCollapsedState } = (0, react_1.useContext)(sidebar_1.SidebarContext);
+    const staticFiles = (0, use_static_files_1.useStaticFiles)();
+    (0, react_1.useEffect)(() => {
+        let cancelled = false;
+        (0, whisper_webgpu_1.canUseWhisperWebGpu)().then((result) => {
+            if (cancelled) {
+                return;
+            }
+            setSupportState(result.supported
+                ? { type: 'supported' }
+                : { type: 'unsupported', message: result.detailedReason });
+        });
+        return () => {
+            cancelled = true;
+        };
+    }, []);
+    const normalizedOutName = outName.normalize('NFC').toLowerCase();
+    const queuedOutputExists = captionJobs.some((job) => (job.status === 'idle' || job.status === 'running') &&
+        job.outName.normalize('NFC').toLowerCase() === normalizedOutName);
+    const outputValidationMessage = (_a = (0, caption_output_name_1.validateCaptionOutputName)(outName)) !== null && _a !== void 0 ? _a : (queuedOutputExists
+        ? 'Another caption job is already using this output file'
+        : null);
+    const exists = staticFiles.some((file) => file.name.normalize('NFC').toLowerCase() === normalizedOutName);
+    const chunkValidationMessage = strideLengthInSeconds * 2 >= chunkLengthInSeconds
+        ? 'Stride length must be less than half of chunk length'
+        : null;
+    const decodingValidationMessage = !Number.isFinite(temperature)
+        ? 'Temperature must be a finite number greater than 0'
+        : temperature <= 0
+            ? 'Temperature must be greater than 0'
+            : !Number.isInteger(topK) || topK < 0
+                ? 'Top K must be a non-negative integer'
+                : !Number.isFinite(repetitionPenalty)
+                    ? 'Repetition penalty must be a finite number greater than 0'
+                    : repetitionPenalty <= 0
+                        ? 'Repetition penalty must be greater than 0'
+                        : !Number.isInteger(noRepeatNgramSize) || noRepeatNgramSize < 0
+                            ? 'No-repeat n-gram size must be a non-negative integer'
+                            : null;
+    const canTranscribe = supportState.type === 'supported' &&
+        outputValidationMessage === null &&
+        chunkValidationMessage === null &&
+        decodingValidationMessage === null;
+    const transcribeDisabledReason = supportState.type === 'checking'
+        ? 'Checking WebGPU support'
+        : supportState.type === 'unsupported'
+            ? supportState.message
+            : ((_c = (_b = outputValidationMessage !== null && outputValidationMessage !== void 0 ? outputValidationMessage : chunkValidationMessage) !== null && _b !== void 0 ? _b : decodingValidationMessage) !== null && _c !== void 0 ? _c : undefined);
+    const onOutNameChange = (0, react_1.useCallback)((event) => {
+        setOutName(event.target.value);
+    }, []);
+    const onAddToQueue = (0, react_1.useCallback)(() => {
+        var _a;
+        if (!canTranscribe) {
+            return;
+        }
+        const modelInfo = AVAILABLE_MODELS.find(({ name }) => name === selectedModel);
+        if (!modelInfo) {
+            throw new Error(`Unknown Whisper model: ${selectedModel}`);
+        }
+        addCaptionJob({
+            src,
+            displayName,
+            audioStreamIndex,
+            requestInit,
+            outName,
+            model: selectedModel,
+            language: modelInfo.multilingual ? selectedLanguage : null,
+            task: modelInfo.supportsTranslation ? selectedTask : 'transcribe',
+            chunkLengthInSeconds,
+            strideLengthInSeconds,
+            forceFullSequences,
+            doSample,
+            temperature,
+            topK,
+            repetitionPenalty,
+            noRepeatNgramSize,
+        });
+        setSidebarCollapsedState({ left: null, right: 'expanded' });
+        (0, OptionsPanel_1.persistSelectedOptionsSidebarPanel)('renders');
+        (_a = options_sidebar_tabs_1.optionsSidebarTabs.current) === null || _a === void 0 ? void 0 : _a.selectRendersPanel();
+        setSelectedModal(null);
+    }, [
+        addCaptionJob,
+        audioStreamIndex,
+        canTranscribe,
+        chunkLengthInSeconds,
+        displayName,
+        doSample,
+        forceFullSequences,
+        noRepeatNgramSize,
+        outName,
+        repetitionPenalty,
+        requestInit,
+        src,
+        selectedLanguage,
+        selectedModel,
+        selectedTask,
+        setSelectedModal,
+        setSidebarCollapsedState,
+        strideLengthInSeconds,
+        temperature,
+        topK,
+    ]);
+    return (jsx_runtime_1.jsx(DismissableModal_1.DismissableModal, { ariaLabel: `Transcribe ${displayName}`, children: jsx_runtime_1.jsxs("div", { style: transcriptionModalStyle, children: [
+                jsx_runtime_1.jsx(ModalHeader_1.ModalHeader, { title: `Transcribe ${displayName}` }), jsx_runtime_1.jsxs("div", { style: render_modals_1.container, children: [
+                        jsx_runtime_1.jsx("div", { style: render_modals_1.flexer }), jsx_runtime_1.jsx(Button_1.Button, { onClick: onAddToQueue, disabled: !canTranscribe, title: transcribeDisabledReason, style: {
+                                ...render_modals_1.buttonStyle,
+                                backgroundColor: canTranscribe
+                                    ? render_modals_1.buttonStyle.backgroundColor
+                                    : colors_1.BLUE_DISABLED,
+                            }, children: "Transcribe" })
+                    ] }), jsx_runtime_1.jsxs("div", { style: transcriptionLayout, children: [
+                        jsx_runtime_1.jsxs("div", { style: render_modals_1.leftSidebar, children: [jsx_runtime_1.jsx(vertical_1.VerticalTab, { autoFocus: true, style: render_modals_1.horizontalTab, selected: tab === 'transcribe', onClick: () => setTab('transcribe'), renderIcon: (color) => (jsx_runtime_1.jsx("div", { style: render_modals_1.iconContainer, children: jsx_runtime_1.jsx(transcription_1.TranscriptionIcon, { color: color, style: render_modals_1.icon }) })), children: "Transcribe" }), jsx_runtime_1.jsx(vertical_1.VerticalTab, { style: render_modals_1.horizontalTab, selected: tab === 'models', onClick: () => setTab('models'), renderIcon: (color) => (jsx_runtime_1.jsx("div", { style: render_modals_1.iconContainer, children: jsx_runtime_1.jsx(models_1.ModelsIcon, { color: color, style: render_modals_1.icon }) })), children: "Models" }), jsx_runtime_1.jsx(vertical_1.VerticalTab, { style: render_modals_1.horizontalTab, selected: tab === 'advanced', onClick: () => setTab('advanced'), renderIcon: (color) => (jsx_runtime_1.jsx("div", { style: render_modals_1.iconContainer, children: jsx_runtime_1.jsx(gear_1.GearIcon, { color: color, style: render_modals_1.icon }) })), children: "Advanced" })] }), jsx_runtime_1.jsxs("div", { style: tab === 'transcribe' ? settingsPanel : hiddenPanel, className: is_menu_item_1.VERTICAL_SCROLLBAR_CLASSNAME, children: [
+                                jsx_runtime_1.jsx(OutputSettings, { exists: exists, onOutNameChange: onOutNameChange, outName: outName, validationMessage: outputValidationMessage }), jsx_runtime_1.jsx(RenderModalHr_1.RenderModalHr, {}), jsx_runtime_1.jsx(ModelSettings, { cachedModels: cachedModels, selectedLanguage: selectedLanguage, selectedModel: selectedModel, selectedTask: selectedTask, setSelectedLanguage: setSelectedLanguage, setSelectedModel: setSelectedModel, setSelectedTask: setSelectedTask, supportState: supportState })
+                            ] }), jsx_runtime_1.jsx("div", { style: tab === 'advanced' ? advancedPanel : hiddenPanel, className: is_menu_item_1.VERTICAL_SCROLLBAR_CLASSNAME, children: jsx_runtime_1.jsx(AdvancedSettings, { chunkLengthInSeconds: chunkLengthInSeconds, decodingValidationMessage: decodingValidationMessage, doSample: doSample, forceFullSequences: forceFullSequences, noRepeatNgramSize: noRepeatNgramSize, repetitionPenalty: repetitionPenalty, setChunkLengthInSeconds: setChunkLengthInSeconds, setDoSample: setDoSample, setForceFullSequences: setForceFullSequences, setNoRepeatNgramSize: setNoRepeatNgramSize, setRepetitionPenalty: setRepetitionPenalty, setStrideLengthInSeconds: setStrideLengthInSeconds, setTemperature: setTemperature, setTopK: setTopK, strideLengthInSeconds: strideLengthInSeconds, temperature: temperature, topK: topK, validationMessage: chunkValidationMessage }) }), jsx_runtime_1.jsx(Models_1.Models, { description: 'Models are downloaded automatically when needed.\nYou can also manage the browser cache here.', indent: true, visible: tab === 'models' })
+                    ] })
+            ] }) }));
+};
+exports.TranscriptionModal = TranscriptionModal;

package/dist/components/Transcription/TranscriptionModalWithOptionalWhisper.d.ts

@@ -0,0 +1,5 @@
+import React from 'react';
+import type { TranscriptionModalState } from '../../state/modals';
+export declare const TranscriptionModalWithOptionalWhisper: React.FC<{
+    readonly state: TranscriptionModalState;
+}>;

package/dist/components/Transcription/TranscriptionModalWithOptionalWhisper.js

@@ -0,0 +1,48 @@
+"use strict";
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    var desc = Object.getOwnPropertyDescriptor(m, k);
+    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
+      desc = { enumerable: true, get: function() { return m[k]; } };
+    }
+    Object.defineProperty(o, k2, desc);
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
+    Object.defineProperty(o, "default", { enumerable: true, value: v });
+}) : function(o, v) {
+    o["default"] = v;
+});
+var __importStar = (this && this.__importStar) || (function () {
+    var ownKeys = function(o) {
+        ownKeys = Object.getOwnPropertyNames || function (o) {
+            var ar = [];
+            for (var k in o) if (Object.prototype.hasOwnProperty.call(o, k)) ar[ar.length] = k;
+            return ar;
+        };
+        return ownKeys(o);
+    };
+    return function (mod) {
+        if (mod && mod.__esModule) return mod;
+        var result = {};
+        if (mod != null) for (var k = ownKeys(mod), i = 0; i < k.length; i++) if (k[i] !== "default") __createBinding(result, mod, k[i]);
+        __setModuleDefault(result, mod);
+        return result;
+    };
+})();
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.TranscriptionModalWithOptionalWhisper = void 0;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const react_1 = __importStar(require("react"));
+const OptionalPackageModal_1 = require("../OptionalPackageModal");
+const whisper_webgpu_capability_1 = require("./whisper-webgpu-capability");
+const LazyTranscriptionModal = react_1.default.lazy(async () => {
+    const { TranscriptionModal } = await Promise.resolve().then(() => __importStar(require('./TranscriptionModal')));
+    return { default: TranscriptionModal };
+});
+const TranscriptionModalWithOptionalWhisper = ({ state }) => {
+    return (jsx_runtime_1.jsx(OptionalPackageModal_1.OptionalPackageModal, { ariaLabel: "Install transcription package", packageName: whisper_webgpu_capability_1.WHISPER_WEBGPU_PACKAGE, title: "Transcribe", children: jsx_runtime_1.jsx(react_1.Suspense, { fallback: null, children: jsx_runtime_1.jsx(LazyTranscriptionModal, { ...state }) }) }));
+};
+exports.TranscriptionModalWithOptionalWhisper = TranscriptionModalWithOptionalWhisper;

package/dist/components/Transcription/caption-output-name.d.ts

@@ -0,0 +1,2 @@
+export declare const getDefaultCaptionOutputName: (src: string, displayName?: string) => string;
+export declare const validateCaptionOutputName: (outName: string) => string | null;

package/dist/components/Transcription/caption-output-name.js

@@ -0,0 +1,10 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.validateCaptionOutputName = exports.getDefaultCaptionOutputName = void 0;
+const public_output_name_1 = require("../public-output-name");
+const getDefaultCaptionOutputName = (src, displayName = 'captions') => {
+    return `${(0, public_output_name_1.getDefaultOutputBaseName)(src, displayName, 'captions')}-captions.json`;
+};
+exports.getDefaultCaptionOutputName = getDefaultCaptionOutputName;
+const validateCaptionOutputName = (outName) => (0, public_output_name_1.validatePublicOutputName)({ extension: '.json', outName });
+exports.validateCaptionOutputName = validateCaptionOutputName;

package/dist/components/Transcription/resample-media-to-16-khz.d.ts

@@ -0,0 +1,6 @@
+export declare const resampleMediaTo16Khz: ({ src, audioStreamIndex, requestInit, onProgress, }: {
+    readonly src: string;
+    readonly audioStreamIndex: number | null;
+    readonly requestInit: Omit<RequestInit, "signal"> | null;
+    readonly onProgress: (progress: number) => void;
+}) => Promise<Float32Array<ArrayBufferLike>>;

package/dist/components/Transcription/resample-media-to-16-khz.js

@@ -0,0 +1,82 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.resampleMediaTo16Khz = void 0;
+const whisper_webgpu_1 = require("@remotion/whisper-webgpu");
+const mediabunny_1 = require("mediabunny");
+const resampleMediaTo16Khz = async ({ src, audioStreamIndex, requestInit, onProgress, }) => {
+    var _a, _b;
+    const input = new mediabunny_1.Input({
+        formats: mediabunny_1.ALL_FORMATS,
+        source: new mediabunny_1.UrlSource(src, requestInit === null ? {} : { requestInit }),
+    });
+    const waveformChunks = [];
+    try {
+        onProgress(0);
+        const audioTracks = await input.getAudioTracks();
+        const primaryVideoTrack = audioStreamIndex === null ? await input.getPrimaryVideoTrack() : null;
+        const audioTrack = audioStreamIndex !== null
+            ? ((_a = audioTracks[audioStreamIndex]) !== null && _a !== void 0 ? _a : null)
+            : primaryVideoTrack
+                ? await primaryVideoTrack.getPrimaryPairableAudioTrack()
+                : ((_b = audioTracks[0]) !== null && _b !== void 0 ? _b : null);
+        if (audioTrack === null) {
+            throw new Error('The selected media does not have an audio track.');
+        }
+        if (await audioTrack.isLive()) {
+            throw new Error('Live media cannot be transcribed.');
+        }
+        const output = new mediabunny_1.Output({
+            format: new mediabunny_1.WavOutputFormat(),
+            target: new mediabunny_1.NullTarget(),
+        });
+        const conversion = await mediabunny_1.Conversion.init({
+            input,
+            output,
+            tracks: 'all',
+            video: { discard: true },
+            audio: (track) => {
+                if (track.id !== audioTrack.id) {
+                    return { discard: true };
+                }
+                return {
+                    codec: 'pcm-f32',
+                    forceTranscode: true,
+                    numberOfChannels: 1,
+                    process: (sample) => {
+                        const floats = new Float32Array(sample.allocationSize({ format: 'f32', planeIndex: 0 }) /
+                            Float32Array.BYTES_PER_ELEMENT);
+                        sample.copyTo(floats, { format: 'f32', planeIndex: 0 });
+                        waveformChunks.push({
+                            startFrame: Math.round(sample.timestamp * whisper_webgpu_1.WHISPER_WEBGPU_SAMPLE_RATE),
+                            waveform: floats,
+                        });
+                        return sample;
+                    },
+                    sampleFormat: 'f32',
+                    sampleRate: whisper_webgpu_1.WHISPER_WEBGPU_SAMPLE_RATE,
+                };
+            },
+        });
+        if (!conversion.isValid) {
+            throw new Error('The audio track cannot be decoded in this browser. Try converting the media to WAV first.');
+        }
+        conversion.onProgress = (progress) => onProgress(progress);
+        await conversion.execute();
+        onProgress(1);
+    }
+    finally {
+        input.dispose();
+    }
+    const waveformLength = waveformChunks.reduce((maximum, chunk) => Math.max(maximum, chunk.startFrame + chunk.waveform.length), 0);
+    const waveform = new Float32Array(waveformLength);
+    for (const chunk of waveformChunks) {
+        const destinationStart = Math.max(0, chunk.startFrame);
+        const sourceStart = Math.max(0, -chunk.startFrame);
+        const availableLength = Math.min(chunk.waveform.length - sourceStart, waveform.length - destinationStart);
+        if (availableLength > 0) {
+            waveform.set(chunk.waveform.subarray(sourceStart, sourceStart + availableLength), destinationStart);
+        }
+    }
+    return waveform;
+};
+exports.resampleMediaTo16Khz = resampleMediaTo16Khz;

package/dist/components/Transcription/whisper-languages.d.ts

@@ -0,0 +1,2 @@
+export declare const WHISPER_LANGUAGES: readonly [readonly ["af", "Afrikaans"], readonly ["sq", "Albanian"], readonly ["am", "Amharic"], readonly ["ar", "Arabic"], readonly ["hy", "Armenian"], readonly ["as", "Assamese"], readonly ["az", "Azerbaijani"], readonly ["ba", "Bashkir"], readonly ["eu", "Basque"], readonly ["be", "Belarusian"], readonly ["bn", "Bengali"], readonly ["bs", "Bosnian"], readonly ["br", "Breton"], readonly ["bg", "Bulgarian"], readonly ["my", "Burmese"], readonly ["ca", "Catalan"], readonly ["zh", "Chinese"], readonly ["hr", "Croatian"], readonly ["cs", "Czech"], readonly ["da", "Danish"], readonly ["nl", "Dutch"], readonly ["en", "English"], readonly ["et", "Estonian"], readonly ["fo", "Faroese"], readonly ["fi", "Finnish"], readonly ["fr", "French"], readonly ["gl", "Galician"], readonly ["ka", "Georgian"], readonly ["de", "German"], readonly ["el", "Greek"], readonly ["gu", "Gujarati"], readonly ["ht", "Haitian Creole"], readonly ["ha", "Hausa"], readonly ["haw", "Hawaiian"], readonly ["he", "Hebrew"], readonly ["hi", "Hindi"], readonly ["hu", "Hungarian"], readonly ["is", "Icelandic"], readonly ["id", "Indonesian"], readonly ["it", "Italian"], readonly ["ja", "Japanese"], readonly ["jw", "Javanese"], readonly ["kn", "Kannada"], readonly ["kk", "Kazakh"], readonly ["km", "Khmer"], readonly ["ko", "Korean"], readonly ["lo", "Lao"], readonly ["la", "Latin"], readonly ["lv", "Latvian"], readonly ["ln", "Lingala"], readonly ["lt", "Lithuanian"], readonly ["lb", "Luxembourgish"], readonly ["mk", "Macedonian"], readonly ["mg", "Malagasy"], readonly ["ms", "Malay"], readonly ["ml", "Malayalam"], readonly ["mt", "Maltese"], readonly ["mi", "Maori"], readonly ["mr", "Marathi"], readonly ["mn", "Mongolian"], readonly ["ne", "Nepali"], readonly ["no", "Norwegian"], readonly ["nn", "Nynorsk"], readonly ["oc", "Occitan"], readonly ["ps", "Pashto"], readonly ["fa", "Persian"], readonly ["pl", "Polish"], readonly ["pt", "Portuguese"], readonly ["pa", "Punjabi"], readonly ["ro", "Romanian"], readonly ["ru", "Russian"], readonly ["sa", "Sanskrit"], readonly ["sr", "Serbian"], readonly ["sn", "Shona"], readonly ["sd", "Sindhi"], readonly ["si", "Sinhala"], readonly ["sk", "Slovak"], readonly ["sl", "Slovenian"], readonly ["so", "Somali"], readonly ["es", "Spanish"], readonly ["su", "Sundanese"], readonly ["sw", "Swahili"], readonly ["sv", "Swedish"], readonly ["tl", "Tagalog"], readonly ["tg", "Tajik"], readonly ["ta", "Tamil"], readonly ["tt", "Tatar"], readonly ["te", "Telugu"], readonly ["th", "Thai"], readonly ["bo", "Tibetan"], readonly ["tr", "Turkish"], readonly ["tk", "Turkmen"], readonly ["uk", "Ukrainian"], readonly ["ur", "Urdu"], readonly ["uz", "Uzbek"], readonly ["vi", "Vietnamese"], readonly ["cy", "Welsh"], readonly ["yi", "Yiddish"], readonly ["yo", "Yoruba"]];
+export type WhisperLanguage = (typeof WHISPER_LANGUAGES)[number][0];