Skip to content

Commit 2428488

Browse files
nibilin33nibilin33
committedJun 1, 2023
feat: modify entry structural
1 parent 6782a5c commit 2428488

File tree

7 files changed

+168
-92
lines changed

7 files changed

+168
-92
lines changed
 

‎package-lock.json

+41-1
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎package.json

+3-1
Original file line numberDiff line numberDiff line change
@@ -14,7 +14,9 @@
1414
"p5": "^1.6.0",
1515
"react": "^18.2.0",
1616
"react-dom": "^18.2.0",
17-
"react-p5": "^1.3.35"
17+
"react-p5": "^1.3.35",
18+
"react-router": "^6.11.2",
19+
"react-router-dom": "^6.11.2"
1820
},
1921
"devDependencies": {
2022
"@types/react": "^18.0.37",

‎src/App.jsx

+36-89
Original file line numberDiff line numberDiff line change
@@ -1,98 +1,45 @@
1-
import { useState, useRef, useEffect } from "react";
21
import "./App.css";
3-
import * as p5 from "p5";
4-
import * as ml5 from "ml5";
5-
const p5Tool = new p5();
6-
//[featureExtractor] featureExtractor for images from file https://github.com/ml5js/ml5-library/issues/887
7-
// 一个分类至少要两张照片
2+
import { Routes, Route, Link } from "react-router-dom";
3+
// import * as p5 from "p5";
4+
// const p5Tool = new p5();
5+
import Trainning from './pages/Trainning'
6+
import Classify from './pages/Classify'
7+
88
function App() {
9-
const version = ml5.version;
10-
let capture = useRef();
11-
const [
12-
classifier,
13-
setClassifier
14-
] = useState(null)
15-
const [
16-
result,
17-
setResult
18-
] = useState('--');
19-
const [
20-
training,
21-
setTraining
22-
] = useState(false)
23-
let currentLabel = '';
24-
function modelReady() {
25-
console.log("Model Ready");
26-
}
27-
const setup = () => {
28-
capture.current = p5Tool.createCanvas(800, 800);
29-
const featureExtractor = ml5.featureExtractor(
30-
"MobileNet",
31-
// { epochs: 20 },
32-
modelReady
33-
);
34-
setClassifier(featureExtractor.classification())
35-
};
36-
useEffect(() => {
37-
setup();
38-
}, []);
39-
function gotResult(e) {
40-
const { target } = e;
41-
target.files.forEach((file) => {
42-
let img = new Image();
43-
img.src = window.URL.createObjectURL(file);
44-
img.onload = () => {
45-
classifier.classify(img, (err, result) => {
46-
console.log('result', result)
47-
if(err) return;
48-
setResult(result[0].label)
49-
});
50-
};
51-
});
52-
}
53-
54-
function train() {
55-
setTraining(true)
56-
classifier.train((lossValue ) => {
57-
console.log("Loss is", lossValue);
58-
if(!lossValue) {
59-
setTraining(false)
60-
}
61-
});
62-
}
63-
function hanldeInput(e) {
64-
const {
65-
target
66-
} = e;
67-
currentLabel = target.value;
68-
}
69-
const handleImage = (e) => {
70-
const { target } = e;
71-
target.files.forEach((file) => {
72-
let img = new Image();
73-
img.src = window.URL.createObjectURL(file);
74-
img.onload = () => {
75-
classifier.addImage(img,currentLabel,()=>{
76-
console.log("image added");
77-
});
78-
};
79-
});
80-
};
819
return (
8210
<>
83-
<div>
84-
<h1>ML5 version:{version} </h1>
85-
<label>当前文件打标签</label>
86-
<input type="text" label="标签" onInput={hanldeInput}></input>
87-
<input type="file" accept="image/*" onChange={handleImage}></input>
88-
<button onClick={train}>训练</button>
89-
{training? <p>训练中...</p> : null}
90-
<label>测试识别结果</label>
91-
<input id="result" type="file" accept="image/*" onChange={gotResult}></input>
92-
<div>识别结果:{result}</div>
93-
</div>
11+
<Layout />
12+
<Routes>
13+
<Route path="/trainning" element={<Trainning />}>
14+
</Route>
15+
<Route path="/classify" element={<Classify />}>
16+
</Route>
17+
</Routes>
9418
</>
9519
);
9620
}
21+
function Layout() {
22+
return (
23+
<div>
24+
<nav>
25+
<ul>
26+
<li>
27+
<Link to="/">Home</Link>
28+
</li>
29+
<li>
30+
<Link to="/trainning">trainning</Link>
31+
</li>
32+
<li>
33+
<Link to="/classify">custom classify</Link>
34+
</li>
35+
<li>
36+
<Link to="/detect-object">object detection</Link>
37+
</li>
38+
</ul>
39+
</nav>
40+
<hr />
41+
</div>
42+
)
43+
}
9744

9845
export default App;

‎src/assets/model.json

+1
Large diffs are not rendered by default.

‎src/main.jsx

+3-1
Original file line numberDiff line numberDiff line change
@@ -1,9 +1,11 @@
11
import React from 'react'
22
import ReactDOM from 'react-dom/client'
33
import App from './App.jsx'
4-
// import 'p5'
4+
import { BrowserRouter } from "react-router-dom";
55
import './index.css'
66

77
ReactDOM.createRoot(document.getElementById('root')).render(
8+
<BrowserRouter>
89
<App />
10+
</BrowserRouter>
911
)

‎src/pages/Classify.jsx

+4
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,4 @@
1+
// const classifier = ml5.imageClassifier('path/to/custom/model.json', modelReady);
2+
export default function Classify() {
3+
return <div>classify</div>
4+
}

‎src/pages/Trainning.jsx

+80
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,80 @@
1+
import { useState, useEffect, useRef } from "react";
2+
import * as ml5 from "ml5";
3+
//[featureExtractor] featureExtractor for images from file https://github.com/ml5js/ml5-library/issues/887
4+
// 一个分类至少要两张照片
5+
export default function Trainning() {
6+
const version = ml5.version;
7+
const inputRef = useRef(null);
8+
const [classifier, setClassifier] = useState(null);
9+
const [result, setResult] = useState("--");
10+
const [training, setTraining] = useState(false);
11+
let currentLabel = "";
12+
const setup = () => {
13+
const featureExtractor = ml5.featureExtractor("MobileNet", () => {
14+
console.log("Model Ready");
15+
});
16+
setClassifier(featureExtractor.classification());
17+
};
18+
useEffect(() => {
19+
setup();
20+
}, []);
21+
function gotResult(e) {
22+
setResult('--');
23+
const { target } = e;
24+
target.files.forEach((file) => {
25+
let img = new Image();
26+
img.src = window.URL.createObjectURL(file);
27+
img.onload = () => {
28+
classifier.classify(img, (err, result) => {
29+
console.log("result", result);
30+
if (err) return;
31+
setResult(result[0].label);
32+
});
33+
};
34+
});
35+
inputRef.current.value = null;
36+
}
37+
38+
function train() {
39+
setTraining(true);
40+
classifier.train((lossValue) => {
41+
console.log("Loss is", lossValue);
42+
if (!lossValue) {
43+
setTraining(false);
44+
}
45+
});
46+
}
47+
function save() {
48+
classifier.save();
49+
}
50+
function hanldeInput(e) {
51+
const { target } = e;
52+
currentLabel = target.value;
53+
}
54+
const handleImage = (e) => {
55+
const { target } = e;
56+
target.files.forEach((file) => {
57+
let img = new Image();
58+
img.src = window.URL.createObjectURL(file);
59+
img.onload = () => {
60+
classifier.addImage(img, currentLabel, () => {
61+
console.log("image added");
62+
});
63+
};
64+
});
65+
};
66+
return (
67+
<>
68+
<h1>ML5 version:{version} </h1>
69+
<label>当前文件打标签</label>
70+
<input type="text" label="标签" onInput={hanldeInput}></input>
71+
<input type="file" accept="image/*" onChange={handleImage}></input>
72+
<button onClick={train}>训练</button>
73+
{training? <p>训练中...</p> : <p></p>}
74+
<label>测试识别结果</label>
75+
<input ref={inputRef} type="file" accept="image/*" onChange={gotResult}></input>
76+
<p>识别结果:{result}</p>
77+
<button onClick={save}>保存</button>
78+
</>
79+
);
80+
}

0 commit comments

Comments
 (0)
Please sign in to comment.