abidlabs/dnazoo-poc / juicebox_poc.html
abidlabs's picture
download
raw
1.99 kB
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>DNA Zoo × Hugging Face Bucket PoC</title>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.2.0/css/font-awesome.min.css">
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/juicebox.js@2.4.8/dist/css/juicebox.css">
<style>
body { margin: 0; font: 15px/1.45 system-ui, sans-serif; color: #17202a; }
header { padding: 16px 22px; border-bottom: 1px solid #dfe5eb; background: #f7f9fb; }
h1 { margin: 0 0 5px; font-size: 20px; }
p { margin: 4px 0; }
code { overflow-wrap: anywhere; }
#status { color: #59636e; }
#juicebox { margin: 14px; min-height: 720px; }
</style>
</head>
<body>
<header>
<h1>Cheetah Hi-C map from a public Hugging Face Bucket</h1>
<p><strong>File:</strong> Acinonyx jubatus <code>aciJub1.hic</code> (2,524,603,208 bytes)</p>
<p><strong>URL:</strong> <a id="raw-link" href="#">open raw Bucket object</a></p>
<p id="status">Starting Juicebox.js…</p>
</header>
<div id="juicebox"></div>
<script src="https://cdn.jsdelivr.net/npm/juicebox.js@2.4.8/dist/juicebox.min.js"></script>
<script>
const HIC_URL = "https://huggingface.co/buckets/abidlabs/dnazoo-poc/resolve/Acinonyx_jubatus/aciJub1.hic";
document.getElementById("raw-link").href = HIC_URL;
const status = document.getElementById("status");
juicebox.init(document.getElementById("juicebox"), {
url: HIC_URL,
name: "DNA Zoo — Acinonyx jubatus (HF Bucket)",
normalization: "NONE"
}).then(() => {
status.textContent = "Loaded. Pan and zoom to trigger additional independent byte-range reads.";
status.style.color = "#167547";
}).catch((error) => {
status.textContent = `Load failed: ${error.message || error}`;
status.style.color = "#b42318";
console.error(error);
});
</script>
</body>
</html>

Xet Storage Details

Size:
1.99 kB
·
Xet hash:
4d2b9788cf8424b050103427dfc0199f73c244953e3a63984fc6d74983e453c0

Xet efficiently stores files, intelligently splitting them into unique chunks and accelerating uploads and downloads. More info.