fixed sketchpad input alignment kinda

This commit is contained in:
Abubakar Abid 2019-02-19 20:28:59 -08:00
parent 809c5e999d
commit 0a046fe034
8 changed files with 123 additions and 128 deletions

View File

@ -2,49 +2,13 @@
<project version="4">
<component name="ChangeListManager">
<list default="true" id="fd73cd66-e80f-470e-a2ec-e220d3b6b864" name="Default Changelist" comment="">
<change beforePath="$PROJECT_DIR$/.gitignore" beforeDir="false" afterPath="$PROJECT_DIR$/.gitignore" afterDir="false" />
<change beforePath="$PROJECT_DIR$/.idea/workspace.xml" beforeDir="false" afterPath="$PROJECT_DIR$/.idea/workspace.xml" afterDir="false" />
<change beforePath="$PROJECT_DIR$/Emotional Detector (Upload).ipynb" beforeDir="false" afterPath="$PROJECT_DIR$/Emotional Detector (Upload).ipynb" afterDir="false" />
<change beforePath="$PROJECT_DIR$/MNIST Handwritten Digits.ipynb" beforeDir="false" afterPath="$PROJECT_DIR$/MNIST Handwritten Digits.ipynb" afterDir="false" />
<change beforePath="$PROJECT_DIR$/css/bootstrap-grid.css" beforeDir="false" />
<change beforePath="$PROJECT_DIR$/css/bootstrap-grid.css.map" beforeDir="false" />
<change beforePath="$PROJECT_DIR$/css/bootstrap-grid.min.css" beforeDir="false" />
<change beforePath="$PROJECT_DIR$/css/bootstrap-grid.min.css.map" beforeDir="false" />
<change beforePath="$PROJECT_DIR$/css/bootstrap-reboot.css" beforeDir="false" />
<change beforePath="$PROJECT_DIR$/css/bootstrap-reboot.css.map" beforeDir="false" />
<change beforePath="$PROJECT_DIR$/css/bootstrap-reboot.min.css" beforeDir="false" />
<change beforePath="$PROJECT_DIR$/css/bootstrap-reboot.min.css.map" beforeDir="false" />
<change beforePath="$PROJECT_DIR$/css/bootstrap.css" beforeDir="false" />
<change beforePath="$PROJECT_DIR$/css/bootstrap.css.map" beforeDir="false" />
<change beforePath="$PROJECT_DIR$/css/bootstrap.min.css" beforeDir="false" />
<change beforePath="$PROJECT_DIR$/css/bootstrap.min.css.map" beforeDir="false" />
<change beforePath="$PROJECT_DIR$/css/draw-a-digit.css" beforeDir="false" />
<change beforePath="$PROJECT_DIR$/css/dropzone.css" beforeDir="false" />
<change beforePath="$PROJECT_DIR$/css/index.css" beforeDir="false" />
<change beforePath="$PROJECT_DIR$/Sentiment Analysis (textbox to class) .ipynb" beforeDir="false" afterPath="$PROJECT_DIR$/Sentiment Analysis (textbox to class) .ipynb" afterDir="false" />
<change beforePath="$PROJECT_DIR$/gradio/__init__.py" beforeDir="false" afterPath="$PROJECT_DIR$/gradio/__init__.py" afterDir="false" />
<change beforePath="$PROJECT_DIR$/gradio/js/all-io.js" beforeDir="false" afterPath="$PROJECT_DIR$/gradio/js/all-io.js" afterDir="false" />
<change beforePath="$PROJECT_DIR$/gradio/networking.py" beforeDir="false" afterPath="$PROJECT_DIR$/gradio/networking.py" afterDir="false" />
<change beforePath="$PROJECT_DIR$/interface.html" beforeDir="false" />
<change beforePath="$PROJECT_DIR$/js/all-io.js" beforeDir="false" />
<change beforePath="$PROJECT_DIR$/js/audio-input.js" beforeDir="false" />
<change beforePath="$PROJECT_DIR$/js/bootstrap-notify.min.js" beforeDir="false" />
<change beforePath="$PROJECT_DIR$/js/bootstrap.bundle.js" beforeDir="false" />
<change beforePath="$PROJECT_DIR$/js/bootstrap.bundle.js.map" beforeDir="false" />
<change beforePath="$PROJECT_DIR$/js/bootstrap.bundle.min.js" beforeDir="false" />
<change beforePath="$PROJECT_DIR$/js/bootstrap.bundle.min.js.map" beforeDir="false" />
<change beforePath="$PROJECT_DIR$/js/bootstrap.js" beforeDir="false" />
<change beforePath="$PROJECT_DIR$/js/bootstrap.js.map" beforeDir="false" />
<change beforePath="$PROJECT_DIR$/js/bootstrap.min.js" beforeDir="false" />
<change beforePath="$PROJECT_DIR$/js/bootstrap.min.js.map" beforeDir="false" />
<change beforePath="$PROJECT_DIR$/js/class-output.js" beforeDir="false" />
<change beforePath="$PROJECT_DIR$/js/draw-a-digit.js" beforeDir="false" />
<change beforePath="$PROJECT_DIR$/js/dropzone.js" beforeDir="false" />
<change beforePath="$PROJECT_DIR$/js/emotion-detector.js" beforeDir="false" />
<change beforePath="$PROJECT_DIR$/js/image-upload-input.js" beforeDir="false" />
<change beforePath="$PROJECT_DIR$/js/jquery-3.3.1.min.js" beforeDir="false" />
<change beforePath="$PROJECT_DIR$/js/sketchpad-input.js" beforeDir="false" />
<change beforePath="$PROJECT_DIR$/js/textbox-input.js" beforeDir="false" />
<change beforePath="$PROJECT_DIR$/js/textbox-output.js" beforeDir="false" />
<change beforePath="$PROJECT_DIR$/js/webcam-input.js" beforeDir="false" />
<change beforePath="$PROJECT_DIR$/gradio/preprocessing_utils.py" beforeDir="false" afterPath="$PROJECT_DIR$/gradio/preprocessing_utils.py" afterDir="false" />
<change beforePath="$PROJECT_DIR$/gradio/templates/sketchpad_input.html" beforeDir="false" afterPath="$PROJECT_DIR$/gradio/templates/sketchpad_input.html" afterDir="false" />
</list>
<option name="EXCLUDED_CONVERTED_TO_IGNORED" value="true" />
<option name="SHOW_DIALOG" value="false" />
@ -115,7 +79,7 @@
<counts>
<entry key="css" value="3" />
<entry key="gitignore" value="1" />
<entry key="html" value="4" />
<entry key="html" value="9" />
<entry key="ipynb" value="1" />
<entry key="js" value="6" />
<entry key="py" value="19" />
@ -124,7 +88,7 @@
<usages-collector id="statistics.file.types.open">
<counts>
<entry key="CSS" value="3" />
<entry key="HTML" value="4" />
<entry key="HTML" value="9" />
<entry key="IPNB" value="1" />
<entry key="JavaScript" value="6" />
<entry key="PLAIN_TEXT" value="1" />
@ -138,7 +102,7 @@
<entry key="gitignore" value="2" />
<entry key="html" value="112" />
<entry key="js" value="281" />
<entry key="py" value="4936" />
<entry key="py" value="4984" />
</counts>
</usages-collector>
<usages-collector id="statistics.file.types.edit">
@ -147,7 +111,7 @@
<entry key="HTML" value="112" />
<entry key="JavaScript" value="281" />
<entry key="PLAIN_TEXT" value="21" />
<entry key="Python" value="4936" />
<entry key="Python" value="4984" />
</counts>
</usages-collector>
</session>
@ -175,8 +139,8 @@
<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="291">
<caret line="125" column="11" lean-forward="true" selection-start-line="125" selection-start-column="11" selection-end-line="125" selection-end-column="11" />
<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>
@ -184,18 +148,6 @@
</provider>
</entry>
</file>
<file pinned="false" current-in-tab="true">
<entry file="file://$PROJECT_DIR$/gradio/networking.py">
<provider selected="true" editor-type-id="text-editor">
<state relative-caret-position="550">
<caret line="43" column="100" selection-start-line="43" selection-start-column="100" selection-end-line="43" selection-end-column="100" />
<folding>
<element signature="e#0#17#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">
@ -233,9 +185,39 @@
</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" lean-forward="true" 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="true">
<entry file="file://$PROJECT_DIR$/gradio/templates/sketchpad_input.html">
<provider selected="true" editor-type-id="text-editor">
<state relative-caret-position="25">
<caret line="1" column="23" selection-start-line="1" selection-start-column="23" selection-end-line="1" selection-end-column="23" />
</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" lean-forward="true" 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">
@ -271,17 +253,18 @@
<find>inputs.</find>
<find>subprocess</find>
<find>psutil</find>
<find>/</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">
@ -324,8 +307,10 @@
<option value="$PROJECT_DIR$/../testing/test_gradio.py" />
<option value="$PROJECT_DIR$/gradio/js/all-io.js" />
<option value="$PROJECT_DIR$/setup.py" />
<option value="$PROJECT_DIR$/gradio/__init__.py" />
<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" />
</list>
</option>
</component>
@ -366,7 +351,13 @@
<item name="gradio" type="b2602c69:ProjectViewProjectNode" />
<item name="gradio" type="462c0819:PsiDirectoryNode" />
<item name="gradio" type="462c0819:PsiDirectoryNode" />
<item name="js" 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 />
@ -599,28 +590,55 @@
</state>
</provider>
</entry>
<entry file="file://$PROJECT_DIR$/gradio/preprocessing_utils.py">
<provider selected="true" editor-type-id="text-editor" />
</entry>
<entry file="file://$PROJECT_DIR$/gradio/__init__.py">
<provider selected="true" editor-type-id="text-editor">
<state relative-caret-position="291">
<caret line="125" column="11" lean-forward="true" selection-start-line="125" selection-start-column="11" selection-end-line="125" selection-end-column="11" />
<folding>
<element signature="e#0#14#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="550">
<caret line="43" column="100" selection-start-line="43" selection-start-column="100" selection-end-line="43" selection-end-column="100" />
<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" lean-forward="true" 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" lean-forward="true" 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="25">
<caret line="1" column="23" selection-start-line="1" selection-start-column="23" selection-end-line="1" selection-end-column="23" />
</state>
</provider>
</entry>
</component>
</project>

View File

@ -32,7 +32,7 @@
},
{
"cell_type": "code",
"execution_count": 4,
"execution_count": 2,
"metadata": {},
"outputs": [],
"source": [
@ -41,7 +41,7 @@
},
{
"cell_type": "code",
"execution_count": 5,
"execution_count": 3,
"metadata": {},
"outputs": [],
"source": [
@ -54,20 +54,10 @@
"cell_type": "code",
"execution_count": 6,
"metadata": {},
"outputs": [
{
"name": "stdout",
"output_type": "stream",
"text": [
"NOTE: Gradio is in beta stage, please report all bugs to: a12d@stanford.edu\n",
"Model available locally at: http://localhost:7861/interface.html\n",
"Model available publicly for 8 hours at: https://fe2a5e78.ngrok.io/interface.html\n"
]
}
],
"outputs": [],
"source": [
"iface = gradio.Interface(input='imageupload', output='class', model=model, model_type='keras',postprocessing_fn=post_p)\n",
"iface.launch()"
"iface.launch(share_link=False)"
]
}
],

View File

@ -2,7 +2,7 @@
"cells": [
{
"cell_type": "code",
"execution_count": 1,
"execution_count": 3,
"metadata": {},
"outputs": [
{
@ -37,7 +37,7 @@
},
{
"cell_type": "code",
"execution_count": 2,
"execution_count": 4,
"metadata": {
"scrolled": true
},
@ -55,19 +55,11 @@
},
{
"cell_type": "code",
"execution_count": 23,
"execution_count": 5,
"metadata": {
"scrolled": false
},
"outputs": [
{
"name": "stdout",
"output_type": "stream",
"text": [
"C:\\Users\\islam\\AppData\\Local\\Temp\\tmpr1mn0brj\n"
]
}
],
"outputs": [],
"source": [
"iface = gradio.Interface(input='sketchpad', output='class', model=model, model_type='keras')\n",
"iface.launch(share_link=False)"

View File

@ -67,19 +67,16 @@
},
{
"cell_type": "code",
"execution_count": 5,
"execution_count": 6,
"metadata": {},
"outputs": [
{
"name": "stdout",
"output_type": "stream",
"text": [
"Model available locally at: http://localhost:7860/templates/tmp_html.html\n",
"http://30379407.ngrok.io\n",
"Model available publicly for 8 hours at: http://f3cf0e10.ngrok.io/templates/tmp_html.html\n",
"-- Gradio is in beta stage --\n",
"Please report all bugs to: a12d@stanford.edu\n",
"If you'd like to launch another gradio instance, please restart your notebook/python kernel.\n"
"NOTE: Gradio is in beta stage, please report all bugs to: a12d@stanford.edu\n",
"Model available locally at: http://localhost:7875/interface.html\n",
"Model available publicly for 8 hours at: http://1c48cf0f.ngrok.io/interface.html\n"
]
}
],

View File

@ -18,12 +18,12 @@ INITIAL_WEBSOCKET_PORT = 9200
TRY_NUM_PORTS = 100
BASE_TEMPLATE = pkg_resources.resource_filename('gradio', 'templates/all_io.html')
JS_FILE = pkg_resources.resource_filename('gradio', 'js/all-io.js')
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():
@ -75,22 +75,21 @@ class Interface():
if os.path.isfile(full_file_name):
shutil.copy(full_file_name, dest_dir)
def _set_socket_url_in_js(self, socket_url):
with open(JS_FILE) as fin:
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(JS_FILE, 'w') as fout:
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, socket_port):
with open(JS_FILE) as fin:
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(JS_FILE, 'w') as fout:
with open(os.path.join(temp_dir, BASE_JS_FILE), 'w') as fout:
for line in lines:
fout.write(line)
@ -127,7 +126,6 @@ class Interface():
networking.kill_processes([4040, 4041])
output_directory = tempfile.mkdtemp()
print(output_directory)
server_port = networking.start_simple_server(output_directory)
path_to_server = 'http://localhost:{}/'.format(server_port)
self._build_template(output_directory)
@ -141,12 +139,12 @@ class Interface():
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(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(socket_ngrok_url)
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))

View File

@ -1,5 +1,5 @@
var NGROK_URL = "ws://0f9bffb5.ngrok.io"
var SOCKET_PORT = 9218
var SOCKET_PORT = 9200
try {
var origin = window.location.origin;

View File

@ -17,17 +17,17 @@ def resize_and_crop(img, size, crop_type='top'):
ValueError: if an invalid `crop_type` is provided.
"""
# Get current and desired ratio for the images
img_ratio = img.size[0] / float(img.size[1])
ratio = size[0] / float(size[1])
# The image is scaled/cropped vertically or horizontally depending on the ratio
img_ratio = img.size[0] // float(img.size[1])
ratio = size[0] // float(size[1])
# The image is scaled//cropped vertically or horizontally depending on the ratio
if ratio > img_ratio:
img = img.resize((size[0], size[0] * img.size[1] / img.size[0]),
img = img.resize((size[0], size[0] * img.size[1] // img.size[0]),
Image.ANTIALIAS)
# Crop in the top, middle or bottom
if crop_type == 'top':
box = (0, 0, img.size[0], size[1])
elif crop_type == 'middle':
box = (0, (img.size[1] - size[1]) / 2, img.size[0], (img.size[1] + size[1]) / 2)
box = (0, (img.size[1] - size[1]) // 2, img.size[0], (img.size[1] + size[1]) // 2)
elif crop_type == 'bottom':
box = (0, img.size[1] - size[1], img.size[0], img.size[1])
else:
@ -40,7 +40,7 @@ def resize_and_crop(img, size, crop_type='top'):
if crop_type == 'top':
box = (0, 0, size[0], img.size[1])
elif crop_type == 'middle':
box = ((img.size[0] - size[0]) / 2, 0, (img.size[0] + size[0]) / 2, img.size[1])
box = ((img.size[0] - size[0]) // 2, 0, (img.size[0] + size[0]) // 2, img.size[1])
elif crop_type == 'bottom':
box = (img.size[0] - size[0], 0, img.size[0], img.size[1])
else:

View File

@ -1,5 +1,5 @@
<div class="col-6">
<h5>Sketch Pad Input: (Use your cursor to draw)</h5>
<h5>Sketch Pad Input:</h5>
<canvas id="canvas" width="400" height="400"></canvas><br>
<div class="btn-group" role="group" aria-label="Basic example">
<button type="button" class="btn btn-primary" id="submit-button">Recognize</button>