@remotion/studio 4.0.521 → 4.0.523

package/dist/esm/TranscriptionModal-916jqhry.mjs

@@ -0,0 +1,1011 @@
+import {
+  useModelCacheStatus
+} from "./index-7tt71e8n.mjs";
+import {
+  GearIcon,
+  NumberSetting,
+  getDefaultCaptionOutputName,
+  validateCaptionOutputName
+} from "./index-sgtmgc4h.mjs";
+import {
+  Button,
+  Checkbox,
+  Checkmark,
+  Combobox,
+  DismissableModal,
+  ExpandedFolderIconSolid,
+  InfoBubble,
+  ModalHeader,
+  ModelsIcon,
+  RemotionInput,
+  RenderModalHr,
+  SetSelectedModalContext,
+  SidebarContext,
+  TranscriptionIcon,
+  VerticalTab,
+  getFileManagerName,
+  input,
+  label,
+  optionRow,
+  optionsSidebarTabs,
+  persistSelectedOptionsSidebarPanel,
+  rightRow,
+  showNotification,
+  useStaticFiles
+} from "./index-6cvm9a65.mjs";
+import {
+  RenderQueueContext
+} from "./index-9x6e1dq0.mjs";
+import {
+  openInFileExplorer
+} from "./index-hy4xcgty.mjs";
+import {
+  getBrowserStudioOperations
+} from "./index-cw0pnpg5.mjs";
+import {
+  Models
+} from "./index-5qddp5h7.mjs";
+import"./index-1x7bsdh6.mjs";
+import {
+  InlineAction,
+  Spacing,
+  VERTICAL_SCROLLBAR_CLASSNAME,
+  ValidationMessage,
+  buttonStyle,
+  container,
+  flexer,
+  horizontalLayout,
+  horizontalTab,
+  icon,
+  iconContainer,
+  leftSidebar,
+  optionsPanel,
+  outerModalStyle
+} from "./index-xhe2m2qr.mjs";
+import"./index-5zrb1ft4.mjs";
+import {
+  BLUE_DISABLED,
+  LIGHT_TEXT,
+  WHITE
+} from "./index-jg13hf2g.mjs";
+import"./index-rcv7qkt5.mjs";
+
+// src/components/Transcription/TranscriptionModal.tsx
+import { formatBytes } from "@remotion/studio-shared";
+import {
+  canUseWhisperWebGpu,
+  getAvailableModels,
+  isWhisperModelCached
+} from "@remotion/whisper-webgpu";
+import {
+  useCallback,
+  useContext,
+  useEffect,
+  useMemo,
+  useState
+} from "react";
+
+// src/components/Transcription/whisper-languages.ts
+var WHISPER_LANGUAGES = [
+  ["af", "Afrikaans"],
+  ["sq", "Albanian"],
+  ["am", "Amharic"],
+  ["ar", "Arabic"],
+  ["hy", "Armenian"],
+  ["as", "Assamese"],
+  ["az", "Azerbaijani"],
+  ["ba", "Bashkir"],
+  ["eu", "Basque"],
+  ["be", "Belarusian"],
+  ["bn", "Bengali"],
+  ["bs", "Bosnian"],
+  ["br", "Breton"],
+  ["bg", "Bulgarian"],
+  ["my", "Burmese"],
+  ["ca", "Catalan"],
+  ["zh", "Chinese"],
+  ["hr", "Croatian"],
+  ["cs", "Czech"],
+  ["da", "Danish"],
+  ["nl", "Dutch"],
+  ["en", "English"],
+  ["et", "Estonian"],
+  ["fo", "Faroese"],
+  ["fi", "Finnish"],
+  ["fr", "French"],
+  ["gl", "Galician"],
+  ["ka", "Georgian"],
+  ["de", "German"],
+  ["el", "Greek"],
+  ["gu", "Gujarati"],
+  ["ht", "Haitian Creole"],
+  ["ha", "Hausa"],
+  ["haw", "Hawaiian"],
+  ["he", "Hebrew"],
+  ["hi", "Hindi"],
+  ["hu", "Hungarian"],
+  ["is", "Icelandic"],
+  ["id", "Indonesian"],
+  ["it", "Italian"],
+  ["ja", "Japanese"],
+  ["jw", "Javanese"],
+  ["kn", "Kannada"],
+  ["kk", "Kazakh"],
+  ["km", "Khmer"],
+  ["ko", "Korean"],
+  ["lo", "Lao"],
+  ["la", "Latin"],
+  ["lv", "Latvian"],
+  ["ln", "Lingala"],
+  ["lt", "Lithuanian"],
+  ["lb", "Luxembourgish"],
+  ["mk", "Macedonian"],
+  ["mg", "Malagasy"],
+  ["ms", "Malay"],
+  ["ml", "Malayalam"],
+  ["mt", "Maltese"],
+  ["mi", "Maori"],
+  ["mr", "Marathi"],
+  ["mn", "Mongolian"],
+  ["ne", "Nepali"],
+  ["no", "Norwegian"],
+  ["nn", "Nynorsk"],
+  ["oc", "Occitan"],
+  ["ps", "Pashto"],
+  ["fa", "Persian"],
+  ["pl", "Polish"],
+  ["pt", "Portuguese"],
+  ["pa", "Punjabi"],
+  ["ro", "Romanian"],
+  ["ru", "Russian"],
+  ["sa", "Sanskrit"],
+  ["sr", "Serbian"],
+  ["sn", "Shona"],
+  ["sd", "Sindhi"],
+  ["si", "Sinhala"],
+  ["sk", "Slovak"],
+  ["sl", "Slovenian"],
+  ["so", "Somali"],
+  ["es", "Spanish"],
+  ["su", "Sundanese"],
+  ["sw", "Swahili"],
+  ["sv", "Swedish"],
+  ["tl", "Tagalog"],
+  ["tg", "Tajik"],
+  ["ta", "Tamil"],
+  ["tt", "Tatar"],
+  ["te", "Telugu"],
+  ["th", "Thai"],
+  ["bo", "Tibetan"],
+  ["tr", "Turkish"],
+  ["tk", "Turkmen"],
+  ["uk", "Ukrainian"],
+  ["ur", "Urdu"],
+  ["uz", "Uzbek"],
+  ["vi", "Vietnamese"],
+  ["cy", "Welsh"],
+  ["yi", "Yiddish"],
+  ["yo", "Yoruba"]
+];
+
+// src/components/Transcription/TranscriptionModal.tsx
+import { jsx, jsxs, Fragment } from "react/jsx-runtime";
+var TRANSCRIPTION_OUTPUT_MESSAGE_ID = "remotion-transcription-output-message";
+var TRANSCRIPTION_CHUNK_MESSAGE_ID = "remotion-transcription-chunk-message";
+var TRANSCRIPTION_DECODING_MESSAGE_ID = "remotion-transcription-decoding-message";
+var TRANSCRIPTION_TASK_MESSAGE_ID = "remotion-transcription-task-message";
+var DEFAULT_CHUNK_LENGTH_IN_SECONDS = 30;
+var DEFAULT_STRIDE_LENGTH_IN_SECONDS = 5;
+var DEFAULT_TEMPERATURE = 1;
+var DEFAULT_TOP_K = 50;
+var DEFAULT_REPETITION_PENALTY = 1;
+var DEFAULT_NO_REPEAT_NGRAM_SIZE = 0;
+var MAX_CHUNK_LENGTH_IN_SECONDS = 30;
+var AVAILABLE_MODELS = getAvailableModels();
+var settingsPanel = {
+  ...optionsPanel,
+  flexDirection: "column",
+  paddingTop: 16
+};
+var advancedPanel = {
+  ...settingsPanel,
+  paddingTop: 0
+};
+var transcriptionModalStyle = {
+  ...outerModalStyle,
+  outline: "none"
+};
+var transcriptionLayout = {
+  ...horizontalLayout,
+  flex: "1 1 auto"
+};
+var controlStyle = {
+  width: 330,
+  maxWidth: "100%"
+};
+var nestedLabelStyle = {
+  color: "inherit",
+  fontFamily: "inherit",
+  fontSize: "inherit",
+  lineHeight: "inherit"
+};
+var taskMessageRow = {
+  display: "flex",
+  justifyContent: "flex-end",
+  padding: "0 16px 8px"
+};
+var outputRow = {
+  display: "flex",
+  flexDirection: "row",
+  alignItems: "flex-start",
+  paddingLeft: 16,
+  paddingRight: 16,
+  paddingTop: 4,
+  paddingBottom: 12
+};
+var outputRightRow = {
+  display: "flex",
+  flex: 1,
+  flexDirection: "row",
+  alignItems: "flex-start",
+  justifyContent: "flex-end",
+  minWidth: 0
+};
+var tooltipContent = {
+  color: LIGHT_TEXT,
+  fontSize: 13,
+  lineHeight: 1.5,
+  maxWidth: 360,
+  padding: 12
+};
+var tooltipInlineCode = {
+  color: WHITE,
+  fontFamily: "monospace",
+  fontSize: "inherit",
+  lineHeight: "inherit"
+};
+var hiddenPanel = {
+  display: "none"
+};
+var existsMessageStyle = {
+  display: "inline-flex",
+  alignItems: "center",
+  minWidth: 0,
+  fontFamily: "sans-serif",
+  fontSize: 13,
+  lineHeight: "18px",
+  color: WHITE,
+  whiteSpace: "nowrap"
+};
+var openIconStyle = {
+  width: 12,
+  height: 12,
+  flexShrink: 0
+};
+var TranscriptionSettingLabel = ({ children, inputId, name }) => {
+  return /* @__PURE__ */ jsxs("div", {
+    style: label,
+    children: [
+      inputId === null ? name : /* @__PURE__ */ jsx("label", {
+        htmlFor: inputId,
+        style: nestedLabelStyle,
+        children: name
+      }),
+      /* @__PURE__ */ jsx(Spacing, {
+        x: 0.5
+      }),
+      /* @__PURE__ */ jsx(InfoBubble, {
+        title: `Learn more about ${name}`,
+        children: /* @__PURE__ */ jsx("div", {
+          style: tooltipContent,
+          children
+        })
+      })
+    ]
+  });
+};
+var 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 = useMemo(() => {
+    return AVAILABLE_MODELS.map((model) => {
+      return {
+        type: "item",
+        id: model.name,
+        value: model.name,
+        label: `${model.name} · ${formatBytes(model.webGpuDownloadSize)}${cachedModels.has(model.name) ? " · Downloaded" : ""}`,
+        leftItem: model.name === selectedModel ? /* @__PURE__ */ jsx(Checkmark, {}) : null,
+        keyHint: null,
+        quickSwitcherLabel: null,
+        subMenu: null,
+        disabled: false,
+        onClick: () => setSelectedModel(model.name)
+      };
+    });
+  }, [cachedModels, selectedModel, setSelectedModel]);
+  const languageOptions = useMemo(() => {
+    return WHISPER_LANGUAGES.map(([languageCode, languageName]) => ({
+      type: "item",
+      id: languageCode,
+      value: languageCode,
+      label: languageName,
+      leftItem: languageCode === selectedLanguage ? /* @__PURE__ */ jsx(Checkmark, {}) : null,
+      keyHint: null,
+      quickSwitcherLabel: null,
+      subMenu: null,
+      disabled: false,
+      onClick: () => setSelectedLanguage(languageCode)
+    }));
+  }, [selectedLanguage, setSelectedLanguage]);
+  const effectiveTask = selectedModelInfo.supportsTranslation ? selectedTask : "transcribe";
+  const taskOptions = useMemo(() => {
+    return [
+      {
+        type: "item",
+        id: "transcribe",
+        value: "transcribe",
+        label: /* @__PURE__ */ jsxs(Fragment, {
+          children: [
+            /* @__PURE__ */ jsx("span", {
+              "aria-hidden": "true",
+              style: nestedLabelStyle,
+              children: "Transcribe"
+            }),
+            /* @__PURE__ */ jsx("span", {
+              style: { position: "absolute", clip: "rect(0 0 0 0)" },
+              children: "Task: Transcribe"
+            })
+          ]
+        }),
+        leftItem: effectiveTask === "transcribe" ? /* @__PURE__ */ jsx(Checkmark, {}) : null,
+        keyHint: null,
+        quickSwitcherLabel: null,
+        subMenu: null,
+        disabled: false,
+        onClick: () => setSelectedTask("transcribe")
+      },
+      {
+        type: "item",
+        id: "translate",
+        value: "translate",
+        label: /* @__PURE__ */ jsxs(Fragment, {
+          children: [
+            /* @__PURE__ */ jsx("span", {
+              "aria-hidden": "true",
+              style: nestedLabelStyle,
+              children: "Translate to English"
+            }),
+            /* @__PURE__ */ jsx("span", {
+              style: { position: "absolute", clip: "rect(0 0 0 0)" },
+              children: "Task: Translate to English"
+            })
+          ]
+        }),
+        leftItem: effectiveTask === "translate" ? /* @__PURE__ */ jsx(Checkmark, {}) : null,
+        keyHint: null,
+        quickSwitcherLabel: null,
+        subMenu: null,
+        disabled: false,
+        onClick: () => setSelectedTask("translate")
+      }
+    ];
+  }, [effectiveTask, setSelectedTask]);
+  useEffect(() => {
+    if (!selectedModelInfo.supportsTranslation) {
+      setSelectedTask("transcribe");
+    }
+  }, [selectedModelInfo.supportsTranslation, setSelectedTask]);
+  return /* @__PURE__ */ jsxs(Fragment, {
+    children: [
+      /* @__PURE__ */ jsxs("div", {
+        style: optionRow,
+        children: [
+          /* @__PURE__ */ jsx("div", {
+            style: label,
+            children: "Whisper model"
+          }),
+          /* @__PURE__ */ jsx("div", {
+            style: rightRow,
+            children: /* @__PURE__ */ jsx(Combobox, {
+              values: modelOptions,
+              selectedId: selectedModel,
+              title: "Whisper model",
+              style: controlStyle
+            })
+          })
+        ]
+      }),
+      selectedModelInfo.multilingual ? /* @__PURE__ */ jsxs("div", {
+        style: optionRow,
+        children: [
+          /* @__PURE__ */ jsx("div", {
+            style: label,
+            children: "Spoken language"
+          }),
+          /* @__PURE__ */ jsx("div", {
+            style: rightRow,
+            children: /* @__PURE__ */ jsx(Combobox, {
+              values: languageOptions,
+              selectedId: selectedLanguage,
+              title: "Spoken language",
+              style: controlStyle
+            })
+          })
+        ]
+      }) : null,
+      selectedModelInfo.supportsTranslation ? /* @__PURE__ */ jsxs("div", {
+        style: optionRow,
+        children: [
+          /* @__PURE__ */ jsx("div", {
+            style: label,
+            children: "Task"
+          }),
+          /* @__PURE__ */ jsx("div", {
+            style: rightRow,
+            children: /* @__PURE__ */ jsx(Combobox, {
+              values: taskOptions,
+              selectedId: effectiveTask,
+              title: "Task",
+              style: controlStyle
+            })
+          })
+        ]
+      }) : null,
+      effectiveTask === "translate" ? /* @__PURE__ */ jsx("div", {
+        id: TRANSCRIPTION_TASK_MESSAGE_ID,
+        "aria-live": "polite",
+        style: taskMessageRow,
+        children: /* @__PURE__ */ jsx(ValidationMessage, {
+          align: "flex-end",
+          message: "Word timings may be less accurate when translating to English.",
+          type: "warning"
+        })
+      }) : null,
+      supportState.type === "unsupported" ? /* @__PURE__ */ jsx("div", {
+        style: { padding: "0 16px" },
+        children: /* @__PURE__ */ jsx(ValidationMessage, {
+          align: "flex-end",
+          message: supportState.message,
+          type: "error"
+        })
+      }) : null
+    ]
+  });
+};
+var OutputSettings = ({ exists, onOutNameChange, outName, validationMessage }) => {
+  const openExistingOutput = useCallback(() => {
+    if (!window.remotion_publicFolderExists) {
+      showNotification("Could not find the public folder", 2000);
+      return;
+    }
+    openInFileExplorer({
+      directory: `${window.remotion_publicFolderExists}/${outName}`
+    }).catch((err) => {
+      showNotification(`Could not open file: ${err.message}`, 2000);
+    });
+  }, [outName]);
+  const renderOpenIcon = useCallback((color) => {
+    return /* @__PURE__ */ jsx(ExpandedFolderIconSolid, {
+      style: openIconStyle,
+      color
+    });
+  }, []);
+  const fileManagerName = getFileManagerName(window.remotion_fileSystemPlatform);
+  const isBrowserStudio = getBrowserStudioOperations() !== null;
+  return /* @__PURE__ */ jsxs("div", {
+    style: outputRow,
+    children: [
+      /* @__PURE__ */ jsxs(TranscriptionSettingLabel, {
+        inputId: null,
+        name: "Output in public/",
+        children: [
+          "Studio writes a JSON array compatible with",
+          " ",
+          /* @__PURE__ */ jsx("code", {
+            style: tooltipInlineCode,
+            children: "Caption[]"
+          }),
+          ". Load it from your composition with ",
+          /* @__PURE__ */ jsx("code", {
+            style: tooltipInlineCode,
+            children: "staticFile()"
+          }),
+          "."
+        ]
+      }),
+      /* @__PURE__ */ jsx("div", {
+        style: outputRightRow,
+        children: /* @__PURE__ */ jsxs("div", {
+          style: controlStyle,
+          children: [
+            /* @__PURE__ */ jsx(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: input,
+              type: "text",
+              value: outName,
+              onChange: onOutNameChange,
+              rightAlign: true
+            }),
+            validationMessage || exists ? /* @__PURE__ */ jsxs("div", {
+              id: TRANSCRIPTION_OUTPUT_MESSAGE_ID,
+              "aria-live": "polite",
+              children: [
+                /* @__PURE__ */ jsx(Spacing, {
+                  y: 1,
+                  block: true
+                }),
+                /* @__PURE__ */ jsx(ValidationMessage, {
+                  align: "flex-end",
+                  message: validationMessage ?? /* @__PURE__ */ jsxs("span", {
+                    style: existsMessageStyle,
+                    children: [
+                      isBrowserStudio ? null : /* @__PURE__ */ jsx(InlineAction, {
+                        onClick: openExistingOutput,
+                        renderAction: renderOpenIcon,
+                        title: `Open in ${fileManagerName}`,
+                        variant: null
+                      }),
+                      "Exists, will be overwritten"
+                    ]
+                  }),
+                  type: validationMessage ? "error" : "warning"
+                })
+              ]
+            }) : null
+          ]
+        })
+      })
+    ]
+  });
+};
+var AdvancedSettings = ({
+  chunkLengthInSeconds,
+  doSample,
+  forceFullSequences,
+  noRepeatNgramSize,
+  repetitionPenalty,
+  setChunkLengthInSeconds,
+  setDoSample,
+  setForceFullSequences,
+  setNoRepeatNgramSize,
+  setRepetitionPenalty,
+  setStrideLengthInSeconds,
+  setTemperature,
+  setTopK,
+  strideLengthInSeconds,
+  temperature,
+  topK,
+  decodingValidationMessage,
+  validationMessage
+}) => {
+  const onForceFullSequencesChange = useCallback((event) => setForceFullSequences(event.target.checked), [setForceFullSequences]);
+  const onDoSampleChange = useCallback((event) => setDoSample(event.target.checked), [setDoSample]);
+  return /* @__PURE__ */ jsxs(Fragment, {
+    children: [
+      /* @__PURE__ */ jsxs("div", {
+        "aria-describedby": validationMessage ? TRANSCRIPTION_CHUNK_MESSAGE_ID : undefined,
+        "aria-invalid": validationMessage ? true : undefined,
+        "aria-label": "Chunk settings",
+        role: "group",
+        children: [
+          /* @__PURE__ */ jsx(NumberSetting, {
+            formatter: (value) => `${value}s`,
+            hint: {
+              content: /* @__PURE__ */ 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
+          }),
+          /* @__PURE__ */ jsx(NumberSetting, {
+            formatter: (value) => `${value}s`,
+            hint: {
+              content: /* @__PURE__ */ 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 ? /* @__PURE__ */ jsx("div", {
+        id: TRANSCRIPTION_CHUNK_MESSAGE_ID,
+        "aria-live": "polite",
+        style: { padding: "0 16px" },
+        children: /* @__PURE__ */ jsx(ValidationMessage, {
+          align: "flex-end",
+          message: validationMessage,
+          type: "error"
+        })
+      }) : null,
+      /* @__PURE__ */ jsxs("div", {
+        "aria-describedby": decodingValidationMessage ? TRANSCRIPTION_DECODING_MESSAGE_ID : undefined,
+        "aria-invalid": decodingValidationMessage ? true : undefined,
+        "aria-label": "Decoding settings",
+        role: "group",
+        children: [
+          /* @__PURE__ */ jsx(RenderModalHr, {}),
+          /* @__PURE__ */ jsxs("div", {
+            style: optionRow,
+            children: [
+              /* @__PURE__ */ jsx(TranscriptionSettingLabel, {
+                inputId: "force-full-sequences",
+                name: "Force full sequences",
+                children: "Makes the job fail if Whisper leaves an incomplete timestamp sequence."
+              }),
+              /* @__PURE__ */ jsx("div", {
+                style: rightRow,
+                children: /* @__PURE__ */ jsx(Checkbox, {
+                  checked: forceFullSequences,
+                  inputId: "force-full-sequences",
+                  name: "force-full-sequences",
+                  onChange: onForceFullSequencesChange
+                })
+              })
+            ]
+          }),
+          /* @__PURE__ */ jsx(RenderModalHr, {}),
+          /* @__PURE__ */ jsxs("div", {
+            style: optionRow,
+            children: [
+              /* @__PURE__ */ jsx(TranscriptionSettingLabel, {
+                inputId: "use-sampling",
+                name: "Use sampling",
+                children: "Makes decoding nondeterministic."
+              }),
+              /* @__PURE__ */ jsx("div", {
+                style: rightRow,
+                children: /* @__PURE__ */ jsx(Checkbox, {
+                  checked: doSample,
+                  inputId: "use-sampling",
+                  name: "use-sampling",
+                  onChange: onDoSampleChange
+                })
+              })
+            ]
+          }),
+          doSample ? /* @__PURE__ */ jsxs(Fragment, {
+            children: [
+              /* @__PURE__ */ jsx(NumberSetting, {
+                hint: {
+                  content: /* @__PURE__ */ 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
+              }),
+              /* @__PURE__ */ jsx(NumberSetting, {
+                hint: {
+                  content: /* @__PURE__ */ 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,
+          /* @__PURE__ */ jsx(NumberSetting, {
+            hint: {
+              content: /* @__PURE__ */ 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
+          }),
+          /* @__PURE__ */ jsx(NumberSetting, {
+            hint: {
+              content: /* @__PURE__ */ 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 ? /* @__PURE__ */ jsx("div", {
+        id: TRANSCRIPTION_DECODING_MESSAGE_ID,
+        "aria-live": "polite",
+        style: { padding: "0 16px" },
+        children: /* @__PURE__ */ jsx(ValidationMessage, {
+          align: "flex-end",
+          message: decodingValidationMessage,
+          type: "error"
+        })
+      }) : null
+    ]
+  });
+};
+var TranscriptionModal = ({
+  audioStreamIndex,
+  displayName,
+  requestInit,
+  src
+}) => {
+  const [tab, setTab] = useState("transcribe");
+  const isModelCached = useCallback((model) => isWhisperModelCached({ model }), []);
+  const cachedModels = useModelCacheStatus({
+    isModelCached,
+    models: AVAILABLE_MODELS,
+    refreshKey: tab
+  });
+  const [selectedModel, setSelectedModel] = useState("small.en");
+  const [selectedLanguage, setSelectedLanguage] = useState("en");
+  const [selectedTask, setSelectedTask] = useState("transcribe");
+  const [chunkLengthInSeconds, setChunkLengthInSeconds] = useState(DEFAULT_CHUNK_LENGTH_IN_SECONDS);
+  const [strideLengthInSeconds, setStrideLengthInSeconds] = useState(DEFAULT_STRIDE_LENGTH_IN_SECONDS);
+  const [forceFullSequences, setForceFullSequences] = useState(false);
+  const [doSample, setDoSample] = useState(false);
+  const [temperature, setTemperature] = useState(DEFAULT_TEMPERATURE);
+  const [topK, setTopK] = useState(DEFAULT_TOP_K);
+  const [repetitionPenalty, setRepetitionPenalty] = useState(DEFAULT_REPETITION_PENALTY);
+  const [noRepeatNgramSize, setNoRepeatNgramSize] = useState(DEFAULT_NO_REPEAT_NGRAM_SIZE);
+  const [supportState, setSupportState] = useState({
+    type: "checking"
+  });
+  const [outName, setOutName] = useState(() => getDefaultCaptionOutputName(src, displayName));
+  const { addCaptionJob, captionJobs } = useContext(RenderQueueContext);
+  const { setSelectedModal } = useContext(SetSelectedModalContext);
+  const { setSidebarCollapsedState } = useContext(SidebarContext);
+  const staticFiles = useStaticFiles();
+  useEffect(() => {
+    let cancelled = false;
+    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 = validateCaptionOutputName(outName) ?? (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 : outputValidationMessage ?? chunkValidationMessage ?? decodingValidationMessage ?? undefined;
+  const onOutNameChange = useCallback((event) => {
+    setOutName(event.target.value);
+  }, []);
+  const onAddToQueue = useCallback(() => {
+    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" });
+    persistSelectedOptionsSidebarPanel("renders");
+    optionsSidebarTabs.current?.selectRendersPanel();
+    setSelectedModal(null);
+  }, [
+    addCaptionJob,
+    audioStreamIndex,
+    canTranscribe,
+    chunkLengthInSeconds,
+    displayName,
+    doSample,
+    forceFullSequences,
+    noRepeatNgramSize,
+    outName,
+    repetitionPenalty,
+    requestInit,
+    src,
+    selectedLanguage,
+    selectedModel,
+    selectedTask,
+    setSelectedModal,
+    setSidebarCollapsedState,
+    strideLengthInSeconds,
+    temperature,
+    topK
+  ]);
+  return /* @__PURE__ */ jsx(DismissableModal, {
+    ariaLabel: `Transcribe ${displayName}`,
+    children: /* @__PURE__ */ jsxs("div", {
+      style: transcriptionModalStyle,
+      children: [
+        /* @__PURE__ */ jsx(ModalHeader, {
+          title: `Transcribe ${displayName}`
+        }),
+        /* @__PURE__ */ jsxs("div", {
+          style: container,
+          children: [
+            /* @__PURE__ */ jsx("div", {
+              style: flexer
+            }),
+            /* @__PURE__ */ jsx(Button, {
+              onClick: onAddToQueue,
+              disabled: !canTranscribe,
+              title: transcribeDisabledReason,
+              style: {
+                ...buttonStyle,
+                backgroundColor: canTranscribe ? buttonStyle.backgroundColor : BLUE_DISABLED
+              },
+              children: "Transcribe"
+            })
+          ]
+        }),
+        /* @__PURE__ */ jsxs("div", {
+          style: transcriptionLayout,
+          children: [
+            /* @__PURE__ */ jsxs("div", {
+              style: leftSidebar,
+              children: [
+                /* @__PURE__ */ jsx(VerticalTab, {
+                  autoFocus: true,
+                  style: horizontalTab,
+                  selected: tab === "transcribe",
+                  onClick: () => setTab("transcribe"),
+                  renderIcon: (color) => /* @__PURE__ */ jsx("div", {
+                    style: iconContainer,
+                    children: /* @__PURE__ */ jsx(TranscriptionIcon, {
+                      color,
+                      style: icon
+                    })
+                  }),
+                  children: "Transcribe"
+                }),
+                /* @__PURE__ */ jsx(VerticalTab, {
+                  style: horizontalTab,
+                  selected: tab === "models",
+                  onClick: () => setTab("models"),
+                  renderIcon: (color) => /* @__PURE__ */ jsx("div", {
+                    style: iconContainer,
+                    children: /* @__PURE__ */ jsx(ModelsIcon, {
+                      color,
+                      style: icon
+                    })
+                  }),
+                  children: "Models"
+                }),
+                /* @__PURE__ */ jsx(VerticalTab, {
+                  style: horizontalTab,
+                  selected: tab === "advanced",
+                  onClick: () => setTab("advanced"),
+                  renderIcon: (color) => /* @__PURE__ */ jsx("div", {
+                    style: iconContainer,
+                    children: /* @__PURE__ */ jsx(GearIcon, {
+                      color,
+                      style: icon
+                    })
+                  }),
+                  children: "Advanced"
+                })
+              ]
+            }),
+            /* @__PURE__ */ jsxs("div", {
+              style: tab === "transcribe" ? settingsPanel : hiddenPanel,
+              className: VERTICAL_SCROLLBAR_CLASSNAME,
+              children: [
+                /* @__PURE__ */ jsx(OutputSettings, {
+                  exists,
+                  onOutNameChange,
+                  outName,
+                  validationMessage: outputValidationMessage
+                }),
+                /* @__PURE__ */ jsx(RenderModalHr, {}),
+                /* @__PURE__ */ jsx(ModelSettings, {
+                  cachedModels,
+                  selectedLanguage,
+                  selectedModel,
+                  selectedTask,
+                  setSelectedLanguage,
+                  setSelectedModel,
+                  setSelectedTask,
+                  supportState
+                })
+              ]
+            }),
+            /* @__PURE__ */ jsx("div", {
+              style: tab === "advanced" ? advancedPanel : hiddenPanel,
+              className: VERTICAL_SCROLLBAR_CLASSNAME,
+              children: /* @__PURE__ */ jsx(AdvancedSettings, {
+                chunkLengthInSeconds,
+                decodingValidationMessage,
+                doSample,
+                forceFullSequences,
+                noRepeatNgramSize,
+                repetitionPenalty,
+                setChunkLengthInSeconds,
+                setDoSample,
+                setForceFullSequences,
+                setNoRepeatNgramSize,
+                setRepetitionPenalty,
+                setStrideLengthInSeconds,
+                setTemperature,
+                setTopK,
+                strideLengthInSeconds,
+                temperature,
+                topK,
+                validationMessage: chunkValidationMessage
+              })
+            }),
+            /* @__PURE__ */ jsx(Models, {
+              description: `Models are downloaded automatically when needed.
+You can also manage the browser cache here.`,
+              indent: true,
+              visible: tab === "models"
+            })
+          ]
+        })
+      ]
+    })
+  });
+};
+export {
+  TranscriptionModal
+};