Skip to content
This repository was archived by the owner on Aug 7, 2025. It is now read-only.

Commit e363ace

Browse files
chauhangchauhang
authored
Merge pull request #1146 from JonathanSum/master
Adding Reactjs example for Image Classifier and Fixing Typo
2 parents 4ad8986 + 6efe211 commit e363ace

File tree

20 files changed

+139
-1
lines changed

20 files changed

+139
-1
lines changed

‎examples/Huggingface_Transformers/README.md‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -22,7 +22,7 @@ If you're finetuning an existing model then you need to save your model and toke
2222

2323
```
2424
mkdir Transformer_model
25-
mv pytorch_model_bin vocab.txt config.json Transformer_model/
25+
mv pytorch_model.bin vocab.txt config.json Transformer_model/
2626
```
2727

2828
If you'd like to download a pretrained model without fine tuning we've provided a simple helper script which will do the above for you. All you need to do is change [setup.config.json](https://github.com/pytorch/serve/blob/master/examples/Huggingface_Transformers/setup_config.json) to your liking and run

‎examples/image_classifier/resnet_18/ReactJSExample/README.md‎

Lines changed: 36 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,36 @@
1+
<img src="./demo.gif" width="700">
2+
3+
Instructions
4+
5+
Step1: Setup the config.properties file.
6+
7+
Make a file called config.properties and put these two lines in the file as text.
8+
9+
```
10+
cors_allowed_origin=*
11+
cors_allowed_methods=GET, POST, PUT, OPTIONS
12+
```
13+
14+
Step2: Follows the step to sets up the backend torch serve server.
15+
16+
```bash
17+
18+
wget https://download.pytorch.org/models/resnet18-f37072fd.pth
19+
torch-model-archiver --model-name resnet-18 --version 1.0 --model-file ./examples/image_classifier/resnet_18/model.py --serialized-file resnet18-f37072fd.pth --handler image_classifier --extra-files ./examples/image_classifier/index_to_name.json
20+
mkdir model_store
21+
mv resnet-18.mar model_store/
22+
torchserve --start --model-store model_store --models resnet-18=resnet-18.mar --ts-config config.properties
23+
24+
```
25+
26+
Step3: Run the frontend ReactApp at the parent directory of the build folder.
27+
28+
```bash
29+
30+
serve -s deployed
31+
32+
```
33+
34+
![](image/README/1625898706091.png)
35+
36+
<img src="image/README/1625836884119.png" width="500">

‎examples/image_classifier/resnet_18/ReactJSExample/demo.gif‎

3.87 MB
Loading

‎examples/image_classifier/resnet_18/ReactJSExample/deployed/asset-manifest.json‎

Lines changed: 19 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,19 @@
1+
{
2+
"files": {
3+
"main.css": "/static/css/main.5e3647ae.chunk.css",
4+
"main.js": "/static/js/main.2a22477d.chunk.js",
5+
"runtime-main.js": "/static/js/runtime-main.8e9ee5a4.js",
6+
"static/css/2.c9f03951.chunk.css": "/static/css/2.c9f03951.chunk.css",
7+
"static/js/2.792d00c1.chunk.js": "/static/js/2.792d00c1.chunk.js",
8+
"static/js/3.64cc616e.chunk.js": "/static/js/3.64cc616e.chunk.js",
9+
"index.html": "/index.html",
10+
"static/js/2.792d00c1.chunk.js.LICENSE.txt": "/static/js/2.792d00c1.chunk.js.LICENSE.txt"
11+
},
12+
"entrypoints": [
13+
"static/js/runtime-main.8e9ee5a4.js",
14+
"static/css/2.c9f03951.chunk.css",
15+
"static/js/2.792d00c1.chunk.js",
16+
"static/css/main.5e3647ae.chunk.css",
17+
"static/js/main.2a22477d.chunk.js"
18+
]
19+
}

‎examples/image_classifier/resnet_18/ReactJSExample/deployed/favicon.ico‎

3.78 KB
Binary file not shown.

‎examples/image_classifier/resnet_18/ReactJSExample/deployed/index.html‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1 @@
1+
<!doctype html><html lang="en"><head><meta charset="utf-8"/><link rel="icon" href="/favicon.ico"/><meta name="viewport" content="width=device-width,initial-scale=1"/><meta name="theme-color" content="#000000"/><meta name="description" content="Web site created using create-react-app"/><link rel="apple-touch-icon" href="/logo192.png"/><link rel="manifest" href="/manifest.json"/><title>resnet_18</title><link href="/static/css/2.c9f03951.chunk.css" rel="stylesheet"><link href="/static/css/main.5e3647ae.chunk.css" rel="stylesheet"></head><body><noscript>You need to enable JavaScript to run this app.</noscript><div id="root"></div><script>!function(e){function r(r){for(var n,a,i=r[0],c=r[1],l=r[2],s=0,p=[];s<i.length;s++)a=i[s],Object.prototype.hasOwnProperty.call(o,a)&&o[a]&&p.push(o[a][0]),o[a]=0;for(n in c)Object.prototype.hasOwnProperty.call(c,n)&&(e[n]=c[n]);for(f&&f(r);p.length;)p.shift()();return u.push.apply(u,l||[]),t()}function t(){for(var e,r=0;r<u.length;r++){for(var t=u[r],n=!0,i=1;i<t.length;i++){var c=t[i];0!==o[c]&&(n=!1)}n&&(u.splice(r--,1),e=a(a.s=t[0]))}return e}var n={},o={1:0},u=[];function a(r){if(n[r])return n[r].exports;var t=n[r]={i:r,l:!1,exports:{}};return e[r].call(t.exports,t,t.exports,a),t.l=!0,t.exports}a.e=function(e){var r=[],t=o[e];if(0!==t)if(t)r.push(t[2]);else{var n=new Promise((function(r,n){t=o[e]=[r,n]}));r.push(t[2]=n);var u,i=document.createElement("script");i.charset="utf-8",i.timeout=120,a.nc&&i.setAttribute("nonce",a.nc),i.src=function(e){return a.p+"static/js/"+({}[e]||e)+"."+{3:"64cc616e"}[e]+".chunk.js"}(e);var c=new Error;u=function(r){i.onerror=i.onload=null,clearTimeout(l);var t=o[e];if(0!==t){if(t){var n=r&&("load"===r.type?"missing":r.type),u=r&&r.target&&r.target.src;c.message="Loading chunk "+e+" failed.\n("+n+": "+u+")",c.name="ChunkLoadError",c.type=n,c.request=u,t[1](c)}o[e]=void 0}};var l=setTimeout((function(){u({type:"timeout",target:i})}),12e4);i.onerror=i.onload=u,document.head.appendChild(i)}return Promise.all(r)},a.m=e,a.c=n,a.d=function(e,r,t){a.o(e,r)||Object.defineProperty(e,r,{enumerable:!0,get:t})},a.r=function(e){"undefined"!=typeof Symbol&&Symbol.toStringTag&&Object.defineProperty(e,Symbol.toStringTag,{value:"Module"}),Object.defineProperty(e,"__esModule",{value:!0})},a.t=function(e,r){if(1&r&&(e=a(e)),8&r)return e;if(4&r&&"object"==typeof e&&e&&e.__esModule)return e;var t=Object.create(null);if(a.r(t),Object.defineProperty(t,"default",{enumerable:!0,value:e}),2&r&&"string"!=typeof e)for(var n in e)a.d(t,n,function(r){return e[r]}.bind(null,n));return t},a.n=function(e){var r=e&&e.__esModule?function(){return e.default}:function(){return e};return a.d(r,"a",r),r},a.o=function(e,r){return Object.prototype.hasOwnProperty.call(e,r)},a.p="/",a.oe=function(e){throw console.error(e),e};var i=this["webpackJsonpserve-react"]=this["webpackJsonpserve-react"]||[],c=i.push.bind(i);i.push=r,i=i.slice();for(var l=0;l<i.length;l++)r(i[l]);var f=c;t()}([])</script><script src="/static/js/2.792d00c1.chunk.js"></script><script src="/static/js/main.2a22477d.chunk.js"></script></body></html>

‎examples/image_classifier/resnet_18/ReactJSExample/deployed/logo192.png‎

5.22 KB
Loading

‎examples/image_classifier/resnet_18/ReactJSExample/deployed/logo512.png‎

9.44 KB
Loading

‎examples/image_classifier/resnet_18/ReactJSExample/deployed/manifest.json‎

Lines changed: 25 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,25 @@
1+
{
2+
"short_name": "React App",
3+
"name": "Create React App Sample",
4+
"icons": [
5+
{
6+
"src": "favicon.ico",
7+
"sizes": "64x64 32x32 24x24 16x16",
8+
"type": "image/x-icon"
9+
},
10+
{
11+
"src": "logo192.png",
12+
"type": "image/png",
13+
"sizes": "192x192"
14+
},
15+
{
16+
"src": "logo512.png",
17+
"type": "image/png",
18+
"sizes": "512x512"
19+
}
20+
],
21+
"start_url": ".",
22+
"display": "standalone",
23+
"theme_color": "#000000",
24+
"background_color": "#ffffff"
25+
}

‎examples/image_classifier/resnet_18/ReactJSExample/deployed/robots.txt‎

Lines changed: 3 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,3 @@
1+
# https://www.robotstxt.org/robotstxt.html
2+
User-agent: *
3+
Disallow:

0 commit comments

Comments
 (0)