-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathindex.html
138 lines (120 loc) · 7.08 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
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta content="width=device-width, initial-scale=1.0" name="viewport">
<title>Captcha Bot Test Page</title>
<meta content="" name="description">
<meta content="" name="keywords">
<!-- Favicons -->
<link href="assets/img/favicon.png" rel="icon">
<link href="assets/img/apple-touch-icon.png" rel="apple-touch-icon">
<!-- Google Fonts -->
<link href="https://fonts.googleapis.com/css?family=Open+Sans:300,300i,400,400i,600,600i,700,700i|Lato:400,300,700,900" rel="stylesheet">
<!-- Vendor CSS Files -->
<link href="assets/vendor/bootstrap/css/bootstrap.min.css" rel="stylesheet">
<link href="assets/vendor/bootstrap-icons/bootstrap-icons.css" rel="stylesheet">
<link href="assets/vendor/glightbox/css/glightbox.min.css" rel="stylesheet">
<link href="assets/vendor/swiper/swiper-bundle.min.css" rel="stylesheet">
<!-- Template Main CSS File -->
<link href="assets/css/style.css" rel="stylesheet">
</head>
<body>
<!-- ======= Header ======= -->
<header id="header" class="fixed-top d-flex align-items-center">
<div class="container d-flex align-items-center">
<div class="logo me-auto">
<h1><a href="https://github.com/reevesba/captcha-bot" target="_blank">CapBot <i class="bi bi-github"></i></a></h1>
</div>
<nav id="navbar" class="navbar">
<ul>
<li><a class="nav-link scrollto active" href="#hero">Home</a></li>
<li><a class="nav-link scrollto" href="#doc">Documentation</a></li>
</ul>
<i class="bi bi-list mobile-nav-toggle"></i>
</nav>
</div>
</header>
<!-- ======= End Header ======= -->
<!-- ======= Hero Section ======= -->
<section id="hero">
<div class="hero-container">
<h1>Solve the Captcha</h1>
<div class="captcha-card">
<div id="captcha" class="captcha"><script>createCaptcha();</script></div>
<div class="input">
<input type="text" name="captcha-input" id="captcha-input" size="4"/>
<script>
let textBox = document.getElementById('captcha-input');
textBox.addEventListener('keydown', (event) => {
console.log(`key=${event.key},code=${event.code}`);
});
</script>
</div>
<div id="captcha-message" style="visibility: hidden;"><p>placeholder</p></div>
<div>
<input type="button" value="Submit" class="captcha-submit align-bottom"/>
</div>
</div>
<a href="#doc" class="btn-get-started scrollto">Documentation</a>
</div>
</section>
<!-- ======= End Hero ======= -->
<main id="main">
<!-- ======= Documentation Section ======= -->
<section id="doc" class="about">
<div class="container">
<div class="section-title">
<h2>CapBot Documentation</h2>
</div>
<div class="">
<h3>Quick Start</h3>
<p>This will get you up and running quickly. For detailed instructions, visit <a href="https://github.com/reevesba/captcha-bot" target="_blank">GitHub</a>.</p>
<h5>Prerequisites</h5>
<p>
Install <a href="https://www.google.com/chrome/" target="_blank">Chrome</a> and <a href="https://chromedriver.chromium.org/downloads" target ="_blank">ChromeDriver</a>.
</p>
<h5>Installation</h5>
<ul>
<li><i class="bi bi-check2-circle"></i> <code>git clone https://github.com/reevesba/captcha-bot</code></li>
<li><i class="bi bi-check2-circle"></i> <code>cd captcha-bot</code></li>
<li><i class="bi bi-check2-circle"></i> <code>pip3 install -r requirements.txt</code></li>
</ul>
<h5>Usage</h5>
<ul>
<li><i class="bi bi-check2-circle"></i> <code>cd src</code></li>
<li><i class="bi bi-check2-circle"></i> <code>python3 main.py</code></li>
</ul>
<p>
After executing these commands, you should see the following CLI.
<br><br>
<img src="assets/img/capbot-cli.PNG" alt="capbot cli">
<ul>
<li><i class="bi bi-check2-circle"></i> <strong>Would you like to preprocess captcha images for training?</strong> If yes, character images will be generated by extracting the characters from the captcha images and saving them. There are thousands of images to process so this step can take some time. The preprocessed images are included in the GitHub repository, so you don't necessarily need to do this.</li>
<li><i class="bi bi-check2-circle"></i> <strong>Would you like to train a new model?</strong> If yes, a new model will be built and trained. If any of the model hyper-parameters are changed or if the general architecture is updated, you will need to execute this step. As thousands of images are used for training, this step can also take a couple of minutes. Model weights are included in the GitHub repository, so again this step isn't necessary for a quick start or demo.</li>
</ul>
</p>
</div>
</div>
</section>
<!-- ======= End Documentation ======= -->
</main>
<!-- ======= Footer ======= -->
<footer id="footer">
<div class="container">
<div class="copyright">
© Bradley Reeves
</div>
</div>
</footer>
<!-- ======= End Footer ======= -->
<a href="#" class="back-to-top d-flex align-items-center justify-content-center"><i class="bi bi-arrow-up-short"></i></a>
<!-- Vendor JS Files -->
<script src="assets/vendor/bootstrap/js/bootstrap.bundle.min.js"></script>
<script src="assets/vendor/glightbox/js/glightbox.min.js"></script>
<script src="assets/vendor/isotope-layout/isotope.pkgd.min.js"></script>
<script src="assets/vendor/swiper/swiper-bundle.min.js"></script>
<!-- Template Main JS File -->
<script src="assets/js/main.js"></script>
</body>
</html>