feat: component updates, updating ui accordingly

components/iframe/README.md

@@ -5,9 +5,10 @@ It's currently still a work in progress.
 ## Usage
 
 The usage is similar to the HTML component. You can pass valid html and it will be rendered in the interface as an iframe, meaning you can embed any website or webapp that supports iframes.
-Also, JavaScript should run normal.
+Also, JavaScript should run normal. You can even pass an iframe inside an iframe (see below!), i.e. a youtube or spotify embed.
 
-You can still pass normal html that's not interactive.
+The size will adjust to the size of the iframe (onload), **this is gonna be a bit delayed**. The width is default at 100%.
+You can also set the height and width manually.
 
 ### Example
 
@@ -18,19 +19,33 @@ from gradio_iframe import iFrame
 gr.Interface(
     iFrame(
         label="iFrame Example",
-        value=("https://www.youtube.com/watch?v=dQw4w9WgXcQ"),
+        value=("""
+        <iframe width="560"
+            height="315"
+            src="https://www.youtube.com/embed/dQw4w9WgXcQ?si=QfHLpHZsI98oZT1G"
+            title="YouTube video player"
+            frameborder="0"
+            allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share"
+            allowfullscreen>
+        </iframe>"""),
         show_label=True)
 )
 ```
 
+## Roadmap
+
+- [ ] Add manual hand over of other iFrame options.
+- [ ] Explore switch between src and srcdoc through variable.
+
 ## Known Issues
 
 **There are many reason why it's not a good idea to embed websites in an iframe.**
 See [this](https://blog.bitsrc.io/4-security-concerns-with-iframes-every-web-developer-should-know-24c73e6a33e4), or just google "iframe security concerns" for more information. Also, iFrames will use additional computing power and memory, which can slow down the interface.
 
-Also this component is still a work in progress and not fully tested. Use at your own risk.
+Also, this component is still a work in progress and not fully tested. Use at your own risk.
 
 ### Other Issues
 
-- Height does not grow according to the inner component.
+- Height sometimes does not grow according to the inner component.
+- The component is not completely responsive yet and struggles with variable heigth.
 - ...

components/iframe/backend/gradio_iframe/iframe.py

@@ -37,6 +37,7 @@ class iFrame(Component):
         elem_classes: list[str] | str | None = None,
         render: bool = True,
         height: str | None = None,
+        width: str | None = None,
     ):
         """
         Parameters:
@@ -62,9 +63,10 @@ class iFrame(Component):
         )
 
         self.height = height
+        self.width = width
 
     def example_inputs(self) -> Any:
-        return "<p>Hello</p>"
+        return """<iframe width="560" height="315" src="https://www.youtube.com/embed/dQw4w9WgXcQ?si=QfHLpHZsI98oZT1G" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share" allowfullscreen></iframe>"""
 
     def preprocess(self, payload: str | None) -> str | None:
         return payload

components/iframe/backend/gradio_iframe/templates/component/index.js

@@ -1,95 +1,141 @@
 const {
   SvelteComponent: nt,
   append: it,
-  attr: P,
-  detach: ft,
+  attr: D,
+  binding_callbacks: ft,
+  detach: st,
   element: we,
-  init: st,
-  insert: ot,
+  init: ot,
+  insert: at,
+  listen: rt,
   noop: ve,
-  safe_not_equal: at,
-  toggle_class: x
-} = window.__gradio__svelte__internal, { createEventDispatcher: rt } = window.__gradio__svelte__internal;
-function _t(n) {
-  let t, e, l;
+  safe_not_equal: _t,
+  toggle_class: X
+} = window.__gradio__svelte__internal, { createEventDispatcher: ct } = window.__gradio__svelte__internal;
+function ut(n) {
+  let t, e, l, i, s;
   return {
     c() {
-      t = we("div"), e = we("iframe"), P(e, "title", "iframe component"), P(e, "width", "100%"), P(
+      t = we("div"), e = we("iframe"), D(e, "title", "iframe component"), D(
         e,
-        "height",
-        /*height*/
-        n[4]
-      ), P(
+        "width",
+        /*width*/
+        n[5]
+      ), D(
         e,
         "srcdoc",
         /*value*/
         n[1]
-      ), P(e, "allow", "accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share"), e.allowFullscreen = !0, P(t, "class", l = "prose " + /*elem_classes*/
-      n[0].join(" ") + " svelte-2qygph"), x(
+      ), D(e, "allow", "accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share"), e.allowFullscreen = !0, D(t, "class", l = "prose " + /*elem_classes*/
+      n[0].join(" ") + " svelte-2qygph"), X(
         t,
         "min",
         /*min_height*/
         n[3]
-      ), x(t, "hide", !/*visible*/
-      n[2]);
-    },
-    m(i, s) {
-      ot(i, t, s), it(t, e);
-    },
-    p(i, [s]) {
-      s & /*height*/
-      16 && P(
-        e,
+      ), X(t, "hide", !/*visible*/
+      n[2]), X(
+        t,
         "height",
         /*height*/
-        i[4]
-      ), s & /*value*/
-      2 && P(
+        n[4]
+      );
+    },
+    m(o, a) {
+      at(o, t, a), it(t, e), n[8](e), i || (s = rt(
+        e,
+        "load",
+        /*onLoad*/
+        n[7]
+      ), i = !0);
+    },
+    p(o, [a]) {
+      a & /*width*/
+      32 && D(
+        e,
+        "width",
+        /*width*/
+        o[5]
+      ), a & /*value*/
+      2 && D(
         e,
         "srcdoc",
         /*value*/
-        i[1]
-      ), s & /*elem_classes*/
+        o[1]
+      ), a & /*elem_classes*/
       1 && l !== (l = "prose " + /*elem_classes*/
-      i[0].join(" ") + " svelte-2qygph") && P(t, "class", l), s & /*elem_classes, min_height*/
-      9 && x(
+      o[0].join(" ") + " svelte-2qygph") && D(t, "class", l), a & /*elem_classes, min_height*/
+      9 && X(
         t,
         "min",
         /*min_height*/
-        i[3]
-      ), s & /*elem_classes, visible*/
-      5 && x(t, "hide", !/*visible*/
-      i[2]);
+        o[3]
+      ), a & /*elem_classes, visible*/
+      5 && X(t, "hide", !/*visible*/
+      o[2]), a & /*elem_classes, height*/
+      17 && X(
+        t,
+        "height",
+        /*height*/
+        o[4]
+      );
     },
     i: ve,
     o: ve,
-    d(i) {
-      i && ft(t);
+    d(o) {
+      o && st(t), n[8](null), i = !1, s();
     }
   };
 }
-function ut(n, t, e) {
-  let { elem_classes: l = [] } = t, { value: i } = t, { visible: s = !0 } = t, { min_height: o = !1 } = t, { height: a = "100%" } = t;
-  const r = rt();
-  return n.$$set = (f) => {
-    "elem_classes" in f && e(0, l = f.elem_classes), "value" in f && e(1, i = f.value), "visible" in f && e(2, s = f.visible), "min_height" in f && e(3, o = f.min_height), "height" in f && e(4, a = f.height);
+function dt(n, t, e) {
+  let { elem_classes: l = [] } = t, { value: i } = t, { visible: s = !0 } = t, { min_height: o = !1 } = t, { height: a = "100%" } = t, { width: r = "100%" } = t;
+  const f = ct();
+  let _;
+  const m = () => {
+    try {
+      const c = _.contentDocument || _.contentWindow.document;
+      if (a === "100%") {
+        const v = c.documentElement.scrollHeight;
+        e(6, _.style.height = `${v}px`, _);
+      }
+    } catch (c) {
+      console.error("Error accessing iframe content:", c);
+    }
+  };
+  function b(c) {
+    ft[c ? "unshift" : "push"](() => {
+      _ = c, e(6, _);
+    });
+  }
+  return n.$$set = (c) => {
+    "elem_classes" in c && e(0, l = c.elem_classes), "value" in c && e(1, i = c.value), "visible" in c && e(2, s = c.visible), "min_height" in c && e(3, o = c.min_height), "height" in c && e(4, a = c.height), "width" in c && e(5, r = c.width);
   }, n.$$.update = () => {
     n.$$.dirty & /*value*/
-    2 && r("change");
-  }, [l, i, s, o, a];
+    2 && f("change");
+  }, [
+    l,
+    i,
+    s,
+    o,
+    a,
+    r,
+    _,
+    m,
+    b
+  ];
 }
-class ct extends nt {
+class mt extends nt {
   constructor(t) {
-    super(), st(this, t, ut, _t, at, {
+    super(), ot(this, t, dt, ut, _t, {
       elem_classes: 0,
       value: 1,
       visible: 2,
       min_height: 3,
-      height: 4
+      height: 4,
+      width: 5
     });
   }
 }
-function Y(n) {
+function G(n) {
   let t = ["", "k", "M", "G", "T", "P", "E", "Z"], e = 0;
   for (; n > 1e3 && e < t.length - 1; )
     n /= 1e3, e++;
@@ -98,41 +144,41 @@ function Y(n) {
 }
 function te() {
 }
-function dt(n, t) {
+function bt(n, t) {
   return n != n ? t == t : n !== t || n && typeof n == "object" || typeof n == "function";
 }
 const Re = typeof window < "u";
-let ye = Re ? () => window.performance.now() : () => Date.now(), Ue = Re ? (n) => requestAnimationFrame(n) : te;
-const G = /* @__PURE__ */ new Set();
-function Je(n) {
-  G.forEach((t) => {
-    t.c(n) || (G.delete(t), t.f());
-  }), G.size !== 0 && Ue(Je);
+let ke = Re ? () => window.performance.now() : () => Date.now(), Ue = Re ? (n) => requestAnimationFrame(n) : te;
+const O = /* @__PURE__ */ new Set();
+function We(n) {
+  O.forEach((t) => {
+    t.c(n) || (O.delete(t), t.f());
+  }), O.size !== 0 && Ue(We);
 }
-function mt(n) {
+function gt(n) {
   let t;
-  return G.size === 0 && Ue(Je), {
+  return O.size === 0 && Ue(We), {
     promise: new Promise((e) => {
-      G.add(t = { c: n, f: e });
+      O.add(t = { c: n, f: e });
     }),
     abort() {
-      G.delete(t);
+      O.delete(t);
     }
   };
 }
-const X = [];
-function bt(n, t = te) {
+const Y = [];
+function ht(n, t = te) {
   let e;
   const l = /* @__PURE__ */ new Set();
   function i(a) {
-    if (dt(n, a) && (n = a, e)) {
-      const r = !X.length;
+    if (bt(n, a) && (n = a, e)) {
+      const r = !Y.length;
       for (const f of l)
-        f[1](), X.push(f, n);
+        f[1](), Y.push(f, n);
       if (r) {
-        for (let f = 0; f < X.length; f += 2)
-          X[f][0](X[f + 1]);
-        X.length = 0;
+        for (let f = 0; f < Y.length; f += 2)
+          Y[f][0](Y[f + 1]);
+        Y.length = 0;
       }
     }
   }
@@ -147,13 +193,13 @@ function bt(n, t = te) {
   }
   return { set: i, update: s, subscribe: o };
 }
-function ke(n) {
+function ye(n) {
   return Object.prototype.toString.call(n) === "[object Date]";
 }
 function se(n, t, e, l) {
-  if (typeof e == "number" || ke(e)) {
+  if (typeof e == "number" || ye(e)) {
     const i = l - e, s = (e - t) / (n.dt || 1 / 60), o = n.opts.stiffness * i, a = n.opts.damping * s, r = (o - a) * n.inv_mass, f = (s + r) * n.dt;
-    return Math.abs(f) < n.opts.precision && Math.abs(i) < n.opts.precision ? l : (n.settled = !1, ke(e) ? new Date(e.getTime() + f) : e + f);
+    return Math.abs(f) < n.opts.precision && Math.abs(i) < n.opts.precision ? l : (n.settled = !1, ye(e) ? new Date(e.getTime() + f) : e + f);
   } else {
     if (Array.isArray(e))
       return e.map(
@@ -169,22 +215,22 @@ function se(n, t, e, l) {
   }
 }
 function pe(n, t = {}) {
-  const e = bt(n), { stiffness: l = 0.15, damping: i = 0.8, precision: s = 0.01 } = t;
-  let o, a, r, f = n, _ = n, m = 1, c = 0, w = !1;
-  function y(p, L = {}) {
+  const e = ht(n), { stiffness: l = 0.15, damping: i = 0.8, precision: s = 0.01 } = t;
+  let o, a, r, f = n, _ = n, m = 1, b = 0, c = !1;
+  function v(p, L = {}) {
     _ = p;
     const F = r = {};
-    return n == null || L.hard || C.stiffness >= 1 && C.damping >= 1 ? (w = !0, o = ye(), f = p, e.set(n = _), Promise.resolve()) : (L.soft && (c = 1 / ((L.soft === !0 ? 0.5 : +L.soft) * 60), m = 0), a || (o = ye(), w = !1, a = mt((u) => {
-      if (w)
-        return w = !1, a = null, !1;
-      m = Math.min(m + c, 1);
-      const k = {
+    return n == null || L.hard || C.stiffness >= 1 && C.damping >= 1 ? (c = !0, o = ke(), f = p, e.set(n = _), Promise.resolve()) : (L.soft && (b = 1 / ((L.soft === !0 ? 0.5 : +L.soft) * 60), m = 0), a || (o = ke(), c = !1, a = gt((u) => {
+      if (c)
+        return c = !1, a = null, !1;
+      m = Math.min(m + b, 1);
+      const y = {
         inv_mass: m,
         opts: C,
         settled: !0,
         dt: (u - o) * 60 / 1e3
-      }, b = se(k, f, n, _);
-      return o = u, f = n, e.set(n = b), k.settled && (a = null), !k.settled;
+      }, g = se(y, f, n, _);
+      return o = u, f = n, e.set(n = g), y.settled && (a = null), !y.settled;
     })), new Promise((u) => {
       a.promise.then(() => {
         F === r && u();
@@ -192,8 +238,8 @@ function pe(n, t = {}) {
     }));
   }
   const C = {
-    set: y,
-    update: (p, L) => y(p(_, n), L),
+    set: v,
+    update: (p, L) => v(p(_, n), L),
     subscribe: e.subscribe,
     stiffness: l,
     damping: i,
@@ -202,66 +248,66 @@ function pe(n, t = {}) {
   return C;
 }
 const {
-  SvelteComponent: gt,
+  SvelteComponent: wt,
   append: N,
-  attr: v,
+  attr: k,
   component_subscribe: qe,
-  detach: ht,
-  element: wt,
-  init: vt,
-  insert: yt,
+  detach: vt,
+  element: kt,
+  init: yt,
+  insert: pt,
   noop: Fe,
-  safe_not_equal: kt,
+  safe_not_equal: qt,
   set_style: $,
   svg_element: z,
   toggle_class: Le
-} = window.__gradio__svelte__internal, { onMount: pt } = window.__gradio__svelte__internal;
-function qt(n) {
-  let t, e, l, i, s, o, a, r, f, _, m, c;
+} = window.__gradio__svelte__internal, { onMount: Ft } = window.__gradio__svelte__internal;
+function Lt(n) {
+  let t, e, l, i, s, o, a, r, f, _, m, b;
   return {
     c() {
-      t = wt("div"), e = z("svg"), l = z("g"), i = z("path"), s = z("path"), o = z("path"), a = z("path"), r = z("g"), f = z("path"), _ = z("path"), m = z("path"), c = z("path"), v(i, "d", "M255.926 0.754768L509.702 139.936V221.027L255.926 81.8465V0.754768Z"), v(i, "fill", "#FF7C00"), v(i, "fill-opacity", "0.4"), v(i, "class", "svelte-43sxxs"), v(s, "d", "M509.69 139.936L254.981 279.641V361.255L509.69 221.55V139.936Z"), v(s, "fill", "#FF7C00"), v(s, "class", "svelte-43sxxs"), v(o, "d", "M0.250138 139.937L254.981 279.641V361.255L0.250138 221.55V139.937Z"), v(o, "fill", "#FF7C00"), v(o, "fill-opacity", "0.4"), v(o, "class", "svelte-43sxxs"), v(a, "d", "M255.923 0.232622L0.236328 139.936V221.55L255.923 81.8469V0.232622Z"), v(a, "fill", "#FF7C00"), v(a, "class", "svelte-43sxxs"), $(l, "transform", "translate(" + /*$top*/
+      t = kt("div"), e = z("svg"), l = z("g"), i = z("path"), s = z("path"), o = z("path"), a = z("path"), r = z("g"), f = z("path"), _ = z("path"), m = z("path"), b = z("path"), k(i, "d", "M255.926 0.754768L509.702 139.936V221.027L255.926 81.8465V0.754768Z"), k(i, "fill", "#FF7C00"), k(i, "fill-opacity", "0.4"), k(i, "class", "svelte-43sxxs"), k(s, "d", "M509.69 139.936L254.981 279.641V361.255L509.69 221.55V139.936Z"), k(s, "fill", "#FF7C00"), k(s, "class", "svelte-43sxxs"), k(o, "d", "M0.250138 139.937L254.981 279.641V361.255L0.250138 221.55V139.937Z"), k(o, "fill", "#FF7C00"), k(o, "fill-opacity", "0.4"), k(o, "class", "svelte-43sxxs"), k(a, "d", "M255.923 0.232622L0.236328 139.936V221.55L255.923 81.8469V0.232622Z"), k(a, "fill", "#FF7C00"), k(a, "class", "svelte-43sxxs"), $(l, "transform", "translate(" + /*$top*/
       n[1][0] + "px, " + /*$top*/
-      n[1][1] + "px)"), v(f, "d", "M255.926 141.5L509.702 280.681V361.773L255.926 222.592V141.5Z"), v(f, "fill", "#FF7C00"), v(f, "fill-opacity", "0.4"), v(f, "class", "svelte-43sxxs"), v(_, "d", "M509.69 280.679L254.981 420.384V501.998L509.69 362.293V280.679Z"), v(_, "fill", "#FF7C00"), v(_, "class", "svelte-43sxxs"), v(m, "d", "M0.250138 280.681L254.981 420.386V502L0.250138 362.295V280.681Z"), v(m, "fill", "#FF7C00"), v(m, "fill-opacity", "0.4"), v(m, "class", "svelte-43sxxs"), v(c, "d", "M255.923 140.977L0.236328 280.68V362.294L255.923 222.591V140.977Z"), v(c, "fill", "#FF7C00"), v(c, "class", "svelte-43sxxs"), $(r, "transform", "translate(" + /*$bottom*/
+      n[1][1] + "px)"), k(f, "d", "M255.926 141.5L509.702 280.681V361.773L255.926 222.592V141.5Z"), k(f, "fill", "#FF7C00"), k(f, "fill-opacity", "0.4"), k(f, "class", "svelte-43sxxs"), k(_, "d", "M509.69 280.679L254.981 420.384V501.998L509.69 362.293V280.679Z"), k(_, "fill", "#FF7C00"), k(_, "class", "svelte-43sxxs"), k(m, "d", "M0.250138 280.681L254.981 420.386V502L0.250138 362.295V280.681Z"), k(m, "fill", "#FF7C00"), k(m, "fill-opacity", "0.4"), k(m, "class", "svelte-43sxxs"), k(b, "d", "M255.923 140.977L0.236328 280.68V362.294L255.923 222.591V140.977Z"), k(b, "fill", "#FF7C00"), k(b, "class", "svelte-43sxxs"), $(r, "transform", "translate(" + /*$bottom*/
       n[2][0] + "px, " + /*$bottom*/
-      n[2][1] + "px)"), v(e, "viewBox", "-1200 -1200 3000 3000"), v(e, "fill", "none"), v(e, "xmlns", "http://www.w3.org/2000/svg"), v(e, "class", "svelte-43sxxs"), v(t, "class", "svelte-43sxxs"), Le(
+      n[2][1] + "px)"), k(e, "viewBox", "-1200 -1200 3000 3000"), k(e, "fill", "none"), k(e, "xmlns", "http://www.w3.org/2000/svg"), k(e, "class", "svelte-43sxxs"), k(t, "class", "svelte-43sxxs"), Le(
         t,
         "margin",
         /*margin*/
         n[0]
       );
     },
-    m(w, y) {
-      yt(w, t, y), N(t, e), N(e, l), N(l, i), N(l, s), N(l, o), N(l, a), N(e, r), N(r, f), N(r, _), N(r, m), N(r, c);
+    m(c, v) {
+      pt(c, t, v), N(t, e), N(e, l), N(l, i), N(l, s), N(l, o), N(l, a), N(e, r), N(r, f), N(r, _), N(r, m), N(r, b);
     },
-    p(w, [y]) {
-      y & /*$top*/
+    p(c, [v]) {
+      v & /*$top*/
       2 && $(l, "transform", "translate(" + /*$top*/
-      w[1][0] + "px, " + /*$top*/
-      w[1][1] + "px)"), y & /*$bottom*/
+      c[1][0] + "px, " + /*$top*/
+      c[1][1] + "px)"), v & /*$bottom*/
       4 && $(r, "transform", "translate(" + /*$bottom*/
-      w[2][0] + "px, " + /*$bottom*/
-      w[2][1] + "px)"), y & /*margin*/
+      c[2][0] + "px, " + /*$bottom*/
+      c[2][1] + "px)"), v & /*margin*/
       1 && Le(
         t,
         "margin",
         /*margin*/
-        w[0]
+        c[0]
       );
     },
     i: Fe,
     o: Fe,
-    d(w) {
-      w && ht(t);
+    d(c) {
+      c && vt(t);
     }
   };
 }
-function Ft(n, t, e) {
+function Ct(n, t, e) {
   let l, i, { margin: s = !0 } = t;
   const o = pe([0, 0]);
-  qe(n, o, (c) => e(1, l = c));
+  qe(n, o, (b) => e(1, l = b));
   const a = pe([0, 0]);
-  qe(n, a, (c) => e(2, i = c));
+  qe(n, a, (b) => e(2, i = b));
   let r;
   async function f() {
     await Promise.all([o.set([125, 140]), a.set([-125, -140])]), await Promise.all([o.set([-125, 140]), a.set([125, -140])]), await Promise.all([o.set([-125, 0]), a.set([125, -0])]), await Promise.all([o.set([125, 0]), a.set([-125, 0])]);
@@ -272,46 +318,46 @@ function Ft(n, t, e) {
   async function m() {
     await Promise.all([o.set([125, 0]), a.set([-125, 0])]), _();
   }
-  return pt(() => (m(), () => r = !0)), n.$$set = (c) => {
-    "margin" in c && e(0, s = c.margin);
+  return Ft(() => (m(), () => r = !0)), n.$$set = (b) => {
+    "margin" in b && e(0, s = b.margin);
   }, [s, l, i, o, a];
 }
-class Lt extends gt {
+class Mt extends wt {
   constructor(t) {
-    super(), vt(this, t, Ft, qt, kt, { margin: 0 });
+    super(), yt(this, t, Ct, Lt, qt, { margin: 0 });
   }
 }
 const {
-  SvelteComponent: Ct,
+  SvelteComponent: Vt,
   append: H,
   attr: T,
   binding_callbacks: Ce,
-  check_outros: Ke,
-  create_component: Mt,
-  create_slot: Vt,
-  destroy_component: St,
-  destroy_each: Qe,
-  detach: g,
-  element: Z,
-  empty: U,
+  check_outros: Je,
+  create_component: St,
+  create_slot: Nt,
+  destroy_component: zt,
+  destroy_each: Ke,
+  detach: h,
+  element: P,
+  empty: W,
   ensure_array_like: le,
-  get_all_dirty_from_scope: Nt,
-  get_slot_changes: zt,
-  group_outros: We,
-  init: Tt,
-  insert: h,
-  mount_component: jt,
+  get_all_dirty_from_scope: Tt,
+  get_slot_changes: jt,
+  group_outros: Qe,
+  init: Pt,
+  insert: w,
+  mount_component: Zt,
   noop: oe,
-  safe_not_equal: Pt,
+  safe_not_equal: Dt,
   set_data: S,
-  set_style: D,
+  set_style: B,
   space: j,
   text: q,
   toggle_class: V,
-  transition_in: O,
-  transition_out: R,
-  update_slot_base: Zt
-} = window.__gradio__svelte__internal, { tick: Bt } = window.__gradio__svelte__internal, { onDestroy: At } = window.__gradio__svelte__internal, Dt = (n) => ({}), Me = (n) => ({});
+  transition_in: R,
+  transition_out: U,
+  update_slot_base: Et
+} = window.__gradio__svelte__internal, { tick: Bt } = window.__gradio__svelte__internal, { onDestroy: At } = window.__gradio__svelte__internal, It = (n) => ({}), Me = (n) => ({});
 function Ve(n, t, e) {
   const l = n.slice();
   return l[38] = t[e], l[40] = e, l;
@@ -320,7 +366,7 @@ function Se(n, t, e) {
   const l = n.slice();
   return l[38] = t[e], l;
 }
-function Et(n) {
+function Ht(n) {
   let t, e = (
     /*i18n*/
     n[1]("common.error") + ""
@@ -328,7 +374,7 @@ function Et(n) {
   const o = (
     /*#slots*/
     n[29].error
-  ), a = Vt(
+  ), a = Nt(
     o,
     n,
     /*$$scope*/
@@ -337,28 +383,28 @@ function Et(n) {
   );
   return {
     c() {
-      t = Z("span"), l = q(e), i = j(), a && a.c(), T(t, "class", "error svelte-1txqlrd");
+      t = P("span"), l = q(e), i = j(), a && a.c(), T(t, "class", "error svelte-1txqlrd");
     },
     m(r, f) {
-      h(r, t, f), H(t, l), h(r, i, f), a && a.m(r, f), s = !0;
+      w(r, t, f), H(t, l), w(r, i, f), a && a.m(r, f), s = !0;
     },
     p(r, f) {
       (!s || f[0] & /*i18n*/
       2) && e !== (e = /*i18n*/
       r[1]("common.error") + "") && S(l, e), a && a.p && (!s || f[0] & /*$$scope*/
-      268435456) && Zt(
+      268435456) && Et(
         a,
         o,
         r,
         /*$$scope*/
         r[28],
-        s ? zt(
+        s ? jt(
           o,
           /*$$scope*/
           r[28],
           f,
-          Dt
-        ) : Nt(
+          It
+        ) : Tt(
           /*$$scope*/
           r[28]
         ),
@@ -366,48 +412,48 @@ function Et(n) {
       );
     },
     i(r) {
-      s || (O(a, r), s = !0);
+      s || (R(a, r), s = !0);
     },
     o(r) {
-      R(a, r), s = !1;
+      U(a, r), s = !1;
     },
     d(r) {
-      r && (g(t), g(i)), a && a.d(r);
+      r && (h(t), h(i)), a && a.d(r);
     }
   };
 }
-function It(n) {
+function Xt(n) {
   let t, e, l, i, s, o, a, r, f, _ = (
     /*variant*/
     n[8] === "default" && /*show_eta_bar*/
     n[18] && /*show_progress*/
     n[6] === "full" && Ne(n)
   );
-  function m(u, k) {
+  function m(u, y) {
     if (
       /*progress*/
       u[7]
     )
-      return Yt;
+      return Ot;
     if (
       /*queue_position*/
       u[2] !== null && /*queue_size*/
       u[3] !== void 0 && /*queue_position*/
       u[2] >= 0
     )
-      return Xt;
+      return Gt;
     if (
       /*queue_position*/
       u[2] === 0
     )
-      return Ht;
+      return Yt;
   }
-  let c = m(n), w = c && c(n), y = (
+  let b = m(n), c = b && b(n), v = (
     /*timer*/
     n[5] && je(n)
   );
-  const C = [Ut, Rt], p = [];
-  function L(u, k) {
+  const C = [Jt, Wt], p = [];
+  function L(u, y) {
     return (
       /*last_progress_level*/
       u[15] != null ? 0 : (
@@ -421,7 +467,7 @@ function It(n) {
   n[5] && Ie(n);
   return {
     c() {
-      _ && _.c(), t = j(), e = Z("div"), w && w.c(), l = j(), y && y.c(), i = j(), o && o.c(), a = j(), F && F.c(), r = U(), T(e, "class", "progress-text svelte-1txqlrd"), V(
+      _ && _.c(), t = j(), e = P("div"), c && c.c(), l = j(), v && v.c(), i = j(), o && o.c(), a = j(), F && F.c(), r = W(), T(e, "class", "progress-text svelte-1txqlrd"), V(
         e,
         "meta-text-center",
         /*variant*/
@@ -433,41 +479,41 @@ function It(n) {
         n[8] === "default"
       );
     },
-    m(u, k) {
-      _ && _.m(u, k), h(u, t, k), h(u, e, k), w && w.m(e, null), H(e, l), y && y.m(e, null), h(u, i, k), ~s && p[s].m(u, k), h(u, a, k), F && F.m(u, k), h(u, r, k), f = !0;
+    m(u, y) {
+      _ && _.m(u, y), w(u, t, y), w(u, e, y), c && c.m(e, null), H(e, l), v && v.m(e, null), w(u, i, y), ~s && p[s].m(u, y), w(u, a, y), F && F.m(u, y), w(u, r, y), f = !0;
     },
-    p(u, k) {
+    p(u, y) {
       /*variant*/
       u[8] === "default" && /*show_eta_bar*/
       u[18] && /*show_progress*/
-      u[6] === "full" ? _ ? _.p(u, k) : (_ = Ne(u), _.c(), _.m(t.parentNode, t)) : _ && (_.d(1), _ = null), c === (c = m(u)) && w ? w.p(u, k) : (w && w.d(1), w = c && c(u), w && (w.c(), w.m(e, l))), /*timer*/
-      u[5] ? y ? y.p(u, k) : (y = je(u), y.c(), y.m(e, null)) : y && (y.d(1), y = null), (!f || k[0] & /*variant*/
+      u[6] === "full" ? _ ? _.p(u, y) : (_ = Ne(u), _.c(), _.m(t.parentNode, t)) : _ && (_.d(1), _ = null), b === (b = m(u)) && c ? c.p(u, y) : (c && c.d(1), c = b && b(u), c && (c.c(), c.m(e, l))), /*timer*/
+      u[5] ? v ? v.p(u, y) : (v = je(u), v.c(), v.m(e, null)) : v && (v.d(1), v = null), (!f || y[0] & /*variant*/
       256) && V(
         e,
         "meta-text-center",
         /*variant*/
         u[8] === "center"
-      ), (!f || k[0] & /*variant*/
+      ), (!f || y[0] & /*variant*/
       256) && V(
         e,
         "meta-text",
         /*variant*/
         u[8] === "default"
       );
-      let b = s;
-      s = L(u), s === b ? ~s && p[s].p(u, k) : (o && (We(), R(p[b], 1, 1, () => {
-        p[b] = null;
-      }), Ke()), ~s ? (o = p[s], o ? o.p(u, k) : (o = p[s] = C[s](u), o.c()), O(o, 1), o.m(a.parentNode, a)) : o = null), /*timer*/
-      u[5] ? F && (F.d(1), F = null) : F ? F.p(u, k) : (F = Ie(u), F.c(), F.m(r.parentNode, r));
+      let g = s;
+      s = L(u), s === g ? ~s && p[s].p(u, y) : (o && (Qe(), U(p[g], 1, 1, () => {
+        p[g] = null;
+      }), Je()), ~s ? (o = p[s], o ? o.p(u, y) : (o = p[s] = C[s](u), o.c()), R(o, 1), o.m(a.parentNode, a)) : o = null), /*timer*/
+      u[5] ? F && (F.d(1), F = null) : F ? F.p(u, y) : (F = Ie(u), F.c(), F.m(r.parentNode, r));
     },
     i(u) {
-      f || (O(o), f = !0);
+      f || (R(o), f = !0);
     },
     o(u) {
-      R(o), f = !1;
+      U(o), f = !1;
     },
     d(u) {
-      u && (g(t), g(e), g(i), g(a), g(r)), _ && _.d(u), w && w.d(), y && y.d(), ~s && p[s].d(u), F && F.d(u);
+      u && (h(t), h(e), h(i), h(a), h(r)), _ && _.d(u), c && c.d(), v && v.d(), ~s && p[s].d(u), F && F.d(u);
     }
   };
 }
@@ -476,37 +522,37 @@ function Ne(n) {
   (n[17] || 0) * 100 - 100}%)`;
   return {
     c() {
-      t = Z("div"), T(t, "class", "eta-bar svelte-1txqlrd"), D(t, "transform", e);
+      t = P("div"), T(t, "class", "eta-bar svelte-1txqlrd"), B(t, "transform", e);
     },
     m(l, i) {
-      h(l, t, i);
+      w(l, t, i);
     },
     p(l, i) {
       i[0] & /*eta_level*/
       131072 && e !== (e = `translateX(${/*eta_level*/
-      (l[17] || 0) * 100 - 100}%)`) && D(t, "transform", e);
+      (l[17] || 0) * 100 - 100}%)`) && B(t, "transform", e);
     },
     d(l) {
-      l && g(t);
+      l && h(t);
     }
   };
 }
-function Ht(n) {
+function Yt(n) {
   let t;
   return {
     c() {
       t = q("processing |");
     },
     m(e, l) {
-      h(e, t, l);
+      w(e, t, l);
     },
     p: oe,
     d(e) {
-      e && g(t);
+      e && h(t);
     }
   };
 }
-function Xt(n) {
+function Gt(n) {
   let t, e = (
     /*queue_position*/
     n[2] + 1 + ""
@@ -519,7 +565,7 @@ function Xt(n) {
       ), o = q(" |");
     },
     m(a, r) {
-      h(a, t, r), h(a, l, r), h(a, i, r), h(a, s, r), h(a, o, r);
+      w(a, t, r), w(a, l, r), w(a, i, r), w(a, s, r), w(a, o, r);
     },
     p(a, r) {
       r[0] & /*queue_position*/
@@ -532,11 +578,11 @@ function Xt(n) {
       );
     },
     d(a) {
-      a && (g(t), g(l), g(i), g(s), g(o));
+      a && (h(t), h(l), h(i), h(s), h(o));
     }
   };
 }
-function Yt(n) {
+function Ot(n) {
   let t, e = le(
     /*progress*/
     n[7]
@@ -547,12 +593,12 @@ function Yt(n) {
     c() {
       for (let i = 0; i < l.length; i += 1)
         l[i].c();
-      t = U();
+      t = W();
     },
     m(i, s) {
       for (let o = 0; o < l.length; o += 1)
         l[o] && l[o].m(i, s);
-      h(i, t, s);
+      w(i, t, s);
     },
     p(i, s) {
       if (s[0] & /*progress*/
@@ -572,7 +618,7 @@ function Yt(n) {
       }
     },
     d(i) {
-      i && g(t), Qe(l, i);
+      i && h(t), Ke(l, i);
     }
   };
 }
@@ -584,7 +630,7 @@ function ze(n) {
   function a(_, m) {
     return (
       /*p*/
-      _[38].length != null ? Ot : Gt
+      _[38].length != null ? Ut : Rt
     );
   }
   let r = a(n), f = r(n);
@@ -593,7 +639,7 @@ function ze(n) {
       f.c(), t = j(), l = q(e), i = q(" | "), o = q(s);
     },
     m(_, m) {
-      f.m(_, m), h(_, t, m), h(_, l, m), h(_, i, m), h(_, o, m);
+      f.m(_, m), w(_, t, m), w(_, l, m), w(_, i, m), w(_, o, m);
     },
     p(_, m) {
       r === (r = a(_)) && f ? f.p(_, m) : (f.d(1), f = r(_), f && (f.c(), f.m(t.parentNode, t))), m[0] & /*progress*/
@@ -601,12 +647,12 @@ function ze(n) {
       _[38].unit + "") && S(l, e);
     },
     d(_) {
-      _ && (g(t), g(l), g(i), g(o)), f.d(_);
+      _ && (h(t), h(l), h(i), h(o)), f.d(_);
     }
   };
 }
-function Gt(n) {
-  let t = Y(
+function Rt(n) {
+  let t = G(
     /*p*/
     n[38].index || 0
   ) + "", e;
@@ -615,25 +661,25 @@ function Gt(n) {
       e = q(t);
     },
     m(l, i) {
-      h(l, e, i);
+      w(l, e, i);
     },
     p(l, i) {
       i[0] & /*progress*/
-      128 && t !== (t = Y(
+      128 && t !== (t = G(
         /*p*/
         l[38].index || 0
       ) + "") && S(e, t);
     },
     d(l) {
-      l && g(e);
+      l && h(e);
     }
   };
 }
-function Ot(n) {
-  let t = Y(
+function Ut(n) {
+  let t = G(
     /*p*/
     n[38].index || 0
-  ) + "", e, l, i = Y(
+  ) + "", e, l, i = G(
     /*p*/
     n[38].length
   ) + "", s;
@@ -642,21 +688,21 @@ function Ot(n) {
       e = q(t), l = q("/"), s = q(i);
     },
     m(o, a) {
-      h(o, e, a), h(o, l, a), h(o, s, a);
+      w(o, e, a), w(o, l, a), w(o, s, a);
     },
     p(o, a) {
       a[0] & /*progress*/
-      128 && t !== (t = Y(
+      128 && t !== (t = G(
         /*p*/
         o[38].index || 0
       ) + "") && S(e, t), a[0] & /*progress*/
-      128 && i !== (i = Y(
+      128 && i !== (i = G(
         /*p*/
         o[38].length
       ) + "") && S(s, i);
     },
     d(o) {
-      o && (g(e), g(l), g(s));
+      o && (h(e), h(l), h(s));
     }
   };
 }
@@ -667,17 +713,17 @@ function Te(n) {
   );
   return {
     c() {
-      e && e.c(), t = U();
+      e && e.c(), t = W();
     },
     m(l, i) {
-      e && e.m(l, i), h(l, t, i);
+      e && e.m(l, i), w(l, t, i);
     },
     p(l, i) {
       /*p*/
       l[38].index != null ? e ? e.p(l, i) : (e = ze(l), e.c(), e.m(t.parentNode, t)) : e && (e.d(1), e = null);
     },
     d(l) {
-      l && g(t), e && e.d(l);
+      l && h(t), e && e.d(l);
     }
   };
 }
@@ -695,7 +741,7 @@ function je(n) {
       ), l = q(e), i = q("s");
     },
     m(s, o) {
-      h(s, t, o), h(s, l, o), h(s, i, o);
+      w(s, t, o), w(s, l, o), w(s, i, o);
     },
     p(s, o) {
       o[0] & /*formatted_timer*/
@@ -709,23 +755,23 @@ function je(n) {
       s[19]}` : "") && S(l, e);
     },
     d(s) {
-      s && (g(t), g(l), g(i));
+      s && (h(t), h(l), h(i));
     }
   };
 }
-function Rt(n) {
+function Wt(n) {
   let t, e;
-  return t = new Lt({
+  return t = new Mt({
     props: { margin: (
       /*variant*/
       n[8] === "default"
     ) }
   }), {
     c() {
-      Mt(t.$$.fragment);
+      St(t.$$.fragment);
     },
     m(l, i) {
-      jt(t, l, i), e = !0;
+      Zt(t, l, i), e = !0;
     },
     p(l, i) {
       const s = {};
@@ -734,17 +780,17 @@ function Rt(n) {
       l[8] === "default"), t.$set(s);
     },
     i(l) {
-      e || (O(t.$$.fragment, l), e = !0);
+      e || (R(t.$$.fragment, l), e = !0);
     },
     o(l) {
-      R(t.$$.fragment, l), e = !1;
+      U(t.$$.fragment, l), e = !1;
     },
     d(l) {
-      St(t, l);
+      zt(t, l);
     }
   };
 }
-function Ut(n) {
+function Jt(n) {
   let t, e, l, i, s, o = `${/*last_progress_level*/
   n[15] * 100}%`, a = (
     /*progress*/
@@ -752,21 +798,21 @@ function Ut(n) {
   );
   return {
     c() {
-      t = Z("div"), e = Z("div"), a && a.c(), l = j(), i = Z("div"), s = Z("div"), T(e, "class", "progress-level-inner svelte-1txqlrd"), T(s, "class", "progress-bar svelte-1txqlrd"), D(s, "width", o), T(i, "class", "progress-bar-wrap svelte-1txqlrd"), T(t, "class", "progress-level svelte-1txqlrd");
+      t = P("div"), e = P("div"), a && a.c(), l = j(), i = P("div"), s = P("div"), T(e, "class", "progress-level-inner svelte-1txqlrd"), T(s, "class", "progress-bar svelte-1txqlrd"), B(s, "width", o), T(i, "class", "progress-bar-wrap svelte-1txqlrd"), T(t, "class", "progress-level svelte-1txqlrd");
     },
     m(r, f) {
-      h(r, t, f), H(t, e), a && a.m(e, null), H(t, l), H(t, i), H(i, s), n[30](s);
+      w(r, t, f), H(t, e), a && a.m(e, null), H(t, l), H(t, i), H(i, s), n[30](s);
     },
     p(r, f) {
       /*progress*/
       r[7] != null ? a ? a.p(r, f) : (a = Pe(r), a.c(), a.m(e, null)) : a && (a.d(1), a = null), f[0] & /*last_progress_level*/
       32768 && o !== (o = `${/*last_progress_level*/
-      r[15] * 100}%`) && D(s, "width", o);
+      r[15] * 100}%`) && B(s, "width", o);
     },
     i: oe,
     o: oe,
     d(r) {
-      r && g(t), a && a.d(), n[30](null);
+      r && h(t), a && a.d(), n[30](null);
     }
   };
 }
@@ -776,17 +822,17 @@ function Pe(n) {
     n[7]
   ), l = [];
   for (let i = 0; i < e.length; i += 1)
-    l[i] = Ee(Ve(n, e, i));
+    l[i] = Ae(Ve(n, e, i));
   return {
     c() {
       for (let i = 0; i < l.length; i += 1)
         l[i].c();
-      t = U();
+      t = W();
     },
     m(i, s) {
       for (let o = 0; o < l.length; o += 1)
         l[o] && l[o].m(i, s);
-      h(i, t, s);
+      w(i, t, s);
     },
     p(i, s) {
       if (s[0] & /*progress_level, progress*/
@@ -798,7 +844,7 @@ function Pe(n) {
         let o;
         for (o = 0; o < e.length; o += 1) {
           const a = Ve(i, e, o);
-          l[o] ? l[o].p(a, s) : (l[o] = Ee(a), l[o].c(), l[o].m(t.parentNode, t));
+          l[o] ? l[o].p(a, s) : (l[o] = Ae(a), l[o].c(), l[o].m(t.parentNode, t));
         }
         for (; o < l.length; o += 1)
           l[o].d(1);
@@ -806,17 +852,17 @@ function Pe(n) {
       }
     },
     d(i) {
-      i && g(t), Qe(l, i);
+      i && h(t), Ke(l, i);
     }
   };
 }
 function Ze(n) {
   let t, e, l, i, s = (
     /*i*/
-    n[40] !== 0 && Jt()
+    n[40] !== 0 && Kt()
   ), o = (
     /*p*/
-    n[38].desc != null && Be(n)
+    n[38].desc != null && De(n)
   ), a = (
     /*p*/
     n[38].desc != null && /*progress_level*/
@@ -824,49 +870,49 @@ function Ze(n) {
     n[14][
       /*i*/
       n[40]
-    ] != null && Ae()
+    ] != null && Ee()
   ), r = (
     /*progress_level*/
-    n[14] != null && De(n)
+    n[14] != null && Be(n)
   );
   return {
     c() {
-      s && s.c(), t = j(), o && o.c(), e = j(), a && a.c(), l = j(), r && r.c(), i = U();
+      s && s.c(), t = j(), o && o.c(), e = j(), a && a.c(), l = j(), r && r.c(), i = W();
     },
     m(f, _) {
-      s && s.m(f, _), h(f, t, _), o && o.m(f, _), h(f, e, _), a && a.m(f, _), h(f, l, _), r && r.m(f, _), h(f, i, _);
+      s && s.m(f, _), w(f, t, _), o && o.m(f, _), w(f, e, _), a && a.m(f, _), w(f, l, _), r && r.m(f, _), w(f, i, _);
     },
     p(f, _) {
       /*p*/
-      f[38].desc != null ? o ? o.p(f, _) : (o = Be(f), o.c(), o.m(e.parentNode, e)) : o && (o.d(1), o = null), /*p*/
+      f[38].desc != null ? o ? o.p(f, _) : (o = De(f), o.c(), o.m(e.parentNode, e)) : o && (o.d(1), o = null), /*p*/
       f[38].desc != null && /*progress_level*/
       f[14] && /*progress_level*/
       f[14][
         /*i*/
         f[40]
-      ] != null ? a || (a = Ae(), a.c(), a.m(l.parentNode, l)) : a && (a.d(1), a = null), /*progress_level*/
-      f[14] != null ? r ? r.p(f, _) : (r = De(f), r.c(), r.m(i.parentNode, i)) : r && (r.d(1), r = null);
+      ] != null ? a || (a = Ee(), a.c(), a.m(l.parentNode, l)) : a && (a.d(1), a = null), /*progress_level*/
+      f[14] != null ? r ? r.p(f, _) : (r = Be(f), r.c(), r.m(i.parentNode, i)) : r && (r.d(1), r = null);
     },
     d(f) {
-      f && (g(t), g(e), g(l), g(i)), s && s.d(f), o && o.d(f), a && a.d(f), r && r.d(f);
+      f && (h(t), h(e), h(l), h(i)), s && s.d(f), o && o.d(f), a && a.d(f), r && r.d(f);
     }
   };
 }
-function Jt(n) {
+function Kt(n) {
   let t;
   return {
     c() {
       t = q(" /");
     },
     m(e, l) {
-      h(e, t, l);
+      w(e, t, l);
     },
     d(e) {
-      e && g(t);
+      e && h(t);
     }
   };
 }
-function Be(n) {
+function De(n) {
   let t = (
     /*p*/
     n[38].desc + ""
@@ -876,7 +922,7 @@ function Be(n) {
       e = q(t);
     },
     m(l, i) {
-      h(l, e, i);
+      w(l, e, i);
     },
     p(l, i) {
       i[0] & /*progress*/
@@ -884,25 +930,25 @@ function Be(n) {
       l[38].desc + "") && S(e, t);
     },
     d(l) {
-      l && g(e);
+      l && h(e);
     }
   };
 }
-function Ae(n) {
+function Ee(n) {
   let t;
   return {
     c() {
       t = q("-");
     },
     m(e, l) {
-      h(e, t, l);
+      w(e, t, l);
     },
     d(e) {
-      e && g(t);
+      e && h(t);
     }
   };
 }
-function De(n) {
+function Be(n) {
   let t = (100 * /*progress_level*/
   (n[14][
     /*i*/
@@ -913,7 +959,7 @@ function De(n) {
       e = q(t), l = q("%");
     },
     m(i, s) {
-      h(i, e, s), h(i, l, s);
+      w(i, e, s), w(i, l, s);
     },
     p(i, s) {
       s[0] & /*progress_level*/
@@ -924,11 +970,11 @@ function De(n) {
       ] || 0)).toFixed(1) + "") && S(e, t);
     },
     d(i) {
-      i && (g(e), g(l));
+      i && (h(e), h(l));
     }
   };
 }
-function Ee(n) {
+function Ae(n) {
   let t, e = (
     /*p*/
     (n[38].desc != null || /*progress_level*/
@@ -940,10 +986,10 @@ function Ee(n) {
   );
   return {
     c() {
-      e && e.c(), t = U();
+      e && e.c(), t = W();
     },
     m(l, i) {
-      e && e.m(l, i), h(l, t, i);
+      e && e.m(l, i), w(l, t, i);
     },
     p(l, i) {
       /*p*/
@@ -955,7 +1001,7 @@ function Ee(n) {
       ] != null ? e ? e.p(l, i) : (e = Ze(l), e.c(), e.m(t.parentNode, t)) : e && (e.d(1), e = null);
     },
     d(l) {
-      l && g(t), e && e.d(l);
+      l && h(t), e && e.d(l);
     }
   };
 }
@@ -963,13 +1009,13 @@ function Ie(n) {
   let t, e;
   return {
     c() {
-      t = Z("p"), e = q(
+      t = P("p"), e = q(
         /*loading_text*/
         n[9]
       ), T(t, "class", "loading svelte-1txqlrd");
     },
     m(l, i) {
-      h(l, t, i), H(t, e);
+      w(l, t, i), H(t, e);
     },
     p(l, i) {
       i[0] & /*loading_text*/
@@ -980,13 +1026,13 @@ function Ie(n) {
       );
     },
     d(l) {
-      l && g(t);
+      l && h(t);
     }
   };
 }
-function Kt(n) {
+function Qt(n) {
   let t, e, l, i, s;
-  const o = [It, Et], a = [];
+  const o = [Xt, Ht], a = [];
   function r(f, _) {
     return (
       /*status*/
@@ -998,7 +1044,7 @@ function Kt(n) {
   }
   return ~(e = r(n)) && (l = a[e] = o[e](n)), {
     c() {
-      t = Z("div"), l && l.c(), T(t, "class", i = "wrap " + /*variant*/
+      t = P("div"), l && l.c(), T(t, "class", i = "wrap " + /*variant*/
       n[8] + " " + /*show_progress*/
       n[6] + " svelte-1txqlrd"), V(t, "hide", !/*status*/
       n[4] || /*status*/
@@ -1022,12 +1068,12 @@ function Kt(n) {
         "border",
         /*border*/
         n[12]
-      ), D(
+      ), B(
         t,
         "position",
         /*absolute*/
         n[10] ? "absolute" : "static"
-      ), D(
+      ), B(
         t,
         "padding",
         /*absolute*/
@@ -1035,13 +1081,13 @@ function Kt(n) {
       );
     },
     m(f, _) {
-      h(f, t, _), ~e && a[e].m(t, null), n[31](t), s = !0;
+      w(f, t, _), ~e && a[e].m(t, null), n[31](t), s = !0;
     },
     p(f, _) {
       let m = e;
-      e = r(f), e === m ? ~e && a[e].p(f, _) : (l && (We(), R(a[m], 1, 1, () => {
+      e = r(f), e === m ? ~e && a[e].p(f, _) : (l && (Qe(), U(a[m], 1, 1, () => {
         a[m] = null;
-      }), Ke()), ~e ? (l = a[e], l ? l.p(f, _) : (l = a[e] = o[e](f), l.c()), O(l, 1), l.m(t, null)) : l = null), (!s || _[0] & /*variant, show_progress*/
+      }), Je()), ~e ? (l = a[e], l ? l.p(f, _) : (l = a[e] = o[e](f), l.c()), R(l, 1), l.m(t, null)) : l = null), (!s || _[0] & /*variant, show_progress*/
       320 && i !== (i = "wrap " + /*variant*/
       f[8] + " " + /*show_progress*/
       f[6] + " svelte-1txqlrd")) && T(t, "class", i), (!s || _[0] & /*variant, show_progress, status, show_progress*/
@@ -1071,13 +1117,13 @@ function Kt(n) {
         /*border*/
         f[12]
       ), _[0] & /*absolute*/
-      1024 && D(
+      1024 && B(
         t,
         "position",
         /*absolute*/
         f[10] ? "absolute" : "static"
       ), _[0] & /*absolute*/
-      1024 && D(
+      1024 && B(
         t,
         "padding",
         /*absolute*/
@@ -1085,18 +1131,18 @@ function Kt(n) {
       );
     },
     i(f) {
-      s || (O(l), s = !0);
+      s || (R(l), s = !0);
     },
     o(f) {
-      R(l), s = !1;
+      U(l), s = !1;
     },
     d(f) {
-      f && g(t), ~e && a[e].d(), n[31](null);
+      f && h(t), ~e && a[e].d(), n[31](null);
     }
   };
 }
 let ee = [], fe = !1;
-async function Qt(n, t = !0) {
+async function xt(n, t = !0) {
   if (!(window.__gradio_mode__ === "website" || window.__gradio_mode__ !== "app" && t !== !0)) {
     if (ee.push(n), !fe)
       fe = !0;
@@ -1112,18 +1158,18 @@ async function Qt(n, t = !0) {
     });
   }
 }
-function Wt(n, t, e) {
-  let l, { $$slots: i = {}, $$scope: s } = t, { i18n: o } = t, { eta: a = null } = t, { queue: r = !1 } = t, { queue_position: f } = t, { queue_size: _ } = t, { status: m } = t, { scroll_to_output: c = !1 } = t, { timer: w = !0 } = t, { show_progress: y = "full" } = t, { message: C = null } = t, { progress: p = null } = t, { variant: L = "default" } = t, { loading_text: F = "Loading..." } = t, { absolute: u = !0 } = t, { translucent: k = !1 } = t, { border: b = !1 } = t, { autoscroll: ne } = t, J, K = !1, W = 0, E = 0, ie = null, de = 0, I = null, Q, B = null, me = !0;
+function $t(n, t, e) {
+  let l, { $$slots: i = {}, $$scope: s } = t, { i18n: o } = t, { eta: a = null } = t, { queue: r = !1 } = t, { queue_position: f } = t, { queue_size: _ } = t, { status: m } = t, { scroll_to_output: b = !1 } = t, { timer: c = !0 } = t, { show_progress: v = "full" } = t, { message: C = null } = t, { progress: p = null } = t, { variant: L = "default" } = t, { loading_text: F = "Loading..." } = t, { absolute: u = !0 } = t, { translucent: y = !1 } = t, { border: g = !1 } = t, { autoscroll: ne } = t, J, K = !1, x = 0, A = 0, ie = null, de = 0, I = null, Q, Z = null, me = !0;
   const et = () => {
-    e(25, W = performance.now()), e(26, E = 0), K = !0, be();
+    e(25, x = performance.now()), e(26, A = 0), K = !0, be();
   };
   function be() {
     requestAnimationFrame(() => {
-      e(26, E = (performance.now() - W) / 1e3), K && be();
+      e(26, A = (performance.now() - x) / 1e3), K && be();
     });
   }
   function ge() {
-    e(26, E = 0), K && (K = !1);
+    e(26, A = 0), K && (K = !1);
   }
   At(() => {
     K && ge();
@@ -1131,7 +1177,7 @@ function Wt(n, t, e) {
   let he = null;
   function tt(d) {
     Ce[d ? "unshift" : "push"](() => {
-      B = d, e(16, B), e(7, p), e(14, I), e(15, Q);
+      Z = d, e(16, Z), e(7, p), e(14, I), e(15, Q);
     });
   }
   function lt(d) {
@@ -1140,50 +1186,50 @@ function Wt(n, t, e) {
     });
   }
   return n.$$set = (d) => {
-    "i18n" in d && e(1, o = d.i18n), "eta" in d && e(0, a = d.eta), "queue" in d && e(21, r = d.queue), "queue_position" in d && e(2, f = d.queue_position), "queue_size" in d && e(3, _ = d.queue_size), "status" in d && e(4, m = d.status), "scroll_to_output" in d && e(22, c = d.scroll_to_output), "timer" in d && e(5, w = d.timer), "show_progress" in d && e(6, y = d.show_progress), "message" in d && e(23, C = d.message), "progress" in d && e(7, p = d.progress), "variant" in d && e(8, L = d.variant), "loading_text" in d && e(9, F = d.loading_text), "absolute" in d && e(10, u = d.absolute), "translucent" in d && e(11, k = d.translucent), "border" in d && e(12, b = d.border), "autoscroll" in d && e(24, ne = d.autoscroll), "$$scope" in d && e(28, s = d.$$scope);
+    "i18n" in d && e(1, o = d.i18n), "eta" in d && e(0, a = d.eta), "queue" in d && e(21, r = d.queue), "queue_position" in d && e(2, f = d.queue_position), "queue_size" in d && e(3, _ = d.queue_size), "status" in d && e(4, m = d.status), "scroll_to_output" in d && e(22, b = d.scroll_to_output), "timer" in d && e(5, c = d.timer), "show_progress" in d && e(6, v = d.show_progress), "message" in d && e(23, C = d.message), "progress" in d && e(7, p = d.progress), "variant" in d && e(8, L = d.variant), "loading_text" in d && e(9, F = d.loading_text), "absolute" in d && e(10, u = d.absolute), "translucent" in d && e(11, y = d.translucent), "border" in d && e(12, g = d.border), "autoscroll" in d && e(24, ne = d.autoscroll), "$$scope" in d && e(28, s = d.$$scope);
   }, n.$$.update = () => {
     n.$$.dirty[0] & /*eta, old_eta, queue, timer_start*/
-    169869313 && (a === null ? e(0, a = ie) : r && e(0, a = (performance.now() - W) / 1e3 + a), a != null && (e(19, he = a.toFixed(1)), e(27, ie = a))), n.$$.dirty[0] & /*eta, timer_diff*/
-    67108865 && e(17, de = a === null || a <= 0 || !E ? null : Math.min(E / a, 1)), n.$$.dirty[0] & /*progress*/
+    169869313 && (a === null ? e(0, a = ie) : r && e(0, a = (performance.now() - x) / 1e3 + a), a != null && (e(19, he = a.toFixed(1)), e(27, ie = a))), n.$$.dirty[0] & /*eta, timer_diff*/
+    67108865 && e(17, de = a === null || a <= 0 || !A ? null : Math.min(A / a, 1)), n.$$.dirty[0] & /*progress*/
     128 && p != null && e(18, me = !1), n.$$.dirty[0] & /*progress, progress_level, progress_bar, last_progress_level*/
     114816 && (p != null ? e(14, I = p.map((d) => {
       if (d.index != null && d.length != null)
         return d.index / d.length;
       if (d.progress != null)
         return d.progress;
-    })) : e(14, I = null), I ? (e(15, Q = I[I.length - 1]), B && (Q === 0 ? e(16, B.style.transition = "0", B) : e(16, B.style.transition = "150ms", B))) : e(15, Q = void 0)), n.$$.dirty[0] & /*status*/
+    })) : e(14, I = null), I ? (e(15, Q = I[I.length - 1]), Z && (Q === 0 ? e(16, Z.style.transition = "0", Z) : e(16, Z.style.transition = "150ms", Z))) : e(15, Q = void 0)), n.$$.dirty[0] & /*status*/
     16 && (m === "pending" ? et() : ge()), n.$$.dirty[0] & /*el, scroll_to_output, status, autoscroll*/
-    20979728 && J && c && (m === "pending" || m === "complete") && Qt(J, ne), n.$$.dirty[0] & /*status, message*/
+    20979728 && J && b && (m === "pending" || m === "complete") && xt(J, ne), n.$$.dirty[0] & /*status, message*/
     8388624, n.$$.dirty[0] & /*timer_diff*/
-    67108864 && e(20, l = E.toFixed(1));
+    67108864 && e(20, l = A.toFixed(1));
   }, [
     a,
     o,
     f,
     _,
     m,
-    w,
-    y,
+    c,
+    v,
     p,
     L,
     F,
     u,
-    k,
-    b,
+    y,
+    g,
     J,
     I,
     Q,
-    B,
+    Z,
     de,
     me,
     he,
     l,
     r,
-    c,
+    b,
     C,
     ne,
-    W,
-    E,
+    x,
+    A,
     ie,
     s,
     i,
@@ -1191,14 +1237,14 @@ function Wt(n, t, e) {
     lt
   ];
 }
-class xt extends Ct {
+class el extends Vt {
   constructor(t) {
-    super(), Tt(
+    super(), Pt(
       this,
       t,
-      Wt,
-      Kt,
-      Pt,
+      $t,
+      Qt,
+      Dt,
       {
         i18n: 1,
         eta: 0,
@@ -1224,30 +1270,30 @@ class xt extends Ct {
   }
 }
 const {
-  SvelteComponent: $t,
-  assign: el,
-  create_slot: tl,
-  detach: ll,
-  element: nl,
-  get_all_dirty_from_scope: il,
-  get_slot_changes: fl,
-  get_spread_update: sl,
-  init: ol,
-  insert: al,
-  safe_not_equal: rl,
+  SvelteComponent: tl,
+  assign: ll,
+  create_slot: nl,
+  detach: il,
+  element: fl,
+  get_all_dirty_from_scope: sl,
+  get_slot_changes: ol,
+  get_spread_update: al,
+  init: rl,
+  insert: _l,
+  safe_not_equal: cl,
   set_dynamic_element_data: He,
   set_style: M,
-  toggle_class: A,
+  toggle_class: E,
   transition_in: xe,
   transition_out: $e,
-  update_slot_base: _l
+  update_slot_base: ul
 } = window.__gradio__svelte__internal;
-function ul(n) {
+function dl(n) {
   let t, e, l;
   const i = (
     /*#slots*/
     n[17].default
-  ), s = tl(
+  ), s = nl(
     i,
     n,
     /*$$scope*/
@@ -1269,31 +1315,31 @@ function ul(n) {
     }
   ], a = {};
   for (let r = 0; r < o.length; r += 1)
-    a = el(a, o[r]);
+    a = ll(a, o[r]);
   return {
     c() {
-      t = nl(
+      t = fl(
         /*tag*/
         n[14]
       ), s && s.c(), He(
         /*tag*/
         n[14]
-      )(t, a), A(
+      )(t, a), E(
         t,
         "hidden",
         /*visible*/
         n[10] === !1
-      ), A(
+      ), E(
         t,
         "padded",
         /*padding*/
         n[6]
-      ), A(
+      ), E(
         t,
         "border_focus",
         /*border_mode*/
         n[5] === "focus"
-      ), A(t, "hide-container", !/*explicit_call*/
+      ), E(t, "hide-container", !/*explicit_call*/
       n[8] && !/*container*/
       n[9]), M(t, "height", typeof /*height*/
       n[0] == "number" ? (
@@ -1320,23 +1366,23 @@ function ul(n) {
       n[13]}px, 100%))`), M(t, "border-width", "var(--block-border-width)");
     },
     m(r, f) {
-      al(r, t, f), s && s.m(t, null), l = !0;
+      _l(r, t, f), s && s.m(t, null), l = !0;
     },
     p(r, f) {
       s && s.p && (!l || f & /*$$scope*/
-      65536) && _l(
+      65536) && ul(
         s,
         i,
         r,
         /*$$scope*/
         r[16],
-        l ? fl(
+        l ? ol(
           i,
           /*$$scope*/
           r[16],
           f,
           null
-        ) : il(
+        ) : sl(
           /*$$scope*/
           r[16]
         ),
@@ -1344,7 +1390,7 @@ function ul(n) {
       ), He(
         /*tag*/
         r[14]
-      )(t, a = sl(o, [
+      )(t, a = al(o, [
         (!l || f & /*test_id*/
         128) && { "data-testid": (
           /*test_id*/
@@ -1358,22 +1404,22 @@ function ul(n) {
         (!l || f & /*elem_classes*/
         8 && e !== (e = "block " + /*elem_classes*/
         r[3].join(" ") + " svelte-1t38q2d")) && { class: e }
-      ])), A(
+      ])), E(
         t,
         "hidden",
         /*visible*/
         r[10] === !1
-      ), A(
+      ), E(
         t,
         "padded",
         /*padding*/
         r[6]
-      ), A(
+      ), E(
         t,
         "border_focus",
         /*border_mode*/
         r[5] === "focus"
-      ), A(t, "hide-container", !/*explicit_call*/
+      ), E(t, "hide-container", !/*explicit_call*/
       r[8] && !/*container*/
       r[9]), f & /*height*/
       1 && M(t, "height", typeof /*height*/
@@ -1412,14 +1458,14 @@ function ul(n) {
       $e(s, r), l = !1;
     },
     d(r) {
-      r && ll(t), s && s.d(r);
+      r && il(t), s && s.d(r);
     }
   };
 }
-function cl(n) {
+function ml(n) {
   let t, e = (
     /*tag*/
-    n[14] && ul(n)
+    n[14] && dl(n)
   );
   return {
     c() {
@@ -1443,10 +1489,10 @@ function cl(n) {
     }
   };
 }
-function dl(n, t, e) {
-  let { $$slots: l = {}, $$scope: i } = t, { height: s = void 0 } = t, { width: o = void 0 } = t, { elem_id: a = "" } = t, { elem_classes: r = [] } = t, { variant: f = "solid" } = t, { border_mode: _ = "base" } = t, { padding: m = !0 } = t, { type: c = "normal" } = t, { test_id: w = void 0 } = t, { explicit_call: y = !1 } = t, { container: C = !0 } = t, { visible: p = !0 } = t, { allow_overflow: L = !0 } = t, { scale: F = null } = t, { min_width: u = 0 } = t, k = c === "fieldset" ? "fieldset" : "div";
-  return n.$$set = (b) => {
-    "height" in b && e(0, s = b.height), "width" in b && e(1, o = b.width), "elem_id" in b && e(2, a = b.elem_id), "elem_classes" in b && e(3, r = b.elem_classes), "variant" in b && e(4, f = b.variant), "border_mode" in b && e(5, _ = b.border_mode), "padding" in b && e(6, m = b.padding), "type" in b && e(15, c = b.type), "test_id" in b && e(7, w = b.test_id), "explicit_call" in b && e(8, y = b.explicit_call), "container" in b && e(9, C = b.container), "visible" in b && e(10, p = b.visible), "allow_overflow" in b && e(11, L = b.allow_overflow), "scale" in b && e(12, F = b.scale), "min_width" in b && e(13, u = b.min_width), "$$scope" in b && e(16, i = b.$$scope);
+function bl(n, t, e) {
+  let { $$slots: l = {}, $$scope: i } = t, { height: s = void 0 } = t, { width: o = void 0 } = t, { elem_id: a = "" } = t, { elem_classes: r = [] } = t, { variant: f = "solid" } = t, { border_mode: _ = "base" } = t, { padding: m = !0 } = t, { type: b = "normal" } = t, { test_id: c = void 0 } = t, { explicit_call: v = !1 } = t, { container: C = !0 } = t, { visible: p = !0 } = t, { allow_overflow: L = !0 } = t, { scale: F = null } = t, { min_width: u = 0 } = t, y = b === "fieldset" ? "fieldset" : "div";
+  return n.$$set = (g) => {
+    "height" in g && e(0, s = g.height), "width" in g && e(1, o = g.width), "elem_id" in g && e(2, a = g.elem_id), "elem_classes" in g && e(3, r = g.elem_classes), "variant" in g && e(4, f = g.variant), "border_mode" in g && e(5, _ = g.border_mode), "padding" in g && e(6, m = g.padding), "type" in g && e(15, b = g.type), "test_id" in g && e(7, c = g.test_id), "explicit_call" in g && e(8, v = g.explicit_call), "container" in g && e(9, C = g.container), "visible" in g && e(10, p = g.visible), "allow_overflow" in g && e(11, L = g.allow_overflow), "scale" in g && e(12, F = g.scale), "min_width" in g && e(13, u = g.min_width), "$$scope" in g && e(16, i = g.$$scope);
   }, [
     s,
     o,
@@ -1455,22 +1501,22 @@ function dl(n, t, e) {
     f,
     _,
     m,
-    w,
-    y,
+    c,
+    v,
     C,
     p,
     L,
     F,
     u,
-    k,
-    c,
+    y,
+    b,
     i,
     l
   ];
 }
-class ml extends $t {
+class gl extends tl {
   constructor(t) {
-    super(), ol(this, t, dl, cl, rl, {
+    super(), rl(this, t, bl, ml, cl, {
       height: 0,
       width: 1,
       elem_id: 2,
@@ -1489,7 +1535,7 @@ class ml extends $t {
     });
   }
 }
-const bl = [
+const hl = [
   { color: "red", primary: 600, secondary: 100 },
   { color: "green", primary: 600, secondary: 100 },
   { color: "blue", primary: 600, secondary: 100 },
@@ -1793,7 +1839,7 @@ const bl = [
     950: "#4c0519"
   }
 };
-bl.reduce(
+hl.reduce(
   (n, { color: t, primary: e, secondary: l }) => ({
     ...n,
     [t]: {
@@ -1804,49 +1850,49 @@ bl.reduce(
   {}
 );
 const {
-  SvelteComponent: gl,
-  assign: hl,
-  attr: wl,
+  SvelteComponent: wl,
+  assign: vl,
+  attr: kl,
   create_component: ae,
   destroy_component: re,
   detach: Ye,
-  element: vl,
-  get_spread_object: yl,
-  get_spread_update: kl,
-  init: pl,
+  element: yl,
+  get_spread_object: pl,
+  get_spread_update: ql,
+  init: Fl,
   insert: Ge,
   mount_component: _e,
-  safe_not_equal: ql,
-  space: Fl,
+  safe_not_equal: Ll,
+  space: Cl,
   toggle_class: Oe,
-  transition_in: ue,
-  transition_out: ce
+  transition_in: ce,
+  transition_out: ue
 } = window.__gradio__svelte__internal;
-function Ll(n) {
+function Ml(n) {
   var r;
   let t, e, l, i, s;
   const o = [
     { autoscroll: (
       /*gradio*/
-      n[6].autoscroll
+      n[7].autoscroll
     ) },
     { i18n: (
       /*gradio*/
-      n[6].i18n
+      n[7].i18n
     ) },
     /*loading_status*/
-    n[5],
+    n[6],
     { variant: "center" }
   ];
   let a = {};
   for (let f = 0; f < o.length; f += 1)
-    a = hl(a, o[f]);
-  return t = new xt({ props: a }), i = new ct({
+    a = vl(a, o[f]);
+  return t = new el({ props: a }), i = new mt({
     props: {
       min_height: (
         /*loading_status*/
-        n[5] && /*loading_status*/
-        ((r = n[5]) == null ? void 0 : r.status) !== "complete"
+        n[6] && /*loading_status*/
+        ((r = n[6]) == null ? void 0 : r.status) !== "complete"
       ),
       value: (
         /*value*/
@@ -1863,81 +1909,87 @@ function Ll(n) {
       height: (
         /*height*/
         n[4]
+      ),
+      width: (
+        /*width*/
+        n[5]
       )
     }
   }), i.$on(
     "change",
     /*change_handler*/
-    n[8]
+    n[9]
   ), {
     c() {
       var f;
-      ae(t.$$.fragment), e = Fl(), l = vl("div"), ae(i.$$.fragment), wl(l, "class", "svelte-gqsrr7"), Oe(
+      ae(t.$$.fragment), e = Cl(), l = yl("div"), ae(i.$$.fragment), kl(l, "class", "svelte-gqsrr7"), Oe(
         l,
         "pending",
         /*loading_status*/
-        ((f = n[5]) == null ? void 0 : f.status) === "pending"
+        ((f = n[6]) == null ? void 0 : f.status) === "pending"
       );
     },
     m(f, _) {
       _e(t, f, _), Ge(f, e, _), Ge(f, l, _), _e(i, l, null), s = !0;
     },
     p(f, _) {
-      var w, y;
+      var c, v;
       const m = _ & /*gradio, loading_status*/
-      96 ? kl(o, [
+      192 ? ql(o, [
         _ & /*gradio*/
-        64 && { autoscroll: (
+        128 && { autoscroll: (
           /*gradio*/
-          f[6].autoscroll
+          f[7].autoscroll
         ) },
         _ & /*gradio*/
-        64 && { i18n: (
+        128 && { i18n: (
           /*gradio*/
-          f[6].i18n
+          f[7].i18n
         ) },
         _ & /*loading_status*/
-        32 && yl(
+        64 && pl(
           /*loading_status*/
-          f[5]
+          f[6]
         ),
         o[3]
       ]) : {};
       t.$set(m);
-      const c = {};
+      const b = {};
       _ & /*loading_status*/
-      32 && (c.min_height = /*loading_status*/
-      f[5] && /*loading_status*/
-      ((w = f[5]) == null ? void 0 : w.status) !== "complete"), _ & /*value*/
-      8 && (c.value = /*value*/
+      64 && (b.min_height = /*loading_status*/
+      f[6] && /*loading_status*/
+      ((c = f[6]) == null ? void 0 : c.status) !== "complete"), _ & /*value*/
+      8 && (b.value = /*value*/
       f[3]), _ & /*elem_classes*/
-      2 && (c.elem_classes = /*elem_classes*/
+      2 && (b.elem_classes = /*elem_classes*/
       f[1]), _ & /*visible*/
-      4 && (c.visible = /*visible*/
+      4 && (b.visible = /*visible*/
       f[2]), _ & /*height*/
-      16 && (c.height = /*height*/
-      f[4]), i.$set(c), (!s || _ & /*loading_status*/
-      32) && Oe(
+      16 && (b.height = /*height*/
+      f[4]), _ & /*width*/
+      32 && (b.width = /*width*/
+      f[5]), i.$set(b), (!s || _ & /*loading_status*/
+      64) && Oe(
         l,
         "pending",
         /*loading_status*/
-        ((y = f[5]) == null ? void 0 : y.status) === "pending"
+        ((v = f[6]) == null ? void 0 : v.status) === "pending"
       );
     },
     i(f) {
-      s || (ue(t.$$.fragment, f), ue(i.$$.fragment, f), s = !0);
+      s || (ce(t.$$.fragment, f), ce(i.$$.fragment, f), s = !0);
     },
     o(f) {
-      ce(t.$$.fragment, f), ce(i.$$.fragment, f), s = !1;
+      ue(t.$$.fragment, f), ue(i.$$.fragment, f), s = !1;
     },
     d(f) {
       f && (Ye(e), Ye(l)), re(t, f), re(i);
     }
   };
 }
-function Cl(n) {
+function Vl(n) {
   let t, e;
-  return t = new ml({
+  return t = new gl({
     props: {
       visible: (
         /*visible*/
@@ -1952,7 +2004,7 @@ function Cl(n) {
         n[1]
       ),
       container: !1,
-      $$slots: { default: [Ll] },
+      $$slots: { default: [Ml] },
       $$scope: { ctx: n }
     }
   }), {
@@ -1970,28 +2022,28 @@ function Cl(n) {
       1 && (s.elem_id = /*elem_id*/
       l[0]), i & /*elem_classes*/
       2 && (s.elem_classes = /*elem_classes*/
-      l[1]), i & /*$$scope, loading_status, value, elem_classes, visible, height, gradio*/
-      638 && (s.$$scope = { dirty: i, ctx: l }), t.$set(s);
+      l[1]), i & /*$$scope, loading_status, value, elem_classes, visible, height, width, gradio*/
+      1278 && (s.$$scope = { dirty: i, ctx: l }), t.$set(s);
     },
     i(l) {
-      e || (ue(t.$$.fragment, l), e = !0);
+      e || (ce(t.$$.fragment, l), e = !0);
     },
     o(l) {
-      ce(t.$$.fragment, l), e = !1;
+      ue(t.$$.fragment, l), e = !1;
     },
     d(l) {
       re(t, l);
     }
   };
 }
-function Ml(n, t, e) {
-  let { label: l } = t, { elem_id: i = "" } = t, { elem_classes: s = [] } = t, { visible: o = !0 } = t, { value: a = "" } = t, { height: r = "100%" } = t, { loading_status: f } = t, { gradio: _ } = t;
-  const m = () => _.dispatch("change");
+function Sl(n, t, e) {
+  let { label: l } = t, { elem_id: i = "" } = t, { elem_classes: s = [] } = t, { visible: o = !0 } = t, { value: a = "" } = t, { height: r } = t, { width: f = "100%" } = t, { loading_status: _ } = t, { gradio: m } = t;
+  const b = () => m.dispatch("change");
   return n.$$set = (c) => {
-    "label" in c && e(7, l = c.label), "elem_id" in c && e(0, i = c.elem_id), "elem_classes" in c && e(1, s = c.elem_classes), "visible" in c && e(2, o = c.visible), "value" in c && e(3, a = c.value), "height" in c && e(4, r = c.height), "loading_status" in c && e(5, f = c.loading_status), "gradio" in c && e(6, _ = c.gradio);
+    "label" in c && e(8, l = c.label), "elem_id" in c && e(0, i = c.elem_id), "elem_classes" in c && e(1, s = c.elem_classes), "visible" in c && e(2, o = c.visible), "value" in c && e(3, a = c.value), "height" in c && e(4, r = c.height), "width" in c && e(5, f = c.width), "loading_status" in c && e(6, _ = c.loading_status), "gradio" in c && e(7, m = c.gradio);
   }, n.$$.update = () => {
     n.$$.dirty & /*label, gradio*/
-    192 && _.dispatch("change");
+    384 && m.dispatch("change");
   }, [
     i,
     s,
@@ -2000,24 +2052,26 @@ function Ml(n, t, e) {
     r,
     f,
     _,
+    m,
     l,
-    m
+    b
   ];
 }
-class Vl extends gl {
+class Nl extends wl {
   constructor(t) {
-    super(), pl(this, t, Ml, Cl, ql, {
-      label: 7,
+    super(), Fl(this, t, Sl, Vl, Ll, {
+      label: 8,
       elem_id: 0,
       elem_classes: 1,
       visible: 2,
       value: 3,
       height: 4,
-      loading_status: 5,
-      gradio: 6
+      width: 5,
+      loading_status: 6,
+      gradio: 7
     });
   }
 }
 export {
-  Vl as default
+  Nl as default
 };

components/iframe/frontend/Index.svelte

@@ -10,7 +10,8 @@
 	export let elem_classes: string[] = [];
 	export let visible = true;
 	export let value = "";
-	export let height: string = "100%";
+	export let height: string;
+	export let width: string = "100%";
 	export let loading_status: LoadingStatus;
 	export let gradio: Gradio<{
 		change: never;
@@ -33,6 +34,7 @@
 			{elem_classes}
 			{visible}
 			{height}
+			{width}
 			on:change={() => gradio.dispatch("change")}
 		/>
 	</div>

components/iframe/frontend/shared/HTML.svelte

@@ -6,9 +6,24 @@
 	export let min_height = false;
 
 	export let height = "100%";
+	export let width = "100%";
 
 	const dispatch = createEventDispatcher<{ change: undefined }>();
 
+	let iframeElement;
+
+    const onLoad = () => {
+		try {
+			const iframeDocument = iframeElement.contentDocument || iframeElement.contentWindow.document;
+			if (height === "100%") {
+				const height = iframeDocument.documentElement.scrollHeight;
+				iframeElement.style.height = `${height}px`;
+			}
+		} catch (e) {
+			console.error("Error accessing iframe content:", e);
+		}
+	};
+
 	$: value, dispatch("change");
 </script>
 
@@ -16,8 +31,17 @@
 	class="prose {elem_classes.join(' ')}"
 	class:min={min_height}
 	class:hide={!visible}
+	class:height={height}
 >
-	<iframe title="iframe component" width="100%" height={height} srcdoc={value} allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share" allowfullscreen></iframe>
+    <iframe
+        bind:this={iframeElement}
+        title="iframe component"
+        width={width}
+        srcdoc={value}
+        allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share"
+        allowfullscreen
+        on:load={onLoad}
+    ></iframe>
 </div>
 
 <style>

components/iframe/pyproject.toml

@@ -8,7 +8,7 @@ build-backend = "hatchling.build"
 
 [project]
 name = "gradio_iframe"
-version = "0.0.4"
+version = "0.0.8"
 description = "Experimental empowered iFrame component based on existing HTML gradio component."
 readme = "README.md"
 license = "MIT"
@@ -36,7 +36,7 @@ classifiers = [
 dev = ["build", "twine"]
 
 [tool.hatch.build]
-artifacts = ["/backend/gradio_iframe/templates", "*.pyi", "backend/gradio_iframe/templates", "home/lennard/.virtualenvs/thesis/lib/python3.11/site-packages/gradio_iframe/templates", "backend/gradio_iframe/templates", "backend/gradio_iframe/templates", "backend/gradio_iframe/templates"]
+artifacts = ["/backend/gradio_iframe/templates", "*.pyi", "backend/gradio_iframe/templates", "home/lennard/.virtualenvs/thesis/lib/python3.11/site-packages/gradio_iframe/templates", "backend/gradio_iframe/templates", "backend/gradio_iframe/templates", "backend/gradio_iframe/templates", "backend/gradio_iframe/templates", "backend/gradio_iframe/templates", "backend/gradio_iframe/templates", "backend/gradio_iframe/templates", "backend/gradio_iframe/templates"]
 
 [tool.hatch.build.targets.wheel]
 packages = ["/backend/gradio_iframe"]

main.py

@@ -79,27 +79,29 @@ with gr.Blocks(
                 """)
         # row with columns for the different settings
         with gr.Row(equal_height=True):
-            # column that takes up 3/5 of the row
-            with gr.Column(scale=3):
-                # textbox to enter the system prompt
-                system_prompt = gr.Textbox(
-                    label="System Prompt",
-                    info="Set the models system prompt, dictating how it answers.",
-                    placeholder=(
-                        "You are a helpful, respectful and honest assistant. Always"
-                        " answer as helpfully as possible, while being safe."
-                    ),
-                )
-            with gr.Column(scale=1):
-                # checkbox group to select the xai method
-                xai_selection = gr.Radio(
-                    ["None", "SHAP", "Attention"],
-                    label="XAI Settings",
-                    info="Select a XAI Implementation to use.",
-                    value="None",
-                    interactive=True,
-                    show_label=True,
-                )
+            with gr.Accordion(label="Application Settings", open=False):
+                # column that takes up 3/4 of the row
+                with gr.Column(scale=3):
+                    # textbox to enter the system prompt
+                    system_prompt = gr.Textbox(
+                        label="System Prompt",
+                        info="Set the models system prompt, dictating how it answers.",
+                        placeholder=(
+                            "You are a helpful, respectful and honest assistant. Always"
+                            " answer as helpfully as possible, while being safe."
+                        ),
+                    )
+                # column that takes up 1/4 of the row
+                with gr.Column(scale=1):
+                    # checkbox group to select the xai method
+                    xai_selection = gr.Radio(
+                        ["None", "SHAP", "Attention"],
+                        label="XAI Settings",
+                        info="Select a XAI Implementation to use.",
+                        value="None",
+                        interactive=True,
+                        show_label=True,
+                    )
 
             # calling info functions on inputs for different settings
             system_prompt.submit(system_prompt_info, [system_prompt])
@@ -200,7 +202,6 @@ with gr.Blocks(
                     '<div style="text-align: center"><h4>No Graphic to Display'
                     " (Yet)</h4></div>"
                 ),
-                height="16rem",
                 show_label=True,
             )
         # row and accordion to display an explanation plot (if applicable)