Spaces:

---

s-b3

/

LifeStack

Like 0

Sleeping

<meta charset="UTF-8">

<meta name="viewport" content="width=device-width, initial-scale=1.0">

<title>LifeStack Portal | Meta OpenEnv 2026</title>

<script src="https://cdn.tailwindcss.com"></script>

<script src="https://cdn.jsdelivr.net/npm/chart.js"></script>

<script src="https://unpkg.com/vis-network/standalone/umd/vis-network.min.js"></script>

<script src="https://cdn.jsdelivr.net/npm/d3@7/dist/d3.min.js"></script>

<link href="https://fonts.googleapis.com/css2?family=Plus+Jakarta+Sans:wght@400;600;800&display=swap" rel="stylesheet">

<style>

<div class="max-w-6xl mx-auto">

<!-- Header -->

<header class="flex justify-between items-center mb-8">

<div>

<h1 class="text-3xl font-extrabold tracking-tight text-transparent bg-clip-text bg-gradient-to-r from-indigo-400 to-cyan-400">🪐 LifeStack Engine</h1>

<p class="text-slate-400 text-sm">Meta × HuggingFace OpenEnv Hackathon Finale</p>

</div>

<div class="hidden md:block text-right">

<span class="px-3 py-1 rounded-full bg-indigo-500/10 text-indigo-400 text-xs font-bold border border-indigo-500/20">PRODUCTION HARDENED v3.0</span>

</div>

</header>

<!-- Navigation Tabs -->

<div class="flex gap-6 border-b border-slate-800 mb-8 overflow-x-auto no-scrollbar whitespace-nowrap">

<button onclick="showTab('situation')" id="tab-situation" class="pb-4 text-sm font-semibold transition tab-active">Situational Portal</button>

<button onclick="showTab('custom')" id="tab-custom" class="pb-4 text-sm font-semibold text-slate-400 hover:text-white transition">💭 Try Your Case</button>

<button onclick="showTab('compare')" id="tab-compare" class="pb-4 text-sm font-semibold text-slate-400 hover:text-white transition">⚡ Untrained vs GRPO-Trained</button>

<button onclick="showTab('memeffect')" id="tab-memeffect" class="pb-4 text-sm font-semibold text-slate-400 hover:text-white transition">🧠 Memory Effect</button>

<button onclick="showTab('arjun')" id="tab-arjun" class="pb-4 text-sm font-semibold text-slate-400 hover:text-white transition">🗓️ Arjun's Journey</button>

<button onclick="showTab('history')" id="tab-history" class="pb-4 text-sm font-semibold text-slate-400 hover:text-white transition">📼 Episode Replay</button>

<button onclick="showTab('lab')" id="tab-lab" class="pb-4 text-sm font-semibold text-slate-400 hover:text-white transition">🎭 Personality Lab</button>

<button onclick="showTab('whatif')" id="tab-whatif" class="pb-4 text-sm font-semibold text-slate-400 hover:text-white transition">🧩 What-If Lab</button>

<button onclick="showTab('tasks')" id="tab-tasks" class="pb-4 text-sm font-semibold text-slate-400 hover:text-white transition">🗺️ Task Explorer</button>

<button onclick="showTab('performance')" id="tab-performance" class="pb-4 text-sm font-semibold text-slate-400 hover:text-white transition">📊 Analytics</button>

<button onclick="showTab('verification')" id="tab-verification" class="pb-4 text-sm font-semibold text-slate-400 hover:text-white transition">📬 Verification</button>

</div>

<!-- ── TAB 1: SITUATION PORTAL ── -->

<div id="content-situation" class="grid grid-cols-1 lg:grid-cols-3 gap-8">

<div class="lg:col-span-1 space-y-6">

<div class="glass p-6 rounded-2xl">

<h3 class="text-lg font-bold mb-4">Simulation Control</h3>

<div class="space-y-4 mb-6">

<div class="text-sm">

<label class="block text-slate-400 mb-2">Subject Persona</label>

<select id="person-select" onchange="resetDemoUI()" class="w-full bg-slate-900 border border-slate-700 rounded-lg px-4 py-2 text-white">

{% for p in persons %} <option value="{{ p }}">{{ p }}</option> {% endfor %}

</select>

</div>

<div class="text-sm">

<label class="block text-slate-400 mb-2">Life Conflict</label>

<select id="conflict-select" onchange="resetDemoUI()" class="w-full bg-slate-900 border border-slate-700 rounded-lg px-4 py-2 text-white">

{% for c in conflicts %} <option value="{{ c }}">{{ c }}</option> {% endfor %}

</select>

</div>

</div>

<div class="flex items-center justify-between p-3 bg-indigo-500/5 rounded-xl border border-indigo-500/20">

<div class="text-[10px] uppercase font-black text-indigo-400">Context Augmentation (RAG)</div>

<label class="relative inline-flex items-center cursor-pointer">

<input type="checkbox" id="memory-toggle" class="sr-only peer">

<div class="w-9 h-5 bg-slate-700 peer-focus:outline-none rounded-full peer peer-checked:after:translate-x-full rtl:peer-checked:after:-translate-x-full peer-checked:after:border-white after:content-[''] after:absolute after:top-[2px] after:start-[2px] after:bg-white after:border-gray-300 after:border after:rounded-full after:h-4 after:w-4 after:transition-all peer-checked:bg-indigo-600"></div>

</label>

</div>

<button onclick="startDemo()" id="simulate-btn" class="w-full py-4 bg-indigo-600 hover:bg-indigo-500 rounded-xl font-bold transition flex items-center justify-center gap-2">

<span id="btn-icon">▶</span> <span id="btn-text">Start Simulation</span>

</button>

</div>

<!-- Trajectroy -->

<div id="trajectory-panel" class="hidden glass p-6 rounded-2xl border-l-4 border-yellow-500">

<h4 class="text-[10px] font-bold text-slate-500 tracking-widest uppercase mb-2">AI Risk Prediction</h4>

<p id="traj-summary" class="text-sm text-slate-200 mb-4 italic leading-relaxed">Analyzing...</p>

<div class="h-1.5 bg-slate-800 rounded-full overflow-hidden"><div id="traj-bar" class="h-full bg-yellow-500 transition-all duration-700" style="width: 0%"></div></div>

</div>

</div>

<div class="lg:col-span-1 glass p-6 rounded-2xl relative overflow-hidden">

<h3 class="text-lg font-bold flex justify-between mb-2"><span>Vital Metrics</span><span id="metric-phase" class="text-[10px] bg-slate-800 px-2 py-1 rounded text-slate-400 uppercase tracking-tighter">STABLE</span></h3>

<!-- Domain Risk Heatmap -->

<div class="mb-4">

<div class="text-[9px] font-black text-slate-600 uppercase tracking-widest mb-2">Domain Risk Heatmap</div>

<div id="domain-heatmap" class="grid grid-cols-6 gap-1.5">

<div class="flex flex-col items-center gap-1">