Laurence
71217ce3e1
Adds original OpenScribe illustrations and elevates the whole site from a plain
scaffold to a polished, animated product site.
What changed:
- assets/img/: original SVG artwork (CC-BY-SA, no third-party photos):
- openscribe-wearable.svg - the wearable recorder with a breathing status LED (SMIL
animation that plays even when embedded via <img>).
- openscribe-kit.svg - the dev/kit build: ESP32-S3 board + I2S mic + microSD + LiPo,
with amber trace connectors.
- favicon.svg - the "12" studio mark; wired as the site icon and header logo.
- index.html: two-column hero with the floating device, a trust strip, a featured
showcase (device image + sync diagram), project cards with device thumbnails, and a
new "why open beats a locked box" comparison table (our own words, no competitor art).
- projects/openscribe.html: device hero, the AI picker in a proper panel, and a new
"two ways to build it" section with product figures (wearable + kit) and descriptions.
- assets/styles.css: full theme refresh - atmospheric background, gradient headings,
hero float, hover lift + shadows, product/figure styles, comparison table, and
scroll-reveal transitions (honours prefers-reduced-motion).
- assets/app.js: IntersectionObserver scroll reveals alongside the provider picker.
- README: documents the artwork and that it is original/publishable.
Why:
- The user asked for product images with descriptions, then to "make it amazing" - this
delivers IP-safe original device imagery and a genuinely polished, animated site.
Notes:
- Still zero dependencies and no build step. Validated: app.js passes node --check, all
SVGs are valid XML, HTML section tags balanced, every local link/asset resolves.
Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>
143 lines
7.1 KiB
HTML
143 lines
7.1 KiB
HTML
<!doctype html>
|
|
<!-- SPDX-License-Identifier: MIT -->
|
|
<html lang="en-GB">
|
|
<head>
|
|
<meta charset="utf-8" />
|
|
<meta name="viewport" content="width=device-width, initial-scale=1" />
|
|
<title>OpenScribe - open, self-hosted AI voice recorder | 12 Hobbies Studio</title>
|
|
<meta name="description" content="OpenScribe is an open-source, self-hosted AI voice recorder. Record on an ESP32-S3, sync over BLE or WiFi, and transcribe and summarise with any AI you choose - open or commercial." />
|
|
<link rel="icon" href="../assets/img/favicon.svg" type="image/svg+xml" />
|
|
<link rel="stylesheet" href="../assets/styles.css" />
|
|
</head>
|
|
<body>
|
|
<header class="site-header">
|
|
<div class="wrap">
|
|
<a class="brand" href="../index.html"><img src="../assets/img/favicon.svg" alt="" /> 12 Hobbies Studio</a>
|
|
<nav class="nav">
|
|
<a href="../index.html#projects">Projects</a>
|
|
<a href="#any-ai">Any AI</a>
|
|
<a href="https://git.discworld.casa/laurence/openscribe">Source</a>
|
|
</nav>
|
|
</div>
|
|
</header>
|
|
|
|
<main>
|
|
<section class="hero">
|
|
<div class="wrap hero-grid">
|
|
<div>
|
|
<div class="eyebrow">Project - hardware + AI</div>
|
|
<h1><span class="grad">OpenScribe</span></h1>
|
|
<p class="lead">An open-source, self-hosted AI voice recorder in the spirit of a Plaud device.
|
|
Record on a small ESP32-S3, sync to your phone and your own server, and turn recordings into
|
|
transcripts and summaries with <span class="accent">any AI you choose</span>.</p>
|
|
<div class="btn-row">
|
|
<a class="btn primary" href="https://git.discworld.casa/laurence/openscribe">Get the source →</a>
|
|
<a class="btn" href="#build">How to build</a>
|
|
</div>
|
|
</div>
|
|
<div class="hero-device">
|
|
<div class="frame">
|
|
<span class="chip a">open API</span>
|
|
<img src="../assets/img/openscribe-wearable.svg" alt="OpenScribe wearable recorder" />
|
|
<span class="chip b">self-hosted</span>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
|
|
<section id="any-ai">
|
|
<div class="wrap reveal">
|
|
<h2>Bring your own AI</h2>
|
|
<p class="section-sub">This is the difference. A commercial recorder locks you to its cloud.
|
|
OpenScribe lets you point transcription and summaries at whatever you want - a local model,
|
|
an open-standard endpoint, or a commercial API. Pick one and drop it in your server config:</p>
|
|
<div class="panel">
|
|
<div id="provider-picker" class="picker" aria-label="Choose an AI provider"></div>
|
|
<pre class="code"><code id="env-out"></code></pre>
|
|
</div>
|
|
<p class="section-sub" style="margin-top:16px">Transcription is just as flexible: local
|
|
<code>faster-whisper</code>, or any OpenAI-compatible audio endpoint (OpenAI, Groq, or your
|
|
own whisper server).</p>
|
|
</div>
|
|
</section>
|
|
|
|
<section id="device">
|
|
<div class="wrap reveal">
|
|
<h2>Two ways to build it</h2>
|
|
<p class="section-sub">A compact wearable, or a dev board for the best audio. Same firmware, same app.</p>
|
|
<div class="product-grid">
|
|
<figure class="product">
|
|
<div class="shot"><img src="../assets/img/openscribe-wearable.svg" alt="OpenScribe wearable recorder illustration" /></div>
|
|
<figcaption>
|
|
<span class="tag">compact</span>
|
|
<h3>Wearable build</h3>
|
|
<p>A XIAO ESP32-S3 with onboard mic and microSD in a printed pebble case. Pocket or lanyard.
|
|
The smallest way to carry it.</p>
|
|
</figcaption>
|
|
</figure>
|
|
<figure class="product">
|
|
<div class="shot"><img src="../assets/img/openscribe-kit.svg" alt="OpenScribe DIY kit exploded illustration" /></div>
|
|
<figcaption>
|
|
<span class="tag">best audio</span>
|
|
<h3>Dev / kit build</h3>
|
|
<p>An ESP32-S3 devkit, an INMP441 I2S microphone, a microSD and a LiPo. Easiest to probe,
|
|
and the cleanest sound.</p>
|
|
</figcaption>
|
|
</figure>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
|
|
<section>
|
|
<div class="wrap reveal">
|
|
<h2>What it does</h2>
|
|
<p class="section-sub">The expected recorder features, without the lock-in.</p>
|
|
<div class="features">
|
|
<div class="feature"><h4>One-button recording</h4><p>Capture to microSD on a wearable ESP32-S3. No length limit.</p></div>
|
|
<div class="feature"><h4>Three ways to sync</h4><p>BLE for control, WiFi to the app, and independent WiFi upload when on charge.</p></div>
|
|
<div class="feature"><h4>Transcribe + summarise</h4><p>Server-side, with the AI provider you chose. Overview, key points, action items.</p></div>
|
|
<div class="feature"><h4>Completely open API</h4><p>List, download and export recordings (audio, TXT, SRT, VTT, Markdown, JSON).</p></div>
|
|
<div class="feature"><h4>Self-hosted storage</h4><p>Upload to your own S3-compatible store, WebDAV or NAS. Your data stays yours.</p></div>
|
|
<div class="feature"><h4>Mobile app</h4><p>Flutter app for Android and iOS: provisioning, library, playback, summaries.</p></div>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
|
|
<section id="build">
|
|
<div class="wrap reveal">
|
|
<h2>Build one</h2>
|
|
<p class="section-sub">Off-the-shelf parts, a printed case, and a server you run.</p>
|
|
<div class="grid">
|
|
<div class="card"><span class="tag">hardware</span><h3>1. Get the parts</h3><p>ESP32-S3 with PSRAM, an I2S MEMS mic, a microSD card, a LiPo and a charge IC. Full BOM in the repo.</p></div>
|
|
<div class="card"><span class="tag">firmware</span><h3>2. Flash it</h3><p>PlatformIO builds two board profiles. Record to WAV, then sync over WiFi and the on-device REST API.</p></div>
|
|
<div class="card"><span class="tag">case</span><h3>3. Print the case</h3><p>Parametric OpenSCAD enclosure you can re-tune to your exact board and battery.</p></div>
|
|
<div class="card"><span class="tag">server</span><h3>4. Run the server</h3><p>FastAPI ingest + transcription + summaries. Point it at your chosen AI and storage.</p></div>
|
|
</div>
|
|
<div class="btn-row">
|
|
<a class="btn primary" href="https://git.discworld.casa/laurence/openscribe">Open the repository →</a>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
|
|
<section>
|
|
<div class="wrap reveal">
|
|
<h2>Open all the way down</h2>
|
|
<p class="section-sub">
|
|
Firmware, server and app are GPL-3.0. The hardware design is CERN-OHL-S. The case and docs
|
|
are CC-BY-SA. Anyone can build it, improve it, and keep the result open. OpenScribe is an
|
|
independent project inspired by the Plaud class of device; it is not affiliated with Plaud.
|
|
</p>
|
|
</div>
|
|
</section>
|
|
</main>
|
|
|
|
<footer class="site-footer">
|
|
<div class="wrap">
|
|
<div>© 12 Hobbies Studio. Built open. <span class="pill">bring your own AI</span></div>
|
|
<div><a href="../index.html">Back to the studio</a></div>
|
|
</div>
|
|
</footer>
|
|
|
|
<script src="../assets/app.js"></script>
|
|
</body>
|
|
</html>
|