phattharaphon45th/Cell_Classification

1<!DOCTYPE html>2<html lang="en">3<head>4    <meta charset="UTF-8">5    <meta name="viewport" content="width=device-width, initial-scale=1.0">6    <title>C-NMC Leukemia Dataset</title>7    <link rel="stylesheet" href="style.css">8</head>9<body>10    <header class="header">11        <div class="title">C-NMC Leukemia Dataset</div>12    </header>13    <div class="container">14        <div class="column column-left">15            <div class="row-title">ALL</div>16            <div class="image-grid" id="all-images"></div>17        </div>18        <div class="column column-right">19            <div class="row-title">HEM</div>20            <div class="image-grid" id="hem-images"></div>21        </div>22    </div>23 24    <script>25        // Function to get random images26        function getRandomImages(imageList, numImages) {27            const shuffled = imageList.sort(() => 0.5 - Math.random());28            return shuffled.slice(0, numImages);29        }30 31        // Function to display images32        function displayImages(imageList, containerId) {33            const container = document.getElementById(containerId);34            imageList.forEach(imagePath => {35                const imageContainer = document.createElement('div');36                imageContainer.className = 'image-container';37                const img = document.createElement('img');38                img.src = imagePath;39                img.alt = imagePath;40                const caption = document.createElement('div');41                caption.className = 'caption';42                caption.textContent = imagePath.split('/').pop();43                imageContainer.appendChild(img);44                imageContainer.appendChild(caption);45                container.appendChild(imageContainer);46            });47        }48 49        // Predefined lists of image paths50        const allImages = [51            'Dataset/ALL/UID_11_1_1_all.bmp',52            'Dataset/ALL/UID_13_32_2_all.bmp',53            'Dataset/ALL/UID_13_7_1_all.bmp',54            'Dataset/ALL/UID_16_2_1_all.bmp',55            'Dataset/ALL/UID_18_20_1_all.bmp',56            'Dataset/ALL/UID_20_16_3_all.bmp',57            'Dataset/ALL/UID_21_11_1_all.bmp',58            'Dataset/ALL/UID_21_1_1_all.bmp',59            'Dataset/ALL/UID_22_18_4_all.bmp',60            'Dataset/ALL/UID_22_1_3_all.bmp',61            'Dataset/ALL/UID_22_32_2_all.bmp',62            'Dataset/ALL/UID_22_36_2_all.bmp',63            'Dataset/ALL/UID_23_34_5_all.bmp',64            'Dataset/ALL/UID_24_14_1_all.bmp',65            'Dataset/ALL/UID_24_1_5_all.bmp',66            'Dataset/ALL/UID_24_33_5_all.bmp',67            'Dataset/ALL/UID_24_34_7_all.bmp',68            'Dataset/ALL/UID_24_9_2_all.bmp',69            'Dataset/ALL/UID_25_11_3_all.bmp',70            'Dataset/ALL/UID_25_26_6_all.bmp',71            'Dataset/ALL/UID_26_26_1_all.bmp',72            'Dataset/ALL/UID_26_5_3_all.bmp',73            'Dataset/ALL/UID_27_16_6_all.bmp',74            'Dataset/ALL/UID_27_7_5_all.bmp',75            'Dataset/ALL/UID_28_16_1_all.bmp',76            'Dataset/ALL/UID_2_28_3_all.bmp',77            'Dataset/ALL/UID_30_9_4_all.bmp',78            'Dataset/ALL/UID_31_3_1_all.bmp',79            'Dataset/ALL/UID_32_10_2_all.bmp',80            'Dataset/ALL/UID_32_26_6_all.bmp',81            'Dataset/ALL/UID_33_32_1_all.bmp'82        ];83 84        const hemImages = [85            'Dataset/HEM/UID_H10_141_1_hem.bmp',86            'Dataset/HEM/UID_H10_71_1_hem.bmp',87            'Dataset/HEM/UID_H10_75_2_hem.bmp',88            'Dataset/HEM/UID_H10_89_3_hem.bmp',89            'Dataset/HEM/UID_H10_93_2_hem.bmp',90            'Dataset/HEM/UID_H11_17_2_hem.bmp',91            'Dataset/HEM/UID_H11_21_1_hem.bmp',92            'Dataset/HEM/UID_H12_20_1_hem.bmp',93            'Dataset/HEM/UID_H12_27_1_hem.bmp',94            'Dataset/HEM/UID_H12_2_1_hem.bmp',95            'Dataset/HEM/UID_H12_33_11_hem.bmp',96            'Dataset/HEM/UID_H12_3_2_hem.bmp',97            'Dataset/HEM/UID_H13_10_2_hem.bmp',98            'Dataset/HEM/UID_H13_1_2_hem.bmp',99            'Dataset/HEM/UID_H13_26_2_hem.bmp',100            'Dataset/HEM/UID_H13_4_3_hem.bmp',101            'Dataset/HEM/UID_H13_6_5_hem.bmp',102            'Dataset/HEM/UID_H14_12_5_hem.bmp',103            'Dataset/HEM/UID_H14_12_7_hem.bmp',104            'Dataset/HEM/UID_H14_15_3_hem.bmp',105            'Dataset/HEM/UID_H14_16_10_hem.bmp',106            'Dataset/HEM/UID_H14_16_3_hem.bmp',107            'Dataset/HEM/UID_H14_18_15_hem.bmp',108            'Dataset/HEM/UID_H14_19_9_hem.bmp',109            'Dataset/HEM/UID_H14_21_1_hem.bmp',110            'Dataset/HEM/UID_H14_22_3_hem.bmp',111            'Dataset/HEM/UID_H14_24_2_hem.bmp',112            'Dataset/HEM/UID_H14_2_6_hem.bmp',113            'Dataset/HEM/UID_H14_35_4_hem.bmp',114            'Dataset/HEM/UID_H14_35_5_hem.bmp',115            'Dataset/HEM/UID_H14_4_13_hem.bmp',116        ];117 118        // Get and display random images119        const randomAllImages = getRandomImages(allImages, 6);120        const randomHemImages = getRandomImages(hemImages, 6);121        displayImages(randomAllImages, 'all-images');122        displayImages(randomHemImages, 'hem-images');123    </script>124</body>125</html>