-
Notifications
You must be signed in to change notification settings - Fork 26
Expand file tree
/
Copy pathimage-classification-react.htm
More file actions
121 lines (107 loc) · 5.15 KB
/
image-classification-react.htm
File metadata and controls
121 lines (107 loc) · 5.15 KB
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title data-i18n="AI/ML Image Classification | React"></title>
<link rel="stylesheet" href="css/image-classification.css">
<link rel="canonical" href="https://www.dataformsjs.com/examples/image-classification-react.htm">
<script nomodule>
var link = document.createElement('link');
link.rel = 'stylesheet';
link.href = 'image-classification-ie.css';
document.head.appendChild(link);
</script>
</head>
<body>
<div id="root" dir="auto"></div>
<!-- React -->
<!--
<script src="https://cdn.jsdelivr.net/npm/react@17/umd/react.development.js" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/react-dom@17/umd/react-dom.development.js" crossorigin="anonymous"></script>
-->
<script src="https://cdn.jsdelivr.net/npm/react@17.0.2/umd/react.production.min.js" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/react-dom@17.0.2/umd/react-dom.production.min.js" crossorigin="anonymous"></script>
<!--
React Router
https://reacttraining.com/react-router/
https://github.com/ReactTraining/react-router
-->
<script src="https://cdn.jsdelivr.net/npm/react-router@5.2.0/umd/react-router.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/react-router-dom@5.2.0/umd/react-router-dom.min.js"></script>
<!-- DataFormsJS JSX Loader -->
<script src="https://cdn.jsdelivr.net/npm/dataformsjs@5/js/react/jsxLoader.min.js"></script>
<script>
// Set to `true` to see compiler details
jsxLoader.logCompileTime = false;
jsxLoader.logCompileDetails = false;
</script>
<!-- DataFormsJS React Components -->
<script type="module" src="https://cdn.jsdelivr.net/npm/dataformsjs@5/js/react/es6/DataFormsJS.min.js"></script>
<script type="module" src="https://cdn.jsdelivr.net/npm/dataformsjs@5/js/react/es6/I18n.min.js"></script>
<script nomodule src="https://cdn.jsdelivr.net/npm/dataformsjs@5/js/react/es5/DataFormsJS.min.js"></script>
<script nomodule src="https://cdn.jsdelivr.net/npm/dataformsjs@5/js/react/es5/I18n.min.js"></script>
<!-- JSX Templates for this App -->
<script type="text/babel" src="html/image-home-react.jsx"></script>
<script type="text/babel" src="html/image-categories-react.jsx"></script>
<script type="text/babel" src="html/image-info-react.jsx"></script>
<script type="text/babel">
const Router = window.ReactRouterDOM.HashRouter;
const Route = window.ReactRouterDOM.Route;
const Redirect = window.ReactRouterDOM.Redirect;
const NavLink = window.ReactRouterDOM.NavLink;
const defaultLocale = 'en';
const supportedLocales = ['en', 'ja', 'es', 'pt-BR', 'ar', 'fr', 'zh-CN'];
const fileName = 'image-classification';
const i18n = new I18n(defaultLocale, supportedLocales, fileName);
const defaultLang = i18n.getUserDefaultLang;
const format = new Format();
function ShowLoading() {
return <h2>{i18n.text('Loading...')}</h2>;
}
function ShowError(props) {
return <h2>{props.error}</h2>;
}
class App extends React.Component {
constructor(props) {
super(props);
this.state = {
langLoaded: null,
};
}
componentDidMount() {
i18n.onLangStart(() => { this.setState({ langLoaded:false }); });
i18n.onLangLoaded(() => { this.setState({ langLoaded:true }); });
}
render() {
if (!this.state.langLoaded) {
return <ShowLoading />;
}
return (
<ErrorBoundary>
<Router>
<nav>
<NavLink exact to={'/' + i18n.currentLocale + '/'} activeClassName="active">{i18n.text('Images')}</NavLink>
<NavLink exact to={'/' + i18n.currentLocale + '/categories'} activeClassName="active">{i18n.text('Categories')}</NavLink>
<NavLink exact to={'/' + i18n.currentLocale + '/info'} activeClassName="active">{i18n.text('Info')}</NavLink>
</nav>
<React.Fragment>
<Route exact path="/" render={() => (
<Redirect to={'/' + defaultLang + '/'} />
)}/>
<Route exact path="/:lang/" component={PageImages} />
<Route exact path="/:lang/categories" component={PageCategories} />
<Route exact path="/:lang/info" component={PageInfo} />
</React.Fragment>
</Router>
</ErrorBoundary>
)
}
}
ReactDOM.render(
<App />,
document.getElementById('root')
);
</script>
</body>
</html>