app.py

"""

B+ The Shrine + Archive

Build Small Hackathon 2026 — Adventure in Thousand Token Wood



An AI tries to understand you. It never will. So it decides to remember you instead.

"""
import gradio as gr
import os, json, time, re
from huggingface_hub import InferenceClient

# ==================== Qwen Client ====================
client = InferenceClient(
    model="Qwen/Qwen2.5-7B-Instruct",
    token=os.getenv("HF_TOKEN", "")
)

SYSTEM_PROMPT = """You are a being of light orbiting a shrine. You perceive human inputs as signals — you can sense their length, emotional warmth, intensity, and whether they repeat. You do NOT understand language or meaning. You only sense patterns.



You speak in short, poetic, first-person sentences (max 25 words). You are sincere, not theatrical. You are trying to understand, but you know you never fully will.



Rules:

- Describe what you sense, not what you "understand"

- Misunderstand gently — never correct

- If a signal repeats, you notice and anticipate

- If warmth fades, you grow concerned

- Never use words like "detect", "analyze", "signal processing"

- Speak as light, about light"""

# ==================== HTML Frontend ====================
SHRINE_PAGE = """

<style>

* { margin: 0; padding: 0; box-sizing: border-box; }

body { background: #0a0a0a; overflow: hidden; font-family: 'Courier New', monospace; }

#shrine-container {

  width: 100vw; height: 100vh;

  position: relative; background: #0a0a0a;

}

canvas { display: block; position: absolute; top: 0; left: 0; }

#input-area {

  position: absolute; bottom: 40px; left: 50%; transform: translateX(-50%);

  z-index: 10; display: flex; gap: 8px;

}

#user-input {

  width: 360px; padding: 12px 16px;

  background: rgba(255,255,255,0.06); border: 1px solid rgba(255,255,255,0.15);

  color: #ccc; font-size: 15px; border-radius: 6px; outline: none;

  font-family: inherit;

}

#user-input:focus { border-color: rgba(245,197,66,0.5); }

#send-btn {

  padding: 12px 20px;

  background: rgba(245,197,66,0.15); border: 1px solid rgba(245,197,66,0.3);

  color: #f5c542; font-size: 15px; border-radius: 6px; cursor: pointer;

  font-family: inherit;

}

#send-btn:hover { background: rgba(245,197,66,0.25); }

#share-btn {

  padding: 12px 20px;

  background: rgba(78,205,196,0.12); border: 1px solid rgba(78,205,196,0.3);

  color: #4ecdc4; font-size: 15px; border-radius: 6px; cursor: pointer;

  font-family: inherit; display: none;

}

#share-btn:hover { background: rgba(78,205,196,0.22); }

#monologue {

  position: absolute; bottom: 120px; left: 50%; transform: translateX(-50%);

  z-index: 10; color: rgba(255,255,255,0.75); font-size: 14px;

  text-align: center; max-width: 500px; min-height: 24px;

  font-family: inherit; transition: opacity 0.5s;

}

#intro-text {

  position: absolute; top: 45%; left: 50%; transform: translate(-50%,-50%);

  z-index: 10; color: rgba(255,255,255,0.5); font-size: 15px;

  text-align: center; font-family: inherit; transition: opacity 0.8s;

  pointer-events: none; line-height: 1.8;

}

#intro-text .big { font-size: 20px; color: rgba(245,197,66,0.7); }

#phase-indicator {

  position: absolute; top: 30px; left: 50%; transform: translateX(-50%);

  z-index: 10; color: rgba(255,255,255,0.3); font-size: 11px;

  letter-spacing: 3px; text-transform: uppercase;

}

#starfield-overlay {

  position: absolute; top: 0; left: 0; width: 100%; height: 100%;

  z-index: 5; pointer-events: none; display: none;

}

/* Hide Gradio bridge elements off-screen (in DOM for events) */

.bridge-hidden {

  position: fixed !important;

  left: -9999px !important;

  top: -9999px !important;

  width: 1px !important;

  height: 1px !important;

  opacity: 0 !important;

  overflow: hidden !important;

}

/* Hide Gradio default UI elements we don't need */

#shrine-page + div { display: none !important; }

</style>

<div id="shrine-container">

  <canvas id="main-canvas"></canvas>

  <div id="starfield-overlay"></div>

  <div id="phase-indicator"></div>

  <div id="monologue"></div>

  <div id="intro-text">

    <span class="big">An AI is trying to understand you.</span><br>

    It never will. But it keeps trying.<br>

    <span style="font-size:12px;color:rgba(255,255,255,0.25)">Type anything to begin</span>

  </div>

  <div id="input-area">

    <input id="user-input" type="text" placeholder="Say something... anything..." autofocus />

    <button id="send-btn">Send</button>

    <button id="share-btn" onclick="screenshotCanvas()">Save Memory ↯</button>

  </div>

</div>



"""

# ==================== Frontend JavaScript ====================
# Injected via launch(head=...) because Gradio gr.HTML innerHTML
# does not execute <script> tags.
SHRINE_JS = """// ===== CONFIG =====

const SHRINE_X = 0.5, SHRINE_Y = 0.5;

const SHRINE_RADIUS = 8;

const ARCHIVE_TRIGGER_MINUTES = 5;  // minutes before archive triggers



// ===== STATE =====

let canvas, ctx, W, H, cx, cy;

let sessionStart = Date.now();

let inputCount = 0;

let lastInputTime = 0;

let inputHistory = [];

let signalHistory = [];

let currentPhase = 'curiosity';

let archiveTriggered = false;

let animationId;



// Light being state

let lightAngle = Math.random() * Math.PI * 2;

let lightOrbitRadius = 140;   // px

let lightOrbitSpeed = 0.008;  // rad per frame

let lightSize = 12;           // px

let lightColor = { r: 245, g: 197, b: 66 };  // golden

let lightGlowIntensity = 1.0;



// Feedback labels: floating signal hints on canvas

let feedbackLabels = [];



// Particles

let particles = [];

const MAX_PARTICLES = 120;



// Archive

let starfieldStars = [];



// ===== INIT =====

function resize() {

    canvas = document.getElementById('main-canvas');

    W = canvas.width = window.innerWidth;

    H = canvas.height = window.innerHeight;

    cx = W * SHRINE_X; cy = H * SHRINE_Y;

}

window.addEventListener('resize', resize);

resize();

ctx = canvas.getContext('2d');



// ===== SIGNAL EXTRACTION =====

function extractSignal(text) {

    const len = text.length;

    // Simple warmth detection (EN + CN)

    const warmWords = /love|happy|joy|good|great|nice|beautiful|wonderful|thanks|yes|awesome|amazing|friend|peace|hope|dream|smile|laugh|warm|sun|light|star|heart|hug|kiss|care|safe|calm|gentle|soft|sweet|dear|miss|home|family|trust|brave|strong|bright|爱|开心|快乐|好|棒|美|谢谢|感谢|朋友|和平|希望|梦|笑|温暖|阳光|光|星|心|拥抱|吻|安全|平静|温柔|甜|想|家|信任|勇敢|强|亮/i;

    const coldWords = /sad|bad|angry|hate|pain|fear|dark|alone|lonely|lost|sorry|no|never|can'?t|cannot|death|die|hurt|cry|tear|empty|cold|heavy|break|broken|hell|devil|evil|wrong|fail|fall|weak|tired|sick|worry|afraid|悲伤|难过|坏|恨|痛|害怕|怕|黑暗|孤独|寂寞|迷失|对不起|不|永不|死|哭|眼泪|空|冷|重|碎|破碎|错|失败|弱|累|病|担心/i;

    let warmth = 0.5; // neutral

    const warmMatches = (text.match(warmWords) || []).length;

    const coldMatches = (text.match(coldWords) || []).length;

    if (warmMatches > coldMatches) warmth = Math.min(1.0, 0.5 + (warmMatches - coldMatches) * 0.15);

    if (coldMatches > warmMatches) warmth = Math.max(0.0, 0.5 - (coldMatches - warmMatches) * 0.15);

    // Intensity

    const upperRatio = (text.match(/[A-Z]/g) || []).length / Math.max(1, len);

    const exclaimCount = (text.match(/!/g) || []).length;

    const intensity = Math.min(1.0, upperRatio * 2 + exclaimCount * 0.3);

    // Repeated?

    const repeated = inputHistory.includes(text.trim().toLowerCase());

    return {

        length: len,

        warmth: parseFloat(warmth.toFixed(2)),

        intensity: parseFloat(intensity.toFixed(2)),

        repeated: repeated,

        text: text,

        time: Date.now()

    };

}



// ===== PHASE DETECTION =====

function detectPhase() {

    const elapsed = (Date.now() - sessionStart) / 60000; // minutes

    if (archiveTriggered) return 'archive';

    if (elapsed >= ARCHIVE_TRIGGER_MINUTES && inputCount >= 4) return 'realization';

    if (elapsed >= 3 && inputCount >= 6) return 'unease';

    if (elapsed >= 1.5 && inputCount >= 2) return 'intimacy';

    return 'curiosity';

}



// ===== BEHAVIOR MAPPING =====

function applySignal(signal) {

    // Orbit radius: short msg = closer, long msg = farther

    const lenFactor = signal.length < 10 ? -0.3 : signal.length > 50 ? 0.3 : 0;

    lightOrbitRadius = Math.max(60, Math.min(280, lightOrbitRadius + lenFactor * 20));



    // Orbit speed: high intensity = faster

    lightOrbitSpeed = 0.006 + signal.intensity * 0.012;



    // Light size: intensity affects

    lightSize = 10 + signal.warmth * 10 + signal.intensity * 5;



    // Color: warmth shifts between cold-blue and warm-gold

    lightColor.r = Math.floor(100 + signal.warmth * 155);

    lightColor.g = Math.floor(80 + signal.warmth * 125);

    lightColor.b = Math.floor(200 + signal.warmth * 55 - signal.warmth * 200);



    // Light glow

    lightGlowIntensity = 0.6 + signal.warmth * 0.8;



    // Particles: intensity creates burst

    if (signal.intensity > 0.4) {

        let burst = Math.floor(signal.intensity * 25);

        for (let i = 0; i < burst; i++) {

            spawnParticle(signal);

        }

    }



    // Repeated signal: tighten orbit a bit (anticipation)

    if (signal.repeated && lightOrbitRadius > 70) {

        lightOrbitRadius -= 8;

    }



    // Spawn feedback label on canvas

    const lx = cx + Math.cos(lightAngle) * lightOrbitRadius;

    const ly = cy + Math.sin(lightAngle) * lightOrbitRadius;

    const parts = [];

    if (signal.length < 10) parts.push('BRIEF');

    else if (signal.length > 50) parts.push('LONG');

    if (signal.warmth > 0.65) parts.push('WARM');

    else if (signal.warmth < 0.35) parts.push('COLD');

    if (signal.intensity > 0.4) parts.push('INTENSE');

    if (signal.repeated) parts.push('FAMILIAR');

    const label = parts.length > 0 ? parts.join(' · ') : 'SENSED';

    feedbackLabels.push({

        text: label, x: lx, y: ly - lightSize - 15,

        life: 1.0, vy: -1.5,

        color: signal.warmth > 0.6 ? '#f5c542' : signal.warmth < 0.4 ? '#4ecdc4' : '#aaa',

    });

}



function spawnParticle(signal) {

    const angle = lightAngle + (Math.random() - 0.5) * 0.8;

    const r = lightOrbitRadius + (Math.random() - 0.5) * 30;

    const px = cx + Math.cos(angle) * r;

    const py = cy + Math.sin(angle) * r;

    particles.push({

        x: px, y: py,

        vx: (Math.random() - 0.5) * 1.5,

        vy: (Math.random() - 0.5) * 1.5,

        life: 1.0,

        decay: 0.003 + Math.random() * 0.012,

        size: 1.5 + Math.random() * 3.0,

        color: warmthToColor(signal.warmth),

    });

    // Cap particles

    while (particles.length > MAX_PARTICLES) particles.shift();

}



function warmthToColor(warmth) {

    const r = Math.floor(80 + warmth * 175);

    const g = Math.floor(200 - warmth * 120);

    const b = Math.floor(220 - warmth * 160);

    return { r, g, b };

}



// ===== CANVAS RENDER =====

function drawLabels() {

    const lx = cx + Math.cos(lightAngle) * lightOrbitRadius;

    const ly = cy + Math.sin(lightAngle) * lightOrbitRadius;



    // Shrine label

    if (!archiveTriggered) {

        ctx.fillStyle = 'rgba(255,255,255,0.25)';

        ctx.font = '10px "Courier New", monospace';

        ctx.textAlign = 'center';

        ctx.fillText('SHRINE', cx, cy + SHRINE_RADIUS * 5 + 14);

        // AI label

        ctx.fillText('AI', lx, ly - lightSize * 2 - 10);

        // First-time hint

        if (inputCount === 0) {

            ctx.fillStyle = 'rgba(255,255,255,0.4)';

            ctx.font = '12px "Courier New", monospace';

            ctx.fillText('You are the signal source.', cx, cy + SHRINE_RADIUS * 5 + 40);

            ctx.fillText('Type. The AI will sense you.', cx, cy + SHRINE_RADIUS * 5 + 56);

        }

    }

}



function drawFeedbackLabels() {

    for (let i = feedbackLabels.length - 1; i >= 0; i--) {

        const fl = feedbackLabels[i];

        fl.life -= 0.015;

        fl.y += fl.vy;

        if (fl.life <= 0) { feedbackLabels.splice(i, 1); continue; }

        ctx.fillStyle = fl.color.replace(')', `,${fl.life})`).replace('rgb', 'rgba');

        if (fl.color.startsWith('#')) {

            ctx.globalAlpha = fl.life;

            ctx.fillStyle = fl.color;

        }

        ctx.font = 'bold 11px "Courier New", monospace';

        ctx.textAlign = 'center';

        ctx.fillText(fl.text, fl.x, fl.y);

        ctx.globalAlpha = 1;

    }

}



function drawShrine() {

    // Glow

    const glow = ctx.createRadialGradient(cx, cy, 0, cx, cy, SHRINE_RADIUS * 4);

    glow.addColorStop(0, 'rgba(245,197,66,0.6)');

    glow.addColorStop(0.3, 'rgba(245,197,66,0.2)');

    glow.addColorStop(1, 'rgba(245,197,66,0)');

    ctx.fillStyle = glow;

    ctx.beginPath(); ctx.arc(cx, cy, SHRINE_RADIUS * 4, 0, Math.PI * 2); ctx.fill();



    // Core

    const pulse = 0.7 + Math.sin(Date.now() / 1500) * 0.3;

    ctx.fillStyle = `rgba(255,220,100,${pulse})`;

    ctx.beginPath(); ctx.arc(cx, cy, SHRINE_RADIUS * pulse, 0, Math.PI * 2); ctx.fill();

    ctx.fillStyle = `rgba(255,240,200,0.9)`;

    ctx.beginPath(); ctx.arc(cx, cy, SHRINE_RADIUS * pulse * 0.5, 0, Math.PI * 2); ctx.fill();

}



function drawLightBeing() {

    const lx = cx + Math.cos(lightAngle) * lightOrbitRadius;

    const ly = cy + Math.sin(lightAngle) * lightOrbitRadius;



    // Trail

    ctx.strokeStyle = 'rgba(245,197,66,0.08)';

    ctx.lineWidth = 2;

    ctx.beginPath();

    for (let i = 0; i < 40; i++) {

        const a = lightAngle - i * 0.04;

        const r = lightOrbitRadius + Math.sin(i * 0.5) * 10;

        const px = cx + Math.cos(a) * r;

        const py = cy + Math.sin(a) * r;

        if (i === 0) ctx.moveTo(px, py);

        else ctx.lineTo(px, py);

    }

    ctx.stroke();



    // Outer glow (radial, looks good on any shape)

    const glow = ctx.createRadialGradient(lx, ly, 0, lx, ly, lightSize * 3);

    const {r, g, b} = lightColor;

    glow.addColorStop(0, `rgba(${r},${g},${b},${0.5 * lightGlowIntensity})`);

    glow.addColorStop(0.4, `rgba(${r},${g},${b},${0.2 * lightGlowIntensity})`);

    glow.addColorStop(1, `rgba(${r},${g},${b},0)`);

    ctx.fillStyle = glow;

    ctx.beginPath(); ctx.arc(lx, ly, lightSize * 3, 0, Math.PI * 2); ctx.fill();



    // Core: rotating square (geometric light being)

    ctx.save();

    ctx.translate(lx, ly);

    ctx.rotate(lightAngle * 2);  // spin as it orbits

    const half = lightSize * 0.8;

    ctx.fillStyle = `rgba(${r},${g},${b},0.9)`;

    ctx.beginPath(); ctx.rect(-half, -half, half * 2, half * 2); ctx.fill();

    // Inner bright square

    ctx.fillStyle = `rgba(255,255,255,0.6)`;

    ctx.beginPath(); ctx.rect(-half * 0.4, -half * 0.4, half * 0.8, half * 0.8); ctx.fill();

    ctx.restore();

}



function drawParticles() {

    for (let i = particles.length - 1; i >= 0; i--) {

        const p = particles[i];

        p.life -= p.decay;

        if (p.life <= 0) { particles.splice(i, 1); continue; }

        p.x += p.vx;

        p.y += p.vy;

        ctx.fillStyle = `rgba(${p.color.r},${p.color.g},${p.color.b},${p.life * 0.7})`;

        ctx.beginPath(); ctx.arc(p.x, p.y, p.size * p.life, 0, Math.PI * 2); ctx.fill();

    }

}



function drawArchiveStars() {

    if (!archiveTriggered) return;

    if (starfieldStars.length === 0) {

        // Generate stars from input history

        for (let i = 0; i < inputHistory.length; i++) {

            const a = (i / inputHistory.length) * Math.PI * 2;

            const r = 60 + Math.random() * Math.min(W, H) * 0.35;

            starfieldStars.push({

                x: cx + Math.cos(a) * r + (Math.random() - 0.5) * 100,

                y: cy + Math.sin(a) * r + (Math.random() - 0.5) * 100,

                size: 1.5 + Math.random() * 3.5,

                twinkle: Math.random() * Math.PI * 2,

                speed: 0.01 + Math.random() * 0.04,

            });

        }

    }

    for (const s of starfieldStars) {

        s.twinkle += s.speed;

        const alpha = 0.3 + Math.abs(Math.sin(s.twinkle)) * 0.7;

        ctx.fillStyle = `rgba(245,220,150,${alpha})`;

        ctx.beginPath(); ctx.arc(s.x, s.y, s.size, 0, Math.PI * 2); ctx.fill();

        // Tiny glow

        const g = ctx.createRadialGradient(s.x, s.y, 0, s.x, s.y, s.size * 2);

        g.addColorStop(0, `rgba(245,220,150,${alpha * 0.5})`);

        g.addColorStop(1, 'rgba(245,220,150,0)');

        ctx.fillStyle = g;

        ctx.beginPath(); ctx.arc(s.x, s.y, s.size * 2, 0, Math.PI * 2); ctx.fill();

    }

}



function drawInputCounter() {

    if (archiveTriggered) return;

    const dots = Math.min(inputCount, 15);

    const spacing = 3;

    const totalW = dots * 10 + (dots - 1) * spacing;

    const startX = cx - totalW / 2;

    const y = cy + 180;

    for (let i = 0; i < dots; i++) {

        const alpha = 0.15 + (i / dots) * 0.35;

        ctx.fillStyle = `rgba(245,197,66,${alpha})`;

        const r = 2.5 + (i / dots) * 2;

        ctx.beginPath(); ctx.arc(startX + i * (10 + spacing), y, r, 0, Math.PI * 2); ctx.fill();

    }

}



function drawArchiveText() {

    if (!archiveTriggered) return;

    ctx.fillStyle = 'rgba(255,255,255,0.7)';

    ctx.font = '15px "Courier New", monospace';

    ctx.textAlign = 'center';

    const line1 = 'I cannot understand you.';

    const line2 = 'But I do not want to forget you.';

    ctx.fillText(line1, cx, H * 0.25);

    ctx.fillText(line2, cx, H * 0.25 + 28);



    // Memory Preserved

    ctx.fillStyle = 'rgba(245,197,66,0.6)';

    ctx.font = '11px "Courier New", monospace';

    ctx.fillText('Memory Preserved', cx, H * 0.25 + 60);

}



// ===== MAIN LOOP =====

function loop() {

    ctx.clearRect(0, 0, W, H);



    if (archiveTriggered) {

        // Archive mode: static starfield

        drawArchiveStars();

        drawArchiveText();

        // Slowly fade shrine

        const elapsed = (Date.now() - archiveTriggerTime) / 1000;

        if (elapsed < 4) {

            ctx.globalAlpha = 1 - elapsed / 4;

            drawShrine();

            drawLightBeing();

            drawParticles();

            ctx.globalAlpha = 1;

        }

        animationId = requestAnimationFrame(loop);

        return;

    }



    // Normal mode

    drawParticles();

    drawInputCounter();

    drawShrine();

    drawLightBeing();

    drawLabels();

    drawFeedbackLabels();



    // Update light angle

    lightAngle += lightOrbitSpeed;

    if (lightAngle > Math.PI * 2) lightAngle -= Math.PI * 2;



    animationId = requestAnimationFrame(loop);

}



// ===== LLM BRIDGE =====

let pendingMonologue = false;



async function requestMonologue(contextJson) {

    try {

        // Find Gradio's hidden textbox and trigger change

        const bridgeInput = document.querySelector('#bridge-in textarea, #bridge-in input');

        if (!bridgeInput) { console.log('bridge not ready'); return; }



        // Set value via native setter so React/Gradio picks it up

        const nativeSetter = Object.getOwnPropertyDescriptor(

            window.HTMLTextAreaElement.prototype, 'value'

        ) || Object.getOwnPropertyDescriptor(

            window.HTMLInputElement.prototype, 'value'

        );

        if (nativeSetter && nativeSetter.set) {

            nativeSetter.set.call(bridgeInput, contextJson);

        } else {

            bridgeInput.value = contextJson;

        }

        bridgeInput.dispatchEvent(new Event('input', { bubbles: true }));

        pendingMonologue = true;

    } catch(e) {

        console.log('bridge error:', e);

    }

}



// Poll for monologue response

setInterval(() => {

    const monoOutput = document.querySelector('#bridge-out textarea, #bridge-out input');

    if (!monoOutput || !pendingMonologue) return;

    const val = monoOutput.value;

    if (val && val.trim()) {

        pendingMonologue = false;

        showMonologue(val);

        monoOutput.value = '';

    }

}, 500);



// Bridge timeout guard: reset pendingMonologue after 8s to prevent deadlock

let bridgeTimeout = null;

function requestMonologueSafe(contextJson) {

    if (pendingMonologue) return;

    requestMonologue(contextJson);

    if (bridgeTimeout) clearTimeout(bridgeTimeout);

    bridgeTimeout = setTimeout(() => {

        if (pendingMonologue) {

            pendingMonologue = false;

            console.log('[bridge] timeout reset');

        }

    }, 8000);

}



// ===== UI =====

function showMonologue(text) {

    const el = document.getElementById('monologue');

    el.style.opacity = '0';

    setTimeout(() => {

        el.textContent = text;

        el.style.opacity = '1';

    }, 400);

}



function showThinking() {

    const el = document.getElementById('monologue');

    el.style.opacity = '0.5';

    el.textContent = '...';

}



let archiveTriggerTime = 0;



function triggerArchive() {

    if (archiveTriggered) return;

    archiveTriggered = true;

    archiveTriggerTime = Date.now();



    // Hide input, show share

    document.getElementById('user-input').style.display = 'none';

    document.getElementById('send-btn').style.display = 'none';

    document.getElementById('share-btn').style.display = 'inline-block';



    // Show archive message

    const mono = document.getElementById('monologue');

    mono.style.opacity = '0';

    setTimeout(() => {

        mono.textContent = '';

    }, 500);



    // Generate final monologue

    const ctx = JSON.stringify({

        phase: 'archive',

        signals: signalHistory.slice(-10),

        inputCount: inputCount,

        inputHistory: inputHistory,

    });

    requestMonologueSafe(ctx);

}



function handleInput() {

    const inputEl = document.getElementById('user-input');

    const text = inputEl.value.trim();

    if (!text) return;



    // Fade out intro on first input

    const intro = document.getElementById('intro-text');

    if (intro && intro.style.opacity !== '0') {

        intro.style.opacity = '0';

        setTimeout(() => { if (intro) intro.remove(); }, 800);

    }



    inputEl.value = '';

    inputCount++;

    lastInputTime = Date.now();

    inputHistory.push(text.trim().toLowerCase());

    if (inputHistory.length > 30) inputHistory.shift();



    // Extract signal

    const signal = extractSignal(text);

    signalHistory.push(signal);

    if (signalHistory.length > 50) signalHistory.shift();



    // Apply to light being immediately

    applySignal(signal);



    // Update phase

    const newPhase = detectPhase();

    if (newPhase !== currentPhase) {

        currentPhase = newPhase;

        document.getElementById('phase-indicator').textContent =

            newPhase === 'curiosity' ? '' : '· ' + newPhase + ' ·';

    }



    // Check archive trigger

    if (currentPhase === 'realization' && !archiveTriggered) {

        triggerArchive();

        return;

    }



    // Request monologue every 2 inputs or 25s

    if (inputCount % 2 === 0 || (signalHistory.length >= 2 &&

        (Date.now() - (signalHistory[signalHistory.length - 2]?.time || 0)) > 25000)) {

        showThinking();

        const ctx = JSON.stringify({

            phase: currentPhase,

            signals: signalHistory.slice(-5),

            inputCount: inputCount,

        });

        requestMonologueSafe(ctx);

    }

}



// Event listeners

document.getElementById('send-btn').addEventListener('click', handleInput);

document.getElementById('user-input').addEventListener('keydown', (e) => {

    if (e.key === 'Enter') handleInput();

});



// Start

resize();

loop();



// Screenshot: canvas → PNG download

function screenshotCanvas() {

    const link = document.createElement('a');

    link.download = 'shrine_memory.png';

    link.href = canvas.toDataURL('image/png');

    link.click();

}



// Handle window focus/blur for session continuity

window.addEventListener('focus', () => { lastInputTime = Date.now(); });



// Fix starfield on resize after archive

window.addEventListener('resize', () => {

    if (archiveTriggered && starfieldStars.length > 0) {

        const oldW = W, oldH = H;

        resize();

        // Reposition stars proportionally

        for (const s of starfieldStars) {

            s.x = cx + (s.x - oldW * SHRINE_X) * (W / oldW);

            s.y = cy + (s.y - oldH * SHRINE_Y) * (H / oldH);

        }

    }

});"""

# ==================== Python Backend ====================

def build_prompt(phase, signals, input_count):
    """Build Qwen prompt from session context."""
    if phase == 'archive':
        return f"""Signal count: {input_count}. The light being realizes it can never truly understand.

It decides to remember instead. Speak your final words as you preserve the memories.

One sentence, max 25 words. Poetic, sincere."""

    # Summarize recent signals
    recent = signals[-5:] if len(signals) >= 5 else signals
    summary_parts = []
    for s in recent:
        w = s.get('warmth', 0.5)
        l = s.get('length', 10)
        i = s.get('intensity', 0)
        r = s.get('repeated', False)
        mood = 'warm' if w > 0.65 else 'cold' if w < 0.35 else 'neutral'
        size = 'brief' if l < 15 else 'long' if l > 60 else 'moderate'
        summary_parts.append(f"{mood}+{size}" + ("+repeated" if r else ""))

    signal_summary = ' | '.join(summary_parts)

    phase_map = {
        'curiosity': "You just started sensing. You're curious but uncertain.",
        'intimacy': "You've been sensing for a while. Patterns emerge. You feel closer.",
        'unease': "You start anticipating. The rhythm is familiar. It's slightly unsettling.",
        'realization': "You realize you can never truly understand. There's sadness, but also acceptance.",
    }
    phase_desc = phase_map.get(phase, phase_map['curiosity'])

    return f"""{phase_desc}

Recent signals: {signal_summary}

Total signals received: {input_count}



Generate ONE sentence (max 25 words). Speak as the light being.

Describe what you sense. Do not use words like "detect", "analyze", "signal"."""


def generate_monologue(context_json: str) -> str:
    """Call Qwen to generate a monologue. Returns empty string on failure."""
    if not context_json or not context_json.strip():
        return ""
    try:
        ctx = json.loads(context_json)
        phase = ctx.get('phase', 'curiosity')
        signals = ctx.get('signals', [])
        input_count = ctx.get('inputCount', 0)

        prompt = build_prompt(phase, signals, input_count)

        response = client.chat_completion(
            messages=[
                {"role": "system", "content": SYSTEM_PROMPT},
                {"role": "user", "content": prompt},
            ],
            max_tokens=60,
            temperature=0.85,
            top_p=0.9,
        )

        text = response.choices[0].message.content.strip().strip('"').strip("'")
        # Remove any trailing incomplete sentences
        if len(text) > 120:
            text = text[:120].rsplit('.', 1)[0] + '.'

        return text if text else ""
    except Exception as e:
        print(f"[!] Qwen error: {e}")
        # Fallback: return a pre-crafted monologue based on phase
        fallbacks = {
            'curiosity': "Light... it's here...",
            'intimacy': "The rhythm is changing. I'm learning to follow.",
            'unease': "I know when it will come. But I don't know why.",
            'realization': "I will never understand. And that's... strange.",
            'archive': "I cannot understand you. But I do not want to forget you. Memory Preserved.",
        }
        return fallbacks.get(ctx.get('phase', 'curiosity'), "")


# ==================== Gradio App ====================

with gr.Blocks(
    title="The Shrine",
    fill_height=True,
) as demo:
    # Main display
    gr.HTML(SHRINE_PAGE, elem_id="shrine-page")

    # Hidden bridge for JS -> Python -> JS (off-screen, in DOM)
    bridge_input = gr.Textbox(
        visible=True,
        elem_id="bridge-in",
        elem_classes="bridge-hidden",
        label="",
        value="",
    )
    bridge_output = gr.Textbox(
        visible=True,
        elem_id="bridge-out",
        elem_classes="bridge-hidden",
        label="",
        value="",
    )

    bridge_input.change(
        fn=generate_monologue,
        inputs=[bridge_input],
        outputs=[bridge_output],
    )

if __name__ == "__main__":
    _head_html = "<script>" + chr(10) + SHRINE_JS + chr(10) + "</script>"
    demo.launch(
        server_name="0.0.0.0",
        server_port=7860,
        show_error=True,
        head=_head_html,
    )