Hugging Face's logo

Spaces:
FINAL-Bench
/
model-galaxy
Running

App Files Community
model-galaxy / index.html
SeaWolf-AI's picture
SeaWolf-AI
UI: English-only β€” replace all Korean strings (loading status, hint, done) with English
bd531bb verified
raw
history blame contribute delete
9.24 kB
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en-gb" lang="en" xmlns:og="http://opengraphprotocol.org/schema/" xmlns:fb="http://www.facebook.com/2008/fbml" itemscope itemtype="http://schema.org/Map">
<head>
<title>Model Galaxy β€” Darwin family + 2026 Trending</title>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<meta charset="utf-8">
<meta name="viewport" content="width=device-width,height=device-height,initial-scale=1,user-scalable=no" />
<meta http-equiv="X-UA-Compatible" content="IE=Edge" />
<!--[if IE]><script type="text/javascript" src="js/excanvas.js"></script><![endif]--> <!-- js/default.js -->
 <script src="js/jquery/jquery.min.js" type="text/javascript"></script>
 <script src="js/sigma/sigma.min.js" type="text/javascript" language="javascript"></script>
 <script src="js/sigma/sigma.parseJson.js" type="text/javascript" language="javascript"></script>
 <script src="js/fancybox/jquery.fancybox.pack.js" type="text/javascript" language="javascript"></script>
 <script src="js/main.js" type="text/javascript" language="javascript"></script>
 <script src="https://cdnjs.cloudflare.com/ajax/libs/pako/2.0.4/pako.min.js"></script>
 <link rel="stylesheet" type="text/css" href="js/fancybox/jquery.fancybox.css"/>
 <link rel="stylesheet" href="css/style.css" type="text/css" media="screen" />
 <link rel="stylesheet" media="screen and (max-height: 770px)" href="css/tablet.css" />
</head>
<body>
 <div id="starfield"></div>
 <button id="theme-toggle" type="button" title="Toggle Galaxy / Atlas mode">
 <span class="t-icon">🌌</span><span class="t-label">Galaxy</span>
 </button>
 <div class="sigma-parent">
 <div class="sigma-expand" id="sigma-canvas"></div>
 <div id="loading-overlay">
 <div class="loading-card">
 <div class="loading-spinner"></div>
 <div class="loading-title">🌌 Model Galaxy</div>
 <div class="loading-status" id="loading-status">Loading data…</div>
 <div class="loading-progress"><div id="loading-bar"></div></div>
 <div class="loading-hint">Rendering a galaxy of 22,400+ models (5–15 s).<br>Look for the 🌳 Darwin Β· ⭐ Trending Β· 🎨 Multimodal galaxies once the canvas appears.</div>
 </div>
 </div>
 </div>
 <script>
 // Smooth 15-second progress fill (0% -> 95%) with rotating Korean stage labels.
 // Snaps to 100% and fades out when sigma renders the canvas.
 (function(){
 var s = document.getElementById('loading-status');
 var bar = document.getElementById('loading-bar');
 var overlay = document.getElementById('loading-overlay');
 var TARGET_MS = 15000; // fill to 95% over 15s
 var TICK_MS = 100; // smooth update every 100ms
 var FINAL_PCT = 95; // hold at 95% if canvas not yet ready
 var start = Date.now();
 var done = false;
 var stages = [
 [0, 'Loading atlas metadata…'],
 [2200, 'Downloading compressed graph (3 MB gzip)…'],
 [4800, 'Decompressing gzip (β‰ˆ 27 MB JSON)…'],
 [7800, 'Parsing 22,480 nodes…'],
 [10800, 'Computing Sigma.js layout…'],
 [13200, 'Rendering canvas…'],
 ];
 function updateStage(elapsed){
 for (var k = stages.length - 1; k >= 0; k--){
 if (elapsed >= stages[k][0]) { s.textContent = stages[k][1]; return; }
 }
 }
 var tick = setInterval(function(){
 if (done) return;
 var elapsed = Date.now() - start;
 var pct = Math.min(FINAL_PCT, (elapsed / TARGET_MS) * FINAL_PCT);
 bar.style.width = pct.toFixed(1) + '%';
 updateStage(elapsed);
 }, TICK_MS);
 // Watchdog: when sigma canvas exists, snap to 100% and fade
 var watch = setInterval(function(){
 var canvas = document.querySelectorAll('#sigma-canvas canvas');
 if (canvas.length > 0) {
 done = true;
 clearInterval(watch); clearInterval(tick);
 bar.style.width = '100%';
 s.textContent = 'Done βœ“';
 setTimeout(function(){
 overlay.style.opacity = '0';
 setTimeout(function(){ overlay.style.display = 'none'; }, 500);
 }, 350);
 }
 }, 200);
 // Hard cap at 30s β€” force-hide regardless
 setTimeout(function(){
 if (overlay.style.display !== 'none') {
 done = true;
 clearInterval(watch); clearInterval(tick);
 bar.style.width = '100%';
 s.textContent = 'Done βœ“';
 overlay.style.opacity = '0';
 setTimeout(function(){ overlay.style.display = 'none'; }, 500);
 }
 }, 30000);
 })();
 // Theme toggle: Galaxy (dark) ⇄ Atlas (light). Default Galaxy on first load.
 (function(){
 var btn = document.getElementById('theme-toggle');
 var icon = btn.querySelector('.t-icon');
 var label = btn.querySelector('.t-label');
 var saved = localStorage.getItem('mg-theme') || 'galaxy';
 function apply(t){
 if (t === 'galaxy') {
 document.body.classList.add('galaxy-mode');
 document.body.classList.remove('atlas-mode');
 icon.textContent = '🌌'; label.textContent = 'Galaxy';
 } else {
 document.body.classList.add('atlas-mode');
 document.body.classList.remove('galaxy-mode');
 icon.textContent = 'πŸ—ΊοΈ'; label.textContent = 'Atlas';
 }
 localStorage.setItem('mg-theme', t);
 }
 apply(saved);
 btn.addEventListener('click', function(){
 apply(document.body.classList.contains('galaxy-mode') ? 'atlas' : 'galaxy');
 });
 })();
 // Generate animated starfield (only visible in galaxy mode)
 (function(){
 var sf = document.getElementById('starfield');
 var html = '';
 for (var i = 0; i < 220; i++) {
 var x = Math.random() * 100;
 var y = Math.random() * 100;
 var sz = (Math.random() * 1.6 + 0.4).toFixed(2);
 var dur = (Math.random() * 4 + 2).toFixed(1);
 var delay = (Math.random() * 5).toFixed(1);
 html += '<i class="star" style="left:' + x + '%;top:' + y + '%;width:' + sz + 'px;height:' + sz + 'px;animation-duration:' + dur + 's;animation-delay:' + delay + 's"></i>';
 }
 sf.innerHTML = html;
 })();
 </script>
<div id="mainpanel">
 <div class="col">
 <div id="title"></div>
 <div id="titletext"></div>
 <div class="info cf">
 <dl>
 <dt class="moreinformation"></dt>
 <dd class="line"><a href="#information" class="line fb">More about the Model Atlas</a></dd>
 </dl>
 </div>
<div id="legend">
 <div class="box">
 <h2>Legend:</h2>
 <div id="colorLegend"></div>
 </dl>
 </div>
</div>
<div class="b1">
 <form>
 <div id="search" class="cf"><h2>Search:</h2>
 <input type="text" name="search" value="Search by name" class="empty"/><div class="state"></div>
 <div class="results"></div>
 </div>
<div class="cf" id="attributeselect"><h2>Group Selector:</h2>
 <div class="select">Select Group</div>
 <div class="list cf"></div>
 </div>
<div class="cf" id="coloringselect"><h2>Color By:</h2>
 <div class="select">Select Attribute</div>
 <div class="list cf"></div>
 </div>
<div class="cf" id="atlasselect"><h2>Atlas:</h2>
 <div class="select">Select Atlas</div>
 <div class="list cf"></div>
 </div>
</form>
 </div>
 </div>
 <div id="information">
 </div>
</div>
 <div id="zoom">
 <div class="z" rel="in"></div> <div class="z" rel="out"></div> <div class="z" rel="center"></div>
 </div>
<div id="attributepane">
<div class="text">
 <div title="Close" class="left-close returntext"><div class="c cf"><span>Return to the full network</span></div></div>
<div class="headertext">
 <span>Information Pane</span>
</div>
<div class="nodeattributes">
 <div class="name"></div>
 <div class="data"></div>
 <div class="p">Connections:</div>
 <div class="link">
 <ul>
 </ul>
 </div>
 </div>
 </div>
</div>
<div id="developercontainer">
 <p>Web rendering powered by <a href="https://sigmajs.org/" target="_blank">SigmaJS</a>, graph visualization by <a href="https://gephi.org/" target="_blank">Gephi</a>.</p>
 <p>Web integration adapted by <a href="https://horwitz.ai/" target="_blank">Eliahu Horwitz</a> based on the <a href="https://github.com/oxfordinternetinstitute/gephi-plugins/tree/sigmaexporter-plugin" target="_blank" title="Gephi SigmaJS plugin">Gephi SigmaJS plugin </a> by <a href="https://www.oii.ox.ac.uk" target="_blank" title="Oxford Internet Institute">Oxford Internet Institute</a> and <a href="https://jisc.ac.uk" target="_blank" title="JISC">JISC</a>.</p>
</div>
<!-- Default Statcounter code for Model Atlas HF Space
https://huggingface.co/spaces/Eliahu/Model-Atlas -->
<script type="text/javascript">
var sc_project=13102932;
var sc_invisible=1;
var sc_security="830309d4";
</script>
<script type="text/javascript"
src="https://www.statcounter.com/counter/counter.js"
async></script>
<noscript><div class="statcounter"><a title="Web Analytics"
href="https://statcounter.com/" target="_blank"><img
class="statcounter"
src="https://c.statcounter.com/13102932/0/830309d4/1/"
alt="Web Analytics"
referrerPolicy="no-referrer-when-downgrade"></a></div></noscript>
<!-- End of Statcounter Code -->
</body>
</html>