Upload folder using huggingface_hub

README.md

@@ -1,9 +1,9 @@
 
 ---
 tags: [gradio-custom-component,gradio-template-HTML,HTML,iFrame]
-title: gradio_iframe V0.0.4
-colorFrom: gray
-colorTo: red
+title: gradio_iframe V0.0.9
+colorFrom: red
+colorTo: indigo
 sdk: docker
 pinned: false
 license: apache-2.0

app.py

@@ -8,7 +8,7 @@ example = iFrame().example_inputs()
 with gr.Blocks() as demo:
     with gr.Row():
         iFrame(label="Blank"),  # blank component
-        iFrame(value=example, label="Populated"),  # populated component
+        iFrame(value=example, label="Populated", height="1000px"),  # populated component
 
 
 demo.launch()

requirements.txt

@@ -1 +1 @@
-gradio_iframe-0.0.4-py3-none-any.whl
+gradio_iframe-0.0.9-py3-none-any.whl

src/backend/gradio_iframe/templates/component/index.js

@@ -93,10 +93,7 @@ function dt(n, t, e) {
   const m = () => {
     try {
       const c = _.contentDocument || _.contentWindow.document;
-      if (a === "100%") {
-        const v = c.documentElement.scrollHeight;
-        e(6, _.style.height = `${v}px`, _);
-      }
+      a === "100%" ? e(6, _.style.height = `${c.documentElement.scrollHeight}px`, _) : e(6, _.style.height = a, _);
     } catch (c) {
       console.error("Error accessing iframe content:", c);
     }
@@ -148,7 +145,7 @@ function bt(n, t) {
   return n != n ? t == t : n !== t || n && typeof n == "object" || typeof n == "function";
 }
 const Re = typeof window < "u";
-let ke = Re ? () => window.performance.now() : () => Date.now(), Ue = Re ? (n) => requestAnimationFrame(n) : te;
+let ye = Re ? () => window.performance.now() : () => Date.now(), Ue = Re ? (n) => requestAnimationFrame(n) : te;
 const O = /* @__PURE__ */ new Set();
 function We(n) {
   O.forEach((t) => {
@@ -193,13 +190,13 @@ function ht(n, t = te) {
   }
   return { set: i, update: s, subscribe: o };
 }
-function ye(n) {
+function ke(n) {
   return Object.prototype.toString.call(n) === "[object Date]";
 }
 function se(n, t, e, l) {
-  if (typeof e == "number" || ye(e)) {
+  if (typeof e == "number" || ke(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, ye(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, ke(e) ? new Date(e.getTime() + f) : e + f);
   } else {
     if (Array.isArray(e))
       return e.map(
@@ -217,20 +214,20 @@ function se(n, t, e, l) {
 function pe(n, t = {}) {
   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 = {}) {
+  function y(p, L = {}) {
     _ = p;
     const F = r = {};
-    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) => {
+    return n == null || L.hard || C.stiffness >= 1 && C.damping >= 1 ? (c = !0, o = ye(), f = p, e.set(n = _), Promise.resolve()) : (L.soft && (b = 1 / ((L.soft === !0 ? 0.5 : +L.soft) * 60), m = 0), a || (o = ye(), c = !1, a = gt((u) => {
       if (c)
         return c = !1, a = null, !1;
       m = Math.min(m + b, 1);
-      const y = {
+      const k = {
         inv_mass: m,
         opts: C,
         settled: !0,
         dt: (u - o) * 60 / 1e3
-      }, g = se(y, f, n, _);
-      return o = u, f = n, e.set(n = g), y.settled && (a = null), !y.settled;
+      }, g = se(k, f, n, _);
+      return o = u, f = n, e.set(n = g), k.settled && (a = null), !k.settled;
     })), new Promise((u) => {
       a.promise.then(() => {
         F === r && u();
@@ -238,8 +235,8 @@ function pe(n, t = {}) {
     }));
   }
   const C = {
-    set: v,
-    update: (p, L) => v(p(_, n), L),
+    set: y,
+    update: (p, L) => y(p(_, n), L),
     subscribe: e.subscribe,
     stiffness: l,
     damping: i,
@@ -250,11 +247,11 @@ function pe(n, t = {}) {
 const {
   SvelteComponent: wt,
   append: N,
-  attr: k,
+  attr: v,
   component_subscribe: qe,
   detach: vt,
-  element: kt,
-  init: yt,
+  element: yt,
+  init: kt,
   insert: pt,
   noop: Fe,
   safe_not_equal: qt,
@@ -266,28 +263,28 @@ function Lt(n) {
   let t, e, l, i, s, o, a, r, f, _, m, b;
   return {
     c() {
-      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*/
+      t = yt("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"), 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*/
       n[1][0] + "px, " + /*$top*/
-      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[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(b, "d", "M255.923 140.977L0.236328 280.68V362.294L255.923 222.591V140.977Z"), v(b, "fill", "#FF7C00"), v(b, "class", "svelte-43sxxs"), $(r, "transform", "translate(" + /*$bottom*/
       n[2][0] + "px, " + /*$bottom*/
-      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(
+      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(
         t,
         "margin",
         /*margin*/
         n[0]
       );
     },
-    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);
+    m(c, y) {
+      pt(c, 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, b);
     },
-    p(c, [v]) {
-      v & /*$top*/
+    p(c, [y]) {
+      y & /*$top*/
       2 && $(l, "transform", "translate(" + /*$top*/
       c[1][0] + "px, " + /*$top*/
-      c[1][1] + "px)"), v & /*$bottom*/
+      c[1][1] + "px)"), y & /*$bottom*/
       4 && $(r, "transform", "translate(" + /*$bottom*/
       c[2][0] + "px, " + /*$bottom*/
-      c[2][1] + "px)"), v & /*margin*/
+      c[2][1] + "px)"), y & /*margin*/
       1 && Le(
         t,
         "margin",
@@ -324,7 +321,7 @@ function Ct(n, t, e) {
 }
 class Mt extends wt {
   constructor(t) {
-    super(), yt(this, t, Ct, Lt, qt, { margin: 0 });
+    super(), kt(this, t, Ct, Lt, qt, { margin: 0 });
   }
 }
 const {
@@ -429,7 +426,7 @@ function Xt(n) {
     n[18] && /*show_progress*/
     n[6] === "full" && Ne(n)
   );
-  function m(u, y) {
+  function m(u, k) {
     if (
       /*progress*/
       u[7]
@@ -448,12 +445,12 @@ function Xt(n) {
     )
       return Yt;
   }
-  let b = m(n), c = b && b(n), v = (
+  let b = m(n), c = b && b(n), y = (
     /*timer*/
     n[5] && je(n)
   );
   const C = [Jt, Wt], p = [];
-  function L(u, y) {
+  function L(u, k) {
     return (
       /*last_progress_level*/
       u[15] != null ? 0 : (
@@ -467,7 +464,7 @@ function Xt(n) {
   n[5] && Ie(n);
   return {
     c() {
-      _ && _.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(
+      _ && _.c(), t = j(), e = P("div"), c && c.c(), l = j(), y && y.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*/
@@ -479,21 +476,21 @@ function Xt(n) {
         n[8] === "default"
       );
     },
-    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;
+    m(u, k) {
+      _ && _.m(u, k), w(u, t, k), w(u, e, k), c && c.m(e, null), H(e, l), y && y.m(e, null), w(u, i, k), ~s && p[s].m(u, k), w(u, a, k), F && F.m(u, k), w(u, r, k), f = !0;
     },
-    p(u, y) {
+    p(u, k) {
       /*variant*/
       u[8] === "default" && /*show_eta_bar*/
       u[18] && /*show_progress*/
-      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*/
+      u[6] === "full" ? _ ? _.p(u, k) : (_ = Ne(u), _.c(), _.m(t.parentNode, t)) : _ && (_.d(1), _ = null), b === (b = m(u)) && c ? c.p(u, k) : (c && c.d(1), c = b && b(u), c && (c.c(), c.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*/
       256) && V(
         e,
         "meta-text-center",
         /*variant*/
         u[8] === "center"
-      ), (!f || y[0] & /*variant*/
+      ), (!f || k[0] & /*variant*/
       256) && V(
         e,
         "meta-text",
@@ -501,10 +498,10 @@ function Xt(n) {
         u[8] === "default"
       );
       let g = s;
-      s = L(u), s === g ? ~s && p[s].p(u, y) : (o && (Qe(), U(p[g], 1, 1, () => {
+      s = L(u), s === g ? ~s && p[s].p(u, k) : (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));
+      }), Je()), ~s ? (o = p[s], o ? o.p(u, k) : (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, k) : (F = Ie(u), F.c(), F.m(r.parentNode, r));
     },
     i(u) {
       f || (R(o), f = !0);
@@ -513,7 +510,7 @@ function Xt(n) {
       U(o), f = !1;
     },
     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);
+      u && (h(t), h(e), h(i), h(a), h(r)), _ && _.d(u), c && c.d(), y && y.d(), ~s && p[s].d(u), F && F.d(u);
     }
   };
 }
@@ -1159,7 +1156,7 @@ async function xt(n, t = !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;
+  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: 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: 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, x = performance.now()), e(26, A = 0), K = !0, be();
   };
@@ -1186,7 +1183,7 @@ function $t(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, 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);
+    "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, 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, 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() - x) / 1e3 + a), a != null && (e(19, he = a.toFixed(1)), e(27, ie = a))), n.$$.dirty[0] & /*eta, timer_diff*/
@@ -1209,12 +1206,12 @@ function $t(n, t, e) {
     _,
     m,
     c,
-    v,
+    y,
     p,
     L,
     F,
     u,
-    y,
+    k,
     g,
     J,
     I,
@@ -1490,9 +1487,9 @@ function ml(n) {
   };
 }
 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";
+  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: 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 = 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);
+    "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, y = 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,
@@ -1502,13 +1499,13 @@ function bl(n, t, e) {
     _,
     m,
     c,
-    v,
+    y,
     C,
     p,
     L,
     F,
     u,
-    y,
+    k,
     b,
     i,
     l
@@ -1852,11 +1849,11 @@ hl.reduce(
 const {
   SvelteComponent: wl,
   assign: vl,
-  attr: kl,
+  attr: yl,
   create_component: ae,
   destroy_component: re,
   detach: Ye,
-  element: yl,
+  element: kl,
   get_spread_object: pl,
   get_spread_update: ql,
   init: Fl,
@@ -1922,7 +1919,7 @@ function Ml(n) {
   ), {
     c() {
       var f;
-      ae(t.$$.fragment), e = Cl(), l = yl("div"), ae(i.$$.fragment), kl(l, "class", "svelte-gqsrr7"), Oe(
+      ae(t.$$.fragment), e = Cl(), l = kl("div"), ae(i.$$.fragment), yl(l, "class", "svelte-gqsrr7"), Oe(
         l,
         "pending",
         /*loading_status*/
@@ -1933,7 +1930,7 @@ function Ml(n) {
       _e(t, f, _), Ge(f, e, _), Ge(f, l, _), _e(i, l, null), s = !0;
     },
     p(f, _) {
-      var c, v;
+      var c, y;
       const m = _ & /*gradio, loading_status*/
       192 ? ql(o, [
         _ & /*gradio*/
@@ -1973,7 +1970,7 @@ function Ml(n) {
         l,
         "pending",
         /*loading_status*/
-        ((v = f[6]) == null ? void 0 : v.status) === "pending"
+        ((y = f[6]) == null ? void 0 : y.status) === "pending"
       );
     },
     i(f) {

src/backend/gradio_iframe/templates/example/index.js

@@ -14,7 +14,7 @@ function y(n) {
   let e, l;
   return {
     c() {
-      e = o("div"), l = o("iframe"), s(l, "title", "iframe component"), s(l, "width", "100%"), s(l, "height", "100%"), s(
+      e = o("div"), l = o("iframe"), s(l, "title", "iframe component"), s(l, "width", "100%"), s(l, "height", "1000px"), s(
         l,
         "srcdoc",
         /*value*/

src/demo/app.py

@@ -8,7 +8,7 @@ example = iFrame().example_inputs()
 with gr.Blocks() as demo:
     with gr.Row():
         iFrame(label="Blank"),  # blank component
-        iFrame(value=example, label="Populated"),  # populated component
+        iFrame(value=example, label="Populated", height="1000px"),  # populated component
 
 
 demo.launch()

src/frontend/Example.svelte

@@ -10,7 +10,7 @@
 	class:selected
 	class="prose"
 >
-	<iframe title="iframe component" width="100%" height="100%" srcdoc={value} allow=""></iframe>
+	<iframe title="iframe component" width="100%" height="1000px" srcdoc={value} allow=""></iframe>
 </div>
 
 <style>

src/frontend/shared/HTML.svelte

@@ -16,8 +16,9 @@
 		try {
 			const iframeDocument = iframeElement.contentDocument || iframeElement.contentWindow.document;
 			if (height === "100%") {
-				const height = iframeDocument.documentElement.scrollHeight;
-				iframeElement.style.height = `${height}px`;
+				iframeElement.style.height = `${iframeDocument.documentElement.scrollHeight}px`;
+			}else {
+				iframeElement.style.height = height;
 			}
 		} catch (e) {
 			console.error("Error accessing iframe content:", e);

src/pyproject.toml

@@ -8,7 +8,7 @@ build-backend = "hatchling.build"
 
 [project]
 name = "gradio_iframe"
-version = "0.0.8"
+version = "0.0.9"
 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", "backend/gradio_iframe/templates", "backend/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", "backend/gradio_iframe/templates", "backend/gradio_iframe/templates"]
 
 [tool.hatch.build.targets.wheel]
 packages = ["/backend/gradio_iframe"]