![[Astro] #146 ONNX Runtime Web + RMBG-1.4 による Background Remover 実装記録と断念の理由](https://assets.lain-lab.com/images/uploads/astro-146-background-remover.webp?0)
React + ONNX Runtime Web (WASM) で RMBG-1.4 モデルを使った背景除去ツールの実装を試みた記録。@imgly/background-removal の npm 依存関係競合と CDN パス不整合、ESM import 制約による詰まりを経て、AiUpscaler と同一アーキテクチャ（ONNX Runtime グローバル + React コンポーネント）に切り替え。前処理の letterbox パディング・ImageNet mean/std 正規化・Canvas drawImage バイリニア補間まで実装したが、オンラインサービスと比較した精度差が埋まらず断念。
![[Astro] #144 ONNX Runtime Web と Real-ESRGAN で構築するブラウザ完結型 AI 画像アップスケーラー — 実装記録](https://assets.lain-lab.com/images/uploads/astro-144-onnx-upscaler.webp?0)
WebAssembly にコンパイルされた ONNX Runtime と超解像ニューラルネットワークモデル (Real-ESRGAN) を組み合わせ、ブラウザ上で完全にローカル動作する AI 画像アップスケーラーの構築手法を解説。RGB テンソル前処理、WASM マルチスレッド制御、高精度キャンバス描画、およびコンソールログ統合型の 3 カラム UI 設計をまとめています。
![[Astro] #143 FluidSynth WASM と Web Audio API で構築する SoundFont / MIDI プレイヤー — Piano Roll ビジュアライザー実装記録](https://assets.lain-lab.com/images/uploads/astro-143-fluidsynth-wasm-pianoroll-player.webp?0)
WebAssembly にコンパイルされた FluidSynth と Web Audio API を組み合わせ、ブラウザ単体で MIDI ファイルと SoundFont を再生する Web アプリケーションの構築手法を解説。自作 SMF パーサー、AudioContext と描画フレームを同期させる Tick 補間処理、大容量 SF2 の IndexedDB キャッシュ管理、およびデバッグ時のハマりポイントをまとめています。
![[Astro] #145 pixi-live2d-display と PixiJS で構築するブラウザ完結型 Live2D Model Viewer — 実装記録](https://assets.lain-lab.com/images/uploads/astro-145-live2d-model-viewer.webp?0)
Live2D Cubism 2.1 / 3 / 4 対応のモデルビューアをブラウザ上に構築する手法を解説。pixi-live2d-display のモデルロードパイプライン、JSZip による ZIP 内ネスト構造の自動解決、focusController / eyeBlink / breath サブシステムのダミーオブジェクト差し替えによるトグル実装、Cubism 4 の _model.parameters 経由のパラメータスライダー生成、PIXI.Sprite による背景画像合成までをまとめています。
![[Astro] #142 Web Audio API で構築するブラウザ完結型レトロシンセサイザー & FXエンジン — SynthRackGenerator v1.0 の実装記録](https://assets.lain-lab.com/images/uploads/astro-142-synth-rack-generator-webaudio-api.webp?1)
ブラウザ単体で動作するレトロサウンドジェネレーター SynthRackGenerator v1.0 の技術構成を解説。AudioNode による合成パイプライン、OfflineAudioContext を用いた即時 WAV レンダリング、Canvas2D オシロスコープ / FFT アナライザー、8ステップシーケンサー、および LocalStorage / URL Hash を利用したパッチデータ共有機構の実装記録。
![[Astro] #141 Canvas2D × fillRect ドット絵で構築するブラウザ完結型レトロアーケード — PONG・平安京エイリアン・スペースインベーダーの実装記録](https://assets.lain-lab.com/images/uploads/astro-141-canvas2d-retro-arcade-games.webp?1)
PROTOCOL.LAIN 内のフローティングウィンドウ「LAIN RETRO ARCADE」に、PONG・平安京エイリアン・スペースインベーダーの 3 タイトルを Canvas2D で実装。8×8 ドットスプライトを数値配列で定義し fillRect で 1 ドットずつ描画する手法、グリッドベースの穴掘りメカニクス、BFS を排した直線+視線AI、ビットマップ破壊可能シールドなど、各ゲーム固有の技術課題と解決策を記録。
![[Astro] #140 IndexedDB × Dexie.js で Web ターミナルに壁紙キャッシュを実装する — Blob 永続化と iframe 透過調整ログ](https://assets.lain-lab.com/images/uploads/astro-140-indexeddb-terminal-wallpaper-cache.webp?1)
Astro / React で構築した Web ターミナルウィンドウに壁紙設定機能を実装。Dexie.js の db.textures テーブルによる Blob データ保持、URL.createObjectURL による動的展開、iframe/xterm.js 透過時の描画トラブル解決とローカル検証モックの構築について解説。
![[Linux] Debian 12 + Cloudflare Tunnel + ttyd で構築するブラウザ Web ターミナル完全ガイド](https://assets.lain-lab.com/images/uploads/debian-cloudflare-tunnel-ttyd-web-terminal.webp)
Debian 12 上で ttyd と Cloudflare Tunnel / Access を導入し、SSL/TLS 暗号化と Zero Trust 認証を備えた Web ターミナルを構築する全手順とトラブルシューティング。
![[Astro] #139 Canvas × Web Worker で超高速ブラウザ PCAP アナライザを作る — メモリ効率化とリアルタイムフィルタリング実装記録](https://assets.lain-lab.com/images/uploads/astro-139-pcap-analyzer-canvas-worker.webp?1)
ブラウザ上で動作する Wireshark 風パケットアナライザの開発ログ。Web Worker によるバイナリ解析と Float64Array バッファ転送、Canvas 2D を用いた数万パケットの仮想スクロール描画、インデックスマッピングによるリアルタイムフィルタリングのハマりポイントと実装を徹底解説。
![[Astro] #138 WASM × Web Audio API で FM音源（OPL3/OPN2）を鳴らそうとして地雷を踏み抜いた話 — 音が出ない4大原因と実装全記録](https://assets.lain-lab.com/images/uploads/astro-138-wasm-webaudio-fm-synth.webp?1)
Emscripten / WebAssembly と Web Audio API (AudioWorklet) を組み合わせた Sound Blaster (OPL3) / Mega Drive (OPN2) FM音源プレイヤー開発の失敗・ハマりポイントログ。内蔵バンク、スコープ制限、ポインタオフセット、サンプルレート問題など音が出ない4大原因を徹底解剖。
![[Astro] #137 Bz-Style Binary Editor — ブラウザ完結型16進数バイナリエディタ & ワイルドカード検索の実装](https://assets.lain-lab.com/images/uploads/astro-137-bz-binary-editor.webp)
ブラウザ完結型バイナリエディタ「Bz-Style Binary Editor」の技術解説。HTML5 Canvasを用いた仮想スクロール描画、HEX/TEXTワイルドカード検索エンジン、Data Inspector、Bitmap View、ショートカット操作・ヘルプモーダルの実装詳細。
![[Astro] #136 File Inspector — ブラウザ完結型バイナリ解析・メタデータ抽出・拡張子偽装検知ツール](https://assets.lain-lab.com/images/uploads/astro-136-file-inspector-checker.webp)
ブラウザ完結型ファイル解析・検証ツール「File Inspector」の技術解説。マジックバイト判定、拡張子不一致警告、Web Crypto API/SparkMD5ハッシュ計算、ExifReaderメタデータ解析、PNG/JPEGのEOF外隠しデータ検出、ヘキサダンプ表示の実装詳細。