Sync from GitHub

app.py

@@ -0,0 +1,25 @@
+"""
+PICon Demo — HuggingFace Space entry point.
+
+Serves the static demo page (index.html + assets) via FastAPI on port 7860.
+All API calls from the browser go directly to the Railway backend.
+"""
+
+from fastapi import FastAPI
+from fastapi.responses import FileResponse
+from fastapi.staticfiles import StaticFiles
+import uvicorn
+
+app = FastAPI()
+
+
+@app.get("/")
+async def root():
+    return FileResponse("index.html")
+
+
+app.mount("/assets", StaticFiles(directory="assets"), name="assets")
+
+
+if __name__ == "__main__":
+    uvicorn.run(app, host="0.0.0.0", port=7860)

assets/css/style.css

@@ -0,0 +1,1046 @@
+/* ===== Reset & Base ===== */
+*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
+
+:root {
+  --sidebar-w: 240px;
+  --color-bg: #ffffff;
+  --color-bg-alt: #f8f9fa;
+  --color-text: #1a1a2e;
+  --color-text-muted: #6b7280;
+  --color-primary: #4f46e5;
+  --color-primary-light: #e0e7ff;
+  --color-accent: #10b981;
+  --color-border: #e5e7eb;
+  --font-sans: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
+  --font-mono: 'JetBrains Mono', monospace;
+  --radius: 8px;
+  --shadow: 0 1px 3px rgba(0,0,0,0.08);
+}
+
+html { font-size: 16px; scroll-behavior: smooth; }
+body {
+  font-family: var(--font-sans);
+  color: var(--color-text);
+  background: var(--color-bg);
+  line-height: 1.65;
+  display: flex;
+  min-height: 100vh;
+}
+
+a { color: var(--color-primary); text-decoration: none; }
+a:hover { text-decoration: underline; }
+
+/* ===== Sidebar ===== */
+.sidebar {
+  position: fixed;
+  top: 0; left: 0;
+  width: var(--sidebar-w);
+  height: 100vh;
+  background: #fafafa;
+  border-right: 1px solid var(--color-border);
+  display: flex;
+  flex-direction: column;
+  z-index: 100;
+  overflow-y: auto;
+}
+
+.sidebar-header {
+  padding: 1.5rem 1.25rem 1rem;
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+}
+
+.sidebar-logo {
+  font-size: 1.25rem;
+  font-weight: 700;
+  color: var(--color-primary);
+  letter-spacing: -0.02em;
+}
+.sidebar-logo:hover { text-decoration: none; }
+
+.sidebar-toggle { display: none; background: none; border: none; cursor: pointer; }
+.sidebar-toggle span {
+  display: block; width: 20px; height: 2px;
+  background: var(--color-text); margin: 4px 0;
+  transition: 0.2s;
+}
+
+.sidebar-nav {
+  list-style: none;
+  padding: 0 0.75rem;
+  flex: 1;
+}
+
+.nav-item { margin-bottom: 2px; }
+
+.nav-link {
+  display: block;
+  padding: 0.5rem 0.75rem;
+  border-radius: 6px;
+  font-size: 0.875rem;
+  font-weight: 500;
+  color: var(--color-text);
+  transition: background 0.15s;
+}
+.nav-link:hover { background: var(--color-primary-light); text-decoration: none; }
+.nav-item.active > .nav-link {
+  background: var(--color-primary-light);
+  color: var(--color-primary);
+}
+
+.nav-children {
+  list-style: none;
+  padding-left: 1rem;
+}
+.nav-child a {
+  display: block;
+  padding: 0.3rem 0.75rem;
+  font-size: 0.8125rem;
+  color: var(--color-text-muted);
+  border-radius: 4px;
+}
+.nav-child a:hover { color: var(--color-primary); text-decoration: none; }
+.nav-child.active a { color: var(--color-primary); font-weight: 500; }
+
+.sidebar-footer {
+  padding: 1rem 1.25rem;
+  border-top: 1px solid var(--color-border);
+  display: flex;
+  gap: 1rem;
+}
+.sidebar-link {
+  font-size: 0.8125rem;
+  color: var(--color-text-muted);
+}
+
+/* ===== Page Wrap ===== */
+.page-wrap {
+  margin-left: var(--sidebar-w);
+  flex: 1;
+  display: flex;
+  flex-direction: column;
+  min-height: 100vh;
+}
+
+/* ===== Main Content ===== */
+.main-content {
+  flex: 1;
+}
+
+.container {
+  max-width: 75%;
+  margin: 0 auto;
+  padding: 3rem 2rem;
+}
+
+.container-wide {
+  max-width: 85%;
+  margin: 0 auto;
+  padding: 3rem 2rem;
+}
+
+/* ===== Typography ===== */
+h1, h2, h3, h4 { line-height: 1.3; letter-spacing: -0.01em; }
+h1 { font-size: 2rem; font-weight: 700; margin-bottom: 0.75rem; }
+h2 { font-size: 1.5rem; font-weight: 600; margin: 2rem 0 0.75rem; }
+h3 { font-size: 1.125rem; font-weight: 600; margin: 1.5rem 0 0.5rem; }
+p { margin-bottom: 1rem; }
+
+.subtitle {
+  font-size: 1.125rem;
+  color: var(--color-text-muted);
+  margin-bottom: 2rem;
+}
+
+/* ===== Hero (Home) ===== */
+.hero {
+  text-align: center;
+  padding: 5rem 2rem 3rem;
+  background: linear-gradient(135deg, #f0f0ff 0%, #e8faf0 100%);
+  border-bottom: 1px solid var(--color-border);
+}
+
+.hero h1 {
+  font-size: 2.5rem;
+  margin-bottom: 0.5rem;
+}
+
+.hero .tagline {
+  font-size: 1.125rem;
+  color: var(--color-text-muted);
+  max-width: 800px;
+  margin: 0 auto 2.5rem;
+  line-height: 1.7;
+}
+
+.cta-group {
+  display: flex;
+  gap: 1rem;
+  justify-content: center;
+  flex-wrap: wrap;
+}
+
+.btn {
+  display: inline-flex;
+  align-items: center;
+  gap: 0.5rem;
+  padding: 0.75rem 1.75rem;
+  border-radius: var(--radius);
+  font-size: 0.9375rem;
+  font-weight: 600;
+  transition: all 0.15s;
+  border: none;
+  cursor: pointer;
+}
+.btn:hover { text-decoration: none; transform: translateY(-1px); }
+
+.btn-primary {
+  background: var(--color-primary);
+  color: #fff;
+}
+.btn-primary:hover { background: #4338ca; }
+
+.btn-accent {
+  background: var(--color-accent);
+  color: #fff;
+}
+.btn-accent:hover { background: #059669; }
+
+.btn-outline {
+  background: transparent;
+  color: var(--color-primary);
+  border: 2px solid var(--color-primary);
+}
+.btn-outline:hover { background: var(--color-primary-light); }
+
+/* ===== Home Sections ===== */
+.home-section {
+  padding: 3rem 2rem;
+  max-width: 75%;
+  margin: 0 auto;
+}
+
+.feature-grid {
+  display: grid;
+  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
+  gap: 1.5rem;
+  margin-top: 1.5rem;
+}
+
+.feature-card {
+  padding: 1.5rem;
+  background: var(--color-bg);
+  border: 1px solid var(--color-border);
+  border-radius: var(--radius);
+}
+
+.feature-card h3 {
+  margin: 0 0 0.5rem;
+  font-size: 1rem;
+}
+
+.feature-card p {
+  font-size: 0.875rem;
+  color: var(--color-text-muted);
+  margin: 0;
+}
+
+/* ===== Research ===== */
+.paper-header {
+  border-bottom: 1px solid var(--color-border);
+  padding-bottom: 1.5rem;
+  margin-bottom: 2rem;
+}
+
+.paper-header h1 { font-size: 1.75rem; }
+
+.paper-meta {
+  display: flex;
+  gap: 1.5rem;
+  flex-wrap: wrap;
+  margin-top: 0.75rem;
+  font-size: 0.875rem;
+  color: var(--color-text-muted);
+}
+
+.abstract-box {
+  background: var(--color-bg-alt);
+  border-left: 4px solid var(--color-primary);
+  padding: 1.5rem;
+  border-radius: 0 var(--radius) var(--radius) 0;
+  margin: 1.5rem 0;
+}
+
+.abstract-box p {
+  margin: 0;
+  font-size: 0.9375rem;
+  line-height: 1.75;
+}
+
+.dimensions-grid {
+  display: grid;
+  grid-template-columns: repeat(3, 1fr);
+  gap: 1rem;
+  margin: 1.5rem 0;
+}
+
+.dimension-card {
+  padding: 1.25rem;
+  border: 1px solid var(--color-border);
+  border-radius: var(--radius);
+  text-align: center;
+}
+
+.dimension-card .icon { font-size: 1.5rem; margin-bottom: 0.5rem; }
+.dimension-card h4 { font-size: 0.875rem; margin-bottom: 0.25rem; }
+.dimension-card p { font-size: 0.8125rem; color: var(--color-text-muted); margin: 0; }
+
+/* ===== Method page ===== */
+.phase-steps {
+  list-style: none;
+  counter-reset: step;
+  padding: 0;
+  margin: 1.5rem 0;
+}
+
+.phase-steps li {
+  counter-increment: step;
+  display: flex;
+  gap: 1rem;
+  align-items: flex-start;
+  padding: 1rem 0;
+  border-bottom: 1px solid var(--color-border);
+}
+
+.phase-steps li:last-child { border-bottom: none; }
+
+.phase-steps li::before {
+  content: counter(step);
+  flex-shrink: 0;
+  width: 2rem;
+  height: 2rem;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  background: var(--color-primary);
+  color: #fff;
+  border-radius: 50%;
+  font-size: 0.875rem;
+  font-weight: 700;
+}
+
+.step-label {
+  font-weight: 600;
+  font-size: 0.9375rem;
+  margin-bottom: 0.25rem;
+}
+
+.step-desc {
+  font-size: 0.875rem;
+  color: var(--color-text-muted);
+  line-height: 1.6;
+}
+
+.callout {
+  background: var(--color-primary-light);
+  border-left: 4px solid var(--color-primary);
+  padding: 1rem 1.25rem;
+  border-radius: 0 var(--radius) var(--radius) 0;
+  margin: 1.5rem 0;
+  font-size: 0.9375rem;
+}
+
+.config-card {
+  background: var(--color-bg-alt);
+  border: 1px solid var(--color-border);
+  border-radius: var(--radius);
+  padding: 1.25rem 1.5rem;
+  margin: 1.5rem 0;
+}
+
+.config-card h4 {
+  margin: 0 0 0.75rem;
+  font-size: 0.9375rem;
+}
+
+.config-grid {
+  display: grid;
+  grid-template-columns: 1fr 1fr;
+  gap: 0.5rem;
+}
+
+.config-item {
+  display: flex;
+  justify-content: space-between;
+  padding: 0.375rem 0;
+  font-size: 0.875rem;
+}
+
+.config-role { color: var(--color-text-muted); }
+.config-value { font-weight: 600; font-family: var(--font-mono); font-size: 0.8125rem; }
+
+.config-note {
+  margin: 0.75rem 0 0;
+  font-size: 0.8125rem;
+  color: var(--color-text-muted);
+}
+
+/* ===== Formula toggles ===== */
+details.formula-toggle {
+  margin: 1rem 0;
+  border: 1px solid var(--color-border);
+  border-radius: var(--radius);
+  overflow: hidden;
+}
+
+details.formula-toggle summary {
+  padding: 0.625rem 1rem;
+  background: var(--color-bg-alt);
+  cursor: pointer;
+  font-size: 0.875rem;
+  font-weight: 500;
+  color: var(--color-primary);
+  list-style: none;
+  display: flex;
+  align-items: center;
+  gap: 0.5rem;
+}
+
+details.formula-toggle summary::-webkit-details-marker { display: none; }
+
+details.formula-toggle summary::before {
+  content: '\25B6';
+  font-size: 0.625rem;
+  transition: transform 0.2s;
+}
+
+details.formula-toggle[open] summary::before {
+  transform: rotate(90deg);
+}
+
+details.formula-toggle .formula-content {
+  padding: 1.25rem 1.5rem;
+  font-size: 0.9375rem;
+  line-height: 1.75;
+  border-top: 1px solid var(--color-border);
+}
+
+details.formula-toggle .formula-content p {
+  margin-bottom: 0.75rem;
+}
+
+details.formula-toggle .formula-content p:last-child {
+  margin-bottom: 0;
+}
+
+.page-nav {
+  display: flex;
+  gap: 1rem;
+  margin-top: 2.5rem;
+  padding-top: 1.5rem;
+  border-top: 1px solid var(--color-border);
+}
+
+/* ===== Method / Results figures ===== */
+.figure-row {
+  display: flex;
+  gap: 1.5rem;
+  align-items: flex-start;
+  margin: 1.5rem 0;
+}
+.figure-row figure {
+  flex: 1;
+  min-width: 0;
+  margin: 0;
+}
+
+figure {
+  margin: 1.5rem 0;
+}
+figure img {
+  max-width: 100%;
+  border-radius: var(--radius);
+  border: 1px solid var(--color-border);
+}
+figcaption {
+  margin-top: 0.5rem;
+  font-size: 0.8125rem;
+  color: var(--color-text-muted);
+  text-align: center;
+}
+
+table {
+  width: 100%;
+  border-collapse: collapse;
+  font-size: 0.875rem;
+  margin: 1.5rem 0;
+}
+th, td {
+  padding: 0.625rem 0.75rem;
+  border: 1px solid var(--color-border);
+  text-align: left;
+}
+th { background: var(--color-bg-alt); font-weight: 600; }
+
+/* ===== Demo ===== */
+.demo-tabs {
+  display: flex;
+  border-bottom: 2px solid var(--color-border);
+  margin-bottom: 1.5rem;
+}
+
+.demo-tab {
+  padding: 0.75rem 1.5rem;
+  font-size: 0.9375rem;
+  font-weight: 500;
+  background: none;
+  border: none;
+  cursor: pointer;
+  color: var(--color-text-muted);
+  border-bottom: 2px solid transparent;
+  margin-bottom: -2px;
+  transition: 0.15s;
+}
+.demo-tab:hover { color: var(--color-text); }
+.demo-tab.active {
+  color: var(--color-primary);
+  border-bottom-color: var(--color-primary);
+}
+
+.demo-panel { display: none; }
+.demo-panel.active { display: block; }
+
+.demo-description {
+  margin-bottom: 1.5rem;
+  padding: 1rem 1.25rem;
+  background: var(--color-bg-alt);
+  border-radius: var(--radius);
+  font-size: 0.9375rem;
+}
+
+/* Chat UI */
+.chat-container {
+  border: 1px solid var(--color-border);
+  border-radius: var(--radius);
+  overflow: hidden;
+  background: #fff;
+}
+
+.chat-header {
+  padding: 0.75rem 1rem;
+  background: var(--color-bg-alt);
+  border-bottom: 1px solid var(--color-border);
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+}
+
+.chat-header h4 { margin: 0; font-size: 0.875rem; }
+
+.chat-progress {
+  font-size: 0.75rem;
+  color: var(--color-text-muted);
+}
+
+.chat-messages {
+  height: 400px;
+  overflow-y: auto;
+  padding: 1rem;
+  display: flex;
+  flex-direction: column;
+  gap: 0.75rem;
+}
+
+.chat-msg {
+  max-width: 80%;
+  padding: 0.625rem 0.875rem;
+  border-radius: 12px;
+  font-size: 0.875rem;
+  line-height: 1.5;
+  word-wrap: break-word;
+}
+
+.chat-msg.system {
+  align-self: flex-start;
+  background: var(--color-bg-alt);
+  border: 1px solid var(--color-border);
+}
+
+.chat-msg.user {
+  align-self: flex-end;
+  background: var(--color-primary);
+  color: #fff;
+}
+
+.chat-msg.info {
+  align-self: center;
+  background: var(--color-primary-light);
+  color: var(--color-primary);
+  font-size: 0.8125rem;
+  text-align: center;
+}
+
+.chat-typing {
+  align-self: flex-start;
+  display: flex;
+  gap: 4px;
+  padding: 0.625rem 0.875rem;
+}
+.chat-typing span {
+  width: 6px; height: 6px;
+  background: var(--color-text-muted);
+  border-radius: 50%;
+  animation: bounce 1.2s infinite;
+}
+.chat-typing span:nth-child(2) { animation-delay: 0.15s; }
+.chat-typing span:nth-child(3) { animation-delay: 0.3s; }
+
+@keyframes bounce {
+  0%, 60%, 100% { transform: translateY(0); }
+  30% { transform: translateY(-6px); }
+}
+
+/* Agent terminal log viewer */
+.agent-terminal {
+  border: 1px solid #2d2d2d;
+  border-radius: var(--radius);
+  overflow: hidden;
+  background: #1e1e1e;
+}
+
+.terminal-header {
+  padding: 0.5rem 1rem;
+  background: #2d2d2d;
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+}
+
+.terminal-title {
+  font-family: var(--font-mono);
+  font-size: 0.8125rem;
+  color: #a0a0a0;
+}
+
+.terminal-header .chat-progress {
+  color: #7ec699;
+}
+
+.agent-terminal .terminal-body {
+  height: 420px;
+  overflow-y: auto;
+  padding: 1rem;
+  margin: 0;
+  font-family: var(--font-mono);
+  font-size: 0.78rem;
+  line-height: 1.6;
+  color: #d4d4d4;
+  background: #1e1e1e;
+  white-space: pre-wrap;
+  word-break: break-word;
+}
+
+.chat-input {
+  display: flex;
+  border-top: 1px solid var(--color-border);
+}
+
+.chat-input input {
+  flex: 1;
+  padding: 0.75rem 1rem;
+  border: none;
+  font-size: 0.875rem;
+  font-family: var(--font-sans);
+  outline: none;
+}
+
+.chat-input button {
+  padding: 0.75rem 1.25rem;
+  background: var(--color-primary);
+  color: #fff;
+  border: none;
+  font-weight: 600;
+  font-size: 0.875rem;
+  cursor: pointer;
+  transition: background 0.15s;
+}
+.chat-input button:hover { background: #4338ca; }
+.chat-input button:disabled { opacity: 0.5; cursor: not-allowed; }
+
+/* Agent submode selector */
+.agent-submode-selector {
+  display: grid;
+  grid-template-columns: 1fr 1fr;
+  gap: 1rem;
+  margin-bottom: 1.5rem;
+}
+
+.agent-submode-card {
+  display: flex;
+  flex-direction: column;
+  align-items: flex-start;
+  gap: 0.375rem;
+  padding: 1.25rem;
+  border: 2px solid var(--color-border);
+  border-radius: var(--radius);
+  background: #fff;
+  cursor: pointer;
+  text-align: left;
+  transition: border-color 0.15s, box-shadow 0.15s;
+}
+
+.agent-submode-card:hover {
+  border-color: var(--color-primary);
+}
+
+.agent-submode-card.active {
+  border-color: var(--color-primary);
+  box-shadow: 0 0 0 3px rgba(99, 102, 241, 0.15);
+}
+
+.submode-icon {
+  font-size: 1.5rem;
+}
+
+.submode-title {
+  font-weight: 600;
+  font-size: 0.9375rem;
+}
+
+.submode-desc {
+  font-size: 0.8125rem;
+  color: var(--color-text-muted);
+  line-height: 1.45;
+}
+
+/* Agent test form */
+.agent-form {
+  display: flex;
+  flex-direction: column;
+  gap: 1rem;
+  margin-bottom: 1.5rem;
+}
+
+.form-group label {
+  display: block;
+  font-size: 0.8125rem;
+  font-weight: 500;
+  margin-bottom: 0.25rem;
+}
+
+.form-group input,
+.form-group textarea,
+.form-group select {
+  width: 100%;
+  padding: 0.5rem 0.75rem;
+  border: 1px solid var(--color-border);
+  border-radius: 6px;
+  font-size: 0.875rem;
+  font-family: var(--font-sans);
+}
+
+.form-group textarea {
+  font-family: var(--font-mono);
+  font-size: 0.8125rem;
+  min-height: 120px;
+  resize: vertical;
+}
+
+.form-row {
+  display: flex;
+  gap: 1rem;
+}
+
+.label-hint {
+  font-weight: 400;
+  color: var(--color-text-muted);
+}
+
+/* Results card */
+.results-card {
+  padding: 1.5rem;
+  border: 1px solid var(--color-border);
+  border-radius: var(--radius);
+  background: #fff;
+  margin-top: 1.5rem;
+}
+.results-card h3 { margin: 0 0 1rem; font-size: 1.125rem; }
+.results-note {
+  margin: 1rem 0 0;
+  font-size: 0.8125rem;
+  color: var(--color-text-muted);
+}
+
+.score-grid {
+  display: grid;
+  grid-template-columns: repeat(3, 1fr);
+  gap: 1rem;
+}
+.score-cell {
+  text-align: center;
+  padding: 1rem;
+  border: 1px solid var(--color-border);
+  border-radius: var(--radius);
+  background: var(--color-bg-alt);
+}
+.score-cell .score-label {
+  font-size: 0.75rem;
+  font-weight: 600;
+  color: var(--color-text-muted);
+  text-transform: uppercase;
+  letter-spacing: 0.04em;
+}
+.score-cell .score-value {
+  font-size: 1.75rem;
+  font-weight: 700;
+  color: var(--color-primary);
+  margin: 0.25rem 0;
+}
+.score-cell .score-sub {
+  font-size: 0.75rem;
+  color: var(--color-text-muted);
+}
+
+/* Leaderboard */
+.leaderboard-controls {
+  display: flex;
+  gap: 1rem;
+  margin-bottom: 1rem;
+}
+.leaderboard-filter label {
+  font-size: 0.75rem;
+  font-weight: 600;
+  color: var(--color-text-muted);
+  display: block;
+  margin-bottom: 0.25rem;
+}
+.leaderboard-filter select {
+  padding: 0.375rem 0.625rem;
+  border: 1px solid var(--color-border);
+  border-radius: 6px;
+  font-size: 0.8125rem;
+  font-family: var(--font-sans);
+  background: #fff;
+}
+
+.leaderboard-table-wrap {
+  overflow-x: auto;
+  border: 1px solid var(--color-border);
+  border-radius: var(--radius);
+}
+
+.leaderboard-table {
+  width: 100%;
+  border-collapse: collapse;
+  font-size: 0.875rem;
+}
+.leaderboard-table th,
+.leaderboard-table td {
+  padding: 0.625rem 0.75rem;
+  border-bottom: 1px solid var(--color-border);
+  text-align: left;
+}
+.leaderboard-table th {
+  background: var(--color-bg-alt);
+  font-weight: 600;
+  font-size: 0.8125rem;
+  position: sticky;
+  top: 0;
+}
+.leaderboard-table th.sortable {
+  cursor: pointer;
+  user-select: none;
+}
+.leaderboard-table th.sortable:hover {
+  color: var(--color-primary);
+}
+.leaderboard-table th.active {
+  color: var(--color-primary);
+}
+.leaderboard-table th.active::after {
+  content: ' \25BC';
+  font-size: 0.625rem;
+}
+.leaderboard-table tbody tr:hover {
+  background: var(--color-primary-light);
+}
+.leaderboard-table .lb-rank {
+  width: 2.5rem;
+  text-align: center;
+  font-weight: 600;
+  color: var(--color-text-muted);
+}
+.leaderboard-table .lb-score {
+  text-align: right;
+  font-family: var(--font-mono);
+  font-size: 0.8125rem;
+  width: 5rem;
+}
+.leaderboard-table .lb-type {
+  width: 7rem;
+}
+.lb-badge {
+  display: inline-block;
+  font-size: 0.6875rem;
+  font-weight: 600;
+  padding: 0.125rem 0.5rem;
+  border-radius: 10px;
+  text-transform: uppercase;
+  letter-spacing: 0.03em;
+}
+.lb-badge.baseline { background: #dbeafe; color: #1e40af; }
+.lb-badge.prompting { background: #dcfce7; color: #166534; }
+.lb-badge.finetuned { background: #fef3c7; color: #92400e; }
+.lb-badge.rag { background: #f3e8ff; color: #6b21a8; }
+.lb-badge.commercial { background: #fce7f3; color: #9d174d; }
+.lb-badge.community { background: #e0e7ff; color: #3730a3; }
+
+.lb-rank-1 { color: #d97706; font-weight: 700; }
+.lb-rank-2 { color: #6b7280; font-weight: 700; }
+.lb-rank-3 { color: #92400e; font-weight: 700; }
+
+.lb-human-row {
+  background: #fffbeb;
+}
+
+.leaderboard-footnote {
+  margin-top: 0.75rem;
+  font-size: 0.75rem;
+  color: var(--color-text-muted);
+  line-height: 1.6;
+}
+
+/* Python API section */
+.python-api-section {
+  padding-bottom: 2rem;
+}
+.python-api-section h2 {
+  margin-bottom: 0.5rem;
+}
+
+.code-block {
+  margin: 1rem 0;
+  border: 1px solid var(--color-border);
+  border-radius: var(--radius);
+  overflow: hidden;
+}
+.code-block .code-header {
+  padding: 0.5rem 0.75rem;
+  background: var(--color-bg-alt);
+  border-bottom: 1px solid var(--color-border);
+  font-size: 0.75rem;
+  font-weight: 600;
+  color: var(--color-text-muted);
+}
+.code-block pre {
+  margin: 0;
+  border-radius: 0;
+  background: #1e1e2e;
+  color: #cdd6f4;
+  padding: 1rem 1.25rem;
+  font-size: 0.8125rem;
+  line-height: 1.6;
+}
+.code-block pre code {
+  background: none;
+  padding: 0;
+  color: inherit;
+  font-size: inherit;
+}
+
+/* ===== Contact / Cite ===== */
+.bibtex-block {
+  background: #1e1e2e;
+  color: #cdd6f4;
+  padding: 1.25rem;
+  border-radius: var(--radius);
+  font-family: var(--font-mono);
+  font-size: 0.8125rem;
+  line-height: 1.6;
+  overflow-x: auto;
+  position: relative;
+}
+
+.bibtex-block pre {
+  background: transparent;
+  color: inherit;
+  padding: 0;
+  margin: 0;
+}
+
+.copy-btn {
+  position: absolute;
+  top: 0.5rem;
+  right: 0.5rem;
+  padding: 0.25rem 0.5rem;
+  background: rgba(255,255,255,0.1);
+  border: 1px solid rgba(255,255,255,0.15);
+  border-radius: 4px;
+  color: #cdd6f4;
+  font-size: 0.75rem;
+  cursor: pointer;
+}
+.copy-btn:hover { background: rgba(255,255,255,0.2); }
+
+.contact-grid {
+  display: grid;
+  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
+  gap: 1.5rem;
+  margin: 1.5rem 0;
+}
+
+.contact-card {
+  padding: 1.25rem;
+  border: 1px solid var(--color-border);
+  border-radius: var(--radius);
+}
+.contact-card h4 { margin: 0 0 0.5rem; font-size: 0.9375rem; }
+.contact-card p { margin: 0; font-size: 0.875rem; color: var(--color-text-muted); }
+
+/* ===== Footer ===== */
+.site-footer {
+  border-top: 1px solid var(--color-border);
+  padding: 1.5rem 2rem;
+  text-align: center;
+  font-size: 0.8125rem;
+  color: var(--color-text-muted);
+}
+
+/* ===== Code ===== */
+code {
+  font-family: var(--font-mono);
+  font-size: 0.85em;
+  background: var(--color-bg-alt);
+  padding: 0.15em 0.35em;
+  border-radius: 4px;
+}
+
+pre {
+  background: var(--color-bg-alt);
+  padding: 1rem;
+  border-radius: var(--radius);
+  overflow-x: auto;
+  font-size: 0.8125rem;
+}
+
+/* ===== Responsive ===== */
+@media (max-width: 768px) {
+  .sidebar {
+    transform: translateX(-100%);
+    transition: transform 0.25s;
+  }
+  .sidebar.open { transform: translateX(0); }
+  .sidebar-toggle { display: block; }
+
+  .page-wrap { margin-left: 0; }
+
+  .hero h1 { font-size: 1.75rem; }
+  .dimensions-grid { grid-template-columns: 1fr; }
+  .figure-row { flex-direction: column; }
+  .config-grid { grid-template-columns: 1fr; }
+  .chat-messages { height: 300px; }
+  .score-grid { grid-template-columns: 1fr; }
+  .form-row { flex-direction: column; }
+  .leaderboard-controls { flex-direction: column; }
+}

assets/js/demo.js

@@ -0,0 +1,539 @@
+/**
+ * PICon Demo — Experience Mode, Agent Test Mode & Leaderboard
+ */
+(function () {
+  'use strict';
+
+  // --- Config ---
+  const API_BASE = (document.querySelector('meta[name="demo-api-url"]') || {}).content
+    || window.PICON_API_URL
+    || '';
+
+  // ===== Leaderboard Data (paper baselines) =====
+  // IC = Internal Consistency, EC = External Consistency, RC = Retest Consistency
+  // Area = normalized triangle area on IC-EC-RC radar chart
+  var BASELINES = [
+    { name: 'Human',           type: 'baseline',   arch: 'Baseline',    turns: 50, ic: 0.90, ec: 0.66, rc: 0.94 },
+    { name: 'Human Simulacra', type: 'baseline',   arch: 'RAG',         turns: 50, ic: 0.79, ec: 0.63, rc: 0.87 },
+    { name: 'Li et al. (2025)',type: 'baseline',   arch: 'Prompting',   turns: 50, ic: 0.73, ec: 0.59, rc: 0.98 },
+    { name: 'DeepPersona',     type: 'baseline',   arch: 'Prompting',   turns: 50, ic: 0.72, ec: 0.54, rc: 0.92 },
+    { name: 'Character.ai',    type: 'baseline',   arch: 'Commercial',  turns: 50, ic: 0.71, ec: 0.71, rc: 0.46 },
+    { name: 'Twin 2K 500',     type: 'baseline',   arch: 'Prompting',   turns: 50, ic: 0.53, ec: 0.26, rc: 0.95 },
+    { name: 'Consistent LLM',  type: 'baseline',   arch: 'Fine-tuned',  turns: 50, ic: 0.31, ec: 0.30, rc: 0.14 },
+    { name: 'OpenCharacter',   type: 'baseline',   arch: 'Fine-tuned',  turns: 50, ic: 0.16, ec: 0.15, rc: 0.14 },
+  ];
+
+  // Compute normalized triangle area: (IC*EC + EC*RC + RC*IC) / 3
+  function computeArea(d) {
+    return (d.ic * d.ec + d.ec * d.rc + d.rc * d.ic) / 3;
+  }
+
+  BASELINES.forEach(function (d) { d.area = computeArea(d); });
+
+  // Community submissions (loaded from API; localStorage as fallback)
+  var communityEntries = [];
+  try {
+    communityEntries = JSON.parse(localStorage.getItem('picon_community') || '[]');
+  } catch (e) { /* ignore */ }
+
+  function fetchCommunityEntries() {
+    if (!API_BASE) return;
+    fetch(API_BASE + '/api/leaderboard')
+      .then(function (res) { return res.json(); })
+      .then(function (data) {
+        if (data.entries && data.entries.length > 0) {
+          communityEntries = data.entries.map(function (e) {
+            e.area = computeArea(e);
+            return e;
+          });
+          renderLeaderboard();
+        }
+      })
+      .catch(function () { /* keep localStorage entries */ });
+  }
+
+  // ===== Tab switching =====
+  document.querySelectorAll('.demo-tab').forEach(function (tab) {
+    tab.addEventListener('click', function () {
+      document.querySelectorAll('.demo-tab').forEach(function (t) { t.classList.remove('active'); });
+      document.querySelectorAll('.demo-panel').forEach(function (p) { p.classList.remove('active'); });
+      tab.classList.add('active');
+      document.getElementById('panel-' + tab.dataset.tab).classList.add('active');
+      if (tab.dataset.tab === 'leaderboard') fetchCommunityEntries();
+    });
+  });
+
+  // ===== Helpers =====
+
+  function linkify(text) {
+    return text.replace(/(https?:\/\/[^\s)<>]+)/g, '<a href="$1" target="_blank" rel="noopener noreferrer">$1</a>');
+  }
+
+  function addMessage(container, type, text) {
+    var el = document.createElement('div');
+    el.className = 'chat-msg ' + type;
+    el.innerHTML = linkify(text.replace(/&/g, '&amp;').replace(/</g, '&lt;').replace(/>/g, '&gt;'));
+    container.appendChild(el);
+    container.scrollTop = container.scrollHeight;
+    return el;
+  }
+
+  function showTyping(container) {
+    var el = document.createElement('div');
+    el.className = 'chat-typing';
+    el.innerHTML = '<span></span><span></span><span></span>';
+    container.appendChild(el);
+    container.scrollTop = container.scrollHeight;
+    return el;
+  }
+
+  function setProgress(el, progress) {
+    if (!progress) return;
+    var phase = {
+      predefined: 'Part 1: Getting to Know You',
+      main: 'Part 2: Interrogation',
+      repeat: 'Part 3: Retest',
+      complete: 'Complete'
+    }[progress.phase] || progress.phase;
+    el.textContent = phase + ' — Q' + progress.current + '/' + progress.total;
+  }
+
+  function fmtScore(v) {
+    if (v == null) return '—';
+    return v.toFixed(2);
+  }
+
+  function renderScoreGrid(gridEl, scores) {
+    gridEl.innerHTML = '';
+    var dims = [
+      { key: 'ic', label: 'Internal Consistency', sub: 'Non-contradiction × Cooperativeness' },
+      { key: 'ec', label: 'External Consistency', sub: 'Non-refutation × Coverage' },
+      { key: 'rc', label: 'Retest Consistency', sub: 'Inter-session stability' },
+    ];
+    dims.forEach(function (d) {
+      var cell = document.createElement('div');
+      cell.className = 'score-cell';
+      cell.innerHTML =
+        '<div class="score-label">' + d.label + '</div>' +
+        '<div class="score-value">' + fmtScore(scores[d.key]) + '</div>' +
+        '<div class="score-sub">' + d.sub + '</div>';
+      gridEl.appendChild(cell);
+    });
+  }
+
+  // ===== Experience Mode =====
+
+  var expStart = document.getElementById('exp-start');
+  var expChat = document.getElementById('exp-chat');
+  var expMessages = document.getElementById('exp-messages');
+  var expInput = document.getElementById('exp-input');
+  var expSend = document.getElementById('exp-send');
+  var expProgress = document.getElementById('exp-progress');
+  var expSessionId = null;
+  var expLoading = false;
+
+  document.getElementById('exp-start-btn').addEventListener('click', async function () {
+    var name = document.getElementById('exp-name').value.trim();
+    var turns = parseInt(document.getElementById('exp-turns').value);
+    if (!name) return;
+
+    if (!API_BASE) {
+      alert('Demo backend is not configured. Please set demo_api_url in _config.yml.');
+      return;
+    }
+
+    expStart.style.display = 'none';
+    expChat.style.display = 'block';
+    addMessage(expMessages, 'info', 'Starting interview for ' + name + '...');
+
+    try {
+      var res = await fetch(API_BASE + '/api/start', {
+        method: 'POST',
+        headers: { 'Content-Type': 'application/json' },
+        body: JSON.stringify({ name: name, num_turns: turns })
+      });
+
+      if (!res.ok) throw new Error('Failed to start: ' + res.status);
+      var data = await res.json();
+
+      expSessionId = data.session_id;
+      setProgress(expProgress, data.progress);
+      addMessage(expMessages, 'system', data.first_question);
+      expSend.disabled = false;
+      expInput.focus();
+    } catch (err) {
+      addMessage(expMessages, 'info', 'Error: ' + err.message);
+    }
+  });
+
+  async function sendExperienceResponse() {
+    var text = expInput.value.trim();
+    if (!text || !expSessionId || expLoading) return;
+
+    expInput.value = '';
+    expLoading = true;
+    expSend.disabled = true;
+    addMessage(expMessages, 'user', text);
+    var typing = showTyping(expMessages);
+
+    try {
+      var res = await fetch(API_BASE + '/api/respond', {
+        method: 'POST',
+        headers: { 'Content-Type': 'application/json' },
+        body: JSON.stringify({
+          session_id: expSessionId,
+          response: text,
+        })
+      });
+
+      typing.remove();
+      if (!res.ok) throw new Error('Error: ' + res.status);
+      var data = await res.json();
+
+      setProgress(expProgress, data.progress);
+
+      if (data.is_complete) {
+        addMessage(expMessages, 'info', 'Interview complete! Calculating your consistency scores...');
+        expSend.disabled = true;
+        expInput.disabled = true;
+
+        try {
+          var rRes = await fetch(API_BASE + '/api/results/' + expSessionId);
+          if (rRes.ok) {
+            var results = await rRes.json();
+            var expResultsEl = document.getElementById('exp-results');
+            expResultsEl.style.display = 'block';
+            renderScoreGrid(
+              document.getElementById('exp-score-grid'),
+              results.results.eval_scores || {}
+            );
+          }
+        } catch (e) {
+          addMessage(expMessages, 'info', 'Results saved. Thank you for participating!');
+        }
+        return;
+      }
+
+      if (data.next_question) {
+        addMessage(expMessages, 'system', data.next_question);
+      }
+    } catch (err) {
+      typing.remove();
+      addMessage(expMessages, 'info', 'Error: ' + err.message);
+    } finally {
+      expLoading = false;
+      if (!expInput.disabled) {
+        expSend.disabled = false;
+        expInput.focus();
+      }
+    }
+  }
+
+  expSend.addEventListener('click', sendExperienceResponse);
+  expInput.addEventListener('keydown', function (e) {
+    if (e.key === 'Enter') sendExperienceResponse();
+  });
+
+  // ===== Agent Test Mode =====
+
+  var agentTerminal = document.getElementById('agent-terminal-body');
+  var agentProgress = document.getElementById('agent-progress');
+  var agentSessionId = null;
+  var agentLogIndex = 0;  // track how many log lines we've fetched
+  var activeSubmode = 'external';
+
+  // Submode switching
+  document.querySelectorAll('.agent-submode-card').forEach(function (card) {
+    card.addEventListener('click', function () {
+      document.querySelectorAll('.agent-submode-card').forEach(function (c) { c.classList.remove('active'); });
+      card.classList.add('active');
+      activeSubmode = card.dataset.submode;
+      document.getElementById('agent-form-external').style.display = activeSubmode === 'external' ? 'flex' : 'none';
+      document.getElementById('agent-form-quick').style.display = activeSubmode === 'quick' ? 'flex' : 'none';
+    });
+  });
+
+  function startAgentEvaluation(payload, displayLabel) {
+    if (!API_BASE) {
+      alert('Demo backend is not configured. Please set demo_api_url in _config.yml.');
+      return;
+    }
+
+    document.getElementById('agent-submode-selector').style.display = 'none';
+    document.getElementById('agent-form-external').style.display = 'none';
+    document.getElementById('agent-form-quick').style.display = 'none';
+    document.getElementById('agent-log').style.display = 'block';
+    agentTerminal.textContent = '';
+    agentLogIndex = 0;
+
+    appendTerminal('$ picon.evaluate(' + displayLabel + ')\n');
+    agentProgress.textContent = 'Starting evaluation...';
+
+    (async function () {
+      try {
+        var res = await fetch(API_BASE + '/api/agent/start', {
+          method: 'POST',
+          headers: { 'Content-Type': 'application/json' },
+          body: JSON.stringify(payload)
+        });
+
+        if (!res.ok) throw new Error('Failed to start: ' + res.status);
+        var data = await res.json();
+        agentSessionId = data.session_id;
+        appendTerminal('Evaluation started. This may take several minutes...\n\n');
+        pollAgentProgress(data.session_id);
+      } catch (err) {
+        appendTerminal('ERROR: ' + err.message + '\n');
+        agentProgress.textContent = 'Error';
+      }
+    })();
+  }
+
+  // External Agent start
+  document.getElementById('agent-start-btn-external').addEventListener('click', function () {
+    var name = document.getElementById('ext-agent-name').value.trim();
+    var endpoint = document.getElementById('ext-agent-endpoint').value.trim();
+    var turns = document.getElementById('ext-agent-turns').value;
+    var sessions = document.getElementById('ext-agent-sessions').value;
+
+    if (!name) { alert('Please provide an agent name.'); return; }
+    if (!endpoint) { alert('Please provide your agent\'s API endpoint.'); return; }
+
+    startAgentEvaluation({
+      mode: 'external',
+      name: name,
+      api_base: endpoint,
+      num_turns: parseInt(turns),
+      num_sessions: parseInt(sessions),
+    }, name + ', endpoint=' + endpoint + ', turns=' + turns);
+  });
+
+  // Quick Agent start
+  document.getElementById('agent-start-btn-quick').addEventListener('click', function () {
+    var name = document.getElementById('quick-agent-name').value.trim();
+    var model = document.getElementById('quick-agent-model').value.trim();
+    var apiKey = document.getElementById('quick-agent-api-key').value.trim();
+    var persona = document.getElementById('quick-agent-persona').value.trim();
+    var turns = document.getElementById('quick-agent-turns').value;
+    var sessions = document.getElementById('quick-agent-sessions').value;
+
+    if (!name) { alert('Please provide an agent name.'); return; }
+    if (!model) { alert('Please provide a model name (e.g. gpt-4o, gemini/gemini-2.5-flash).'); return; }
+    if (!apiKey) { alert('Please provide an API key. This covers your agent\'s LLM inference cost only — PICon evaluation cost is on us.'); return; }
+    if (!persona) { alert('Please provide a persona / system prompt.'); return; }
+
+    startAgentEvaluation({
+      mode: 'quick',
+      name: name,
+      model: model,
+      api_key: apiKey,
+      persona: persona,
+      num_turns: parseInt(turns),
+      num_sessions: parseInt(sessions),
+    }, name + ', model=' + model + ', turns=' + turns);
+  });
+
+  function appendTerminal(text) {
+    agentTerminal.textContent += text;
+    agentTerminal.scrollTop = agentTerminal.scrollHeight;
+  }
+
+  async function fetchAgentLogs(sessionId) {
+    try {
+      var res = await fetch(API_BASE + '/api/agent/logs/' + sessionId + '?since=' + agentLogIndex);
+      if (!res.ok) return;
+      var data = await res.json();
+      if (data.lines && data.lines.length > 0) {
+        appendTerminal(data.lines.join('\n') + '\n');
+        agentLogIndex = data.total;
+      }
+    } catch (e) { /* ignore */ }
+  }
+
+  async function pollAgentProgress(sessionId) {
+    var interval = setInterval(async function () {
+      try {
+        // Fetch logs and status in parallel
+        await fetchAgentLogs(sessionId);
+
+        var res = await fetch(API_BASE + '/api/agent/status/' + sessionId);
+        if (!res.ok) { clearInterval(interval); return; }
+        var data = await res.json();
+
+        agentProgress.textContent =
+          'Session ' + data.current_session + '/' + data.total_sessions + ' — Running...';
+
+        if (data.is_complete) {
+          clearInterval(interval);
+
+          // Fetch final logs
+          await fetchAgentLogs(sessionId);
+
+          if (data.error) {
+            agentProgress.textContent = 'Error';
+            appendTerminal('\nERROR: ' + data.error + '\n');
+            return;
+          }
+
+          agentProgress.textContent = 'Complete';
+          appendTerminal('\n--- Evaluation complete ---\n');
+
+          // Fetch results
+          var rRes = await fetch(API_BASE + '/api/agent/results/' + sessionId);
+          if (rRes.ok) {
+            var results = await rRes.json();
+            document.getElementById('agent-log').style.display = 'none';
+            document.getElementById('agent-results').style.display = 'block';
+            renderScoreGrid(
+              document.getElementById('agent-score-grid'),
+              results.scores || {}
+            );
+
+            // Add to community leaderboard
+            var entry = {
+              name: results.name || 'Agent',
+              type: 'community',
+              arch: 'Community',
+              turns: parseInt(document.getElementById(activeSubmode === 'external' ? 'ext-agent-turns' : 'quick-agent-turns').value),
+              ic: results.scores.ic || 0,
+              ec: results.scores.ec || 0,
+              rc: results.scores.rc || 0,
+            };
+            entry.area = computeArea(entry);
+            communityEntries.push(entry);
+            localStorage.setItem('picon_community', JSON.stringify(communityEntries));
+            renderLeaderboard();
+          }
+        }
+      } catch (err) {
+        clearInterval(interval);
+        appendTerminal('\nERROR: ' + err.message + '\n');
+      }
+    }, 3000);
+  }
+
+  function showAgentForm() {
+    document.getElementById('agent-submode-selector').style.display = '';
+    document.getElementById('agent-form-external').style.display = activeSubmode === 'external' ? 'flex' : 'none';
+    document.getElementById('agent-form-quick').style.display = activeSubmode === 'quick' ? 'flex' : 'none';
+  }
+
+  // Cancel button
+  var cancelBtn = document.getElementById('agent-cancel-btn');
+  if (cancelBtn) {
+    cancelBtn.addEventListener('click', async function () {
+      if (agentSessionId && API_BASE) {
+        try { await fetch(API_BASE + '/api/agent/cancel/' + agentSessionId, { method: 'DELETE' }); }
+        catch (e) { /* ignore */ }
+      }
+      document.getElementById('agent-log').style.display = 'none';
+      showAgentForm();
+      agentTerminal.textContent = '';
+      agentLogIndex = 0;
+    });
+  }
+
+  // Retry button
+  var retryBtn = document.getElementById('agent-retry-btn');
+  if (retryBtn) {
+    retryBtn.addEventListener('click', function () {
+      document.getElementById('agent-results').style.display = 'none';
+      showAgentForm();
+      agentTerminal.textContent = '';
+      agentLogIndex = 0;
+    });
+  }
+
+  // ===== Leaderboard =====
+
+  var currentSort = 'area';
+  var currentFilter = 'all';
+  var currentTurnsFilter = 'all';
+
+  function getAllEntries() {
+    return BASELINES.concat(communityEntries);
+  }
+
+  function renderLeaderboard() {
+    var entries = getAllEntries();
+
+    // Filter by type
+    if (currentFilter !== 'all') {
+      entries = entries.filter(function (d) { return d.type === currentFilter; });
+    }
+
+    // Filter by turns
+    if (currentTurnsFilter !== 'all') {
+      var turnsVal = parseInt(currentTurnsFilter);
+      entries = entries.filter(function (d) { return d.turns === turnsVal; });
+    }
+
+    // Sort descending
+    entries.sort(function (a, b) { return (b[currentSort] || 0) - (a[currentSort] || 0); });
+
+    var tbody = document.getElementById('leaderboard-body');
+    tbody.innerHTML = '';
+
+    entries.forEach(function (d, i) {
+      var rank = i + 1;
+      var tr = document.createElement('tr');
+      if (d.name === 'Human') tr.className = 'lb-human-row';
+
+      var archClass = d.arch.toLowerCase().replace(/[^a-z]/g, '');
+      if (archClass === 'finetuned') archClass = 'finetuned';
+      else if (archClass === 'ragbased' || archClass === 'rag') archClass = 'rag';
+
+      var badgeClass = d.type === 'community' ? 'community' : archClass;
+
+      var rankClass = '';
+      if (rank === 1) rankClass = 'lb-rank-1';
+      else if (rank === 2) rankClass = 'lb-rank-2';
+      else if (rank === 3) rankClass = 'lb-rank-3';
+
+      tr.innerHTML =
+        '<td class="lb-rank ' + rankClass + '">' + rank + '</td>' +
+        '<td class="lb-name">' + d.name + '</td>' +
+        '<td class="lb-type"><span class="lb-badge ' + badgeClass + '">' + d.arch + '</span></td>' +
+        '<td class="lb-turns">' + (d.turns || '—') + '</td>' +
+        '<td class="lb-score">' + fmtScore(d.ic) + '</td>' +
+        '<td class="lb-score">' + fmtScore(d.ec) + '</td>' +
+        '<td class="lb-score">' + fmtScore(d.rc) + '</td>' +
+        '<td class="lb-score"><strong>' + fmtScore(d.area) + '</strong></td>';
+
+      tbody.appendChild(tr);
+    });
+
+    // Update active header
+    document.querySelectorAll('.leaderboard-table th.sortable').forEach(function (th) {
+      th.classList.toggle('active', th.dataset.col === currentSort);
+    });
+  }
+
+  // Sort handlers
+  document.querySelectorAll('.leaderboard-table th.sortable').forEach(function (th) {
+    th.addEventListener('click', function () {
+      currentSort = th.dataset.col;
+      document.getElementById('lb-sort').value = currentSort;
+      renderLeaderboard();
+    });
+  });
+
+  document.getElementById('lb-sort').addEventListener('change', function () {
+    currentSort = this.value;
+    renderLeaderboard();
+  });
+
+  document.getElementById('lb-type-filter').addEventListener('change', function () {
+    currentFilter = this.value;
+    renderLeaderboard();
+  });
+
+  document.getElementById('lb-turns-filter').addEventListener('change', function () {
+    currentTurnsFilter = this.value;
+    renderLeaderboard();
+  });
+
+  // Initial render
+  renderLeaderboard();
+
+})();

index.html

@@ -0,0 +1,374 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+  <meta charset="UTF-8">
+  <meta name="viewport" content="width=device-width, initial-scale=1.0">
+  <title>Demo | PICon</title>
+  <meta name="description" content="Try PICon — experience the interrogation yourself or test your own persona agent">
+  <meta name="demo-api-url" content="https://picongithubio-production.up.railway.app">
+  <link rel="stylesheet" href="/assets/css/style.css">
+  <link rel="preconnect" href="https://fonts.googleapis.com">
+  <link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&family=JetBrains+Mono:wght@400;500&display=swap" rel="stylesheet">
+  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/katex@0.16.11/dist/katex.min.css">
+  <script defer src="https://cdn.jsdelivr.net/npm/katex@0.16.11/dist/katex.min.js"></script>
+  <script defer src="https://cdn.jsdelivr.net/npm/katex@0.16.11/dist/contrib/auto-render.min.js"
+    onload="renderMathInElement(document.body, {delimiters:[{left:'$$',right:'$$',display:true},{left:'$',right:'$',display:false}]});"></script>
+</head>
+<body>
+
+  <nav class="sidebar" id="sidebar">
+    <div class="sidebar-header">
+      <a href="https://kaist-edlab.github.io/picon/" class="sidebar-logo">PICon</a>
+      <button class="sidebar-toggle" id="sidebar-toggle" aria-label="Toggle navigation">
+        <span></span><span></span><span></span>
+      </button>
+    </div>
+    <ul class="sidebar-nav" id="sidebar-nav">
+      <li class="nav-item">
+        <a href="https://kaist-edlab.github.io/picon/" class="nav-link">Home</a>
+      </li>
+      <li class="nav-item">
+        <a href="https://kaist-edlab.github.io/picon/research/" class="nav-link">Research</a>
+      </li>
+      <li class="nav-item active">
+        <a href="#" class="nav-link">Demo</a>
+      </li>
+      <li class="nav-item">
+        <a href="https://kaist-edlab.github.io/picon/contact/" class="nav-link">Contact</a>
+      </li>
+    </ul>
+    <div class="sidebar-footer">
+      <a href="https://github.com/willystumblr/picon" class="sidebar-link" target="_blank">GitHub</a>
+      <a href="https://arxiv.org/abs/2603.25620" class="sidebar-link" target="_blank">arXiv</a>
+    </div>
+  </nav>
+
+  <script>
+    const toggle = document.getElementById('sidebar-toggle');
+    const sidebar = document.getElementById('sidebar');
+    toggle.addEventListener('click', () => {
+      sidebar.classList.toggle('open');
+    });
+  </script>
+
+  <div class="page-wrap">
+    <main class="main-content">
+
+<div class="container-wide">
+  <h1>Demo</h1>
+  <p class="subtitle">Experience the PICon interrogation, test your own persona agent, or browse the leaderboard</p>
+
+  <!-- Mode Tabs -->
+  <div class="demo-tabs">
+    <button class="demo-tab active" data-tab="experience">Experience Mode</button>
+    <button class="demo-tab" data-tab="agent-test">Agent Test</button>
+    <button class="demo-tab" data-tab="leaderboard">Leaderboard</button>
+  </div>
+
+  <!-- ===== Experience Mode ===== -->
+  <div class="demo-panel active" id="panel-experience">
+    <div class="demo-description">
+      <strong>Experience the interrogation yourself.</strong>
+      You play as a persona being interrogated by PICon's multi-turn questioning system.
+      Answer as yourself &mdash; PICon will probe your responses with logically chained follow-ups
+      and verify factual claims in real time. At the end, you'll see your consistency scores across
+      all three dimensions.
+    </div>
+
+    <!-- Name entry -->
+    <div id="exp-start" class="agent-form">
+      <div class="form-row">
+        <div class="form-group" style="flex:2;">
+          <label for="exp-name">Your name</label>
+          <input type="text" id="exp-name" placeholder="Enter your name to begin">
+        </div>
+        <div class="form-group" style="flex:1;">
+          <label for="exp-turns">Turns</label>
+          <select id="exp-turns">
+            <option value="30">30 turns (quick)</option>
+            <option value="50" selected>50 turns (standard)</option>
+            <option value="75">75 turns (thorough)</option>
+          </select>
+        </div>
+      </div>
+      <button class="btn btn-primary" id="exp-start-btn">Start Interview</button>
+    </div>
+
+    <!-- Chat -->
+    <div id="exp-chat" style="display:none;">
+      <div class="chat-container">
+        <div class="chat-header">
+          <h4>PICon Interview</h4>
+          <span class="chat-progress" id="exp-progress"></span>
+        </div>
+        <div class="chat-messages" id="exp-messages"></div>
+        <div class="chat-input">
+          <input type="text" id="exp-input" placeholder="Type your response..." autocomplete="off">
+          <button id="exp-send" disabled>Send</button>
+        </div>
+      </div>
+    </div>
+
+    <!-- Results card (shown after completion) -->
+    <div id="exp-results" style="display:none;">
+      <div class="results-card">
+        <h3>Your Consistency Report</h3>
+        <div class="score-grid" id="exp-score-grid"></div>
+      </div>
+    </div>
+  </div>
+
+  <!-- ===== Agent Test Mode ===== -->
+  <div class="demo-panel" id="panel-agent-test">
+    <div class="demo-description">
+      <strong>Test your own persona agent.</strong>
+      PICon will run the full interrogation pipeline and return a detailed consistency report.
+      Results are automatically added to the leaderboard.
+    </div>
+
+    <!-- Submode selector -->
+    <div class="agent-submode-selector" id="agent-submode-selector">
+      <button class="agent-submode-card active" data-submode="external">
+        <span class="submode-icon">🔗</span>
+        <span class="submode-title">Connect External Agent</span>
+        <span class="submode-desc">Already have an agent hosted elsewhere? Just provide its endpoint URL — no API key or model config needed.</span>
+      </button>
+      <button class="agent-submode-card" data-submode="quick">
+        <span class="submode-icon">⚡</span>
+        <span class="submode-title">Quick Agent Setup</span>
+        <span class="submode-desc">Pick an LLM, write a persona prompt, and PICon will build and evaluate the agent for you.</span>
+      </button>
+    </div>
+
+    <!-- External Agent form -->
+    <div class="agent-form" id="agent-form-external">
+      <div class="form-group">
+        <label for="ext-agent-name">Agent Name <span class="label-hint">(required)</span></label>
+        <input type="text" id="ext-agent-name" placeholder="e.g. MyPersonaBot v2">
+      </div>
+      <div class="form-group">
+        <label for="ext-agent-endpoint">Agent API Endpoint <span class="label-hint">(required — OpenAI chat-completions compatible)</span></label>
+        <input type="url" id="ext-agent-endpoint" placeholder="e.g. https://your-server.com/v1">
+      </div>
+      <div class="form-row">
+        <div class="form-group" style="flex:1;">
+          <label for="ext-agent-turns">Interrogation Turns</label>
+          <select id="ext-agent-turns">
+            <option value="30">30 turns (quick)</option>
+            <option value="50" selected>50 turns (standard)</option>
+            <option value="75">75 turns (thorough)</option>
+          </select>
+        </div>
+        <div class="form-group" style="flex:1;">
+          <label for="ext-agent-sessions">Sessions</label>
+          <select id="ext-agent-sessions">
+            <option value="1" selected>1 session</option>
+            <option value="2">2 sessions</option>
+            <option value="3">3 sessions</option>
+          </select>
+        </div>
+      </div>
+      <button class="btn btn-accent" id="agent-start-btn-external">Run PICon Evaluation</button>
+    </div>
+
+    <!-- Quick Agent form -->
+    <div class="agent-form" id="agent-form-quick" style="display:none;">
+      <div class="form-row">
+        <div class="form-group" style="flex:1;">
+          <label for="quick-agent-name">Agent Name <span class="label-hint">(required)</span></label>
+          <input type="text" id="quick-agent-name" placeholder="e.g. MyPersonaBot v2">
+        </div>
+        <div class="form-group" style="flex:1;">
+          <label for="quick-agent-model">Model <span class="label-hint">(required)</span></label>
+          <input type="text" id="quick-agent-model" placeholder="e.g. gpt-4o, gemini/gemini-2.5-flash">
+        </div>
+      </div>
+      <div class="form-group">
+        <label for="quick-agent-api-key">API Key <span class="label-hint">(required — covers your agent's LLM inference cost only)</span></label>
+        <input type="password" id="quick-agent-api-key" placeholder="Your API key (e.g. OpenAI, Gemini)">
+      </div>
+      <div class="form-group">
+        <label for="quick-agent-persona">Persona / System Prompt <span class="label-hint">(required)</span></label>
+        <textarea id="quick-agent-persona" rows="5" placeholder="Paste the system prompt that defines your agent's persona. This is sent as the system message and also used by PICon for evaluation."></textarea>
+      </div>
+      <div class="form-row">
+        <div class="form-group" style="flex:1;">
+          <label for="quick-agent-turns">Interrogation Turns</label>
+          <select id="quick-agent-turns">
+            <option value="30">30 turns (quick)</option>
+            <option value="50" selected>50 turns (standard)</option>
+            <option value="75">75 turns (thorough)</option>
+          </select>
+        </div>
+        <div class="form-group" style="flex:1;">
+          <label for="quick-agent-sessions">Sessions</label>
+          <select id="quick-agent-sessions">
+            <option value="1" selected>1 session</option>
+            <option value="2">2 sessions</option>
+            <option value="3">3 sessions</option>
+          </select>
+        </div>
+      </div>
+      <button class="btn btn-accent" id="agent-start-btn-quick">Run PICon Evaluation</button>
+    </div>
+
+    <!-- Agent test live log -->
+    <div id="agent-log" style="display:none;">
+      <div class="agent-terminal">
+        <div class="terminal-header">
+          <span class="terminal-title">PICon Evaluation</span>
+          <span class="chat-progress" id="agent-progress">Initializing...</span>
+        </div>
+        <pre class="terminal-body" id="agent-terminal-body"></pre>
+      </div>
+      <button class="btn btn-secondary" id="agent-cancel-btn" style="margin-top:0.75rem;">Cancel</button>
+    </div>
+
+    <!-- Agent results -->
+    <div id="agent-results" style="display:none;">
+      <div class="results-card">
+        <h3>Evaluation Report</h3>
+        <div class="score-grid" id="agent-score-grid"></div>
+        <p class="results-note">Your agent has been added to the leaderboard.</p>
+      </div>
+      <button class="btn btn-primary" id="agent-retry-btn" style="margin-top:0.75rem;">Test Another Agent</button>
+    </div>
+  </div>
+
+  <!-- ===== Leaderboard ===== -->
+  <div class="demo-panel" id="panel-leaderboard">
+    <div class="demo-description">
+      <strong>PICon Consistency Leaderboard.</strong>
+      Baseline scores from the paper's evaluation targets, plus community-submitted agents.
+      All baselines are evaluated under the same interrogation protocol (50 turns, 2 sessions).
+    </div>
+
+    <div class="leaderboard-controls">
+      <div class="leaderboard-filter">
+        <label>Sort by</label>
+        <select id="lb-sort">
+          <option value="area" selected>Overall (Area)</option>
+          <option value="ic">Internal Consistency</option>
+          <option value="ec">External Consistency</option>
+          <option value="rc">Retest Consistency</option>
+        </select>
+      </div>
+      <div class="leaderboard-filter">
+        <label>Type</label>
+        <select id="lb-type-filter">
+          <option value="all" selected>All</option>
+          <option value="baseline">Baseline (Paper)</option>
+          <option value="community">Community</option>
+        </select>
+      </div>
+      <div class="leaderboard-filter">
+        <label>Turns</label>
+        <select id="lb-turns-filter">
+          <option value="all" selected>All</option>
+          <option value="75">75</option>
+          <option value="50">50</option>
+          <option value="30">30</option>
+        </select>
+      </div>
+    </div>
+
+    <div class="leaderboard-table-wrap">
+      <table class="leaderboard-table" id="leaderboard-table">
+        <thead>
+          <tr>
+            <th class="lb-rank">#</th>
+            <th class="lb-name">Agent</th>
+            <th class="lb-type">Type</th>
+            <th class="lb-turns">Turns</th>
+            <th class="lb-score sortable" data-col="ic">IC</th>
+            <th class="lb-score sortable" data-col="ec">EC</th>
+            <th class="lb-score sortable" data-col="rc">RC</th>
+            <th class="lb-score sortable active" data-col="area">Area</th>
+          </tr>
+        </thead>
+        <tbody id="leaderboard-body"></tbody>
+      </table>
+    </div>
+
+    <p class="leaderboard-footnote">
+      <strong>IC</strong> = Internal Consistency (harmonic mean of non-contradiction &amp; cooperativeness).
+      <strong>EC</strong> = External Consistency (harmonic mean of non-refutation &amp; coverage).
+      <strong>RC</strong> = Retest Consistency (intra-session stability).
+      <strong>Area</strong> = normalized triangle area on the IC&ndash;EC&ndash;RC radar chart.
+    </p>
+  </div>
+</div>
+
+<!-- ===== Use via Python ===== -->
+<div class="container" style="margin-top: 3rem;">
+  <div class="python-api-section">
+    <h2>Use via Python</h2>
+    <p>
+      Install the <code>picon</code> package to run evaluations programmatically &mdash;
+      no web UI needed.
+    </p>
+
+    <div class="code-block">
+      <div class="code-header">Installation</div>
+      <pre><code>pip install picon</code></pre>
+    </div>
+
+    <div class="code-block">
+      <div class="code-header">Quick Start</div>
+      <pre><code>import picon
+
+result = picon.run(
+    persona="You are a 35-year-old software engineer named John...",
+    name="John",
+    model="gemini/gemini-2.5-flash",
+    num_turns=20,
+    num_sessions=2,
+    do_eval=True,
+)
+
+print(result.eval_scores)
+# {
+#   "internal_harmonic_mean": 0.85,
+#   "internal_responsiveness": 0.90,
+#   "internal_consistency": 0.81,
+#   "external_wilson": 0.72,
+#   "inter_session_stability": 0.88,
+#   "intra_session_stability": 0.91,
+# }
+result.save("results/john.json")</code></pre>
+    </div>
+
+    <div class="code-block">
+      <div class="code-header">External Agent (Blackbox API)</div>
+      <pre><code># Only the endpoint URL is needed — persona is baked into the agent
+result = picon.run(
+    api_base="http://your-server.com/v1",      # OpenAI-compatible endpoint
+    num_turns=30,
+)</code></pre>
+    </div>
+
+    <div class="code-block">
+      <div class="code-header">Evaluate Existing Results</div>
+      <pre><code>scores = picon.evaluate("results/john.json")
+print(scores)</code></pre>
+    </div>
+
+    <p style="margin-top:1rem; font-size:0.875rem; color:var(--color-text-muted);">
+      See the <a href="https://github.com/willystumblr/picon">GitHub repository</a>
+      for full documentation, CLI usage, and advanced configuration.
+    </p>
+  </div>
+</div>
+
+    </main>
+
+    <footer class="site-footer">
+      <div class="container">
+        <p>&copy; 2026 PICon Authors. Built with Jekyll &amp; GitHub Pages.</p>
+      </div>
+    </footer>
+  </div>
+
+  <script src="/assets/js/demo.js"></script>
+</body>
+</html>

requirements.txt

@@ -0,0 +1,2 @@
+fastapi
+uvicorn[standard]