CryoLauncher Online#
from IPython.display import HTML
HTML("""
<style>
/* Full-width layout */
.bd-main .bd-content,
.bd-main .bd-content .bd-article-container,
.bd-main .bd-content .bd-article,
article.bd-article {
max-width: 100% !important;
width: 100% !important;
}
/* Hide code cells and pager */
div.cell_input,
div.prompt,
.prev-next-area {
display: none !important;
}
/* Page shell */
.run-center-wrap {
max-width: 1120px;
margin: 28px auto 24px;
font-family: system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
}
.run-center-kicker {
display: inline-block;
padding: 6px 12px;
border-radius: 999px;
background: rgba(13,110,253,.08);
color: #0d6efd;
font-size: 12px;
font-weight: 700;
letter-spacing: .02em;
margin-bottom: 14px;
}
.run-center-title {
font-size: 34px;
font-weight: 700;
line-height: 1.15;
color: #1f2937;
margin-bottom: 10px;
}
.run-center-sub {
font-size: 17px;
line-height: 1.65;
color: rgba(0,0,0,.72);
max-width: 900px;
margin-bottom: 30px;
}
/* Cards grid */
.run-center-grid {
display: grid;
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: 24px;
align-items: stretch;
}
.run-card {
display: flex;
flex-direction: column;
justify-content: space-between;
min-height: 100%;
background: #ffffff;
border: 1px solid rgba(0,0,0,.08);
border-radius: 18px;
box-shadow: 0 8px 24px rgba(0,0,0,.05);
padding: 28px 24px 24px;
}
.run-card:hover {
transform: translateY(-2px);
box-shadow: 0 14px 30px rgba(0,0,0,.08);
border-color: rgba(13,110,253,.20);
}
.run-card-badge {
display: inline-block;
padding: 6px 12px;
border-radius: 999px;
background: rgba(13,110,253,.10);
color: #0d6efd;
font-size: 12px;
font-weight: 700;
letter-spacing: .02em;
margin-bottom: 14px;
}
.run-card-badge.secondary {
background: rgba(25,135,84,.10);
color: #198754;
}
.run-card-title {
font-size: 26px;
font-weight: 700;
line-height: 1.2;
color: #1f2937;
margin-bottom: 12px;
}
.run-card-text {
color: rgba(0,0,0,.70);
line-height: 1.65;
font-size: 15px;
margin-bottom: 18px;
}
.run-card-list {
margin: 0 0 24px 0;
padding-left: 18px;
color: rgba(0,0,0,.74);
font-size: 14px;
line-height: 1.75;
}
.run-card-list li {
margin-bottom: 4px;
}
.run-btn {
display: inline-block;
padding: 13px 20px;
border: none;
border-radius: 12px;
background: #0d6efd;
color: white !important;
text-decoration: none;
font-weight: 700;
font-size: 15px;
cursor: pointer;
box-shadow: 0 8px 18px rgba(13,110,253,.18);
transition: background .15s ease, transform .15s ease, box-shadow .15s ease;
}
.run-btn:hover {
background: #0b5ed7;
transform: translateY(-1px);
}
.run-btn.secondary {
background: #198754;
box-shadow: 0 8px 18px rgba(25,135,84,.18);
}
.run-btn.secondary:hover {
background: #157347;
}
.run-card-footer {
margin-top: auto;
}
/* Responsive */
@media (max-width: 900px) {
.run-center-grid {
grid-template-columns: 1fr;
}
}
</style>
<div class="run-center-wrap">
<div class="run-center-kicker">Interactive Platform</div>
<div class="run-center-title">Choose a workflow</div>
<div class="run-center-sub">
Launch coupled data assimilation workflows through ICESEE, or run ice-sheet models directly through existing containerized and Spack-based environments.
</div>
<div class="run-center-grid">
<div class="run-card">
<div>
<div class="run-card-badge">Data Assimilation Workflow</div>
<div class="run-card-title">ICESEE Data Assimilation</div>
<div class="run-card-text">
Run coupled ICESEE data assimilation workflows with supported ice-sheet models through a unified interactive interface.
</div>
<ul class="run-card-list">
<li>Data assimilation and state estimation workflows</li>
<li>Local, remote, and cloud execution modes</li>
<li>Integrated configuration, submission, and result preview</li>
</ul>
</div>
<div class="run-card-footer">
<button class="run-btn" onclick="openICESEEGUI()">Open ICESEE GUI</button>
</div>
</div>
<div class="run-card">
<div>
<div class="run-card-badge secondary">Model-Only Workflow</div>
<div class="run-card-title">Ice-Sheet Modeling</div>
<div class="run-card-text">
Run supported ice-sheet models directly without the data assimilation layer, using environments already available through containers and Spack.
</div>
<ul class="run-card-list">
<li>Model-only workflows without ICESEE DA coupling</li>
<li>Container access through ICESEE-Containers</li>
<li>Spack-based installation and execution pathways</li>
</ul>
</div>
<div class="run-card-footer">
<button class="run-btn secondary" onclick="openIceSheetsGUI()">Open Modeling GUI</button>
</div>
</div>
</div>
</div>
<script>
function getAppBase() {
const protocol = window.location.protocol;
const origin = window.location.origin;
const path = window.location.pathname;
if (protocol === "file:") {
return "http://127.0.0.1:8080";
}
const nbIdx = path.indexOf("/icesee_jupyter_notebooks/");
if (nbIdx >= 0) {
return origin + path.slice(0, nbIdx);
}
return origin;
}
function openICESEEGUI() {
window.open(getAppBase() + "/icesee-gui/", "_blank", "noopener");
}
function openIceSheetsGUI() {
window.open(getAppBase() + "/icesheets/", "_blank", "noopener");
}
</script>
""")
Interactive Platform
Choose a workflow
Launch coupled data assimilation workflows through ICESEE, or run ice-sheet models directly through existing containerized and Spack-based environments.
Data Assimilation Workflow
ICESEE Data Assimilation
Run coupled ICESEE data assimilation workflows with supported ice-sheet models through a unified interactive interface.
- Data assimilation and state estimation workflows
- Local, remote, and cloud execution modes
- Integrated configuration, submission, and result preview
Model-Only Workflow
Ice-Sheet Modeling
Run supported ice-sheet models directly without the data assimilation layer, using environments already available through containers and Spack.
- Model-only workflows without ICESEE DA coupling
- Container access through ICESEE-Containers
- Spack-based installation and execution pathways