Technical Details
⚙️ Components ⚙️
this website is built with the static site generator jekyll. whisper-webui is utilized to analyze the audio tracks and have it output subtitles (what is spoken) that include speaker diarization (determining who says what), which are then transformed into json files. each json file containing a track’s speakers and subtitles data must be manually reviewed and corrected as needed. as changes are made, jekyll build recreates the site’s pages and combines all JSON data into one single JSON data file (data.combined.json).
because the website is static, there is no server-end processing that occurs when searching - it runs locally within the browser.
↪️ Converting Tracks to JSON ↪️
i use whisper-webui (deployed via pinokio) to create subtitle files (.srt) with speech-to-text and speaker diarization, then use this python tool to convert them to json.
💽 JSON for Albums and Tracks 💽
the main JSON data file resides at /assets/data.json
{
"Albums": [
{ "Album": "Longmont Potion Castle",
"Album_Slug": "longmont-potion-castle",
"Album_Picture": "LPC_1.jpg",
"Year": 1988,
"Tracks": [
{
"Track_Title": "Longmont Theme 1",
"Track_Number": 1,
"Track_JSONPath": "longmont-theme-1.json",
"Track_Slug": "longmont-theme-1",
"Aliases": ["Wallace Thrasher"],
"Establishments": ["UPS"],
"Establishment_Notes": {"UPS": "Optional context shown in a pop-up on the track page."},
"Establishment_Types": {"UPS": "real-world"},
"Speakers_Adjusted": "false",
"Subtitles_Adjusted": "false",
"USB_Filename": "longmont-theme-1.mp3"
}
]
}
]
}
it is possible that some keys are not present in all tracks, but the necessary ones of Track_Title, Track_Number, Track_JSONPath, and Track_Slug are listed for each track.
💽 JSON for Track Subtitles 💽
the JSON data for each track resides within a folder named as the respective album title’s slug within the /assets/json folder
[
{
"Index": 1,
"Start Time": "00:00:02,140",
"End Time": "00:00:02,920",
"Speaker": "Woman 1",
"Text": "Betty Boop Diner."
}
]
🚘 Under The Hood 🚘
when the search pages are accessed, the single combined JSON data (/assets/json/data.combined.json) is retrieved from the server, then lunr indexes the data so that it becomes searchable. lunr currently indexes for multiple fields: speakers, subtitles, aliases, and establishments.
the same file is exposed through a read-only browser API. the API downloads and caches data.combined.json once; all of its methods query that in-memory dataset and do not request data.json, individual track files, or a backend. it is available on every page as window.WallaceThrasherAPI.
the keys of USB_Directory and USB_Filename refer to the respective directory and filename of the mp3 that resides on a “LPC Ultimate Session Bundle” usb drive that are occasionally available for sale via lpc’s website. these two pieces of data are used to play audio, if the files from the usb collection are uploaded.
🛠️ Building 🛠️
to install the project’s dependencies, ensure Ruby is installed, then install its necessary gems by running: bundle install; bundle update;
to create the default indexable production build, run this command from the jekyll directory: JEKYLL_ENV=production bundle exec jekyll build
when the LPC USB collection is available locally, the build can also verify that every catalog album directory and track filename matches the USB files. set LPC_USB_ROOT to the USB collection’s root before building, for example: LPC_USB_ROOT="/path/to/LPC USB" JEKYLL_ENV=production bundle exec jekyll build.
to build the site with the shared browser-rendered track viewer instead of fully rendered track HTML, run: JEKYLL_ENV=production INDEXABLE=false bundle exec jekyll build
to build and start a local web server, run this command from the jekyll directory: JEKYLL_ENV=production bundle exec jekyll serve
📤 Deployment 📤
commits to the main branch are deployed directly by netlify. netlify uses netlify.toml to build the jekyll site with JEKYLL_ENV=production.
🏷️ Badges 🏷️
here are various badges related to this project’s code and its deployments
– production deployment status to Netlify
– when last committed to GitHub
– deployed source code size
– source code repository size
– the latest version