sveltekit-ui 1.1.74 → 1.1.76

package/src/lib/Components/AudioEditor/index.svelte.js

@@ -1,977 +0,0 @@
-import { create_unique_id, set_closurable, clean_file_name, url_to_file } from "$lib/client/index.js"
-import { create_popover_manager } from "$lib/Components/Popover/index.svelte.js"
-import { create_button_manager } from "$lib/Components/Button/index.svelte.js"
-import { create_text_input_manager } from "$lib/Components/TextInput/index.svelte.js"
-import { create_storage_picker_manager } from "$lib/Components/StoragePicker/index.svelte.js"
-import { create_dropdown_manager } from "$lib/Components/Dropdown/index.svelte.js"
-import { create_audio_manager } from "$lib/Components/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,
-  }
-}