Display clusters and noise on ml debug page
This commit is contained in:
parent
955e2e965f
commit
d9fa4a6804
|
@ -6,9 +6,18 @@ import { AppContext } from 'pages/_app';
|
|||
import { PAGES } from 'types';
|
||||
import * as Comlink from 'comlink';
|
||||
import { runningInBrowser } from 'utils/common';
|
||||
import { MLSyncResult } from 'utils/machineLearning/types';
|
||||
import TFJSImage from './TFJSImage';
|
||||
|
||||
export default function MLDebug() {
|
||||
const [token, setToken] = useState<string>();
|
||||
const [mlResult, setMlResult] = useState<MLSyncResult>({
|
||||
allFaces: [],
|
||||
clusterResults: {
|
||||
clusters: [],
|
||||
noise: [],
|
||||
},
|
||||
});
|
||||
const router = useRouter();
|
||||
const appContext = useContext(AppContext);
|
||||
|
||||
|
@ -47,7 +56,7 @@ export default function MLDebug() {
|
|||
}
|
||||
const mlWorker = await new MLWorker.comlink();
|
||||
const result = await mlWorker.sync(token);
|
||||
console.log('MLResult: ', result);
|
||||
setMlResult(result);
|
||||
} catch (e) {
|
||||
console.error(e);
|
||||
throw e;
|
||||
|
@ -58,6 +67,34 @@ export default function MLDebug() {
|
|||
return (
|
||||
<div>
|
||||
<button onClick={onSync}>Run ML Sync</button>
|
||||
<p>{JSON.stringify(mlResult.clusterResults)}</p>
|
||||
<div>
|
||||
<p>Clusters: </p>
|
||||
{mlResult.clusterResults.clusters.map((cluster, index) => (
|
||||
<div key={index} style={{ display: 'flex' }}>
|
||||
{cluster.map((faceIndex, ind) => (
|
||||
<div key={ind}>
|
||||
<TFJSImage
|
||||
faceImage={
|
||||
mlResult.allFaces[faceIndex]?.faceImage
|
||||
}></TFJSImage>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
))}
|
||||
|
||||
<p style={{ marginTop: '1em' }}>Noise: </p>
|
||||
<div style={{ display: 'flex' }}>
|
||||
{mlResult.clusterResults.noise.map((faceIndex, index) => (
|
||||
<div key={index}>
|
||||
<TFJSImage
|
||||
faceImage={
|
||||
mlResult.allFaces[faceIndex]?.faceImage
|
||||
}></TFJSImage>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
|
32
src/components/TFJSImage.tsx
Normal file
32
src/components/TFJSImage.tsx
Normal file
|
@ -0,0 +1,32 @@
|
|||
import React, { useEffect, useRef } from 'react';
|
||||
import * as tf from '@tensorflow/tfjs';
|
||||
import { FaceImage } from 'utils/machineLearning/types';
|
||||
|
||||
interface FaceImageProps {
|
||||
faceImage: FaceImage;
|
||||
}
|
||||
|
||||
export default function TFJSImage(props: FaceImageProps) {
|
||||
const canvasRef = useRef(null);
|
||||
|
||||
useEffect(() => {
|
||||
if (!props || !props.faceImage) {
|
||||
return;
|
||||
}
|
||||
const canvas = canvasRef.current;
|
||||
canvas.setAttribute('width', props.faceImage?.length);
|
||||
canvas.setAttribute('height', props.faceImage[0]?.length);
|
||||
const faceTensor = tf.tensor3d(props.faceImage);
|
||||
const normFaceImage = tf.div(tf.add(faceTensor, 1.0), 2);
|
||||
tf.browser.toPixels(normFaceImage as tf.Tensor3D, canvas);
|
||||
}, [props.faceImage]);
|
||||
|
||||
return (
|
||||
<canvas
|
||||
ref={canvasRef}
|
||||
width={112}
|
||||
height={112}
|
||||
style={{ display: 'inline' }}
|
||||
/>
|
||||
);
|
||||
}
|
Loading…
Reference in a new issue