-
- {SHOW_HELP && this.state.training === false && (
-
-
- {SHOW_HELP && this.state.training === false && (
-
-
- )}
- Instructions
-- Drag and drop some labeled images below to begin training your classifier. You can download image datasets here. -
-Organize your images into folders, where the folders' names are the desired labels.
-
-
- 
-
-
- 
-
- -
-
- Don't have any images handy? Search below for some images. Select up to 10 that match your query.
-Note This can be a little buggy at the moment due to CORS issues. Working on making it better!
-
-
-);
-
-const splitImages = (images: IImgurImage[], picked: string[]) => {
- const startingData: {
- pickedImages: IImgurImage[];
- unpickedImages: IImgurImage[];
- } = {
- pickedImages: [],
- unpickedImages: [],
- };
- return images.reduce(({
- pickedImages,
- unpickedImages,
- }, image: IImgurImage) => {
- if (picked.includes(image.id)) {
- return {
- unpickedImages,
- pickedImages: [
- ...pickedImages,
- image,
- ],
- };
- }
-
- return {
- pickedImages,
- unpickedImages: [
- ...unpickedImages,
- image,
- ],
- };
- }, startingData);
-};
-
-const Images = ({
- title,
- images,
- picked,
- handlePicked,
- handleRemove,
-}: {
- title: string;
- images: IImgurImage[];
- picked: string[];
- handlePicked: (id: string) => () => void;
- handleRemove: (id: string) => () => void;
-}) => {
- const {
- pickedImages,
- unpickedImages,
- } = splitImages(images, picked);
-
- const training = pickedImages.slice(0, 5);
- const validation = pickedImages.slice(5);
-
- return (
-
- {images.length ? (
- 
- )}
-
-
-
- {training.length > 0 ? (
-
- {pickedImages.length < 10 ? (
-
- {unpickedImages.map((image: IImgurImage) => (
-
- ) : All done with these images!
} -
-
- {images.map((image: IImgurImage) => (
-
-
-
- ))}
-
- );
- }
-}
-
-const SearchImage = ({
- src,
- handleClick,
- children,
-}: {
- src: string;
- handleClick?: () => void;
- children?: any;
-}) => (
-
- {children}
- 
-
-);
-
-export default Topic;
diff --git a/example/src/containers/Search/getImages.ts b/example/src/containers/Search/getImages.ts
deleted file mode 100644
index e4557df..0000000
--- a/example/src/containers/Search/getImages.ts
+++ /dev/null
@@ -1,46 +0,0 @@
-const clientID = '21211812267bd50';
-
-interface IData {
- data: IImgurDatum[];
-}
-
-interface IImgurDatum {
- id: string;
- images: IImgurImage[];
-}
-
-export interface IImgurImage {
- id: string;
- link: string;
- size: number;
- width: number;
- height: number;
- gifv?: string;
- type: string;
-}
-
-const getImages = (q: string) => fetch(`https://api.imgur.com/3/gallery/search?q=${q}`, {
- headers: {
- Authorization: `Client-ID ${clientID}`,
- },
-}).then(resp => resp.json()).then(({ data }: IData) => {
- const startingData: IImgurImage[] = [];
- const c = data.reduce((collectedImages, { images }) => {
- if (!images) {
- return collectedImages;
- }
-
- return collectedImages.concat(images);
- }, startingData);
-
- return c.filter((image: IImgurImage) => {
- return image && !image.gifv && [
- 'image/jpeg',
- 'image/png',
- 'image/gif',
- ].includes(image.type);
- });
- // .map((image: IImgurImage) => image.link);
-});
-
-export default getImages;
diff --git a/example/src/containers/Search/index.tsx b/example/src/containers/Search/index.tsx
deleted file mode 100644
index 32ce6b6..0000000
--- a/example/src/containers/Search/index.tsx
+++ /dev/null
@@ -1,236 +0,0 @@
-import * as React from 'react';
-import styles from './styles.scss';
-import getImages, {
- IImgurImage,
-} from './getImages';
-import Topic from './Topic';
-
-interface IProps {
- train: (images: IImage[], evalImages: IImage[]) => {};
-}
-
-export interface IImage {
- src: string;
- label: string;
-}
-
-interface IState {
- value: string;
- topics: string[];
- searches: {
- [index: string]: IImgurImage[];
- }
- picked: {
- [index: string]: string[];
- }
-}
-
-class Search extends React.Component
-
- );
- }
-}
-
-const transformImages = (
- picked: { [index: string]: string[] },
- searches: { [index: string]: IImgurImage[]},
- start: number,
- end?: number
-) => {
- const originalData: Array<{
- src: string;
- label: string;
- }> = [];
-
- return Object.entries(picked).reduce((collected, [label, pickedImages]) => {
- return collected.concat(pickedImages.slice(start, end).map((imageId: string) => {
- const image = searches[label].filter(({ id }: IImgurImage) => id === imageId)[0];
-
- return {
- src: image.link,
- label,
- };
- }));
- }, originalData);
-}
-
-export default Search;
diff --git a/example/src/containers/Search/styles.scss b/example/src/containers/Search/styles.scss
deleted file mode 100644
index f03dc1e..0000000
--- a/example/src/containers/Search/styles.scss
+++ /dev/null
@@ -1,174 +0,0 @@
-.search {
- flex: 1;
-
- .input {
- position: relative;
- border: 1px solid rgba(0,0,0,0.2);
- border-radius: 4px;
- display: flex;
- margin-bottom: 20px;
-
- small {
- color: rgba(0,0,0,0.6);
- position: absolute;
- top: 45px;
- bottom: 0px;
- font-size: 10px;
- right: 0px;
- }
- }
-
- input {
- flex: 1;
- display: block;
- background: transparent;
- border: none;
- font-size: 16px;
- padding: 10px 10px;
- box-sizing: border-box;
- outline: none;
- }
-
- button {
- padding: 10px 20px;
- background: rgba(90,90,255,0.15);
- border: 1px solid rgba(0,0,0,0.1);
- border-radius: 5px;
- font-size: 16px;
- outline: none;
-
- &.add {
- $size: 16px;
- font-size: 14px;
- border: none;
- display: flex;
- height: $size;
- padding: 0;
- top: 2px;
- left: 2px;
- width: $size;
- justify-content: center;
- align-items: center;
- position: absolute;
- background: white;
- border-radius: $size;
- }
- }
-}
-
-.topic {
- background: rgba(50,50,255,0.04);
- border: 1px solid rgba(50,50,255,0.2);
- border-radius: 4px;
- margin: 5px;
- display: flex;
- justify-content: center;
- align-items: center;
- padding: 0 10px 0 0;
-
- button {
- background: none;
- border: none;
- margin: 0;
- padding: 0 5px;
- font-size: 20px;
- color: rgba(0,0,0,0.6);
- margin-top: -2px;
- font-size: 16px;
- outline: none;
- cursor: pointer;
-
- }
-}
-
-.images {
- border: 1px solid rgba(0,0,0,0.1);
- padding: 10px;
- border-radius: 5px;
- margin: 10px 0;
- max-height: 460px;
- overflow-y: scroll;
-
- label {
- display: block;
- font-weight: bold;
- margin: 0;
- // margin-bottom: 5px;
- // margin-top: 20px;
- }
-}
-
-.loading {
- width: 16px;
- height: 16px;
-}
-
-.carousel {
- .set {
- margin-left: 10px;
- display: flex;
- flex-direction: row;
- border-radius: 5px;
- transition-duration: 0.4s;
- width: 100%;
- max-height: 0;
- overflow-x: scroll;
- margin-bottom: 20px;
-
- label {
- position: absolute;
- z-index: 1;
- background: rgba(255,255,255,0.8);
- font-size: 12px;
- display: block;
- color: rgba(0,0,0,0.8);
- margin-right: 5px;
- }
-
- &.show {
- max-height: 200px;
- }
- }
-
- img {
- max-width: 100px;
- max-height: 100px;
- display: block;
- }
-}
-
-.trainModel {
- margin-top: 20px;
-}
-
-.image {
- display: inline-block;
- position: relative;
- cursor: pointer;
- margin-right: 5px;
-
- img {
- display: block;
- }
-
- button {
- position: absolute;
- height: 100%;
- width: 100%;
- opacity: 0;
- transition-duration: 0.2s;
- background: rgba(0,0,0,0.6);
- font-size: 60px;
- border-radius: 0;
- color: white;
-
- &:hover {
- opacity: 1;
- }
- }
-}
-
-.top {
- display: flex;
- min-height: 100px;
-}
diff --git a/example/src/index.tsx b/example/src/index.tsx
deleted file mode 100644
index 2732306..0000000
--- a/example/src/index.tsx
+++ /dev/null
@@ -1,9 +0,0 @@
-import * as React from 'react';
-import * as ReactDOM from 'react-dom';
-import App from 'containers/App';
-import './index.css';
-
-ReactDOM.render(
-
- {this.state.topics.map((topic, idx) => (
-
- {this.state.topics.map((topic, key) => (
-
-
- {topic}
-
- ))}
-
- Search provided by Imgur
-
- {this.state.status === 'empty' && (
-
- );
- }
-}
-
-export default MLClassifierUI;
diff --git a/src/App/styles.scss b/src/App/styles.scss
deleted file mode 100644
index 3feda36..0000000
--- a/src/App/styles.scss
+++ /dev/null
@@ -1,28 +0,0 @@
-.classifier {
- max-width: 300px;
- width: 300px;
- background: white;
- height: 300px;
-
- h1,h2,h3,h4,h5,h6 {
- font-weight: inherit;
- }
-
- button {
- cursor: pointer;
- }
-
- ul, li {
- list-style: none;
- margin: 0;
- padding: 0;
- }
-
- * {
- box-sizing: border-box;
- }
-
- a, button {
- cursor: pointer;
- }
-}
diff --git a/src/Dropzone/getFile.ts b/src/Dropzone/getFile.ts
deleted file mode 100644
index 5488143..0000000
--- a/src/Dropzone/getFile.ts
+++ /dev/null
@@ -1,15 +0,0 @@
-const getFile = async (item: any, path: string) => new Promise(resolve => {
- item.file((file: any) => {
- const reader = new FileReader();
- reader.onload = (e: any) => {
- return resolve({
- file,
- src: e.target.result,
- path: path.split('/').join(''),
- });
- };
- reader.readAsDataURL(file);
- });
-});
-
-export default getFile;
diff --git a/src/Dropzone/index.tsx b/src/Dropzone/index.tsx
deleted file mode 100644
index 185261e..0000000
--- a/src/Dropzone/index.tsx
+++ /dev/null
@@ -1,104 +0,0 @@
-import * as React from 'react';
-import classNames from 'utils/classNames';
-import transformFiles from './transformFiles';
-import styles from './styles.scss';
-
-interface IProps {
- onDrop?: Function;
- onParseFiles: Function;
- style?: any;
- children?: any;
-}
-
-interface IState {
- over: boolean;
-}
-
-class Dropzone extends React.Component
- {this.props.children || (Drop Images To Begin Training)}
-
-
- );
- }
-};
-
-export default Dropzone;
diff --git a/src/Dropzone/styles.scss b/src/Dropzone/styles.scss
deleted file mode 100644
index ff33f29..0000000
--- a/src/Dropzone/styles.scss
+++ /dev/null
@@ -1,24 +0,0 @@
-.container {
- text-align: center;
- color: rgba(0,0,0,0.4);
- border-radius: 5px;
- height: 100%;
- width: 100%;
- display: flex;
- position: relative;
- justify-content: center;
- align-items: center;
- background: rgba(0,0,0,0);
- border: 2px dashed rgba(0,0,0,0.2);
- transition-duration: 0.2s;
-
- &.over {
- background: rgba(155,77,202,0.2);
- border: 2px dashed #9b4dca;
- transition-duration: 0.1s;
- }
-}
-
-.input {
- display: none;
-}
diff --git a/src/Dropzone/transformFiles.ts b/src/Dropzone/transformFiles.ts
deleted file mode 100644
index 026b354..0000000
--- a/src/Dropzone/transformFiles.ts
+++ /dev/null
@@ -1,29 +0,0 @@
-import * as React from 'react';
-import traverseFileTree from './traverseFileTree';
-
-const transformFiles = async (e: React.DragEvent) => {
- const d = e.dataTransfer || {};
- const items = d.items || [];
- let images: any = [];
- for (let i=0; i-
-
- Prediction: {prediction} -
- Label: {label} -
-
- {predictions.map((prediction: IPrediction, idx: number) => (
-
{title}
--
- {data.map((datum: IDatum) => (
-
- - {datum.data} - - - ))} -
-
- );
- }
-}
-
-export default Logs;
diff --git a/src/Model/Metrics/Logs/styles.scss b/src/Model/Metrics/Logs/styles.scss
deleted file mode 100644
index 652a20a..0000000
--- a/src/Model/Metrics/Logs/styles.scss
+++ /dev/null
@@ -1,54 +0,0 @@
-.logs {
- position: relative;
- min-height: 40px;
- display: flex;
- flex: 1;
- margin-right: 20px;
-
- &.expanded {
- .expand {
- a {
- transform: rotate(90deg);
- }
- }
-
- pre {
- display: block;
- max-height: 100px;
- padding: 5px 10px;
- }
- }
-
- pre {
- transition-duration: 0.5s;
- max-height: 0px;
- margin: 0 auto;
- overflow-y: scroll;
- font-size: 12px;
- width: 100%;
- background: rgba(255,255,255,1.0);
- border-radius: 4px;
- padding: 0 10px;
- color: rgba(0,0,0,0.6);
- }
-}
-
-.expand {
- height: 21px;
- position: absolute;
- display: flex;
- align-items: center;
- top: -20px;
- left: 0;
-
- label {
- font-size: 12px;
- }
-
- a {
- font-size: 16px;
- transition-duration: 0.2s;
- display: inline-block;
- margin-right: 5px;
- }
-}
diff --git a/src/Model/Metrics/index.tsx b/src/Model/Metrics/index.tsx
deleted file mode 100644
index a73b08b..0000000
--- a/src/Model/Metrics/index.tsx
+++ /dev/null
@@ -1,94 +0,0 @@
-import * as React from 'react';
-import styles from './styles.scss';
-import Info, {
- IDatum,
-} from './Info';
-// import {
-// IImageData,
-// } from 'utils/getFilesAsImages';
-import Logs from './Logs';
-export interface ImageError {
- image: any;
- error: Error;
- file?: any;
- index: number;
-}
-
-interface IProps {
- labels?: string[];
- downloading: boolean;
- onDownload?: Function;
- errors?: ImageError[];
- logs: {
- [index: string]: any;
- };
- accuracy: IDatum[];
-}
-
-// interface IData {
-// label: string;
-// }
-
-const getData = (labels: string[] = []) => {
- const numOfLabels = labels.reduce((obj, label) => ({
- ...obj,
- [label]: (obj[label] || 0) + 1,
- }), {});
-
- return Object.keys(numOfLabels).map((label) => {
- return {
- label,
- data: numOfLabels[label],
- };
- });
-};
-
-const getErrors = (errors: ImageError[] = []) => errors.map(({ file }, key) => (
-
- ▶
-
-
-
- {logs.loss.join('\n')}
-
- - Error loading image: {`${file.path}/${file.file.name}`} -
-)); - -class Metrics extends React.Component
-
- );
- }
-}
-
-export default Metrics;
-
-export { IMetricsInfoProps, IDatum } from './Info';
diff --git a/src/Model/Metrics/styles.scss b/src/Model/Metrics/styles.scss
deleted file mode 100644
index 2b3a078..0000000
--- a/src/Model/Metrics/styles.scss
+++ /dev/null
@@ -1,59 +0,0 @@
-.container {
- border-radius: 5px 5px 0 0;
- width: 100%;
- height: 100%;
- background: rgba(0,13,51,0.6);
- padding: 20px;
- color: rgba(255,255,255,0.8);
- font-size: 20px;
- display: flex;
- flex-direction: column;
-
- button {
- width: 120px;
- height: 40px;
- border: none;
- border-radius: 5px;
- }
-}
-
-.footer {
- flex: 1;
- display: flex;
- align-items: flex-end;
-}
-
-.datum {
- display: flex;
- flex-direction: column;
- justify-content: center;
- align-items: center;
- flex: 1;
-
- data {
- font-size: 40px;
- }
-
- label {
- color: rgba(255,255,255,0.6);
- }
-}
-
-.data {
- display: flex;
- margin-bottom: 20px !important;
-}
-
-.header {
- font-size: 16px;
- margin: 0;
-}
-
-.error {
- margin: 0;
- font-size: 12px;
-}
-
-.errors {
- margin-bottom: 20px;
-}
diff --git a/src/Model/index.tsx b/src/Model/index.tsx
deleted file mode 100644
index 4f79f61..0000000
--- a/src/Model/index.tsx
+++ /dev/null
@@ -1,94 +0,0 @@
-import * as React from 'react';
-import styles from './styles.scss';
-// const styles = require('./styles.scss');
-import Evaluator from './Evaluator';
-import Metrics, {
- IDatum,
- ImageError,
-} from './Metrics';
-import {
- IPrediction,
-} from './Evaluator/Predictions/Prediction';
-// import {
-// IImageData,
-// } from '../utils/getFilesAsImages';
-
-interface IProps {
- labels: string[];
- downloading: boolean;
- onDownload?: Function;
- predict?: Function;
- predictions: IPrediction[];
- errors?: ImageError[];
- logs: {
- [index: string]: any;
- };
- accuracy: {
- training?: number;
- evaluation?: number;
- };
-}
-
-interface IState {
-}
-
-const getEvaluation = (predictions: any[]) => {
- if (predictions.length > 0) {
- return predictions.reduce((sum, {
- prediction,
- label,
- }) => sum + (prediction === label ? 1 : 0), 0) / predictions.length;
- }
-
- return null;
-};
-
-class Model extends React.Component
- {errors && getErrors(errors)}
-
-
-
-
-
- );
- }
-}
-
-export default Model;
-
-export { ImageError } from './Metrics';
diff --git a/src/Model/styles.scss b/src/Model/styles.scss
deleted file mode 100644
index a386e82..0000000
--- a/src/Model/styles.scss
+++ /dev/null
@@ -1,4 +0,0 @@
-.container {
- display: flex;
- flex-direction: column;
-}
diff --git a/src/Preview/index.tsx b/src/Preview/index.tsx
deleted file mode 100644
index 3593335..0000000
--- a/src/Preview/index.tsx
+++ /dev/null
@@ -1,130 +0,0 @@
-import * as React from 'react';
-import classNames from 'utils/classNames';
-import styles from './styles.scss';
-import Loading from '../Loading';
-// import {
-// loadImage,
-// } from 'utils/getFilesAsImages';
-// const styles = require('./styles.scss');
-// import {
-// IImageData,
-// } from '../utils/getFilesAsImages';
-
-interface IProps {
- images?: string[];
-}
-
-interface IState {
- imageIdx: number;
- // images: {
- // [index:string]: HTMLImageElement | null;
- // };
-}
-
-const LOOP_SPEED = 75;
-
-class Preview extends React.Component
- {src ? (
-
- ) : (
-
- );
- }
-}
-
-export default Preview;
diff --git a/src/Preview/styles.scss b/src/Preview/styles.scss
deleted file mode 100644
index e6c207a..0000000
--- a/src/Preview/styles.scss
+++ /dev/null
@@ -1,46 +0,0 @@
-.loader {
- opacity: 1;
- position: absolute;
- height: 100%;
- width: 100%;
- display: flex;
- justify-content: center;
- flex-direction: column;
- align-items: center;
- color: rgba(0,0,0,0.3);
-
- img {
- height: auto;
- width: auto;
- }
-}
-
-.container {
- border-radius: 5px;
- display: flex;
- justify-content: center;
- position: relative;
- align-items: center;
- width: 100%;
- height: 100%;
- border: 2px dashed rgba(0,0,0,0.2);
-
- .img {
- width: 100%;
- height: 100%;
- background-color: rgba(0,0,0,0.2);
- background-repeat: no-repeat;
- background-position: 50% 50%;
- background-size: cover;
- position: relative;
- }
-
- &.images {
- border: 2px dashed rgba(0,0,0,0);
- }
-}
-
-.loading {
- width: 16px;
- height: 16px;
-}
diff --git a/src/global.d.ts b/src/global.d.ts
deleted file mode 100644
index 3ef58ea..0000000
--- a/src/global.d.ts
+++ /dev/null
@@ -1,13 +0,0 @@
-declare module '*.scss' {
- const content: any;
- export default content;
-}
-declare module '*.css' {
- const content: any;
- export default content;
-}
-
-declare module '*.png'
-declare module '*.jpg'
-declare module '*.jpeg'
-declare module '*.gif'
diff --git a/src/index.ts b/src/index.ts
deleted file mode 100644
index 9122fa1..0000000
--- a/src/index.ts
+++ /dev/null
@@ -1 +0,0 @@
-export { default } from './App';
diff --git a/src/types.ts b/src/types.ts
deleted file mode 100644
index 01fc450..0000000
--- a/src/types.ts
+++ /dev/null
@@ -1,13 +0,0 @@
-export interface IProps {
-}
-
-export interface ITrainResult {
- epoch: number[];
- history: {
- acc: number[];
- loss: number[];
- };
- model: any;
- params: any;
- validationData: any;
-}
diff --git a/src/utils/__tests__/classNames.test.ts b/src/utils/__tests__/classNames.test.ts
deleted file mode 100644
index cf7685b..0000000
--- a/src/utils/__tests__/classNames.test.ts
+++ /dev/null
@@ -1,39 +0,0 @@
-import classNames from '../classNames';
-
-describe('classNames', () => {
- test('it handles nothing', () => {
- expect(classNames()).toEqual('');
- });
-
- test('it handles a single class', () => {
- expect(classNames('foo')).toEqual('foo');
- });
-
- test('it handles multiple classes', () => {
- expect(classNames('foo', 'bar', 'baz')).toEqual('foo bar baz');
- });
-
- test('it does not include undefined or null', () => {
- expect(classNames('foo', undefined, null, 'baz')).toEqual('foo baz');
- });
-
- test('it handles an object where value is true', () => {
- expect(classNames({
- foo: true,
- })).toEqual('foo');
- });
-
- test('it handles an object where value are true and false', () => {
- expect(classNames({
- foo: true,
- bar: false,
- })).toEqual('foo');
- });
-
- test('it handles an object where value are true and false', () => {
- expect(classNames('bar', {
- foo: true,
- quom: false,
- }, 'baz')).toEqual('bar foo baz');
- });
-});
diff --git a/src/utils/classNames.ts b/src/utils/classNames.ts
deleted file mode 100644
index 8a9e7f6..0000000
--- a/src/utils/classNames.ts
+++ /dev/null
@@ -1,23 +0,0 @@
-interface IClassNameObject {
- [index:string]: boolean | undefined;
-}
-
-const arr: string[] = [];
-
-type Name = string|IClassNameObject|undefined|null;
-
-const transformObjToArr = (name: IClassNameObject) => Object.entries(name).filter(entry => entry[1]).map(([ key ]) => key);
-
-const classNames = (...names: Name[]) => (names || []).reduce((arr, name: Name) => {
- if (!name) {
- return arr;
- }
-
- if (typeof name === 'string') {
- return arr.concat(name);
- }
-
- return arr.concat(transformObjToArr(name));
-}, arr).join(' ');
-
-export default classNames;
diff --git a/src/utils/getFilesAsImages.ts b/src/utils/getFilesAsImages.ts
deleted file mode 100644
index cf5de43..0000000
--- a/src/utils/getFilesAsImages.ts
+++ /dev/null
@@ -1,58 +0,0 @@
-export interface IFileData {
- label: string;
- file: any;
- src: string;
-};
-
-export interface IImageData {
- label: string;
- image: HTMLImageElement;
-};
-
-export const loadImage = async (src: string) => new Promise
-
- )}
-