-
Notifications
You must be signed in to change notification settings - Fork 0
Expand file tree
/
Copy pathhelp.html
More file actions
192 lines (191 loc) · 9.95 KB
/
help.html
File metadata and controls
192 lines (191 loc) · 9.95 KB
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
<html>
<head>
<title>Khoshnevisi: Perso-Arabic Calligraphic Style Recognition Web-app</title>
<link rel="shortcut icon" href="./Images/favicon.png">
<style>
@font-face
{
font-family: calibri;
src: url("./Images/calibri.ttf") format("ttf");
}
h1
{
font-family: calibri;
color: gray;
text-align: center;
}
h3
{
font-family: calibri;
color: black;
text-align: left;
font-weight: bold;
font-size: 15pt;
}
.box
{
text-decoration: none;
font-weight: bold;
font-family: calibri;
font-size: 18pt;
color: red;
padding-left: 5px;
width: 100px;
padding-left: 5px;
margin: 1px;
}
.box_2
{
text-decoration: none;
font-weight: bold;
font-family: calibri;
font-size: 18pt;
color: black;
padding-left: 5px;
width: 200px;
margin: 1px;
}
.text_main
{
font-weight: bold;
font-family: calibri;
font-size: 18pt;
color: black;
}
.text_main_paragraph
{
display: block;
font-weight: normal;
font-family: calibri;
font-size: 14pt;
color: black;
text-align: left;
text-indent: 20px;
line-height: 25px;
}
.mleft
{
display: inline;
width: 20px;
height: 20px;
}
.middle
{
display: inline-block;
border: 0px;
border-color: black;
vertical-align: top;
}
aside
{
width: 200px;
height: 200px;
padding-left: 15%;
}
main
{
width: 50%;
min-height: 300px;
padding-left: 3%;
padding-top: 0px;
}
button
{
display: inline;
font-family: calibri;
font-weight: bold;
font-size: 18pt;
background-color:
white; border: none;
}
button:hover
{
color: red;
}
footer
{
position: fixed;
bottom: 0;
width: 100%;
font-family: calibri;
text-align: center;
font-size: 10pt;
color: gray;
padding: 3px;
}
a
{
text-decoration: none;
color: #3d9fa8;
}
a:hover
{
text-decoration: none;
color: red;
}
</style>
</head>
<body>
<header>
<h1><img src="./Images/Khoshnevisi_header.jpg" alt="Khoshnevisi: Persian Handwritten Text Recognition Web-app" img-align="center"></h1>
</header>
<div>
<aside class="middle" style="border-color: black; border-style:dotted; display: inline-block;">
<p><img src="./Images/Khoshnevisi_bullet_black.png" class="mleft"><a href="standard_mode.html" class="box_2">Standard Mode</a></p>
<p><img src="./Images/Khoshnevisi_bullet_black.png" class="mleft"><a href="comparing_mode.html" class="box_2">Comparing Mode</a></p>
<p><img src="./Images/Khoshnevisi_bullet_black.png" class="mleft"><a href="About.html" class="box_2">About</a></p>
<p><img src="./Images/Khoshnevisi_bullet_red.png" class="mleft"><a href="help.html" class="box">How it works</a></p>
</aside>
<main class="middle" style="border-color: black; border-style:dotted; align-items: safe;">
<div class="text_main_paragraph=" style="overflow-y: scroll; max-height: 380px; font-family: calibri; font-size: 14pt;">
<h3>Step one</h3>
<p class="text_main_paragraph">Step one specifies the path for the collection of visual elements in PNG format with transparent backgrounds. The program will use this path to access the reference images.</p>
<h3>Step two</h3>
<p class="text_main_paragraph">Step two introduces the user's interaction with the program, where they can choose between two input methods:
<br>1. Uploading an image file (JPG or TIFF format).
<br>2. Providing an IIIF manifest and the canvas number from an online digital archive.
<br>If the user makes an error in their input, the program will notify them about the mistake and offer the option to retry or exit. If the user chooses to continue, the step is repeated; otherwise, the program terminates gracefully.
</p>
<h3>Step three</h3>
<p class="text_main_paragraph">Step three involves converting the uploaded or provided image file into PNG format, resizing it to create a thumbnail version, and displaying the thumbnail view to the user for further interaction.</p>
<h3>Step four</h3>
<p class="text_main_paragraph">Step four involves an interactive stage where the program enables the user to select ink colors from the artwork using a cursor resembling a dropper tool (just like in Adobe programs). Here's how it works:
<br>1. The user clicks on pixels to select their desired colors.
<br>2. Each selected color is converted into a hexadecimal code and saved in a list.
<br>3. A sample of the selected color is displayed to the user for confirmation.
<br>4. If the user is satisfied, the program proceeds to ask whether they’d like to select another color or exit this stage.
<br>5. This process repeats until the user decides to end this step.
</p>
<h3>Step five</h3>
<p class="text_main_paragraph">Step five involves transforming the image based on the user's selected ink colors. Here's a summary of the process:
<br>1. The program uses the list of selected colors to identify regions of the image containing those colors, as well as colors within an 80% similarity range (e.g., variations of brown). This ensures all relevant calligraphic scripts and phrases are included.
<br>2. The program isolates the ink areas (matching the selected colors) and removes the background by masking out areas with other colors.
<br>3. The resulting image, with only the inked areas preserved, is saved as a PNG file to maintain transparency.
</p>
<h3>Step Six</h3>
<p class="text_main_paragraph">Step six involves the program comparing the processed PNG file generated in step five against the reference PNG files stored in the directory structure. Here's a breakdown:
<br>1. Directory Structure: Each calligraphic style has a specific folder under the references directory, such as Indian_Nastaliq, Timurid_Nastaliq, Safavid_Nastaliq, etc.
<br>2. Style Identification: Each folder represents a unique style, and an identifier (ID) must be assigned to each style for easy recognition.
<br>3. Future Expandability: The program should dynamically accommodate additional folders as you continue to expand the collection.
</p>
<h3>Step Seven and the last</h3>
<p class="text_main_paragraph">Step seven details how the program communicates its findings to the user:
<br>1. The program compiles a list of calligraphic styles that are similar to the artwork, including the percentage of similarity for each style. This allows the user to see how closely each style matches the artwork.
<br>2. When the user clicks on a style from the list, the program presents a thumbnail of the artwork image. The thumbnail includes visual marks highlighting the elements that the program identified as similar to the selected style.
</p>
<h3>Features:</h3>
<p>1. Input Flexibility: Supports uploading an image file or providing an IIIF manifest URL.
<br>2. Optional Size Input: Allows the user to skip size information if desired.
<br>3. Interactive Color Selection: Users can pick ink colors directly on the image thumbnail.
<br>4. Text Area Identification: Locates text areas based on selected colors.
<br>5. Morphological Comparison: Matches the selected text area with reference styles using cv2.matchTemplate.
</p>
</div>
</main>
</div>
<footer>
<p style="font-size: 12pt; color: black;">Khoshnevisi: Perso-Arabic Calligraphic Style Recognition Web-app<br>
Powered by <a href="mailto:alirafi@gmx.ch">Ali Mashhadi Rafi</a></p>
</footer>
</body>
</html>