AndreOS

An interactive desktop OS experience serving as my personal portfolio — built entirely with vanilla HTML, CSS, and JavaScript.

Demo is available at https://andreped.dev.

Stack

• Frontend: Vanilla HTML · CSS · JavaScript
• Build tool: Vite
• AI chat: @mlc-ai/web-llm — user-selectable LLM running on WebGPU (default: Qwen2.5-1.5B)
• Voice commands: @xenova/transformers + ONNX Runtime Web — Whisper in a Web Worker; model and language configurable
• Browser requirement: Chrome 113+, Edge 113+, or Safari 18+ (macOS Sequoia / iOS 18) for AI chat (WebGPU); voice works in any browser with MediaRecorder + WASM support

---

Features

Ask André — in-browser LLM chat, no API key needed

Runs entirely on WebGPU. Configurable model (Settings → AI Engine):

Model	Size	Notes
SmolLM2 135M	~265 MB	Fastest, English only
Qwen2.5 1.5B (default)	~1 GB	Multilingual · Norwegian ✓
Llama 3.2 1B	~800 MB	Multilingual · Compact
Llama 3.2 3B	~2 GB	Best quality

Voice commands — click 🎤 to control the OS by speech

Intent	English	Norwegian
Open app	"open resume", "ask André"	"åpne CV", "snakk med André"
Close window	"close window"	"lukk vinduet"
Show desktop	"show desktop"	"vis skrivebordet"
Web search	"search the web for X", "go to github.com"	—
Desktop search	"search for pathology"	—
Multi-step	"open chat and ask which day is it"	—
Help	"help"	"hjelp"

Compound commands are parsed by the LLM when loaded. Whisper model and language are configurable in Settings → Speech.

Deep links — open any app or start a chat directly from a URL

Apps can be opened directly via URL query parameters — useful for sharing a specific view or linking to the portfolio with a pre-opened app.

Parameter	Values	Description
app	about, resume, projects, contact, social, browser, research, ironflow, game, chat, settings	Open the specified app on load
chat	1	Open the OS Assistant sidebar on load
ask	any string	Open the sidebar and auto-submit a message to the assistant

Examples

# Open the About Me window
https://andreped.dev/?app=about

# Open the Research app
https://andreped.dev/?app=research

# Open the browser
https://andreped.dev/?app=browser

# Open Resume with the OS Assistant sidebar
https://andreped.dev/?app=resume&chat=1

# Open only the OS Assistant sidebar
https://andreped.dev/?chat=1

# Ask the assistant a question on load
https://andreped.dev/?ask=Tell%20me%20about%20Andr%C3%A9%27s%20research

# Open the Research app, navigate to the 40th paper, and summarise it
# (requires the AI model to be loaded first — open Ask André once to cache it)
https://andreped.dev/?ask=Open%20research%2C%20open%2040th%20paper%2C%20and%20summarize%20important%20topics%20in%20paper

The URL is cleaned up after the windows open, so refreshing the page returns to the normal desktop.

RAG over research papers — chat answers draw from André's actual publications

A BM25 index is built over ~50 publications (titles + abstracts) fetched from OpenAlex on page load. Top matching papers are automatically injected into the chat context — no extra model needed, zero RAM overhead.

BM25 search — taskbar search includes apps, content, and publications

The 🔍 search uses a pure-JS BM25 engine with prefix matching. It searches app entries, content sections, and André's publication abstracts. On mobile, tapping 🔍 opens a macOS Spotlight-style overlay centred on screen.

Settings — AI model, speech model, and language preferences

All preferences persist in localStorage. Configure via the ⚙️ Settings app or the EN / NO taskbar button (updates both transcription and LLM language at once).

• AI Engine: LLM model selector · response language (Auto / EN / NO)
• Speech: Whisper Tiny / Base / Small · transcription language · AI command parsing toggle

---

Getting started

Development

git clone https://github.com/andreped/AndreOS.git
cd AndreOS/
npm install
npm start          # or: npm run dev

Open http://localhost:3000.

Opening index.html directly as a file will not work for the AI chat feature — the Vite dev server is required to set the correct security headers for WebGPU.

Production build

npm run build

Output goes to dist/. The result is a fully static folder with no server-side dependencies.

Deployment

Cloudflare Pages is the recommended host — free tier, global CDN, and supports the custom response headers required for WebGPU.

1. Push your code to GitHub

2. Go to dash.cloudflare.com → Workers & Pages → Create → Pages → Connect to Git

3. Configure:

   Field	Value
   Build command	npm run build
   Build output directory	dist

4. Click Deploy

The public/_headers file sets the required COOP/COEP headers automatically.

GitHub Pages does not support custom response headers — the Ask André AI feature will not work there without a workaround.

---

Acknowledgements

• Justinianus2001 (Hoang Le Ngoc) — the original desktop portfolio template this project is based on. The core window management, taskbar, audio system, and visual design all originate from his work.
• MLC AI / web-llm — WebGPU-powered in-browser LLM runtime powering Ask André.
• OpenAlex — open scholarly API used for the Research window and RAG index.