Hugging Face's logo

Spaces:
Sebastiankay
/
bilder-builder
Running

App Files Community
1
Sebastiankay commited on
Commit
28d4a96
•
1 Parent(s): e07e967

Update _res/_custom.js

Browse files
Files changed (1) hide show
  1. _res/_custom.js +112 -113
_res/_custom.js CHANGED
@@ -1,113 +1,112 @@
1
- function gradioColorChange() {
2
- function onDomChange(callback) {
3
- const observer = new MutationObserver(callback)
4
- observer.observe(document.querySelector("#dominant_image_color"), {
5
- childList: true,
6
- subtree: true,
7
- })
8
- }
9
-
10
- onDomChange(() => {
11
- console.log("changed: " + document.querySelector("#dominant_image_color > label > textarea").value)
12
- if (document.querySelector("#dominant_image_color > label > textarea").value.match(/^rgb\((\d{1,3}),(\s\d{1,3}),(\s\d{1,3})\)$/) && document.querySelector("#output_image > div.image-container.svelte-1p15vfy > button > div > img").src) {
13
- document.querySelector("#output_image > div.image-container.svelte-1p15vfy > button > div > img").style.opacity = "0"
14
- document.querySelector("body > gradio-app > div").classList.add("fade-bg")
15
- document.querySelector("gradio-app").style.opacity = "0"
16
- setTimeout(() => {
17
- document.querySelector("body").style.setProperty("--primary-700", document.querySelector("#dominant_image_color > label > textarea").value)
18
- document.querySelector("gradio-app").classList.add("has-bg-image")
19
- document.querySelector("body").style.setProperty("--bg-image-path", `url("${document.querySelector("#output_image > div.image-container.svelte-1p15vfy > button > div > img").src}")`)
20
- }, 400)
21
- setTimeout(() => {
22
- document.querySelector("gradio-app").style.opacity = "1"
23
- document.querySelector("#output_image > div.image-container.svelte-1p15vfy > button > div > img").style.opacity = "1"
24
- document.querySelector("#dominant_image_color > label > textarea").value = ""
25
- }, 800)
26
- setTimeout(() => {
27
- //document.querySelector("body > gradio-app > div").classList.remove("fade-bg")
28
- }, 2000)
29
- }
30
- //document.querySelector("body").style.setProperty("--primary-700", document.querySelector("#dominant_image_color > label > textarea").value)
31
- })
32
-
33
- document.querySelector("body").style.setProperty("--primary-700", "rgb(14, 116, 144)")
34
- document.querySelector("body").style.setProperty("--primary-50", "color-mix(in srgb, var(--primary-700) 5%, white)")
35
- document.querySelector("body").style.setProperty("--primary-100", "color-mix(in srgb, var(--primary-700) 10%, white)")
36
- document.querySelector("body").style.setProperty("--primary-200", "color-mix(in srgb, var(--primary-700) 20%, white)")
37
- document.querySelector("body").style.setProperty("--primary-300", "color-mix(in srgb, var(--primary-700) 60%, white)")
38
- document.querySelector("body").style.setProperty("--primary-400", "color-mix(in srgb, var(--primary-700) 70%, white)")
39
- document.querySelector("body").style.setProperty("--primary-500", "color-mix(in srgb, var(--primary-700) 80%, white)")
40
- document.querySelector("body").style.setProperty("--primary-600", "color-mix(in srgb, var(--primary-700) 90%, white)")
41
- document.querySelector("body").style.setProperty("--primary-800", "color-mix(in srgb, var(--primary-700) 70%, black)")
42
- document.querySelector("body").style.setProperty("--primary-900", "color-mix(in srgb, var(--primary-700) 80%, black)")
43
- document.querySelector("body").style.setProperty("--primary-950", "color-mix(in srgb, var(--primary-700) 90%, black)")
44
-
45
- const imageRatioBtns = document.querySelectorAll("#image_ratio_buttons > div label")
46
- const width_selector = document.querySelector("#image_width_selector > label > input")
47
- const hight_selector = document.querySelector("#image_height_selector > label > input")
48
- const switch_width_height = document.querySelector("#switch_width_height")
49
-
50
- const random_prompt_btn = document.querySelector("#random_prompt_btn")
51
- random_prompt_btn.innerHTML =
52
- '<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 48 48"><g data-name="Ebene_1"><path fill="none" d="M0 48V0h48v48z"/><path d="M42.15 9.85C41.58 9.28 40.9 9 40.12 9H7.88c-.78 0-1.46.28-2.03.85S5 11.1 5 11.88v24.23c0 .78.28 1.46.85 2.03s1.25.85 2.03.85h32.23c.78 0 1.46-.28 2.03-.85s.85-1.25.85-2.03V11.88c0-.78-.28-1.46-.85-2.03ZM13.66 30.78c-.68 0-1.24-.55-1.24-1.24s.55-1.24 1.24-1.24 1.24.55 1.24 1.24-.55 1.24-1.24 1.24Zm2.8-7.78-1.3 1.8c-.32.45-.41.76-.48 1.23-.04.26-.13.48-.28.64-.17.19-.42.29-.73.29s-.56-.12-.73-.31c-.16-.18-.25-.42-.25-.73 0-.68.12-1.09.65-1.8l1.48-2c.33-.45.58-.87.58-1.47 0-1.04-.75-1.83-1.83-1.83-.52 0-.99.15-1.36.52-.29.29-.43.65-.55 1.12-.06.22-.16.47-.27.58-.15.17-.39.29-.7.29-.26 0-.49-.1-.66-.29-.18-.2-.23-.42-.23-.71 0-.67.35-1.58 1.03-2.22.68-.65 1.62-1.03 2.73-1.03 2.11 0 3.79 1.4 3.79 3.57 0 1-.35 1.62-.89 2.36Zm7.28 7.78c-.68 0-1.24-.55-1.24-1.24s.55-1.24 1.24-1.24 1.24.55 1.24 1.24-.55 1.24-1.24 1.24Zm2.8-7.78-1.3 1.8c-.32.45-.41.76-.48 1.23-.04.26-.13.48-.28.64-.17.19-.42.29-.73.29s-.56-.12-.73-.31c-.16-.18-.25-.42-.25-.73 0-.68.12-1.09.65-1.8l1.48-2c.33-.45.58-.87.58-1.47 0-1.04-.75-1.83-1.83-1.83-.52 0-.99.15-1.36.52-.29.29-.43.65-.55 1.12-.06.22-.16.47-.27.58-.15.17-.39.29-.7.29-.26 0-.49-.1-.66-.29-.18-.2-.23-.42-.23-.71 0-.67.35-1.58 1.03-2.22.68-.65 1.62-1.03 2.73-1.03 2.11 0 3.79 1.4 3.79 3.57 0 1-.35 1.62-.89 2.36Zm7.28 7.78c-.68 0-1.24-.55-1.24-1.24s.55-1.24 1.24-1.24 1.24.55 1.24 1.24-.55 1.24-1.24 1.24Zm2.8-7.78-1.3 1.8c-.32.45-.41.76-.48 1.23-.04.26-.13.48-.28.64-.17.19-.42.29-.73.29s-.56-.12-.73-.31c-.16-.18-.25-.42-.25-.73 0-.68.12-1.09.65-1.8l1.48-2c.33-.45.58-.87.58-1.47 0-1.04-.75-1.83-1.83-1.83-.52 0-.99.15-1.36.52-.29.29-.43.65-.55 1.12-.06.22-.16.47-.27.58-.15.17-.39.29-.7.29-.26 0-.49-.1-.66-.29-.18-.2-.23-.42-.23-.71 0-.67.35-1.58 1.03-2.22.68-.65 1.62-1.03 2.73-1.03 2.11 0 3.79 1.4 3.79 3.57 0 1-.35 1.62-.89 2.36Z"/></g></svg>'
53
- const enhance_prompt_btn = document.querySelector("#enhance_prompt_btn")
54
- enhance_prompt_btn.innerHTML =
55
- '<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 48 48"><g data-name="Ebene_1"><path fill="none" d="M0 48V0h48v48z"/><path d="m33.91 29.59 9.37-8.07h.38c.4.05.72.21.95.49.23.28.35.59.35.91 0 .18-.05.37-.14.55-.09.18-.22.35-.37.5l-7.55 6.48 2.31 10s.04.1.04.17v.14c0 .41-.14.73-.42.98-.28.24-.6.37-.97.37-.12 0-.24-.01-.37-.04s-.25-.07-.37-.13l-.4-.27-2.8-12.09Zm-4.95-15.31-3-7.1.16-.33c.1-.27.26-.47.5-.63.24-.15.49-.23.75-.23.24 0 .49.07.74.22s.43.36.55.65l3.25 7.67-2.95-.26ZM12.1 37.29l8.69-5.23 8.69 5.29-2.3-9.9 7.65-6.64-10.09-.89-3.95-9.31-3.95 9.25-10.09.89 7.65 6.66-2.3 9.88Zm-3.09 1.65 2.44-10.56-8.16-7.13c-.2-.18-.35-.38-.46-.59-.11-.22-.16-.42-.16-.63 0-.41.14-.79.43-1.14.29-.34.67-.53 1.14-.55l10.8-.96 4.18-9.96c.13-.34.34-.59.64-.76.3-.17.6-.25.91-.25s.62.08.93.25c.31.17.53.42.66.76l4.18 9.96 10.8.96c.48.02.86.21 1.15.55.29.34.44.72.44 1.13 0 .22-.06.44-.18.65-.12.21-.27.4-.47.58l-8.16 7.13 2.47 10.56c.03.09.05.21.05.36 0 .48-.17.89-.51 1.22-.34.33-.73.49-1.16.49-.09 0-.4-.09-.93-.27l-9.26-5.59-9.26 5.59c-.14.08-.29.14-.46.19-.16.05-.31.08-.44.08-.5 0-.94-.21-1.31-.62-.37-.41-.48-.9-.32-1.45Z"/></g></svg>'
56
- const run_btn = document.querySelector("#run_btn")
57
- run_btn.innerHTML =
58
- '<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 48 48"><g data-name="Ebene_1"><path fill="none" d="M0 48V0h48v48z"/><path d="M29.27 43.84V33.13l-6.01-5.57-1.89 8.38c-.1.4-.31.7-.64.92-.33.21-.69.28-1.08.22L9.48 34.99c-.28-.06-.51-.21-.69-.46s-.24-.54-.19-.86c.05-.3.21-.53.48-.68s.54-.2.82-.15l8.99 1.79 3.86-19.69-5.88 2.67v5.52c0 .33-.11.6-.33.82-.22.22-.5.33-.83.33-.33 0-.61-.11-.82-.33-.22-.22-.33-.5-.33-.82V17c0-.3.08-.58.25-.82.17-.24.38-.43.65-.55l7.42-3.07c.94-.41 1.62-.67 2.04-.78.42-.11.83-.17 1.22-.17.6 0 1.14.13 1.61.4.47.27.88.66 1.21 1.17l2.12 3.37c.79 1.27 1.85 2.4 3.16 3.39 1.31.99 2.81 1.62 4.5 1.91.33.06.61.2.83.42.23.22.34.49.34.8s-.11.6-.34.82c-.23.22-.49.31-.81.27-1.84-.22-3.58-.87-5.2-1.96-1.62-1.09-3.12-2.68-4.49-4.79l-2.09 9.07 4.11 3.88c.16.14.28.31.36.49.08.19.13.38.13.57v12.42c0 .33-.11.6-.34.82-.23.22-.5.33-.82.33s-.61-.11-.82-.33c-.22-.22-.33-.5-.33-.82Zm-.06-34.83c-.97 0-1.8-.34-2.48-1.02-.68-.68-1.03-1.51-1.03-2.48s.34-1.8 1.02-2.48C27.4 2.35 28.23 2 29.2 2s1.8.34 2.48 1.02c.68.68 1.03 1.51 1.03 2.48s-.34 1.8-1.02 2.48c-.68.68-1.51 1.03-2.48 1.03Z"/></g></svg>'
59
-
60
- switch_width_height.innerHTML =
61
- '<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 48 48"><g data-name="Ebene_1"><path fill="none" d="M0 48V0h48v48z"/><path d="M33.75 22.5V6.01c0-1.84-1.5-3.34-3.34-3.34H5.01c-1.84 0-3.34 1.5-3.34 3.34V22.5c0 1.84 1.5 3.34 3.34 3.34h25.4c1.84 0 3.34-1.5 3.34-3.34Zm-29.41 0V6.01c0-.37.3-.67.67-.67h25.4c.37 0 .67.3.67.67V22.5c0 .37-.3.67-.67.67H5.01a.67.67 0 0 1-.67-.67Z"/><path d="M39.65 15.1c-.41-.72-1.33-.97-2.05-.56s-.97 1.33-.56 2.05C38.32 18.84 39 21.4 39 24c0 8.27-6.73 15-15 15-5.2 0-9.91-2.61-12.68-7H16c.83 0 1.5-.67 1.5-1.5S16.83 29 16 29H7.5c-.83 0-1.5.67-1.5 1.5V39c0 .83.67 1.5 1.5 1.5S9 39.83 9 39v-5.06C12.35 39 17.9 42 24 42c9.93 0 18-8.07 18-18 0-3.12-.81-6.2-2.35-8.9Z"/></g></svg>'
62
-
63
- switch_width_height.addEventListener("click", () => {
64
- switch_width_height.querySelector("svg").classList.toggle("portrait")
65
- switch_width_height.querySelector("svg").classList.toggle("landscape")
66
-
67
- imageRatioBtns.forEach((_) => {
68
- const ratio = _.querySelector("input").value
69
- const [a, b] = ratio.split(":")
70
- _.dataset.testid = `${b}:${a}-radio-label`
71
- _.querySelector("input").value = `${b}:${a}`
72
- _.querySelector("span").textContent = `${b}:${a}`
73
- })
74
-
75
- const imageRatioBtnsLabel = document.querySelector("#image_ratio_buttons > span")
76
- imageRatioBtnsLabel.textContent = imageRatioBtnsLabel.textContent === "Querformat" ? "Hochformat" : "Querformat"
77
- const new_hight = width_selector.value
78
- const new_width = hight_selector.value
79
- width_selector.value = new_width
80
- hight_selector.value = new_hight
81
- })
82
-
83
- //document.querySelector("#image_ratio_buttons > div.wrap.svelte-1kzox3m > label")
84
- imageRatioBtns.forEach((_) => {
85
- _.querySelector("input").addEventListener("click", (e) => {
86
- let set_width
87
- let set_height
88
- const clicked_on = e.target
89
- console.log("Clicked Btn:", clicked_on.value)
90
-
91
- const ratio = e.target.value
92
- const [a, b] = ratio.split(":")
93
-
94
- if (parseInt(a) > parseInt(b)) {
95
- console.log("a: " + a + " > " + "b: " + b)
96
- set_width = 1024
97
- set_height = Math.round(set_width * (b / a))
98
- } else if (parseInt(a) < parseInt(b)) {
99
- console.log("a: " + a + " < " + "b: " + b)
100
- set_height = 1024
101
- set_width = Math.round(set_height * (a / b))
102
- } else if (parseInt(a) == parseInt(b)) {
103
- set_height = 1024
104
- set_width = 1024
105
- }
106
-
107
- width_selector.value = set_width
108
- hight_selector.value = set_height
109
- })
110
- })
111
-
112
- return "Animation created"
113
- }
 
1
+ function gradioColorChange() {
2
+ function onDomChange(callback) {
3
+ const observer = new MutationObserver(callback)
4
+ observer.observe(document.querySelector("#dominant_image_color"), {
5
+ childList: true,
6
+ subtree: true,
7
+ })
8
+ }
9
+
10
+ onDomChange(() => {
11
+ console.log("changed: " + document.querySelector("#dominant_image_color > label > textarea").value)
12
+ if (document.querySelector("#dominant_image_color > label > textarea").value.match(/^rgb\((\d{1,3}),(\s\d{1,3}),(\s\d{1,3})\)$/) && document.querySelector("#output_image > div.image-container.svelte-1p15vfy > button > div > img").src) {
13
+ document.querySelector("#output_image > div.image-container.svelte-1p15vfy > button > div > img").style.opacity = "0"
14
+ document.querySelector("body > gradio-app > div").classList.add("fade-bg")
15
+ document.querySelector("gradio-app").style.opacity = "0"
16
+ setTimeout(() => {
17
+ document.querySelector("body").style.setProperty("--primary-700", document.querySelector("#dominant_image_color > label > textarea").value)
18
+ document.querySelector("gradio-app").classList.add("has-bg-image")
19
+ document.querySelector("body").style.setProperty("--bg-image-path", `url("${document.querySelector("#output_image > div.image-container.svelte-1p15vfy > button > div > img").src}")`)
20
+ }, 400)
21
+ setTimeout(() => {
22
+ document.querySelector("gradio-app").style.opacity = "1"
23
+ document.querySelector("#output_image > div.image-container.svelte-1p15vfy > button > div > img").style.opacity = "1"
24
+ document.querySelector("#dominant_image_color > label > textarea").value = ""
25
+ }, 800)
26
+ setTimeout(() => {
27
+ //document.querySelector("body > gradio-app > div").classList.remove("fade-bg")
28
+ }, 2000)
29
+ }
30
+ //document.querySelector("body").style.setProperty("--primary-700", document.querySelector("#dominant_image_color > label > textarea").value)
31
+ })
32
+
33
+ document.querySelector("body").style.setProperty("--primary-700", "rgb(14, 116, 144)")
34
+ document.querySelector("body").style.setProperty("--primary-50", "color-mix(in srgb, var(--primary-700) 5%, white)")
35
+ document.querySelector("body").style.setProperty("--primary-100", "color-mix(in srgb, var(--primary-700) 10%, white)")
36
+ document.querySelector("body").style.setProperty("--primary-200", "color-mix(in srgb, var(--primary-700) 20%, white)")
37
+ document.querySelector("body").style.setProperty("--primary-300", "color-mix(in srgb, var(--primary-700) 60%, white)")
38
+ document.querySelector("body").style.setProperty("--primary-400", "color-mix(in srgb, var(--primary-700) 70%, white)")
39
+ document.querySelector("body").style.setProperty("--primary-500", "color-mix(in srgb, var(--primary-700) 80%, white)")
40
+ document.querySelector("body").style.setProperty("--primary-600", "color-mix(in srgb, var(--primary-700) 90%, white)")
41
+ document.querySelector("body").style.setProperty("--primary-800", "color-mix(in srgb, var(--primary-700) 70%, black)")
42
+ document.querySelector("body").style.setProperty("--primary-900", "color-mix(in srgb, var(--primary-700) 80%, black)")
43
+ document.querySelector("body").style.setProperty("--primary-950", "color-mix(in srgb, var(--primary-700) 90%, black)")
44
+
45
+ const imageRatioBtns = document.querySelectorAll("#image_ratio_buttons > div label")
46
+ const width_selector = document.querySelector("#image_width_selector > label > input")
47
+ const hight_selector = document.querySelector("#image_height_selector > label > input")
48
+ const switch_width_height = document.querySelector("#switch_width_height")
49
+
50
+ const random_prompt_btn = document.querySelector("#random_prompt_btn")
51
+ random_prompt_btn.innerHTML =
52
+ '<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 48 48"><g data-name="Ebene_1"><path fill="none" d="M0 48V0h48v48z"/><path d="M42.15 9.85C41.58 9.28 40.9 9 40.12 9H7.88c-.78 0-1.46.28-2.03.85S5 11.1 5 11.88v24.23c0 .78.28 1.46.85 2.03s1.25.85 2.03.85h32.23c.78 0 1.46-.28 2.03-.85s.85-1.25.85-2.03V11.88c0-.78-.28-1.46-.85-2.03ZM13.66 30.78c-.68 0-1.24-.55-1.24-1.24s.55-1.24 1.24-1.24 1.24.55 1.24 1.24-.55 1.24-1.24 1.24Zm2.8-7.78-1.3 1.8c-.32.45-.41.76-.48 1.23-.04.26-.13.48-.28.64-.17.19-.42.29-.73.29s-.56-.12-.73-.31c-.16-.18-.25-.42-.25-.73 0-.68.12-1.09.65-1.8l1.48-2c.33-.45.58-.87.58-1.47 0-1.04-.75-1.83-1.83-1.83-.52 0-.99.15-1.36.52-.29.29-.43.65-.55 1.12-.06.22-.16.47-.27.58-.15.17-.39.29-.7.29-.26 0-.49-.1-.66-.29-.18-.2-.23-.42-.23-.71 0-.67.35-1.58 1.03-2.22.68-.65 1.62-1.03 2.73-1.03 2.11 0 3.79 1.4 3.79 3.57 0 1-.35 1.62-.89 2.36Zm7.28 7.78c-.68 0-1.24-.55-1.24-1.24s.55-1.24 1.24-1.24 1.24.55 1.24 1.24-.55 1.24-1.24 1.24Zm2.8-7.78-1.3 1.8c-.32.45-.41.76-.48 1.23-.04.26-.13.48-.28.64-.17.19-.42.29-.73.29s-.56-.12-.73-.31c-.16-.18-.25-.42-.25-.73 0-.68.12-1.09.65-1.8l1.48-2c.33-.45.58-.87.58-1.47 0-1.04-.75-1.83-1.83-1.83-.52 0-.99.15-1.36.52-.29.29-.43.65-.55 1.12-.06.22-.16.47-.27.58-.15.17-.39.29-.7.29-.26 0-.49-.1-.66-.29-.18-.2-.23-.42-.23-.71 0-.67.35-1.58 1.03-2.22.68-.65 1.62-1.03 2.73-1.03 2.11 0 3.79 1.4 3.79 3.57 0 1-.35 1.62-.89 2.36Zm7.28 7.78c-.68 0-1.24-.55-1.24-1.24s.55-1.24 1.24-1.24 1.24.55 1.24 1.24-.55 1.24-1.24 1.24Zm2.8-7.78-1.3 1.8c-.32.45-.41.76-.48 1.23-.04.26-.13.48-.28.64-.17.19-.42.29-.73.29s-.56-.12-.73-.31c-.16-.18-.25-.42-.25-.73 0-.68.12-1.09.65-1.8l1.48-2c.33-.45.58-.87.58-1.47 0-1.04-.75-1.83-1.83-1.83-.52 0-.99.15-1.36.52-.29.29-.43.65-.55 1.12-.06.22-.16.47-.27.58-.15.17-.39.29-.7.29-.26 0-.49-.1-.66-.29-.18-.2-.23-.42-.23-.71 0-.67.35-1.58 1.03-2.22.68-.65 1.62-1.03 2.73-1.03 2.11 0 3.79 1.4 3.79 3.57 0 1-.35 1.62-.89 2.36Z"/></g></svg>'
53
+ const enhance_prompt_btn = document.querySelector("#enhance_prompt_btn")
54
+ enhance_prompt_btn.innerHTML =
55
+ '<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 48 48"><g data-name="Ebene_1"><path fill="none" d="M0 48V0h48v48z"/><path d="m33.91 29.59 9.37-8.07h.38c.4.05.72.21.95.49.23.28.35.59.35.91 0 .18-.05.37-.14.55-.09.18-.22.35-.37.5l-7.55 6.48 2.31 10s.04.1.04.17v.14c0 .41-.14.73-.42.98-.28.24-.6.37-.97.37-.12 0-.24-.01-.37-.04s-.25-.07-.37-.13l-.4-.27-2.8-12.09Zm-4.95-15.31-3-7.1.16-.33c.1-.27.26-.47.5-.63.24-.15.49-.23.75-.23.24 0 .49.07.74.22s.43.36.55.65l3.25 7.67-2.95-.26ZM12.1 37.29l8.69-5.23 8.69 5.29-2.3-9.9 7.65-6.64-10.09-.89-3.95-9.31-3.95 9.25-10.09.89 7.65 6.66-2.3 9.88Zm-3.09 1.65 2.44-10.56-8.16-7.13c-.2-.18-.35-.38-.46-.59-.11-.22-.16-.42-.16-.63 0-.41.14-.79.43-1.14.29-.34.67-.53 1.14-.55l10.8-.96 4.18-9.96c.13-.34.34-.59.64-.76.3-.17.6-.25.91-.25s.62.08.93.25c.31.17.53.42.66.76l4.18 9.96 10.8.96c.48.02.86.21 1.15.55.29.34.44.72.44 1.13 0 .22-.06.44-.18.65-.12.21-.27.4-.47.58l-8.16 7.13 2.47 10.56c.03.09.05.21.05.36 0 .48-.17.89-.51 1.22-.34.33-.73.49-1.16.49-.09 0-.4-.09-.93-.27l-9.26-5.59-9.26 5.59c-.14.08-.29.14-.46.19-.16.05-.31.08-.44.08-.5 0-.94-.21-1.31-.62-.37-.41-.48-.9-.32-1.45Z"/></g></svg>'
56
+ const run_btn = document.querySelector("#run_btn")
57
+ run_btn.innerHTML =
58
+ '<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 48 48"><g data-name="Ebene_1"><path fill="none" d="M0 48V0h48v48z"/><path d="M29.27 43.84V33.13l-6.01-5.57-1.89 8.38c-.1.4-.31.7-.64.92-.33.21-.69.28-1.08.22L9.48 34.99c-.28-.06-.51-.21-.69-.46s-.24-.54-.19-.86c.05-.3.21-.53.48-.68s.54-.2.82-.15l8.99 1.79 3.86-19.69-5.88 2.67v5.52c0 .33-.11.6-.33.82-.22.22-.5.33-.83.33-.33 0-.61-.11-.82-.33-.22-.22-.33-.5-.33-.82V17c0-.3.08-.58.25-.82.17-.24.38-.43.65-.55l7.42-3.07c.94-.41 1.62-.67 2.04-.78.42-.11.83-.17 1.22-.17.6 0 1.14.13 1.61.4.47.27.88.66 1.21 1.17l2.12 3.37c.79 1.27 1.85 2.4 3.16 3.39 1.31.99 2.81 1.62 4.5 1.91.33.06.61.2.83.42.23.22.34.49.34.8s-.11.6-.34.82c-.23.22-.49.31-.81.27-1.84-.22-3.58-.87-5.2-1.96-1.62-1.09-3.12-2.68-4.49-4.79l-2.09 9.07 4.11 3.88c.16.14.28.31.36.49.08.19.13.38.13.57v12.42c0 .33-.11.6-.34.82-.23.22-.5.33-.82.33s-.61-.11-.82-.33c-.22-.22-.33-.5-.33-.82Zm-.06-34.83c-.97 0-1.8-.34-2.48-1.02-.68-.68-1.03-1.51-1.03-2.48s.34-1.8 1.02-2.48C27.4 2.35 28.23 2 29.2 2s1.8.34 2.48 1.02c.68.68 1.03 1.51 1.03 2.48s-.34 1.8-1.02 2.48c-.68.68-1.51 1.03-2.48 1.03Z"/></g></svg>'
59
+
60
+ switch_width_height.innerHTML =
61
+ '<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 48 48"><g data-name="Ebene_1"><path fill="none" d="M0 48V0h48v48z"/><path d="M33.75 22.5V6.01c0-1.84-1.5-3.34-3.34-3.34H5.01c-1.84 0-3.34 1.5-3.34 3.34V22.5c0 1.84 1.5 3.34 3.34 3.34h25.4c1.84 0 3.34-1.5 3.34-3.34Zm-29.41 0V6.01c0-.37.3-.67.67-.67h25.4c.37 0 .67.3.67.67V22.5c0 .37-.3.67-.67.67H5.01a.67.67 0 0 1-.67-.67Z"/><path d="M39.65 15.1c-.41-.72-1.33-.97-2.05-.56s-.97 1.33-.56 2.05C38.32 18.84 39 21.4 39 24c0 8.27-6.73 15-15 15-5.2 0-9.91-2.61-12.68-7H16c.83 0 1.5-.67 1.5-1.5S16.83 29 16 29H7.5c-.83 0-1.5.67-1.5 1.5V39c0 .83.67 1.5 1.5 1.5S9 39.83 9 39v-5.06C12.35 39 17.9 42 24 42c9.93 0 18-8.07 18-18 0-3.12-.81-6.2-2.35-8.9Z"/></g></svg>'
62
+
63
+ switch_width_height.addEventListener("click", () => {
64
+ switch_width_height.querySelector("svg").classList.toggle("portrait")
65
+ switch_width_height.querySelector("svg").classList.toggle("landscape")
66
+ // imageRatioBtns.forEach((_) => {
67
+ // const ratio = _.querySelector("input").value
68
+ // const [a, b] = ratio.split(":")
69
+ // _.dataset.testid = `${b}:${a}-radio-label`
70
+ // _.querySelector("input").value = `${b}:${a}`
71
+ // _.querySelector("span").textContent = `${b}:${a}`
72
+ // })
73
+
74
+ // const imageRatioBtnsLabel = document.querySelector("#image_ratio_buttons > span")
75
+ // imageRatioBtnsLabel.textContent = imageRatioBtnsLabel.textContent === "Querformat" ? "Hochformat" : "Querformat"
76
+ // const new_hight = width_selector.value
77
+ // const new_width = hight_selector.value
78
+ // width_selector.value = new_width
79
+ // hight_selector.value = new_hight
80
+ })
81
+
82
+ //document.querySelector("#image_ratio_buttons > div.wrap.svelte-1kzox3m > label")
83
+ // imageRatioBtns.forEach((_) => {
84
+ // _.querySelector("input").addEventListener("click", (e) => {
85
+ // let set_width
86
+ // let set_height
87
+ // const clicked_on = e.target
88
+ // console.log("Clicked Btn:", clicked_on.value)
89
+
90
+ // const ratio = e.target.value
91
+ // const [a, b] = ratio.split(":")
92
+
93
+ // if (parseInt(a) > parseInt(b)) {
94
+ // console.log("a: " + a + " > " + "b: " + b)
95
+ // set_width = 1024
96
+ // set_height = Math.round(set_width * (b / a))
97
+ // } else if (parseInt(a) < parseInt(b)) {
98
+ // console.log("a: " + a + " < " + "b: " + b)
99
+ // set_height = 1024
100
+ // set_width = Math.round(set_height * (a / b))
101
+ // } else if (parseInt(a) == parseInt(b)) {
102
+ // set_height = 1024
103
+ // set_width = 1024
104
+ // }
105
+
106
+ // width_selector.value = set_width
107
+ // hight_selector.value = set_height
108
+ // })
109
+ // })
110
+
111
+ return "Animation created"
112
+ }