Skip to content

Instantly share code, notes, and snippets.

@koaning

koaning/index.html

Last active April 8, 2020 12:52
Show Gist options
  • Save koaning/f40ca790612a03067caca2bde81e7aaf to your computer and use it in GitHub Desktop.
Save koaning/f40ca790612a03067caca2bde81e7aaf to your computer and use it in GitHub Desktop.
Download ZIP
DIET architecture interactive demo
Raw
index.html
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css" integrity="sha384-Vkoo8x4CGsO3+Hhxv8T/Q5PaXtkKtu6ug5TOeNV6gBiFeWPGFN9MuhOf23Q9Ifjh" crossorigin="anonymous">
<script src="https://d3js.org/d3.v5.min.js"></script>
<div class="container" style="width=600px; margin: 0 auto;">
<h2>DIET Interactive Demo</h2>
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1" width="100%" viewBox="-0.5 -0.5 1832 1057">
<defs>
<linearGradient x1="0%" y1="0%" x2="0%" y2="100%" id="mx-gradient-fff2cc-1-ffd966-1-s-0">
<stop offset="0%" style="stop-color:#fff2cc"/>
<stop offset="100%" style="stop-color:#ffd966"/>
</linearGradient>
<linearGradient x1="0%" y1="0%" x2="0%" y2="100%" id="mx-gradient-e6d0de-1-d5739d-1-s-0">
<stop offset="0%" style="stop-color:#e6d0de"/>
<stop offset="100%" style="stop-color:#d5739d"/>
</linearGradient>
</defs>
<g>
<circle class="intent-loss-block" cx="1570.5" cy="206.5" fill="#f8cecc" stroke="#b85450" pointer-events="all" r="50.5"/>
<g transform="translate(-0.5 -0.5)">
<switch>
<foreignObject style="overflow:visible;text-align:left" pointer-events="none" width="100%" height="100%" requiredFeatures="http://www.w3.org/TR/SVG11/feature#Extensibility">
<div xmlns="http://www.w3.org/1999/xhtml" style="display:flex;align-items:unsafe center;justify-content:unsafe center;width:99px;height:1px;padding-top:207px;margin-left:1521px">
<div style="box-sizing:border-box;font-size:0;text-align:center">
<div style="display:inline-block;font-size:24px;font-family:Source Code Pro;color:#fff;line-height:1.2;pointer-events:all;white-space:normal;word-wrap:normal">
<font style="font-size:22px" face="Helvetica" color="#333333">
<b>
Intent Loss
</b>
</font>
</div>
</div>
</div>
</foreignObject>
<text x="1571" y="214" fill="#FFFFFF" font-family="Source Code Pro" font-size="24px" text-anchor="middle">
Intent Lo...
</text>
</switch>
</g>
<path d="M 130 1016 L 130 996 Q 130 986 120 986 L 75 986 Q 65 986 65 976.99 L 65 967.97" fill="none" stroke="#000000" stroke-width="4" stroke-miterlimit="10" pointer-events="stroke"/>
<path d="M 65 960.47 L 70 970.47 L 65 967.97 L 60 970.47 Z" fill="#000000" stroke="#000000" stroke-width="4" stroke-miterlimit="10" pointer-events="all"/>
<rect x="0" y="1016" width="260" height="40" rx="6" ry="6" fill="#ffffff" stroke="#3b3b3b" pointer-events="all"/>
<g transform="translate(-0.5 -0.5)">
<switch>
<foreignObject style="overflow:visible;text-align:left" pointer-events="none" width="100%" height="100%" requiredFeatures="http://www.w3.org/TR/SVG11/feature#Extensibility">
<div xmlns="http://www.w3.org/1999/xhtml" style="display:flex;align-items:unsafe center;justify-content:unsafe center;width:258px;height:1px;padding-top:1036px;margin-left:1px">
<div style="box-sizing:border-box;font-size:0;text-align:center">
<div style="display:inline-block;font-size:24px;font-family:Source Sans Pro;color:#fff;line-height:1.2;pointer-events:all;white-space:normal;word-wrap:normal">
<font face="helvetica" color="#404040">
<span style="font-size:22px">
<b>
play
</b>
</span>
</font>
</div>
</div>
</div>
</foreignObject>
<text x="130" y="1043" fill="#FFFFFF" font-family="Source Sans Pro" font-size="24px" text-anchor="middle">
play
</text>
</switch>
</g>
<path d="M 430.5 1016 L 430.61 996 Q 430.67 986 420.67 986 L 376.67 986 Q 366.67 986 366.62 976.99 L 366.57 967.97" fill="none" stroke="#000000" stroke-width="4" stroke-miterlimit="10" pointer-events="stroke"/>
<path d="M 366.52 960.47 L 371.58 970.44 L 366.57 967.97 L 361.58 970.5 Z" fill="#000000" stroke="#000000" stroke-width="4" stroke-miterlimit="10" pointer-events="all"/>
<path d="M 430.5 1016 L 430.61 996 Q 430.67 986 440.67 986 L 485.67 986 Q 495.67 986 495.66 976 L 495.51 837.97" fill="none" stroke="#000000" stroke-width="4" stroke-miterlimit="10" pointer-events="stroke"/>
<path d="M 495.5 830.47 L 500.52 840.47 L 495.51 837.97 L 490.52 840.48 Z" fill="#000000" stroke="#000000" stroke-width="4" stroke-miterlimit="10" pointer-events="all"/>
<rect x="300.5" y="1016" width="260" height="40" rx="6" ry="6" fill="#ffffff" stroke="#3b3b3b" pointer-events="all"/>
<g transform="translate(-0.5 -0.5)">
<switch>
<foreignObject style="overflow:visible;text-align:left" pointer-events="none" width="100%" height="100%" requiredFeatures="http://www.w3.org/TR/SVG11/feature#Extensibility">
<div xmlns="http://www.w3.org/1999/xhtml" style="display:flex;align-items:unsafe center;justify-content:unsafe center;width:258px;height:1px;padding-top:1036px;margin-left:302px">
<div style="box-sizing:border-box;font-size:0;text-align:center">
<div style="display:inline-block;font-size:24px;font-family:Source Sans Pro;color:#fff;line-height:1.2;pointer-events:all;white-space:normal;word-wrap:normal">
<font face="helvetica" color="#404040">
<span style="font-size:22px">
<b>
ping
</b>
</span>
</font>
</div>
</div>
</div>
</foreignObject>
<text x="431" y="1043" fill="#FFFFFF" font-family="Source Sans Pro" font-size="24px" text-anchor="middle">
ping
</text>
</switch>
</g>
<path d="M 731 1016 L 731 996 Q 731 986 731.02 976 L 731.97 537.97" fill="none" stroke="#000000" stroke-width="4" stroke-miterlimit="10" pointer-events="stroke"/>
<path d="M 731.99 530.47 L 736.97 540.48 L 731.97 537.97 L 726.97 540.46 Z" fill="#000000" stroke="#000000" stroke-width="4" stroke-miterlimit="10" pointer-events="all"/>
<rect class="mask-block" x="601" y="1016" width="260" height="40" rx="6" ry="6" fill="url(#mx-gradient-fff2cc-1-ffd966-1-s-0)" stroke="#d6b656" pointer-events="all"/>
<g class="mask-block" transform="translate(-0.5 -0.5)">
<switch>
<foreignObject style="overflow:visible;text-align:left" pointer-events="none" width="100%" height="100%" requiredFeatures="http://www.w3.org/TR/SVG11/feature#Extensibility">
<div xmlns="http://www.w3.org/1999/xhtml" style="display:flex;align-items:unsafe center;justify-content:unsafe center;width:258px;height:1px;padding-top:1036px;margin-left:602px">
<div style="box-sizing:border-box;font-size:0;text-align:center">
<div style="display:inline-block;font-size:24px;font-family:Source Sans Pro;color:#000;line-height:1.2;pointer-events:all;white-space:normal;word-wrap:normal">
<font face="helvetica" color="#404040">
<span style="font-size:22px">
<b>
__MASK__
</b>
</span>
</font>
</div>
</div>
</div>
</foreignObject>
<text x="731" y="1043" fill="#000000" font-family="Source Sans Pro" font-size="24px" text-anchor="middle">
__MASK__
</text>
</switch>
</g>
<path d="M 65 856 L 65 837.97" fill="none" stroke="#000000" stroke-width="4" stroke-miterlimit="10" pointer-events="stroke"/>
<path d="M 65 830.47 L 70 840.47 L 65 837.97 L 60 840.47 Z" fill="#000000" stroke="#000000" stroke-width="4" stroke-miterlimit="10" pointer-events="all"/>
<rect class="sparse-block" x="0" y="856" width="130" height="100" rx="15" ry="15" fill="#ffffff" stroke="#3b3b3b" pointer-events="all"/>
<g transform="translate(-0.5 -0.5)">
<switch>
<foreignObject style="overflow:visible;text-align:left" pointer-events="none" width="100%" height="100%" requiredFeatures="http://www.w3.org/TR/SVG11/feature#Extensibility">
<div xmlns="http://www.w3.org/1999/xhtml" style="display:flex;align-items:unsafe center;justify-content:unsafe center;width:128px;height:1px;padding-top:906px;margin-left:1px">
<div style="box-sizing:border-box;font-size:0;text-align:center">
<div style="display:inline-block;font-size:24px;font-family:Source Sans Pro;color:#fff;line-height:1.2;pointer-events:all;white-space:normal;word-wrap:normal">
<font face="helvetica" color="#404040">
<span style="font-size:22px">
<b>
Sparse features
</b>
</span>
</font>
</div>
</div>
</div>
</foreignObject>
<text x="65" y="913" fill="#FFFFFF" font-family="Source Sans Pro" font-size="24px" text-anchor="middle">
Sparse feat...
</text>
</switch>
</g>
<path d="M 195 726 L 195 706 Q 195 696 185 696 L 140 696 Q 130 696 130 686.99 L 130 677.97" fill="none" stroke="#000000" stroke-width="4" stroke-miterlimit="10" pointer-events="stroke"/>
<path d="M 130 670.47 L 135 680.47 L 130 677.97 L 125 680.47 Z" fill="#000000" stroke="#000000" stroke-width="4" stroke-miterlimit="10" pointer-events="all"/>
<rect class="pretrain-block" x="130" y="726" width="130" height="100" rx="15" ry="15" fill="#ffffff" stroke="#3b3b3b" pointer-events="all"/>
<g transform="translate(-0.5 -0.5)">
<switch>
<foreignObject style="overflow:visible;text-align:left" pointer-events="none" width="100%" height="100%" requiredFeatures="http://www.w3.org/TR/SVG11/feature#Extensibility">
<div xmlns="http://www.w3.org/1999/xhtml" style="display:flex;align-items:unsafe center;justify-content:unsafe center;width:128px;height:1px;padding-top:776px;margin-left:131px">
<div style="box-sizing:border-box;font-size:0;text-align:center">
<div style="display:inline-block;font-size:24px;font-family:Source Sans Pro;color:#fff;line-height:1.2;pointer-events:all;white-space:normal;word-wrap:normal">
<font face="helvetica" color="#404040">
<span style="font-size:22px">
<b>
Pretrained embedding
</b>
</span>
</font>
</div>
</div>
</div>
</foreignObject>
<text x="195" y="783" fill="#FFFFFF" font-family="Source Sans Pro" font-size="24px" text-anchor="middle">
Pretrained...
</text>
</switch>
</g>
<path d="M 65 726 L 65 706 Q 65 696 75 696 L 120 696 Q 130 696 130 686.99 L 130 677.97" fill="none" stroke="#000000" stroke-width="4" stroke-miterlimit="10" pointer-events="stroke"/>
<path d="M 130 670.47 L 135 680.47 L 130 677.97 L 125 680.47 Z" fill="#000000" stroke="#000000" stroke-width="4" stroke-miterlimit="10" pointer-events="all"/>
<rect class="ff-block" x="0" y="726" width="130" height="100" rx="15" ry="15" fill="#b0e3e6" stroke="#0e8088" stroke-width="2" pointer-events="all"/>
<g transform="translate(-0.5 -0.5)">
<switch>
<foreignObject style="overflow:visible;text-align:left" pointer-events="none" width="100%" height="100%" requiredFeatures="http://www.w3.org/TR/SVG11/feature#Extensibility">
<div xmlns="http://www.w3.org/1999/xhtml" style="display:flex;align-items:unsafe center;justify-content:unsafe center;width:128px;height:1px;padding-top:776px;margin-left:1px">
<div style="box-sizing:border-box;font-size:0;text-align:center">
<div style="display:inline-block;font-size:24px;font-family:Source Sans Pro;color:#000;line-height:1.2;pointer-events:all;white-space:normal;word-wrap:normal">
<b style="color:#404040;font-family:&quot;helvetica&quot;;font-size:22px">
Feed-forward
</b>
</div>
</div>
</div>
</foreignObject>
<text x="65" y="783" fill="#000000" font-family="Source Sans Pro" font-size="24px" text-anchor="middle">
Feed-forward
</text>
</switch>
</g>
<path d="M 366.5 856 L 365.9 837.97" fill="none" stroke="#000000" stroke-width="4" stroke-miterlimit="10" pointer-events="stroke"/>
<path d="M 365.65 830.47 L 370.98 840.3 L 365.9 837.97 L 360.98 840.63 Z" fill="#000000" stroke="#000000" stroke-width="4" stroke-miterlimit="10" pointer-events="all"/>
<rect class="sparse-block" class="ff-block" x="301.5" y="856" width="130" height="100" rx="15" ry="15" fill="#ffffff" stroke="#3b3b3b" pointer-events="all"/>
<g transform="translate(-0.5 -0.5)">
<switch>
<foreignObject style="overflow:visible;text-align:left" pointer-events="none" width="100%" height="100%" requiredFeatures="http://www.w3.org/TR/SVG11/feature#Extensibility">
<div xmlns="http://www.w3.org/1999/xhtml" style="display:flex;align-items:unsafe center;justify-content:unsafe center;width:128px;height:1px;padding-top:906px;margin-left:303px">
<div style="box-sizing:border-box;font-size:0;text-align:center">
<div style="display:inline-block;font-size:24px;font-family:Source Sans Pro;color:#fff;line-height:1.2;pointer-events:all;white-space:normal;word-wrap:normal">
<font face="helvetica" color="#404040">
<span style="font-size:22px">
<b>
Sparse features
</b>
</span>
</font>
</div>
</div>
</div>
</foreignObject>
<text class="ff-block" x="367" y="913" fill="#FFFFFF" font-family="Source Sans Pro" font-size="24px" text-anchor="middle">
Sparse feat...
</text>
</switch>
</g>
<path d="M 495.5 726 L 495.61 706 Q 495.67 696 485.67 696 L 440.67 696 Q 430.67 696 430.62 686.99 L 430.57 677.97" fill="none" stroke="#000000" stroke-width="4" stroke-miterlimit="10" pointer-events="stroke"/>
<path d="M 430.52 670.47 L 435.58 680.44 L 430.57 677.97 L 425.58 680.5 Z" fill="#000000" stroke="#000000" stroke-width="4" stroke-miterlimit="10" pointer-events="all"/>
<rect class="pretrain-block" x="430.5" y="726" width="130" height="100" rx="15" ry="15" fill="#ffffff" stroke="#3b3b3b" pointer-events="all"/>
<g transform="translate(-0.5 -0.5)">
<switch>
<foreignObject style="overflow:visible;text-align:left" pointer-events="none" width="100%" height="100%" requiredFeatures="http://www.w3.org/TR/SVG11/feature#Extensibility">
<div xmlns="http://www.w3.org/1999/xhtml" style="display:flex;align-items:unsafe center;justify-content:unsafe center;width:128px;height:1px;padding-top:776px;margin-left:432px">
<div style="box-sizing:border-box;font-size:0;text-align:center">
<div style="display:inline-block;font-size:24px;font-family:Source Sans Pro;color:#fff;line-height:1.2;pointer-events:all;white-space:normal;word-wrap:normal">
<font face="helvetica" color="#404040">
<span style="font-size:22px">
<b>
Pretrained embedding
</b>
</span>
</font>
</div>
</div>
</div>
</foreignObject>
<text x="496" y="783" fill="#FFFFFF" font-family="Source Sans Pro" font-size="24px" text-anchor="middle">
Pretrained...
</text>
</switch>
</g>
<path d="M 365.5 726 L 365.61 706 Q 365.67 696 375.67 696 L 420.67 696 Q 430.67 696 430.62 686.99 L 430.57 677.97" fill="none" stroke="#000000" stroke-width="4" stroke-miterlimit="10" pointer-events="stroke"/>
<path d="M 430.52 670.47 L 435.58 680.44 L 430.57 677.97 L 425.58 680.5 Z" fill="#000000" stroke="#000000" stroke-width="4" stroke-miterlimit="10" pointer-events="all"/>
<rect class="ff-block" x="300.5" y="726" width="130" height="100" rx="15" ry="15" fill="#b0e3e6" stroke="#0e8088" stroke-width="2" pointer-events="all"/>
<g transform="translate(-0.5 -0.5)">
<switch>
<foreignObject style="overflow:visible;text-align:left" pointer-events="none" width="100%" height="100%" requiredFeatures="http://www.w3.org/TR/SVG11/feature#Extensibility">
<div xmlns="http://www.w3.org/1999/xhtml" style="display:flex;align-items:unsafe center;justify-content:unsafe center;width:128px;height:1px;padding-top:776px;margin-left:302px">
<div style="box-sizing:border-box;font-size:0;text-align:center">
<div style="display:inline-block;font-size:24px;font-family:Source Sans Pro;color:#000;line-height:1.2;pointer-events:all;white-space:normal;word-wrap:normal">
<b style="color:#404040;font-family:&quot;helvetica&quot;;font-size:22px">
Feed-forward
</b>
</div>
</div>
</div>
</foreignObject>
<text x="366" y="783" fill="#000000" font-family="Source Sans Pro" font-size="24px" text-anchor="middle">
Feed-forward
</text>
</switch>
</g>
<path d="M 130 566 L 128.57 540.25" fill="none" stroke="#000000" stroke-width="4" stroke-miterlimit="10" pointer-events="stroke"/>
<path d="M 128.15 532.77 L 133.7 542.47 L 128.57 540.25 L 123.71 543.03 Z" fill="#000000" stroke="#000000" stroke-width="4" stroke-miterlimit="10" pointer-events="all"/>
<rect class="ff-block" x="30" y="566" width="200" height="100" rx="15" ry="15" fill="#b0e3e6" stroke="#0e8088" stroke-width="2" pointer-events="all"/>
<g transform="translate(-0.5 -0.5)">
<switch>
<foreignObject style="overflow:visible;text-align:left" pointer-events="none" width="100%" height="100%" requiredFeatures="http://www.w3.org/TR/SVG11/feature#Extensibility">
<div xmlns="http://www.w3.org/1999/xhtml" style="display:flex;align-items:unsafe center;justify-content:unsafe center;width:198px;height:1px;padding-top:616px;margin-left:31px">
<div style="box-sizing:border-box;font-size:0;text-align:center">
<div style="display:inline-block;font-size:24px;font-family:Source Sans Pro;color:#000;line-height:1.2;pointer-events:all;white-space:normal;word-wrap:normal">
<b style="color:#404040;font-family:&quot;helvetica&quot;;font-size:22px">
Feed-forward
</b>
</div>
</div>
</div>
</foreignObject>
<text x="130" y="623" fill="#000000" font-family="Source Sans Pro" font-size="24px" text-anchor="middle">
Feed-forward
</text>
</switch>
</g>
<path d="M 430.5 566 L 430.58 556 Q 430.67 546 430.83 541.82 L 431 537.64" fill="none" stroke="#000000" stroke-width="4" stroke-miterlimit="10" pointer-events="stroke"/>
<path d="M 431 530.14 L 436 540.14 L 431 537.64 L 426 540.14 Z" fill="#000000" stroke="#000000" stroke-width="4" stroke-miterlimit="10" pointer-events="all"/>
<rect class="ff-block" x="330.5" y="566" width="200" height="100" rx="15" ry="15" fill="#b0e3e6" stroke="#0e8088" stroke-width="2" pointer-events="all"/>
<g transform="translate(-0.5 -0.5)">
<switch>
<foreignObject style="overflow:visible;text-align:left" pointer-events="none" width="100%" height="100%" requiredFeatures="http://www.w3.org/TR/SVG11/feature#Extensibility">
<div xmlns="http://www.w3.org/1999/xhtml" style="display:flex;align-items:unsafe center;justify-content:unsafe center;width:198px;height:1px;padding-top:616px;margin-left:332px">
<div style="box-sizing:border-box;font-size:0;text-align:center">
<div style="display:inline-block;font-size:24px;font-family:Source Sans Pro;color:#000;line-height:1.2;pointer-events:all;white-space:normal;word-wrap:normal">
<font face="helvetica" color="#404040">
<span style="font-size:22px">
<b>
Feed-forward
</b>
</span>
</font>
</div>
</div>
</div>
</foreignObject>
<text class="ff-block" x="431" y="623" fill="#000000" font-family="Source Sans Pro" font-size="24px" text-anchor="middle">
Feed-forward
</text>
</switch>
</g>
<path d="M 431.5 427 L 431.5 328.97" fill="none" stroke="#000000" stroke-width="4" stroke-miterlimit="10" pointer-events="stroke"/>
<path d="M 431.5 321.47 L 436.5 331.47 L 431.5 328.97 L 426.5 331.47 Z" fill="#000000" stroke="#000000" stroke-width="4" stroke-miterlimit="10" pointer-events="all"/>
<path d="M 729.6 426.5 L 729.65 381.67 Q 729.67 371.67 729.64 361.67 L 729.56 329.45" fill="none" stroke="#000000" stroke-width="4" stroke-miterlimit="10" pointer-events="stroke"/>
<path d="M 729.54 321.95 L 734.56 331.93 L 729.56 329.45 L 724.56 331.96 Z" fill="#000000" stroke="#000000" stroke-width="4" stroke-miterlimit="10" pointer-events="all"/>
<path d="M 131.2 427 L 131.31 381.67 Q 131.33 371.67 131.27 361.67 L 131.06 329.64" fill="none" stroke="#000000" stroke-width="4" stroke-miterlimit="10" pointer-events="stroke"/>
<path d="M 131.07 322.14 L 136.06 332.14 L 131.06 329.64 L 126.06 332.13 Z" fill="#000000" stroke="#000000" stroke-width="4" stroke-miterlimit="10" pointer-events="all"/>
<rect class="transformer-block" x="30" y="426" width="1100" height="100" rx="15" ry="15" fill="#bac8d3" stroke="#23445d" stroke-width="2" pointer-events="all"/>
<g class="transformer-block" transform="translate(-0.5 -0.5)">
<switch>
<foreignObject style="overflow:visible;text-align:left" pointer-events="none" width="100%" height="100%" requiredFeatures="http://www.w3.org/TR/SVG11/feature#Extensibility">
<div xmlns="http://www.w3.org/1999/xhtml" style="display:flex;align-items:unsafe center;justify-content:unsafe center;width:1098px;height:1px;padding-top:476px;margin-left:31px">
<div style="box-sizing:border-box;font-size:0;text-align:center">
<div style="display:inline-block;font-size:24px;font-family:Source Sans Pro;color:#000;line-height:1.2;pointer-events:all;white-space:normal;word-wrap:normal">
<font color="#404040">
<b>
<font style="font-size:22px" face="Helvetica">
Transformer (2 layers)
</font>
<br style="font-size:24px"/>
</b>
</font>
</div>
</div>
</div>
</foreignObject>
<text x="580" y="483" fill="#000000" font-family="Source Sans Pro" font-size="24px" text-anchor="middle">
Transformer (2 layers)
</text>
</switch>
</g>
<path d="M 1030.5 1016 L 1030.61 996 Q 1030.67 986 1020.67 986 L 975 986 Q 965 986 965 976.99 L 965 967.97" fill="none" stroke="#000000" stroke-width="4" stroke-miterlimit="10" pointer-events="stroke"/>
<path d="M 965 960.47 L 970 970.47 L 965 967.97 L 960 970.47 Z" fill="#000000" stroke="#000000" stroke-width="4" stroke-miterlimit="10" pointer-events="all"/>
<path d="M 1030.5 1016 L 1030.61 996 Q 1030.67 986 1040.67 986 L 1085 986 Q 1095 986 1095 976 L 1095 837.97" fill="none" stroke="#000000" stroke-width="4" stroke-miterlimit="10" pointer-events="stroke"/>
<path d="M 1095 830.47 L 1100 840.47 L 1095 837.97 L 1090 840.47 Z" fill="#000000" stroke="#000000" stroke-width="4" stroke-miterlimit="10" pointer-events="all"/>
<rect class="cls-block" x="900.5" y="1016" width="260" height="40" rx="6" ry="6" fill="url(#mx-gradient-e6d0de-1-d5739d-1-s-0)" stroke="#996185" pointer-events="all"/>
<g transform="translate(-0.5 -0.5)">
<switch>
<foreignObject style="overflow:visible;text-align:left" pointer-events="none" width="100%" height="100%" requiredFeatures="http://www.w3.org/TR/SVG11/feature#Extensibility">
<div xmlns="http://www.w3.org/1999/xhtml" style="display:flex;align-items:unsafe center;justify-content:unsafe center;width:258px;height:1px;padding-top:1036px;margin-left:902px">
<div style="box-sizing:border-box;font-size:0;text-align:center">
<div style="display:inline-block;font-size:24px;font-family:Source Sans Pro;color:#000;line-height:1.2;pointer-events:all;white-space:normal;word-wrap:normal">
<font face="helvetica" color="#404040">
<span style="font-size:22px">
<b>
__CLS__
</b>
</span>
</font>
</div>
</div>
</div>
</foreignObject>
<text x="1031" y="1043" fill="#000000" font-family="Source Sans Pro" font-size="24px" text-anchor="middle">
__CLS__
</text>
</switch>
</g>
<path d="M 965 856 L 965 837.97" fill="none" stroke="#000000" stroke-width="4" stroke-miterlimit="10" pointer-events="stroke"/>
<path d="M 965 830.47 L 970 840.47 L 965 837.97 L 960 840.47 Z" fill="#000000" stroke="#000000" stroke-width="4" stroke-miterlimit="10" pointer-events="all"/>
<rect class="sparse-block" x="900" y="856" width="130" height="100" rx="15" ry="15" fill="#ffffff" stroke="#3b3b3b" pointer-events="all"/>
<g transform="translate(-0.5 -0.5)">
<switch>
<foreignObject style="overflow:visible;text-align:left" pointer-events="none" width="100%" height="100%" requiredFeatures="http://www.w3.org/TR/SVG11/feature#Extensibility">
<div xmlns="http://www.w3.org/1999/xhtml" style="display:flex;align-items:unsafe center;justify-content:unsafe center;width:128px;height:1px;padding-top:906px;margin-left:901px">
<div style="box-sizing:border-box;font-size:0;text-align:center">
<div style="display:inline-block;font-size:24px;font-family:Source Sans Pro;color:#fff;line-height:1.2;pointer-events:all;white-space:normal;word-wrap:normal">
<font face="helvetica" color="#404040">
<span style="font-size:22px">
<b>
Sparse features
</b>
</span>
</font>
</div>
</div>
</div>
</foreignObject>
<text x="965" y="913" fill="#FFFFFF" font-family="Source Sans Pro" font-size="24px" text-anchor="middle">
Sparse feat...
</text>
</switch>
</g>
<path d="M 1095 726 L 1095 706 Q 1095 696 1085 696 L 1040 696 Q 1030 696 1030 686.99 L 1030 677.97" fill="none" stroke="#000000" stroke-width="4" stroke-miterlimit="10" pointer-events="stroke"/>
<path d="M 1030 670.47 L 1035 680.47 L 1030 677.97 L 1025 680.47 Z" fill="#000000" stroke="#000000" stroke-width="4" stroke-miterlimit="10" pointer-events="all"/>
<rect class="pretrain-block" x="1030" y="726" width="130" height="100" rx="15" ry="15" fill="#ffffff" stroke="#3b3b3b" pointer-events="all"/>
<g transform="translate(-0.5 -0.5)">
<switch>
<foreignObject style="overflow:visible;text-align:left" pointer-events="none" width="100%" height="100%" requiredFeatures="http://www.w3.org/TR/SVG11/feature#Extensibility">
<div xmlns="http://www.w3.org/1999/xhtml" style="display:flex;align-items:unsafe center;justify-content:unsafe center;width:128px;height:1px;padding-top:776px;margin-left:1031px">
<div style="box-sizing:border-box;font-size:0;text-align:center">
<div style="display:inline-block;font-size:24px;font-family:Source Sans Pro;color:#fff;line-height:1.2;pointer-events:all;white-space:normal;word-wrap:normal">
<font face="helvetica" color="#404040">
<span style="font-size:22px">
<b>
Pretrained embedding
</b>
</span>
</font>
</div>
</div>
</div>
</foreignObject>
<text x="1095" y="783" fill="#FFFFFF" font-family="Source Sans Pro" font-size="24px" text-anchor="middle">
Pretrained...
</text>
</switch>
</g>
<path d="M 965 726 L 965 706 Q 965 696 975 696 L 1020 696 Q 1030 696 1030 686.99 L 1030 677.97" fill="none" stroke="#000000" stroke-width="4" stroke-miterlimit="10" pointer-events="stroke"/>
<path d="M 1030 670.47 L 1035 680.47 L 1030 677.97 L 1025 680.47 Z" fill="#000000" stroke="#000000" stroke-width="4" stroke-miterlimit="10" pointer-events="all"/>
<rect class="ff-block" x="900" y="726" width="130" height="100" rx="15" ry="15" fill="#b0e3e6" stroke="#0e8088" stroke-width="2" pointer-events="all"/>
<g transform="translate(-0.5 -0.5)">
<switch>
<foreignObject style="overflow:visible;text-align:left" pointer-events="none" width="100%" height="100%" requiredFeatures="http://www.w3.org/TR/SVG11/feature#Extensibility">
<div xmlns="http://www.w3.org/1999/xhtml" style="display:flex;align-items:unsafe center;justify-content:unsafe center;width:128px;height:1px;padding-top:776px;margin-left:901px">
<div style="box-sizing:border-box;font-size:0;text-align:center">
<div style="display:inline-block;font-size:24px;font-family:Source Sans Pro;color:#000;line-height:1.2;pointer-events:all;white-space:normal;word-wrap:normal">
<b style="color:#404040;font-family:&quot;helvetica&quot;;font-size:22px">
Feed-forward
</b>
</div>
</div>
</div>
</foreignObject>
<text x="965" y="783" fill="#000000" font-family="Source Sans Pro" font-size="24px" text-anchor="middle">
Feed-forward
</text>
</switch>
</g>
<path d="M 1030 566 L 1030 556 Q 1030 546 1029.83 541.82 L 1029.67 537.64" fill="none" stroke="#000000" stroke-width="4" stroke-miterlimit="10" pointer-events="stroke"/>
<path d="M 1029.67 530.14 L 1034.67 540.14 L 1029.67 537.64 L 1024.67 540.14 Z" fill="#000000" stroke="#000000" stroke-width="4" stroke-miterlimit="10" pointer-events="all"/>
<rect class="ff-block" x="930" y="566" width="200" height="100" rx="15" ry="15" fill="#b0e3e6" stroke="#0e8088" stroke-width="2" pointer-events="all"/>
<g transform="translate(-0.5 -0.5)">
<switch>
<foreignObject style="overflow:visible;text-align:left" pointer-events="none" width="100%" height="100%" requiredFeatures="http://www.w3.org/TR/SVG11/feature#Extensibility">
<div xmlns="http://www.w3.org/1999/xhtml" style="display:flex;align-items:unsafe center;justify-content:unsafe center;width:198px;height:1px;padding-top:616px;margin-left:931px">
<div style="box-sizing:border-box;font-size:0;text-align:center">
<div style="display:inline-block;font-size:24px;font-family:Source Sans Pro;color:#000;line-height:1.2;pointer-events:all;white-space:normal;word-wrap:normal">
<b style="color:#404040;font-family:&quot;helvetica&quot;;font-size:22px">
Feed-forward
</b>
</div>
</div>
</div>
</foreignObject>
<text x="1030" y="623" fill="#000000" font-family="Source Sans Pro" font-size="24px" text-anchor="middle">
Feed-forward
</text>
</switch>
</g>
<path d="M 1029.67 425.67 L 1029.67 415.83 Q 1029.67 406 1029.72 396 L 1030.43 268.97" fill="none" stroke="#000000" stroke-width="4" stroke-miterlimit="10" pointer-events="stroke"/>
<path d="M 1030.47 261.47 L 1035.42 271.5 L 1030.43 268.97 L 1025.42 271.44 Z" fill="#000000" stroke="#000000" stroke-width="4" stroke-miterlimit="10" pointer-events="all"/>
<path d="M 1115.5 209.5 L 1219.53 209.5" fill="none" stroke="#000000" stroke-width="4" stroke-miterlimit="10" pointer-events="stroke"/>
<path d="M 1227.03 209.5 L 1217.03 214.5 L 1219.53 209.5 L 1217.03 204.5 Z" fill="#000000" stroke="#000000" stroke-width="4" stroke-miterlimit="10" pointer-events="all"/>
<rect class="embedding-block" x="945.5" y="162" width="170" height="95" rx="14.25" ry="14.25" fill="#e1d5e7" stroke="#9673a6" pointer-events="all"/>
<g transform="translate(-0.5 -0.5)">
<switch>
<foreignObject style="overflow:visible;text-align:left" pointer-events="none" width="100%" height="100%" requiredFeatures="http://www.w3.org/TR/SVG11/feature#Extensibility">
<div xmlns="http://www.w3.org/1999/xhtml" style="display:flex;align-items:unsafe center;justify-content:unsafe center;width:168px;height:1px;padding-top:210px;margin-left:947px">
<div style="box-sizing:border-box;font-size:0;text-align:center">
<div style="display:inline-block;font-size:24px;font-family:Source Sans Pro;color:#fff;line-height:1.2;pointer-events:all;white-space:normal;word-wrap:normal">
<font style="font-size:22px" face="Helvetica" color="#404040">
<b>
Embedding Layer
</b>
</font>
</div>
</div>
</div>
</foreignObject>
<text x="1031" y="217" fill="#FFFFFF" font-family="Source Sans Pro" font-size="24px" text-anchor="middle">
Embedding Layer
</text>
</switch>
</g>
<path d="M 831 269.5 L 900 269.65 Q 910 269.67 910 259.67 L 910 60.67 Q 910 50.67 920 50.66 L 1298.03 50.5" fill="none" stroke="#000000" stroke-width="4" stroke-miterlimit="10" pointer-events="stroke"/>
<path d="M 1305.53 50.5 L 1295.53 55.51 L 1298.03 50.5 L 1295.53 45.51 Z" fill="#000000" stroke="#000000" stroke-width="4" stroke-miterlimit="10" pointer-events="all"/>
<rect class="crf-block" x="32" y="222" width="799" height="95" rx="14.25" ry="14.25" fill="#b1ddf0" stroke="#10739e" stroke-width="2" pointer-events="all"/>
<g class="crf-block" transform="translate(-0.5 -0.5)">
<switch>
<foreignObject style="overflow:visible;text-align:left" pointer-events="none" width="100%" height="100%" requiredFeatures="http://www.w3.org/TR/SVG11/feature#Extensibility">
<div xmlns="http://www.w3.org/1999/xhtml" style="display:flex;align-items:unsafe center;justify-content:unsafe center;width:797px;height:1px;padding-top:270px;margin-left:33px">
<div style="box-sizing:border-box;font-size:0;text-align:center">
<div style="display:inline-block;font-size:24px;font-family:Source Sans Pro;color:#000;line-height:1.2;pointer-events:all;white-space:normal;word-wrap:normal">
<font color="#404040">
<b>
<font class="crf-block"style="font-size:22px" face="Helvetica">
CRF
</font>
<br style="font-size:24px"/>
</b>
</font>
</div>
</div>
</div>
</foreignObject>
<text class="crf-block" x="432" y="277" fill="#000000" font-family="Source Sans Pro" font-size="24px" text-anchor="middle">
CRF
</text>
</switch>
</g>
<circle class="entity-loss-block" cx="1360.5" cy="50.5" fill="#f8cecc" stroke="#b85450" pointer-events="all" r="50.5"/>
<g transform="translate(-0.5 -0.5)">
<switch>
<foreignObject style="overflow:visible;text-align:left" pointer-events="none" width="100%" height="100%" requiredFeatures="http://www.w3.org/TR/SVG11/feature#Extensibility">
<div xmlns="http://www.w3.org/1999/xhtml" style="display:flex;align-items:unsafe center;justify-content:unsafe center;width:99px;height:1px;padding-top:51px;margin-left:1311px">
<div style="box-sizing:border-box;font-size:0;text-align:center">
<div style="display:inline-block;font-size:24px;font-family:Source Code Pro;color:#fff;line-height:1.2;pointer-events:all;white-space:normal;word-wrap:normal">
<font style="font-size:22px" face="Helvetica" color="#333333">
<b>
Entity Loss
</b>
</font>
</div>
</div>
</div>
</foreignObject>
<text x="1361" y="58" fill="#FFFFFF" font-family="Source Code Pro" font-size="24px" text-anchor="middle">
Entity Lo...
</text>
</switch>
</g>
<path d="M 1293 1016 L 1293 677.97" fill="none" stroke="#000000" stroke-width="4" stroke-miterlimit="10" pointer-events="stroke"/>
<path d="M 1293 670.47 L 1298 680.47 L 1293 677.97 L 1288 680.47 Z" fill="#000000" stroke="#000000" stroke-width="4" stroke-miterlimit="10" pointer-events="all"/>
<rect class="intent-block" x="1183.5" y="1016" width="219" height="40" rx="6" ry="6" fill="#f9f7ed" stroke="#36393d" pointer-events="all"/>
<g transform="translate(-0.5 -0.5)">
<switch>
<foreignObject style="overflow:visible;text-align:left" pointer-events="none" width="100%" height="100%" requiredFeatures="http://www.w3.org/TR/SVG11/feature#Extensibility">
<div xmlns="http://www.w3.org/1999/xhtml" style="display:flex;align-items:unsafe center;justify-content:unsafe center;width:217px;height:1px;padding-top:1036px;margin-left:1184px">
<div style="box-sizing:border-box;font-size:0;text-align:center">
<div style="display:inline-block;font-size:24px;font-family:Source Sans Pro;color:#000;line-height:1.2;pointer-events:all;white-space:normal;word-wrap:normal">
<font face="helvetica" color="#404040">
<span style="font-size:22px">
<b>
Intent: play_game
</b>
</span>
</font>
</div>
</div>
</div>
</foreignObject>
<text x="1293" y="1043" fill="#000000" font-family="Source Sans Pro" font-size="24px" text-anchor="middle">
Intent: play_game
</text>
</switch>
</g>
<path d="M 131 141 L 131 171.67 Q 131 181.67 131.02 191.67 L 131.05 210.5" fill="none" stroke="#000000" stroke-width="4" stroke-miterlimit="10" pointer-events="stroke"/>
<path d="M 131.07 218 L 126.05 208.01 L 131.05 210.5 L 136.05 207.99 Z" fill="#000000" stroke="#000000" stroke-width="4" stroke-miterlimit="10" pointer-events="all"/>
<rect x="1" y="101" width="260" height="40" rx="6" ry="6" fill="#f9f7ed" stroke="#36393d" pointer-events="all"/>
<g transform="translate(-0.5 -0.5)">
<switch>
<foreignObject style="overflow:visible;text-align:left" pointer-events="none" width="100%" height="100%" requiredFeatures="http://www.w3.org/TR/SVG11/feature#Extensibility">
<div xmlns="http://www.w3.org/1999/xhtml" style="display:flex;align-items:unsafe center;justify-content:unsafe center;width:258px;height:1px;padding-top:121px;margin-left:2px">
<div style="box-sizing:border-box;font-size:0;text-align:center">
<div style="display:inline-block;font-size:24px;font-family:Source Sans Pro;color:#000;line-height:1.2;pointer-events:all;white-space:normal;word-wrap:normal">
<font face="helvetica" color="#404040">
<span style="font-size:22px">
<b>
Entity: O
</b>
</span>
</font>
</div>
</div>
</div>
</foreignObject>
<text x="131" y="128" fill="#000000" font-family="Source Sans Pro" font-size="24px" text-anchor="middle">
Entity: O
</text>
</switch>
</g>
<path d="M 431.5 141 L 431.5 210.03" fill="none" stroke="#000000" stroke-width="4" stroke-miterlimit="10" pointer-events="stroke"/>
<path d="M 431.5 217.53 L 426.5 207.53 L 431.5 210.03 L 436.5 207.53 Z" fill="#000000" stroke="#000000" stroke-width="4" stroke-miterlimit="10" pointer-events="all"/>
<rect x="301.5" y="101" width="260" height="40" rx="6" ry="6" fill="#f9f7ed" stroke="#36393d" pointer-events="all"/>
<g transform="translate(-0.5 -0.5)">
<switch>
<foreignObject style="overflow:visible;text-align:left" pointer-events="none" width="100%" height="100%" requiredFeatures="http://www.w3.org/TR/SVG11/feature#Extensibility">
<div xmlns="http://www.w3.org/1999/xhtml" style="display:flex;align-items:unsafe center;justify-content:unsafe center;width:258px;height:1px;padding-top:121px;margin-left:303px">
<div style="box-sizing:border-box;font-size:0;text-align:center">
<div style="display:inline-block;font-size:24px;font-family:Source Sans Pro;color:#000;line-height:1.2;pointer-events:all;white-space:normal;word-wrap:normal">
<b style="color:#404040;font-family:&quot;helvetica&quot;;font-size:22px">
Entity:
</b>
<font face="helvetica" color="#404040">
<span style="font-size:22px">
<b>
game_name
</b>
</span>
</font>
</div>
</div>
</div>
</foreignObject>
<text x="432" y="128" fill="#000000" font-family="Source Sans Pro" font-size="24px" text-anchor="middle">
Entity: game_name
</text>
</switch>
</g>
<path d="M 732 141 L 732 171.67 Q 732 181.67 731.98 191.67 L 731.95 211.07" fill="none" stroke="#000000" stroke-width="4" stroke-miterlimit="10" pointer-events="stroke"/>
<path d="M 731.93 218.57 L 726.95 208.56 L 731.95 211.07 L 736.95 208.58 Z" fill="#000000" stroke="#000000" stroke-width="4" stroke-miterlimit="10" pointer-events="all"/>
<rect x="602" y="101" width="260" height="40" rx="6" ry="6" fill="#f9f7ed" stroke="#36393d" pointer-events="all"/>
<g transform="translate(-0.5 -0.5)">
<switch>
<foreignObject style="overflow:visible;text-align:left" pointer-events="none" width="100%" height="100%" requiredFeatures="http://www.w3.org/TR/SVG11/feature#Extensibility">
<div xmlns="http://www.w3.org/1999/xhtml" style="display:flex;align-items:unsafe center;justify-content:unsafe center;width:258px;height:1px;padding-top:121px;margin-left:603px">
<div style="box-sizing:border-box;font-size:0;text-align:center">
<div style="display:inline-block;font-size:24px;font-family:Source Sans Pro;color:#000;line-height:1.2;pointer-events:all;white-space:normal;word-wrap:normal">
<b style="color:#404040;font-family:&quot;helvetica&quot;;font-size:22px">
Entity:
</b>
<font face="helvetica" color="#404040">
<span style="font-size:22px">
<b>
game_name
</b>
</span>
</font>
</div>
</div>
</div>
</foreignObject>
<text x="732" y="128" fill="#000000" font-family="Source Sans Pro" font-size="24px" text-anchor="middle">
Entity: game_name
</text>
</switch>
</g>
<circle class="total-loss-block" cx="1570.5" cy="50.5" fill="#f8cecc" stroke="#b85450" pointer-events="all" r="50.5"/>
<g transform="translate(-0.5 -0.5)">
<switch>
<foreignObject style="overflow:visible;text-align:left" pointer-events="none" width="100%" height="100%" requiredFeatures="http://www.w3.org/TR/SVG11/feature#Extensibility">
<div xmlns="http://www.w3.org/1999/xhtml" style="display:flex;align-items:unsafe center;justify-content:unsafe center;width:99px;height:1px;padding-top:51px;margin-left:1521px">
<div style="box-sizing:border-box;font-size:0;text-align:center">
<div style="display:inline-block;font-size:24px;font-family:Source Code Pro;color:#fff;line-height:1.2;pointer-events:all;white-space:normal;word-wrap:normal">
<font style="font-size:22px" face="Helvetica" color="#333333">
<b>
Total Loss
</b>
</font>
</div>
</div>
</div>
</foreignObject>
<text x="1571" y="58" fill="#FFFFFF" font-family="Source Code Pro" font-size="24px" text-anchor="middle">
Total Loss
</text>
</switch>
</g>
<path d="M 1293 571 L 1293 268.97" fill="none" stroke="#000000" stroke-width="4" stroke-miterlimit="10" pointer-events="stroke"/>
<path d="M 1293 261.47 L 1298 271.47 L 1293 268.97 L 1288 271.47 Z" fill="#000000" stroke="#000000" stroke-width="4" stroke-miterlimit="10" pointer-events="all"/>
<path d="M 1768.5 361 L 1768.5 112.97" fill="none" stroke="#000000" stroke-width="4" stroke-miterlimit="10" pointer-events="stroke"/>
<path d="M 1768.5 105.47 L 1773.5 115.47 L 1768.5 112.97 L 1763.5 115.47 Z" fill="#000000" stroke="#000000" stroke-width="4" stroke-miterlimit="10" pointer-events="all"/>
<rect class="similarity-block" x="1707" y="361" width="123" height="95" rx="14.25" ry="14.25" fill="#f8cecc" stroke="#b85450" pointer-events="all"/>
<g transform="translate(-0.5 -0.5)">
<switch>
<foreignObject style="overflow:visible;text-align:left" pointer-events="none" width="100%" height="100%" requiredFeatures="http://www.w3.org/TR/SVG11/feature#Extensibility">
<div xmlns="http://www.w3.org/1999/xhtml" style="display:flex;align-items:unsafe center;justify-content:unsafe center;width:121px;height:1px;padding-top:409px;margin-left:1708px">
<div style="box-sizing:border-box;font-size:0;text-align:center">
<div style="display:inline-block;font-size:24px;font-family:Source Sans Pro;color:#fff;line-height:1.2;pointer-events:all;white-space:normal;word-wrap:normal">
<font style="font-size:22px" face="Helvetica" color="#404040">
<b>
Similarity
</b>
</font>
</div>
</div>
</div>
</foreignObject>
<text x="1769" y="416" fill="#FFFFFF" font-family="Source Sans Pro" font-size="24px" text-anchor="middle">
Similarity
</text>
</switch>
</g>
<rect class="embedding-block" x="1467" y="307" width="170" height="95" rx="14.25" ry="14.25" fill="#fff2cc" stroke="#d6b656" pointer-events="all"/>
<g transform="translate(-0.5 -0.5)">
<switch>
<foreignObject style="overflow:visible;text-align:left" pointer-events="none" width="100%" height="100%" requiredFeatures="http://www.w3.org/TR/SVG11/feature#Extensibility">
<div xmlns="http://www.w3.org/1999/xhtml" style="display:flex;align-items:unsafe center;justify-content:unsafe center;width:168px;height:1px;padding-top:355px;margin-left:1468px">
<div style="box-sizing:border-box;font-size:0;text-align:center">
<div style="display:inline-block;font-size:24px;font-family:Source Sans Pro;color:#000;line-height:1.2;pointer-events:all;white-space:normal;word-wrap:normal">
<font style="font-size:22px" face="Helvetica" color="#404040">
<b>
Embedding Layer
</b>
</font>
</div>
</div>
</div>
</foreignObject>
<text x="1552" y="362" fill="#000000" font-family="Source Sans Pro" font-size="24px" text-anchor="middle">
Embedding Layer
</text>
</switch>
</g>
<rect class="mask-block" x="1430" y="1016" width="260" height="40" rx="6" ry="6" fill="#f9f7ed" stroke="#36393d" pointer-events="all"/>
<g class="mask-block" transform="translate(-0.5 -0.5)">
<switch>
<foreignObject style="overflow:visible;text-align:left" pointer-events="none" width="100%" height="100%" requiredFeatures="http://www.w3.org/TR/SVG11/feature#Extensibility">
<div xmlns="http://www.w3.org/1999/xhtml" style="display:flex;align-items:unsafe center;justify-content:unsafe center;width:258px;height:1px;padding-top:1036px;margin-left:1431px">
<div style="box-sizing:border-box;font-size:0;text-align:center">
<div style="display:inline-block;font-size:24px;font-family:Source Sans Pro;color:#000;line-height:1.2;pointer-events:all;white-space:normal;word-wrap:normal">
<font face="helvetica" color="#404040">
<span style="font-size:22px">
<b>
pong
</b>
</span>
</font>
</div>
</div>
</div>
</foreignObject>
<text x="1560" y="1043" fill="#000000" font-family="Source Sans Pro" font-size="24px" text-anchor="middle">
pong
</text>
</switch>
</g>
<path d="M 731 423 L 731 376 Q 731 366 741 366 L 1410 366 Q 1420 366 1430 365.84 L 1454.52 365.43" fill="none" stroke="#000000" stroke-width="4" stroke-miterlimit="10" pointer-events="stroke"/>
<path d="M 1462.02 365.31 L 1452.1 370.47 L 1454.52 365.43 L 1451.94 360.47 Z" fill="#000000" stroke="#000000" stroke-width="4" stroke-miterlimit="10" pointer-events="all"/>
<circle class="mask-loss-block" cx="1768.5" cy="50.5" fill="#f8cecc" stroke="#b85450" pointer-events="all" r="50.5"/>
<g transform="translate(-0.5 -0.5)">
<switch>
<foreignObject style="overflow:visible;text-align:left" pointer-events="none" width="100%" height="100%" requiredFeatures="http://www.w3.org/TR/SVG11/feature#Extensibility">
<div xmlns="http://www.w3.org/1999/xhtml" style="display:flex;align-items:unsafe center;justify-content:unsafe center;width:99px;height:1px;padding-top:51px;margin-left:1719px">
<div style="box-sizing:border-box;font-size:0;text-align:center">
<div style="display:inline-block;font-size:24px;font-family:Source Code Pro;color:#fff;line-height:1.2;pointer-events:all;white-space:normal;word-wrap:normal">
<font style="font-size:22px" face="Helvetica" color="#333333">
<b>
Mask Loss
</b>
</font>
</div>
</div>
</div>
</foreignObject>
<text x="1769" y="58" fill="#FFFFFF" font-family="Source Code Pro" font-size="24px" text-anchor="middle">
Mask Loss
</text>
</switch>
</g>
<path d="M 1637 464.5 L 1657 464.61 Q 1667 464.67 1667 454.67 L 1667 418.33 Q 1667 408.33 1677 408.37 L 1695.03 408.45" fill="none" stroke="#000000" stroke-width="4" stroke-miterlimit="10" pointer-events="stroke"/>
<path d="M 1702.53 408.48 L 1692.51 413.44 L 1695.03 408.45 L 1692.55 403.44 Z" fill="#000000" stroke="#000000" stroke-width="4" stroke-miterlimit="10" pointer-events="all"/>
<rect class="embedding-block" x="1467" y="417" width="170" height="95" rx="14.25" ry="14.25" fill="#ffe6cc" stroke="#d79b00" pointer-events="all"/>
<g transform="translate(-0.5 -0.5)">
<switch>
<foreignObject style="overflow:visible;text-align:left" pointer-events="none" width="100%" height="100%" requiredFeatures="http://www.w3.org/TR/SVG11/feature#Extensibility">
<div xmlns="http://www.w3.org/1999/xhtml" style="display:flex;align-items:unsafe center;justify-content:unsafe center;width:168px;height:1px;padding-top:465px;margin-left:1468px">
<div style="box-sizing:border-box;font-size:0;text-align:center">
<div style="display:inline-block;font-size:24px;font-family:Source Sans Pro;color:#000;line-height:1.2;pointer-events:all;white-space:normal;word-wrap:normal">
<font style="font-size:22px" face="Helvetica" color="#404040">
<b>
Embedding Layer
</b>
</font>
</div>
</div>
</div>
</foreignObject>
<text x="1552" y="472" fill="#000000" font-family="Source Sans Pro" font-size="24px" text-anchor="middle">
Embedding Layer
</text>
</switch>
</g>
<path d="M 1354.5 209.5 L 1407.01 207.4 Q 1417 207 1427 206.95 L 1508.03 206.56" fill="none" stroke="#000000" stroke-width="4" stroke-miterlimit="10" pointer-events="stroke"/>
<path d="M 1515.53 206.52 L 1505.55 211.57 L 1508.03 206.56 L 1505.5 201.57 Z" fill="#000000" stroke="#000000" stroke-width="4" stroke-miterlimit="10" pointer-events="all"/>
<rect class="similarity-block" x="1231.5" y="162" width="123" height="95" rx="14.25" ry="14.25" fill="#f8cecc" stroke="#b85450" pointer-events="all"/>
<g transform="translate(-0.5 -0.5)">
<switch>
<foreignObject style="overflow:visible;text-align:left" pointer-events="none" width="100%" height="100%" requiredFeatures="http://www.w3.org/TR/SVG11/feature#Extensibility">
<div xmlns="http://www.w3.org/1999/xhtml" style="display:flex;align-items:unsafe center;justify-content:unsafe center;width:121px;height:1px;padding-top:210px;margin-left:1233px">
<div style="box-sizing:border-box;font-size:0;text-align:center">
<div style="display:inline-block;font-size:24px;font-family:Source Sans Pro;color:#000;line-height:1.2;pointer-events:all;white-space:normal;word-wrap:normal">
<font style="font-size:22px" face="Helvetica" color="#404040">
<b>
Similarity
</b>
</font>
</div>
</div>
</div>
</foreignObject>
<text x="1293" y="217" fill="#000000" font-family="Source Sans Pro" font-size="24px" text-anchor="middle">
Similarity
</text>
</switch>
</g>
<rect class="embedding-block" x="1208" y="571" width="170" height="95" rx="14.25" ry="14.25" fill="#dae8fc" stroke="#6c8ebf" pointer-events="all"/>
<g transform="translate(-0.5 -0.5)">
<switch>
<foreignObject style="overflow:visible;text-align:left" pointer-events="none" width="100%" height="100%" requiredFeatures="http://www.w3.org/TR/SVG11/feature#Extensibility">
<div xmlns="http://www.w3.org/1999/xhtml" style="display:flex;align-items:unsafe center;justify-content:unsafe center;width:168px;height:1px;padding-top:619px;margin-left:1209px">
<div style="box-sizing:border-box;font-size:0;text-align:center">
<div style="display:inline-block;font-size:24px;font-family:Source Sans Pro;color:#fff;line-height:1.2;pointer-events:all;white-space:normal;word-wrap:normal">
<font style="font-size:22px" face="Helvetica" color="#404040">
<b>
Embedding Layer
</b>
</font>
</div>
</div>
</div>
</foreignObject>
<text x="1293" y="626" fill="#FFFFFF" font-family="Source Sans Pro" font-size="24px" text-anchor="middle">
Embedding Layer
</text>
</switch>
</g>
<path d="M 130 1016 L 130 996 Q 130 986 140 986 L 185 986 Q 195 986 195 976 L 195 837.97" fill="none" stroke="#000000" stroke-width="4" stroke-miterlimit="10" pointer-events="stroke"/>
<path d="M 195 830.47 L 200 840.47 L 195 837.97 L 190 840.47 Z" fill="#000000" stroke="#000000" stroke-width="4" stroke-miterlimit="10" pointer-events="all"/>
<path d="M 1560 1016 L 1560 996 Q 1560 986 1550 986 L 1505 986 Q 1495 986 1495 976.99 L 1495 967.97" fill="none" stroke="#000000" stroke-width="4" stroke-miterlimit="10" pointer-events="stroke"/>
<path d="M 1495 960.47 L 1500 970.47 L 1495 967.97 L 1490 970.47 Z" fill="#000000" stroke="#000000" stroke-width="4" stroke-miterlimit="10" pointer-events="all"/>
<rect class="sparse-block" x="1430" y="856" width="130" height="100" rx="15" ry="15" fill="#ffffff" stroke="#3b3b3b" pointer-events="all"/>
<g transform="translate(-0.5 -0.5)">
<switch>
<foreignObject style="overflow:visible;text-align:left" pointer-events="none" width="100%" height="100%" requiredFeatures="http://www.w3.org/TR/SVG11/feature#Extensibility">
<div xmlns="http://www.w3.org/1999/xhtml" style="display:flex;align-items:unsafe center;justify-content:unsafe center;width:128px;height:1px;padding-top:906px;margin-left:1431px">
<div style="box-sizing:border-box;font-size:0;text-align:center">
<div style="display:inline-block;font-size:24px;font-family:Source Sans Pro;color:#fff;line-height:1.2;pointer-events:all;white-space:normal;word-wrap:normal">
<font face="helvetica" color="#404040">
<span style="font-size:22px">
<b>
Sparse features
</b>
</span>
</font>
</div>
</div>
</div>
</foreignObject>
<text x="1495" y="913" fill="#FFFFFF" font-family="Source Sans Pro" font-size="24px" text-anchor="middle">
Sparse feat...
</text>
</switch>
</g>
<path d="M 1625 726 L 1625 706 Q 1625 696 1615 696 L 1570 696 Q 1560 696 1560 686.99 L 1560 677.97" fill="none" stroke="#000000" stroke-width="4" stroke-miterlimit="10" pointer-events="stroke"/>
<path d="M 1560 670.47 L 1565 680.47 L 1560 677.97 L 1555 680.47 Z" fill="#000000" stroke="#000000" stroke-width="4" stroke-miterlimit="10" pointer-events="all"/>
<rect class="pretrain-block" x="1560" y="726" width="130" height="100" rx="15" ry="15" fill="#ffffff" stroke="#3b3b3b" pointer-events="all"/>
<g transform="translate(-0.5 -0.5)">
<switch>
<foreignObject style="overflow:visible;text-align:left" pointer-events="none" width="100%" height="100%" requiredFeatures="http://www.w3.org/TR/SVG11/feature#Extensibility">
<div xmlns="http://www.w3.org/1999/xhtml" style="display:flex;align-items:unsafe center;justify-content:unsafe center;width:128px;height:1px;padding-top:776px;margin-left:1561px">
<div style="box-sizing:border-box;font-size:0;text-align:center">
<div style="display:inline-block;font-size:24px;font-family:Source Sans Pro;color:#fff;line-height:1.2;pointer-events:all;white-space:normal;word-wrap:normal">
<font face="helvetica" color="#404040">
<span style="font-size:22px">
<b>
Pretrained embedding
</b>
</span>
</font>
</div>
</div>
</div>
</foreignObject>
<text x="1625" y="783" fill="#FFFFFF" font-family="Source Sans Pro" font-size="24px" text-anchor="middle">
Pretrained...
</text>
</switch>
</g>
<path d="M 1495 726 L 1495 706 Q 1495 696 1505 696 L 1550 696 Q 1560 696 1560 686.99 L 1560 677.97" fill="none" stroke="#000000" stroke-width="4" stroke-miterlimit="10" pointer-events="stroke"/>
<path d="M 1560 670.47 L 1565 680.47 L 1560 677.97 L 1555 680.47 Z" fill="#000000" stroke="#000000" stroke-width="4" stroke-miterlimit="10" pointer-events="all"/>
<rect class="ff-block" x="1430" y="726" width="130" height="100" rx="15" ry="15" fill="#b0e3e6" stroke="#0e8088" stroke-width="2" pointer-events="all"/>
<g transform="translate(-0.5 -0.5)">
<switch>
<foreignObject style="overflow:visible;text-align:left" pointer-events="none" width="100%" height="100%" requiredFeatures="http://www.w3.org/TR/SVG11/feature#Extensibility">
<div xmlns="http://www.w3.org/1999/xhtml" style="display:flex;align-items:unsafe center;justify-content:unsafe center;width:128px;height:1px;padding-top:776px;margin-left:1431px">
<div style="box-sizing:border-box;font-size:0;text-align:center">
<div style="display:inline-block;font-size:24px;font-family:Source Sans Pro;color:#000;line-height:1.2;pointer-events:all;white-space:normal;word-wrap:normal">
<b style="color:#404040;font-family:&quot;helvetica&quot;;font-size:22px">
Feed-forward
</b>
</div>
</div>
</div>
</foreignObject>
<text x="1495" y="783" fill="#000000" font-family="Source Sans Pro" font-size="24px" text-anchor="middle">
Feed-forward
</text>
</switch>
</g>
<rect class="ff-block" x="1460" y="566" width="200" height="100" rx="15" ry="15" fill="#b0e3e6" stroke="#0e8088" stroke-width="2" pointer-events="all"/>
<g transform="translate(-0.5 -0.5)">
<switch>
<foreignObject style="overflow:visible;text-align:left" pointer-events="none" width="100%" height="100%" requiredFeatures="http://www.w3.org/TR/SVG11/feature#Extensibility">
<div xmlns="http://www.w3.org/1999/xhtml" style="display:flex;align-items:unsafe center;justify-content:unsafe center;width:198px;height:1px;padding-top:616px;margin-left:1461px">
<div style="box-sizing:border-box;font-size:0;text-align:center">
<div style="display:inline-block;font-size:24px;font-family:Source Sans Pro;color:#000;line-height:1.2;pointer-events:all;white-space:normal;word-wrap:normal">
<b style="color:#404040;font-family:&quot;helvetica&quot;;font-size:22px">
Feed-forward
</b>
</div>
</div>
</div>
</foreignObject>
<text x="1560" y="623" fill="#000000" font-family="Source Sans Pro" font-size="24px" text-anchor="middle">
Feed-forward
</text>
</switch>
</g>
<path d="M 1560 1016 L 1560 996 Q 1560 986 1570 986 L 1615 986 Q 1625 986 1625 976 L 1625 837.97" fill="none" stroke="#000000" stroke-width="4" stroke-miterlimit="10" pointer-events="stroke"/>
<path d="M 1625 830.47 L 1630 840.47 L 1625 837.97 L 1620 840.47 Z" fill="#000000" stroke="#000000" stroke-width="4" stroke-miterlimit="10" pointer-events="all"/>
<path d="M 1637 354.5 L 1657 354.61 Q 1667 354.67 1667 364.67 L 1667 398.33 Q 1667 408.33 1677 408.37 L 1695.03 408.45" fill="none" stroke="#000000" stroke-width="4" stroke-miterlimit="10" pointer-events="stroke"/>
<path d="M 1702.53 408.48 L 1692.51 413.44 L 1695.03 408.45 L 1692.55 403.44 Z" fill="#000000" stroke="#000000" stroke-width="4" stroke-miterlimit="10" pointer-events="all"/>
<path d="M 1560 566 L 1560 528.97" fill="none" stroke="#000000" stroke-width="4" stroke-miterlimit="10" pointer-events="stroke"/>
<path d="M 1560 521.47 L 1565 531.47 L 1560 528.97 L 1555 531.47 Z" fill="#000000" stroke="#000000" stroke-width="4" stroke-miterlimit="10" pointer-events="all"/>
<path d="M 1495 856 L 1495 846 Q 1495 836 1495 841 L 1495 843.5 Q 1495 846 1495 841.99 L 1495 837.97" fill="none" stroke="#000000" stroke-width="4" stroke-miterlimit="10" pointer-events="stroke"/>
<path d="M 1495 830.47 L 1500 840.47 L 1495 837.97 L 1490 840.47 Z" fill="#000000" stroke="#000000" stroke-width="4" stroke-miterlimit="10" pointer-events="all"/>
<path d="M 1412.72 50.7 L 1510 50.67 Q 1520 50.67 1514.01 50.59 L 1508.03 50.52" fill="none" stroke="#000000" stroke-width="4" stroke-miterlimit="10" pointer-events="stroke"/>
<path d="M 1515.53 50.51 L 1505.54 55.53 L 1508.03 50.52 L 1505.52 45.53 Z" fill="#000000" stroke="#000000" stroke-width="4" stroke-miterlimit="10" pointer-events="all"/>
<path d="M 1570.5 156 L 1570.5 112.97" fill="none" stroke="#000000" stroke-width="4" stroke-miterlimit="10" pointer-events="stroke"/>
<path d="M 1570.5 105.47 L 1575.5 115.47 L 1570.5 112.97 L 1565.5 115.47 Z" fill="#000000" stroke="#000000" stroke-width="4" stroke-miterlimit="10" pointer-events="all"/>
<path d="M 1718 50.5 L 1632.97 50.5" fill="none" stroke="#000000" stroke-width="4" stroke-miterlimit="10" pointer-events="stroke"/>
<path d="M 1625.47 50.5 L 1635.47 45.5 L 1632.97 50.5 L 1635.47 55.5 Z" fill="#000000" stroke="#000000" stroke-width="4" stroke-miterlimit="10" pointer-events="all"/>
</g>
</svg>
<br>
<br>
<ul id="output">
</ul>
</div>
<style>
p{
font-family: "helvetica";
}
span{
font-family: "helvetica";
}
li{
font-family: "helvetica";
}
</style>
<script>
var data = {
"mask-block": {
"use_masked_language_model": "turns masking on/off, default = False"
},
"cls-block": {
"intent_classification": "If 'True' intent classification is trained and intents are predicted."
},
"intent-block": {
"intent_classification": "If 'True' intent classification is trained and intents are predicted."
},
"similarity-block": {
"similarity_type": "Type of similarity measure to use, either 'auto', 'cosine' or 'inner'."
},
"entity-loss-block":{
"entity_recognition": "If 'True' entity recognition is trained and entities are extracted."
},
"intent-loss-block":{
"intent_classification": "If 'True' intent classification is trained and intents are predicted."
},
"mask-loss-block":{
"use_masked_language_model": "turns masking on/off, default = False"
},
"total-loss-block":{
"random_seed": " Set random seed to any 'int' to get reproducible results.",
"learning_rate": "Initial learning rate for the optimizer.",
"scale_loss": "Scale loss inverse proportionally to confidence of correct prediction.",
"regularization_constant": "The scale of regularization."
},
"transformer-block": {
"number_of_transformer_layers" : "sets the number of layers in this block",
"number_of_attention_heads": "sets the number of attention heads",
"use_value_relative_attention": "use_value_relative_attention",
"transformer_size" : "what size of embedding comes out of this block, default = 256"
},
"crf-block": {
"transformer_size" : "the size of the tensor that comes into this block",
"entity_recognition": "have DIET also handle entity detection, default = True"
},
"ff-block": {
"weight_sparsity": "Sparsity of the weights in dense layers.",
"dense_dimension.text" : "Dense dimension for sparse features if no dense features are present. Default=512.",
"dense_dimension.label" : "Dense dimension for sparse features if no dense features are present. Default=20."
},
"sparse-block": {
"dense_dimension.text" : "Dense dimension for sparse features if no dense features are present. Default=512.",
"dense_dimension.label" : "Dense dimension for sparse features if no dense features are present. Default=20.",
"FEATURIZERS": "this is a parameter outside of the scope of DIET but sparse features from config.yml will enter here"
},
"pretrain-block": {
"FEATURIZERS": "this is a parameter outside of the scope of DIET but sparse features from config.yml will enter here"
},
"embedding-block": {
"embedding_dimension": "Dimension size of embedding vectors."
}
}
function add_behavior(cls){
d3.selectAll("." + cls)
.on("mouseenter", function(d){
Object.keys(data[cls]).map(function(d){
var li = d3.select("#output").append("li");
li.append("code").text(d)
li.append("span").text(" : " + data[cls][d])
})
d3.select(this).style('stroke-width', 5);
})
.on("mouseout", function(d){
d3.select("#output").text("")
d3.select(this).style('stroke-width', 2);
});
}
Object.keys(data).map(add_behavior);
</script>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment