sveltekit-ui 1.0.0

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

@@ -0,0 +1,1907 @@
+import {
+  create_unique_id,
+  set_closurable,
+  set_closurable_color,
+  clean_custom_identifier,
+  mime_type_extensions,
+  deep_copy,
+  url_to_file,
+} from "../../client/index.js"
+import { create_button_manager } from "../Button/index.svelte.js"
+import { create_popover_manager } from "../Popover/index.svelte.js"
+import { create_text_input_manager } from "../TextInput/index.svelte.js"
+import { create_dropdown_manager } from "../Dropdown/index.svelte.js"
+import { create_slider_manager } from "../Slider/index.svelte.js"
+import { create_file_input_manager } from "../FileInput/index.svelte.js"
+import "context-filter-polyfill" // ctx.filter doesnt work on safari and this should fix
+
+export function create_image_editor_manager(config) {
+  let id = create_unique_id(null, 20)
+
+  let is_popover = $state(true)
+  let screen_tab = $state("filters")
+  let image_sources = $state([])
+  let image_source_index = $state(null)
+  let file_picker_file = $state(null)
+  let file_name = $state(null)
+  let mime_type = $state(null)
+  let mime_type_input = $state(null)
+  let file_size_data = $state(null)
+  let is_lock_resize_aspect_ratio = $state(true)
+  let resize_width = $state(null)
+  let resize_height = $state(null)
+  let crop_width = $state(null)
+  let crop_height = $state(null)
+  let crop_left = $state(0)
+  let crop_top = $state(0)
+  let crop_aspect_width = $state(null)
+  let crop_aspect_height = $state(null)
+  let crop_aspect_ratio = $state(null)
+  let current_image_width = $state(null)
+  let current_image_height = $state(null)
+  let current_image_ar = $state(null)
+  let image_pixels_crop_width = $state(null)
+  let image_pixels_crop_height = $state(null)
+  let crop_drag_type = $state("main")
+  let crop_top_start = $state(null)
+  let crop_left_start = $state(null)
+  let crop_width_start = $state(null)
+  let crop_height_start = $state(null)
+  let start_x = $state(null)
+  let start_y = $state(null)
+  let last_known_x = $state(null)
+  let last_known_y = $state(null)
+  let is_loading = $state(false)
+  let is_disabled = $state(false)
+  let error_message = $state(null)
+  let success_message = $state(null)
+  let is_show_finish_button = $state(true)
+  let is_show_img_slider = $state(true)
+  let ai_error_message = $state(null)
+  let file_size_kb = $state(null)
+
+  let popover_manager = $state(null)
+  let file_input_manager = $state(null)
+  let screen_tab_filters_button_manager = $state(null)
+  let screen_tab_crop_button_manager = $state(null)
+  let screen_tab_resize_button_manager = $state(null)
+  let screen_tab_ai_button_manager = $state(null)
+  let screen_tab_file_button_manager = $state(null)
+  let undo_button_manager = $state(null)
+  let redo_button_manager = $state(null)
+  let clear_button_manager = $state(null)
+  let finish_button_manager = $state(null)
+
+  let filter_brightness_slider_manager = $state(null)
+  let filter_contrast_slider_manager = $state(null)
+  let filter_saturation_slider_manager = $state(null)
+  let filter_grayscale_slider_manager = $state(null)
+  let filter_hue_slider_manager = $state(null)
+  let filter_red_slider_manager = $state(null)
+  let filter_green_slider_manager = $state(null)
+  let filter_blue_slider_manager = $state(null)
+  let filter_blur_slider_manager = $state(null)
+  let filter_opacity_slider_manager = $state(null)
+  let filters_set_default_button_manager = $state(null)
+  let filters_apply_filters_button_manager = $state(null)
+
+  let crop_free_button_manager = $state(null)
+  let crop_one_to_one_button_manager = $state(null)
+  let crop_four_to_three_button_manager = $state(null)
+  let crop_three_to_two_button_manager = $state(null)
+  let crop_sixteen_to_nine_button_manager = $state(null)
+  let crop_three_to_four_button_manager = $state(null)
+  let crop_two_to_three_button_manager = $state(null)
+  let crop_nine_to_sixteen_button_manager = $state(null)
+  let crop_width_ratio_text_input_manager = $state(null)
+  let crop_height_ratio_text_input_manager = $state(null)
+  let crop_image_button_manager = $state(null)
+  let crop_aspect_width_loc = $state(null)
+  let crop_aspect_height_loc = $state(null)
+
+  let file_name_text_input_manager = $state(null)
+  let mime_type_webp_button_manager = $state(null)
+  let mime_type_jpeg_button_manager = $state(null)
+  let mime_type_png_button_manager = $state(null)
+  let download_image_button_manager = $state(null)
+  let set_file_changes_button_manager = $state(null)
+  let file_quality_slider_manager = $state(null)
+
+  let ai_tab_dropdown_manager = $state(null)
+  let ai_text_to_image_is_loading = $state(null)
+  let ai_generate_image_from_text_text_input_manager = $state(null)
+  let ai_generate_image_from_text_button_manager = $state(null)
+  let ai_remove_background_is_loading = $state(false)
+  let ai_restore_resolution_is_loading = $state(false)
+  let ai_restore_face_is_loading = $state(false)
+  let ai_remove_bg_button_manager = $state(null)
+  let ai_restore_resolution_button_manager = $state(null)
+  let ai_restore_face_button_manager = $state(null)
+
+  let resize_width_dropdown_manager = $state(null)
+  let resize_height_dropdown_manager = $state(null)
+  let resize_width_text_input_manager = $state(null)
+  let resize_height_text_input_manager = $state(null)
+  let resize_aspect_ratio_lock_button_manager = $state(null)
+  let resize_image_button_manager = $state(null)
+
+  let selected_image_source = $derived(
+    Array.isArray(image_sources) && image_source_index < image_sources.length
+      ? image_sources?.[image_source_index]
+      : null
+  )
+
+  let file_name_derived = $derived(clean_custom_identifier(file_name_text_input_manager?.val ?? file_name ?? ""))
+
+  let file_name_derived_with_extension = $derived(
+    `${clean_custom_identifier(file_name_text_input_manager?.val ?? file_name ?? "")}.${
+      mime_type_extensions?.[mime_type ?? mime_type_input]
+    }`
+  )
+
+  let shown_file_size_data = $derived(file_size_data?.[mime_type_input])
+
+  async function set_file_size_kb() {
+    if (!selected_image_source) {
+      return
+    }
+    let data_url = await get_image_data_url(
+      selected_image_source,
+      mime_type_input ?? mime_type,
+      file_quality_slider_manager?.val
+    )
+    let size = calculate_file_size(data_url, mime_type_input ?? mime_type)
+    file_size_kb = size
+  }
+
+  function set_crop_box_loc(w, h) {
+    crop_aspect_width_loc = w
+    crop_aspect_height_loc = h
+    crop_width_ratio_text_input_manager.set_val(crop_aspect_width_loc)
+    crop_height_ratio_text_input_manager.set_val(crop_aspect_height_loc)
+    set_crop_box(w, h)
+  }
+
+  function on_destroy() {
+    if (document) {
+      let hidden_image_el = document?.querySelector(`#${id}_hidden_image_el`)
+      if (hidden_image_el) {
+        hidden_image_el.remove()
+      }
+    }
+  }
+
+  function set_base_image(new_src) {
+    setTimeout(() => {
+      let hidden_image_el = document?.querySelector(`#${id}_hidden_image_el`)
+      if (hidden_image_el) {
+        hidden_image_el.src = "data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7"
+        if (new_src) {
+          clear_canvas()
+          reset_fields()
+          hidden_image_el.src = new_src
+        }
+      }
+    })
+  }
+
+  function clear_canvas() {
+    let canvas_container_el = document?.querySelector(`#${id}_canvas_container_el`)
+    current_image_width = null
+    current_image_height = null
+    current_image_ar = null
+    if (canvas_container_el) {
+      canvas_container_el.style.min_width = "auto"
+      canvas_container_el.style.min_height = "auto"
+    }
+    let canvas_el = document?.querySelector(`#${id}_canvas_el`)
+    if (!canvas_el) {
+      return
+    }
+    let ctx = canvas_el.getContext("2d", { willReadFrequently: true })
+    ctx.clearRect(0, 0, canvas_el.width, canvas_el.height)
+  }
+
+  function reset_fields() {
+    filter_brightness_slider_manager.set_val(100)
+    filter_contrast_slider_manager.set_val(100)
+    filter_saturation_slider_manager.set_val(100)
+    filter_grayscale_slider_manager.set_val(0)
+    filter_hue_slider_manager.set_val(0)
+    filter_red_slider_manager.set_val(100)
+    filter_green_slider_manager.set_val(100)
+    filter_blue_slider_manager.set_val(100)
+    filter_blur_slider_manager.set_val(0)
+    filter_opacity_slider_manager.set_val(100)
+    file_quality_slider_manager.set_val(75)
+    crop_left = 0
+    crop_top = 0
+    crop_width = null
+    crop_height = null
+    resize_width = null
+    resize_height = null
+    is_lock_resize_aspect_ratio = true
+    crop_aspect_width = null
+    crop_aspect_height = null
+    crop_aspect_ratio = null
+  }
+
+  function set_screen_tab(screen_tab_loc) {
+    screen_tab = screen_tab_loc
+    let hidden_image_el = document?.querySelector(`#${id}_hidden_image_el`)
+    reset_fields()
+    if (screen_tab != "ai" && !hidden_image_el) {
+      set_base_image(selected_image_source)
+    }
+    if (screen_tab == "filters") {
+      main_image_transformer()
+    } else if (screen_tab == "file") {
+      set_file_data_base()
+    } else if (screen_tab == "crop") {
+      set_crop_box()
+    } else if (screen_tab == "ai") {
+      is_show_img_slider = false
+    }
+  }
+
+  function main_image_transformer() {
+    try {
+      let hidden_image_el = document?.querySelector(`#${id}_hidden_image_el`)
+      let edit_image_container_el = document?.querySelector(`#${id}_edit_image_container_el`)
+      let canvas_container_el = document?.querySelector(`#${id}_canvas_container_el`)
+      let canvas_el = document?.querySelector(`#${id}_canvas_el`)
+      if (!canvas_el || !hidden_image_el?.height || !(image_sources.length > 0)) {
+        return
+      }
+      let hidden_image_el_width = hidden_image_el?.width
+      let hidden_image_el_height = hidden_image_el?.height
+      let canv_width = canvas_el.offsetWidth
+      let canv_height = canvas_el.offsetHeight
+      let edit_image_container_el_width = edit_image_container_el.offsetWidth
+      let edit_image_container_el_height = edit_image_container_el.offsetHeight
+      clear_canvas()
+      current_image_width = hidden_image_el_width
+      current_image_height = hidden_image_el_height
+      current_image_ar =
+        current_image_width && current_image_height
+          ? parseFloat((current_image_width / current_image_height).toPrecision(4))
+          : null
+      let resize_width_loc = resize_width
+      let resize_height_loc = resize_height
+      if (resize_width_loc < 1) {
+        if (crop_width > 0) {
+          resize_width_loc = Math.round((crop_width * hidden_image_el_width) / canv_width)
+        } else {
+          resize_width_loc = hidden_image_el_width
+        }
+      }
+      if (resize_height_loc < 1) {
+        if (crop_height > 0) {
+          resize_height_loc = Math.round((crop_height * hidden_image_el_height) / canv_height)
+        } else {
+          resize_height_loc = hidden_image_el_height
+        }
+      }
+      let resize_aspect_ratio = resize_width_loc / resize_height_loc
+      let edit_image_frame_aspect_ratio = edit_image_container_el_width / edit_image_container_el_height
+      let crop_width_loc = crop_width > 0 ? crop_width : canv_width
+      let crop_height_loc = crop_height > 0 ? crop_height : canv_height
+      let image_pixels_crop_width = Math.round((crop_width_loc * hidden_image_el_width) / canv_width)
+      let image_pixels_crop_left = Math.round((crop_left * hidden_image_el_width) / canv_width)
+      let image_pixels_crop_height = Math.round((crop_height_loc * hidden_image_el_height) / canv_height)
+      let image_pixels_crop_top = Math.round((crop_top * hidden_image_el_height) / canv_height)
+      let display_image_height = edit_image_container_el_height
+      let display_image_width = display_image_height * resize_aspect_ratio
+      if (edit_image_frame_aspect_ratio < resize_aspect_ratio) {
+        display_image_width = edit_image_container_el_width
+        display_image_height = display_image_width / resize_aspect_ratio
+      }
+      canvas_container_el.style.min_width = "auto"
+      canvas_container_el.style.min_height = "auto"
+      if (resize_width_loc < display_image_width || resize_height_loc < display_image_height) {
+        canvas_container_el.style.width = display_image_width + "px"
+        canvas_container_el.style.height = display_image_height + "px"
+      }
+      canvas_el.width = Math.round(resize_width_loc)
+      canvas_el.height = Math.round(resize_height_loc)
+      let ctx = canvas_el.getContext("2d", { willReadFrequently: true })
+      ctx.filter = `brightness(${filter_brightness_slider_manager?.val}%) contrast(${filter_contrast_slider_manager?.val}%) saturate(${filter_saturation_slider_manager?.val}%) grayscale(${filter_grayscale_slider_manager?.val}%) opacity(${filter_opacity_slider_manager?.val}%) hue-rotate(${filter_hue_slider_manager?.val}deg) blur(${filter_blur_slider_manager?.val}px)`
+      ctx.drawImage(
+        hidden_image_el,
+        image_pixels_crop_left,
+        image_pixels_crop_top,
+        image_pixels_crop_width,
+        image_pixels_crop_height,
+        0,
+        0,
+        resize_width_loc,
+        resize_height_loc
+      )
+      let canv_image_data = ctx.getImageData(0, 0, image_pixels_crop_width, image_pixels_crop_height)
+      for (let i = 0; i < canv_image_data.data.length; i += 4) {
+        canv_image_data.data[i] = canv_image_data.data[i] * (filter_red_slider_manager?.val / 100)
+        canv_image_data.data[i + 1] = canv_image_data.data[i + 1] * (filter_green_slider_manager?.val / 100)
+        canv_image_data.data[i + 2] = canv_image_data.data[i + 2] * (filter_blue_slider_manager?.val / 100)
+      }
+      ctx.putImageData(canv_image_data, 0, 0)
+      ctx.filter = "none"
+      if (
+        (image_pixels_crop_width > 0 && Math.round(image_pixels_crop_width) != Math.round(hidden_image_el_width)) ||
+        (image_pixels_crop_height > 0 && Math.round(image_pixels_crop_height) != Math.round(hidden_image_el_height)) ||
+        (resize_width > 0 && resize_height > 0)
+      ) {
+        reset_fields()
+        let new_image_src = canvas_el.toDataURL(mime_type, file_quality_slider_manager?.val)
+        image_sources = [new_image_src, ...image_sources.slice(image_source_index)]
+        image_source_index = 0
+        set_base_image(new_image_src)
+      }
+    } catch (err) {
+      console.log("error updating image", err)
+    }
+  }
+
+  function undo() {
+    if (Array.isArray(image_sources) && image_sources.length > 1 && image_source_index < image_sources.length - 1) {
+      image_source_index++
+      set_base_image(selected_image_source)
+    }
+  }
+
+  function redo() {
+    if (Array.isArray(image_sources) && image_sources.length > 1 && image_source_index > 0) {
+      image_source_index--
+      set_base_image(selected_image_source)
+    }
+  }
+
+  function clear() {
+    image_sources = []
+    image_source_index = 0
+    file_picker_file = null
+    file_name_text_input_manager.set_val(null)
+  }
+
+  async function finish() {
+    let file_to_return = null
+    if (selected_image_source) {
+      file_to_return = await url_to_file(selected_image_source, file_name_derived)
+    }
+    if (typeof config?.on_finish == "function") {
+      config?.on_finish(file_to_return)
+    }
+    popover_manager?.close()
+  }
+
+  function drop_handler(e) {
+    let accept = ["image/webp", "image/jpeg", "image/png"]
+    let files_loc = []
+    if (e.dataTransfer.items) {
+      for (let i = 0; i < e.dataTransfer.items.length; i++) {
+        if (e.dataTransfer.items[i].kind === "file") {
+          let file = e.dataTransfer.items[i].getAsFile()
+          if (accept.includes(file?.type)) {
+            files_loc = [...files_loc, file]
+          }
+        }
+      }
+    } else {
+      for (let i = 0; i < e.dataTransfer.files.length; i++) {
+        let file = e.dataTransfer.files[i].getAsFile()
+        files_loc = [...files_loc, file]
+      }
+    }
+    if (files_loc.length > 0) {
+      init_file(files_loc[0])
+    }
+  }
+
+  // filters ↓↓↓
+
+  function apply_filters() {
+    let canvas_el = document?.querySelector(`#${id}_canvas_el`)
+    if (canvas_el && selected_image_source) {
+      let new_image_src = canvas_el.toDataURL(mime_type, file_quality_slider_manager?.val)
+      image_sources = [new_image_src, ...image_sources.slice(image_source_index)]
+      image_source_index = 0
+      reset_fields()
+      set_base_image(new_image_src)
+    }
+  }
+
+  function reset_filters() {
+    filter_brightness_slider_manager.set_val(100)
+    filter_contrast_slider_manager.set_val(100)
+    filter_saturation_slider_manager.set_val(100)
+    filter_grayscale_slider_manager.set_val(0)
+    filter_hue_slider_manager.set_val(0)
+    filter_red_slider_manager.set_val(100)
+    filter_green_slider_manager.set_val(100)
+    filter_blue_slider_manager.set_val(100)
+    filter_blur_slider_manager.set_val(0)
+    filter_opacity_slider_manager.set_val(100)
+    set_base_image(selected_image_source)
+  }
+  // filters ↑↑↑
+
+  // resize ↓↓↓
+  const resize_options = [
+    { key: 512, name: "512px" },
+    { key: 800, name: "800px" },
+    { key: 1000, name: "1000px" },
+    { key: 1200, name: "1200px" },
+    { key: 1600, name: "1600px" },
+    { key: 2000, name: "2000px" },
+    { key: 2400, name: "2400px" },
+  ]
+
+  function toggle_is_lock_resize_aspect_ratio() {
+    is_lock_resize_aspect_ratio = !is_lock_resize_aspect_ratio
+  }
+
+  function set_resize_dimensions(w, h) {
+    if (w == 0 && !h) {
+      resize_width = 0
+      if (is_lock_resize_aspect_ratio) {
+        resize_height = 0
+      }
+    } else if (h == 0 && !w) {
+      resize_height = 0
+      if (is_lock_resize_aspect_ratio) {
+        resize_width = 0
+      }
+    } else if (w > 0) {
+      resize_width = Math.round(Math.min(w, 10000))
+      if (h > 0) {
+        resize_height = Math.round(Math.min(h, 10000))
+      } else if (is_lock_resize_aspect_ratio) {
+        resize_height = Math.round(w / current_image_ar / 10) * 10
+      }
+    } else if (h > 0) {
+      resize_height = Math.round(Math.min(h, 10000))
+      if (is_lock_resize_aspect_ratio) {
+        resize_width = Math.round((h * current_image_ar) / 10) * 10
+      }
+    }
+  }
+  // resize ↑↑↑
+
+  // crop ↓↓↓
+  function set_crop_box(w = null, h = null) {
+    let canvas_el = document?.querySelector(`#${id}_canvas_el`)
+    if (w != null && w > -1 && h != null && h > -1) {
+      crop_aspect_ratio = parseFloat((w / h).toPrecision(4))
+    } else {
+      crop_aspect_ratio = null
+    }
+    let canv_height = canvas_el.offsetHeight
+    let canv_width = canvas_el.offsetWidth
+    let canvas_aspect_ratio = crop_aspect_ratio ? crop_aspect_ratio : canv_width / canv_height
+    crop_top = 0
+    crop_left = 0
+    crop_width = canv_width
+    crop_height = canv_height
+    if (crop_aspect_ratio <= canvas_aspect_ratio || crop_height > canv_height) {
+      crop_height = canv_height
+      crop_width = canv_height * canvas_aspect_ratio
+      crop_left = (canv_width - crop_width) / 2
+    }
+    if (crop_aspect_ratio > canvas_aspect_ratio || crop_width > canv_width) {
+      crop_left = 0
+      crop_width = canv_width
+      crop_height = canv_width / canvas_aspect_ratio
+      crop_top = (canv_height - crop_height) / 2
+    }
+    set_image_pixels_crop()
+  }
+
+  function crop_image(w, h) {
+    if (crop_aspect_width != w && crop_aspect_height != h) {
+      crop_aspect_width = w
+      crop_aspect_height = h
+      if (w != null && w > 0 && h != null && h > 0) {
+        crop_aspect_ratio =
+          w > 0 && h > 0 ? JSON.parse((Math.min(w, 10000) / Math.min(h, 10000)).toPrecision(4)).toFixed(2) : null
+      } else {
+        crop_aspect_ratio = null
+      }
+    }
+    main_image_transformer()
+    setTimeout(() => {
+      set_crop_box()
+      set_image_pixels_crop()
+    }, 10)
+  }
+
+  function set_image_pixels_crop() {
+    let canvas_el = document?.querySelector(`#${id}_canvas_el`)
+    let canv_height = canvas_el.offsetHeight
+    let canv_width = canvas_el.offsetWidth
+    image_pixels_crop_width =
+      crop_width > 0 && current_image_width > 0
+        ? Math.round((crop_width * current_image_width) / canv_width)
+        : current_image_width
+    image_pixels_crop_height =
+      crop_height > 0 && current_image_height > 0
+        ? Math.round((crop_height * current_image_height) / canv_height)
+        : current_image_height
+  }
+
+  function update_crop_values(
+    canv_height,
+    canv_width,
+    crop_drag_type,
+    crop_top,
+    crop_left,
+    crop_width,
+    crop_height,
+    crop_top_start,
+    crop_left_start,
+    crop_width_start,
+    crop_height_start,
+    x_change,
+    y_change,
+    crop_aspect_ratio
+  ) {
+    let new_crop_top = crop_top
+    let new_crop_left = crop_left
+    let new_crop_width = crop_width
+    let new_crop_height = crop_height
+    if (crop_drag_type == "main") {
+      new_crop_left = crop_left_start + x_change
+      new_crop_top = crop_top_start + y_change
+      if (new_crop_left < 0) {
+        new_crop_left = 0
+      }
+      if (new_crop_top < 0) {
+        new_crop_top = 0
+      }
+      let room_right = canv_width - (new_crop_left + crop_width)
+      let room_bottom = canv_height - (new_crop_top + crop_height)
+      let room_left = new_crop_left
+      let room_top = new_crop_top
+      if (room_right < 0) {
+        new_crop_left = canv_width - crop_width
+      }
+      if (room_bottom < 0) {
+        new_crop_top = canv_height - crop_height
+      }
+    }
+    // new_crop_width = new_crop_height * crop_aspect_ratio
+    // new_crop_height = new_crop_width / crop_aspect_ratio
+    let center_vert_start = crop_top_start + crop_height_start / 2
+    let center_horiz_start = crop_left_start + crop_width_start / 2
+    let shortest_horiz_length_to_wall_start = Math.min(canv_width - center_horiz_start, center_horiz_start)
+    let shortest_vert_length_to_wall_start = Math.min(canv_height - center_vert_start, center_vert_start)
+    if (["tl", "t", "tr"].includes(crop_drag_type)) {
+      let res = linear_low_crop_slide(crop_top_start, crop_height_start, y_change)
+      new_crop_top = res.crop_lower
+      new_crop_height = res.crop_range
+    }
+    if (["tl", "l", "bl"].includes(crop_drag_type)) {
+      let res = linear_low_crop_slide(crop_left_start, crop_width_start, x_change)
+      new_crop_left = res.crop_lower
+      new_crop_width = res.crop_range
+    }
+    if (["bl", "b", "br"].includes(crop_drag_type)) {
+      new_crop_height = linear_high_crop_slide(crop_height_start, canv_height - crop_top_start, y_change)
+    }
+    if (["tr", "r", "br"].includes(crop_drag_type)) {
+      new_crop_width = linear_high_crop_slide(crop_width_start, canv_width - crop_left_start, x_change)
+    }
+    if (crop_aspect_ratio) {
+      if (["t", "b"].includes(crop_drag_type)) {
+        let crop_width_based_on_change = new_crop_height * crop_aspect_ratio
+        if (crop_width_based_on_change / 2 >= shortest_horiz_length_to_wall_start) {
+          new_crop_width = shortest_horiz_length_to_wall_start * 2
+          new_crop_left = center_horiz_start - shortest_horiz_length_to_wall_start
+          new_crop_height = new_crop_width / crop_aspect_ratio
+          new_crop_top = crop_top_start
+          if (crop_drag_type == "t") {
+            new_crop_top = crop_top_start + crop_height_start - new_crop_height
+          }
+        } else {
+          new_crop_width = crop_width_based_on_change
+          new_crop_left = center_horiz_start - crop_width_based_on_change / 2
+          new_crop_height = new_crop_width / crop_aspect_ratio
+        }
+      } else if (["l", "r"].includes(crop_drag_type)) {
+        let crop_height_based_on_change = new_crop_width / crop_aspect_ratio
+        if (crop_height_based_on_change / 2 >= shortest_vert_length_to_wall_start) {
+          new_crop_height = shortest_vert_length_to_wall_start * 2
+          new_crop_top = center_vert_start - shortest_vert_length_to_wall_start
+          new_crop_width = new_crop_height * crop_aspect_ratio
+          new_crop_left = crop_left_start
+          if (crop_drag_type == "l") {
+            new_crop_left = crop_left_start + crop_width_start - new_crop_width
+          }
+        } else {
+          new_crop_height = crop_height_based_on_change
+          new_crop_top = center_vert_start - crop_height_based_on_change / 2
+          new_crop_width = new_crop_height * crop_aspect_ratio
+        }
+      } else if (crop_drag_type == "tl") {
+        let max_width = crop_left_start + crop_width_start
+        let max_height = crop_top_start + crop_height_start
+        let is_height_shortest_distance = max_width / crop_aspect_ratio > max_height
+        if (is_height_shortest_distance) {
+          new_crop_width = new_crop_height * crop_aspect_ratio
+          new_crop_left = max_width - new_crop_width
+        } else {
+          new_crop_height = new_crop_width / crop_aspect_ratio
+          new_crop_top = max_height - new_crop_height
+        }
+      } else if (crop_drag_type == "tr") {
+        let max_width = canv_width - crop_left_start
+        let max_height = crop_top_start + crop_height_start
+        let is_height_shortest_distance = max_width / crop_aspect_ratio > max_height
+        if (is_height_shortest_distance) {
+          new_crop_width = new_crop_height * crop_aspect_ratio
+          new_crop_left = canv_width - max_width
+        } else {
+          new_crop_height = new_crop_width / crop_aspect_ratio
+          new_crop_top = max_height - new_crop_height
+        }
+      } else if (crop_drag_type == "bl") {
+        let max_width = crop_left_start + crop_width_start
+        let max_height = canv_height - crop_top_start
+        let is_height_shortest_distance = max_width / crop_aspect_ratio > max_height
+        if (is_height_shortest_distance) {
+          new_crop_width = new_crop_height * crop_aspect_ratio
+          new_crop_left = max_width - new_crop_width
+        } else {
+          new_crop_height = new_crop_width / crop_aspect_ratio
+          new_crop_top = crop_top_start
+        }
+      } else if (crop_drag_type == "br") {
+        let max_width = canv_width - crop_left_start
+        let max_height = canv_height - crop_top_start
+        let is_height_shortest_distance = max_width / crop_aspect_ratio > max_height
+        if (is_height_shortest_distance) {
+          new_crop_width = new_crop_height * crop_aspect_ratio
+          new_crop_left = crop_left_start
+        } else {
+          new_crop_height = new_crop_width / crop_aspect_ratio
+          new_crop_top = crop_top_start
+        }
+      }
+    }
+    return {
+      crop_top: new_crop_top,
+      crop_left: new_crop_left,
+      crop_width: new_crop_width,
+      crop_height: new_crop_height,
+    }
+  }
+
+  function linear_low_crop_slide(crop_lower_start, crop_range_start, lower_change) {
+    let new_crop_lower = crop_lower_start + lower_change
+    let new_crop_range = crop_range_start - lower_change
+    if (new_crop_lower < 0) {
+      new_crop_range += new_crop_lower
+      new_crop_lower = 0
+    }
+    let max_crop_lower = crop_lower_start + crop_range_start
+    if (new_crop_lower > max_crop_lower) {
+      new_crop_range -= new_crop_lower - max_crop_lower
+      new_crop_lower = max_crop_lower
+    }
+    if (new_crop_range < 1) {
+      new_crop_range = 1
+    }
+    let crop_total = new_crop_lower + new_crop_range
+    if (crop_total !== crop_lower_start + crop_range_start) {
+      if (crop_total > crop_lower_start + crop_range_start) {
+        new_crop_range -= crop_total - (crop_lower_start + crop_range_start)
+      } else {
+        new_crop_range += crop_lower_start + crop_range_start - crop_total
+      }
+    }
+    return { crop_lower: new_crop_lower, crop_range: new_crop_range }
+  }
+
+  function linear_high_crop_slide(crop_range_start, frame_range, lower_change) {
+    let new_crop_range = crop_range_start + lower_change
+    if (new_crop_range < 1) {
+      new_crop_range = 1
+    }
+    if (new_crop_range > frame_range) {
+      new_crop_range = frame_range
+    }
+    return new_crop_range
+  }
+
+  function crop_on_up(e) {
+    if (start_x != null || start_y != null) {
+      start_x = null
+      start_y = null
+      last_known_x = null
+      last_known_y = null
+      crop_top_start = null
+      crop_left_start = null
+      crop_width_start = null
+      crop_height_start = null
+    }
+  }
+
+  function crop_on_down(e, type) {
+    e.preventDefault()
+    if (e?.touches) {
+      start_x = e.touches[0].pageX
+      start_y = e.touches[0].pageY
+      last_known_x = e.touches[0].pageX
+      last_known_y = e.touches[0].pageY
+    } else if ((e?.x, e?.y)) {
+      start_x = e.x
+      start_y = e.y
+      last_known_x = e.x
+      last_known_y = e.y
+    }
+    crop_drag_type = type
+    crop_top_start = crop_top
+    crop_left_start = crop_left
+    crop_width_start = crop_width
+    crop_height_start = crop_height
+  }
+
+  function crop_on_move(e) {
+    let canvas_el = document?.querySelector(`#${id}_canvas_el`)
+    if ((start_x != null && !isNaN(start_x)) || (start_y != null && !isNaN(start_y))) {
+      if (e?.touches) {
+        last_known_x = e.touches[0].pageX
+        last_known_y = e.touches[0].pageY
+      } else if ((e?.x, e?.y)) {
+        last_known_x = e.x
+        last_known_y = e.y
+      }
+      let canv_height = canvas_el.offsetHeight
+      let canv_width = canvas_el.offsetWidth
+      let x_change = last_known_x - start_x
+      let y_change = last_known_y - start_y
+      let res = update_crop_values(
+        canv_height,
+        canv_width,
+        crop_drag_type,
+        crop_top,
+        crop_left,
+        crop_width,
+        crop_height,
+        crop_top_start,
+        crop_left_start,
+        crop_width_start,
+        crop_height_start,
+        x_change,
+        y_change,
+        crop_aspect_ratio
+      )
+      crop_height = res.crop_height
+      crop_width = res.crop_width
+      crop_left = res.crop_left
+      crop_top = res.crop_top
+    }
+    set_image_pixels_crop()
+  }
+
+  // crop ↑↑↑
+
+  // ai ↓↓↓
+
+  async function ai_text_to_image(input) {
+    ai_error_message = null
+    if (typeof config?.ai_text_to_image !== "function") {
+      ai_error_message = "ai_text_to_image function not provided to config"
+      return
+    }
+    ai_text_to_image_is_loading = true
+    const res = await config?.ai_text_to_image(input)
+    if (res?.is_success) {
+      try {
+        const data_url = `data:image/webp;base64,${res?.data?.b64_json}`
+        image_sources = [data_url, ...image_sources]
+        image_source_index = 0
+        set_base_image(data_url)
+        mime_type = "image/webp"
+        mime_type_input = "image/webp"
+        set_file_data_base()
+      } catch (error) {
+        console.error("Error loading image:", error)
+        ai_error_message = "Error generating image"
+      }
+    } else {
+      ai_error_message = res?.error_message ?? "Error generating image"
+    }
+    ai_text_to_image_is_loading = false
+  }
+
+  async function ai_remove_background(input) {
+    ai_error_message = null
+    if (typeof config?.ai_remove_image_background !== "function") {
+      ai_error_message = "ai_remove_image_background function not provided to config"
+      return
+    }
+    ai_remove_background_is_loading = true
+    const res = await config?.ai_remove_image_background(input)
+    if (res?.is_success) {
+      try {
+        let response = await fetch(res?.data)
+        let blob = await response.blob()
+        let blob_url = URL.createObjectURL(blob)
+        let data_url = await get_image_data_url(blob_url, "image/webp")
+        image_sources = [data_url, ...image_sources]
+        image_source_index = 0
+        set_base_image(data_url)
+        mime_type = "image/webp"
+        mime_type_input = "image/webp"
+        set_file_data_base()
+      } catch (error) {
+        console.error("Error loading image:", error)
+        ai_error_message = "Error removing image background"
+      }
+    } else {
+      ai_error_message = res?.error_message ?? "Error removing image background"
+    }
+    ai_remove_background_is_loading = false
+  }
+
+  async function ai_restore_resolution(input) {
+    ai_error_message = null
+    if (typeof config?.ai_restore_resolution !== "function") {
+      ai_error_message = "ai_restore_resolution function not provided to config"
+      return
+    }
+    ai_restore_resolution_is_loading = true
+    const res = await config?.ai_restore_resolution(input)
+    if (res?.is_success) {
+      try {
+        let response = await fetch(res?.data)
+        let blob = await response.blob()
+        let blob_url = URL.createObjectURL(blob)
+        let data_url = await get_image_data_url(blob_url, "image/webp")
+        image_sources = [data_url, ...image_sources]
+        image_source_index = 0
+        set_base_image(data_url)
+        mime_type = "image/webp"
+        mime_type_input = "image/webp"
+        set_file_data_base()
+      } catch (error) {
+        console.error("Error loading image:", error)
+        ai_error_message = "Error removing image background"
+      }
+    } else {
+      ai_error_message = res?.error_message ?? "Error removing image background"
+    }
+    ai_restore_resolution_is_loading = false
+  }
+
+  async function ai_restore_face(input) {
+    ai_error_message = null
+    if (typeof config?.ai_restore_face !== "function") {
+      ai_error_message = "ai_restore_face function not provided to config"
+      return
+    }
+    ai_restore_face_is_loading = true
+    const res = await config?.ai_restore_face(input)
+    if (res?.is_success) {
+      try {
+        let response = await fetch(res?.data)
+        let blob = await response.blob()
+        let blob_url = URL.createObjectURL(blob)
+        let data_url = await get_image_data_url(blob_url, "image/webp")
+        image_sources = [data_url, ...image_sources]
+        image_source_index = 0
+        set_base_image(data_url)
+        mime_type = "image/webp"
+        mime_type_input = "image/webp"
+        set_file_data_base()
+      } catch (error) {
+        console.error("Error loading image:", error)
+        ai_error_message = "Error removing image background"
+      }
+    } else {
+      ai_error_message = res?.error_message ?? "Error removing image background"
+    }
+    ai_restore_face_is_loading = false
+  }
+
+  // ai ↑↑↑
+
+  // file ↓↓↓
+  let file_size_data_base = {
+    "image/png": null,
+    "image/webp": null,
+    "image/jpeg": null,
+  }
+
+  let base_chart_path = "M5,35 C100,35 93,30 95,5"
+
+  async function set_file_data_base() {
+    if (selected_image_source) {
+      file_size_data = deep_copy(file_size_data_base)
+      load_file_size_quality_data(mime_type, selected_image_source)
+    }
+    set_file_size_kb() // prob also run on various slider or image type changes
+  }
+
+  function get_mime_type_from_src(image_src) {
+    let re = /^data:(image\/\w+);base64,/
+    let result = image_src.match(re)
+    return result && result.length > 1 ? result[1] : null
+  }
+
+  async function file_input_change(file_name, mime_type, quality) {
+    if (file_name || mime_type) {
+      mime_type = mime_type && file_size_data_base.hasOwnProperty(mime_type) ? mime_type : mime_type_input
+      mime_type_input = mime_type
+      if (mime_type && file_name_text_input_manager?.val != file_name) {
+        file_name_text_input_manager.set_val(file_name)
+      }
+    }
+    if (mime_type || quality) {
+      quality = quality ? Math.max(1, Math.min(100, quality)) : file_quality_slider_manager?.val
+      let image_src = selected_image_source
+      if (image_src) {
+        if (!file_size_data?.[mime_type] && image_src) {
+          load_file_size_quality_data(mime_type, image_src)
+        }
+      }
+      file_quality_slider_manager.set_val(quality)
+    }
+    set_file_size_kb()
+  }
+
+  async function set_file_from_inputs() {
+    if (selected_image_source) {
+      let data_url = await get_image_data_url(selected_image_source, mime_type_input, file_quality_slider_manager?.val)
+      image_sources = [data_url, ...image_sources]
+      mime_type = mime_type_input
+    }
+  }
+
+  async function load_file_size_quality_data(mime_type, image_src) {
+    if (!file_size_data?.[mime_type]) {
+      file_size_data = deep_copy(file_size_data_base)
+    }
+    file_size_data[mime_type] = {
+      is_loading: true,
+    }
+    if (mime_type == "image/png") {
+      let data_url = await get_image_data_url(image_src, "image/png", 100)
+      let file_size = calculate_file_size(data_url, "image/png")
+      file_size_data[mime_type] = {
+        is_loading: false,
+        file_size_xy_data: [file_size],
+        min_file_size_kb: null,
+        max_file_size_kb: null,
+        chart_path: base_chart_path,
+      }
+    } else {
+      let x_vals_sets = [
+        [1, 80, 100],
+        [15, 95],
+        [5, 50, 90, 99],
+      ]
+      let file_size_xy_data = file_size_data?.[mime_type]?.file_size_xy_data || []
+      for (let i = 0; i < x_vals_sets.length; i++) {
+        let x_vals = x_vals_sets[i]
+        for (let x_val of x_vals) {
+          let data_url = await get_image_data_url(image_src, mime_type, x_val)
+          let file_size = calculate_file_size(data_url, mime_type)
+          file_size_xy_data.push([x_val, file_size])
+        }
+        let chart_data = generate_file_size_chart(file_size_xy_data)
+        let updated_data = { file_size_xy_data, ...chart_data }
+        file_size_data[mime_type] = {
+          is_loading: i < x_vals_sets.length - 1,
+          ...updated_data,
+        }
+      }
+    }
+  }
+
+  function generate_file_size_chart(file_size_data) {
+    let w = 100
+    let h = 40
+    let x_padding = 5
+    let y_padding = 5
+    let min_file_size_kb
+    let max_file_size_kb
+    if (!file_size_data || file_size_data.length < 1) {
+      min_file_size_kb = null
+      max_file_size_kb = null
+      chart_path = base_chart_path
+      return
+    }
+    let x_values = file_size_data.map(([x, y]) => x)
+    let y_values = file_size_data.map(([x, y]) => y)
+    let min_x = Math.min(...x_values)
+    let max_x = Math.max(...x_values)
+    let min_y = Math.min(...y_values)
+    let max_y = Math.max(...y_values)
+    min_file_size_kb = min_y
+    max_file_size_kb = max_y
+    let x_scale = (w - 2 * x_padding) / w
+    let x_padding_scale = x_padding / w
+    let y_scale = (h - 2 * y_padding) / h
+    let y_padding_scale = y_padding / h
+    let normalized_data_scaled = []
+    for (let [x, y] of file_size_data) {
+      let new_x = ((x - min_x) / (max_x - min_x)) * x_scale + x_padding_scale
+      let new_y = (1 - (y - min_y) / (max_y - min_y)) * y_scale + y_padding_scale
+      normalized_data_scaled.push([new_x, new_y])
+    }
+    normalized_data_scaled.sort((a, b) => b[0] - a[0])
+    let chart_path = "M"
+    for (let item of normalized_data_scaled) {
+      chart_path += " " + Math.floor(item[0] * w) + "," + Math.floor(item[1] * h)
+    }
+    return {
+      min_file_size_kb,
+      max_file_size_kb,
+      chart_path,
+    }
+  }
+
+  function calculate_file_size(data_url, mime_type) {
+    let head = `data:${mime_type};base64,`
+    let file_size = (data_url.length - head.length) * 0.75
+    return Math.round(file_size * 0.001) // size in KB
+  }
+
+  async function get_image_data_url(image_src, mime_type = "image/webp", quality = 100) {
+    return new Promise((resolve, reject) => {
+      let img = new Image()
+      img.crossOrigin = "Anonymous"
+      img.onload = function () {
+        let canvas = document.createElement("canvas")
+        let ctx = canvas.getContext("2d", { willReadFrequently: true })
+        canvas.width = this.naturalWidth
+        canvas.height = this.naturalHeight
+        ctx.drawImage(this, 0, 0)
+        let data_url = canvas.toDataURL(mime_type, quality / 100)
+        resolve(data_url)
+      }
+      img.onerror = reject
+      img.src = image_src
+    })
+  }
+
+  async function download_image() {
+    if (selected_image_source) {
+      get_image_data_url(selected_image_source, mime_type_input ?? "image/webp", file_quality_slider_manager?.val)
+        .then((data_url) => {
+          let temp_link = document.createElement("a")
+          temp_link.download = `${
+            file_name_text_input_manager?.val ? file_name_text_input_manager?.val : create_unique_id("image", 6)
+          }.${mime_type_extensions?.[mime_type_input ?? mime_type]}`
+          temp_link.href = data_url
+          temp_link.click()
+        })
+        .catch((err) => {
+          console.error(`Failed to generate download link: ${err}`)
+        })
+    }
+  }
+
+  // file ↑↑↑
+
+  function init_file(file_input) {
+    let hidden_image_el = document.createElement("img")
+    hidden_image_el.id = `${id}_hidden_image_el`
+    hidden_image_el.style = "display: none;"
+    hidden_image_el.alt = "hidden_image_el"
+    hidden_image_el.onload = () => main_image_transformer()
+    document.body.appendChild(hidden_image_el)
+    if (!file_input?.file) {
+      image_sources = []
+      image_source_index = null
+      file_name = null
+      file_name_text_input_manager.set_val(null)
+      mime_type = null
+      mime_type_input = null
+      set_base_image(null)
+      return
+    }
+    let src_url = URL.createObjectURL(file_input?.file)
+    image_sources = [src_url]
+    image_source_index = 0
+    let clean_file_name = (file_input?.file_name ?? file_input?.file?.name ?? null).replace(/\..+$/, "")
+    file_name = clean_file_name
+    file_name_text_input_manager.set_val(clean_file_name)
+    mime_type = file_input?.mime_type ?? file_input?.file?.type ?? null
+    mime_type_input = file_input?.mime_type ?? file_input?.file?.type ?? null
+    set_base_image(src_url)
+    set_file_data_base()
+  }
+
+  async function init(config) {
+    popover_manager = create_popover_manager({
+      min_width: 320,
+      target_width: 900,
+      min_height: 320,
+      target_height: 700,
+      header: "Edit Image",
+      type: "center",
+    })
+    file_input_manager = create_file_input_manager({
+      is_multiselect: false,
+      is_drop_zone: true,
+      accept: ["image/png", "image/jpeg", "image/webp"],
+      on_get_file: (input) => {
+        init_file({ file: input })
+        file_input_manager.clear_files()
+      },
+      height: "100%",
+    })
+    screen_tab_filters_button_manager = create_button_manager({
+      type: "soft",
+      text: "Filters",
+      icon_sw: 30,
+      is_compressed: true,
+      support_icon: "sliders",
+      selected_type: () => (screen_tab == "filters" ? "selected" : null),
+      on_click: () => set_screen_tab("filters"),
+    })
+    screen_tab_crop_button_manager = create_button_manager({
+      type: "soft",
+      text: "Crop",
+      is_compressed: true,
+      icon_sw: 30,
+      support_icon: "crop",
+      selected_type: () => (screen_tab == "crop" ? "selected" : null),
+      on_click: () => set_screen_tab("crop"),
+    })
+    screen_tab_resize_button_manager = create_button_manager({
+      type: "soft",
+      text: "Resize",
+      icon_sw: 30,
+      is_compressed: true,
+      support_icon: "resize",
+      selected_type: () => (screen_tab == "resize" ? "selected" : null),
+      on_click: () => set_screen_tab("resize"),
+    })
+    screen_tab_ai_button_manager = create_button_manager({
+      type: "soft",
+      text: "AI",
+      icon_sw: 30,
+      is_compressed: true,
+      support_icon: "brain",
+      selected_type: () => (screen_tab == "ai" ? "selected" : null),
+      on_click: () => set_screen_tab("ai"),
+    })
+    screen_tab_file_button_manager = create_button_manager({
+      type: "soft",
+      text: "File",
+      icon_sw: 30,
+      is_compressed: true,
+      support_icon: "file",
+      selected_type: () => (screen_tab == "file" ? "selected" : null),
+      on_click: () => set_screen_tab("file"),
+    })
+    undo_button_manager = create_button_manager({
+      type: "soft",
+      is_no_wrap: true,
+      text: () =>
+        `Undo ${
+          image_sources.length - image_source_index > 1
+            ? "(" + (image_sources.length - image_source_index - 1) + ")"
+            : ""
+        }`,
+      icon_sw: 30,
+      is_compressed: true,
+      support_icon: "undo_arrow",
+      is_disabled: () => image_sources.length < 2 || image_sources.length - image_source_index < 2,
+      on_click: () => undo(),
+    })
+    redo_button_manager = create_button_manager({
+      type: "soft",
+      is_no_wrap: true,
+      text: () => `Redo ${image_source_index > 0 ? "(" + image_source_index + ")" : ""}`,
+      icon_sw: 30,
+      is_compressed: true,
+      support_icon: "redo_arrow",
+      is_disabled: () => image_sources.length < 2 || image_source_index < 1,
+      on_click: () => redo(),
+    })
+    clear_button_manager = create_button_manager({
+      type: "soft",
+      text: "Clear",
+      is_compressed: true,
+      icon_sw: 30,
+      support_icon: "trashcan",
+      is_disabled: () => image_sources.length < 1,
+      on_click: () => clear(),
+    })
+    finish_button_manager = create_button_manager({
+      h: 10,
+      l: 18,
+      c: 14,
+      is_no_wrap: true,
+      text: "Finish",
+      icon_sw: 30,
+      is_compressed: true,
+      support_icon: "check",
+      is_disabled: () => image_sources.length < 1,
+      on_click: () => finish(),
+    })
+    filter_brightness_slider_manager = create_slider_manager({
+      label: "Brightness",
+      label_font_size: 1.4,
+      val: 100,
+      min: 1,
+      max: 200,
+      step: 1,
+      on_change: () => main_image_transformer(),
+    })
+    filter_contrast_slider_manager = create_slider_manager({
+      label: "Contrast",
+      label_font_size: 1.4,
+      val: 100,
+      min: 1,
+      max: 200,
+      step: 1,
+      on_change: () => main_image_transformer(),
+    })
+    filter_saturation_slider_manager = create_slider_manager({
+      label: "Saturation",
+      label_font_size: 1.4,
+      val: 100,
+      min: 1,
+      max: 200,
+      step: 1,
+      on_change: () => main_image_transformer(),
+    })
+    filter_grayscale_slider_manager = create_slider_manager({
+      label: "Grayscale",
+      label_font_size: 1.4,
+      val: 0,
+      min: 1,
+      max: 200,
+      step: 1,
+      on_change: () => main_image_transformer(),
+    })
+    filter_hue_slider_manager = create_slider_manager({
+      label: "Hue",
+      label_font_size: 1.4,
+      val: 0,
+      min: 1,
+      max: 200,
+      step: 1,
+      on_change: () => main_image_transformer(),
+    })
+    filter_red_slider_manager = create_slider_manager({
+      label: "Red",
+      label_font_size: 1.4,
+      val: 100,
+      min: 1,
+      max: 255,
+      step: 1,
+      on_change: () => main_image_transformer(),
+    })
+    filter_green_slider_manager = create_slider_manager({
+      label: "Green",
+      label_font_size: 1.4,
+      val: 100,
+      min: 1,
+      max: 255,
+      step: 1,
+      on_change: () => main_image_transformer(),
+    })
+    filter_blue_slider_manager = create_slider_manager({
+      label: "Blue",
+      label_font_size: 1.4,
+      val: 100,
+      min: 1,
+      max: 100,
+      step: 1,
+      on_change: () => main_image_transformer(),
+    })
+    filter_blur_slider_manager = create_slider_manager({
+      label: "Blur",
+      label_font_size: 1.4,
+      val: 0,
+      min: 0,
+      max: 200,
+      step: 1,
+      on_change: () => main_image_transformer(),
+    })
+    filter_opacity_slider_manager = create_slider_manager({
+      label: "Opacity",
+      label_font_size: 1.4,
+      val: 100,
+      min: 0,
+      max: 100,
+      step: 1,
+      on_change: () => main_image_transformer(),
+    })
+    filters_set_default_button_manager = create_button_manager({
+      type: "outlined",
+      is_no_wrap: true,
+      text: "Set Default Values",
+      on_click: () => reset_filters(),
+    })
+    filters_apply_filters_button_manager = create_button_manager({
+      is_no_wrap: true,
+      text: "Apply Filters",
+      on_click: () => apply_filters(),
+    })
+    crop_free_button_manager = create_button_manager({
+      type: "soft",
+      text: "Free",
+      is_disabled: () => is_disabled,
+      on_click: () => set_crop_box_loc(null, null),
+    })
+    crop_one_to_one_button_manager = create_button_manager({
+      type: "soft",
+      text: "1/1",
+      icon_sw: 30,
+      is_icon_left: true,
+      text_align: "left",
+      support_icon: "ar_one_to_one",
+      is_disabled: () => is_disabled,
+      is_half_selected: () => crop_aspect_ratio == 1,
+      on_click: () => set_crop_box_loc(1, 1),
+    })
+    crop_four_to_three_button_manager = create_button_manager({
+      type: "soft",
+      text: "4/3",
+      icon_sw: 30,
+      is_icon_left: true,
+      text_align: "left",
+      support_icon: "ar_four_to_three",
+      is_disabled: () => is_disabled,
+      is_half_selected: () => crop_aspect_ratio == 1.333,
+      on_click: () => set_crop_box_loc(4, 3),
+    })
+    crop_three_to_two_button_manager = create_button_manager({
+      type: "soft",
+      text: "3/2",
+      icon_sw: 30,
+      is_icon_left: true,
+      text_align: "left",
+      support_icon: "ar_three_to_two",
+      is_disabled: () => is_disabled,
+      is_half_selected: () => crop_aspect_ratio == 1.5,
+      on_click: () => set_crop_box_loc(3, 2),
+    })
+    crop_sixteen_to_nine_button_manager = create_button_manager({
+      type: "soft",
+      text: "16/9",
+      icon_sw: 30,
+      is_icon_left: true,
+      text_align: "left",
+      support_icon: "ar_sixteen_to_nine",
+      is_disabled: () => is_disabled,
+      is_half_selected: () => crop_aspect_ratio == 1.778,
+      on_click: () => set_crop_box_loc(16, 9),
+    })
+    crop_three_to_four_button_manager = create_button_manager({
+      type: "soft",
+      text: "3/4",
+      icon_deg: 90,
+      icon_sw: 30,
+      is_icon_left: true,
+      text_align: "left",
+      support_icon: "ar_four_to_three",
+      is_disabled: () => is_disabled,
+      is_half_selected: () => crop_aspect_ratio == 0.75,
+      on_click: () => set_crop_box_loc(3, 4),
+    })
+    crop_two_to_three_button_manager = create_button_manager({
+      type: "soft",
+      text: "2/3",
+      icon_deg: 90,
+      icon_sw: 30,
+      is_icon_left: true,
+      text_align: "left",
+      support_icon: "ar_three_to_two",
+      is_disabled: () => is_disabled,
+      is_half_selected: () => crop_aspect_ratio == 0.6667,
+      on_click: () => set_crop_box_loc(2, 3),
+    })
+    crop_nine_to_sixteen_button_manager = create_button_manager({
+      type: "soft",
+      text: "9/16",
+      icon_deg: 90,
+      icon_sw: 30,
+      is_icon_left: true,
+      text_align: "left",
+      support_icon: "ar_sixteen_to_nine",
+      is_disabled: () => is_disabled,
+      is_half_selected: () => crop_aspect_ratio == 0.5625,
+      on_click: () => set_crop_box_loc(9, 16),
+    })
+    crop_width_ratio_text_input_manager = create_text_input_manager({
+      type: "number",
+      val: crop_aspect_width_loc,
+      min: 0,
+      mt: 0.5,
+      is_compressed: true,
+      placeholder: "width ratio",
+      is_disabled: () => is_disabled,
+      on_change: (input) => {
+        crop_aspect_width_loc = input
+        set_crop_box(crop_aspect_width_loc, crop_aspect_height_loc)
+      },
+    })
+    crop_height_ratio_text_input_manager = create_text_input_manager({
+      type: "number",
+      val: crop_aspect_height_loc,
+      min: 0,
+      mt: 0.5,
+      is_compressed: true,
+      placeholder: "height ratio",
+      is_disabled: () => is_disabled,
+      on_change: (input) => {
+        crop_aspect_height_loc = input
+        set_crop_box(crop_aspect_width_loc, crop_aspect_height_loc)
+      },
+    })
+    crop_image_button_manager = create_button_manager({
+      text: "Crop Image",
+      mt: 0.5,
+      is_disabled: () => is_disabled,
+      on_click: () => crop_image(),
+    })
+    file_name_text_input_manager = create_text_input_manager({
+      label: "File Name",
+      placeholder: () => (file_name_derived && file_name_derived.length > 0 ? file_name_derived : "some_file_name"),
+      val: file_name_derived,
+      mb: 1,
+      is_disabled: () => is_disabled,
+      on_change: (input) => file_input_change(input, mime_type),
+    })
+    mime_type_webp_button_manager = create_button_manager({
+      type: "outlined",
+      text: "webp",
+      is_disabled: () => is_disabled,
+      selected_type: () => (mime_type_input == "image/webp" ? "selected" : null),
+      on_click: () => file_input_change(file_name_text_input_manager?.val, "image/webp"),
+    })
+    mime_type_jpeg_button_manager = create_button_manager({
+      type: "outlined",
+      text: "jpeg",
+      is_disabled: () => is_disabled,
+      selected_type: () => (mime_type_input == "image/jpeg" ? "selected" : null),
+      on_click: () => file_input_change(file_name_text_input_manager?.val, "image/jpeg"),
+    })
+    mime_type_png_button_manager = create_button_manager({
+      type: "outlined",
+      text: "png",
+      is_disabled: () => is_disabled,
+      selected_type: () => (mime_type_input == "image/png" ? "selected" : null),
+      on_click: () => file_input_change(file_name_text_input_manager?.val, "image/png"),
+    })
+    download_image_button_manager = create_button_manager({
+      type: "outlined",
+      text: "Download",
+      is_disabled: () => is_disabled,
+      on_click: () => download_image(),
+    })
+    set_file_changes_button_manager = create_button_manager({
+      text: "Set File Changes",
+      is_disabled: () => is_disabled,
+      on_click: () => set_file_from_inputs(),
+    })
+    file_quality_slider_manager = create_slider_manager({
+      val: 75,
+      min: 1,
+      max: 100,
+      step: 1,
+      is_disabled: () => is_disabled,
+      on_change: (input) => file_input_change(file_name_text_input_manager?.val, null, input),
+    })
+    ai_tab_dropdown_manager = create_dropdown_manager({
+      type: "horiz_selector",
+      val: "text_to_image",
+      options: [
+        { key: "text_to_image", name: "Text to Image" },
+        { key: "remove_background", name: "Remove Background" },
+        { key: "restore_resolution", name: "Restore Resolution" },
+        { key: "restore_face", name: "Restore Face" },
+      ],
+    })
+    ai_generate_image_from_text_text_input_manager = create_text_input_manager({
+      type: "text_area",
+      rows: 3,
+      placeholder: "Describe what you want your image to be of",
+      is_disabled: () => ai_text_to_image_is_loading,
+    })
+    ai_generate_image_from_text_button_manager = create_button_manager({
+      text: "Generate Image From text",
+      is_compressed: true,
+      mt: 1,
+      is_loading: () => ai_text_to_image_is_loading,
+      is_disabled: () => is_disabled,
+      on_click: () => ai_text_to_image(ai_generate_image_from_text_text_input_manager?.val),
+    })
+    ai_remove_bg_button_manager = create_button_manager({
+      text: "Remove Background",
+      is_compressed: true,
+      is_loading: () => ai_remove_background_is_loading,
+      is_disabled: () => is_disabled,
+      on_click: () => ai_remove_background(selected_image_source),
+    })
+    ai_restore_resolution_button_manager = create_button_manager({
+      text: "Restore Resolution",
+      is_compressed: true,
+      is_loading: () => ai_restore_resolution_is_loading,
+      is_disabled: () => is_disabled,
+      on_click: () => ai_restore_resolution(selected_image_source),
+    })
+    ai_restore_face_button_manager = create_button_manager({
+      text: "Restore Face",
+      is_compressed: true,
+      is_loading: () => ai_restore_face_is_loading,
+      is_disabled: () => is_disabled,
+      on_click: () => ai_restore_face(selected_image_source),
+    })
+    resize_width_dropdown_manager = create_dropdown_manager({
+      type: "horiz_selector",
+      val: resize_width,
+      min_header_width: 9.5,
+      header: "Width",
+      header_icon: "opposing_arrows",
+      header_icon_deg: 90,
+      options: resize_options,
+      is_disabled: () => is_disabled,
+      on_item_click: (input) => {
+        set_resize_dimensions(input.key, null)
+        resize_width_text_input_manager.set_val(resize_width)
+        resize_height_text_input_manager.set_val(resize_height)
+      },
+    })
+    resize_height_dropdown_manager = create_dropdown_manager({
+      type: "horiz_selector",
+      val: resize_height,
+      min_header_width: 9.5,
+      header: "Height",
+      header_icon: "opposing_arrows",
+      header_icon_deg: 0,
+      options: resize_options,
+      is_disabled: () => is_disabled,
+      on_item_click: (input) => {
+        set_resize_dimensions(null, input.key)
+        resize_width_text_input_manager.set_val(resize_width)
+        resize_height_text_input_manager.set_val(resize_height)
+      },
+    })
+    resize_width_text_input_manager = create_text_input_manager({
+      type: "number",
+      val: resize_width,
+      min: 0,
+      mt: 0.5,
+      label: "Resize Width",
+      is_popover: true,
+      is_popover_edit_content: true,
+      is_compressed: true,
+      placeholder: "resize width",
+      is_disabled: () => is_disabled,
+      on_finish: (input) => {
+        set_resize_dimensions(input, null)
+        if (resize_height_text_input_manager?.val != resize_height) {
+          resize_height_text_input_manager.set_val(resize_height)
+        }
+      },
+    })
+    resize_height_text_input_manager = create_text_input_manager({
+      type: "number",
+      val: resize_height,
+      min: 0,
+      mt: 0.5,
+      label: "Resize Height",
+      is_popover: true,
+      is_popover_edit_content: true,
+      is_compressed: true,
+      placeholder: "resize height",
+      is_disabled: () => is_disabled,
+      on_finish: (input) => {
+        set_resize_dimensions(null, input)
+        if (resize_width_text_input_manager?.val != resize_width) {
+          resize_width_text_input_manager.set_val(resize_width)
+        }
+      },
+    })
+    resize_aspect_ratio_lock_button_manager = create_button_manager({
+      type: "outlined",
+      icon_sw: 30,
+      fixed_width: 20,
+      mt: 0.5,
+      support_icon: () => (is_lock_resize_aspect_ratio ? "linked" : "unlinked"),
+      text: () => `${is_lock_resize_aspect_ratio ? "Unlock" : "Lock"} Aspect Ratio`,
+      selected_type: () => (is_lock_resize_aspect_ratio ? "selected" : null),
+      is_disabled: () => is_disabled,
+      on_click: () => toggle_is_lock_resize_aspect_ratio(),
+    })
+    resize_image_button_manager = create_button_manager({
+      text: "Resize Image",
+      is_compressed: true,
+      mt: 0.5,
+      is_success_animation: true,
+      is_disabled: () => is_disabled || !resize_width || !resize_height,
+      on_click: () => main_image_transformer(),
+    })
+    // init_file() issue if called without document defined
+  }
+
+  init(config)
+
+  return {
+    id,
+    get file_picker_file() {
+      return file_picker_file
+    },
+    get image_sources() {
+      return image_sources
+    },
+    get image_source_index() {
+      return image_source_index
+    },
+    get selected_image_source() {
+      return selected_image_source
+    },
+    get screen_tab() {
+      return screen_tab
+    },
+    get crop_left() {
+      return crop_left
+    },
+    get crop_top() {
+      return crop_top
+    },
+    get crop_width() {
+      return crop_width
+    },
+    get crop_height() {
+      return crop_height
+    },
+    get is_disabled() {
+      return is_disabled
+    },
+    get current_image_width() {
+      return current_image_width
+    },
+    get current_image_height() {
+      return current_image_height
+    },
+    get image_pixels_crop_width() {
+      return image_pixels_crop_width
+    },
+    get image_pixels_crop_height() {
+      return image_pixels_crop_height
+    },
+    get current_image_ar() {
+      return current_image_ar
+    },
+    get crop_aspect_ratio() {
+      return crop_aspect_ratio
+    },
+    get is_lock_resize_aspect_ratio() {
+      return is_lock_resize_aspect_ratio
+    },
+    get resize_width() {
+      return resize_width
+    },
+    get resize_height() {
+      return resize_height
+    },
+    get file_size_data() {
+      return file_size_data
+    },
+    get mime_type_input() {
+      return mime_type_input
+    },
+    get file_size_kb() {
+      return file_size_kb
+    },
+    get file_name() {
+      return file_name
+    },
+    get file_name_derived() {
+      return file_name_derived
+    },
+    get file_name_derived_with_extension() {
+      return file_name_derived_with_extension
+    },
+    get ai_error_message() {
+      return ai_error_message
+    },
+    get file_input_manager() {
+      return file_input_manager
+    },
+    get screen_tab_filters_button_manager() {
+      return screen_tab_filters_button_manager
+    },
+    get screen_tab_crop_button_manager() {
+      return screen_tab_crop_button_manager
+    },
+    get screen_tab_resize_button_manager() {
+      return screen_tab_resize_button_manager
+    },
+    get screen_tab_ai_button_manager() {
+      return screen_tab_ai_button_manager
+    },
+    get screen_tab_file_button_manager() {
+      return screen_tab_file_button_manager
+    },
+    get undo_button_manager() {
+      return undo_button_manager
+    },
+    get redo_button_manager() {
+      return redo_button_manager
+    },
+    get clear_button_manager() {
+      return clear_button_manager
+    },
+    get finish_button_manager() {
+      return finish_button_manager
+    },
+    get filter_brightness_slider_manager() {
+      return filter_brightness_slider_manager
+    },
+    get filter_contrast_slider_manager() {
+      return filter_contrast_slider_manager
+    },
+    get filter_saturation_slider_manager() {
+      return filter_saturation_slider_manager
+    },
+    get filter_grayscale_slider_manager() {
+      return filter_grayscale_slider_manager
+    },
+    get filter_hue_slider_manager() {
+      return filter_hue_slider_manager
+    },
+    get filter_red_slider_manager() {
+      return filter_red_slider_manager
+    },
+    get filter_green_slider_manager() {
+      return filter_green_slider_manager
+    },
+    get filter_blue_slider_manager() {
+      return filter_blue_slider_manager
+    },
+    get filter_blur_slider_manager() {
+      return filter_blur_slider_manager
+    },
+    get filter_opacity_slider_manager() {
+      return filter_opacity_slider_manager
+    },
+    get filters_set_default_button_manager() {
+      return filters_set_default_button_manager
+    },
+    get filters_apply_filters_button_manager() {
+      return filters_apply_filters_button_manager
+    },
+    get crop_free_button_manager() {
+      return crop_free_button_manager
+    },
+    get crop_one_to_one_button_manager() {
+      return crop_one_to_one_button_manager
+    },
+    get crop_four_to_three_button_manager() {
+      return crop_four_to_three_button_manager
+    },
+    get crop_three_to_two_button_manager() {
+      return crop_three_to_two_button_manager
+    },
+    get crop_sixteen_to_nine_button_manager() {
+      return crop_sixteen_to_nine_button_manager
+    },
+    get crop_three_to_four_button_manager() {
+      return crop_three_to_four_button_manager
+    },
+    get crop_two_to_three_button_manager() {
+      return crop_two_to_three_button_manager
+    },
+    get crop_nine_to_sixteen_button_manager() {
+      return crop_nine_to_sixteen_button_manager
+    },
+    get crop_width_ratio_text_input_manager() {
+      return crop_width_ratio_text_input_manager
+    },
+    get crop_height_ratio_text_input_manager() {
+      return crop_height_ratio_text_input_manager
+    },
+    get crop_image_button_manager() {
+      return crop_image_button_manager
+    },
+    get crop_aspect_width_loc() {
+      return crop_aspect_width_loc
+    },
+    get crop_aspect_height_loc() {
+      return crop_aspect_height_loc
+    },
+    get file_name_text_input_manager() {
+      return file_name_text_input_manager
+    },
+    get mime_type_webp_button_manager() {
+      return mime_type_webp_button_manager
+    },
+    get mime_type_jpeg_button_manager() {
+      return mime_type_jpeg_button_manager
+    },
+    get mime_type_png_button_manager() {
+      return mime_type_png_button_manager
+    },
+    get download_image_button_manager() {
+      return download_image_button_manager
+    },
+    get set_file_changes_button_manager() {
+      return set_file_changes_button_manager
+    },
+    get shown_file_size_data() {
+      return shown_file_size_data
+    },
+    get file_quality_slider_manager() {
+      return file_quality_slider_manager
+    },
+    get ai_tab_dropdown_manager() {
+      return ai_tab_dropdown_manager
+    },
+    get ai_text_to_image_is_loading() {
+      return ai_text_to_image_is_loading
+    },
+    get ai_generate_image_from_text_text_input_manager() {
+      return ai_generate_image_from_text_text_input_manager
+    },
+    get ai_generate_image_from_text_button_manager() {
+      return ai_generate_image_from_text_button_manager
+    },
+    get ai_remove_bg_button_manager() {
+      return ai_remove_bg_button_manager
+    },
+    get ai_restore_resolution_button_manager() {
+      return ai_restore_resolution_button_manager
+    },
+    get ai_restore_face_button_manager() {
+      return ai_restore_face_button_manager
+    },
+    get resize_width_dropdown_manager() {
+      return resize_width_dropdown_manager
+    },
+    get resize_height_dropdown_manager() {
+      return resize_height_dropdown_manager
+    },
+    get resize_width_text_input_manager() {
+      return resize_width_text_input_manager
+    },
+    get resize_height_text_input_manager() {
+      return resize_height_text_input_manager
+    },
+    get resize_aspect_ratio_lock_button_manager() {
+      return resize_aspect_ratio_lock_button_manager
+    },
+    get resize_image_button_manager() {
+      return resize_image_button_manager
+    },
+    get is_popover() {
+      return is_popover
+    },
+    get popover_manager() {
+      return popover_manager
+    },
+    init,
+    init_file,
+    on_destroy,
+    set_screen_tab,
+    undo,
+    redo,
+    clear,
+    finish,
+    set_base_image,
+    apply_filters,
+    reset_filters,
+    main_image_transformer,
+    crop_on_up,
+    crop_on_move,
+    crop_on_down,
+    set_crop_box,
+    crop_image,
+    toggle_is_lock_resize_aspect_ratio,
+    set_resize_dimensions,
+    main_image_transformer,
+    file_input_change,
+    download_image,
+    set_file_from_inputs,
+    drop_handler,
+  }
+}