diff --git a/.idea/deployment.xml b/.idea/deployment.xml
deleted file mode 100644
index 36ea77f8f1..0000000000
--- a/.idea/deployment.xml
+++ /dev/null
@@ -1,14 +0,0 @@
-<?xml version="1.0" encoding="UTF-8"?>
-<project version="4">
-  <component name="PublishConfigData">
-    <serverData>
-      <paths name="a12d@arthur3:22">
-        <serverdata>
-          <mappings>
-            <mapping local="$PROJECT_DIR$" web="/" />
-          </mappings>
-        </serverdata>
-      </paths>
-    </serverData>
-  </component>
-</project>
\ No newline at end of file
diff --git a/.idea/gradiome.iml b/.idea/gradiome.iml
deleted file mode 100644
index 7c9d48f0fd..0000000000
--- a/.idea/gradiome.iml
+++ /dev/null
@@ -1,12 +0,0 @@
-<?xml version="1.0" encoding="UTF-8"?>
-<module type="PYTHON_MODULE" version="4">
-  <component name="NewModuleRootManager">
-    <content url="file://$MODULE_DIR$" />
-    <orderEntry type="inheritedJdk" />
-    <orderEntry type="sourceFolder" forTests="false" />
-  </component>
-  <component name="TestRunnerService">
-    <option name="projectConfiguration" value="pytest" />
-    <option name="PROJECT_TEST_RUNNER" value="pytest" />
-  </component>
-</module>
\ No newline at end of file
diff --git a/.idea/misc.xml b/.idea/misc.xml
deleted file mode 100644
index ba24381645..0000000000
--- a/.idea/misc.xml
+++ /dev/null
@@ -1,7 +0,0 @@
-<?xml version="1.0" encoding="UTF-8"?>
-<project version="4">
-  <component name="ProjectRootManager" version="2" project-jdk-name="Python 3.7" project-jdk-type="Python SDK" />
-  <component name="PyCharmProfessionalAdvertiser">
-    <option name="shown" value="true" />
-  </component>
-</project>
\ No newline at end of file
diff --git a/.idea/modules.xml b/.idea/modules.xml
deleted file mode 100644
index 5fc9b91518..0000000000
--- a/.idea/modules.xml
+++ /dev/null
@@ -1,8 +0,0 @@
-<?xml version="1.0" encoding="UTF-8"?>
-<project version="4">
-  <component name="ProjectModuleManager">
-    <modules>
-      <module fileurl="file://$PROJECT_DIR$/.idea/gradiome.iml" filepath="$PROJECT_DIR$/.idea/gradiome.iml" />
-    </modules>
-  </component>
-</project>
\ No newline at end of file
diff --git a/.idea/vcs.xml b/.idea/vcs.xml
deleted file mode 100644
index 94a25f7f4c..0000000000
--- a/.idea/vcs.xml
+++ /dev/null
@@ -1,6 +0,0 @@
-<?xml version="1.0" encoding="UTF-8"?>
-<project version="4">
-  <component name="VcsDirectoryMappings">
-    <mapping directory="$PROJECT_DIR$" vcs="Git" />
-  </component>
-</project>
\ No newline at end of file
diff --git a/.idea/workspace.xml b/.idea/workspace.xml
deleted file mode 100644
index add3aaf50d..0000000000
--- a/.idea/workspace.xml
+++ /dev/null
@@ -1,640 +0,0 @@
-<?xml version="1.0" encoding="UTF-8"?>
-<project version="4">
-  <component name="ChangeListManager">
-    <list default="true" id="fd73cd66-e80f-470e-a2ec-e220d3b6b864" name="Default Changelist" comment="">
-      <change afterPath="$PROJECT_DIR$/examples/.ipynb_checkpoints/Simple Sentence Capitalization (Textbox Input and Output)-checkpoint.ipynb" afterDir="false" />
-      <change afterPath="$PROJECT_DIR$/examples/Simple Sentence Capitalization (Textbox Input and Output).ipynb" afterDir="false" />
-      <change beforePath="$PROJECT_DIR$/.idea/workspace.xml" beforeDir="false" afterPath="$PROJECT_DIR$/.idea/workspace.xml" afterDir="false" />
-    </list>
-    <option name="EXCLUDED_CONVERTED_TO_IGNORED" value="true" />
-    <option name="SHOW_DIALOG" value="false" />
-    <option name="HIGHLIGHT_CONFLICTS" value="true" />
-    <option name="HIGHLIGHT_NON_ACTIVE_CHANGELIST" value="false" />
-    <option name="LAST_RESOLUTION" value="IGNORE" />
-  </component>
-  <component name="FUSProjectUsageTrigger">
-    <session id="-278724352">
-      <usages-collector id="statistics.lifecycle.project">
-        <counts>
-          <entry key="project.closed" value="7" />
-          <entry key="project.open.time.0" value="1" />
-          <entry key="project.open.time.1" value="2" />
-          <entry key="project.open.time.10" value="1" />
-          <entry key="project.open.time.16" value="2" />
-          <entry key="project.open.time.23" value="1" />
-          <entry key="project.open.time.8" value="1" />
-          <entry key="project.opened" value="8" />
-        </counts>
-      </usages-collector>
-      <usages-collector id="statistics.file.extensions.open">
-        <counts>
-          <entry key="css" value="2" />
-          <entry key="html" value="6" />
-          <entry key="js" value="1" />
-          <entry key="py" value="14" />
-          <entry key="sh" value="1" />
-        </counts>
-      </usages-collector>
-      <usages-collector id="statistics.file.types.open">
-        <counts>
-          <entry key="CSS" value="2" />
-          <entry key="HTML" value="6" />
-          <entry key="JavaScript" value="1" />
-          <entry key="PLAIN_TEXT" value="1" />
-          <entry key="Python" value="14" />
-        </counts>
-      </usages-collector>
-      <usages-collector id="statistics.file.extensions.edit">
-        <counts>
-          <entry key="css" value="260" />
-          <entry key="html" value="4891" />
-          <entry key="js" value="4" />
-          <entry key="py" value="2489" />
-        </counts>
-      </usages-collector>
-      <usages-collector id="statistics.file.types.edit">
-        <counts>
-          <entry key="CSS" value="260" />
-          <entry key="HTML" value="4891" />
-          <entry key="JavaScript" value="4" />
-          <entry key="Python" value="2489" />
-        </counts>
-      </usages-collector>
-    </session>
-    <session id="1317707946">
-      <usages-collector id="statistics.lifecycle.project">
-        <counts>
-          <entry key="project.closed" value="5" />
-          <entry key="project.open.time.1" value="2" />
-          <entry key="project.open.time.6" value="2" />
-          <entry key="project.open.time.8" value="2" />
-          <entry key="project.opened" value="6" />
-        </counts>
-      </usages-collector>
-      <usages-collector id="statistics.file.extensions.open">
-        <counts>
-          <entry key="css" value="3" />
-          <entry key="gitignore" value="1" />
-          <entry key="html" value="9" />
-          <entry key="ipynb" value="1" />
-          <entry key="js" value="6" />
-          <entry key="py" value="19" />
-        </counts>
-      </usages-collector>
-      <usages-collector id="statistics.file.types.open">
-        <counts>
-          <entry key="CSS" value="3" />
-          <entry key="HTML" value="9" />
-          <entry key="IPNB" value="1" />
-          <entry key="JavaScript" value="6" />
-          <entry key="PLAIN_TEXT" value="1" />
-          <entry key="Python" value="19" />
-        </counts>
-      </usages-collector>
-      <usages-collector id="statistics.file.extensions.edit">
-        <counts>
-          <entry key="css" value="11" />
-          <entry key="dummy" value="19" />
-          <entry key="gitignore" value="2" />
-          <entry key="html" value="112" />
-          <entry key="js" value="281" />
-          <entry key="py" value="4985" />
-        </counts>
-      </usages-collector>
-      <usages-collector id="statistics.file.types.edit">
-        <counts>
-          <entry key="CSS" value="11" />
-          <entry key="HTML" value="112" />
-          <entry key="JavaScript" value="281" />
-          <entry key="PLAIN_TEXT" value="21" />
-          <entry key="Python" value="4985" />
-        </counts>
-      </usages-collector>
-    </session>
-  </component>
-  <component name="FileEditorManager">
-    <leaf SIDE_TABS_SIZE_LIMIT_KEY="300">
-      <file pinned="false" current-in-tab="true">
-        <entry file="file://$PROJECT_DIR$/setup.py">
-          <provider selected="true" editor-type-id="text-editor">
-            <state relative-caret-position="325">
-              <caret line="13" column="24" selection-start-line="13" selection-start-column="24" selection-end-line="13" selection-end-column="24" />
-            </state>
-          </provider>
-        </entry>
-      </file>
-      <file pinned="false" current-in-tab="false">
-        <entry file="file://$PROJECT_DIR$/gradio/js/all-io.js">
-          <provider selected="true" editor-type-id="text-editor">
-            <state relative-caret-position="675">
-              <caret line="27" column="1" selection-start-line="27" selection-start-column="1" selection-end-line="27" selection-end-column="1" />
-            </state>
-          </provider>
-        </entry>
-      </file>
-      <file pinned="false" current-in-tab="false">
-        <entry file="file://$PROJECT_DIR$/gradio/__init__.py">
-          <provider selected="true" editor-type-id="text-editor">
-            <state relative-caret-position="1516">
-              <caret line="146" column="57" selection-start-line="146" selection-start-column="57" selection-end-line="146" selection-end-column="57" />
-              <folding>
-                <element signature="e#0#14#0" expanded="true" />
-              </folding>
-            </state>
-          </provider>
-        </entry>
-      </file>
-      <file pinned="false" current-in-tab="false">
-        <entry file="file://$PROJECT_DIR$/gradio/inputs.py">
-          <provider selected="true" editor-type-id="text-editor">
-            <state relative-caret-position="450">
-              <caret line="23" column="12" selection-start-line="23" selection-start-column="12" selection-end-line="23" selection-end-column="12" />
-              <folding>
-                <element signature="e#0#35#0" expanded="true" />
-              </folding>
-            </state>
-          </provider>
-        </entry>
-      </file>
-      <file pinned="false" current-in-tab="false">
-        <entry file="file://$PROJECT_DIR$/../testing/test_gradio.py">
-          <provider selected="true" editor-type-id="text-editor">
-            <state relative-caret-position="150">
-              <caret line="7" column="9" selection-start-line="7" selection-end-line="7" selection-end-column="14" />
-              <folding>
-                <element signature="e#0#18#0" expanded="true" />
-              </folding>
-            </state>
-          </provider>
-        </entry>
-      </file>
-      <file pinned="false" current-in-tab="false">
-        <entry file="file://$PROJECT_DIR$/gradio/outputs.py">
-          <provider selected="true" editor-type-id="text-editor">
-            <state>
-              <folding>
-                <element signature="e#0#35#0" expanded="true" />
-              </folding>
-            </state>
-          </provider>
-        </entry>
-      </file>
-      <file pinned="false" current-in-tab="false">
-        <entry file="file://$PROJECT_DIR$/gradio/preprocessing_utils.py">
-          <provider selected="true" editor-type-id="text-editor">
-            <state relative-caret-position="-25">
-              <caret line="17" column="7" selection-start-line="17" selection-start-column="7" selection-end-line="17" selection-end-column="7" />
-            </state>
-          </provider>
-        </entry>
-      </file>
-      <file pinned="false" current-in-tab="false">
-        <entry file="file://$PROJECT_DIR$/gradio/templates/sketchpad_input.html">
-          <provider selected="true" editor-type-id="text-editor">
-            <state relative-caret-position="225">
-              <caret line="9" column="48" selection-start-line="9" selection-start-column="48" selection-end-line="9" selection-end-column="48" />
-            </state>
-          </provider>
-        </entry>
-      </file>
-      <file pinned="false" current-in-tab="false">
-        <entry file="file://$PROJECT_DIR$/gradio/templates/webcam_input.html">
-          <provider selected="true" editor-type-id="text-editor" />
-        </entry>
-      </file>
-      <file pinned="false" current-in-tab="false">
-        <entry file="file://$PROJECT_DIR$/gradio/templates/class_output.html">
-          <provider selected="true" editor-type-id="text-editor">
-            <state relative-caret-position="75">
-              <caret line="3" column="4" selection-start-line="3" selection-start-column="4" selection-end-line="3" selection-end-column="4" />
-              <folding>
-                <element signature="n#style#0;n#div#0;n#div#0;n#!!top" expanded="true" />
-              </folding>
-            </state>
-          </provider>
-        </entry>
-      </file>
-    </leaf>
-  </component>
-  <component name="FileTemplateManagerImpl">
-    <option name="RECENT_TEMPLATES">
-      <list>
-        <option value="Python Script" />
-      </list>
-    </option>
-  </component>
-  <component name="FindInProjectRecents">
-    <findStrings>
-      <find>Edit</find>
-      <find>button</find>
-      <find>see an ex</find>
-      <find>jumobo</find>
-      <find>jumbotron</find>
-      <find>Silicon s</find>
-      <find>lead</find>
-      <find>draw a</find>
-      <find>see an</find>
-      <find>pip ins</find>
-      <find>Developed</find>
-      <find>Usage</find>
-      <find>server</find>
-      <find>zip</find>
-      <find>resize_</find>
-      <find>base</find>
-      <find>ws</find>
-      <find>&lt;em</find>
-      <find>6002</find>
-      <find>INITIAL_WEBSOCKET_PORT</find>
-      <find>print(</find>
-      <find>inputs.</find>
-      <find>subprocess</find>
-      <find>psutil</find>
-      <find>tmp</find>
-      <find>tmp_h</find>
-      <find>JS_PATH_TEMP</find>
-      <find>JS_PATH_LO</find>
-      <find>path_to_server</find>
-      <find>/</find>
-    </findStrings>
-    <replaceStrings>
-      <replace>400</replace>
-      <replace>../css/</replace>
-      <replace>Source</replace>
-      <replace>//</replace>
-    </replaceStrings>
-  </component>
-  <component name="Git.Settings">
-    <option name="RECENT_GIT_ROOT_PATH" value="$PROJECT_DIR$" />
-  </component>
-  <component name="IdeDocumentHistory">
-    <option name="CHANGED_PATHS">
-      <list>
-        <option value="$PROJECT_DIR$/api/views.py" />
-        <option value="$PROJECT_DIR$/api/serializers.py" />
-        <option value="$PROJECT_DIR$/api/models.py" />
-        <option value="$PROJECT_DIR$/home/templates/home/index.html" />
-        <option value="$PROJECT_DIR$/gradiome/settings.py" />
-        <option value="$PROJECT_DIR$/home/views.py" />
-        <option value="$PROJECT_DIR$/home/templates/home/room.html" />
-        <option value="$PROJECT_DIR$/gradiome/urls.py" />
-        <option value="$PROJECT_DIR$/home/routing.py" />
-        <option value="$PROJECT_DIR$/gradiome/routing.py" />
-        <option value="$PROJECT_DIR$/home/consumers.py" />
-        <option value="$PROJECT_DIR$/client.html" />
-        <option value="$PROJECT_DIR$/gradiome.py" />
-        <option value="$PROJECT_DIR$/css/starter-template.css" />
-        <option value="$PROJECT_DIR$/js/draw-a-digit.js" />
-        <option value="$PROJECT_DIR$/templates/draw_a_digit.html" />
-        <option value="$PROJECT_DIR$/css/index.css" />
-        <option value="$PROJECT_DIR$/index.html" />
-        <option value="$PROJECT_DIR$/../khateebi/settings.py" />
-        <option value="$PROJECT_DIR$/templates/server.py" />
-        <option value="$PROJECT_DIR$/server.py" />
-        <option value="$PROJECT_DIR$/preprocessing_utils.py" />
-        <option value="$PROJECT_DIR$/.gitignore" />
-        <option value="$PROJECT_DIR$/inputs.py" />
-        <option value="$PROJECT_DIR$/templates/all_io.html" />
-        <option value="$PROJECT_DIR$/css/draw-a-digit.css" />
-        <option value="$PROJECT_DIR$/outputs.py" />
-        <option value="$PROJECT_DIR$/networking.py" />
-        <option value="$PROJECT_DIR$/js/all-io.js" />
-        <option value="$PROJECT_DIR$/gradio.py" />
-        <option value="$PROJECT_DIR$/gradio/inputs.py" />
-        <option value="$PROJECT_DIR$/../testing/test_gradio.py" />
-        <option value="$PROJECT_DIR$/gradio/js/all-io.js" />
-        <option value="$PROJECT_DIR$/gradio/networking.py" />
-        <option value="$PROJECT_DIR$/gradio/__init__.py" />
-        <option value="$PROJECT_DIR$/gradio/preprocessing_utils.py" />
-        <option value="$PROJECT_DIR$/gradio/templates/sketchpad_input.html" />
-        <option value="$PROJECT_DIR$/setup.py" />
-      </list>
-    </option>
-  </component>
-  <component name="JsBuildToolGruntFileManager" detection-done="true" sorting="DEFINITION_ORDER" />
-  <component name="JsBuildToolPackageJson" detection-done="true" sorting="DEFINITION_ORDER" />
-  <component name="JsGulpfileManager">
-    <detection-done>true</detection-done>
-    <sorting>DEFINITION_ORDER</sorting>
-  </component>
-  <component name="ProjectFrameBounds" extendedState="6">
-    <option name="x" value="-24" />
-    <option name="y" value="-24" />
-    <option name="width" value="6052" />
-    <option name="height" value="4052" />
-  </component>
-  <component name="ProjectLevelVcsManager" settingsEditedManually="true">
-    <ConfirmationsSetting value="2" id="Add" />
-  </component>
-  <component name="ProjectView">
-    <navigator proportions="" version="1">
-      <foldersAlwaysOnTop value="true" />
-    </navigator>
-    <panes>
-      <pane id="Scope" />
-      <pane id="ProjectPane">
-        <subPane>
-          <expand>
-            <path>
-              <item name="gradio" type="b2602c69:ProjectViewProjectNode" />
-              <item name="gradio" type="462c0819:PsiDirectoryNode" />
-            </path>
-            <path>
-              <item name="gradio" type="b2602c69:ProjectViewProjectNode" />
-              <item name="gradio" type="462c0819:PsiDirectoryNode" />
-              <item name="gradio" type="462c0819:PsiDirectoryNode" />
-            </path>
-            <path>
-              <item name="gradio" type="b2602c69:ProjectViewProjectNode" />
-              <item name="gradio" type="462c0819:PsiDirectoryNode" />
-              <item name="gradio" type="462c0819:PsiDirectoryNode" />
-              <item name="css" type="462c0819:PsiDirectoryNode" />
-            </path>
-            <path>
-              <item name="gradio" type="b2602c69:ProjectViewProjectNode" />
-              <item name="gradio" type="462c0819:PsiDirectoryNode" />
-              <item name="gradio" type="462c0819:PsiDirectoryNode" />
-              <item name="templates" type="462c0819:PsiDirectoryNode" />
-            </path>
-          </expand>
-          <select />
-        </subPane>
-      </pane>
-    </panes>
-  </component>
-  <component name="PropertiesComponent">
-    <property name="SearchEverywhereHistoryKey" value="&#9;FILE&#9;file://C:/Users/islam/Repos/gradiome/css/starter-template.css" />
-    <property name="WebServerToolWindowFactoryState" value="true" />
-    <property name="last_opened_file_path" value="$USER_HOME$/PycharmProjects/histology" />
-    <property name="settings.editor.selected.configurable" value="preferences.keymap" />
-  </component>
-  <component name="RecentsManager">
-    <key name="MoveFile.RECENT_KEYS">
-      <recent name="C:\Users\islam\Repos\gradio" />
-    </key>
-  </component>
-  <component name="RunDashboard">
-    <option name="ruleStates">
-      <list>
-        <RuleState>
-          <option name="name" value="ConfigurationTypeDashboardGroupingRule" />
-        </RuleState>
-        <RuleState>
-          <option name="name" value="StatusDashboardGroupingRule" />
-        </RuleState>
-      </list>
-    </option>
-  </component>
-  <component name="SvnConfiguration">
-    <configuration />
-  </component>
-  <component name="TaskManager">
-    <task active="true" id="Default" summary="Default task">
-      <changelist id="fd73cd66-e80f-470e-a2ec-e220d3b6b864" name="Default Changelist" comment="" />
-      <created>1545238786403</created>
-      <option name="number" value="Default" />
-      <option name="presentableId" value="Default" />
-      <updated>1545238786403</updated>
-    </task>
-    <servers />
-  </component>
-  <component name="ToolWindowManager">
-    <frame x="-6" y="-6" width="1513" height="1013" extended-state="6" />
-    <editor active="true" />
-    <layout>
-      <window_info active="true" content_ui="combo" id="Project" order="0" visible="true" weight="0.25773194" />
-      <window_info id="Structure" order="1" side_tool="true" weight="0.25" />
-      <window_info id="Favorites" order="2" side_tool="true" />
-      <window_info anchor="bottom" id="Message" order="0" />
-      <window_info anchor="bottom" id="Find" order="1" weight="0.32945284" />
-      <window_info anchor="bottom" id="Run" order="2" />
-      <window_info anchor="bottom" id="Debug" order="3" weight="0.4" />
-      <window_info anchor="bottom" id="Cvs" order="4" weight="0.25" />
-      <window_info anchor="bottom" id="Inspection" order="5" weight="0.4" />
-      <window_info anchor="bottom" id="TODO" order="6" />
-      <window_info anchor="bottom" id="Version Control" order="7" show_stripe_button="false" />
-      <window_info anchor="bottom" id="Terminal" order="8" weight="0.32945284" />
-      <window_info anchor="bottom" id="Event Log" order="9" side_tool="true" />
-      <window_info anchor="bottom" id="Python Console" order="10" />
-      <window_info anchor="bottom" id="Docker" order="11" show_stripe_button="false" />
-      <window_info anchor="bottom" id="Database Changes" order="12" show_stripe_button="false" />
-      <window_info anchor="right" id="Commander" internal_type="SLIDING" order="0" type="SLIDING" weight="0.4" />
-      <window_info anchor="right" id="Ant Build" order="1" weight="0.25" />
-      <window_info anchor="right" content_ui="combo" id="Hierarchy" order="2" weight="0.25" />
-      <window_info anchor="right" id="Remote Host" order="3" />
-      <window_info anchor="right" id="Database" order="4" />
-      <window_info anchor="right" id="SciView" order="5" />
-    </layout>
-  </component>
-  <component name="TypeScriptGeneratedFilesManager">
-    <option name="version" value="1" />
-  </component>
-  <component name="VcsContentAnnotationSettings">
-    <option name="myLimit" value="2678400000" />
-  </component>
-  <component name="editorHistoryManager">
-    <entry file="file://$USER_HOME$/Anaconda3/Lib/site-packages/rest_framework/generics.py">
-      <provider selected="true" editor-type-id="text-editor">
-        <state relative-caret-position="278">
-          <caret line="36" column="4" selection-start-line="36" selection-start-column="4" selection-end-line="36" selection-end-column="4" />
-        </state>
-      </provider>
-    </entry>
-    <entry file="file://$PROJECT_DIR$/api/serializers.py" />
-    <entry file="file://$PROJECT_DIR$/api/models.py" />
-    <entry file="file://$PROJECT_DIR$/home/templates/home/index.html" />
-    <entry file="file://$PROJECT_DIR$/gradiome/settings.py" />
-    <entry file="file://$PROJECT_DIR$/home/templates/home/room.html" />
-    <entry file="file://$PROJECT_DIR$/gradiome/urls.py" />
-    <entry file="file://$PROJECT_DIR$/gradiome/routing.py" />
-    <entry file="file://$PROJECT_DIR$/api/views.py" />
-    <entry file="file://$PROJECT_DIR$/home/consumers.py" />
-    <entry file="file://$PROJECT_DIR$/home/routing.py" />
-    <entry file="file://$PROJECT_DIR$/home/views.py" />
-    <entry file="file://$PROJECT_DIR$/client.html" />
-    <entry file="file://$PROJECT_DIR$/gradiome.py" />
-    <entry file="file://$PROJECT_DIR$/js/draw-a-digit.js">
-      <provider selected="true" editor-type-id="text-editor" />
-    </entry>
-    <entry file="file://$PROJECT_DIR$/../gradiome/chat.py" />
-    <entry file="file://$PROJECT_DIR$/Usage.ipynb">
-      <provider selected="true" editor-type-id="ipnb-editor">
-        <state>
-          <selected id="0" />
-        </state>
-      </provider>
-    </entry>
-    <entry file="file://$PROJECT_DIR$/templates/draw_a_digit.html" />
-    <entry file="file://$PROJECT_DIR$/index.html">
-      <provider selected="true" editor-type-id="text-editor">
-        <state relative-caret-position="3850">
-          <caret line="154" selection-start-line="154" selection-end-line="154" />
-        </state>
-      </provider>
-    </entry>
-    <entry file="file://$PROJECT_DIR$/../khateebi/quickstart.py">
-      <provider selected="true" editor-type-id="text-editor">
-        <state relative-caret-position="250">
-          <caret line="19" selection-start-line="19" selection-end-line="19" />
-        </state>
-      </provider>
-    </entry>
-    <entry file="file://$PROJECT_DIR$/../khateebi/run.sh">
-      <provider selected="true" editor-type-id="text-editor">
-        <state>
-          <caret column="11" selection-start-column="11" selection-end-column="11" />
-        </state>
-      </provider>
-    </entry>
-    <entry file="file://$PROJECT_DIR$/css/index.css">
-      <provider selected="true" editor-type-id="text-editor">
-        <state relative-caret-position="700">
-          <caret line="28" column="11" selection-start-line="28" selection-start-column="11" selection-end-line="28" selection-end-column="11" />
-        </state>
-      </provider>
-    </entry>
-    <entry file="file://$PROJECT_DIR$/../khateebi/templates/index.html">
-      <provider selected="true" editor-type-id="text-editor">
-        <state relative-caret-position="50">
-          <caret line="2" column="23" selection-start-line="2" selection-start-column="23" selection-end-line="2" selection-end-column="23" />
-        </state>
-      </provider>
-    </entry>
-    <entry file="file://$PROJECT_DIR$/../khateebi/settings.py">
-      <provider selected="true" editor-type-id="text-editor">
-        <state relative-caret-position="350">
-          <caret line="14" column="17" selection-start-line="14" selection-start-column="17" selection-end-line="14" selection-end-column="17" />
-        </state>
-      </provider>
-    </entry>
-    <entry file="file://$PROJECT_DIR$/templates/all_io.html" />
-    <entry file="file://$PROJECT_DIR$/js/webcam-input.js">
-      <provider selected="true" editor-type-id="text-editor">
-        <state relative-caret-position="300">
-          <caret line="12" column="32" lean-forward="true" selection-start-line="12" selection-start-column="32" selection-end-line="12" selection-end-column="32" />
-        </state>
-      </provider>
-    </entry>
-    <entry file="file://$PROJECT_DIR$/preprocessing_utils.py" />
-    <entry file="file://$PROJECT_DIR$/inputs.py" />
-    <entry file="file://$PROJECT_DIR$/templates/webcam_input.html" />
-    <entry file="file://$PROJECT_DIR$/outputs.py" />
-    <entry file="file://$PROJECT_DIR$/networking.py" />
-    <entry file="file://$PROJECT_DIR$/js/all-io.js">
-      <provider selected="true" editor-type-id="text-editor">
-        <state relative-caret-position="100">
-          <caret line="4" column="34" selection-start-line="4" selection-start-column="34" selection-end-line="4" selection-end-column="34" />
-        </state>
-      </provider>
-    </entry>
-    <entry file="file://$PROJECT_DIR$/templates/tmp_html.html" />
-    <entry file="file://$PROJECT_DIR$/gradio.py" />
-    <entry file="file://$PROJECT_DIR$/gradio/script.py" />
-    <entry file="file://$PROJECT_DIR$/.gitignore">
-      <provider selected="true" editor-type-id="text-editor">
-        <state relative-caret-position="175">
-          <caret line="7" selection-start-line="7" selection-end-line="7" />
-        </state>
-      </provider>
-    </entry>
-    <entry file="file://$PROJECT_DIR$/css/draw-a-digit.css">
-      <provider selected="true" editor-type-id="text-editor">
-        <state relative-caret-position="1225">
-          <caret line="96" column="15" selection-start-line="96" selection-start-column="15" selection-end-line="96" selection-end-column="15" />
-        </state>
-      </provider>
-    </entry>
-    <entry file="file://$PROJECT_DIR$/gradio/js/all-io.js">
-      <provider selected="true" editor-type-id="text-editor">
-        <state relative-caret-position="675">
-          <caret line="27" column="1" selection-start-line="27" selection-start-column="1" selection-end-line="27" selection-end-column="1" />
-        </state>
-      </provider>
-    </entry>
-    <entry file="file://$PROJECT_DIR$/gradio/inputs.py">
-      <provider selected="true" editor-type-id="text-editor">
-        <state relative-caret-position="450">
-          <caret line="23" column="12" selection-start-line="23" selection-start-column="12" selection-end-line="23" selection-end-column="12" />
-          <folding>
-            <element signature="e#0#35#0" expanded="true" />
-          </folding>
-        </state>
-      </provider>
-    </entry>
-    <entry file="file://$PROJECT_DIR$/../testing/test_gradio.py">
-      <provider selected="true" editor-type-id="text-editor">
-        <state relative-caret-position="150">
-          <caret line="7" column="9" selection-start-line="7" selection-end-line="7" selection-end-column="14" />
-          <folding>
-            <element signature="e#0#18#0" expanded="true" />
-          </folding>
-        </state>
-      </provider>
-    </entry>
-    <entry file="file://$PROJECT_DIR$/gradio/outputs.py">
-      <provider selected="true" editor-type-id="text-editor">
-        <state>
-          <folding>
-            <element signature="e#0#35#0" expanded="true" />
-          </folding>
-        </state>
-      </provider>
-    </entry>
-    <entry file="file://$PROJECT_DIR$/gradio/networking.py">
-      <provider selected="true" editor-type-id="text-editor">
-        <state relative-caret-position="575">
-          <caret line="44" selection-start-line="44" selection-end-line="44" />
-          <folding>
-            <element signature="e#0#17#0" expanded="true" />
-          </folding>
-        </state>
-      </provider>
-    </entry>
-    <entry file="file://$PROJECT_DIR$/gradio/__init__.py">
-      <provider selected="true" editor-type-id="text-editor">
-        <state relative-caret-position="1516">
-          <caret line="146" column="57" selection-start-line="146" selection-start-column="57" selection-end-line="146" selection-end-column="57" />
-          <folding>
-            <element signature="e#0#14#0" expanded="true" />
-          </folding>
-        </state>
-      </provider>
-    </entry>
-    <entry file="file://$PROJECT_DIR$/gradio/preprocessing_utils.py">
-      <provider selected="true" editor-type-id="text-editor">
-        <state relative-caret-position="-25">
-          <caret line="17" column="7" selection-start-line="17" selection-start-column="7" selection-end-line="17" selection-end-column="7" />
-        </state>
-      </provider>
-    </entry>
-    <entry file="file://$PROJECT_DIR$/gradio/templates/image_upload_input.html">
-      <provider selected="true" editor-type-id="text-editor" />
-    </entry>
-    <entry file="file://$PROJECT_DIR$/gradio/templates/class_output.html">
-      <provider selected="true" editor-type-id="text-editor">
-        <state relative-caret-position="75">
-          <caret line="3" column="4" selection-start-line="3" selection-start-column="4" selection-end-line="3" selection-end-column="4" />
-          <folding>
-            <element signature="n#style#0;n#div#0;n#div#0;n#!!top" expanded="true" />
-          </folding>
-        </state>
-      </provider>
-    </entry>
-    <entry file="file://$PROJECT_DIR$/gradio/templates/webcam_input.html">
-      <provider selected="true" editor-type-id="text-editor" />
-    </entry>
-    <entry file="file://$PROJECT_DIR$/gradio/templates/sketchpad_input.html">
-      <provider selected="true" editor-type-id="text-editor">
-        <state relative-caret-position="225">
-          <caret line="9" column="48" selection-start-line="9" selection-start-column="48" selection-end-line="9" selection-end-column="48" />
-        </state>
-      </provider>
-    </entry>
-    <entry file="file://$PROJECT_DIR$/setup.py">
-      <provider selected="true" editor-type-id="text-editor">
-        <state relative-caret-position="325">
-          <caret line="13" column="24" selection-start-line="13" selection-start-column="24" selection-end-line="13" selection-end-column="24" />
-        </state>
-      </provider>
-    </entry>
-  </component>
-</project>
\ No newline at end of file
diff --git a/Test Notebook.ipynb b/Test Notebook.ipynb
index 8abe277d16..68d0071ec5 100644
--- a/Test Notebook.ipynb	
+++ b/Test Notebook.ipynb	
@@ -2,7 +2,17 @@
  "cells": [
   {
    "cell_type": "code",
-   "execution_count": 1,
+   "execution_count": 7,
+   "metadata": {},
+   "outputs": [],
+   "source": [
+    "%load_ext autoreload\n",
+    "%autoreload 2"
+   ]
+  },
+  {
+   "cell_type": "code",
+   "execution_count": 8,
    "metadata": {},
    "outputs": [],
    "source": [
@@ -11,7 +21,7 @@
   },
   {
    "cell_type": "code",
-   "execution_count": 2,
+   "execution_count": 9,
    "metadata": {},
    "outputs": [],
    "source": [
@@ -21,7 +31,7 @@
   },
   {
    "cell_type": "code",
-   "execution_count": 6,
+   "execution_count": 10,
    "metadata": {},
    "outputs": [
     {
@@ -30,20 +40,13 @@
      "text": [
       "NOTE: Gradio is in beta stage, please report all bugs to: a12d@stanford.edu\n",
       "Model available locally at: http://localhost:7862/interface.html\n",
-      "Model available publicly for 8 hours at: http://ae6f8734.ngrok.io/interface.html\n"
+      "Model available publicly for 8 hours at: http://bf3590aa.ngrok.io/interface.html\n"
      ]
     }
    ],
    "source": [
     "gradio.Interface(input=\"textbox\", output=\"textbox\", model_type=\"func\", model=test).launch()"
    ]
-  },
-  {
-   "cell_type": "code",
-   "execution_count": null,
-   "metadata": {},
-   "outputs": [],
-   "source": []
   }
  ],
  "metadata": {
diff --git a/gradio/__init__.py b/gradio/__init__.py
index adcf0b9675..fc501c0e8a 100644
--- a/gradio/__init__.py
+++ b/gradio/__init__.py
@@ -1,157 +1 @@
-import asyncio
-import websockets
-import nest_asyncio
-import webbrowser
-import pkg_resources
-from bs4 import BeautifulSoup
-from gradio import inputs
-from gradio import outputs
-from gradio import networking
-import os
-import shutil
-import tempfile
-
-nest_asyncio.apply()
-
-LOCALHOST_IP = '127.0.0.1'
-INITIAL_WEBSOCKET_PORT = 9200
-TRY_NUM_PORTS = 100
-
-BASE_TEMPLATE = pkg_resources.resource_filename('gradio', 'templates/all_io.html')
-JS_PATH_LIB = pkg_resources.resource_filename('gradio', 'js/')
-CSS_PATH_LIB = pkg_resources.resource_filename('gradio', 'css/')
-JS_PATH_TEMP = 'js/'
-CSS_PATH_TEMP = 'css/'
-TEMPLATE_TEMP = 'interface.html'
-BASE_JS_FILE = 'js/all-io.js'
-
-
-class Interface():
-    """
-    """
-
-    def __init__(self, input, output, model, model_type, preprocessing_fn=None, postprocessing_fn=None):
-        """
-        :param model_type: what kind of trained model, can be 'keras' or 'sklearn'.
-        :param model_obj: the model object, such as a sklearn classifier or keras model.
-        :param model_params: additional model parameters.
-        """
-        self.input_interface = inputs.registry[input](preprocessing_fn)
-        self.output_interface = outputs.registry[output](postprocessing_fn)
-        self.model_type = model_type
-        self.model_obj = model
-
-    def _build_template(self, temp_dir):
-        input_template_path = pkg_resources.resource_filename(
-            'gradio', self.input_interface._get_template_path())
-        output_template_path = pkg_resources.resource_filename(
-            'gradio', self.output_interface._get_template_path())
-        input_page = open(input_template_path)
-        output_page = open(output_template_path)
-        input_soup = BeautifulSoup(input_page.read(), features="html.parser")
-        output_soup = BeautifulSoup(output_page.read(), features="html.parser")
-
-        all_io_page = open(BASE_TEMPLATE)
-        all_io_soup = BeautifulSoup(all_io_page.read(), features="html.parser")
-        input_tag = all_io_soup.find("div", {"id": "input"})
-        output_tag = all_io_soup.find("div", {"id": "output"})
-
-        input_tag.replace_with(input_soup)
-        output_tag.replace_with(output_soup)
-
-        f = open(os.path.join(temp_dir, TEMPLATE_TEMP), "w")
-        f.write(str(all_io_soup.prettify))
-
-        self._copy_files(JS_PATH_LIB, os.path.join(temp_dir, JS_PATH_TEMP))
-        self._copy_files(CSS_PATH_LIB, os.path.join(temp_dir, CSS_PATH_TEMP))
-        return
-
-    def _copy_files(self, src_dir, dest_dir):
-        if not os.path.exists(dest_dir):
-            os.makedirs(dest_dir)
-        src_files = os.listdir(src_dir)
-        for file_name in src_files:
-            full_file_name = os.path.join(src_dir, file_name)
-            if os.path.isfile(full_file_name):
-                shutil.copy(full_file_name, dest_dir)
-
-    def _set_socket_url_in_js(self, temp_dir, socket_url):
-        with open(os.path.join(temp_dir, BASE_JS_FILE)) as fin:
-            lines = fin.readlines()
-            lines[0] = 'var NGROK_URL = "{}"\n'.format(socket_url.replace('http', 'ws'))
-
-        with open(os.path.join(temp_dir, BASE_JS_FILE), 'w') as fout:
-            for line in lines:
-                fout.write(line)
-
-    def _set_socket_port_in_js(self, temp_dir, socket_port):
-        with open(os.path.join(temp_dir, BASE_JS_FILE)) as fin:
-            lines = fin.readlines()
-            lines[1] = 'var SOCKET_PORT = {}\n'.format(socket_port)
-
-        with open(os.path.join(temp_dir, BASE_JS_FILE), 'w') as fout:
-            for line in lines:
-                fout.write(line)
-
-    def predict(self, array):
-        if self.model_type=='sklearn':
-            return self.model_obj.predict(array)
-        elif self.model_type=='keras':
-            return self.model_obj.predict(array)
-        elif self.model_type=='func':
-            return self.model_obj(array)
-        else:
-            raise ValueError('model_type must be one of: "sklearn" or "keras" or "func".')
-
-    async def communicate(self, websocket, path):
-        """
-        Method that defines how this interface communicates with the websocket.
-        :param websocket: a Websocket object used to communicate with the interface frontend
-        :param path: ignored
-        """
-        while True:
-            try:
-                msg = await websocket.recv()
-                processed_input = self.input_interface._pre_process(msg)
-                prediction = self.predict(processed_input)
-                processed_output = self.output_interface._post_process(prediction)
-                await websocket.send(str(processed_output))
-            except websockets.exceptions.ConnectionClosed:
-                pass
-
-    def launch(self, share_link=True):
-        """
-        Standard method shared by interfaces that launches a websocket at a specified IP address.
-        """
-        networking.kill_processes([4040, 4041])
-        output_directory = tempfile.mkdtemp()
-
-        server_port = networking.start_simple_server(output_directory)
-        path_to_server = 'http://localhost:{}/'.format(server_port)
-        self._build_template(output_directory)
-
-        ports_in_use = networking.get_ports_in_use()
-        for i in range(TRY_NUM_PORTS):
-            if not ((INITIAL_WEBSOCKET_PORT + i) in ports_in_use):
-                break
-        else:
-            raise OSError("All ports from {} to {} are in use. Please close a port.".format(
-                INITIAL_WEBSOCKET_PORT, INITIAL_WEBSOCKET_PORT + TRY_NUM_PORTS))
-
-        start_server = websockets.serve(self.communicate, LOCALHOST_IP, INITIAL_WEBSOCKET_PORT + i)
-        self._set_socket_port_in_js(output_directory, INITIAL_WEBSOCKET_PORT + i)
-
-        if share_link:
-            site_ngrok_url = networking.setup_ngrok(server_port)
-            socket_ngrok_url = networking.setup_ngrok(INITIAL_WEBSOCKET_PORT, api_url=networking.NGROK_TUNNELS_API_URL2)
-            self._set_socket_url_in_js(output_directory, socket_ngrok_url)
-            print("NOTE: Gradio is in beta stage, please report all bugs to: a12d@stanford.edu")
-            print("Model available locally at: {}".format(path_to_server + TEMPLATE_TEMP))
-            print("Model available publicly for 8 hours at: {}".format(site_ngrok_url + '/' + TEMPLATE_TEMP))
-        asyncio.get_event_loop().run_until_complete(start_server)
-        try:
-            asyncio.get_event_loop().run_forever()
-        except RuntimeError:  # Runtime errors are thrown in jupyter notebooks because of async.
-            pass
-
-        webbrowser.open(path_to_server + TEMPLATE_TEMP)
+from interface import Interface  # This makes Interface importable as gradio.Interface.
diff --git a/gradio/interface.py b/gradio/interface.py
new file mode 100644
index 0000000000..adcf0b9675
--- /dev/null
+++ b/gradio/interface.py
@@ -0,0 +1,157 @@
+import asyncio
+import websockets
+import nest_asyncio
+import webbrowser
+import pkg_resources
+from bs4 import BeautifulSoup
+from gradio import inputs
+from gradio import outputs
+from gradio import networking
+import os
+import shutil
+import tempfile
+
+nest_asyncio.apply()
+
+LOCALHOST_IP = '127.0.0.1'
+INITIAL_WEBSOCKET_PORT = 9200
+TRY_NUM_PORTS = 100
+
+BASE_TEMPLATE = pkg_resources.resource_filename('gradio', 'templates/all_io.html')
+JS_PATH_LIB = pkg_resources.resource_filename('gradio', 'js/')
+CSS_PATH_LIB = pkg_resources.resource_filename('gradio', 'css/')
+JS_PATH_TEMP = 'js/'
+CSS_PATH_TEMP = 'css/'
+TEMPLATE_TEMP = 'interface.html'
+BASE_JS_FILE = 'js/all-io.js'
+
+
+class Interface():
+    """
+    """
+
+    def __init__(self, input, output, model, model_type, preprocessing_fn=None, postprocessing_fn=None):
+        """
+        :param model_type: what kind of trained model, can be 'keras' or 'sklearn'.
+        :param model_obj: the model object, such as a sklearn classifier or keras model.
+        :param model_params: additional model parameters.
+        """
+        self.input_interface = inputs.registry[input](preprocessing_fn)
+        self.output_interface = outputs.registry[output](postprocessing_fn)
+        self.model_type = model_type
+        self.model_obj = model
+
+    def _build_template(self, temp_dir):
+        input_template_path = pkg_resources.resource_filename(
+            'gradio', self.input_interface._get_template_path())
+        output_template_path = pkg_resources.resource_filename(
+            'gradio', self.output_interface._get_template_path())
+        input_page = open(input_template_path)
+        output_page = open(output_template_path)
+        input_soup = BeautifulSoup(input_page.read(), features="html.parser")
+        output_soup = BeautifulSoup(output_page.read(), features="html.parser")
+
+        all_io_page = open(BASE_TEMPLATE)
+        all_io_soup = BeautifulSoup(all_io_page.read(), features="html.parser")
+        input_tag = all_io_soup.find("div", {"id": "input"})
+        output_tag = all_io_soup.find("div", {"id": "output"})
+
+        input_tag.replace_with(input_soup)
+        output_tag.replace_with(output_soup)
+
+        f = open(os.path.join(temp_dir, TEMPLATE_TEMP), "w")
+        f.write(str(all_io_soup.prettify))
+
+        self._copy_files(JS_PATH_LIB, os.path.join(temp_dir, JS_PATH_TEMP))
+        self._copy_files(CSS_PATH_LIB, os.path.join(temp_dir, CSS_PATH_TEMP))
+        return
+
+    def _copy_files(self, src_dir, dest_dir):
+        if not os.path.exists(dest_dir):
+            os.makedirs(dest_dir)
+        src_files = os.listdir(src_dir)
+        for file_name in src_files:
+            full_file_name = os.path.join(src_dir, file_name)
+            if os.path.isfile(full_file_name):
+                shutil.copy(full_file_name, dest_dir)
+
+    def _set_socket_url_in_js(self, temp_dir, socket_url):
+        with open(os.path.join(temp_dir, BASE_JS_FILE)) as fin:
+            lines = fin.readlines()
+            lines[0] = 'var NGROK_URL = "{}"\n'.format(socket_url.replace('http', 'ws'))
+
+        with open(os.path.join(temp_dir, BASE_JS_FILE), 'w') as fout:
+            for line in lines:
+                fout.write(line)
+
+    def _set_socket_port_in_js(self, temp_dir, socket_port):
+        with open(os.path.join(temp_dir, BASE_JS_FILE)) as fin:
+            lines = fin.readlines()
+            lines[1] = 'var SOCKET_PORT = {}\n'.format(socket_port)
+
+        with open(os.path.join(temp_dir, BASE_JS_FILE), 'w') as fout:
+            for line in lines:
+                fout.write(line)
+
+    def predict(self, array):
+        if self.model_type=='sklearn':
+            return self.model_obj.predict(array)
+        elif self.model_type=='keras':
+            return self.model_obj.predict(array)
+        elif self.model_type=='func':
+            return self.model_obj(array)
+        else:
+            raise ValueError('model_type must be one of: "sklearn" or "keras" or "func".')
+
+    async def communicate(self, websocket, path):
+        """
+        Method that defines how this interface communicates with the websocket.
+        :param websocket: a Websocket object used to communicate with the interface frontend
+        :param path: ignored
+        """
+        while True:
+            try:
+                msg = await websocket.recv()
+                processed_input = self.input_interface._pre_process(msg)
+                prediction = self.predict(processed_input)
+                processed_output = self.output_interface._post_process(prediction)
+                await websocket.send(str(processed_output))
+            except websockets.exceptions.ConnectionClosed:
+                pass
+
+    def launch(self, share_link=True):
+        """
+        Standard method shared by interfaces that launches a websocket at a specified IP address.
+        """
+        networking.kill_processes([4040, 4041])
+        output_directory = tempfile.mkdtemp()
+
+        server_port = networking.start_simple_server(output_directory)
+        path_to_server = 'http://localhost:{}/'.format(server_port)
+        self._build_template(output_directory)
+
+        ports_in_use = networking.get_ports_in_use()
+        for i in range(TRY_NUM_PORTS):
+            if not ((INITIAL_WEBSOCKET_PORT + i) in ports_in_use):
+                break
+        else:
+            raise OSError("All ports from {} to {} are in use. Please close a port.".format(
+                INITIAL_WEBSOCKET_PORT, INITIAL_WEBSOCKET_PORT + TRY_NUM_PORTS))
+
+        start_server = websockets.serve(self.communicate, LOCALHOST_IP, INITIAL_WEBSOCKET_PORT + i)
+        self._set_socket_port_in_js(output_directory, INITIAL_WEBSOCKET_PORT + i)
+
+        if share_link:
+            site_ngrok_url = networking.setup_ngrok(server_port)
+            socket_ngrok_url = networking.setup_ngrok(INITIAL_WEBSOCKET_PORT, api_url=networking.NGROK_TUNNELS_API_URL2)
+            self._set_socket_url_in_js(output_directory, socket_ngrok_url)
+            print("NOTE: Gradio is in beta stage, please report all bugs to: a12d@stanford.edu")
+            print("Model available locally at: {}".format(path_to_server + TEMPLATE_TEMP))
+            print("Model available publicly for 8 hours at: {}".format(site_ngrok_url + '/' + TEMPLATE_TEMP))
+        asyncio.get_event_loop().run_until_complete(start_server)
+        try:
+            asyncio.get_event_loop().run_forever()
+        except RuntimeError:  # Runtime errors are thrown in jupyter notebooks because of async.
+            pass
+
+        webbrowser.open(path_to_server + TEMPLATE_TEMP)