forked from alt-text-org/my.alt-text.org
-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathindex.html
254 lines (246 loc) · 11 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
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
242
243
244
245
246
247
248
249
250
251
252
253
254
<!DOCTYPE html>
<html prefix="og: https://ogp.me/ns#" lang="en">
<head>
<meta charset="UTF-8">
<title>Alt Composer</title>
<link rel="icon" href="images/icon.png">
<meta property="og:title" content="Alt Text Suite">
<meta property="og:type" content="website">
<meta property="og:description"
content="Built For Building Image Descriptions">
<meta property="og:image" content="images/preview.png">
<meta property="og:image:alt"
content="Our logo, on a green background, an eye with an A in front of it, seeming like a beam from the eye">
<link rel="stylesheet" href="style/fonts.css">
<link rel="stylesheet" href="style/descriptions.css">
<link rel="stylesheet" href="style/dropdowns.css">
<link rel="stylesheet" href="style/in-flight.css">
<link rel="stylesheet" href="style/main.css">
<script src="src/first.js"></script>
<script src="src/i18n-data.js"></script>
<script src="src/i18n.js"></script>
<script src="src/configs.js"></script>
<script src="src/tesseract.js"></script>
<script src='https://cdn.jsdelivr.net/npm/tesseract.js@4/dist/tesseract.min.js' defer></script>
<script src="https://unpkg.com/canvas-txt" defer></script>
<script src="lib/fabric.min.js" defer></script>
<script src="lib/flexsearch.min.js" defer></script>
<script src="lib/findBoundaries.js" defer></script>
<script src="lib/unicode-break.js" defer></script>
<script src="lib/gen/WordBreakProperty.js" defer></script>
<script src="src/storage.js" defer></script>
<script src="src/canvas.js" defer></script>
<script src="src/images.js" defer></script>
<script src="src/descriptions.js" defer></script>
<script src="src/in-flight.js" defer></script>
<script src="src/filter-lib.js" defer></script>
<script src="src/dropdowns.js" defer></script>
<script src="src/import-export.js" defer></script>
<script src="src/palette.js" defer></script>
<script src="src/core.js" defer></script>
<script src="src/last.js" defer></script>
</head>
<body>
<main id="main">
<div id="top-controls">
<div id="dots-btn-placeholder"></div>
<div class="search-toggles search-width">
<button onclick="toggleSearchResults()" aria-label="Toggle search results" class="page-button">
<img src="images/dropdown.svg" id="search-dropdown-indicator" height="14" width="28"
class="dropdown-img rotated text-svg" alt=""
aria-hidden="true">
</button>
<div id="filter-wrapper" class="search-wrapper" onclick="focusFilter()">
<img src="images/magnifying.svg" class="inline-icon text-svg" alt="" aria-hidden="true">
<input id="filter-input" class="search-input" type="text" aria-label="Archive search"
placeholder="Search Your Archive" onload="">
</div>
<button id="image-filter-toggle" class="page-button emoji-button" onclick="toggleImageFilter()"
aria-label="Toggle image filter"
title="Toggle Image Filtering"
disabled>🌠
</button>
</div>
</div>
<div id="main-area">
<div id="work-area">
<div id="img-area">
<div id="upload-wrapper">
<div class="upload-area" id="central-upload" onclick="focusClick('upload-label')">
<img src="images/upload.svg" class="live-svg" alt="" aria-hidden="true" width="64" height="64">
<input type="file" id="upload" name="upload" accept="image/*"/>
</div>
<label id="upload-label" for="upload">Open File or Paste Image</label>
</div>
<div id="cvs-wrapper">
<canvas id="cvs" width="1" height="1" tabindex="0"></canvas>
</div>
<button id="extract-btn" class="page-button" onclick="cropExtractAndAddInFlight()">Extract Text</button>
</div>
<div id="in-flight-wrapper" class="bordered-area">
<div id="add-in-flight" class="column-emoji-controls">
</div>
<div id="in-flight"></div>
<div id="in-flight-controls" class="column-emoji-controls">
</div>
</div>
</div>
<div id="description-wrapper" class="bordered-area search-width">
<div id="not-found-display">
<img src="images/nothing-found.svg" alt="Nothing found" class="text-svg" width="90" height="110"
aria-hidden="true">
<div id="not-found-text">No Descriptions Found</div>
</div>
<div id="descriptions"></div>
</div>
<div id="palette-wrapper"></div>
</div>
</main>
<div id="exec-wrapper" class="openable"></div>
<div id="overlay" class="openable" onclick="hideEscapable()"></div>
<div class="prompt-wrapper openable">
<div id="import-prompt" class="prompt">
<div id="import-choices">
<div>
<label id="import-archive-lbl" for="import-archive-btn" class="file-input-lbl"></label>
<input type="file" id="import-archive-btn" name="import-archive-btn" accept="application/json"
onchange="importArchive()">
</div>
<button id="open-masto-import"></button>
</div>
</div>
</div>
<div id="settings" class="openable">
<h1>Settings</h1>
</div>
<dialog class="splash">
<article>
<header>
<h1>My.Alt-Text.org</h1>
<h2>Status: Alpha</h2>
<h3>This is a tool to make alt text easier.</h3>
</header>
<p>
I write a lot of alt text, and it's always struck me how useless the user interface offered by every
social
media site is. I wanted to build the composer I wished they had. This is a start, with these features:
</p>
<ul>
<li>An archive of all the descriptions you write with it, searchable by text or image</li>
<li>
Optical Character Recognition (OCR) with 100+ languages supported.
</li>
<li>
Unicode-aware split-on-whitespace for limited character counts, except you can go back and edit the
whole
description.
</li>
<li>Generation of localized "Additional Alt Text" images if needed</li>
<li>It's a static site, and no data leaves your computer.</li>
</ul>
<p>
What it is not, is accessible. Yet. I am an inexperienced frontend developer, and the ingredients of a
modern website have inaccessibility baked in. I tried to find help pre-alpha, but had no luck, and
decided
that
a limited release was the most likely path to folks gaining interest in the project. An alpha release
means
it
works for the author(s), a beta has to work for everyone that wants in, and we won't go live until it's
as
open
as possible.
</p>
<p>
This is an alpha release, things are going to break. I hope those that are able will play with it and
give
me
feedback on <a href="https://github.com/alt-text-org/my.alt-text.org">GitHub</a> or
<a href="https://social.alt-text.org/@hannah">Mastodon</a>
</p>
<footer>
<form method="dialog">
<button class="page-button" type="submit">Close</button>
</form>
</footer>
</article>
</dialog>
<dialog class="help-dialog splash">
<article>
<header>
<h1 style="text-align: center"><u>My.Alt-Text.org</u></h1>
<h2 style="text-align: center">Getting Started</h2>
</header>
<p>
There are three primary parts of the page:
</p>
<ul>
<li>The Image</li>
<li>The Work Area</li>
<li>The Archive</li>
</ul>
<p>
Each serves an important purpose in the flow of composing alt text.
</p>
<h2>The Image</h2>
<p>
The primary purpose of the image area is displaying the image as you work on your description but
it also supports Optical Character Recognition, or OCR. OCR extracts readable text from images, but it
doesn't do a perfect job, and often sees random letters that aren't there in things like photographs.
</p>
<p>
In the main menu is a button that allows you to change the language being extracted.
</p>
<h2>The Work Area</h2>
<p>
The work area is below the image, and it's where you'll write descriptions. When you first open the
page, no
snippets will be there, you'll have to either use OCR on the image to extract text, or you can hit the
➕button on the left side to create a blank description. If it's too small, you can make it bigger by
dragging the bottom right corner of the text area.
</p>
<p>
You might have a bunch of snippets, especially if you're using OCR. Once you're happy with the
description(s) you've made, you can either click the 💾 on the snippet to save just one, or the one to
the
right will save all the current in-progress descriptions. If you don't want a snippet, you can hit 🚮 on
it
to delete it.
</p>
<p>
Any descriptions you save are moved into...
</p>
<h2>The Archive</h2>
<p>
The archive has two main parts, the search bar and the results. When you first open the page, the
results
will be closed. You can enter search terms to find and display, but keep in mind the search operates on
whole words.
</p>
<p>
When you upload an image, the archive is filtered down to descriptions written for that image. If you'd
like
to toggle that, you can hit the 🌠 button.
</p>
<p>
If you'd like to edit an item in your archive, click its 📝 button, and it will appear in the work area.
Make any changes and then hit 💾 to save them to your archive. If you want to discard the changes but
keep
the old version, you can just hit 🚮 in the work area.
</p>
<p>
Set Max Length on a description to get a view of it split on whitespace. If the description is too long
to
be attached to a single image, you can click 🌠 next to each section to get an "Alt Text Continued"
image.
That image will be localized if possible.
</p>
<footer>
<form method="dialog">
<button class="page-button" type="submit">Close</button>
</form>
</footer>
</article>
</dialog>
</body>
</html>