start mic project

gradio/inputs.py

@@ -232,7 +232,6 @@ class ImageUpload(AbstractInput):
 class CSV(AbstractInput):
 
     def get_name(self):
-        # return 'templates/input/csv.html'
         return 'csv'
 
     def preprocess(self, inp):
@@ -248,6 +247,24 @@ class CSV(AbstractInput):
         inp = msg['data']['inp']
         return json.loads(inp)
 
+class Microphone(AbstractInput):
+
+    def get_name(self):
+        return 'microphone'
+
+    def preprocess(self, inp):
+        """
+        By default, no pre-processing is applied to a microphone input file (TODO:aliabid94 fix this)
+        """
+        return inp
+
+    def rebuild_flagged(self, dir, msg):
+        """
+        Default rebuild method for csv
+        """
+        inp = msg['data']['inp']
+        return json.loads(inp)
+
 
 # Automatically adds all subclasses of AbstractInput into a dictionary (keyed by class name) for easy referencing.
 registry = {cls.__name__.lower(): cls for cls in AbstractInput.__subclasses__()}

gradio/static/css/gradio.css

@@ -74,6 +74,11 @@
   justify-content: center;
   text-align: center;
   line-height: 1.5em;
+  flex-flow: column;
+}
+.upload_zone img {
+  height: 120px;
+
 }
 .drop_zone {
   border: dashed 8px #DDD;

gradio/static/css/interfaces/input/microphone.css

@@ -0,0 +1,9 @@
+.recording {
+  display: none;
+}
+.recording.input_caption {
+  color: #C00000;
+}
+.volume_display {
+
+}

gradio/static/js/interfaces/input/microphone.js

@@ -0,0 +1,36 @@
+const microphone = {
+  html: `
+    <div class="upload_zone">
+      <img class="not_recording" src="/static/img/mic.png" />
+      <div class="recording volume_display">
+        <div class="volume volume_left">
+        </div>
+        <img src="/static/img/mic_recording.png" />
+        <div class="volume volume_right">
+        </div>
+      </div>
+      <div class="not_recording input_caption">Click to Record from Microphone</div>
+      <div class="recording input_caption">Recording... (Click to Stop)</div>
+    </div>
+    `,
+  state: "NO_AUDIO",
+  init: function() {
+    var io = this;
+    this.target.click(function() {
+      if (io.state == "NO_AUDIO") {
+        io.target.find(".recording").show();
+        io.target.find(".not_recording").hide();
+        io.state = "RECORDING"
+      } else {
+        io.target.find(".not_recording").show();
+        io.target.find(".recording").hide();
+        io.target.find(".upload_zone").hide();
+        io.state = "RECORDED"
+      }
+    })
+  },
+  submit: function() {
+  },
+  clear: function() {
+  }
+}

gradio/static/js/load_interfaces.js

@@ -2,7 +2,8 @@ input_to_object_map = {
   "csv" : {},
   "imageupload" : image_input,
   "sketchpad" : sketchpad_input,
-  "textbox" : textbox_input
+  "textbox" : textbox_input,
+  "microphone" : microphone
 }
 output_to_object_map = {
   "csv" : {},

gradio/templates/base_template.html

@@ -10,6 +10,7 @@
     <link rel="stylesheet" href="../static/css/interfaces/input/sketchpad.css">
     <link rel="stylesheet" href="../static/css/interfaces/input/textbox.css">
     <link rel="stylesheet" href="../static/css/interfaces/input/csv.css">
+    <link rel="stylesheet" href="../static/css/interfaces/input/microphone.css">
     <link rel="stylesheet" href="../static/css/interfaces/output/image.css">
     <link rel="stylesheet" href="../static/css/interfaces/output/label.css">
     <link rel="stylesheet" href="../static/css/interfaces/output/textbox.css">
@@ -77,6 +78,7 @@
     <script src="../static/js/interfaces/input/sketchpad.js"></script>
     <script src="../static/js/interfaces/input/textbox.js"></script>
     <script src="../static/js/interfaces/input/csv.js"></script>
+    <script src="../static/js/interfaces/input/microphone.js"></script>
     <script src="../static/js/interfaces/output/image.js"></script>
     <script src="../static/js/interfaces/output/label.js"></script>
     <script src="../static/js/interfaces/output/textbox.js"></script>