-
Notifications
You must be signed in to change notification settings - Fork 46
/
Copy pathplay.html
121 lines (116 loc) · 4.64 KB
/
play.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
<!doctype html>
<html>
<head>
<title>CBL-JS Segmentation Playground</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" type="text/css" href="../cbl.css" />
<script type="text/javascript" src="../cbl.js"></script>
<style>
* {
font-family: sans-serif;
}
#preprocess {
min-height: 300px;
min-width: 400px;
}
#debugPreprocessed {
background: #DDDDDD;
padding: 5px;
}
#debugSegmented {
background: #DDDDDD;
padding: 5px;
margin: 5px 0 0 0;
}
img {
margin: 0 5px 0 0;
}
.main img {
margin: 5px 0 0 0;
}
textarea {
font-family: monospace;
}
#imageUrl {
display: block;
margin: 0 0 5px 0;
min-width: 400px;
}
</style>
</head>
<body>
<div id="debugPreprocessed"></div>
<div id="debugSegmented"></div>
<div class="main">
<img id="captcha" src="../captchas/codeproject/43451803.gif" />
<br />
<input id="imageUrl" value="../captchas/codeproject/43451803.gif">
<textarea id="preprocess"></textarea>
<div id="errors"></div>
<br />
<a href="javascript: void(0)" id="run" onclick="run()">Run</a>
</div>
<script>
// Load saved script
var savedScript = JSON.parse(localStorage.getItem('cbl'))
if (savedScript == null) {
savedScript = "img.removeGray(20);\nimg.convolute([ [1, 2, 1], \n [1, 3, 1], \n [1, 2, 1] ], 1.0/13);\nimg.binarize(190);\nimg.colorRegions(45, true);";
}
document.getElementById('preprocess').value = savedScript;
var cbl;
var run = function() {
try {
// Save the script
localStorage.setItem('cbl', JSON.stringify(document.getElementById('preprocess').value));
document.getElementById('debugPreprocessed').innerHTML = "<div>Original</div>";
document.getElementById('debugSegmented').innerHTML = "<div>Segmented</div>";
document.getElementById('errors').innerHTML = "" ;
cbl = new CBL({
preprocess: function(img) {
try {
var commands = document.getElementById('preprocess').value.split('img.');
for (var i = 0; i < commands.length; i++) {
if (commands[i].trim().length && !commands[i].includes('debugImage')) {
var command = 'img.' + commands[i];
console.log('CBL> img.debugImage("debugPreprocessed");');
img.debugImage("debugPreprocessed");
console.log('CBL> ' + command);
document.getElementById('debugPreprocessed').innerHTML += '<div>' + command + '</div>';
try {
eval(command);
}
catch (cex) {
console.warn('CBL> ' + command + ' failed!');
document.getElementById('errors').innerHTML = 'Failed to run: ' + command;
}
}
}
img.debugImage("debugPreprocessed");
console.log('CBL> img.debugImage("debugPreprocessed");');
}
catch (ex) {
document.getElementById('errors').innerHTML = ex;
}
},
blob_debug: "debugSegmented",
character_set: "0123456789",
blob_min_pixels: 40,
blob_max_pixels: 350,
pattern_width: 24,
pattern_height: 24,
pattern_maintain_ratio: true,
perceptive_colorspace: true
});
cbl.solve("captcha");
}
catch (ex) {
document.getElementById('errors').innerHTML = ex;
}
};
// Load an image
document.getElementById('imageUrl').addEventListener('change', function() {
document.getElementById('captcha').src = document.getElementById('imageUrl').value;
});
</script>
</body>
</html>