Spaces:

FINAL-Bench
/

model-galaxy

Running

File size: 9,236 Bytes

<!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>