v5: Galaxy layout — 3 logarithmic spiral galaxies (Darwin/Trending/Multi) + dark Galaxy mode toggle + animated starfield

compressed_darwin_data.json.gz

@@ -1,3 +1,3 @@
 version https://git-lfs.github.com/spec/v1
-oid sha256:07127fe767c5834c9bcb300387e624b06265d4a5ad2c949eee812a33053c1512
-size 32542
+oid sha256:4a0ffd0b227e1d4fe83c13d66aae85b90d45cb9c6605d6a650285f953beea83b
+size 33895

compressed_large_nlp_data.json.gz

@@ -1,3 +1,3 @@
 version https://git-lfs.github.com/spec/v1
-oid sha256:82bc26245a04be0bcb697aa02b7e99b8ee6377707c3309e5fe3e81630a463a20
-size 23677622
+oid sha256:b3215545f9d68d1717a2751a1885cccd2aae0854304845107986cebf05ff2aea
+size 23678854

compressed_modalities_data.json.gz

@@ -1,3 +1,3 @@
 version https://git-lfs.github.com/spec/v1
-oid sha256:42c3788369d78a2124a6449352c2356c3652bbbbbb135695828bc43127ea6d54
-size 3128056
+oid sha256:43f33a68ae0efe902d3edad71f1493c9c5e9815f54feb77f0d9b748c04a2ad82
+size 3129297

css/style.css

@@ -764,8 +764,210 @@ display: none;
 }
 
 /* ============================================================
-   DARWIN ATLAS — PREMIUM LIGHT OVERRIDE (2026-04-30)
-   White base + amber/red accents + frosted glass panels
+   MODEL GALAXY — DUAL THEME (Galaxy 🌌 / Atlas 🗺️)
+   ============================================================ */
+
+/* ---- Theme toggle button (top-right) ---- */
+#theme-toggle {
+  position: fixed;
+  top: 14px;
+  right: 14px;
+  z-index: 200;
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  padding: 8px 14px 8px 12px;
+  border-radius: 24px;
+  border: 1px solid rgba(245,158,11,0.4);
+  background: rgba(255,255,255,0.92);
+  backdrop-filter: blur(10px);
+  font-family: 'IBM Plex Mono', monospace;
+  font-size: 11px;
+  font-weight: 700;
+  letter-spacing: 0.4px;
+  color: #b45309;
+  cursor: pointer;
+  box-shadow: 0 4px 14px rgba(15,23,42,0.08);
+  transition: all 0.2s ease;
+}
+#theme-toggle:hover {
+  transform: translateY(-1px);
+  box-shadow: 0 6px 18px rgba(245,158,11,0.25);
+  border-color: #f59e0b;
+}
+#theme-toggle .t-icon { font-size: 14px; }
+.galaxy-mode #theme-toggle {
+  background: rgba(15,23,42,0.85);
+  border-color: rgba(245,158,11,0.55);
+  color: #fbbf24;
+  box-shadow: 0 0 18px rgba(245,158,11,0.25), 0 4px 14px rgba(0,0,0,0.5);
+}
+
+/* ---- Starfield (galaxy mode only) ---- */
+#starfield {
+  position: fixed;
+  inset: 0;
+  z-index: 0;
+  pointer-events: none;
+  opacity: 0;
+  transition: opacity 0.6s ease;
+}
+.galaxy-mode #starfield {
+  opacity: 1;
+}
+#starfield .star {
+  position: absolute;
+  background: #fff;
+  border-radius: 50%;
+  animation-name: mg-twinkle;
+  animation-iteration-count: infinite;
+  animation-timing-function: ease-in-out;
+  box-shadow: 0 0 4px rgba(255,255,255,0.6);
+}
+@keyframes mg-twinkle {
+  0%, 100% { opacity: 0.15; transform: scale(0.8); }
+  50%      { opacity: 1.0;  transform: scale(1.2); }
+}
+
+/* ============================================================
+   GALAXY MODE — deep space dark
+   ============================================================ */
+.galaxy-mode .sigma-expand {
+  background: radial-gradient(ellipse at 70% 60%, #1e1b4b 0%, #0f172a 40%, #020617 100%) !important;
+}
+.galaxy-mode body { background: #020617 !important; }
+.galaxy-mode #mainpanel {
+  background: linear-gradient(155deg, rgba(15,23,42,0.92) 0%, rgba(30,41,59,0.92) 50%, rgba(15,23,42,0.94) 100%) !important;
+  border-right: 1px solid rgba(245,158,11,0.35) !important;
+  box-shadow: 4px 0 28px rgba(0,0,0,0.5), inset -1px 0 0 rgba(245,158,11,0.1) !important;
+  color: #e2e8f0 !important;
+}
+.galaxy-mode #titletext { color: #94a3b8 !important; border-bottom-color: rgba(148,163,184,0.18) !important; }
+.galaxy-mode #titletext strong, .galaxy-mode #titletext a { color: #fbbf24 !important; }
+.galaxy-mode #mainpanel h2 { color: #f8fafc !important; }
+.galaxy-mode .info dd.line a {
+  color: #fbbf24 !important;
+  background: rgba(245,158,11,0.1) !important;
+  border-color: rgba(245,158,11,0.35) !important;
+}
+.galaxy-mode #legend {
+  background: rgba(2,6,23,0.55) !important;
+  border-color: rgba(148,163,184,0.18) !important;
+}
+.galaxy-mode #colorLegend { color: #cbd5e1 !important; }
+.galaxy-mode #colorLegend > * { background: rgba(255,255,255,0.03) !important; }
+.galaxy-mode #colorLegend > *:hover { background: rgba(245,158,11,0.1) !important; }
+.galaxy-mode .b1 form > div {
+  background: rgba(2,6,23,0.55) !important;
+  border-color: rgba(148,163,184,0.15) !important;
+}
+.galaxy-mode #search input[type="text"] {
+  background: rgba(2,6,23,0.7) !important;
+  border-color: rgba(148,163,184,0.3) !important;
+  color: #f1f5f9 !important;
+  box-shadow: inset 0 1px 2px rgba(0,0,0,0.4) !important;
+}
+.galaxy-mode #search input.empty { color: rgba(148,163,184,0.65) !important; }
+.galaxy-mode #search .results a { color: #cbd5e1 !important; }
+.galaxy-mode #search .results a:hover { color: #fbbf24 !important; }
+.galaxy-mode .select {
+  background: rgba(2,6,23,0.7) !important;
+  border-color: rgba(148,163,184,0.3) !important;
+  color: #f1f5f9 !important;
+}
+.galaxy-mode .select:hover {
+  background: rgba(245,158,11,0.08) !important;
+  border-color: #f59e0b !important;
+}
+.galaxy-mode .list {
+  background: rgba(2,6,23,0.97) !important;
+  border-color: rgba(148,163,184,0.3) !important;
+}
+.galaxy-mode .list a { color: #cbd5e1 !important; }
+.galaxy-mode .list a:hover { color: #fbbf24 !important; }
+.galaxy-mode .list a[data-file="compressed_modalities_data.json.gz"] {
+  background: rgba(245,158,11,0.12) !important;
+  color: #fbbf24 !important;
+}
+.galaxy-mode .list a[data-file="compressed_darwin_data.json.gz"] {
+  background: rgba(220,38,38,0.18) !important;
+  color: #fca5a5 !important;
+}
+.galaxy-mode #attributepane {
+  background: linear-gradient(195deg, rgba(15,23,42,0.96) 0%, rgba(2,6,23,0.96) 100%) !important;
+  border-left-color: rgba(245,158,11,0.35) !important;
+  box-shadow: -4px 0 28px rgba(0,0,0,0.5) !important;
+  color: #e2e8f0 !important;
+}
+.galaxy-mode #attributepane .headertext { color: #f8fafc !important; border-bottom-color: rgba(245,158,11,0.4) !important; }
+.galaxy-mode #attributepane .left-close {
+  background: rgba(245,158,11,0.12) !important;
+  border-color: rgba(245,158,11,0.4) !important;
+  color: #fbbf24 !important;
+}
+.galaxy-mode #attributepane .name {
+  color: #fbbf24 !important;
+  border-bottom-color: rgba(148,163,184,0.25) !important;
+}
+.galaxy-mode #attributepane .data { color: #cbd5e1 !important; }
+.galaxy-mode #attributepane .data > div, .galaxy-mode #attributepane .data > p {
+  border-bottom-color: rgba(148,163,184,0.1) !important;
+}
+.galaxy-mode #attributepane .data strong, .galaxy-mode #attributepane .data b { color: #fbbf24 !important; }
+.galaxy-mode #attributepane .p { color: #f9a8d4 !important; border-bottom-color: rgba(236,72,153,0.4) !important; }
+.galaxy-mode #attributepane .link a {
+  background: rgba(245,158,11,0.06) !important;
+  border-color: rgba(148,163,184,0.18) !important;
+  color: #cbd5e1 !important;
+}
+.galaxy-mode #attributepane .link a:hover {
+  background: rgba(245,158,11,0.18) !important;
+  color: #fbbf24 !important;
+}
+.galaxy-mode #zoom {
+  background: rgba(15,23,42,0.85) !important;
+  border-color: rgba(245,158,11,0.3) !important;
+  box-shadow: 0 4px 18px rgba(0,0,0,0.5) !important;
+}
+.galaxy-mode #zoom .z {
+  background-color: rgba(245,158,11,0.12) !important;
+  border-color: rgba(245,158,11,0.35) !important;
+}
+.galaxy-mode #zoom .z:hover { background-color: rgba(245,158,11,0.32) !important; }
+.galaxy-mode #information {
+  background: rgba(15,23,42,0.97) !important;
+  border-color: rgba(245,158,11,0.4) !important;
+  color: #e2e8f0 !important;
+}
+.galaxy-mode #information h2.title, .galaxy-mode #information h2 { color: #fbbf24 !important; }
+.galaxy-mode #information code, .galaxy-mode #information pre {
+  background: rgba(2,6,23,0.7) !important;
+  border-color: rgba(148,163,184,0.25) !important;
+  color: #fbbf24 !important;
+}
+.galaxy-mode #information strong { color: #fbbf24 !important; }
+.galaxy-mode #information .features { background: rgba(245,158,11,0.08) !important; border-color: rgba(245,158,11,0.25) !important; }
+.galaxy-mode #developercontainer {
+  background: rgba(15,23,42,0.7) !important;
+  border-top-color: rgba(148,163,184,0.18) !important;
+  color: #94a3b8 !important;
+}
+.galaxy-mode #developercontainer a { color: #fbbf24 !important; }
+/* Loading overlay galaxy variant */
+.galaxy-mode #loading-overlay {
+  background: radial-gradient(ellipse at center, #1e1b4b 0%, #0f172a 60%, #020617 100%) !important;
+}
+.galaxy-mode .loading-card {
+  background: rgba(15,23,42,0.92) !important;
+  border-color: rgba(245,158,11,0.45) !important;
+  box-shadow: 0 0 40px rgba(245,158,11,0.25), 0 20px 60px rgba(0,0,0,0.6) !important;
+}
+.galaxy-mode .loading-status { color: #fbbf24 !important; }
+.galaxy-mode .loading-hint { color: #94a3b8 !important; }
+.galaxy-mode .loading-progress { background: rgba(245,158,11,0.18) !important; }
+
+/* ============================================================
+   ORIGINAL ATLAS-MODE LIGHT OVERRIDES (default for now)
    ============================================================ */
 
 @import url('https://fonts.googleapis.com/css2?family=IBM+Plex+Mono:wght@500;600;700&family=IBM+Plex+Sans:wght@300;400;500;600;700&family=IBM+Plex+Sans+KR:wght@400;500;600;700&display=swap');

index.html

@@ -24,6 +24,10 @@
 
 
 <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">
@@ -98,6 +102,45 @@
       }
     }, 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">