Thanks to visit codestin.com
Credit goes to github.com

Skip to content

Commit c7b51b4

Browse files
nienkedekkernienkedekker
committed
Add object detection to app, clean up CSS, clean up folder structure
1 parent 6376799 commit c7b51b4

File tree

18 files changed

+2091
-5325
lines changed

18 files changed

+2091
-5325
lines changed

‎package-lock.json‎

Lines changed: 1868 additions & 5262 deletions
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎package.json‎

Lines changed: 4 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -4,9 +4,9 @@
44
"dependencies": {
55
"@daily-co/daily-js": "^0.33.0",
66
"@daily-co/daily-react": "^0.7.0",
7+
"@tensorflow-models/coco-ssd": "^2.2.2",
78
"@tensorflow-models/handpose": "^0.0.7",
89
"@tensorflow/tfjs": "^4.2.0",
9-
"@tensorflow/tfjs-core": "^3.21.0",
1010
"fingerpose": "^0.1.0",
1111
"react": "^18.2.0",
1212
"react-dom": "^18.2.0",
@@ -31,7 +31,9 @@
3131
"lint": "eslint 'src/**/*.{js,jsx}'",
3232
"lint:fix": "eslint 'src/**/*.{js,jsx}' --fix"
3333
},
34-
"engines": { "node": "16.x" },
34+
"engines": {
35+
"node": "16.x"
36+
},
3537
"browserslist": {
3638
"production": [
3739
">0.2%",

‎src/App.css‎

Lines changed: 13 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -2,8 +2,6 @@
22
background-color: var(--darkest-blue);
33
min-height: 100vh;
44
display: grid;
5-
/* this is where we're dividing our app in 3 rows: header, call, and tray. The meeting information
6-
is outside the app's document flow.*/
75
grid-template-rows: 4rem 1fr 4rem;
86
}
97

@@ -44,15 +42,17 @@ input {
4442
border-radius: 8px;
4543
font-size: 12px;
4644
font-weight: 600;
45+
padding: .8rem;
4746
cursor: pointer;
48-
padding: 12px;
4947
}
5048

5149
label {
5250
font-size: 12px;
5351
align-self: baseline;
54-
padding: 3px;
52+
margin-bottom: .5rem;
53+
margin-top: 1.5rem;
5554
}
55+
5656
input[type='text'] {
5757
background-color: var(--white);
5858
cursor: text;
@@ -61,6 +61,14 @@ input[type='text'] {
6161
font-weight: normal;
6262
}
6363

64+
select {
65+
background-color: var(--white);
66+
border-radius: 8px;
67+
border: none;
68+
padding: 1rem .5rem;
69+
font-size: 1rem;
70+
}
71+
6472
video {
6573
width: 100%;
6674
height: 100%;
@@ -69,4 +77,4 @@ video {
6977

7078
button[disabled=disabled], button:disabled {
7179
cursor: not-allowed;
72-
}
80+
}

‎src/App.js‎

Lines changed: 5 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -22,6 +22,7 @@ export default function App() {
2222
const [appState, setAppState] = useState(STATE_IDLE);
2323
const [roomUrl, setRoomUrl] = useState(null);
2424
const [callObject, setCallObject] = useState(null);
25+
const [model, setModel] = useState('gesture-detection');
2526

2627
/**
2728
* Show the call UI if we're either joining, already joined, or are showing
@@ -33,12 +34,13 @@ export default function App() {
3334
const showError = [STATE_ERROR].includes(appState);
3435

3536
/**
36-
* Starts joining an existing call.
37+
* Starts joining an existing call. This function is invoked from HomeScreen.js
3738
*/
38-
const startJoiningCall = useCallback((url, username) => {
39+
const startJoiningCall = useCallback((url, username, selectedModel) => {
3940
const newCallObject = DailyIframe.createCallObject();
4041
newCallObject.setUserName(username);
4142
newCallObject.join({ url });
43+
setModel(selectedModel);
4244

4345
// Set states
4446
setRoomUrl(url);
@@ -139,7 +141,7 @@ export default function App() {
139141
)}
140142
{showCall && (
141143
<DailyProvider callObject={callObject}>
142-
<Call />
144+
<Call model={model}/>
143145
<Tray leaveCall={startLeavingCall} />
144146
</DailyProvider>
145147
)}

‎src/components/Call/Call.css‎

Lines changed: 26 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -26,3 +26,29 @@
2626
width: 100%;
2727
z-index: 2;
2828
}
29+
30+
.badge {
31+
font-size: 10px;
32+
font-weight: 600;
33+
text-align: inherit;
34+
padding: 4px;
35+
text-transform: uppercase;
36+
background-color: var(--dark-blue);
37+
border: 1px solid var(--grey);
38+
color: var(--white);
39+
margin-top: 5px;
40+
border-radius: 4px;
41+
}
42+
43+
.hand-status,
44+
.object-status {
45+
position: absolute;
46+
top: .2rem;
47+
right: .5rem;
48+
display: flex;
49+
flex-direction: column;
50+
align-items: flex-end;
51+
z-index: 2;
52+
gap: 6px;
53+
}
54+

‎src/components/Call/Call.js‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -10,7 +10,7 @@ import './Call.css';
1010
import Tile from '../Tile/Tile';
1111
import UserMediaError from '../UserMediaError/UserMediaError';
1212

13-
export default function Call() {
13+
export default function Call({ model }) {
1414
/* If a participant runs into a getUserMedia() error, we need to warn them. */
1515
const [getUserMediaError, setGetUserMediaError] = useState(false);
1616
const [emojiMessage, setEmojiMessage] = useState('');
@@ -46,7 +46,7 @@ export default function Call() {
4646
</div>
4747
)}
4848
{/* Your self view */}
49-
{localParticipant && <Tile id={localParticipant.session_id} isLocal />}
49+
{localParticipant && <Tile id={localParticipant.session_id} isLocal model={model} />}
5050
{/* Remote participants */}
5151
{remoteParticipantIds && (
5252
<div className="remote-participants">

‎src/components/GestureDetection/GestureOverlay.css‎ renamed to ‎src/components/GestureDetection/GestureDetection.css‎

Lines changed: 0 additions & 29 deletions
Original file line numberDiff line numberDiff line change
@@ -6,21 +6,6 @@
66
height: 100%;
77
}
88

9-
.hand-status {
10-
position: absolute;
11-
top: 0;
12-
right: 0;
13-
display: flex;
14-
flex-direction: column;
15-
align-items: flex-end;
16-
z-index: 2;
17-
}
18-
19-
.hand-status button {
20-
margin-top: 5px;
21-
margin-right: 5px;
22-
}
23-
249
.debug table {
2510
background: rgba(0, 0, 0, 0.58);
2611
color: white;
@@ -36,20 +21,6 @@
3621
transform: scale(-1, 1);
3722
}
3823

39-
.badge {
40-
font-size: 10px;
41-
font-weight: 600;
42-
text-align: inherit;
43-
padding: 4px;
44-
text-transform: uppercase;
45-
background-color: var(--dark-blue);
46-
border: 1px solid var(--grey);
47-
color: var(--white);
48-
margin-right: 5px;
49-
margin-top: 5px;
50-
border-radius: 4px;
51-
}
52-
5324
.gesture-emoji {
5425
position: absolute;
5526
top: 50%;

‎src/components/GestureDetection/GestureOverlay.js‎ renamed to ‎src/components/GestureDetection/GestureDetection.js‎

Lines changed: 5 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,5 @@
11
import React, { forwardRef, useCallback, useEffect, useRef, useState } from 'react';
2-
import './GestureOverlay.css';
2+
import './GestureDetection.css';
33
import { useAppMessage, useLocalParticipant } from '@daily-co/daily-react';
44

55
import * as fp from 'fingerpose';
@@ -14,8 +14,8 @@ import thumbsDownGesture from './gestures/ThumbsDown';
1414
import victoryGesture from './gestures/Victory';
1515
import vulcanGesture from './gestures/Vulcan';
1616

17-
import useModel from './hooks/useModel';
18-
import HandPoseLoader from './models/HandPose';
17+
import useModel from '../../hooks/useModel';
18+
import HandPoseLoader from '../../models/HandPose';
1919

2020
const landmarkColors = {
2121
thumb: 'red',
@@ -50,7 +50,7 @@ const knownGestures = [
5050
vulcanGesture,
5151
];
5252

53-
const GestureOverlay = forwardRef((props, ref) => {
53+
const GestureDetection = forwardRef((props, ref) => {
5454
const estimator = new fp.GestureEstimator(knownGestures);
5555
const { modelLoaded, modelRef } = useModel('webgl', HandPoseLoader);
5656

@@ -228,4 +228,4 @@ const GestureOverlay = forwardRef((props, ref) => {
228228
</>
229229
);
230230
});
231-
export default GestureOverlay;
231+
export default GestureDetection;

‎src/components/Header/Header.js‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -5,7 +5,7 @@ export default function Header() {
55
<header>
66
<div className="header-section">
77
<img src="/images/logo.svg" alt="Daily logo" />
8-
<span className="title">TensorFlowJS hand detection in a Daily React app</span>
8+
<span className="title">TensorFlowJS in a Daily React app</span>
99
</div>
1010
<div className="header-section">
1111
<a
@@ -18,7 +18,7 @@ export default function Header() {
1818
</a>
1919
<a
2020
className="github-link"
21-
href="https://github.com/daily-demos/todo"
21+
href="https://github.com/daily-demos/daily-react-tfjs"
2222
target="_blank"
2323
rel="noreferrer">
2424
<img src="/images/github.svg" alt="Github" />

‎src/components/HomeScreen/HomeScreen.css‎

Lines changed: 2 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -18,16 +18,12 @@
1818
color: var(--grey);
1919
}
2020

21-
.url-form {
21+
.form {
2222
display: flex;
2323
flex-direction: column;
2424
width: 100%;
2525
}
2626

27-
.url-form label {
27+
.form label {
2828
color: var(--white);
2929
}
30-
31-
.url-form input {
32-
padding: 1rem;
33-
}

0 commit comments

Comments
 (0)