horzontal samples

gradio/static/css/style.css

@@ -71,20 +71,19 @@ button.secondary {
   margin-bottom: 20px;
   table-layout: fixed;
 }
-#featured_table td {
-  padding: 4px;
+#featured_table div {
+  display: inline-block;
+  padding: 10px;
   text-align: center;
   cursor: pointer;
-  width: 650px;
-  max-width: 650px;
-  white-space: nowrap;
-  text-overflow: ellipsis;
-  overflow: hidden;
+  max-width: 200px;
+  max-height: 100px;
+  overflow-y: auto;
 }
-#featured_table tr:nth-child(even) {
+#featured_table div:nth-child(even) {
   background-color: #EEEEEE;
 }
-#featured_table tr:hover {
+#featured_table div:hover {
   background-color: #EEA45D;
 }
 #featured_history img {

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

@@ -29,7 +29,7 @@ const sketchpad_input = {
     var id = this.id;
     if (config.disabled) {
       this.target.find('.canvas_holder canvas')
-        .attr("width", dimension).attr("height", dimension);      
+        .attr("width", dimension).attr("height", dimension);
     } else {
       this.sketchpad = new Sketchpad({
         element: '.interface[interface_id=' + id + '] .sketch',
@@ -76,5 +76,6 @@ const sketchpad_input = {
       ctx.drawImage(img,0,0,dimension,dimension);
     };
     img.src = data;
+    this.target.find(".saliency_holder").addClass("hide");
   }
 }

gradio/static/js/load_history.js

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

gradio/templates/index.html

@@ -62,8 +62,8 @@
     </div>
     <div id="featured_history">
       <h2>Click to Try Samples</h2>
-      <table id="featured_table">
-      </table>
+      <div id="featured_table">
+      </div>
     </div>
     <script src="../static/js/vendor/jquery.min.js"></script>
     <!-- TUI EDITOR -->