-
Notifications
You must be signed in to change notification settings - Fork 15
/
Copy pathlabel.html
805 lines (767 loc) · 62.6 KB
/
label.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
786
787
788
789
790
791
792
793
794
795
796
797
798
799
800
801
802
803
804
805
<!DOCTYPE html>
<html lang="en" class="scroll-smooth">
<!-- Page-specific meta tags -->
<title>MONAI Label</title>
<meta name="description" content="MONAI Label is an intelligent image labeling and learning tool that uses AI assistance to reduce the time and effort of annotating new datasets. By utilizing user interactions, MONAI">
<meta property="og:title" content="MONAI Label">
<meta property="og:description" content="MONAI Label is an intelligent image labeling and learning tool that uses AI assistance to reduce the time and effort of annotating new datasets. By utilizing user interactions, MONAI">
<meta property="og:url" content="https://monai.io/label.html">
<meta name="twitter:title" content="MONAI Label">
<meta name="twitter:description" content="MONAI Label is an intelligent image labeling and learning tool that uses AI assistance to reduce the time and effort of annotating new datasets. By utilizing user interactions, MONAI">
<link rel="canonical" href="https://monai.io/label.html">
<!-- Include Head Component -->
<!-- #include file="components/head.html" -->
<body class="flex flex-col min-h-screen">
<!-- #include file="components/header.html" -->
<main class="flex-grow pt-20">
<!-- Overview Section -->
<section id="overview" class="py-24 bg-white">
<div class="container">
<div class="grid grid-cols-1 lg:grid-cols-2 gap-20 items-center">
<div class="max-w-xl">
<h1 class="text-4xl font-bold text-gray-800 mb-8 relative inline-block pb-2">
MONAI Label
<span class="absolute bottom-0 left-0 w-full h-0.5 bg-brand-primary"></span>
</h1>
<p class="text-lg text-gray-600 leading-relaxed mb-8">
MONAI Label is an intelligent image labeling and learning tool that enables you to create training datasets and build AI annotation models to accelerate the development of AI applications in medical imaging.
</p>
<div class="flex flex-wrap gap-4 mb-8">
<a href="#getting-started" class="px-6 py-2.5 rounded-lg bg-brand-primary text-white hover:bg-brand-dark transition-colors inline-flex items-center gap-2 group">
Get Started
<svg class="w-4 h-4 transition-transform group-hover:translate-x-1" 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"></path>
</svg>
</a>
<a href="https://docs.monai.io/projects/label/en/latest/" target="_blank" rel="noopener noreferrer" class="px-6 py-2.5 rounded-lg bg-white text-brand-primary border-2 border-brand-primary hover:bg-brand-light transition-colors inline-flex items-center gap-2 group">
Documentation
<svg class="w-4 h-4 transition-transform group-hover:translate-x-1" 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"></path>
</svg>
</a>
<a href="wg_human_ai_interaction.html" class="px-6 py-2.5 rounded-lg bg-white text-brand-primary border-2 border-brand-primary hover:bg-brand-light transition-colors inline-flex items-center gap-2 group">
Get Involved
<svg class="w-4 h-4 transition-transform group-hover:translate-x-1" 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"></path>
</svg>
</a>
</div>
</div>
<div class="hidden lg:flex lg:justify-center">
<img src="assets/img/big_plane.png" alt="MONAI Label" class="w-full max-w-lg mx-auto">
</div>
</div>
</div>
</section>
<!-- Features Section -->
<section class="py-24 bg-brand-dark/15">
<div class="container px-4 sm:px-6 lg:px-8">
<div class="text-center max-w-4xl mx-auto mb-16">
<h2 class="text-4xl font-bold text-gray-800 mb-8 relative inline-block pb-2">
Annotation Tools for Clinical Workflows
<span class="absolute bottom-0 left-0 w-full h-0.5 bg-brand-primary"></span>
</h2>
<p class="text-xl text-gray-600">
MONAI Label combines AI assistance with clinical expertise to deliver fast, accurate, and consistent annotations. Our tools adapt to your workflow while continuously learning from your expertise.
</p>
</div>
<div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-8 max-w-6xl mx-auto">
<!-- AI-Assisted Annotation Card -->
<div class="bg-white p-8 border border-gray-200 rounded-lg shadow-sm hover:shadow-md transition-all duration-300 flex flex-col">
<div class="text-brand-primary mb-6">
<svg class="w-12 h-12" fill="none" stroke="currentColor" viewBox="0 0 24 24">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 3v2m6-2v2M9 19v2m6-2v2M5 9H3m2 6H3m18-6h-2m2 6h-2M7 19h10a2 2 0 002-2V7a2 2 0 00-2-2H7a2 2 0 00-2 2v10a2 2 0 002 2zM9 9h6v6H9V9z"></path>
</svg>
</div>
<h3 class="text-xl font-bold text-gray-800 mb-4">AI-Assisted Annotation</h3>
<div class="flex-grow space-y-4">
<div class="flex items-start gap-3">
<div class="flex-shrink-0 w-6 h-6 rounded-full bg-brand-primary/10 flex items-center justify-center">
<svg class="w-4 h-4 text-brand-primary" fill="none" stroke="currentColor" viewBox="0 0 24 24">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 13l4 4L19 7"></path>
</svg>
</div>
<p class="text-gray-600">Interactive AI models for faster annotation</p>
</div>
<div class="flex items-start gap-3">
<div class="flex-shrink-0 w-6 h-6 rounded-full bg-brand-primary/10 flex items-center justify-center">
<svg class="w-4 h-4 text-brand-primary" fill="none" stroke="currentColor" viewBox="0 0 24 24">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 13l4 4L19 7"></path>
</svg>
</div>
<p class="text-gray-600">Active learning for model improvement</p>
</div>
<div class="flex items-start gap-3">
<div class="flex-shrink-0 w-6 h-6 rounded-full bg-brand-primary/10 flex items-center justify-center">
<svg class="w-4 h-4 text-brand-primary" fill="none" stroke="currentColor" viewBox="0 0 24 24">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 13l4 4L19 7"></path>
</svg>
</div>
<p class="text-gray-600">Real-time AI assistance</p>
</div>
</div>
</div>
<!-- Clinical Integration Card -->
<div class="bg-white p-8 border border-gray-200 rounded-lg shadow-sm hover:shadow-md transition-all duration-300 flex flex-col">
<div class="text-brand-primary mb-6">
<svg class="w-12 h-12" fill="none" stroke="currentColor" viewBox="0 0 24 24">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 11H5m14 0a2 2 0 012 2v6a2 2 0 01-2 2H5a2 2 0 01-2-2v-6a2 2 0 012-2m14 0V9a2 2 0 00-2-2M5 11V9a2 2 0 012-2m0 0V5a2 2 0 012-2h6a2 2 0 012 2v2M7 7h10"></path>
</svg>
</div>
<h3 class="text-xl font-bold text-gray-800 mb-4">Clinical Integration</h3>
<div class="flex-grow space-y-4">
<div class="flex items-start gap-3">
<div class="flex-shrink-0 w-6 h-6 rounded-full bg-brand-primary/10 flex items-center justify-center">
<svg class="w-4 h-4 text-brand-primary" fill="none" stroke="currentColor" viewBox="0 0 24 24">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 13l4 4L19 7"></path>
</svg>
</div>
<p class="text-gray-600">3D Slicer, MITK, OHIF viewer integration</p>
</div>
<div class="flex items-start gap-3">
<div class="flex-shrink-0 w-6 h-6 rounded-full bg-brand-primary/10 flex items-center justify-center">
<svg class="w-4 h-4 text-brand-primary" fill="none" stroke="currentColor" viewBox="0 0 24 24">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 13l4 4L19 7"></path>
</svg>
</div>
<p class="text-gray-600">DICOM and PACS integration</p>
</div>
<div class="flex items-start gap-3">
<div class="flex-shrink-0 w-6 h-6 rounded-full bg-brand-primary/10 flex items-center justify-center">
<svg class="w-4 h-4 text-brand-primary" fill="none" stroke="currentColor" viewBox="0 0 24 24">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 13l4 4L19 7"></path>
</svg>
</div>
<p class="text-gray-600">Multi-user collaboration support</p>
</div>
</div>
</div>
<!-- Extensible Platform Card -->
<div class="bg-white p-8 border border-gray-200 rounded-lg shadow-sm hover:shadow-md transition-all duration-300 flex flex-col">
<div class="text-brand-primary mb-6">
<svg class="w-12 h-12" fill="none" stroke="currentColor" viewBox="0 0 24 24">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 5a1 1 0 011-1h14a1 1 0 011 1v2a1 1 0 01-1 1H5a1 1 0 01-1-1V5zM4 13a1 1 0 011-1h6a1 1 0 011 1v6a1 1 0 01-1 1H5a1 1 0 01-1-1v-6zM16 13a1 1 0 011-1h2a1 1 0 011 1v6a1 1 0 01-1 1h-2a1 1 0 01-1-1v-6z"></path>
</svg>
</div>
<h3 class="text-xl font-bold text-gray-800 mb-4">Extensible Platform</h3>
<div class="flex-grow space-y-4">
<div class="flex items-start gap-3">
<div class="flex-shrink-0 w-6 h-6 rounded-full bg-brand-primary/10 flex items-center justify-center">
<svg class="w-4 h-4 text-brand-primary" fill="none" stroke="currentColor" viewBox="0 0 24 24">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 13l4 4L19 7"></path>
</svg>
</div>
<p class="text-gray-600">Customizable annotation strategies</p>
</div>
<div class="flex items-start gap-3">
<div class="flex-shrink-0 w-6 h-6 rounded-full bg-brand-primary/10 flex items-center justify-center">
<svg class="w-4 h-4 text-brand-primary" fill="none" stroke="currentColor" viewBox="0 0 24 24">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 13l4 4L19 7"></path>
</svg>
</div>
<p class="text-gray-600">Plugin architecture for flexibility</p>
</div>
<div class="flex items-start gap-3">
<div class="flex-shrink-0 w-6 h-6 rounded-full bg-brand-primary/10 flex items-center justify-center">
<svg class="w-4 h-4 text-brand-primary" fill="none" stroke="currentColor" viewBox="0 0 24 24">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 13l4 4L19 7"></path>
</svg>
</div>
<p class="text-gray-600">Easy integration with existing tools</p>
</div>
</div>
</div>
</div>
</div>
</section>
<!-- Use Cases Section -->
<section class="py-24 bg-white">
<div class="container">
<div class="text-center max-w-4xl mx-auto mb-16">
<h2 class="text-4xl font-bold text-gray-800 mb-8 relative inline-block pb-2">
Domain-Specific Solutions
<span class="absolute bottom-0 left-0 w-full h-0.5 bg-brand-primary"></span>
</h2>
<p class="text-xl text-gray-600">
MONAI Label delivers specialized solutions optimized for each medical imaging domain. Our tools adapt to your specific needs, whether you're working with 3D volumes, microscopy slides, or video sequences.
</p>
</div>
<div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-8">
<!-- Radiology Card -->
<div class="bg-white p-6 border border-gray-200 hover:border-brand-primary shadow-sm hover:shadow-md transition-all duration-300 h-full flex flex-col rounded-lg overflow-hidden">
<div class="aspect-w-16 aspect-h-9 rounded-lg overflow-hidden mb-6">
<img class="object-cover w-full h-full transform transition-transform duration-300 hover:scale-105" src="assets/img/mri_label.png" alt="Radiology Use Case">
</div>
<div class="flex-grow">
<h3 class="text-xl font-bold text-gray-800 mb-2">Radiology</h3>
<p class="text-gray-600 mb-6">Perfect for organ segmentation, tumor detection, and anatomical measurements in CT and MRI scans. Seamlessly integrated with OHIF, MITK, and 3D Slicer, our tools accelerate volumetric analysis while maintaining high accuracy.</p>
</div>
<div class="pt-4">
<a href="https://github.com/Project-MONAI/MONAILabel/tree/main/sample-apps/radiology" target="_blank" class="px-6 py-2.5 rounded-lg bg-white text-brand-primary border-2 border-brand-primary hover:bg-brand-light transition-colors inline-flex items-center gap-2 group">
Sample Applications
<svg class="w-4 h-4 transition-transform group-hover:translate-x-1" 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"></path>
</svg>
</a>
</div>
</div>
<!-- Pathology Card -->
<div class="bg-white p-6 border border-gray-200 hover:border-brand-primary shadow-sm hover:shadow-md transition-all duration-300 h-full flex flex-col rounded-lg overflow-hidden">
<div class="aspect-w-16 aspect-h-9 rounded-lg overflow-hidden mb-6">
<img class="object-cover w-full h-full transform transition-transform duration-300 hover:scale-105" src="assets/img/path_label.png" alt="Pathology Use Case">
</div>
<div class="flex-grow">
<h3 class="text-xl font-bold text-gray-800 mb-2">Pathology</h3>
<p class="text-gray-600 mb-6">Specialized in cell detection and tissue classification for whole slide imaging. Integrated with QuPath, DSA, and CellProfiler for rapid analysis of microscopy data.</p>
</div>
<div class="pt-4">
<a href="https://github.com/Project-MONAI/MONAILabel/tree/main/sample-apps/pathology" target="_blank" class="px-6 py-2.5 rounded-lg bg-white text-brand-primary border-2 border-brand-primary hover:bg-brand-light transition-colors inline-flex items-center gap-2 group">
Sample Applications
<svg class="w-4 h-4 transition-transform group-hover:translate-x-1" 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"></path>
</svg>
</a>
</div>
</div>
<!-- Endoscopy Card -->
<div class="bg-white p-6 border border-gray-200 hover:border-brand-primary shadow-sm hover:shadow-md transition-all duration-300 h-full flex flex-col rounded-lg overflow-hidden">
<div class="aspect-w-16 aspect-h-9 rounded-lg overflow-hidden mb-6">
<img class="object-cover w-full h-full transform transition-transform duration-300 hover:scale-105" src="assets/img/endoscopy.png" alt="Endoscopy Use Case">
</div>
<div class="flex-grow">
<h3 class="text-xl font-bold text-gray-800 mb-2">Endoscopy</h3>
<p class="text-gray-600 mb-6">Optimized for polyp detection and tool tracking in video sequences. Integrated with CVAT for efficient frame-by-frame annotation with automated tracking.</p>
</div>
<div class="pt-4">
<a href="https://github.com/Project-MONAI/MONAILabel/tree/main/sample-apps/endoscopy" target="_blank" class="px-6 py-2.5 rounded-lg bg-white text-brand-primary border-2 border-brand-primary hover:bg-brand-light transition-colors inline-flex items-center gap-2 group">
Sample Applications
<svg class="w-4 h-4 transition-transform group-hover:translate-x-1" 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"></path>
</svg>
</a>
</div>
</div>
</div>
</div>
</section>
<!-- Getting Started Section -->
<section id="getting-started" class="py-24 bg-brand-dark/15">
<div class="container">
<div class="text-center max-w-4xl mx-auto mb-16">
<h2 class="text-4xl font-bold text-gray-800 mb-8 relative inline-block pb-2">
Getting Started with MONAI Label
<span class="absolute bottom-0 left-0 w-full h-0.5 bg-brand-primary"></span>
</h2>
<p class="text-xl text-gray-600">
Get started with MONAI Label in minutes. Our step-by-step guide will help you set up your environment and launch your first AI-assisted annotation server. After setup, you'll be ready to connect to your preferred viewer and start annotating with AI assistance.
</p>
</div>
<div class="max-w-6xl mx-auto space-y-8">
<!-- Step 1 -->
<div class="bg-white p-6 rounded-lg shadow-sm">
<div class="flex items-start gap-4">
<div class="flex-shrink-0 text-3xl font-bold text-brand-primary">1</div>
<div class="flex-grow">
<h3 class="text-xl font-bold text-gray-800 mb-2">Install MONAI Label</h3>
<p class="text-gray-600 mb-6">Install via pip package manager</p>
<div class="relative w-full">
<div class="bg-gray-50 rounded-lg p-4 font-mono text-sm text-gray-700 w-full border border-gray-200">
<span class="block">pip install monailabel</span>
</div>
<button class="copy-button absolute top-3 right-3 text-gray-400 hover:text-brand-primary transition-colors">
<svg class="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M8 5H6a2 2 0 00-2 2v12a2 2 0 002 2h10a2 2 0 002-2v-1M8 5a2 2 0 002 2h2a2 2 0 002-2M8 5a2 2 0 012-2h2a2 2 0 012 2m0 0h2a2 2 0 012 2v3m2 4H10m0 0l3-3m-3 3l3 3"></path>
</svg>
</button>
</div>
</div>
</div>
</div>
<!-- Step 2 -->
<div class="bg-white p-6 rounded-lg shadow-sm">
<div class="flex items-start gap-4">
<div class="flex-shrink-0 text-3xl font-bold text-brand-primary">2</div>
<div class="flex-grow">
<h3 class="text-xl font-bold text-gray-800 mb-2">Download Sample App</h3>
<p class="text-gray-600 mb-6">Get a pre-configured radiology application</p>
<div class="relative w-full">
<div class="bg-gray-50 rounded-lg p-4 font-mono text-sm text-gray-700 w-full border border-gray-200">
<span class="block">monailabel apps --download \</span>
<span class="block pl-4">--name radiology \</span>
<span class="block pl-4">--output apps</span>
</div>
<button class="copy-button absolute top-3 right-3 text-gray-400 hover:text-brand-primary transition-colors">
<svg class="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M8 5H6a2 2 0 00-2 2v12a2 2 0 002 2h10a2 2 0 002-2v-1M8 5a2 2 0 002 2h2a2 2 0 002-2M8 5a2 2 0 012-2h2a2 2 0 012 2m0 0h2a2 2 0 012 2v3m2 4H10m0 0l3-3m-3 3l3 3"></path>
</svg>
</button>
</div>
</div>
</div>
</div>
<!-- Step 3 -->
<div class="bg-white p-6 rounded-lg shadow-sm">
<div class="flex items-start gap-4">
<div class="flex-shrink-0 text-3xl font-bold text-brand-primary">3</div>
<div class="flex-grow">
<h3 class="text-xl font-bold text-gray-800 mb-2">Download Sample Dataset</h3>
<p class="text-gray-600 mb-6">Get example medical imaging data</p>
<div class="relative w-full">
<div class="bg-gray-50 rounded-lg p-4 font-mono text-sm text-gray-700 w-full border border-gray-200">
<span class="block">monailabel datasets --download \</span>
<span class="block pl-4">--name Task09_Spleen \</span>
<span class="block pl-4">--output datasets</span>
</div>
<button class="copy-button absolute top-3 right-3 text-gray-400 hover:text-brand-primary transition-colors">
<svg class="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M8 5H6a2 2 0 00-2 2v12a2 2 0 002 2h10a2 2 0 002-2v-1M8 5a2 2 0 002 2h2a2 2 0 002-2M8 5a2 2 0 012-2h2a2 2 0 012 2m0 0h2a2 2 0 012 2v3m2 4H10m0 0l3-3m-3 3l3 3"></path>
</svg>
</button>
</div>
</div>
</div>
</div>
<!-- Step 4 -->
<div class="bg-white p-6 rounded-lg shadow-sm">
<div class="flex items-start gap-4">
<div class="flex-shrink-0 text-3xl font-bold text-brand-primary">4</div>
<div class="flex-grow">
<h3 class="text-xl font-bold text-gray-800 mb-2">Launch Server</h3>
<p class="text-gray-600 mb-6">Start MONAI Label server with your configuration</p>
<div class="relative w-full">
<div class="bg-gray-50 rounded-lg p-4 font-mono text-sm text-gray-700 w-full border border-gray-200">
<span class="block">monailabel start_server \</span>
<span class="block pl-4">--app apps/radiology \</span>
<span class="block pl-4">--studies datasets/Task09_Spleen/imagesTr \</span>
<span class="block pl-4">--conf models deepedit</span>
</div>
<button class="copy-button absolute top-3 right-3 text-gray-400 hover:text-brand-primary transition-colors">
<svg class="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M8 5H6a2 2 0 00-2 2v12a2 2 0 002 2h10a2 2 0 002-2v-1M8 5a2 2 0 002 2h2a2 2 0 002-2M8 5a2 2 0 012-2h2a2 2 0 012 2m0 0h2a2 2 0 012 2v3m2 4H10m0 0l3-3m-3 3l3 3"></path>
</svg>
</button>
</div>
</div>
</div>
</div>
</div>
<!-- Additional Resources Section -->
<div class="mt-16">
<h3 class="text-2xl font-bold text-gray-800 mb-8 text-center">Additional Resources</h3>
<div class="grid grid-cols-1 md:grid-cols-3 gap-8 max-w-6xl mx-auto">
<a href="https://github.com/Project-MONAI/MONAILabel/tree/main/sample-apps" target="_blank" rel="noopener noreferrer" class="block h-full">
<div class="bg-white p-8 rounded-lg shadow-sm border border-gray-200 hover:shadow-md transition-all duration-300 h-full flex flex-col items-center text-center">
<div class="text-brand-primary mb-6">
<svg class="w-12 h-12" fill="none" stroke="currentColor" viewBox="0 0 24 24">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M8 9l3 3-3 3m5 0h3M5 20h14a2 2 0 002-2V6a2 2 0 00-2-2H5a2 2 0 00-2 2v12a2 2 0 002 2z"></path>
</svg>
</div>
<h4 class="text-xl font-bold text-gray-800 mb-4">Sample Applications</h4>
<p class="text-gray-600">Explore example annotation apps for radiology, pathology, and endoscopy</p>
</div>
</a>
<a href="https://docs.monai.io/projects/label/en/latest/index.html" target="_blank" rel="noopener noreferrer" class="block h-full">
<div class="bg-white p-8 rounded-lg shadow-sm border border-gray-200 hover:shadow-md transition-all duration-300 h-full flex flex-col items-center text-center">
<div class="text-brand-primary mb-6">
<svg class="w-12 h-12" 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-2V7a2 2 0 012-2h5.586a1 1 0 01.707.293l5.414 5.414a1 1 0 01.293.707V19a2 2 0 01-2 2zM9 9h6v6H9V9z"></path>
</svg>
</div>
<h4 class="text-xl font-bold text-gray-800 mb-4">Documentation</h4>
<p class="text-gray-600">Comprehensive guides and API documentation for MONAI Label</p>
</div>
</a>
<a href="https://github.com/Project-MONAI/MONAILabel/discussions" target="_blank" rel="noopener noreferrer" class="block h-full">
<div class="bg-white p-8 rounded-lg shadow-sm border border-gray-200 hover:shadow-md transition-all duration-300 h-full flex flex-col items-center text-center">
<div class="text-brand-primary mb-6">
<svg class="w-12 h-12" fill="none" stroke="currentColor" viewBox="0 0 24 24">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M17 8h2a2 2 0 012 2v6a2 2 0 01-2 2h-2v4l-4-4H9a1.994 1.994 0 01-1.414-.586m0 0L11 14h4a2 2 0 002-2V6a2 2 0 00-2-2H5a2 2 0 00-2 2v6a2 2 0 002 2h2v4l.586-.586z"></path>
</svg>
</div>
<h4 class="text-xl font-bold text-gray-800 mb-4">Community Support</h4>
<p class="text-gray-600">Get help and share experiences with the MONAI Label community</p>
</div>
</a>
</div>
</div>
</div>
</section>
<!-- Active Learning Section -->
<section class="py-24 bg-white">
<div class="container">
<div class="text-center max-w-4xl mx-auto mb-16">
<h2 class="text-4xl font-bold text-gray-800 mb-8 relative inline-block pb-2">
Intelligent Active Learning
<span class="absolute bottom-0 left-0 w-full h-0.5 bg-brand-primary"></span>
</h2>
<p class="text-xl text-gray-600">
MONAI Label's intelligent active learning system dramatically reduces annotation time while maintaining high accuracy. Our advanced algorithms identify the most informative samples and continuously improve model performance.
</p>
</div>
<div class="grid grid-cols-1 lg:grid-cols-2 gap-16 items-start mb-16">
<div>
<img src="assets/img/Active Learning Framework.png" alt="Active Learning Framework Diagram" class="w-full rounded-lg mb-8">
<div class="bg-brand-dark/10 p-8 rounded-lg">
<div class="grid grid-cols-1 sm:grid-cols-3 gap-12">
<div class="text-center">
<div class="text-4xl font-bold text-brand-primary mb-3">50-80%</div>
<p class="text-gray-600">Faster annotation time</p>
</div>
<div class="text-center">
<div class="text-4xl font-bold text-brand-primary mb-3">2x</div>
<p class="text-gray-600">Faster model convergence</p>
</div>
<div class="text-center">
<div class="text-4xl font-bold text-brand-primary mb-3">90%</div>
<p class="text-gray-600">Accuracy with fewer labels</p>
</div>
</div>
</div>
</div>
<div class="space-y-6">
<div class="bg-white p-8 border border-gray-200 rounded-lg shadow-sm hover:shadow-md transition-all duration-300">
<div class="flex items-start gap-4">
<div class="flex-shrink-0 w-12 h-12 flex items-center justify-center rounded-lg bg-brand-primary/10 text-brand-primary">
<svg class="w-6 h-6" fill="none" stroke="currentColor" viewBox="0 0 24 24">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9.663 17h4.673M12 3v1m6.364 1.636l-.707.707M21 12h-1M4 12H3m3.343-5.657l-.707-.707m2.828 9.9a5 5 0 117.072 0l-.548.547A3.374 3.374 0 0014 18.469V19a2 2 0 11-4 0v-.531c0-.895-.356-1.754-.988-2.386l-.548-.547z"></path>
</svg>
</div>
<div>
<h3 class="text-xl font-bold text-gray-800 mb-3">Smart Sample Selection</h3>
<ul class="space-y-2 text-gray-600">
<li class="flex items-start gap-3">
<span class="w-6 h-6 rounded-sm flex items-center justify-center flex-shrink-0">
<svg class="w-4 h-4 text-brand-primary" fill="none" stroke="currentColor" viewBox="0 0 24 24">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 13l4 4L19 7"></path>
</svg>
</span>
<span>Uncertainty sampling identifies challenging cases</span>
</li>
<li class="flex items-start gap-3">
<span class="w-6 h-6 rounded-sm flex items-center justify-center flex-shrink-0">
<svg class="w-4 h-4 text-brand-primary" fill="none" stroke="currentColor" viewBox="0 0 24 24">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 13l4 4L19 7"></path>
</svg>
</span>
<span>Diversity metrics ensure varied training data</span>
</li>
<li class="flex items-start gap-3">
<span class="w-6 h-6 rounded-sm flex items-center justify-center flex-shrink-0">
<svg class="w-4 h-4 text-brand-primary" fill="none" stroke="currentColor" viewBox="0 0 24 24">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 13l4 4L19 7"></path>
</svg>
</span>
<span>Model ensemble disagreement detection</span>
</li>
</ul>
</div>
</div>
</div>
<div class="bg-white p-8 border border-gray-200 rounded-lg shadow-sm hover:shadow-md transition-all duration-300">
<div class="flex items-start gap-4">
<div class="flex-shrink-0 w-12 h-12 flex items-center justify-center rounded-lg bg-brand-primary/10 text-brand-primary">
<svg class="w-6 h-6" 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"></path>
</svg>
</div>
<div>
<h3 class="text-xl font-bold text-gray-800 mb-3">Continuous Model Improvement</h3>
<ul class="space-y-2 text-gray-600">
<li class="flex items-start gap-3">
<span class="w-6 h-6 rounded-sm flex items-center justify-center flex-shrink-0">
<svg class="w-4 h-4 text-brand-primary" fill="none" stroke="currentColor" viewBox="0 0 24 24">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 13l4 4L19 7"></path>
</svg>
</span>
<span>Real-time model updates during annotation</span>
</li>
<li class="flex items-start gap-3">
<span class="w-6 h-6 rounded-sm flex items-center justify-center flex-shrink-0">
<svg class="w-4 h-4 text-brand-primary" fill="none" stroke="currentColor" viewBox="0 0 24 24">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 13l4 4L19 7"></path>
</svg>
</span>
<span>Transfer learning from pre-trained models</span>
</li>
<li class="flex items-start gap-3">
<span class="w-6 h-6 rounded-sm flex items-center justify-center flex-shrink-0">
<svg class="w-4 h-4 text-brand-primary" fill="none" stroke="currentColor" viewBox="0 0 24 24">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 13l4 4L19 7"></path>
</svg>
</span>
<span>Support for UNet, UNETR, and SwinUNETR</span>
</li>
</ul>
</div>
</div>
</div>
<div class="bg-white p-8 border border-gray-200 rounded-lg shadow-sm hover:shadow-md transition-all duration-300">
<div class="flex items-start gap-4">
<div class="flex-shrink-0 w-12 h-12 flex items-center justify-center rounded-lg bg-brand-primary/10 text-brand-primary">
<svg class="w-6 h-6" 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"></path>
</svg>
</div>
<div>
<h3 class="text-xl font-bold text-gray-800 mb-3">Quality Assurance</h3>
<ul class="space-y-2 text-gray-600">
<li class="flex items-start gap-3">
<span class="w-6 h-6 rounded-sm flex items-center justify-center flex-shrink-0">
<svg class="w-4 h-4 text-brand-primary" fill="none" stroke="currentColor" viewBox="0 0 24 24">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 13l4 4L19 7"></path>
</svg>
</span>
<span>Real-time validation metrics</span>
</li>
<li class="flex items-start gap-3">
<span class="w-6 h-6 rounded-sm flex items-center justify-center flex-shrink-0">
<svg class="w-4 h-4 text-brand-primary" fill="none" stroke="currentColor" viewBox="0 0 24 24">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 13l4 4L19 7"></path>
</svg>
</span>
<span>Uncertainty estimation for predictions</span>
</li>
<li class="flex items-start gap-3">
<span class="w-6 h-6 rounded-sm flex items-center justify-center flex-shrink-0">
<svg class="w-4 h-4 text-brand-primary" fill="none" stroke="currentColor" viewBox="0 0 24 24">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 13l4 4L19 7"></path>
</svg>
</span>
<span>Automated annotation quality checks</span>
</li>
</ul>
</div>
</div>
</div>
</div>
</div>
</div>
</section>
<!-- Resources & Training Section -->
<section class="py-24 bg-brand-dark/15">
<div class="container">
<div class="text-center max-w-4xl mx-auto mb-16">
<h2 class="text-4xl font-bold text-gray-800 mb-8 relative inline-block pb-2">
Resources & Training
<span class="absolute bottom-0 left-0 w-full h-0.5 bg-brand-primary"></span>
</h2>
<p class="text-xl text-gray-600">
Get started with MONAI Label through our comprehensive learning resources and training materials.
</p>
</div>
<div class="grid grid-cols-1 lg:grid-cols-2 gap-16">
<!-- Video Tutorials -->
<div class="space-y-8">
<div class="bg-white p-6 border border-gray-200 rounded-lg shadow-sm">
<h3 class="text-xl font-bold text-gray-800 mb-6">Video Tutorials</h3>
<div class="space-y-4">
<a href="https://www.youtube.com/playlist?list=PLtoSVSQ2XzyD4lc-lAacFBzOdv5Ou-9IA" target="_blank" class="block p-4 bg-gray-50 hover:bg-gray-100 rounded-lg transition-colors group">
<div class="flex items-center justify-between">
<div>
<h4 class="font-semibold text-gray-800 group-hover:text-brand-primary">MONAI Label Deep Dive Series</h4>
<p class="text-sm text-gray-600 mt-1">Comprehensive tutorials covering all aspects of MONAI Label</p>
</div>
<svg class="w-4 h-4 text-gray-400 group-hover:text-brand-primary transition-transform group-hover:translate-x-1" fill="none" stroke="currentColor" viewBox="0 0 24 24">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 5l7 7-7 7"></path>
</svg>
</div>
</a>
<a href="https://www.youtube.com/watch?v=-HAryYAO5J4" target="_blank" class="block p-4 bg-gray-50 hover:bg-gray-100 rounded-lg transition-colors group">
<div class="flex items-center justify-between">
<div>
<h4 class="font-semibold text-gray-800 group-hover:text-brand-primary">MONAI Bootcamp</h4>
<p class="text-sm text-gray-600 mt-1">Overview and hands-on training from our latest bootcamp</p>
</div>
<svg class="w-4 h-4 text-gray-400 group-hover:text-brand-primary transition-transform group-hover:translate-x-1" fill="none" stroke="currentColor" viewBox="0 0 24 24">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 5l7 7-7 7"></path>
</svg>
</div>
</a>
</div>
</div>
</div>
<!-- Documentation & Guides -->
<div class="space-y-8">
<div class="bg-white p-6 border border-gray-200 rounded-lg shadow-sm">
<h3 class="text-xl font-bold text-gray-800 mb-6">Documentation & Guides</h3>
<div class="space-y-4">
<a href="https://docs.monai.io/projects/label/en/latest/quickstart.html" target="_blank" class="block p-4 bg-gray-50 hover:bg-gray-100 rounded-lg transition-colors group">
<div class="flex items-center justify-between">
<div>
<h4 class="font-semibold text-gray-800 group-hover:text-brand-primary">Quickstart Guide</h4>
<p class="text-sm text-gray-600 mt-1">Get up and running with MONAI Label in minutes</p>
</div>
<svg class="w-4 h-4 text-gray-400 group-hover:text-brand-primary transition-transform group-hover:translate-x-1" fill="none" stroke="currentColor" viewBox="0 0 24 24">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 5l7 7-7 7"></path>
</svg>
</div>
</a>
<a href="https://docs.monai.io/projects/label/en/latest/index.html" target="_blank" class="block p-4 bg-gray-50 hover:bg-gray-100 rounded-lg transition-colors group">
<div class="flex items-center justify-between">
<div>
<h4 class="font-semibold text-gray-800 group-hover:text-brand-primary">API Documentation</h4>
<p class="text-sm text-gray-600 mt-1">Detailed technical documentation and API references</p>
</div>
<svg class="w-4 h-4 text-gray-400 group-hover:text-brand-primary transition-transform group-hover:translate-x-1" fill="none" stroke="currentColor" viewBox="0 0 24 24">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 5l7 7-7 7"></path>
</svg>
</div>
</a>
<a href="https://github.com/Project-MONAI/MONAILabel/tree/main/sample-apps" target="_blank" class="block p-4 bg-gray-50 hover:bg-gray-100 rounded-lg transition-colors group">
<div class="flex items-center justify-between">
<div>
<h4 class="font-semibold text-gray-800 group-hover:text-brand-primary">Sample Applications</h4>
<p class="text-sm text-gray-600 mt-1">Example applications and best practices</p>
</div>
<svg class="w-4 h-4 text-gray-400 group-hover:text-brand-primary transition-transform group-hover:translate-x-1" fill="none" stroke="currentColor" viewBox="0 0 24 24">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 5l7 7-7 7"></path>
</svg>
</div>
</a>
</div>
</div>
</div>
</div>
</div>
</section>
<!-- Citation Section -->
<section class="py-24 bg-white">
<div class="container">
<div class="text-center max-w-4xl mx-auto mb-16">
<h2 class="text-4xl font-bold text-gray-800 mb-8 relative inline-block pb-2">
How to Cite MONAI Label
<span class="absolute bottom-0 left-0 w-full h-0.5 bg-brand-primary"></span>
</h2>
<p class="text-xl text-gray-600">
If you use MONAI Label in your research, please cite our paper:
</p>
</div>
<div class="max-w-4xl mx-auto">
<div class="bg-white p-8 border border-gray-200 rounded-lg shadow-sm">
<div class="relative">
<pre class="bg-gray-50 rounded-lg p-4 font-mono text-sm text-gray-700 whitespace-pre-wrap">@article{monailabel2024,
title={MONAI Label: A framework for AI-assisted Interactive Labeling of 3D Medical Images},
author={Diaz-Pinto, Andres and Alle, Sachidanand and Nath, Vishwesh and Tang, Yucheng and Ihsani, Alvin and Asad, Muhammad and P{\'e}rez-Garc{\'i}a, Fernando and Mehta, Pritesh and Li, Wenqi and Flores, Mona and Roth, Holger R. and Vercauteren, Tom and Xu, Daguang and Dogra, Prerna and Ourselin, Sebastien and Feng, Andrew and Cardoso, M. Jorge},
journal={Medical Image Analysis},
year={2024},
doi={10.1016/j.media.2024.103207}
}</pre>
<button class="copy-button absolute top-3 right-3 text-gray-400 hover:text-brand-primary transition-colors">
<svg class="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M8 5H6a2 2 0 00-2 2v12a2 2 0 002 2h10a2 2 0 002-2v-1M8 5a2 2 0 002 2h2a2 2 0 002-2M8 5a2 2 0 012-2h2a2 2 0 012 2m0 0h2a2 2 0 012 2v3m2 4H10m0 0l3-3m-3 3l3 3"></path>
</svg>
</button>
</div>
<div class="flex flex-wrap gap-4 mt-6">
<a href="https://doi.org/10.1016/j.media.2024.103207" target="_blank" class="px-6 py-2.5 rounded-lg bg-white text-brand-primary border-2 border-brand-primary hover:bg-brand-light transition-colors inline-flex items-center gap-2 group">
DOI
<svg class="w-4 h-4 transition-transform group-hover:translate-x-1" 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"></path>
</svg>
</a>
</div>
</div>
</div>
</div>
</section>
<!-- Community Section -->
<section class="py-24 bg-brand-dark/15">
<div class="container">
<div class="text-center max-w-4xl mx-auto mb-16">
<h2 class="text-4xl font-bold text-gray-800 mb-8 relative inline-block pb-2">
Get Involved in the Community
<span class="absolute bottom-0 left-0 w-full h-0.5 bg-brand-primary"></span>
</h2>
<p class="text-xl text-gray-600">
Join our growing community of researchers, developers, and healthcare professionals. Get help, share your work, and contribute to advancing medical image annotation. Consider joining our Human-AI Interaction Working Group to help standardize and improve AI-assisted annotation workflows.
</p>
</div>
<div class="grid grid-cols-1 md:grid-cols-2 xl:grid-cols-4 gap-8 max-w-7xl mx-auto">
<!-- Documentation Card -->
<div class="bg-white p-6 border border-gray-200 hover:border-brand-primary shadow-sm hover:shadow-md transition-all duration-300 rounded-lg flex flex-col">
<div class="text-brand-primary mb-4">
<svg class="w-8 h-8" 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-2V7a2 2 0 012-2h5.586a1 1 0 01.707.293l5.414 5.414a1 1 0 01.293.707V19a2 2 0 01-2 2zM9 9h6v6H9V9z"></path>
</svg>
</div>
<div class="flex-grow">
<h3 class="text-xl font-bold text-gray-800 mb-4">Documentation</h3>
<p class="text-gray-600">Access comprehensive documentation covering everything from basic concepts to advanced annotation strategies.</p>
</div>
<div class="mt-6">
<a href="https://docs.monai.io/projects/label/en/latest/index.html" target="_blank" rel="noopener noreferrer" class="px-6 py-2.5 rounded-lg bg-white text-brand-primary border-2 border-brand-primary hover:bg-brand-light transition-colors inline-flex items-center gap-2 group">
Deep Dive
<svg class="w-4 h-4 transition-transform group-hover:translate-x-1" 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"></path>
</svg>
</a>
</div>
</div>
<!-- Working Group Card -->
<div class="bg-white p-6 border border-gray-200 hover:border-brand-primary shadow-sm hover:shadow-md transition-all duration-300 rounded-lg flex flex-col">
<div class="text-brand-primary mb-4">
<svg class="w-8 h-8" fill="none" stroke="currentColor" viewBox="0 0 24 24">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 4.354a4 4 0 110 5.292M15 21H3v-1a6 6 0 0112 0v1zm0 0h6v-1a6 6 0 00-9-5.197M13 7a4 4 0 11-8 0 4 4 0 018 0z"></path>
</svg>
</div>
<div class="flex-grow">
<h3 class="text-xl font-bold text-gray-800 mb-4">Human-AI Interaction Working Group</h3>
<p class="text-gray-600">Join our working group focused on standardizing and supporting Human-AI interaction cycles through well-defined interfaces for AI-assisted annotation.</p>
</div>
<div class="mt-6">
<a href="wg_human_ai_interaction.html" class="px-6 py-2.5 rounded-lg bg-white text-brand-primary border-2 border-brand-primary hover:bg-brand-light transition-colors inline-flex items-center gap-2 group">
Join the Group
<svg class="w-4 h-4 transition-transform group-hover:translate-x-1" 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"></path>
</svg>
</a>
</div>
</div>
<!-- GitHub Card -->
<div class="bg-white p-6 border border-gray-200 hover:border-brand-primary shadow-sm hover:shadow-md transition-all duration-300 rounded-lg flex flex-col">
<div class="text-brand-primary mb-4">
<svg class="w-8 h-8" fill="none" stroke="currentColor" viewBox="0 0 24 24">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M10 20l4-16m4 4l4 4-4 4M6 16l-4-4 4-4"></path>
</svg>
</div>
<div class="flex-grow">
<h3 class="text-xl font-bold text-gray-800 mb-4">GitHub Repository</h3>
<p class="text-gray-600">Explore the source code, contribute to development, and access sample applications for radiology, pathology, and endoscopy to learn from real-world annotation scenarios.</p>
</div>
<div class="mt-6 flex flex-wrap gap-3">
<a href="https://github.com/Project-MONAI/MONAILabel" target="_blank" rel="noopener noreferrer" class="px-6 py-2.5 rounded-lg bg-white text-brand-primary border-2 border-brand-primary hover:bg-brand-light transition-colors inline-flex items-center gap-2 group">
View Code
<svg class="w-4 h-4 transition-transform group-hover:translate-x-1" 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"></path>
</svg>
</a>
</div>
</div>
<!-- Slack Community Card -->
<div class="bg-white p-6 border border-gray-200 hover:border-brand-primary shadow-sm hover:shadow-md transition-all duration-300 rounded-lg flex flex-col">
<div class="text-brand-primary mb-4">
<svg class="w-8 h-8" fill="none" stroke="currentColor" viewBox="0 0 24 24">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M17 8h2a2 2 0 012 2v6a2 2 0 01-2 2h-2v4l-4-4H9a1.994 1.994 0 01-1.414-.586m0 0L11 14h4a2 2 0 002-2V6a2 2 0 00-2-2H5a2 2 0 00-2 2v6a2 2 0 002 2h2v4l.586-.586z"></path>
</svg>
</div>
<div class="flex-grow">
<h3 class="text-xl font-bold text-gray-800 mb-4">Join the Discussion</h3>
<p class="text-gray-600">Connect with the MONAI community on Slack. Get help, share ideas, and collaborate with other developers.</p>
</div>
<div class="mt-6">
<a href="https://join.slack.com/t/projectmonai/shared_invite/zt-2t7z8e9tu-xE5SPw0TC8LUxyPVpl2WVQ" target="_blank" rel="noopener noreferrer" class="px-6 py-2.5 rounded-lg bg-white text-brand-primary border-2 border-brand-primary hover:bg-brand-light transition-colors inline-flex items-center gap-2 group">
Join Slack
<svg class="w-4 h-4 transition-transform group-hover:translate-x-1" 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"></path>
</svg>
</a>
</div>
</div>
</div>
</div>
</section>
</main>
<!-- #include file="components/footer.html" -->
<!-- #include file="components/scripts.html" -->
</body>
</html>