Repository navigation
Expand file tree
/
Copy pathindex.html
More file actions
336 lines (320 loc) · 20.6 KB
/
Copy pathindex.html
File metadata and controls
336 lines (320 loc) · 20.6 KB
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
242
243
244
245
246
247
248
249
250
251
252
253
254
255
256
257
258
259
260
261
262
263
264
265
266
267
268
269
270
271
272
273
274
275
276
277
278
279
280
281
282
283
284
285
286
287
288
289
290
291
292
293
294
295
296
297
298
299
300
301
302
303
304
305
306
307
308
309
310
311
312
313
314
315
316
317
318
319
320
321
322
323
324
325
326
327
328
329
330
331
332
333
334
335
336
<!doctype html>
<html lang="en" data-theme="dark" data-distribution="public">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta name="description" content="Peter Edwards — browser-based tools that put language models to work: an AI notebook that builds analyses, simulations and games from prompts, agentic game and WebXR builders, a 3D asset studio, LLM evaluation benches and developer tools. Open source, local-first, runs in your browser.">
<title>Peter Edwards — AI tooling & browser apps</title>
<link rel="canonical" href="https://neuroviz.uk/">
<link rel="icon" href="favicon.svg" type="image/svg+xml">
<link rel="apple-touch-icon" href="apple-touch-icon.png">
<meta name="theme-color" content="#080b12">
<meta property="og:type" content="website">
<meta property="og:site_name" content="Peter Edwards">
<meta property="og:url" content="https://neuroviz.uk/">
<meta property="og:title" content="Peter Edwards — AI tooling & browser apps">
<meta property="og:description" content="An AI notebook that builds from prompts, agentic game and WebXR builders, a 3D asset studio, LLM evaluation benches and developer tools — all running in the browser.">
<meta property="og:image" content="https://neuroviz.uk/og-image.jpg">
<meta property="og:image:width" content="1200">
<meta property="og:image:height" content="630">
<meta property="og:image:alt" content="A grid of model-generated games, 3D scenes, sketches and SVG illustrations.">
<meta name="twitter:card" content="summary_large_image">
<script type="application/ld+json">
{
"@context": "https://schema.org",
"@type": "ProfilePage",
"url": "https://neuroviz.uk/",
"mainEntity": {
"@type": "Person",
"name": "Peter Edwards",
"url": "https://neuroviz.uk/",
"knowsAbout": ["LLM application engineering", "Agentic coding workflows", "WebXR", "Three.js", "WebAssembly", "JavaScript"]
}
}
</script>
<link rel="stylesheet" href="site.css?v=3b2749e850">
<script src="plexus.js?v=af28b17aab" defer></script>
</head>
<body>
<header class="site-header">
<a class="brand" href="./" aria-label="Peter Edwards — home">
<span class="brand-mark">PE</span>
<span>Peter Edwards</span>
</a>
<nav aria-label="Main navigation">
<a href="#projects">Projects</a>
<a href="showcase.html">Showcase</a>
<a href="#about">About</a>
<a href="settings.html">Settings</a>
<a href="privacy.html">Privacy</a>
<a href="https://github.com/Techdread/llm-test-bench" data-repository-link>GitHub</a>
</nav>
</header>
<main>
<section class="hero">
<div class="hero-copy-col">
<p class="eyebrow">Portfolio · AI tooling & browser apps</p>
<h1><span class="l">I build tools that</span><span class="l">put language models</span><span class="l l3">to real work.</span></h1>
<p class="hero-copy">A notebook where a model writes the code while you steer, agentic builders that write whole games and VR worlds, a studio that turns photos into rigged 3D assets, and benches that measure what models actually produce. Every project here is live — open one and try it with your own model.</p>
<div class="hero-actions">
<a class="button primary" href="notebook-lab/">Open Notebook Lab</a>
<a class="button" href="#projects">Explore the projects</a>
<a class="button" href="#about">About me</a>
<a class="text-link" href="settings.html">Connect a model <span aria-hidden="true">→</span></a>
</div>
<div class="trust-row" aria-label="Project notes">
<span>Runs entirely in the browser</span>
<span>Bring your own local or hosted model</span>
<span>Open source, no account</span>
</div>
</div>
<!-- Populated from _showcase/index.json by showcase.js; the whole panel
stays hidden if the build carries no showcase. -->
<div class="showcase" id="showcase" data-showcase-panel hidden>
<div class="showcase-head">
<span class="showcase-label">Real model output · click to open</span>
<span class="showcase-badge" data-showcase-count></span>
</div>
<p class="showcase-intro">Generations from the benches and the forges — each tile opens its prompt and code, or plays the build, in the app that made it.</p>
<div class="showcase-grid" data-showcase-grid data-hero data-limit="6"></div>
<a class="showcase-more" href="showcase.html">See the full showcase <span aria-hidden="true">→</span></a>
</div>
</section>
<section class="facts" aria-label="At a glance">
<div><strong>12</strong><span>live projects on this site</span></div>
<div><strong>220+</strong><span>apps in the private workbench they come from</span></div>
<div><strong>0</strong><span>build steps — native ES modules, no bundler</span></div>
<div><strong>0</strong><span>third-party CDN requests — every library is vendored</span></div>
</section>
<section class="tools-section" id="projects" aria-labelledby="projects-title">
<div class="section-heading">
<div>
<p class="eyebrow">Selected work</p>
<h2 id="projects-title">Projects</h2>
</div>
<p>Twelve projects from DevTools Hub, a workbench of 220+ browser apps I design, build and use daily. Each one below is the real app, running from this site.</p>
</div>
<div class="project-group" aria-labelledby="group-notebooks">
<div class="group-heading">
<h3 id="group-notebooks">Start here</h3>
<p>The project I use most, for research and for teaching: a notebook where a model writes the cells and you steer.</p>
</div>
<div class="project-grid featured">
<article class="project-card accent-pink wide">
<div class="card-body">
<div class="card-kicker"><span class="dot"></span> AI-built notebooks</div>
<h4>Notebook Lab</h4>
<p>Describe what you want and a model writes the cell: an analysis in Python, a live chart, a 3D scene, a game. Every cell, whether JavaScript, Python, C, Lua, Clojure, SQL, HTML or live controls, shares one set of variables, so drag a slider and everything that reads it follows. Ask for a change and the model edits the cell; if one fails, it reads the error and fixes it. 84 notebooks to start from, including a 3D solar system, an arcade game and a living ecosystem, each built from a few prompts.</p>
<ul class="skills">
<li>Prompt-built cells that see your data</li>
<li>Python & NumPy via WebAssembly</li>
<li>Cross-language shared state</li>
</ul>
<div class="card-links">
<a class="card-link" href="notebook-lab/">Open Notebook Lab <span aria-hidden="true">→</span></a>
<a class="card-link secondary" href="notebook-lab/?tutorial=tutorial-ai-3-solar-system.json">The solar system</a>
<a class="card-link secondary" href="work-notebook-lab.html">How it’s built</a>
</div>
</div>
<img class="card-shot" src="notebook-lab-card-ai3.webp" width="1440" height="900" loading="lazy" alt="Notebook Lab running its 3D solar system tutorial: a controls cell with Follow set to Saturn, and below it a three.js scene, written by an AI model from a prompt, flying alongside Saturn and its rings.">
</article>
</div>
</div>
<div class="project-group" aria-labelledby="group-agentic">
<div class="group-heading">
<h3 id="group-agentic">Agentic builders</h3>
<p>A model is handed tools and a budget, writes a multi-file project, and the app checks the result instead of trusting it.</p>
</div>
<div class="project-grid featured">
<article class="project-card accent-amber">
<div class="card-kicker"><span class="dot"></span> Agentic game builder</div>
<h4>Game Forge</h4>
<p>The model builds a complete, multi-file game through an agentic file-writing loop, against a curated library of 339 briefs from 1980 arcade classics to modern indies. Every run is kept, rated and comparable side by side.</p>
<ul class="skills">
<li>Tool-calling loop with hard budgets</li>
<li>Loop & stall detection</li>
<li>Hash-pinned engine provisioning</li>
</ul>
<div class="card-links">
<a class="card-link" href="game-forge-v2/">Open Game Forge <span aria-hidden="true">→</span></a>
<a class="card-link secondary" href="work-game-forge.html">How it’s built</a>
</div>
</article>
<article class="project-card accent-blue">
<div class="card-kicker"><span class="dot"></span> WebXR · Meta Quest 3</div>
<h4>VR Forge</h4>
<p>Builds complete WebXR projects for the Quest 3, then runs each one in an emulated immersive session and measures it: did it actually enter VR and render two eyes? It turns “works in VR” from a claim into a measurement.</p>
<ul class="skills">
<li>WebXR emulation for verification</li>
<li>Three.js + Rapier physics</li>
<li>31 VR game & simulation briefs</li>
</ul>
<div class="card-links">
<a class="card-link" href="vr-forge/">Open VR Forge <span aria-hidden="true">→</span></a>
<a class="card-link secondary" href="work-vr-forge.html">How it’s built</a>
</div>
</article>
<article class="project-card accent-green">
<div class="card-kicker"><span class="dot"></span> Image → 3D asset</div>
<h4>Understory Studio</h4>
<p>One to three reference pictures in; an editable 3D asset out at five levels of detail, with procedural materials and — for characters — a working skeleton and 87 animations. The model reviews renders of what it built beside your reference, then corrects it.</p>
<ul class="skills">
<li>Vision-model self-review loop</li>
<li>Declarative design → geometry</li>
<li>Five LODs, rigging, GLB export</li>
</ul>
<div class="card-links">
<a class="card-link" href="understory-studio/">Open Understory Studio <span aria-hidden="true">→</span></a>
<a class="card-link secondary" href="work-understory.html">How it’s built</a>
</div>
</article>
<article class="project-card accent-purple">
<div class="card-kicker"><span class="dot"></span> Iterative code generation</div>
<h4>Code Morph Lab</h4>
<p>Describe what you want and watch a model write, run and self-correct code over several iterations, in HTML or in Python via Pyodide. Generations from the Prompt Gallery and SVG bench can be sent here to be morphed.</p>
<ul class="skills">
<li>Edit → run → observe → retry</li>
<li>Streaming tool-call timeline</li>
<li>In-browser Python (WebAssembly)</li>
</ul>
<div class="card-links">
<a class="card-link" href="code-morph-lab-v3/">Open Code Morph Lab <span aria-hidden="true">→</span></a>
<a class="card-link secondary" href="work-code-morph.html">How it’s built</a>
</div>
</article>
</div>
</div>
<div class="project-group" aria-labelledby="group-benches">
<div class="group-heading">
<h3 id="group-benches">LLM evaluation benches</h3>
<p>One prompt, many models: generate, preview safely, compare and keep the evidence. Released together as the open-source <em>LLM Test Bench</em>.</p>
</div>
<div class="project-grid">
<article class="project-card accent-purple">
<div class="card-kicker"><span class="dot"></span> HTML + JavaScript</div>
<h4>Prompt Gallery</h4>
<p>Run one prompt through different models, preview each generated page in a sandbox, compare variants, refine failures and record a walkthrough. 62 starter prompts.</p>
<a class="card-link" href="prompt-gallery/">Open Prompt Gallery <span aria-hidden="true">→</span></a>
</article>
<article class="project-card accent-blue">
<div class="card-kicker"><span class="dot"></span> Creative coding</div>
<h4>p5 Sketch Gallery</h4>
<p>Generate instance-mode p5.js sketches, tune parameters and seeds, follow a sketch’s lineage, compare runs and capture video. 24 starter prompts.</p>
<a class="card-link" href="p5-sketch-gallery/">Open p5 Sketch Gallery <span aria-hidden="true">→</span></a>
</article>
<article class="project-card accent-pink">
<div class="card-kicker"><span class="dot"></span> Vector evaluation</div>
<h4>SVG Generation Bench</h4>
<p>Generate SVG submissions, compare them with reference images, inspect structure, score pixel similarity and batch-run a model over the whole catalogue. 63 starter prompts.</p>
<a class="card-link" href="svg-benchmark/">Open SVG bench <span aria-hidden="true">→</span></a>
</article>
</div>
</div>
<div class="project-group" aria-labelledby="group-dev">
<div class="group-heading">
<h3 id="group-dev">Developer tools & computer science</h3>
<p>Tools for seeing how code actually behaves, with a model on hand to explain or assist.</p>
</div>
<div class="project-grid four">
<article class="project-card accent-green">
<div class="card-kicker"><span class="dot"></span> Systems</div>
<h4>C Machine Lab</h4>
<p>Compile a subset of C to a teaching machine and step through it: source, assembly, registers, ALU flags, stack frames, heap and raw memory side by side. Traps double frees and use-after-free.</p>
<a class="card-link" href="c-machine-lab/">Open C Machine Lab <span aria-hidden="true">→</span></a>
</article>
<article class="project-card accent-amber">
<div class="card-kicker"><span class="dot"></span> Algorithms</div>
<h4>Algorithm Visualizer</h4>
<p>Instruments a JavaScript or Python algorithm, records every variable change and replays it as an animated array, graph, tree or grid you can scrub forwards and back.</p>
<a class="card-link" href="algorithm-visualizer/">Open Algorithm Visualizer <span aria-hidden="true">→</span></a>
</article>
<article class="project-card accent-blue">
<div class="card-kicker"><span class="dot"></span> Databases</div>
<h4>SQL Playground</h4>
<p>SQLite compiled to WebAssembly, with a schema viewer, ER diagram, query plans and an assistant that writes SQL against your actual schema.</p>
<a class="card-link" href="sql-playground/">Open SQL Playground <span aria-hidden="true">→</span></a>
</article>
<article class="project-card accent-pink">
<div class="card-kicker"><span class="dot"></span> Compilers</div>
<h4>AST Explorer & Refactor Lab</h4>
<p>Parse JavaScript, TypeScript or Python, walk the syntax tree linked to the source, and apply model-driven refactors as a diff you review before accepting.</p>
<a class="card-link" href="ast-explorer-refactor-lab/">Open AST Explorer <span aria-hidden="true">→</span></a>
</article>
</div>
</div>
</section>
<section class="engineering" id="engineering" aria-labelledby="engineering-title">
<div class="section-heading">
<div>
<p class="eyebrow">Under the hood</p>
<h2 id="engineering-title">How it’s built</h2>
</div>
<p>The same conventions run through every app, which is what lets one person keep 220+ of them working.</p>
</div>
<div class="eng-grid">
<div class="eng-item">
<h3>No build step</h3>
<p>Native ES modules with Preact and HTM through import maps. No bundler, no transpiler: the source you read is the code that runs.</p>
</div>
<div class="eng-item">
<h3>Provider-agnostic models</h3>
<p>One streaming layer over OpenRouter, LM Studio and other OpenAI-compatible servers, with local coding agents (Claude Code, Codex and others) exposed as ordinary model choices in the private hub.</p>
</div>
<div class="eng-item">
<h3>Local-first storage</h3>
<p>Work is saved to a folder you choose, through the File System Access API. Saves are append-only, so nothing a model generated is ever overwritten.</p>
</div>
<div class="eng-item">
<h3>Verify, don’t trust</h3>
<p>Generated code runs in sandboxed frames and is measured: rendered, screenshotted, re-read by the model, or entered into an emulated XR session.</p>
</div>
<div class="eng-item">
<h3>Vendored, pinned dependencies</h3>
<p>Every library is served from this site and recorded in a manifest. Engines copied into generated projects are checked against pinned hashes.</p>
</div>
<div class="eng-item">
<h3>Zero-npm testing</h3>
<p>Unit tests on <code>node:test</code>, plus recorded user-flow replay and visual-regression screenshots driven by a small Chrome DevTools Protocol client.</p>
</div>
</div>
</section>
<section class="workflow" id="how-it-works" aria-labelledby="workflow-title">
<div>
<p class="eyebrow">Trying the projects</p>
<h2 id="workflow-title">Your data, your models</h2>
<p>The site is hosted, but your work is not uploaded to it. In Chrome or Edge, choose a folder on your own computer and the apps read and write inside it with your permission.</p>
</div>
<ol>
<li><strong><a href="settings.html">Choose a folder</a></strong><span>The browser remembers it and asks before restoring access.</span></li>
<li><strong><a href="settings.html">Connect a model</a></strong><span>Your local LM Studio or OpenAI-compatible server, or your own OpenRouter key.</span></li>
<li><strong>Open a project</strong><span>Prompts go only to the provider you pick; outputs stay in your folder.</span></li>
</ol>
</section>
<section class="about" id="about" aria-labelledby="about-title">
<div>
<p class="eyebrow">About</p>
<h2 id="about-title">Peter Edwards</h2>
</div>
<div class="about-body">
<p>I am a software engineer with 20+ years of experience developing commercial software. My background is in C++, Java, C#, JavaScript, Fortran and VB6. More recently, I have been exploring how to use AI agents throughout the software development cycle and have built this site using Claude Code and Codex. I am currently looking for a new role in software development that will allow me to expand my software skills particularly working with AI tools. If that sounds like a good fit for your team, I'd be happy to talk.</p>
<p>I’m currently looking for my next role. If you’re hiring for AI application engineering, developer tooling or creative technology, I’d like to hear from you.</p>
<div class="contact-links">
<a class="button primary" href="mailto:Techdread@gmail.com">Email me</a>
<a class="button" href="https://www.linkedin.com/in/peter-edwards-57081483/" rel="me noopener">LinkedIn</a>
<a class="button" href="https://github.com/Techdread" rel="me noopener">GitHub profile</a>
</div>
</div>
</section>
<aside class="browser-note">
<strong>Best in Chrome or Edge.</strong>
Folder access, local-network permission and screen recording depend on browser APIs that are not equally available everywhere. Local model servers work directly from this site; local coding agents and the image and video generation nodes belong to the full private hub.
</aside>
</main>
<footer>
<span>Peter Edwards · Projects MIT licensed</span>
<span>Experimental software — review generated code before sharing it.</span>
</footer>
<script src="showcase.js?v=a8122ff596"></script>
<script defer src="https://static.cloudflareinsights.com/beacon.min.js" data-cf-beacon='{"token": "087e962bcbbc4be0bc1ba8bf21be0bde"}'></script>
</body>
</html>