changes

build/lib/gradio/static/css/gradio.css

@@ -31,10 +31,18 @@
   display: flex;
   flex-flow: column;
 }
+.output_panel {
+  position: relative;
+}
 .loading {
+  position: absolute;
+  top: 10px;
+  left: 10px;
   margin-left: auto;
+  z-index: 1;
 }
 .loading img {
+  width: 50px;
   display: none;
 }
 .panel_buttons {

build/lib/gradio/static/css/interfaces/output/textbox.css

@@ -9,4 +9,7 @@
   padding: 4px;
   min-height: 30px;
   font-family: monospace;
+  white-space: pre-wrap;      /* CSS3 */   
+  white-space: -moz-pre-wrap; /* Firefox */    
+  word-wrap: break-word;      /* IE */
 }

build/lib/gradio/static/js/all_io.js

@@ -22,8 +22,7 @@ var io_master_template = {
       this.target.find(".loading").removeClass("invisible");
       this.target.find(".loading_in_progress").show();
       this.target.find(".loading_failed").hide();
-      this.target.find(".output_interface").addClass("invisible");
-      this.target.find(".output_interfaces .panel_header").addClass("invisible");
+      this.target.find(".output_interfaces").css("opacity", 0.5);
     }
     this.fn(this.last_input).then((output) => {
       io.output(output);
@@ -54,8 +53,7 @@ var io_master_template = {
       }, refresh_lag);
     } else {
       this.target.find(".loading").addClass("invisible");
-      this.target.find(".output_interface").removeClass("invisible");
-      this.target.find(".output_interfaces .panel_header").removeClass("invisible");
+      this.target.find(".output_interfaces").css("opacity", 1);
     }
   },
   flag: function(message) {

build/lib/gradio/static/js/gradio.js

@@ -11,7 +11,7 @@ function gradio(config, fn, target) {
         </div>
       </div>
       <div class="panel output_panel">
-        <div class="loading interface invisible">
+        <div class="loading invisible">
           <img class="loading_in_progress" src="static/img/logo_loading.gif">
           <img class="loading_failed" src="static/img/logo_error.png">
         </div>
@@ -114,7 +114,7 @@ function gradio(config, fn, target) {
       target.find(".flag_message").empty();
       target.find(".loading").addClass("invisible");
       target.find(".loading_time").text("");
-      target.find(".output_interface").removeClass("invisible");
+      target.find(".output_interfaces").css("opacity", 1);
       io_master.last_input = null;
       io_master.last_output = null;
     });

gradio.egg-info/SOURCES.txt

@@ -50,7 +50,6 @@ gradio/static/img/vendor/icon-b.svg
 gradio/static/img/vendor/icon-c.svg
 gradio/static/img/vendor/icon-d.svg
 gradio/static/js/all_io.js
-gradio/static/js/all_io.js.bak
 gradio/static/js/gradio.js
 gradio/static/js/utils.js
 gradio/static/js/interfaces/input/checkbox.js

gradio/static/css/gradio.css

@@ -1,15 +1,15 @@
+.panels {
+  margin-top: -24px;
+  margin-left: -24px;
+}
 .panel {
+  margin-top: 24px;
+  margin-left: 24px;
   min-width: 300px;
   flex: 1 1 0;
   display: inline-block;
   box-sizing: border-box;
 }
-.panel:first-child {
-  margin-right: 24px;
-}
-.panel:last-child {
-  margin-left: 8px;
-}
 .panel_header, .interface {
   background-color: whitesmoke;
 }
@@ -36,13 +36,13 @@
 }
 .loading {
   position: absolute;
-  top: 10px;
-  left: 10px;
+  top: 3px;
+  right: 3px;
   margin-left: auto;
   z-index: 1;
 }
 .loading img {
-  width: 50px;
+  height: 20px;
   display: none;
 }
 .panel_buttons {