Skip to content

Commit d75a482

Browse files
RajWorkingRajWorking
committed
[ADD] Find and Replace Functionality
1 parent b39f78f commit d75a482

7 files changed

Lines changed: 4890 additions & 391 deletions

File tree

‎css/styles-css.css‎

Lines changed: 5 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,6 @@
11
:root {
22
--primary: #21a094;
3+
--selected-find: #ffe600;
34
--selected-blue: #d2e4f9;
45
--selected-red: #fecbcf;
56
--selected-yellow: #fbeed1;
@@ -270,6 +271,10 @@ body, html {
270271
color: var(--tag-color);
271272
}
272273

274+
.find {
275+
background-color: var(--selected-find);
276+
}
277+
273278
.selected-1 {
274279
background-color: var(--selected-orange);
275280
}

‎index.html‎

Lines changed: 144 additions & 95 deletions
Original file line numberDiff line numberDiff line change
@@ -58,8 +58,9 @@
5858
<!-- <script src="/jquery/jquery.js"></script> -->
5959

6060
<script src="javascript/dark-mode.js"></script>
61-
62-
<script async defer data-website-id="d0285a8c-9fcc-4ef5-8519-9bda0e72e292" src="https://umami-production-2161.up.railway.app/umami.js"></script>
61+
62+
<script async defer data-website-id="d0285a8c-9fcc-4ef5-8519-9bda0e72e292"
63+
src="https://umami-production-2161.up.railway.app/umami.js"></script>
6364

6465
</head>
6566

@@ -88,16 +89,17 @@
8889
</div>
8990

9091
<div class="navbar-end">
92+
9193
<div class="navbar-item">
9294

9395
<div class="field has-addons">
9496

9597
<!-- user audio input -->
9698

97-
<div class="dropdown is-hoverable">
99+
<div class="dropdown">
98100
<div class="dropdown-trigger">
99101
<button class="button" aria-haspopup="true" aria-controls="dropdown-menu4">
100-
<span>Load audio</span>
102+
<span>Find and Replace</span>
101103
<span class="icon is-small">
102104
<i class="fas fa-angle-down" aria-hidden="true"></i>
103105
</span>
@@ -106,39 +108,84 @@
106108
<div class="dropdown-menu" id="dropdown-menu4" role="menu">
107109
<div class="dropdown-content">
108110
<div class="dropdown-item">
109-
<!-- for file api input -->
110-
<div class="file has-name is-small is-primary">
111-
<label class="file-label">
112-
<input id="user-audio-file" class="file-input" type="file" name="resume">
113-
<span class="file-cta">
114-
<span class="file-icon">
115-
<i class="fas fa-upload"></i>
116-
</span>
117-
<span class="file-label">
118-
Load audio…
119-
</span>
120-
</span>
121-
<span id="audio-name" class="file-name">
111+
<input class="input is-small" type="text" oninput="findText()" placeholder="Old text"
112+
id="searchTerm">
113+
</input>
114+
</div>
122115

123-
demo_hi.mp3
116+
<div class="dropdown-item">
117+
<input class="input is-small" type="text" placeholder="New text" id="replaceTerm">
118+
</input>
119+
</div>
124120

125-
</span>
121+
<div class="dropdown-item">
122+
<div style="display: flex;">
123+
<div style="margin: 5px;">
124+
<button class="button is-small is-primary" id="replaceButton" onclick="findAndReplace()">Replace</button>
125+
</div>
126126

127-
</label>
127+
<div style="margin: 5px;">
128+
<button class="button is-small is-primary" id="replaceAllButton" onclick="findAndReplace(true)">Replace All</button>
129+
</div>
128130
</div>
131+
</div>
132+
</div>
133+
</div>
134+
</div>
135+
</div>
136+
</div>
137+
</div>
138+
<div class="navbar-item">
139+
140+
<div class="field has-addons">
129141

130-
<!--
142+
<!-- user audio input -->
143+
144+
<div class="dropdown is-hoverable">
145+
<div class="dropdown-trigger">
146+
<button class="button" aria-haspopup="true" aria-controls="dropdown-menu4">
147+
<span>Load audio</span>
148+
<span class="icon is-small">
149+
<i class="fas fa-angle-down" aria-hidden="true"></i>
150+
</span>
151+
</button>
152+
</div>
153+
<div class="dropdown-menu" id="dropdown-menu4" role="menu">
154+
<div class="dropdown-content">
155+
<div class="dropdown-item">
156+
<!-- for file api input -->
157+
<div class="file has-name is-small is-primary">
158+
<label class="file-label">
159+
<input id="user-audio-file" class="file-input" type="file" name="resume">
160+
<span class="file-cta">
161+
<span class="file-icon">
162+
<i class="fas fa-upload"></i>
163+
</span>
164+
<span class="file-label">
165+
Load audio…
166+
</span>
167+
</span>
168+
<span id="audio-name" class="file-name">
169+
170+
demo_hi.mp3
171+
172+
</span>
173+
174+
</label>
175+
</div>
176+
177+
<!--
131178
132179
<div class="select is-small is-fullwidth"> -->
133-
<!-- <div class="is-small"> -->
134-
<!-- <select name="country" id="audioUrl">
180+
<!-- <div class="is-small"> -->
181+
<!-- <select name="country" id="audioUrl">
135182
136183
</select> -->
137-
<!-- <input type="text" class="input is-small" id="audioUrl" placeholder="Audio url" value="audio.mp3">
184+
<!-- <input type="text" class="input is-small" id="audioUrl" placeholder="Audio url" value="audio.mp3">
138185
139186
140187
</div> -->
141-
<!--
188+
<!--
142189
<div class="control">
143190
<p class="control">
144191
<input type="text" class="input" id="audioUrl" placeholder="Enter audio filename" value="audio.mp3">
@@ -147,65 +194,65 @@
147194
<button onclick="getAudioUrl()" class="button is-small is-primary">Load</button>
148195
</p>
149196
</div> -->
150-
151-
<div class="dropdown-item">
152-
<div class="field has-addons navbar-item">
153-
<div class="control">
154-
<input class="input is-small" type="text" placeholder="Audio url" id="audioUrll">
155-
</input>
197+
198+
<div class="dropdown-item">
199+
<div class="field has-addons navbar-item">
200+
<div class="control">
201+
<input class="input is-small" type="text" placeholder="Audio url" id="audioUrll">
202+
</input>
203+
</div>
204+
<p class="control">
205+
<button class="button is-small is-primary disabled" onclick="getAudioUrl()">Load</button>
206+
</p>
156207
</div>
157-
<p class="control">
158-
<button class="button is-small is-primary disabled" onclick="getAudioUrl()">Load</button>
159-
</p>
160208
</div>
161209
</div>
162210
</div>
163211
</div>
164212
</div>
165-
</div>
166-
</div>
167213
</div>
214+
</div>
168215

169216

170217

171-
<div class="navbar-item">
172-
<div class="field has-addons navbar-item">
218+
<div class="navbar-item">
219+
<div class="field has-addons navbar-item">
173220

174-
<div class="dropdown is-hoverable">
175-
<div class="dropdown-trigger">
176-
<button class="button" aria-haspopup="true" aria-controls="dropdown-menu4">
177-
<span>Load Transcript</span>
178-
<span class="icon is-small">
179-
<i class="fas fa-angle-down" aria-hidden="true"></i>
180-
</span>
181-
</button>
182-
</div>
183-
<div class="dropdown-menu" id="dropdown-menu4" role="menu">
184-
<div class="dropdown-content">
185-
<div class="dropdown-item">
186-
<!-- for file api json input -->
187-
<div class="file has-name is-small is-primary">
188-
<label class="file-label">
189-
<input id="user-json-file" class="file-input" type="file" name="resume">
190-
<span class="file-cta">
191-
<span class="file-icon">
192-
<i class="fas fa-upload"></i>
193-
</span>
194-
<span class="file-label">
195-
Load json…
196-
</span>
197-
</span>
198-
<span id="json-name" class="file-name">
199-
revai-short.json
221+
<div class="dropdown is-hoverable">
222+
<div class="dropdown-trigger">
223+
<button class="button" aria-haspopup="true" aria-controls="dropdown-menu4">
224+
<span>Load Transcript</span>
225+
<span class="icon is-small">
226+
<i class="fas fa-angle-down" aria-hidden="true"></i>
200227
</span>
201-
</label>
228+
</button>
202229
</div>
230+
<div class="dropdown-menu" id="dropdown-menu4" role="menu">
231+
<div class="dropdown-content">
232+
<div class="dropdown-item">
233+
<!-- for file api json input -->
234+
<div class="file has-name is-small is-primary">
235+
<label class="file-label">
236+
<input id="user-json-file" class="file-input" type="file" name="resume">
237+
<span class="file-cta">
238+
<span class="file-icon">
239+
<i class="fas fa-upload"></i>
240+
</span>
241+
<span class="file-label">
242+
Load json…
243+
</span>
244+
</span>
245+
<span id="json-name" class="file-name">
246+
revai-short.json
247+
</span>
248+
</label>
249+
</div>
203250

204251

205-
206-
<div class="dropdown-item">
207-
208-
<!-- Load json from url -->
252+
253+
<div class="dropdown-item">
254+
255+
<!-- Load json from url -->
209256
<div class="field has-addons navbar-item">
210257
<div class="control">
211258
<input class="input is-small" type="text" placeholder="Json url" id="jsonUrll">
@@ -214,32 +261,33 @@
214261
<p class="control">
215262
<button class="button is-small is-primary" onclick="getJSONFromUrl()">Load</button>
216263
</p>
217-
264+
218265
</div>
219266

220267

221-
</div>
222-
<div class="dropdown-item">
268+
</div>
269+
<div class="dropdown-item">
223270

224-
<p>Supported json formats include AWS Transcribe, Mozilla DeepSpeech and Rev.ai.</p>
225-
<p>JSONs loaded from a url will not work unless Cross-Origin Resource Sharing (CORS) have been <a href="https://developer.mozilla.org/en-US/docs/Web/HTTP/CORS">configured</a>.</p>
271+
<p>Supported json formats include AWS Transcribe, Mozilla DeepSpeech and Rev.ai.</p>
272+
<p>JSONs loaded from a url will not work unless Cross-Origin Resource Sharing (CORS) have been <a
273+
href="https://developer.mozilla.org/en-US/docs/Web/HTTP/CORS">configured</a>.</p>
226274

275+
</div>
227276
</div>
228277
</div>
229278
</div>
230279
</div>
231-
</div>
232280

233-
234281

235-
<!-- <p class="control">
282+
283+
<!-- <p class="control">
236284
<input type="text" class="input" id="user-filename" placeholder="Enter json filename"
237285
value="deepspeech.json">
238286
</p> -->
239287

240288

241289

242-
<!-- <div class="control">
290+
<!-- <div class="control">
243291
<div class="select is-small is-fullwidth">
244292
<select name="country" id="user-filename">
245293
</select>
@@ -248,25 +296,25 @@
248296
<p class="control">
249297
<button onclick="displayTranscript()" class="button is-small is-primary">Load</button>
250298
</p> -->
251-
</div>
252299
</div>
300+
</div>
253301

254-
<div class="navbar-item">
255-
<div class="field">
256-
<button class="button is-small is-primary" onclick="clearTranscript()">Clear transcript</button>
257-
</div>
302+
<div class="navbar-item">
303+
<div class="field">
304+
<button class="button is-small is-primary" onclick="clearTranscript()">Clear transcript</button>
258305
</div>
259-
<div class="navbar-item">
260-
<!-- <button id="modal-button" class="button is-small is-primary is-large modal-button" data-target="modal" aria-haspopup="true" onclick="modal()">Launch example modal</button> -->
306+
</div>
307+
<div class="navbar-item">
308+
<!-- <button id="modal-button" class="button is-small is-primary is-large modal-button" data-target="modal" aria-haspopup="true" onclick="modal()">Launch example modal</button> -->
261309

262-
<a class="navbar-item" href="https://github.com/smlum/scription" target="_blank">
263-
About &nbsp;
264-
<i class="fab fa-github fa-lg"></i>
265-
</a>
310+
<a class="navbar-item" href="https://github.com/smlum/scription" target="_blank">
311+
About &nbsp;
312+
<i class="fab fa-github fa-lg"></i>
313+
</a>
266314

267-
</div>
268315
</div>
269316
</div>
317+
</div>
270318
</nav>
271319

272320

@@ -371,7 +419,7 @@
371419

372420
<section id="content" contenteditable="true">
373421
<p class="content" id="para-0" data-time="0.34" data-tc="0:00"><span class="unread" data-m="0.34"
374-
data-d="0">spk_1 </span><span class="timecode">[0:00] </span> <span data-m="340" data-d="600"
422+
data-d="0">spk_1</span> <span class="timecode">[0:00]</span> <span data-m="340" data-d="600"
375423
data-confidence="1.0" class="">transcription</span> <span data-m="940" data-d="210"
376424
data-confidence="0.933" class="low-confidence">body</span> <span data-m="1150" data-d="340"
377425
data-confidence="0.986" class="">combines</span> <span data-m="1490" data-d="80"
@@ -404,8 +452,9 @@
404452
data-confidence="1.0" class="">extract</span> <span data-m="12840" data-d="380"
405453
data-confidence="1.0" class="">useful</span> <span data-m="13220" data-d="1520"
406454
data-confidence="1.0" class="">information</span>. <br></p>
407-
<p class="content" data-time="0.34" data-tc="0:00"><span data-m="14740" data-d="100"
408-
data-confidence="1.0" class="">spk_1 [0:14] The</span> <span data-m="14840" data-d="950"
455+
<p class="content" data-time="0.34" data-tc="0:00"><span class="unread" data-m="0.34"
456+
data-d="0">spk_1</span> <span class="timecode">[0:14]</span> <span data-m="14740" data-d="100"
457+
data-confidence="1.0" class="">The</span> <span data-m="14840" data-d="950"
409458
data-confidence="1.0" class="">objective</span> <span data-m="15790" data-d="150"
410459
data-confidence="1.0" class="">is</span> <span data-m="15940" data-d="80"
411460
data-confidence="1.0">to</span> <span data-m="16020" data-d="190" data-confidence="1.0"
@@ -422,7 +471,7 @@
422471
class="">more</span> <span data-m="19790" data-d="200" data-confidence="1.0">enjoyable</span>.
423472
</p>
424473
<p class="content" id="para-1" data-time="19.79" data-tc="0:20"><span class="unread"
425-
data-m="19.79" data-d="0">spk_1 </span><span class="timecode">[0:20] </span></p>
474+
data-m="19.79" data-d="0">spk_1</span> <span class="timecode">[0:20] </span></p>
426475
</section>
427476

428477
</article>
@@ -753,4 +802,4 @@ <h2>Loading transcript</h2>
753802

754803
</body>
755804

756-
</html>
805+
</html>

0 commit comments

Comments
 (0)