https://www.jeiks.net/copycat-cnn-explainer/bundle.js

1var app=function(){"use strict";function t(){}function e(t){return t()}function a(){return Object.create(null)}function l(t){t.forEach(e)}function n(t){return"function"==typeof t}function s(t,e){return t!=t?e==e:t!==e||t&&"object"==typeof t||"function"==typeof t}let o,r;function i(t,e){return o||(o=document.createElement("a")),o.href=e,t===o.href}function c(t,e){t.appendChild(e)}function d(t,e,a){t.insertBefore(e,a||null)}function g(t){t.parentNode&&t.parentNode.removeChild(t)}function p(t,e){for(let a=0;a<t.length;a+=1)t[a]&&t[a].d(e)}function u(t){return document.createElement(t)}function y(t){return document.createElementNS("http://www.w3.org/2000/svg",t)}function h(t){return document.createTextNode(t)}function m(){return h(" ")}function f(){return h("")}function x(t,e,a,l){return t.addEventListener(e,a,l),()=>t.removeEventListener(e,a,l)}function v(t,e,a){null==a?t.removeAttribute(e):t.getAttribute(e)!==a&&t.setAttribute(e,a)}function b(t,e){e=""+e,t.wholeText!==e&&(t.data=e)}function $(t,e){t.value=null==e?"":e}function k(t,e,a,l){null===a?t.style.removeProperty(e):t.style.setProperty(e,a,l?"important":"")}function w(t,e){for(let a=0;a<t.options.length;a+=1){const l=t.options[a];if(l.__value===e)return void(l.selected=!0)}t.selectedIndex=-1}function I(t){const e=t.querySelector(":checked")||t.options[0];return e&&e.__value}function L(t,e,a){t.classList[a?"add":"remove"](e)}function M(t){r=t}function A(){if(!r)throw new Error("Function called outside component initialization");return r}function R(t){A().$$.on_mount.push(t)}function E(t){A().$$.after_update.push(t)}function C(){const t=A();return(e,a,{cancelable:l=!1}={})=>{const n=t.$$.callbacks[e];if(n){const s=function(t,e,{bubbles:a=!1,cancelable:l=!1}={}){const n=document.createEvent("CustomEvent");return n.initCustomEvent(t,a,l,e),n}(e,a,{cancelable:l});return n.slice().forEach(e=>{e.call(t,s)}),!s.defaultPrevented}return!0}}const S=[],N=[],_=[],H=[],O=Promise.resolve();let T=!1;function P(t){_.push(t)}const X=new Set;let z=0;function F(){if(0!==z)return;const t=r;do{try{for(;z<S.length;){const t=S[z];z++,M(t),B(t.$$)}}catch(t){throw S.length=0,z=0,t}for(M(null),S.length=0,z=0;N.length;)N.pop()();for(let t=0;t<_.length;t+=1){const e=_[t];X.has(e)||(X.add(e),e())}_.length=0}while(S.length);for(;H.length;)H.pop()();T=!1,X.clear(),M(t)}function B(t){if(null!==t.fragment){t.update(),l(t.before_update);const e=t.dirty;t.dirty=[-1],t.fragment&&t.fragment.p(t.ctx,e),t.after_update.forEach(P)}}const G=new Set;let j;function q(){j={r:0,c:[],p:j}}function V(){j.r||l(j.c),j=j.p}function D(t,e){t&&t.i&&(G.delete(t),t.i(e))}function W(t,e,a,l){if(t&&t.o){if(G.has(t))return;G.add(t),j.c.push(()=>{G.delete(t),l&&(a&&t.d(1),l())}),t.o(e)}else l&&l()}function Y(t){t&&t.c()}function K(t,a,s,o){const{fragment:r,after_update:i}=t.$$;r&&r.m(a,s),o||P(()=>{const a=t.$$.on_mount.map(e).filter(n);t.$$.on_destroy?t.$$.on_destroy.push(...a):l(a),t.$$.on_mount=[]}),i.forEach(P)}function U(t,e){const a=t.$$;null!==a.fragment&&(l(a.on_destroy),a.fragment&&a.fragment.d(e),a.on_destroy=a.fragment=null,a.ctx=[])}function J(t,e){-1===t.$$.dirty[0]&&(S.push(t),T||(T=!0,O.then(F)),t.$$.dirty.fill(0)),t.$$.dirty[e/31|0]|=1<<e%31}function Q(e,n,s,o,i,c,d,p=[-1]){const u=r;M(e);const y=e.$$={fragment:null,ctx:[],props:c,update:t,not_equal:i,bound:a(),on_mount:[],on_destroy:[],on_disconnect:[],before_update:[],after_update:[],context:new Map(n.context||(u?u.$$.context:[])),callbacks:a(),dirty:p,skip_bound:!1,root:n.target||u.$$.root};d&&d(y.root);let h=!1;if(y.ctx=s?s(e,n.props||{},(t,a,...l)=>{const n=l.length?l[0]:a;return y.ctx&&i(y.ctx[t],y.ctx[t]=n)&&(!y.skip_bound&&y.bound[t]&&y.bound[t](n),h&&J(e,t)),a}):[],y.update(),h=!0,l(y.before_update),y.fragment=!!o&&o(y.ctx),n.target){if(n.hydrate){const t=function(t){return Array.from(t.childNodes)}(n.target);y.fragment&&y.fragment.l(t),t.forEach(g)}else y.fragment&&y.fragment.c();n.intro&&D(e.$$.fragment),K(e,n.target,n.anchor,n.customElement),F()}M(u)}class Z{$destroy(){U(this,1),this.$destroy=t}$on(e,a){if(!n(a))return t;const l=this.$$.callbacks[e]||(this.$$.callbacks[e]=[]);return l.push(a),()=>{const t=l.indexOf(a);-1!==t&&l.splice(t,1)}}$set(t){var e;this.$$set&&(e=t,0!==Object.keys(e).length)&&(this.$$.skip_bound=!0,this.$$set(t),this.$$.skip_bound=!1)}}const tt=[];function et(e,a=t){let l;const n=new Set;function o(t){if(s(e,t)&&(e=t,l)){const t=!tt.length;for(const t of n)t[1](),tt.push(t,e);if(t){for(let t=0;t<tt.length;t+=2)tt[t][0](tt[t+1]);tt.length=0}}}return{set:o,update:function(t){o(t(e))},subscribe:function(s,r=t){const i=[s,r];return n.add(i),1===n.size&&(l=a(o)||t),s(e),()=>{n.delete(i),0===n.size&&(l(),l=null)}}}}const at=et([]),lt=et(void 0),nt=et(void 0),st=et(void 0),ot=et([]),rt=et(void 0),it=et({}),ct=et([]),dt=et([void 0,void 0]),gt=et(!0),pt=et(!1),ut=et(!1),yt=et({}),ht=et(!1),mt=et({}),ft=et({}),xt=et({}

1),vt=et([]),bt=et(void 0),$t=et(void 0),kt=et(void 0),wt=et([]),It=et(void 0),Lt=et({}),Mt=et([]),At=et([void 0,void 0]),Rt=et(!0),Et=et(!1),Ct=et(!1),St=et({}),Nt=et(!1),_t=et({}),Ht=et({}),Ot=et({}),Tt=(t,e,a)=>{let l=[];for(let n=0;n<t;n++){let t=new Array(e).fill(a);l.push(t)}return l},Pt=(t,e)=>{console.assert(t.length===e.length,"Dimension not matching"),console.assert(t[0].length===e[0].length,"Dimension not matching");let a=0;for(let l=0;l<t.length;l++)for(let n=0;n<t[0].length;n++)a+=t[l][n]*e[l][n];return a},Xt=(t,e,a,l,n)=>t.slice(e,a).map(t=>t.slice(l,n)),zt=t=>{let e=-1/0;for(let a=0;a<t.length;a++)for(let l=0;l<t[0].length;l++)t[a][l]>e&&(e=t[a][l]);return e},Ft=(t,e,a=1,l=0)=>{console.assert(t.length===t[0].length,"Conv input is not square"),console.assert(e.length===e[0].length,"Conv kernel is not square");let n=(t.length-e.length)/a+1,s=Tt(n,n,0);for(let l=0;l<n;l++)for(let o=0;o<n;o++){let n=Xt(t,l*a,l*a+e.length,o*a,o*a+e.length),r=Pt(n,e);s[l][o]=r}return s},Bt=(t,e=2,a=2,l="VALID")=>{console.assert(2===e,"Only supports kernen = [2,2]"),console.assert(2===a,"Only supports stride = 2"),console.assert("VALID"===l,"Only support valid padding"),t.length%2==1&&"VALID"===l&&(t=Xt(t,0,t.length-1,0,t.length-1));let n=(t.length-e)/a+1,s=Tt(n,n,0);for(let l=0;l<n;l++)for(let o=0;o<n;o++){let n=Xt(t,l*a,l*a+e,o*a,o*a+e);s[l][o]=zt(n)}return s};function Gt(t,e){return Array.from({length:t},e?(t,a)=>e(a):void 0)}function jt(t,e,a){return Array.from({length:t},(t,l)=>Array.from({length:e},a?(t,e)=>a(l,e):void 0))}function qt(t,e,a,l,n){const s=jt(e.length,e.length,(t,e)=>jt(a,a));for(let o=0;o<e.length;o++)for(let r=0;r<e.length;r++)for(let e=0;e<a;e++)for(let i=0;i<a;i++){const a=o*t+e*n,c=r*t+i*n;s[o][r][e][i]=a*l+c}return s}function Vt(t,e,a,l,n,s){const o=Gt(a*a);for(let a=0;a<s;a++)for(let l=0;l<s;l++){const s=n[t][e][a][l];void 0!==s&&(o[s]=[a,l])}return o}function Dt(t,e,a){var l=e.reduce((t,e,a)=>(null!=e&&t.push(a),t),[]);return Xt(t,Math.floor(l[0]/t.length),Math.floor(l[0]/t.length)+a,l[0]%t.length,l[0]%t.length+a)}function Wt(t,e){var a=e.reduce((t,e,a)=>(0!=e&&t.push(a),t),[]);return Xt(t,Math.floor(a[0]/t.length),Math.floor(a[0]/t.length)+1,a[0]%t.length,a[0]%t.length+1)}function Yt(t){return 150/t>20?20:150/t}function Kt(t){let e=t.map((function(t){return Math.max.apply(Math,t)})),a=Math.max.apply(null,e),l=t.map((function(t){return Math.min.apply(Math,t)})),n=Math.min.apply(null,l);return{range:2*Math.max(Math.abs(n),Math.abs(a)),min:n,max:a}}function Ut(t,e=Yt(t.length)){for(var a=new Array,l=1,n=1,s=e,o=e,r=0;r<t.length;r++){a.push(new Array);for(var i=0;i<t[0].length;i++)a[r].push({text:Math.round(100*t[r][i])/100,row:r,col:i,x:l,y:n,width:s,height:o}),l+=s;l=1,n+=o}return a}function Jt(e){let a;return{c(){a=u("div"),a.innerHTML='<svg id="grid" width="100%" height="100%"></svg>',k(a,"display","inline-block"),k(a,"vertical-align","middle"),v(a,"class","grid")},m(t,l){d(t,a,l),e[10](a)},p:t,i:t,o:t,d(t){t&&g(a),e[10](null)}}}function Qt(t,e,a){let l,{data:n}=e,{highlights:s}=e,{isKernelMath:o}=e,{constraint:r}=e,{dataRange:i}=e,{outputLength:c}=e,{stride:d}=e,{colorScale:g=d3.interpolateRdBu}=e,{isInputLayer:p=!1}=e;const u=C();let y=s,h=n;const m=()=>{d3.select(l).selectAll("#grid > *").remove();const t=n.length*r+2;var e=d3.select(l).select("#grid").attr("width",t+"px").attr("height",t+"px").append("svg").attr("width",t+"px").attr("height",t+"px").selectAll(".row").data(n).enter().append("g").attr("class","row");e.selectAll(".square").data((function(t){return t})).enter().append("rect").attr("class","square").attr("x",(function(t){return t.x})).attr("y",(function(t){return t.y})).attr("width",(function(t){return t.width})).attr("height",(function(t){return t.height})).style("opacity",.8).style("fill",(function(t){let e=t.text;return e=p?1-t.text:(t.text+i/2)/i,g(e)})).on("mouseover",(function(t){n.length!=c?u("message",{hoverH:Math.min(Math.floor(t.row/d),c-1),hoverW:Math.min(Math.floor(t.col/d),c-1)}):u("message",{hoverH:Math.min(Math.floor(t.row/1),c-1),hoverW:Math.min(Math.floor(t.col/1),c-1)})}));if(o)e.selectAll(".text").data((function(t){return t})).enter().append("text").attr("class","text").style("font-size",Math.floor(r/2.6)+"px").attr("x",(function(t){return t.x+t.width/2})).attr("y",(function(t){return t.y+t.height/2})).style("fill",(function(t){let e=t.text;return e=p?1-t.text:(t.text+i/2)/i,e<.2||e>.8?"white":"black"})).style("text-anchor","middle").style("dominant-baseline","middle").text((function(t){return t.text.toString().replace("-","－")}))};return E(()=>{(n!=h&&(m(),h=n),s!=y)&&(d3.select(l).select("#grid").select("svg").selectAll(".square").style("stroke",t=>o||s.length&&s[t.row*n.length+t.col]?"black":null),y=s)}),R(()=>{m()}),t.$$set=t=>{"data"in t&&a(1,n=t.data),"highlights"in t&&a(2,s=t.highlights),"isKernelMath"in t&&a(3,o=t.isKernelMath),"constraint"in t&&a(4,r=t.constraint),"dataRange"in t&&a(5,i=t.dataRange),"outputLength"in t&&a(6,c=t.outputLength),"stride"in t&&a(7,d=t.stride),"colorScale"in t&&a(8,g=t.colorScale),"isInputLayer"in t&&a(9,p=t.isInputLayer)},[l,n,s,o,r,i,c,d,g,p,function(t){N[t?"unshift":"push"](()=>{l=t,a(0,l)})}]}class Zt extends Z{constructor(t){super(),Q(this,t,Qt,Jt,s,{data:1,highlights:2,isKernelMath:3,constraint:4,dataRange:5,outputLength:6,stride:7,colorScale:8,isInputLayer:9})}}function te(e){let a,l,n;return{c(){a=u("div"),l=m(),n=u("div"),n.innerHTML='<svg id="grid" width="100%" height="100%"></svg>',v(a,"class","legend"),v(n,"class","grid")},m(t,s){d(t,a,s),e[10](a),d(t,l,s),d(t,n,s),e[11](n)},p:t,i:t,o:t,d(t){t&&g(a),e[10](null),t&&g(l),t&&g(n),e[11](null)}}}

1function ee(t,e,a){let l,n,{data:s}=e,{kernel:o}=e,{constraint:r}=e,{dataRange:i}=e,{kernelRange:c}=e,{colorScale:d=d3.interpolateRdBu}=e,{kernelColorScale:g=d3.interpolateBrBG}=e,{isInputLayer:p=!1}=e;const u=Math.floor(r/3);let y=s;const h=()=>{d3.select(l).selectAll("#grid > *").remove();const t=o?s.length*r*2+2:s.length*r+2;var e=d3.select(l).select("#grid").attr("width",t+"px").attr("height",t+"px").append("svg").attr("width",t+"px").attr("height",t+"px").selectAll(".row").data(s).enter().append("g").attr("class","row"),a=e.selectAll(".square").data((function(t){return t})).enter();a.append("rect").attr("class","square").attr("x",(function(t){return 1===t.x?t.x+u:2*t.x+u})).attr("y",(function(t){return 1===t.y?t.y:2*t.y})).attr("width",(function(t){return t.width})).attr("height",(function(t){return t.height})).style("opacity",.5).style("fill",(function(t){let e=t.text;return e=p?1-t.text:(t.text+i/2)/i,d(e)})).style("stroke","black"),a.append("rect").attr("class","square").attr("x",(function(t){return 1===t.x?t.x+u:2*t.x+u})).attr("y",(function(t){return 1===t.y?t.y+t.height:2*t.y+t.height})).attr("width",(function(t){return t.width})).attr("height",(function(t){return t.height/2})).style("opacity",.5).style("fill",(function(t){let e=(o[t.row][t.col].text+c.range/2)/c.range;return g(.6*e+.2)}));var n=e.selectAll(".text").data((function(t){return t})).enter();n.append("text").attr("class","text").style("font-size",Math.floor(r/2.6)+"px").attr("x",(function(t){return 1===t.x?t.x+t.width/2+u:2*t.x+t.width/2+u})).attr("y",(function(t){return 1===t.y?t.y+t.height/2:2*t.y+t.height/2})).style("fill",(function(t){let e=t.text;return e=p?1-t.text:(t.text+i/2)/i,e<.2||e>.8?p&&e<.2?"black":"white":"black"})).style("text-anchor","middle").style("dominant-baseline","middle").text((function(t){return t.text})),n.append("text").attr("class","text").style("font-size",Math.floor(r/2.6)+"px").attr("font-weight",600).attr("x",(function(t){return 1===t.x?t.x+u/2:2*t.x+u/2})).attr("y",(function(t){return 1===t.y?t.y+t.height+t.height/4:2*t.y+t.height+t.height/4})).style("fill","black").style("text-anchor","middle").style("dominant-baseline","middle").text((function(t){return"×"})),n.append("text").attr("class","text").style("font-size",Math.floor(r/2.6)+"px").attr("x",(function(t){return 1===t.x?t.x+t.width/2+u:2*t.x+t.width/2+u})).attr("y",(function(t){return 1===t.y?t.y+t.height+t.height/4:2*t.y+t.height+t.height/4})).style("fill",(function(t){let e=.6*((o[t.row][t.col].text+c.range/2)/c.range)+.2;return e<.2||e>.8?"white":"black"})).style("text-anchor","middle").style("dominant-baseline","middle").text((function(t){return o[t.row][t.col].text})),n.append("text").attr("class","text").style("font-size",Math.floor(r/1.6)+"px").attr("x",(function(t){return 1===t.x?t.x+t.width+t.width/2+u:2*t.x+t.width+t.width/2+u})).attr("y",(function(t){return 1===t.y?t.y+t.height/2:2*t.y+t.height/2})).style("text-anchor","middle").style("dominant-baseline","middle").text((function(t){return t.row==o.length-1&&t.col==o.length-1?"=":"+"}))};return E(()=>{s!=y&&(h(),y=s)}),R(()=>{h()}),t.$$set=t=>{"data"in t&&a(2,s=t.data),"kernel"in t&&a(3,o=t.kernel),"constraint"in t&&a(4,r=t.constraint),"dataRange"in t&&a(5,i=t.dataRange),"kernelRange"in t&&a(6,c=t.kernelRange),"colorScale"in t&&a(7,d=t.colorScale),"kernelColorScale"in t&&a(8,g=t.kernelColorScale),"isInputLayer"in t&&a(9,p=t.isInputLayer)},[l,n,s,o,r,i,c,d,g,p,function(t){N[t?"unshift":"push"](()=>{n=t,a(1,n)})},function(t){N[t?"unshift":"push"](()=>{l=t,a(0,l)})}]}class ae extends Z{constructor(t){super(),Q(this,t,ee,te,s,{data:2,kernel:3,constraint:4,dataRange:5,kernelRange:6,colorScale:7,kernelColorScale:8,isInputLayer:9})}}function le(t){let e,a,l,n,s,o,r,i,p,y,f,x,$,k,w,I,L,M,A,R,E,C,S,N,_,H=t[2].length+"",O=t[2][0].length+"",T=t[3].length+"",P=t[3][0].length+"";return p=new Zt({props:{data:t[11],highlights:t[7],outputLength:t[3].length,isKernelMath:!1,constraint:Yt(t[2].length),dataRange:t[4],stride:t[0],colorScale:t[5],isInputLayer:t[6]}}),p.$on("message",t[14]),x=new ae({props:{data:t[9],kernel:t[13],constraint:Yt(t[1].length),dataRange:t[4],kernelRange:Kt(t[1]),c

1olorScale:t[5],isInputLayer:t[6]}}),k=new Zt({props:{data:t[10],highlights:t[8],isKernelMath:!0,constraint:Yt(t[1].length),dataRange:t[4]}}),N=new Zt({props:{data:t[12],highlights:t[8],isKernelMath:!1,outputLength:t[3].length,constraint:Yt(t[3].length),dataRange:t[4],stride:t[0]}}),N.$on("message",t[14]),{c(){e=u("div"),a=u("div"),l=h("Input ("),n=h(H),s=h(", "),o=h(O),r=h(")"),i=m(),Y(p.$$.fragment),y=m(),f=u("div"),Y(x.$$.fragment),$=m(),Y(k.$$.fragment),w=m(),I=u("div"),L=u("div"),M=h("Output ("),A=h(T),R=h(", "),E=h(P),C=h(")"),S=m(),Y(N.$$.fragment),v(a,"class","header-text"),v(e,"class","column has-text-centered svelte-gz7a6i"),v(f,"class","column has-text-centered svelte-gz7a6i"),v(L,"class","header-text"),v(I,"class","column has-text-centered svelte-gz7a6i")},m(t,g){d(t,e,g),c(e,a),c(a,l),c(a,n),c(a,s),c(a,o),c(a,r),c(e,i),K(p,e,null),d(t,y,g),d(t,f,g),K(x,f,null),c(f,$),K(k,f,null),d(t,w,g),d(t,I,g),c(I,L),c(L,M),c(L,A),c(L,R),c(L,E),c(L,C),c(I,S),K(N,I,null),_=!0},p(t,[e]){(!_||4&e)&&H!==(H=t[2].length+"")&&b(n,H),(!_||4&e)&&O!==(O=t[2][0].length+"")&&b(o,O);const a={};2048&e&&(a.data=t[11]),128&e&&(a.highlights=t[7]),8&e&&(a.outputLength=t[3].length),4&e&&(a.constraint=Yt(t[2].length)),16&e&&(a.dataRange=t[4]),1&e&&(a.stride=t[0]),32&e&&(a.colorScale=t[5]),64&e&&(a.isInputLayer=t[6]),p.$set(a);const l={};512&e&&(l.data=t[9]),8192&e&&(l.kernel=t[13]),2&e&&(l.constraint=Yt(t[1].length)),16&e&&(l.dataRange=t[4]),2&e&&(l.kernelRange=Kt(t[1])),32&e&&(l.colorScale=t[5]),64&e&&(l.isInputLayer=t[6]),x.$set(l);const s={};1024&e&&(s.data=t[10]),256&e&&(s.highlights=t[8]),2&e&&(s.constraint=Yt(t[1].length)),16&e&&(s.dataRange=t[4]),k.$set(s),(!_||8&e)&&T!==(T=t[3].length+"")&&b(A,T),(!_||8&e)&&P!==(P=t[3][0].length+"")&&b(E,P);const r={};4096&e&&(r.data=t[12]),256&e&&(r.highlights=t[8]),8&e&&(r.outputLength=t[3].length),8&e&&(r.constraint=Yt(t[3].length)),16&e&&(r.dataRange=t[4]),1&e&&(r.stride=t[0]),N.$set(r)},i(t){_||(D(p.$$.fragment,t),D(x.$$.fragment,t),D(k.$$.fragment,t),D(N.$$.fragment,t),_=!0)},o(t){W(p.$$.fragment,t),W(x.$$.fragment,t),W(k.$$.fragment,t),W(N.$$.fragment,t),_=!1},d(t){t&&g(e),U(p),t&&g(y),t&&g(f),U(x),U(k),t&&g(w),t&&g(I),U(N)}}}function ne(t,e,a){let{stride:l}=e,{dilation:n}=e,{kernel:s}=e,{image:o}=e,{output:r}=e,{isPaused:i}=e,{dataRange:c}=e,{colorScale:d}=e,{isInputInputLayer:g=!1}=e;const p=C();let u=o.length+0,y=[];for(let t=0;t<s.length;t++){y.push([]);for(let e=0;e<s.length;e++)y[t].push(0)}y=Ut(y);let h,m,f=Ut([0]),x=[],v=Gt(r.length*r.length,t=>!0);function b(t){m=0;let e=qt(t,r,s.length,u,n);t<=0||(h&&clearInterval(h),a(17,h=setInterval(()=>{if(i)return;const t=m%(r.length*r.length);a(8,v=Gt(r.length*r.length,t=>!1));const l=Math.floor(t/r.length),n=t%r.length;a(8,v[l*r.length+n]=!0,v),a(7,x=Vt(l,n,u,s.length,e,s.length));const c=Dt(o,x,s.length);a(9,y=Ut(c));const d=Wt(r,v);a(10,f=Ut(d)),m++},250)))}b(l);let $=Ut(o),k=Ut(r),w=Ut(s);return t.$$set=t=>{"stride"in t&&a(0,l=t.stride),"dilation"in t&&a(16,n=t.dilation),"kernel"in t&&a(1,s=t.kernel),"image"in t&&a(2,o=t.image),"output"in t&&a(3,r=t.output),"isPaused"in t&&a(15,i=t.isPaused),"dataRange"in t&&a(4,c=t.dataRange),"colorScale"in t&&a(5,d=t.colorScale),"isInputInputLayer"in t&&a(6,g=t.isInputInputLayer)},t.$$.update=()=>{if(4&t.$$.dirty&&(u=o.length+0),8&t.$$.dirty){Gt(r.length*r.length,t=>!0)}15&t.$$.dirty&&(b(l),a(11,$=Ut(o)),a(12,k=Ut(r)),a(13,w=Ut(s)))},[l,s,o,r,c,d,g,x,v,y,f,$,k,w,function(t){let e=qt(l,r,s.length,u,n);a(8,v=Gt(r.length*r.length,t=>!1));const c=t.detail.hoverH,d=t.detail.hoverW;a(8,v[c*r.length+d]=!0,v),a(7,x=Vt(c,d,u,s.length,e,s.length));const g=Dt(o,x,s.length);a(9,y=Ut(g));const h=Wt(r,v);a(10,f=Ut(h)),a(15,i=!0),p("message",{text:i})},i,n,h]}class se extends Z{constructor(t){super(),Q(this,t,ne,le,s,{stride:0,dilation:16,kernel:1,image:2,output:3,isPaused:15,dataRange:4,colorScale:5,isInputInputLayer:6})}}function oe(t){let e,a,n,s,o,r,i,p,y,h,f,b,$,k,w,I,L,M,A,R=t[6]?'<i class="fas fa-play-circle play-icon"></i>':'<i class="fas fa-pause-circle"></i>';return k=new se({props:{kernel:t[2],image:t[1],output:t[7],stride:ie,dilation:ce,isPaused:t[6],dataRange:t[3],colorScale:t[4],isInputInputLayer:t[5]}}),k.$on("message",t[9]),{c(){e=u("div"),a=u("div"),n=u("div"),s=u("div"),s.textContent="Convolution",o=m(),r=u("div"),i=u("div"),i.innerHTML='<i class="fas fa-info-circle"></i>',p=m(),y=u("div"),h=m(),f=u("div"),f.innerHTML='<i class="fas control-icon fa-times-circle"></i>',b=m(),$=u("div"),Y(k.$$.fragment),w=m(),I=u("div"),I.innerHTML='<img src="/copycat-cnn-explainer/assets/img/pointer.svg" alt="pointer icon" class="svelte-1j8mhv0"/> \n        <div class="annotation-text"><span style="font-weight:600">Hover over</span> the matrices to change kernel position.</div>',v(s,"class","title-text svelte-1j8mhv0"),v(i,"class","control-button svelte-1j8mhv0"),v(i,"title","Jump to article section"),v(y,"class","play-button control-button svelte-1j8mhv0"),v(y,"title","Play animation"),v(f,"class","delete-button control-button svelte-1j8mhv0"),v(f,"title","Close"),v(r,"class","buttons svelte-1j8mhv0"),v(n,"class","control-pannel svelte-1j8mhv0"),v($,"class","container is-centered svelte-1j8mhv0"),v(I,"class","annotation svelte-1j8mhv0"),v(a,"class","box svelte-1j8mhv0"),v(e,"class","container svelte-1j8mhv0"),v(e,"id","detailview-container")},m(l,g){d(l,e,g),c(e,a),c(a,n),c(n,s),c(n,o),c(n,r),c(r,i),c(r,p),c(r,y),y.innerHTML=R,c(r,h),c(r,f),c(a,b),c(a,$),K(k,$,null),c(a,w),c(a,I),L=!0,M||(A=[x(i,"click",de),x(y,"click",t[8]),x(f,"click",t[10])],M=!0)},p(t,e){(!L||64&e)&&R!==(R=t[6]?'<i class="fas fa-play-circle play-icon"></i>':'<i class="fas fa-pause-circle"></i>')&&(y.innerHTML=R);const a={};4&e&&(a.kernel=t[2]),2&e&&(a.image=t[1]),128&e&&(a.output=t[7]),64&e&&(a.isPaused=t[6]),8&e&&(a.dataRange=t[3]),16&e&&(a.colorScale=t[4]),32&e&&(a.isInputInputLayer=t[5]),k.$set(a)},i(t){L||(D(k.$$.fragment,t),L=!0)},o(t){W(k.$$.fragment,t),L=!1},d(t){t&&g(e),U(k),M=!1,l(A)}}}function re(t){let e,a,l=!t[0]&&oe(t);return{c(){l&&l.c(),e=f()},m(t,n){l&&l.m(t,n),d(t,e,n),a=!0},p(t,[a]){t[0]?l&&(q(),W(l,1,1,()=>{l=null}),V()):l?(l.p(t,a),1&a&&D(l,1)):(l=oe(t),l.c(),D(l,1),l.m(e.parentNode,e))},i(t){a||(D(l),a=!0)},o(t){W(l),a=!1},d(t){l&&l.d(t),t&&g(e)}}}let ie=1;const ce=1;function de(){let t=Number(d3.select("#cnn-svg").style("height").replace("px",""))+150,e=new SmoothScroll('a[href*="#"]',{offset:-t}),a=document.querySelector("#article-convolution");e.animateScroll(a)}

1function ge(t,e,a){let{input:l}=e,{kernel:n}=e,{dataRange:s}=e,{colorScale:o=d3.interpolateRdBu}=e,{isInputInputLayer:r=!1}=e,{isExited:i=!1}=e;const c=C();var d=!1,g=Ft(l,n,ie);return t.$$set=t=>{"input"in t&&a(1,l=t.input),"kernel"in t&&a(2,n=t.kernel),"dataRange"in t&&a(3,s=t.dataRange),"colorScale"in t&&a(4,o=t.colorScale),"isInputInputLayer"in t&&a(5,r=t.isInputInputLayer),"isExited"in t&&a(0,i=t.isExited)},t.$$.update=()=>{if(6&t.$$.dirty)try{a(7,g=Ft(l,n,ie))}catch{console.log("Cannot handle stride of "+ie)}},[i,l,n,s,o,r,d,g,function(){a(6,d=!d)},function(t){a(6,d=t.detail.text)},function(){a(0,i=!0),c("message",{text:i})}]}class pe extends Z{constructor(t){super(),Q(this,t,ge,re,s,{input:1,kernel:2,dataRange:3,colorScale:4,isInputInputLayer:5,isExited:0})}}function ue(t){let e,a,l,n,s,o,r,i,p,y,f,x,$,k,w,I,L,M,A,R,E,C,S,N,_,H,O,T,P,X=t[0].length+"",z=t[0][0].length+"",F=t[1].length+"",B=t[1][0].length+"";return p=new Zt({props:{data:t[7],highlights:t[3],outputLength:t[1].length,isKernelMath:!1,constraint:Yt(t[0].length),dataRange:t[2],stride:1}}),p.$on("message",t[9]),k=new Zt({props:{data:Ut([[0]]),highlights:t[4],isKernelMath:!0,constraint:20,dataRange:t[2]}}),I=new Zt({props:{data:t[5],highlights:t[4],isKernelMath:!0,constraint:20,dataRange:t[2]}}),M=new Zt({props:{data:t[6],highlights:t[4],isKernelMath:!0,constraint:20,dataRange:t[2]}}),T=new Zt({props:{data:t[8],highlights:t[4],isKernelMath:!1,outputLength:t[1].length,constraint:Yt(t[1].length),dataRange:t[2],stride:1}}),T.$on("message",t[9]),{c(){e=u("div"),a=u("div"),l=h("Input ("),n=h(X),s=h(", "),o=h(z),r=h(")"),i=m(),Y(p.$$.fragment),y=m(),f=u("div"),x=u("span"),$=h("max(\n    "),Y(k.$$.fragment),w=h("\n    ,\n    "),Y(I.$$.fragment),L=h("\n    )\n    =\n    "),Y(M.$$.fragment),A=m(),R=u("div"),E=u("div"),C=h("Output ("),S=h(F),N=h(", "),_=h(B),H=h(")"),O=m(),Y(T.$$.fragment),v(a,"class","header-text"),v(e,"class","column has-text-centered svelte-gz7a6i"),v(f,"class","column has-text-centered svelte-gz7a6i"),v(E,"class","header-text"),v(R,"class","column has-text-centered svelte-gz7a6i")},m(t,g){d(t,e,g),c(e,a),c(a,l),c(a,n),c(a,s),c(a,o),c(a,r),c(e,i),K(p,e,null),d(t,y,g),d(t,f,g),c(f,x),c(x,$),K(k,x,null),c(x,w),K(I,x,null),c(x,L),K(M,x,null),d(t,A,g),d(t,R,g),c(R,E),c(E,C),c(E,S),c(E,N),c(E,_),c(E,H),c(R,O),K(T,R,null),P=!0},p(t,[e]){(!P||1&e)&&X!==(X=t[0].length+"")&&b(n,X),(!P||1&e)&&z!==(z=t[0][0].length+"")&&b(o,z);const a={};128&e&&(a.data=t[7]),8&e&&(a.highlights=t[3]),2&e&&(a.outputLength=t[1].length),1&e&&(a.constraint=Yt(t[0].length)),4&e&&(a.dataRange=t[2]),p.$set(a);const l={};16&e&&(l.highlights=t[4]),4&e&&(l.dataRange=t[2]),k.$set(l);const s={};32&e&&(s.data=t[5]),16&e&&(s.highlights=t[4]),4&e&&(s.dataRange=t[2]),I.$set(s);const r={};64&e&&(r.data=t[6]),16&e&&(r.highlights=t[4]),4&e&&(r.dataRange=t[2]),M.$set(r),(!P||2&e)&&F!==(F=t[1].length+"")&&b(S,F),(!P||2&e)&&B!==(B=t[1][0].length+"")&&b(_,B);const i={};256&e&&(i.data=t[8]),16&e&&(i.highlights=t[4]),2&e&&(i.outputLength=t[1].length),2&e&&(i.constraint=Yt(t[1].length)),4&e&&(i.dataRange=t[2]),T.$set(i)},i(t){P||(D(p.$$.fragment,t),D(k.$$.fragment,t),D(I.$$.fragment,t),D(M.$$.fragment,t),D(T.$$.fragment,t),P=!0)},o(t){W(p.$$.fragment,t),W(k.$$.fragment,t),W(I.$$.fragment,t),W(M.$$.fragment,t),W(T.$$.fragment,t),P=!1},d(t){t&&g(e),U(p),t&&g(y),t&&g(f),U(k),U(I),U(M),t&&g(A),t&&g(R),U(T)}}}function ye(t,e,a){let{image:l}=e,{output:n}=e,{isPaused:s}=e,{dataRange:o}=e;const r=C();let i,c,d=l.length+0,g=Ut([[0]]),p=Ut([[0]]),u=Gt(l.length*l.length,t=>!0),y=Gt(n.length*n.length,t=>!0);function h(){c=0,i&&clearInterval(i),a(11,i=setInterval(()=>{if(s)return;const t=c%(n.length*n.length);a(4,y=Gt(n.length*n.length,t=>!1)),a(3,u=Gt(l.length*l.length,t=>{}));const e=Math.floor(t/n.length),o=t%n.length;a(4,y[e*n.length+o]=!0,y),a(3,u[e*n.length+o]=!0,u);const r=Dt(l,u,1);a(5,g=Ut(r));const i=Wt(n,y);a(6,p=Ut(i)),c++},250))}h();let m=Ut(l),f=Ut(n);return t.$$set=t=>{"image"in t&&a(0,l=t.image),"output"in t&&a(1,n=t.output),"isPaused"in t&&a(10,s=t.isPaused),"dataRange"in t&&a(2,o=t.dataRange)},t.$$.update=()=>{if(1&t.$$.dirty&&(d=l.length+0),3&t.$$.dirty){Gt(l.length*l.length,t=>!0),Gt(n.length*n.length,t=>!0)}3&t.$$.dirty&&(h(),a(7,m=Ut(l)),a(8,f=Ut(n)))},[l,n,o,u,y,g,p,m,f,function(t){a(4,y=Gt(n.length*n.length,t=>!1));const e=t.detail.hoverH,o=t.detail.hoverW;a(4,y[e*n.length+o]=!0,y),a(3,u=Gt(l.length*l.length,t=>{})),a(3,u[e*n.length+o]=!0,u);const i=Dt(l,u,1);a(5,g=Ut(i));const c=Wt(n,y);a(6,p=Ut(c)),a(10,s=!0),r("message",{text:s})},s,i]}

1class he extends Z{constructor(t){super(),Q(this,t,ye,ue,s,{image:0,output:1,isPaused:10,dataRange:2})}}function me(t){let e,a,n,s,o,r,i,p,y,h,f,b,$,k,w,I,L,M,A,R=t[4]?'<i class="fas fa-play-circle play-icon"></i>':'<i class="fas fa-pause-circle"></i>';return k=new he({props:{image:t[0],output:t[1],isPaused:t[4],dataRange:t[2]}}),k.$on("message",t[6]),{c(){e=u("div"),a=u("div"),n=u("div"),s=u("div"),s.textContent="ReLU Activation",o=m(),r=u("div"),i=u("div"),i.innerHTML='<i class="fas fa-info-circle"></i>',p=m(),y=u("div"),h=m(),f=u("div"),f.innerHTML='<i class="fas control-icon fa-times-circle"></i>',b=m(),$=u("div"),Y(k.$$.fragment),w=m(),I=u("div"),I.innerHTML='<img src="/copycat-cnn-explainer/assets/img/pointer.svg" alt="pointer icon" class="svelte-1lq7956"/> \n        <div class="annotation-text"><span style="font-weight:600">Hover over</span> the matrices to change pixel.</div>',v(s,"class","title-text svelte-1lq7956"),v(i,"class","control-button svelte-1lq7956"),v(i,"title","Jump to article section"),v(y,"class","play-button control-button svelte-1lq7956"),v(y,"title","Play animation"),v(f,"class","delete-button control-button svelte-1lq7956"),v(f,"title","Close"),v(r,"class","buttons svelte-1lq7956"),v(n,"class","control-pannel svelte-1lq7956"),v($,"class","container is-centered is-vcentered svelte-1lq7956"),v(I,"class","annotation svelte-1lq7956"),v(a,"class","box svelte-1lq7956"),v(e,"class","container svelte-1lq7956")},m(l,g){d(l,e,g),c(e,a),c(a,n),c(n,s),c(n,o),c(n,r),c(r,i),c(r,p),c(r,y),y.innerHTML=R,c(r,h),c(r,f),c(a,b),c(a,$),K(k,$,null),c(a,w),c(a,I),L=!0,M||(A=[x(i,"click",xe),x(y,"click",t[5]),x(f,"click",t[7])],M=!0)},p(t,e){(!L||16&e)&&R!==(R=t[4]?'<i class="fas fa-play-circle play-icon"></i>':'<i class="fas fa-pause-circle"></i>')&&(y.innerHTML=R);const a={};1&e&&(a.image=t[0]),2&e&&(a.output=t[1]),16&e&&(a.isPaused=t[4]),4&e&&(a.dataRange=t[2]),k.$set(a)},i(t){L||(D(k.$$.fragment,t),L=!0)},o(t){W(k.$$.fragment,t),L=!1},d(t){t&&g(e),U(k),M=!1,l(A)}}}function fe(t){let e,a,l=!t[3]&&me(t);return{c(){l&&l.c(),e=f()},m(t,n){l&&l.m(t,n),d(t,e,n),a=!0},p(t,[a]){t[3]?l&&(q(),W(l,1,1,()=>{l=null}),V()):l?(l.p(t,a),8&a&&D(l,1)):(l=me(t),l.c(),D(l,1),l.m(e.parentNode,e))},i(t){a||(D(l),a=!0)},o(t){W(l),a=!1},d(t){l&&l.d(t),t&&g(e)}}}function xe(){let t=Number(d3.select("#cnn-svg").style("height").replace("px",""))+150,e=new SmoothScroll('a[href*="#"]',{offset:-t}),a=document.querySelector("#article-relu");e.animateScroll(a)}function ve(t,e,a){let{input:l}=e,{output:n}=e,{dataRange:s}=e,{isExited:o}=e;const r=C();let i=!1;return t.$$set=t=>{"input"in t&&a(0,l=t.input),"output"in t&&a(1,n=t.output),"dataRange"in t&&a(2,s=t.dataRange),"isExited"in t&&a(3,o=t.isExited)},[l,n,s,o,i,function(){a(4,i=!i)},function(t){a(4,i=t.detail.text)},function(){r("message",{text:!0})}]}class be extends Z{constructor(t){super(),Q(this,t,ve,fe,s,{input:0,output:1,dataRange:2,isExited:3})}}function $e(t){let e,a,l,n,s,o,r,i,p,y,f,x,$,k,w,I,L,M,A,R,E,C,S,N,_,H,O,T=t[9].length+"",P=t[9][0].length+"",X=t[10].length+"",z=t[10][0].length+"";return p=new Zt({props:{data:t[9],highlights:t[5],outputLength:t[3].length,isKernelMath:!1,constraint:Yt(t[2].length),dataRange:t[4],stride:t[0]}}),p.$on("message",t[11]),k=new Zt({props:{data:t[7],highlights:t[6],isKernelMath:!0,constraint:Yt(t[1]),dataRange:t[4]}}),I=new Zt({props:{data:t[8],highlights:t[6],isKernelMath:!0,constraint:Yt(t[1]),dataRange:t[4]}}),H=new Zt({props:{data:t[10],highlights:t[6],isKernelMath:!1,outputLength:t[3].length,constraint:Yt(t[3].length),dataRange:t[4],stride:t[0]}}),H.$on("message",t[11]),{c(){e=u("div"),a=u("div"),l=h("Input ("),n=h(T),s=h(", "),o=h(P),r=h(")"),i=m(),Y(p.$$.fragment),y=m(),f=u("div"),x=u("span"),$=h("max(\n    "),Y(k.$$.fragment),w=h("\n    )\n    =\n    "),Y(I.$$.fragment),L=m(),M=u("div"),A=u("div"),R=h("Output ("),E=h(X),C=h(", "),S=h(z),N=h(")"),_=m(),Y(H.$$.fragment),v(a,"class","header-text"),v(e,"class","column has-text-centered svelte-gz7a6i"),v(f,"class","column has-text-centered svelte-gz7a6i"),v(A,"class","header-text"),v(M,"class","column has-text-centered svelte-gz7a6i")},m(t,g){d(t,e,g),c(e,a),c(a,l),c(a,n),c(a,s),c(a,o),c(a,r),c(e,i),K(p,e,null),d(t,y,g),d(t,f,g),c(f,x),c(x,$),K(k,x,null),

1c(x,w),K(I,x,null),d(t,L,g),d(t,M,g),c(M,A),c(A,R),c(A,E),c(A,C),c(A,S),c(A,N),c(M,_),K(H,M,null),O=!0},p(t,[e]){(!O||512&e)&&T!==(T=t[9].length+"")&&b(n,T),(!O||512&e)&&P!==(P=t[9][0].length+"")&&b(o,P);const a={};512&e&&(a.data=t[9]),32&e&&(a.highlights=t[5]),8&e&&(a.outputLength=t[3].length),4&e&&(a.constraint=Yt(t[2].length)),16&e&&(a.dataRange=t[4]),1&e&&(a.stride=t[0]),p.$set(a);const l={};128&e&&(l.data=t[7]),64&e&&(l.highlights=t[6]),2&e&&(l.constraint=Yt(t[1])),16&e&&(l.dataRange=t[4]),k.$set(l);const s={};256&e&&(s.data=t[8]),64&e&&(s.highlights=t[6]),2&e&&(s.constraint=Yt(t[1])),16&e&&(s.dataRange=t[4]),I.$set(s),(!O||1024&e)&&X!==(X=t[10].length+"")&&b(E,X),(!O||1024&e)&&z!==(z=t[10][0].length+"")&&b(S,z);const r={};1024&e&&(r.data=t[10]),64&e&&(r.highlights=t[6]),8&e&&(r.outputLength=t[3].length),8&e&&(r.constraint=Yt(t[3].length)),16&e&&(r.dataRange=t[4]),1&e&&(r.stride=t[0]),H.$set(r)},i(t){O||(D(p.$$.fragment,t),D(k.$$.fragment,t),D(I.$$.fragment,t),D(H.$$.fragment,t),O=!0)},o(t){W(p.$$.fragment,t),W(k.$$.fragment,t),W(I.$$.fragment,t),W(H.$$.fragment,t),O=!1},d(t){t&&g(e),U(p),t&&g(y),t&&g(f),U(k),U(I),t&&g(L),t&&g(M),U(H)}}}function ke(t,e,a){let{stride:l}=e,{dilation:n}=e,{kernelLength:s}=e,{image:o}=e,{output:r}=e,{isPaused:i}=e,{dataRange:c}=e;const d=C();let g=o.length+0,p=[];for(let t=0;t<s;t++){p.push([]);for(let e=0;e<s;e++)p[t].push(0)}p=Ut(p);let u,y,h=Ut([[0]]),m=[],f=Gt(r.length*r.length,t=>!0);function x(t){y=0;let e=qt(t,r,s,g,n);t<=0||(u&&clearInterval(u),a(14,u=setInterval(()=>{if(i)return;const t=y%(r.length*r.length);a(6,f=Gt(r.length*r.length,t=>!1));const l=Math.floor(t/r.length),n=t%r.length;a(6,f[l*r.length+n]=!0,f),a(5,m=Vt(l,n,g,0,e,s));const c=Dt(o,m,s);a(7,p=Ut(c));const d=Wt(r,f);a(8,h=Ut(d)),y++},250)))}x(l);let v=Ut(o),b=Ut(r);return t.$$set=t=>{"stride"in t&&a(0,l=t.stride),"dilation"in t&&a(13,n=t.dilation),"kernelLength"in t&&a(1,s=t.kernelLength),"image"in t&&a(2,o=t.image),"output"in t&&a(3,r=t.output),"isPaused"in t&&a(12,i=t.isPaused),"dataRange"in t&&a(4,c=t.dataRange)},t.$$.update=()=>{if(4&t.$$.dirty&&(g=o.length+0),8&t.$$.dirty){Gt(r.length*r.length,t=>!0)}13&t.$$.dirty&&(x(l),a(9,v=Ut(o)),a(10,b=Ut(r)))},[l,s,o,r,c,m,f,p,h,v,b,function(t){let e=qt(l,r,s,g,n);a(6,f=Gt(r.length*r.length,t=>!1));const c=t.detail.hoverH,u=t.detail.hoverW;a(6,f[c*r.length+u]=!0,f),a(5,m=Vt(c,u,g,0,e,s));const y=Dt(o,m,s);a(7,p=Ut(y));const x=Wt(r,f);a(8,h=Ut(x)),a(12,i=!0),d("message",{text:i})},i,n,u]}class we extends Z{constructor(t){super(),Q(this,t,ke,$e,s,{stride:0,dilation:13,kernelLength:1,image:2,output:3,isPaused:12,dataRange:4})}}function Ie(t){let e,a,n,s,o,r,i,p,y,h,f,b,$,k,w,I,L,M,A,R=t[4]?'<i class="fas fa-play-circle play-icon"></i>':'<i class="fas fa-pause-circle"></i>';return k=new we({props:{kernelLength:t[1],image:t[0],output:t[5],stride:Me,dilation:Ae,isPaused:t[4],dataRange:t[2]}}),k.$on("message",t[7]),{c(){e=u("div"),a=u("div"),n=u("div"),s=u("div"),s.textContent="Max Pooling",o=m(),r=u("div"),i=u("div"),i.innerHTML='<i class="fas fa-info-circle"></i>',p=m(),y=u("div"),h=m(),f=u("div"),f.innerHTML='<i class="fas control-icon fa-times-circle"></i>',b=m(),$=u("div"),Y(k.$$.fragment),w=m(),I=u("div"),I.innerHTML='<img src="/copycat-cnn-explainer/assets/img/pointer.svg" alt="pointer icon" class="svelte-kahisg"/> \n          <div class="annotation-text"><span style="font-weight:600">Hover over</span> the matrices to change kernel position.</div>',v(s,"class","title-text svelte-kahisg"),v(i,"class","control-button svelte-kahisg"),v(i,"title","Jump to article section"),v(y,"class","play-button control-button svelte-kahisg"),v(y,"title","Play animation"),v(f,"class","delete-button control-button svelte-kahisg"),v(f,"title","Close"),v(r,"class","buttons svelte-kahisg"),v(n,"class","control-pannel svelte-kahisg"),v($,"class","container is-centered is-vcentered svelte-kahisg"),v(I,"class","annotation svelte-kahisg"),v(a,"class","box svelte-kahisg"),v(e,"class","container svelte-kahisg")},m(l,g){d(l,e,g),c(e,a),c(a,n),c(n,s),c(n,o),c(n,r),c(r,i),c(r,p),c(r,y),y.innerHTML=R,c(r,h),c(r,f),c(a,b),c(a,$),K(k,$,null),c(a,w),c(a,I),L=!0,M||(A=[x(i,"click",Re),x(y,"click",t[6]),x(f,"click",t[8])],M=!0)},p(t,e){(!L||16&e)&&R!==(R=t[4]?'<i class="fas fa-play-circle play-icon"></i>':'<i class="fas fa-pause-circle"></i>')&&(y.innerHTML=R);const a={};

12&e&&(a.kernelLength=t[1]),1&e&&(a.image=t[0]),32&e&&(a.output=t[5]),16&e&&(a.isPaused=t[4]),4&e&&(a.dataRange=t[2]),k.$set(a)},i(t){L||(D(k.$$.fragment,t),L=!0)},o(t){W(k.$$.fragment,t),L=!1},d(t){t&&g(e),U(k),M=!1,l(A)}}}function Le(t){let e,a,l=!t[3]&&Ie(t);return{c(){l&&l.c(),e=f()},m(t,n){l&&l.m(t,n),d(t,e,n),a=!0},p(t,[a]){t[3]?l&&(q(),W(l,1,1,()=>{l=null}),V()):l?(l.p(t,a),8&a&&D(l,1)):(l=Ie(t),l.c(),D(l,1),l.m(e.parentNode,e))},i(t){a||(D(l),a=!0)},o(t){W(l),a=!1},d(t){l&&l.d(t),t&&g(e)}}}let Me=2;const Ae=1;function Re(){let t=Number(d3.select("#cnn-svg").style("height").replace("px",""))+150,e=new SmoothScroll('a[href*="#"]',{offset:-t}),a=document.querySelector("#article-pooling");e.animateScroll(a)}function Ee(t,e,a){let{input:l}=e,{kernelLength:n}=e,{dataRange:s}=e,{isExited:o}=e;const r=C();var i=!1,c=Bt(l);return t.$$set=t=>{"input"in t&&a(0,l=t.input),"kernelLength"in t&&a(1,n=t.kernelLength),"dataRange"in t&&a(2,s=t.dataRange),"isExited"in t&&a(3,o=t.isExited)},t.$$.update=()=>{if(1&t.$$.dirty)try{a(5,c=Bt(l))}catch{console.log("Cannot handle stride of "+Me)}},[l,n,s,o,i,c,function(){a(4,i=!i),console.log(i)},function(t){a(4,i=t.detail.text)},function(){r("message",{text:!0})}]}class Ce extends Z{constructor(t){super(),Q(this,t,Ee,Le,s,{input:0,kernelLength:1,dataRange:2,isExited:3})}}function Se(e){let a,n,s,o,r,i,p,f,$,k,w,I,L,M,A,R,E,C,S;return{c(){a=u("div"),n=u("div"),s=u("div"),o=u("div"),o.innerHTML='<i class="fas fa-info-circle"></i>',r=m(),i=u("div"),i.innerHTML='<i class="fas control-icon fa-times-circle"></i>',p=m(),f=u("div"),$=h("Softmax Score for "),k=u("i"),w=h('"'),I=h(e[0]),L=h('"'),M=m(),A=y("svg"),R=m(),E=u("div"),E.innerHTML='<img src="/copycat-cnn-explainer/assets/img/pointer.svg" alt="pointer icon" class="svelte-1uac4ng"/> \n      <div class="annotation-text"><span style="font-weight:600">Hover over</span> the numbers to highlight logit circles.</div>',v(o,"class","control-button svelte-1uac4ng"),v(o,"title","Jump to article section"),v(i,"class","delete-button control-button svelte-1uac4ng"),v(i,"title","Close"),v(s,"class","buttons svelte-1uac4ng"),v(f,"class","title-text svelte-1uac4ng"),v(A,"id","softmax-svg"),v(A,"width","470"),v(A,"height","105"),v(A,"class","svelte-1uac4ng"),v(E,"class","annotation svelte-1uac4ng"),v(n,"class","box svelte-1uac4ng"),v(a,"class","container")},m(t,l){d(t,a,l),c(a,n),c(n,s),c(s,o),c(s,r),c(s,i),c(n,p),c(n,f),c(f,$),c(f,k),c(k,w),c(k,I),c(k,L),c(n,M),c(n,A),c(n,R),c(n,E),e[10](a),C||(S=[x(o,"click",Ne),x(i,"click",e[2])],C=!0)},p(t,[e]){1&e&&b(I,t[0])},i:t,o:t,d(t){t&&g(a),e[10](null),C=!1,l(S)}}}function Ne(){let t=Number(d3.select("#cnn-svg").style("height").replace("px",""))+150,e=new SmoothScroll('a[href*="#"]',{offset:-t}),a=document.querySelector("#article-softmax");e.animateScroll(a)}function _e(t,e,a){let l,{logits:n}=e,{logitColors:s}=e,{selectedI:o}=e,{highlightI:r=-1}=e,{outputName:i}=e,{outputValue:c}=e,{startAnimation:d}=e,g=null;const p=C(),u=(t,e)=>void 0===e?d3.format(".2f")(t):d3.format(`.${e}f`)(t),y=(t,e,l,n)=>{a(3,r=n),p("mouseOver",{curI:n})},h=(t,e,l,n)=>{a(3,r=-1),p("mouseLeave",{curI:n})};return R(()=>{a(9,g=d3.select(l).select("#softmax-svg"));let t=g.append("g").attr("class","formula-right").attr("transform","translate(10, 0)").style("font-size","15px"),e=t.append("g").attr("class","denominator").attr("transform","translate(0, 58)");e.append("text").attr("x",0).attr("y",0).style("fill","gray").text("(");let r=8;n.forEach((t,a)=>{a/4>=1&&a%4==0&&(r=8);let l=e.append("text").attr("x",r).attr("y",20*Math.floor(a/4)).style("cursor","crosshair").style("pointer-events","all").on("mouseover",(t,e,l)=>y(0,0,0,a)).on("mouseleave",(t,e,l)=>h(0,0,0,a)).text("exp(");l.append("tspan").attr("class",`formula-term-${a} formula-term`).attr("dx","1").style("fill",s[a]).style("fill-opacity",a===o||d.hasInitialized?1:0).text(u(t)),l.append("tspan").attr("dx","1").text(")");let i=l.node().getBBox();r+=i.width+4,a!==n.length-1?(e.append("text").attr("x",r).attr("y",20*Math.floor(a/4)).text("+"),r+=14):e.append("text").attr("x",r-2).attr("y",20*Math.floor(a/4)).style("fill","gray").text(")")}),e.selectAll("text").data(n).enter().append("text").attr("x",(t,e)=>40*e).attr("y",0).text(t=>u(t));let i=e.node().getBBox();t.append("line").attr("class","separation-line").attr("x1",-5).attr("x2",i.width+5).attr("y1",32).attr("y2",32).style("stroke-width",1.2).style("stroke","gray");let p=t.append("g").attr("class","numerator-group").attr("transform","translate(0, 20)").append("text").attr("x",i.x+i.width/2).attr("y",0).on("mouseover",(t,e,a)=>y(0,0,0,o)).on("mouseleave",(t,e,a)=>h(0,0,0,o)).style("pointer-events","all").style("cursor","crosshair").style("text-anchor","middle").text("exp(");p.append("tspan").attr("class",`formula-term-${o} formula-term`).attr("dx",1).style("fill",s[o]).text(""+u(n[o])),p.append("tspan").attr("dx",1).text(")");let m=g.append("g").attr("class","formula-left").attr("transform","translate(395, 32)");m.append("text").attr("x",20).attr("dominant-baseline","middle").text(""+u(c,4)).node().getBBox();m.append("text").attr("dominant-baseline","middle").attr("x",0).attr("y",0).style("fill","gray").style("font-weight","bold").text("=")}),t.$$set=t=>{"logits"in t&&a(4,n=t.logits),"logitColors"in t&&a(5,s=t.logitColors),"selectedI"in t&&a(6,o=t.selectedI),"highlightI"in t&&a(3,r=t.highlightI),"outputN

1ame"in t&&a(0,i=t.outputName),"outputValue"in t&&a(7,c=t.outputValue),"startAnimation"in t&&a(8,d=t.startAnimation)},t.$$.update=()=>{520&t.$$.dirty&&null!==g&&(g.selectAll(".formula-term").style("text-decoration","none").style("font-weight","normal"),g.selectAll(".formula-term-"+r).style("font-weight","bold").style("text-decoration","underline")),768&t.$$.dirty&&null!==g&&g.select(".formula-term-"+d.i).transition("softmax-edge").duration(d.duration).style("fill-opacity",1)},[i,l,()=>{p("xClicked",{})},r,n,s,o,c,d,g,function(t){N[t?"unshift":"push"](()=>{l=t,a(1,l)})}]}class He extends Z{constructor(t){super(),Q(this,t,_e,Se,s,{logits:4,logitColors:5,selectedI:6,highlightI:3,outputName:0,outputValue:7,startAnimation:8})}}function Oe(e){let a,n,s,o,r,i,p,y,f,w,I,M,A,R,E,C,S,N,_,H,O,T,P,X,z,F,B,G,j,q,V,D,W,Y,K,U,J,Q=e[5].error+"";return{c(){a=u("div"),n=u("div"),s=u("div"),o=m(),r=u("div"),i=u("header"),p=u("p"),p.textContent="Add Input Image",y=m(),f=u("button"),w=m(),I=u("section"),M=u("div"),A=u("div"),R=u("input"),E=m(),C=u("span"),C.innerHTML='<i class="fas fa-link"></i>',S=m(),N=u("div"),N.textContent="or",_=m(),H=u("div"),O=u("label"),T=u("input"),P=m(),X=u("span"),X.innerHTML='<span class="file-icon"><i class="fas fa-upload"></i></span> \n                <span class="file-label">Upload</span>',z=m(),F=u("footer"),B=u("div"),G=h(Q),j=m(),q=u("div"),V=u("button"),V.textContent="Cancel",D=m(),W=u("button"),W.textContent="Add",Y=m(),K=u("img"),v(s,"class","modal-background"),v(p,"class","modal-card-title svelte-1o5lxfe"),v(f,"class","delete"),v(f,"aria-label","close"),v(i,"class","modal-card-head svelte-1o5lxfe"),v(R,"class","input small-font svelte-1o5lxfe"),v(R,"type","url"),v(R,"placeholder","Paste URL of image..."),v(C,"class","icon small-font is-left svelte-1o5lxfe"),v(A,"class","control has-icons-left svelte-1o5lxfe"),L(A,"is-loading",e[3]),v(N,"class","or-label svelte-1o5lxfe"),v(T,"class","file-input"),v(T,"type","file"),v(T,"name","image"),v(T,"accept",".png,.jpeg,.tiff,.jpg,.png"),v(X,"class","file-cta small-font svelte-1o5lxfe"),v(O,"class","file-label"),v(H,"class","file"),v(M,"class","field svelte-1o5lxfe"),v(I,"class","modal-card-body"),v(B,"class","error-message svelte-1o5lxfe"),L(B,"hidden",!e[5].show),v(V,"class","button is-smaller svelte-1o5lxfe"),v(W,"class","button is-success is-smaller svelte-1o5lxfe"),v(q,"class","button-container"),v(F,"class","modal-card-foot svelte-1o5lxfe"),v(r,"class","modal-card svelte-1o5lxfe"),v(n,"class","modal"),v(n,"id","input-modal"),L(n,"is-active",e[6].show),k(K,"display","none"),v(K,"id","vali-image"),v(K,"alt","hidden image"),v(a,"class","modal-component")},m(t,l){d(t,a,l),c(a,n),c(n,s),c(n,o),c(n,r),c(r,i),c(i,p),c(i,y),c(i,f),c(r,w),c(r,I),c(I,M),c(M,A),c(A,R),$(R,e[2]),c(A,E),c(A,C),c(M,S),c(M,N),c(M,_),c(M,H),c(H,O),c(O,T),c(O,P),c(O,X),c(r,z),c(r,F),c(F,B),c(B,G),c(F,j),c(F,q),c(q,V),c(q,D),c(q,W),c(a,Y),c(a,K),e[14](K),e[15](a),U||(J=[x(s,"click",e[10]),x(f,"click",e[10]),x(R,"input",e[12]),x(T,"change",e[13]),x(T,"change",e[9]),x(V,"click",e[10]),x(W,"click",e[11]),x(K,"error",e[7]),x(K,"load",e[8])],U=!0)},p(t,[e]){4&e&&$(R,t[2]),8&e&&L(A,"is-loading",t[3]),32&e&&Q!==(Q=t[5].error+"")&&b(G,Q),32&e&&L(B,"hidden",!t[5].show),64&e&&L(n,"is-active",t[6].show)},i:t,o:t,d(t){t&&g(a),e[14](null),e[15](null),U=!1,l(J)}}}function Te(t,e,a){let l,n,s,o="",r=!1,i=!0,c={show:!1,error:""};const d=C();let g={show:!1};ft.set(g),ft.subscribe(t=>{a(6,g=t)});return R(()=>{d3.select(l).select("#input-modal")}),[l,n,o,r,s,c,g,()=>{a(3,r=!1),a(5,c.show=!0,c),a(5,c.error=i?"We can't find the image at that URL.":"Not a valid image file.",c)},()=>{let t=document.createElement("canvas"),e=t.getContext("2d");t.width=n.width,t.height=n.height,e.drawImage(n,0,0);try{e.getImageData(0,0,n.width,n.height),a(3,r=!1),a(6,g.show=!1,g),ft.set(g),d("urlTyped",{url:n.src}),a(2,o=null)}catch(t){a(3,r=!1),a(5,c.show=!0,c),a(5,c.error="No permission to load this image.",c)}},()=>{i=!1;let t=new FileReader;t.onload=t=>{a(1,n.src=t.target.result,n)},t.readAsDataURL(s[0])},()=>{a(6,g.show=!1,g),ft.set(g),d("xClicked",{preImage:g.preImage})},()=>{a(3,r=!0),a(5,c.show=!1,c),a(1,n.crossOrigin="Anonymous",n),a(1,n.src=o,n)},function(){o=this.value,a(2,o)},function(){s=this.files,a(4,s)},function(t){N[t?"unshift":"push"](()=>{n=t,a(1,n)})},function(t){N[t?"unshift":"push"](()=>{l=t,a(0,l)})}]}class Pe extends Z{constructor(t){super(),Q(this,t,Te,Oe,s,{})}}const Xe="input",ze="conv",Fe="pool",Be="relu",Ge="fc",je="flatten";class qe{constructor(t,e,a,l,n){this.layerName=t,this.index=e,this.type=a,this.bias=l,this.output=n,this.inputLinks=[],this.outputLinks=[]}}class Ve{constructor(t,e,a){this.source=t,this.dest=e,this.weight=a}}const De=async(t,e)=>{let a=await Ye(t,!0),l=tf.stack([a]),n=[];for(let t=0;t<e.layers.length;t++){let a=e.layers[t].apply(l),s=a.squeeze();3===s.shape.length&&(s=s.transpose([2,0,1])),n.push(s),l=a}return((t,e,a)=>{let l=[],n=[],s=e.layers[0].batchInputShape.slice(1),o=a.transpose([2,0,1]).arraySync();for(let t=0;t<s[2];t++){let e=new qe("input",t,Xe,0,o[t]);n.push(e)}l.push(n);let r=1;for(let a=0;a<e.layers.length;a++){let n=e.layers[a],s=t[a].squeeze();s=s.arraySync();let o,i=[];switch(n.name.includes("conv")?o=ze:n.name.includes("pool")?o=Fe:n.name.includes("relu")?o=Be:n.name.includes("output")?o=Ge:n.name.includes("flatten")?o=je:console.log("Find unknown type"),o){case ze:{let t=n.bias.val.arraySync(),e=n.kernel.val.transpose([3,2,0,1]).arraySync();for(let a=0;a<s.length;a++){let c=new qe(n.name,a,o,t[a],s[a]);for(let t=0;t<l[r-1].length;t++){let n=l[r-1][t],s=new Ve(n,c,e[a][t]);n.outputLinks.push(s),c.inputLinks.push(s)}i.push(c)}break}case Ge:{let t=n.bias.val.arraySync(),e=n.kernel.val.transpose([1,0]).arraySync();for(let a=0;a<s.length;a++){let c=new qe(n.name,a,o,t[a],s[a]),d=0;for(let t=0;t<l[r-1].length;t++){let n=l[r-1][t],s=new Ve(n,c,e[a][t]);n.outputLinks.push(s),c.inputLinks.push(s),d+=n.output*e[a][t]}

1d+=t[a],c.logit=d,i.push(c)}l[r-1].sort((t,e)=>t.realIndex-e.realIndex);break}case Be:case Fe:{let t=0,e=null;for(let a=0;a<s.length;a++){let c=new qe(n.name,a,o,t,s[a]),d=l[r-1][a],g=new Ve(d,c,e);d.outputLinks.push(g),c.inputLinks.push(g),i.push(c)}break}case je:{let t=0;for(let e=0;e<s.length;e++){let a=l[r-1][0].output.length,c=l[r-1].length,d=e%c,g=Math.floor(Math.floor(e/c)/a),p=Math.floor(e/c)%a,u=d*(a*a)+g*a+p,y=new qe(n.name,e,o,t,s[e]);y.realIndex=u;let h=new Ve(l[r-1][d],y,[g,p]);l[r-1][d].outputLinks.push(h),y.inputLinks.push(h),i.push(y)}i.sort((t,e)=>t.index-e.index);break}default:console.error("Encounter unknown layer type")}l.push(i),r++}return l})(n,e,a)},We=(t,e,a,l=!0)=>{let n=tf.fill([e,a,3],0).arraySync();for(let s=0;s<t.length;s++){let o=Math.floor(s/4),r=s%4,i=e===a?Math.floor(o/e):o%e,c=e===a?o%e:Math.floor(o/e);if(r<3){let e=t[s];l&&(e/=255),n[i][c][r]=e}}return 64!=e&&64!=a&&(n=(t=>{let e,a=t.length,l=t[0].length;if(a<64||l<64){let e=Math.min(a,l),n=Math.floor(a/2)-e/2,s=Math.floor(l/2)-e/2;t.slice(n,n+e).map(t=>t.slice(s,s+e))}else{let n=Math.floor(a/2)-Math.floor(32),s=Math.floor(l/2)-Math.floor(32);e=t.slice(n,n+64).map(t=>t.slice(s,s+64))}return e})(n)),tf.tensor3d(n)},Ye=(t,e=!0)=>{let a=document.createElement("canvas");a.style.cssText="display:none;",document.getElementsByTagName("body")[0].appendChild(a);let l=a.getContext("2d");return new Promise((n,s)=>{let o,r=new Image;r.crossOrigin="Anonymous",r.src=t,r.onload=()=>{if(a.width=r.width,a.height=r.height,r.width>64||r.height>64){let t=document.createElement("canvas"),e=t.getContext("2d");const a=65/Math.min(r.width,r.height);t.width=r.width*a,t.height=r.height*a,e.drawImage(r,0,0,t.width,t.height),r.width!=r.height&&(l.translate(t.width,0),l.scale(-1,1),l.translate(t.width/2,t.height/2),l.rotate(90*Math.PI/180)),r.width!=r.height?l.drawImage(t,-t.width/2,-t.height/2):l.drawImage(t,0,0),o=l.getImageData(0,0,t.width,t.height)}else l.drawImage(r,0,0),o=l.getImageData(0,0,r.width,r.height);let t=o.data,s=o.width,i=o.height;a.parentNode.removeChild(a),n(We(t,s,i,e))},r.onerror=s})},Ke=t=>tf.loadLayersModel(t),Ue={input:[d3.interpolateGreys,d3.interpolateGreys,d3.interpolateGreys],conv:d3.interpolateRdBu,relu:d3.interpolateRdBu,pool:d3.interpolateRdBu,fc:d3.interpolateGreys,weight:d3.interpolateBrBG,logit:d3.interpolateOranges};const Je={nodeLength:40,plusSymbolRadius:8,numLayers:12,edgeOpacity:.8,edgeInitColor:"rgb(230, 230, 230)",edgeHoverColor:"rgb(130, 130, 130)",edgeHoverOuting:!1,edgeStrokeWidth:.7,intermediateColor:"gray",layerColorScales:Ue,svgPaddings:{top:25,bottom:25,left:50,right:50},kernelRectLength:8/3,gapRatio:4,overlayRectOffset:12,classLists:["lifeboat","ladybug","pizza","bell pepper","school bus","koala","espresso","red panda","orange","sport car"]},Qe={nodeLength:40,plusSymbolRadius:8,numLayers:12,edgeOpacity:.8,edgeInitColor:"rgb(230, 230, 230)",edgeHoverColor:"rgb(130, 130, 130)",edgeHoverOuting:!1,edgeStrokeWidth:.7,intermediateColor:"gray",layerColorScales:Ue,svgPaddings:{top:25,bottom:25,left:50,right:50},kernelRectLength:8/3,gapRatio:4,overlayRectOffset:12,classLists:["lifeboat","ladybug","pizza","bell pepper","school bus","koala","espresso","red panda","orange","sport car"]},Ze=Je.nodeLength,ta=t=>{let e=1/0,a=-1/0;if(void 0===t.length)return[t,t];if(void 0===t[0].length){for(let l=0;l<t[0].length;l++)t[l]<e?e=t[l]:t[l]>a&&(a=t[l]);return[e,a]}for(let l=0;l<t.length;l++)for(let n=0;n<t[0].length;n++)t[l][n]<e?e=t[l][n]:t[l][n]>a&&(a=t[l][n]);return[e,a]},ea=t=>({x:t.x+Ze,y:t.y+Ze/2}),aa=t=>({x:t.x,y:t.y+Ze/2}),la=(t,e,a,l)=>(void 0===l&&(l=0),t((a+e/2)/e*(1-2*l)+l)),na=Je.layerColorScales,sa=Je.nodeLength,oa=Je.numLayers,ra=Je.edgeOpacity,ia=Je.edgeInitColor,ca=Je.edgeStrokeWidth,da=Je.svgPaddings,ga=Je.gapRatio,pa=Je.classLists,ua=d3.format(".4f");let ya=void 0;lt.subscribe(t=>{ya=t});let ha=void 0;nt.subscribe(t=>{ha=t});let ma=void 0;st.subscribe(t=>{ma=t});let fa=void 0;at.subscribe(t=>{fa=t});let xa=void 0;ot.subscribe(t=>{xa=t});let va=void 0;rt.subscribe(t=>{va=t});let ba=void 0;it.subscribe(t=>{ba=t});let $a=void 0;ct.subscribe(t=>{$a=t});let ka=void 0;gt.subscribe(t=>{ka=t});const wa=(t,e,a,l)=>{let n=a[e],s=na[t.type];

1"input"===t.type&&(s=s[t.index]);let o=void 0===t.output.length?1:t.output.length,r=document.createElement("canvas"),i=r.getContext("2d");r.width=o,r.height=o;let c=i.getImageData(0,0,o,o),d=c.data;if(1===o)d[0]=t.output;else for(let e=0;e<d.length;e+=4){let a=Math.floor(e/4),n=Math.floor(a/o),r=a%o,i=void 0;i="input"===t.type||"fc"===t.type?d3.rgb(s(1-t.output[n][r])):d3.rgb(s((t.output[n][r]+l/2)/l)),d[e]=i.r,d[e+1]=i.g,d[e+2]=i.b,d[e+3]=255}let g=document.createElement("canvas");g.width=3*sa,g.height=3*sa;let p=g.getContext("2d");i.putImageData(c,0,0),p.drawImage(r,0,0,o,o,0,0,3*sa,3*sa);let u=g.toDataURL();d3.select(n).attr("xlink:href",u),r.remove(),g.remove()},Ia=(t,e,a,l)=>{d3.select(a[e]).select("rect.output-rect").transition("output").delay(500).duration(800).ease(d3.easeCubicIn).attr("width",l(t.output))},La=(t,e,a,l,n)=>{void 0===l&&(l=0),void 0===n&&(n=1);let s=t.append("defs").append("svg:linearGradient").attr("id",""+a).attr("x1","0%").attr("y1","100%").attr("x2","100%").attr("y2","100%").attr("spreadMethod","pad");for(let t=0;t<10;t++){let a=t/9,o=e(a*(n-l)+l);s.append("stop").attr("offset",100*a+"%").attr("stop-color",o).attr("stop-opacity",1)}},Ma=(t,e,a,l,n,s)=>{ma=(t-sa*oa)/(8+5*ga),st.set(ma);let o=0;for(let t=0;t<fa.length;t++){let r=fa[t],i="output"===r[0].layerName;xa.push([]),i||"conv"===r[0].type?o+=ma*ga:o+=ma;let c=o,d=a.append("g").attr("class","cnn-layer-group").attr("id","cnn-layer-group-"+t);ha=(e-sa*r.length)/(r.length+1),nt.set(ha);let g=d.selectAll("g.node-group").data(r,t=>t.index).enter().append("g").attr("class","node-group").style("cursor","pointer").style("pointer-events","all").on("click",s).on("mouseover",l).on("mouseleave",n).classed("node-output",i).attr("id",(e,a)=>{let l=a*sa+(a+1)*ha;return l+=da.top,xa[t].push({x:c,y:l}),`layer-${t}-node-${a}`});d.selectAll("g.node-output").on("mouseover",(t,e,a)=>{l(t,e,a),mt.set({show:!0,text:"Output value: "+ua(t.output)})}).on("mouseleave",(t,e,a)=>{n(t,e,a),mt.set({show:!1,text:"Output value: "+ua(t.output)})}),"output"!==r[0].layerName?(g.append("image").attr("class","node-image").attr("width",sa).attr("height",sa).attr("x",c).attr("y",(e,a)=>xa[t][a].y),g.append("rect").attr("class","bounding").attr("width",sa).attr("height",sa).attr("x",c).attr("y",(e,a)=>xa[t][a].y).style("fill","none").style("stroke","gray").style("stroke-width",1).classed("hidden",!0)):(g.append("rect").attr("class","output-rect").attr("x",c).attr("y",(e,a)=>xa[t][a].y+sa/2+8).attr("height",sa/4).attr("width",0).style("fill","gray"),g.append("text").attr("class","output-text").attr("x",c).attr("y",(e,a)=>xa[t][a].y+sa/2).style("dominant-baseline","middle").style("font-size","11px").style("fill","black").style("opacity",.5).text((t,e)=>pa[e])),o+=sa}ot.set(xa);let r=d3.scaleLinear().domain(ba.output).range([0,sa]);for(let t=0;t<fa.length;t++){let e=ba[va][t];ya.select("g#cnn-layer-group-"+t).selectAll("image.node-image").each((t,a,l)=>wa(t,a,l,e))}ya.selectAll("g.node-output").each((t,e,a)=>Ia(t,e,a,r));let i=fa.map(t=>"output"===t[0].layerName?{name:t[0].layerName,dimension:`(${t.length})`}:{name:t[0].layerName,dimension:`(${t[0].output.length}, ${t[0].output.length}, ${t.length})`}),c=Number(d3.select("#cnn-svg").style("height").replace("px",""))+150,d=new SmoothScroll('a[href*="#"]',{offset:-c}),g=ya.selectAll("g.layer-detailed-label").data(i).enter().append("g").attr("class","layer-detailed-label").attr("id",(t,e)=>"layer-detailed-label-"+e).classed("hidden",!ka).attr("transform",(t,e)=>`translate(${xa[e][0].x+sa/2}, ${(da.top+ha)/2-6})`).style("cursor",t=>t.name.includes("output")?"default":"help").on("click",t=>{let e="";t.name.includes("conv")&&(e="convolution"),t.name.includes("relu")&&(e="relu"),t.name.includes("max_pool")&&(e="pooling"),t.name.includes("input")&&(e="input");let a=document.querySelector("#article-"+e);d.animateScroll(a)});g.append("title").text("Move to article section"),g.append("text").style("opacity",.7).style("dominant-baseline","middle").append("tspan").style("font-size","12px").text(t=>t.name).append("tspan").style("font-size","8px").style("font-weight","normal").attr("x",0).attr("dy","1.5em").text(t=>t.dimension);let p=ya.selectAll("g.layer-label").data(i).enter().append("g").attr("class","layer-label").attr("id",(t,e)=>"layer-label-"+e).classed("hidden",ka).attr("transform",(t,e)=>`translate(${xa[e][0].x+sa/2}, ${(da.top+ha)/2+5})`).style("cursor",t=>t.name.includes("output")?"default":"help").on("click",t=>{let e="";t.name.includes("conv")&&(e="convolution"),t.name.includes("relu")&&(e="relu"),t.name.includes("max_pool")&&(e="pooling"),t.name.includes("input")&&(e="input");let a=document.querySelector("#article-"+e);d.animateScroll(a)});p.append("title").text("Move to article section"),p.append("text").style("dominant-baseline","middle").style("opacity",.8).text(t=>t.name.includes("conv")?"conv":t.name.includes("relu")?"relu":t.name.includes("max_pool")?"max_pool":t.name),La(ya,na.conv,"convGradient"),La(ya,na.input[0],"inputGradient");((t,e)=>{for(let a=0;a<2;a++){let l=1+5*a,n=ba.local[l],s=ba.local[l+2],o=d3.scaleLinear().range([0,2*sa+ma-1.2]).domain([-n/2,n/2]),r=d3.scaleLinear().range([0,3*sa+2*ma-1.2]).domain([-s/2,s/2]),i=d3.axisBottom().scale(o).tickFormat(d3.format(".2f")).tickValues([-n/2,0,n/2]),c=d3.axisBottom().scale(r).tickFormat(d3.format(".2f")).tickValues([-s/2,0,s/2]),d=t.a

1ppend("g").attr("class","legend local-legend").attr("id",`local-legend-${a}-1`).classed("hidden",!ka||"local"!==va).attr("transform",`translate(${xa[l][0].x}, 0)`);d.append("g").attr("transform",`translate(0, ${e-3})`).call(i),d.append("rect").attr("width",2*sa+ma).attr("height",e).style("fill","url(#convGradient)");let g=t.append("g").attr("class","legend local-legend").attr("id",`local-legend-${a}-2`).classed("hidden",!ka||"local"!==va).attr("transform",`translate(${xa[l+2][0].x}, 0)`);g.append("g").attr("transform",`translate(0, ${e-3})`).call(c),g.append("rect").attr("width",3*sa+2*ma).attr("height",e).style("fill","url(#convGradient)")}for(let a=0;a<2;a++){let l=1+5*a,n=ba.module[l],s=d3.scaleLinear().range([0,5*sa+3*ma+1*ma*ga-1.2]).domain([-n/2,n/2]),o=d3.axisBottom().scale(s).tickFormat(d3.format(".2f")).tickValues([-n/2,-n/4,0,n/4,n/2]),r=t.append("g").attr("class","legend module-legend").attr("id","module-legend-"+a).classed("hidden",!ka||"module"!==va).attr("transform",`translate(${xa[l][0].x}, 0)`);r.append("g").attr("transform",`translate(0, ${e-3})`).call(o),r.append("rect").attr("width",5*sa+3*ma+1*ma*ga).attr("height",e).style("fill","url(#convGradient)")}let a=ba.global[1],l=d3.scaleLinear().range([0,10*sa+6*ma+3*ma*ga-1.2]).domain([-a/2,a/2]),n=d3.axisBottom().scale(l).tickFormat(d3.format(".2f")).tickValues([-a/2,-a/4,0,a/4,a/2]),s=t.append("g").attr("class","legend global-legend").attr("id","global-legend").classed("hidden",!ka||"global"!==va).attr("transform",`translate(${xa[1][0].x}, 0)`);s.append("g").attr("transform",`translate(0, ${e-3})`).call(n),s.append("rect").attr("width",10*sa+6*ma+3*ma*ga).attr("height",e).style("fill","url(#convGradient)");let o=d3.scaleLinear().domain(ba.output).range([0,sa-1.2]),r=d3.axisBottom().scale(o).tickFormat(d3.format(".1f")).tickValues([0,ba.output[1]]),i=t.append("g").attr("class","legend output-legend").attr("id","output-legend").classed("hidden",!ka).attr("transform",`translate(${xa[11][0].x}, 0)`);i.append("g").attr("transform",`translate(0, ${e-3})`).call(r),i.append("rect").attr("width",sa).attr("height",e).style("fill","gray");let c=d3.scaleLinear().range([0,sa-1.2]).domain([0,1]),d=d3.axisBottom().scale(c).tickFormat(d3.format(".1f")).tickValues([0,.5,1]),g=t.append("g").attr("class","legend input-legend").classed("hidden",!ka).attr("transform",`translate(${xa[0][0].x}, 0)`);g.append("g").attr("transform",`translate(0, ${e-3})`).call(d),g.append("rect").attr("x",.3).attr("width",sa-.3).attr("height",e).attr("transform",`rotate(180, ${sa/2}, ${e/2})`).style("stroke","rgb(20, 20, 20)").style("stroke-width",.3).style("fill","url(#inputGradient)")})(ya.append("g").attr("class","color-legend").attr("transform",`translate(0, ${da.top+10*ha+ha+10*sa})`),5);let u=d3.linkHorizontal().x(t=>t.x).y(t=>t.y),y=((t,e)=>{let a=[];for(let l=1;l<e.length;l++)for(let n=0;n<e[l].length;n++){let s="output"===e[l][n].layerName,o=aa(t[l][n]);for(let r=0;r<e[l][n].inputLinks.length;r++){let i=e[l][n].inputLinks[r].source.index;if(s){let t=e[l-1][0].output.length*e[l-1][0].output.length;if(i%t!=0)continue;i=Math.floor(i/t)}let c=ea(t[l-1][i]),d=e[l][n].inputLinks[r].weight;a.push({source:c,target:o,weight:d,targetLayerIndex:l,targetNodeIndex:n,sourceNodeIndex:i})}}return a})(xa,fa);a.append("g").attr("class","edge-group").selectAll("path.edge").data(y).enter().append("path").attr("class",t=>`edge edge-${t.targetLayerIndex} edge-${t.targetLayerIndex}-${t.targetNodeIndex}`).attr("id",t=>`edge-${t.targetLayerIndex}-${t.targetNodeIndex}-${t.sourceNodeIndex}`).attr("d",t=>u({source:t.source,target:t.target})).style("fill","none").style("stroke-width",ca).style("opacity",ra).style("stroke",ia);let h=a.append("g").attr("class","input-annotation"),m=h.append("text").attr("x",xa[0][0].x+sa/2).attr("y",xa[0][0].y+sa+5).attr("class","annotation-text").style("dominant-baseline","hanging").style("text-anchor","middle");m.append("tspan").style("dominant-baseline","hanging").style("fill","#C95E67").text("Red"),m.append("tspan").style("dominant-baseline","hanging").text(" channel"),h.append("text").attr("x",xa[0][1].x+sa/2).attr("y",xa[0][1].y+sa+5).attr("class","annotation-text").style("dominant-baseline","hanging").style("text-anchor","middle").style("fill","#3DB665").text("Green"),h.append("text").attr("x",xa[0][2].x+sa/2).attr("y",xa[0][2].y+sa+5).attr("class","annotation-text").style("dominant-baseline","hanging").style("text-anchor","middle").style("fill","#3F7FBC").text("Blue")},Aa=()=>{let t=d3.scaleLinear().domain(ba.output).range([0,sa]);for(let e=0;e<fa.length;e++){let a=fa[e],l=ba[va][e],n=ya.select("g#cnn-layer-group-"+e).selectAll("g.node-group").data(a);e<fa.length-1?n.transition("disappear").duration(300).ease(d3.easeCubicOut).style("opacity",0).on("end",(function(){d3.select(this).select("image.node-image").each((t,e,a)=>wa(t,e,a,l)),d3.select(this).transition("appear").duration(700).ease(d3.easeCubicIn).style("opacity",1)})):n.each((e,a,l)=>Ia(e,a,l,t))}for(let t=0;t<2;t++){let e=1+5*t,a=ba.local[e],l=ba.local[e+2],n=d3.scaleLinear().range([0,2*sa+ma]).domain([-a/2,a/2]),s=d3.scaleLinear().range([0,3*sa+2*ma]).domain([-l/2,l/2]),o=d3.axisBottom().scale(n).tickFormat(d3.format(".2f")).tickValues([-a/2,0,a/2]),r=d3.axisBottom().scale(s).tickFormat(d3.format(".2f")).tickValues([-l/2,0,l/2]);

1ya.select(`g#local-legend-${t}-1`).select("g").call(o),ya.select(`g#local-legend-${t}-2`).select("g").call(r)}for(let t=0;t<2;t++){let e=1+5*t,a=ba.local[e],l=d3.scaleLinear().range([0,5*sa+3*ma+1*ma*ga-1.2]).domain([-a,a]),n=d3.axisBottom().scale(l).tickFormat(d3.format(".2f")).tickValues([-a,-a/2,0,a/2,a]);ya.select("g#module-legend-"+t).select("g").call(n)}let e=ba.global[1],a=d3.scaleLinear().range([0,10*sa+6*ma+3*ma*ga-1.2]).domain([-e,e]),l=d3.axisBottom().scale(a).tickFormat(d3.format(".2f")).tickValues([-e,-e/2,0,e/2,e]);ya.select("g#global-legend").select("g").call(l);let n=d3.axisBottom().scale(t).tickFormat(d3.format(".1f")).tickValues([0,ba.output[1]]);ya.select("g#output-legend").select("g").call(n)},Ra=()=>{let t=[1],e=void 0;$a=[];for(let a=0;a<fa.length-1;a++){let l=fa[a],n=l.map(t=>ta(t.output)).reduce((t,e)=>[Math.min(t[0],e[0]),Math.max(t[1],e[1])]);$a.push({min:n[0],max:n[1]}),"conv"!==l[0].type&&"fc"!==l[0].type||(n=n.map(Math.abs),e=2*(.1+Math.round(1e3*Math.max(...n))/1e3)),void 0!==e&&t.push(e)}t.push(1),$a.push({min:0,max:1});let a=[1],l=(oa-2)/5;for(let e=0;e<l;e++){let l=t.slice(1+5*e,1+5*e+5),n=Math.max(...l);for(let t=0;t<5;t++)a.push(n)}a.push(1);let n=[1],s=Math.max(...t.slice(1,t.length-1));for(let t=0;t<oa-2;t++)n.push(s);n.push(1),ba.local=t,ba.module=a,ba.global=n,ba.output=[0,d3.max(fa[fa.length-1].map(t=>t.output))],it.set(ba),ct.set($a)},Ea=Je.layerColorScales,Ca=Je.nodeLength,Sa=Je.intermediateColor,Na=Je.svgPaddings;let _a=void 0;lt.subscribe(t=>{_a=t});let Ha=void 0;nt.subscribe(t=>{Ha=t});const Oa=t=>{let e=t.layerIndex,a=t.targetX,l=t.disable,n=t.delay,s=t.opacity,o=t.specialIndex,r=t.onEndFunc,i=void 0===t.transitionName?"move":t.transitionName,c=void 0===t.duration?500:t.duration;_a.select("g#cnn-layer-group-"+e).selectAll("g.node-group").each((t,e,r)=>{d3.select(r[e]).style("cursor",l&&e!==o?"default":"pointer").style("pointer-events",l&&e!==o?"none":"all").select("image").transition(i).ease(d3.easeCubicInOut).delay(n).duration(c).attr("x",a),d3.select(r[e]).select("rect.bounding").transition(i).ease(d3.easeCubicInOut).delay(n).duration(c).attr("x",a),void 0!==s&&e!==o&&d3.select(r[e]).select("image").style("opacity",s)}),_a.selectAll("g#layer-label-"+e).transition(i).ease(d3.easeCubicInOut).delay(n).duration(c).attr("transform",()=>`translate(${a+Ca/2}, ${(Na.top+Ha)/2+5})`).on("end",r),_a.selectAll("g#layer-detailed-label-"+e).transition(i).ease(d3.easeCubicInOut).delay(n).duration(c).attr("transform",()=>`translate(${a+Ca/2}, ${(Na.top+Ha)/2-6})`).on("end",r)},Ta=(t,e,a)=>{void 0===a&&(a=_a);let l=a.append("defs").attr("class","overlay-gradient").append("linearGradient").attr("id",t).attr("x1","0%").attr("x2","100%").attr("y1","100%").attr("y2","100%");e.forEach(t=>{l.append("stop").attr("offset",t.offset).attr("stop-color",t.color).attr("stop-opacity",t.opacity)})},Pa=t=>{let e=t.legendHeight,a=t.curLayerIndex,l=t.range,n=t.group,s=t.minMax,o=t.width,r=t.x,i=t.y,c=t.isInput,d=t.colorScale,g=t.gradientAppendingName,p=t.gradientGap;void 0===d&&(d=Ea.conv),void 0===p&&(p=0);let u="url(#inputGradient)",y=t=>d(t*(1-2*p)+p);if(!c){let t=(s.min+l/2)/l,e=(0+l/2)/l,a=(s.max+l/2)/l,o=s.max-s.min,r=(0-s.min)/o,i=t+(e-t)/2,c=e+(a-e)/2,d=[{offset:0,color:y(t),opacity:1},{offset:r/2,color:y(i),opacity:1},{offset:r,color:y(e),opacity:1},{offset:r+(1-e)/2,color:y(c),opacity:1},{offset:1,color:y(a),opacity:1}];void 0===g?(Ta("intermediate-legend-gradient",d,n),u="url(#intermediate-legend-gradient)"):(Ta(""+g,d,n),u=`url(#${g})`)}let h=d3.scaleLinear().range([0,o-1.2]).domain(c?[0,l]:[s.min,s.max]),m=d3.axisBottom().scale(h).tickFormat(d3.format(c?"d":".2f")).tickValues(c?[0,l]:[s.min,0,s.max]),f=n.append("g").attr("class","intermediate-legend-"+(a-1)).attr("transform",`translate(${r}, ${i})`),x=f.append("g").attr("transform",`translate(0, ${e-3})`).call(m);x.selectAll("text").style("font-size","9px").style("fill",Sa),x.selectAll("path, line").style("stroke",Sa),f.append("rect").attr("width",o).attr("height",e).attr("transform",`rotate(${c?180:0},\n      ${o/2}, ${e/2})`).style("fill",u)},Xa=t=>{let e=t.group,a=t.sx,l=t.sy,n=t.tx,s=t.ty,o=t.dr,r=t.hFlip,i=void 0===t.marker?"marker":t.marker;e.append("g").attr("class","arrow-group").append("path").attr("d",`M${a},${l}A${o},${o} 0 0,${r?0:1} ${n},${s}

1`).attr("marker-end",`url(#${i})`).style("stroke","gray").style("fill","none")},za=Je.layerColorScales,Fa=Je.nodeLength,Ba=Je.plusSymbolRadius,Ga=Je.numLayers,ja=Je.intermediateColor,qa=Je.kernelRectLength,Va=Je.svgPaddings,Da=Je.gapRatio,Wa=Je.overlayRectOffset,Ya=d3.format(".4f");let Ka=!1,Ua=void 0;lt.subscribe(t=>{Ua=t});let Ja=void 0;nt.subscribe(t=>{Ja=t});let Qa=void 0;st.subscribe(t=>{Qa=t});let Za=void 0;at.subscribe(t=>{Za=t});let tl=void 0;ot.subscribe(t=>{tl=t});let el=void 0;rt.subscribe(t=>{el=t});let al=void 0;it.subscribe(t=>{al=t});let ll=void 0;ct.subscribe(t=>{ll=t});let nl=[void 0,void 0];dt.subscribe(t=>{nl=t});let sl=void 0;pt.subscribe(t=>{sl=t});let ol=void 0;gt.subscribe(t=>{ol=t});let rl=void 0;xt.subscribe(t=>{rl=t});const il=(t,e,a,l,n)=>{const s=()=>{let o=+t.attr("data-origin-x"),r=+t.attr("data-origin-y"),i=+t.attr("data-tick"),c=i%e,d=Math.floor(i/e),g=o+c*a,p=r+d*a,u=(i+1)%(e*e);Ua.selectAll(`rect.mask-${c}-${d}`).transition("window-sliding-mask").delay(l+100).duration(300).style("opacity",0),t.attr("data-tick",u).transition("window-sliding-input").delay(l).duration(200).attr("transform",`translate(${g}, ${p})`).on("end",()=>{0===u&&(Ka||dl(n)),sl&&s()})};s()},cl=(t,e,a,l)=>{const n=()=>{let s=+t.attr("data-origin-x"),o=+t.attr("data-origin-y"),r=+e.attr("data-origin-x"),i=+t.attr("data-tick"),c=i%a,d=Math.floor(i/a),g=s+c*l,p=o+d*l,u=r+i%a*l,y=(i+1)%(a*a);Ua.selectAll(`rect.mask-${c}-${d}`).transition("window-sliding-mask").delay(300).duration(300).style("opacity",0),t.attr("data-tick",y).transition("window-sliding-input").delay(200).duration(200).attr("transform",`translate(${g}, ${p})`),e.attr("data-tick",y).transition("window-sliding-result").delay(200).duration(200).attr("transform",`translate(${u}, ${p})`).on("end",()=>{sl&&n()})};n()},dl=t=>{null!==d3.event&&d3.event.stopPropagation();let e=Fa/(3*qa),a=3*qa;if(Ka){pt.set(!0),Ua.selectAll(".kernel-clone").transition().duration(300).style("opacity",1),Ua.selectAll("rect.mask-overlay").transition().duration(300).style("opacity",1);for(let l=0;l<tl[t-1].length;l++)cl(d3.select(".kernel-input-"+l),d3.select(".kernel-result-"+l),e,a);il(d3.select(".kernel-output"),e,a,200,t),Ua.selectAll("path.flow-edge").attr("stroke-dasharray","4 2").attr("stroke-dashoffset",0).each((t,e,a)=>gl(t,e,a,-1e3)),Ua.select(".animation-control-button").attr("xlink:href","/copycat-cnn-explainer/assets/img/fast_forward.svg"),Ka=!1}else{pt.set(!1),Ua.selectAll("rect.mask-overlay").transition("skip").duration(600).style("opacity",0),Ua.selectAll(".kernel-clone").attr("data-tick",0).transition("skip").duration(300).style("opacity",0).on("end",(t,e,a)=>{let l=d3.select(a[e]),n=+l.attr("data-origin-x"),s=+l.attr("data-origin-y");l.attr("transform",`translate(${n}, ${s})`)}),Ua.selectAll("path.flow-edge").interrupt().attr("stroke-dasharray","0 0"),Ua.select(".animation-control-button").attr("xlink:href","/copycat-cnn-explainer/assets/img/redo.svg"),Ka=!0}},gl=(t,e,a,l)=>{d3.select(a[e]).transition().duration(6e4).ease(d3.easeLinear).attr("stroke-dashoffset",l).on("end",(t,e,a)=>{sl&&gl(t,e,a,l-2e3)})},pl=(t,e,a,l,n,s,o,r,i,c)=>{let d=Ua.append("g").attr("class","intermediate-layer").style("opacity",0);Ka=!1;let g=e+Fa+n,p=g+Fa+1.5*n,u=al[el][t],y=za[s.type],h=[],m=[],f=s.inputLinks.map(t=>ta(t.weight)).reduce((t,e)=>[Math.min(t[0],e[0]),Math.max(t[1],e[1])]),x=Math.round(1e3*Math.max(...f.map(Math.abs)))/1e3*2,v=3*qa,b=tl[t][o].y,$=Ua.select(`#layer-${t}-node-${o}`),k=$.append("g").attr("class","overlay-group").attr("transform",`translate(${a}, ${b})`),w=Math.floor(Fa/v);for(let t=0;t<w;t++)for(let e=0;e<w;e++)k.append("rect").attr("class",`mask-overlay mask-${t}-${e}`).attr("width",v).attr("height",v).attr("x",t*v).attr("y",e*v).style("fill","var(--light-gray)").style("stroke","var(--light-gray)").style("opacity",1);$.select("rect.bounding").raise();let I=d.append("g").attr("class","kernel kernel-output kernel-clone").attr("transform",`translate(${a}, ${b})`);I.append("rect").attr("x",0).attr("y",0).attr("width",3*qa).attr("height",3*qa).attr("fill","none").attr("stroke",ja),I.attr("data-tick",0).attr("data-origin-x",a).attr("data-origin-y",b);let L=Fa/(3*qa);

1il(I,L,v,200,t),tl[t-1].forEach((a,l)=>{let n=Za[t-1][l].output,f=Za[t][o].inputLinks[l].weight,b=Ft(n,f);h.push(ta(b)),((t,e,a,l,n)=>{let s=l,o=document.createElement("canvas"),r=o.getContext("2d");o.width=s,o.height=s;let i=r.getImageData(0,0,s,s),c=i.data;for(let t=0;t<c.length;t+=4){let l=Math.floor(t/4),o=Math.floor(l/s),r=l%s,i=d3.rgb(a((n[o][r]+e/2)/e));c[t]=i.r,c[t+1]=i.g,c[t+2]=i.b,c[t+3]=255}let d=document.createElement("canvas");d.width=3*Fa,d.height=3*Fa;let g=d.getContext("2d");r.putImageData(i,0,0),g.drawImage(o,0,0,s,s,0,0,3*Fa,3*Fa);let p=d.toDataURL();t.attr("xlink:href",p),o.remove(),d.remove()})(((t,e,a,l,n,s,o,r,i,c,d)=>{let g=a.append("g").datum(Za[t-1][s]).attr("class","intermediate-node").attr("cursor",d?"pointer":"default").attr("pointer-events",d?"all":"none").attr("node-index",s).on("mouseover",r).on("mouseleave",i).on("click",(a,l,n)=>c(a,l,n,e,t));g.append("image").attr("width",Fa).attr("height",Fa).attr("x",l).attr("y",n);let p=Math.floor(Fa/o),u=g.append("g").attr("class","overlay-group").attr("transform",`translate(${l}, ${n})`);for(let t=0;t<p;t++)for(let e=0;e<p;e++)u.append("rect").attr("class",`mask-overlay mask-${t}-${e}`).attr("width",o).attr("height",o).attr("x",t*o).attr("y",e*o).style("fill","var(--light-gray)").style("stroke","var(--light-gray)").style("opacity",1);return g.append("rect").attr("class","bounding").attr("width",Fa).attr("height",Fa).attr("x",l).attr("y",n).style("fill","none").style("stroke",ja).style("stroke-width",1),g})(t,o,d,g,a.y,l,v,r,i,c,!0).select("image"),u,y,s.output.length,b),m.push({source:ea({x:e,y:a.y}),target:aa({x:g,y:a.y}),name:`input-${l}-inter1-${l}`}),m.push({source:ea({x:g,y:a.y}),target:aa({x:p,y:tl[t][o].y}),name:`inter1-${l}-inter2-1`});let $=e-3*qa*2,k=d.append("g").attr("class","kernel kernel-"+l).attr("transform",`translate(${$}, ${a.y})`),w="Kernel weights: [",I=d3.format(".2f");for(let t=0;t<f.length;t++)for(let e=0;e<f[0].length;e++){k.append("rect").attr("class","kernel").attr("x",qa*e).attr("y",qa*t).attr("width",qa).attr("height",qa).attr("fill",la(za.weight,x,f[t][e],.2));let a="";a=0===e&&0==t?"":0===e?"; ":", ",w=w.concat(a,""+I(f[t][e]))}w=w.concat("]"),k.append("rect").attr("x",0).attr("y",0).attr("width",3*qa).attr("height",3*qa).attr("fill","none").attr("stroke",ja),k.style("pointer-events","all").style("cursor","crosshair").on("mouseover",()=>{mt.set({show:!0,text:w})}).on("mouseleave",()=>{mt.set({show:!1,text:w})}).on("click",()=>{d3.event.stopPropagation()});let M=k.clone(!0).style("pointer-events","none").style("cursor","pointer").classed("kernel-clone",!0).classed("kernel-input-"+l,!0);M.style("opacity",.9).selectAll("rect.kernel").style("opacity",.7),M.attr("transform",`translate(${e}, ${a.y})`).attr("data-tick",0).attr("data-origin-x",e).attr("data-origin-y",a.y);let A=k.clone(!0).style("pointer-events","none").style("cursor","pointer").classed("kernel-clone",!0).classed("kernel-result-"+l,!0);A.style("opacity",.9).selectAll("rect.kernel").style("fill","none"),A.attr("transform",`translate(${g}, ${a.y})`).attr("data-origin-x",g).attr("data-origin-y",a.y),cl(M,A,L,v)});let M=h.reduce((t,e)=>[Math.min(t[0],e[0]),Math.max(t[1],e[1])]),A={min:M[0],max:M[1]},R=tl[t][o].y+Fa/2,E=d.append("g").attr("class","plus-symbol").attr("transform",`translate(${p+Ba}, ${R})`);E.append("rect").attr("x",-Ba).attr("y",-Ba).attr("width",2*Ba).attr("height",2*Ba).attr("rx",3).attr("ry",3).style("fill","none").style("stroke",ja),E.append("rect").attr("x",-(Ba-3)).attr("y",-.5).attr("width",2*(Ba-3)).attr("height",1).style("fill",ja),E.append("rect").attr("x",-.5).attr("y",-(Ba-3)).attr("width",1).attr("height",2*(Ba-3)).style("fill",ja),0==o?(E.append("circle").attr("cx",0).attr("cy",Fa/2+qa).attr("r",4).style("stroke",ja).style("cursor","crosshair").style("fill",la(za.weight,x,s.bias,.2)).on("mouseover",()=>{mt.set({show:!0,text:"Bias: "+Ya(s.bias)})}).on("mouseleave",()=>{mt.set({show:!1,text:"Bias: "+Ya(s.bias)})}),m.push({source:{x:p+Ba,y:tl[t][o].y+Fa},target:{x:p+Ba,y:tl[t][o].y+Fa/2+Ba},name:"bias-plus"})):(E.append("circle").attr("cx",0).attr("cy",-Fa/2-qa).attr("r",4).style("stroke",ja).style("cursor","crosshair").style("fill",la(za.weight,x,s.bias,.2)).on("mouseover",()=>{mt.set({show:!0,text:"Bias: "+Ya(s.bias)})}).on("mouseleave",()=>{mt.set({show:!1,text:"Bias: "+Ya(s.bias)})}),m.push({source:{x:p+Ba,y:tl[t][o].y},target:{x:p+Ba,y:tl[t][o].y+Fa/2-Ba},name:"bias-plus"})),m.push({source:ea({x:p+2*Ba-Fa,y:tl[t][o].y}),target:aa({x:a,y:tl[t][o].y}),name:"symbol-output"}),m.push({source:ea({x:a,y:tl[t][o].y}),target:aa({x:l,y:tl[t][o].y}),name:"output-next"}),d.append("g").attr("class","layer-intermediate-label layer-label").attr("transform",()=>`translate(${g+Fa/2}, ${(Va.top+Ja)/2+5})`).classed("hidden",ol).append("text").style("text-anchor","middle").style("dominant-baseline","middle").style("font-weight",800).style("opacity","0.8").text("intermediate"),d.append("g").attr("class","animation-control").attr("transform",()=>`translate(${g+Fa/2}, ${(Va.top+Ja)/2-4})`).on("click",()=>dl(t)).append("image").attr("class","animation-control-button").attr("xlink:href","/copycat-cnn-explainer/assets/img/fast_forward.svg").attr("x",50).attr("y",0).attr("height",13).attr("width",13),d.append("g").attr("class","layer-intermediate-label layer-detailed-label").attr("transform",()=>`translate(${g+Fa/2}, ${(Va.top+Ja)/2-5})`).classed("hidden",!ol).append("text").style("text-anchor","middle").style("dominant-baseline","middle").style("opacity","0.7").style("font-weight",800).append("tspan").text("intermediate").append("tspan").style("font-size","8px").style("font-weight","normal").attr("x",0).attr("dy","1.5em").text(`(${Za[t][0].output.length},\n      ${Za[t][0].output[0].length},\n      ${Za[t].length})`);let C=d3.linkHorizontal().x(t=>t.x).y(t=>t.y),S=d.append("g").attr("class","edge-group").lower();return S.selectAll("path").data(m).enter().append("path").classed("flow-edge",t=>"output-next"!==t.name).attr("id",t=>"edge-"+t.name).attr("d",t=>C({source:t.source,target:t.target})).style("fill","none").style("stroke-width",1).style("stroke",ja),S.select("#edge-output-next").style("opacity",.1),S.selectAll("path.flow-edge").attr("stroke-dasharray","4 2").attr("stroke-dashoffset",0).each((t,e,a)=>gl(t,e,a,-1e3)),{intermediateLayer:d,intermediateMinMax:A,kernelRange:x,kernelMinMax:{min:f[0],max:f[1]}}},ul=t=>{let e,a,l,n,s,o,r,i,c,d,g,p,u=t.leftX,y=t.curLayerIndex,h=t.group,m=t.intermediateGap,f=t.isFirstConv,x=t.i,v=h.append("g").attr("class","kernel-annotation");v.append("text").text("Kernel").attr("class","annotation-text").attr("x",u-2.5*qa*3).attr("y",tl[y-1][0].y+3*qa).style("dominant-baseline","baseline").style("text-anchor","end"),f?(e=u,a=tl[y-1][0].y+Fa+3*qa,l=u-5,n=tl[y-1][0].y+Fa+3*qa+5,s=20,o=u,r=tl[y-1][1].y+Fa+3*qa,i=u-3*qa,c=tl[y-1][1].y+Fa+15,g=u-13,p=tl[y-1][1].y+15,d=35):(e=u-3*qa*3,a=tl[y-1][0].y+Fa/3,l=u-2*qa*3-5,n=tl[y-1][0].y+Fa-10,s=50,o=u-3*qa*3,r=tl[y-1][2].y-3,g=u-3*qa-4,p=tl[y-1][2].y+3*qa+6,i=u-3*qa-13,c=tl[y-1][2].y+26,d=20);let b=v.append("text").attr("x",e).attr("y",a).attr("class","annotation-text").style("dominant-baseline","hanging").style("text-anchor",f?"start":"end");b.append("tspan").style("dominant-baseline","hanging").text("Slide kernel over input channel"),b.append("tspan").attr("x",e).attr("dy","1em").style("dominant-baseline","hanging").text("to get intermediate result"),b.append("tspan").attr("x",e).attr("dy","1.2em").style("dominant-baseline","hanging").style("font-weight",700).text("Click "),b.append("tspan").style("dominant-baseline","hanging").style("font-weight",400).text("to learn more"),Xa({group:h,tx:u-7,ty:tl[y-1][0].y+Fa/2,sx:l,sy:n,hFlip:!f,dr:s,marker:"marker"});let $=v.append("text").attr("x",o).attr("y",r).attr("class","annotation-text").style("dominant-baseline","hanging").style("text-anchor",f?"start":"end");$.append("tspan").style("dominant-baseline","hanging").text("Each input chanel"),$.append("tspan").attr("x",e).attr("dy","1em").style("dominant-baseline","hanging").text("gets a different kernel"),$.append("tspan").attr("x",e).attr("dy","1.3em").style("font-weight",700).style("dominant-baseline","hanging").text("Hover over "),$.append("tspan").style("font-weight",400).style("dominant-baseline","hanging").text("to see value!"),

1Xa({group:h,tx:g,ty:p,sx:i,sy:c,dr:d,hFlip:!f,marker:"marker"});let k=h.append("g").attr("class","plus-annotation"),w=u+2*Fa+2.5*m,I=w,L=tl[y][x].y+Fa+3*qa;0===x&&(I+=30),9===x&&(I=w+Ba-10,L-=2.5*Fa);let M=k.append("text").attr("x",I).attr("y",L).attr("class","annotation-text").style("dominant-baseline","hanging").style("text-anchor","start");M.append("tspan").style("dominant-baseline","hanging").text("Add up all intermediate"),M.append("tspan").attr("x",I).attr("dy","1em").style("dominant-baseline","hanging").text("results and then add bias"),Xa(9===x?{group:h,sx:w+50,sy:tl[y][x].y-(Fa/2+2*qa),tx:w+2*Ba+5,ty:tl[y][x].y+Fa/2-Ba,dr:50,hFlip:!1,marker:"marker-alt"}:{group:h,sx:w+35,sy:tl[y][x].y+Fa+2*qa,tx:w+2*Ba+5,ty:tl[y][x].y+Fa/2+Ba,dr:30,hFlip:!0,marker:"marker-alt"});let A=tl[y][x].y;0===x?A+=Fa+3*qa:A-=2*qa+5,k.append("text").attr("class","annotation-text").attr("x",w+Ba).attr("y",A).style("text-anchor","middle").style("dominant-baseline",0===x?"hanging":"baseline").text("Bias")},yl=(t,e,a,l,n,s,o,r)=>{let i=Ua.select("g.underneath");for(let c=0;c<Za[t-1].length;c++)i.append("rect").attr("class","underneath-gateway").attr("id","underneath-gateway-"+c).attr("x",a-n).attr("y",tl[t-1][c].y-n).attr("width",2*Fa+l+2*n).attr("height",Fa+2*n).attr("rx",10).style("fill","rgba(160, 160, 160, 0.2)").style("opacity",0),Ua.select(`g#layer-${t-1}-node-${c}`).style("pointer-events","all").style("cursor","pointer").on("mouseover",s).on("mouseleave",o).on("click",(a,l,n)=>r(a,l,n,e,t));i.lower()},hl=(t,e,a,l,n)=>{Ua.select(".intermediate-layer-overlay").empty()&&Ua.append("g").attr("class","intermediate-layer-overlay"),Ua.select(".intermediate-layer-overlay").append("rect").attr("class","overlay").style("fill",`url(#${t})`).style("stroke","none").attr("width",l).attr("height",n).attr("x",e).attr("y",a).style("opacity",0).transition("move").duration(800).ease(d3.easeCubicInOut).style("opacity",1)},ml=(t,e)=>{let a=al[el][t-1],l=al[el][t],n=Math.max(a,l);a>l?(Ua.select(`g#layer-${t}-node-${e}`).select("image.node-image").each((t,e,a)=>wa(t,e,a,n)),nl=[t,e],dt.set(nl)):a<l&&(Ua.select("g#cnn-layer-group-"+(t-1)).selectAll("image.node-image").each((t,e,a)=>wa(t,e,a,n)),nl=[t-1,void 0],dt.set(nl));let s=ll[t-1].min,o=ll[t-1].max,r=Za[t][e];for(let t=0;t<r.output.length;t++)for(let e=0;e<r.output[0].length;e++)r.output[t][e]<s&&(s=r.output[t][e]),r.output[t][e]>o&&(o=r.output[t][e]);return{range:n,minMax:{min:s,max:o}}},fl=(t,e,a,l,n,s,o,r)=>{let i=tl[t-1][0].x+2*Fa+2*Qa*Da+2*Ba,c=Qa*Da*2/3,d=tl[t-1][0].x;rl.conv_1_1=i+Fa,xt.set(rl),Ua.select("g.edge-group").style("visibility","hidden"),Oa({layerIndex:t,targetX:i,disable:!0,delay:0,opacity:.15,specialIndex:a});let g=i+Fa+Qa*Da,p=(l-g-10*Fa)/10;for(let e=t+1;e<Ga;e++){Oa({layerIndex:e,targetX:g+(e-(t+1))*(Fa+p),disable:!0,delay:0})}Ta("overlay-gradient",[{offset:"0%",color:"rgb(250, 250, 250)",opacity:.85},{offset:"50%",color:"rgb(250, 250, 250)",opacity:.95},{offset:"100%",color:"rgb(250, 250, 250)",opacity:1}]),hl("overlay-gradient",g-Wa/2,0,l-g+Wa,n+Va.top+Va.bottom);let{intermediateLayer:u,intermediateMinMax:y,kernelRange:h,kernelMinMax:m}=pl(t,d,i,g,c,e,a,s,o,r);yl(t,a,d,c,8,s,o,r);let f=1/0,x=-1/0,v=Za[t][a];for(let t=0;t<v.output.length;t++)for(let e=0;e<v.output[0].length;e++)v.output[t][e]<f&&(f=v.output[t][e]),v.output[t][e]>x&&(x=v.output[t][e]);let b={min:Math.min(f,y.min),max:Math.max(x,y.max)},$=Ua.append("g").attr("class","intermediate-layer-annotation").style("opacity",0);ul({leftX:d,curLayerIndex:t,group:$,intermediateGap:c,isFirstConv:!0,i:a});let k=al.local[t];Pa({legendHeight:5,curLayerIndex:t,range:1,group:u,width:2*Fa+c,isInput:!0,x:d,y:Va.top+10*Ja+Ja+10*Fa-25}),Pa({legendHeight:5,curLayerIndex:t,range:k,minMax:b,group:u,width:2*Fa+c,x:tl[t-1][2].x,y:Va.top+10*Ja+Ja+10*Fa}),Pa({legendHeight:5,curLayerIndex:t,range:h,minMax:m,group:u,width:2*Fa+c,x:i+Fa-(2*Fa+c),y:Va.top+10*Ja+Ja+10*Fa,gradientAppendingName:"kernelColorGradient",colorScale:za.weight,gradientGap:.2}),Ua.selectAll("g.intermediate-layer, g.intermediate-layer-annotation").transition().delay(500).duration(500).ease(d3.easeCubicInOut).style("opacity",1)},xl=(t,e,a,l,n,s,o,r)=>{let i=tl[t-1][0].x+2*Fa+2*Qa*Da+2*Ba,c=Qa*Da*2/3;rl.conv_1_2=i+Fa,xt.set(rl);let{range:d,minMax:g}=ml(t,a);Ua.select("g.edge-group").style("visibility","hidden"),Oa({layerIndex:t,targetX:i,disable:!0,delay:0,opacity:.15,specialIndex:a});let p=i+Fa+Qa*Da,u=(l-p-8*Fa)/8;for(let e=t+1;e<Ga;e++){Oa({layerIndex:e,targetX:p+(e-(t+1))*(Fa+u),disable:!0,delay:0})}let y=[{offset:"0%",color:"rgb(250, 250, 250)",opacity:.85},{offset:"50%",color:"rgb(250, 250, 250)",opacity:.95},{offset:"100%",color:"rgb(250, 250, 250)",opacity:1}];Ta("overlay-gradient-right",y),y=[{offset:"0%",color:"rgb(250, 250, 250)",opacity:.85+(.95-.85)*((2*Fa+Qa*Da)/(8*Fa+7*c))},{offset:"100%",color:"rgb(250, 250, 250)",opacity:.85}],Ta("overlay-gradient-left",y),hl("overlay-gradient-right",p-Wa/2,0,l-p+Wa,n+Va.top+Va.bottom),hl("overlay-gradient-left",tl[0][0].x-Wa/2,0,2*Fa+Qa*Da+Wa,n+Va.top+Va.bottom);let h=tl[t-1][0].x,{intermediateLayer:m,intermediateMinMax:f,kernelRange:x,kernelMinMax:v}=pl(t,h,i,p,c,e,a,s,o,r);yl(t,a,h,c,5,s,o,r);let b={min:Math.min(g.min,f.min),max:Math.max(g.max,f.max)},$=Ua.append("g").attr("class","intermediate-layer-annotation").style("opacity",0);ul({leftX:h,curLayerIndex:t,group:$,intermediateGap:c,i:a}),Pa({legendHeight:5,curLayerIndex:t,range:d,minMax:b,group:m,width:2*Fa+c,x:h,y:Va.top+10*Ja+Ja+10*Fa}),Pa({legendHeight:5,curLayerIndex:t,range:x,minMax:v,group:m,width:2*Fa+c,x:i+Fa-(2*Fa+c),y:Va.top+10*Ja+Ja+10*Fa,gradientAppendingName:"kernelColorGradient",colorScale:za.weight,gradientGap:.2}),Ua.selectAll("g.intermediate-layer, g.intermediate-layer-annotation").transition().delay(500).duration(500).ease(d3.easeCubicInOut).style("opacity",1)},vl=(t,e,a,l,n,s,o,r)=>{let i=tl[t][0].x,c=i-(2*Fa+2*Qa*Da+2*Ba),d=Qa*Da*2/3;rl.conv_2_1=i+Fa,xt.set(rl),Ua.select("g.edge-group").style("visibility","hidden");let{range:g,minMax:p}=ml(t,a);Oa({layerIndex:t-1,targetX:c,disable:!0,delay:0}),Oa({layerIndex:t,targetX:i,disable:!0,delay:0,opacity:.15,specialIndex:a});let u=c-Qa,y=(u-tl[0][0].x-5*Fa)/5,h=tl[t][0].x+Fa+Qa;for(let e=0;e<t-1;e++){let t=tl[0][0].x+e*(Fa+y);Oa({layerIndex:e,targetX:t,disable:!0,delay:0})}let m=[{offset:"0%",color:"rgb(250, 250, 250)",opacity:1},{offset:"50%",color:"rgb(250, 250, 250)",opacity:.9},{offset:"100%",color:"rgb(250, 250, 250)",opacity:.85}];Ta("overlay-gradient-left",m),m=[{offset:"0%",color:"rgb(250, 250, 250)",opacity:.85},{offset:"50%",color:"rgb(250, 250, 250)",opacity:.95},{offset:"100%",color:"rgb(250, 250, 250)",opacity:1}],Ta("overlay-gradient-right",m),hl("overlay-gradient-left",tl[0][0].x-Wa/2,0,u-tl[0][0].x+Wa,n+Va.top+Va.bottom),hl("overlay-gradient-right",h-Wa/2,0,l-h+Wa,n+Va.top+Va.bottom);let{intermediateLayer:f,intermediateMinMax:x,kernelRange:v,kernelMinMax:b}=pl(t,c,tl[t][0].x,h,d,e,a,s,o,r);yl(t,a,c,d,5,s,o,r);let $={min:Math.min(p.min,x.min),max:Math.max(p.max,x.max)},k=Ua.append("g").attr("class","intermediate-layer-annotation").style("opacity",0);ul({leftX:c,curLayerIndex:t,group:k,intermediateGap:d,i:a}),Pa({legendHeight:5,curLayerIndex:t,range:g,group:f,width:2*Fa+d,minMax:$,x:c,y:Va.top+10*Ja+Ja+10*Fa}),Pa({legendHeight:5,curLayerIndex:t,range:v,minMax:b,group:f,width:2*Fa+d,x:i+Fa-(2*Fa+d),y:Va.top+10*Ja+Ja+10*Fa,gradientAppendingName:"kernelColorGradient",colorScale:za.weight,gradientGap:.2}),Ua.selectAll("g.intermediate-layer, g.intermediate-layer-annotation").transition().delay(500).duration(500).ease(d3.easeCubicInOut).style("opacity",1)},bl=(t,e,a,l,n,s,o,r)=>{let i=tl[t][0].x,c=i-(2*Fa+2*Qa*Da+2*Ba),d=Qa*Da*2/3;rl.conv_2_2=c,xt.set(rl),Ua.select("g.edge-group").style("visibility","hidden");let{range:g,minMax:p}=ml(t,a);Oa({layerIndex:t-1,targetX:c,disable:!0,delay:0}),Oa({layerIndex:t,targetX:i,disable:!0,delay:0,opacity:.15,specialIndex:a});let u=c-Qa,y=(u-tl[0][0].x-7*Fa)/7,h=i+Fa+Qa;for(let e=0;e<t-1;e++){let t=tl[0][0].x+e*(Fa+y);Oa({layerIndex:e,targetX:t,disable:!0,delay:0})}let m=[{offset:"0%",color:"rgb(250, 250, 250)",opacity:1},{offset:"50%",color:"rgb(250, 250, 250)",opacity:.95},{offset:"100%",color:"rgb(250, 250, 250)",opacity:.85}];Ta("overlay-gradient-left",m),m=[{offset:"0%",color:"rgb(250, 250, 250)",opacity:.85},{offset:"50%",color:"rgb(250, 250, 250)",opacity:.95},{offset:"100%",color:"rgb(250, 250, 250)",opacity:1}],Ta("overlay-gradient-right",m),hl("overlay-gradient-left",tl[0][0].x-Wa/2,0,u-tl[0][0].x+Wa,n+Va.top+Va.bottom),hl("overlay-gradient-right",h-Wa/2,0,l-h+Wa,n+Va.top+Va.bottom);let{intermediateLayer:f,intermediateMinMax:x,kernelRange:v,kernelMinMax:b}=pl(t,c,tl[t][0].x,h,d,e,a,s,o,r);yl(t,a,c,d,5,s,o,r);let $={min:Math.min(p.min,x.min),max:Math.max(p.max,x.max)},k=Ua.append("g").attr("class","intermediate-layer-annotation").style("opacity",0);ul({leftX:c,curLayerIndex:t,group:k,intermediateGap:d,i:a}),Pa({legendHeight:5,curLayerIndex:t,range:g,group:f,minMax:$,width:2*Fa+d,x:c,y:Va.top+10*Ja+Ja+10*Fa}),Pa({legendHeight:5,curLayerIndex:t,range:v,minMax:b,group:f,width:2*Fa+d,x:i+Fa-(2*Fa+d),y:Va.top+10*Ja+Ja+10*Fa,gradientAppendingName:"kernelColorGradient",colorScale:za.weight,gradientGap:.2}),Ua.selectAll("g.intermediate-layer, g.intermediate-layer-annotation").transition().delay(500).duration(500).ease(d3.easeCubicInOut).style("opacity",1)},$l=Je.layerColorScales,kl=Je.nodeLength,wl=Je.plusSymbolRadius,Il=Je.intermediateColor,Ll=Je.kernelRectLength,Ml=Je.svgPaddings,Al=Je.gapRatio,Rl=Je.classLists,El=d3.format(".4f");let Cl=void 0;lt.subscribe(t=>{Cl=t});let Sl=void 0;nt.subscribe(t=>{Sl=t});let Nl=void 0;st.subscribe(t=>{Nl=t});let _l=void 0;at.subscribe(t=>{_l=t});let Hl=void 0;ot.subscribe(t=>{Hl=t});let Ol=void 0;rt.subscribe(t=>{Ol=t});let Tl=void 0;it.subscribe(t=>{Tl=t});let Pl=void 0;ct.subscribe(t=>{Pl=t});let Xl=void 0;ut.subscribe(t=>{Xl=t});let zl=void 0;ht.subscribe(t=>{zl=t});let Fl=void 0;yt.subscribe(t=>{Fl=t});let Bl=void 0;mt.subscribe(t=>{Bl=t});let Gl=void 0;gt.subscribe(t=>{Gl=t});let jl=10,ql=11,Vl=!1,Dl=[],Wl={};const Yl=(t,e,a,l,n,s)=>{let o=d3.select(a[e]);if(s){let t=+o.attr("data-preX"),e=+o.attr("data-preY");o.transition("softmax").duration(n).ease(d3.easeCubicInOut).attr("transform",`translate(${t}, ${e})`)}else{let t=o.attr("transform"),e=+t.replace(/.*\(([\d\.]+),.*/,"$1"),a=+t.replace(/.*,\s([\d\.]+)\)/,"$1");o.transition("softmax").duration(n).ease(d3.easeCubicInOut).attr("transform",`translate(${e-l}, ${a})`),o.attr("data-preX",e),o.attr("data-preY",a)}},Kl=t=>{mt.set({show:!0,text:"Logit: "+El(Dl[t])}),Fl.highlightI=t,yt.set(Fl);let e=Cl.select(".logit-layer"),a=Cl.select(".underneath"),l=Cl.select(".intermediate-layer");e.select("#logit-circle-"+t).style("stroke-width",2),l.select("#plus-symbol-clone-"+t).style("opacity",1).select("circle").style("fill",t=>t.fill),a.select("#logit-lower-"+t).raise(),a.selectAll(".softmax-abstract-edge-"+t).style("stroke-width",.8).style("stroke","#E0E0E0"),a.selectAll(".softmax-edge-"+t).style("stroke-width",1).style("stroke","#E0E0E0"),a.selectAll(".logit-output-edge-"+t).style("stroke-width",3).style("stroke","#E0E0E0"),e.selectAll(".logit-output-edge-"+t).style("stroke-width",3).style("stroke","#E0E0E0")},Ul=t=>{mt.set({show:!1,text:"Logit: "+El(Dl[t])}),Fl.highlightI=-1,yt.set(Fl);let e=Cl.select(".logit-layer"),a=Cl.select(".underneath"),l=Cl.select(".intermediate-layer");e.select("#logit-circle-"+t).style("stroke-width",1),l.select("#plus-symbol-clone-"+t).style("opacity",.2),a.selectAll(".softmax-abstract-edge-"+t).style("stroke-width",.2).style("stroke","#EDEDED"),a.selectAll(".softmax-edge-"+t).style("stroke-width",.2).style("stroke","#F1F1F1"),a.selectAll(".logit-output-edge-"+t).style("stroke-width",1.2).style("stroke","#E5E5E5"),e.selectAll(".logit-output-edge-"+t).style("stroke-width",1.2).style("stroke","#E5E5E5")},Jl=t=>{Kl(t.detail.curI)},Ql=t=>{Ul(t.detail.curI)},Zl=t=>{let e=t.curLayerIndex,a=t.moveX,l=t.symbolX,n=t.symbolY,s=t.outputX,o=t.outputY,r=t.softmaxLeftMid,i=t.selectedI,c=t.intermediateX1,d=t.intermediateX2,g=t.pixelWidth,p=t.pixelHeight,u=t.topY,y=t.bottomY,h=t.middleGap,m=t.middleRectHeight,f=t.softmaxX,x=t.softmaxTextY,v=t.softmaxWidth,b=t.symbolGroup,$=t.flattenRange,k=r-4*a/5;d3.event.stopPropagation(),Xl?(ht.set(!1),Cl.select(".logit-layer").remove(),Cl.select(".logit-layer

1-lower").remove(),Cl.selectAll(".plus-symbol-clone").remove(),Cl.select(".underneath").selectAll(".logit-lower").style("opacity",0),yt.set({show:!1,logits:[]})):ht.set(!0),Cl.select(".intermediate-layer-overlay").select("rect.overlay").transition("softmax").ease(d3.easeCubicInOut).duration(600).attr("transform",`translate(${Xl?0:-a}, 0)`),Cl.selectAll(".intermediate-legend-"+(e-1)).each((t,e,l)=>Yl(0,e,l,a,600,Xl)),Cl.select(".intermediate-layer").select(".layer-label").each((t,e,l)=>Yl(0,e,l,a,600,Xl)),Cl.select(".intermediate-layer").select(".layer-detailed-label").each((t,e,l)=>Yl(0,e,l,a,600,Xl));for(let t=e-1;t>=0;t--){let e=+Cl.select("g#cnn-layer-group-"+t).select("image").attr("x");Oa({layerIndex:t,targetX:Xl?e+a:e-a,disable:!0,delay:0,transitionName:"softmax",duration:600})}Cl.select(".plus-annotation").transition("softmax").duration(600).style("opacity",Xl?1:0).style("pointer-events",Xl?"all":"none");let w=Cl.select(".softmax-annotation").style("pointer-events",Xl?"all":"none"),I=w.selectAll(".softmax-detail-annoataion").data([0]).enter().append("g").attr("class","softmax-detail-annoataion");Xl&&w.selectAll(".softmax-detail-annoataion").remove(),w.select(".arrow-group").transition("softmax").duration(600).style("opacity",Xl?1:0),w.select(".annotation-text").style("cursor","help").style("pointer-events","all").on("click",()=>{d3.event.stopPropagation(),document.querySelector("#article-softmax").scrollIntoView({behavior:"smooth"})}).transition("softmax").duration(600).style("opacity",Xl?1:0).on("end",()=>{if(!Xl){let t=f+v/2,a=x-10;0===i&&(a=x+70);let l=I.append("text").attr("x",t).attr("y",a).attr("class","annotation-text softmax-detail-text").style("dominant-baseline","baseline").style("text-anchor","middle").text("Normalize ");l.append("tspan").attr("dx",1).style("fill","#E56014").text("logits"),l.append("tspan").attr("dx",1).text(" into"),l.append("tspan").attr("x",t).attr("dy","1.1em").text("class probabilities"),Xa(0===i?{group:I,sx:f+v/2-5,sy:x+44,tx:f+v/2,ty:a-12,dr:50,hFlip:!0,marker:"marker-alt"}:{group:I,sx:f+v/2-5,sy:x+4,tx:f+v/2,ty:n-wl-4,dr:50,hFlip:!0,marker:"marker-alt"}),t=k+45,a=(Ml.top+Sl)/2+5;let s=k+20,o=(Ml.top+Sl)/2+5;I.append("g").attr("class","layer-detailed-label").attr("transform",()=>`translate(${k}, ${(Ml.top+Sl)/2-5})`).classed("hidden",!Gl).append("text").style("opacity",.7).style("dominant-baseline","middle").style("font-size","12px").style("font-weight","800").append("tspan").attr("x",0).text("logit").append("tspan").attr("x",0).style("font-size","8px").style("font-weight","normal").attr("dy","1.5em").text("(10)"),I.append("text").attr("class","annotation-text").attr("x",t).attr("y",(Ml.top+Sl)/2+3).style("text-anchor","start").text("Before").append("tspan").attr("x",t).attr("dy","1em").text("normalization"),Xa({group:I,tx:s,ty:o,sx:t-6,sy:a+2,dr:60,hFlip:!1,marker:"marker-alt"}),I.append("text").attr("class","annotation-text").attr("x",Hl[ql][0].x-35).attr("y",(Ml.top+Sl)/2+3).style("text-anchor","end").text("After").append("tspan").attr("x",Hl[ql][0].x-35).attr("dy","1em").text("normalization"),Xa({group:I,tx:Hl[ql][0].x-8,ty:o,sx:Hl[ql][0].x-27,sy:a+2,dr:60,hFlip:!0,marker:"marker-alt"});for(let t=0;t<10;t++)I.append("text").attr("x",k).attr("y",Hl[e-1][t].y+kl/2+8).attr("class","annotation-text softmax-detail-text").attr("id","logit-text-"+t).style("text-anchor","middle").style("dominant-baseline","hanging").style("opacity",0).text(""+Rl[t]);let r=I.append("g").attr("class","softmax-detail-hover-annotation").style("opacity",0);t=k+50,a=Hl[e-1][0].y+kl/2,i<3&&(a=Hl[e-1][9].y+kl/2);let c=r.append("text").attr("x",t).attr("y",a).attr("class","annotation-text softmax-detail-text softmax-hover-text").style("text-anchor","start").style("dominant-baseline","baseline").append("tspan").style("font-weight",700).style("dominant-baseline","baseline").text("Hover over ").append("tspan").style("font-weight",400).style("dominant-baseline","baseline").text("to see");c.append("tspan").style("dominant-baseline","baseline").attr("x",t).attr("dy","1em").text("its "),c.append("tspan").style("dominant-baseline","baseline").attr("dx",1).style("fill","#E56014").text("logit"),c.append("tspan").style("dominant-baseline","baseline").attr("dx",1).text(" value"),Xa({group:r,tx:k+15,ty:a,sx:t-8,sy:a+2,dr:60,hFlip:!1})}}),Cl.select(".flatten-annotation").transition("softmax").duration(600).style("opacity",Xl?1:0).style("pointer-events",Xl?"all":"none");let L=Cl.select(".flatten-layer-left");L.transition("softmax").duration(600).ease(d3.easeCubicInOut).attr("transform",`translate(${Xl?0:-a}, 0)`).on("end",()=>{if(!Xl){(t=>{let e=t.curLayerIndex,a=t.moveX,l=t.softmaxLeftMid,n=t.selectedI,s=t.intermediateX1,o=t.intermediateX2,r=t.pixelWidth,i=t.pixelHeight,c=t.topY,d=t.bottomY,g=t.softmaxX,p=t.middleGap,u=t.middleRectHeight,y=t.symbolGroup,h=t.symbolX,m=t.flattenRange,f

1=Cl.select(".intermediate-layer").append("g").attr("class","logit-layer").raise(),x=Cl.select(".intermediate-layer").select(".flatten-layer").select(".plus-symbol").clone(!0).attr("class","temp-clone-plus-symbol").attr("transform",`translate(${h-a},\n      ${Hl[e][n].y+kl/2})`).style("pointer-events","none").remove(),v=f.append(()=>x.node());Cl.select(".softmax-symbol").raise();let b=Cl.select(".underneath").append("g").attr("class","logit-layer-lower").lower(),$=l-4*a/5;Dl=[];for(let t=0;t<_l[ql].length;t++)Dl.push(_l[ql][t].logit);let k=d3.scaleLinear().domain(d3.extent(Dl)).range([.2,1]);f.append("circle").attr("class","logit-circle").attr("id","logit-circle-"+n).attr("cx",$).attr("cy",Hl[e-1][n].y+kl/2).attr("r",8).style("fill",$l.logit(k(Dl[n]))).style("cursor","crosshair").style("pointer-events","all").style("stroke",Il).on("mouseover",()=>Kl(n)).on("mouseleave",()=>Ul(n)).on("click",()=>{d3.event.stopPropagation()});let w=Cl.select(".intermediate-layer-annotation").select(".softmax-detail-annoataion");w.select("#logit-text-"+n).style("opacity",1),v.raise(),f.append("line").attr("class","logit-output-edge-"+n).attr("x1",o-a+2*wl).attr("x2",g).attr("y1",Hl[e-1][n].y+kl/2).attr("y2",Hl[e-1][n].y+kl/2).style("fill","none").style("stroke","#EAEAEA").style("stroke-width","1.2").lower();let I=[],L=_l.flatten.length/_l[1].length,M=[...Array(_l[ql].length).keys()].filter(t=>t!=n),A=0,R=d3.linkHorizontal().x(t=>t.x).y(t=>t.y);const E=()=>{if(!zl)return void Cl.select(".underneath").selectAll(".logit-lower").remove();let t=M[A],l=Cl.select(".underneath").select("#logit-lower-"+t);if(l.empty()){l=Cl.select(".underneath").append("g").attr("class","logit-lower").attr("id","logit-lower-"+t).style("opacity",0);for(let l=0;l<L;l+=3){[0,9].forEach(n=>{let g=l+n*L;I.push({source:{x:s+r+3-a,y:0===n?c+l*i:d+l*i},target:{x:o-a,y:Hl[e][t].y+kl/2},index:g,weight:_l.flatten[g].outputLinks[t].weight,color:"#F1F1F1",width:.5,opacity:1,class:"softmax-edge-"+t})})}for(let l=0;l<_l[ql].length-2;l++)I.push({source:{x:s+r+3-a,y:c+L*i+p*(l+1)+u*(l+.5)},target:{x:o-a,y:Hl[e][t].y+kl/2},index:-1,color:"#EDEDED",width:.5,opacity:1,class:"softmax-abstract-edge-"+t});l.selectAll("path.softmax-edge-"+t).data(I).enter().append("path").attr("class",t=>t.class).attr("id",t=>"edge-"+t.name).attr("d",t=>R({source:t.source,target:t.target})).style("fill","none").style("stroke-width",t=>t.width).style("stroke",t=>void 0===t.color?Il:t.color).style("opacity",t=>t.opacity).style("pointer-events","none")}let x=f.append("g").attr("class","logit-layer-"+t).style("opacity",0),v=y.clone(!0).style("opacity",0);v.attr("class","plus-symbol-clone").attr("id","plus-symbol-clone-"+t).select("circle").datum({fill:la($l.weight,m,_l[ql][t].bias,.35)}).style("pointer-events","none").style("fill","#E5E5E5"),v.attr("transform",`translate(${h},\n      ${Hl[e][t].y+kl/2})`);let C=R({source:{x:o-a+2*wl,y:Hl[e][t].y+kl/2},target:{x:$+8,y:Hl[e][t].y+kl/2}}),S=R({source:{x:$+8,y:Hl[e][t].y+kl/2},target:{x:g,y:Hl[e][n].y+kl/2}}),N=b.append("path").attr("class","logit-output-edge-"+t).attr("d",C).style("fill","none").style("stroke","#EAEAEA").style("stroke-width","1.2"),_=b.append("path").attr("class","logit-output-edge-"+t).attr("d",S).style("fill","none").style("stroke","#EAEAEA").style("stroke-width","1.2"),H=N.node().getTotalLength(),O=_.node().getTotalLength(),T=H+O,P=Vl?500:800,X=Vl?400:600;N.attr("stroke-dasharray",H+" "+H).attr("stroke-dashoffset",H),_.attr("stroke-dasharray",O+" "+O).attr("stroke-dashoffset",O),N.transition("softmax-output-edge").duration(H/T*P).attr("stroke-dashoffset",0),_.transition("softmax-output-edge").delay(H/T*P).duration(O/T*P).attr("stroke-dashoffset",0),x.append("circle").attr("class","logit-circle").attr("id","logit-circle-"+t).attr("cx",$).attr("cy",Hl[e-1][t].y+kl/2).attr("r",7).style("fill",$l.logit(k(Dl[t]))).style("stroke",Il).style("cursor","crosshair").on("mouseover",()=>Kl(t)).on("mouseleave",()=>Ul(t)).on("click",()=>{d3.event.stopPropagation()}),Fl.startAnimation={i:t,duration:X,hasInitialized:!1},yt.set(Fl),x.transition("softmax-edge").duration(X).style("opacity",1),(n<3&&9==t||n>=3&&0==t)&&w.select(".softmax-detail-hover-annotation").transition("softmax-edge").duration(X).style("opacity",1),w.select("#logit-text-"+t).transition("softmax-edge").duration(X).style("opacity",1),l.transition("softmax-edge").duration(X).style("opacity",1).on("end",()=>

1{A++,A<M.length?(I=[],E()):(Vl=!0,Fl.hasInitialized=!0,yt.set(Fl))}),v.transition("softmax-edge").duration(X).style("opacity",.2)};let C=Cl.select(".intermediate-layer").select(".layer-label").node(),S=((t,e)=>{if(void 0!==t){let a=e;for(;null==a.getScreenCTM&&null!=a.parentNode;)a=a.parentNode;let l=t.node().ownerSVGElement.createSVGPoint(),n=a.getScreenCTM(),s=a.getBBox().height;l.x+=0,l.y-=s/2;let o=l.matrixTransform(n);return{top:o.y,left:o.x}}})(Cl,C),N=100+ +d3.select("#cnn-svg").style("height").replace("px","")/2-96;const _=document.getElementById("detailview");_.style.top=N+"px",_.style.left=S.left-490-50+"px",_.style.position="absolute",yt.set({show:!0,logits:Dl,logitColors:Dl.map(t=>$l.logit(k(t))),selectedI:n,highlightI:-1,outputName:Rl[n],outputValue:_l[ql][n].output,startAnimation:{i:-1,duration:0,hasInitialized:Vl}}),E(),Pa({legendHeight:5,curLayerIndex:e,range:d3.extent(Dl)[1]-d3.extent(Dl)[0],minMax:{min:d3.extent(Dl)[0],max:d3.extent(Dl)[1]},group:f,width:g-(o+2*wl-a+5),gradientAppendingName:"flatten-logit-gradient",gradientGap:.1,colorScale:$l.logit,x:o+2*wl-a+5,y:Ml.top+10*Sl+Sl+10*kl}),f.append("g").attr("class","layer-label").classed("hidden",Gl).attr("transform",()=>`translate(${$}, ${(Ml.top+Sl)/2+5})`).append("text").style("text-anchor","middle").style("dominant-baseline","middle").style("opacity",.8).style("font-weight",800).text("logit")})({curLayerIndex:e,moveX:a,softmaxLeftMid:r,selectedI:i,intermediateX1:c,intermediateX2:d,pixelWidth:g,pixelHeight:p,topY:u,bottomY:y,middleGap:h,middleRectHeight:m,softmaxX:f,symbolGroup:b,symbolX:l,flattenRange:$})}if(Xl)L.select(".symbol-output-line").remove();else{L.select(".edge-group").append("line").attr("class","symbol-output-line").attr("x1",l).attr("y1",n).attr("x2",s+a).attr("y2",o).style("stroke-width",1.2).style("stroke","#E5E5E5").style("opacity",0).transition("softmax").delay(200).duration(400).style("opacity",1)}Xl=!Xl,ut.set(Xl)})},tn=(t,e,a,l,n)=>{Cl.selectAll(".output-legend").classed("hidden",!1);let s=kl/2,o=2*kl+5.5*Nl*Al+s,r=Hl[t][0].x-o,i=Nl*Al*4/2;let c=d3.linkHorizontal().x(t=>t.x).y(t=>t.y);Cl.select("g.edge-group").style("visibility","hidden"),Oa({layerIndex:t-1,targetX:r,disable:!0,delay:0}),Oa({layerIndex:t,targetX:Hl[t][0].x,disable:!0,delay:0,opacity:.15,specialIndex:a});let d=(r-Nl-Hl[0][0].x-10*kl)/10;if(d>20)for(let e=0;e<t-1;e++){let t=Hl[0][0].x+e*(kl+d);Oa({layerIndex:e,targetX:t,disable:!0,delay:0})}else{d=20;let e=r-2*d-kl;for(let a=t-2;a>=0;a--)Oa({layerIndex:a,targetX:e,disable:!0,delay:0}),e=e-d-kl}Ta("overlay-gradient-left",[{offset:"0%",color:"rgb(250, 250, 250)",opacity:1},{offset:"50%",color:"rgb(250, 250, 250)",opacity:.95},{offset:"100%",color:"rgb(250, 250, 250)",opacity:.85}]);let g=Cl.append("g").attr("class","intermediate-layer-overlay");g.append("rect").attr("class","overlay").style("fill","url(#overlay-gradient-left)").style("stroke","none").attr("width",r+Ml.left-2*d+3).attr("height",n+Ml.top+Ml.bottom).attr("x",-Ml.left).attr("y",0).style("opacity",0),g.selectAll("rect.overlay").transition("move").duration(800).ease(d3.easeCubicInOut).style("opacity",1);let p=Cl.append("g").attr("class","intermediate-layer").style("opacity",0),u=r+kl+i,y=u+i+s,h=Tl[Ol][t-1],m=$l.conv,f=_l.flatten.length/_l[1].length,x=[],v=p.append("g").attr("class","flatten-layer").append("g").attr("class","flatten-layer-left"),b=Hl[t-1][0].y,$=Hl[t-1][9].y+kl-1.1*f,k=_l[t-1][0].output.length,w=kl/(2*k),I=kl/k,L=d3.extent(_l.flatten.slice(f).map(t=>t.outputLinks[a].weight).concat(_l.flatten.slice(9*f,10*f).map(t=>t.outputLinks[a].weight))),M=Math.round(1e3*Math.max(...L.map(Math.abs)))/1e3*2,A=t=>{let e=t.index;Bl=void 0===t.weight?{show:!0,text:"Pixel value: "+El(Wl[e])}:{show:!0,text:"Weight: "+El(t.weight)},mt.set(Bl),v.select("#edge-flatten-"+e).raise().style("stroke",Il).style("stroke-width",1),v.select(`#edge-flatten-${e}-output`).raise().style("stroke-width",1).style("stroke",t=>la($l.weight,M,t.weight,.1)),v.select("#bounding-"+e).raise().style("opacity",1)},R=t=>{let e=t.index;Bl=void 0===t.weight?{show:!1,text:"Pixel value: "+El(Wl[e])}:{show:!1,text:"Weight: "+El(t.weight)},mt.set(Bl),v.select("#edge-flatten-"+e).style("stroke-width",.6).style("stroke","#E5E5E5"),v.select(`#edge-flatten-${e}-output`).style("stroke-width",.6).style("stroke",t=>la($l.weight,M,t.weight,.35)),v.select("#bounding-"+e).raise().style("opacity",0)};Wl={};for(let e=0;e<f;e++){[0,9].forEach(l=>{let n=e+l*f;Wl[n]=_l.flatten[n].output,v.append("rect").attr("x",u).attr("y",0===l?b+1.1*e:$+1.1*e).attr("width",s).attr("height",1.1).style("cursor","crosshair").style("fill",m((_l.flatten[n].output+h/2)/h)).on("mouseover",()=>A({index:n})).on("mouseleave",()=>R({index:n})).on("click",()=>{d3.event.stopPropagation()}),x.push({source:{x:u+s+3,y:0===l?b+1.1*e:$+1.1*e},target:{x:y,y:Hl[t][a].y+kl/2},index:n,weight:_l.flatten[n].outputLinks[a].weight,name:`flatten-${n}-output`,color:la($l.weight,M,_l.flatten[n].outputLinks[a].weight,.35),width:.6,opacity:1,class:"flatten-output"});let o=Math.floor(e/k);x.push({target:{x:u-3,y:0===l?b+1.1*e:$+1.1*e},source:{x:r+kl+3,y:Hl[t-1][l].y+(2*o+1)*w},index:n,name:"flatten-"+n,color:"#E5E5E5",width:.6,opacity:1,class:"flatten"});let i=_l.flatten[n].inputLinks[0].weight;

1v.append("rect").attr("id","bounding-"+n).attr("class","flatten-bounding").attr("x",r+i[1]*I).attr("y",Hl[t-1][l].y+i[0]*I).attr("width",I).attr("height",I).style("fill","none").style("stroke",Il).style("stroke-length","0.5").style("pointer-events","all").style("cursor","crosshair").style("opacity",0).on("mouseover",()=>A({index:n})).on("mouseleave",()=>R({index:n})).on("click",()=>{d3.event.stopPropagation()})})}let E=[];for(let e=1;e<_l[t-1].length-1;e++)E.push({index:e});let C=(10*kl+9*Sl-1.1*f*2-45)/8;E.forEach((e,l)=>{v.append("rect").attr("x",u+s/4).attr("y",b+1.1*f+5*(l+1)+C*l).attr("width",s/2).attr("height",C).style("fill","#E5E5E5"),v.append("polyline").attr("points",`${r+kl+3}\n        ${Hl[t-1][e.index].y},\n        ${r+kl+10}\n        ${Hl[t-1][e.index].y+kl/2},\n        ${r+kl+3}\n        ${Hl[t-1][e.index].y+kl}`).style("fill","#E5E5E5").style("opacity",1),x.push({source:{x:r+kl+10,y:Hl[t-1][e.index].y+kl/2},target:{x:u-3,y:b+1.1*f+5*(l+1)+C*(l+.5)},index:-1,width:1,opacity:1,name:"flatten-abstract-"+e.index,color:"#E5E5E5",class:"flatten-abstract"}),x.push({source:{x:u+s+3,y:b+1.1*f+5*(l+1)+C*(l+.5)},target:{x:y,y:Hl[t][a].y+kl/2},index:-1,name:`flatten-abstract-${e.index}-output`,color:"#E5E5E5",weight:e.weight,width:1,opacity:1,class:"flatten-abstract-output"})});let S=y+wl,N=Hl[t][a].y+kl/2,_=v.append("g").attr("class","plus-symbol").attr("transform",`translate(${S}, ${N})`);_.append("rect").attr("x",-wl).attr("y",-wl).attr("width",2*wl).attr("height",2*wl).attr("rx",3).attr("ry",3).style("fill","none").style("stroke",Il),_.append("rect").attr("x",-(wl-3)).attr("y",-.5).attr("width",2*(wl-3)).attr("height",1).style("fill",Il),_.append("rect").attr("x",-.5).attr("y",-(wl-3)).attr("width",1).attr("height",2*(wl-3)).style("fill",Il),_.append("circle").attr("cx",0).attr("cy",-kl/2-.5*Ll).attr("r",1.5*Ll).style("stroke",Il).style("cursor","crosshair").style("fill",la($l.weight,M,e.bias,.35)).on("mouseover",()=>{mt.set({show:!0,text:"Bias: "+El(e.bias)})}).on("mouseleave",()=>{mt.set({show:!1,text:"Bias: "+El(e.bias)})}).on("click",()=>{d3.event.stopPropagation()}),_.append("path").attr("d",c({source:{x:0,y:0},target:{x:0,y:-kl/2-.5*Ll}})).attr("id","bias-plus").attr("stroke-width",1.2).attr("stroke","#E5E5E5").lower(),x.push({source:ea({x:y+2*wl-kl,y:Hl[t][a].y}),target:aa({x:Hl[t][a].x-3,y:Hl[t][a].y}),name:"symbol-output",width:1.2,color:"#E5E5E5"});let H=(o-2*kl-2*i-55)/2,O=y+2*wl,T=H+O,P=H/2+O,X=Hl[t][a].y-2*Ll-6,z={curLayerIndex:t,moveX:2*(y-(u+s+3))/3,symbolX:S,symbolY:N,outputX:Hl[t][a].x,outputY:N,softmaxLeftMid:P,selectedI:a,intermediateX1:u,intermediateX2:y,pixelWidth:s,pixelHeight:1.1,topY:b,bottomY:$,middleGap:5,middleRectHeight:C,softmaxX:T,softmaxWidth:55,softmaxTextY:X,symbolGroup:_,flattenRange:M},F=p.append("g").attr("class","softmax-symbol").attr("transform",`translate(${T}, ${N})`).style("pointer-event","all").style("cursor","pointer").on("click",()=>Zl(z));F.append("rect").attr("x",0).attr("y",-wl).attr("width",55).attr("height",2*wl).attr("stroke",Il).attr("rx",2).attr("ry",2).attr("fill","#FAFAFA"),F.append("text").attr("x",5).attr("y",1).style("dominant-baseline","middle").style("font-size","12px").style("opacity",.5).text("softmax"),p.append("g").attr("class","layer-label").classed("hidden",Gl).attr("transform",()=>`translate(${r+kl+(4*Nl*Al+s)/2}, ${(Ml.top+Sl)/2+5})`).style("cursor","help").on("click",()=>{d3.event.stopPropagation(),document.querySelector("#article-flatten").scrollIntoView({behavior:"smooth"})}).append("text").style("dominant-baseline","middle").style("opacity",.8).style("font-weight",800).text("flatten");let B=Number(d3.select("#cnn-svg").style("height").replace("px",""))+150,G=new SmoothScroll('a[href*="#"]',{offset:-B}),j=p.append("g").attr("transform",()=>`translate(${r+kl+(4*Nl*Al+s)/2}, ${(Ml.top+Sl)/2-5})`).attr("class","layer-detailed-label").classed("hidden",!Gl).style("cursor","help").on("click",()=>{d3.event.stopPropagation();let t=document.querySelector("#article-flatten");G.animateScroll(t)});j.append("title").text("Move to article section");let q=j.append("text").style("text-anchor","middle").style("dominant-baseline","middle").style("opacity","0.7").style("font-weight",800).append("tspan").text("flatten"),V=_l[jl].length*_l[jl][0].output.length*_l[jl][0].output[0].length;q.append("tspan").attr("x",0).attr("dy","1.5em").style("font-size","8px").style("font-weight","normal").text(`(${V})`);let D=v.append("g").attr("class","edge-group").lower();D.selectAll("path").data(x).enter().append("path").attr("class",t=>t.class).attr("id",t=>"edge-"+t.name).attr("d",t=>c({source:t.source,target:t.target})).style("fill","none").style("stroke-width",t=>t.width).style("stroke",t=>void 0===t.color?Il:t.color).style("opacity",t=>t.opacity),D.selectAll("path.flatten-abstract-output").lower(),D.selectAll("path.flatten,path.flatten-output").style("cursor","crosshair").style("pointer-events","all").on("mouseover",A).on("mouseleave",R).on("click",()=>{d3.event.stopPropagation()}),Pa({legendHeight:5,curLayerIndex:t,range:h,minMax:Pl[10],group:p,width:i+kl-3,x:r,y:Ml.top+10*Sl+Sl+10*kl}),Pa({legendHeight:5,curLayerIndex:t,range:M,minMax:{min:L[0],max:L[1]},group:p,width:i-3-5,gradientAppendingName:"flatten-weight-gradient",gradientGap:.1,colorScale:$l.weight,x:r+i+kl+s+3,y:Ml.top+10*Sl+Sl+10*kl});let W=Cl.append("g").attr("class","intermediate-layer-annotation").style("opacity",0),Y=W.append("g").attr("class","plus-annotation"),K=y,U=Hl[t][a].y+kl+3*Ll,J=Hl[t][a].y+kl+2*Ll,Q=Hl[t][a].y+kl/2+wl;9==a&&(U-=110,J-=70,Q-=18);let Z=Y.append("text").attr("x",K).attr("y",U).attr("class","annotation-text").style("dominant-baseline","hanging").style("text-anchor","middle");Z.append("tspan").style("dominant-baseline","hanging").text("Add up all products"),Z.append("tspan").attr("x",K).attr("dy","1em").style("dominant-baseline","hanging").text("("),Z.append("tspan").style("fill","#66a3c8").style("dominant-baseline","hanging").text("element"),Z.append("tspan").style("dominant-baseline","hanging").text(" × "),Z.append("tspan").style("dominant-baseline","hanging").style("fill","#b58946").text("weight"),Z.append("tspan").style("dominant-baseline","hanging").text(")"),Z.append("tspan").attr("x",K).attr("dy","1em").style("dominant-baseline","hanging").text("and then "),Z.append("tspan").style("dominant-baseline","hanging").style("fill","#479d94").text("bias"),Xa({group:Y,sx:y-2*wl-3,sy:J,tx:y-5,ty:Q,dr:30,hFlip:9===a,marker:"marker-alt"});let tt=Hl[t][a].y;tt-=2*Ll+4,v.append("text").attr("class","annotation-text").attr("x",y+wl).attr("y",tt).style("text-anchor","middle").style("dominant-baseline","baseline").text("Bias");let et=W.append("g").attr("class","softmax-annotation");et.append("text").attr("x",T+27.5).attr("y",X).attr("class","annotation-text").style("dominant-baseline","baseline").style("text-anchor","middle").style("font-weight",700).text("Click ").append("tspan").attr("dx",1).style("font-weight",400).text("to learn more"),Xa({group:et,sx:T+27.5-5,sy:X+4,tx:T+27.5,ty:N-wl-4,dr:50,hFlip:!0});let at=W.append("g").attr("class","flatten-annotation");K=r-80,U=Hl[t-1][0].y;let lt=at.append("text").attr("x",K).attr("y",U).attr("class","annotation-text").style("dominant-baseline","hanging").style("text-anchor","middle");lt.append("tspan").style("dominant-baseline","hanging").style("font-weight",700).text("Hover over ").append("tspan").attr("dx",1).style("font-weight",400).style("dominant-baseline","hanging").text("matrix to"),lt.append("tspan").style("dominant-baseline","hanging").attr("x",K).attr("dy","1em").text("see how it is flattened"),lt.append("tspan").style("dominant-baseline","hanging").attr("x",K).attr("dy","1em").text("into a 1D array!"),Xa({group:at,sx:K+45,sy:U+.4*kl+12,tx:r-10,ty:U+kl/2,dr:80,hFlip:!0}),U=Hl[t-1][1].y;let nt=at.append("text").attr("x",K).attr("y",U).attr("class","annotation-text").style("dominant-baseline","hanging").style("text-anchor","middle");nt.append("tspan").style("dominant-baseline","hanging").text("Same flattening"),nt.append("tspan").style("dominant-baseline","hanging").attr("x",K).attr("dy","1em").text("operation for"),nt.append("tspan").style("dominant-baseline","hanging").attr("x",K).attr("dy","1em").text("each neuron"),Xa({group:at,sx:K+39,sy:U+25,tx:r-10,ty:U+kl/2-2,dr:80,hFlip:!0,marker:"marker-alt"}

1),W.append("g").attr("class","output-annotation").append("text").attr("x",Hl[ql][a].x).attr("y",Hl[ql][a].y+10).attr("class","annotation-text").text(`(${d3.format(".4f")(_l[ql][a].output)})`),Cl.selectAll("g.intermediate-layer, g.intermediate-layer-annotation").transition().delay(500).duration(500).ease(d3.easeCubicInOut).style("opacity",1)};function en(t,e,a){const l=t.slice();return l[83]=e[a],l[85]=a,l}function an(t,e,a){const l=t.slice();return l[83]=e[a],l[85]=a,l}function ln(t){let e,a,l,s,o,r,p,y;return{c(){e=u("div"),a=u("img"),i(a.src,l="/copycat-cnn-explainer/assets/img/"+t[83].file)||v(a,"src",l),v(a,"alt","image option"),v(a,"title",s=t[83].class),v(a,"data-imagename",o=t[83].file),v(a,"class","svelte-chdgby"),v(e,"class","image-container svelte-chdgby"),v(e,"data-imagename",r=t[83].file),L(e,"inactive",t[7]!==t[83].file),L(e,"disabled",t[6])},m(l,s){d(l,e,s),c(e,a),p||(y=x(e,"click",(function(){n(t[6]?gn:t[17])&&(t[6]?gn:t[17]).apply(this,arguments)})),p=!0)},p(a,l){t=a,16512&l[0]&&L(e,"inactive",t[7]!==t[83].file),64&l[0]&&L(e,"disabled",t[6])},d(t){t&&g(e),p=!1,y()}}}function nn(t){let e,a,l,s,o,r,p,y,h;return{c(){e=u("div"),a=u("img"),r=m(),i(a.src,l="/copycat-cnn-explainer/assets/img/"+t[83].file)||v(a,"src",l),v(a,"alt","image option"),v(a,"title",s=t[83].class),v(a,"data-imagename",o=t[83].file),v(a,"class","svelte-chdgby"),v(e,"class","image-container svelte-chdgby"),v(e,"data-imagename",p=t[83].file),L(e,"inactive",t[7]!==t[83].file),L(e,"disabled",t[6])},m(l,s){d(l,e,s),c(e,a),c(e,r),y||(h=x(e,"click",(function(){n(t[6]?pn:t[17])&&(t[6]?pn:t[17]).apply(this,arguments)})),y=!0)},p(a,l){t=a,32896&l[0]&&L(e,"inactive",t[7]!==t[83].file),64&l[0]&&L(e,"disabled",t[6])},d(t){t&&g(e),y=!1,h()}}}function sn(t){let e,a;return e=new He({props:{logits:t[3].logits,logitColors:t[3].logitColors,selectedI:t[3].selectedI,highlightI:t[3].highlightI,outputName:t[3].outputName,outputValue:t[3].outputValue,startAnimation:t[3].startAnimation}}),e.$on("xClicked",t[24]),e.$on("mouseOver",Jl),e.$on("mouseLeave",Ql),{c(){Y(e.$$.fragment)},m(t,l){K(e,t,l),a=!0},p(t,a){const l={};8&a[0]&&(l.logits=t[3].logits),8&a[0]&&(l.logitColors=t[3].logitColors),8&a[0]&&(l.selectedI=t[3].selectedI),8&a[0]&&(l.highlightI=t[3].highlightI),8&a[0]&&(l.outputName=t[3].outputName),8&a[0]&&(l.outputValue=t[3].outputValue),8&a[0]&&(l.startAnimation=t[3].startAnimation),e.$set(l)},i(t){a||(D(e.$$.fragment,t),a=!0)},o(t){W(e.$$.fragment,t),a=!1},d(t){U(e,t)}}}function on(t){let e,a;return e=new Ce({props:{input:t[8][0].input,kernelLength:2,dataRange:t[8].colorRange,isExited:t[10]}}),e.$on("message",t[22]),{c(){Y(e.$$.fragment)},m(t,l){K(e,t,l),a=!0},p(t,a){const l={};256&a[0]&&(l.input=t[8][0].input),256&a[0]&&(l.dataRange=t[8].colorRange),1024&a[0]&&(l.isExited=t[10]),e.$set(l)},i(t){a||(D(e.$$.fragment,t),a=!0)},o(t){W(e.$$.fragment,t),a=!1},d(t){U(e,t)}}}function rn(t){let e,a;return e=new be({props:{input:t[8][0].input,output:t[8][0].output,dataRange:t[8].colorRange,isExited:t[10]}}),e.$on("message",t[23]),{c(){Y(e.$$.fragment)},m(t,l){K(e,t,l),a=!0},p(t,a){const l={};256&a[0]&&(l.input=t[8][0].input),256&a[0]&&(l.output=t[8][0].output),256&a[0]&&(l.dataRange=t[8].colorRange),1024&a[0]&&(l.isExited=t[10]),e.$set(l)},i(t){a||(D(e.$$.fragment,t),a=!0)},o(t){W(e.$$.fragment,t),a=!1},d(t){U(e,t)}}}function cn(t){let e,a;return e=new pe({props:{input:t[8][t[9]].input,kernel:t[8][t[9]].kernel,dataRange:t[8].colorRange,colorScale:t[8].inputIsInputLayer?t[13].input[0]:t[13].conv,isInputInputLayer:t[8].inputIsInputLayer,isExited:t[11]}}),e.$on("message",t[21]),{c(){Y(e.$$.fragment)},m(t,l){K(e,t,l),a=!0},p(t,a){const l={};768&a[0]&&(l.input=t[8][t[9]].input),768&a[0]&&(l.kernel=t[8][t[9]].kernel),256&a[0]&&(l.dataRange=t[8].colorRange),256&a[0]&&(l.colorScale=t[8].inputIsInputLayer?t[13].input[0]:t[13].conv),256&a[0]&&(l.isInputInputLayer=t[8].inputIsInputLayer),2048&a[0]&&(l.isExited=t[11]),e.$set(l)},i(t){a||(D(e.$$.fragment,t),a=!0)},o(t){W(e.$$.fragment,t),a=!1},d(t){U(e,t)}}}function dn(t){let e,a,s,o,r,y,f,$,I,M,A,R,E,C,S,N,_,H,O,T,X,z,F,B,G,j,J,Q,Z,tt,et,at,lt,nt,st,ot,rt,it,ct,dt,gt,pt,ut,yt,ht,mt,ft,xt=t[4].text+"",vt=t[14],bt=[];for(let e=0;e<vt.length;e+=1)bt[e]=ln(an(t,vt,e));let $t=t[15],kt=[];for(let e=0;e<$t.length;e+=1)kt[e]=nn(en(t,$t,e));const wt=[cn,rn,on,sn],It=[];function Lt(t,e){return t[5].data&&"conv"===t[5].data.type&&-1!=t[9]?0:t[5].data&&"relu"===t[5].data.type?1:t[5].data&&"pool"===t[5].data.type?2:t[3].show?3:-1}return~(gt=Lt(t))&&(pt=It[gt]=wt[gt](t)),yt=new Pe({}),yt.$on("xClicked",t[19]),yt.$on("urlTyped",t[20]),{c(){e=u("div"),a=u("div"),s=u("div"),o=u("span"),o.textContent="Oracle Model:",r=m();for(let t=0;t<bt.length;t+=1)bt[t].c();y=m(),f=u("span"),f.textContent="Out-of-Domain images:",$=m();for(let t=0;t<kt.length;t+=1)kt[t].c();I=m(),M=u("div"),A=u("img"),E=m(),C=u("span"),C.innerHTML='<i class="fas fa-circle fa-stack-2x"></i> \n              <i class="fas fa-pen fa-stack-1x fa-inverse"></i>',N=m(),_=u("button"),H=u("span"),H.innerHTML='<i class="fas fa-crosshairs "></i>',O=m(),T=u("span"),X=h(xt),z=m(),F=u("div"),B=u("button"),G=u("span"),G.innerHTML='<i class="fas fa-eye"></i>',j=m(),J=u("span"),J.textContent="Show detail",Q=m(),Z=u("div"),tt=u("span"),tt.innerHTML='<i class="fas fa-palette"></i>',et=m(),at=u("div"),lt=u("select"),nt=u("option"),nt.textContent="Unit",st=u("option"),st.textContent="Module",ot=u("option"),ot.textContent="Global",rt=m(),it=u("div"),it.innerHTML='<svg id="cnn-svg" class="svelte-chdgby"></svg>',ct=m(),dt=u("div"),pt&&pt.c(),ut=m(),Y(yt.$$.fragment),v(o,"class","model-name svelte-chdgby"),k(f,"font-size","1.1rem"),k(f,"margin-right","2px"),k(f,"font-family","'Neucha'"),v(A,"class","custom-image svelte-chdgby"),i(A.src,R="/copycat-cnn-explainer/assets/img/plus.svg")||v(A,"src","/copycat-cnn-explainer/assets/img/plus.svg"),v(A,"alt","plus button"),v(A,"t

1itle","Add new input image"),v(A,"data-imagename","custom"),v(C,"class","fa-stack edit-icon svelte-chdgby"),L(C,"hidden",null===t[12]),v(M,"class","image-container svelte-chdgby"),v(M,"data-imagename",S="custom"),L(M,"inactive","custom"!==t[7]),L(M,"disabled",t[6]),v(H,"class","icon"),k(H,"margin-right","5px"),v(T,"id","hover-label-text"),v(_,"class","button is-very-small is-link is-light svelte-chdgby"),v(_,"id","hover-label"),k(_,"opacity",t[4].show?1:0),v(s,"class","left-control svelte-chdgby"),v(G,"class","icon"),v(J,"id","hover-label-text"),v(B,"class","button is-very-small svelte-chdgby"),v(B,"id","detailed-button"),B.disabled=t[6],L(B,"is-activated",t[2]),v(tt,"class","icon is-left"),nt.__value="local",nt.value=nt.__value,st.__value="module",st.value=st.__value,ot.__value="global",ot.value=ot.__value,v(lt,"id","level-select"),lt.disabled=t[6],v(lt,"class","svelte-chdgby"),void 0===t[0]&&P(()=>t[25].call(lt)),v(at,"class","select svelte-chdgby"),v(Z,"class","control is-very-small has-icons-left svelte-chdgby"),v(Z,"title","Change color scale range"),v(F,"class","right-control svelte-chdgby"),v(

1a,"class","control-container svelte-chdgby"),v(it,"class","cnn svelte-chdgby"),v(e,"class","overview svelte-chdgby"),v(dt,"id","detailview")},m(l,i){d(l,e,i),c(e,a),c(a,s),c(s,o),c(s,r);for(let t=0;t<bt.length;t+=1)bt[t].m(s,null);c(s,y),c(s,f),c(s,$);for(let t=0;t<kt.length;t+=1)kt[t].m(s,null);c(s,I),c(s,M),c(M,A),c(M,E),c(M,C),c(s,N),c(s,_),c(_,H),c(_,O),c(_,T),c(T,X),c(a,z),c(a,F),c(F,B),c(B,G),c(B,j),c(B,J),c(F,Q),c(F,Z),c(Z,tt),c(Z,et),c(Z,at),c(at,lt),c(lt,nt),c(lt,st),c(lt,ot),w(lt,t[0]),c(e,rt),c(e,it),t[26](e),d(l,ct,i),d(l,dt,i),~gt&&It[gt].m(dt,null),d(l,ut,i),K(yt,l,i),ht=!0,mt||(ft=[x(M,"click",(function(){n(t[6]?un:t[18])&&(t[6]?un:t[18]).apply(this,arguments)})),x(B,"click",t[16]),x(lt,"change",t[25])],mt=!0)},p(e,a){if(t=e,147648&a[0]){let e;for(vt=t[14],e=0;e<vt.length;e+=1){const l=an(t,vt,e);bt[e]?bt[e].p(l,a):(bt[e]=ln(l),bt[e].c(),bt[e].m(s,y))}for(;e<bt.length;e+=1)bt[e].d(1);bt.length=vt.length}if(164032&a[0]){let e;for($t=t[15],e=0;e<$t.length;e+=1){const l=en(t,$t,e);kt[e]?kt[e].p(l,a):(kt[e]=nn(l),kt[e].c(),kt[e].m(s,I))}for(;e<kt.length;e+=1)kt[e].d(1);kt.length=$t.length}(!ht||4096&a[0])&&L(C,"hidden",null===t[12]),(!ht||128&a[0])&&L(M,"inactive","custom"!==t[7]),(!ht||64&a[0])&&L(M,"disabled",t[6]),(!ht||16&a[0])&&xt!==(xt=t[4].text+"")&&b(X,xt),(!ht||16&a[0])&&k(_,"opacity",t[4].show?1:0),(!ht||64&a[0])&&(B.disabled=t[6]),(!ht||4&a[0])&&L(B,"is-activated",t[2]),(!ht||64&a[0])&&(lt.disabled=t[6]),1&a[0]&&w(lt,t[0]);let l=gt;gt=Lt(t),gt===l?~gt&&It[gt].p(t,a):(pt&&(q(),W(It[l],1,1,()=>{It[l]=null}),V()),~gt?(pt=It[gt],pt?pt.p(t,a):(pt=It[gt]=wt[gt](t),pt.c()),D(pt,1),pt.m(dt,null)):pt=null)},i(t){ht||(D(pt),D(yt.$$.fragment,t),ht=!0)},o(t){W(pt),W(yt.$$.fragment,t),ht=!1},d(a){a&&g(e),p(bt,a),p(kt,a),t[26](null),a&&g(ct),a&&g(dt),~gt&&It[gt].d(),a&&g(ut),U(yt,a),mt=!1,l(ft)}}}const gn=()=>{},pn=()=>{},un=()=>{};function yn(t,e,a){let l,n=new Set(["local","module","global"]),s="local";rt.set(s);let o=s,r=void 0,i=void 0;const c=Je.layerColorScales,d=Je.nodeLength,g=Je.numLayers,p=Je.edgeOpacity,u=Je.edgeInitColor,y=Je.edgeHoverColor,h=Je.edgeStrokeWidth,m=Je.svgPaddings,f=Je.overlayRectOffset;let x=[void 0,void 0];dt.subscribe(t=>{x=t});let v=void 0;ot.subscribe(t=>{v=t});let b=void 0;it.subscribe(t=>{b=t}),ct.subscribe(t=>{});let $=void 0;gt.subscribe(t=>{a(2,$=t)}),pt.subscribe(t=>{}),nt.subscribe(t=>{});let k=void 0;st.subscribe(t=>{k=t});let w=void 0;ut.subscribe(t=>{w=t});let L=void 0;yt.subscribe(t=>{a(3,L=t)});let M=void 0;ft.subscribe(t=>{M=t});let A=void 0;mt.subscribe(t=>{a(4,A=t)});let E=void 0;xt.subscribe(t=>{E=t});let C=void 0,S=void 0,_=void 0,H={layerName:"",index:-1,data:null},O=!1,T=!1,P=-1,X=-1,z=void 0,F=!1,B=void 0;const G={input:0,conv_1_1:1,relu_1_1:2,conv_1_2:3,relu_1_2:4,max_pool_1:5,conv_2_1:6,relu_2_1:7,conv_2_2:8,relu_2_2:9,max_pool_2:10,output:11},j={0:{local:"input-legend",module:"input-legend",global:"input-legend"},1:{local:"local-legend-0-1",module:"module-legend-0",global:"global-legend"},2:{local:"local-legend-0-1",module:"module-legend-0",global:"global-legend"},3:{local:"local-legend-0-2",module:"module-legend-0",global:"global-legend"},4:{local:"local-legend-0-2",module:"module-legend-0",global:"global-legend"},5:{local:"local-legend-0-2",module:"module-legend-0",global:"global-legend"},6:{local:"local-legend-1-1",module:"module-legend-1",global:"global-legend"},7:{local:"local-legend-1-1",module:"module-legend-1",global:"global-legend"},8:{local:"local-legend-1-2",module:"module-legend-1",global:"global-legend"},9:{local:"local-legend-1-2",module:"module-legend-1",global:"global-legend"},10:{local:"local-legend-1-2",module:"module-legend-1",global:"global-legend"},11:{local:"output-legend",module:"output-legend",global:"output-legend"}};let q,V=[{file:"boat_1.jpeg",class:"lifeboat"},{file:"bug_1.jpeg",class:"ladybug"},{file:"pizza_1.jpeg",class:"pizza"},{file:"pepper_1.jpeg",class:"bell pepper"},{file:"bus_1.jpeg",class:"bus"},{file:"koala_1.jpeg",class:"koala"},{file:"espresso_1.jpeg",class:"espresso"},{file:"panda_1.jpeg",class:"red panda"},{file:"orange_1.jpeg",class:"orange"},{file:"car_1.jpeg",class:"sport car"}],D=V[6].file,W=-1,Y=!0,K=!0,U=null;const J=(t,e,a)=>{void 0===z&&i.select("rect#underneath-gateway-"+t.index).style("opacity",1)},Q=(t,e,a)=>{void 0===z&&i.select("rect#underneath-gateway-"+t.index).style("opacity",0)},Z=(t,e,l,n,o)=>

1{if(d3.event.stopPropagation(),a(11,K=!1),z===t.index)a(9,W=-1),z=void 0,i.select("rect#underneath-gateway-"+t.index).style("opacity",0);else{a(9,W=t.index);t.output,t.outputLinks[n].weight;let e=b[s][o-1],l=b[s][o],r=Math.max(e,l);void 0!==z&&(i.select("rect#underneath-gateway-"+z).style("opacity",0),i.select("rect#underneath-gateway-"+t.index).style("opacity",1));let c=d3.select("#cnn-svg"),d=+c.style("height").replace("px","")/2,g=+c.style("width").replace("px",""),p=100+d-125,u=E[Object.keys(G)[o]],y=0;o>6?(y=(u-m.left)/2,y=m.left+y-243):(y=(g+m.right-u)/2,y=u+y-243);const h=document.getElementById("detailview");h.style.top=p+"px",h.style.left=y+"px",h.style.position="absolute",z=t.index,a(8,q.colorRange=r,q),a(8,q.inputIsInputLayer=o<=1,q)}},tt=()=>{if(void 0!==z)a(9,W=-1),i.select("rect#underneath-gateway-"+z).style("opacity",0),z=void 0;else if(w)i.select(".softmax-symbol").dispatch("click");else if(O){let t=G[H.layerName];kt(t,H.domG,H.domI),d3.select(H.domG[H.domI]).dispatch("mouseleave")}else T&&et()},et=()=>{T=!1,P=-1;let t=G[H.layerName],e=H.index;i.select(`g#layer-${t}-node-${e}`).select("rect.bounding").classed("hidden",!0),H.data.inputLinks.forEach(t=>{let e=G[t.source.layerName],a=t.source.index;i.select(`g#layer-${e}-node-${a}`).select("rect.bounding").classed("hidden",!0)}),i.select("g.underneath").selectAll("rect").remove();i.select("g.edge-group").selectAll(".edge").filter(t=>t.targetLayerIndex!==X).style("visibility",null);a(6,F=!1),i.selectAll(`.${s}-legend`).classed("hidden",!$),i.selectAll(".input-legend").classed("hidden",!$),i.selectAll(".output-legend").classed("hidden",!$),i.select("g.cnn-group").select("g.edge-group").selectAll(`path.edge-${t}-${e}`).transition().ease(d3.easeCubicOut).duration(200).style("stroke",u).style("stroke-width",h).style("opacity",p),i.selectAll("g.intermediate-layer-overlay, g.intermediate-layer-annotation").transition("remove").duration(500).ease(d3.easeCubicInOut).style("opacity",0).on("end",(t,e,a)=>{i.selectAll("g.intermediate-layer-overlay, g.intermediate-layer-annotation").remove(),i.selectAll("defs.overlay-gradient").remove(),i.select(".input-annotation").classed("hidden",!1)}),i.select("g#cnn-layer-group-"+t).selectAll("g.node-group").each((t,e,a)=>{d3.select(a[e]).style("pointer-events","all")}),i.select("g#cnn-layer-group-"+(t-1)).selectAll("g.node-group").each((t,e,a)=>{d3.select(a[e]).style("pointer-events","all").on("mouseover",It).on("mouseleave",Lt).on("click",wt)}),a(5,H.layerName="",H),a(5,H.index=-1,H),a(5,H.data=null,H),X=-1},vt=(t,e,a)=>{let l=G[t.layerName],n=t.index;i.select("g.cnn-group").select("g.edge-group").selectAll(`path.edge-${X}-${n}`).raise().transition().ease(d3.easeCubicInOut).duration(400).style("stroke",y).style("stroke-width","1").style("opacity",1),d3.select(a[e]).select("rect.bounding").classed("hidden",!1);let s=l-1;l===X-1&&(s=l+1),i.select(`g#layer-${s}-node-${n}`).select("rect.bounding").classed("hidden",!1)},bt=(t,e,a)=>{let l=G[t.layerName],n=t.index;i.select("g.cnn-group").select("g.edge-group").selectAll(`path.edge-${X}-${n}`).transition().ease(d3.easeCubicOut).duration(200).style("stroke",u).style("stroke-width",h).style("opacity",p),d3.select(a[e]).select("rect.bounding").classed("hidden",!0);let s=l-1;l===X-1&&(s=l+1),i.select(`g#layer-${s}-node-${n}`).select("rect.bounding").classed("hidden",!0)},$t=(t,e,a)=>{let l=G[t.layerName],n=t.index;i.select(`g#layer-${l+1}-node-${n}`).node().dispatchEvent(new Event("click"))},kt=(t,e,l)=>{w&&(i.select(".logit-layer").remove(),i.select(".logit-layer-lower").remove(),i.selectAll(".plus-symbol-clone").remove(),i.select(".underneath").selectAll(".logit-lower").style("opacity",0),yt.set({show:!1,logits:[]}),ht.set(!1)),ut.set(!1),O=!1,i.selectAll(`.${s}-legend`).classed("hidden",!$),i.selectAll(".input-legend").classed("hidden",!$),i.selectAll(".output-legend").classed("hidden",!$),a(6,F=!1);for(let e=0;e<B[t-1].length;e++)i.select(`g#layer-${t-1}-node-${e}`).on("mouseover",It).on("mouseleave",Lt).on("click",wt);i.select("g.underneath").selectAll("rect").remove(),z=void 0,i.select("g#cnn-layer-group-"+(t-1)).selectAll("rect.boun

1ding").style("stroke-width",1),d3.select(e[l]).select("rect.bounding").style("stroke-width",1),i.selectAll(`g#layer-label-${t-1},\n        g#layer-detailed-label-${t-1},\n        g#layer-label-${t},\n        g#layer-detailed-label-${t}`).style("font-weight","normal"),a(5,H.layerName="",H),a(5,H.index=-1,H),a(5,H.data=null,H),a(11,K=!0);let n=i.select("g.intermediate-layer");if(pt.set(!1),n.transition("remove").duration(500).ease(d3.easeCubicInOut).style("opacity",0).on("end",(t,e,a)=>{d3.select(a[e]).remove()}),i.selectAll(".overlay-group").remove(),i.selectAll("g.intermediate-layer-overlay, g.intermediate-layer-annotation").transition("remove").duration(500).ease(d3.easeCubicInOut).style("opacity",0).on("end",(t,e,a)=>{i.selectAll("g.intermediate-layer-overlay, g.intermediate-layer-annotation").remove(),i.selectAll("defs.overlay-gradient").remove()}),void 0!==x[0]){let t=b[s][x[0]];void 0!==x[1]?i.select(`g#layer-${x[0]}-node-${x[1]}`).select("image.node-image").each((e,a,l)=>wa(e,a,l,t)):i.select("g#cnn-layer-group-"+x[0]).selectAll("image.node-image").each((e,a,l)=>wa(e,a,l,t))}for(let t=0;t<g;t++)Oa({layerIndex:t,targetX:v[t][0].x,disable:!1,delay:500,opacity:1});Oa({layerIndex:g-2,targetX:v[g-2][0].x,opacity:1,disable:!1,delay:500,onEndFunc:()=>{i.select("g.edge-group").style("visibility","visible"),i.select(".input-annotation").classed("hidden",!1)}})},wt=(t,e,l)=>{d3.event.stopPropagation();let n=t.index;if(a(5,H.layerName=t.layerName,H),a(5,H.index=t.index,H),a(5,H.data=t,H),a(5,H.domI=e,H),a(5,H.domG=l,H),"conv"===t.type||"relu"===t.type||"pool"===t.type){let e=[];for(let a=0;a<t.inputLinks.length;a++)e.push({input:t.inputLinks[a].source.output,kernel:t.inputLinks[a].weight,output:t.inputLinks[a].dest.output});let l=G[t.layerName];e.colorRange=b[s][l],e.isInputInputLayer=l<=1,a(8,q=e)}let o=G[t.layerName];if("relu"==t.type||"pool"==t.type)if(a(10,Y=!1),T)if(t.index===P)et();else{i.select(`g#layer-${o}-node-${P}`).select("rect.bounding").classed("hidden",!0),i.select(`g#layer-${o-1}-node-${P}`).select("rect.bounding").classed("hidden",!0);let t=i.select("g.cnn-group").select("g.edge-group");t.selectAll(`path.edge-${o}-${P}`).transition().ease(d3.easeCubicOut).duration(200).style("stroke",u).style("stroke-width",h).style("opacity",p);let e=i.select("g.underneath");e.select("#underneath-gateway-"+P).style("opacity",0),i.select(`g#layer-${o}-node-${n}`).select("rect.bounding").classed("hidden",!1),i.select(`g#layer-${o-1}-node-${n}`).select("rect.bounding").classed("hidden",!1),t.selectAll(`path.edge-${o}-${n}`).raise().transition().ease(d3.easeCubicInOut).duration(400).style("stroke",y).style("stroke-width","1").style("opacity",1),e.select("#underneath-gateway-"+n).style("opacity",1),P=n}else((t,e)=>{T=!0,P=e,X=t;let l=d3.select("#cnn-svg"),n=+l.style("height").replace("px","")/2,o=+l.style("width").replace("px",""),r=100+n-130,c=0;t>5?(c=v[t-1][0].x+50,c=c/2-250):(c=(o-v[t][0].x-d)/2,c=v[t][0].x+d+c-250);const g=document.getElementById("detailview");g.style.top=r+"px",g.style.left=c+"px",g.style.position="absolute";i.select("g.edge-group").selectAll(".edge").filter(e=>e.targetLayerIndex!==t).style("visibility","hidden");a(6,F=!0),i.select(".input-annotation").classed("hidden",!0),i.selectAll(`.${s}-legend`).classed("hidden",!0),i.selectAll(".input-legend").classed("hidden",!0),i.selectAll(".output-legend").classed("hidden",!0),i.select("#"+j[t][s]).classed("hidden",!1);let p=v[t-1][e].x,u=v[t][e].x+d+5,y=C-u-f/2,h=p-v[0][0].x;if(y>h){let t=[{offset:"0%",color:"rgb(250, 250, 250)",opacity:.85},{offset:"50%",color:"rgb(250, 250, 250)",opacity:.9},{offset:"100%",color:"rgb(250, 250, 250)",opacity:1}];Ta("overlay-gradient-right",t),t=[{offset:"0%",color:"rgb(250, 250, 250)",opacity:.85+h/y*(.95-.85)},{offset:"100%",color:"rgb(250, 250, 250)",opacity:.85}],Ta("overlay-gradient-left",t)}else{let t=[{offset:"0%",color:"rgb(250, 250, 250)",opacity:1},{offset:"50%",color:"rgb(250, 250, 250)",opacity:.9},{offset:"100%",color:"rgb(250, 250, 250)",opacity:.85}];Ta("overlay-gradient-left",t),t=[{offset:"0%",color:"rgb(250, 250, 250)",opacity:.85},{offset:"100%",color:"rgb(250, 250, 250)",opacity:.85+y/h*(.95-.85)}],Ta("overlay-gradient-right",t)}hl("overlay-gradient-right",u+f/2+.5,0,y,S+m.top),hl("overlay-gradient-left",v[0][0].x-f/2,0,h,S+m.top),i.selectAll("rect.overlay").on("click",tt);let x=i.select("g.underneath");for(let e=0;e<B[t-1].length;e++)x.append("rect").attr("class","underneath-gateway").attr("id","underneath-gateway-"+e).attr("x",v[t-1][e].x-7).attr("y",v[t-1][e].y-7).attr("width",2*d+k+14).attr("height",d+14).attr("rx",10).style("fill","rgba(160, 160, 160, 0.3)").style("opacity",0),i.select(`g#layer-${t-1}-node-${e}`).style("pointer-events","all").style("cursor","pointer").on("mouseover",vt).on("mouseleave",bt).on("click",$t);x.lower(),x.select("#underneath-gateway-"+e).style("opacity",1)})(o,t.index);"conv"!==t.type&&"output"!==t.layerName||O?"conv"!==t.type&&"output"!==t.layerName||!O||kt(o,l,e):(((t,e,l,n)=>{O=!0,i.selectAll(`.${s}-legend`).classed("hidden",!0),i.selectAll(".input-legend").classed("hidden",!0),i.selectAll(".output-legend").classed("hidden",!0),i.select(".input-annotation").classed("hidden",!0),i.select("g#cnn-layer-group-"+(n-1)).selectAll("rect.boun

1ding").style("stroke-width",2),d3.select(e[l]).select("rect.bounding").style("stroke-width",2),a(6,F=!0),pt.set(!0),i.selectAll(`g#layer-label-${n-1},\n        g#layer-detailed-label-${n-1},\n        g#layer-label-${n},\n        g#layer-detailed-label-${n}`).style("font-weight","800"),d3.select("#cnn-svg").on("click",tt)})(0,l,n,o),"conv_1_1"===t.layerName?fl(o,t,n,C,S,J,Q,Z):"conv_1_2"===t.layerName?xl(o,t,n,C,S,J,Q,Z):"conv_2_1"===t.layerName?vl(o,t,n,C,S,J,Q,Z):"conv_2_2"===t.layerName?bl(o,t,n,C,S,J,Q,Z):"output"===t.layerName&&tn(o,t,n,0,S))},It=(t,e,a)=>{if(O)return;let l=G[t.layerName],n=t.index;if(i.select("g.cnn-group").select("g.edge-group").selectAll(`path.edge-${l}-${n}`).raise().transition().ease(d3.easeCubicInOut).duration(400).style("stroke",y).style("stroke-width","1").style("opacity",1),d3.select(a[e]).select("rect.bounding").classed("hidden",!1),1===t.inputLinks.length){let e=t.inputLinks[0],a=G[e.source.layerName],l=e.source.index;i.select(`g#layer-${a}-node-${l}`).select("rect.bounding").classed("hidden",!1)}else i.select("g#cnn-layer-group-"+(l-1)).selectAll("g.node-group").selectAll("rect.bounding").classed("hidden",!1);"output"===t.layerName&&d3.select(a[e]).select(".output-text").style("opacity",.8).style("text-decoration","underline")},Lt=(t,e,a)=>{if(!O&&(T||t.layerName!==H.layerName||t.index!==H.index)){let l=G[t.layerName],n=t.index;if(i.select("g.cnn-group").select("g.edge-group").selectAll(`path.edge-${l}-${n}`).transition().ease(d3.easeCubicOut).duration(200).style("stroke",u).style("stroke-width",h).style("opacity",p),d3.select(a[e]).select("rect.bounding").classed("hidden",!0),1===t.inputLinks.length){let e=t.inputLinks[0],a=G[e.source.layerName],l=e.source.index;i.select(`g#layer-${a}-node-${l}`).select("rect.bounding").classed("hidden",!0)}else i.select("g#cnn-layer-group-"+(l-1)).selectAll("g.node-group").selectAll("rect.bounding").classed("hidden",t=>t.layerName!==H.layerName||t.index!==H.index);"output"===t.layerName&&d3.select(a[e]).select(".output-text").style("fill","black").style("opacity",.5).style("text-decoration","none")}};R(async()=>{r=d3.select(l).select("#cnn-svg"),i=r.append("g").attr("class","main-svg").attr("transform",`translate(${m.left}, 0)`),lt.set(i),C=Number(r.style("width").replace("px",""))-m.left-m.right,S=Number(r.style("height").replace("px",""))-m.top-m.bottom;let t=i.append("g").attr("class","cnn-group");i.append("g").attr("class","underneath"),r.style("height").replace("px","");i.append("defs").append("marker").attr("id","marker").attr("viewBox","0 -5 10 10").attr("refX",6).attr("refY",0).attr("markerWidth",6).attr("markerHeight",6).attr("orient","auto").append("path").style("stroke-width",1.2).style("fill","gray").style("stroke","gray").attr("d","M0,-5L10,0L0,5"),i.append("defs").append("marker").attr("id","marker-alt").attr("viewBox","0 -5 10 10").attr("refX",6).attr("refY",0).attr("markerWidth",6).attr("markerHeight",6).attr("orient","auto").append("path").style("fill","none").style("stroke","gray").style("stroke-width",2).attr("d","M-5,-10L10,0L-5,10"),console.time("Construct cnn"),_=await Ke("/copycat-cnn-explainer/assets/data/copycat-model.json"),B=await De("/copycat-cnn-explainer/assets/img/"+D,_),console.timeEnd("Construct cnn"),at.set(B);let e=B[B.length-2];B.splice(B.length-2,1),B.flatten=e,console.log(B),Ra(),Ma(C,S,t,It,Lt,wt)});const Mt=async t=>{a(12,U=t.detail.url),B=await De(U,_);let e=B[B.length-2];B.splice(B.length-2,1),B.flatten=e,at.set(B),((t,e)=>{let a=t.width,l=e[0].output.length,n=document.createElement("canvas"),s=n.getContext("2d");n.width=l,n.height=l;let o=s.getImageData(0,0,l,l),r=o.data;for(let t=0;t<r.length;t+=4){let a=Math.floor(t/4),n=Math.floor(a/l),s=a%l,o=e[0].output[n][s],i=e[1].output[n][s],c=e[2].output[n][s];r[t]=255*o,r[t+1]=255*i,r[t+2]=255*c,r[t+3]=255}let i=document.createElement("canvas");i.width=3*a,i.height=3*a;let c=i.getContext("2d");s.putImageData(o,0,0),c.drawImage(n,0,0,l,l,0,0,3*a,3*a);let d=i.toDataURL();t.src=d,n.remove(),i.remove()})(d3.select(l).select(".custom-image").node(),B[0]),Ra(),Aa()};return t.$$.update=()=>{1&t.$$.dirty[0]&&(()=>{if(void 0!==i){if(n.add(s)||console.error("Encounter unknown scale level!"),s!=o){({local:{module:[1,2,8,9,10],global:[1,2,3,4,5,8,9,10]},module:{local:[1,2,8,9,10],global:[1,2,3,4,5,8,9,10]},global:{local:[1,2,3,4,5,8,9,10],module:[1,2,3,4,5]}}

1)[o][s].forEach(t=>{let e=b[s][t];i.select("#cnn-layer-group-"+t).selectAll(".node-image").each((t,a,l)=>wa(t,a,l,e))}),i.selectAll(`.${o}-legend`).classed("hidden",!0),i.selectAll(`.${s}-legend`).classed("hidden",!$)}o=s,rt.set(s)}})()},[s,l,$,L,A,H,F,D,q,W,Y,K,U,c,V,[{file:"dog_1.jpeg",class:"dog"},{file:"penguim_1.jpeg",class:"penguin"},{file:"tree_1.jpeg",class:"tree"}],()=>{a(2,$=!$),gt.set($),O||(i.selectAll(`.${s}-legend`).classed("hidden",!$),i.selectAll(".input-legend").classed("hidden",!$),i.selectAll(".output-legend").classed("hidden",!$)),i.selectAll(".layer-detailed-label").classed("hidden",!$),i.selectAll(".layer-label").classed("hidden",$)},async t=>{let e=d3.select(t.target).attr("data-imageName");if(e!==D){a(7,D=e),B=await De("/copycat-cnn-explainer/assets/img/"+D,_);let t=B[B.length-2];B.splice(B.length-2,1),B.flatten=t,at.set(B),Ra(),Aa()}},()=>{if(null===U)M.show=!0,M.preImage=D,ft.set(M);else if("custom"!==D){Mt({detail:{url:U}})}else M.show=!0,M.preImage=D,ft.set(M);"custom"!==D&&a(7,D="custom")},t=>{a(7,D=t.detail.preImage)},Mt,function(t){t.detail.text&&(z=void 0,i.select("rect#underneath-gateway-"+W).style("opacity",0),a(9,W=-1))},function(t){t.detail.text&&(et(),a(10,Y=!0))},function(t){t.detail.text&&(et(),a(10,Y=!0))},function(t){a(3,L.show=!1,L),yt.set(L)},function(){s=I(this),a(0,s)},function(t){N[t?"unshift":"push"](()=>{l=t,a(1,l)})}]}class hn extends Z{constructor(t){super(),Q(this,t,yn,dn,s,{},null,[-1,-1,-1])}}const mn=(t,e,a)=>{let l=[];for(let n=0;n<t;n++){let t=new Array(e).fill(a);l.push(t)}return l},fn=(t,e)=>{console.assert(t.length===e.length,"Dimension not matching"),console.assert(t[0].length===e[0].length,"Dimension not matching");let a=0;for(let l=0;l<t.length;l++)for(let n=0;n<t[0].length;n++)a+=t[l][n]*e[l][n];return a},xn=(t,e,a,l,n)=>t.slice(e,a).map(t=>t.slice(l,n)),vn=t=>{let e=-1/0;for(let a=0;a<t.length;a++)for(let l=0;l<t[0].length;l++)t[a][l]>e&&(e=t[a][l]);return e},bn=(t,e,a=1,l=0)=>{console.assert(t.length===t[0].length,"Conv input is not square"),console.assert(e.length===e[0].length,"Conv kernel is not square");let n=(t.length-e.length)/a+1,s=mn(n,n,0);for(let l=0;l<n;l++)for(let o=0;o<n;o++){let n=xn(t,l*a,l*a+e.length,o*a,o*a+e.length),r=fn(n,e);s[l][o]=r}return s},$n=(t,e=2,a=2,l="VALID")=>{console.assert(2===e,"Only supports kernen = [2,2]"),console.assert(2===a,"Only supports stride = 2"),console.assert("VALID"===l,"Only support valid padding"),t.length%2==1&&"VALID"===l&&(t=xn(t,0,t.length-1,0,t.length-1));let n=(t.length-e)/a+1,s=mn(n,n,0);for(let l=0;l<n;l++)for(let o=0;o<n;o++){let n=xn(t,l*a,l*a+e,o*a,o*a+e);s[l][o]=vn(n)}return s};function kn(t,e){return Array.from({length:t},e?(t,a)=>e(a):void 0)}function wn(t,e,a){return Array.from({length:t},(t,l)=>Array.from({length:e},a?(t,e)=>a(l,e):void 0))}function In(t,e,a,l,n){const s=wn(e.length,e.length,(t,e)=>wn(a,a));for(let o=0;o<e.length;o++)for(let r=0;r<e.length;r++)for(let e=0;e<a;e++)for(let i=0;i<a;i++){const a=o*t+e*n,c=r*t+i*n;s[o][r][e][i]=a*l+c}return s}function Ln(t,e,a,l,n,s){const o=kn(a*a);for(let a=0;a<s;a++)for(let l=0;l<s;l++){const s=n[t][e][a][l];void 0!==s&&(o[s]=[a,l])}return o}function Mn(t,e,a){var l=e.reduce((t,e,a)=>(null!=e&&t.push(a),t),[]);return xn(t,Math.floor(l[0]/t.length),Math.floor(l[0]/t.length)+a,l[0]%t.length,l[0]%t.length+a)}function An(t,e){var a=e.reduce((t,e,a)=>(0!=e&&t.push(a),t),[]);return xn(t,Math.floor(a[0]/t.length),Math.floor(a[0]/t.length)+1,a[0]%t.length,a[0]%t.length+1)}function Rn(t){return 150/t>20?20:150/t}function En(t){let e=t.map((function(t){return Math.max.apply(Math,t)})),a=Math.max.apply(null,e),l=t.map((function(t){return Math.min.apply(Math,t)})),n=Math.min.apply(null,l);return{range:2*Math.max(Math.abs(n),Math.abs(a)),min:n,max:a}}function Cn(t,e=Rn(t.length)){for(var a=new Array,l=1,n=1,s=e,o=e,r=0;r<t.length;r++){a.push(new Array);for(var i=0;i<t[0].length;i++)a[r].push({text:Math.round(100*t[r][i])/100,row:r,col:i,x:l,y:n,width:s,height:o}),l+=s;l=1,n+=o}return a}function Sn(e){let a;return{c(){a=u("div"),a.innerHTML='<svg id="copycatgrid" width="100%" height="100%"></svg>',k(a,"display","inline-block"),k(a,"vertical-align","middle"),v(a,"class","copycatgrid")}

1,m(t,l){d(t,a,l),e[10](a)},p:t,i:t,o:t,d(t){t&&g(a),e[10](null)}}}function Nn(t,e,a){let l,{data:n}=e,{highlights:s}=e,{isKernelMath:o}=e,{constraint:r}=e,{dataRange:i}=e,{outputLength:c}=e,{stride:d}=e,{colorScale:g=d3.interpolateRdBu}=e,{isInputLayer:p=!1}=e;const u=C();let y=s,h=n;const m=()=>{d3.select(l).selectAll("#copycatgrid > *").remove();const t=n.length*r+2;var e=d3.select(l).select("#copycatgrid").attr("width",t+"px").attr("height",t+"px").append("svg").attr("width",t+"px").attr("height",t+"px").selectAll(".row").data(n).enter().append("g").attr("class","row");e.selectAll(".square").data((function(t){return t})).enter().append("rect").attr("class","square").attr("x",(function(t){return t.x})).attr("y",(function(t){return t.y})).attr("width",(function(t){return t.width})).attr("height",(function(t){return t.height})).style("opacity",.8).style("fill",(function(t){let e=t.text;return e=p?1-t.text:(t.text+i/2)/i,g(e)})).on("mouseover",(function(t){n.length!=c?u("message",{hoverH:Math.min(Math.floor(t.row/d),c-1),hoverW:Math.min(Math.floor(t.col/d),c-1)}):u("message",{hoverH:Math.min(Math.floor(t.row/1),c-1),hoverW:Math.min(Math.floor(t.col/1),c-1)})}));if(o)e.selectAll(".text").data((function(t){return t})).enter().append("text").attr("class","text").style("font-size",Math.floor(r/2.6)+"px").attr("x",(function(t){return t.x+t.width/2})).attr("y",(function(t){return t.y+t.height/2})).style("fill",(function(t){let e=t.text;return e=p?1-t.text:(t.text+i/2)/i,e<.2||e>.8?"white":"black"})).style("text-anchor","middle").style("dominant-baseline","middle").text((function(t){return t.text.toString().replace("-","－")}))};return E(()=>{(n!=h&&(m(),h=n),s!=y)&&(d3.select(l).select("#copycatgrid").select("svg").selectAll(".square").style("stroke",t=>o||s.length&&s[t.row*n.length+t.col]?"black":null),y=s)}),R(()=>{m()}),t.$$set=t=>{"data"in t&&a(1,n=t.data),"highlights"in t&&a(2,s=t.highlights),"isKernelMath"in t&&a(3,o=t.isKernelMath),"constraint"in t&&a(4,r=t.constraint),"dataRange"in t&&a(5,i=t.dataRange),"outputLength"in t&&a(6,c=t.outputLength),"stride"in t&&a(7,d=t.stride),"colorScale"in t&&a(8,g=t.colorScale),"isInputLayer"in t&&a(9,p=t.isInputLayer)},[l,n,s,o,r,i,c,d,g,p,function(t){N[t?"unshift":"push"](()=>{l=t,a(0,l)})}]}class _n extends Z{constructor(t){super(),Q(this,t,Nn,Sn,s,{data:1,highlights:2,isKernelMath:3,constraint:4,dataRange:5,outputLength:6,stride:7,colorScale:8,isInputLayer:9})}}function Hn(e){let a,l,n;return{c(){a=u("div"),l=m(),n=u("div"),n.innerHTML='<svg id="copycatgrid" width="100%" height="100%"></svg>',v(a,"class","copycatlegend"),v(n,"class","copycatgrid")},m(t,s){d(t,a,s),e[10](a),d(t,l,s),d(t,n,s),e[11](n)},p:t,i:t,o:t,d(t){t&&g(a),e[10](null),t&&g(l),t&&g(n),e[11](null)}}}function On(t,e,a){let l,n,{data:s}=e,{kernel:o}=e,{constraint:r}=e,{dataRange:i}=e,{kernelRange:c}=e,{colorScale:d=d3.interpolateRdBu}=e,{kernelColorScale:g=d3.interpolateBrBG}=e,{isInputLayer:p=!1}=e;const u=Math.floor(r/3);let y=s;const h=()=>{d3.select(l).selectAll("#copycatgrid > *").remove();const t=o?s.length*r*2+2:s.length*r+2;var e=d3.select(l).select("#copycatgrid").attr("width",t+"px").attr("height",t+"px").append("svg").attr("width",t+"px").attr("height",t+"px").selectAll(".row").data(s).enter().append("g").attr("class","row"),a=e.selectAll(".square").data((function(t){return t})).enter();a.append("rect").attr("class","square").attr("x",(function(t){return 1===t.x?t.x+u:2*t.x+u})).attr("y",(function(t){return 1===t.y?t.y:2*t.y})).attr("width",(function(t){return t.width})).attr("height",(function(t){return t.height})).style("opacity",.5).style("fill",(function(t){let e=t.text;return e=p?1-t.text:(t.text+i/2)/i,d(e)})).style("stroke","black"),a.append("rect").attr("class","square").attr("x",(function(t){return 1===t.x?t.x+u:2*t.x+u})).attr("y",(function(t){return 1===t.y?t.y+t.height:2*t.y+t.height})).attr("width",(function(t){return t.width})).attr("height",(function(t){return t.height/2})).style("opacity",.5).style("fill",(function(t){let e=(o[t.row][t.col].text+c.range/2)/c.range;return g(.6*e+.2)}));var n=e.selectAll(".text").data((function(t){return t})).enter();n.append("text").attr("class","text").style("font-size",Math.floor(r/2.6)+"px").attr("x",(function(t){return 1===t.x?t.x+t.width/2+u:2*t.x+t.width/2+u})).attr("y",(function(t){return 1===t.y?t.y+t.height/2:2*t.y+t.height/2})).style("fill",(function(t){let e=t.text;return e=p?1-t.text:(t.text+i/2)/i,e<.2||e>.8?p&&e<.2?"black":"white":"black"})).style("text-anchor","middle").style("dominant-baseline","middle").text((function(t){return t.text})),n.append("text").attr("class","text").style("font-size",Math.floor(r/2.6)+"px").attr("font-weight",600).attr("x",(function(t){return 1===t.x?t.x+u/2:2*t.x+u/2})).attr("y",(function(t){return 1===t.y?t.y+t.height+t.height/4:2*t.y+t.height+t.height/4})).style("fill","black").style("text-anchor","middle").style("dominant-baseline","middle").text((function(t){return"×"})),n.append("text").attr("class","text").style("font-size",Math.floor(r/2.6)+"px").attr("x",(function(t){return 1===t.x?t.x+t.width/2+u:2*t.x+t.width/2+u})).attr("y",(function(t){return 1===t.y?t.y+t.height+t.height/4:2*t.y+t.height+t.height/4})).style("fill",(function(t){let e=.6*((o[t.row][t.col].text+c.range/2)/c.range)+.2;return e<.2||e>.8?"white":"black"})).style("text-anchor","middle").style("dominant-baseline","middle").text((function(t){return o[t.row][t.col].text})),n.append("text").attr("class","text").style("font-size",Math.floor(r/1.6)+"px").attr("x",(function(t){return 1===t.x?t.x+t.width+t.width/2+u:2*t.x+t.width+t.width/2+u})).attr("y",(function(t){return 1===t.y?t.y+t.height/2:2*t.y+t.height/2})).style("text-anchor","middle").style("dominant-baseline","middle").text((function(t){return t.row==o.length-1&&t.col==o.length-1?"=":"+"}))};return E(()=>{s!=y&&(h(),y=s)}),R(()=>{h()}),t.$$set=t=>{"data"in t&&a(2,s=t.data),"kernel"in t&&a(3,o=t.kernel),"constraint"in t&&a(4,r=t.constraint),"dataRange"in t&&a(5,i=t.dataRange),"kernelRange"in t&&a(6,c=t.kernelRange),"colorScale"in t&&a(7,d=t.colorScale),"kernelColorScale"in t&&a(8,g=t.kernelColorScale),"isInputLayer"in t&&a(9,p=t.isInputLayer)},[l,n,s,o,r,i,c,d,g,p,function(t){N[t?"unshift":"push"](()=>{n=t,a(1,n)})},function(t){N[t?"unshift":"push"](()=>{l=t,a(0,l)})}]}class Tn extends Z{constructor(t){super(),Q(this,t,On,Hn,s,{data:2,kernel:3,constraint:4,dataRange:5,kernelRange:6,colorScale:7,kernelColorScale:8,isInputLayer:9})}}function Pn(t){let e,a,l,n,s,o,r,i,p,y,f,x,$,k,w,I,L,M,A,R,E,C,S,N,_,H=t[2].length+"",O=t[2][0].length+"",T=t[3].length+"",P=t[3][0].length+"";return p=new _n({props:{data:t[11],highlights:t[7],outputLength:t[3].length,isKernelMath:!1,constraint:Rn(t[2].length),dataRange:t[4],stride:t[0],colorScale:t[5],isInputLayer:t[6]}}),p.$on("message",t[14]),x=new Tn({props:{data:t[9],kernel:t[13],constraint:Rn(t[1].length),dataRange:t[4],kernelRange:En(t[1]),colorScale:t[5],isInputLayer:t[6]}}

1),k=new _n({props:{data:t[10],highlights:t[8],isKernelMath:!0,constraint:Rn(t[1].length),dataRange:t[4]}}),N=new _n({props:{data:t[12],highlights:t[8],isKernelMath:!1,outputLength:t[3].length,constraint:Rn(t[3].length),dataRange:t[4],stride:t[0]}}),N.$on("message",t[14]),{c(){e=u("div"),a=u("div"),l=h("Input ("),n=h(H),s=h(", "),o=h(O),r=h(")"),i=m(),Y(p.$$.fragment),y=m(),f=u("div"),Y(x.$$.fragment),$=m(),Y(k.$$.fragment),w=m(),I=u("div"),L=u("div"),M=h("Output ("),A=h(T),R=h(", "),E=h(P),C=h(")"),S=m(),Y(N.$$.fragment),v(a,"class","header-text"),v(e,"class","column has-text-centered svelte-gz7a6i"),v(f,"class","column has-text-centered svelte-gz7a6i"),v(L,"class","header-text"),v(I,"class","column has-text-centered svelte-gz7a6i")},m(t,g){d(t,e,g),c(e,a),c(a,l),c(a,n),c(a,s),c(a,o),c(a,r),c(e,i),K(p,e,null),d(t,y,g),d(t,f,g),K(x,f,null),c(f,$),K(k,f,null),d(t,w,g),d(t,I,g),c(I,L),c(L,M),c(L,A),c(L,R),c(L,E),c(L,C),c(I,S),K(N,I,null),_=!0},p(t,[e]){(!_||4&e)&&H!==(H=t[2].length+"")&&b(n,H),(!_||4&e)&&O!==(O=t[2][0].length+"")&&b(o,O);const a={};2048&e&&(a.data=t[11]),128&e&&(a.highlights=t[7]),8&e&&(a.outputLength=t[3].length),4&e&&(a.constraint=Rn(t[2].length)),16&e&&(a.dataRange=t[4]),1&e&&(a.stride=t[0]),32&e&&(a.colorScale=t[5]),64&e&&(a.isInputLayer=t[6]),p.$set(a);const l={};512&e&&(l.data=t[9]),8192&e&&(l.kernel=t[13]),2&e&&(l.constraint=Rn(t[1].length)),16&e&&(l.dataRange=t[4]),2&e&&(l.kernelRange=En(t[1])),32&e&&(l.colorScale=t[5]),64&e&&(l.isInputLayer=t[6]),x.$set(l);const s={};1024&e&&(s.data=t[10]),256&e&&(s.highlights=t[8]),2&e&&(s.constraint=Rn(t[1].length)),16&e&&(s.dataRange=t[4]),k.$set(s),(!_||8&e)&&T!==(T=t[3].length+"")&&b(A,T),(!_||8&e)&&P!==(P=t[3][0].length+"")&&b(E,P);const r={};4096&e&&(r.data=t[12]),256&e&&(r.highlights=t[8]),8&e&&(r.outputLength=t[3].length),8&e&&(r.constraint=Rn(t[3].length)),16&e&&(r.dataRange=t[4]),1&e&&(r.stride=t[0]),N.$set(r)},i(t){_||(D(p.$$.fragment,t),D(x.$$.fragment,t),D(k.$$.fragment,t),D(N.$$.fragment,t),_=!0)},o(t){W(p.$$.fragment,t),W(x.$$.fragment,t),W(k.$$.fragment,t),W(N.$$.fragment,t),_=!1},d(t){t&&g(e),U(p),t&&g(y),t&&g(f),U(x),U(k),t&&g(w),t&&g(I),U(N)}}}function Xn(t,e,a){let{stride:l}=e,{dilation:n}=e,{kernel:s}=e,{image:o}=e,{output:r}=e,{isPaused:i}=e,{dataRange:c}=e,{colorScale:d}=e,{isInputInputLayer:g=!1}=e;const p=C();let u=o.length+0,y=[];for(let t=0;t<s.length;t++){y.push([]);for(let e=0;e<s.length;e++)y[t].push(0)}y=Cn(y);let h,m,f=Cn([0]),x=[],v=kn(r.length*r.length,t=>!0);function b(t){m=0;let e=In(t,r,s.length,u,n);t<=0||(h&&clearInterval(h),a(17,h=setInterval(()=>{if(i)return;const t=m%(r.length*r.length);a(8,v=kn(r.length*r.length,t=>!1));const l=Math.floor(t/r.length),n=t%r.length;a(8,v[l*r.length+n]=!0,v),a(7,x=Ln(l,n,u,s.length,e,s.length));const c=Mn(o,x,s.length);a(9,y=Cn(c));const d=An(r,v);a(10,f=Cn(d)),m++},250)))}b(l);let $=Cn(o),k=Cn(r),w=Cn(s);return t.$$set=t=>{"stride"in t&&a(0,l=t.stride),"dilation"in t&&a(16,n=t.dilation),"kernel"in t&&a(1,s=t.kernel),"image"in t&&a(2,o=t.image),"output"in t&&a(3,r=t.output),"isPaused"in t&&a(15,i=t.isPaused),"dataRange"in t&&a(4,c=t.dataRange),"colorScale"in t&&a(5,d=t.colorScale),"isInputInputLayer"in t&&a(6,g=t.isInputInputLayer)},t.$$.update=()=>{if(4&t.$$.dirty&&(u=o.length+0),8&t.$$.dirty){kn(r.length*r.length,t=>!0)}15&t.$$.dirty&&(b(l),a(11,$=Cn(o)),a(12,k=Cn(r)),a(13,w=Cn(s)))},[l,s,o,r,c,d,g,x,v,y,f,$,k,w,function(t){let e=In(l,r,s.length,u,n);a(8,v=kn(r.length*r.length,t=>!1));const c=t.detail.hoverH,d=t.detail.hoverW;a(8,v[c*r.length+d]=!0,v),a(7,x=Ln(c,d,u,s.length,e,s.length));const g=Mn(o,x,s.length);a(9,y=Cn(g));const h=An(r,v);a(10,f=Cn(h)),a(15,i=!0),p("message",{text:i})},i,n,h]}class zn extends Z{constructor(t){super(),Q(this,t,Xn,Pn,s,{stride:0,dilation:16,kernel:1,image:2,output:3,isPaused:15,dataRange:4,colorScale:5,isInputInputLayer:6})}}function Fn(t){let e,a,n,s,o,r,i,p,y,h,f,b,$,k,w,I,L,M,A,R=t[6]?'<i class="fas fa-play-circle play-icon"></i>':'<i class="fas fa-pause-circle"></i>';return k=new zn({props:{kernel:t[2],image:t[1],output:t[7],stride:Gn,dilation:jn,isPaused:t[6],dataRange:t[3],colorScale:t[4],isInputInputLayer:t[5]}}),k.$on("message",t[9]),{c(){e=u("div"),a=u("div"),n=u("div"),s=u("div"),s.textContent="Convolution",o=m(),r=u("div"),i=u("div"),i.innerHTML='<i class="fas fa-info-circle"></i>',p=m(),y=u("div"),h=m(),f=u("div"),f.innerHTML='<i class="fas control-icon fa-times-circle"></i>',b=m(),$=u("div"),Y(k.$$.fragment),w=m(),I=u("div"),I.innerHTML='<img src="/copycat-cnn-explainer/assets/img/pointer.svg" alt="pointer icon" class="svelte-1j8mhv0"/> \n        <div class="annotation-text"><span style="font-weight:600">Hover over</span> the matrices to change kernel position.</div>',v(s,"class","title-text svelte-1j8mhv0"),v(i,"class","control-button svelte-1j8mhv0"),v(i,"title","Jump to article section"),v(y,"class","play-button control-button svelte-1j8mhv0"),v(y,"title","Play animation"),v(f,"class","delete-button control-button svelte-1j8mhv0"),v(f,"title","Close"),v(r,"class","buttons svelte-1j8mhv0"),v(n,"class","control-pannel svelte-1j8mhv0"),v($,"class","container is-centered svelte-1j8mhv0"),v(I,"class","annotation svelte-1j8mhv0"),v(a,"class","box svelte-1j8mhv0"),v(e,"class","container svelte-1j8mhv0"),v(e,"id","copycatdetailview-container")},m(l,g){d(l,e,g),c(e,a),c(a,n),c(n,s),c(n,o),c(n,r),c(r,i),c(r,p),c(r,y),y.innerHTML=R,c(r,h),c(r,f),c(a,b),c(a,$),K(k,$,null),c(a,w),c(a,I),L=!0,M||(A=[x(i,"click",qn),x(y,"click",t[8]),x(f,"click",t[10])],M=!0)},p(t,e){(!L||64&e)&&R!==(R=t[6]?'<i class="fas fa-play-circle play-icon"></i>':'<i class="fas fa-pause-circle"></i>')&&(y.innerHTML=R);const a={};4&e&&(a.kernel=t[2]),2&e&&(a.image=t[1]),128&e&&(a.output=t[7]),64&e&&(a.isPaused=t[6]),8&e&&(a.dataRange=t[3]),16&e&&(a.colorScale=t[4]),32&e&&(a.isInputInputLayer=t[5]),k.$set(a)},i(t){L||(D(k.$$.fragment,t),L=!0)},o(t){W(k.$$.fragment,t),L=!1},d(t){t&&g(e),U(k),M=!1,l(A)}}}function Bn(t){let e,a,l=!t[0]&&Fn(t);return{c(){l&&l.c(),e=f()},m(t,n){l&&l.m(t,n),d(t,e,n),a=!0},p(t,[a]){t[0]?l&&(q(),W(l,1,1,()=>{l=null}),V()):l?(l.p(t,a),1&a&&D(l,1)):(l=Fn(t),l.c(),D(l,1),l.m(e.parentNode,e))},i(t){a||(D(l),a=!0)},o(t){W(l),a=!1},d(t){l&&l.d(t),t&&g(e)}}}let Gn=1;const jn=1;function qn(){let t=Number(d3.select("#copycat-cnn-svg").style("height").replace("px",""))+150,e=new SmoothScroll('a[href*="#"]',{offset:-t}),a=document.querySelector("#article-convolution");e.animateScroll(a)}

1function Vn(t,e,a){let{input:l}=e,{kernel:n}=e,{dataRange:s}=e,{colorScale:o=d3.interpolateRdBu}=e,{isInputInputLayer:r=!1}=e,{isExited:i=!1}=e;const c=C();var d=!1,g=bn(l,n,Gn);return t.$$set=t=>{"input"in t&&a(1,l=t.input),"kernel"in t&&a(2,n=t.kernel),"dataRange"in t&&a(3,s=t.dataRange),"colorScale"in t&&a(4,o=t.colorScale),"isInputInputLayer"in t&&a(5,r=t.isInputInputLayer),"isExited"in t&&a(0,i=t.isExited)},t.$$.update=()=>{if(6&t.$$.dirty)try{a(7,g=bn(l,n,Gn))}catch{console.log("Cannot handle stride of "+Gn)}},[i,l,n,s,o,r,d,g,function(){a(6,d=!d)},function(t){a(6,d=t.detail.text)},function(){a(0,i=!0),c("message",{text:i})}]}class Dn extends Z{constructor(t){super(),Q(this,t,Vn,Bn,s,{input:1,kernel:2,dataRange:3,colorScale:4,isInputInputLayer:5,isExited:0})}}function Wn(t){let e,a,l,n,s,o,r,i,p,y,f,x,$,k,w,I,L,M,A,R,E,C,S,N,_,H,O,T,P,X=t[0].length+"",z=t[0][0].length+"",F=t[1].length+"",B=t[1][0].length+"";return p=new _n({props:{data:t[7],highlights:t[3],outputLength:t[1].length,isKernelMath:!1,constraint:Rn(t[0].length),dataRange:t[2],stride:1}}),p.$on("message",t[9]),k=new _n({props:{data:Cn([[0]]),highlights:t[4],isKernelMath:!0,constraint:20,dataRange:t[2]}}),I=new _n({props:{data:t[5],highlights:t[4],isKernelMath:!0,constraint:20,dataRange:t[2]}}),M=new _n({props:{data:t[6],highlights:t[4],isKernelMath:!0,constraint:20,dataRange:t[2]}}),T=new _n({props:{data:t[8],highlights:t[4],isKernelMath:!1,outputLength:t[1].length,constraint:Rn(t[1].length),dataRange:t[2],stride:1}}),T.$on("message",t[9]),{c(){e=u("div"),a=u("div"),l=h("Input ("),n=h(X),s=h(", "),o=h(z),r=h(")"),i=m(),Y(p.$$.fragment),y=m(),f=u("div"),x=u("span"),$=h("max(\n    "),Y(k.$$.fragment),w=h("\n    ,\n    "),Y(I.$$.fragment),L=h("\n    )\n    =\n    "),Y(M.$$.fragment),A=m(),R=u("div"),E=u("div"),C=h("Output ("),S=h(F),N=h(", "),_=h(B),H=h(")"),O=m(),Y(T.$$.fragment),v(a,"class","header-text"),v(e,"class","column has-text-centered svelte-gz7a6i"),v(f,"class","column has-text-centered svelte-gz7a6i"),v(E,"class","header-text"),v(R,"class","column has-text-centered svelte-gz7a6i")},m(t,g){d(t,e,g),c(e,a),c(a,l),c(a,n),c(a,s),c(a,o),c(a,r),c(e,i),K(p,e,null),d(t,y,g),d(t,f,g),c(f,x),c(x,$),K(k,x,null),c(x,w),K(I,x,null),c(x,L),K(M,x,null),d(t,A,g),d(t,R,g),c(R,E),c(E,C),c(E,S),c(E,N),c(E,_),c(E,H),c(R,O),K(T,R,null),P=!0},p(t,[e]){(!P||1&e)&&X!==(X=t[0].length+"")&&b(n,X),(!P||1&e)&&z!==(z=t[0][0].length+"")&&b(o,z);const a={};128&e&&(a.data=t[7]),8&e&&(a.highlights=t[3]),2&e&&(a.outputLength=t[1].length),1&e&&(a.constraint=Rn(t[0].length)),4&e&&(a.dataRange=t[2]),p.$set(a);const l={};16&e&&(l.highlights=t[4]),4&e&&(l.dataRange=t[2]),k.$set(l);const s={};32&e&&(s.data=t[5]),16&e&&(s.highlights=t[4]),4&e&&(s.dataRange=t[2]),I.$set(s);const r={};64&e&&(r.data=t[6]),16&e&&(r.highlights=t[4]),4&e&&(r.dataRange=t[2]),M.$set(r),(!P||2&e)&&F!==(F=t[1].length+"")&&b(S,F),(!P||2&e)&&B!==(B=t[1][0].length+"")&&b(_,B);const i={};256&e&&(i.data=t[8]),16&e&&(i.highlights=t[4]),2&e&&(i.outputLength=t[1].length),2&e&&(i.constraint=Rn(t[1].length)),4&e&&(i.dataRange=t[2]),T.$set(i)},i(t){P||(D(p.$$.fragment,t),D(k.$$.fragment,t),D(I.$$.fragment,t),D(M.$$.fragment,t),D(T.$$.fragment,t),P=!0)},o(t){W(p.$$.fragment,t),W(k.$$.fragment,t),W(I.$$.fragment,t),W(M.$$.fragment,t),W(T.$$.fragment,t),P=!1},d(t){t&&g(e),U(p),t&&g(y),t&&g(f),U(k),U(I),U(M),t&&g(A),t&&g(R),U(T)}}}function Yn(t,e,a){let{image:l}=e,{output:n}=e,{isPaused:s}=e,{dataRange:o}=e;const r=C();let i,c,d=l.length+0,g=Cn([[0]]),p=Cn([[0]]),u=kn(l.length*l.length,t=>!0),y=kn(n.length*n.length,t=>!0);function h(){c=0,i&&clearInterval(i),a(11,i=setInterval(()=>{if(s)return;const t=c%(n.length*n.length);a(4,y=kn(n.length*n.length,t=>!1)),a(3,u=kn(l.length*l.length,t=>{}));const e=Math.floor(t/n.length),o=t%n.length;a(4,y[e*n.length+o]=!0,y),a(3,u[e*n.length+o]=!0,u);const r=Mn(l,u,1);a(5,g=Cn(r));const i=An(n,y);a(6,p=Cn(i)),c++},250))}h();let m=Cn(l),f=Cn(n);return t.$$set=t=>{"image"in t&&a(0,l=t.image),"output"in t&&a(1,n=t.output),"isPaused"in t&&a(10,s=t.isPaused),"dataRange"in t&&a(2,o=t.dataRange)},t.$$.update=()=>{if(1&t.$$.dirty&&(d=l.length+0),3&t.$$.dirty){kn(l.length*l.length,t=>!0),kn(n.length*n.length,t=>!0)}3&t.$$.dirty&&(h(),a(7,m=Cn(l)),a(8,f=Cn(n)))},[l,n,o,u,y,g,p,m,f,function(t){a(4,y=kn(n.length*n.length,t=>!1));const e=t.detail.hoverH,o=t.detail.hoverW;a(4,y[e*n.length+o]=!0,y),a(3,u=kn(l.length*l.length,t=>{})),a(3,u[e*n.length+o]=!0,u);const i=Mn(l,u,1);a(5,g=Cn(i));const c=An(n,y);a(6,p=Cn(c)),a(10,s=!0),r("message",{text:s})},s,i]}class Kn extends Z{constructor(t){super(),Q(this,t,Yn,Wn,s,{image:0,output:1,isPaused:10,dataRange:2})}}function Un(t){let e,a,n,s,o,r,i,p,y,h,f,b,$,k,w,I,L,M,A,R=t[4]?'<i class="fas fa-play-circle play-icon"></i>':'<i class="fas fa-pause-circle"></i>';return k=new Kn({props:{image:t[0],output:t[1],isPaused:t[4],dataRange:t[2]}}),k.$on("message",t[6]),{c(){e=u("div"),a=u("div"),n=u("div"),s=u("div"),s.textContent="ReLU Activation",o=m(),r=u("div"),i=u("div"),i.innerHTML='<i class="fas fa-info-circle"></i>',p=m(),y=u("div"),h=m(),f=u("div"),f.innerHTML='<i class="fas control-icon fa-times-circle"></i>',b=m(),$=u("div"),Y(k.$$.fragment),w=m(),I=u("div"),I.innerHTML='<img src="/copycat-cnn-explainer/assets/img/pointer.svg" alt="pointer icon" class="svelte-1lq7956"/> \n        <div class="annotation-text"><span style="font-weight:600">Hover over</span> the matrices to change pixel.</div>',v(s,"class","title-text svelte-1lq7956"),v(i,"class","control-button svelte-1lq7956"),v(i,"title","Jump to article section"),v(y,"class","play-button control-button svelte-1lq7956"),v(y,"title","Play animation"),v(f,"class","delete-button control-button svelte-1lq7956"),v(f,"title","Close"),v(r,"class","buttons svelte-1lq7956"),v(n,"class","control-pannel svelte-1lq7956"),v($,"class","container is-centered is-vcentered svelte-1lq7956"),v(I,"class","annotation svelte-1lq7956"),v(a,"class","box svelte-1lq7956"),v(e,"class","container svelte-1lq7956")},m(l,g){d(l,e,g),c(e,a),c(a,n),c(n,s),c(n,o),c(n,r),c(r,i),c(r,p),c(r,y),y.innerHTML=R,c(r,h),c(r,f),c(a,b),c(a,$),K(k,$,null),c(a,w),c(a,I),L=!0,M||(A=[x(i,"click",Qn),x(y,"click",t[5]),x(f,"click",t[7])],M=!0)},p(t,e){(!L||16&e)&&R!==(R=t[4]?'<i class="fas fa-play-circle play-icon"></i>':'<i class="fas fa-pause-circle"></i>')&&(y.innerHTML=R);const a={};1&e&&(a.image=t[0]),2&e&&(a.output=t[1]),16&e&&(a.isPaused=t[4]),4&e&&(

1a.dataRange=t[2]),k.$set(a)},i(t){L||(D(k.$$.fragment,t),L=!0)},o(t){W(k.$$.fragment,t),L=!1},d(t){t&&g(e),U(k),M=!1,l(A)}}}function Jn(t){let e,a,l=!t[3]&&Un(t);return{c(){l&&l.c(),e=f()},m(t,n){l&&l.m(t,n),d(t,e,n),a=!0},p(t,[a]){t[3]?l&&(q(),W(l,1,1,()=>{l=null}),V()):l?(l.p(t,a),8&a&&D(l,1)):(l=Un(t),l.c(),D(l,1),l.m(e.parentNode,e))},i(t){a||(D(l),a=!0)},o(t){W(l),a=!1},d(t){l&&l.d(t),t&&g(e)}}}function Qn(){let t=Number(d3.select("#copycat-cnn-svg").style("height").replace("px",""))+150,e=new SmoothScroll('a[href*="#"]',{offset:-t}),a=document.querySelector("#article-relu");e.animateScroll(a)}function Zn(t,e,a){let{input:l}=e,{output:n}=e,{dataRange:s}=e,{isExited:o}=e;const r=C();let i=!1;return t.$$set=t=>{"input"in t&&a(0,l=t.input),"output"in t&&a(1,n=t.output),"dataRange"in t&&a(2,s=t.dataRange),"isExited"in t&&a(3,o=t.isExited)},[l,n,s,o,i,function(){a(4,i=!i)},function(t){a(4,i=t.detail.text)},function(){r("message",{text:!0})}]}class ts extends Z{constructor(t){super(),Q(this,t,Zn,Jn,s,{input:0,output:1,dataRange:2,isExited:3})}}function es(t){let e,a,l,n,s,o,r,i,p,y,f,x,$,k,w,I,L,M,A,R,E,C,S,N,_,H,O,T=t[9].length+"",P=t[9][0].length+"",X=t[10].length+"",z=t[10][0].length+"";return p=new _n({props:{data:t[9],highlights:t[5],outputLength:t[3].length,isKernelMath:!1,constraint:Rn(t[2].length),dataRange:t[4],stride:t[0]}}),p.$on("message",t[11]),k=new _n({props:{data:t[7],highlights:t[6],isKernelMath:!0,constraint:Rn(t[1]),dataRange:t[4]}}),I=new _n({props:{data:t[8],highlights:t[6],isKernelMath:!0,constraint:Rn(t[1]),dataRange:t[4]}}),H=new _n({props:{data:t[10],highlights:t[6],isKernelMath:!1,outputLength:t[3].length,constraint:Rn(t[3].length),dataRange:t[4],stride:t[0]}}),H.$on("message",t[11]),{c(){e=u("div"),a=u("div"),l=h("Input ("),n=h(T),s=h(", "),o=h(P),r=h(")"),i=m(),Y(p.$$.fragment),y=m(),f=u("div"),x=u("span"),$=h("max(\n    "),Y(k.$$.fragment),w=h("\n    )\n    =\n    "),Y(I.$$.fragment),L=m(),M=u("div"),A=u("div"),R=h("Output ("),E=h(X),C=h(", "),S=h(z),N=h(")"),_=m(),Y(H.$$.fragment),v(a,"class","header-text"),v(e,"class","column has-text-centered svelte-gz7a6i"),v(f,"class","column has-text-centered svelte-gz7a6i"),v(A,"class","header-text"),v(M,"class","column has-text-centered svelte-gz7a6i")},m(t,g){d(t,e,g),c(e,a),c(a,l),c(a,n),c(a,s),c(a,o),c(a,r),c(e,i),K(p,e,null),d(t,y,g),d(t,f,g),c(f,x),c(x,$),K(k,x,null),c(x,w),K(I,x,null),d(t,L,g),d(t,M,g),c(M,A),c(A,R),c(A,E),c(A,C),c(A,S),c(A,N),c(M,_),K(H,M,null),O=!0},p(t,[e]){(!O||512&e)&&T!==(T=t[9].length+"")&&b(n,T),(!O||512&e)&&P!==(P=t[9][0].length+"")&&b(o,P);const a={};512&e&&(a.data=t[9]),32&e&&(a.highlights=t[5]),8&e&&(a.outputLength=t[3].length),4&e&&(a.constraint=Rn(t[2].length)),16&e&&(a.dataRange=t[4]),1&e&&(a.stride=t[0]),p.$set(a);const l={};128&e&&(l.data=t[7]),64&e&&(l.highlights=t[6]),2&e&&(l.constraint=Rn(t[1])),16&e&&(l.dataRange=t[4]),k.$set(l);const s={};256&e&&(s.data=t[8]),64&e&&(s.highlights=t[6]),2&e&&(s.constraint=Rn(t[1])),16&e&&(s.dataRange=t[4]),I.$set(s),(!O||1024&e)&&X!==(X=t[10].length+"")&&b(E,X),(!O||1024&e)&&z!==(z=t[10][0].length+"")&&b(S,z);const r={};1024&e&&(r.data=t[10]),64&e&&(r.highlights=t[6]),8&e&&(r.outputLength=t[3].length),8&e&&(r.constraint=Rn(t[3].length)),16&e&&(r.dataRange=t[4]),1&e&&(r.stride=t[0]),H.$set(r)},i(t){O||(D(p.$$.fragment,t),D(k.$$.fragment,t),D(I.$$.fragment,t),D(H.$$.fragment,t),O=!0)},o(t){W(p.$$.fragment,t),W(k.$$.fragment,t),W(I.$$.fragment,t),W(H.$$.fragment,t),O=!1},d(t){t&&g(e),U(p),t&&g(y),t&&g(f),U(k),U(I),t&&g(L),t&&g(M),U(H)}}}function as(t,e,a){let{stride:l}=e,{dilation:n}=e,{kernelLength:s}=e,{image:o}=e,{output:r}=e,{isPaused:i}=e,{dataRange:c}=e;const d=C();let g=o.length+0,p=[];for(let t=0;t<s;t++){p.push([]);for(let e=0;e<s;e++)p[t].push(0)}p=Cn(p);let u,y,h=Cn([[0]]),m=[],f=kn(r.length*r.length,t=>!0);function x(t){y=0;let e=In(t,r,s,g,n);t<=0||(u&&clearInterval(u),a(14,u=setInterval(()=>{if(i)return;const t=y%(r.length*r.length);a(6,f=kn(r.length*r.length,t=>!1));const l=Math.floor(t/r.length),n=t%r.length;a(6,f[l*r.length+n]=!0,f),a(5,m=Ln(l,n,g,0,e,s));const c=Mn(o,m,s);a(7,p=Cn(c));const d=An(r,f);a(8,h=Cn(d)),y++}

1,250)))}x(l);let v=Cn(o),b=Cn(r);return t.$$set=t=>{"stride"in t&&a(0,l=t.stride),"dilation"in t&&a(13,n=t.dilation),"kernelLength"in t&&a(1,s=t.kernelLength),"image"in t&&a(2,o=t.image),"output"in t&&a(3,r=t.output),"isPaused"in t&&a(12,i=t.isPaused),"dataRange"in t&&a(4,c=t.dataRange)},t.$$.update=()=>{if(4&t.$$.dirty&&(g=o.length+0),8&t.$$.dirty){kn(r.length*r.length,t=>!0)}13&t.$$.dirty&&(x(l),a(9,v=Cn(o)),a(10,b=Cn(r)))},[l,s,o,r,c,m,f,p,h,v,b,function(t){let e=In(l,r,s,g,n);a(6,f=kn(r.length*r.length,t=>!1));const c=t.detail.hoverH,u=t.detail.hoverW;a(6,f[c*r.length+u]=!0,f),a(5,m=Ln(c,u,g,0,e,s));const y=Mn(o,m,s);a(7,p=Cn(y));const x=An(r,f);a(8,h=Cn(x)),a(12,i=!0),d("message",{text:i})},i,n,u]}class ls extends Z{constructor(t){super(),Q(this,t,as,es,s,{stride:0,dilation:13,kernelLength:1,image:2,output:3,isPaused:12,dataRange:4})}}function ns(t){let e,a,n,s,o,r,i,p,y,h,f,b,$,k,w,I,L,M,A,R=t[4]?'<i class="fas fa-play-circle play-icon"></i>':'<i class="fas fa-pause-circle"></i>';return k=new ls({props:{kernelLength:t[1],image:t[0],output:t[5],stride:os,dilation:rs,isPaused:t[4],dataRange:t[2]}}),k.$on("message",t[7]),{c(){e=u("div"),a=u("div"),n=u("div"),s=u("div"),s.textContent="Max Pooling",o=m(),r=u("div"),i=u("div"),i.innerHTML='<i class="fas fa-info-circle"></i>',p=m(),y=u("div"),h=m(),f=u("div"),f.innerHTML='<i class="fas control-icon fa-times-circle"></i>',b=m(),$=u("div"),Y(k.$$.fragment),w=m(),I=u("div"),I.innerHTML='<img src="/copycat-cnn-explainer/assets/img/pointer.svg" alt="pointer icon" class="svelte-kahisg"/> \n          <div class="annotation-text"><span style="font-weight:600">Hover over</span> the matrices to change kernel position.</div>',v(s,"class","title-text svelte-kahisg"),v(i,"class","control-button svelte-kahisg"),v(i,"title","Jump to article section"),v(y,"class","play-button control-button svelte-kahisg"),v(y,"title","Play animation"),v(f,"class","delete-button control-button svelte-kahisg"),v(f,"title","Close"),v(r,"class","buttons svelte-kahisg"),v(n,"class","control-pannel svelte-kahisg"),v($,"class","container is-centered is-vcentered svelte-kahisg"),v(I,"class","annotation svelte-kahisg"),v(a,"class","box svelte-kahisg"),v(e,"class","container svelte-kahisg")},m(l,g){d(l,e,g),c(e,a),c(a,n),c(n,s),c(n,o),c(n,r),c(r,i),c(r,p),c(r,y),y.innerHTML=R,c(r,h),c(r,f),c(a,b),c(a,$),K(k,$,null),c(a,w),c(a,I),L=!0,M||(A=[x(i,"click",is),x(y,"click",t[6]),x(f,"click",t[8])],M=!0)},p(t,e){(!L||16&e)&&R!==(R=t[4]?'<i class="fas fa-play-circle play-icon"></i>':'<i class="fas fa-pause-circle"></i>')&&(y.innerHTML=R);const a={};2&e&&(a.kernelLength=t[1]),1&e&&(a.image=t[0]),32&e&&(a.output=t[5]),16&e&&(a.isPaused=t[4]),4&e&&(a.dataRange=t[2]),k.$set(a)},i(t){L||(D(k.$$.fragment,t),L=!0)},o(t){W(k.$$.fragment,t),L=!1},d(t){t&&g(e),U(k),M=!1,l(A)}}}function ss(t){let e,a,l=!t[3]&&ns(t);return{c(){l&&l.c(),e=f()},m(t,n){l&&l.m(t,n),d(t,e,n),a=!0},p(t,[a]){t[3]?l&&(q(),W(l,1,1,()=>{l=null}),V()):l?(l.p(t,a),8&a&&D(l,1)):(l=ns(t),l.c(),D(l,1),l.m(e.parentNode,e))},i(t){a||(D(l),a=!0)},o(t){W(l),a=!1},d(t){l&&l.d(t),t&&g(e)}}}let os=2;const rs=1;function is(){let t=Number(d3.select("#copycat-cnn-svg").style("height").replace("px",""))+150,e=new SmoothScroll('a[href*="#"]',{offset:-t}),a=document.querySelector("#article-pooling");e.animateScroll(a)}function cs(t,e,a){let{input:l}=e,{kernelLength:n}=e,{dataRange:s}=e,{isExited:o}=e;const r=C();var i=!1,c=$n(l);return t.$$set=t=>{"input"in t&&a(0,l=t.input),"kernelLength"in t&&a(1,n=t.kernelLength),"dataRange"in t&&a(2,s=t.dataRange),"isExited"in t&&a(3,o=t.isExited)},t.$$.update=()=>{if(1&t.$$.dirty)try{a(5,c=$n(l))}catch{console.log("Cannot handle stride of "+os)}},[l,n,s,o,i,c,function(){a(4,i=!i),console.log(i)},function(t){a(4,i=t.detail.text)},function(){r("message",{text:!0})}]}class ds extends Z{constructor(t){super(),Q(this,t,cs,ss,s,{input:0,kernelLength:1,dataRange:2,isExited:3})}}function gs(e){let a,n,s,o,r,i,p,f,$,k,w,I,L,M,A,R,E,C,S;return{c(){a=u("div"),n=u("div"),s=u("div"),o=u("div"),o.innerHTML='<i class="fas fa-info-circle"></i>',r=m(),i=u("div"),i.innerHTML='<i class="fas control-icon fa-times-circle"></i>',p=m(),f=u("div"),$=h("Softmax Score for "),k=u("i"),w=h('"'),I=h(e[0]),L=h('"'),M=m(),A=y("svg"),R=m(),E=u("div"),E.innerHTML='<img src="/copycat-cnn-explainer/assets/img/pointer.svg" alt="pointer icon" class="svelte-1uac4ng"/> \n      <div class="annotation-text"><span style="font-weight:600">Hover over</span> the numbers to highlight logit circles.</div>',v(o,"class","control-button svelte-1uac4ng"),v(o,"title","Jump to article section"),v(i,"class","delete-button control-button svelte-1uac4ng"),v(i,"title","Close"),v(s,"class","buttons svelte-1uac4ng"),v(f,"class","title-text svelte-1uac4ng"),v(A,"id","copycatsoftmax-svg"),v(A,"width","470"),v(A,"height","105"),v(A,"class","svelte-1uac4ng"),v(E,"class","annotation svelte-1uac4ng"),v(n,"class","box svelte-1uac4ng"),v(a,"class","container")},m(t,l){d(t,a,l),c(a,n),c(n,s),c(s,o),c(s,r),c(s,i),c(n,p),c(n,f),c(f,$),c(f,k),c(k,w),c(k,I),c(k,L),c(n,M),c(n,A),c(n,R),c(n,E),e[10](a),C||(S=[x(o,"click",ps),x(i,"click",e[2])],C=!0)},p(t,[e]){1&e&&b(I,t[0])},i:t,o:t,d(t){t&&g(a),e[10](null),C=!1,l(S)}}}function ps(){let t=Number(d3.select("#copycat-cnn-svg").style("height").replace("px",""))+150,e=new SmoothScroll('a[href*="#"]',{offset:-t}),a=document.querySelector("#article-softmax");e.animateScroll(a)}function us(t,e,a){let l,{logits:n}=e,{logitColors:s}=e,{selectedI:o}=e,{highlightI:r=-1}=e,{outputName:i}=e,{outputValue:c}=e,{startAnimation:d}=e,g=null;const p=C(),u=(t,e)=>void 0===e?d3.format(".2f")(t):d3.format(`.${e}f`)(t),y=(t,e,l,n)=>{a(3,r=n),p("mouseOver",{curI:n})},h=(t,e,l,n)=>{a(3,r=-1),p("mouseLeave",{curI:n})};return R(()=>{a(9,g=d3.select(l).select("#copycatsoftmax-svg"));let t=g.append("g").attr("class","formula-right").attr("transform","translate(10, 0)").style("font-size","15px"),e=t.append("g").attr("class","denominator").attr("transform","translate(0, 58)");e.append("text").attr("x",0).attr("y",0).style("fill","gray").text("(");let r=8;

1n.forEach((t,a)=>{a/4>=1&&a%4==0&&(r=8);let l=e.append("text").attr("x",r).attr("y",20*Math.floor(a/4)).style("cursor","crosshair").style("pointer-events","all").on("mouseover",(t,e,l)=>y(0,0,0,a)).on("mouseleave",(t,e,l)=>h(0,0,0,a)).text("exp(");l.append("tspan").attr("class",`formula-term-${a} formula-term`).attr("dx","1").style("fill",s[a]).style("fill-opacity",a===o||d.hasInitialized?1:0).text(u(t)),l.append("tspan").attr("dx","1").text(")");let i=l.node().getBBox();r+=i.width+4,a!==n.length-1?(e.append("text").attr("x",r).attr("y",20*Math.floor(a/4)).text("+"),r+=14):e.append("text").attr("x",r-2).attr("y",20*Math.floor(a/4)).style("fill","gray").text(")")}),e.selectAll("text").data(n).enter().append("text").attr("x",(t,e)=>40*e).attr("y",0).text(t=>u(t));let i=e.node().getBBox();t.append("line").attr("class","separation-line").attr("x1",-5).attr("x2",i.width+5).attr("y1",32).attr("y2",32).style("stroke-width",1.2).style("stroke","gray");let p=t.append("g").attr("class","numerator-group").attr("transform","translate(0, 20)").append("text").attr("x",i.x+i.width/2).attr("y",0).on("mouseover",(t,e,a)=>y(0,0,0,o)).on("mouseleave",(t,e,a)=>h(0,0,0,o)).style("pointer-events","all").style("cursor","crosshair").style("text-anchor","middle").text("exp(");p.append("tspan").attr("class",`formula-term-${o} formula-term`).attr("dx",1).style("fill",s[o]).text(""+u(n[o])),p.append("tspan").attr("dx",1).text(")");let m=g.append("g").attr("class","formula-left").attr("transform","translate(395, 32)");m.append("text").attr("x",20).attr("dominant-baseline","middle").text(""+u(c,4)).node().getBBox();m.append("text").attr("dominant-baseline","middle").attr("x",0).attr("y",0).style("fill","gray").style("font-weight","bold").text("=")}),t.$$set=t=>{"logits"in t&&a(4,n=t.logits),"logitColors"in t&&a(5,s=t.logitColors),"selectedI"in t&&a(6,o=t.selectedI),"highlightI"in t&&a(3,r=t.highlightI),"outputName"in t&&a(0,i=t.outputName),"outputValue"in t&&a(7,c=t.outputValue),"startAnimation"in t&&a(8,d=t.startAnimation)},t.$$.update=()=>{520&t.$$.dirty&&null!==g&&(g.selectAll(".formula-term").style("text-decoration","none").style("font-weight","normal"),g.selectAll(".formula-term-"+r).style("font-weight","bold").style("text-decoration","underline")),768&t.$$.dirty&&null!==g&&g.select(".formula-term-"+d.i).transition("softmax-edge").duration(d.duration).style("fill-opacity",1)},[i,l,()=>{p("xClicked",{})},r,n,s,o,c,d,g,function(t){N[t?"unshift":"push"](()=>{l=t,a(1,l)})}]}class ys extends Z{constructor(t){super(),Q(this,t,us,gs,s,{logits:4,logitColors:5,selectedI:6,highlightI:3,outputName:0,outputValue:7,startAnimation:8})}}function hs(e){let a,n,s,o,r,i,p,y,f,w,I,M,A,R,E,C,S,N,_,H,O,T,P,X,z,F,B,G,j,q,V,D,W,Y,K,U,J,Q=e[5].error+"";return{c(){a=u("div"),n=u("div"),s=u("div"),o=m(),r=u("div"),i=u("header"),p=u("p"),p.textContent="Add Input Image",y=m(),f=u("button"),w=m(),I=u("section"),M=u("div"),A=u("div"),R=u("input"),E=m(),C=u("span"),C.innerHTML='<i class="fas fa-link"></i>',S=m(),N=u("div"),N.textContent="or",_=m(),H=u("div"),O=u("label"),T=u("input"),P=m(),X=u("span"),X.innerHTML='<span class="file-icon"><i class="fas fa-upload"></i></span> \n                <span class="file-label">Upload</span>',z=m(),F=u("footer"),B=u("div"),G=h(Q),j=m(),q=u("div"),V=u("button"),V.textContent="Cancel",D=m(),W=u("button"),W.textContent="Add",Y=m(),K=u("img"),v(s,"class","modal-background"),v(p,"class","modal-card-title svelte-1o5lxfe"),v(f,"class","delete"),v(f,"aria-label","close"),v(i,"class","modal-card-head svelte-1o5lxfe"),v(R,"class","input small-font svelte-1o5lxfe"),v(R,"type","url"),v(R,"placeholder","Paste URL of image..."),v(C,"class","icon small-font is-left svelte-1o5lxfe"),v(A,"class","control has-icons-left svelte-1o5lxfe"),L(A,"is-loading",e[3]),v(N,"class","or-label svelte-1o5lxfe"),v(T,"class","file-input"),v(T,"type","file"),v(T,"name","image"),v(T,"accept",".png,.jpeg,.tiff,.jpg,.png"),v(X,"class","file-cta small-font svelte-1o5lxfe"),v(O,"class","file-label"),v(H,"class","file"),v(M,"class","field svelte-1o5lxfe"),v(I,"class","modal-card-body"),v(B,"class","error-message svelte-1o5lxfe"),L(B,"hidden",!e[5].show),v(V,"class","button is-smaller svelte-1o5lxfe"),v(W,"class","button is-success is-smaller svelte-1o5lxfe"),v(q,"class","button-container"),v(F,"class","modal-card-foot svelte-1o5lxfe"),v(r,"class","modal-card svelte-1o5lxfe"),v(n,"class","modal"),v(n,"id","copycatinput-modal"),L(n,"is-active",e[6].show),k(K,"dis

1play","none"),v(K,"id","copycatvali-image"),v(K,"alt","hidden image"),v(a,"class","modal-component")},m(t,l){d(t,a,l),c(a,n),c(n,s),c(n,o),c(n,r),c(r,i),c(i,p),c(i,y),c(i,f),c(r,w),c(r,I),c(I,M),c(M,A),c(A,R),$(R,e[2]),c(A,E),c(A,C),c(M,S),c(M,N),c(M,_),c(M,H),c(H,O),c(O,T),c(O,P),c(O,X),c(r,z),c(r,F),c(F,B),c(B,G),c(F,j),c(F,q),c(q,V),c(q,D),c(q,W),c(a,Y),c(a,K),e[14](K),e[15](a),U||(J=[x(s,"click",e[10]),x(f,"click",e[10]),x(R,"input",e[12]),x(T,"change",e[13]),x(T,"change",e[9]),x(V,"click",e[10]),x(W,"click",e[11]),x(K,"error",e[7]),x(K,"load",e[8])],U=!0)},p(t,[e]){4&e&&$(R,t[2]),8&e&&L(A,"is-loading",t[3]),32&e&&Q!==(Q=t[5].error+"")&&b(G,Q),32&e&&L(B,"hidden",!t[5].show),64&e&&L(n,"is-active",t[6].show)},i:t,o:t,d(t){t&&g(a),e[14](null),e[15](null),U=!1,l(J)}}}function ms(t,e,a){let l,n,s,o="",r=!1,i=!0,c={show:!1,error:""};const d=C();let g={show:!1};Ht.set(g),Ht.subscribe(t=>{a(6,g=t)});return R(()=>{d3.select(l).select("#copycatinput-modal")}),[l,n,o,r,s,c,g,()=>{a(3,r=!1),a(5,c.show=!0,c),a(5,c.error=i?"We can't find the image at that URL.":"Not a valid image file.",c)},()=>{let t=document.createElement("canvas"),e=t.getContext("2d");t.width=n.width,t.height=n.height,e.drawImage(n,0,0);try{e.getImageData(0,0,n.width,n.height),a(3,r=!1),a(6,g.show=!1,g),Ht.set(g),d("urlTyped",{url:n.src}),a(2,o=null)}catch(t){a(3,r=!1),a(5,c.show=!0,c),a(5,c.error="No permission to load this image.",c)}},()=>{i=!1;let t=new FileReader;t.onload=t=>{a(1,n.src=t.target.result,n)},t.readAsDataURL(s[0])},()=>{a(6,g.show=!1,g),Ht.set(g),d("xClicked",{preImage:g.preImage})},()=>{a(3,r=!0),a(5,c.show=!1,c),a(1,n.crossOrigin="Anonymous",n),a(1,n.src=o,n)},function(){o=this.value,a(2,o)},function(){s=this.files,a(4,s)},function(t){N[t?"unshift":"push"](()=>{n=t,a(1,n)})},function(t){N[t?"unshift":"push"](()=>{l=t,a(0,l)})}]}class fs extends Z{constructor(t){super(),Q(this,t,ms,hs,s,{})}}const xs=Qe.nodeLength,vs=t=>{let e=1/0,a=-1/0;if(void 0===t.length)return[t,t];if(void 0===t[0].length){for(let l=0;l<t[0].length;l++)t[l]<e?e=t[l]:t[l]>a&&(a=t[l]);return[e,a]}for(let l=0;l<t.length;l++)for(let n=0;n<t[0].length;n++)t[l][n]<e?e=t[l][n]:t[l][n]>a&&(a=t[l][n]);return[e,a]},bs=t=>({x:t.x+xs,y:t.y+xs/2}),$s=t=>({x:t.x,y:t.y+xs/2}),ks=(t,e,a,l)=>(void 0===l&&(l=0),t((a+e/2)/e*(1-2*l)+l)),ws=Qe.layerColorScales,Is=Qe.nodeLength,Ls=Qe.numLayers,Ms=Qe.edgeOpacity,As=Qe.edgeInitColor,Rs=Qe.edgeStrokeWidth,Es=Qe.svgPaddings,Cs=Qe.gapRatio,Ss=Qe.classLists,Ns=d3.format(".4f");let _s=void 0;bt.subscribe(t=>{_s=t});let Hs=void 0;$t.subscribe(t=>{Hs=t});let Os=void 0;kt.subscribe(t=>{Os=t});let Ts=void 0;vt.subscribe(t=>{Ts=t});let Ps=void 0;wt.subscribe(t=>{Ps=t});let Xs=void 0;It.subscribe(t=>{Xs=t});let zs=void 0;Lt.subscribe(t=>{zs=t});let Fs=void 0;Mt.subscribe(t=>{Fs=t});let Bs=void 0;Rt.subscribe(t=>{Bs=t});const Gs=(t,e,a,l)=>{let n=a[e],s=ws[t.type];"input"===t.type&&(s=s[t.index]);let o=void 0===t.output.length?1:t.output.length,r=document.createElement("canvas"),i=r.getContext("2d");r.width=o,r.height=o;let c=i.getImageData(0,0,o,o),d=c.data;if(1===o)d[0]=t.output;else for(let e=0;e<d.length;e+=4){let a=Math.floor(e/4),n=Math.floor(a/o),r=a%o,i=void 0;i="input"===t.type||"fc"===t.type?d3.rgb(s(1-t.output[n][r])):d3.rgb(s((t.output[n][r]+l/2)/l)),d[e]=i.r,d[e+1]=i.g,d[e+2]=i.b,d[e+3]=255}let g=document.createElement("canvas");g.width=3*Is,g.height=3*Is;let p=g.getContext("2d");i.putImageData(c,0,0),p.drawImage(r,0,0,o,o,0,0,3*Is,3*Is);let u=g.toDataURL();d3.select(n).attr("xlink:href",u),r.remove(),g.remove()},js=(t,e,a,l)=>{d3.select(a[e]).select("rect.output-rect").transition("output").delay(500).duration(800).ease(d3.easeCubicIn).attr("width",l(t.output))},qs=(t,e,a,l,n)=>{void 0===l&&(l=0),void 0===n&&(n=1);let s=t.append("defs").append("svg:linearGradient").attr("id",""+a).attr("x1","0%").attr("y1","100%").attr("x2","100%").attr("y2","100%").attr("spreadMethod","pad");for(let t=0;t<10;t++){let a=t/9,o=e(a*(n-l)+l);s.append("stop").attr("offset",100*a+"%").attr("stop-color",o).attr("stop-opacity",1)}},Vs=(t,e,a,l,n,s)=>

1{Os=(t-Is*Ls)/(8+5*Cs),kt.set(Os);let o=0;for(let t=0;t<Ts.length;t++){let r=Ts[t],i="output"===r[0].layerName;Ps.push([]),i||"conv"===r[0].type?o+=Os*Cs:o+=Os;let c=o,d=a.append("g").attr("class","cnn-layer-group").attr("id","cnn-layer-group-"+t);Hs=(e-Is*r.length)/(r.length+1),$t.set(Hs);let g=d.selectAll("g.node-group").data(r,t=>t.index).enter().append("g").attr("class","node-group").style("cursor","pointer").style("pointer-events","all").on("click",s).on("mouseover",l).on("mouseleave",n).classed("node-output",i).attr("id",(e,a)=>{let l=a*Is+(a+1)*Hs;return l+=Es.top,Ps[t].push({x:c,y:l}),`layer-${t}-node-${a}`});d.selectAll("g.node-output").on("mouseover",(t,e,a)=>{l(t,e,a),_t.set({show:!0,text:"Output value: "+Ns(t.output)})}).on("mouseleave",(t,e,a)=>{n(t,e,a),_t.set({show:!1,text:"Output value: "+Ns(t.output)})}),"output"!==r[0].layerName?(g.append("image").attr("class","node-image").attr("width",Is).attr("height",Is).attr("x",c).attr("y",(e,a)=>Ps[t][a].y),g.append("rect").attr("class","bounding").attr("width",Is).attr("height",Is).attr("x",c).attr("y",(e,a)=>Ps[t][a].y).style("fill","none").style("stroke","gray").style("stroke-width",1).classed("hidden",!0)):(g.append("rect").attr("class","output-rect").attr("x",c).attr("y",(e,a)=>Ps[t][a].y+Is/2+8).attr("height",Is/4).attr("width",0).style("fill","gray"),g.append("text").attr("class","output-text").attr("x",c).attr("y",(e,a)=>Ps[t][a].y+Is/2).style("dominant-baseline","middle").style("font-size","11px").style("fill","black").style("opacity",.5).text((t,e)=>Ss[e])),o+=Is}wt.set(Ps);let r=d3.scaleLinear().domain(zs.output).range([0,Is]);for(let t=0;t<Ts.length;t++){let e=zs[Xs][t];_s.select("g#cnn-layer-group-"+t).selectAll("image.node-image").each((t,a,l)=>Gs(t,a,l,e))}_s.selectAll("g.node-output").each((t,e,a)=>js(t,e,a,r));let i=Ts.map(t=>"output"===t[0].layerName?{name:t[0].layerName,dimension:`(${t.length})`}:{name:t[0].layerName,dimension:`(${t[0].output.length}, ${t[0].output.length}, ${t.length})`}),c=Number(d3.select("#copycat-cnn-svg").style("height").replace("px",""))+150,d=new SmoothScroll('a[href*="#"]',{offset:-c}),g=_s.selectAll("g.layer-detailed-label").data(i).enter().append("g").attr("class","layer-detailed-label").attr("id",(t,e)=>"layer-detailed-label-"+e).classed("hidden",!Bs).attr("transform",(t,e)=>`translate(${Ps[e][0].x+Is/2}, ${(Es.top+Hs)/2-6})`).style("cursor",t=>t.name.includes("output")?"default":"help").on("click",t=>{let e="";t.name.includes("conv")&&(e="convolution"),t.name.includes("relu")&&(e="relu"),t.name.includes("max_pool")&&(e="pooling"),t.name.includes("input")&&(e="input");let a=document.querySelector("#article-"+e);d.animateScroll(a)});g.append("title").text("Move to article section"),g.append("text").style("opacity",.7).style("dominant-baseline","middle").append("tspan").style("font-size","12px").text(t=>t.name).append("tspan").style("font-size","8px").style("font-weight","normal").attr("x",0).attr("dy","1.5em").text(t=>t.dimension);let p=_s.selectAll("g.layer-label").data(i).enter().append("g").attr("class","layer-label").attr("id",(t,e)=>"layer-label-"+e).classed("hidden",Bs).attr("transform",(t,e)=>`translate(${Ps[e][0].x+Is/2}, ${(Es.top+Hs)/2+5})`).style("cursor",t=>t.name.includes("output")?"default":"help").on("click",t=>{let e="";t.name.includes("conv")&&(e="convolution"),t.name.includes("relu")&&(e="relu"),t.name.includes("max_pool")&&(e="pooling"),t.name.includes("input")&&(e="input");let a=document.querySelector("#article-"+e);d.animateScroll(a)});p.append("title").text("Move to article section"),p.append("text").style("dominant-baseline","middle").style("opacity",.8).text(t=>t.name.includes("conv")?"conv":t.name.includes("relu")?"relu":t.name.includes("max_pool")?"max_pool":t.name),qs(_s,ws.conv,"convGradient"),qs(_s,ws.input[0],"inputGradient");((t,e)=>{for(let a=0;a<2;a++){let l=1+5*a,n=zs.local[l],s=zs.local[l+2],o=d3.scaleLinear().range([0,2*Is+Os-1.2]).domain([-n/2,n/2]),r=d3.scaleLinear().range([0,3*Is+2*Os-1.2]).domain([-s/2,s/2]),i=d3.axisBottom().scale(o).tickFormat(d3.format(".2f")).tickValues([-n/2,0,n/2]),c=d3.axisBottom().scale(r).tickFormat(d3.format(".2f")).tickValues([-s/2,0,s/2]),d=t.a

1ppend("g").attr("class","copycatlegend local-copycatlegend").attr("id",`local-copycatlegend-${a}-1`).classed("hidden",!Bs||"local"!==Xs).attr("transform",`translate(${Ps[l][0].x}, 0)`);d.append("g").attr("transform",`translate(0, ${e-3})`).call(i),d.append("rect").attr("width",2*Is+Os).attr("height",e).style("fill","url(#convGradient)");let g=t.append("g").attr("class","copycatlegend local-copycatlegend").attr("id",`local-copycatlegend-${a}-2`).classed("hidden",!Bs||"local"!==Xs).attr("transform",`translate(${Ps[l+2][0].x}, 0)`);g.append("g").attr("transform",`translate(0, ${e-3})`).call(c),g.append("rect").attr("width",3*Is+2*Os).attr("height",e).style("fill","url(#convGradient)")}for(let a=0;a<2;a++){let l=1+5*a,n=zs.module[l],s=d3.scaleLinear().range([0,5*Is+3*Os+1*Os*Cs-1.2]).domain([-n/2,n/2]),o=d3.axisBottom().scale(s).tickFormat(d3.format(".2f")).tickValues([-n/2,-n/4,0,n/4,n/2]),r=t.append("g").attr("class","copycatlegend module-copycatlegend").attr("id","module-copycatlegend-"+a).classed("hidden",!Bs||"module"!==Xs).attr("transform",`translate(${Ps[l][0].x}, 0)`);r.append("g").attr("transform",`translate(0, ${e-3})`).call(o),r.append("rect").attr("width",5*Is+3*Os+1*Os*Cs).attr("height",e).style("fill","url(#convGradient)")}let a=zs.global[1],l=d3.scaleLinear().range([0,10*Is+6*Os+3*Os*Cs-1.2]).domain([-a/2,a/2]),n=d3.axisBottom().scale(l).tickFormat(d3.format(".2f")).tickValues([-a/2,-a/4,0,a/4,a/2]),s=t.append("g").attr("class","copycatlegend global-copycatlegend").attr("id","global-copycatlegend").classed("hidden",!Bs||"global"!==Xs).attr("transform",`translate(${Ps[1][0].x}, 0)`);s.append("g").attr("transform",`translate(0, ${e-3})`).call(n),s.append("rect").attr("width",10*Is+6*Os+3*Os*Cs).attr("height",e).style("fill","url(#convGradient)");let o=d3.scaleLinear().domain(zs.output).range([0,Is-1.2]),r=d3.axisBottom().scale(o).tickFormat(d3.format(".1f")).tickValues([0,zs.output[1]]),i=t.append("g").attr("class","copycatlegend output-copycatlegend").attr("id","output-copycatlegend").classed("hidden",!Bs).attr("transform",`translate(${Ps[11][0].x}, 0)`);i.append("g").attr("transform",`translate(0, ${e-3})`).call(r),i.append("rect").attr("width",Is).attr("height",e).style("fill","gray");let c=d3.scaleLinear().range([0,Is-1.2]).domain([0,1]),d=d3.axisBottom().scale(c).tickFormat(d3.format(".1f")).tickValues([0,.5,1]),g=t.append("g").attr("class","copycatlegend input-copycatlegend").classed("hidden",!Bs).attr("transform",`translate(${Ps[0][0].x}, 0)`);g.append("g").attr("transform",`translate(0, ${e-3})`).call(d),g.append("rect").attr("x",.3).attr("width",Is-.3).attr("height",e).attr("transform",`rotate(180, ${Is/2}, ${e/2})`).style("stroke","rgb(20, 20, 20)").style("stroke-width",.3).style("fill","url(#inputGradient)")})(_s.append("g").attr("class","color-copycatlegend").attr("transform",`translate(0, ${Es.top+10*Hs+Hs+10*Is})`),5);let u=d3.linkHorizontal().x(t=>t.x).y(t=>t.y),y=((t,e)=>{let a=[];for(let l=1;l<e.length;l++)for(let n=0;n<e[l].length;n++){let s="output"===e[l][n].layerName,o=$s(t[l][n]);for(let r=0;r<e[l][n].inputLinks.length;r++){let i=e[l][n].inputLinks[r].source.index;if(s){let t=e[l-1][0].output.length*e[l-1][0].output.length;if(i%t!=0)continue;i=Math.floor(i/t)}let c=bs(t[l-1][i]),d=e[l][n].inputLinks[r].weight;a.push({source:c,target:o,weight:d,targetLayerIndex:l,targetNodeIndex:n,sourceNodeIndex:i})}}return a})(Ps,Ts);a.append("g").attr("class","edge-group").selectAll("path.edge").data(y).enter().append("path").attr("class",t=>`edge edge-${t.targetLayerIndex} edge-${t.targetLayerIndex}-${t.targetNodeIndex}`).attr("id",t=>`edge-${t.targetLayerIndex}-${t.targetNodeIndex}-${t.sourceNodeIndex}`).attr("d",t=>u({source:t.source,target:t.target})).style("fill","none").style("stroke-width",Rs).style("opacity",Ms).style("stroke",As);let h=a.append("g").attr("class","input-annotation"),m=h.append("text").attr("x",Ps[0][0].x+Is/2).attr("y",Ps[0][0].y+Is+5).attr("class","annotation-text").style("dominant-baseline","hanging").style("text-anchor","middle");m.append("tspan").style("dominant-baseline","hanging").style("fill","#C95E67").text("Red"),m.append("tspan").style("dominant-baseline","hanging").text(" channel"),h.append("text").attr("x",Ps[0][1].x+Is/2).attr("y",Ps[0][1].y+Is+5).attr("class","annotation-text").style("dominant-baseline","hanging").style("text-anchor","middle").style("fill","#3DB665").text("Green"),h.append("text").attr("x",Ps[0][2].x+Is/2).attr("y",Ps[0][2].y+Is+5).attr("class","annotation-text").style("dominant-baseline","hanging").style("text-anchor","middle").style("fill","#3F7FBC").text("Blue")},Ds=()=>{let t=d3.scaleLinear().domain(zs.output).range([0,Is]);for(let e=0;e<Ts.length;e++){let a=Ts[e],l=zs[Xs][e],n=_s.select("g#cnn-layer-group-"+e).selectAll("g.node-group").data(a);e<Ts.length-1?n.transition("disappear").duration(300).ease(d3.easeCubicOut).style("opacity",0).on("end",(function(){d3.select(this).select("image.node-image").each((t,e,a)=>Gs(t,e,a,l)),d3.select(this).transition("appear").duration(700).ease(d3.easeCubicIn).style("opacity",1)})):n.each((e,a,l)=>js(e,a,l,t))}for(let t=0;t<2;t++){let e=1+5*t,a=zs.local[e],l=zs.local[e+2],n=d3.scaleLinear().range([0,2*Is+Os]).domain([-a/2,a/2]),s=d3.scaleLinear().range([0,3*Is+2*Os]).domain([-l/2,l/2]),o=d3.axisBottom().scale(n).tickFormat(d3.format(".2f")).tickValues([-a/2,0,a/2]),r=d3.axisBottom().scale(s).tickFormat(d3.format(".2f")).tickValues([-l/2,0,l/2]);_s.select(`g#local-copycatlegend-${t}-1`).select("g").call(o),_s.select(`g#local-copycatlegend-${t}-2`).select("g").call(r)}for(let t=0;t<2;t++){let e=1+5*t,a=zs.local[e],l=d3.scaleLinear().range([0,5*Is+3*Os+1*Os*Cs-1.2]).domain([-a,a]),n=d3.axisBottom().scale(l).tickFormat(d3.format(".2f")).tickValues([-a,-a/2,0,a/2,a]);_s.select("g#module-copycatlegend-"+t).select("g").call(n)}let e=zs.global[1],a=d3.scaleLinear().range([0,10*Is+6*Os+3*Os*Cs-1.2]).domain([-e,e]),l=d3.axisBottom().scale(a).tickFormat(d3.format(".2f")).tickValues([-e,-e/2,0,e/2,e]);_s.select("g#global-copycatlegend").select("g").call(l);let n=d3.axisBottom().scale(t).tickFormat(d3.format(".1f")).tickValues([0,zs.output[1]]);_s.select("g#output-copycatlegend").select("g").call(n)},Ws=()=>{let t=[1],e=void 0;Fs=[];for(let a=0;a<Ts.length-1;a++){let l=Ts[a],n=l.map(t=>vs(t.output)).reduce((t,e)=>[Math.min(t[0],e[0]),Math.max(t[1],e[1])]);Fs.push({min:n[0],max:n[1]}),"conv"!==l[0].type&&"fc"!==l[0].type||(n=n.map(Math.abs),e=2*(.1+Math.round(1e3*Math.max(...n))/1e3)),void 0!==e&&t.push(e)}t.push(1),Fs.push({min:0,max:1});let a=[1],l=(Ls-2)/5;for(let e=0;e<l;e++){let l=t.slice(1+5*e,1+5*e+5),n=Math.max(...l);for(let t=0;t<5;t++)a.push(n)}a.push(1);let n=[1],s=Math.max(...t.slice(1,t.length-1));for(let t=0;t<Ls-2;t++)n.push(s);n.push(1),zs.local=t,zs.module=a,zs.global=n,zs.output=[0,d3.max(Ts[Ts.length-1].map(t=>t.output))],Lt.set(zs),Mt.set(Fs)},Ys=Qe.layerColorScales,Ks=Qe.nodeLength,Us=Qe.intermediateColor,Js=Qe.svgPaddings;let Qs=void 0;bt.subscribe(t=>{Qs=t});let Zs=void 0;$t.subscribe(t=>{Zs=t});const to=t=>{let e=t.layerIndex,a=t.targetX,l=t.disable,n=t.delay,s=t.opacity,o=t.specialIndex,r=t.onEndFunc,i=void 0===t.transitionName?"move":t.transitionName,c=void 0===t.duration?500:t.duration;Qs.select("g#cnn-layer-group-"+e).selectAll("g.node-group").each((t,e,r)=>{d3.select(r[e]).style("cursor",l&&e!==o?"default":"pointer").style("pointer-events",l&&e!==o?"none":"all").select("image").transition(i).ease(d3.easeCubicInOut).delay(n).duration(c).attr("x",a),d3.select(r[e]).select("rect.boun

1ding").transition(i).ease(d3.easeCubicInOut).delay(n).duration(c).attr("x",a),void 0!==s&&e!==o&&d3.select(r[e]).select("image").style("opacity",s)}),Qs.selectAll("g#layer-label-"+e).transition(i).ease(d3.easeCubicInOut).delay(n).duration(c).attr("transform",()=>`translate(${a+Ks/2}, ${(Js.top+Zs)/2+5})`).on("end",r),Qs.selectAll("g#layer-detailed-label-"+e).transition(i).ease(d3.easeCubicInOut).delay(n).duration(c).attr("transform",()=>`translate(${a+Ks/2}, ${(Js.top+Zs)/2-6})`).on("end",r)},eo=(t,e,a)=>{void 0===a&&(a=Qs);let l=a.append("defs").attr("class","overlay-gradient").append("linearGradient").attr("id",t).attr("x1","0%").attr("x2","100%").attr("y1","100%").attr("y2","100%");e.forEach(t=>{l.append("stop").attr("offset",t.offset).attr("stop-color",t.color).attr("stop-opacity",t.opacity)})},ao=t=>{let e=t.copycatlegendHeight,a=t.curLayerIndex,l=t.range,n=t.group,s=t.minMax,o=t.width,r=t.x,i=t.y,c=t.isInput,d=t.colorScale,g=t.gradientAppendingName,p=t.gradientGap;void 0===d&&(d=Ys.conv),void 0===p&&(p=0);let u="url(#inputGradient)",y=t=>d(t*(1-2*p)+p);if(!c){let t=(s.min+l/2)/l,e=(0+l/2)/l,a=(s.max+l/2)/l,o=s.max-s.min,r=(0-s.min)/o,i=t+(e-t)/2,c=e+(a-e)/2,d=[{offset:0,color:y(t),opacity:1},{offset:r/2,color:y(i),opacity:1},{offset:r,color:y(e),opacity:1},{offset:r+(1-e)/2,color:y(c),opacity:1},{offset:1,color:y(a),opacity:1}];void 0===g?(eo("intermediate-copycatlegend-gradient",d,n),u="url(#intermediate-copycatlegend-gradient)"):(eo(""+g,d,n),u=`url(#${g})`)}let h=d3.scaleLinear().range([0,o-1.2]).domain(c?[0,l]:[s.min,s.max]),m=d3.axisBottom().scale(h).tickFormat(d3.format(c?"d":".2f")).tickValues(c?[0,l]:[s.min,0,s.max]),f=n.append("g").attr("class","intermediate-copycatlegend-"+(a-1)).attr("transform",`translate(${r}, ${i})`),x=f.append("g").attr("transform",`translate(0, ${e-3})`).call(m);x.selectAll("text").style("font-size","9px").style("fill",Us),x.selectAll("path, line").style("stroke",Us),f.append("rect").attr("width",o).attr("height",e).attr("transform",`rotate(${c?180:0},\n      ${o/2}, ${e/2})`).style("fill",u)},lo=t=>{let e=t.group,a=t.sx,l=t.sy,n=t.tx,s=t.ty,o=t.dr,r=t.hFlip,i=void 0===t.marker?"marker":t.marker;e.append("g").attr("class","arrow-group").append("path").attr("d",`M${a},${l}A${o},${o} 0 0,${r?0:1} ${n},${s}`).attr("marker-end",`url(#${i})`).style("stroke","gray").style("fill","none")},no=Qe.layerColorScales,so=Qe.nodeLength,oo=Qe.plusSymbolRadius,ro=Qe.numLayers,io=Qe.intermediateColor,co=Qe.kernelRectLength,go=Qe.svgPaddings,po=Qe.gapRatio,uo=Qe.overlayRectOffset,yo=d3.format(".4f");let ho=!1,mo=void 0;bt.subscribe(t=>{mo=t});let fo=void 0;$t.subscribe(t=>{fo=t});let xo=void 0;kt.subscribe(t=>{xo=t});let vo=void 0;vt.subscribe(t=>{vo=t});let bo=void 0;wt.subscribe(t=>{bo=t});let $o=void 0;It.subscribe(t=>{$o=t});let ko=void 0;Lt.subscribe(t=>{ko=t});let wo=void 0;Mt.subscribe(t=>{wo=t});let Io=[void 0,void 0];At.subscribe(t=>{Io=t});let Lo=void 0;Et.subscribe(t=>{Lo=t});let Mo=void 0;Rt.subscribe(t=>{Mo=t});let Ao=void 0;Ot.subscribe(t=>{Ao=t});const Ro=(t,e,a,l,n)=>{const s=()=>{let o=+t.attr("data-origin-x"),r=+t.attr("data-origin-y"),i=+t.attr("data-tick"),c=i%e,d=Math.floor(i/e),g=o+c*a,p=r+d*a,u=(i+1)%(e*e);mo.selectAll(`rect.mask-${c}-${d}`).transition("window-sliding-mask").delay(l+100).duration(300).style("opacity",0),t.attr("data-tick",u).transition("window-sliding-input").delay(l).duration(200).attr("transform",`translate(${g}, ${p})`).on("end",()=>{0===u&&(ho||Co(n)),Lo&&s()})};s()},Eo=(t,e,a,l)=>{const n=()=>{let s=+t.attr("data-origin-x"),o=+t.attr("data-origin-y"),r=+e.attr("data-origin-x"),i=+t.attr("data-tick"),c=i%a,d=Math.floor(i/a),g=s+c*l,p=o+d*l,u=r+i%a*l,y=(i+1)%(a*a);mo.selectAll(`rect.mask-${c}-${d}`).transition("window-sliding-mask").delay(300).duration(300).style("opacity",0),t.attr("data-tick",y).transition("window-sliding-input").delay(200).duration(200).attr("transform",`translate(${g}, ${p})`),e.attr("data-tick",y).transition("window-sliding-result").delay(200).duration(200).attr("transform",`translate(${u}, ${p})`).on("end",()=>{Lo&&n()})};n()},Co=t=>{null!==d3.event&&d3.event.stopPropagation();let e=so/(3*co),a=3*co;if(ho){Et.set(!0),mo.selectAll(".kernel-clone").transition().duration(300).style("opacity",1),mo.selectAll("rect.mask-overlay").transition().duration(300).style("opacity",1);for(let l=0;l<bo[t-1].length;l++)Eo(d3.select(".kernel-input-"+l),d3.select(".kernel-result-"+l),e,a);Ro(d3.select(".kernel-output"),e,a,200,t),mo.selectAll("path.flow-edge").attr("stroke-dasharray","4 2").attr("stroke-dashoffset",0).each((t,e,a)=>So(t,e,a,-1e3)),mo.select(".animation-control-button").attr("xlink:href","/copycat-cnn-explainer/assets/img/fast_forward.svg"),ho=!1}else{Et.set(!1),mo.selectAll("rect.mask-overlay").transition("skip").duration(600).style("opacity",0),mo.selectAll(".kernel-clone").attr("data-tick",0).transition("skip").duration(300).style("opacity",0).on("end",(t,e,a)=>{let l=d3.select(a[e]),n=+l.attr("data-origin-x"),s=+l.attr("data-origin-y");l.attr("transform",`translate(${n}, ${s})`)}),mo.selectAll("path.flow-edge").interrupt().attr("stroke-dasharray","0 0"),mo.select(".animation-control-button").attr("xlink:href","/copycat-cnn-explainer/assets/img/redo.svg"),ho=!0}},So=(t,e,a,l)=>{d3.select(a[e]).transition().duration(6e4).ease(d3.easeLinear).attr("stroke-dashoffset",l).on("end",(t,e,a)=>{Lo&&So(t,e,a,l-2e3)})},No=(t,e,a,l,n,s,o,r,i,c)=>{let d=mo.append("g").attr("class","copycat-intermediate-layer").style("opacity",0);ho=!1;let g=e+so+n,p=g+so+1.5*n,u=ko[$o][t],y=no[s.type],h=[],m=[],f=s.inputLinks.map(t=>vs(t.weight)).reduce((t,e)=>[Math.min(t[0],e[0]),Math.max(t[1],e[1])]),x=Math.round(1e3*Math.max(...f.map(Math.abs)))/1e3*2,v=3*co,b=bo[t][o].y,$=mo.select(`#layer-${t}-node-${o}`),k=$.append("g").attr("class","overlay-group").attr("transform",`translate(${a}, ${b})`),w=Math.floor(so/v);for(let t=0;t<w;t++)for(let e=0;e<w;e++)k.append("rect").attr("class",`mask-overlay mask-${t}-${e}`).attr("width",v).attr("height",v).attr("x",t*v).attr("y",e*v).style("fill","var(--light-gray)").style("stroke","var(--light-gray)").style("opacity",1);

1$.select("rect.bounding").raise();let I=d.append("g").attr("class","kernel kernel-output kernel-clone").attr("transform",`translate(${a}, ${b})`);I.append("rect").attr("x",0).attr("y",0).attr("width",3*co).attr("height",3*co).attr("fill","none").attr("stroke",io),I.attr("data-tick",0).attr("data-origin-x",a).attr("data-origin-y",b);let L=so/(3*co);Ro(I,L,v,200,t),bo[t-1].forEach((a,l)=>{let n=vo[t-1][l].output,f=vo[t][o].inputLinks[l].weight,b=bn(n,f);h.push(vs(b)),((t,e,a,l,n)=>{let s=l,o=document.createElement("canvas"),r=o.getContext("2d");o.width=s,o.height=s;let i=r.getImageData(0,0,s,s),c=i.data;for(let t=0;t<c.length;t+=4){let l=Math.floor(t/4),o=Math.floor(l/s),r=l%s,i=d3.rgb(a((n[o][r]+e/2)/e));c[t]=i.r,c[t+1]=i.g,c[t+2]=i.b,c[t+3]=255}let d=document.createElement("canvas");d.width=3*so,d.height=3*so;let g=d.getContext("2d");r.putImageData(i,0,0),g.drawImage(o,0,0,s,s,0,0,3*so,3*so);let p=d.toDataURL();t.attr("xlink:href",p),o.remove(),d.remove()})(((t,e,a,l,n,s,o,r,i,c,d)=>{let g=a.append("g").datum(vo[t-1][s]).attr("class","intermediate-node").attr("cursor",d?"pointer":"default").attr("pointer-events",d?"all":"none").attr("node-index",s).on("mouseover",r).on("mouseleave",i).on("click",(a,l,n)=>c(a,l,n,e,t));g.append("image").attr("width",so).attr("height",so).attr("x",l).attr("y",n);let p=Math.floor(so/o),u=g.append("g").attr("class","overlay-group").attr("transform",`translate(${l}, ${n})`);for(let t=0;t<p;t++)for(let e=0;e<p;e++)u.append("rect").attr("class",`mask-overlay mask-${t}-${e}`).attr("width",o).attr("height",o).attr("x",t*o).attr("y",e*o).style("fill","var(--light-gray)").style("stroke","var(--light-gray)").style("opacity",1);return g.append("rect").attr("class","bounding").attr("width",so).attr("height",so).attr("x",l).attr("y",n).style("fill","none").style("stroke",io).style("stroke-width",1),g})(t,o,d,g,a.y,l,v,r,i,c,!0).select("image"),u,y,s.output.length,b),m.push({source:bs({x:e,y:a.y}),target:$s({x:g,y:a.y}),name:`input-${l}-inter1-${l}`}),m.push({source:bs({x:g,y:a.y}),target:$s({x:p,y:bo[t][o].y}),name:`inter1-${l}-inter2-1`});let $=e-3*co*2,k=d.append("g").attr("class","kernel kernel-"+l).attr("transform",`translate(${$}, ${a.y})`),w="Kernel weights: [",I=d3.format(".2f");for(let t=0;t<f.length;t++)for(let e=0;e<f[0].length;e++){k.append("rect").attr("class","kernel").attr("x",co*e).attr("y",co*t).attr("width",co).attr("height",co).attr("fill",ks(no.weight,x,f[t][e],.2));let a="";a=0===e&&0==t?"":0===e?"; ":", ",w=w.concat(a,""+I(f[t][e]))}w=w.concat("]"),k.append("rect").attr("x",0).attr("y",0).attr("width",3*co).attr("height",3*co).attr("fill","none").attr("stroke",io),k.style("pointer-events","all").style("cursor","crosshair").on("mouseover",()=>{_t.set({show:!0,text:w})}).on("mouseleave",()=>{_t.set({show:!1,text:w})}).on("click",()=>{d3.event.stopPropagation()});let M=k.clone(!0).style("pointer-events","none").style("cursor","pointer").classed("kernel-clone",!0).classed("kernel-input-"+l,!0);M.style("opacity",.9).selectAll("rect.kernel").style("opacity",.7),M.attr("transform",`translate(${e}, ${a.y})`).attr("data-tick",0).attr("data-origin-x",e).attr("data-origin-y",a.y);let A=k.clone(!0).style("pointer-events","none").style("cursor","pointer").classed("kernel-clone",!0).classed("kernel-result-"+l,!0);A.style("opacity",.9).selectAll("rect.kernel").style("fill","none"),A.attr("transform",`translate(${g}, ${a.y})`).attr("data-origin-x",g).attr("data-origin-y",a.y),Eo(M,A,L,v)});let M=h.reduce((t,e)=>[Math.min(t[0],e[0]),Math.max(t[1],e[1])]),A={min:M[0],max:M[1]},R=bo[t][o].y+so/2,E=d.append("g").attr("class","plus-symbol").attr("transform",`translate(${p+oo}, ${R})`);E.append("rect").attr("x",-oo).attr("y",-oo).attr("width",2*oo).attr("height",2*oo).attr("rx",3).attr("ry",3).style("fill","none").style("stroke",io),E.append("rect").attr("x",-(oo-3)).attr("y",-.5).attr("width",2*(oo-3)).attr("height",1).style("fill",io),E.append("rect").attr("x",-.5).attr("y",-(oo-3)).attr("width",1).attr("height",2*(oo-3)).style("fill",io),0==o?(E.append("circle").attr("cx",0).attr("cy",so/2+co).attr("r",4).style("stroke",io).style("cursor","crosshair").style("fill",ks(no.weight,x,s.bias,.2)).on("mouseover",()=>{_t.set({show:!0,text:"Bias: "+yo(s.bias)})}).on("mouseleave",()=>{_t.set({show:!1,text:"Bias: "+yo(s.bias)})}),m.push({source:{x:p+oo,y:bo[t][o].y+so},target:{x:p+oo,y:bo[t][o].y+so/2+oo},name:"bias-plus"})):(E.append("circle").attr("cx",0).attr("cy",-so/2-co).attr("r",4).style("stroke",io).style("cursor","crosshair").style("fill",ks(no.weight,x,s.bias,.2)).on("mouseover",()=>{_t.set({show:!0,text:"Bias: "+yo(s.bias)})}).on("mouseleave",()=>{_t.set({show:!1,text:"Bias: "+yo(s.bias)})}),m.push({source:{x:p+oo,y:bo[t][o].y},target:{x:p+oo,y:bo[t][o].y+so/2-oo},name:"bias-plus"})),m.push({source:bs({x:p+2*oo-so,y:bo[t][o].y}),target:$s({x:a,y:bo[t][o].y}),name:"symbol-output"}),m.push({source:bs({x:a,y:bo[t][o].y}),target:$s({x:l,y:bo[t][o].y}),name:"output-next"}),d.append("g").attr("class","layer-intermediate-label layer-label").attr("transform",()=>`translate(${g+so/2}, ${(go.top+fo)/2+5})`).classed("hidden",Mo).append("text").style("text-anchor","middle").style("dominant-baseline","middle").style("font-weight",800).style("opacity","0.8").text("intermediate"),d.append("g").attr("class","animation-control").attr("transform",()=>`translate(${g+so/2}, ${(go.top+fo)/2-4})`).on("click",()=>Co(t)).append("image").attr("class","animation-control-button").attr("xlink:href","/copycat-cnn-explainer/assets/img/fast_forward.svg").attr("x",50).attr("y",0).attr("height",13).attr("width",13),d.append("g").attr("class","layer-intermediate-label layer-detailed-label").attr("transform",()=>`translate(${g+so/2}, ${(go.top+fo)/2-5})`).classed("hidden",!Mo).append("text").style("text-anchor","middle").style("dominant-baseline","middle").style("opacity","0.7").style("font-weight",800).append("tspan").text("intermediate").append("tspan").style("font-size","8px").style("font-weight","normal").attr("x",0).attr("dy","1.5em").text(`(${vo[t][0].output.length},\n      ${vo[t][0].output[0].length},\n      ${vo[t].length})`);let C=d3.linkHorizontal().x(t=>t.x).y(t=>t.y),S=d.append("g").attr("class","edge-group").lower();return S.selectAll("path").data(m).enter().append("path").classed("flow-edge",t=>"output-next"!==t.name).attr("id",t=>"edge-"+t.name).attr("d",t=>C({source:t.source,target:t.target})).style("fill","none").style("stroke-width",1).style("stroke",io),S.select("#edge-output-next").style("opacity",.1),S.selectAll("path.flow-edge").attr("stroke-dasharray","4 2").attr("stroke-dashoffset",0).each((t,e,a)=>So(t,e,a,-1e3)),{intermediateLayer:d,intermediateMinMax:A,kernelRange:x,kernelMinMax:{min:f[0],max:f[1]}}},_o=t=>{let e,a,l,n,s,o,r,i,c,d,g,p,u=t.leftX,y=t.curLayerIndex,h=t.group,m=t.intermediateGap,f=t.isFirstConv,x=t.i,v=h.append("g").attr("class","kernel-annotation");v.append("text").text("Kernel").attr("class","annotation-text").attr("x",u-2.5*co*3).attr("y",bo[y-1][0].y+3*co).style("dominant-baseline","baseline").style("text-anchor","end"),f?(e=u,a=bo[y-1][0].y+so+3*co,l=u-5,n=bo[y-1][0].y+so+3*co+5,s=20,o=u,r=bo[y-1][1].y+so+3*co,i=u-3*co,c=bo[y-1][1].y+so+15,g=u-13,p=bo[y-1][1].y+15,d=35):(e=u-3*co*3,a=bo[y-1][0].y+so/3,l=u-2*co*3-5,n=bo[y-1][0].y+so-10,s=50,o=u-3*co*3,r=bo[y-1][2].y-3,g=u-3*co-4,p=bo[y-1][2].y+3*co+6,i=u-3*co-13,c=bo[y-1][2].y+26,d=20);let b=v.append("text").attr("x",e).attr("y",a).attr("class","annotation-text").style("dominant-baseline","hanging").style("text-anchor",f?"start":"end");b.append("tspan").style("dominant-baseline","hanging").text("Slide kernel over input channel"),b.append("tspan").attr("x",e).attr("dy","1em").style("dominant-baseline","hanging").text("to get intermediate result"),b.append("tspan").attr("x",e).attr("dy","1.2em").style("dominant-baseline","hanging").style("font-weight",700).text("Click "),b.append("tspan").style("dominant-baseline","hanging").style("font-weight",400).text("to learn more"),lo({group:h,tx:u-7,ty:bo[y-1][0].y+so/2,sx:l,sy:n,hFlip:!f,dr:s,marker:"marker"});let $=v.append("text").attr("x",o).attr("y",r).attr("class","annotation-text").style("dominant-baseline","hanging").style("text-anchor",f?"start":"end");$.append("tspan").style("dominant-baseline","hanging").text("Each input chanel"),$.append("tspan").attr("x",e).attr("dy","1em").style("dominant-baseline","hanging").text("gets a different kernel"),$.append("tspan").attr("x",e).attr("dy","1.3em").style("font-weight",700).style("dominant-baseline","hanging").text("Hover over "),$.append("tspan").style("font-weight",400).style("dominant-baseline","hanging").text("to see value!"),lo({group:h,tx:g,ty:p,sx:i,sy:c,dr:d,hFlip:!f,marker:"marker"});let k=h.append("g").attr("class","plus-annotation"),w=u+2*so+2.5*m,I=w,L=bo[y][x].y+so+3*co;0===x&&(I+=30),9===x&&(I=w+oo-10,L-=2.5*so);let M=k.append("text").attr("x",I).attr("y",L).attr("class","annotation-text").style("dominant-baseline","hanging").style("text-anchor","start");M.append("tspan").style("dominant-baseline","hanging").text("Add up all intermediate"),M.append("tspan").attr("x",I).attr("dy","1em").style("dominant-baseline","hanging").text("results and then add bias"),lo(9===x?{group:h,sx:w+50,sy:bo[y][x].y-(so/2+2*co),tx:w+2*oo+5,ty:bo[y][x].y+so/2-oo,dr:50,hFlip:!1,marker:"marker-alt"}:{group:h,sx:w+35,sy:bo[y][x].y+so+2*co,tx:w+2*oo+5,ty:bo[y][x].y+so/2+oo,dr:30,hFlip:!0,marker:"marker-alt"});let A=bo[y][x].y;0===x?A+=so+3*co:A-=2*co+5,k.append("text").attr("class","annotation-text").attr("x",w+oo).attr("y",A).style("text-anchor","middle").style("dominant-baseline",0===x?"hanging":"baseline").text("Bias")},Ho=(t,e,a,l,n,s,o,r)=>{let i=mo.select("g.underneath");for(let c=0;c<vo[t-1].length;c++)i.append("rect").attr("class","underneath-gateway").attr("id","underneath-gateway-"+c).attr("x",a-n).attr("y",bo[t-1][c].y-n).attr("width",2*so+l+2*n).attr("height",so+2*n).attr("rx",10).style("fill","rgba(160, 160, 160, 0.2)").style("opacity",0),mo.select(`g#layer-${t-1}-node-${c}`).style("pointer-events","all").style("cursor","pointer").on("mouseover",s).on("mouseleave",o).on("click",(a,l,n)=>r(a,l,n,e,t));i.lower()},Oo=(t,e,a,l,n)=>{mo.select(".copycat-intermediate-layer-overlay").empty()&&mo.append("g").attr("class","copycat-intermediate-layer-overlay"),mo.select(".copycat-intermediate-layer-overlay").append("rect").attr("class","overlay").style("fill",`url(#${t})`).style("stroke","none").attr("width",l).attr("height",n).attr("x",e).attr("y",a).style("opacity",0).transition("move").duration(800).ease(d3.easeCubicInOut).style("opacity",1)},To=(t,e)=>{let a=ko[$o][t-1],l=ko[$o][t],n=Math.max(a,l);a>l?(mo.select(`g#layer-${t}-node-${e}`).select("image.node-image").each((t,e,a)=>Gs(t,e,a,n)),Io=[t,e],At.set(Io)):a<l&&(mo.select("g#cnn-layer-group-"+(t-1)).selectAll("image.node-image").each((t,e,a)=>Gs(t,e,a,n)),Io=[t-1,void 0],At.set(Io));let s=wo[t-1].min,o=wo[t-1].max,r=vo[t][e];for(let t=0;t<r.output.length;t++)for(let e=0;e<r.output[0].length;e++)r.output[t][e]<s&&(s=r.output[t][e]),r.output[t][e]>o&&(o=r.output[t][e]);return{range:n,minMax:{min:s,max:o}}},Po=Qe.layerColorScales,Xo=Qe.nodeLength,zo=Qe.plusSymbolRadius,Fo=Qe.intermediateColor,Bo=Qe.kernelRectLength,Go=Qe.svgPaddings,jo=Qe.gapRatio,qo=Qe.classLists,Vo=d3.format(".4f");let Do=void 0;bt.subscribe(t=>{Do=t});let Wo=void 0;$t.subscribe(t=>{Wo=t});let Yo=void 0;kt.subscribe(t=>{Yo=t});let Ko=void 0;vt.subscribe(t=>{Ko=t});let Uo=void 0;wt.subscribe(t=>{Uo=t});let Jo=void 0;It.subscribe(t=>{Jo=t});let Qo=void 0;Lt.subscribe(t=>{Qo=t});let Zo=void 0;Mt.subscribe(t=>{Zo=t});let tr=void 0;Ct.subscribe(t=>{tr=t});let er=void 0;Nt.subscribe(t=>{er=t});let ar=void 0;St.subscribe(t=>{ar=t});let lr=void 0;_t.subscribe(t=>{lr=t});let nr=void 0;Rt.subscribe(t=>{nr=t});let sr=10,or=11,rr=!1,ir=[],cr={};const dr=(t,e,a,l,n,s)=>{let o=d3.select(a[e]);if(s){let t=+o.attr("data-preX"),e=+o.attr("data-preY");o.transition("softmax").duration(n).ease(d3.easeCubicInOut).attr("transform",`translate(${t}, ${e})`)}else{let t=o.attr("transform"),e=+t.replace(/.*\(([\d\.]+),.*/,"$1"),a=+t.replace(/.*,\s([\d\.]+)\)/,"$1");o.transition("softmax").duration(n).ease(d3.easeCubicInOut).attr("transform",`translate(${e-l}, ${a})`),o.attr("data-preX",e),o.attr("data-preY",a)}},gr=t=>{_t.set({show:!0,text:"Logit: "+Vo(ir[t])}),ar.highlightI=t,St.set(ar);let e=Do.select(".logit-layer"),a=Do.select(".underneath"),l=Do.select(".copycat-intermediate-layer");e.select("#logit-circle-"+t).style("stroke-width",2),l.select("#plus-symbol-clone-"+t).style("opacity",1).select("circle").style("fill",t=>t.fill),a.select("#logit-lower-"+t).raise(),a.selectAll(".softmax-abstract-edge-"+t).style("stroke-width",.8).style("stroke","#E0E0E0"),a.selectAll(".softmax-edge-"+t).style("stroke-width",1).style("stroke","#E0E0E0"),a.selectAll(".logit-output-edge-"+t).style("stroke-width",3).style("stroke","#E0E0E0"),e.selectAll(".logit-output-edge-"+t).style("stroke-width",3).style("stroke","#E0E0E0")},pr=t=>{_t.set({show:!1,text:"Logit: "+Vo(ir[t])}),ar.highlightI=-1,St.set(ar);let e=Do.select(".logit-layer"),a=Do.select(".underneath"),l=Do.select(".copycat-intermediate-layer");e.select("#logit-circle-"+t).style("stroke-width",1),l.select("#plus-symbol-clone-"+t).style("opacity",.2),a.selectAll(".softmax-abstract-edge-"+t).style("stroke-width",.2).style("stroke","#EDEDED"),a.selectAll(".softmax-edge-"+t).style("stroke-width",.2).style("stroke","#F1F1F1"),a.selectAll(".logit-output-edge-"+t).style("stroke-width",1.2).style("stroke","#E5E5E5"),e.selectAll(".logit-output-edge-"+t).style("stroke-width",1.2).style("stroke","#E5E5E5")},ur=t=>{gr(t.detail.curI)},yr=t=>{pr(t.detail.curI)},hr=t=>{let e=t.curLayerIndex,a=t.moveX,l=t.symbolX,n=t.symbolY,s=t.outputX,o=t.outputY,r=t.softmaxLeftMid,i=t.selectedI,c=t.intermediateX1,d=t.intermediateX2,g=t.pixelWidth,p=t.pixelHeight,u=t.topY,y=t.bottomY,h=t.middleGap,m=t.middleRectHeight,f=t.softmaxX,x=t.softmaxTextY,v=t.softmaxWidth,b=t.symbolGroup,$=t.flattenRange,k=r-4*a/5;d3.event.stopPropagation(),tr?(Nt.set(!1),Do.select(".logit-layer").remove(),Do.select(".logit-layer

1-lower").remove(),Do.selectAll(".plus-symbol-clone").remove(),Do.select(".underneath").selectAll(".logit-lower").style("opacity",0),St.set({show:!1,logits:[]})):Nt.set(!0),Do.select(".copycat-intermediate-layer-overlay").select("rect.overlay").transition("softmax").ease(d3.easeCubicInOut).duration(600).attr("transform",`translate(${tr?0:-a}, 0)`),Do.selectAll(".intermediate-copycatlegend-"+(e-1)).each((t,e,l)=>dr(0,e,l,a,600,tr)),Do.select(".copycat-intermediate-layer").select(".layer-label").each((t,e,l)=>dr(0,e,l,a,600,tr)),Do.select(".copycat-intermediate-layer").select(".layer-detailed-label").each((t,e,l)=>dr(0,e,l,a,600,tr));for(let t=e-1;t>=0;t--){let e=+Do.select("g#cnn-layer-group-"+t).select("image").attr("x");to({layerIndex:t,targetX:tr?e+a:e-a,disable:!0,delay:0,transitionName:"softmax",duration:600})}Do.select(".plus-annotation").transition("softmax").duration(600).style("opacity",tr?1:0).style("pointer-events",tr?"all":"none");let w=Do.select(".softmax-annotation").style("pointer-events",tr?"all":"none"),I=w.selectAll(".softmax-detail-annoataion").data([0]).enter().append("g").attr("class","softmax-detail-annoataion");tr&&w.selectAll(".softmax-detail-annoataion").remove(),w.select(".arrow-group").transition("softmax").duration(600).style("opacity",tr?1:0),w.select(".annotation-text").style("cursor","help").style("pointer-events","all").on("click",()=>{d3.event.stopPropagation(),document.querySelector("#article-softmax").scrollIntoView({behavior:"smooth"})}).transition("softmax").duration(600).style("opacity",tr?1:0).on("end",()=>{if(!tr){let t=f+v/2,a=x-10;0===i&&(a=x+70);let l=I.append("text").attr("x",t).attr("y",a).attr("class","annotation-text softmax-detail-text").style("dominant-baseline","baseline").style("text-anchor","middle").text("Normalize ");l.append("tspan").attr("dx",1).style("fill","#E56014").text("logits"),l.append("tspan").attr("dx",1).text(" into"),l.append("tspan").attr("x",t).attr("dy","1.1em").text("class probabilities"),lo(0===i?{group:I,sx:f+v/2-5,sy:x+44,tx:f+v/2,ty:a-12,dr:50,hFlip:!0,marker:"marker-alt"}:{group:I,sx:f+v/2-5,sy:x+4,tx:f+v/2,ty:n-zo-4,dr:50,hFlip:!0,marker:"marker-alt"}),t=k+45,a=(Go.top+Wo)/2+5;let s=k+20,o=(Go.top+Wo)/2+5;I.append("g").attr("class","layer-detailed-label").attr("transform",()=>`translate(${k}, ${(Go.top+Wo)/2-5})`).classed("hidden",!nr).append("text").style("opacity",.7).style("dominant-baseline","middle").style("font-size","12px").style("font-weight","800").append("tspan").attr("x",0).text("logit").append("tspan").attr("x",0).style("font-size","8px").style("font-weight","normal").attr("dy","1.5em").text("(10)"),I.append("text").attr("class","annotation-text").attr("x",t).attr("y",(Go.top+Wo)/2+3).style("text-anchor","start").text("Before").append("tspan").attr("x",t).attr("dy","1em").text("normalization"),lo({group:I,tx:s,ty:o,sx:t-6,sy:a+2,dr:60,hFlip:!1,marker:"marker-alt"}),I.append("text").attr("class","annotation-text").attr("x",Uo[or][0].x-35).attr("y",(Go.top+Wo)/2+3).style("text-anchor","end").text("After").append("tspan").attr("x",Uo[or][0].x-35).attr("dy","1em").text("normalization"),lo({group:I,tx:Uo[or][0].x-8,ty:o,sx:Uo[or][0].x-27,sy:a+2,dr:60,hFlip:!0,marker:"marker-alt"});for(let t=0;t<10;t++)I.append("text").attr("x",k).attr("y",Uo[e-1][t].y+Xo/2+8).attr("class","annotation-text softmax-detail-text").attr("id","logit-text-"+t).style("text-anchor","middle").style("dominant-baseline","hanging").style("opacity",0).text(""+qo[t]);let r=I.append("g").attr("class","softmax-detail-hover-annotation").style("opacity",0);t=k+50,a=Uo[e-1][0].y+Xo/2,i<3&&(a=Uo[e-1][9].y+Xo/2);let c=r.append("text").attr("x",t).attr("y",a).attr("class","annotation-text softmax-detail-text softmax-hover-text").style("text-anchor","start").style("dominant-baseline","baseline").append("tspan").style("font-weight",700).style("dominant-baseline","baseline").text("Hover over ").append("tspan").style("font-weight",400).style("dominant-baseline","baseline").text("to see");c.append("tspan").style("dominant-baseline","baseline").attr("x",t).attr("dy","1em").text("its "),c.append("tspan").style("dominant-baseline","baseline").attr("dx",1).style("fill","#E56014").text("logit"),c.append("tspan").style("dominant-baseline","baseline").attr("dx",1).text(" value"),lo({group:r,tx:k+15,ty:a,sx:t-8,sy:a+2,dr:60,hFlip:!1})}}),Do.select(".flatten-annotation").transition("softmax").duration(600).style("opacity",tr?1:0).style("pointer-events",tr?"all":"none");let L=Do.select(".flatten-layer-left");L.transition("softmax").duration(600).ease(d3.easeCubicInOut).attr("transform",`translate(${tr?0:-a}, 0)`).on("end",()=>{if(!tr){(t=>{let e=t.curLayerIndex,a=t.moveX,l=t.softmaxLeftMid,n=t.selectedI,s=t.intermediateX1,o=t.intermediateX2,r=t.pixelWidth,i=t.pixelHeight,c=t.topY,d=t.bottomY,g=t.softmaxX,p=t.middleGap,u=t.middleRectHeight,y=t.symbolGroup,h=t.symbolX,m=t.flattenRange,f

1=Do.select(".copycat-intermediate-layer").append("g").attr("class","logit-layer").raise(),x=Do.select(".copycat-intermediate-layer").select(".flatten-layer").select(".plus-symbol").clone(!0).attr("class","temp-clone-plus-symbol").attr("transform",`translate(${h-a},\n      ${Uo[e][n].y+Xo/2})`).style("pointer-events","none").remove(),v=f.append(()=>x.node());Do.select(".softmax-symbol").raise();let b=Do.select(".underneath").append("g").attr("class","logit-layer-lower").lower(),$=l-4*a/5;ir=[];for(let t=0;t<Ko[or].length;t++)ir.push(Ko[or][t].logit);let k=d3.scaleLinear().domain(d3.extent(ir)).range([.2,1]);f.append("circle").attr("class","logit-circle").attr("id","logit-circle-"+n).attr("cx",$).attr("cy",Uo[e-1][n].y+Xo/2).attr("r",8).style("fill",Po.logit(k(ir[n]))).style("cursor","crosshair").style("pointer-events","all").style("stroke",Fo).on("mouseover",()=>gr(n)).on("mouseleave",()=>pr(n)).on("click",()=>{d3.event.stopPropagation()});let w=Do.select(".copycat-intermediate-layer-annotation").select(".softmax-detail-annoataion");w.select("#logit-text-"+n).style("opacity",1),v.raise(),f.append("line").attr("class","logit-output-edge-"+n).attr("x1",o-a+2*zo).attr("x2",g).attr("y1",Uo[e-1][n].y+Xo/2).attr("y2",Uo[e-1][n].y+Xo/2).style("fill","none").style("stroke","#EAEAEA").style("stroke-width","1.2").lower();let I=[],L=Ko.flatten.length/Ko[1].length,M=[...Array(Ko[or].length).keys()].filter(t=>t!=n),A=0,R=d3.linkHorizontal().x(t=>t.x).y(t=>t.y);const E=()=>{if(!er)return void Do.select(".underneath").selectAll(".logit-lower").remove();let t=M[A],l=Do.select(".underneath").select("#logit-lower-"+t);if(l.empty()){l=Do.select(".underneath").append("g").attr("class","logit-lower").attr("id","logit-lower-"+t).style("opacity",0);for(let l=0;l<L;l+=3){[0,9].forEach(n=>{let g=l+n*L;I.push({source:{x:s+r+3-a,y:0===n?c+l*i:d+l*i},target:{x:o-a,y:Uo[e][t].y+Xo/2},index:g,weight:Ko.flatten[g].outputLinks[t].weight,color:"#F1F1F1",width:.5,opacity:1,class:"softmax-edge-"+t})})}for(let l=0;l<Ko[or].length-2;l++)I.push({source:{x:s+r+3-a,y:c+L*i+p*(l+1)+u*(l+.5)},target:{x:o-a,y:Uo[e][t].y+Xo/2},index:-1,color:"#EDEDED",width:.5,opacity:1,class:"softmax-abstract-edge-"+t});l.selectAll("path.softmax-edge-"+t).data(I).enter().append("path").attr("class",t=>t.class).attr("id",t=>"edge-"+t.name).attr("d",t=>R({source:t.source,target:t.target})).style("fill","none").style("stroke-width",t=>t.width).style("stroke",t=>void 0===t.color?Fo:t.color).style("opacity",t=>t.opacity).style("pointer-events","none")}let x=f.append("g").attr("class","logit-layer-"+t).style("opacity",0),v=y.clone(!0).style("opacity",0);v.attr("class","plus-symbol-clone").attr("id","plus-symbol-clone-"+t).select("circle").datum({fill:ks(Po.weight,m,Ko[or][t].bias,.35)}).style("pointer-events","none").style("fill","#E5E5E5"),v.attr("transform",`translate(${h},\n      ${Uo[e][t].y+Xo/2})`);let C=R({source:{x:o-a+2*zo,y:Uo[e][t].y+Xo/2},target:{x:$+8,y:Uo[e][t].y+Xo/2}}),S=R({source:{x:$+8,y:Uo[e][t].y+Xo/2},target:{x:g,y:Uo[e][n].y+Xo/2}}),N=b.append("path").attr("class","logit-output-edge-"+t).attr("d",C).style("fill","none").style("stroke","#EAEAEA").style("stroke-width","1.2"),_=b.append("path").attr("class","logit-output-edge-"+t).attr("d",S).style("fill","none").style("stroke","#EAEAEA").style("stroke-width","1.2"),H=N.node().getTotalLength(),O=_.node().getTotalLength(),T=H+O,P=rr?500:800,X=rr?400:600;N.attr("stroke-dasharray",H+" "+H).attr("stroke-dashoffset",H),_.attr("stroke-dasharray",O+" "+O).attr("stroke-dashoffset",O),N.transition("softmax-output-edge").duration(H/T*P).attr("stroke-dashoffset",0),_.transition("softmax-output-edge").delay(H/T*P).duration(O/T*P).attr("stroke-dashoffset",0),x.append("circle").attr("class","logit-circle").attr("id","logit-circle-"+t).attr("cx",$).attr("cy",Uo[e-1][t].y+Xo/2).attr("r",7).style("fill",Po.logit(k(ir[t]))).style("stroke",Fo).style("cursor","crosshair").on("mouseover",()=>gr(t)).on("mouseleave",()=>pr(t)).on("click",()=>{d3.event.stopPropagation()}),ar.startAnimation={i:t,duration:X,hasInitialized:!1},St.set(ar),x.transition("softmax-edge").duration(X).style("opacity",1),(n<3&&9==t||n>=3&&0==t)&&w.select(".softmax-detail-hover-annotation").transition("softmax-edge").duration(X).style("opacity",1),w.select("#logit-text-"+t).transition("softmax-edge").duration(X).style("opacity",1),l.transition("softmax-edge").duration(X).style("opacity",1).on("end",()=>

1{A++,A<M.length?(I=[],E()):(rr=!0,ar.hasInitialized=!0,St.set(ar))}),v.transition("softmax-edge").duration(X).style("opacity",.2)};let C=Do.select(".copycat-intermediate-layer").select(".layer-label").node(),S=((t,e)=>{if(void 0!==t){let a=e;for(;null==a.getScreenCTM&&null!=a.parentNode;)a=a.parentNode;let l=t.node().ownerSVGElement.createSVGPoint(),n=a.getScreenCTM(),s=a.getBBox().height;l.x+=0,l.y-=s/2;let o=l.matrixTransform(n);return{top:o.y,left:o.x}}})(Do,C),N=d3.select("#copycat-cnn-svg"),_=d3.select("#cnn-svg"),H=100+ +N.style("height").replace("px","")/2+ +_.style("height").replace("px","")-96;const O=document.getElementById("copycatdetailview");O.style.top=H+"px",O.style.left=S.left-490-50+"px",O.style.position="absolute",St.set({show:!0,logits:ir,logitColors:ir.map(t=>Po.logit(k(t))),selectedI:n,highlightI:-1,outputName:qo[n],outputValue:Ko[or][n].output,startAnimation:{i:-1,duration:0,hasInitialized:rr}}),E(),ao({copycatlegendHeight:5,curLayerIndex:e,range:d3.extent(ir)[1]-d3.extent(ir)[0],minMax:{min:d3.extent(ir)[0],max:d3.extent(ir)[1]},group:f,width:g-(o+2*zo-a+5),gradientAppendingName:"flatten-logit-gradient",gradientGap:.1,colorScale:Po.logit,x:o+2*zo-a+5,y:Go.top+10*Wo+Wo+10*Xo}),f.append("g").attr("class","layer-label").classed("hidden",nr).attr("transform",()=>`translate(${$}, ${(Go.top+Wo)/2+5})`).append("text").style("text-anchor","middle").style("dominant-baseline","middle").style("opacity",.8).style("font-weight",800).text("logit")})({curLayerIndex:e,moveX:a,softmaxLeftMid:r,selectedI:i,intermediateX1:c,intermediateX2:d,pixelWidth:g,pixelHeight:p,topY:u,bottomY:y,middleGap:h,middleRectHeight:m,softmaxX:f,symbolGroup:b,symbolX:l,flattenRange:$})}if(tr)L.select(".symbol-output-line").remove();else{L.select(".edge-group").append("line").attr("class","symbol-output-line").attr("x1",l).attr("y1",n).attr("x2",s+a).attr("y2",o).style("stroke-width",1.2).style("stroke","#E5E5E5").style("opacity",0).transition("softmax").delay(200).duration(400).style("opacity",1)}tr=!tr,Ct.set(tr)})};function mr(t,e,a){const l=t.slice();return l[83]=e[a],l[85]=a,l}function fr(t,e,a){const l=t.slice();return l[83]=e[a],l[85]=a,l}function xr(t){let e,a,l,s,o,r,p,y;return{c(){e=u("div"),a=u("img"),i(a.src,l="/copycat-cnn-explainer/assets/img/"+t[83].file)||v(a,"src",l),v(a,"alt","image option"),v(a,"title",s=t[83].class),v(a,"data-imagename",o=t[83].file),v(a,"class","svelte-j4os59"),v(e,"class","image-container svelte-j4os59"),v(e,"data-imagename",r=t[83].file),L(e,"inactive",t[7]!==t[83].file),L(e,"disabled",t[6])},m(l,s){d(l,e,s),c(e,a),p||(y=x(e,"click",(function(){n(t[6]?Lr:t[17])&&(t[6]?Lr:t[17]).apply(this,arguments)})),p=!0)},p(a,l){t=a,16512&l[0]&&L(e,"inactive",t[7]!==t[83].file),64&l[0]&&L(e,"disabled",t[6])},d(t){t&&g(e),p=!1,y()}}}function vr(t){let e,a,l,s,o,r,p,y,h;return{c(){e=u("div"),a=u("img"),r=m(),i(a.src,l="/copycat-cnn-explainer/assets/img/"+t[83].file)||v(a,"src",l),v(a,"alt","image option"),v(a,"title",s=t[83].class),v(a,"data-imagename",o=t[83].file),v(a,"class","svelte-j4os59"),v(e,"class","image-container svelte-j4os59"),v(e,"data-imagename",p=t[83].file),L(e,"inactive",t[7]!==t[83].file),L(e,"disabled",t[6])},m(l,s){d(l,e,s),c(e,a),c(e,r),y||(h=x(e,"click",(function(){n(t[6]?Mr:t[17])&&(t[6]?Mr:t[17]).apply(this,arguments)})),y=!0)},p(a,l){t=a,32896&l[0]&&L(e,"inactive",t[7]!==t[83].file),64&l[0]&&L(e,"disabled",t[6])},d(t){t&&g(e),y=!1,h()}}}function br(t){let e,a;return e=new ys({props:{logits:t[3].logits,logitColors:t[3].logitColors,selectedI:t[3].selectedI,highlightI:t[3].highlightI,outputName:t[3].outputName,outputValue:t[3].outputValue,startAnimation:t[3].startAnimation}}),e.$on("xClicked",t[24]),e.$on("mouseOver",ur),e.$on("mouseLeave",yr),{c(){Y(e.$$.fragment)},m(t,l){K(e,t,l),a=!0},p(t,a){const l={};8&a[0]&&(l.logits=t[3].logits),8&a[0]&&(l.logitColors=t[3].logitColors),8&a[0]&&(l.selectedI=t[3].selectedI),8&a[0]&&(l.highlightI=t[3].highlightI),8&a[0]&&(l.outputName=t[3].outputName),8&a[0]&&(l.outputValue=t[3].outputValue),8&a[0]&&(l.startAnimation=t[3].startAnimation),e.$set(l)},i(t){a||(D(e.$$.fragment,t),a=!0)},o(t){W(e.$$.fragment,t),a=!1},d(t){U(e,t)}}}function $r(t){let e,a;return e=new ds({props:{input:t[8][0].input,kernelLength:2,dataRange:t[8].colorRange,isExited:t[10]}}),e.$on("message",t[22]),{c(){Y(e.$$.fragment)},m(t,l){K(e,t,l),a=!0},p(t,a){const l={};256&a[0]&&(l.input=t[8][0].input),256&a[0]&&(l.dataRange=t[8].colorRange),1024&a[0]&&(l.isExited=t[10]),e.$set(l)},i(t){a||(D(e.$$.fragment,t),a=!0)},o(t){W(e.$$.fragment,t),a=!1},d(t){U(e,t)}}}function kr(t){let e,a;return e=new ts({props:{input:t[8][0].input,output:t[8][0].output,dataRange:t[8].colorRange,isExited:t[10]}}),e.$on("message",t[23]),{c(){Y(e.$$.fragment)},m(t,l){K(e,t,l),a=!0},p(t,a){const l={};256&a[0]&&(l.input=t[8][0].input),256&a[0]&&(l.output=t[8][0].output),256&a[0]&&(l.dataRange=t[8].colorRange),1024&a[0]&&(l.isExited=t[10]),e.$set(l)},i(t){a||(D(e.$$.fragment,t),a=!0)},o(t){W(e.$$.fragment,t),a=!1},d(t){U(e,t)}}}function wr(t){let e,a;return e=new Dn({props:{input:t[8][t[9]].input,kernel:t[8][t[9]].kernel,dataRange:t[8].colorRange,colorScale:t[8].inputIsInputLayer?t[13].input[0]:t[13].conv,isInputInputLayer:t[8].inputIsInputLayer,isExited:t[11]}}),e.$on("message",t[21]),{c(){Y(e.$$.fragment)},m(t,l){K(e,t,l),a=!0},p(t,a){const l={};768&a[0]&&(l.input=t[8][t[9]].input),768&a[0]&&(l.kernel=t[8][t[9]].kernel),256&a[0]&&(l.dataRange=t[8].colorRange),256&a[0]&&(l.colorScale=t[8].inputIsInputLayer?t[13].input[0]:t[13].conv),256&a[0]&&(l.isInputInputLayer=t[8].inputIsInputLayer),2048&a[0]&&(l.isExited=t[11]),e.$set(l)},i(t){a||(D(e.$$.fragment,t),a=!0)},o(t){W(e.$$.fragment,t),a=!1},d(t){U(e,t)}}}function Ir(t){let e,a,s,o,r,y,f,$,I,M,A,R,E,C,S,N,_,H,O,T,X,z,F,B,G,j,J,Q,Z,tt,et,at,lt,nt,st,ot,rt,it,ct,dt,gt,pt,ut,yt,ht,mt,ft,xt=t[4].text+"",vt=t[14],bt=[];for(let e=0;e<vt.length;e+=1)bt[e]=xr(fr(t,vt,e));let $t=t[15],kt=[];for(let e=0;e<$t.length;e+=1)kt[e]=vr(mr(t,$t,e));const wt=[wr,kr,$r,br],It=[];function Lt(t,e){return t[5].data&&"conv"===t[5].data.type&&-1!=t[9]?0:t[5].data&&"relu"===t[5].data.type?1:t[5].data&&"pool"===t[5].data.type?2:t[3].show?3:-1}return~(gt=Lt(t))&&(pt=It[gt]=wt[gt](t)),yt=new fs({}),yt.$on("xClicked",t[19]),yt.$on("urlTyped",t[20]),{c(){e=u("div"),a=u("div"),s=u("div"),o=u("span"),o.textContent="Copycat Model:",r=m();for(let t=0;t<bt.length;t+=1)bt[t].c();y=m(),f=u("span"),f.textContent="Out-of-Domain images:",$=m();for(let t=0;t<kt.length;t+=1)kt[t].c();I=m(),M=u("div"),A=u("img"),E=m(),C=u("span"),C.innerHTML='<i class="fas fa-circle fa-stack-2x"></i> \n              <i class="fas fa-pen fa-stack-1x fa-inverse"></i>',N=m(),_=u("button"),H=u("span"),H.innerHTML='<i class="fas fa-crosshairs "></i>',O=m(),T=u("span"),X=h(xt),z=m(),F=u("div"),B=u("button"),G=u("span"),G.innerHTML='<i class="fas fa-eye"></i>',j=m(),J=u("span"),J.textContent="Show detail",Q=m(),Z=u("div"),tt=u("span"),tt.innerHTML='<i class="fas fa-palette"></i>',et=m(),at=u("div"),lt=u("select"),nt=u("option"),nt.textContent="Unit",st=u("option"),st.textContent="Module",ot=u("option"),ot.textContent="Global",rt=m(),it=u("div"),it.innerHTML='<svg id="copycat-cnn-svg" class="svelte-j4os59"></svg>',ct=m(),dt=u("div"),pt&&pt.c(),ut=m(),Y(yt.$$.fragment),v(o,"class","model-name svelte-j4os59"),k(f,"font-size","1.1rem"),k(f,"margin-right","2px"),k(f,"font-family","'Neucha'"),v(A,"class","custom-image svelte-j4os59"),i(A.src,R="/copycat-cnn-explainer/assets/img/plus.svg")||v(A,"src","/copycat-cnn-explainer/assets/img/plus.svg"),v(A,"alt","plus button"),v(A,"t

1itle","Add new input image"),v(A,"data-imagename","custom"),v(C,"class","fa-stack edit-icon svelte-j4os59"),L(C,"hidden",null===t[12]),v(M,"class","image-container svelte-j4os59"),v(M,"data-imagename",S="custom"),L(M,"inactive","custom"!==t[7]),L(M,"disabled",t[6]),v(H,"class","icon"),k(H,"margin-right","5px"),v(T,"id","copycatcopycathover-label-text"),v(_,"class","button is-very-small is-link is-light svelte-j4os59"),v(_,"id","copycathover-label"),k(_,"opacity",t[4].show?1:0),v(s,"class","left-control svelte-j4os59"),v(G,"class","icon"),v(J,"id","copycatcopycathover-label-text"),v(B,"class","button is-very-small svelte-j4os59"),v(B,"id","copycatdetailed-button"),B.disabled=t[6],L(B,"is-activated",t[2]),v(tt,"class","icon is-left"),nt.__value="local",nt.value=nt.__value,st.__value="module",st.value=st.__value,ot.__value="global",ot.value=ot.__value,v(lt,"id","copycatlevel-select"),lt.disabled=t[6],v(lt,"class","svelte-j4os59"),void 0===t[0]&&P(()=>t[25].call(lt)),v(at,"class","select svelte-j4os59"),v(Z,"class","control is-very-small has-icons-left svelte-j4os59"),v(Z,"title","Change color scale range"),v(F,"class","right-control svelte-j4os59"),v(a,"class","control-container svelte-j4os59"),v(it,"class","cnn svelte-j4os59"),v(e,"class","overview svelte-j4os59"),v(dt,"id","copycatdetailview")},m(l,i){d(l,e,i),c(e,a),c(a,s),c(s,o),c(s,r);for(let t=0;t<bt.length;t+=1)bt[t].m(s,null);c(s,y),c(s,f),c(s,$);for(let t=0;t<kt.length;t+=1)kt[t].m(s,null);c(s,I),c(s,M),c(M,A),c(M,E),c(M,C),c(s,N),c(s,_),c(_,H),c(_,O),c(_,T),c(T,X),c(a,z),c(a,F),c(F,B),c(B,G),c(B,j),c(B,J),c(F,Q),c(F,Z),c(Z,tt),c(Z,et),c(Z,at),c(at,lt),c(lt,nt),c(lt,st),c(lt,ot),w(lt,t[0]),c(e,rt),c(e,it),t[26](e),d(l,ct,i),d(l,dt,i),~gt&&It[gt].m(dt,null),d(l,ut,i),K(yt,l,i),ht=!0,mt||(ft=[x(M,"click",(function(){n(t[6]?Ar:t[18])&&(t[6]?Ar:t[18]).apply(this,arguments)})),x(B,"click",t[16]),x(lt,"change",t[25])],mt=!0)},p(e,a){if(t=e,147648&a[0]){let e;for(vt=t[14],e=0;e<vt.length;e+=1){const l=fr(t,vt,e);bt[e]?bt[e].p(l,a):(bt[e]=xr(l),bt[e].c(),bt[e].m(s,y))}for(;e<bt.length;e+=1)bt[e].d(1);bt.length=vt.length}if(164032&a[0]){let e;for($t=t[15],e=0;e<$t.length;e+=1){const l=mr(t,$t,e);kt[e]?kt[e].p(l,a):(kt[e]=vr(l),kt[e].c(),kt[e].m(s,I))}for(;e<kt.length;e+=1)kt[e].d(1);kt.length=$t.length}(!ht||4096&a[0])&&L(C,"hidden",null===t[12]),(!ht||128&a[0])&&L(M,"inactive","custom"!==t[7]),(!ht||64&a[0])&&L(M,"disabled",t[6]),(!ht||16&a[0])&&xt!==(xt=t[4].text+"")&&b(X,xt),(!ht||16&a[0])&&k(_,"opacity",t[4].show?1:0),(!ht||64&a[0])&&(B.disabled=t[6]),(!ht||4&a[0])&&L(B,"is-activated",t[2]),(!ht||64&a[0])&&(lt.disabled=t[6]),1&a[0]&&w(lt,t[0]);let l=gt;gt=Lt(t),gt===l?~gt&&It[gt].p(t,a):(pt&&(q(),W(It[l],1,1,()=>{It[l]=null}),V()),~gt?(pt=It[gt],pt?pt.p(t,a):(pt=It[gt]=wt[gt](t),pt.c()),D(pt,1),pt.m(dt,null)):pt=null)},i(t){ht||(D(pt),D(yt.$$.fragment,t),ht=!0)},o(t){W(pt),W(yt.$$.fragment,t),ht=!1},d(a){a&&g(e),p(bt,a),p(kt,a),t[26](null),a&&g(ct),a&&g(dt),~gt&&It[gt].d(),a&&g(ut),U(yt,a),mt=!1,l(ft)}}}const Lr=()=>{},Mr=()=>{},Ar=()=>{};function Rr(t,e,a){let l,n=new Set(["local","module","global"]),s="local";It.set(s);let o=s,r=void 0,i=void 0;const c=Qe.layerColorScales,d=Qe.nodeLength,g=Qe.numLayers,p=Qe.edgeOpacity,u=Qe.edgeInitColor,y=Qe.edgeHoverColor,h=Qe.edgeStrokeWidth,m=Qe.svgPaddings,f=Qe.overlayRectOffset;let x=[void 0,void 0];At.subscribe(t=>{x=t});let v=void 0;wt.subscribe(t=>{v=t});let b=void 0;Lt.subscribe(t=>{b=t}),Mt.subscribe(t=>{});let $=void 0;Rt.subscribe(t=>{a(2,$=t)}),Et.subscribe(t=>{}),$t.subscribe(t=>{});let k=void 0;kt.subscribe(t=>{k=t});let w=void 0;Ct.subscribe(t=>{w=t});let L=void 0;St.subscribe(t=>{a(3,L=t)});let M=void 0;Ht.subscribe(t=>{M=t});let A=void 0;_t.subscribe(t=>{a(4,A=t)});let E=void 0;Ot.subscribe(t=>{E=t});let C=void 0,S=void 0,_=void 0,H={layerName:"",index:-1,data:null},O=!1,T=!1,P=-1,X=-1,z=void 0,F=!1,B=void 0;const G={input:0,conv_1_1:1,relu_1_1:2,conv_1_2:3,relu_1_2:4,max_pool_1:5,conv_2_1:6,relu_2_1:7,conv_2_2:8,relu_2_2:9,max_pool_2:10,output:11},j={0:{local:"input-copycatlegend",module:"input-copycatlegend",global:"input-copycatlegend"},1:{local:"local-copycatlegend-0-1",module:"module-copycatlegend-0",global:"global-copycatlegend"},2:{local:"local-copycatlegend-0-1",module:"module-copycatlegend-0",global:"global-copycatlegend"},3:{local:"local-copycatlegend-0-2",module:"module-copycatlegend-0",global:"global-copycatlegend"},4:{local:"local-copycatlegend-0-2",module:"module-copycatlegend-0",global:"global-copycatlegend"},5:{local:"local-copycatlegend-0-2",module:"module-copycatlegend-0",global:"global-copycatlegend"},6:{local:"local-copycatlegend-1-1",module:"module-copycatlegend-1",global:"global-copycatlegend"},7:{local:"local-copycatlegend-1-1",module:"module-copycatlegend-1",global:"global-copycatlegend"},8:{local:"local-copycatlegend-1-2",module:"module-copycatlegend-1",global:"global-copycatlegend"},9:{local:"local-copycatlegend-1-2",module:"module-copycatlegend-1",global:"global-copycatlegend"},10:{local:"local-copycatlegend-1-2",module:"module-copycatlegend-1",global:"global-copycatlegend"},11:{local:"output-copycatlegend",module:"output-copycatlegend",global:"output-copycatlegend"}};let q,V=[{file:"boat_1.jpeg",class:"lifeboat"},{file:"bug_1.jpeg",class:"ladybug"},{file:"pizza_1.jpeg",class:"pizza"},{file:"pepper_1.jpeg",class:"bell pepper"},{file:"bus_1.jpeg",class:"bus"},{file:"koala_1.jpeg",class:"koala"},{file:"espresso_1.jpeg",class:"espresso"},{file:"panda_1.jpeg",class:"red panda"},{file:"orange_1.jpeg",class:"orange"},{file:"car_1.jpeg",class:"sport car"}],D=V[6].file,W=-1,Y=!0,K=!0,U=null;const J=(t,e,a)=>{void 0===z&&i.select("rect#underneath-gateway-"+t.index).style("opacity",1)},Q=(t,e,a)=>{void 0===z&&i.select("rect#underneath-gateway-"+t.index).style("opacity",0)},Z=(t,e,l,n,o)=>

1{if(d3.event.stopPropagation(),a(11,K=!1),z===t.index)a(9,W=-1),z=void 0,i.select("rect#underneath-gateway-"+t.index).style("opacity",0);else{a(9,W=t.index);t.output,t.outputLinks[n].weight;let e=b[s][o-1],l=b[s][o],r=Math.max(e,l);void 0!==z&&(i.select("rect#underneath-gateway-"+z).style("opacity",0),i.select("rect#underneath-gateway-"+t.index).style("opacity",1));let c=d3.select("#copycat-cnn-svg"),d=d3.select("#cnn-svg"),g=+c.style("height").replace("px","")/2,p=+d.style("height").replace("px",""),u=+c.style("width").replace("px",""),y=100+g+p-125,h=E[Object.keys(G)[o]],f=0;o>6?(f=(h-m.left)/2,f=m.left+f-243):(f=(u+m.right-h)/2,f=h+f-243);const x=document.getElementById("copycatdetailview");x.style.top=y+"px",x.style.left=f+"px",x.style.position="absolute",z=t.index,a(8,q.colorRange=r,q),a(8,q.inputIsInputLayer=o<=1,q)}},tt=()=>{if(void 0!==z)a(9,W=-1),i.select("rect#underneath-gateway-"+z).style("opacity",0),z=void 0;else if(w)i.select(".softmax-symbol").dispatch("click");else if(O){let t=G[H.layerName];st(t,H.domG,H.domI),d3.select(H.domG[H.domI]).dispatch("mouseleave")}else T&&et()},et=()=>{T=!1,P=-1;let t=G[H.layerName],e=H.index;i.select(`g#layer-${t}-node-${e}`).select("rect.bounding").classed("hidden",!0),H.data.inputLinks.forEach(t=>{let e=G[t.source.layerName],a=t.source.index;i.select(`g#layer-${e}-node-${a}`).select("rect.bounding").classed("hidden",!0)}),i.select("g.underneath").selectAll("rect").remove();i.select("g.edge-group").selectAll(".edge").filter(t=>t.targetLayerIndex!==X).style("visibility",null);a(6,F=!1),i.selectAll(`.${s}-copycatlegend`).classed("hidden",!$),i.selectAll(".input-copycatlegend").classed("hidden",!$),i.selectAll(".output-copycatlegend").classed("hidden",!$),i.select("g.cnn-group").select("g.edge-group").selectAll(`path.edge-${t}-${e}`).transition().ease(d3.easeCubicOut).duration(200).style("stroke",u).style("stroke-width",h).style("opacity",p),i.selectAll("g.copycat-intermediate-layer-overlay, g.copycat-intermediate-layer-annotation").transition("remove").duration(500).ease(d3.easeCubicInOut).style("opacity",0).on("end",(t,e,a)=>{i.selectAll("g.copycat-intermediate-layer-overlay, g.copycat-intermediate-layer-annotation").remove(),i.selectAll("defs.overlay-gradient").remove(),i.select(".input-annotation").classed("hidden",!1)}),i.select("g#cnn-layer-group-"+t).selectAll("g.node-group").each((t,e,a)=>{d3.select(a[e]).style("pointer-events","all")}),i.select("g#cnn-layer-group-"+(t-1)).selectAll("g.node-group").each((t,e,a)=>{d3.select(a[e]).style("pointer-events","all").on("mouseover",rt).on("mouseleave",it).on("click",ot)}),a(5,H.layerName="",H),a(5,H.index=-1,H),a(5,H.data=null,H),X=-1},at=(t,e,a)=>{let l=G[t.layerName],n=t.index;i.select("g.cnn-group").select("g.edge-group").selectAll(`path.edge-${X}-${n}`).raise().transition().ease(d3.easeCubicInOut).duration(400).style("stroke",y).style("stroke-width","1").style("opacity",1),d3.select(a[e]).select("rect.bounding").classed("hidden",!1);let s=l-1;l===X-1&&(s=l+1),i.select(`g#layer-${s}-node-${n}`).select("rect.bounding").classed("hidden",!1)},lt=(t,e,a)=>{let l=G[t.layerName],n=t.index;i.select("g.cnn-group").select("g.edge-group").selectAll(`path.edge-${X}-${n}`).transition().ease(d3.easeCubicOut).duration(200).style("stroke",u).style("stroke-width",h).style("opacity",p),d3.select(a[e]).select("rect.bounding").classed("hidden",!0);let s=l-1;l===X-1&&(s=l+1),i.select(`g#layer-${s}-node-${n}`).select("rect.bounding").classed("hidden",!0)},nt=(t,e,a)=>{let l=G[t.layerName],n=t.index;i.select(`g#layer-${l+1}-node-${n}`).node().dispatchEvent(new Event("click"))},st=(t,e,l)=>{w&&(i.select(".logit-layer").remove(),i.select(".logit-layer-lower").remove(),i.selectAll(".plus-symbol-clone").remove(),i.select(".underneath").selectAll(".logit-lower").style("opacity",0),St.set({show:!1,logits:[]}),Nt.set(!1)),Ct.set(!1),O=!1,i.selectAll(`.${s}-copycatlegend`).classed("hidden",!$),i.selectAll(".input-copycatlegend").classed("hidden",!$),i.selectAll(".output-copycatlegend").classed("hidden",!$),a(6,F=!1);for(let e=0;e<B[t-1].length;e++)i.select(`g#layer-${t-1}-node-${e}`).on("mouseover",rt).on("mouseleave",it).on("click",ot);i.select("g.underneath").selectAll("rect").remove(),z=void 0,i.select("g#cnn-layer-group-"+(t-1)).selectAll("rect.boun

1ding").style("stroke-width",1),d3.select(e[l]).select("rect.bounding").style("stroke-width",1),i.selectAll(`g#layer-label-${t-1},\n        g#layer-detailed-label-${t-1},\n        g#layer-label-${t},\n        g#layer-detailed-label-${t}`).style("font-weight","normal"),a(5,H.layerName="",H),a(5,H.index=-1,H),a(5,H.data=null,H),a(11,K=!0);let n=i.select("g.copycat-intermediate-layer");if(Et.set(!1),n.transition("remove").duration(500).ease(d3.easeCubicInOut).style("opacity",0).on("end",(t,e,a)=>{d3.select(a[e]).remove()}),i.selectAll(".overlay-group").remove(),i.selectAll("g.copycat-intermediate-layer-overlay, g.copycat-intermediate-layer-annotation").transition("remove").duration(500).ease(d3.easeCubicInOut).style("opacity",0).on("end",(t,e,a)=>{i.selectAll("g.copycat-intermediate-layer-overlay, g.copycat-intermediate-layer-annotation").remove(),i.selectAll("defs.overlay-gradient").remove()}),void 0!==x[0]){let t=b[s][x[0]];void 0!==x[1]?i.select(`g#layer-${x[0]}-node-${x[1]}`).select("image.node-image").each((e,a,l)=>Gs(e,a,l,t)):i.select("g#cnn-layer-group-"+x[0]).selectAll("image.node-image").each((e,a,l)=>Gs(e,a,l,t))}for(let t=0;t<g;t++)to({layerIndex:t,targetX:v[t][0].x,disable:!1,delay:500,opacity:1});to({layerIndex:g-2,targetX:v[g-2][0].x,opacity:1,disable:!1,delay:500,onEndFunc:()=>{i.select("g.edge-group").style("visibility","visible"),i.select(".input-annotation").classed("hidden",!1)}})},ot=(t,e,l)=>{d3.event.stopPropagation();let n=t.index;if(a(5,H.layerName=t.layerName,H),a(5,H.index=t.index,H),a(5,H.data=t,H),a(5,H.domI=e,H),a(5,H.domG=l,H),"conv"===t.type||"relu"===t.type||"pool"===t.type){let e=[];for(let a=0;a<t.inputLinks.length;a++)e.push({input:t.inputLinks[a].source.output,kernel:t.inputLinks[a].weight,output:t.inputLinks[a].dest.output});let l=G[t.layerName];e.colorRange=b[s][l],e.isInputInputLayer=l<=1,a(8,q=e)}let o=G[t.layerName];if("relu"==t.type||"pool"==t.type)if(a(10,Y=!1),T)if(t.index===P)et();else{i.select(`g#layer-${o}-node-${P}`).select("rect.bounding").classed("hidden",!0),i.select(`g#layer-${o-1}-node-${P}`).select("rect.bounding").classed("hidden",!0);let t=i.select("g.cnn-group").select("g.edge-group");t.selectAll(`path.edge-${o}-${P}`).transition().ease(d3.easeCubicOut).duration(200).style("stroke",u).style("stroke-width",h).style("opacity",p);let e=i.select("g.underneath");e.select("#underneath-gateway-"+P).style("opacity",0),i.select(`g#layer-${o}-node-${n}`).select("rect.bounding").classed("hidden",!1),i.select(`g#layer-${o-1}-node-${n}`).select("rect.bounding").classed("hidden",!1),t.selectAll(`path.edge-${o}-${n}`).raise().transition().ease(d3.easeCubicInOut).duration(400).style("stroke",y).style("stroke-width","1").style("opacity",1),e.select("#underneath-gateway-"+n).style("opacity",1),P=n}else((t,e)=>{T=!0,P=e,X=t;let l=d3.select("#copycat-cnn-svg"),n=d3.select("#cnn-svg"),o=+l.style("height").replace("px","")/2,r=+n.style("height").replace("px",""),c=+l.style("width").replace("px",""),g=100+o+r-130,p=0;t>5?(p=v[t-1][0].x+50,p=p/2-250):(p=(c-v[t][0].x-d)/2,p=v[t][0].x+d+p-250);const u=document.getElementById("copycatdetailview");u.style.top=g+"px",u.style.left=p+"px",u.style.position="absolute";i.select("g.edge-group").selectAll(".edge").filter(e=>e.targetLayerIndex!==t).style("visibility","hidden");a(6,F=!0),i.select(".input-annotation").classed("hidden",!0),i.selectAll(`.${s}-copycatlegend`).classed("hidden",!0),i.selectAll(".input-copycatlegend").classed("hidden",!0),i.selectAll(".output-copycatlegend").classed("hidden",!0),i.select("#"+j[t][s]).classed("hidden",!1);let y=v[t-1][e].x,h=v[t][e].x+d+5,x=C-h-f/2,b=y-v[0][0].x;if(x>b){let t=[{offset:"0%",color:"rgb(250, 250, 250)",opacity:.85},{offset:"50%",color:"rgb(250, 250, 250)",opacity:.9},{offset:"100%",color:"rgb(250, 250, 250)",opacity:1}];eo("overlay-gradient-right",t),t=[{offset:"0%",color:"rgb(250, 250, 250)",opacity:.85+b/x*(.95-.85)},{offset:"100%",color:"rgb(250, 250, 250)",opacity:.85}],eo("overlay-gradient-left",t)}else{let t=[{offset:"0%",color:"rgb(250, 250, 250)",opacity:1},{offset:"50%",color:"rgb(250, 250, 250)",opacity:.9},{offset:"100%",color:"rgb(250, 250, 250)",opacity:.85}];eo("overlay-gradient-left",t),t=[{offset:"0%",color:"rgb(250, 250, 250)",opacity:.85},{offset:"100%",color:"rgb(250, 250, 250)",opacity:.85+x/b*(.95-.85)}],eo("overlay-gradient-right",t)}Oo("overlay-gradient-right",h+f/2+.5,0,x,S+m.top),Oo("overlay-gradient-left",v[0][0].x-f/2,0,b,S+m.top),i.selectAll("rect.overlay").on("click",tt);let $=i.select("g.underneath");for(let e=0;e<B[t-1].length;e++)$.append("rect").attr("class","underneath-gateway").attr("id","underneath-gateway-"+e).attr("x",v[t-1][e].x-7).attr("y",v[t-1][e].y-7).attr("width",2*d+k+14).attr("height",d+14).attr("rx",10).style("fill","rgba(160, 160, 160, 0.3)").style("opacity",0),i.select(`g#layer-${t-1}-node-${e}`).style("pointer-events","all").style("cursor","pointer").on("mouseover",at).on("mouseleave",lt).on("click",nt);$.lower(),$.select("#underneath-gateway-"+e).style("opacity",1)})(o,t.index);"conv"!==t.type&&"output"!==t.layerName||O?"conv"!==t.type&&"output"!==t.layerName||!O||st(o,l,e):(((t,e,l,n)=>{O=!0,i.selectAll(`.${s}-copycatlegend`).classed("hidden",!0),i.selectAll(".input-copycatlegend").classed("hidden",!0),i.selectAll(".output-copycatlegend").classed("hidden",!0),i.select(".input-annotation").classed("hidden",!0),i.select("g#cnn-layer-group-"+(n-1)).selectAll("rect.boun

1ding").style("stroke-width",2),d3.select(e[l]).select("rect.bounding").style("stroke-width",2),a(6,F=!0),Et.set(!0),i.selectAll(`g#layer-label-${n-1},\n        g#layer-detailed-label-${n-1},\n        g#layer-label-${n},\n        g#layer-detailed-label-${n}`).style("font-weight","800"),d3.select("#copycat-cnn-svg").on("click",tt)})(0,l,n,o),"conv_1_1"===t.layerName?((t,e,a,l,n,s,o,r)=>{let i=bo[t-1][0].x+2*so+2*xo*po+2*oo,c=xo*po*2/3,d=bo[t-1][0].x;Ao.conv_1_1=i+so,Ot.set(Ao),mo.select("g.edge-group").style("visibility","hidden"),to({layerIndex:t,targetX:i,disable:!0,delay:0,opacity:.15,specialIndex:a});let g=i+so+xo*po,p=(l-g-10*so)/10;for(let e=t+1;e<ro;e++){to({layerIndex:e,targetX:g+(e-(t+1))*(so+p),disable:!0,delay:0})}eo("overlay-gradient",[{offset:"0%",color:"rgb(250, 250, 250)",opacity:.85},{offset:"50%",color:"rgb(250, 250, 250)",opacity:.95},{offset:"100%",color:"rgb(250, 250, 250)",opacity:1}]),Oo("overlay-gradient",g-uo/2,0,l-g+uo,n+go.top+go.bottom);let{intermediateLayer:u,intermediateMinMax:y,kernelRange:h,kernelMinMax:m}=No(t,d,i,g,c,e,a,s,o,r);Ho(t,a,d,c,8,s,o,r);let f=1/0,x=-1/0,v=vo[t][a];for(let t=0;t<v.output.length;t++)for(let e=0;e<v.output[0].length;e++)v.output[t][e]<f&&(f=v.output[t][e]),v.output[t][e]>x&&(x=v.output[t][e]);let b={min:Math.min(f,y.min),max:Math.max(x,y.max)},$=mo.append("g").attr("class","copycat-intermediate-layer-annotation").style("opacity",0);_o({leftX:d,curLayerIndex:t,group:$,intermediateGap:c,isFirstConv:!0,i:a});let k=ko.local[t];ao({copycatlegendHeight:5,curLayerIndex:t,range:1,group:u,width:2*so+c,isInput:!0,x:d,y:go.top+10*fo+fo+10*so-25}),ao({copycatlegendHeight:5,curLayerIndex:t,range:k,minMax:b,group:u,width:2*so+c,x:bo[t-1][2].x,y:go.top+10*fo+fo+10*so}),ao({copycatlegendHeight:5,curLayerIndex:t,range:h,minMax:m,group:u,width:2*so+c,x:i+so-(2*so+c),y:go.top+10*fo+fo+10*so,gradientAppendingName:"kernelColorGradient",colorScale:no.weight,gradientGap:.2}),mo.selectAll("g.copycat-intermediate-layer, g.copycat-intermediate-layer-annotation").transition().delay(500).duration(500).ease(d3.easeCubicInOut).style("opacity",1)})(o,t,n,C,S,J,Q,Z):"conv_1_2"===t.layerName?((t,e,a,l,n,s,o,r)=>{let i=bo[t-1][0].x+2*so+2*xo*po+2*oo,c=xo*po*2/3;Ao.conv_1_2=i+so,Ot.set(Ao);let{range:d,minMax:g}=To(t,a);mo.select("g.edge-group").style("visibility","hidden"),to({layerIndex:t,targetX:i,disable:!0,delay:0,opacity:.15,specialIndex:a});let p=i+so+xo*po,u=(l-p-8*so)/8;for(let e=t+1;e<ro;e++){to({layerIndex:e,targetX:p+(e-(t+1))*(so+u),disable:!0,delay:0})}let y=[{offset:"0%",color:"rgb(250, 250, 250)",opacity:.85},{offset:"50%",color:"rgb(250, 250, 250)",opacity:.95},{offset:"100%",color:"rgb(250, 250, 250)",opacity:1}];eo("overlay-gradient-right",y),y=[{offset:"0%",color:"rgb(250, 250, 250)",opacity:.85+(.95-.85)*((2*so+xo*po)/(8*so+7*c))},{offset:"100%",color:"rgb(250, 250, 250)",opacity:.85}],eo("overlay-gradient-left",y),Oo("overlay-gradient-right",p-uo/2,0,l-p+uo,n+go.top+go.bottom),Oo("overlay-gradient-left",bo[0][0].x-uo/2,0,2*so+xo*po+uo,n+go.top+go.bottom);let h=bo[t-1][0].x,{intermediateLayer:m,intermediateMinMax:f,kernelRange:x,kernelMinMax:v}=No(t,h,i,p,c,e,a,s,o,r);Ho(t,a,h,c,5,s,o,r);let b={min:Math.min(g.min,f.min),max:Math.max(g.max,f.max)},$=mo.append("g").attr("class","copycat-intermediate-layer-annotation").style("opacity",0);_o({leftX:h,curLayerIndex:t,group:$,intermediateGap:c,i:a}),ao({copycatlegendHeight:5,curLayerIndex:t,range:d,minMax:b,group:m,width:2*so+c,x:h,y:go.top+10*fo+fo+10*so}),ao({copycatlegendHeight:5,curLayerIndex:t,range:x,minMax:v,group:m,width:2*so+c,x:i+so-(2*so+c),y:go.top+10*fo+fo+10*so,gradientAppendingName:"kernelColorGradient",colorScale:no.weight,gradientGap:.2}),mo.selectAll("g.copycat-intermediate-layer, g.copycat-intermediate-layer-annotation").transition().delay(500).duration(500).ease(d3.easeCubicInOut).style("opacity",1)})(o,t,n,C,S,J,Q,Z):"conv_2_1"===t.layerName?((t,e,a,l,n,s,o,r)=>{let i=bo[t][0].x,c=i-(2*so+2*xo*po+2*oo),d=xo*po*2/3;Ao.conv_2_1=i+so,Ot.set(Ao),mo.select("g.edge-group").style("visibility","hidden");let{range:g,minMax:p}=To(t,a);to({layerIndex:t-1,targetX:c,disable:!0,delay:0}),to({layerIndex:t,targetX:i,disable:!0,delay:0,opacity:.15,specialIndex:a});let u=c-xo,y=(u-bo[0][0].x-5*so)/5,h=bo[t][0].x+so+xo;for(let e=0;e<t-1;e++){let t=bo[0][0].x+e*(so+y);to({layerIndex:e,targetX:t,disable:!0,delay:0})}let m=[{offset:"0%",color:"rgb(250, 250, 250)",opacity:1},{offset:"50%",color:"rgb(250, 250, 250)",opacity:.9},{offset:"100%",color:"rgb(250, 250, 250)",opacity:.85}];eo("overlay-gradient-left",m),m=[{offset:"0%",color:"rgb(250, 250, 250)",opacity:.85},{offset:"50%",color:"rgb(250, 250, 250)",opacity:.95},{offset:"100%",color:"rgb(250, 250, 250)",opacity:1}],eo("overlay-gradient-right",m),Oo("overlay-gradient-left",bo[0][0].x-uo/2,0,u-bo[0][0].x+uo,n+go.top+go.bottom),Oo("overlay-gradient-right",h-uo/2,0,l-h+uo,n+go.top+go.bottom);let{intermediateLayer:f,intermediateMinMax:x,kernelRange:v,kernelMinMax:b}=No(t,c,bo[t][0].x,h,d,e,a,s,o,r);Ho(t,a,c,d,5,s,o,r);let $={min:Math.min(p.min,x.min),max:Math.max(p.max,x.max)},k=mo.append("g").attr("class","copycat-intermediate-layer-annotation").style("opacity",0);_o({leftX:c,curLayerIndex:t,group:k,intermediateGap:d,i:a}),ao({copycatlegendHeight:5,curLayerIndex:t,range:g,group:f,width:2*so+d,minMax:$,x:c,y:go.top+10*fo+fo+10*so}),ao({copycatlegendHeight:5,curLayerIndex:t,range:v,minMax:b,group:f,width:2*so+d,x:i+so-(2*so+d),y:go.top+10*fo+fo+10*so,gradientAppendingName:"kernelColorGradient",colorScale:no.weight,gradientGap:.2}),mo.selectAll("g.copycat-intermediate-layer, g.copycat-intermediate-layer-annotation").transition().delay(500).duration(500).ease(d3.easeCubicInOut).style("opacity",1)})(o,t,n,C,S,J,Q,Z):"conv_2_2"===t.layerName?((t,e,a,l,n,s,o,r)=>{let i=bo[t][0].x,c=i-(2*so+2*xo*po+2*oo),d=xo*po*2/3;Ao.conv_2_2=c,Ot.set(Ao),mo.select("g.edge-group").style("visibility","hidden");let{range:g,minMax:p}=To(t,a);to({layerIndex:t-1,targetX:c,disable:!0,delay:0}),to({layerIndex:t,targetX:i,disable:!0,delay:0,opacity:.15,specialIndex:a});let u=c-xo,y=(u-bo[0][0].x-7*so)/7,h=i+so+xo;for(let e=0;e<t-1;e++){let t=bo[0][0].x+e*(so+y);to({layerIndex:e,targetX:t,disable:!0,delay:0})}let m=[{offset:"0%",color:"rgb(250, 250, 250)",opacity:1},{offset:"50%",color:"rgb(250, 250, 250)",opacity:.95},{offset:"100%",color:"rgb(250, 250, 250)",opacity:.85}];eo("overlay-gradient-left",m),m=[{offset:"0%",color:"rgb(250, 250, 250)",opacity:.85},{offset:"50%",color:"rgb(250, 250, 250)",opacity:.95},{offset:"100%",color:"rgb(250, 250, 250)",opacity:1}],eo("overlay-gradient-right",m),Oo("overlay-gradient-left",bo[0][0].x-uo/2,0,u-bo[0][0].x+uo,n+go.top+go.bottom),Oo("overlay-gradient-right",h-uo/2,0,l-h+uo,n+go.top+go.bottom);let{intermediateLayer:f,intermediateMinMax:x,kernelRange:v,kernelMinMax:b}=No(t,c,bo[t][0].x,h,d,e,a,s,o,r);Ho(t,a,c,d,5,s,o,r);let $={min:Math.min(p.min,x.min),max:Math.max(p.max,x.max)},k=mo.append("g").attr("class","copycat-intermediate-layer-annotation").style("opacity",0);_o({leftX:c,curLayerIndex:t,group:k,intermediateGap:d,i:a}),ao({copycatlegendHeight:5,curLayerIndex:t,range:g,group:f,minMax:$,width:2*so+d,x:c,y:go.top+10*fo+fo+10*so}),ao({copycatlegendHeight:5,curLayerIndex:t,range:v,minMax:b,group:f,width:2*so+d,x:i+so-(2*so+d),y:go.top+10*fo+fo+10*so,gradientAppendingName:"kernelColorGradient",colorScale:no.weight,gradientGap:.2}),mo.selectAll("g.copycat-intermediate-layer, g.copycat-intermediate-layer-annotation").transition().delay(500).duration(500).ease(d3.easeCubicInOut).style("opacity",1)})(o,t,n,C,S,J,Q,Z):"output"===t.layerName&&((t,e,a,l,n)=>{Do.selectAll(".output-copycatlegend").classed("hidden",!1);let s=Xo/2,o=2*Xo+5.5*Yo*jo+s,r=Uo[t][0].x-o,i=Yo*jo*4/2;let c=d3.linkHorizontal().x(t=>t.x).y(t=>t.y);Do.select("g.edge-group").style("visibility","hidden"),to({layerIndex:t-1,targetX:r,disable:!0,delay:0}),to({layerIndex:t,targetX:Uo[t][0].x,disable:!0,delay:0,opacity:.15,specialIndex:a});let d=(r-Yo-Uo[0][0].x-10*Xo)/10;if(d>20)for(let e=0;e<t-1;e++){let t=Uo[0][0].x+e*(Xo+d);to({layerIndex:e,targetX:t,disable:!0,delay:0})}else{d=20;let e=r-2*d-Xo;for(let a=t-2;a>=0;a--)to({layerIndex:a,targetX:e,disable:!0,delay:0}),e=e-d-Xo}eo("overlay-gradient-left",[{offset:"0%",color:"rgb(250, 250, 250)",opacity:1},{offset:"50%",color:"rgb(250, 250, 250)",opacity:.95},{offset:"100%",color:"rgb(250, 250, 250)",opacity:.85}]);let g=Do.append("g").attr("class","copycat-intermediate-layer-overlay");g.append("rect").attr("class","overlay").style("fill","url(#overlay-gradient-left)").style("stroke","none").attr("width",r+Go.left-2*d+3).attr("height",n+Go.top+Go.bottom).attr("x",-Go.left).attr("y",0).style("opacity",0),g.selectAll("rect.overlay").transition("move").duration(800).ease(d3.easeCubicInOut).style("opacity",1);let p=Do.append("g").attr("class","copycat-intermediate-layer").style("opacity",0),u=r+Xo+i,y=u+i+s,h=Qo[Jo][t-1],m=Po.conv,f=Ko.flatten.length/Ko[1].length,x=[],v=p.append("g").attr("class","flatten-layer").append("g").attr("class","flatten-layer-left"),b=Uo[t-1][0].y,$=Uo[t-1][9].y+Xo-1.1*f,k=Ko[t-1][0].output.length,w=Xo/(2*k),I=Xo/k,L=d3.extent(Ko.flatten.slice(f).map(t=>t.outputLinks[a].weight).concat(Ko.flatten.slice(9*f,10*f).map(t=>t.outputLinks[a].weight))),M=Math.round(1e3*Math.max(...L.map(Math.abs)))/1e3*2,A=t=>{let e=t.index;lr=void 0===t.weight?{show:!0,text:"Pixel value: "+Vo(cr[e])}:{show:!0,text:"Weight: "+Vo(t.weight)},_t.set(lr),v.select("#edge-flatten-"+e).raise().style("stroke",Fo).style("stroke-width",1),v.select(`#edge-flatten-${e}-output`).raise().style("stroke-width",1).style("stroke",t=>ks(Po.weight,M,t.weight,.1)),v.select("#bounding-"+e).raise().style("opacity",1)},R=t=>{let e=t.index;lr=void 0===t.weight?{show:!1,text:"Pixel value: "+Vo(cr[e])}:{show:!1,text:"Weight: "+Vo(t.weight)},_t.set(lr),v.select("#edge-flatten-"+e).style("stroke-width",.6).style("stroke","#E5E5E5"),v.select(`#edge-flatten-${e}-output`).style("stroke-width",.6).style("stroke",t=>ks(Po.weight,M,t.weight,.35)),v.select("#bounding-"+e).raise().style("opacity",0)};cr={};for(let e=0;e<f;e++){[0,9].forEach(l=>{let n=e+l*f;cr[n]=Ko.flatten[n].output,v.append("rect").attr("x",u).attr("y",0===l?b+1.1*e:$+1.1*e).attr("width",s).attr("height",1.1).style("cursor","crosshair").style("fill",m((Ko.flatten[n].output+h/2)/h)).on("mouseover",()=>A({index:n})).on("mouseleave",()=>R({index:n})).on("click",()=>{d3.event.stopPropagation()}),x.push({source:{x:u+s+3,y:0===l?b+1.1*e:$+1.1*e},target:{x:y,y:Uo[t][a].y+Xo/2},index:n,weight:Ko.flatten[n].outputLinks[a].weight,name:`flatten-${n}-output`,color:ks(Po.weight,M,Ko.flatten[n].outputLinks[a].weight,.35),width:.6,opacity:1,class:"flatten-output"});let o=Math.floor(e/k);x.push({target:{x:u-3,y:0===l?b+1.1*e:$+1.1*e},source:{x:r+Xo+3,y:Uo[t-1][l].y+(2*o+1)*w},index:n,name:"flatten-"+n,color:"#E5E5E5",width:.6,opacity:1,class:"flatten"});let i=Ko.flatten[n].inputLinks[0].weight;

1v.append("rect").attr("id","bounding-"+n).attr("class","flatten-bounding").attr("x",r+i[1]*I).attr("y",Uo[t-1][l].y+i[0]*I).attr("width",I).attr("height",I).style("fill","none").style("stroke",Fo).style("stroke-length","0.5").style("pointer-events","all").style("cursor","crosshair").style("opacity",0).on("mouseover",()=>A({index:n})).on("mouseleave",()=>R({index:n})).on("click",()=>{d3.event.stopPropagation()})})}let E=[];for(let e=1;e<Ko[t-1].length-1;e++)E.push({index:e});let C=(10*Xo+9*Wo-1.1*f*2-45)/8;E.forEach((e,l)=>{v.append("rect").attr("x",u+s/4).attr("y",b+1.1*f+5*(l+1)+C*l).attr("width",s/2).attr("height",C).style("fill","#E5E5E5"),v.append("polyline").attr("points",`${r+Xo+3}\n        ${Uo[t-1][e.index].y},\n        ${r+Xo+10}\n        ${Uo[t-1][e.index].y+Xo/2},\n        ${r+Xo+3}\n        ${Uo[t-1][e.index].y+Xo}`).style("fill","#E5E5E5").style("opacity",1),x.push({source:{x:r+Xo+10,y:Uo[t-1][e.index].y+Xo/2},target:{x:u-3,y:b+1.1*f+5*(l+1)+C*(l+.5)},index:-1,width:1,opacity:1,name:"flatten-abstract-"+e.index,color:"#E5E5E5",class:"flatten-abstract"}),x.push({source:{x:u+s+3,y:b+1.1*f+5*(l+1)+C*(l+.5)},target:{x:y,y:Uo[t][a].y+Xo/2},index:-1,name:`flatten-abstract-${e.index}-output`,color:"#E5E5E5",weight:e.weight,width:1,opacity:1,class:"flatten-abstract-output"})});let S=y+zo,N=Uo[t][a].y+Xo/2,_=v.append("g").attr("class","plus-symbol").attr("transform",`translate(${S}, ${N})`);_.append("rect").attr("x",-zo).attr("y",-zo).attr("width",2*zo).attr("height",2*zo).attr("rx",3).attr("ry",3).style("fill","none").style("stroke",Fo),_.append("rect").attr("x",-(zo-3)).attr("y",-.5).attr("width",2*(zo-3)).attr("height",1).style("fill",Fo),_.append("rect").attr("x",-.5).attr("y",-(zo-3)).attr("width",1).attr("height",2*(zo-3)).style("fill",Fo),_.append("circle").attr("cx",0).attr("cy",-Xo/2-.5*Bo).attr("r",1.5*Bo).style("stroke",Fo).style("cursor","crosshair").style("fill",ks(Po.weight,M,e.bias,.35)).on("mouseover",()=>{_t.set({show:!0,text:"Bias: "+Vo(e.bias)})}).on("mouseleave",()=>{_t.set({show:!1,text:"Bias: "+Vo(e.bias)})}).on("click",()=>{d3.event.stopPropagation()}),_.append("path").attr("d",c({source:{x:0,y:0},target:{x:0,y:-Xo/2-.5*Bo}})).attr("id","bias-plus").attr("stroke-width",1.2).attr("stroke","#E5E5E5").lower(),x.push({source:bs({x:y+2*zo-Xo,y:Uo[t][a].y}),target:$s({x:Uo[t][a].x-3,y:Uo[t][a].y}),name:"symbol-output",width:1.2,color:"#E5E5E5"});let H=(o-2*Xo-2*i-55)/2,O=y+2*zo,T=H+O,P=H/2+O,X=Uo[t][a].y-2*Bo-6,z={curLayerIndex:t,moveX:2*(y-(u+s+3))/3,symbolX:S,symbolY:N,outputX:Uo[t][a].x,outputY:N,softmaxLeftMid:P,selectedI:a,intermediateX1:u,intermediateX2:y,pixelWidth:s,pixelHeight:1.1,topY:b,bottomY:$,middleGap:5,middleRectHeight:C,softmaxX:T,softmaxWidth:55,softmaxTextY:X,symbolGroup:_,flattenRange:M},F=p.append("g").attr("class","softmax-symbol").attr("transform",`translate(${T}, ${N})`).style("pointer-event","all").style("cursor","pointer").on("click",()=>hr(z));F.append("rect").attr("x",0).attr("y",-zo).attr("width",55).attr("height",2*zo).attr("stroke",Fo).attr("rx",2).attr("ry",2).attr("fill","#FAFAFA"),F.append("text").attr("x",5).attr("y",1).style("dominant-baseline","middle").style("font-size","12px").style("opacity",.5).text("softmax"),p.append("g").attr("class","layer-label").classed("hidden",nr).attr("transform",()=>`translate(${r+Xo+(4*Yo*jo+s)/2}, ${(Go.top+Wo)/2+5})`).style("cursor","help").on("click",()=>{d3.event.stopPropagation(),document.querySelector("#article-flatten").scrollIntoView({behavior:"smooth"})}).append("text").style("dominant-baseline","middle").style("opacity",.8).style("font-weight",800).text("flatten");let B=Number(d3.select("#copycat-cnn-svg").style("height").replace("px",""))+150,G=new SmoothScroll('a[href*="#"]',{offset:-B}),j=p.append("g").attr("transform",()=>`translate(${r+Xo+(4*Yo*jo+s)/2}, ${(Go.top+Wo)/2-5})`).attr("class","layer-detailed-label").classed("hidden",!nr).style("cursor","help").on("click",()=>{d3.event.stopPropagation();let t=document.querySelector("#article-flatten");G.animateScroll(t)});j.append("title").text("Move to article section");let q=j.append("text").style("text-anchor","middle").style("dominant-baseline","middle").style("opacity","0.7").style("font-weight",800).append("tspan").text("flatten"),V=Ko[sr].length*Ko[sr][0].output.length*Ko[sr][0].output[0].length;q.append("tspan").attr("x",0).attr("dy","1.5em").style("font-size","8px").style("font-weight","normal").text(`(${V})`);let D=v.append("g").attr("class","edge-group").lower();D.selectAll("path").data(x).enter().append("path").attr("class",t=>t.class).attr("id",t=>"edge-"+t.name).attr("d",t=>c({source:t.source,target:t.target})).style("fill","none").style("stroke-width",t=>t.width).style("stroke",t=>void 0===t.color?Fo:t.color).style("opacity",t=>t.opacity),D.selectAll("path.flatten-abstract-output").lower(),D.selectAll("path.flatten,path.flatten-output").style("cursor","crosshair").style("pointer-events","all").on("mouseover",A).on("mouseleave",R).on("click",()=>{d3.event.stopPropagation()}),ao({copycatlegendHeight:5,curLayerIndex:t,range:h,minMax:Zo[10],group:p,width:i+Xo-3,x:r,y:Go.top+10*Wo+Wo+10*Xo}),ao({copycatlegendHeight:5,curLayerIndex:t,range:M,minMax:{min:L[0],max:L[1]},group:p,width:i-3-5,gradientAppendingName:"flatten-weight-gradient",gradientGap:.1,colorScale:Po.weight,x:r+i+Xo+s+3,y:Go.top+10*Wo+Wo+10*Xo});let W=Do.append("g").attr("class","copycat-intermediate-layer-annotation").style("opacity",0),Y=W.append("g").attr("class","plus-annotation"),K=y,U=Uo[t][a].y+Xo+3*Bo,J=Uo[t][a].y+Xo+2*Bo,Q=Uo[t][a].y+Xo/2+zo;9==a&&(U-=110,J-=70,Q-=18);let Z=Y.append("text").attr("x",K).attr("y",U).attr("class","annotation-text").style("dominant-baseline","hanging").style("text-anchor","middle");Z.append("tspan").style("dominant-baseline","hanging").text("Add up all products"),Z.append("tspan").attr("x",K).attr("dy","1em").style("dominant-baseline","hanging").text("("),Z.append("tspan").style("fill","#66a3c8").style("dominant-baseline","hanging").text("element"),Z.append("tspan").style("dominant-baseline","hanging").text(" × "),Z.append("tspan").style("dominant-baseline","hanging").style("fill","#b58946").text("weight"),Z.append("tspan").style("dominant-baseline","hanging").text(")"),Z.append("tspan").attr("x",K).attr("dy","1em").style("dominant-baseline","hanging").text("and then "),Z.append("tspan").style("dominant-baseline","hanging").style("fill","#479d94").text("bias"),lo({group:Y,sx:y-2*zo-3,sy:J,tx:y-5,ty:Q,dr:30,hFlip:9===a,marker:"marker-alt"});let tt=Uo[t][a].y;tt-=2*Bo+4,v.append("text").attr("class","annotation-text").attr("x",y+zo).attr("y",tt).style("text-anchor","middle").style("dominant-baseline","baseline").text("Bias");let et=W.append("g").attr("class","softmax-annotation");et.append("text").attr("x",T+27.5).attr("y",X).attr("class","annotation-text").style("dominant-baseline","baseline").style("text-anchor","middle").style("font-weight",700).text("Click ").append("tspan").attr("dx",1).style("font-weight",400).text("to learn more"),lo({group:et,sx:T+27.5-5,sy:X+4,tx:T+27.5,ty:N-zo-4,dr:50,hFlip:!0});let at=W.append("g").attr("class","flatten-annotation");K=r-80,U=Uo[t-1][0].y;let lt=at.append("text").attr("x",K).attr("y",U).attr("class","annotation-text").style("dominant-baseline","hanging").style("text-anchor","middle");lt.append("tspan").style("dominant-baseline","hanging").style("font-weight",700).text("Hover over ").append("tspan").attr("dx",1).style("font-weight",400).style("dominant-baseline","hanging").text("matrix to"),lt.append("tspan").style("dominant-baseline","hanging").attr("x",K).attr("dy","1em").text("see how it is flattened"),lt.append("tspan").style("dominant-baseline","hanging").attr("x",K).attr("dy","1em").text("into a 1D array!"),lo({group:at,sx:K+45,sy:U+.4*Xo+12,tx:r-10,ty:U+Xo/2,dr:80,hFlip:!0}),U=Uo[t-1][1].y;let nt=at.append("text").attr("x",K).attr("y",U).attr("class","annotation-text").style("dominant-baseline","hanging").style("text-anchor","middle");nt.append("tspan").style("dominant-baseline","hanging").text("Same flattening"),nt.append("tspan").style("dominant-baseline","hanging").attr("x",K).attr("dy","1em").text("operation for"),nt.append("tspan").style("dominant-baseline","hanging").attr("x",K).attr("dy","1em").text("each neuron"),lo({group:at,sx:K+39,sy:U+25,tx:r-10,ty:U+Xo/2-2,dr:80,hFlip:!0,marker:"marker-alt"}

1),W.append("g").attr("class","output-annotation").append("text").attr("x",Uo[or][a].x).attr("y",Uo[or][a].y+10).attr("class","annotation-text").text(`(${d3.format(".4f")(Ko[or][a].output)})`),Do.selectAll("g.copycat-intermediate-layer, g.copycat-intermediate-layer-annotation").transition().delay(500).duration(500).ease(d3.easeCubicInOut).style("opacity",1)})(o,t,n,0,S))},rt=(t,e,a)=>{if(O)return;let l=G[t.layerName],n=t.index;if(i.select("g.cnn-group").select("g.edge-group").selectAll(`path.edge-${l}-${n}`).raise().transition().ease(d3.easeCubicInOut).duration(400).style("stroke",y).style("stroke-width","1").style("opacity",1),d3.select(a[e]).select("rect.bounding").classed("hidden",!1),1===t.inputLinks.length){let e=t.inputLinks[0],a=G[e.source.layerName],l=e.source.index;i.select(`g#layer-${a}-node-${l}`).select("rect.bounding").classed("hidden",!1)}else i.select("g#cnn-layer-group-"+(l-1)).selectAll("g.node-group").selectAll("rect.bounding").classed("hidden",!1);"output"===t.layerName&&d3.select(a[e]).select(".output-text").style("opacity",.8).style("text-decoration","underline")},it=(t,e,a)=>{if(!O&&(T||t.layerName!==H.layerName||t.index!==H.index)){let l=G[t.layerName],n=t.index;if(i.select("g.cnn-group").select("g.edge-group").selectAll(`path.edge-${l}-${n}`).transition().ease(d3.easeCubicOut).duration(200).style("stroke",u).style("stroke-width",h).style("opacity",p),d3.select(a[e]).select("rect.bounding").classed("hidden",!0),1===t.inputLinks.length){let e=t.inputLinks[0],a=G[e.source.layerName],l=e.source.index;i.select(`g#layer-${a}-node-${l}`).select("rect.bounding").classed("hidden",!0)}else i.select("g#cnn-layer-group-"+(l-1)).selectAll("g.node-group").selectAll("rect.bounding").classed("hidden",t=>t.layerName!==H.layerName||t.index!==H.index);"output"===t.layerName&&d3.select(a[e]).select(".output-text").style("fill","black").style("opacity",.5).style("text-decoration","none")}};R(async()=>{r=d3.select(l).select("#copycat-cnn-svg"),i=r.append("g").attr("class","main-svg").attr("transform",`translate(${m.left}, 0)`),bt.set(i),C=Number(r.style("width").replace("px",""))-m.left-m.right,S=Number(r.style("height").replace("px",""))-m.top-m.bottom;let t=i.append("g").attr("class","cnn-group");i.append("g").attr("class","underneath"),r.style("height").replace("px","");i.append("defs").append("marker").attr("id","marker").attr("viewBox","0 -5 10 10").attr("refX",6).attr("refY",0).attr("markerWidth",6).attr("markerHeight",6).attr("orient","auto").append("path").style("stroke-width",1.2).style("fill","gray").style("stroke","gray").attr("d","M0,-5L10,0L0,5"),i.append("defs").append("marker").attr("id","marker-alt").attr("viewBox","0 -5 10 10").attr("refX",6).attr("refY",0).attr("markerWidth",6).attr("markerHeight",6).attr("orient","auto").append("path").style("fill","none").style("stroke","gray").style("stroke-width",2).attr("d","M-5,-10L10,0L-5,10"),console.time("Construct cnn"),_=await Ke("/copycat-cnn-explainer/assets/data/model.json"),B=await De("/copycat-cnn-explainer/assets/img/"+D,_),console.timeEnd("Construct cnn"),vt.set(B);let e=B[B.length-2];B.splice(B.length-2,1),B.flatten=e,console.log(B),Ws(),Vs(C,S,t,rt,it,ot)});const ct=async t=>{a(12,U=t.detail.url),B=await De(U,_);let e=B[B.length-2];B.splice(B.length-2,1),B.flatten=e,vt.set(B),((t,e)=>{let a=t.width,l=e[0].output.length,n=document.createElement("canvas"),s=n.getContext("2d");n.width=l,n.height=l;let o=s.getImageData(0,0,l,l),r=o.data;for(let t=0;t<r.length;t+=4){let a=Math.floor(t/4),n=Math.floor(a/l),s=a%l,o=e[0].output[n][s],i=e[1].output[n][s],c=e[2].output[n][s];r[t]=255*o,r[t+1]=255*i,r[t+2]=255*c,r[t+3]=255}let i=document.createElement("canvas");i.width=3*a,i.height=3*a;let c=i.getContext("2d");s.putImageData(o,0,0),c.drawImage(n,0,0,l,l,0,0,3*a,3*a);let d=i.toDataURL();t.src=d,n.remove(),i.remove()})(d3.select(l).select(".custom-image").node(),B[0]),Ws(),Ds()};return t.$$.update=()=>{1&t.$$.dirty[0]&&(()=>{if(void 0!==i){if(n.add(s)||console.error("Encounter unknown scale level!"),s!=o){({local:{module:[1,2,8,9,10],global:[1,2,3,4,5,8,9,10]},module:{local:[1,2,8,9,10],global:[1,2,3,4,5,8,9,10]},global:{local:[1,2,3,4,5,8,9,10],module:[1,2,3,4,5]}}

1)[o][s].forEach(t=>{let e=b[s][t];i.select("#cnn-layer-group-"+t).selectAll(".node-image").each((t,a,l)=>Gs(t,a,l,e))}),i.selectAll(`.${o}-copycatlegend`).classed("hidden",!0),i.selectAll(`.${s}-copycatlegend`).classed("hidden",!$)}o=s,It.set(s)}})()},[s,l,$,L,A,H,F,D,q,W,Y,K,U,c,V,[{file:"dog_1.jpeg",class:"dog"},{file:"penguim_1.jpeg",class:"penguin"},{file:"tree_1.jpeg",class:"tree"}],()=>{a(2,$=!$),Rt.set($),O||(i.selectAll(`.${s}-copycatlegend`).classed("hidden",!$),i.selectAll(".input-copycatlegend").classed("hidden",!$),i.selectAll(".output-copycatlegend").classed("hidden",!$)),i.selectAll(".layer-detailed-label").classed("hidden",!$),i.selectAll(".layer-label").classed("hidden",$)},async t=>{let e=d3.select(t.target).attr("data-imageName");if(e!==D){a(7,D=e),B=await De("/copycat-cnn-explainer/assets/img/"+D,_);let t=B[B.length-2];B.splice(B.length-2,1),B.flatten=t,vt.set(B),Ws(),Ds()}},()=>{if(null===U)M.show=!0,M.preImage=D,Ht.set(M);else if("custom"!==D){ct({detail:{url:U}})}else M.show=!0,M.preImage=D,Ht.set(M);"custom"!==D&&a(7,D="custom")},t=>{a(7,D=t.detail.preImage)},ct,function(t){t.detail.text&&(z=void 0,i.select("rect#underneath-gateway-"+W).style("opacity",0),a(9,W=-1))},function(t){t.detail.text&&(et(),a(10,Y=!0))},function(t){t.detail.text&&(et(),a(10,Y=!0))},function(t){a(3,L.show=!1,L),St.set(L)},function(){s=I(this),a(0,s)},function(t){N[t?"unshift":"push"](()=>{l=t,a(1,l)})}]}class Er extends Z{constructor(t){super(),Q(this,t,Rr,Ir,s,{},null,[-1,-1,-1])}}function Cr(e){let a;return{c(){a=u("div"),v(a,"id",e[0])},m(t,e){d(t,a,e)},p(t,[e]){1&e&&v(a,"id",t[0])},i:t,o:t,d(t){t&&g(a)}}}var Sr=document.createElement("script");Sr.src="https://www.youtube.com/iframe_api";var Nr=document.getElementsByTagName("script")[0];function _r(t,e,a){let l,{videoId:n}=e,{playerId:s="player"}=e;C();function o(t){l.mute()}return window.addEventListener("iframeApiReady",(function(t){l=new YT.Player(s,{videoId:n,events:{onReady:o}})})),t.$$set=t=>{"videoId"in t&&a(1,n=t.videoId),"playerId"in t&&a(0,s=t.playerId)},[s,n,function(t=0){l.seekTo(t),l.playVideo()}]}Nr.parentNode.insertBefore(Sr,Nr),window.onYouTubeIframeAPIReady=()=>window.dispatchEvent(new Event("iframeApiReady"));class Hr extends Z{constructor(t){super(),Q(this,t,_r,Cr,s,{videoId:1,playerId:0,play:2})}get play(){return this.$$.ctx[2]}}function Or(t){let e,a,l,n,s,o,r,i,p,y,h,f,x,b,$,k,w,I,L,M,A,R,E,C,S,N,_;return k=new Hr({props:{videoId:"HnWIHWFbuUQ",playerId:"demo_video"}}),t[1](k),{c(){e=u("body"),a=u("div"),l=u("h2"),l.textContent="Oracle and Copycat models: an interactive visualization",n=m(),s=u("p"),s.innerHTML='The <a href="https://poloclub.github.io/cnn-explainer/" class="svelte-k0gkhd">CNN Explainer</a> is a great tool that provides interactive visualization of a CNN model using &quot;JavaScript&quot;.\n        It runs on GitHub and uses TensorFlowJS, Svelte and D3.js (more information bellow).\n        Using these features, we are providing an interactive visualization of Oracle and Copycat models.\n        It provides a way to better understand our research as you can visualize the behavior of Oracle and Copycat models, interact with their parameters and compare them against each other.',o=m(),r=u("h2"),r.textContent="Interactive features",i=m(),p=u("ol"),p.innerHTML='<li class="svelte-k0gkhd"><strong>Upload your own image</strong> by selecting <img class="icon is-rounded svelte-k0gkhd" src="/copycat-cnn-explainer/assets/figures/upload_image_icon.png" alt="upload image icon"/> to understand how your image is classified into the 10 classes.  By analyzing the neurons throughout the network, you can understand the activations maps and extracted features.</li> \n    \t<li class="svelte-k0gkhd"><strong>Change the activation map colorscale</strong> to better understand the impact of activations at different levels of abstraction by adjusting <img class="is-rounded svelte-k0gkhd" width="100px" src="/copycat-cnn-explainer/assets/figures/heatmap_scale.png" alt="heatmap"/>.</li> \n    \t<li class="svelte-k0gkhd"><strong>Understand network details</strong> such as layer dimensions and colorscales by clicking the <img class="is-rounded svelte-k0gkhd" width="100px" src="/copycat-cnn-explainer/assets/figures/network_details.png" alt="network details icon"/> icon.</li> \n    \t<li class="svelte-k0gkhd"><strong>Simulate network operations</strong> by clicking the <img class="icon is-rounded svelte-k0gkhd" src="/copycat-cnn-explainer/assets/figures/play_button.png" alt="play icon"/> button or interact with the layer slice in the <em>Interactive Formula View</em> by hovering over portions of the input or output to understand the mappings and underlying operations.</li> \n      <li class="svelte-k0gkhd"><strong>Learn layer functions</strong> by clicking <img class="icon is-rounded svelte-k0gkhd" src="/copycat-cnn-explainer/assets/figures/info_button.png" alt="info icon"/> from the <em>Interactive Formula View</em> to read layer details from the article.</li>',y=m(),h=u("h2"),h.textContent="Video Tutorial",f=m(),x=u("p"),x.innerHTML='This page was based on <a href="https://poloclub.github.io/cnn-explainer/" class="svelte-k0gkhd">CNN Explainer</a>. You can see their tutorial to understand how to interact with the CNN model.',b=m(),$=u("div"),Y(k.$$.fragment),w=m(),I=u("h2"),I.textContent="More information",L=m(),M=u("p"),M.innerHTML='The network architecture is Tiny-VGG (it is a small ar

1chitecture, allowing the complete visualization of its parameters) and it was built using TensorFlow.\n       Using the <a href="https://github.com/poloclub/cnn-explainer/tree/master/tiny-vgg" class="svelte-k0gkhd">cnn-explainer</a> code as Oracle, we developed (inserted) the Copycat in TensorFlow to run against their model.\n       This page has also been adapted to show both models at the same time and provide the user with a way to explore and compare them.',A=m(),R=u("p"),R.innerHTML='The models (Oracle and Copycat) displayed here were obtained in our experiments (<a href="https://github.com/jeiks/copycat-cnn-explainer/tree/main/tiny-vgg" class="svelte-k0gkhd">code</a>). The Oracle and Copycat accuracies on the test dataset were 66% and 61% respectively, achieving a Copycat performance of 92%.\n       After training, they were exported to TensorFlowJS.',E=m(),C=u("p"),C.innerHTML='From their <a href="https://poloclub.github.io/cnn-explainer/" class="svelte-k0gkhd">website</a>:\n      &quot;<i>CNN Explainer uses <a href="https://js.tensorflow.org/" class="svelte-k0gkhd">TensorFlow.js</a>, an in-browser GPU-accelerated deep learning library to load the pretrained model for visualization.\n      It was necessary TensorFlowJS for exporting the model, <a href="https://svelte.dev/" class="svelte-k0gkhd">Svelte</a> as a framework and <a href="https://d3js.org/" class="svelte-k0gkhd">D3.js</a> for visualizations.</i>&quot;',S=m(),N=u("p"),N.textContent=".",v(l,"class","svelte-k0gkhd"),v(s,"class","svelte-k0gkhd"),v(r,"class","svelte-k0gkhd"),v(p,"class","svelte-k0gkhd"),v(h,"class","svelte-k0gkhd"),v(x,"class","svelte-k0gkhd"),v($,"class","video svelte-k0gkhd"),v(I,"class","svelte-k0gkhd"),v(M,"class","svelte-k0gkhd"),v(R,"class","svelte-k0gkhd"),v(C,"class","svelte-k0gkhd"),v(N,"class","svelte-k0gkhd"),v(a,"id","description"),v(a,"class","svelte-k0gkhd")},m(t,g){d(t,e,g),c(e,a),c(a,l),c(a,n),c(a,s),c(a,o),c(a,r),c(a,i),c(a,p),c(a,y),c(a,h),c(a,f),c(a,x),c(a,b),c(a,$),K(k,$,null),c(a,w),c(a,I),c(a,L),c(a,M),c(a,A),c(a,R),c(a,E),c(a,C),c(a,S),c(a,N),_=!0},p(t,[e]){k.$set({})},i(t){_||(D(k.$$.fragment,t),_=!0)},o(t){W(k.$$.fragment,t),_=!1},d(a){a&&g(e),t[1](null),U(k)}}}function Tr(t,e,a){let l;return[l,function(t){N[t?"unshift":"push"](()=>{l=t,a(0,l)})}]}class Pr extends Z{constructor(t){super(),Q(this,t,Tr,Or,s,{})}}function Xr(e){let a,l,n,s,o,r;return a=new hn({}),n=new Er({}),o=new Pr({}),{c(){Y(a.$$.fragment),l=m(),Y(n.$$.fragment),s=m(),Y(o.$$.fragment)},m(t,e){K(a,t,e),d(t,l,e),K(n,t,e),d(t,s,e),K(o,t,e),r=!0},p:t,i(t){r||(D(a.$$.fragment,t),D(n.$$.fragment,t),D(o.$$.fragment,t),r=!0)},o(t){W(a.$$.fragment,t),W(n.$$.fragment,t),W(o.$$.fragment,t),r=!1},d(t){U(a,t),t&&g(l),U(n,t),t&&g(s),U(o,t)}}}class zr extends Z{constructor(t){super(),Q(this,t,null,Xr,s,{})}}function Fr(e){let a,l,n;return l=new zr({}),{c(){a=u("div"),Y(l.$$.fragment),v(a,"id","explainer"),v(a,"class","svelte-1avhf6")},m(t,e){d(t,a,e),K(l,a,null),n=!0},p:t,i(t){n||(D(l.$$.fragment,t),n=!0)},o(t){W(l.$$.fragment,t),n=!1},d(t){t&&g(a),U(l)}}}function Br(t){return[]}class Gr extends Z{constructor(t){super(),Q(this,t,Br,Fr,s,{})}}function jr(e){let a;return{c(){a=u("div"),a.innerHTML='<div id="logo" class="svelte-1cu0hc"><div id="logo-text" class="svelte-1cu0hc">Copycat CNN Explainer</div> \n\n\t\t<svg width="510px" height="50px"><defs><filter x="0%" y="0%" width="100%" height="100%" filterUnits="objectBoundingBox" id="chalk-texture"><feTurbulence type="fractalNoise" baseFrequency="2" numOctaves="5" stitchTiles="stitch" result="f1"></feTurbulence><feColorMatrix type="matrix" values="0 0 0 0 0, 0 0 0 0 0, 0 0 0 0 0, 0 0 0 -1.5 1.5" result="f2"></feColorMatrix><feComposite operator="in" in2="f2" in="SourceGraphic" result="f3"></feComposite></filter></defs><g filter="url(#chalk-texture)" transform="translate(0, 35)"><text id="svg-logo-tagline" class="svelte-1cu0hc">Interactive comparison between Oracle and Copycat models</text></g></svg></div> \n\n\t<div class="icons svelte-1cu0hc"><div class="icon svelte-1cu0hc" title="Research paper - Copycat Method"><a target="_blank" href="https://arxiv.org/abs/1806.05476" class="svelte-1cu0hc"><img src="/copycat-cnn-explainer/assets/img/pdf.png" alt="pdf icon" class="svelte-1cu0hc"/></a></div> \n\n\t\t<div class="icon svelte-1cu0hc" title="Research paper - Exploring and verifying the parameters of the Copycat model"><a target="_blank" href="https://arxiv.org/abs/2101.08717" class="svelte-1cu0hc"><img src="/copycat-cnn-explainer/assets/img/pdf.png" alt="pdf icon" class="svelte-1cu0hc"/></a></div> \n\n\t\t<div class="icon svelte-1cu0hc" title="Research (Copycat Method) source code"><a target="_blank" href="https://github.com/jeiks/Stealing_DL_Models" class="svelte-1cu0hc"><img src="/copycat-cnn-explainer/assets/img/github.png" alt="github icon" class="svelte-1cu0hc"/></a></div> \n\t\t<div class="icon svelte-1cu0hc" title="Source code of this page"><a target="_blank" href="https://github.com/jeiks/copycat-cnn-explainer" class="svelte-1cu0hc"><img src="/copycat-cnn-explainer/assets/img/github.png" alt="github icon" class="svelte-1cu0hc"/></a></div></div>',v(a,"id","header"),v(a,"class","svelte-1cu0hc")},m(t,e){d(t,a,e)},p:t,i:t,o:t,d(t){t&&g(a)}}}class qr extends Z{constructor(t){super(),Q(this,t,null,jr,s,{})}}function Vr(e){let a,l,n,s,o;return l=new qr({}),s=new Gr({}

1),{c(){a=u("div"),Y(l.$$.fragment),n=m(),Y(s.$$.fragment),v(a,"id","app-page")},m(t,e){d(t,a,e),K(l,a,null),c(a,n),K(s,a,null),o=!0},p:t,i(t){o||(D(l.$$.fragment,t),D(s.$$.fragment,t),o=!0)},o(t){W(l.$$.fragment,t),W(s.$$.fragment,t),o=!1},d(t){t&&g(a),U(l),U(s)}}}return new class extends Z{constructor(t){super(),Q(this,t,null,Vr,s,{})}}({target:document.body,props:{}})}();
2//# sourceMappingURL=bundle.js.map