handle model closing

This commit is contained in:
Abubakar Abid 2019-02-17 20:00:40 -08:00
parent 18b773f2ed
commit 835f17f2ba
6 changed files with 170 additions and 174 deletions

View File

@ -4,9 +4,10 @@
<list default="true" id="fd73cd66-e80f-470e-a2ec-e220d3b6b864" name="Default Changelist" comment="">
<change beforePath="$PROJECT_DIR$/.idea/workspace.xml" beforeDir="false" afterPath="$PROJECT_DIR$/.idea/workspace.xml" afterDir="false" />
<change beforePath="$PROJECT_DIR$/Test Notebook.ipynb" beforeDir="false" afterPath="$PROJECT_DIR$/Test Notebook.ipynb" afterDir="false" />
<change beforePath="$PROJECT_DIR$/gradio.py" beforeDir="false" afterPath="$PROJECT_DIR$/gradio.py" afterDir="false" />
<change beforePath="$PROJECT_DIR$/inputs.py" beforeDir="false" afterPath="$PROJECT_DIR$/inputs.py" afterDir="false" />
<change beforePath="$PROJECT_DIR$/outputs.py" beforeDir="false" afterPath="$PROJECT_DIR$/outputs.py" afterDir="false" />
<change beforePath="$PROJECT_DIR$/css/draw-a-digit.css" beforeDir="false" afterPath="$PROJECT_DIR$/css/draw-a-digit.css" afterDir="false" />
<change beforePath="$PROJECT_DIR$/js/all-io.js" beforeDir="false" afterPath="$PROJECT_DIR$/js/all-io.js" afterDir="false" />
<change beforePath="$PROJECT_DIR$/templates/all_io.html" beforeDir="false" afterPath="$PROJECT_DIR$/templates/all_io.html" afterDir="false" />
<change beforePath="$PROJECT_DIR$/templates/tmp_html.html" beforeDir="false" afterPath="$PROJECT_DIR$/templates/tmp_html.html" afterDir="false" />
</list>
<option name="EXCLUDED_CONVERTED_TO_IGNORED" value="true" />
<option name="SHOW_DIALOG" value="false" />
@ -74,27 +75,39 @@
</usages-collector>
<usages-collector id="statistics.file.extensions.open">
<counts>
<entry key="css" value="3" />
<entry key="gitignore" value="1" />
<entry key="html" value="1" />
<entry key="ipynb" value="1" />
<entry key="js" value="2" />
<entry key="py" value="6" />
</counts>
</usages-collector>
<usages-collector id="statistics.file.types.open">
<counts>
<entry key="CSS" value="3" />
<entry key="HTML" value="1" />
<entry key="IPNB" value="1" />
<entry key="JavaScript" value="2" />
<entry key="PLAIN_TEXT" value="1" />
<entry key="Python" value="6" />
</counts>
</usages-collector>
<usages-collector id="statistics.file.extensions.edit">
<counts>
<entry key="css" value="11" />
<entry key="dummy" value="10" />
<entry key="gitignore" value="2" />
<entry key="html" value="112" />
<entry key="js" value="98" />
<entry key="py" value="2099" />
</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="98" />
<entry key="PLAIN_TEXT" value="12" />
<entry key="Python" value="2099" />
</counts>
@ -103,23 +116,11 @@
</component>
<component name="FileEditorManager">
<leaf SIDE_TABS_SIZE_LIMIT_KEY="300">
<file pinned="false" current-in-tab="false">
<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" />
<folding>
<element signature="e#0#37#0" expanded="true" />
</folding>
</state>
</provider>
</entry>
</file>
<file pinned="false" current-in-tab="false">
<entry file="file://$PROJECT_DIR$/../khateebi/templates/index.html">
<provider selected="true" editor-type-id="text-editor">
<state relative-caret-position="925">
<caret line="37" column="32" selection-start-line="37" selection-start-column="31" selection-end-line="37" selection-end-column="41" />
<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>
@ -127,26 +128,17 @@
<file pinned="false" current-in-tab="false">
<entry file="file://$PROJECT_DIR$/../khateebi/settings.py">
<provider selected="true" editor-type-id="text-editor">
<state relative-caret-position="150">
<caret line="6" column="38" selection-start-line="6" selection-start-column="38" selection-end-line="6" selection-end-column="38" />
<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>
</file>
<file pinned="false" current-in-tab="false">
<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>
</file>
<file pinned="false" current-in-tab="true">
<entry file="file://$PROJECT_DIR$/gradio.py">
<provider selected="true" editor-type-id="text-editor">
<state relative-caret-position="266">
<caret line="50" column="22" lean-forward="true" selection-start-line="50" selection-start-column="22" selection-end-line="50" selection-end-column="22" />
<state relative-caret-position="400">
<caret line="16" column="7" lean-forward="true" selection-start-line="16" selection-start-column="7" selection-end-line="16" selection-end-column="7" />
<folding>
<element signature="e#0#14#0" expanded="true" />
</folding>
@ -155,19 +147,41 @@
</entry>
</file>
<file pinned="false" current-in-tab="false">
<entry file="file://$PROJECT_DIR$/inputs.py">
<entry file="file://$PROJECT_DIR$/templates/all_io.html">
<provider selected="true" editor-type-id="text-editor">
<state relative-caret-position="50">
<caret line="2" column="21" lean-forward="true" selection-start-line="2" selection-start-column="21" selection-end-line="2" selection-end-column="21" />
<state relative-caret-position="375">
<caret line="24" column="11" selection-start-line="24" selection-start-column="11" selection-end-line="24" selection-end-column="11" />
<folding>
<element signature="n#style#0;n#div#0;n#body#0;n#html#0;n#!!top" expanded="true" />
<element signature="n#style#0;n#span#0;n#strong#0;n#em#0;n#li#0;n#ul#1;n#div#0;n#nav#0;n#body#0;n#html#0;n#!!top" expanded="true" />
</folding>
</state>
</provider>
</entry>
</file>
<file pinned="false" current-in-tab="false">
<entry file="file://$PROJECT_DIR$/outputs.py">
<entry file="file://$PROJECT_DIR$/js/all-io.js">
<provider selected="true" editor-type-id="text-editor">
<state relative-caret-position="250">
<caret line="10" column="10" selection-start-line="10" selection-start-column="10" selection-end-line="10" selection-end-column="10" />
<state relative-caret-position="75">
<caret line="3" column="13" lean-forward="true" selection-start-line="3" selection-start-column="13" selection-end-line="3" selection-end-column="13" />
</state>
</provider>
</entry>
</file>
<file pinned="false" current-in-tab="true">
<entry file="file://$PROJECT_DIR$/css/draw-a-digit.css">
<provider selected="true" editor-type-id="text-editor">
<state relative-caret-position="564">
<caret line="52" column="4" selection-start-line="52" selection-start-column="4" selection-end-line="52" selection-end-column="4" />
</state>
</provider>
</entry>
</file>
<file pinned="false" current-in-tab="false">
<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>
@ -200,8 +214,8 @@
<file pinned="false" current-in-tab="false">
<entry file="file://$PROJECT_DIR$/preprocessing_utils.py">
<provider selected="true" editor-type-id="text-editor">
<state relative-caret-position="966">
<caret line="53" selection-start-line="3" selection-end-line="53" />
<state relative-caret-position="41">
<caret line="16" column="31" selection-start-line="16" selection-start-column="31" selection-end-line="16" selection-end-column="31" />
</state>
</provider>
</entry>
@ -217,8 +231,6 @@
</component>
<component name="FindInProjectRecents">
<findStrings>
<find>titl</find>
<find>predict</find>
<find>help</find>
<find>width</find>
<find>submit</find>
@ -247,6 +259,8 @@
<find>zip</find>
<find>resize_</find>
<find>base</find>
<find>ws</find>
<find>&lt;em</find>
</findStrings>
<replaceStrings>
<replace>400</replace>
@ -287,6 +301,9 @@
<option value="$PROJECT_DIR$/inputs.py" />
<option value="$PROJECT_DIR$/outputs.py" />
<option value="$PROJECT_DIR$/gradio.py" />
<option value="$PROJECT_DIR$/js/all-io.js" />
<option value="$PROJECT_DIR$/templates/all_io.html" />
<option value="$PROJECT_DIR$/css/draw-a-digit.css" />
</list>
</option>
</component>
@ -318,6 +335,16 @@
<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="css" type="462c0819:PsiDirectoryNode" />
</path>
<path>
<item name="gradio" type="b2602c69:ProjectViewProjectNode" />
<item name="gradio" type="462c0819:PsiDirectoryNode" />
<item name="js" type="462c0819:PsiDirectoryNode" />
</path>
<path>
<item name="gradio" type="b2602c69:ProjectViewProjectNode" />
<item name="gradio" type="462c0819:PsiDirectoryNode" />
@ -424,13 +451,6 @@
<provider selected="true" editor-type-id="text-editor" />
</entry>
<entry file="file://$PROJECT_DIR$/../gradiome/chat.py" />
<entry file="file://$PROJECT_DIR$/css/index.css">
<provider selected="true" editor-type-id="text-editor">
<state relative-caret-position="476">
<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$/Usage.ipynb">
<provider selected="true" editor-type-id="ipnb-editor">
<state>
@ -438,13 +458,6 @@
</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="102">
<caret line="6" column="1" selection-start-line="6" selection-start-column="1" selection-end-line="6" selection-end-column="1" />
</state>
</provider>
</entry>
<entry file="file://$PROJECT_DIR$/templates/draw_a_digit.html">
<provider selected="true" editor-type-id="text-editor">
<state relative-caret-position="375">
@ -475,6 +488,27 @@
</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$/outputs.py">
<provider selected="true" editor-type-id="text-editor">
<state relative-caret-position="250">
<caret line="10" column="10" selection-start-line="10" selection-start-column="10" selection-end-line="10" selection-end-column="10" />
</state>
</provider>
</entry>
<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$/networking.py">
<provider selected="true" editor-type-id="text-editor">
<state relative-caret-position="450">
@ -489,45 +523,10 @@
</state>
</provider>
</entry>
<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$/../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$/../khateebi/settings.py">
<provider selected="true" editor-type-id="text-editor">
<state relative-caret-position="150">
<caret line="6" column="38" selection-start-line="6" selection-start-column="38" selection-end-line="6" selection-end-column="38" />
</state>
</provider>
</entry>
<entry file="file://$PROJECT_DIR$/../khateebi/templates/index.html">
<provider selected="true" editor-type-id="text-editor">
<state relative-caret-position="925">
<caret line="37" column="32" selection-start-line="37" selection-start-column="31" selection-end-line="37" selection-end-column="41" />
</state>
</provider>
</entry>
<entry file="file://$PROJECT_DIR$/preprocessing_utils.py">
<provider selected="true" editor-type-id="text-editor">
<state relative-caret-position="966">
<caret line="53" selection-start-line="3" selection-end-line="53" />
</state>
</provider>
</entry>
<entry file="file://$PROJECT_DIR$/outputs.py">
<provider selected="true" editor-type-id="text-editor">
<state relative-caret-position="250">
<caret line="10" column="10" selection-start-line="10" selection-start-column="10" selection-end-line="10" selection-end-column="10" />
<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>
@ -538,15 +537,68 @@
</state>
</provider>
</entry>
<entry file="file://$PROJECT_DIR$/preprocessing_utils.py">
<provider selected="true" editor-type-id="text-editor">
<state relative-caret-position="41">
<caret line="16" column="31" selection-start-line="16" selection-start-column="31" selection-end-line="16" selection-end-column="31" />
</state>
</provider>
</entry>
<entry file="file://$PROJECT_DIR$/gradio.py">
<provider selected="true" editor-type-id="text-editor">
<state relative-caret-position="266">
<caret line="50" column="22" lean-forward="true" selection-start-line="50" selection-start-column="22" selection-end-line="50" selection-end-column="22" />
<state relative-caret-position="400">
<caret line="16" column="7" lean-forward="true" selection-start-line="16" selection-start-column="7" selection-end-line="16" selection-end-column="7" />
<folding>
<element signature="e#0#14#0" expanded="true" />
</folding>
</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$/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$/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$/templates/all_io.html">
<provider selected="true" editor-type-id="text-editor">
<state relative-caret-position="375">
<caret line="24" column="11" selection-start-line="24" selection-start-column="11" selection-end-line="24" selection-end-column="11" />
<folding>
<element signature="n#style#0;n#div#0;n#body#0;n#html#0;n#!!top" expanded="true" />
<element signature="n#style#0;n#span#0;n#strong#0;n#em#0;n#li#0;n#ul#1;n#div#0;n#nav#0;n#body#0;n#html#0;n#!!top" expanded="true" />
</folding>
</state>
</provider>
</entry>
<entry file="file://$PROJECT_DIR$/js/all-io.js">
<provider selected="true" editor-type-id="text-editor">
<state relative-caret-position="75">
<caret line="3" column="13" lean-forward="true" selection-start-line="3" selection-start-column="13" selection-end-line="3" selection-end-column="13" />
</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="564">
<caret line="52" column="4" selection-start-line="52" selection-start-column="4" selection-end-line="52" selection-end-column="4" />
</state>
</provider>
</entry>
</component>
</project>

View File

@ -44,81 +44,6 @@
{
"cell_type": "code",
"execution_count": 3,
"metadata": {},
"outputs": [],
"source": [
"import base64\n",
"from PIL import Image\n",
"from io import BytesIO\n",
"import numpy as np\n",
"\n",
"def resize_and_crop(img, size, crop_type='top'):\n",
" \"\"\"\n",
" Resize and crop an image to fit the specified size.\n",
" args:\n",
" img_path: path for the image to resize.\n",
" modified_path: path to store the modified image.\n",
" size: `(width, height)` tuple.\n",
" crop_type: can be 'top', 'middle' or 'bottom', depending on this\n",
" value, the image will cropped getting the 'top/left', 'midle' or\n",
" 'bottom/rigth' of the image to fit the size.\n",
" raises:\n",
" Exception: if can not open the file in img_path of there is problems\n",
" to save the image.\n",
" ValueError: if an invalid `crop_type` is provided.\n",
" \"\"\"\n",
" # Get current and desired ratio for the images\n",
" img_ratio = img.size[0] / float(img.size[1])\n",
" ratio = size[0] / float(size[1])\n",
" # The image is scaled/cropped vertically or horizontally depending on the ratio\n",
" if ratio > img_ratio:\n",
" img = img.resize((size[0], size[0] * img.size[1] / img.size[0]),\n",
" Image.ANTIALIAS)\n",
" # Crop in the top, middle or bottom\n",
" if crop_type == 'top':\n",
" box = (0, 0, img.size[0], size[1])\n",
" elif crop_type == 'middle':\n",
" box = (0, (img.size[1] - size[1]) / 2, img.size[0], (img.size[1] + size[1]) / 2)\n",
" elif crop_type == 'bottom':\n",
" box = (0, img.size[1] - size[1], img.size[0], img.size[1])\n",
" else:\n",
" raise ValueError('ERROR: invalid value for crop_type')\n",
" img = img.crop(box)\n",
" elif ratio < img_ratio:\n",
" img = img.resize((size[1] * img.size[0] / img.size[1], size[1]),\n",
" Image.ANTIALIAS)\n",
" # Crop in the top, middle or bottom\n",
" if crop_type == 'top':\n",
" box = (0, 0, size[0], img.size[1])\n",
" elif crop_type == 'middle':\n",
" box = ((img.size[0] - size[0]) / 2, 0, (img.size[0] + size[0]) / 2, img.size[1])\n",
" elif crop_type == 'bottom':\n",
" box = (img.size[0] - size[0], 0, img.size[0], img.size[1])\n",
" else:\n",
" raise ValueError('ERROR: invalid value for crop_type')\n",
" img = img.crop(box)\n",
" else:\n",
" img = img.resize((size[0], size[1]),\n",
" Image.ANTIALIAS)\n",
" # If the scale is the same, we do not need to crop\n",
" return img\n",
"\n",
"\n",
"def _pre_process(imgstring):\n",
" \"\"\"\n",
" \"\"\"\n",
" content = imgstring.split(';')[1]\n",
" image_encoded = content.split(',')[1]\n",
" body = base64.decodebytes(image_encoded.encode('utf-8'))\n",
" im = Image.open(BytesIO(base64.b64decode(image_encoded))).convert('L')\n",
" im = resize_and_crop(im, (28, 28))\n",
" array = np.array(im).flatten().reshape(1, 28, 28, 1)\n",
" return array"
]
},
{
"cell_type": "code",
"execution_count": 4,
"metadata": {
"scrolled": true
},
@ -128,12 +53,12 @@
"output_type": "stream",
"text": [
"Model available locally at: http://localhost:6002/templates/tmp_html.html\n",
"Model available publicly for 8 hours at: http://57d2bd20.ngrok.io/templates/tmp_html.html\n"
"Model available publicly for 8 hours at: https://57d2bd20.ngrok.io/templates/tmp_html.html\n"
]
}
],
"source": [
"iface = gradio.Interface(input='sketchpad', output='class', model=model, model_type='keras', preprocessing_fn=_pre_process)\n",
"iface = gradio.Interface(input='sketchpad', output='class', model=model, model_type='keras')\n",
"iface.launch()"
]
}

View File

@ -49,3 +49,15 @@ body {
background: black;
color: white;
}
div#overlay {
opacity: 0.5;
background: #000;
width: 100%;
height: 100%;
z-index: 10;
top: 0;
left: 0;
position: fixed;
}

View File

@ -3,6 +3,12 @@ try {
ws.onerror = function(evt) {
notifyError(evt)
};
ws.onclose = function(event) {
console.log("WebSocket is closed now.");
$('#model-status').html('Model: closed');
$('#model-status').css('color', '#e23e44');
$('#overlay').css('visibility','visible')
};
} catch (e) {
notifyError(e)

View File

@ -22,7 +22,7 @@
</head>
<body>
<div id="overlay" style="visibility: hidden"></div>
<nav class="navbar navbar-expand-md navbar-dark bg-dark fixed-top">
<a class="navbar-brand" href="#">Gradio</a>
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarsExampleDefault" aria-controls="navbarsExampleDefault" aria-expanded="false" aria-label="Toggle navigation">
@ -36,8 +36,8 @@
<!--<li class="nav-item">-->
<!--<a class="nav-link" href="#">Help</a>-->
<!--</li>-->
<li class="nav-item ">
<a class="nav-link" href="http://www.siliconprep.com"><em>Gradio</em>, a tool by Silicon School</a>
<li class="nav-item">
<em><strong><span id="model-status" style="color:#3ee263">Model: running</strong></em>
</li>
</ul>
</div>

View File

@ -18,6 +18,7 @@
<link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet"/>
</head>
<body>
<div id="overlay" style="visibility: hidden"></div>
<nav class="navbar navbar-expand-md navbar-dark bg-dark fixed-top">
<a class="navbar-brand" href="#">Gradio</a>
<button aria-controls="navbarsExampleDefault" aria-expanded="false" aria-label="Toggle navigation" class="navbar-toggler" data-target="#navbarsExampleDefault" data-toggle="collapse" type="button">
@ -31,7 +32,7 @@
<!--<a class="nav-link" href="#">Help</a>-->
<!--</li>-->
<li class="nav-item">
<a class="nav-link" href="http://www.siliconprep.com"><em>Gradio</em>, a tool by Silicon School</a>
<em><strong><span id="model-status" style="color:#3ee263">Model: running</span></strong></em>
</li>
</ul>
</div>