simple-image-ocr/index.html at main · mattwright324/simple-image-ocr · GitHub

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
<!DOCTYPE html>
<html lang="en" data-bs-theme="dark">
<head>
    <meta charset="UTF-8">
    <title>Simple Local OCR</title>

    <link rel="icon" type="image/png" href="icon.png">
    <link rel="stylesheet" href="css/bootstrap.min.css">

    <script src="js/jquery-3.7.1.min.js"></script>
    <script src="js/bootstrap.bundle.min.js"></script>
    <script src="js/tesseract-v5.1.1.min.js"></script>
    <script src="js/tesseract-worker-v5.1.1.min.js"></script>
    <script>
        document.write("<script src='js/script.js?v=" + new Date() + "'><\/script>");
        document.write("<link rel='stylesheet' href='css/styles.css?v=" + new Date() + "'>");
    </script>
</head>
<body ondragover="return false">
<nav class="navbar navbar-expand-lg bg-body-tertiary">
    <div class="container">
        <a class="navbar-brand" href="#">
            <img src="./icon.png" alt="Logo" width="30" height="30" class="d-inline-block align-text-top">
            <span style="padding-left: .75rem;">Simple Local OCR</span>
        </a>
        <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarNav"
                aria-controls="navbarNav" aria-expanded="false" aria-label="Toggle navigation">
            <span class="navbar-toggler-icon"></span>
        </button>
        <div class="collapse navbar-collapse" id="navbarNav">
            <ul class="navbar-nav ms-auto">
                <li class="nav-item">
                    <a class="nav-link" aria-current="page"
                       href="https://github.com/mattwright324/simple-image-ocr/">View on GitHub</a>
                </li>
            </ul>
        </div>
    </div>
</nav>
<div class="container mb-5 mt-3">
    <p>
        This tool allows you to OCR images in several different ways right in your browser.
        It is designed to be portable, copy the folder and use locally or clone and host it elsewhere.
    </p>
    <p>
        Using the <a target="_blank" href="https://tesseract.projectnaptha.com/">Tesseract.js</a> engine.
        Resulting OCR text may not be perfect so always review and check for errors -- results are editable and
        spellcheck is enabled. While it needs the internet to retrieve training data,
        it does not send submitted images anywhere. All OCR work is done in the browser.
    </p>
</div>
<div class="container mb-5">
    <h2>Input</h2>
    <div class="selector text-muted">
        <svg width="59" height="45" viewBox="0 0 59 45" fill="none" xmlns="http://www.w3.org/2000/svg">
            <path d="M40.3332 13.747L1.58323 13.747L1.58323 43.4553L40.3332 43.4553L40.3332 13.747Z"
                  class="ArIAXb"></path>
            <path d="M40.3332 13.747L17.0832 13.747L17.0832 33.122L40.3332 33.122L40.3332 13.747Z"
                  class="qOFLsb"></path>
            <path fill-rule="evenodd" clip-rule="evenodd"
                  d="M0.614479 12.7783L6.74988 12.7783L6.74988 14.7158L2.55198 14.7158L2.55198 18.9137L0.614479 18.9137L0.614479 12.7783Z"
                  fill="#BDC1C6"></path>
            <path fill-rule="evenodd" clip-rule="evenodd"
                  d="M39.3644 42.4866L39.3644 38.2887L41.3019 38.2887L41.3019 44.4241L35.1665 44.4241L35.1665 42.4866L39.3644 42.4866Z"
                  fill="#BDC1C6"></path>
            <path fill-rule="evenodd" clip-rule="evenodd"
                  d="M0.614479 38.2887L2.55198 38.2887L2.55198 42.4866L6.74987 42.4866L6.74987 44.4241L0.614479 44.4241L0.614479 38.2887Z"
                  fill="#BDC1C6"></path>
            <path d="M19.6665 30.2531H58.4165L58.4165 0.544722H19.6665L19.6665 30.2531Z" fill="#AECBFA"></path>
            <path d="M19.6665 21.8429L19.6665 30.2525L58.4168 30.2525L58.4168 19.7406L49.6667 12.4069C48.6234 11.5342 47.2931 11.0699 45.9272 11.1018C44.5614 11.1337 43.2547 11.6596 42.2542 12.5801L33.4166 20.7918L28.4166 17.2548C27.7332 16.7781 26.9013 16.5563 26.0684 16.6288C25.2354 16.7012 24.4554 17.0632 23.8666 17.6505L19.6665 21.8429Z"
                  fill="#669DF6"></path>
            <path d="M30.0056 12.9386C31.7315 12.9386 33.1306 11.5395 33.1306 9.8136C33.1306 8.08773 31.7315 6.68863 30.0056 6.68863C28.2798 6.68863 26.8807 8.08773 26.8807 9.8136C26.8807 11.5395 28.2798 12.9386 30.0056 12.9386Z"
                  fill="#E8F0FE"></path>
        </svg>

        <span style="margin-left:10px">
            Paste, Drag-n-Drop, or
            <a href="#" onclick="document.getElementById('file-chooser').click()">
                upload images
            </a>
        </span>
        <input id="file-chooser" type="file" accept='image/*' style="display:none;" multiple>
    </div>
    <div class="text-center"><small class="text-muted">——— or ———</small></div>
    <div>
        <div class="input-group mb-3">
            <input id="url-list" autocomplete="false" type="text" class="form-control form-control-lg"
                   placeholder="Paste image link" aria-label="Paste image link" aria-describedby="button-addon2">
            <button class="btn btn-lg btn-outline-secondary" type="button" id="url-submit">Submit</button>
        </div>
    </div>
</div>
<div class="container mb-5">
    <h2>Results</h2>
    <div id="results"></div>

    <div id="placeholder" class="column no-margin">
        <div class="result loading mb-3">
            <strong>File (Example)</strong>
            <input autocomplete="off" type="text" class="form-control" value="sample-screenshot.png" readonly>
            <br>
            <div class="row">
                <div class="col-auto text-sm-center">
                    <div class='img-holder'>
                        <img src="./img/sample-screenshot.png" class="input"/>
                    </div>
                    <small class="image-size text-muted">200x200</small>
                </div>
                <div class="col">
                    <textarea autocomplete="off" class='form-control' rows="8" spellcheck="true" style="width:100%">What is Lorem Ipsum!

Lorem Ipsum is simply dummy text of the printing and typesetting
industry. Lorem Ipsum has been the industry's standard dummy
text ever since the 1500s, when an unknown printer took a galley
of type and scrambled it to make a type specimen book. It has
survived not only five centuries, but also the leap into electronic
typesetting, remaining essentially unchanged. It was popularised in
the 1960s with the release of Letraset sheets containing Lorem
Ipsum passages, and more recently with desktop publishing
software like Aldus PageMaker including versions of Lorem Ipsum.
</textarea>
                </div>
            </div>
            <div class="spinner"></div>
        </div>
    </div>
</div>
</body>
</html>