sniptext/index.html at main · YL-Raj/sniptext · 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
<!DOCTYPE html>
<html lang="en" data-theme="dark">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<meta name="theme-color" content="#0d1117" />
<title>SnipText — Snip &amp; Extract Text</title>
<link rel="manifest" href="manifest.webmanifest" />
<link rel="stylesheet" href="style.css" />
</head>
<body>
<header>
  <div class="bar">
    <div class="logo"><span class="mark">&#9986;&#65039;</span> SnipText</div>
    <span class="chip">&#128274; 100% on-device</span>
    <span class="spacer"></span>
    <button class="icon-btn" id="themeBtn" title="Toggle theme">&#127769;</button>
  </div>
</header>
<main>
  <section class="card" id="inputCard">
    <div class="hero">
      <h2>Snip anything. Get clean text.</h2>
      <p>Capture or paste an image, crop the part you want, and pull out copy-friendly text &mdash; all in your browser. Nothing is uploaded.</p>
      <div class="inputs">
        <button class="inbtn" id="btnUpload"><span class="em">&#128193;</span> Upload</button>
        <button class="inbtn" id="btnPaste"><span class="em">&#128203;</span> Paste</button>
        <button class="inbtn" id="btnScreen"><span class="em">&#128421;&#65039;</span> Capture screen</button>
        <button class="inbtn" id="btnCamera"><span class="em">&#128247;</span> Camera</button>
      </div>
      <div class="dz" id="dropzone">Drop an image here, or press <b>Ctrl/Cmd + V</b> to paste a screenshot.</div>
      <div class="note" id="capNote"></div>
      <input type="file" id="fileInput" accept="image/*" hidden />
      <input type="file" id="camInput" accept="image/*" capture="environment" hidden />
    </div>
  </section>
  <section class="card" id="cropCard" style="display:none">
    <div class="toolrow">
      <span class="title">Select region</span>
      <span class="chip" id="imgChip"></span>
      <span class="spacer"></span>
      <label class="switch" title="Cleans colored / light-on-dark text for far better accuracy">
        <input type="checkbox" id="enhance" checked /> Enhance (B/W)
      </label>
      <div class="ctrl">Layout
        <select id="psm">
          <option value="3" selected>Auto</option>
          <option value="6">Block of text</option>
          <option value="7">Single line</option>
          <option value="11">Sparse</option>
        </select>
      </div>
      <div class="ctrl">Lang
        <select id="lang">
          <option value="eng" selected>English</option>
          <option value="spa">Spanish</option>
          <option value="fra">French</option>
          <option value="deu">German</option>
          <option value="hin">Hindi</option>
          <option value="chi_sim">Chinese</option>
          <option value="jpn">Japanese</option>
        </select>
      </div>
    </div>
    <div class="stageScroll">
      <div class="holder" id="holder">
        <canvas id="stage"></canvas>
        <div class="crop" id="crop" style="display:none">
          <span class="dims" id="dims"></span>
          <span class="h nw"></span><span class="h n"></span><span class="h ne"></span>
          <span class="h e"></span><span class="h se"></span><span class="h s"></span>
          <span class="h sw"></span><span class="h w"></span>
        </div>
      </div>
    </div>
    <div class="actions">
      <button class="btn primary" id="btnExtractSel">&#9986;&#65039; Extract selection</button>
      <button class="btn" id="btnExtractAll">&#128270; Whole image</button>
      <button class="btn" id="btnResetSel">&#9003; Clear selection</button>
      <span class="spacer"></span>
      <button class="btn" id="btnNew">&#8635; New image</button>
    </div>
    <div class="progress" id="progress" style="display:none"><div id="progressBar"></div></div>
    <div class="statusbar" id="status"></div>
  </section>
  <section class="card" id="outCard" style="display:none">
    <div class="toolrow">
      <div class="seg">
        <button id="tabClean" class="active">&#10024; Clean</button>
        <button id="tabRaw">Raw</button>
      </div>
      <span class="spacer"></span>
      <button class="btn primary" id="btnCopy">&#128203; Copy</button>
      <button class="btn" id="btnDownload">&#11015;&#65039; .txt</button>
    </div>
    <div class="pad">
      <div id="skeleton" class="skeleton" style="display:none">
        <div class="sk-line" style="width:70%"></div><div class="sk-line" style="width:90%"></div>
        <div class="sk-line" style="width:60%"></div><div class="sk-line" style="width:80%"></div>
      </div>
      <textarea id="output" placeholder="Extracted text will appear here&hellip;" spellcheck="false"></textarea>
      <div class="meta" id="outMeta"></div>
    </div>
  </section>
  <div class="footer">
    Runs offline after first load &middot; OCR by <a href="https://github.com/naptha/tesseract.js" target="_blank" rel="noopener">Tesseract.js</a>
    &middot; <span id="featBadge"></span>
  </div>
</main>
<div id="toasts"></div>
<script src="https://cdn.jsdelivr.net/npm/tesseract.js@5/dist/tesseract.min.js"></script>
<script src="app.js"></script>
</body>
</html>