-
Notifications
You must be signed in to change notification settings - Fork 9
/
index.html
142 lines (124 loc) · 5.77 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
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
<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">
<link rel="stylesheet" href="style.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">
<meta charset="utf-8">
<!-- Load TensorFlow.js -->
<script src="https://cdn.jsdelivr.net/npm/@tensorflow/tfjs@0.12.5"> </script>
<script src="filters.js"></script>
<script src="chessbot_tensorflow_model.js"></script>
<script src="chessboard_detection.js"></script>
<script src="fen2htmldiv.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>
<div>
<h3>Predicting Chessboard layouts from Screenshots using TensorflowJs</h3>
<p>
This is a simplified version of
<a href="https://github.com/Elucidation/tensorflow_chessbot">Tensorflow Chessbot</a>,
running live, client-side in Javascript with TensorflowJs. <a href="https://github.com/Elucidation/ChessboardScreenshotHtml5">Source code</a>.<br/>
You can upload a screenshot of a lichess.org/chess.com chessboard here, and it will predict the FEN notation and provide Lichess analysis/editor links.<br/>
</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>
<p>The chessboard must be centered and fill most of the image. Results show below.</p>
<div class="container">
<!-- Computer Vision Portion -->
<div class="section">
<h3>1. Input Image</h3>
<img id='example_input_img' src="example_input.png" style="display:none">
<canvas id="uploadedImage"></canvas>
</div>
<div class="section">
<h3>2. Board Overlay</h3>
<p><canvas id="sobelCanvas"></canvas></p>
</div>
<!-- Machine Learning Portion -->
<div class="section">
<h3>3. Input to ML model</h3>
<p><canvas id="resultCanvas"></canvas></p>
</div>
<div class="section">
<h3>4. Prediction</h3>
<div id="prediction_block" style="display:none">
<div id="chessboard"></div>
<div id="fen">Waiting for image...</div>
<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>
</div>
</div>
</div>
</div>
<p>
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>
</body>
<script type="text/javascript" >
function processImage(img) {
const startTime = performance.now();
processLoadedImage(img);
const processImageTime = (performance.now() - startTime).toFixed(2);
console.log('Parsing image computer vision took:', processImageTime, 'milliseconds');
const predictionStartTime = performance.now();
const chessboard = runPrediction();
const predictionTime = (performance.now() - predictionStartTime).toFixed(2);
console.log('Prediction took:', predictionTime, 'milliseconds');
console.log('Predicted FEN: ', chessboard.fen);
updateUI(chessboard);
}
// 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'
processImage(document.getElementById('example_input_img'));
});
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() {
processImage(img);
}
img.src = event.target.result;
}
reader.readAsDataURL(e.target.files[0]);
}
</script>
</html>