画像からテキストを抽出するのに調べてみると、このページでセルフホストに役立ちそうな内容を見つけました。ブラウザで完結するため画像を送信しない点が安心して使えそうです。デモサイトもあるので気軽に確認出来ますね。
実際に構築してみると、手書き文字の認識はイマイチですが、印刷物だとそこそこの精度で使えそうです。
傾いた画像もその場で修正出来るのが便利です。
使用するには、以下をコピペするだけです。LXDコンテナで運用するのが良さそうですね。
コピペでインストール完了
#!/bin/bash
# ============================================================
# ndlocr-lite-wasm セルフホスト インストールスクリプト
# 対象OS : Ubuntu 25.10 (Questing Quetzal)
# 使い方 : sudo bash install-ndlocr-lite-wasm.sh
# ※ モデル選択・画像アップロード機能を含む完全版ビルド
# ============================================================
set -euo pipefail
# ---------- 色付きログ ----------
RED='\033[0;31m'; GREEN='\033[0;32m'; YELLOW='\033[1;33m'; CYAN='\033[0;36m'; NC='\033[0m'
info() { echo -e "${CYAN}[INFO]${NC} $*"; }
success() { echo -e "${GREEN}[OK]${NC} $*"; }
warn() { echo -e "${YELLOW}[WARN]${NC} $*"; }
error() { echo -e "${RED}[ERROR]${NC} $*"; exit 1; }
# ---------- 設定 ----------
REPO_URL="https://github.com/tamoco-mocomoco/ndlocr-lite-wasm"
BUILD_DIR="/opt/ndlocr-lite-wasm-src"
INSTALL_DIR="/var/www/ndlocr-lite-wasm"
NGINX_CONF="/etc/nginx/sites-available/ndlocr-lite-wasm"
NGINX_LINK="/etc/nginx/sites-enabled/ndlocr-lite-wasm"
PORT=${PORT:-8080} # 環境変数で上書き可能: sudo PORT=80 bash install.sh
# ---------- root 確認 ----------
[[ "$EUID" -ne 0 ]] && error "このスクリプトは sudo または root で実行してください。"
info "==== ndlocr-lite-wasm セルフホスト セットアップ開始 ===="
# ---------- 1. パッケージ更新 & 必要ツール ----------
info "パッケージリストを更新中..."
apt-get update -qq
info "必要パッケージをインストール中 (nginx, git, curl, nodejs, npm)..."
apt-get install -y -qq nginx git curl nodejs npm
# Node.js バージョン確認 (v18以上必須、v22推奨)
NODE_VER=$(node -e "process.stdout.write(process.version.replace('v','').split('.')[0])")
if [[ "$NODE_VER" -lt 18 ]]; then
info "Node.js が古いため v22 LTS をインストール中 (現在: v${NODE_VER})..."
curl -fsSL https://deb.nodesource.com/setup_22.x | bash -
apt-get install -y -qq nodejs
fi
success "Node.js $(node -v) / npm $(npm -v) を確認しました。"
# ---------- 2. リポジトリをクローン / 更新 ----------
if [[ -d "$BUILD_DIR/.git" ]]; then
info "既存のリポジトリを更新中..."
git -C "$BUILD_DIR" pull --ff-only
else
info "リポジトリをクローン中: $REPO_URL"
rm -rf "$BUILD_DIR"
git clone --depth=1 "$REPO_URL" "$BUILD_DIR"
fi
success "ソースを $BUILD_DIR に取得しました。"
# ---------- 3. vite.config.ts の base パスを修正 ----------
# GitHub Pages 用に base: "/ndlocr-lite-wasm/" になっているが
# セルフホスト時はルート "/" にしないとモデルURLが
# /ndlocr-lite-wasm/models/... になりモデル選択が機能しない
info "vite.config.ts の base をセルフホスト用 (/) に修正中..."
sed -i 's|base: "/ndlocr-lite-wasm/"|base: "/"|' "$BUILD_DIR/vite.config.ts"
success "vite.config.ts を修正しました。"
# ---------- 4. npm install & ビルド ----------
info "依存パッケージをインストール中..."
cd "$BUILD_DIR"
npm install --silent
info "本番ビルドを実行中 (tsc + vite build)..."
npm run build
success "ビルド完了。dist/ が生成されました。"
# ---------- 5. ビルド成果物を配信ディレクトリへコピー ----------
info "ビルド成果物を $INSTALL_DIR にコピー中..."
rm -rf "$INSTALL_DIR"
cp -r "$BUILD_DIR/dist" "$INSTALL_DIR"
success "$INSTALL_DIR に配置しました。"
# ---------- 6. Nginx 設定を生成 ----------
info "Nginx 設定を作成中 (ポート: $PORT)..."
cat > "$NGINX_CONF" << NGINX_EOF
server {
listen ${PORT};
listen [::]:${PORT};
server_name _;
root ${INSTALL_DIR};
index index.html;
# .wasm に正しい MIME タイプを付与
types {
application/wasm wasm;
}
include /etc/nginx/mime.types;
# SharedArrayBuffer / WASM スレッドに必要な COOP/COEP ヘッダ
add_header Cross-Origin-Opener-Policy "same-origin" always;
add_header Cross-Origin-Embedder-Policy "require-corp" always;
add_header Cross-Origin-Resource-Policy "cross-origin" always;
# 静的アセット長期キャッシュ (.onnx モデルも含む)
location ~* \.(wasm|js|css|png|jpg|jpeg|gif|svg|ico|woff2?|onnx)\$ {
expires 30d;
add_header Cache-Control "public, immutable";
add_header Cross-Origin-Opener-Policy "same-origin" always;
add_header Cross-Origin-Embedder-Policy "require-corp" always;
add_header Cross-Origin-Resource-Policy "cross-origin" always;
}
# SPA フォールバック
location / {
try_files \$uri \$uri/ /index.html;
}
access_log /var/log/nginx/ndlocr-lite-wasm_access.log;
error_log /var/log/nginx/ndlocr-lite-wasm_error.log;
}
NGINX_EOF
# シンボリックリンク作成
ln -sf "$NGINX_CONF" "$NGINX_LINK"
# デフォルトサイトを無効化 (ポート競合回避)
if [[ -L /etc/nginx/sites-enabled/default ]]; then
warn "デフォルトサイトを無効化します。"
rm -f /etc/nginx/sites-enabled/default
fi
# 設定テスト
info "Nginx 設定をテスト中..."
nginx -t || error "Nginx 設定にエラーがあります。$NGINX_CONF を確認してください。"
# ---------- 7. Nginx 起動 / リロード ----------
info "Nginx を起動/リロード中..."
systemctl enable --now nginx
systemctl reload nginx
success "Nginx が起動しました。"
# ---------- 8. UFW ファイアウォール ----------
if command -v ufw &>/dev/null && ufw status 2>/dev/null | grep -q "Status: active"; then
info "UFW でポート $PORT を開放中..."
ufw allow "$PORT"/tcp
success "UFW ルールを追加しました。"
fi
# ---------- 9. 完了メッセージ ----------
IP=$(hostname -I | awk '{print $1}')
echo ""
echo -e "${GREEN}============================================================${NC}"
echo -e "${GREEN} インストール完了！${NC}"
echo -e "${GREEN}============================================================${NC}"
echo -e ""
echo -e " ブラウザでアクセス:"
echo -e " ${CYAN}http://localhost:${PORT}${NC}"
echo -e " ${CYAN}http://${IP}:${PORT}${NC} (LAN からアクセスする場合)"
echo -e ""
echo -e " 利用可能な機能:"
echo -e " ✅ モデル選択 標準 (77MB FP32) / 軽量 (50MB INT8)"
echo -e " ✅ 画像ドラッグ＆ドロップ / クリック選択"
echo -e " ✅ 4点透視補正プレビュー"
echo -e " ✅ OCR結果テキスト・構造表示・コピー"
echo -e ""
echo -e " ファイルの場所:"
echo -e " ビルドソース : ${BUILD_DIR}"
echo -e " 配信ディレクトリ : ${INSTALL_DIR}"
echo -e " Nginx 設定 : ${NGINX_CONF}"
echo -e ""
echo -e " アップデート方法:"
echo -e " ${YELLOW}sudo bash $(realpath "$0")${NC}"
echo -e "${GREEN}============================================================${NC}"上記の内容をコピペ、もしくはinstall-ndlocr-lite-wasm.sh などに保存して実行すればインストールされます。
sudo bash install-ndlocr-lite-wasm.shこのスクリプトは以下を自動で行っています。
| ステップ | 内容 |
|---|---|
| 1 | nginx, git, nodejs, npm をインストール（Node.js が古ければ v22 LTS も自動導入） |
| 2 | リポジトリをクローン（再実行時は git pull） |
| 3 | vite.config.ts の base を /ndlocr-lite-wasm/ → / に修正 |
| 4 | npm install && npm run build でビルド |
| 5 | dist/ を /var/www/ndlocr-lite-wasm にコピー |
| 6 | Nginx に COOP/COEP ヘッダ・WASM MIME タイプを設定して起動 |
ポートを変えたい場合。
sudo PORT=80 bash install-ndlocr-lite-wasm.sh