Skip to content
Snippets Groups Projects
Commit d06efcd1 authored by kshell's avatar kshell
Browse files

AiCamera works with game

parent 393467be
No related branches found
No related tags found
No related merge requests found
......@@ -5,15 +5,19 @@
}
.flexbox-item-1 {
position: absolute;
background-color: #241802;
}
.flexbox-item-2 {
flex-grow: 2;
order: 3;
width: 320px;
height: 240px,
min-width: 320px;
min-height: 240px,
}
.flexbox-item-3 {
flex-grow: 2;
order: 2;
}
......@@ -21,6 +25,11 @@
order: 1;
}
.userWebCam {
border: 3px solid #F1BC53;
border-radius: 4px;
}
.score-board {
margin: 20px auto;
border: 3px solid #F1BC53;
......
......@@ -12,6 +12,7 @@ function AiCamera(props) {
const [model, setModel] = useState(null)
const [prediction, setPrediction] = useState([])
const [results, setResult] = useState([])
const [userWebCam, setUserWebCam] = useState(null)
......@@ -25,8 +26,8 @@ function AiCamera(props) {
// webcam is compared to model
async function predictVideo(image) {
if (model) {
const prediction = await model.predict(image, 4)
setResult(prediction)
const predict = await model.predict(image, 4)
setPrediction(predict)
predictVideo(userWebCam)
}
}
......@@ -75,7 +76,19 @@ function AiCamera(props) {
// registers players mark and plays a turn
async function makeMove() {
console.log(results);
console.log(prediction)
setResult(prediction)
var best = 0
var className = ""
var i;
for (i=0; i < results.length; i++) {
console.log(results[i].probability);
if (results[i].probability > best) {
best = results[i].probability
className = results[i].className
}
}
handlePlay(className)
}
......@@ -106,9 +119,9 @@ function AiCamera(props) {
return (
<div class="parent flexbox-item-2">
<button onClick={makeMove}>Ennusta</button>
<video alignment="middle" id="userWebCam"></video>
<video class="userWebCam" id="userWebCam"></video>
<ul>
{results.map(({ className, probability }) => (
{prediction.map(({ className, probability }) => (
<li key={className}>
{`${className}: ${(probability * 100).toFixed(2)}%`}
</li>
......
......@@ -6,8 +6,8 @@
import isMobile from './deviceDetect'
const canvasWidth = window.innerWidth * 0.7
const canvasHeight = window.innerHeight * 0.7
const canvasWidth = window.innerWidth * 0.3
const canvasHeight = window.innerHeight * 0.3
export async function setupCamera(videoElement) {
if (!navigator.mediaDevices || !navigator.mediaDevices.getUserMedia) {
......
0% Loading or .
You are about to add 0 people to the discussion. Proceed with caution.
Please register or to comment