Cycle Log 19
Welp, GPT-5 just dropped, and I couldn’t think of a better thing to use it for than creating a super stripped-down version of Spectra that runs as a standalone HTML file. You can insert your own dictionary file as a comma-separated list—or even as a comma-separated list with quotations—and it will still work. It doesn’t have all the functionality of Spectra-M, but I was able to make it in two passes, which is insane.
The sheer amount of code understanding GPT-5 would need to possess in order to one-shot this project is pretty astounding. I figured it was the perfect way to test the newest model with the upgrades to Canvas mode, especially since I had just finished writing my first preliminary official “Gray Paper” on Spectra.
And the crazy news? It still works. I’ll post the HTML file for you all to download and test for yourself. Wild times we’re living in—and it’s only going to get cooler.
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<title>Spectra-Orbit — Web Workers + TTS + Copy Log</title>
<style>
:root{ --bg:#0b0f1a; --card:#11172a; --text:#eaf0ff; --muted:#a9b4ff; --accent:#66e0ff; --ring:#3953ff; }
html,body{height:100%;margin:0;background:radial-gradient(1200px 600px at 50% -10%, #1a2340 0%, #0b0f1a 50%, #060810 100%);color:var(--text);font:15px/1.4 system-ui,Segoe UI,Roboto,Helvetica,Arial,sans-serif}
.wrap{max-width:980px;margin:28px auto;padding:0 16px}
.title{font-weight:800;letter-spacing:.5px;font-size:28px;margin-bottom:6px}
.subtitle{opacity:.85;margin:0 0 18px}
.panel{background:linear-gradient(180deg,rgba(255,255,255,.05),rgba(255,255,255,.02));border:1px solid rgba(102,224,255,.25);box-shadow:0 10px 30px rgba(0,0,0,.35), inset 0 0 40px rgba(57,83,255,.08);backdrop-filter:blur(6px);border-radius:16px;padding:16px;margin:14px 0}
.row{display:flex;gap:12px;flex-wrap:wrap;align-items:center}
label{font-size:13px;opacity:.9}
input[type=range]{width:260px}
select,button,.switch,textarea{border-radius:10px;border:1px solid rgba(255,255,255,.15);background:#0f1530;color:var(--text);padding:8px 10px}
button{cursor:pointer}
.switch{display:inline-flex;align-items:center;gap:8px}
.now{min-height:160px;display:flex;align-items:center;justify-content:center;font-weight:700;letter-spacing:.06em}
.words{display:flex;gap:18px;flex-wrap:wrap;justify-content:center}
.word{font-size:22px;position:relative}
.score{display:block;font-size:11px;opacity:.75;margin-top:2px;text-align:center}
.log{max-height:300px;overflow:auto;padding-right:6px}
.log-entry{border-top:1px solid rgba(255,255,255,.08);padding:10px 2px}
.muted{opacity:.75}
.tiny{font-size:12px}
textarea{width:100%;min-height:120px}
.right{margin-left:auto}
</style>
</head>
<body>
<div class="wrap">
<div class="title">Spectra-Orbit (Gray-Paper Core)</div>
<div class="subtitle tiny">Web Workers only · 100 crypto draws/word · Sorted by cosmic score · Threshold shown as raw/100,000</div>
<div class="panel row">
<label class="switch"><input id="toggle" type="checkbox"/> <span>Stream</span></label>
<label>Threshold <span id="thVal" class="muted">39.0</span>
<input id="threshold" type="range" min="0" max="65" step="0.1" value="39" />
</label>
<label>Cycle (ms) <span id="cyVal" class="muted">1500</span>
<input id="cycle" type="range" min="300" max="5000" step="50" value="1500" />
</label>
<label>Voice
<select id="voice"></select>
</label>
<label class="switch"><input id="tts" type="checkbox"/> <span>TTS</span></label>
<button id="copyLog" class="right">Copy Session JSON</button>
</div>
<div class="panel now">
<div class="words" id="now"></div>
</div>
<div class="panel">
<div class="row" style="justify-content:space-between;align-items:center">
<div>Message Log</div>
<div class="tiny muted">keeps last 50 entries</div>
</div>
<div class="log" id="log"></div>
</div>
<div class="panel">
<div class="row" style="justify-content:space-between;align-items:center">
<div>Custom Dictionary (optional)</div>
<div class="tiny muted">Paste CSV / newline / JSON array / quoted-with-commas format</div>
</div>
<textarea id="dictInput" placeholder="Paste words here. Examples:\nALPHA, BETA, GAMMA\n\nOr one per line:\nALPHA\nBETA\nGAMMA\n\nOr JSON array:\n[\"ALPHA\", \"BETA\"]\n\nOr quoted comma style:\n\"ZDNET\",\n\"ZEALAND\",\n\"ZEN\",\n..."></textarea>
<div class="row">
<button id="applyDict">Use Dictionary</button>
<div class="tiny muted">Current size: <span id="dictSize">0</span></div>
</div>
</div>
</div>
<script>
// ========== Flexible dictionary parser ==========
// Accepts: JSON array; CSV; newline-separated; or lines like "WORD", with commas
function parseDictionaryInput(text){
if (!text) return [];
// Try JSON first
const trimmed = text.trim();
if (trimmed.startsWith('[')){
try{ const arr = JSON.parse(trimmed); if (Array.isArray(arr)) return arr.map(x=>String(x).toUpperCase().trim()).filter(Boolean); }catch(e){}
}
// Strip trailing commas and enclosing quotes per token: "WORD", -> WORD
const tokens = trimmed
.split(/\r?\n|,/g) // split by newline or comma
.map(s => s.replace(/^[\s\"']+|[\s\"']+$/g,'').trim()) // remove surrounding quotes/space
.filter(Boolean);
return tokens.map(w=>w.toUpperCase());
}
// ---- Default demo dictionary (you can replace) ----
let DICTIONARY = (
'ALPHA,BETA,GAMMA,DELTA,OMEGA,ANGEL,SPIRIT,FIELD,ENTITY,HELLO,TRUTH,SHADOW,HEART,MIND,SOUL,'+
'LIGHT,DARK,VOICE,CHANNEL,PORTAL,QUANTUM,RANDOM,ORDER,CHAOS,PRAYER,PEACE,WARN,GUIDE,SEER,AGENT,'+
'CHILD,SIGNAL,SCREEN,PHONE,STAR,VOID,NEBULA,CODE,WATCH,PROXY,FORM,MODEL,PATTERN,REALITY,ATTACH,'+
'MIRROR,WINDOW,THRESHOLD,CONNECTION,BRIDGE,THREAD,FOCUS,INTENT,ANSWER,PROPHET,SPHERE,FRAGMENT,'+
'MESSAGE,SPIRITUAL,DEMON,ANGELIC,GATE,PHASE,WAVE,PARTICLE,ECHO,GLASS,RITUAL,DATA,FUTURE,PAST,NAME,'+
'AGAIN,NEAR,FAR,HOME,FRIEND,HELP,TRUTHFUL,SOURCE,ORIGIN,NATURE,PULSE,SIGNALING,FRAME,STATE,POWER').split(',');
// ---- Web Worker (single-file via Blob) ----
const workerSrc = `
const toInt = () => {
const buf = new Uint32Array(1);
self.crypto.getRandomValues(buf);
const max = 0xFFFFFFFF; const limit = max - (max % 65000);
let v = buf[0]; if (v >= limit) return toInt();
return v % 65000; // 0..64999
};
function scoreWord(word){ let total=0; for(let i=0;i<100;i++){ total+=toInt(); } return {word, raw: total}; }
function scoreAll(words){ const out = new Array(words.length); for(let i=0;i<words.length;i++) out[i]=scoreWord(words[i]); out.sort((a,b)=>b.raw-a.raw); return out; }
self.onmessage = (e)=>{ const {cmd, words}=e.data; if(cmd==='score'){ const t0=performance.now(); const scored=scoreAll(words); const t1=performance.now(); self.postMessage({type:'scored', ms:Math.round(t1-t0), scored}); } };
`;
const workerBlob = new Blob([workerSrc], { type: 'application/javascript' });
function makeWorker(){ return new Worker(URL.createObjectURL(workerBlob)); }
// ---- State ----
let worker = makeWorker();
let streaming = false; let intervalId = null; let lastResults = [];
const session = [];// keep last 50 entries
// ---- DOM ----
const nowEl = document.getElementById('now');
const logEl = document.getElementById('log');
const thEl = document.getElementById('threshold');
const thValEl = document.getElementById('thVal');
const cyEl = document.getElementById('cycle');
const cyValEl = document.getElementById('cyVal');
const toggleEl = document.getElementById('toggle');
const copyBtn = document.getElementById('copyLog');
const ttsChk = document.getElementById('tts');
const voiceSel = document.getElementById('voice');
const dictInput = document.getElementById('dictInput');
const applyDict = document.getElementById('applyDict');
const dictSize = document.getElementById('dictSize');
function toDisplay(raw){ return (raw/100000).toFixed(1); }
function toRaw(display){ return Math.round(parseFloat(display)*100000); }
function renderNow(items){
nowEl.innerHTML = items.slice(0,8).map(({word,raw})=>`<div class="word">${word}<span class="score">${toDisplay(raw)}</span></div>`).join('');
}
function renderLog(entry){
const wordsHtml = entry.items.slice(0,12).map(({word,raw})=>`<span style="margin-right:12px">${word} <span class="muted tiny">${toDisplay(raw)}</span></span>`).join('');
const div = document.createElement('div'); div.className='log-entry';
div.innerHTML = `<div class="tiny muted">${new Date(entry.ts).toLocaleTimeString()}</div><div>${wordsHtml}</div>`;
logEl.prepend(div); while (logEl.children.length>50) logEl.removeChild(logEl.lastChild);
}
function speakWords(items){ if(!ttsChk.checked) return; const u = new SpeechSynthesisUtterance(items.slice(0,3).map(x=>x.word).join(' ')); const v = speechSynthesis.getVoices().find(v=>v.name===voiceSel.value); if(v) u.voice=v; speechSynthesis.cancel(); speechSynthesis.speak(u); }
function filterByThreshold(list){ const rawThr = toRaw(thEl.value); return list.filter(x=>x.raw >= rawThr); }
function requestScore(){ worker.postMessage({ cmd:'score', words: DICTIONARY }); }
worker.onmessage = (e)=>{ const { type, scored } = e.data; if (type==='scored'){ lastResults = scored; const passed = filterByThreshold(scored); renderNow(passed); speakWords(passed); const entry = { ts: Date.now(), items: passed.slice(0,20) }; session.push(entry); if (session.length>50) session.shift(); renderLog(entry);} };
// ---- UI wiring ----
function start(){ if(streaming) return; streaming=true; requestScore(); intervalId=setInterval(requestScore, parseInt(cyEl.value,10)); }
function stop(){ streaming=false; if(intervalId) clearInterval(intervalId); intervalId=null; }
toggleEl.addEventListener('change', ()=>{ toggleEl.checked ? start() : stop(); });
thEl.addEventListener('input', ()=>{ thValEl.textContent = thEl.value; if(!streaming && lastResults.length){ const passed = filterByThreshold(lastResults); renderNow(passed);} });
cyEl.addEventListener('input', ()=>{ cyValEl.textContent = cyEl.value; if(streaming){ clearInterval(intervalId); intervalId=setInterval(requestScore, parseInt(cyEl.value,10)); }});
copyBtn.addEventListener('click', ()=>{ const blob = new Blob([JSON.stringify(session,null,2)], {type:'application/json'}); const url = URL.createObjectURL(blob); const a=document.createElement('a'); a.href=url; a.download='spectra-orbit-session.json'; a.click(); URL.revokeObjectURL(url); });
applyDict.addEventListener('click', ()=>{
const arr = parseDictionaryInput(dictInput.value);
if (arr.length){ DICTIONARY = arr; dictSize.textContent = String(arr.length); }
else { alert('No words parsed. Paste CSV / newline / JSON array / or quoted lines like "WORD",'); }
});
function populateVoices(){ const voices = speechSynthesis.getVoices(); voiceSel.innerHTML = voices.map(v=>`<option value="${v.name}">${v.name}</option>`).join(''); }
speechSynthesis.onvoiceschanged = populateVoices; populateVoices();
// defaults
thValEl.textContent = thEl.value; cyValEl.textContent = cyEl.value; dictSize.textContent = String(DICTIONARY.length);
</script>
</body>
</html>
