Syft.js
Search…
Implementation in React
Running Syft.js in React is fairly simple. It's highly suggested you read the Introduction and Guide first if you haven't already.
1
const mySyft = new Syft({
2
verbose: true
3
});
4
5
class Playground extends Component {
6
constructor(props) {
7
super(props);
8
9
this.state = {
10
// Store syft related information
11
syftRunning: false,
12
syftLocation: 'ws://localhost:1112/',
13
14
// Track the tensors in React separately
15
tensors: [],
16
17
// For performing an operation we need to set some defaults
18
operation: 'add',
19
tensorA: '',
20
tensorB: '',
21
22
// And store the result
23
result: null
24
};
25
}
26
27
componentDidMount() {
28
mySyft.start(this.state.syftLocation);
29
30
const updateTensorsState = (tensors, isRemoved) => {
31
if (isRemoved) {
32
console.log('TENSOR REMOVED', tensors);
33
} else {
34
console.log('TENSOR ADDED', tensors);
35
}
36
const newState = isRemoved ? { tensors, result: null } : { tensors };
37
38
this.setState(newState, () => {
39
if (tensors.length >= 2) {
40
this.setState({
41
tensorA: tensors[0].id,
42
tensorB: tensors[1].id
43
});
44
} else {
45
this.setState({
46
tensorA: '',
47
tensorB: ''
48
});
49
}
50
});
51
};
52
53
mySyft.onTensorAdded(({ tensors }) => updateTensorsState(tensors, false));
54
mySyft.onTensorRemoved(({ tensors }) => updateTensorsState(tensors, true));
55
56
mySyft.onRunOperation(({ func, result }) => {
57
console.log('OPERATION RAN: ' + func, result);
58
59
this.setState({ result });
60
});
61
62
mySyft.onMessageReceived(data => {
63
console.log('MESSAGE RECEIVED', data);
64
});
65
66
mySyft.onMessageSent(data => {
67
console.log('MESSAGE SENT', data);
68
});
69
}
70
71
render() {
72
return <p>Syft.js is awesome - check your console!</p>;
73
}
74
}
Copied!
You'll notice that this example heavily utilizes Event Handlers to tell us when any tensor is added, remove, or operated against, as well as when any message is received from or sent to PySyft. Of course, we can add a UI to manually add, remove, and operate against tensors... for this, we suggest you refer to this example.
Last modified 3yr ago
Copy link