-
Notifications
You must be signed in to change notification settings - Fork 0
/
simplify.html
712 lines (656 loc) · 41.9 KB
/
simplify.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
255
256
257
258
259
260
261
262
263
264
265
266
267
268
269
270
271
272
273
274
275
276
277
278
279
280
281
282
283
284
285
286
287
288
289
290
291
292
293
294
295
296
297
298
299
300
301
302
303
304
305
306
307
308
309
310
311
312
313
314
315
316
317
318
319
320
321
322
323
324
325
326
327
328
329
330
331
332
333
334
335
336
337
338
339
340
341
342
343
344
345
346
347
348
349
350
351
352
353
354
355
356
357
358
359
360
361
362
363
364
365
366
367
368
369
370
371
372
373
374
375
376
377
378
379
380
381
382
383
384
385
386
387
388
389
390
391
392
393
394
395
396
397
398
399
400
401
402
403
404
405
406
407
408
409
410
411
412
413
414
415
416
417
418
419
420
421
422
423
424
425
426
427
428
429
430
431
432
433
434
435
436
437
438
439
440
441
442
443
444
445
446
447
448
449
450
451
452
453
454
455
456
457
458
459
460
461
462
463
464
465
466
467
468
469
470
471
472
473
474
475
476
477
478
479
480
481
482
483
484
485
486
487
488
489
490
491
492
493
494
495
496
497
498
499
500
501
502
503
504
505
506
507
508
509
510
511
512
513
514
515
516
517
518
519
520
521
522
523
524
525
526
527
528
529
530
531
532
533
534
535
536
537
538
539
540
541
542
543
544
545
546
547
548
549
550
551
552
553
554
555
556
557
558
559
560
561
562
563
564
565
566
567
568
569
570
571
572
573
574
575
576
577
578
579
580
581
582
583
584
585
586
587
588
589
590
591
592
593
594
595
596
597
598
599
600
601
602
603
604
605
606
607
608
609
610
611
612
613
614
615
616
617
618
619
620
621
622
623
624
625
626
627
628
629
630
631
632
633
634
635
636
637
638
639
640
641
642
643
644
645
646
647
648
649
650
651
652
653
654
655
656
657
658
659
660
661
662
663
664
665
666
667
668
669
670
671
672
673
674
675
676
677
678
679
680
681
682
683
684
685
686
687
688
689
690
691
692
693
694
695
696
697
698
699
700
701
702
703
704
705
706
707
708
709
710
711
<!DOCTYPE html>
<html>
<head>
<meta charset='utf-8' >
<link rel="stylesheet" href="./simplify.css" />
<link rel="stylesheet" href="./diff.css" />
<script src="./jquery-3.5.1.min.js" > </script>
<script src="./font.js" > </script>
<script src="./drag.js" > </script>
<script src="./log.js" > </script>
<script src="./diff.js" > </script>
<script src="./drawdown.js" > </script>
<script src="./simplify.js" > </script>
<title> Simplify </title>
</head>
<body>
<header>
<table width="100%">
<tbody>
<tr>
<td> <h3 class="title" > Simplify </h3></td>
<td style="text-align: right;" >
<span data-text='Show differences' class='tooltip'> <i class='fas fa-clone' onclick="toggle( '#diff' )" > </i> </span>
<span data-text='Show event log' class='tooltip'> <i class='fas fa-list' onclick="toggle( '#log' )" > </i> </span>
<span data-text='Show model settings' class='tooltip'> <i class='fas fa-cog' onclick="toggle( '#settings' )" > </i> </span -->
<span data-text='Batch Process Files' class='tooltip'> <i class='fas fa-bolt' onclick="initBatch( '#batch' )" > </i> </span>
<span data-text='Offer help' class='tooltip'> <i class='fas fa-info' onclick="toggle( '#help' )" > </i> </span>
</td>
</tr>
</tbody>
</table>
</header>
<div id="config" > <!-- onclick='toggle( "#conf" )' ch ecked -->
<span id="config-title"> Getting Started: Configuration </span>
<span data-text='Toggle config info' class='tooltip'>
<input id='isConfiged' type='checkbox' onchange="saveContext( 'isConfiged', this.value )" >
</span> <br>
<ol id='conf'>
<li> Set up an OpenAI account (<a href='https://openai.com' target='BLANK' >OpenAi</a>) then enter key here.
<button onclick="setKey()"> Set API Key </button> </li>
<li> Next, pick a Model
<select id="model" onchange="saveContext( 'model', this.value )" >
</select> </li>
<li> Periodically, examine cost of model against current "Source Text":<br>
<table class='cost indent'>
<tr c/lass='cost' > <td> </td> <th>Tokens </th> <th>Cost($) </th> </tr>
<tr c/lass='cost' > <th> Input </th> <td id='inputTokens'> </td> <td id='inputCost'> </td> </tr>
<tr c/lass='cost' > <th> Output</th> <td id='outputTokens'></td> <td id='outputCost'></td> </tr>
<tr c/lass='cost' > <th> Total </th> <td> </td> <td id='totalCost'> </td> </tr>
</table>
</li>
<li> <span>Set Temperature to between 0 and 2.</span>
<input id="temperature" type="number" value="0.2" min="0" max="1" onchange="saveContext( 'temperature', this.value )"> </li>
<li> Set chunk size to between 250 and 10,000 <input type="range" id="chunkSize" min="250" max="10000" step="250" value="500"
onchange="saveContext( 'chunkSize', this.value )" > <span id="chunkSizeValue" > 500 </span> </li>
<li> Pick Chunk Separator
<select id="chunkSeparator" onchange="saveContext( 'chunkSeparator', this.value )" >
<option value="\n" > New line </option>
<option value="\n\r" selected > 2 New lines </option>
<option value=" " > Space </option>
<option value=". " > Period </option>
<option value="# " > # (markdown)</option>
<option value="## " > ## </option>
<option value="### " > ### </option>
<option value="--- " > Page </option>
</select>
</li>
<li> Enable marking of output chunks
<input type="checkbox" id="isMarkChunk" onchange="saveContext('isMarkChunk', this.value )" > </li>
<li> Show sizes of each buffer
<input type="checkbox" id="isShowSizes" onchange="saveContext('isShowSizes', this.value )" > </li>
<li> If all else fails: Click the Info
<i class='fas fa-info' onclick="toggle( '#help' )" > </i>
for help or <button onclick='removeLocalStorage()' >Reset App</button> </li>
</ol>
</div>
<div id="mainPage" >
<h3> Previous Prompts </h3>
<textarea id="previousPrompts" class="textBox resizable" onchange="saveContext( 'previousPrompts', this.value )" > </textarea>
<h3> Enter Repeating context <span id="repeatingContextSize" ></span> </h3>
<textarea id="repeatingContext" class="textBox resizable" onchange="saveContext( 'repeatingContext', this.value )" ></textarea> <br>
<span id=context></span> <br>
<div id="currentContextScope" >
<h3>Current Context <span id="currentContextSize" ></span> </h3>
<textarea id='currentContext' class='textBox resizable' disabled > </textarea> <br>
</div>
<h3> Enter Source Text <span id="sourceTextSize" ></span> </h3>
<textarea id="sourceText" class="textBox resizable" onchange="saveContext( 'sourceText', this.value )" style="background-color: wheat;" >
</textarea> <br>
<span id="toaster" ></span> <span id="chatError"> </span> <br>
<label for="chunkProgress"> Chunks Complete </label>
<progress id="chunkProgress" value="0" max="100"> 0% </progress>
<span id='chunksComplete'></span>
<div class="blk">
<button onclick="play()" id="play" title="Play continuously" > <i class='fas fa-play' > </i> </button>
<button onclick="pause()" id="pause" title="Pause" > <i class='fas fa-pause' > </i> </button>
<button onclick="next()" id="next" title="Next or single step" > <i class='fas fa-step-forward' > </i> </button>
<button onclick="redo()" id="redo" title="Redo previous block" > <i class='fas fa-redo' > </i> </button>
<button onclick="cancel()" id="cancel" title="Cancel this pass" > <i class='fas fa-eject' > </i> </button>
</div> <br> <br>
<div class='flxrow'>
<div class="cols blk sidebyside">
<h3> Current Chunk <span id="chunkNumber" ></span> <span id="currentChunkSize" ></span> </h3>
<textarea id="currentChunk" class="textBox resizable"
onchange="saveContext( 'currentChunk', this.value )"
onmouseup="$( '#simplifiedChunk, .sash' ).height( $( '#currentChunk' ).height() );"></textarea> <br>
</div>
<!-- div id='sash' class='sash blk dragable sashheader'> </div -->
<div class="cols blk sidebyside">
<h3> Simplified Chunk <span id="simplifiedChunkNumber" > </span> <span id="simplifiedChunkSize" ></span> </h3>
<textarea id="simplifiedChunk" class="textBox resizable"
onchange="saveContext( 'simplifiedChunk', this.value )"
onmouseup="$( '#currentChunk, .sash' ).height( $( '#simplifiedChunk' ).height() )"></textarea> <br>
</div>
</div>
<div class="blk wide clear">
<h3> Combined Simplified Text <span id="combinedSimplifiedTextSize" ></span></h3>
<textarea id="combinedSimplifiedText" class="textBox resizable" style="border: thin solid lightgrey;"
onchange="saveContext( 'combinedSimplifiedText', this.value )" ></textarea><br />
</div> <br>
<div class="blk bufferGroup clear">
<h3> Buffers
<input name='isBuffered' type='checkbox' onclick='toggle("#buffed")' checked >
</h3>
<ol id='buffed'>
<li>
<div class="buffer" id="b0">
<input type="text" class="bufferTitle" id="buffer0Title" value="" onchange="saveContext( 'buffer0Title', this.value )">
<input type="checkbox" class="bufferToggle" id="buffer0Toggle" onclick="bufferToggle( '0', this )" > <span id="buffer0Size" ></span>
<textarea class="textBox resizable" id="buffer0" onchange="saveContext( 'buffer0', this.value )"></textarea><br />
</div>
</li>
<li>
<div class="buffer" id="b1">
<input type="text" class="bufferTitle" id="buffer1Title" value="" onchange="saveContext( 'buffer1Title', this.value )">
<input type="checkbox" class="bufferToggle" id="buffer1Toggle" onclick="bufferToggle( '1', this )" > <span id="buffer1Size" ></span>
<textarea class="textBox resizable" id="buffer1" onchange="saveContext( 'buffer1', this.value )" ></textarea>
</div>
</li>
<li>
<div class="buffer" id="b2">
<input type="text" class="bufferTitle" id="buffer2Title" value="" onchange="saveContext( 'buffer2Title', this.value )">
<input type="checkbox" class="bufferToggle" id="buffer2Toggle" onclick="bufferToggle( '2', this )" > <span id="buffer2Size" ></span>
<textarea class="textBox resizable" id="buffer2" onchange="saveContext( 'buffer2', this.value )"></textarea><br />
</div>
</li>
<li>
<div class="buffer" id="b3">
<input type="text" class="bufferTitle" id="buffer3Title" value="" onchange="saveContext( 'buffer3Title', this.value )">
<input type="checkbox" class="bufferToggle" id="buffer3Toggle" onclick="bufferToggle( '3', this )" > <span id="buffer3Size" ></span>
<textarea class="textBox resizable" id="buffer3" onchange="saveContext( 'buffer3', this.value )"></textarea><br />
</div>
</li>
<li>
<div class="buffer" id="b4">
<input type="text" class="bufferTitle" id="buffer4Title" value="" onchange="saveContext( 'buffer4Title', this.value )">
<input type="checkbox" class="bufferToggle" id="buffer4Toggle" onclick="bufferToggle( '4', this )" > <span id="buffer4Size" ></span>
<textarea class="textBox resizable" id="buffer4" onchange="saveContext( 'buffer4', this.value )" ></textarea>
</div>
</li>
<li>
<div class="buffer" id="b5">
<input type="text" class="bufferTitle" id="buffer5Title" value="" onchange="saveContext( 'buffer5Title', this.value )">
<input type="checkbox" class="bufferToggle" id="buffer5Toggle" onclick="bufferToggle( '5', this )" > <span id="buffer5Size" ></span>
<textarea class="textBox resizable" id="buffer5" onchange="saveContext( 'buffer5', this.value )"></textarea><br />
</div>
</li>
<li>
<div class="buffer" id="b6">
<input type="text" class="bufferTitle" id="buffer6Title" value="" onchange="saveContext( 'buffer6Title', this.value )">
<input type="checkbox" class="bufferToggle" id="buffer6Toggle" onclick="bufferToggle( '6', this )" > <span id="buffer6Size" ></span>
<textarea class="textBox resizable" id="buffer6" onchange="saveContext( 'buffer6', this.value )"></textarea><br />
</div>
</li>
<li>
<div class="buffer" id="b7">
<input type="text" class="bufferTitle" id="buffer7Title" value="" onchange="saveContext( 'buffer7Title', this.value )">
<input type="checkbox" class="bufferToggle" id="buffer7Toggle" onclick="bufferToggle( '7', this )" > <span id="buffer7Size" ></span>
<textarea class="textBox resizable" id="buffer7" onchange="saveContext( 'buffer7', this.value )"></textarea><br />
</div>
</li>
<li>
<div class="buffer" id="b8">
<input type="text" class="bufferTitle" id="buffer8Title" value="" onchange="saveContext( 'buffer8Title', this.value )">
<input type="checkbox" class="bufferToggle" id="buffer8Toggle" onclick="bufferToggle( '8', this )" > <span id="buffer8Size" ></span>
<textarea class="textBox resizable" id="buffer8" onchange="saveContext( 'buffer8', this.value )"></textarea><br />
</div>
</li>
<li>
<div class="buffer" id="b9">
<input type="text" class="bufferTitle" id="buffer9Title" value="" onchange="saveContext( 'buffer9Title', this.value )">
<input type="checkbox" class="bufferToggle" id="buffer9Toggle" onclick="bufferToggle( '9', this )" > <span id="buffer9Size" ></span>
<textarea class="textBox resizable" id="buffer9" onchange="saveContext( 'buffer9', this.value )"></textarea><br />
</div>
</li>
</ol>
<br>
</div>
</div>
<div id="log" class="logPage dragable" >
<table width="100%">
<tbody>
<tr class="hdr" >
<th> <h3 id="logheader" class="title" > Simplify Log <span id='logTime'> </span> </h3> </th>
<th class='actions' >
<span data-text='Keep scrolling to bottom' class='botm tooltip' >
<input type='checkbox' name='bottomFeeder' onclick='setBottom();' >
<i class='fa fa-fast-forward btn-icon'> </i>
</span>
<span data-text='Clear this log session' class='tooltip'> <i class='fa fa-trash' onclick='clearLog();' > </i> </span>
<span data-text='Close this window' class='tooltip'> <i class='fas fa-window-close' onclick="toggle( '#log' )" > </i> </span>
</th>
</tr>
</tbody>
</table>
<div class='logBody'>
<table>
<thead sticky >
<tr>
<th class='stk' width=175 >Time Stamp</th>
<th class='stk'>Message</th>
<th class='stk'>Status</th>
</tr>
</thead>
<tbody id='eventLogBody'>
</tbody>
</table>
</div>
</div>
<div id="batch" class="batchPage dragable" >
<table width="100%">
<tbody>
<tr class="hdr" >
<th> <h3 id="batchheader" class="title" > Batch Process Whole Files </h3> </th>
<th class='actions' >
<span data-text='Close this window' class='tooltip'>
<i class='fas fa-window-close' onclick="toggle( '#batch' )" > </i> </span>
</th>
</tr>
</tbody>
</table>
<br>
<div class='batchBody'>
<label class="custom-file-upload">
<input type="file"
onchange="loadFile( this.files )"
accept='.md, .txt, .csv, .htm, .html'
multiple ><span id='fileName' />
<i class="fa fa-file"></i> Select Files
</label> <br>
<textarea id='textFile' rows='5' ></textarea><br>
Pattern: <textarea id='pattern' rows='1' >-sim</textarea> <br>
<span id="toasterAll" ></span> <span id="chatErrorAll"> </span> <br>
<label for="fileProgress"> Files Complete </label>
<progress id="fileProgress" value="0" max="100"> 0% </progress> <span id='filesComplete' ></span>
<div class="blk">
<button onclick="playAll()" id="playAll" title="Play continuously" > <i class='fas fa-play' > </i> </button>
<button onclick="pauseAll()" id="pause" title="Pause" > <i class='fas fa-pause' > </i> </button>
<button onclick="nextAll()" id="next" title="Next or single step" > <i class='fas fa-step-forward' > </i> </button>
<button onclick="cancelAll()" id="cancel" title="Cancel this pass" > <i class='fas fa-eject' > </i> </button>
</div>
</div>
</div>
<div id="settings" class="settingsPage dragable" >
<table id='settingsTable' width="100%" >
<tbody>
<tr class="hdr" >
<th> <h3 id="settingsheader" class="title" > Manage Models </h3> </th>
<th class='actions' >
<!-- button onclick='scrapeModel()' > Update Model </button -->
<i class='fas fa-window-close' onclick="toggle( '#settings' )" ></i>
</th>
</tr>
</tbody>
</table>
<div class='settingsBody'>
<table>
<thead sticky >
<tr>
<th class='stk' > Model Name </th>
<th class='stk' > Target </th>
<th class='stk' > Input Cost </th>
<th class='stk' > Output Cost </th>
</tr>
</thead>
<tbody id='modelSettingsBody' contentEditable >
</tbody>
</table>
</div>
</div -->
<div id="diff" class="diffPage dragable" >
<table width="100%" >
<tbody>
<tr class='hdr'>
<th> <h3 id="diffheader" class="title" > Difference between <em id='orgBufferSelection' ></em> and
<em id='changedBufferSelection' ></em> Buffers </h3> </th>
<th class='actions' >
<!-- span data-text='Generate difference view' class='tooltip diff' > <button onclick='diffBuffers()'> Diff </button> </span -->
<span data-text='Close this window' class='tooltip' > <i class='fas fa-window-close' onclick="toggle( '#diff' )" ></i> </span>
</th>
</tr>
</body>
</table>
<div class='diffBody'>
<div class="flxrow">
<div class="cols textBox diffs">
<span>Original Document
<select id='orgBuffer' style='width: 10em;' onchange='setCopy( "orgBuffer" )'>
<option value='sourceText' > Source Text </option>
<option value='currentChunk' selected > Current Chunk </option>
<option value='simplifiedChunk' > Simplified Chunk </option>
<option value='combinedSimplifiedText' > Combined Text </option>
<option value='buffer0' > Buffer 1 </option>
<option value='buffer1' > Buffer 2 </option>
<option value='buffer2' > Buffer 3 </option>
<option value='buffer3' > Buffer 4 </option>
<option value='buffer4' > Buffer 5 </option>
<option value='buffer5' > Buffer 6 </option>
<option value='buffer6' > Buffer 7 </option>
<option value='buffer7' > Buffer 8 </option>
<option value='buffer8' > Buffer 9 </option>
<option value='buffer9' > Buffer 10 </option>
</select>
<span data-text='Generate difference view' class='tooltip diff' > <button onclick='diffBuffers()'> Diff </button> </span>
<hr>
</span>
<div class="card system-generated" id="outputNew"></div>
</div>
<!-- div class="col gutter"></div -->
<div class="cols textBox diffs">
<span> Document with changes
<select id='changedBuffer' style='width: 10em;' onchange='setCopy( "changedBuffer" )' >
<option value='sourceText' > Source Text </option>
<option value='currentChunk' > Current Chunk </option>
<option value='simplifiedChunk' > Simplified Chunk </option>
<option value='combinedSimplifiedText'
selected > Combined Text </option>
<option value='buffer0' > Buffer 1 </option>
<option value='buffer1' > Buffer 2 </option>
<option value='buffer2' > Buffer 3 </option>
<option value='buffer3' > Buffer 4 </option>
<option value='buffer4' > Buffer 5 </option>
<option value='buffer5' > Buffer 6 </option>
<option value='buffer6' > Buffer 7 </option>
<option value='buffer7' > Buffer 8 </option>
<option value='buffer8' > Buffer 9 </option>
<option value='buffer9' > Buffer 10 </option>
</select>
<hr style='margin: 19px 0 10px 0;' >
</span>
<div class="card current-document" id="output"></div>
</div>
</div>
</div>
</div>
<div id="help" class="helpPage dragable" >
<table width="100%" >
<tbody>
<tr class='hdr'>
<th> <h3 id="helpheader" class="title" > Simplify Information </h3> </th>
<th class='actions' >
<span data-text='Close this window' class='tooltip'> <i class='fas fa-window-close' onclick="toggle( '#help' )" ></i> </span>
</th>
</tr>
</body>
</table>
<div class='helpBody'>
<h4> Purpose </h4>
<p> The purpose of the "Simplify" application is to produce transformed documents relieving
editors from rework of documents with complicated changes. </p>
<h4> Methodology </h4>
<p> Currently, inexpensive Large Language Models (LLM) do not handle the processing of large documents well.
This is a moving target, as models change frequently.
To mitigate this, source documents to be transformed, are broken into pieces called "Chunks".
You set the chunk size in words.
You also set a separator that breaks chunks at convenient points. An actual chunk is (chunk_size - words_to_last_separator.)
Having established a "Prompt" the application attaches the prompt to each chunk and sends it to chatGpt.
Long prompts can be separated by "---" and each part will be processed as a separate prompt to each chunk.
The output of one simplification becomes the input to the next.
Further, you can batch process local files and the same process will be applied.
whole documents can be processed or just one chunk at a time as you refine your prompts.
There is no restriction on the prompts you can apply.
</p>
<h4> Popup Dialogs </h4>
<p>
<ul>
<li> Clicking the buttons on the main header, will popup "modeless" dialog boxes that remain until you close them or refresh the application. </li>
<li> They can be moved around the application window by dragging the title. </li>
<li> Each dialog can be resized by dragging the bottom right hand corner of the dialog. </li>
<li> Scroll bars will be shown as necessary. </li>
<li> All dialogs may be closed by clicking the <i class='fas fa-window-close' > </i> button at the top right hand corner of the dialog, or by clicking the header button again. </li>
</ul>
</p>
<p> The following are features and deficiencies of the current POC </p>
<ul>
<li>
<h4> Features </h4>
<ol>
<li> Save previous Prompts. </li>
<li> Split doc into specified max word size Chunks 500 - 3000. </li>
<li> Separate chunks on new lines, spaces 1-3 level heading. </li>
<li> Save multiple buffers of intermediate results. </li>
<li> Mark chunk boundaries on Output. </li>
<li> Process complete files. </li>
<li> Enable single step. </li>
<li> Manage buffers to retain intermediate results. </li>
<li> Allows selection of model from API plan. </li>
<li> Supports redo Chunk. </li>
<li> Supports "diffing" 2 buffers. </li>
<li> Batch process multiple local files in a folder. </li>
<li> Persist size and position of Dialogs. </li>
</ol>
</li>
<li>
<h4> TBDs </h4>
<ol>
<li> Use filter criteria to Traverse a file system for content to apply a prompt or set of prompts (Content COP.) </li>
<li> Use a template to reformat content (Content COP.) </li>
<li> Backup to previous context. </li>
<li> Process notion [doc]s folder. </li>
<li> Save to [doc]-simplified.md. </li>
<li> Separate on page break. </li>
<li> Convert to Claude free version. </li>
<li> Add pipeline section like DSPy. </li>
<li> Track total session cost </li>
<li> Track cost todate </li>
<li> Support cost tracking reset (trip meter) </li>
<li> Scrape model cost from openApi </li>
</ol>
</li>
</ul>
<p>To use this application: </p>
<ul>
<li> <b> Configure the application </b>
<ol>
<li> Activate the application by getting an API Key. This involves setting up an OpenAI API Account.
There are two types of accounts. This app uses the API to access chatGpt.
<ol>
<li> Create openAi account
<ol>
<li> Navigate to `openAi.com` </li>
<li> Click Products </li>
<li> Click API Login </li>
<li> Follow instructions to create an account </li>
</ol>
</li>
<li> Get API key (not free)
<ol>
<li> Navigate to `openAi.com` </li>
<li> Click Products </li>
<li> Click API Login </li>
<li> Click API </li>
<li> Click Dashboard </li>
<li> Click Lock <i class='fas fa-lock' > </i> icon </li>
<li> Click Create a new Secret Key </li>
<li> Copy key to someplace safe </li>
<li> Click Set API key </li>
<li> Paste key in dialog </li>
</ol>
</li>
<li> Click "Set API Key" in Simplify App. </li>
<li> Wait for monthly statement. </li>
<li> In the event that you begin being denied access (see troubleshooting),
you may have to prepay to "charge" your account. </li>
</ol>
</li>
<li> Select an OpenAi model to use.
<ul>
<li> There are various models for different purposes. </li>
<li> The default of gpt-3.5-turbo has been tested with this app. </li>
<li> The list is constructed from what is available on your plan. </li>
<li> We generally recommend that developers use either GPT-4o or GPT-3.5 Turbo,
depending on the complexity of your tasks.
GPT-4o generally performs better on a wide range of tasks,
while GPT-3.5 Turbo is fast and inexpensive for simpler tasks. </li>
<li> Models known to not be currently suitable are suppressed in the dropdown list. </li>
<li> If you do not see your favorite model (or any) then you have to enable models in your openAi account.
<ul>
<li> Login to API Account </li>
<li> Click Settings gear <i class='fas fa-cog' > </i> icon </li>
<li> Click Project > Limits </li>
<li> Click Edit </li>
<li> Click Allow </li>
<li> Select models of interest. Here are some to consider:
<ul>
<li> gpt-3.5-turbo </li>
<li> gpt-4 </li>
<li> gpt-4o </li>
<li> gpt-4o-mini-2024-07-18 </li>
</ul>
</li>
<li> Click Save </li>
<li> Click Refresh <i class='fa fa-redo' > </i> icon on the browser. </li>
</ul>
</li>
</ul>
</li>
<li> Periodically, examine cost of input text. this changes per model and size of text to process. </li>
<li> Select a temperature for responses.
The value range is 0-2.
Lower values indicating greater determinism and higher values indicating more randomness.
When the temperature is set to a lower value, the probability distribution of tokens becomes narrower and taller.
Higher values means the results may be more creative and less reproducible. </li>
<li> Set the chunk size. To determine the actual chunk size the application will first take the "chunk size" number of words
then back up to previous chunk separator. </li>
<li> Select a chunk separator.
If the separator does not exist in a particular chunk then the entire chunk is used. </li>
<li> At any time you can check the mark Output Chunks to have --- n --- separate each chunk in the output. </li>
<li> Indicate the size of each buffer as simplification progresses. </li>
<li> When all else fails, Reset the app. Restarting the app uses cached data in browsers localstorage.
If this should get corrupt, then this will help to flush out any corrupted data (along with all the good data.)
This function does not remove your API key.
Before resetting, save any buffers or configuration settings in a scratch file so that you can easily restore them. </li>
</ol>
</li>
<li> <b> Prepare Text </b></li>
<ol>
<li> Open a document to be processed.</li>
<li> First copy the source text into one of the buffers and call it something like "original". </li>
<li> Copy contents to paste buffer (CTRL-A CTRL-C). </li>
<li> Here are some sample prompts you may try:
<ul>
<li> Please simplify the following text without comment. </li>
<li> Reword the following text so that an English as a second language 6th grader, can understand it. Retain all tables, titles and headers. </li>
<li> Convert the following text to Hindi.</li>
<li> Reduce this text to 5 bullet points.</li>
</ul>
</li>
<li> Paste in Source text control (CTRL-V).
You can directly type into source control or edit what you paste.
You can resize the control by dragging from the lower right hand corner. </li>
<li> You can copy any prompt from the Previous Prompts control and paste it into the Repeating Context Control.
You can also amend or write your own.</li>
<li> If you separate repeating prompts with "---" then they will be taken in turn to perform sequential transformations of text.
The output of one transformation becomes the input to the next. </li>
<li> The "Combined Simplified Text is the result of all transformations. </li>
<li></li>
</ol>
<li> <b> Simplify </b></li>
<ol>
<li> Click one of the modes: "Play" <i class='fas fa-play' > </i>, or
"Next" <i class='fas fa-step-forward' > </i>
You will see the source broken into chunks based on the chunk size control.
This takes the number of words then backs up to previous chunk separator. </li>
<li> As chunks are split from source, they are placed in Current Chunk control with the number of the current chunk. </li>
<li> The application will send the chunk to chap-gpt for processing. </li>
<li> Upon completion of the chunk, the application will place the processed text into the "Simplified Chunk Control. </li>
<li> Depending on the mode one of the following will happen: </li>
<ul>
<li> If you had pressed "Play" <i class='fas fa-play' > </i> then the Simplified chunk will be added to the end of the
"Combined Simplified Text."
Then the application will process the next chunk until completion or, </li>
<ul>
<li> You click pause <i class='fas fa-pause' > </i> and the application will enter single step mode at end of current chunk. </li>
</ul>
<li> If you then click "Next"<i class='fas fa-step-forward' > </i> the application will process one chunk.
It will not place result in Combined control until you press next again. This allows reprocessing a chunk. </li>
<li> If you press redo <i class='fas fa-redo' > </i> instead of Next,
the application will reprocess the same chunk presumably after you tweaked the original or the prompt.</li>
</ul>
</ol>
<li> <b> Comparison </b>
<ol>
<li> This feature allows you to compare any 2 buffers. Use this to see what is different from one prompt to another </li>
<li> To compare two buffers click the <i class='fas fa-clone' > </i> to display the Diff dialog. </li>
<li> Select two buffers to compare. </li>
<li> Click the <button>Diff</button> button. </li>
<li> You will see in the left window the unchanged text. </li>
<li> You will see in the right window the changes made to the text. Added text is highlighted in green.
Removed text is highlighted in red with an over strike through the text. </li>
</ol>
</li>
<li> <b> Refine </b>
<ol>
<li> You can copy the simplified or combined text back into the source text and select another prompt.
For example you could refine the simplification like changing tone or translate to another language. </li>
<li> You can cut parts of the buffered original and reprocess it. </li>
</ol>
</li>
<li> <b> Harvest </b>
<ol>
<li> If you especially like one of your own prompts, you can paste it into the Previous Prompts control for later reuse. </li>
<li> Cut the Target control and paste it into a new file named similar to original. </li>
</ol>
</li>
<li> <b> Persistence </b>
<ul>
<li> The application attempts to save your text in your local storage any time you edit something.
If you restart the app it will recall it from local storage.
Don't trust it for permanent storage as browsers may reclaim space by removing your local storage. </li>
</ul>
</li>
<li> <b> Batch Processing </b>
<p> Once you arrive at a good prompt that will work on a set of files, you can use the batch processing feature to process them in succession. </p>
<ol>
<li> Click the <i class='fas fa-bolt' onclick="toggle( '#batch' )" ></i> to configure the process.
<ol>
<li> Click Choose files to navigate to a place where source files reside. </li>
<li> Drag select one or more files. </li>
<li> Click "Open". </li>
<li> Enter an optional "Pattern" to add just before the file extension in case source files are in downloads folder. </li>
</ol> </li>
<li> Click the <i class='fas fa-play' > </i> button to begin processing files listed above. </li>
<li> Open Log <i class='fas fa-list' onclick="toggle( '#log' )" > </i> and click Fast Forward <i class='fa fa-fast-forward btn-icon'></i> to watch document processing progress. </li>
<li> Wait for "Processing Complete" message in Batch dialog box. </li>
<li> Inspect files in downloads folder. </li>
<li> Move them to final destination. </li>
<li> In the same session you can change the prompt and reprocess the same files if a change is necessary. </li>
</ol>
</li>
<li> <b> Cost </b>
<ul>
<li> The OpenAI Chatbot API is not free.
It is generally a few cents per document depending on how many times you reprocess it with different prompts.
You can open your account and click on Usage to see your monthly bill.
Once you get acceptable results you should save the prompt for future use to minimize cost. </li>
</ul>
</li>
<li> <b> Troubleshooting </b>
<p> Sometimes things don't go as you plan. This section attempts to help when things go wrong. </p>
<ul>
<li> There is a status indicator below the "Enter Source Text" area. This will flash problems as they occur or indicate the current state of the app. Sometimes the information "flies by" too quickly. </li>
<li> The log <i class='fa fa-list'></i> captures most activities during a session. You can display this to see more of what has happened. </li>
<li> You can clear the log by clicking the trash can <i class='fa fa-trash'></i> icon. </li>
<li> You can make the log display updates in real time by checking the box before the fast forward <i class='fa fa-fast-forward'></i> can icon. </li>
<li> Some response codes you may see:
<table>
<tbody>
<tr><td> 200</td><td> Success </td></tr>
<tr><td> 400</td><td> Invalid request (invalid api key, bad model) </td></tr>
<tr><td> 401</td><td> Unauthorized error, which indicates that
authentication is required and has failed
or has not yet been provided </td></tr>
<tr><td> 403</td><td> Forbidden error specifically indicates that
the request is understood but the server is
refusing to fulfill it. Could be restricted
by permissions,IP, rate limiting. </td></tr>
<tr><td> 429</td><td> Too many requests, credit expired before
12/22 ($18) tokens expired ($5), free
account time (3mo) expired, multiple
accounts on same phone number </td></tr>
<tr><td> 500</td><td> System Error. Not your fault. Try again later. </td></tr>
<tr><td> 503</td><td> System Overloaded. Not your fault. Try again later. </td></tr>
</tbody>
</table>
</li>
<li> In general, 4XX errors mean that an API key is not recognized or that it cannot bill the account. </li>
<li> 5XX errors are problems with the server being able to process your request. </li>
<li> Finally, contact the training department at unfoldingWord for further support information. </li>
</ul>
</li>
</ul>
</div>
</div>
</body>
</html>