challenges-capsules/index.html at main · codeocean/challenges-capsules · 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
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
<!doctype html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Challenge Capsules Atlas</title>
    <meta
      name="description"
      content="A usage-first atlas of Code Ocean challenge capsules with result highlights, artifact links, AQUA prompts, implementation docs, and review summaries."
    />
    <link rel="icon" type="image/svg+xml" href="./code-ocean-logo.svg" />
    <link rel="stylesheet" href="./styles.css" />
  </head>
  <body>
    <div class="background-shell" aria-hidden="true">
      <div class="background-orb orb-a"></div>
      <div class="background-orb orb-b"></div>
      <div class="background-grid"></div>
    </div>

    <header class="hero">
      <div class="hero-copy">
        <div class="hero-brand">
          <div class="brand-mark">
            <img class="code-ocean-logo" src="./code-ocean-logo.svg" alt="Code Ocean logo" />
          </div>
          <div class="brand-copy">
            <p class="eyebrow">Code Ocean Capsule Atlas</p>
            <p class="brand-note">Usage, evidence, artifacts, and copy-ready prompts for the Allen challenge capsules.</p>
          </div>
        </div>
        <h1 style="font-size: 3rem; max-width: none;">Code Ocean Submission for the Allen Institute Nautilex 2026 Challenge</h1>
        <p class="hero-intro">
          We provided Code Ocean's Aqua agent with the descriptions of the 15 Nautilex 2026 challenges,
          and asked it to generate a working capsule for each of them.
          This atlas summarizes the results, describing the interpretation of the challenge,
          the way it was implemented, and the way it evaluated the solution.
          Each solution can be replicated and re-used as a Code Ocean capsule.
        </p>

        <div class="hero-actions">
          <a class="primary-link" href="#overview">Browse the overview table</a>
          <a class="secondary-link" href="#challenge-08">Jump to Query BFF</a>
        </div>
      </div>

      <div class="hero-aside">
        <div class="hero-card">
          <p class="mini-label">Start here</p>
          <p>
            Open <strong>RESULTS</strong> first when you need proof, then open
            <strong>README</strong> or <strong>HOW TO IMPLEMENT</strong> when you need context or adaptation details.
          </p>
        </div>
        <div class="hero-card">
          <p class="mini-label">Aqua workflow</p>
          <p>
            Every capsule card now links both to a rendered AQUA prompt page and to the raw
            <code>AQUA_PROMPT.md</code> file so the prompt can be copied straight into Aqua.
          </p>
        </div>
      </div>
    </header>

    <section class="process-band" aria-label="Aqua to capsule process">
      <div class="surface-card process-card">
        <img
          class="process-image"
          src="./Aqua-nautilex-process.png"
          alt="Infographic showing the Aqua to capsule workflow for the Allen Institute Nautilex 2026 challenge submissions."
          loading="lazy"
        />
      </div>
    </section>

    <main class="site-layout">
      <aside class="sidebar">
        <div class="sidebar-panel stats-panel">
          <p class="panel-kicker">Snapshot</p>
          <div id="stats-grid" class="stats-grid"></div>
        </div>

        <div class="sidebar-panel">
          <p class="panel-kicker">AI Hackathon challenges</p>
          <nav id="capsule-nav" class="capsule-nav" aria-label="AI Hackathon challenges"></nav>
        </div>

        <div class="sidebar-panel legend-panel">
          <p class="panel-kicker">How to read</p>
          <ul class="legend-list">
            <li><span class="status-dot dot-completed"></span> Completed capsules are usable end to end and have evidence worth opening.</li>
            <li><span class="status-dot dot-partial"></span> Partial capsules expose a valuable workflow but still have blocked science or environment steps.</li>
          </ul>
        </div>
      </aside>

      <div class="content-column">
        <section id="overview" class="surface-card overview-card">
          <div class="section-heading">
            <div>
              <p class="section-kicker">Overview</p>
            </div>
            <p class="section-note" id="results-note"></p>
          </div>

          <details class="overview-foldable" open>
            <summary class="overview-summary">
              <span class="overview-summary-title">Overview table and filters</span>
              <span class="overview-summary-hint">Collapse or expand</span>
            </summary>

            <div class="overview-foldable-body">
              <div class="toolbar">
                <label class="search-field">
                  <span class="visually-hidden">Search capsules</span>
                  <input
                    id="search-input"
                    type="search"
                    placeholder="Search by challenge, challenge, result artifact, data asset, or prompt"
                  />
                </label>

                <div class="button-row" id="status-filters" aria-label="Status filters"></div>
                <div class="button-row" id="flag-filters" aria-label="Capability filters"></div>
              </div>

              <div class="table-wrap">
                <table class="capsule-table">
                  <thead>
                    <tr>
                      <th class="col-challenge" scope="col" aria-sort="ascending">
                        <button class="sort-button" type="button" data-sort-key="challenge">
                          <span>Challenge</span>
                          <span class="sort-indicator" aria-hidden="true"></span>
                        </button>
                      </th>
                      <th class="col-status" scope="col" aria-sort="none">
                        <button class="sort-button" type="button" data-sort-key="status">
                          <span>Status</span>
                          <span class="sort-indicator" aria-hidden="true"></span>
                        </button>
                      </th>
                      <th class="col-usecase" scope="col" aria-sort="none">
                        <button class="sort-button" type="button" data-sort-key="useCase">
                          <span>challenge</span>
                          <span class="sort-indicator" aria-hidden="true"></span>
                        </button>
                      </th>
                      <th class="col-usage" scope="col" aria-sort="none">
                        <button class="sort-button" type="button" data-sort-key="usage">
                          <span>How to run</span>
                          <span class="sort-indicator" aria-hidden="true"></span>
                        </button>
                      </th>
                      <th class="col-result" scope="col" aria-sort="none">
                        <button class="sort-button" type="button" data-sort-key="result">
                          <span>Key result</span>
                          <span class="sort-indicator" aria-hidden="true"></span>
                        </button>
                      </th>
                      <th class="col-docs" scope="col" aria-sort="none">
                        <button class="sort-button" type="button" data-sort-key="docs">
                          <span>Docs and artifacts</span>
                          <span class="sort-indicator" aria-hidden="true"></span>
                        </button>
                      </th>
                    </tr>
                  </thead>
                  <tbody id="overview-body"></tbody>
                </table>
              </div>
            </div>
          </details>
        </section>

        <section class="story-intro">
          <div class="surface-card intro-card">
            <p class="section-kicker">Capsule guide</p>
            <h2>Every capsule section now starts with usage and evidence</h2>
            <p>
              Each capsule card below opens with the best-fit challenge, run mode,
              result highlights, key artifacts, and the raw AQUA prompt link. The
              embedded docs underneath then expose README, RESULTS, HOW TO IMPLEMENT,
              AQUA PROMPT, and review content without leaving the atlas.
            </p>
          </div>
        </section>

        <section id="capsules-container" class="capsules-stack" aria-label="Capsule details"></section>
      </div>
    </main>

    <footer class="footer">
      <p>
        Source material: local capsule READMEs, RESULTS, HOW TO IMPLEMENT, AQUA PROMPT files,
        machine-readable result artifacts under each <code>code/results</code> directory, and the
        independent review summaries in
        <a href="./review-challanges-iteration-03/index.md">review-challanges-iteration-03/</a>.
      </p>
    </footer>

    <script src="./capsules-data.js"></script>
    <script src="./capsule-docs.js"></script>
    <script src="./markdown-renderer.js"></script>
    <script src="./app.js"></script>
  </body>
</html>