added sample pane

gradio/static/css/style.css

@@ -15,8 +15,7 @@ button, input[type="submit"], input[type="reset"], input[type="text"], input[typ
   border-radius: 0;
 }
 nav, #panels, #share_row {
-  margin-left: 60px;
+  margin-left: 30px;
-  margin-right: 60px;
 }
 nav {
   text-align: center;
@@ -63,6 +62,9 @@ button.secondary {
   color: black;
   background-color: #F6F6F6;
 }
+#featured_history {
+  margin: 4px 30px;
+}
 #featured_table {
   border-collapse: collapse;
   border: solid 2px #EEEEEE;
@@ -73,8 +75,8 @@ button.secondary {
   padding: 4px;
   text-align: center;
   cursor: pointer;
-  width: 250px;
+  width: 650px;
-  max-width: 250px;
+  max-width: 650px;
   white-space: nowrap;
   text-overflow: ellipsis;
   overflow: hidden;
@@ -87,5 +89,4 @@ button.secondary {
 }
 #featured_history img {
   height: 60px;
-  width: 100px;
 }

gradio/static/js/interfaces/input/sketchpad.js

@@ -58,6 +58,7 @@ const sketchpad_input = {
     var img = new Image;
     let dimension = this.target.find(".canvas_holder canvas").width();
     img.onload = function(){
+      ctx.clearRect(0,0,dimension,dimension);
       ctx.drawImage(img,0,0,dimension,dimension);
     };
     img.src = data;

gradio/static/js/load_history.js

@@ -0,0 +1,22 @@
+history_count = 0;
+entry_history = [];
+
+function add_history(entry) {
+  $("#featured_table").append(`
+    <tr entry=${history_count}>
+      <td>${io_master.input_interface.renderFeatured(entry)}</td>
+    </tr>
+  `);
+  entry_history.push(entry);
+  history_count++;
+}
+
+function load_history(data) {
+  data.forEach(add_history)
+}
+
+$('body').on('click', "#featured_table tr", function() {
+  let entry = entry_history[$(this).attr("entry")];
+  io_master.input_interface.loadFeatured(entry);
+  io_master.output_interface.clear();
+})

gradio/static/js/load_interfaces.js

@@ -56,6 +56,10 @@ $.getJSON("static/config.json", function(data) {
   if (config["share_url"] != "None") {
     $("#share_row").css('display', 'flex');
   }
+  load_history(config["sample_inputs"] || []);
+  if (!config["sample_inputs"]) {
+    $("#featured_history").hide();
+  }
 });
 
 $('body').on('click', '.flag', function(e) {

gradio/templates/index.html

@@ -60,6 +60,11 @@
         </div>
       </div>
     </div>
+    <div id="featured_history">
+      <h2>Click to Try Samples</h2>
+      <table id="featured_table">
+      </table>
+    </div>
     <script src="../static/js/vendor/jquery.min.js"></script>
     <!-- TUI EDITOR -->
     <script src="../static/js/vendor/fabric.js"></script>
@@ -87,6 +92,7 @@
     <script src="../static/js/interfaces/output/label.js"></script>
     <script src="../static/js/interfaces/output/textbox.js"></script>
     <script src="../static/js/share.js"></script>
+    <script src="../static/js/load_history.js"></script>
     <script src="../static/js/load_interfaces.js"></script>
   </body>
 </html>