add text io

gradio/static/css/gradio.css

@@ -181,3 +181,7 @@
 canvas {
   border: solid 1px black;
 }
+
+textarea {
+  resize: none;
+}

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

@@ -19,7 +19,6 @@ $('body').on('click', '.clear', function(e) {
 })
 $('body').on('click', '.submit', function(e) {
     var dataURL = canvas.toDataURL("image/png");
-    console.log(dataURL)
     ws.send(dataURL, function(e){
       notifyError(e)
     });

gradio/static/js/interfaces/input/textbox.js

@@ -1,13 +1,9 @@
-var text = $("#textbox-input").val();
-
-$('#clear-button').click(function(e){
-    $("textbox-input").text("");
+$('body').on('click', '.clear', function(e) {
+  $(".input_text").val("");
 })
-
-$('#submit-button').click(function(e){
-    var text = $("#textbox-input").val();
-    ws.send(text, function(e){
-      notifyError(e)
-    });
-
+$('body').on('click', '.submit', function(e) {
+  text = $(".input_text").text();
+  ws.send(text, function(e){
+    notifyError(e)
+  });
 })

gradio/static/js/interfaces/output/textbox.js

@@ -1,3 +1,6 @@
+$('body').on('click', '.clear', function(e) {
+  $(".output_text").val("");
+})
 ws.onmessage = function (event) {
- 	$("#textbox-output").val(event.data);
+ 	$(".output_text").val(event.data);
 }

gradio/templates/input/image_upload.html

@@ -6,6 +6,7 @@
   </div>
   <input class="hidden_upload" type="file" accept="image/x-png,image/gif,image/jpeg" />
 </div>
+
 <link rel="stylesheet" href="https://fengyuanchen.github.io/cropper/css/cropper.css">
 <script src="https://fengyuanchen.github.io/cropper/js/cropper.js"></script>
 <script src="../static/js/interfaces/input/image_upload.js"></script>

gradio/templates/input/sketchpad.html

@@ -9,5 +9,6 @@
     <canvas id="canvas"></canvas>
   </div>
 </div>
+
 <script src="http://yiom.github.io/sketchpad/javascripts/sketchpad.js"></script>
 <script src="../static/js/interfaces/input/sketchpad.js"></script>

gradio/templates/input/textbox.html

@@ -0,0 +1,6 @@
+<div class="gradio input text">
+  <div class="role">Input</div>
+  <textarea class="input_text" placeholder="Enter text here..."></textarea>
+</div>
+
+<script src="../static/js/interfaces/input/textbox.js"></script>

gradio/templates/output/textbox.html

@@ -0,0 +1,6 @@
+<div class="gradio output text">
+  <div class="role">Output</div>
+  <textarea readonly class="output_text"></textarea>
+</div>
+
+<script src="../static/js/interfaces/output/textbox.js"></script>