sveltekit-ui 1.1.17 → 1.1.18

package/dist/Components/AudioEditor/index.svelte.js

@@ -0,0 +1,977 @@
+import { create_unique_id, set_closurable, clean_file_name, url_to_file } from "../../client/index.js"
+import { create_popover_manager } from "../Popover/index.svelte.js"
+import { create_button_manager } from "../Button/index.svelte.js"
+import { create_text_input_manager } from "../TextInput/index.svelte.js"
+import { create_storage_picker_manager } from "../StoragePicker/index.svelte.js"
+import { create_dropdown_manager } from "../Dropdown/index.svelte.js"
+import { create_audio_manager } from "../Audio/index.svelte.js"
+import alloy_voice_sample from "./samples/alloy-voice-sample.mp3"
+import echo_voice_sample from "./samples/echo-voice-sample.mp3"
+import fable_voice_sample from "./samples/fable-voice-sample.mp3"
+import nova_voice_sample from "./samples/nova-voice-sample.mp3"
+import onyx_voice_sample from "./samples/onyx-voice-sample.mp3"
+import shimmer_voice_sample from "./samples/shimmer-voice-sample.mp3"
+
+export function create_audio_editor_manager(config) {
+  let id = create_unique_id(null, 20)
+
+  const voices = [
+    {
+      id: "alloy",
+      name: "Alloy",
+      labels: [],
+      sample: alloy_voice_sample,
+    },
+    {
+      id: "echo",
+      name: "Echo",
+      labels: [],
+      sample: echo_voice_sample,
+    },
+    {
+      id: "fable",
+      name: "Fable",
+      labels: [],
+      sample: fable_voice_sample,
+    },
+    {
+      id: "nova",
+      name: "Nova",
+      labels: [],
+      sample: nova_voice_sample,
+    },
+    {
+      id: "onyx",
+      name: "Onyx",
+      labels: [],
+      sample: onyx_voice_sample,
+    },
+    {
+      id: "shimmer",
+      name: "Shimmer",
+      labels: [],
+      sample: shimmer_voice_sample,
+    },
+  ]
+
+  const audio_tags_input_base = {
+    TIT2: null,
+    TALB: null,
+    TPE1: null,
+    APIC: {
+      mime: null,
+      type: {
+        id: 0,
+      },
+      description: null,
+      imageBuffer: null,
+    },
+    TYER: 2024,
+    USLT: {
+      language: "eng",
+      text: null,
+    },
+    TLAN: null,
+  }
+
+  const audio_input_tag_defs = {
+    TIT2: { display_order: 1, name: "Title", example: "Audio Title" },
+    TALB: { display_order: 2, name: "Album Title", example: "Album Title" },
+    APIC: {
+      display_order: 3,
+      name: "Attached Picture",
+      example: "{ mime: 'image/jpeg', type: { id: 0 }, description: null, imageBuffer: null }",
+    },
+    TPE1: {
+      display_order: 4,
+      name: "Artist",
+      example: "Artist",
+    },
+    USLT: {
+      display_order: 5,
+      name: "Unsynchronised Lyrics",
+      example: "{ text: 'Lyrics of the audio', language: 'eng' }",
+    },
+    TYER: { display_order: 6, name: "Release Year", example: "2024" },
+    TLAN: { display_order: 7, name: "Language", example: "eng" },
+    TIT3: { display_order: 8, name: "Subtitle", example: "Audio Subtitle" },
+    TPE2: { display_order: 9, name: "Album Artist", example: "Album Artist" },
+    TCOM: {
+      display_order: 10,
+      name: "Composers",
+      example: "[ 'Composer 1', 'Composer 2' ]",
+    },
+    TCON: {
+      display_order: 11,
+      name: "Genres",
+      example: "[ 'Genre 1', 'Genre 2' ]",
+    },
+    TIT1: {
+      display_order: 12,
+      name: "Content Group Description",
+      example: "Content Description",
+    },
+    TPE3: {
+      display_order: 13,
+      name: "Conductor/Performer Refinement",
+      example: "Performer Name",
+    },
+    TPE4: {
+      display_order: 14,
+      name: "Interpreted, Remixed, or Otherwise Modified By",
+      example: "Remixer Name",
+    },
+    TRCK: { display_order: 15, name: "Track Number", example: "'5' or '5/10'" },
+    TPOS: { display_order: 16, name: "Disc Number", example: "'1' or '1/3'" },
+    TPUB: {
+      display_order: 17,
+      name: "Label Name",
+      example: "Record Label Name",
+    },
+    TKEY: { display_order: 18, name: "Initial Key", example: "A#m" },
+    TMED: { display_order: 19, name: "Media Type", example: "Digital Media" },
+    TDAT: {
+      display_order: 20,
+      name: "Release Date",
+      example: "0101 (for 1st January)",
+    },
+    TSRC: {
+      display_order: 21,
+      name: "ISRC",
+      example: "International Standard Recording Code",
+    },
+    TCOP: {
+      display_order: 22,
+      name: "Copyright Message",
+      example: "© 2024 Record Label",
+    },
+    TEXT: {
+      display_order: 23,
+      name: "Lyricist/Text Writer",
+      example: "Lyricist Name",
+    },
+    WCOM: {
+      display_order: 24,
+      name: "Commercial Information",
+      example: "http://website.com",
+    },
+    WCOP: {
+      display_order: 25,
+      name: "Legal Information",
+      example: "http://website.com/legal",
+    },
+    WOAF: {
+      display_order: 26,
+      name: "Official Audio File Webpage",
+      example: "http://website.com/audio_file",
+    },
+    WOAR: {
+      display_order: 27,
+      name: "Official Artist Webpage",
+      example: "http://website.com/artist",
+    },
+    WOAS: {
+      display_order: 28,
+      name: "Official Audio Source Webpage",
+      example: "http://website.com/audiosource",
+    },
+    WORS: {
+      display_order: 29,
+      name: "Official Internet Radio Station Homepage",
+      example: "http://website.com/radio",
+    },
+    WPAY: {
+      display_order: 30,
+      name: "Payment",
+      example: "http://website.com/payment",
+    },
+    WPUB: {
+      display_order: 31,
+      name: "Publisher’s Official Webpage",
+      example: "http://website.com/publisher",
+    },
+    TLEN: {
+      display_order: 32,
+      name: "Audio Duration",
+      example: "230000 (for 3 minutes and 50 seconds)",
+    },
+    TBPM: { display_order: 33, name: "BPM", example: "120" },
+    COMM: {
+      display_order: 34,
+      name: "Comments",
+      example: "{ description: 'Comment', text: 'This is a comment', language: 'eng' }",
+    },
+    IPLS: {
+      display_order: 35,
+      name: "Involved People List",
+      example: "[ ['role', 'name'], ['role', 'name'] ]",
+    },
+    SYLT: {
+      display_order: 36,
+      name: "Synchronised Lyrics",
+      example:
+        "{ type: 1, text: [ ['lyrics here', 0], ['lyrics here', 3500] ], timestampFormat: 2, language: 'eng', description: 'description' }",
+    },
+    TXXX: {
+      display_order: 37,
+      name: "Additional Defined Text",
+      example: "{ description: 'description here', value: 'value here' }",
+    },
+    PRIV: {
+      display_order: 38,
+      name: "Private Frame",
+      example: "{ id: 'identifier', data: dataArrayBuffer }",
+    },
+  }
+
+  const lang_options = [
+    { key: "eng", name: "English" },
+    { key: "spa", name: "Spanish" },
+    { key: "fra", name: "French" },
+    { key: "deu", name: "German" },
+    { key: "rus", name: "Russian" },
+    { key: "ita", name: "Italian" },
+    { key: "por", name: "Portuguese" },
+    { key: "jpn", name: "Japanese" },
+    { key: "zho", name: "Chinese" },
+    { key: "ara", name: "Arabic" },
+    { key: "hin", name: "Hindi" },
+    { key: "kor", name: "Korean" },
+    { key: "tur", name: "Turkish" },
+    { key: "swe", name: "Swedish" },
+    { key: "nld", name: "Dutch" },
+    { key: "pol", name: "Polish" },
+    { key: "dan", name: "Danish" },
+    { key: "fin", name: "Finnish" },
+    { key: "nor", name: "Norwegian" },
+    { key: "heb", name: "Hebrew" },
+  ]
+
+  let is_loading_generate_audio = $state(false)
+  let error_message = $state(null)
+  let success_message = $state(null)
+  let is_text_to_audio = $state(false)
+
+  let is_popover = $state(true)
+  let popover_manager = $state(null)
+  let clear_button_manager = $state(null)
+  let is_alt_content_shown = $state(false)
+  let seed_from_input_popover_manager = $state(null)
+  let seed_from_input_popover_button_manager = $state(null)
+  let seed_audio_storage_picker_manager = $state(null)
+  let download_audio_file_button_manager = $state(null)
+  let generate_audio_changes_button_manager = $state(null)
+  let finish_button_manager = $state(null)
+  let use_text_to_audio_button_manager = $state(null)
+  let select_file_from_storage_button_manager = $state(null)
+  let use_mp3_file_button_manager = $state(null)
+  let text_to_audio_text_input_manager = $state(null)
+  let audio_storage_picker_manager = $state(null)
+  let file_name_text_input_manager = $state(null)
+  let title_text_input_manager = $state(null)
+  let album_title_text_input_manager = $state(null)
+  let image_storage_picker_manager = $state(null)
+  let image_description_text_input_manager = $state(null)
+  let artist_text_input_manager = $state(null)
+  let lyrics_text_input_manager = $state(null)
+  let release_year_text_input_manager = $state(null)
+  let language_dropdown_manager = $state(null)
+  let additional_tags_input_prepped = $state(null)
+  let generated_audio_file_obj = $state(null)
+  let voice_options = $state(null)
+  let voice_id = $state(null)
+  let edit_voice_popover_manager = $state(null)
+  let edit_voice_button_manager = $state(null)
+  let audio_manager = $state(null)
+  let clear_generated_audio_button_manager = $state(null)
+  let additional_metatags_dropdown_manager = $state(null)
+
+  // actually we'll prob do this server stuff diff like call config?.fetch_audio_read_tags() and handle in parent
+  let api_prefix = $derived(set_closurable(config?.api_prefix, "https://www.contibase.com/api/v1"))
+  let storage_src = $derived(
+    set_closurable(config?.storage_src, "https://www.contibase.com/api/v1/storage/{storage_id}")
+  )
+  let fetch_path_audio_read_tags = $derived(
+    set_closurable(config?.fetch_path_audio_read_tags, `${api_prefix}/tools/audio/read_tags`)
+  )
+  let fetch_path_audio_post = $derived(set_closurable(config?.fetch_path_audio_post, `${api_prefix}/tools/audio`))
+  let file_prefix = $derived(set_closurable(config?.file_prefix, `${api_prefix}/storage/`))
+
+  let account = $derived(set_closurable(config?.account, null))
+  let is_disabled = $derived(set_closurable(config?.is_disabled, false))
+  let storage = $derived(set_closurable(config?.storage, null))
+  let locally_uploaded_files = $derived(set_closurable(config?.locally_uploaded_files, null))
+
+  let file_name_derived = $derived(`${clean_file_name(file_name_text_input_manager?.val)}.mp3`)
+  let additional_tag_keys_ordered = $derived(
+    Object.keys(additional_tags_input_prepped || {})
+      .map((key) => ({ key, display_order: audio_input_tag_defs[key]?.display_order }))
+      .sort((a, b) => a.display_order - b.display_order)
+      .map((item) => item.key)
+  )
+
+  let text_to_audio_time_in_minutes = $derived(calc_time_in_minutes(text_to_audio_text_input_manager?.val))
+
+  function calc_time_in_minutes(text) {
+    if (!text || text.length < 20) {
+      return 0
+    }
+    const average_speed = 155
+    const word_count = text.split(" ").length
+    return Math.ceil(word_count / average_speed)
+  }
+
+  async function seed(input) {
+    if (!input) {
+      file_name_text_input_manager.set_val(null)
+      text_to_audio_text_input_manager.set_val(null)
+      audio_storage_picker_manager.set_val(null)
+      title_text_input_manager.set_val(null)
+      album_title_text_input_manager.set_val(null)
+      image_storage_picker_manager.set_val(null)
+      image_description_text_input_manager.set_val(null)
+      artist_text_input_manager.set_val(null)
+      lyrics_text_input_manager.set_val(null)
+      release_year_text_input_manager.set_val(null)
+      language_dropdown_manager.set_val(null)
+      additional_tags_input_prepped = null
+      return
+    }
+    if (!input?.file && input?.id) {
+      let file_src = `${file_prefix}${input?.id}`
+      input.file = await url_to_file(file_src, file_name_derived)
+    }
+    is_text_to_audio = false
+    text_to_audio_text_input_manager.set_val(null)
+    if (input.hasOwnProperty("is_text_to_audio")) {
+      is_text_to_audio = input?.is_text_to_audio
+      text_to_audio_text_input_manager.set_val(input?.text_to_audio_input ?? null)
+      voice_id = input?.voice_id ?? null
+    }
+    let cleaned_file_name = clean_file_name(input?.file_name ?? input?.file?.name)
+    let audio_metadata = null
+    if (input?.file) {
+      audio_metadata = await get_audio_metadata(input?.file)
+      audio_storage_picker_manager.set_val(input)
+    }
+    file_name_text_input_manager.set_val(cleaned_file_name)
+    title_text_input_manager.set_val(input?.title ?? input?.tags?.TIT2 ?? audio_metadata?.tags?.TIT2 ?? null)
+    album_title_text_input_manager.set_val(
+      input?.album_title ?? input?.tags?.TALB ?? audio_metadata?.tags?.TALB ?? null
+    )
+    image_storage_picker_manager.set_val({ file_name: "cover", file: input?.image_file ?? audio_metadata?.image?.file })
+    image_description_text_input_manager.set_val(
+      input?.image_description ?? input?.tags?.APIC?.description ?? audio_metadata?.tags?.APIC?.description ?? null
+    )
+    artist_text_input_manager.set_val(input?.artist ?? input?.tags?.TPE1 ?? audio_metadata?.tags?.TPE1 ?? null)
+    lyrics_text_input_manager.set_val(
+      input?.lyrics ?? input?.tags?.USLT?.text ?? audio_metadata?.tags?.USLT?.text ?? null
+    )
+    release_year_text_input_manager.set_val(
+      input?.release_year ?? input?.tags?.TYER ?? audio_metadata?.tags?.TYER ?? null
+    )
+    language_dropdown_manager.set_val(input?.language ?? input?.tags?.TLAN ?? audio_metadata?.tags?.TLAN ?? null)
+    const tags_input = input?.tags ?? audio_metadata?.tags
+    let additonal_tag_keys = []
+    if (
+      tags_input &&
+      typeof tags_input == "object" &&
+      !Array.isArray(tags_input) &&
+      Object.keys(tags_input).length > 0
+    ) {
+      for (let key of Object.keys(tags_input)) {
+        if (!audio_tags_input_base.hasOwnProperty(key)) {
+          additonal_tag_keys.push(key)
+        }
+      }
+    }
+    additional_metatags_dropdown_manager.set_val(additonal_tag_keys)
+    set_additional_tags_input_prepped(tags_input)
+    popover_manager.open()
+    seed_from_input_popover_manager.close()
+  }
+
+  function set_additional_tags_input_prepped(tags_input) {
+    let additional_tags_input_prepped_loc = {}
+    if (
+      tags_input &&
+      typeof tags_input == "object" &&
+      !Array.isArray(tags_input) &&
+      Object.keys(tags_input).length > 0
+    ) {
+      for (let [key, val] of Object.entries(tags_input)) {
+        if (!audio_tags_input_base.hasOwnProperty(key)) {
+          let tag_input_prepped_loc = {
+            key,
+            name: audio_input_tag_defs[key]?.name,
+            display_order: audio_input_tag_defs[key]?.display_order,
+          }
+          tag_input_prepped_loc.text_input_manager = create_text_input_manager({
+            val: val,
+            is_disabled: () => is_loading_generate_audio || is_disabled,
+            placeholder: () => audio_input_tag_defs[key]?.example,
+          })
+          additional_tags_input_prepped_loc[key] = tag_input_prepped_loc
+        }
+      }
+    }
+    additional_tags_input_prepped = additional_tags_input_prepped_loc
+  }
+
+  function clear() {
+    seed(null)
+  }
+
+  async function get_audio_metadata(audio_file) {
+    try {
+      let form_data = new FormData()
+      form_data.append("file", audio_file)
+      let response = await fetch(fetch_path_audio_read_tags, {
+        method: "POST",
+        body: form_data,
+      })
+      if (!response.ok) {
+        throw new Error(await response.text())
+      }
+      let res_body = await response.json()
+      let res = {
+        tags: null,
+        image: null,
+      }
+      if (res_body?.raw) {
+        res.tags = { ...audio_tags_input_base, ...res_body?.raw }
+        if (res_body?.raw?.["APIC"]?.imageBuffer) {
+          let buffer_data = res_body?.raw?.["APIC"]?.imageBuffer.data
+          let uint_8_array = new Uint8Array(buffer_data)
+          let blob = new Blob([uint_8_array], { type: res_body?.raw?.["APIC"]?.mime })
+          res.image = {
+            file: blob,
+            type: res_body?.raw?.["APIC"]?.mime,
+            src: URL.createObjectURL(blob),
+            size_kb: Math.ceil(blob.size / 1024),
+            description: res_body?.raw?.["APIC"]?.description,
+          }
+        }
+      }
+      return res
+    } catch (err) {
+      console.error(err)
+    }
+  }
+
+  function set_text_to_audio_input(val) {
+    text_to_audio_text_input_manager.set_val(val)
+  }
+
+  function set_is_text_to_audio(is_text_to_audio_input) {
+    is_text_to_audio = is_text_to_audio_input
+  }
+
+  async function resize_and_convert_image(src, max_width, max_height, output_format) {
+    return new Promise((resolve, reject) => {
+      let img = new Image()
+      img.crossOrigin = "anonymous"
+      img.onload = () => {
+        let canvas = document.createElement("canvas")
+        let ctx = canvas.getContext("2d")
+        let aspect_ratio = img.width / img.height
+        let new_width = max_width
+        let new_height = max_height
+        if (new_width / new_height > aspect_ratio) new_width = new_height * aspect_ratio
+        else new_height = new_width / aspect_ratio
+        canvas.width = new_width
+        canvas.height = new_height
+        ctx.drawImage(img, 0, 0, new_width, new_height)
+        resolve(canvas.toDataURL(output_format))
+      }
+      img.onerror = reject
+      img.src = src
+    })
+  }
+
+  async function generate_new_audio() {
+    try {
+      is_loading_generate_audio = true
+      error_message = null
+      success_message = null
+      let form_data = new FormData()
+      if (account?.id) {
+        form_data.append("account_id", account?.id)
+      }
+      let tags_input = {
+        TIT2: title_text_input_manager?.val ?? null,
+        TALB: album_title_text_input_manager?.val ?? null,
+        TPE1: artist_text_input_manager?.val ?? null,
+        APIC: {
+          mime: null,
+          type: {
+            id: 0,
+          },
+          description: image_description_text_input_manager?.val ?? null,
+          imageBuffer: null,
+        },
+        TYER: release_year_text_input_manager?.val ?? null,
+        USLT: {
+          language: language_dropdown_manager?.val ?? null,
+          text: lyrics_text_input_manager?.val ?? null,
+        },
+        TLAN: language_dropdown_manager?.val ?? null,
+      }
+      if (Object.keys(additional_tags_input_prepped || {}).length > 0) {
+        for (let [key, val] of Object.entries(additional_tags_input_prepped || {})) {
+          if (audio_input_tag_defs.hasOwnProperty(key)) {
+            tags_input[key] = val?.text_input_manager?.val
+          }
+        }
+      }
+      form_data.append("tags", JSON.stringify(tags_input))
+      form_data.append("file_name", file_name_text_input_manager?.val ?? null)
+      form_data.append("is_text_to_audio", is_text_to_audio)
+      if (is_text_to_audio) {
+        form_data.append("text_to_audio_input", text_to_audio_text_input_manager?.val)
+        form_data.append("voice_id", voice_id ?? null)
+      } else {
+        form_data.append("audio", audio_storage_picker_manager?.val?.file)
+      }
+      console.log("image_storage_picker_manager?.val", image_storage_picker_manager?.val)
+      if (image_storage_picker_manager?.val) {
+        let image_src = null
+        if (image_storage_picker_manager?.val?.file) {
+          image_src = URL.createObjectURL(image_storage_picker_manager?.val?.file)
+        } else if (image_storage_picker_manager?.val?.id) {
+          image_src = storage_src.replace("{storage_id}", image_storage_picker_manager?.val?.id)
+          console.log("image_src_replace", image_src)
+        }
+        console.log("image_src", image_src)
+        const sized_cover_base_64 = await resize_and_convert_image(image_src, 1000, 1000, "image/png")
+        console.log("sized_cover_base_64", sized_cover_base_64)
+        let sized_cover_file = await url_to_file(sized_cover_base_64, file_name_derived)
+        console.log("sized_cover_file", sized_cover_file)
+        form_data.append("image", sized_cover_file)
+      }
+      let response = await fetch(fetch_path_audio_post, {
+        method: "POST",
+        body: form_data,
+      })
+      console.log("fetch_audio_post_res", response)
+      if (!response.ok) {
+        let error_mes = await response.text()
+        is_loading_generate_audio = false
+        error_message = error_mes ?? "Error making audio changes."
+        return
+      }
+      let res_body = await response.json()
+      console.log("res_body1", res_body)
+      // add to new file to client side temporary_storage data
+      let new_audio_src = `${file_prefix}${res_body?.id}`
+      let new_audio_file = await url_to_file(new_audio_src, file_name_derived)
+      console.log("new_audio_file", new_audio_file)
+      is_loading_generate_audio = false
+      is_alt_content_shown = true
+      setTimeout(() => {
+        is_alt_content_shown = false
+      }, 1800)
+      generated_audio_file_obj = {
+        file: new_audio_file,
+        type: new_audio_file?.type,
+        src: new_audio_src,
+        file_name: new_audio_file?.name,
+        size_kb: Math.round(new_audio_file?.size * 0.001),
+      }
+      seed({ file: new_audio_file })
+      // optional: need third-party library to extract cover image from metadata clientside tbd. Already have working with server request but try and avoid that
+      audio_manager = create_audio_manager({
+        src: new_audio_src,
+      })
+    } catch (err) {
+      is_loading_generate_audio = false
+      error_message = err?.message ?? JSON.stringify(err)
+    }
+  }
+
+  async function download_audio_file() {
+    // file_name_tbd
+    let response = await fetch(generated_audio_file_obj?.src)
+    let blob = await response.blob()
+    let url = URL.createObjectURL(blob)
+    let link = document.createElement("a")
+    link.href = url
+    link.download = file_name_derived
+    document.body.appendChild(link)
+    link.click()
+    document.body.removeChild(link)
+    URL.revokeObjectURL(url)
+  }
+
+  function finish() {
+    if (typeof config?.on_finish == "function") {
+      config?.on_finish(generated_audio_file_obj)
+    }
+    popover_manager.close()
+  }
+
+  function init(config) {
+    is_popover = config?.is_popover ?? true
+    popover_manager = create_popover_manager({
+      min_width: 320,
+      target_width: 900,
+      min_height: 320,
+      target_height: 700,
+      header: "Edit Audio",
+      type: "center",
+      success_message: "Successfully Generated Audio File",
+      is_alt_content_shown: () => is_alt_content_shown,
+    })
+    clear_button_manager = create_button_manager({
+      type: "outlined",
+      text: "Clear",
+      is_compressed: true,
+      on_click: () => seed(),
+    })
+    download_audio_file_button_manager = create_button_manager({
+      type: "outlined",
+      is_disabled: () => is_disabled,
+      text: "Download",
+      support_icon: "download",
+      is_compressed: true,
+      on_click: () => download_audio_file(),
+    })
+    generate_audio_changes_button_manager = create_button_manager({
+      text: "Generate Audio Changes",
+      is_compressed: true,
+      is_loading: () => is_loading_generate_audio,
+      is_disabled: () =>
+        (!is_text_to_audio && !audio_storage_picker_manager?.val) ||
+        (is_text_to_audio && !text_to_audio_text_input_manager?.val),
+      on_click: () => generate_new_audio(),
+    })
+    finish_button_manager = create_button_manager({
+      type: "outlined",
+      text: "Finish",
+      support_icon: "check",
+      is_compressed: true,
+      is_disabled: () => is_disabled,
+      on_click: () => finish(),
+    })
+    use_text_to_audio_button_manager = create_button_manager({
+      type: "outlined",
+      support_icon: "speech",
+      text: "Use Text to Audio",
+      mr: 1,
+      is_compressed: true,
+      is_disabled: () => is_loading_generate_audio,
+      on_click: () => set_is_text_to_audio(true),
+    })
+    audio_storage_picker_manager = create_storage_picker_manager({
+      storage: storage,
+      default_folder_path: config?.storage_default_folder_path,
+      locally_uploaded_files: () => locally_uploaded_files,
+      storage_src: () => storage_src,
+      accept: ["audio/mpeg"],
+      is_show_button: false,
+      is_multiselect: false,
+      mb: 1,
+      is_disabled: () => is_loading_generate_audio || is_disabled,
+    })
+    file_name_text_input_manager = create_text_input_manager({
+      placeholder: "some_file_name",
+      is_disabled: () => is_loading_generate_audio || is_disabled,
+    })
+    title_text_input_manager = create_text_input_manager({
+      placeholder: audio_input_tag_defs?.TIT2?.example,
+      is_disabled: () => is_loading_generate_audio || is_disabled,
+    })
+    album_title_text_input_manager = create_text_input_manager({
+      placeholder: audio_input_tag_defs?.TALB?.example,
+      is_disabled: () => is_loading_generate_audio || is_disabled,
+    })
+    image_storage_picker_manager = create_storage_picker_manager({
+      storage: storage,
+      default_folder_path: config?.storage_default_folder_path,
+      locally_uploaded_files: () => locally_uploaded_files,
+      accept: ["image/png", "image/jpeg", "image/webp", "image/gif"],
+      is_multiselect: false,
+      mb: 1,
+      is_disabled: () => is_loading_generate_audio || is_disabled,
+    })
+    image_description_text_input_manager = create_text_input_manager({
+      placeholder: "Image Description",
+      mt: 1,
+      is_disabled: () => is_loading_generate_audio || is_disabled,
+    })
+    artist_text_input_manager = create_text_input_manager({
+      placeholder: audio_input_tag_defs?.TPE1?.example,
+      is_disabled: () => is_loading_generate_audio || is_disabled,
+    })
+    lyrics_text_input_manager = create_text_input_manager({
+      type: "text_area",
+      placeholder: "Lyrics of the audio",
+      is_disabled: () => is_loading_generate_audio || is_disabled,
+    })
+    release_year_text_input_manager = create_text_input_manager({
+      val: null,
+      type: "number",
+      max: 2100,
+      placeholder: audio_input_tag_defs?.TYER?.example,
+      is_disabled: () => is_loading_generate_audio || is_disabled,
+    })
+    language_dropdown_manager = create_dropdown_manager({
+      button_type: "outlined",
+      is_button_compressed: true,
+      is_clearable: true,
+      options: lang_options,
+      is_disabled: () => is_loading_generate_audio || is_disabled,
+    })
+    select_file_from_storage_button_manager = create_button_manager({
+      type: "outlined",
+      is_compressed: true,
+      text: "Select Audio File",
+      is_disabled: () => is_loading_generate_audio || is_disabled,
+      popover_target: () => `popover_${audio_storage_picker_manager?.popover_manager?.id}`,
+    })
+    use_mp3_file_button_manager = create_button_manager({
+      type: "outlined",
+      support_icon: "file",
+      text: "Use mp3 File",
+      mb: 0.5,
+      is_disabled: () => is_loading_generate_audio || is_disabled,
+      is_compressed: true,
+      on_click: () => set_is_text_to_audio(false),
+    })
+    text_to_audio_text_input_manager = create_text_input_manager({
+      type: "text_area",
+      rows: 7,
+      mt: 0.5,
+      is_disabled: () => is_loading_generate_audio || is_disabled,
+      placeholder: "Text to convert to audio",
+    })
+    file_name_text_input_manager = create_text_input_manager({
+      placeholder: "file_name",
+      val: null,
+      is_disabled: () => is_loading_generate_audio || is_disabled,
+    })
+    seed_from_input_popover_manager = create_popover_manager({
+      header: "Seed Audio",
+      type: "center",
+      target_width: 400,
+      target_height: 300,
+      anchor_id: () => `button_${seed_from_input_popover_button_manager?.id}`,
+    })
+    seed_from_input_popover_button_manager = create_button_manager({
+      type: "outlined",
+      text: "Seed from file",
+      is_compressed: true,
+      is_disabled: () => is_loading_generate_audio || is_disabled,
+      popover_target: () => `popover_${seed_from_input_popover_manager?.id}`,
+    })
+    seed_audio_storage_picker_manager = create_storage_picker_manager({
+      storage: storage,
+      default_folder_path: config?.storage_default_folder_path,
+      locally_uploaded_files: () => locally_uploaded_files,
+      accept: ["audio/mpeg"],
+      is_multiselect: false,
+      is_disabled: () => is_loading_generate_audio || is_disabled,
+      on_finish: (input) => {
+        seed(input)
+        seed_audio_storage_picker_manager.set_val(null)
+      },
+    })
+    audio_manager = null
+    clear_generated_audio_button_manager = create_button_manager({
+      type: "outlined",
+      text: "Clear",
+      is_compressed: true,
+      on_click: () => (generated_audio_file_obj = null),
+    })
+    edit_voice_popover_manager = create_popover_manager({
+      type: "center",
+      header: "Select Voice",
+      target_width: 500,
+      target_height: 400,
+    })
+    edit_voice_button_manager = create_button_manager({
+      type: "outlined",
+      text: "Edit",
+      support_icon: "edit",
+      is_compressed: true,
+      popover_target: () => `popover_${edit_voice_popover_manager?.id}`,
+    })
+    let voice_options_loc = []
+    for (let voice of voices) {
+      voice_options_loc.push({
+        ...voice,
+        audio_manager: create_audio_manager({
+          ui_type: "short",
+          src: voice?.sample,
+        }),
+        select_button_manager: create_button_manager({
+          type: "outlined",
+          text: "Select",
+          selected_type: () => (voice?.id == voice_id ? "selected" : null),
+          on_click: () => {
+            voice_id = voice_id == voice?.id ? null : voice?.id
+            edit_voice_popover_manager.close()
+          },
+        }),
+      })
+    }
+    voice_options = voice_options_loc
+    const additional_metatag_options = Object.keys(audio_input_tag_defs || {})
+      .map((h) => ({ key: h, name: audio_input_tag_defs?.[h]?.name }))
+      .filter((h) => !audio_tags_input_base.hasOwnProperty(h?.key))
+    additional_metatags_dropdown_manager = create_dropdown_manager({
+      val: [],
+      is_clearable: true,
+      is_multiselect: true,
+      is_button_compressed: true,
+      options: additional_metatag_options,
+      on_change: (input) => {
+        let tags_input = {}
+        if (Array.isArray(input) && input.length > 0) {
+          for (let key of input) {
+            tags_input[key] = additional_tags_input_prepped?.[key]?.text_input_manager?.val ?? null
+          }
+        }
+        set_additional_tags_input_prepped(tags_input)
+      },
+    })
+  }
+
+  init(config)
+
+  return {
+    id,
+    get account() {
+      return account
+    },
+    get is_text_to_audio() {
+      return is_text_to_audio
+    },
+    get error_message() {
+      return error_message
+    },
+    get success_message() {
+      return success_message
+    },
+    get generate_audio_changes_button_manager() {
+      return generate_audio_changes_button_manager
+    },
+    get use_text_to_audio_button_manager() {
+      return use_text_to_audio_button_manager
+    },
+    get select_file_from_storage_button_manager() {
+      return select_file_from_storage_button_manager
+    },
+    get use_mp3_file_button_manager() {
+      return use_mp3_file_button_manager
+    },
+    get text_to_audio_text_input_manager() {
+      return text_to_audio_text_input_manager
+    },
+    get file_name_text_input_manager() {
+      return file_name_text_input_manager
+    },
+    get additional_tags_input_prepped() {
+      return additional_tags_input_prepped
+    },
+    get additional_tag_keys_ordered() {
+      return additional_tag_keys_ordered
+    },
+    get audio_storage_picker_manager() {
+      return audio_storage_picker_manager
+    },
+    get file_name_text_input_manager() {
+      return file_name_text_input_manager
+    },
+    get title_text_input_manager() {
+      return title_text_input_manager
+    },
+    get album_title_text_input_manager() {
+      return album_title_text_input_manager
+    },
+    get image_storage_picker_manager() {
+      return image_storage_picker_manager
+    },
+    get image_description_text_input_manager() {
+      return image_description_text_input_manager
+    },
+    get artist_text_input_manager() {
+      return artist_text_input_manager
+    },
+    get lyrics_text_input_manager() {
+      return lyrics_text_input_manager
+    },
+    get release_year_text_input_manager() {
+      return release_year_text_input_manager
+    },
+    get language_dropdown_manager() {
+      return language_dropdown_manager
+    },
+    get is_popover() {
+      return is_popover
+    },
+    get popover_manager() {
+      return popover_manager
+    },
+    get text_to_audio_time_in_minutes() {
+      return text_to_audio_time_in_minutes
+    },
+    get voice_options() {
+      return voice_options
+    },
+    get voice_id() {
+      return voice_id
+    },
+    get edit_voice_popover_manager() {
+      return edit_voice_popover_manager
+    },
+    get edit_voice_button_manager() {
+      return edit_voice_button_manager
+    },
+    get seed_from_input_popover_manager() {
+      return seed_from_input_popover_manager
+    },
+    get seed_from_input_popover_button_manager() {
+      return seed_from_input_popover_button_manager
+    },
+    get seed_audio_storage_picker_manager() {
+      return seed_audio_storage_picker_manager
+    },
+    get is_loading_generate_audio() {
+      return is_loading_generate_audio
+    },
+    get generated_audio_file_obj() {
+      return generated_audio_file_obj
+    },
+    get audio_manager() {
+      return audio_manager
+    },
+    get clear_generated_audio_button_manager() {
+      return clear_generated_audio_button_manager
+    },
+    get download_audio_file_button_manager() {
+      return download_audio_file_button_manager
+    },
+    get clear_button_manager() {
+      return clear_button_manager
+    },
+    get finish_button_manager() {
+      return finish_button_manager
+    },
+    get additional_metatags_dropdown_manager() {
+      return additional_metatags_dropdown_manager
+    },
+    audio_input_tag_defs,
+    lang_options,
+    init,
+    seed,
+    get_audio_metadata,
+    resize_and_convert_image,
+    set_text_to_audio_input,
+    generate_new_audio,
+    download_audio_file,
+    set_is_text_to_audio,
+    clear,
+    finish,
+  }
+}