model-galaxy / index.html
SeaWolf-AI's picture
Add loading overlay with progress + Korean status messages
fe74459 verified
raw
history blame
6.81 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 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">๋ฐ์ดํ„ฐ ๋กœ๋”ฉ ์ค‘โ€ฆ</div>
<div class="loading-progress"><div id="loading-bar"></div></div>
<div class="loading-hint">22,400+ ๋…ธ๋“œ์˜ ๊ฐค๋Ÿญ์‹œ๋ฅผ ๊ทธ๋ฆฌ๋Š” ์ค‘์ž…๋‹ˆ๋‹ค (5โ€“15์ดˆ ์†Œ์š”).<br>์™„๋ฃŒ ํ›„ ์šฐ์ƒ๋‹จ ๐ŸŒณ Darwin ยท ์šฐํ•˜๋‹จ โญ Trending ํด๋Ÿฌ์Šคํ„ฐ๋ฅผ ํ™•์ธํ•˜์„ธ์š”.</div>
</div>
</div>
</div>
<script>
// Hide overlay once sigma is initialized + show progress on data fetch
(function(){
var s = document.getElementById('loading-status');
var bar = document.getElementById('loading-bar');
var overlay = document.getElementById('loading-overlay');
var origFetch = window.fetch;
var step = 0;
var stages = [
'Atlas ๋ฉ”ํƒ€๋ฐ์ดํ„ฐ ๋กœ๋“œ ์ค‘โ€ฆ',
'์••์ถ•๋œ ๊ทธ๋ž˜ํ”„ ๋‹ค์šด๋กœ๋“œ ์ค‘โ€ฆ',
'Gzip ์••์ถ• ํ•ด์ œ ์ค‘โ€ฆ',
'๋…ธ๋“œ / ์—ฃ์ง€ ํŒŒ์‹ฑ ์ค‘โ€ฆ',
'Sigma.js ๋ ˆ์ด์•„์›ƒ ๊ณ„์‚ฐ ์ค‘โ€ฆ',
'๊ฑฐ์˜ ์™„๋ฃŒโ€ฆ'
];
var i = 0;
var tick = setInterval(function(){
if (i < stages.length) { s.textContent = stages[i]; bar.style.width = ((i+1)*16) + '%'; i++; }
}, 1200);
// Watchdog: hide overlay when canvas has children (sigma rendered)
var watch = setInterval(function(){
var canvas = document.querySelectorAll('#sigma-canvas canvas');
if (canvas.length > 0) {
clearInterval(watch); clearInterval(tick);
bar.style.width = '100%'; s.textContent = '์™„๋ฃŒ โœ“';
setTimeout(function(){
overlay.style.opacity = '0';
setTimeout(function(){ overlay.style.display = 'none'; }, 400);
}, 250);
}
}, 250);
// Hard cap: hide after 30s no matter what
setTimeout(function(){
if (overlay.style.display !== 'none') {
overlay.style.opacity = '0';
setTimeout(function(){ overlay.style.display = 'none'; }, 400);
clearInterval(watch); clearInterval(tick);
}
}, 30000);
})();
</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>