Skip to content
Snippets Groups Projects
Commit c4fd950e authored by KaspHell's avatar KaspHell
Browse files

Trying to implement camera to game

parent 8950d9c8
No related branches found
No related tags found
No related merge requests found
import React, {Component} from 'react';
import Header from './components/Header';
import GameUI from './components/GameUI';
import WebcamImage from './components/Webcam';
import './App.css';
import React, {Component} from 'react'
import Header from './components/Header'
import GameUI from './components/GameUI'
import Result from './components/Result'
import AiCamera from './components/AiCamera'
import './App.css'
class App extends Component {
constructor(props) {
super(props)
this.state = {
result: "default",
userChoice: "default",
aiChoice: "default"
}
}
updateMatch = (result, userChoice, aiChoice) => {
this.setState({
result: result,
userChoice: userChoice,
aiChoice: aiChoice
})
}
render(){
return (
<div>
<div className="app">
<Header />
<WebcamImage />
<GameUI />
<AiCamera updateMatch={this.updateMatch}/>
<GameUI updateMatch={this.updateMatch}/>
<Result result={this.state.result}/>
</div>
);
}
}
export default App;
export default App
import React, { useState, useEffect } from 'react';
import * as tf from '@tensorflow/tfjs';
import * as tmImage from '@teachablemachine/image';
import loadVideo from '../utilities/camera';
import React, { useState, useEffect } from 'react'
import * as tf from '@tensorflow/tfjs'
import * as tmImage from '@teachablemachine/image'
import loadVideo from './utilities/camera'
function WebcamImage() {
function AiCamera() {
// the link to your model provided by Teachable Machine export panel
const URL = 'https://teachablemachine.withgoogle.com/models/Ycxae80Nq/';
const URL = 'https://teachablemachine.withgoogle.com/models/Ycxae80Nq/'
const [model, setModel] = useState(null);
const [results, setResult] = useState([]);
const [userWebCam, setUserWebCam] = useState(null);
const [predict, setPredict] = useState({className: "default"});
const [model, setModel] = useState(null)
const [results, setResult] = useState([])
const [userWebCam, setUserWebCam] = useState(null)
const [predict, setPredict] = useState({className: "default"})
const loadModel = async () => {
const modelURL = URL + 'model.json';
const metadataURL = URL + 'metadata.json';
const model = await tmImage.load(modelURL, metadataURL);
setModel(model);
console.log("toimii");
const modelURL = URL + 'model.json'
const metadataURL = URL + 'metadata.json'
const model = await tmImage.load(modelURL, metadataURL)
setModel(model)
}
async function predictVideo(image) {
if (model) {
const prediction = await model.predict(image, 4);
console.log(prediction);
const prediction = await model.predict(image, 4)
console.log(prediction)
setResult(prediction)
predictVideo(userWebCam)
}
......@@ -75,4 +74,4 @@ function WebcamImage() {
)
}
export default WebcamImage;
export default AiCamera
import React, {Component} from 'react';
import Scores from './Scores';
import Match from './Match';
import Result from './Result';
import React, {Component} from 'react'
import Scores from './Scores'
import Match from './Match'
class GameUI extends Component {
constructor(props) {
super(props);
this.state = {
result: "default",
userChoice: "default",
aiChoice: "default"
}
this.getAiChoice = this.getAiChoice.bind(this);
super(props)
this.getAiChoice = this.getAiChoice.bind(this)
}
getAiChoice(){
const plays = ["Rock", "Paper", "Scissors"];
const randomPlay = plays[Math.floor(Math.random() * plays.length)];
return randomPlay;
const plays = ["Rock", "Paper", "Scissors"]
const randomAiPlay = plays[Math.floor(Math.random() * plays.length)]
this.props.updateMatch({
aiChoice: randomAiPlay
})
return randomAiPlay
}
handlePlay(userChoice){
const aiChoice = this.getAiChoice();
const aiChoice = this.getAiChoice()
this.setState ({
userChoice: userChoice,
aiChoice: aiChoice
})
console.log("...............");
console.log(userChoice);
console.log(aiChoice);
console.log("...............")
console.log(userChoice)
console.log(aiChoice)
switch (userChoice + aiChoice) {
case "RockRock":
case "ScissorsScissors":
case "PaperPaper":
console.log("draw");
this.setState({
console.log("draw")
this.props.updateMatch({
result: "draw"
})
break;
......@@ -42,8 +39,8 @@ class GameUI extends Component {
case "RockScissors":
case "ScissorsPaper":
case "PaperRock":
console.log("win");
this.setState({
console.log("win")
this.props.updateMatch({
result: "win"
})
break;
......@@ -51,8 +48,8 @@ class GameUI extends Component {
case "ScissorsRock":
case "PaperScissors":
case "RockPaper":
console.log("lose");
this.setState({
console.log("lose")
this.props.updateMatch({
result: "lose"
})
break;
......@@ -95,10 +92,9 @@ class GameUI extends Component {
}
`}</style>
</div>
<Result result={this.state.result}/>
</div>
)
}
}
export default GameUI;
export default GameUI
import React, {Component} from 'react';
import React, {Component} from 'react'
class Header extends Component {
render(){
......@@ -22,8 +22,8 @@ class Header extends Component {
}
`}</style>
</div>
);
)
}
}
export default Header;
export default Header
import React, {Component} from 'react';
import React, {Component} from 'react'
class Match extends Component {
constructor(props) {
......@@ -20,4 +20,4 @@ class Match extends Component {
}
}
export default Match;
export default Match
......@@ -27,7 +27,7 @@ class Result extends Component {
`}</style>
</div>
)
break;
break
case "draw":
return (
<div>
......@@ -42,7 +42,7 @@ class Result extends Component {
`}</style>
</div>
)
break;
break
case "lose":
return (
<div>
......@@ -57,8 +57,8 @@ class Result extends Component {
`}</style>
</div>
)
break;
break
}
}
}
export default Result;
export default Result
import React, {Component} from 'react';
import React, {Component} from 'react'
class Scores extends Component {
state = {
......@@ -55,4 +55,4 @@ class Scores extends Component {
// }
//}
export default Scores;
export default Scores
import React, { Component } from "react"
const { Provider, Consumer } = React.createContext()
class GameContextProvider extends Component {
render() {
return <Provider value={"Predicts"}>{this.props.children}</Provider>
}
}
export { GameContextProvider, Consumer as GameContextConsumer }
......@@ -14,4 +14,4 @@ ReactDOM.render(
// If you want your app to work offline and load faster, you can change
// unregister() to register() below. Note this comes with some pitfalls.
// Learn more about service workers: https://bit.ly/CRA-PWA
serviceWorker.unregister();
serviceWorker.unregister()
......@@ -40,5 +40,5 @@ export default async function loadVideo(videoElement) {
const video = await setupCamera(videoElement)
video.play()
return video
return video;
}
0% Loading or .
You are about to add 0 people to the discussion. Proceed with caution.
Please register or to comment