Skip to content
This repository was archived by the owner on May 29, 2022. It is now read-only.

Add a somewhat nice UI 🎊 #7

Merged
merged 1 commit into from
Apr 12, 2019
Merged

Add a somewhat nice UI 🎊 #7

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
16 changes: 10 additions & 6 deletions package.json
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -5,22 +5,26 @@
"dependencies": {
"@tensorflow/tfjs": "^1.0.4",
"@tensorflow/tfjs-vis": "^1.0.3",
"@types/jest": "24.0.11",
"@types/node": "11.13.0",
"@types/react": "16.8.12",
"@types/react-dom": "16.8.3",
"@types/jest": "^24.0.11",
"@types/node": "^11.13.4",
"@types/react": "^16.8.13",
"@types/react-dom": "^16.8.4",
"grommet": "^2.6.5",
"grommet-icons": "^4.2.0",
"react": "^16.8.6",
"react-dom": "^16.8.6",
"react-scripts": "2.1.8",
"seedrandom": "~2.4.3",
"typescript": "3.4.2",
"styled-components": "^4.2.0",
"typescript": "^3.4.3",
"vega": "^5.3.5"
},
"scripts": {
"start": "react-scripts start",
"build": "react-scripts build",
"test": "react-scripts test",
"eject": "react-scripts eject"
"eject": "react-scripts eject",
"postinstall": "rimraf node_modules/preact/*/preact.d.ts"
},
"eslintConfig": {
"extends": "react-app"
Expand Down
9 changes: 9 additions & 0 deletions public/index.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -22,7 +22,16 @@
work correctly both with client-side routing and a non-root public URL.
Learn how to configure a non-root public URL by running `npm run build`.
-->
<link
rel="stylesheet"
href="https://fonts.googleapis.com/css?family=Roboto:300,400,500"
/>
<title>React App</title>
<style type="text/css">
body {
margin: 0;
}
</style>
</head>
<body>
<noscript>You need to enable JavaScript to run this app.</noscript>
Expand Down
111 changes: 100 additions & 11 deletions src/App.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,15 +1,104 @@
import React from "react";
import React, { Component } from "react";
import {
Grommet,
ResponsiveContext,
Box,
Heading,
Button,
Collapsible,
Layer
} from "grommet";
import { grommet } from "grommet/themes";
import { FormClose, Menu } from "grommet-icons";
import MnistTrain from "./components/MnistTrain";
import VisorControl from "./components/VisorControl";
import DigitPad from "./components/DigitPad";
import VisorControl from "./components/VisorControl";

export default () => (
<div>
<VisorControl />
<div className="center">
<MnistTrain />
<hr />
<DigitPad />
</div>
</div>
const AppBar = (props: any) => (
<Box
tag="header"
direction="row"
align="center"
justify="between"
background="brand"
pad={{ left: "medium", right: "small", vertical: "small" }}
elevation="medium"
style={{ zIndex: "1" }}
{...props}
/>
);

const SideBarContent = () => <VisorControl />;

export default () => {
const [showSidebar, setShowSidebar] = React.useState(false);

return (
<Grommet theme={grommet} full>
<ResponsiveContext.Consumer>
{size => (
<Box fill>
<AppBar>
<Heading level="3" margin="none">
<Button
icon={<Menu />}
onClick={() => setShowSidebar(!showSidebar)}
/>{" "}
MNIST-tfjs
</Heading>
</AppBar>
<Box direction="row" flex overflow={{ horizontal: "hidden" }}>
{!showSidebar || size !== "small" ? (
<Collapsible direction="horizontal" open={showSidebar}>
<Box
flex
width="medium"
background="light-2"
elevation="small"
align="center"
justify="center"
>
<SideBarContent />
</Box>
</Collapsible>
) : (
<Layer>
<Box
background="light-2"
tag="header"
justify="end"
align="center"
direction="row"
>
<Button
icon={<FormClose />}
onClick={() => setShowSidebar(false)}
/>
</Box>
<Box
fill
background="light-2"
align="center"
justify="center"
>
<SideBarContent />
</Box>
</Layer>
)}
<Box
flex
align="center"
justify="center"
height="1200px"
overflow={{ vertical: "scroll" }}
>
<MnistTrain />
<DigitPad />
</Box>
</Box>
</Box>
)}
</ResponsiveContext.Consumer>
</Grommet>
);
};
28 changes: 17 additions & 11 deletions src/components/DigitPad.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -6,6 +6,7 @@ import {
runWIthCanvasContext,
recognizeDigit
} from "../helpers/canvas";
import { Box, Text } from "grommet";

interface Coordinates {
x: number;
Expand Down Expand Up @@ -57,7 +58,7 @@ export default () => {
touchmove(coors: Coordinates) {
if (isDrawing) {
try {
clearTimeout(touchend)
clearTimeout(touchend);
} catch (e) {}
if (isRecognized) {
clearer(context);
Expand Down Expand Up @@ -135,11 +136,13 @@ export default () => {
};

return (
<div>
<div>
<span>Draw here</span>
</div>
<div>
<Box direction="column" align="center" pad="medium">
<Text>Draw here</Text>
<Box
border={{ color: "brand", size: "large" }}
height={`${DIGIT_PAD_HEIGHT + 12}px`}
width={`${DIGIT_PAD_WIDTH + 12}px`}
>
<canvas
ref={canvasRef}
width={DIGIT_PAD_WIDTH}
Expand All @@ -151,10 +154,13 @@ export default () => {
onMouseMove={draw}
onMouseUp={draw}
/>
</div>
<div>
<span>{prediction}</span>
</div>
</div>
</Box>
<Box>
<Text>Prediction</Text>
<Text size="160px" weight="bold">
{prediction}
</Text>
</Box>
</Box>
);
};
67 changes: 39 additions & 28 deletions src/components/MnistTrain.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,5 +1,8 @@
import React from "react";
import mnistTraining from "../mnist/training";
import { Box, Button, Text, TextInput, Heading, FormField } from "grommet";

const RowBox = (props: any) => <Box pad="medium" direction="row" {...props} />;

interface IState {
isDataLoaded: boolean;
Expand Down Expand Up @@ -77,37 +80,45 @@ export default () => {
};

return (
<div>
<div>Type "`" to show/hide the tfjs vis</div>
<hr />
<div>
<button onClick={_loadData} disabled={state.isDataLoaded}>
Load data
</button>
</div>
<hr />
<div>
<button onClick={_createModel} disabled={state.isModelCreated}>
Visualize Model
</button>
</div>
<hr />
<div>
<div>
<label htmlFor="epochs">Epochs:</label>
<input
id="epochs"
<Box direction="column" align="center" pad="medium">
<RowBox>
<Text>Visualization pane will open from the right hand side</Text>
</RowBox>
<RowBox>
<Button
label="Load data"
onClick={_loadData}
disabled={state.isDataLoaded}
/>
</RowBox>
<RowBox>
<Button
label="Model Summary"
onClick={_createModel}
disabled={state.isModelCreated}
/>
</RowBox>
<RowBox>
<Text>Model summary would be displayed in the vis pane</Text>
</RowBox>
<RowBox>
<FormField label="Number of epochs to train">
<TextInput
placeholder="Enter number of epochs"
type="number"
size="small"
value={state.epochs}
onChange={_changeEpochs}
/>
</div>
<button onClick={_startTraining}>Start Training</button>
</div>
<hr />
<div>
<button onClick={_showMatrics}>Show Matrices</button>
</div>
</div>
</FormField>
</RowBox>
<RowBox>
<Button label="Start Training" onClick={_startTraining} />
</RowBox>
<RowBox>
<Button label="Show Matrices" onClick={_showMatrics} />
</RowBox>
<Heading level="5">Type "`" to show/hide the tfjs vis</Heading>
</Box>
);
};
11 changes: 7 additions & 4 deletions src/components/VisorControl.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,9 +1,12 @@
import React from "react";
import { Box, Text, Button } from "grommet";

import { openVis } from "../mnist/vis";
import { Sidebar } from "grommet-icons";

export default () => (
<div className="visor-control">
<span>TFVis control</span>
<button onClick={openVis}>Open</button>
</div>
<Box direction="row" align="center" justify="between" pad="medium">
<Text margin={{ right: "10px" }}>TFVis control</Text>
<Button icon={<Sidebar />} label="Open" onClick={openVis} />
</Box>
);
45 changes: 0 additions & 45 deletions src/index.css
View file
Open in desktop

This file was deleted.

11 changes: 5 additions & 6 deletions src/index.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,10 +1,9 @@
import React from "react";
import ReactDOM from "react-dom";
import "./index.css";
import App from "./App";
import * as serviceWorker from "./serviceWorker";
import React from 'react';
import ReactDOM from 'react-dom';
import App from './App';
import * as serviceWorker from './serviceWorker';

ReactDOM.render(<App />, document.getElementById("root"));
ReactDOM.render(<App />, document.getElementById('root'));

// If you want your app to work offline and load faster, you can change
// unregister() to register() below. Note this comes with some pitfalls.
Expand Down
Loading