Skip to content

Commit 209a012

Browse files
mbeissingermbeissinger
authored
Web Bootstrap starter project for Lobe (#17)
* * Webcam with source selector and mirror flip * Run Lobe tfjs model with web workers * Show top 3 predictions with bar for confidence * update README * Style changes for prediction container * update readme for adding models to the app * Update readme, add svg assets, design polish on camera source selector
1 parent 9a33bbb commit 209a012

Some content is hidden

Large Commits have some content hidden by default. Use the searchbox below for content that may be hidden.

46 files changed

+12548
-2
lines changed

‎.gitignore‎

Lines changed: 25 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,25 @@
1+
# See https://help.github.com/articles/ignoring-files/ for more about ignoring files.
2+
3+
# dependencies
4+
/node_modules
5+
/.pnp
6+
.pnp.js
7+
8+
# testing
9+
/coverage
10+
11+
# production
12+
/build
13+
14+
# misc
15+
.DS_Store
16+
.env.local
17+
.env.development.local
18+
.env.test.local
19+
.env.production.local
20+
21+
npm-debug.log*
22+
yarn-debug.log*
23+
yarn-error.log*
24+
25+
.idea

‎README.md‎

Lines changed: 41 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,3 +1,42 @@
1-
# Under Construction
1+
![Web Bootstrap header](assets/header.jpg)
22

3-
Our Web Starter is undergoing work and we hope to have it back shortly!
3+
[Lobe](http://lobe.ai/) is a free, easy to use app that has everything you need to bring your machine learning ideas to life.
4+
Web Bootstrap takes the machine learning model created in Lobe, and adds it to a project in the browser that uses
5+
[React](https://reactjs.org),
6+
[Create React App](https://github.com/facebook/create-react-app),
7+
[TypeScript](https://www.typescriptlang.org/),
8+
and [TensorFlow.js](https://www.tensorflow.org/js).
9+
10+
## Get Started
11+
12+
1. Clone, fork or download the project on your computer and install [Yarn](https://yarnpkg.com/).
13+
14+
2. Run `yarn install` to install required dependencies.
15+
16+
3. Run `yarn start` to start the server in development mode. This will open a web browser to
17+
`localhost:3000`. By default, this project is using the TensorFlow.js exported model from Lobe found in the `public/model/` folder.
18+
Any changes to the code will automatically reload and be reflected in your browser.
19+
20+
4. To use your own model file, open your Lobe project, go to the Use tab, select Export and click on the TensorFlow.js model file.
21+
When exported, drag the `model.json`, `signature.json`, and `*.bin` files to the `public/model/` folder.
22+
23+
Check out the [Create React App documentation](https://create-react-app.dev/docs/getting-started)
24+
for more information on React and the project structure.
25+
26+
## Additional Information
27+
28+
There are two main components: the Camera and the Prediction.
29+
30+
### `components/camera/Camera.tsx`
31+
The Camera is responsible for displaying a live full screen view of the user's selected webcam.
32+
33+
### `components/prediction/Prediction.tsx`
34+
Our Prediction component is the box in the lower left hand corner.
35+
It is responsible for displaying the top prediction results and their confidences.
36+
37+
## Contributing
38+
39+
GitHub Issues are for reporting bugs, discussing features and general feedback on the Web Bootstrap project. Be sure to check our documentation, FAQ and past issues before opening any new ones.
40+
41+
To share your project, get feedback on it, and learn more about Lobe, please visit our community on [Reddit](https://www.reddit.com/r/Lobe/).
42+
We look forward to seeing the amazing projects that can be built, when machine learning is made accessible to you.

‎assets/header.jpg‎

614 KB
Loading

‎package.json‎

Lines changed: 48 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,48 @@
1+
{
2+
"name": "lobe-web-sample",
3+
"version": "0.1.0",
4+
"private": true,
5+
"dependencies": {
6+
"@tensorflow/tfjs": "^3.1.0",
7+
"@testing-library/jest-dom": "^5.11.4",
8+
"@testing-library/react": "^11.1.0",
9+
"@testing-library/user-event": "^12.1.10",
10+
"@types/jest": "^26.0.15",
11+
"@types/node": "^12.0.0",
12+
"@types/react": "^17.0.0",
13+
"@types/react-dom": "^17.0.0",
14+
"react": "^17.0.1",
15+
"react-dom": "^17.0.1",
16+
"react-scripts": "4.0.2",
17+
"react-webcam": "^5.2.3",
18+
"typescript": "^4.1.2",
19+
"web-vitals": "^1.0.1",
20+
"workerize-loader": "^1.3.0"
21+
},
22+
"scripts": {
23+
"start": "react-scripts start",
24+
"build": "react-scripts build",
25+
"test": "react-scripts test",
26+
"eject": "react-scripts eject",
27+
"svgr": "svgr -d src/Icons/ assets/svg/"
28+
},
29+
"eslintConfig": {
30+
"extends": [
31+
"react-app",
32+
"react-app/jest"
33+
]
34+
},
35+
"browserslist": {
36+
"production": [
37+
">0.2%",
38+
"not dead",
39+
"not op_mini all"
40+
],
41+
"development": [
42+
"last 1 chrome version",
43+
"last 1 firefox version",
44+
"last 1 safari version"
45+
]
46+
},
47+
"devDependencies": {}
48+
}

‎public/favicon.ico‎

24.3 KB
Binary file not shown.

‎public/index.html‎

Lines changed: 43 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,43 @@
1+
<!DOCTYPE html>
2+
<html lang="en">
3+
<head>
4+
<meta charset="utf-8" />
5+
<link rel="icon" href="%PUBLIC_URL%/favicon.ico" />
6+
<meta name="viewport" content="width=device-width, initial-scale=1" />
7+
<meta name="theme-color" content="#000000" />
8+
<meta
9+
name="description"
10+
content="Web site created using create-react-app"
11+
/>
12+
<link rel="apple-touch-icon" href="%PUBLIC_URL%/logo192.png" />
13+
<!--
14+
manifest.json provides metadata used when your web app is installed on a
15+
user's mobile device or desktop. See https://developers.google.com/web/fundamentals/web-app-manifest/
16+
-->
17+
<link rel="manifest" href="%PUBLIC_URL%/manifest.json" />
18+
<!--
19+
Notice the use of %PUBLIC_URL% in the tags above.
20+
It will be replaced with the URL of the `public` folder during the build.
21+
Only files inside the `public` folder can be referenced from the HTML.
22+
23+
Unlike "/favicon.ico" or "favicon.ico", "%PUBLIC_URL%/favicon.ico" will
24+
work correctly both with client-side routing and a non-root public URL.
25+
Learn how to configure a non-root public URL by running `npm run build`.
26+
-->
27+
<title>Lobe Web</title>
28+
</head>
29+
<body>
30+
<noscript>You need to enable JavaScript to run this app.</noscript>
31+
<div id="root"></div>
32+
<!--
33+
This HTML file is a template.
34+
If you open it directly in the browser, you will see an empty page.
35+
36+
You can add webfonts, meta tags, or analytics to this file.
37+
The build step will place the bundled scripts into the <body> tag.
38+
39+
To begin the development, run `npm start` or `yarn start`.
40+
To create a production bundle, use `npm run build` or `yarn build`.
41+
-->
42+
</body>
43+
</html>

‎public/logo192.png‎

4.88 KB
Loading

‎public/logo512.png‎

13.2 KB
Loading

‎public/manifest.json‎

Lines changed: 25 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,25 @@
1+
{
2+
"short_name": "Lobe Web",
3+
"name": "Lobe Web Sample App",
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+
}

‎public/model/group1-shard1of4.bin‎

4 MB
Binary file not shown.

0 commit comments

Comments
 (0)