107 |
130 | {SHOW_HELP && this.state.training === false && (
131 |
108 |
115 | {SHOW_HELP && this.state.training === false && (
116 |
117 |
128 | )}
129 | Instructions
118 |119 | Drag and drop some labeled images below to begin training your classifier. You can download image datasets here. 120 |
121 |Organize your images into folders, where the folders' names are the desired labels.
122 |
123 |
124 | 
125 |
126 |
127 | 
125 |
126 | 133 |
134 |
137 | Don't have any images handy? Search below for some images. Select up to 10 that match your query.
135 |Note This can be a little buggy at the moment due to CORS issues. Working on making it better!
136 |
22 |
36 | );
37 |
38 | const splitImages = (images: IImgurImage[], picked: string[]) => {
39 | const startingData: {
40 | pickedImages: IImgurImage[];
41 | unpickedImages: IImgurImage[];
42 | } = {
43 | pickedImages: [],
44 | unpickedImages: [],
45 | };
46 | return images.reduce(({
47 | pickedImages,
48 | unpickedImages,
49 | }, image: IImgurImage) => {
50 | if (picked.includes(image.id)) {
51 | return {
52 | unpickedImages,
53 | pickedImages: [
54 | ...pickedImages,
55 | image,
56 | ],
57 | };
58 | }
59 |
60 | return {
61 | pickedImages,
62 | unpickedImages: [
63 | ...unpickedImages,
64 | image,
65 | ],
66 | };
67 | }, startingData);
68 | };
69 |
70 | const Images = ({
71 | title,
72 | images,
73 | picked,
74 | handlePicked,
75 | handleRemove,
76 | }: {
77 | title: string;
78 | images: IImgurImage[];
79 | picked: string[];
80 | handlePicked: (id: string) => () => void;
81 | handleRemove: (id: string) => () => void;
82 | }) => {
83 | const {
84 | pickedImages,
85 | unpickedImages,
86 | } = splitImages(images, picked);
87 |
88 | const training = pickedImages.slice(0, 5);
89 | const validation = pickedImages.slice(5);
90 |
91 | return (
92 |
23 | {images.length ? (
24 | 
33 | )}
34 |
35 |
94 |
95 | {training.length > 0 ? (
96 |
110 | {pickedImages.length < 10 ? (
111 |
112 | {unpickedImages.map((image: IImgurImage) => (
113 |
120 | ) : All done with these images!
} 121 |
159 |
160 | {images.map((image: IImgurImage) => (
161 |
165 |
166 |
167 | ))}
168 |
169 | );
170 | }
171 | }
172 |
173 | const SearchImage = ({
174 | src,
175 | handleClick,
176 | children,
177 | }: {
178 | src: string;
179 | handleClick?: () => void;
180 | children?: any;
181 | }) => (
182 |
183 | {children}
184 | 
185 |
186 | );
187 |
188 | export default Topic;
189 |
--------------------------------------------------------------------------------
/example/src/containers/Search/getImages.ts:
--------------------------------------------------------------------------------
1 | const clientID = '21211812267bd50';
2 |
3 | interface IData {
4 | data: IImgurDatum[];
5 | }
6 |
7 | interface IImgurDatum {
8 | id: string;
9 | images: IImgurImage[];
10 | }
11 |
12 | export interface IImgurImage {
13 | id: string;
14 | link: string;
15 | size: number;
16 | width: number;
17 | height: number;
18 | gifv?: string;
19 | type: string;
20 | }
21 |
22 | const getImages = (q: string) => fetch(`https://api.imgur.com/3/gallery/search?q=${q}`, {
23 | headers: {
24 | Authorization: `Client-ID ${clientID}`,
25 | },
26 | }).then(resp => resp.json()).then(({ data }: IData) => {
27 | const startingData: IImgurImage[] = [];
28 | const c = data.reduce((collectedImages, { images }) => {
29 | if (!images) {
30 | return collectedImages;
31 | }
32 |
33 | return collectedImages.concat(images);
34 | }, startingData);
35 |
36 | return c.filter((image: IImgurImage) => {
37 | return image && !image.gifv && [
38 | 'image/jpeg',
39 | 'image/png',
40 | 'image/gif',
41 | ].includes(image.type);
42 | });
43 | // .map((image: IImgurImage) => image.link);
44 | });
45 |
46 | export default getImages;
47 |
--------------------------------------------------------------------------------
/example/src/containers/Search/index.tsx:
--------------------------------------------------------------------------------
1 | import * as React from 'react';
2 | import styles from './styles.scss';
3 | import getImages, {
4 | IImgurImage,
5 | } from './getImages';
6 | import Topic from './Topic';
7 |
8 | interface IProps {
9 | train: (images: IImage[], evalImages: IImage[]) => {};
10 | }
11 |
12 | export interface IImage {
13 | src: string;
14 | label: string;
15 | }
16 |
17 | interface IState {
18 | value: string;
19 | topics: string[];
20 | searches: {
21 | [index: string]: IImgurImage[];
22 | }
23 | picked: {
24 | [index: string]: string[];
25 | }
26 | }
27 |
28 | class Search extends React.Component
175 |
209 | );
210 | }
211 | }
212 |
213 | const transformImages = (
214 | picked: { [index: string]: string[] },
215 | searches: { [index: string]: IImgurImage[]},
216 | start: number,
217 | end?: number
218 | ) => {
219 | const originalData: Array<{
220 | src: string;
221 | label: string;
222 | }> = [];
223 |
224 | return Object.entries(picked).reduce((collected, [label, pickedImages]) => {
225 | return collected.concat(pickedImages.slice(start, end).map((imageId: string) => {
226 | const image = searches[label].filter(({ id }: IImgurImage) => id === imageId)[0];
227 |
228 | return {
229 | src: image.link,
230 | label,
231 | };
232 | }));
233 | }, originalData);
234 | }
235 |
236 | export default Search;
237 |
--------------------------------------------------------------------------------
/example/src/containers/Search/loading.gif:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/thekevinscott/ml-classifier-ui/f3c81d5ee6c3680bd1da0ee923307fc1f6eaf121/example/src/containers/Search/loading.gif
--------------------------------------------------------------------------------
/example/src/containers/Search/styles.scss:
--------------------------------------------------------------------------------
1 | .search {
2 | flex: 1;
3 |
4 | .input {
5 | position: relative;
6 | border: 1px solid rgba(0,0,0,0.2);
7 | border-radius: 4px;
8 | display: flex;
9 | margin-bottom: 20px;
10 |
11 | small {
12 | color: rgba(0,0,0,0.6);
13 | position: absolute;
14 | top: 45px;
15 | bottom: 0px;
16 | font-size: 10px;
17 | right: 0px;
18 | }
19 | }
20 |
21 | input {
22 | flex: 1;
23 | display: block;
24 | background: transparent;
25 | border: none;
26 | font-size: 16px;
27 | padding: 10px 10px;
28 | box-sizing: border-box;
29 | outline: none;
30 | }
31 |
32 | button {
33 | padding: 10px 20px;
34 | background: rgba(90,90,255,0.15);
35 | border: 1px solid rgba(0,0,0,0.1);
36 | border-radius: 5px;
37 | font-size: 16px;
38 | outline: none;
39 |
40 | &.add {
41 | $size: 16px;
42 | font-size: 14px;
43 | border: none;
44 | display: flex;
45 | height: $size;
46 | padding: 0;
47 | top: 2px;
48 | left: 2px;
49 | width: $size;
50 | justify-content: center;
51 | align-items: center;
52 | position: absolute;
53 | background: white;
54 | border-radius: $size;
55 | }
56 | }
57 | }
58 |
59 | .topic {
60 | background: rgba(50,50,255,0.04);
61 | border: 1px solid rgba(50,50,255,0.2);
62 | border-radius: 4px;
63 | margin: 5px;
64 | display: flex;
65 | justify-content: center;
66 | align-items: center;
67 | padding: 0 10px 0 0;
68 |
69 | button {
70 | background: none;
71 | border: none;
72 | margin: 0;
73 | padding: 0 5px;
74 | font-size: 20px;
75 | color: rgba(0,0,0,0.6);
76 | margin-top: -2px;
77 | font-size: 16px;
78 | outline: none;
79 | cursor: pointer;
80 |
81 | }
82 | }
83 |
84 | .images {
85 | border: 1px solid rgba(0,0,0,0.1);
86 | padding: 10px;
87 | border-radius: 5px;
88 | margin: 10px 0;
89 | max-height: 460px;
90 | overflow-y: scroll;
91 |
92 | label {
93 | display: block;
94 | font-weight: bold;
95 | margin: 0;
96 | // margin-bottom: 5px;
97 | // margin-top: 20px;
98 | }
99 | }
100 |
101 | .loading {
102 | width: 16px;
103 | height: 16px;
104 | }
105 |
106 | .carousel {
107 | .set {
108 | margin-left: 10px;
109 | display: flex;
110 | flex-direction: row;
111 | border-radius: 5px;
112 | transition-duration: 0.4s;
113 | width: 100%;
114 | max-height: 0;
115 | overflow-x: scroll;
116 | margin-bottom: 20px;
117 |
118 | label {
119 | position: absolute;
120 | z-index: 1;
121 | background: rgba(255,255,255,0.8);
122 | font-size: 12px;
123 | display: block;
124 | color: rgba(0,0,0,0.8);
125 | margin-right: 5px;
126 | }
127 |
128 | &.show {
129 | max-height: 200px;
130 | }
131 | }
132 |
133 | img {
134 | max-width: 100px;
135 | max-height: 100px;
136 | display: block;
137 | }
138 | }
139 |
140 | .trainModel {
141 | margin-top: 20px;
142 | }
143 |
144 | .image {
145 | display: inline-block;
146 | position: relative;
147 | cursor: pointer;
148 | margin-right: 5px;
149 |
150 | img {
151 | display: block;
152 | }
153 |
154 | button {
155 | position: absolute;
156 | height: 100%;
157 | width: 100%;
158 | opacity: 0;
159 | transition-duration: 0.2s;
160 | background: rgba(0,0,0,0.6);
161 | font-size: 60px;
162 | border-radius: 0;
163 | color: white;
164 |
165 | &:hover {
166 | opacity: 1;
167 | }
168 | }
169 | }
170 |
171 | .top {
172 | display: flex;
173 | min-height: 100px;
174 | }
175 |
--------------------------------------------------------------------------------
/example/src/index.tsx:
--------------------------------------------------------------------------------
1 | import * as React from 'react';
2 | import * as ReactDOM from 'react-dom';
3 | import App from 'containers/App';
4 | import './index.css';
5 |
6 | ReactDOM.render(
7 |
176 | {this.state.topics.map((topic, idx) => (
177 |
191 | {this.state.topics.map((topic, key) => (
192 |
178 |
179 | {topic}
180 |
181 | ))}
182 |
189 | Search provided by Imgur
190 |
265 | {this.state.status === 'empty' && (
266 |
289 | );
290 | }
291 | }
292 |
293 | export default MLClassifierUI;
294 |
--------------------------------------------------------------------------------
/src/App/styles.scss:
--------------------------------------------------------------------------------
1 | .classifier {
2 | max-width: 300px;
3 | width: 300px;
4 | background: white;
5 | height: 300px;
6 |
7 | h1,h2,h3,h4,h5,h6 {
8 | font-weight: inherit;
9 | }
10 |
11 | button {
12 | cursor: pointer;
13 | }
14 |
15 | ul, li {
16 | list-style: none;
17 | margin: 0;
18 | padding: 0;
19 | }
20 |
21 | * {
22 | box-sizing: border-box;
23 | }
24 |
25 | a, button {
26 | cursor: pointer;
27 | }
28 | }
29 |
--------------------------------------------------------------------------------
/src/Dropzone/getFile.ts:
--------------------------------------------------------------------------------
1 | const getFile = async (item: any, path: string) => new Promise(resolve => {
2 | item.file((file: any) => {
3 | const reader = new FileReader();
4 | reader.onload = (e: any) => {
5 | return resolve({
6 | file,
7 | src: e.target.result,
8 | path: path.split('/').join(''),
9 | });
10 | };
11 | reader.readAsDataURL(file);
12 | });
13 | });
14 |
15 | export default getFile;
16 |
--------------------------------------------------------------------------------
/src/Dropzone/index.tsx:
--------------------------------------------------------------------------------
1 | import * as React from 'react';
2 | import classNames from 'utils/classNames';
3 | import transformFiles from './transformFiles';
4 | import styles from './styles.scss';
5 |
6 | interface IProps {
7 | onDrop?: Function;
8 | onParseFiles: Function;
9 | style?: any;
10 | children?: any;
11 | }
12 |
13 | interface IState {
14 | over: boolean;
15 | }
16 |
17 | class Dropzone extends React.Component
91 | {this.props.children || (Drop Images To Begin Training)}
92 |
99 |
100 | );
101 | }
102 | };
103 |
104 | export default Dropzone;
105 |
--------------------------------------------------------------------------------
/src/Dropzone/styles.scss:
--------------------------------------------------------------------------------
1 | .container {
2 | text-align: center;
3 | color: rgba(0,0,0,0.4);
4 | border-radius: 5px;
5 | height: 100%;
6 | width: 100%;
7 | display: flex;
8 | position: relative;
9 | justify-content: center;
10 | align-items: center;
11 | background: rgba(0,0,0,0);
12 | border: 2px dashed rgba(0,0,0,0.2);
13 | transition-duration: 0.2s;
14 |
15 | &.over {
16 | background: rgba(155,77,202,0.2);
17 | border: 2px dashed #9b4dca;
18 | transition-duration: 0.1s;
19 | }
20 | }
21 |
22 | .input {
23 | display: none;
24 | }
25 |
--------------------------------------------------------------------------------
/src/Dropzone/transformFiles.ts:
--------------------------------------------------------------------------------
1 | import * as React from 'react';
2 | import traverseFileTree from './traverseFileTree';
3 |
4 | const transformFiles = async (e: React.DragEvent) => {
5 | const d = e.dataTransfer || {};
6 | const items = d.items || [];
7 | let images: any = [];
8 | for (let i=0; i-
24 |
- Prediction: {prediction} 25 |
- Label: {label} 26 |
-
16 | {predictions.map((prediction: IPrediction, idx: number) => (
17 |
{title}
21 |-
22 | {data.map((datum: IDatum) => (
23 |
- 24 | {datum.data} 25 | 26 | 27 | ))} 28 |
37 |
45 | );
46 | }
47 | }
48 |
49 | export default Logs;
50 |
--------------------------------------------------------------------------------
/src/Model/Metrics/Logs/styles.scss:
--------------------------------------------------------------------------------
1 | .logs {
2 | position: relative;
3 | min-height: 40px;
4 | display: flex;
5 | flex: 1;
6 | margin-right: 20px;
7 |
8 | &.expanded {
9 | .expand {
10 | a {
11 | transform: rotate(90deg);
12 | }
13 | }
14 |
15 | pre {
16 | display: block;
17 | max-height: 100px;
18 | padding: 5px 10px;
19 | }
20 | }
21 |
22 | pre {
23 | transition-duration: 0.5s;
24 | max-height: 0px;
25 | margin: 0 auto;
26 | overflow-y: scroll;
27 | font-size: 12px;
28 | width: 100%;
29 | background: rgba(255,255,255,1.0);
30 | border-radius: 4px;
31 | padding: 0 10px;
32 | color: rgba(0,0,0,0.6);
33 | }
34 | }
35 |
36 | .expand {
37 | height: 21px;
38 | position: absolute;
39 | display: flex;
40 | align-items: center;
41 | top: -20px;
42 | left: 0;
43 |
44 | label {
45 | font-size: 12px;
46 | }
47 |
48 | a {
49 | font-size: 16px;
50 | transition-duration: 0.2s;
51 | display: inline-block;
52 | margin-right: 5px;
53 | }
54 | }
55 |
--------------------------------------------------------------------------------
/src/Model/Metrics/index.tsx:
--------------------------------------------------------------------------------
1 | import * as React from 'react';
2 | import styles from './styles.scss';
3 | import Info, {
4 | IDatum,
5 | } from './Info';
6 | // import {
7 | // IImageData,
8 | // } from 'utils/getFilesAsImages';
9 | import Logs from './Logs';
10 | export interface ImageError {
11 | image: any;
12 | error: Error;
13 | file?: any;
14 | index: number;
15 | }
16 |
17 | interface IProps {
18 | labels?: string[];
19 | downloading: boolean;
20 | onDownload?: Function;
21 | errors?: ImageError[];
22 | logs: {
23 | [index: string]: any;
24 | };
25 | accuracy: IDatum[];
26 | }
27 |
28 | // interface IData {
29 | // label: string;
30 | // }
31 |
32 | const getData = (labels: string[] = []) => {
33 | const numOfLabels = labels.reduce((obj, label) => ({
34 | ...obj,
35 | [label]: (obj[label] || 0) + 1,
36 | }), {});
37 |
38 | return Object.keys(numOfLabels).map((label) => {
39 | return {
40 | label,
41 | data: numOfLabels[label],
42 | };
43 | });
44 | };
45 |
46 | const getErrors = (errors: ImageError[] = []) => errors.map(({ file }, key) => (
47 |
38 | ▶
39 |
40 |
41 |
42 | {logs.loss.join('\n')}
43 |
44 | 48 | Error loading image: {`${file.path}/${file.file.name}`} 49 |
50 | )); 51 | 52 | class Metrics extends React.Component
65 |
88 | );
89 | }
90 | }
91 |
92 | export default Metrics;
93 |
94 | export { IMetricsInfoProps, IDatum } from './Info';
95 |
--------------------------------------------------------------------------------
/src/Model/Metrics/styles.scss:
--------------------------------------------------------------------------------
1 | .container {
2 | border-radius: 5px 5px 0 0;
3 | width: 100%;
4 | height: 100%;
5 | background: rgba(0,13,51,0.6);
6 | padding: 20px;
7 | color: rgba(255,255,255,0.8);
8 | font-size: 20px;
9 | display: flex;
10 | flex-direction: column;
11 |
12 | button {
13 | width: 120px;
14 | height: 40px;
15 | border: none;
16 | border-radius: 5px;
17 | }
18 | }
19 |
20 | .footer {
21 | flex: 1;
22 | display: flex;
23 | align-items: flex-end;
24 | }
25 |
26 | .datum {
27 | display: flex;
28 | flex-direction: column;
29 | justify-content: center;
30 | align-items: center;
31 | flex: 1;
32 |
33 | data {
34 | font-size: 40px;
35 | }
36 |
37 | label {
38 | color: rgba(255,255,255,0.6);
39 | }
40 | }
41 |
42 | .data {
43 | display: flex;
44 | margin-bottom: 20px !important;
45 | }
46 |
47 | .header {
48 | font-size: 16px;
49 | margin: 0;
50 | }
51 |
52 | .error {
53 | margin: 0;
54 | font-size: 12px;
55 | }
56 |
57 | .errors {
58 | margin-bottom: 20px;
59 | }
60 |
--------------------------------------------------------------------------------
/src/Model/index.tsx:
--------------------------------------------------------------------------------
1 | import * as React from 'react';
2 | import styles from './styles.scss';
3 | // const styles = require('./styles.scss');
4 | import Evaluator from './Evaluator';
5 | import Metrics, {
6 | IDatum,
7 | ImageError,
8 | } from './Metrics';
9 | import {
10 | IPrediction,
11 | } from './Evaluator/Predictions/Prediction';
12 | // import {
13 | // IImageData,
14 | // } from '../utils/getFilesAsImages';
15 |
16 | interface IProps {
17 | labels: string[];
18 | downloading: boolean;
19 | onDownload?: Function;
20 | predict?: Function;
21 | predictions: IPrediction[];
22 | errors?: ImageError[];
23 | logs: {
24 | [index: string]: any;
25 | };
26 | accuracy: {
27 | training?: number;
28 | evaluation?: number;
29 | };
30 | }
31 |
32 | interface IState {
33 | }
34 |
35 | const getEvaluation = (predictions: any[]) => {
36 | if (predictions.length > 0) {
37 | return predictions.reduce((sum, {
38 | prediction,
39 | label,
40 | }) => sum + (prediction === label ? 1 : 0), 0) / predictions.length;
41 | }
42 |
43 | return null;
44 | };
45 |
46 | class Model extends React.Component
70 | {errors && getErrors(errors)}
71 |
72 |
77 |
87 |
73 |
88 | );
89 | }
90 | }
91 |
92 | export default Model;
93 |
94 | export { ImageError } from './Metrics';
95 |
--------------------------------------------------------------------------------
/src/Model/styles.scss:
--------------------------------------------------------------------------------
1 | .container {
2 | display: flex;
3 | flex-direction: column;
4 | }
5 |
--------------------------------------------------------------------------------
/src/Preview/index.tsx:
--------------------------------------------------------------------------------
1 | import * as React from 'react';
2 | import classNames from 'utils/classNames';
3 | import styles from './styles.scss';
4 | import Loading from '../Loading';
5 | // import {
6 | // loadImage,
7 | // } from 'utils/getFilesAsImages';
8 | // const styles = require('./styles.scss');
9 | // import {
10 | // IImageData,
11 | // } from '../utils/getFilesAsImages';
12 |
13 | interface IProps {
14 | images?: string[];
15 | }
16 |
17 | interface IState {
18 | imageIdx: number;
19 | // images: {
20 | // [index:string]: HTMLImageElement | null;
21 | // };
22 | }
23 |
24 | const LOOP_SPEED = 75;
25 |
26 | class Preview extends React.Component
112 | {src ? (
113 |
119 | ) : (
120 |
126 | );
127 | }
128 | }
129 |
130 | export default Preview;
131 |
--------------------------------------------------------------------------------
/src/Preview/styles.scss:
--------------------------------------------------------------------------------
1 | .loader {
2 | opacity: 1;
3 | position: absolute;
4 | height: 100%;
5 | width: 100%;
6 | display: flex;
7 | justify-content: center;
8 | flex-direction: column;
9 | align-items: center;
10 | color: rgba(0,0,0,0.3);
11 |
12 | img {
13 | height: auto;
14 | width: auto;
15 | }
16 | }
17 |
18 | .container {
19 | border-radius: 5px;
20 | display: flex;
21 | justify-content: center;
22 | position: relative;
23 | align-items: center;
24 | width: 100%;
25 | height: 100%;
26 | border: 2px dashed rgba(0,0,0,0.2);
27 |
28 | .img {
29 | width: 100%;
30 | height: 100%;
31 | background-color: rgba(0,0,0,0.2);
32 | background-repeat: no-repeat;
33 | background-position: 50% 50%;
34 | background-size: cover;
35 | position: relative;
36 | }
37 |
38 | &.images {
39 | border: 2px dashed rgba(0,0,0,0);
40 | }
41 | }
42 |
43 | .loading {
44 | width: 16px;
45 | height: 16px;
46 | }
47 |
--------------------------------------------------------------------------------
/src/global.d.ts:
--------------------------------------------------------------------------------
1 | declare module '*.scss' {
2 | const content: any;
3 | export default content;
4 | }
5 | declare module '*.css' {
6 | const content: any;
7 | export default content;
8 | }
9 |
10 | declare module '*.png'
11 | declare module '*.jpg'
12 | declare module '*.jpeg'
13 | declare module '*.gif'
14 |
--------------------------------------------------------------------------------
/src/index.ts:
--------------------------------------------------------------------------------
1 | export { default } from './App';
2 |
--------------------------------------------------------------------------------
/src/types.ts:
--------------------------------------------------------------------------------
1 | export interface IProps {
2 | }
3 |
4 | export interface ITrainResult {
5 | epoch: number[];
6 | history: {
7 | acc: number[];
8 | loss: number[];
9 | };
10 | model: any;
11 | params: any;
12 | validationData: any;
13 | }
14 |
--------------------------------------------------------------------------------
/src/utils/__tests__/classNames.test.ts:
--------------------------------------------------------------------------------
1 | import classNames from '../classNames';
2 |
3 | describe('classNames', () => {
4 | test('it handles nothing', () => {
5 | expect(classNames()).toEqual('');
6 | });
7 |
8 | test('it handles a single class', () => {
9 | expect(classNames('foo')).toEqual('foo');
10 | });
11 |
12 | test('it handles multiple classes', () => {
13 | expect(classNames('foo', 'bar', 'baz')).toEqual('foo bar baz');
14 | });
15 |
16 | test('it does not include undefined or null', () => {
17 | expect(classNames('foo', undefined, null, 'baz')).toEqual('foo baz');
18 | });
19 |
20 | test('it handles an object where value is true', () => {
21 | expect(classNames({
22 | foo: true,
23 | })).toEqual('foo');
24 | });
25 |
26 | test('it handles an object where value are true and false', () => {
27 | expect(classNames({
28 | foo: true,
29 | bar: false,
30 | })).toEqual('foo');
31 | });
32 |
33 | test('it handles an object where value are true and false', () => {
34 | expect(classNames('bar', {
35 | foo: true,
36 | quom: false,
37 | }, 'baz')).toEqual('bar foo baz');
38 | });
39 | });
40 |
--------------------------------------------------------------------------------
/src/utils/classNames.ts:
--------------------------------------------------------------------------------
1 | interface IClassNameObject {
2 | [index:string]: boolean | undefined;
3 | }
4 |
5 | const arr: string[] = [];
6 |
7 | type Name = string|IClassNameObject|undefined|null;
8 |
9 | const transformObjToArr = (name: IClassNameObject) => Object.entries(name).filter(entry => entry[1]).map(([ key ]) => key);
10 |
11 | const classNames = (...names: Name[]) => (names || []).reduce((arr, name: Name) => {
12 | if (!name) {
13 | return arr;
14 | }
15 |
16 | if (typeof name === 'string') {
17 | return arr.concat(name);
18 | }
19 |
20 | return arr.concat(transformObjToArr(name));
21 | }, arr).join(' ');
22 |
23 | export default classNames;
24 |
--------------------------------------------------------------------------------
/src/utils/getFilesAsImages.ts:
--------------------------------------------------------------------------------
1 | export interface IFileData {
2 | label: string;
3 | file: any;
4 | src: string;
5 | };
6 |
7 | export interface IImageData {
8 | label: string;
9 | image: HTMLImageElement;
10 | };
11 |
12 | export const loadImage = async (src: string) => new Promise
121 |
124 | )}
125 |