Repository navigation
Expand file tree
/
Copy pathai-knowledge-base-user-guideline.html
More file actions
1002 lines (935 loc) · 60 KB
/
Copy pathai-knowledge-base-user-guideline.html
File metadata and controls
1002 lines (935 loc) · 60 KB
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
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
786
787
788
789
790
791
792
793
794
795
796
797
798
799
800
801
802
803
804
805
806
807
808
809
810
811
812
813
814
815
816
817
818
819
820
821
822
823
824
825
826
827
828
829
830
831
832
833
834
835
836
837
838
839
840
841
842
843
844
845
846
847
848
849
850
851
852
853
854
855
856
857
858
859
860
861
862
863
864
865
866
867
868
869
870
871
872
873
874
875
876
877
878
879
880
881
882
883
884
885
886
887
888
889
890
891
892
893
894
895
896
897
898
899
900
901
902
903
904
905
906
907
908
909
910
911
912
913
914
915
916
917
918
919
920
921
922
923
924
925
926
927
928
929
930
931
932
933
934
935
936
937
938
939
940
941
942
943
944
945
946
947
948
949
950
951
952
953
954
955
956
957
958
959
960
961
962
963
964
965
966
967
968
969
970
971
972
973
974
975
976
977
978
979
980
981
982
983
984
985
986
987
988
989
990
991
992
993
994
995
996
997
998
999
1000
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>AI Knowledge Base - User Guideline</title>
<script src="https://cdn.tailwindcss.com"></script>
<style>
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&display=swap');
body {
font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
}
.gradient-bg {
background: linear-gradient(to bottom right, #f0fdfa, #eff6ff, #f0fdf4);
}
.teal-gradient-btn {
background: linear-gradient(to right, #0d9488, #0f766e);
}
.teal-gradient-btn:hover {
background: linear-gradient(to right, #0f766e, #115e59);
}
.step-blue {
background-color: #dbeafe;
color: #1e40af;
}
.step-yellow {
background-color: #fef3c7;
color: #78350f;
}
.step-purple {
background-color: #e9d5ff;
color: #6b21a8;
}
.step-green {
background-color: #d1fae5;
color: #065f46;
}
/* Processing status dot animation */
.pulse-dot {
animation: pulseDot 1.2s ease-in-out infinite;
}
@keyframes pulseDot {
0%, 100% { opacity: 1; }
50% { opacity: 0.35; }
}
mark {
background-color: #ccfbf1;
color: #134e4a;
border-radius: 2px;
padding: 0 2px;
}
</style>
</head>
<body class="min-h-screen gradient-bg">
<!-- Hero Section -->
<div class="bg-white shadow-sm border-b">
<div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-8">
<a href="index.html" class="inline-flex items-center gap-2 text-sm font-medium text-teal-700 bg-teal-50 hover:bg-teal-100 rounded-lg px-3 py-2 mb-6 transition-colors">
<svg class="h-4 w-4" fill="none" stroke="currentColor" viewBox="0 0 24 24" aria-hidden="true">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15 19l-7-7 7-7" />
</svg>
Back to Home
</a>
<div class="text-center">
<div class="inline-block mb-6">
<div class="text-4xl font-bold text-teal-600 mb-2" style="letter-spacing: 2px;">
DEMO LOGO
</div>
<div class="text-sm text-gray-500 font-medium" style="letter-spacing: 4px;">
AI KNOWLEDGE BASE
</div>
</div>
<h1 class="text-4xl font-bold text-gray-900 mb-3">
AI Knowledge Base
</h1>
<p class="text-xl text-gray-600 max-w-3xl mx-auto mb-5">
Search research document content and trace relevant passages to their original sources.
</p>
<div class="inline-flex items-center gap-2 text-sm font-medium text-amber-800 bg-amber-50 border border-amber-200 rounded-lg px-4 py-2">
<svg class="h-4 w-4 flex-shrink-0" fill="none" stroke="currentColor" viewBox="0 0 24 24">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M13 16h-1v-4h-1m1-4h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z" />
</svg>
Feature showcase — all examples below use sample data and run locally in your browser
</div>
</div>
</div>
</div>
<!-- Main Content -->
<div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-12">
<div class="grid grid-cols-1 lg:grid-cols-3 gap-8">
<!-- Left Column - Guide Content -->
<div class="lg:col-span-2 space-y-8">
<!-- Overview -->
<section id="overview" class="bg-white rounded-xl shadow-lg p-6">
<h2 class="text-2xl font-bold text-gray-900 mb-4 flex items-center">
<svg class="h-6 w-6 mr-2 text-teal-600" fill="none" stroke="currentColor" viewBox="0 0 24 24">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 6.253v13m0-13C10.832 5.477 9.246 5 7.5 5S4.168 5.477 3 6.253v13C4.168 18.477 5.754 18 7.5 18s3.332.477 4.5 1.253m0-13C13.168 5.477 14.754 5 16.5 5c1.747 0 3.332.477 4.5 1.253v13C19.832 18.477 18.247 18 16.5 18c-1.746 0-3.332.477-4.5 1.253" />
</svg>
Overview
</h2>
<p class="text-gray-600 mb-4">
Research documents tend to scatter across drives, folders, and inboxes. The AI Knowledge Base turns them into
a searchable library: documents are imported, described with structured metadata, grouped into collections,
and made findable through natural-language search — with every result linking back to its original source.
</p>
<div class="grid grid-cols-2 md:grid-cols-4 gap-2 text-sm">
<a href="#demo-search" class="flex items-center gap-2 border border-gray-200 rounded-lg px-3 py-2 text-gray-700 hover:border-teal-500 hover:text-teal-700 transition-colors">
<svg class="w-4 h-4 text-teal-600 flex-shrink-0" fill="none" stroke="currentColor" viewBox="0 0 24 24">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M21 21l-6-6m2-5a7 7 0 11-14 0 7 7 0 0114 0z" />
</svg>
<span class="font-medium">Semantic Search</span>
</a>
<a href="#demo-import" class="flex items-center gap-2 border border-gray-200 rounded-lg px-3 py-2 text-gray-700 hover:border-teal-500 hover:text-teal-700 transition-colors">
<svg class="w-4 h-4 text-teal-600 flex-shrink-0" fill="none" stroke="currentColor" viewBox="0 0 24 24">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M7 16a4 4 0 01-.88-7.903A5 5 0 1115.9 6L16 6a5 5 0 011 9.9M15 13l-3-3m0 0l-3 3m3-3v12" />
</svg>
<span class="font-medium">Document Import</span>
</a>
<a href="#demo-organize" class="flex items-center gap-2 border border-gray-200 rounded-lg px-3 py-2 text-gray-700 hover:border-teal-500 hover:text-teal-700 transition-colors">
<svg class="w-4 h-4 text-teal-600 flex-shrink-0" fill="none" stroke="currentColor" viewBox="0 0 24 24">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M3 7v10a2 2 0 002 2h14a2 2 0 002-2V9a2 2 0 00-2-2h-6l-2-2H5a2 2 0 00-2 2z" />
</svg>
<span class="font-medium">Organization</span>
</a>
<a href="#demo-metadata" class="flex items-center gap-2 border border-gray-200 rounded-lg px-3 py-2 text-gray-700 hover:border-teal-500 hover:text-teal-700 transition-colors">
<svg class="w-4 h-4 text-teal-600 flex-shrink-0" fill="none" stroke="currentColor" viewBox="0 0 24 24">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 12h6m-6 4h6m2 5H7a2 2 0 01-2-2V5a2 2 0 012-2h5.586a1 1 0 01.707.293l5.414 5.414a1 1 0 01.293.707V19a2 2 0 01-2 2z" />
</svg>
<span class="font-medium">Metadata</span>
</a>
</div>
</section>
<!-- Workflow -->
<section id="workflow" class="bg-white rounded-xl shadow-lg p-6">
<h2 class="text-2xl font-bold text-gray-900 mb-6 flex items-center">
<svg class="h-6 w-6 mr-2 text-teal-600" fill="none" stroke="currentColor" viewBox="0 0 24 24">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M13 7l5 5m0 0l-5 5m5-5H6" />
</svg>
Workflow
</h2>
<div class="grid grid-cols-1 md:grid-cols-2 gap-4">
<div class="border-2 border-gray-200 rounded-lg p-4 hover:border-teal-500 transition-colors">
<div class="flex items-start">
<div class="step-blue rounded-full w-10 h-10 flex items-center justify-center font-bold text-lg mr-4 flex-shrink-0">1</div>
<div>
<h3 class="font-semibold text-gray-900 mb-1">Import Documents</h3>
<p class="text-sm text-gray-600">Add PDFs, Word files, or text files and watch each one move through the import queue</p>
</div>
</div>
</div>
<div class="border-2 border-gray-200 rounded-lg p-4 hover:border-teal-500 transition-colors">
<div class="flex items-start">
<div class="step-yellow rounded-full w-10 h-10 flex items-center justify-center font-bold text-lg mr-4 flex-shrink-0">2</div>
<div>
<h3 class="font-semibold text-gray-900 mb-1">Extract & Review Metadata</h3>
<p class="text-sm text-gray-600">Fields like title, type, and topics are pre-filled automatically, then checked and corrected by the user</p>
</div>
</div>
</div>
<div class="border-2 border-gray-200 rounded-lg p-4 hover:border-teal-500 transition-colors">
<div class="flex items-start">
<div class="step-purple rounded-full w-10 h-10 flex items-center justify-center font-bold text-lg mr-4 flex-shrink-0">3</div>
<div>
<h3 class="font-semibold text-gray-900 mb-1">Organize Knowledge</h3>
<p class="text-sm text-gray-600">Documents land in collections by project and can be browsed and filtered by type and tags</p>
</div>
</div>
</div>
<div class="border-2 border-gray-200 rounded-lg p-4 hover:border-teal-500 transition-colors">
<div class="flex items-start">
<div class="step-green rounded-full w-10 h-10 flex items-center justify-center font-bold text-lg mr-4 flex-shrink-0">4</div>
<div>
<h3 class="font-semibold text-gray-900 mb-1">Search & Explore</h3>
<p class="text-sm text-gray-600">Search in natural language, scan matching passages, and jump to the original source</p>
</div>
</div>
</div>
</div>
</section>
<!-- Demo: Semantic Search -->
<section id="demo-search" class="bg-white rounded-xl shadow-lg p-6">
<div class="flex items-center justify-between flex-wrap gap-2 mb-4">
<h2 class="text-2xl font-bold text-gray-900 flex items-center">
<svg class="h-6 w-6 mr-2 text-teal-600" fill="none" stroke="currentColor" viewBox="0 0 24 24">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M21 21l-6-6m2-5a7 7 0 11-14 0 7 7 0 0114 0z" />
</svg>
Semantic Search
</h2>
<span class="text-xs font-medium text-amber-800 bg-amber-50 border border-amber-200 rounded px-2 py-1">Demo — predefined results</span>
</div>
<p class="text-gray-600 text-sm mb-4">
Users describe what they are looking for in plain language. Results show the matching document,
a relevant passage, its metadata, and a link to the source entry.
<span class="font-medium text-gray-800">This demo returns predefined sample results and does not call any AI service.</span>
</p>
<div class="flex flex-col sm:flex-row gap-2 mb-3">
<input id="search-input" type="text" placeholder="e.g., What were the inclusion criteria for the pilot study?"
class="flex-1 border border-gray-300 rounded-lg px-4 py-2.5 text-sm focus:outline-none focus:ring-2 focus:ring-teal-500 focus:border-teal-500"
onkeydown="if(event.key==='Enter'){runSearch();}">
<button onclick="runSearch()" class="inline-flex items-center justify-center gap-2 bg-teal-600 hover:bg-teal-700 text-white text-sm font-medium px-5 py-2.5 rounded-lg transition-colors">
<svg class="h-4 w-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M21 21l-6-6m2-5a7 7 0 11-14 0 7 7 0 0114 0z" />
</svg>
Search
</button>
</div>
<!-- Example queries -->
<div class="flex flex-wrap items-center gap-2 mb-4">
<span class="text-xs text-gray-500 font-medium">Try:</span>
<button onclick="setQuery('inclusion criteria for the pilot study')" class="text-xs text-teal-700 bg-teal-50 hover:bg-teal-100 border border-teal-200 rounded-full px-3 py-1 transition-colors">inclusion criteria for the pilot study</button>
<button onclick="setQuery('how was survey data quality checked')" class="text-xs text-teal-700 bg-teal-50 hover:bg-teal-100 border border-teal-200 rounded-full px-3 py-1 transition-colors">how was survey data quality checked</button>
<button onclick="setQuery('imaging acquisition settings')" class="text-xs text-teal-700 bg-teal-50 hover:bg-teal-100 border border-teal-200 rounded-full px-3 py-1 transition-colors">imaging acquisition settings</button>
</div>
<!-- Search filters -->
<div class="grid grid-cols-1 sm:grid-cols-3 gap-2 mb-4">
<select id="search-filter-project" onchange="runSearch(true)" class="border border-gray-300 rounded-lg px-3 py-2 text-sm text-gray-700 focus:outline-none focus:ring-2 focus:ring-teal-500">
<option value="">All projects</option>
</select>
<select id="search-filter-type" onchange="runSearch(true)" class="border border-gray-300 rounded-lg px-3 py-2 text-sm text-gray-700 focus:outline-none focus:ring-2 focus:ring-teal-500">
<option value="">All document types</option>
</select>
<select id="search-filter-tag" onchange="runSearch(true)" class="border border-gray-300 rounded-lg px-3 py-2 text-sm text-gray-700 focus:outline-none focus:ring-2 focus:ring-teal-500">
<option value="">All tags</option>
</select>
</div>
<div id="search-results" class="space-y-3">
<p class="text-sm text-gray-500 text-center py-4">Enter a query or pick an example above to see sample results.</p>
</div>
</section>
<!-- Demo: Document Import -->
<section id="demo-import" class="bg-white rounded-xl shadow-lg p-6">
<div class="flex items-center justify-between flex-wrap gap-2 mb-4">
<h2 class="text-2xl font-bold text-gray-900 flex items-center">
<svg class="h-6 w-6 mr-2 text-teal-600" fill="none" stroke="currentColor" viewBox="0 0 24 24">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M7 16a4 4 0 01-.88-7.903A5 5 0 1115.9 6L16 6a5 5 0 011 9.9M15 13l-3-3m0 0l-3 3m3-3v12" />
</svg>
Document Import
</h2>
<span class="text-xs font-medium text-amber-800 bg-amber-50 border border-amber-200 rounded px-2 py-1">Sample data</span>
</div>
<p class="text-gray-600 text-sm mb-4">
Documents are added to an import queue and processed one by one. The table shows each file's name,
document type, and current import status. Click the button to run a simulated import.
</p>
<div class="overflow-x-auto border border-gray-200 rounded-lg">
<table class="w-full text-sm min-w-[480px]">
<thead>
<tr class="bg-gray-50 text-left text-xs text-gray-500 uppercase tracking-wider">
<th class="px-4 py-3 font-semibold">File Name</th>
<th class="px-4 py-3 font-semibold">Type</th>
<th class="px-4 py-3 font-semibold">Status</th>
</tr>
</thead>
<tbody id="import-table-body" class="divide-y divide-gray-100">
<!-- Rendered by JS -->
</tbody>
</table>
</div>
<div class="mt-4 flex items-center flex-wrap gap-3">
<button id="import-demo-btn" onclick="runImportDemo()" class="inline-flex items-center gap-2 bg-teal-600 hover:bg-teal-700 disabled:opacity-50 disabled:cursor-not-allowed text-white text-sm font-medium px-4 py-2 rounded-lg transition-colors">
<svg class="h-4 w-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M14.752 11.168l-3.197-2.132A1 1 0 0010 9.87v4.263a1 1 0 001.555.832l3.197-2.132a1 1 0 000-1.664z" />
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M21 12a9 9 0 11-18 0 9 9 0 0118 0z" />
</svg>
Run import demo
</button>
<button onclick="resetImportDemo()" class="inline-flex items-center gap-2 bg-gray-100 hover:bg-gray-200 text-gray-700 text-sm font-medium px-4 py-2 rounded-lg transition-colors">
<svg class="h-4 w-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 4v5h.582m15.356 2A8.001 8.001 0 004.582 9m0 0H9m11 11v-5h-.581m0 0a8.003 8.003 0 01-15.357-2m15.357 2H15" />
</svg>
Reset
</button>
<span class="text-xs text-gray-500">Simulated locally — no files are uploaded anywhere.</span>
</div>
</section>
<!-- Auxiliary: Knowledge Organization -->
<section id="demo-organize" class="bg-white rounded-xl shadow-lg p-6">
<div class="flex items-center justify-between flex-wrap gap-2 mb-3">
<h2 class="text-xl font-bold text-gray-900 flex items-center">
<svg class="h-5 w-5 mr-2 text-teal-600" fill="none" stroke="currentColor" viewBox="0 0 24 24">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M3 7v10a2 2 0 002 2h14a2 2 0 002-2V9a2 2 0 00-2-2h-6l-2-2H5a2 2 0 00-2 2z" />
</svg>
Knowledge Organization
</h2>
<span class="text-xs font-medium text-amber-800 bg-amber-50 border border-amber-200 rounded px-2 py-1">Sample data</span>
</div>
<p class="text-gray-600 text-sm mb-4">
Each document belongs to a project collection and carries a type and tags. Switch collections or filters to browse.
</p>
<!-- Collection tabs -->
<div class="flex flex-wrap gap-2 mb-3" id="collection-tabs" role="tablist" aria-label="Project collections">
<!-- Rendered by JS -->
</div>
<!-- Type / tag filters -->
<div class="flex flex-wrap items-center gap-2 mb-4 text-xs">
<span class="text-gray-500 font-medium">Filter:</span>
<div class="flex flex-wrap gap-2" id="type-filters">
<!-- Rendered by JS -->
</div>
</div>
<div id="doc-list" class="space-y-2">
<!-- Rendered by JS -->
</div>
<p id="doc-list-empty" class="hidden text-sm text-gray-500 text-center py-6">No documents match the current filters.</p>
</section>
<!-- Auxiliary: Metadata Management -->
<section id="demo-metadata" class="bg-white rounded-xl shadow-lg p-6">
<div class="flex items-center justify-between flex-wrap gap-2 mb-3">
<h2 class="text-xl font-bold text-gray-900 flex items-center">
<svg class="h-5 w-5 mr-2 text-teal-600" fill="none" stroke="currentColor" viewBox="0 0 24 24">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 12h6m-6 4h6m2 5H7a2 2 0 01-2-2V5a2 2 0 012-2h5.586a1 1 0 01.707.293l5.414 5.414a1 1 0 01.293.707V19a2 2 0 01-2 2z" />
</svg>
Metadata Management
</h2>
<span class="text-xs font-medium text-amber-800 bg-amber-50 border border-amber-200 rounded px-2 py-1">Sample data</span>
</div>
<p class="text-gray-600 text-sm mb-4">
Fields are auto-extracted during import, then reviewed by the user.
<span class="font-medium text-gray-800">Topics and Tags are editable in this demo</span> — click Edit and save to see a field flip from
<span class="font-medium">Auto-extracted</span> to <span class="font-medium text-green-700">Confirmed · edited</span>.
</p>
<div id="metadata-panel" class="border-2 border-teal-100 rounded-lg p-5 bg-teal-50/40">
<!-- Rendered by JS -->
</div>
</section>
<!-- Key Features -->
<section id="key-features" class="bg-white rounded-xl shadow-lg p-6">
<h2 class="text-2xl font-bold text-gray-900 mb-6 flex items-center">
<svg class="h-6 w-6 mr-2 text-teal-600" fill="none" stroke="currentColor" viewBox="0 0 24 24">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 12l2 2 4-4m6 2a9 9 0 11-18 0 9 9 0 0118 0z" />
</svg>
Key Features
</h2>
<div class="grid grid-cols-1 sm:grid-cols-2 gap-3">
<div class="flex items-center gap-3 p-3 border border-gray-200 rounded-lg">
<svg class="h-5 w-5 text-teal-600 flex-shrink-0" fill="none" stroke="currentColor" viewBox="0 0 24 24">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 13l4 4L19 7" />
</svg>
<p class="text-sm text-gray-700">PDF, Word, and text import with per-file status</p>
</div>
<div class="flex items-center gap-3 p-3 border border-gray-200 rounded-lg">
<svg class="h-5 w-5 text-teal-600 flex-shrink-0" fill="none" stroke="currentColor" viewBox="0 0 24 24">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 13l4 4L19 7" />
</svg>
<p class="text-sm text-gray-700">Auto-extracted metadata, reviewed and edited by the user</p>
</div>
<div class="flex items-center gap-3 p-3 border border-gray-200 rounded-lg">
<svg class="h-5 w-5 text-teal-600 flex-shrink-0" fill="none" stroke="currentColor" viewBox="0 0 24 24">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 13l4 4L19 7" />
</svg>
<p class="text-sm text-gray-700">Project collections with type and tag filters</p>
</div>
<div class="flex items-center gap-3 p-3 border border-gray-200 rounded-lg">
<svg class="h-5 w-5 text-teal-600 flex-shrink-0" fill="none" stroke="currentColor" viewBox="0 0 24 24">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 13l4 4L19 7" />
</svg>
<p class="text-sm text-gray-700">Natural-language search with passages traced to their source</p>
</div>
</div>
</section>
</div>
<!-- Right Column - About Card -->
<div class="lg:col-span-1">
<div class="bg-white rounded-xl shadow-lg p-8 sticky top-8">
<div class="text-center mb-6">
<h2 class="text-2xl font-bold text-gray-900 mb-2">
About This Page
</h2>
<p class="text-gray-600 text-sm">
A feature showcase of the AI Knowledge Base module
</p>
</div>
<div class="p-4 bg-gray-50 rounded-lg mb-6">
<div class="text-xs text-gray-600 space-y-2">
<div class="flex items-start">
<svg class="h-4 w-4 text-teal-600 mr-2 mt-0.5 flex-shrink-0" fill="none" stroke="currentColor" viewBox="0 0 24 24">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 12l2 2 4-4m6 2a9 9 0 11-18 0 9 9 0 0118 0z" />
</svg>
<p>All documents, projects, and search results on this page are fictional sample data</p>
</div>
<div class="flex items-start">
<svg class="h-4 w-4 text-teal-600 mr-2 mt-0.5 flex-shrink-0" fill="none" stroke="currentColor" viewBox="0 0 24 24">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 12l2 2 4-4m6 2a9 9 0 11-18 0 9 9 0 0118 0z" />
</svg>
<p>Interactions run entirely in your browser — no AI service is called and nothing is uploaded</p>
</div>
<div class="flex items-start">
<svg class="h-4 w-4 text-teal-600 mr-2 mt-0.5 flex-shrink-0" fill="none" stroke="currentColor" viewBox="0 0 24 24">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 12l2 2 4-4m6 2a9 9 0 11-18 0 9 9 0 0118 0z" />
</svg>
<p>This page is not connected to any production system</p>
</div>
</div>
</div>
<h3 class="text-sm font-medium text-gray-900 mb-3">On This Page</h3>
<nav class="space-y-1 text-sm">
<a href="#overview" class="flex items-center gap-2 text-gray-600 hover:text-teal-700 hover:bg-teal-50 rounded-lg px-3 py-2 transition-colors">
<span class="w-1.5 h-1.5 rounded-full bg-teal-500 flex-shrink-0"></span> Overview
</a>
<a href="#workflow" class="flex items-center gap-2 text-gray-600 hover:text-teal-700 hover:bg-teal-50 rounded-lg px-3 py-2 transition-colors">
<span class="w-1.5 h-1.5 rounded-full bg-teal-500 flex-shrink-0"></span> Workflow
</a>
<a href="#demo-search" class="flex items-center gap-2 text-gray-600 hover:text-teal-700 hover:bg-teal-50 rounded-lg px-3 py-2 transition-colors">
<span class="w-1.5 h-1.5 rounded-full bg-teal-500 flex-shrink-0"></span> Semantic Search
</a>
<a href="#demo-import" class="flex items-center gap-2 text-gray-600 hover:text-teal-700 hover:bg-teal-50 rounded-lg px-3 py-2 transition-colors">
<span class="w-1.5 h-1.5 rounded-full bg-teal-500 flex-shrink-0"></span> Document Import
</a>
<a href="#demo-organize" class="flex items-center gap-2 text-gray-600 hover:text-teal-700 hover:bg-teal-50 rounded-lg px-3 py-2 transition-colors">
<span class="w-1.5 h-1.5 rounded-full bg-teal-500 flex-shrink-0"></span> Knowledge Organization
</a>
<a href="#demo-metadata" class="flex items-center gap-2 text-gray-600 hover:text-teal-700 hover:bg-teal-50 rounded-lg px-3 py-2 transition-colors">
<span class="w-1.5 h-1.5 rounded-full bg-teal-500 flex-shrink-0"></span> Metadata Management
</a>
<a href="#key-features" class="flex items-center gap-2 text-gray-600 hover:text-teal-700 hover:bg-teal-50 rounded-lg px-3 py-2 transition-colors">
<span class="w-1.5 h-1.5 rounded-full bg-teal-500 flex-shrink-0"></span> Key Features
</a>
</nav>
</div>
</div>
</div>
</div>
<!-- Footer -->
<div class="bg-white border-t mt-12">
<div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-6">
<p class="text-center text-sm text-gray-600">
AI Knowledge Base
</p>
</div>
</div>
<script>
// ============================================================
// Sample data (fictional documents and projects, demo only)
// ============================================================
const DOCS = [
{
id: 'doc-1',
name: 'Microbiome Pilot - Study Protocol.pdf',
title: 'Microbiome Pilot Study Protocol (v2)',
type: 'PDF',
project: 'Microbiome Pilot Study',
topics: ['Study design', 'Eligibility'],
tags: ['protocol', 'v2'],
date: '2025-10-12',
source: 'Shared Drive / Microbiome / Protocols',
confirmed: { title: true, type: true, project: true, topics: false, tags: true, date: true }
},
{
id: 'doc-2',
name: 'Participant Survey Draft.docx',
title: 'Participant Survey - Wave 1 Draft',
type: 'Word',
project: 'Survey Methods 2025',
topics: ['Questionnaire design'],
tags: ['draft', 'wave-1'],
date: '2025-12-02',
source: 'Shared Drive / Surveys / Drafts',
confirmed: { title: true, type: true, project: true, topics: true, tags: false, date: true }
},
{
id: 'doc-3',
name: 'Sequencing QC Notes.txt',
title: 'Sequencing Batch QC Notes',
type: 'Text',
project: 'Microbiome Pilot Study',
topics: ['Quality control'],
tags: ['qc', 'lab-notes'],
date: '2025-12-18',
source: 'Lab Notebook Export / Batch 7',
confirmed: { title: false, type: true, project: true, topics: false, tags: false, date: true }
},
{
id: 'doc-4',
name: 'Imaging Protocol Review - Summary.pdf',
title: 'Imaging Protocol Review Summary',
type: 'PDF',
project: 'Imaging Protocol Review',
topics: ['Acquisition settings', 'Protocol review'],
tags: ['imaging', 'summary'],
date: '2025-12-27',
source: 'Shared Drive / Imaging / Reviews',
confirmed: { title: true, type: true, project: true, topics: true, tags: true, date: true }
},
{
id: 'doc-5',
name: 'Grant Aims Outline.docx',
title: 'Grant Application - Specific Aims Outline',
type: 'Word',
project: 'Microbiome Pilot Study',
topics: ['Funding', 'Aims'],
tags: ['draft'],
date: '2026-01-20',
source: 'Shared Drive / Grants / 2025',
confirmed: { title: true, type: true, project: false, topics: false, tags: true, date: true }
},
{
id: 'doc-6',
name: 'Data Dictionary - Survey Wave 1.pdf',
title: 'Survey Wave 1 Data Dictionary',
type: 'PDF',
project: 'Survey Methods 2025',
topics: ['Data documentation', 'Quality control'],
tags: ['data-dictionary', 'wave-1'],
date: '2026-05-06',
source: 'Shared Drive / Surveys / Documentation',
confirmed: { title: true, type: true, project: true, topics: true, tags: true, date: true }
}
];
const PROJECTS = [...new Set(DOCS.map(d => d.project))];
const TYPES = [...new Set(DOCS.map(d => d.type))];
const TAGS = [...new Set(DOCS.flatMap(d => d.tags))];
const TYPE_STYLES = {
'PDF': 'text-red-700 bg-red-50 border-red-200',
'Word': 'text-blue-700 bg-blue-50 border-blue-200',
'Text': 'text-gray-700 bg-gray-100 border-gray-200'
};
// ============================================================
// Demo 1: Document import
// ============================================================
const IMPORT_FILES = [
{ name: 'Microbiome Pilot - Study Protocol.pdf', type: 'PDF' },
{ name: 'Participant Survey Draft.docx', type: 'Word' },
{ name: 'Sequencing QC Notes.txt', type: 'Text' },
{ name: 'Imaging Protocol Review - Summary.pdf', type: 'PDF' }
];
let importStatuses = [];
let importTimers = [];
function statusBadge(status) {
if (status === 'Imported') {
return '<span class="inline-flex items-center gap-1.5 text-xs font-medium text-green-700 bg-green-50 border border-green-200 rounded-full px-2.5 py-1"><span class="w-1.5 h-1.5 rounded-full bg-green-500"></span>Imported</span>';
}
if (status === 'Processing') {
return '<span class="inline-flex items-center gap-1.5 text-xs font-medium text-amber-700 bg-amber-50 border border-amber-200 rounded-full px-2.5 py-1"><span class="w-1.5 h-1.5 rounded-full bg-amber-500 pulse-dot"></span>Processing</span>';
}
return '<span class="inline-flex items-center gap-1.5 text-xs font-medium text-gray-600 bg-gray-100 border border-gray-200 rounded-full px-2.5 py-1"><span class="w-1.5 h-1.5 rounded-full bg-gray-400"></span>Queued</span>';
}
function typeBadge(type) {
return '<span class="inline-flex text-xs font-medium border rounded px-2 py-0.5 ' + (TYPE_STYLES[type] || TYPE_STYLES['Text']) + '">' + type + '</span>';
}
function renderImportTable() {
const body = document.getElementById('import-table-body');
body.innerHTML = IMPORT_FILES.map((f, i) => `
<tr>
<td class="px-4 py-3 text-gray-900 font-medium">${f.name}</td>
<td class="px-4 py-3">${typeBadge(f.type)}</td>
<td class="px-4 py-3">${statusBadge(importStatuses[i])}</td>
</tr>
`).join('');
}
function resetImportDemo() {
importTimers.forEach(clearTimeout);
importTimers = [];
importStatuses = ['Imported', 'Queued', 'Queued', 'Queued'];
document.getElementById('import-demo-btn').disabled = false;
renderImportTable();
}
function runImportDemo() {
const btn = document.getElementById('import-demo-btn');
btn.disabled = true;
importTimers.forEach(clearTimeout);
importTimers = [];
importStatuses = ['Imported', 'Queued', 'Queued', 'Queued'];
renderImportTable();
let delay = 400;
for (let i = 1; i < IMPORT_FILES.length; i++) {
importTimers.push(setTimeout(() => { importStatuses[i] = 'Processing'; renderImportTable(); }, delay));
delay += 900;
importTimers.push(setTimeout(() => { importStatuses[i] = 'Imported'; renderImportTable(); }, delay));
delay += 300;
}
importTimers.push(setTimeout(() => { btn.disabled = false; }, delay));
}
// ============================================================
// Demo 2: Knowledge organization (collections + filters)
// ============================================================
let activeCollection = 'All projects';
let activeType = '';
function renderCollectionTabs() {
const tabs = ['All projects', ...PROJECTS];
document.getElementById('collection-tabs').innerHTML = tabs.map(p => {
const active = p === activeCollection;
return `<button onclick="setCollection('${p.replace(/'/g, "\\'")}')" role="tab" aria-selected="${active}"
class="text-sm font-medium rounded-lg px-3 py-1.5 border transition-colors ${active
? 'bg-teal-600 text-white border-teal-600'
: 'bg-white text-gray-600 border-gray-300 hover:border-teal-400 hover:text-teal-700'}">${p}</button>`;
}).join('');
}
function renderTypeFilters() {
const chips = ['', ...TYPES];
document.getElementById('type-filters').innerHTML = chips.map(t => {
const label = t === '' ? 'All types' : t;
const active = t === activeType;
return `<button onclick="setTypeFilter('${t}')"
class="rounded-full px-3 py-1 border transition-colors ${active
? 'bg-teal-50 text-teal-700 border-teal-400 font-semibold'
: 'bg-white text-gray-600 border-gray-300 hover:border-teal-400'}">${label}</button>`;
}).join('');
}
function setCollection(p) { activeCollection = p; renderCollectionTabs(); renderDocList(); }
function setTypeFilter(t) { activeType = t; renderTypeFilters(); renderDocList(); }
function renderDocList() {
const docs = DOCS.filter(d =>
(activeCollection === 'All projects' || d.project === activeCollection) &&
(activeType === '' || d.type === activeType)
);
const list = document.getElementById('doc-list');
const empty = document.getElementById('doc-list-empty');
empty.classList.toggle('hidden', docs.length > 0);
list.innerHTML = docs.map(d => `
<div class="flex items-start sm:items-center justify-between gap-3 border border-gray-200 rounded-lg p-3 hover:border-teal-400 hover:shadow-sm transition-all flex-col sm:flex-row">
<div class="min-w-0">
<div class="font-medium text-gray-900 text-sm truncate">${d.name}</div>
<div class="flex flex-wrap items-center gap-1.5 mt-1.5">
${typeBadge(d.type)}
<span class="text-xs text-gray-500">${d.project}</span>
${d.tags.map(t => `<span class="text-xs text-teal-700 bg-teal-50 border border-teal-100 rounded px-1.5 py-0.5">#${t}</span>`).join('')}
</div>
</div>
<button onclick="showMetadata('${d.id}', true)" class="flex-shrink-0 text-xs font-medium text-teal-700 bg-teal-50 hover:bg-teal-100 border border-teal-200 rounded-lg px-3 py-1.5 transition-colors">
View metadata
</button>
</div>
`).join('');
}
// ============================================================
// Demo 3: Metadata management
// ============================================================
let currentMetaDocId = 'doc-3'; // starts with a doc that has unconfirmed fields
let editingField = null; // 'topics' | 'tags' | null
function fieldBadge(confirmed, edited) {
if (edited) {
return '<span class="inline-flex text-xs font-medium text-green-700 bg-green-50 border border-green-200 rounded px-1.5 py-0.5">Confirmed · edited</span>';
}
return confirmed
? '<span class="inline-flex text-xs font-medium text-green-700 bg-green-50 border border-green-200 rounded px-1.5 py-0.5">Confirmed</span>'
: '<span class="inline-flex text-xs font-medium text-gray-700 bg-gray-100 border border-gray-200 rounded px-1.5 py-0.5">Auto-extracted</span>';
}
function metaRow(label, value, confirmed, edited) {
return `
<div class="flex flex-col sm:flex-row sm:items-center gap-1 sm:gap-3 py-2.5 border-b border-teal-100 last:border-b-0">
<div class="w-36 flex-shrink-0 text-xs font-semibold text-gray-500 uppercase tracking-wider">${label}</div>
<div class="flex-1 text-sm text-gray-900">${value}</div>
<div class="flex-shrink-0">${fieldBadge(confirmed, edited)}</div>
</div>`;
}
// Editable row for Topics / Tags: shows Edit button, or an inline input when editing
function editableMetaRow(label, field, d) {
const display = field === 'tags' ? d.tags.map(t => '#' + t).join(' ') : d[field].join(', ');
if (editingField === field) {
const raw = d[field].join(', ');
return `
<div class="flex flex-col sm:flex-row sm:items-center gap-2 sm:gap-3 py-2.5 border-b border-teal-100 last:border-b-0">
<div class="w-36 flex-shrink-0 text-xs font-semibold text-gray-500 uppercase tracking-wider">${label}</div>
<div class="flex-1 flex flex-col sm:flex-row gap-2">
<input id="edit-input-${field}" type="text" value="${raw.replace(/"/g, '"')}"
class="flex-1 border border-teal-300 rounded-lg px-3 py-1.5 text-sm focus:outline-none focus:ring-2 focus:ring-teal-500"
onkeydown="if(event.key==='Enter'){saveField('${field}');} if(event.key==='Escape'){cancelEdit();}">
<div class="flex gap-2">
<button onclick="saveField('${field}')" class="text-xs font-medium text-white bg-teal-600 hover:bg-teal-700 rounded-lg px-3 py-1.5 transition-colors">Save</button>
<button onclick="cancelEdit()" class="text-xs font-medium text-gray-600 bg-gray-100 hover:bg-gray-200 rounded-lg px-3 py-1.5 transition-colors">Cancel</button>
</div>
</div>
<div class="hidden sm:block flex-shrink-0 text-xs text-gray-400">comma-separated</div>
</div>`;
}
return `
<div class="flex flex-col sm:flex-row sm:items-center gap-1 sm:gap-3 py-2.5 border-b border-teal-100 last:border-b-0">
<div class="w-36 flex-shrink-0 text-xs font-semibold text-gray-500 uppercase tracking-wider">${label}</div>
<div class="flex-1 text-sm text-gray-900 flex items-center gap-2 flex-wrap">
<span>${display}</span>
<button onclick="startEdit('${field}')" class="inline-flex items-center gap-1 text-xs font-medium text-teal-700 hover:text-teal-800 hover:underline">
<svg class="h-3 w-3" fill="none" stroke="currentColor" viewBox="0 0 24 24">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M11 5H6a2 2 0 00-2 2v11a2 2 0 002 2h11a2 2 0 002-2v-5m-1.414-9.414a2 2 0 112.828 2.828L11.828 15H9v-2.828l8.586-8.586z" />
</svg>
Edit
</button>
</div>
<div class="flex-shrink-0">${fieldBadge(d.confirmed[field], d.edited && d.edited[field])}</div>
</div>`;
}
function startEdit(field) {
editingField = field;
showMetadata(currentMetaDocId, false);
const input = document.getElementById('edit-input-' + field);
if (input) { input.focus(); input.select(); }
}
function cancelEdit() {
editingField = null;
showMetadata(currentMetaDocId, false);
}
function saveField(field) {
const d = DOCS.find(x => x.id === currentMetaDocId);
const input = document.getElementById('edit-input-' + field);
if (!d || !input) return;
const values = input.value.split(',').map(s => s.trim().replace(/^#/, '')).filter(Boolean);
if (values.length === 0) return; // keep at least one value
d[field] = values;
d.confirmed[field] = true;
if (!d.edited) d.edited = {};
d.edited[field] = true;
editingField = null;
showMetadata(currentMetaDocId, false);
renderDocList(); // tags shown in the collection browser stay in sync
}
function showMetadata(id, scroll) {
if (id !== currentMetaDocId) editingField = null;
currentMetaDocId = id;
const d = DOCS.find(x => x.id === id);
if (!d) return;
if (!d.edited) d.edited = {};
const allConfirmed = Object.values(d.confirmed).every(Boolean);
document.getElementById('metadata-panel').innerHTML = `
<div class="flex items-start justify-between gap-3 flex-wrap mb-3">
<div>
<div class="text-xs font-semibold text-teal-700 uppercase tracking-wider mb-1">Metadata record</div>
<div class="font-semibold text-gray-900">${d.name}</div>
</div>
${allConfirmed
? '<span class="inline-flex items-center gap-1 text-xs font-medium text-green-700 bg-green-50 border border-green-200 rounded-full px-3 py-1">All fields reviewed</span>'
: `<button onclick="confirmAllFields()" class="text-xs font-medium text-white bg-teal-600 hover:bg-teal-700 rounded-lg px-3 py-1.5 transition-colors">Confirm remaining fields</button>`}
</div>
<div>
${metaRow('Title', d.title, d.confirmed.title, d.edited.title)}
${metaRow('Source', d.source, true, false)}
${metaRow('Document type', typeBadge(d.type), d.confirmed.type, d.edited.type)}
${metaRow('Project', d.project, d.confirmed.project, d.edited.project)}
${editableMetaRow('Topics', 'topics', d)}
${editableMetaRow('Tags', 'tags', d)}
${metaRow('Date', d.date, d.confirmed.date, d.edited.date)}
</div>
<p class="text-xs text-gray-500 mt-3">
Fields marked <strong>Auto-extracted</strong> were pre-filled during import and are awaiting review.
Editing a field saves your correction and marks it <strong>Confirmed · edited</strong>.
In the full application every field is editable; this demo enables Topics and Tags.
</p>`;
if (scroll) {
document.getElementById('demo-metadata').scrollIntoView({ behavior: 'smooth', block: 'start' });
}
}
function confirmAllFields() {
const d = DOCS.find(x => x.id === currentMetaDocId);
if (!d) return;
Object.keys(d.confirmed).forEach(k => d.confirmed[k] = true);
showMetadata(currentMetaDocId, false);
}
// ============================================================
// Demo 4: Semantic search (predefined results, no AI calls)
// ============================================================
const SEARCH_SETS = [
{
keywords: ['inclusion', 'criteria', 'eligib', 'pilot'],
results: [
{
docId: 'doc-1',
snippet: 'Participants aged 18–65 meeting the <mark>inclusion criteria</mark> in Section 4.2, with no antibiotic use in the 90 days before enrollment, are eligible for the <mark>pilot study</mark>.',
ref: {
location: 'Page 6 · Section 4.2 Eligibility Criteria',
excerpt: '“4.2 Eligibility Criteria. Adults aged 18–65 are eligible if they meet all <mark>inclusion criteria</mark>: ability to provide informed consent, no systemic antibiotic use within the 90 days prior to enrollment, and willingness to complete the three stool-sample collections described in Section 5. Exclusion criteria are listed in Table 2.”'
}
},
{
docId: 'doc-5',
snippet: 'Aim 1 evaluates feasibility of recruitment under the proposed <mark>eligibility criteria</mark> within the first six months of the pilot.',
ref: {
location: 'Page 1 · Specific Aim 1',
excerpt: '“Specific Aim 1: Assess the feasibility of recruiting 40 participants under the proposed <mark>eligibility criteria</mark> within six months, using clinic referrals and community outreach as the primary recruitment channels.”'
}
}
]
},
{
keywords: ['quality', 'qc', 'check', 'survey data'],
results: [
{
docId: 'doc-6',
snippet: 'Each variable lists its allowed range and missing-value codes; <mark>quality checks</mark> flag out-of-range entries during <mark>survey data</mark> entry.',
ref: {
location: 'Page 12 · Variable QC Rules',
excerpt: '“Each variable entry specifies the allowed value range, unit, and missing-value codes (-97, -98, -99). Automated <mark>quality checks</mark> run at data entry and flag out-of-range values for review before the record is accepted into the <mark>survey data</mark>set.”'
}
},
{
docId: 'doc-3',
snippet: 'Batch 7 passed library <mark>QC</mark>: two samples re-run after low read counts; all others within expected thresholds.',
ref: {
location: 'Lines 24–31 · Batch 7 summary',
excerpt: '“Batch 7 <mark>QC</mark> summary: 94/96 libraries passed on first run. Samples S-041 and S-087 showed low read counts and were re-sequenced; both passed on the second run. All remaining metrics (duplication rate, insert size) within expected thresholds.”'
}
}
]
},
{
keywords: ['imaging', 'acquisition', 'scan', 'settings'],
results: [
{
docId: 'doc-4',
snippet: 'The review recommends harmonizing <mark>acquisition settings</mark> across sites, including field of view and slice thickness, before the next <mark>imaging</mark> wave.',
ref: {
location: 'Page 3 · Recommendations',
excerpt: '“Recommendation 2: Harmonize <mark>acquisition settings</mark> across the two participating sites — in particular field of view, slice thickness, and repetition time — and document the agreed parameters in the shared protocol before the next <mark>imaging</mark> wave begins.”'
}
}
]
}
];
const DEFAULT_RESULTS = [
{
docId: 'doc-1',
snippet: 'Study protocol describing design, eligibility, and sample collection schedule for the pilot.',
ref: {
location: 'Page 2 · Study Synopsis',
excerpt: '“This protocol describes a single-site pilot study of gut microbiome composition, covering study design, eligibility, sample collection schedule, and analysis plan.”'
}
},
{
docId: 'doc-6',
snippet: 'Data dictionary covering variable definitions, allowed values, and quality-check rules for Wave 1.',
ref: {
location: 'Page 1 · Overview',
excerpt: '“This data dictionary documents all Wave 1 survey variables, including definitions, allowed values, units, and the quality-check rules applied at data entry.”'
}
},
{
docId: 'doc-4',
snippet: 'Summary of the protocol review with recommendations on acquisition settings.',
ref: {
location: 'Page 1 · Purpose',
excerpt: '“This document summarizes the cross-site review of the imaging protocol and lists the recommendations agreed by both site leads.”'
}
}
];
let lastResults = null; // remember results so filter changes re-apply
function setQuery(q) {
document.getElementById('search-input').value = q;
runSearch();
}
function populateSearchFilters() {
const projSel = document.getElementById('search-filter-project');
const typeSel = document.getElementById('search-filter-type');
const tagSel = document.getElementById('search-filter-tag');
PROJECTS.forEach(p => projSel.insertAdjacentHTML('beforeend', `<option value="${p}">${p}</option>`));
TYPES.forEach(t => typeSel.insertAdjacentHTML('beforeend', `<option value="${t}">${t}</option>`));
TAGS.forEach(t => tagSel.insertAdjacentHTML('beforeend', `<option value="${t}">#${t}</option>`));
}
function runSearch(fromFilter) {
const q = document.getElementById('search-input').value.trim().toLowerCase();
const container = document.getElementById('search-results');
if (!q && !fromFilter) {
container.innerHTML = '<p class="text-sm text-gray-500 text-center py-4">Enter a query or pick an example above to see sample results.</p>';
lastResults = null;
return;
}
if (!q && fromFilter && !lastResults) return;
let results = lastResults;
if (q) {
const set = SEARCH_SETS.find(s => s.keywords.some(k => q.includes(k)));
results = set ? set.results : DEFAULT_RESULTS;
lastResults = results;
}
const fp = document.getElementById('search-filter-project').value;
const ft = document.getElementById('search-filter-type').value;
const fg = document.getElementById('search-filter-tag').value;
const filtered = results.filter(r => {
const d = DOCS.find(x => x.id === r.docId);
return (!fp || d.project === fp) && (!ft || d.type === ft) && (!fg || d.tags.includes(fg));
});
if (filtered.length === 0) {
container.innerHTML = '<p class="text-sm text-gray-500 text-center py-4">No sample results match the current query and filters.</p>';
return;
}
container.innerHTML = filtered.map((r, i) => {
const d = DOCS.find(x => x.id === r.docId);
return `
<div class="border border-gray-200 rounded-lg p-4 hover:border-teal-400 hover:shadow-sm transition-all">
<div class="flex items-start justify-between gap-3 flex-wrap">
<h4 class="font-semibold text-gray-900 text-sm">${d.title}</h4>
<button onclick="toggleExcerpt(${i})" class="flex-shrink-0 inline-flex items-center gap-1 text-xs font-medium text-teal-700 bg-teal-50 hover:bg-teal-100 border border-teal-200 rounded-lg px-3 py-1 transition-colors">
View source
<svg id="excerpt-chevron-${i}" class="h-3 w-3 transition-transform" fill="none" stroke="currentColor" viewBox="0 0 24 24">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 9l-7 7-7-7" />
</svg>
</button>
</div>
<p class="text-sm text-gray-600 mt-2 leading-relaxed">${r.snippet}</p>
<div class="flex flex-wrap items-center gap-1.5 mt-3">
${typeBadge(d.type)}
<span class="text-xs text-gray-500">${d.project}</span>
<span class="text-xs text-gray-400">·</span>
<span class="text-xs text-gray-500">${d.date}</span>
${d.tags.map(t => `<span class="text-xs text-teal-700 bg-teal-50 border border-teal-100 rounded px-1.5 py-0.5">#${t}</span>`).join('')}
</div>
<div id="excerpt-${i}" class="hidden mt-3 border-l-4 border-teal-300 bg-teal-50/60 rounded-r-lg p-3">
<div class="flex flex-wrap items-center gap-x-2 gap-y-1 text-xs text-gray-500 mb-2">
<svg class="h-3.5 w-3.5 text-teal-600 flex-shrink-0" fill="none" stroke="currentColor" viewBox="0 0 24 24">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 12h6m-6 4h6m2 5H7a2 2 0 01-2-2V5a2 2 0 012-2h5.586a1 1 0 01.707.293l5.414 5.414a1 1 0 01.293.707V19a2 2 0 01-2 2z" />
</svg>
<span class="font-medium text-gray-700">${d.name}</span>
<span class="text-gray-400">·</span>
<span>${r.ref.location}</span>
</div>
<p class="text-sm text-gray-700 leading-relaxed italic">${r.ref.excerpt}</p>
<button onclick="showMetadata('${d.id}', true)" class="mt-2 text-xs font-medium text-teal-700 hover:text-teal-800 hover:underline">
Open metadata record →
</button>
</div>
</div>`;
}).join('')
+ '<p class="text-xs text-gray-400 text-center pt-1">Demo search — results and excerpts are predefined sample data; no AI service is called.</p>';
}
function toggleExcerpt(i) {
const panel = document.getElementById('excerpt-' + i);
const chevron = document.getElementById('excerpt-chevron-' + i);
if (!panel) return;
const nowHidden = panel.classList.toggle('hidden');
if (chevron) chevron.style.transform = nowHidden ? '' : 'rotate(180deg)';
}
// ============================================================
// Init
// ============================================================
document.addEventListener('DOMContentLoaded', function () {
resetImportDemo();
renderCollectionTabs();
renderTypeFilters();
renderDocList();
showMetadata(currentMetaDocId, false);
populateSearchFilters();
// Show a worked example on first load: run a sample search and
// expand the first result's source excerpt, so the core
// "search -> trace to source" flow is visible without any clicks.
setQuery('inclusion criteria for the pilot study');
toggleExcerpt(0);
});
</script>