feat: updating explanation component, adding iFrame again, other improvements

.idea/thesis-webapp.iml

@@ -6,6 +6,7 @@
       <sourceFolder url="file://$MODULE_DIR$/components/shap-plots/backend" isTestSource="false" />
       <sourceFolder url="file://$MODULE_DIR$/components/shap/backend" isTestSource="false" />
       <sourceFolder url="file://$MODULE_DIR$/components/visualizer/backend" isTestSource="false" />
+      <sourceFolder url="file://$MODULE_DIR$/components/iframe/backend" isTestSource="false" />
     </content>
     <orderEntry type="jdk" jdkName="Python 3.11.6 WSL (Ubuntu): (/home/lennard/.virtualenvs/thesis/bin/python)" jdkType="Python SDK" />
     <orderEntry type="sourceFolder" forTests="false" />

components/iframe/README.md

@@ -1,10 +1,36 @@
-
 # gradio_iframe
-A Custom Gradio component.
+A custom gradio component to embed an iframe in a gradio interface. This component is based on the [HTML]() component.
+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.
 
-## Example usage
+You can still pass normal html that's not interactive.
+
+### Example
 
 ```python
 import gradio as gr
-from gradio_iframe import iframe
+from gradio_iframe import iFrame
+
+gr.Interface(
+    iFrame(
+        label="iFrame Example",
+        value=("https://www.youtube.com/watch?v=dQw4w9WgXcQ"),
+        show_label=True)
+)
 ```
+
+## 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.
+
+### Other Issues
+
+- Height does not grow according to the inner component.
+- ...

components/iframe/backend/gradio_iframe/__init__.py

@@ -1,4 +1,4 @@
 
-from .iframe import iframe
+from .iframe import iFrame
 
-__all__ = ['iframe']
+__all__ = ['iFrame']

components/iframe/backend/gradio_iframe/iframe.py

@@ -13,11 +13,11 @@ set_documentation_group("component")
 
 
 @document()
-class iframe(Component):
+class iFrame(Component):
     """
-    Used to display arbitrary iframe output.
+    Used to display abitrary html output.
     Preprocessing: this component does *not* accept input.
-    Postprocessing: expects valid html {str}, which will be turned into an iframe.
+    Postprocessing: expects a valid HTML {str}.
 
     Demos: text_analysis
     Guides: key-features
@@ -44,8 +44,8 @@ class iframe(Component):
             every: If `value` is a callable, run the function 'every' number of seconds while the client connection is open. Has no effect otherwise. Queue must be enabled. The event can be accessed (e.g. to cancel it) via this component's .load_event attribute.
             show_label: This parameter has no effect.
             visible: If False, component will be hidden.
-            elem_id: An optional string that is assigned as the id of this component in the iframe DOM. Can be used for targeting CSS styles.
-            elem_classes: An optional list of strings that are assigned as the classes of this component in the iframe DOM. Can be used for targeting CSS styles.
+            elem_id: An optional string that is assigned as the id of this component in the iFrame DOM. Can be used for targeting CSS styles.
+            elem_classes: An optional list of strings that are assigned as the classes of this component in the iFrame DOM. Can be used for targeting CSS styles.
             render: If False, component will not render be rendered in the Blocks context. Should be used if the intention is to assign event listeners now but render the component later.
         """
         super().__init__(

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

@@ -19,7 +19,7 @@ function _t(n) {
         "srcdoc",
         /*value*/
         n[1]
-      ), B(e, "allow", ""), B(t, "class", l = "prose " + /*elem_classes*/
+      ), B(e, "allow", "accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share"), e.allowFullscreen = !0, B(t, "class", l = "prose " + /*elem_classes*/
       n[0].join(" ") + " svelte-2qygph"), x(
         t,
         "min",
@@ -57,7 +57,7 @@ function _t(n) {
     }
   };
 }
-function ut(n, t, e) {
+function ct(n, t, e) {
   let { elem_classes: l = [] } = t, { value: i } = t, { visible: f = !0 } = t, { min_height: o = !1 } = t;
   const a = rt();
   return n.$$set = (r) => {
@@ -67,9 +67,9 @@ function ut(n, t, e) {
     2 && a("change");
   }, [l, i, f, o];
 }
-class ct extends nt {
+class ut extends nt {
   constructor(t) {
-    super(), ft(this, t, ut, _t, at, {
+    super(), ft(this, t, ct, _t, at, {
       elem_classes: 0,
       value: 1,
       visible: 2,
@@ -158,24 +158,24 @@ function fe(n, t, e, l) {
 }
 function ke(n, t = {}) {
   const e = bt(n), { stiffness: l = 0.15, damping: i = 0.8, precision: f = 0.01 } = t;
-  let o, a, r, s = n, _ = n, c = 1, w = 0, h = !1;
+  let o, a, r, s = n, _ = n, u = 1, w = 0, h = !1;
   function p(k, L = {}) {
     _ = k;
     const F = r = {};
-    return n == null || L.hard || C.stiffness >= 1 && C.damping >= 1 ? (h = !0, o = pe(), s = k, e.set(n = _), Promise.resolve()) : (L.soft && (w = 1 / ((L.soft === !0 ? 0.5 : +L.soft) * 60), c = 0), a || (o = pe(), h = !1, a = mt((u) => {
+    return n == null || L.hard || C.stiffness >= 1 && C.damping >= 1 ? (h = !0, o = pe(), s = k, e.set(n = _), Promise.resolve()) : (L.soft && (w = 1 / ((L.soft === !0 ? 0.5 : +L.soft) * 60), u = 0), a || (o = pe(), h = !1, a = mt((c) => {
       if (h)
         return h = !1, a = null, !1;
-      c = Math.min(c + w, 1);
+      u = Math.min(u + w, 1);
       const y = {
-        inv_mass: c,
+        inv_mass: u,
         opts: C,
         settled: !0,
-        dt: (u - o) * 60 / 1e3
+        dt: (c - o) * 60 / 1e3
       }, m = fe(y, s, n, _);
-      return o = u, s = n, e.set(n = m), y.settled && (a = null), !y.settled;
-    })), new Promise((u) => {
+      return o = c, s = n, e.set(n = m), y.settled && (a = null), !y.settled;
+    })), new Promise((c) => {
       a.promise.then(() => {
-        F === r && u();
+        F === r && c();
       });
     }));
   }
@@ -205,12 +205,12 @@ const {
   toggle_class: Le
 } = window.__gradio__svelte__internal, { onMount: kt } = window.__gradio__svelte__internal;
 function qt(n) {
-  let t, e, l, i, f, o, a, r, s, _, c, w;
+  let t, e, l, i, f, o, a, r, s, _, u, w;
   return {
     c() {
-      t = wt("div"), e = z("svg"), l = z("g"), i = z("path"), f = z("path"), o = z("path"), a = z("path"), r = z("g"), s = z("path"), _ = z("path"), c = z("path"), w = 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(f, "d", "M509.69 139.936L254.981 279.641V361.255L509.69 221.55V139.936Z"), v(f, "fill", "#FF7C00"), v(f, "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 = wt("div"), e = z("svg"), l = z("g"), i = z("path"), f = z("path"), o = z("path"), a = z("path"), r = z("g"), s = z("path"), _ = z("path"), u = z("path"), w = 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(f, "d", "M509.69 139.936L254.981 279.641V361.255L509.69 221.55V139.936Z"), v(f, "fill", "#FF7C00"), v(f, "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)"), v(s, "d", "M255.926 141.5L509.702 280.681V361.773L255.926 222.592V141.5Z"), v(s, "fill", "#FF7C00"), v(s, "fill-opacity", "0.4"), v(s, "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(c, "d", "M0.250138 280.681L254.981 420.386V502L0.250138 362.295V280.681Z"), v(c, "fill", "#FF7C00"), v(c, "fill-opacity", "0.4"), v(c, "class", "svelte-43sxxs"), v(w, "d", "M255.923 140.977L0.236328 280.68V362.294L255.923 222.591V140.977Z"), v(w, "fill", "#FF7C00"), v(w, "class", "svelte-43sxxs"), $(r, "transform", "translate(" + /*$bottom*/
+      n[1][1] + "px)"), v(s, "d", "M255.926 141.5L509.702 280.681V361.773L255.926 222.592V141.5Z"), v(s, "fill", "#FF7C00"), v(s, "fill-opacity", "0.4"), v(s, "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(u, "d", "M0.250138 280.681L254.981 420.386V502L0.250138 362.295V280.681Z"), v(u, "fill", "#FF7C00"), v(u, "fill-opacity", "0.4"), v(u, "class", "svelte-43sxxs"), v(w, "d", "M255.923 140.977L0.236328 280.68V362.294L255.923 222.591V140.977Z"), v(w, "fill", "#FF7C00"), v(w, "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(
         t,
@@ -220,7 +220,7 @@ function qt(n) {
       );
     },
     m(h, p) {
-      pt(h, t, p), N(t, e), N(e, l), N(l, i), N(l, f), N(l, o), N(l, a), N(e, r), N(r, s), N(r, _), N(r, c), N(r, w);
+      pt(h, t, p), N(t, e), N(e, l), N(l, i), N(l, f), N(l, o), N(l, a), N(e, r), N(r, s), N(r, _), N(r, u), N(r, w);
     },
     p(h, [p]) {
       p & /*$top*/
@@ -257,10 +257,10 @@ function Ft(n, t, e) {
   async function _() {
     await s(), r || _();
   }
-  async function c() {
+  async function u() {
     await Promise.all([o.set([125, 0]), a.set([-125, 0])]), _();
   }
-  return kt(() => (c(), () => r = !0)), n.$$set = (w) => {
+  return kt(() => (u(), () => r = !0)), n.$$set = (w) => {
     "margin" in w && e(0, f = w.margin);
   }, [f, l, i, o, a];
 }
@@ -371,36 +371,36 @@ function It(n) {
     n[18] && /*show_progress*/
     n[6] === "full" && Ne(n)
   );
-  function c(u, y) {
+  function u(c, y) {
     if (
       /*progress*/
-      u[7]
+      c[7]
     )
       return Yt;
     if (
       /*queue_position*/
-      u[2] !== null && /*queue_size*/
-      u[3] !== void 0 && /*queue_position*/
-      u[2] >= 0
+      c[2] !== null && /*queue_size*/
+      c[3] !== void 0 && /*queue_position*/
+      c[2] >= 0
     )
       return Xt;
     if (
       /*queue_position*/
-      u[2] === 0
+      c[2] === 0
     )
       return Ht;
   }
-  let w = c(n), h = w && w(n), p = (
+  let w = u(n), h = w && w(n), p = (
     /*timer*/
     n[5] && je(n)
   );
   const C = [Ut, Rt], k = [];
-  function L(u, y) {
+  function L(c, y) {
     return (
       /*last_progress_level*/
-      u[15] != null ? 0 : (
+      c[15] != null ? 0 : (
         /*show_progress*/
-        u[6] === "full" ? 1 : -1
+        c[6] === "full" ? 1 : -1
       )
     );
   }
@@ -421,41 +421,41 @@ function It(n) {
         n[8] === "default"
       );
     },
-    m(u, y) {
-      _ && _.m(u, y), g(u, t, y), g(u, e, y), h && h.m(e, null), H(e, l), p && p.m(e, null), g(u, i, y), ~f && k[f].m(u, y), g(u, a, y), F && F.m(u, y), g(u, r, y), s = !0;
+    m(c, y) {
+      _ && _.m(c, y), g(c, t, y), g(c, e, y), h && h.m(e, null), H(e, l), p && p.m(e, null), g(c, i, y), ~f && k[f].m(c, y), g(c, a, y), F && F.m(c, y), g(c, r, y), s = !0;
     },
-    p(u, y) {
+    p(c, y) {
       /*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), w === (w = c(u)) && h ? h.p(u, y) : (h && h.d(1), h = w && w(u), h && (h.c(), h.m(e, l))), /*timer*/
-      u[5] ? p ? p.p(u, y) : (p = je(u), p.c(), p.m(e, null)) : p && (p.d(1), p = null), (!s || y[0] & /*variant*/
+      c[8] === "default" && /*show_eta_bar*/
+      c[18] && /*show_progress*/
+      c[6] === "full" ? _ ? _.p(c, y) : (_ = Ne(c), _.c(), _.m(t.parentNode, t)) : _ && (_.d(1), _ = null), w === (w = u(c)) && h ? h.p(c, y) : (h && h.d(1), h = w && w(c), h && (h.c(), h.m(e, l))), /*timer*/
+      c[5] ? p ? p.p(c, y) : (p = je(c), p.c(), p.m(e, null)) : p && (p.d(1), p = null), (!s || y[0] & /*variant*/
       256) && V(
         e,
         "meta-text-center",
         /*variant*/
-        u[8] === "center"
+        c[8] === "center"
       ), (!s || y[0] & /*variant*/
       256) && V(
         e,
         "meta-text",
         /*variant*/
-        u[8] === "default"
+        c[8] === "default"
       );
       let m = f;
-      f = L(u), f === m ? ~f && k[f].p(u, y) : (o && (We(), R(k[m], 1, 1, () => {
+      f = L(c), f === m ? ~f && k[f].p(c, y) : (o && (We(), R(k[m], 1, 1, () => {
         k[m] = null;
-      }), Ke()), ~f ? (o = k[f], o ? o.p(u, y) : (o = k[f] = C[f](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, y) : (F = Ie(u), F.c(), F.m(r.parentNode, r));
+      }), Ke()), ~f ? (o = k[f], o ? o.p(c, y) : (o = k[f] = C[f](c), o.c()), O(o, 1), o.m(a.parentNode, a)) : o = null), /*timer*/
+      c[5] ? F && (F.d(1), F = null) : F ? F.p(c, y) : (F = Ie(c), F.c(), F.m(r.parentNode, r));
     },
-    i(u) {
+    i(c) {
       s || (O(o), s = !0);
     },
-    o(u) {
+    o(c) {
       R(o), s = !1;
     },
-    d(u) {
-      u && (b(t), b(e), b(i), b(a), b(r)), _ && _.d(u), h && h.d(), p && p.d(), ~f && k[f].d(u), F && F.d(u);
+    d(c) {
+      c && (b(t), b(e), b(i), b(a), b(r)), _ && _.d(c), h && h.d(), p && p.d(), ~f && k[f].d(c), F && F.d(c);
     }
   };
 }
@@ -569,7 +569,7 @@ function ze(n) {
     /*p*/
     n[38].unit + ""
   ), l, i, f = " ", o;
-  function a(_, c) {
+  function a(_, u) {
     return (
       /*p*/
       _[38].length != null ? Ot : Gt
@@ -580,11 +580,11 @@ function ze(n) {
     c() {
       s.c(), t = j(), l = q(e), i = q(" | "), o = q(f);
     },
-    m(_, c) {
-      s.m(_, c), g(_, t, c), g(_, l, c), g(_, i, c), g(_, o, c);
+    m(_, u) {
+      s.m(_, u), g(_, t, u), g(_, l, u), g(_, i, u), g(_, o, u);
     },
-    p(_, c) {
-      r === (r = a(_)) && s ? s.p(_, c) : (s.d(1), s = r(_), s && (s.c(), s.m(t.parentNode, t))), c[0] & /*progress*/
+    p(_, u) {
+      r === (r = a(_)) && s ? s.p(_, u) : (s.d(1), s = r(_), s && (s.c(), s.m(t.parentNode, t))), u[0] & /*progress*/
       128 && e !== (e = /*p*/
       _[38].unit + "") && S(l, e);
     },
@@ -1026,9 +1026,9 @@ function Kt(n) {
       g(s, t, _), ~e && a[e].m(t, null), n[31](t), f = !0;
     },
     p(s, _) {
-      let c = e;
-      e = r(s), e === c ? ~e && a[e].p(s, _) : (l && (We(), R(a[c], 1, 1, () => {
-        a[c] = null;
+      let u = e;
+      e = r(s), e === u ? ~e && a[e].p(s, _) : (l && (We(), R(a[u], 1, 1, () => {
+        a[u] = null;
       }), Ke()), ~e ? (l = a[e], l ? l.p(s, _) : (l = a[e] = o[e](s), l.c()), O(l, 1), l.m(t, null)) : l = null), (!f || _[0] & /*variant, show_progress*/
       320 && i !== (i = "wrap " + /*variant*/
       s[8] + " " + /*show_progress*/
@@ -1101,7 +1101,7 @@ async function Qt(n, t = !0) {
   }
 }
 function Wt(n, t, e) {
-  let l, { $$slots: i = {}, $$scope: f } = t, { i18n: o } = t, { eta: a = null } = t, { queue: r = !1 } = t, { queue_position: s } = t, { queue_size: _ } = t, { status: c } = t, { scroll_to_output: w = !1 } = t, { timer: h = !0 } = t, { show_progress: p = "full" } = t, { message: C = null } = t, { progress: k = null } = t, { variant: L = "default" } = t, { loading_text: F = "Loading..." } = t, { absolute: u = !0 } = t, { translucent: y = !1 } = t, { border: m = !1 } = t, { autoscroll: ne } = t, J, K = !1, W = 0, E = 0, ie = null, de = 0, I = null, Q, Z = null, me = !0;
+  let l, { $$slots: i = {}, $$scope: f } = t, { i18n: o } = t, { eta: a = null } = t, { queue: r = !1 } = t, { queue_position: s } = t, { queue_size: _ } = t, { status: u } = t, { scroll_to_output: w = !1 } = t, { timer: h = !0 } = t, { show_progress: p = "full" } = t, { message: C = null } = t, { progress: k = null } = t, { variant: L = "default" } = t, { loading_text: F = "Loading..." } = t, { absolute: c = !0 } = t, { translucent: y = !1 } = t, { border: m = !1 } = t, { autoscroll: ne } = t, J, K = !1, W = 0, E = 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();
   };
@@ -1128,7 +1128,7 @@ 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, s = d.queue_position), "queue_size" in d && e(3, _ = d.queue_size), "status" in d && e(4, c = d.status), "scroll_to_output" in d && e(22, w = d.scroll_to_output), "timer" in d && e(5, h = d.timer), "show_progress" in d && e(6, p = d.show_progress), "message" in d && e(23, C = d.message), "progress" in d && e(7, k = 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, m = d.border), "autoscroll" in d && e(24, ne = d.autoscroll), "$$scope" in d && e(28, f = 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, s = d.queue_position), "queue_size" in d && e(3, _ = d.queue_size), "status" in d && e(4, u = d.status), "scroll_to_output" in d && e(22, w = d.scroll_to_output), "timer" in d && e(5, h = d.timer), "show_progress" in d && e(6, p = d.show_progress), "message" in d && e(23, C = d.message), "progress" in d && e(7, k = 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, c = d.absolute), "translucent" in d && e(11, y = d.translucent), "border" in d && e(12, m = d.border), "autoscroll" in d && e(24, ne = d.autoscroll), "$$scope" in d && e(28, f = 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*/
@@ -1140,8 +1140,8 @@ function Wt(n, t, e) {
       if (d.progress != null)
         return d.progress;
     })) : 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 && (c === "pending" ? et() : ge()), n.$$.dirty[0] & /*el, scroll_to_output, status, autoscroll*/
-    20979728 && J && w && (c === "pending" || c === "complete") && Qt(J, ne), n.$$.dirty[0] & /*status, message*/
+    16 && (u === "pending" ? et() : ge()), n.$$.dirty[0] & /*el, scroll_to_output, status, autoscroll*/
+    20979728 && J && w && (u === "pending" || u === "complete") && Qt(J, ne), n.$$.dirty[0] & /*status, message*/
     8388624, n.$$.dirty[0] & /*timer_diff*/
     67108864 && e(20, l = E.toFixed(1));
   }, [
@@ -1149,13 +1149,13 @@ function Wt(n, t, e) {
     o,
     s,
     _,
-    c,
+    u,
     h,
     p,
     k,
     L,
     F,
-    u,
+    c,
     y,
     m,
     J,
@@ -1230,7 +1230,7 @@ const {
   transition_out: $e,
   update_slot_base: _l
 } = window.__gradio__svelte__internal;
-function ul(n) {
+function cl(n) {
   let t, e, l;
   const i = (
     /*#slots*/
@@ -1404,10 +1404,10 @@ function ul(n) {
     }
   };
 }
-function cl(n) {
+function ul(n) {
   let t, e = (
     /*tag*/
-    n[14] && ul(n)
+    n[14] && cl(n)
   );
   return {
     c() {
@@ -1432,9 +1432,9 @@ function cl(n) {
   };
 }
 function dl(n, t, e) {
-  let { $$slots: l = {}, $$scope: i } = t, { height: f = void 0 } = t, { width: o = void 0 } = t, { elem_id: a = "" } = t, { elem_classes: r = [] } = t, { variant: s = "solid" } = t, { border_mode: _ = "base" } = t, { padding: c = !0 } = t, { type: w = "normal" } = t, { test_id: h = void 0 } = t, { explicit_call: p = !1 } = t, { container: C = !0 } = t, { visible: k = !0 } = t, { allow_overflow: L = !0 } = t, { scale: F = null } = t, { min_width: u = 0 } = t, y = w === "fieldset" ? "fieldset" : "div";
+  let { $$slots: l = {}, $$scope: i } = t, { height: f = void 0 } = t, { width: o = void 0 } = t, { elem_id: a = "" } = t, { elem_classes: r = [] } = t, { variant: s = "solid" } = t, { border_mode: _ = "base" } = t, { padding: u = !0 } = t, { type: w = "normal" } = t, { test_id: h = void 0 } = t, { explicit_call: p = !1 } = t, { container: C = !0 } = t, { visible: k = !0 } = t, { allow_overflow: L = !0 } = t, { scale: F = null } = t, { min_width: c = 0 } = t, y = w === "fieldset" ? "fieldset" : "div";
   return n.$$set = (m) => {
-    "height" in m && e(0, f = m.height), "width" in m && e(1, o = m.width), "elem_id" in m && e(2, a = m.elem_id), "elem_classes" in m && e(3, r = m.elem_classes), "variant" in m && e(4, s = m.variant), "border_mode" in m && e(5, _ = m.border_mode), "padding" in m && e(6, c = m.padding), "type" in m && e(15, w = m.type), "test_id" in m && e(7, h = m.test_id), "explicit_call" in m && e(8, p = m.explicit_call), "container" in m && e(9, C = m.container), "visible" in m && e(10, k = m.visible), "allow_overflow" in m && e(11, L = m.allow_overflow), "scale" in m && e(12, F = m.scale), "min_width" in m && e(13, u = m.min_width), "$$scope" in m && e(16, i = m.$$scope);
+    "height" in m && e(0, f = m.height), "width" in m && e(1, o = m.width), "elem_id" in m && e(2, a = m.elem_id), "elem_classes" in m && e(3, r = m.elem_classes), "variant" in m && e(4, s = m.variant), "border_mode" in m && e(5, _ = m.border_mode), "padding" in m && e(6, u = m.padding), "type" in m && e(15, w = m.type), "test_id" in m && e(7, h = m.test_id), "explicit_call" in m && e(8, p = m.explicit_call), "container" in m && e(9, C = m.container), "visible" in m && e(10, k = m.visible), "allow_overflow" in m && e(11, L = m.allow_overflow), "scale" in m && e(12, F = m.scale), "min_width" in m && e(13, c = m.min_width), "$$scope" in m && e(16, i = m.$$scope);
   }, [
     f,
     o,
@@ -1442,14 +1442,14 @@ function dl(n, t, e) {
     r,
     s,
     _,
-    c,
+    u,
     h,
     p,
     C,
     k,
     L,
     F,
-    u,
+    c,
     y,
     w,
     i,
@@ -1458,7 +1458,7 @@ function dl(n, t, e) {
 }
 class ml extends $t {
   constructor(t) {
-    super(), ol(this, t, dl, cl, rl, {
+    super(), ol(this, t, dl, ul, rl, {
       height: 0,
       width: 1,
       elem_id: 2,
@@ -1807,8 +1807,8 @@ const {
   safe_not_equal: ql,
   space: Fl,
   toggle_class: Oe,
-  transition_in: ue,
-  transition_out: ce
+  transition_in: ce,
+  transition_out: ue
 } = window.__gradio__svelte__internal;
 function Ll(n) {
   var r;
@@ -1829,7 +1829,7 @@ function Ll(n) {
   let a = {};
   for (let s = 0; s < o.length; s += 1)
     a = hl(a, o[s]);
-  return t = new xt({ props: a }), i = new ct({
+  return t = new xt({ props: a }), i = new ut({
     props: {
       min_height: (
         /*loading_status*/
@@ -1868,7 +1868,7 @@ function Ll(n) {
     },
     p(s, _) {
       var h, p;
-      const c = _ & /*gradio, loading_status*/
+      const u = _ & /*gradio, loading_status*/
       48 ? yl(o, [
         _ & /*gradio*/
         32 && { autoscroll: (
@@ -1887,7 +1887,7 @@ function Ll(n) {
         ),
         o[3]
       ]) : {};
-      t.$set(c);
+      t.$set(u);
       const w = {};
       _ & /*loading_status*/
       16 && (w.min_height = /*loading_status*/
@@ -1907,10 +1907,10 @@ function Ll(n) {
       );
     },
     i(s) {
-      f || (ue(t.$$.fragment, s), ue(i.$$.fragment, s), f = !0);
+      f || (ce(t.$$.fragment, s), ce(i.$$.fragment, s), f = !0);
     },
     o(s) {
-      ce(t.$$.fragment, s), ce(i.$$.fragment, s), f = !1;
+      ue(t.$$.fragment, s), ue(i.$$.fragment, s), f = !1;
     },
     d(s) {
       s && (Ye(e), Ye(l)), re(t, s), re(i);
@@ -1956,10 +1956,10 @@ function Cl(n) {
       318 && (f.$$scope = { dirty: i, ctx: l }), t.$set(f);
     },
     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);
@@ -1969,8 +1969,8 @@ function Cl(n) {
 function Ml(n, t, e) {
   let { label: l } = t, { elem_id: i = "" } = t, { elem_classes: f = [] } = t, { visible: o = !0 } = t, { value: a = "" } = t, { loading_status: r } = t, { gradio: s } = t;
   const _ = () => s.dispatch("change");
-  return n.$$set = (c) => {
-    "label" in c && e(6, l = c.label), "elem_id" in c && e(0, i = c.elem_id), "elem_classes" in c && e(1, f = c.elem_classes), "visible" in c && e(2, o = c.visible), "value" in c && e(3, a = c.value), "loading_status" in c && e(4, r = c.loading_status), "gradio" in c && e(5, s = c.gradio);
+  return n.$$set = (u) => {
+    "label" in u && e(6, l = u.label), "elem_id" in u && e(0, i = u.elem_id), "elem_classes" in u && e(1, f = u.elem_classes), "visible" in u && e(2, o = u.visible), "value" in u && e(3, a = u.value), "loading_status" in u && e(4, r = u.loading_status), "gradio" in u && e(5, s = u.gradio);
   }, n.$$.update = () => {
     n.$$.dirty & /*label, gradio*/
     96 && s.dispatch("change");

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

@@ -1,78 +1,87 @@
 const {
-  SvelteComponent: c,
-  attr: u,
-  detach: r,
+  SvelteComponent: r,
+  append: d,
+  attr: s,
+  detach: u,
   element: o,
-  init: d,
-  insert: g,
+  init: g,
+  insert: m,
   noop: _,
   safe_not_equal: v,
-  toggle_class: s
+  toggle_class: c
 } = window.__gradio__svelte__internal;
 function y(n) {
-  let e;
+  let e, l;
   return {
     c() {
-      e = o("div"), u(e, "class", "prose svelte-180qqaf"), s(
+      e = o("div"), l = o("iframe"), s(l, "title", "iframe component"), s(l, "width", "100%"), s(l, "height", "100%"), s(
+        l,
+        "srcdoc",
+        /*value*/
+        n[0]
+      ), s(l, "allow", ""), s(e, "class", "prose svelte-180qqaf"), c(
         e,
         "table",
         /*type*/
         n[1] === "table"
-      ), s(
+      ), c(
         e,
         "gallery",
         /*type*/
         n[1] === "gallery"
-      ), s(
+      ), c(
         e,
         "selected",
         /*selected*/
         n[2]
       );
     },
-    m(l, t) {
-      g(l, e, t), e.innerHTML = /*value*/
-      n[0];
+    m(t, a) {
+      m(t, e, a), d(e, l);
     },
-    p(l, [t]) {
-      t & /*value*/
-      1 && (e.innerHTML = /*value*/
-      l[0]), t & /*type*/
-      2 && s(
+    p(t, [a]) {
+      a & /*value*/
+      1 && s(
+        l,
+        "srcdoc",
+        /*value*/
+        t[0]
+      ), a & /*type*/
+      2 && c(
         e,
         "table",
         /*type*/
-        l[1] === "table"
-      ), t & /*type*/
-      2 && s(
+        t[1] === "table"
+      ), a & /*type*/
+      2 && c(
         e,
         "gallery",
         /*type*/
-        l[1] === "gallery"
-      ), t & /*selected*/
-      4 && s(
+        t[1] === "gallery"
+      ), a & /*selected*/
+      4 && c(
         e,
         "selected",
         /*selected*/
-        l[2]
+        t[2]
       );
     },
     i: _,
     o: _,
-    d(l) {
-      l && r(e);
+    d(t) {
+      t && u(e);
     }
   };
 }
-function m(n, e, l) {
-  let { value: t } = e, { type: i } = e, { selected: f = !1 } = e;
-  return n.$$set = (a) => {
-    "value" in a && l(0, t = a.value), "type" in a && l(1, i = a.type), "selected" in a && l(2, f = a.selected);
-  }, [t, i, f];
+function h(n, e, l) {
+  let { value: t } = e, { type: a } = e, { selected: f = !1 } = e;
+  return n.$$set = (i) => {
+    "value" in i && l(0, t = i.value), "type" in i && l(1, a = i.type), "selected" in i && l(2, f = i.selected);
+  }, [t, a, f];
 }
-class b extends c {
+class b extends r {
   constructor(e) {
-    super(), d(this, e, m, y, v, { value: 0, type: 1, selected: 2 });
+    super(), g(this, e, h, y, v, { value: 0, type: 1, selected: 2 });
   }
 }
 export {

components/iframe/demo/app.py

@@ -1,14 +1,14 @@
 
 import gradio as gr
-from gradio_iframe import iframe
+from gradio_iframe import iFrame
 
 
-example = iframe().example_inputs()
+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(label="Blank"),  # blank component
+        iFrame(value=example, label="Populated"),  # populated component
 
 
 demo.launch()

components/iframe/dist/gradio_iframe-0.0.1-py3-none-any.whl

@@ -1,3 +1,3 @@
 version https://git-lfs.github.com/spec/v1
-oid sha256:89a65095990947350e91bb27538852ce7f9a856bf20d94ddf5461e5e8bf2e0fe
-size 21918
+oid sha256:351bbf23910152c10119a0d1cb8c84f23d7e4c90c07dcee03631399503a41de8
+size 21979

components/iframe/dist/gradio_iframe-0.0.1.tar.gz

@@ -1,3 +1,3 @@
 version https://git-lfs.github.com/spec/v1
-oid sha256:6ac7a0939e1b5369c1a92a7d162b42b14745715d13b6a7ba4aba421f038a4119
-size 29819
+oid sha256:519057fefe48fb075a818a5a7f44b1a35e5b907606f5038480e618a3e43f75cf
+size 29934

components/iframe/dist/gradio_iframe-0.0.2-py3-none-any.whl

@@ -1,3 +1,3 @@
 version https://git-lfs.github.com/spec/v1
-oid sha256:5570781e268d26cb6caa8e35f7d3e1d52c936c9707d4445b2584397ed128eed7
-size 22030
+oid sha256:aaa68bb5d7a8487586fd80e30306a4a3610dbc685e52026b448fa4de92e18b3f
+size 22702

components/iframe/dist/gradio_iframe-0.0.2.tar.gz

@@ -1,3 +1,3 @@
 version https://git-lfs.github.com/spec/v1
-oid sha256:86beaaa1599a7f6bda48c94b8e955bcb9e7c0659f99a5a95fe11bd5b04acfbe9
-size 29965
+oid sha256:ece16fd992e2a16605c62fa918f670ff0bf49bf9b94d0b97299595303dc0584b
+size 30837

components/iframe/dist/gradio_iframe-0.0.3-py3-none-any.whl

@@ -0,0 +1,3 @@
+version https://git-lfs.github.com/spec/v1
+oid sha256:d1475685f2e4fbf58ff22448fca8fef9150e0f26633f0e94a4edf40eaa82cb12
+size 22716

components/iframe/dist/gradio_iframe-0.0.3.tar.gz

@@ -0,0 +1,3 @@
+version https://git-lfs.github.com/spec/v1
+oid sha256:abd2babf1c9fdb11117e9ba87bdb189ee573bbacdf0b4e6f707aa92b6620036d
+size 30850

components/iframe/frontend/Example.svelte

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

components/iframe/frontend/shared/HTML.svelte

@@ -8,7 +8,6 @@
 	const dispatch = createEventDispatcher<{ change: undefined }>();
 
 	$: value, dispatch("change");
-
 </script>
 
 <div
@@ -16,7 +15,7 @@
 	class:min={min_height}
 	class:hide={!visible}
 >
-	<iframe title="iframe component" width="100%" height="100%" srcdoc={value} allow=""></iframe>
+	<iframe title="iframe component" width="100%" height="100%" srcdoc={value} allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share" allowfullscreen></iframe>
 </div>
 
 <style>

components/iframe/pyproject.toml

@@ -8,8 +8,8 @@ build-backend = "hatchling.build"
 
 [project]
 name = "gradio_iframe"
-version = "0.0.5"
-description = "Enhanced HTML components that display an interactive iframe element."
+version = "0.0.3"
+description = "Experimental empowered iFrame component based on existing HTML gradio component."
 readme = "README.md"
 license = "MIT"
 requires-python = ">=3.8"
@@ -36,7 +36,7 @@ classifiers = [
 dev = ["build", "twine"]
 
 [tool.hatch.build]
-artifacts = ["/backend/gradio_iframe/templates", "*.pyi", "backend/gradio_iframe/templates", "backend/gradio_iframe/templates", "home/lennard/.virtualenvs/thesis/lib/python3.11/site-packages/gradio_iframe/templates", "home/lennard/.virtualenvs/thesis/lib/python3.11/site-packages/gradio_iframe/templates", "home/lennard/.virtualenvs/thesis/lib/python3.11/site-packages/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"]
 
 [tool.hatch.build.targets.wheel]
 packages = ["/backend/gradio_iframe"]

explanation/markup.py

@@ -41,8 +41,6 @@ def markup_text(input_text: list, text_values: ndarray, variant: str):
                 bucket = i
         marked_text.append((text, str(bucket)))
 
-    print(thresholds)
-    print(marked_text)
     return marked_text
 
 

main.py

@@ -8,6 +8,7 @@ from fastapi import FastAPI
 import markdown
 import gradio as gr
 from uvicorn import run
+from gradio_iframe import iFrame
 
 # internal imports
 from backend.controller import interference
@@ -59,7 +60,7 @@ with gr.Blocks(
         # markdown component to display the header
         gr.Markdown("""
             # Thesis Demo - AI Chat Application with GODEL
-            ## XAI powered by SHAP and BERTVIZ
+            ## Interpretability powered by SHAP and BERTVIZ
             ### Select between tabs below for the different views.
             """)
     # ChatBot tab used to chat with the AI chatbot
@@ -73,6 +74,8 @@ with gr.Blocks(
                 including the selection of the model,
                 the system prompt and the XAI method.
 
+                **See Explanations in the accordion above the chat.**
+
                 """)
         # row with columns for the different settings
         with gr.Row(equal_height=True):
@@ -145,7 +148,7 @@ with gr.Blocks(
                     show_label=True,
                 )
         # row with columns for buttons to submit and clear content
-        with gr.Row(elem_classes="border-"):
+        with gr.Row(elem_classes=""):
             with gr.Column(scale=1):
                 # out of the box clear button which clearn the given components (see
                 # documentation: https://www.gradio.app/docs/clearbutton)
@@ -185,14 +188,13 @@ with gr.Blocks(
         with gr.Row():
             gr.Markdown("""
                 ### Get Explanations for Conversations
-                Using your selected XAI method, you can get explanations for
-                the conversation you had with the AI ChatBot. The explanations are
-                based on the last message you sent to the AI ChatBot (see text)
+                Get additional explanations for the last conversation you had with the AI ChatBot.
+                Depending on the selected XAI method, different explanations are available.
                 """)
         # row that displays the generated explanation of the model (if applicable)
         with gr.Row(variant="panel"):
             # wraps the explanation html to display it statically
-            xai_interactive = gr.HTML(
+            xai_interactive = iFrame(
                 label="Static Explanation",
                 value=(
                     '<div style="text-align: center"><h4>No Graphic to Display'
@@ -202,7 +204,7 @@ with gr.Blocks(
             )
         # row and accordion to display an explanation plot (if applicable)
         with gr.Row():
-            with gr.Accordion("Token Explanation Plot", open=False):
+            with gr.Accordion("Token Wise Explanation Plot", open=False):
                 gr.Markdown("""
                 #### Plotted Values
                 Values have been excluded for readability. See colorbar for value indication.

public/about.md

@@ -4,13 +4,20 @@ This is a non-commercial research projects as part of a Bachelor Thesis with the
 
 This research tackles the rise of LLM based applications such a chatbots and explores the possibilities of model interpretation and explainability. The goal is to build a tool that can be used to explain the predictions of a LLM based chatbot.
 
+## Links
+
+- [GitHub Repository](https://github.com/LennardZuendorf/thesis-webapp) - The GitHub repository of this project.
+- [HTW Berlin](https://www.htw-berlin.de/) - The University I have built this project for, as part of my thesis.
+- [Thesis Print]() - Link to the thesis pdf (in English), containing more information about the project. And a full list of sources for this work as well as additional evaluations and fundamental information for the project.
+
+
 ## Implementation
 
 This project is an implementation of PartitionSHAP and BERTViz into GODEL by Microsoft - [GODEL Model](https://huggingface.co/microsoft/GODEL-v1_1-large-seq2seq) which is a generative seq2seq transformer fine-tuned for goal directed dialog. It supports context and knowledge base inputs.
 
 The UI is build with Gradio.
 
-## Usage
+### Usage
 
 You can chat with the model by entering a message into the input field and pressing enter. The model will then generate a response. You can also enter a context and knowledge base by clicking on the respective buttons and entering the data into the input fields. The model will then generate a response based on the context and knowledge base.
 
@@ -18,7 +25,7 @@ To explore explanations, chose one of the explanations methods (HINT: The runtim
 
 ### Self Hosted
 
-You can run this application locally by cloning this repository, setting up a python environment and installing the requirements. Then run the `app.py` file or use "uvicorn main:app --reload" in the *python terminal*.
+You can run this application locally by cloning this repository, setting up a python environment and installing the requirements from the requirements.txt. Then run the `app.py` file or use "uvicorn main:app --reload" in the *python terminal*.
 
 For self-hosting you can use the Dockerfile to build a docker image and run it locally or directly use the provided docker image on the [GitHub page](https://github.com/lennardzuendorf/thesis-webapp/).
 
@@ -37,7 +44,7 @@ Please credit the original authors of this project (Lennard Zündorf) and the cr
 - [LinkedIn](https://www.zuendorf.me/linkd)
 
 
-#### University
+### University
 Hochschule für Technik und Wirtschaft Berlin (HTW Berlin) - University of Applied Sciences for Engineering and Economics Berlin
 
 1. Supervisor: Prof. Dr. Katarina Simbeck

public/credits_dataprotection_license.md

@@ -1,8 +1,3 @@
-# Links
-
-- [GitHub Repository](https://github.com/LennardZuendorf/thesis-webapp) - The GitHub repository of this project.
-- [HTW Berlin](https://www.htw-berlin.de/) - The University I have built this project for, as part of my thesis.
-- [Thesis Print]() - Link to the thesis pdf (in English), containing more information about the project. And a full list of sources for this work as well as additional evaluations and fundamental information for the project.
 
 
 # Credits

requirements.txt

@@ -16,3 +16,4 @@ numpy
 matplotlib
 pre-commit
 ipython
+gradio-iframe