AMAM/index.html at main · Scientific-Computing-Lab/AMAM · GitHub

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
<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <meta name="description" content="AMAM benchmark dataset for segmentation in quantitative metallography.">
  <title>AMAM Dataset Benchmark</title>
  <link rel="preconnect" href="https://fonts.googleapis.com">
  <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
  <link href="https://fonts.googleapis.com/css2?family=Space+Grotesk:wght@400;500;600;700&family=Source+Sans+3:wght@400;600;700&display=swap" rel="stylesheet">
  <link rel="stylesheet" href="assets/css/styles.css">
</head>
<body>
  <header class="site-header">
    <div class="header-shell">
      <a href="#top" class="brand" aria-label="AMAM Home">
        <span class="brand-mark">AM</span>
        <span class="brand-text">AMAM Benchmark Dataset</span>
      </a>
      <nav class="top-nav" aria-label="Primary">
        <a href="#overview">Overview</a>
        <a href="#method">Method</a>
        <a href="#downloads">Downloads</a>
        <a href="#explorer">Explorer</a>
        <a href="report.html">Benchmark Report</a>
      </nav>
    </div>
  </header>

  <main id="top">
    <section class="hero" id="overview">
      <div class="hero-content reveal">
        <p class="kicker">Benchmark Dataset for Metallography Segmentation</p>
        <h1 id="heroTitle">Annotated Metallic Alloys Microstructures (AMAM)</h1>
        <p id="heroOverview" class="hero-overview"></p>
        <div class="hero-actions">
          <a class="btn btn-primary" href="#explorer">Browse Dataset</a>
          <a class="btn btn-secondary" href="report.html">Open Benchmark Report</a>
          <button class="btn btn-ghost" id="downloadAllBtn" type="button">Download All Categories</button>
        </div>
      </div>
    </section>

    <section class="method panel" id="method">
      <div class="panel-head reveal">
        <h2>How AMAM Was Created</h2>
        <p>Annotation was performed in Clemex Studio using an iterative human-in-the-loop segmentation workflow.</p>
      </div>
      <div class="method-grid">
        <figure class="workflow-card reveal">
          <img src="assets/images/amam-workflow.png" alt="AMAM workflow diagram from partial labeling to full prediction refinement">
          <figcaption>AMAM annotation and refinement workflow.</figcaption>
        </figure>
        <div class="method-steps reveal" id="methodSteps"></div>
      </div>
    </section>

    <section class="panel" id="stats">
      <div class="panel-head reveal">
        <h2>Dataset Statistics</h2>
        <p>Coverage spans multiple alloys, magnifications, and segmentation difficulty modes.</p>
      </div>
      <div class="stats-grid" id="materialBars" aria-live="polite"></div>
    </section>

    <section class="panel" id="downloads">
      <div class="panel-head reveal">
        <h2>Download Center</h2>
        <p>All files are served from this GitHub repository. Download full repo or trigger category-level local downloads.</p>
      </div>
      <div class="download-shell reveal">
        <label for="categoryDownloadSelect">Download one dataset category</label>
        <div class="download-row">
          <select id="categoryDownloadSelect" aria-label="Choose category to download"></select>
          <button class="btn btn-primary" type="button" id="downloadCategoryBtn">Download Category Files</button>
          <button class="btn btn-secondary" type="button" id="downloadManifestBtn">Download Metadata JSON</button>
        </div>
      </div>
    </section>

    <section class="panel" id="explorer">
      <div class="panel-head reveal">
        <h2>Section-by-Section Explorer</h2>
        <p>Browse all images in each category via an automatic horizontal rotating panel, then click any frame to compare original versus mask.</p>
      </div>

      <div class="controls reveal">
        <div class="field-group">
          <label for="searchInput">Search</label>
          <input id="searchInput" type="search" placeholder="material, phase, condition..." autocomplete="off">
        </div>
        <div class="field-group">
          <label for="familyFilter">Material family</label>
          <select id="familyFilter">
            <option value="all">All Families</option>
          </select>
        </div>
        <div class="field-group">
          <label for="magFilter">Magnification</label>
          <select id="magFilter">
            <option value="all">All Modes</option>
          </select>
        </div>
      </div>

      <nav class="subset-jump reveal" id="subsetJump" aria-label="Jump to dataset section"></nav>

      <div id="subsetContainer" class="subset-container"></div>
    </section>
  </main>

  <footer class="site-footer">
    <p>AMAM Dataset • Built for benchmark publication and reproducible segmentation evaluation.</p>
  </footer>

  <dialog id="compareModal" class="compare-modal" aria-label="Original and mask comparison">
    <form method="dialog" class="compare-backdrop">
      <button class="compare-close" aria-label="Close comparison" value="cancel" type="submit">×</button>
    </form>
    <div class="compare-header">
      <h3 id="compareTitle">Image Compare</h3>
    </div>
    <div class="compare-grid">
      <figure class="compare-pane">
        <img id="compareOriginalImage" alt="Original dataset image">
        <figcaption>Original</figcaption>
      </figure>
      <figure class="compare-pane" id="compareMaskPane">
        <img id="compareMaskImage" alt="Mask image">
        <figcaption>Mask</figcaption>
      </figure>
    </div>
    <div class="compare-meta" id="compareMeta"></div>
    <div class="compare-actions">
      <a id="compareOpenOriginal" class="btn btn-ghost" target="_blank" rel="noopener noreferrer" href="#">Open Original</a>
      <a id="compareDownloadOriginal" class="btn btn-ghost" target="_blank" rel="noopener noreferrer" href="#">Download Original</a>
      <a id="compareOpenMask" class="btn btn-secondary" target="_blank" rel="noopener noreferrer" href="#">Open Mask</a>
      <a id="compareDownloadMask" class="btn btn-secondary" target="_blank" rel="noopener noreferrer" href="#">Download Mask</a>
    </div>
  </dialog>

  <script src="assets/js/asset-url.5aa1a270.js" defer></script>
  <script src="assets/js/app.d6a84722.js" defer></script>
</body>
</html>