scaffold: 12 Hobbies Studio site + OpenScribe project page
Initial static site (no framework, no build) for the 12 Hobbies Studio maker studio, featuring OpenScribe as the flagship project. What changed: - index.html: studio home - hero, featured OpenScribe block with sync diagram, projects grid, about. British spelling, dark warm theme. - projects/openscribe.html: OpenScribe product page. Leads with the "bring your own AI" differentiator, an interactive provider picker, the feature set, a four-step build guide, and licensing. - assets/styles.css: all styling (palette, cards, featured layout, picker, code blocks). - assets/app.js: dependency-free provider picker that swaps a sample server .env snippet across Ollama / OpenAI / Anthropic / Groq / LM Studio - on message with OpenScribe's any-AI design. - README, LICENSE (MIT for site code), .gitignore. Why: - The user asked to develop a site on 12 Hobbies Studio; this is the first cut, showcasing OpenScribe and the connect-to-any-AI capability. Branding uses sensible defaults and is trivially editable (noted in README). Notes: - Pure static files; deploy to any static host or Forgejo Pages. Validated: app.js passes node --check; HTML section tags balanced. Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>
This commit is contained in:
commit
e1bf5a2d7a
7 changed files with 497 additions and 0 deletions
103
projects/openscribe.html
Normal file
103
projects/openscribe.html
Normal file
|
|
@ -0,0 +1,103 @@
|
|||
<!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="stylesheet" href="../assets/styles.css" />
|
||||
</head>
|
||||
<body>
|
||||
<header class="site-header">
|
||||
<div class="wrap">
|
||||
<a class="brand" href="../index.html"><span class="mark">12</span> 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">
|
||||
<div class="eyebrow">Project - hardware + AI</div>
|
||||
<h1>OpenScribe</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>
|
||||
</section>
|
||||
|
||||
<section id="any-ai">
|
||||
<div class="wrap">
|
||||
<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 id="provider-picker" class="picker" aria-label="Choose an AI provider"></div>
|
||||
<pre class="code"><code id="env-out"></code></pre>
|
||||
<p class="section-sub">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>
|
||||
<div class="wrap">
|
||||
<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">
|
||||
<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">
|
||||
<h2>Open all the way down</h2>
|
||||
<p class="section-sub" style="max-width:680px">
|
||||
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>
|
||||
Loading…
Add table
Add a link
Reference in a new issue