|
10 | 10 | <meta name="twitter:description" content="MONAI is the leading open-source framework for healthcare imaging AI, trusted by researchers and clinicians worldwide. Build, train, and deploy medical AI solutions with industry-standard tools."> |
11 | 11 | <link rel="canonical" href="https://monai.io/"> |
12 | 12 |
|
13 | | -<!-- Head Component --> |
14 | | -<head> |
15 | | - <!-- Global site tag (gtag.js) - Google Analytics --> |
16 | | - <script async src="https://www.googletagmanager.com/gtag/js?id=G-QVGBCPFPJ6"></script> |
17 | | - <script> |
18 | | - window.dataLayer = window.dataLayer || []; |
19 | | - function gtag(){dataLayer.push(arguments);} |
20 | | - gtag('js', new Date()); |
21 | | - gtag('config', 'G-QVGBCPFPJ6'); |
22 | | - </script> |
23 | | - |
24 | | - <!-- Required meta tags --> |
25 | | - <meta charset="utf-8"> |
26 | | - <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no"> |
27 | | - |
28 | | - <!-- SEO Meta Tags --> |
29 | | - <meta name="keywords" content="MONAI, Medical Imaging, AI, Deep Learning, Healthcare, PyTorch, Open Source"> |
30 | | - <meta name="author" content="Project MONAI"> |
31 | | - |
32 | | - <!-- Open Graph Meta Tags --> |
33 | | - <meta property="og:type" content="website"> |
34 | | - <meta property="og:image" content="https://monai.io/assets/img/MONAI-logo_color.png"> |
35 | | - |
36 | | - <!-- Twitter Card Meta Tags --> |
37 | | - <meta name="twitter:card" content="summary_large_image"> |
38 | | - <meta name="twitter:site" content="@ProjectMONAI"> |
39 | | - <meta name="twitter:image" content="https://monai.io/assets/img/MONAI-logo_color.png"> |
40 | | - |
41 | | - <!-- Favicon --> |
42 | | - <link rel="shortcut icon" href="./assets/logo/MONAI-logo_favicon.png" type="image/png"> |
43 | | - <link rel="apple-touch-icon" href="./assets/logo/MONAI-logo_favicon.png"> |
44 | | - |
45 | | - <!-- Stylesheets --> |
46 | | - <link rel="stylesheet" type="text/css" href="./assets/css/tailwind.css"> |
47 | | - |
48 | | - <!-- Alpine.js --> |
49 | | - <script defer src="https://unpkg.com/alpinejs@3.x.x/dist/cdn.min.js"></script> |
50 | | - |
51 | | - <!-- Alpine.js x-cloak --> |
52 | | - <style> |
53 | | - [x-cloak] { display: none !important; } |
54 | | - </style> |
55 | | - |
56 | | - <!-- Schema.org Markup --> |
57 | | - <script type="application/ld+json"> |
58 | | - { |
59 | | - "@context": "https://schema.org", |
60 | | - "@type": "Organization", |
61 | | - "name": "MONAI", |
62 | | - "url": "https://monai.io", |
63 | | - "logo": "https://monai.io/assets/img/MONAI-logo_color.png", |
64 | | - "description": "MONAI is a freely available, community-supported, PyTorch-based framework for deep learning in healthcare imaging.", |
65 | | - "sameAs": [ |
66 | | - "https://twitter.com/ProjectMONAI", |
67 | | - "https://medium.com/@monai", |
68 | | - "https://www.youtube.com/c/Project-MONAI", |
69 | | - "https://github.com/Project-MONAI" |
70 | | - ] |
71 | | - } |
72 | | - </script> |
73 | | - |
74 | | - <!-- Particles.js --> |
75 | | - <script src="https://cdn.jsdelivr.net/particles.js/2.0.0/particles.min.js"></script> |
76 | | -</head> |
77 | 13 | <!-- Head Component --> |
78 | 14 | <head> |
79 | 15 | <!-- Global site tag (gtag.js) - Google Analytics --> |
|
254 | 190 | } |
255 | 191 | </script> |
256 | 192 |
|
257 | | -<!-- Header Area wrapper Starts --> |
258 | | -<header id="header-wrap" class="relative"> |
259 | | - <!-- Navbar Start --> |
260 | | - <div class="navigation fixed top-0 left-0 w-full z-40 duration-300 bg-white border-b border-gray-100 transition-all"> |
261 | | - <div class="container"> |
262 | | - <nav class="navbar flex justify-between items-center relative duration-300 h-16" x-data="{ isOpen: false, frameworksOpen: false, communityOpen: false }"> |
263 | | - <a class="navbar-brand" href="index.html"> |
264 | | - <img class="h-12 w-auto" src="assets/img/MONAI-logo_color_full.png" alt="Logo"> |
265 | | - </a> |
266 | | - <button class="navbar-toggler focus:outline-none block lg:hidden p-2" type="button" @click="isOpen = !isOpen"> |
267 | | - <svg class="w-6 h-6" fill="none" stroke="currentColor" viewBox="0 0 24 24"> |
268 | | - <path x-show="!isOpen" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 6h16M4 12h16M4 18h16"/> |
269 | | - <path x-show="isOpen" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M6 18L18 6M6 6l12 12"/> |
270 | | - </svg> |
271 | | - </button> |
272 | | - |
273 | | - <div class="navbar-collapse lg:flex flex-grow items-center absolute lg:static top-full left-0 w-full lg:w-auto bg-white lg:bg-transparent lg:shadow-none" |
274 | | - :class="{'hidden': !isOpen, 'block shadow-lg': isOpen}"> |
275 | | - <ul class="navbar-nav flex flex-col lg:flex-row lg:items-center lg:ml-auto py-4 lg:py-0 px-6 lg:px-0 space-y-2 lg:space-y-0 lg:space-x-8"> |
276 | | - <li class="nav-item"> |
277 | | - <a class="page-scroll block py-2 text-gray-700 hover:text-brand-primary transition-colors duration-200" href="index.html">Home</a> |
278 | | - </li> |
279 | | - <li class="nav-item relative" @click.away="frameworksOpen = false"> |
280 | | - <button class="page-scroll flex items-center justify-between w-full lg:inline-flex lg:w-auto py-2 text-gray-700 hover:text-brand-primary transition-colors duration-200" |
281 | | - @click="frameworksOpen = !frameworksOpen; communityOpen = false"> |
282 | | - <span>Frameworks</span> |
283 | | - <span class="chevron ml-2 transform transition-transform duration-200" :class="{'rotate-180': frameworksOpen}"></span> |
284 | | - </button> |
285 | | - <div class="lg:absolute w-full lg:w-52 lg:top-[calc(100%+0.5rem)] left-0 lg:left-1/2 lg:-translate-x-1/2 z-50 p-2 text-gray-800 bg-white rounded-lg shadow-lg" |
286 | | - x-show="frameworksOpen" |
287 | | - x-transition:enter="transition ease-out duration-200" |
288 | | - x-transition:enter-start="opacity-0 translate-y-1" |
289 | | - x-transition:enter-end="opacity-100 translate-y-0" |
290 | | - x-cloak> |
291 | | - <div class="flex flex-col space-y-1"> |
292 | | - <a href="core.html" class="px-3 py-2 rounded-md transition-colors hover:bg-gray-50 hover:text-brand-primary">MONAI Core</a> |
293 | | - <a href="label.html" class="px-3 py-2 rounded-md transition-colors hover:bg-gray-50 hover:text-brand-primary">MONAI Label</a> |
294 | | - <a href="deploy.html" class="px-3 py-2 rounded-md transition-colors hover:bg-gray-50 hover:text-brand-primary">MONAI Deploy</a> |
295 | | - </div> |
296 | | - </div> |
297 | | - </li> |
298 | | - <li class="nav-item"> |
299 | | - <a class="page-scroll block py-2 text-gray-700 hover:text-brand-primary transition-colors duration-200" href="model-zoo.html">Model Zoo</a> |
300 | | - </li> |
301 | | - <li class="nav-item"> |
302 | | - <a class="page-scroll block py-2 text-gray-700 hover:text-brand-primary transition-colors duration-200" href="working-groups.html">Working Groups</a> |
303 | | - </li> |
304 | | - <li class="nav-item relative" @click.away="communityOpen = false"> |
305 | | - <button class="page-scroll flex items-center justify-between w-full lg:inline-flex lg:w-auto py-2 text-gray-700 hover:text-brand-primary transition-colors duration-200" |
306 | | - @click="communityOpen = !communityOpen; frameworksOpen = false"> |
307 | | - <span>Community</span> |
308 | | - <span class="chevron ml-2 transform transition-transform duration-200" :class="{'rotate-180': communityOpen}"></span> |
309 | | - </button> |
310 | | - <div class="lg:absolute w-full lg:w-64 lg:top-[calc(100%+0.5rem)] left-0 lg:left-1/2 lg:-translate-x-1/2 z-50 p-2 text-gray-800 bg-white rounded-lg shadow-lg" |
311 | | - x-show="communityOpen" |
312 | | - x-transition:enter="transition ease-out duration-200" |
313 | | - x-transition:enter-start="opacity-0 translate-y-1" |
314 | | - x-transition:enter-end="opacity-100 translate-y-0" |
315 | | - x-cloak> |
316 | | - <div class="flex flex-col space-y-2"> |
317 | | - <a href="about.html" class="px-3 py-2 rounded-md transition-colors hover:bg-gray-50 hover:text-brand-primary">About Us</a> |
318 | | - <a href="successstories.html" class="px-3 py-2 rounded-md transition-colors hover:bg-gray-50 hover:text-brand-primary">Success Stories</a> |
319 | | - <a href="https://github.com/Project-MONAI" target="_blank" class="px-3 py-2 rounded-md transition-colors hover:bg-gray-50 hover:text-brand-primary">GitHub</a> |
320 | | - <a href="https://join.slack.com/t/projectmonai/shared_invite/zt-2t7z8e9tu-xE5SPw0TC8LUxyPVpl2WVQ" target="_blank" class="px-3 py-2 rounded-md transition-colors hover:bg-gray-50 hover:text-brand-primary">Join Slack</a> |
321 | | - <div class="border-t border-gray-100 mt-2 pt-2"> |
322 | | - <div class="grid grid-cols-2 gap-1"> |
323 | | - <a href="https://twitter.com/ProjectMONAI" target="_blank" class="px-3 py-2 rounded-md transition-colors hover:bg-gray-50 hover:text-brand-primary">Twitter</a> |
324 | | - <a href="https://linkedin.com/company/projectmonai" target="_blank" class="px-3 py-2 rounded-md transition-colors hover:bg-gray-50 hover:text-brand-primary">LinkedIn</a> |
325 | | - <a href="https://medium.com/@monai" target="_blank" class="px-3 py-2 rounded-md transition-colors hover:bg-gray-50 hover:text-brand-primary">Blog</a> |
326 | | - <a href="https://www.youtube.com/c/Project-MONAI" target="_blank" class="px-3 py-2 rounded-md transition-colors hover:bg-gray-50 hover:text-brand-primary">YouTube</a> |
327 | | - </div> |
328 | | - </div> |
329 | | - </div> |
330 | | - </div> |
331 | | - </li> |
332 | | - </ul> |
333 | | - </div> |
334 | | - </nav> |
335 | | - </div> |
336 | | - </div> |
337 | | - <!-- Navbar End --> |
338 | | -</header> |
339 | | -<!-- Header Area wrapper End --> |
340 | | - |
341 | | - <!-- Banner System --> |
342 | | -<div x-data="bannerSystem()" x-init="init()"> |
343 | | - <!-- Banner Container --> |
344 | | - <div x-show="activeBanner" |
345 | | - x-ref="banner" |
346 | | - class="fixed top-0 left-0 right-0 text-white py-2 px-4 text-sm z-50" |
347 | | - :class="activeBanner ? activeBanner.bgColor : ''" |
348 | | - x-transition:leave="transition ease-in duration-200" |
349 | | - x-transition:leave-start="opacity-100" |
350 | | - x-transition:leave-end="opacity-0"> |
351 | | - <div class="container flex items-center justify-center gap-2"> |
352 | | - <svg x-show="activeBanner && activeBanner.icon === 'check'" class="w-4 h-4 flex-shrink-0" fill="none" stroke="currentColor" viewBox="0 0 24 24"> |
353 | | - <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> |
354 | | - </svg> |
355 | | - <svg x-show="activeBanner && activeBanner.icon === 'megaphone'" class="w-4 h-4 flex-shrink-0" fill="none" stroke="currentColor" viewBox="0 0 24 24"> |
356 | | - <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M11 5.882V19.24a1.76 1.76 0 01-3.417.592l-2.147-6.15M18 13a3 3 0 100-6M5.436 13.683A4.001 4.001 0 017 6h1.832c4.1 0 7.625-1.234 9.168-3v14c-1.543-1.766-5.067-3-9.168-3H7a3.988 3.988 0 01-1.564-.317z"></path> |
357 | | - </svg> |
358 | | - <span class="font-medium" x-text="activeBanner ? activeBanner.message : ''"></span> |
359 | | - <a x-show="activeBanner && activeBanner.link" |
360 | | - :href="activeBanner ? activeBanner.link : '#'" |
361 | | - target="_blank" |
362 | | - class="underline hover:no-underline ml-1" |
363 | | - x-text="activeBanner ? activeBanner.linkText : ''"></a> |
364 | | - <button @click="dismissBanner()" |
365 | | - class="ml-4 hover:opacity-80 transition-opacity" |
366 | | - aria-label="Dismiss banner"> |
367 | | - <svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24"> |
368 | | - <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M6 18L18 6M6 6l12 12"></path> |
369 | | - </svg> |
370 | | - </button> |
371 | | - </div> |
372 | | - </div> |
373 | | -</div> |
374 | | - |
375 | | -<script> |
376 | | -function bannerSystem() { |
377 | | - return { |
378 | | - banners: [ |
379 | | - { |
380 | | - id: 'monai_core_v1.5.1', |
381 | | - message: 'MONAI Core v1.5.1 is now available!', |
382 | | - link: 'https://docs.monai.io/en/stable/whatsnew_1_5_1.html', |
383 | | - linkText: 'See what\'s new →', |
384 | | - bgColor: 'bg-brand-primary', |
385 | | - icon: 'check', |
386 | | - priority: 1 |
387 | | - } |
388 | | - ], |
389 | | - activeBanner: null, |
390 | | - bannerHeight: 0, |
391 | | - |
392 | | - init() { |
393 | | - this.selectActiveBanner(); |
394 | | - this.$nextTick(() => { |
395 | | - if (this.activeBanner && this.$refs.banner) { |
396 | | - this.bannerHeight = this.$refs.banner.offsetHeight; |
397 | | - this.updateBodyPadding(); |
398 | | - this.updateNavPosition(); |
399 | | - } |
400 | | - }); |
401 | | - }, |
402 | | - |
403 | | - selectActiveBanner() { |
404 | | - // Filter out dismissed banners and sort by priority |
405 | | - const availableBanners = this.banners |
406 | | - .filter(banner => localStorage.getItem(`hideBanner_${banner.id}`) !== 'true') |
407 | | - .sort((a, b) => b.priority - a.priority); |
408 | | - |
409 | | - this.activeBanner = availableBanners[0] || null; |
410 | | - |
411 | | - // Dispatch event for header to know if banner is visible |
412 | | - window.dispatchEvent(new CustomEvent('banner-visibility-changed', { |
413 | | - detail: { visible: !!this.activeBanner } |
414 | | - })); |
415 | | - }, |
416 | | - |
417 | | - dismissBanner() { |
418 | | - if (this.activeBanner) { |
419 | | - localStorage.setItem(`hideBanner_${this.activeBanner.id}`, 'true'); |
420 | | - this.activeBanner = null; |
421 | | - this.bannerHeight = 0; |
422 | | - this.updateBodyPadding(); |
423 | | - this.updateNavPosition(); |
424 | | - window.dispatchEvent(new CustomEvent('banner-visibility-changed', { |
425 | | - detail: { visible: false, height: 0 } |
426 | | - })); |
427 | | - } |
428 | | - }, |
429 | | - |
430 | | - updateBodyPadding() { |
431 | | - const mainElement = document.querySelector('main'); |
432 | | - if (mainElement) { |
433 | | - if (this.activeBanner) { |
434 | | - mainElement.style.paddingTop = `calc(4rem + ${this.bannerHeight}px)`; |
435 | | - } else { |
436 | | - mainElement.style.paddingTop = '4rem'; |
437 | | - } |
438 | | - } |
439 | | - }, |
440 | | - |
441 | | - updateNavPosition() { |
442 | | - const navElement = document.querySelector('.navigation'); |
443 | | - if (navElement) { |
444 | | - if (this.activeBanner && this.bannerHeight) { |
445 | | - navElement.style.top = `${this.bannerHeight}px`; |
446 | | - } else { |
447 | | - navElement.style.top = '0'; |
448 | | - } |
449 | | - } |
450 | | - } |
451 | | - } |
452 | | -} |
453 | | -</script> |
454 | | - |
455 | 193 | <!-- Header Area wrapper Starts --> |
456 | 194 | <header id="header-wrap" class="relative"> |
457 | 195 | <!-- Navbar Start --> |
|
0 commit comments