forked from Elucidation/ChessboardFenTensorflowJs
-
Notifications
You must be signed in to change notification settings - Fork 0
/
index.html
122 lines (106 loc) · 5.12 KB
/
index.html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
<html>
<head>
<!-- Material Design Lite https://getmdl.io -->
<link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons">
<link rel="stylesheet" href="https://code.getmdl.io/1.2.0/material.indigo-pink.min.css">
<script defer src="https://code.getmdl.io/1.2.0/material.min.js"></script>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<!-- Load TensorFlow.js -->
<script src="https://cdn.jsdelivr.net/npm/@tensorflow/[email protected]"> </script>
<script src="filters.js"></script>
<script src="chessbot_tensorflow_model.js"></script>
<script src="chessboard_detection.js"></script>
<!-- Global site tag (gtag.js) - Google Analytics -->
<script async src="https://www.googletagmanager.com/gtag/js?id=UA-47993702-2"></script>
<script>
window.dataLayer = window.dataLayer || [];
function gtag(){dataLayer.push(arguments);}
gtag('js', new Date());
gtag('config', 'UA-47993702-2');
</script>
</head>
<body>
<!-- Computer Vision Portion -->
<div>
<h3>Predicting Chessboard layouts from Screenshots using TensorflowJs</h3>
<p>
This is a much-simplified version of
<a href="https://github.com/Elucidation/tensorflow_chessbot">Tensorflow Chessbot</a>,
but running live completely in javascript with TensorflowJs.<br/>
You can upload a screenshot of a chessboard here, and it will predict the FEN notation and provide Lichess analysis/editor links.<br/>
<a href="https://github.com/Elucidation/ChessboardScreenshotHtml5">Source code</a>. If you run into issues or have suggestions, please add them as an <a href="https://github.com/Elucidation/ChessboardScreenshotHtml5/issues">issue here</a> (or check if there is already one and add a comment).
</p>
<p>For now, the chessboard must be centered, properly aligned and filling almost all of the image. Results will show at the bottom.</p>
<p id="loading_model_text"><i>Please wait, loading tensorflow model...</i></p>
</div>
<div id="post_model_loaded" style="display:none">
<p>
Input screenshot file: <input type="file" id="imageLoader" name="imageLoader" accept="image/*"/>
</p>
<img id='example_input_img' src="example_input.png" width="321px" height="300px" style="display:none">
<canvas id="uploadedImage"></canvas>
<h3>Gradient Image</h3>
<p><canvas id="sobelCanvas"></canvas></p>
<!-- Machine Learning Portion -->
<div>
<h3>Input to machine learning model</h3>
<p><canvas id="resultCanvas"></canvas></p>
<h3>Prediction</h3>
<div id="prediction_block" style="display:none">
<p>
Raw Predicted FEN: <div id='fen'>Waiting for image...</div>
</p>
<p>
◇ White to play : <a href="" id="lichess_analysis_white">Analysis</a> | <a href="" id="lichess_editor_white">Editor</a><br/>
◆ Black to play : <a href="" id="lichess_analysis_black">Analysis</a> | <a href="" id="lichess_editor_black">Editor</a><br/>
</p>
<p>
▾ Links for when pieces are upside down on the board:<br/>
◇ White to play : <a href="" id="lichess_analysis_white_inverted">Analysis</a> | <a href="" id="lichess_editor_white_inverted">Editor</a><br/>
◆ Black to play : <a href="" id="lichess_analysis_black_inverted">Analysis</a> | <a href="" id="lichess_editor_black_inverted">Editor</a><br/>
</p>
<img id='visualize' src="">
</div>
</div>
</div>
</body>
<script type="text/javascript" >
// Load frozen model.
const frozen_graph = "frozen_model/tensorflowjs_model.pb";
const weights = "frozen_model/weights_manifest.json";
// global model.
var predictor;
tf.loadFrozenModel(frozen_graph, weights).then(
function(result) {
predictor = result;
imageLoader.disabled = false; // Enable since model is loaded.
// Run on default image for now.
document.getElementById('post_model_loaded').style.display = 'block'
document.getElementById('loading_model_text').style.display = 'none'
processLoadedImage(document.getElementById('example_input_img'));
chessboard = runPrediction();
console.log('Predicted FEN: ', chessboard.fen);
updateUI(chessboard);
});
console.log("Successfuly loaded tensorflow_chessbot model.");
// Set up image upload.
var imageLoader = document.getElementById('imageLoader');
imageLoader
imageLoader.disabled = true; // Disabled until model is loaded.
imageLoader.addEventListener('change', handleImage, false);
function handleImage(e){
var reader = new FileReader();
reader.onload = function(event){
var img = new Image();
img.onload = function() {
processLoadedImage(img);
chessboard = runPrediction();
console.log('Predicted FEN: ', chessboard.fen);
updateUI(chessboard);
}
img.src = event.target.result;
}
reader.readAsDataURL(e.target.files[0]);
}
</script>
</html>