-
Notifications
You must be signed in to change notification settings - Fork 0
/
index.html
785 lines (676 loc) · 49.7 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
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
712
713
714
715
716
717
718
719
720
721
722
723
724
725
726
727
728
729
730
731
732
733
734
735
736
737
738
739
740
741
742
743
744
745
746
747
748
749
750
751
752
753
754
755
756
757
758
759
760
761
762
763
764
765
766
767
768
769
770
771
772
773
774
775
776
777
778
779
780
781
782
783
784
785
<!DOCTYPE html>
<HTML xmlns="http://www.w3.org/1999/xhtml"
xmlns:og="http://ogp.me/ns#"
xmlns:fb="http://www.facebook.com/2008/fbml">
<head>
<title>Find My Cite (Beta)</title>
<meta http-equiv="Content-type" content="text/html;charset=UTF-8"/>
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0" />
<meta name="apple-mobile-web-app-capable" content="no" />
<meta property="og:type" content="website"/>
<meta property="og:title" content="Find My Cite"/>
<meta property="og:description" content="Are you a Zotero user? Do you ever wish you could search your libraries by idea not keywords? What about the ability to ask questions of your texts? Then this page is for you. Download information from one of your group libraries and interact with it using a number of NLP tools."/>
<meta property="og:image" content="images/thefuture.png"/>
<meta name="twitter:card" content="summary_large_image">
<meta name="twitter:site" content="@Colarusso">
<meta name="twitter:creator" content="@Colarusso">
<meta name="twitter:title" content="Find My Cite">
<meta name="twitter:description" content="Are you a Zotero user? Do you ever wish you could search your libraries by idea not keywords? What about the ability to ask questions of your texts? Then this page is for you. Download information from one of your group libraries and interact with it using a number of NLP tools.">
<meta name="twitter:image" content="http://www.davidcolarusso.com/images/thefuture.png"/>
<script src="https://code.jquery.com/jquery-1.11.1.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/axios/0.16.2/axios.min.js"></script>
<script type="module" src="https://findmycite.org/js/spin.min.js"></script>
<link rel="stylesheet" type="text/css" href="css/style.css?build=1">
<script>
if ((window.location.protocol == "https:") | (window.location.protocol == "http:")) {
var server = "https://tools.suffolklitlab.org"; // Production Server
} else {
//var server = "https://tools.suffolklitlab.org"; // Production Server
var server = "http://127.0.0.1:10100"; // Local Testing Server
}
var default_group = "4961358";
var building_lib = 0;
var last_update;
</script>
<script src="js/find.js"></script>
<script src="js/ask.js"></script>
<script src="js/suggest.js"></script>
<script src="js/guess.js"></script>
<script src="js/countable.js"></script>
</head>
<!-- Google tag (gtag.js) -->
<script async src="https://www.googletagmanager.com/gtag/js?id=G-41WF20BW7V"></script>
<script>
window.dataLayer = window.dataLayer || [];
function gtag(){dataLayer.push(arguments);}
gtag('js', new Date());
gtag('config', 'G-41WF20BW7V');
</script>
<body onLoad="tab('none');"><form autocomplete="off">
<div id="msg" style="display:none;top:0;z-index:100;width:100%;margin:0;">
<div style="margin:15px auto 0 auto;max-width:400px;text-align:center;background:#fff;padding:0px 15px 0 15px;">
<b> This may take some time. I am currently:</b>
<p id="output">Thinking...</p>
</div>
</div>
<div id="content" style="margin:15px auto 0 auto;max-width:900px;">
<div id="menu" style="float:right;display:none;">
<a id="menu_bs" href="javascript:void('');" onClick="tab('bs');">🤖 BS</a> |
<a id="menu_find" href="javascript:void('');" onClick="tab('find');">Find</a>
<a id="menu_ask" href="javascript:void('');" onClick="tab('ask');">Ask</a>
<a id="menu_suggest" href="javascript:void('');" onClick="tab('suggest');">Suggest</a> |
<a id="menu_ghostwrite" href="ghostwriter/">Ghostwrite</a>
<a id="menu_guess" href="javascript:void('');" onClick="tab('guess');">Guess</a> |
<a id="menu_settings" href="javascript:void('');" onClick="tab('settings');">Library</a>
</div>
<div class="findmycite"><b>Find My Cite</b> <sup><font color="gray" size=-2>BETA</font></div>
<div id="search_box" style="float:left;width:100%;">
<hr style="height:1px;border:none;color:#999;background-color:#999;margin:15px 0 0 0;">
<p style="text-align:center;background:#faef8e;padding:15px;border: 1px solid #888;">FWIW, the author of this site will discuss their work at this year's <a href="https://2023.calicon.org/sessions/findmyciteorg-llm-sandbox-legal-educators" target="_blank">CALIcon</a> (June 16, 2023).</p>
<!--- START BS -->
<div id="bs" style="display:none;float:left;width:100%">
<a name="alogbs"><h2><h2><a href="#bs" class="anchor" alt="deep link to this section"></a>Algorithmic BS: Exploring Uses of Large Language Models</h2></a>
<div class="r_img_embed" style="max-width:350px;">
<img src="images/robot-bs.png" alt="image of the following emoji: 🤖 🐂💩" width="100%"/>
<div class="caption">Algorithmic BS?</div>
</div>
<p>
<i>Use the tools here to interact with a <a href="https://www.zotero.org/support/groups" target="_blank">Zotero group</a> of <a href="javascript:void('');" onClick="tab('settings');">your choice</a>. You can <a href="javascript:void('');" onClick="tab('find');">find propositions</a>, <a href="javascript:void('');" onClick="tab('ask');">ask questions</a>, or <a href="javascript:void('');" onClick="tab('suggest');">get supporting text</a>.</i>
</p>
<p>
The modern authoritarian practice of “flood[ing] the zone with shit” clearly illustrates the dangers posed by <a href="https://en.wikipedia.org/wiki/Bullshit#Harry_Frankfurt's_concept" target="_blank">bullshitters</a>—i.e., those who produce plausible sounding speech with no regard for accuracy. Consequently, the broad-based concern expressed over the rise of algorithmic bullshit is both understandable and warranted. <a href="https://en.wikipedia.org/wiki/Wikipedia:Large_language_models" target="_blank">Large language models</a> (LLMs), like those powering <a href="https://en.wikipedia.org/wiki/ChatGPT" target="_blank">ChatGPT</a>, which complete text by predicting subsequent words based on patterns present in their training data are, if not the embodiment of such bullshitters, tools ripe for use by such actors. They are by design fixated on producing plausible sounding text, and since they lack understanding of their output, they cannot help but be unconcerned with accuracy. Couple this with the fact that their training texts encode the biases of their authors, and one can find themselves with what some have called <a href="https://octodon.social/@cwebber/109462369670144568" target="_blank">mansplaining as a service</a>.
</p>
<p>
So why did the <a href="https://suffolklitlab.org/" target="_blank">LIT Lab</a> use an LLM to build these tools, and why bother working with a known bullshitter?
</p>
<p>
For one, "algorithmic BS artists" lack agency. They do not understand their input or output. Their "dishonesty" is a consequence of their use case, not their character. Context matters, and tools are not moral actors. Any agency, moral or otherwise, lies with the developers and users of such tools. By stepping into these roles we can better explore the questions presented by their use. Additionally, as educators, it is part of our duty to prepare our students for the realities of <a href="https://stratechery.com/2022/ai-homework/" target="_blank">a world where such tools exist</a>. To do that we think it's important to understand, not just how they work now, but to explore new use cases. The tools presented here are, in part, an attempt to imagine pro-social uses for such technology, ones that don't result in the death of scholarship or truth. In fact, they are attempts to use them in service of both. Of course, any assessment of a tool's use must consider a broad context, including its creation. <a href="https://link.springer.com/article/10.1007/s13347-020-00405-8" target="_blank"></a>This</a> raises a good many questions. Readers can find more discussion of these at <a href="https://www.codingthelaw.org" target="_blank">Coding The Law.org</a> and see an example of how we've responded to some of them in <a href="https://spot.suffolklitlab.org/trusts/" target="_blank">our prior AI work</a>. Below, however, we will focus on the tools found here on Find My Cite, which largely ask, "can we work with this particular 'bullshitter' (i.e., LLMs)?"
</p>
<p>
When asked to complete a text prompt, LLMs default to constructing sentences that resemble their training data. This can lead to "confabulations." These models, however, need not operate in isolation. One can work to mitigate the problem of BS by providing context, e.g., by sourcing reliable texts and asking for output based on these. Such is <a href="https://github.com/openai/openai-cookbook/blob/main/examples/Question_answering_using_embeddings.ipynb" target="_blank">the trick</a> used here. We have created a set of tools that asks an LLM (GPT-3) to reorder the contents of an existing <a href="https://www.zotero.org/support/groups" target="_blank">Zotero group/library</a>. This does not limit the danger posed by such tools <a href="https://www.nytimes.com/2023/01/06/podcasts/transcript-ezra-klein-interviews-gary-marcus.html" target="_blank">driving the cost of BS production to nearly zero</a>, and it does not guarantee accuracy. It does, however, offer an interesting exploration of how LLMs can be used to search through texts, provide answers to questions, produce supporting examples, and the like. It also couples its output to real citations (from its library) allowing the user to check its work.
</p>
<p>
After playing with these tools some, we hope to produce some exercises aimed at orienting students and help them navigate their use. Which brings is to the real reason one might consider working with this particular BS artist—because practicle experience working with a tool leads to understanding, and understanding is power. That power is something our students can leverage both for the benefit of their future clients and practice. <b>We don't expect our students to become production coders, but we'd like them to learn enough to call BS.</b>
</p>
<p>
To help understand more what's going on under the hood, here's some...
</p>
<h3><a name="background" href="#background" class="anchor" alt="deep link to this section"></a>Background</h3>
<div class="l_img_embed" style="max-width:400px;">
<img src="images/projection.png" alt="a 2-d projection of embeddings for different new articles which shows clustering by topic" width="100%"/>
<div class="caption">A 2-D projection of document embeddings from <a href="https://cloud.google.com/blog/products/ai-machine-learning/problem-solving-with-ml-automatic-document-classification">a blog post on document classification</a></div>
</div>
<p>
One of the big insights of Natural Language Processing (NLP) is the text embedding (a set of numbers produced from a string of text). It turns out that we can turn strings of words into numbers. For example, we can turn any arbitrary set of words into an array of 300 numbers. It's hard to visualize, but a list of these numbers correspond to a point in some n-dimensional space (e.g., 300-D). And here's the BFD! We can do this such that <a href="https://www.codingthelaw.org/Fall_2022/level/7/#intro_vid" target="_blank">strings with similar meanings are close to each other in this n-D space</a>. If we collect a bunch of texts we can start to create constellations based on these points. In the figure here we see a 2-D shadow (projection) of some higher dimensional space with dots for a bunch of news articles colored by topic.
</p>
<p>
If we got some new text, computed its embedding, and plotted that here, we could make a pretty good guess as to what topic it belonged to based on nothing but where it was located.
</p>
<p>
Enter ChatGPT and LLMs. Imagine the point in this space occupied by some text you are typing. As you add words, the location of the dot corresponding to your text moves. Since no one word is likely to change its meaning much, it won't move around a lot, but you can envision how with each new word it moves towards or away from one of the constellations defined by other texts. The position changes as your text grows. When you let a tool like an LLM complete text for you it's adding words to a string such that its embedding is drawn towards the texts (dots) it already knows about, as if by gravity. The truth of this new text is not a consideration, only the pull of known texts.
</p>
<p>
Armed with the gravity metaphor we can now ask questions like, "How do we get an LLM to answer accurately?" A few ideas come immediately to mind.
</p>
<ol>
<li>Only fill the space with texts (dots) that are true (i.e., retrain the model).</li>
<li>Add in/identify some texts that we know are true and have them exert a greater pull (i.e., tune the model)</li>
<li>Craft the start of your prompt such that it anchors and/or directs the dot's subsequent motion towards parts of space associated with trusted texts.</li>
</ol>
<p>
The idea of only using trusted texts in the original training runs into the limitation that you need a LOT of texts. That's because what LLMs are really "learning" is what sentences look like from a statistical standpoint. Of course, you can, and should, think carefully about how you source texts. See e.g., <a href="https://pile.eleuther.ai/" target="_blank">The Pile: An 800GB Dataset of Diverse Text for Language Modeling</a>. And as with training/retraining, tuning a model can be computationally expensive. So the approach we used here was the option behind door number three.
</p>
<h3><a name="tools" href="#tools" class="anchor" alt="deep link to this section"></a>The Tools Found Here</h3>
<p>
In case it wasn't clear, when you ask an LLM a question, all it is doing is suggesting the next set of words in a string of text. It seems like an answer, but it's just an exercise in adding new words (drifting towards the pull of known texts). Because LLMs care about the whole (or most) of the string, you can anchor them in particular places.
</p>
<p>
Consider: Instead of having an LLM add to the sentence "What is the best sports town in the US?" what if you provided the prompt "Boston is the home of Red Sox Nation, the best sports city in the US. What is the best sports town in the US?" As you might guess, if you seed the prompt with the "right" answer, you drastically up the chance of it answering correctly. So how do we seed the answer to a question? Presumably, we're asking the question because we don't know the answer. Well...
</p>
<ul>
<h4><a name="ask_descript" href="#ask_descript" class="anchor" alt="deep link to this section"></a>Ask a question of your library</h4>
<p>
What if you use the original query (e.g., "What is...?") to perform a traditional search then use the results of that search to seed the prompt to an LLM. You then ask it not to answer if the answer isn't in the seed, and you show citations to the texts returned by the original search. This is what we do with the <a href="javascript:void('');" onClick="tab('ask');">Ask</a> tool.
</p>
<h4><a name="suggest_descript" href="#suggest_descript" class="anchor" alt="deep link to this section"></a>Suggest text supported by your library</h4>
<p>
There's no reason we have to limit this approach to questioning texts. We could just as easily create an anchor for more traditional text completion. E.g., "Complete the following paragraph using only information found in 'the seed.'" This is what we do with the <a href="javascript:void('');" onClick="tab('suggest');">Suggest</a> tool.
</p>
<h4><a name="find_descript" href="#find_descript" class="anchor" alt="deep link to this section"></a>Find a proposition in your library</h4>
<p>As for the <a href="javascript:void('');" onClick="tab('find');">Find</a> tool, there we compare your proposition's embedding to that of sentences in your library, returning the most similar. It also has a nifty auto-complete feature that previews individual sentences from your library while you type.
</p>
<h4><a name="guess_descript" href="#guess_descript" class="anchor" alt="deep link to this section"></a>Guess what word(s) should come next</h4>
<p>Tools like ChatGPT obsucre the true nature of Large Language Models. At their core they aim to predict the next word (or words) in a string of text. The <a href="javascript:void('');" onClick="tab('guess');">Guess</a> tool grants access to a raw LLM absent the artiface.
</p>
</ul>
<p>
The problem of BS, however, is not the only issue faced by such models. When they allow end-users to provide their own prompts, they are subject to <a href="https://simonwillison.net/2022/Sep/12/prompt-injection/" target="_blank">prompt injection</a>, the careful crafting of inputs to override a tool's original instructions. What could go wrong? <i>Oh no . . . you're going to try this aren't you?</i>
</p>
<p>
Anywho, we hope you find using the tool informative, and if you're an instructor, we look forward to hearing how you use it in your classes. Secretly, I'd love if folks could use this as a Trojan Horse to sneak in proper research methods (e.g., you can use these AI tools if you're the one who builds the research library). Also, thank you to <a href="https://fedi.simonwillison.net/@simon" target="_blank">Simon Willison</a> for <a href="https://simonwillison.net/2023/Jan/13/semantic-search-answers/" target="_blank">planting</a> the seeded promt idea.
</p>
</div>
</div>
<!--- END BS -->
<!--- START TERMS -->
<div id="tos" style="display:none;float:left;width:100%">
<a name="terms"><h2>Terms & Privacy</h2></a>
<p>
This site is run by Suffolk University Law School's <a href="https://suffolklitlab.org/" target="_blank">Legal Innovation and Technology Lab</a>. It is offered <i>as is</i> with no warranties of operability etc. Among other things, it is a sandbox for folks looking to explore the use of NLP tools for research and scholarship. We fully expect it will provide incorrect, incomplete, and just plain wrong answers. Additionally, the Lab makes no guarantees about when and for how long it will be available, and it reserves the right to remove your access at anytime.</p>
<p>
The text of queries (text you enter on the site) made to the <i>ask</i> and <i>suggest</i> tools is shared with Open AI via their API. Note: To limit data sharing, we asked that this content not be used to "improve" their service as specified by Section 3(c) of <a href="https://openai.com/policies/terms-of-use" target="_blank">their Terms of Use</a>, and they informed us that "[they] have added an exclusion for [our] organization's data, so it will not be included in [their] model training."
</p>
<p>
We make use of Google Analytics to track visitor statistics, this includes the use of cookies. See <a href="https://policies.google.com/technologies/partner-sites" target="_blank">How Google uses data when you use our partner's sites or apps</a> (i.e., this site).
</p>
<p>
As a general rule, you should assume that someone from the Lab may see your data. However, absent any identifying information provided in the text of your queries, Zotero group/library, or other communications (e.g., emails or DMs to staff), we do not have a pre-made workflow to easily link any individual's usage to the data we have on file. By using this site, you agree that we may use whatever data you provide to improve its operation.
</p>
</div>
<!--- END TERMS -->
<div id="find" style="float:left;width:100%;display:none;">
<a name="search"><h2>Find a proposition in <a href="javascript:void('');" onClick="tab('settings');">your library</a><span id="lib_name_find"></span></h2></a>
<div style="float:left;margin-right:45px;margin-bottom:20px;">
<input type="checkbox" id="suggest" name="suggest" value="1" CHECKED>
<label for="suggest"> Auto suggest (shows up to 5 matching texts from your library)</label>
</div>
<div style="float:left;margin-bottom:20px;">
Cosine Similarity Cutoff: <span id="cutoffv">0.7</span></br>
<input type="range" min="0.5" max="1" step="0.01" value="0.7" id="cutoff" oninput="$('#cutoffv').html(this.value);" style="width:200px;">
</div>
<div style="float:left;width:100%;margin:0px 0 0px 0;">
<table><tr><td width="100%">
<div class="autocomplete" style="width:100%;">
<input id="q" type="text" name="q" placeholder="The proposition you wish to cite" style="width:100%;height:43px;font-size:15px;padding:10px;box-sizing: border-box;border-radius: 5px; border: solid 1px #5e5e5e;resize:none;">
</div>
</td><td width="50px">
<input type="button" class="ai_button" style="width:100px;" value='Find' onclick="test_understanding(document.getElementById('q').value,localStorage.group)"/>
</td></tr></table>
<div id="output" style="float:left;width:100%;">
<div id="loading" style="display:none;float:left;width:100%;height: 60px; margin: 25px 0;text-align:center;"></div>
<p id="answer" style="margin:0px;float:left;width:100%;"></p>
</div>
</div>
</div>
<div id="startup" style="float:left;width:100%;text-align:center;background:yellow;padding:10px 0;margin:15px 0;">
Loading...
</div>
<!--- START ASK -->
<div id="ask" style="display:none;float:left;width:100%">
<a name="ask"><h2>Ask a question of <a href="javascript:void('');" onClick="tab('settings');">your library</a><span id="lib_name_ask"></span></h2></a>
<textarea name='question' id="question" style="width:100%;height:80px;font-size:15px;padding:5px;box-sizing: border-box;border-radius: 5px; border: solid 1px #5e5e5e;resize:none;" maxlength="400" placeholder="Ask a question here"></textarea>
<div style="padding:5px 0 8px 0;"><span class="subtitle"></span></div>
<p style="margin:0px 0px 5px 0px;">
<input type="button" class="ai_button" value="Ask" onCLick="ask($('#question').val(),localStorage.group);"/>
</p>
<div id="output_ask" style="float:left;width:100%;">
<div id="loading_ask" style="display:none;width:100%;margin:50px auto;text-align:center;">
<img src="images/Ajax-loader.gif" width="35px;" height="35px;"/>
</div>
<div id="response_ask" style="float:left;display:none;width:100%;margin:0px auto 0px 0px;"></div>
</div>
</div>
<!--- END ASK -->
<!--- START COMPLET -->
<div id="complete" style="display:none;float:left;width:100%;">
<a name="suggest"><h2>Suggest text supported by <a href="javascript:void('');" onClick="tab('settings');">your library</a><span id="lib_name_suggest"></span></h2></a>
<textarea name='seed' id="seed" style="width:100%;height:250px;font-size:15px;padding:5px;box-sizing: border-box;border-radius: 5px; border: solid 1px #5e5e5e;resize:none;" maxlength="1000" onchange="localStorage.suggest_prompt = $('#seed').val();" placeholder="Start a paragraph here"></textarea>
<div style="padding:5px 0 8px 0;"><span class="subtitle"></span></div>
<p style="margin:0px 0px 5px 0px;">
<input type="button" class="ai_button" value="Suggest" onCLick="com_par($('#seed').val(),localStorage.group);"/>
</p>
<div id="output_complete" style="float:left;width:100%;">
<div id="loading_complete" style="display:none;width:100%;margin:50px auto;text-align:center;">
<img src="images/Ajax-loader.gif" width="35px;" height="35px;"/>
</div>
<div id="response_complete" style="float:left;display:none;width:100%;margin:0px auto 0px 0px;"></div>
</div>
</div>
<!--- END COMPLETE -->
<!--- START GUESS -->
<div id="guess" style="display:none;float:left;width:100%;">
<a name="guess"><h2>Guess what word(s) should come next</h2></a>
<p>Tools like ChatGPT obsucre the true nature of Large Language Models. At their core they aim to predict the next word (or words) in a string of text. The interface below grants access to a raw LLM absent the artiface. <span style="background:rgb(255, 181, 165);"><b>Beware! You are entering the danger zone described in <a href="javascript:void('');" onClick="tab('bs');">🤖 BS</a></b></span>. Might I suggest comparing the output below with that found using the <a href="javascript:void('');" onClick="tab('suggest');">Suggest</a> tool? Additionally, if you're prompt grows much beyond 1,000 words, only the last 1,300 or so will be used when guessing. <i>Unlike the other tools found here, you must have a valid <i>FindMyCite Key</i> entered under <a href="javascript:void('');" onClick="tab('settings');">Library</a> to use this feature.</i></p>
<span id="word_count" name="word_count" class="subtitle" style="float:right;color:red;font-weight:bold;"> <span id="result__words">0</span> words</span>
<div id="prompt_area" style="position:absolute;z-index:100;padding-top:200px;margin:0 auto;"></div><textarea name='prompt' id="prompt" style="width:100%;height:325px;font-size:15px;padding:5px;box-sizing: border-box;border-radius: 5px; border: solid 1px #5e5e5e;resize:none;" onchange="localStorage.guess_prompt = $('#prompt').val();" placeholder="Place prompt here"></textarea>
<div style="padding:5px 0 8px 0;"><span class="subtitle"></span></div>
<p style="margin:0px 0px 5px 0px;">
<input type="button" class="ai_button" value="Guess the next word(s)" onCLick="guess($('#prompt').val(),$('#cite_key').val());"/>
</p>
<div id="output_complete" style="float:left;width:100%;">
<div id="loading_complete" style="display:none;width:100%;margin:50px auto;text-align:center;">
<img src="images/Ajax-loader.gif" width="35px;" height="35px;"/>
</div>
<div id="response_complete" style="float:left;display:none;width:100%;margin:0px auto 0px 0px;"></div>
</div>
<br>
<h3>Consider</h3>
<p>Raw LLMs perform reasonably well at rearranging text from their prompts (e.g., entity extraction, summarization, et al.). Try placing some text in the area above and following it with instructions like these?</p>
<ul>
<li>[some text] <a href="javascript:void('');" onClick="$('#prompt').val($('#prompt').val() + '\n\nRewrite the text above in plain language and at a sixth grade reading level.\n\n');">Rewrite the text above in plain language and at a sixth grade reading level.</a></li>
<li>[some text] <a href="javascript:void('');" onClick="$('#prompt').val($('#prompt').val() + '\n\nSummarize the text above in a bulleted list.\n\n');">Summarize the text above in a bulleted list.</a></li>
</ul>
</div>
<!--- END GUESS -->
<!--- START LIBRARY -->
<div id="library" style="display:none;float:left;width:100%">
<!--
<a name="library"><h2>Performance</h2></a>
<p>
asdjahsl daskl dhlaskhdl
</p>
<input type="checkbox" id="boost" name="boost" value="1" CHECKED>
<label for="boost"> Boost performance for the <i>Ask</i> and <i>Suggest</i> features (nearly doubles runtime)</label>
-->
<a name="library"><h2>Your Zotero Library</h2></a>
<p>
<b>Loading a Group/Library.</b> Find My Cite helps you interact with existing <a href="https://www.zotero.org/support/groups" target="_blank">Zotero groups</a>. If someone (like a teacher or colleague) directed you here with a group number, enter it below and click the "Update Group" button. For you to interact with a group's texts it must first be synced with Find My Cite. See below. Additionally, you can only view the fulltext of documents in a group if you are a member of the group. If you aren't a member, you may be able to view the citation information depending on the group's type (e.g., if it is <i>Public, Closed Membership</i>, non-members can see citation information).
</p>
<p>
Zotero Group: <input id="group" style="border:1px solid #aaa;padding:5px;box-sizing: border-box; font-size:15px;width:100px;" onkeyup="update_preview()">
<input id="update" type="button" value="Update & Check Group" style="padding:5px;font-size:15px;" onClick="update_group($('#group').val());"/>
<input id="deafult" type="button" value="Restore Default" style="padding:5px;font-size:15px;" onClick="update_group('');"/>
</p>
<p style="font-size:14px;">
Visit Zotero Group: <a id="preview" href="https://www.zotero.org/groups/" target="_blank">https://www.zotero.org/groups/</a>
<br>
Use this link to share <i>Find My Site</i> preloaded with the above group: <a id="share" href="https://findmycite.org/?group=">https://findmycite.org/?group=</a>
</p>
<p>
<b>Synchronizing a Group.</b> To synchronize a group, you will need: (1) a Zotero API Key with access to said group; and (2) a Find My Cite Key. These are random strings of letters and numbers that act like passwords. You can make a Zotero API Key by following <a href="https://www.zotero.org/settings/keys/new" target="_blank">these instructions</a>. And you can ask for a Find My Cite Key by emailing the LIT Lab at <a href="mailto:[email protected]">[email protected]</a>. However, we're only giving out a very very limited number at this time. Also, for now, we're only synchronizing up to 100 items per group (including attachments). Why 100 items? Because we're running things on our existing server provision, and big = computationally expensive.
</p>
<p>
After you synchronize a group anyone with the group's number can interact with its texts via the tools here (i.e., <a href="javascript:void('');" onClick="tab('find');">find</a>, <a href="javascript:void('');" onClick="tab('ask');">ask</a>, & <a href="javascript:void('');" onClick="tab('suggest');">suggest</a>). <span style="background:#faef8e">They will not be able to see the original documents unless you also make them a member of the group and have <a href="https://www.zotero.org/storage" target="_blank">document storage</a> turned on in Zotero.</span> The group number is the string of numbers in the URL between <i>/groups/</i> and your group's name. For example, <i>8675309</i> is the ID found in the following url: <i>https://www.zotero.org/groups/8675309/library_name/</i>.
</p>
<p>
Zotero API-Key: <input id="api_key" style="border:1px solid #aaa;padding:5px;box-sizing: border-box; font-size:15px;width:150px;" type="password" onchange="localStorage.api_key = $('#api_key').val();"/>
<select id="bib" style="padding:5px;font-size:15px;">
<option value="apa">American Psychological Association 7th edition</option>
<option value="bluebook-law-review" SELECTED>Bluebook Law Review</option>
<!--<option value="https://our.law.nagoya-u.ac.jp/updater/styles/jm-indigobook-law-review.csl">IndigoBook (Law Review)</option>-->
<option value="chicago-note-bibliography">Chicago Manual of Style 17th edition (note)</option>
<option value="modern-language-association">Modern Language Association 8th edition</option>
</select>
</p>
<p>
FindMyCite Key: <input id="cite_key" style="border:1px solid #aaa;padding:5px;box-sizing: border-box; font-size:15px;width:150px;" type="password" onchange="localStorage.cite_key = $('#cite_key').val();"/>
<input id="build_button" type="button" value="Sync Library" style="padding:5px;font-size:15px;" onClick="localStorage.group = $('#group').val();build($('#group').val(),$('#api_key').val(),$('#cite_key').val(),$('#bib').val())"/>
<span id="last_synced">Last Synced: </span>
</p>
</p>
<div id="show_when_building" style="display:none;">
<h3>This could take a while...</h3>
<p>This can take a while, like go get and drink a whole cup of coffee-a-while. ☕ <i>Note: The larger your library, the longer it will take. The first sync will likely take the longest as susequent syncs will try to focus only on changes.</i></p>
<div id="loading_lib" style="float:left;width:100%;height: 60px; margin: 25px 0;text-align:center;"></div>
</div>
<div id="texts_in_lib">
<h3>Texts in your library<span id="lib_name_settings"></span>:</h3>
<p>
We can only provide information from those texts highlighted in <span style='background:#aef7a6'>light green</span>. You may be able to turn more of them green by doing one of two things: (1) if you don't have a copy of the document in your Zotero library, add it and sync above; (2) re-build your Zotero library index and sync above once it is complete. See <a href="https://www.zotero.org/support/preferences/search">Zotero Search</a> (including discussion of how to rebuild your Full-Text Cache). Find My Cite leverages your fulltext index, which only includes text files, pdfs, and webpage snapshots at this time.
</p>
<ol id="lib_links">
</ol>
<div id="cites_in_lib" style="margin-top:45px;">
<h3>Possible Citations (Lit Review Lite):</h3>
<p>
FWIW, the following are strings of text we found in your library that might be citations. <i style="background:rgb(255, 181, 165);">For the moment, we only detect Law Review Articles and stuff that vaguely looks like a statute. <b>We miss a LOT!!! For most folks, this is a very small subset of their cites.</b></i>
</p>
<ol id="possible_cites">
</ol>
</div>
</div>
</div>
<!--- END LIBRARY -->
<div style="width:100%;float:left;margin-top:20px;">
<hr style="height:1px;border:none;color:#999;background-color:#999;">
<p style='text-align:center;margin-bottom:400px;text-align:right;font-size:14px;padding:5px 10px;'>
<a href="https://suffolklitlab.org/" alt="LIT Lab" target="_blank"><img src="images/lit_suffolk.png" class="footer_logo" border="0" alt="LIT and Suffolk University Law School Logos"/></a>
<a id="tos" href="javascript:void('');" onClick="tab('tos');" style="text-transform: uppercase;font-size:12px;">Terms & Privacy</a> |
<a href="mailto:[email protected]" style="text-transform: uppercase;font-size:12px;">Contact</a> |
<a id="og" href="original/" style="text-transform: uppercase;font-size:12px;">Original Site</a>
<a href="https://analytics.google.com/analytics/web/#/p355958724/reports/reportinghub?params=_u..nav%3Dmaui" target="_blank" style="text-decoration:none;color:#555;"><sup>π</sup></a>
</p>
</div>
</form></body>
<script>
const queryString = window.location.search;
const urlParams = new URLSearchParams(queryString);
const set_group = urlParams.get('group');
function tab(choice){
if ((choice=="none")) {
if ((window.location.hash=="#bs") | (window.location.hash=="#background") | (window.location.hash=="#tools") | (window.location.hash=="#ask_descript") | (window.location.hash=="#suggest_descript") | (window.location.hash=="#find_descript") | (window.location.hash=="#guess_descript")) {
choice = "bs";
} else if (window.location.hash=="#find") {
choice = "find";
history.replaceState(null, null, ' ');
} else if (window.location.hash=="#ask") {
choice = "ask";
history.replaceState(null, null, ' ');
} else if (window.location.hash=="#suggest") {
choice = "suggest";
history.replaceState(null, null, ' ');
} else if (window.location.hash=="#guess") {
choice = "guess";
history.replaceState(null, null, ' ');
} else if (window.location.hash=="#settings") {
choice = "settings";
history.replaceState(null, null, ' ');
} else if (window.location.hash=="#tos") {
choice = "tos";
history.replaceState(null, null, ' ');
} else {
if (localStorage.tab) {
choice = localStorage.tab;
} else {
choice = "bs";
}
history.replaceState(null, null, ' ');
}
} else {
history.replaceState(null, null, ' ');
}
localStorage.tab = choice;
if ((lib.length==0) & (choice!="settings") & (choice!="tos") & (choice!="bs")) {
alert("We can't find a Zotero group associated with the number provided. Please check your settings.");
choice = "settings";
localStorage.tab = choice;
}
$('#startup').hide();
$('#menu').show();
if (choice=="bs") {
$('#bs').show();
$('#library').hide();
$('#find').hide();
$('#ask').hide();
$('#complete').hide();
$('#guess').hide();
$('#tos').hide();
$('#menu_bs').css('text-decoration', 'none');
$('#menu_bs').css('font-weight', '600');
$('#menu_bs').css('color', 'black');
$('#menu_find').css('text-decoration', 'underline');
$('#menu_find').css('font-weight', '100');
$('#menu_find').css('color', 'blue');
$('#menu_ask').css('text-decoration', 'underline');
$('#menu_ask').css('font-weight', '100');
$('#menu_ask').css('color', 'blue');
$('#menu_suggest').css('text-decoration', 'underline');
$('#menu_suggest').css('font-weight', '100');
$('#menu_suggest').css('color', 'blue');
$('#menu_guess').css('text-decoration', 'underline');
$('#menu_guess').css('font-weight', '100');
$('#menu_guess').css('color', 'blue');
$('#menu_settings').css('text-decoration', 'underline');
$('#menu_settings').css('font-weight', '100');
$('#menu_settings').css('color', 'blue');
$('#q').focus();
} else if ((choice=="find") && (building_lib==0)) {
$('#bs').hide();
$('#library').hide();
$('#find').show();
$('#ask').hide();
$('#complete').hide();
$('#guess').hide();
$('#tos').hide();
$('#menu_bs').css('text-decoration', 'underline');
$('#menu_bs').css('font-weight', '100');
$('#menu_bs').css('color', 'blue');
$('#menu_find').css('text-decoration', 'none');
$('#menu_find').css('font-weight', '600');
$('#menu_find').css('color', 'black');
$('#menu_ask').css('text-decoration', 'underline');
$('#menu_ask').css('font-weight', '100');
$('#menu_ask').css('color', 'blue');
$('#menu_suggest').css('text-decoration', 'underline');
$('#menu_suggest').css('font-weight', '100');
$('#menu_suggest').css('color', 'blue');
$('#menu_guess').css('text-decoration', 'underline');
$('#menu_guess').css('font-weight', '100');
$('#menu_guess').css('color', 'blue');
$('#menu_settings').css('text-decoration', 'underline');
$('#menu_settings').css('font-weight', '100');
$('#menu_settings').css('color', 'blue');
$('#q').focus();
} else if ((choice=="ask") && (building_lib==0)) {
$('#bs').hide();
$('#library').hide();
$('#find').hide();
$('#ask').show();
$('#complete').hide();
$('#guess').hide();
$('#tos').hide();
$('#menu_bs').css('text-decoration', 'underline');
$('#menu_bs').css('font-weight', '100');
$('#menu_bs').css('color', 'blue');
$('#menu_find').css('text-decoration', 'underline');
$('#menu_find').css('font-weight', '100');
$('#menu_find').css('color', 'blue');
$('#menu_ask').css('text-decoration', 'none');
$('#menu_ask').css('font-weight', '600');
$('#menu_ask').css('color', 'black');
$('#menu_suggest').css('text-decoration', 'underline');
$('#menu_suggest').css('font-weight', '100');
$('#menu_suggest').css('color', 'blue');
$('#menu_guess').css('text-decoration', 'underline');
$('#menu_guess').css('font-weight', '100');
$('#menu_guess').css('color', 'blue');
$('#menu_settings').css('text-decoration', 'underline');
$('#menu_settings').css('font-weight', '100');
$('#menu_settings').css('color', 'blue');
$('#question').focus();
} else if ((choice=="suggest") && (building_lib==0)) {
$('#bs').hide();
$('#library').hide();
$('#find').hide();
$('#ask').hide();
$('#complete').show();
$('#guess').hide();
$('#tos').hide();
$('#menu_bs').css('text-decoration', 'underline');
$('#menu_bs').css('font-weight', '100');
$('#menu_bs').css('color', 'blue');
$('#menu_find').css('text-decoration', 'underline');
$('#menu_find').css('font-weight', '100');
$('#menu_find').css('color', 'blue');
$('#menu_ask').css('text-decoration', 'underline');
$('#menu_ask').css('font-weight', '100');
$('#menu_ask').css('color', 'blue');
$('#menu_suggest').css('text-decoration', 'none');
$('#menu_suggest').css('font-weight', '600');
$('#menu_suggest').css('color', 'black');
$('#menu_guess').css('text-decoration', 'underline');
$('#menu_guess').css('font-weight', '100');
$('#menu_guess').css('color', 'blue');
$('#menu_settings').css('text-decoration', 'underline');
$('#menu_settings').css('font-weight', '100');
$('#menu_settings').css('color', 'blue');
$('#seed').focus();
} else if ((choice=="guess") && (building_lib==0)) {
$('#bs').hide();
$('#library').hide();
$('#find').hide();
$('#ask').hide();
$('#complete').hide();
$('#guess').show();
$('#tos').hide();
$('#menu_bs').css('text-decoration', 'underline');
$('#menu_bs').css('font-weight', '100');
$('#menu_bs').css('color', 'blue');
$('#menu_find').css('text-decoration', 'underline');
$('#menu_find').css('font-weight', '100');
$('#menu_find').css('color', 'blue');
$('#menu_ask').css('text-decoration', 'underline');
$('#menu_ask').css('font-weight', '100');
$('#menu_ask').css('color', 'blue');
$('#menu_suggest').css('text-decoration', 'underline');
$('#menu_suggest').css('font-weight', '100');
$('#menu_suggest').css('color', 'blue');
$('#menu_guess').css('text-decoration', 'none');
$('#menu_guess').css('font-weight', '600');
$('#menu_guess').css('color', 'black');
$('#menu_settings').css('text-decoration', 'underline');
$('#menu_settings').css('font-weight', '100');
$('#menu_settings').css('color', 'blue');
$('#prompt').focus();
} else if (choice=="settings") {
$('#bs').hide();
$('#library').show();
$('#find').hide();
$('#ask').hide();
$('#complete').hide();
$('#guess').hide();
$('#tos').hide();
$('#menu_bs').css('text-decoration', 'underline');
$('#menu_bs').css('font-weight', '100');
$('#menu_bs').css('color', 'blue');
$('#menu_find').css('text-decoration', 'underline');
$('#menu_find').css('font-weight', '100');
$('#menu_find').css('color', 'blue');
$('#menu_ask').css('text-decoration', 'underline');
$('#menu_ask').css('font-weight', '100');
$('#menu_ask').css('color', 'blue');
$('#menu_suggest').css('text-decoration', 'underline');
$('#menu_suggest').css('font-weight', '100');
$('#menu_suggest').css('color', 'blue');
$('#menu_guess').css('text-decoration', 'underline');
$('#menu_guess').css('font-weight', '100');
$('#menu_guess').css('color', 'blue');
$('#menu_settings').css('text-decoration', 'none');
$('#menu_settings').css('font-weight', '600');
$('#menu_settings').css('color', 'black');
} else if (choice=="tos") {
$('#bs').hide();
$('#library').hide();
$('#find').hide();
$('#ask').hide();
$('#complete').hide();
$('#guess').hide();
$('#tos').show();
$('#menu_bs').css('text-decoration', 'underline');
$('#menu_bs').css('font-weight', '100');
$('#menu_bs').css('color', 'blue');
$('#menu_find').css('text-decoration', 'underline');
$('#menu_find').css('font-weight', '100');
$('#menu_find').css('color', 'blue');
$('#menu_ask').css('text-decoration', 'underline');
$('#menu_ask').css('font-weight', '100');
$('#menu_ask').css('color', 'blue');
$('#menu_suggest').css('text-decoration', 'underline');
$('#menu_suggest').css('font-weight', '100');
$('#menu_suggest').css('color', 'blue');
$('#menu_guess').css('text-decoration', 'underline');
$('#menu_guess').css('font-weight', '100');
$('#menu_guess').css('color', 'blue');
$('#menu_settings').css('text-decoration', 'underline');
$('#menu_settings').css('font-weight', '100');
$('#menu_settings').css('color', 'blue');
} else if (building_lib==1) {
alert("This feature is unavailable as we are still syncronizing your library. ");
} else if (building_lib==-1) {
alert("We can't find a Zotero group associated with the number provided. To use this tool, please 'Sync Library' to link to the provided group, or enter another value. ");
tab("settings");
}
if (window.location.hash!="") {
window.location.href = window.location.hash;
}
}
if (localStorage.cite_key) {
document.getElementById('cite_key').value = localStorage.cite_key;
}
if (set_group!=null) {
document.getElementById('group').value = set_group;
localStorage.group = set_group;
} else if (localStorage.group) {
document.getElementById('group').value = localStorage.group;
} else {
localStorage.group = default_group
document.getElementById('group').value = localStorage.group;
}
if (localStorage.api_key) {
document.getElementById('api_key').value = localStorage.api_key;
}
if (localStorage.cutoff) {
document.getElementById('cutoff').value = localStorage.cutoff;
$('#cutoffv').html(localStorage.cutoff);
}
$('#q').keypress(function(e){
if(e.keyCode == 13 && !e.shiftKey && Boolean($('#qautocomplete-list').html()=="" | !$('#qautocomplete-list').html()) ) {
e.preventDefault();
test_understanding(document.getElementById('q').value,localStorage.group);
}
});
$('#question').keypress(function(e){
if(e.keyCode == 13 && !e.shiftKey) {
e.preventDefault();
ask($('#question').val(),localStorage.group);
}
});
$('#seed').keypress(function(e){
if(e.keyCode == 13 && !e.shiftKey) {
e.preventDefault();
com_par($('#seed').val(),localStorage.group);
}
});
$('#prompt').keypress(function(e){
if(e.keyCode == 13 && !e.shiftKey) {
e.preventDefault();
guess($('#prompt').val(),$('#cite_key').val());
}
});
function update_group(group){
if (group=="") {
group = default_group;
}
localStorage.group = group;
if (queryString=="") {
window.location = window.location.pathname;
} else {
window.location = window.location.pathname + "?group=" + group;
}
}
</script>
<script type="text/javascript">
//var JSLink = "js/data_lib.js?version=" + localStorage.group;
var JSLink = server+"/lib_js/?g=" +localStorage.group + "&version=" + Math.random();
get_build(localStorage.group);
var JSElement = document.createElement('script');
JSElement.id = "lib_et_al";
JSElement.src = JSLink;
JSElement.onload = OnceLoaded;
document.getElementsByTagName('head')[0].appendChild(JSElement);
function OnceLoaded() {
if (lib.length>0) {
//SentVecs = Object.assign({}, SentVecs_01,SentVecs_02,SentVecs_03,SentVecs_04,SentVecs_05);
autocomplete(document.getElementById("q"), Object.values(SentTexts));
update_texts();
} else {
building_lib = -1;
$('#lib_links').html("<p style='background:yellow;padding:15px;'>We can't find a Zotero group associated with the number you have provided. To use this tool, please 'Sync Library' to link the group, or enter another value. FWIW, you can reload the default library by inputing "+ default_group +".</p>");
$("#group").css("background-color","red");
}
update_preview();
}
var area = document.getElementById('prompt');
function callback_count (counter) {
//console.log(counter);
$('#result__words').html(counter.words);
if ($('#result__words').html()<1000) {
$('#word_count').css('color', 'green');
$('#word_count').css('font-weight', 'bold');
} else if (($('#result__words').html()>=1000) && ($('#result__words').html()<1300)) {
$('#text').css('background-color', '');
$('#word_count').css('color', 'orange');
$('#word_count').css('font-weight', 'bold');
} else {
$('#word_count').css('color', 'red');
$('#word_count').css('font-weight', 'bold');
}
}
Countable.live(area, callback_count);
</script>
</html>