1<!DOCTYPE html> 2<html lang="en"> 3<head> 4<meta charset="UTF-8"> 5 6<!-- If IE use the latest rendering engine --> 7<meta http-equiv="X-UA-Compatible" content="IE=edge"> 8 9<!-- Set the page to the width of the device and set the zoon level --> 10<meta name="viewport" content="width = device-width, initial-scale = 1"> 11<title>Tensorflow Conversion Tooling & Logging</title> 12<link rel="stylesheet" type="text/css" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css"> 13 14<style> 15.jumbotron{ 16 background-color:#2E2D88; 17 color:white; 18} 19/* Adds borders for tabs */ 20.tab-content { 21 border-left: 1px solid #ddd; 22 border-right: 1px solid #ddd; 23 border-bottom: 1px solid #ddd; 24 padding: 10px; 25} 26.nav-tabs { 27 margin-bottom: 0; 28} 29</style> 30 31</head> 32<body> 33 34<!-- CONTAINERS --> 35<!-- container puts padding around itself while container-fluid fills the whole screen. Bootstap grids require a container. --> 36<div class="container"> 37 38<!-- page-header adds space aroundtext and enlarges it. It also adds an underline at the end --> 39<div class="page-header"> 40<h1>Tensorflow Conversion Tooling & Logging</h1> 41</div> 42 43<!-- jumbotron enlarges fonts and puts everything in a gray box with rounded corners. If jumbotron is outside a container it fills the total width. You can change the styles by placing the changes after the Bootstrap CDN link --> 44<div class="container"> 45 46<div class="input-group mb-3" style="display: none;"> 47 <div class="input-group-prepend"> 48 <div class="input-group-text"> 49 <label> 50 <input type="checkbox" aria-label="Checkbox for following text input"> I've reviewed the <a href="https://www.tensorflow.org/">data collection policy</a> and agree to submit this data to Google. 51 <button type="button" class="btn btn-primary">Submit Conversion Log</button> 52 </label> 53 </div> 54 </div> 55</div> 56 57 58<h2>Conversion Summary 59 <span class="label label-success">Success</span> 60</h2> 61<a href="#conversionlog">Jump to conversion log</a> 62 63<ul class="list-group"> 64 <li class="list-group-item">Total ops used before conversion: 9</li> 65 <li class="list-group-item">Total ops used post conversion: 7 66 <span class="badge badge-pill badge-primary">5 Built-in Ops</span> 67 <span class="badge badge-pill badge-primary">1 Select Ops</span> 68 <span class="badge badge-pill badge-primary">1 Custom Ops</span> 69 </li> 70 <li class="list-group-item">Post-training quantization is applied.</li> 71</ul> 72 73<h2>Operator Profile</h2> 74 75<div class="panel-group"> 76 <div class="panel panel-default"> 77 <div class="panel-heading"> 78 <h4 class="panel-title"> 79 <a data-toggle="collapse" href="#collapse1"><b>Pre-conversion Op Profile</b></a> 80 </h4> 81 </div> 82 <div id="collapse1" class="panel-collapse collapse in"> 83 <div class="panel-body"> 84 <div class="flex-container"> 85 <!-- You can constrain the columns if you want --> 86 <div class="row"> 87 <!-- The table class adds nice spacing and the other classes add additional style --> 88 <table class="table table-bordered table-striped table-hover"> 89 <thead></thead> 90 <tbody> 91 <tr> 92 <!-- Use text alignment like text-center or text-right --> 93 <th class="text-center">Operations Used</td> 94 <th class="text-center">Input Types</td> 95 </tr> 96 <tr><td>Conv1</td><td></td></tr><tr><td>Conv2</td><td></td></tr><tr><td>Identity</td><td></td></tr><tr><td>Reshape</td><td></td></tr><tr><td>Dense</td><td></td></tr><tr><td>Dense</td><td></td></tr><tr><td>CustomOp</td><td></td></tr><tr><td>AvgPool3D</td><td></td></tr><tr><td>Softmax</td><td></td></tr> 97 </tbody> 98 </table> 99 </div> 100 </div> 101 </div> 102 </div> 103 </div> 104</div> 105 106<div class="panel-group"> 107 <div class="panel panel-default"> 108 <div class="panel-heading"> 109 <h4 class="panel-title"> 110 <a data-toggle="collapse" href="#collapse2"><b>Post-conversion Op Profile</b></a> 111 </h4> 112 </div> 113 <div id="collapse2" class="panel-collapse collapse in"> 114 <div class="panel-body"> 115 <div class="flex-container"> 116 <div class="row"> 117 <!-- The table class adds nice spacing and the other classes add additional style --> 118 <table class="table table-bordered table-striped table-hover"> 119 <thead></thead> 120 <tbody> 121 <tr> 122 <!-- Use text alignment like text-center or text-right --> 123 <th class="text-center">Operations Used</td> 124 <th class="text-center">Supported</td> 125 </tr> 126 <tr><td>Conv1</td><td>BUILT-IN</td></tr><tr><td>Conv2</td><td>BUILT-IN</td></tr><tr><td>Dense</td><td>BUILT-IN</td></tr><tr><td>Dense</td><td>BUILT-IN</td></tr><tr><td>CustomOp</td><td>CUSTOM OP</td></tr><tr><td>AvgPool3D</td><td>SELECT OP</td></tr><tr><td>Softmax</td><td>BUILT-IN</td></tr> 127 </tbody> 128 </table> 129 </div> 130 </div> 131 </div> 132 </div> 133 </div> 134</div> 135 136<h2>Graph Visualization</h2> 137<div class="container"> 138 <div class="row"> 139 <div> 140 <script src="https://d3js.org/d3.v4.min.js"></script> 141 <script src="https://unpkg.com/viz.js@1.8.1/viz.js" type="javascript/worker"></script> 142 <script src="https://unpkg.com/d3-graphviz@2.6.1/build/d3-graphviz.js"></script> 143 <!-- The table class adds nice spacing and the other classes add additional style --> 144 <table class="table table-bordered table-striped table-hover"> 145 <thead> 146 <tr> 147 <td colspan="4"><b>Compare the model before/after conversion</b></td> 148 </tr> 149 </thead> 150 <tbody> 151 <tr> 152 153 <!-- Use text alignment like text-center or text-right --> 154 <th class="text-center">Before Conversion <button class="btn btn-default" type="button">Open</button></td> 155 <th class="text-center">After Conversion <button class="btn btn-default" type="button">Open</button></td> 156 </tr> 157 <tr> 158 <td><div id="graph1" style="text-align: center;"></div></td> 159 <td><div id="graph2" style="text-align: center;"></div></td> 160 <script>d3.select("#graph1").graphviz().fade(false).width(500).height(600).zoomScaleExtent([0.1,100]).fit(true).renderDot(`digraph {a -> b}`);</script> 161 <script>d3.select("#graph2").graphviz().fade(false).width(500).height(600).zoomScaleExtent([0.1,100]).fit(true).renderDot(`digraph {a -> b}`);</script> 162 </tr> 163 </tbody> 164 </table> 165 </div> 166</div> 167 168<a name="conversionlog"></a> 169<h2>Conversion Log</h2> 170<div> 171 <pre class="pre-scrollable"> 172 <code>TFLite graph conversion successful. You can preview the converted model at: /path/to/flatbuffer</code> 173 </pre> 174</div> 175</div> 176</div> 177 178<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script> 179<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script> 180</body> 181</html> 182