高校3年生向けの学習管理アプリです。GitHub Pagesで公開したWebサイトを、Supabase DB / Storageで同期し、画像・PDFのAI処理はPC上のローカルworkerが実行します。
Webサイトからlocalhost、Ollama、PaddleOCRへ直接アクセスしません。
GitHub Pages Web
-> Supabase DB / Supabase Storage
-> local PC worker
-> Supabase DB
-> GitHub Pages Web
主なファイル:
index.html: GitHub Pagesで開く入口styles.css: 画面スタイルdata.js: 初期データapp.js: 表示、操作、Supabase同期、AI job作成supabase-config.js: Web側のSupabase URL / anon key設定supabase/schema.sql: DBテーブル、RLS、Storage bucket/policyworker/run_worker.py: Supabaseのpending jobを処理するworkerworker/paddle_ocr_worker.py: PaddleOCRworker/ollama_worker.py: Ollama連携worker/requirements.txt: worker依存関係
- GitHubで
study-managerリポジトリを作成します。 - このプロジェクトをpushします。
- GitHubの
Settingsを開きます。 Pagesを開きます。SourceをDeploy from a branchにします。Branchをmain、folderを/rootにします。Saveを押します。- 数分後に
https://onion3108.github.io/study-manager/のようなURLへアクセスします。
CSS/JSは相対パスで読み込むため、リポジトリ名付きURLでも動きます。
git add index.html styles.css app.js data.js supabase-config.js README.md .gitignore env.example worker supabase
git commit -m "Add Supabase sync and AI worker pipeline"
git branch -M main
git remote add origin https://github.com/onion3108/study-manager.git
git push -u origin mainすでにremoteがある場合はgit remote add origin ...は不要です。
- Supabaseで新しいProjectを作成します。
SQL Editorでsupabase/schema.sqlを実行します。Authentication > URL ConfigurationでSite URLにGitHub PagesのURLを設定します。Authentication > Providers > Emailを有効にします。Project Settings > APIからURLとanon keyを確認します。supabase-config.jsに設定します。
window.STUDY_MANAGER_SUPABASE = {
url: "https://YOUR_PROJECT.supabase.co",
anonKey: "YOUR_SUPABASE_ANON_KEY",
storageBucket: "study-files",
};anon keyはWebに置いてよい公開用キーです。service role keyは絶対にWebへ置かないでください。
Supabase側で以下を設定してください。
Authentication
-> Providers
-> Email を有効化
Authentication
-> URL Configuration
-> Site URL
-> https://onion3108.github.io/study-manager/
Web側にはPublishable keyまたはLegacy anon keyだけを設定します。service role keyやsecret keyはWeb側に置かず、PC worker用の.envだけに保存してください。
ログイン手順:
- GitHub PagesのStudy Managerを開きます。
設定またはAI取り込みセンターを開きます。Supabaseログインカードにメールアドレスを入力します。ログインメール送信を押します。- Supabaseから届いたメールリンクを開きます。
- Study Managerに戻ると、ログイン中のメールアドレスと同期状態が表示されます。
未ログイン時はTodoや設定はlocalStorageへ一時保存できますが、PC/スマホ同期、画像/PDFアップロード、ai_jobs作成、AI結果取得にはログインが必要です。
正本データはSupabaseに保存します。localStorageは一時キャッシュです。
- Todo
- カレンダー予定
- 今日の予定
- 時間割
- 重要イベント
- AI処理タスク
- AI生成結果
- アップロード画像/PDF
- OCR結果とOCRレイアウト構造
- 生成問題、解答、要約、重要語句
- 理解度データ
- 円グラフ用の学習状況データ
- 教科ごとの進捗
- 学習ログ
- 設定、通知設定、Ollamaモデル名
- 献立などアプリ内の保存データ
ホームには「今日の宿題」「未回収の宿題」「一週間の予定」「今週の宿題達成度」が表示されます。Todoは普通のやること、宿題は学校の課題・提出物・毎日の学習計画として別に管理します。
宿題ページでは、教科、タイトル、詳細メモ、期限、取り組む予定日を登録できます。登録した宿題は一週間カレンダーに表示され、チェックすると完了になります。期限を過ぎた未完了宿題は未回収としてホームと達成度カードに表示されます。遅れて完了した宿題はcompletedLateとして記録されます。
宿題データは既存のapp_settings.app_state同期に含まれるため、Supabaseログイン中はPCとスマホで同じ状態を共有できます。supabase/schema.sqlには将来の正規テーブル運用向けにhomeworks、weekly_plans、study_metricsも追加しています。
24時間画面の編集モーダルでは、テンプレート、+/- 10分、15/30/45/60分のクイック入力、理解度スライダー、プレビュー円グラフを使えます。保存するとlocalStorageへ保存され、Supabaseログイン中はapp_settings.app_stateへ同期されます。
- GitHub PagesのWebサイトでSupabaseへログインします。
- 授業カードを開きます。
- 板書写真、ノート写真、プリント画像、PDFをアップロードします。
- ファイルはSupabase Storageの
study-filesbucketへ保存されます。 ai_jobsにstatus='pending'の行が作成されます。- AI取り込みセンターでpending/processing/completed/failedとデバッグ情報を確認できます。
GitHub Pages側はAIを実行せず、依頼をSupabaseに書き込むだけです。
PC側で実行します。
python -m venv .venv
.\.venv\Scripts\Activate.ps1
pip install -r worker/requirements.txt
copy env.example .env.envを編集します。
OLLAMA_URL=http://localhost:11434/api/generate
OLLAMA_MODEL=elyza:jp8b
OCR_USE_GPU=auto
OCR_LANG=japan
SUPABASE_URL=https://YOUR_PROJECT.supabase.co
SUPABASE_ANON_KEY=YOUR_SUPABASE_ANON_KEY
SUPABASE_SERVICE_ROLE_KEY=YOUR_SUPABASE_SERVICE_ROLE_KEY
SUPABASE_STORAGE_BUCKET=study-filesservice role keyはローカルworkerだけで使います。.envは.gitignoreで除外されています。
OCRはOCR_USE_GPUで切り替えできます。falseならCPU固定、trueならGPUを試行、autoならCUDA/Paddle GPUの可否を見て自動判定します。GPU初期化に失敗してもworkerはCPU OCRへフォールバックし、起動ログとai_jobs.error_messageで確認できます。
1回だけ処理:
python worker/run_worker.py --once常駐処理:
python worker/run_worker.py --interval 20 --limit 3workerの流れ:
ai_jobsからpendingを取得processingへ更新- Supabase Storageから画像/PDFをダウンロード
- PaddleOCRでレイアウト付きOCR
ai_jobs.ocr_textとai_jobs.ocr_layoutを更新- OCR済みテキストだけをOllamaへ渡す
- 要約、重要語句、問題、解答、理解度データを作成
ai_resultsへ保存ai_jobs.statusをcompletedへ更新- 失敗時は
failedとerror_messageを保存
ollama list
Invoke-RestMethod -Uri http://localhost:11434/api/generate -Method Post -ContentType "application/json" -Body '{"model":"elyza:jp8b","prompt":"ping","stream":false}'新しいモデルはworkerが勝手に入れません。.envのOLLAMA_MODELには、すでにollama listに表示されるモデル名を指定してください。
pip install -r worker/requirements.txt初回実行時はPaddleOCRのモデル取得に時間がかかる場合があります。PDF処理にはpypdfium2を使います。
workerが完了すると、WebサイトのAI取り込みセンターと授業詳細パネルに以下が表示されます。
- AI処理状態
- error_message
- OCRプレビュー
- 要約
- 重要語句
- 生成問題
- 解答
- 使用モデル
- worker処理時刻
手動で反映したい場合はAI取り込みセンターのSupabase再読み込みを押してください。Realtimeが有効な場合は自動反映されます。
SupabaseにログインしてからAI依頼を作成してください
: Webでログインしていません。AI取り込みセンターからログインメールを送ってください。
supabase-config.jsにURLとanon keyを設定してください
: supabase-config.jsが空です。SupabaseのURLとanon keyを設定してpushしてください。
permission deniedまたはStorage upload error
: supabase/schema.sqlを実行し、Storage bucketとpolicyが作成されているか確認してください。
SUPABASE_SERVICE_ROLE_KEY is not set
: PC側の.envにservice role keyがありません。Web側には絶対に置かないでください。
Ollama API error
: Ollamaが起動しているか、.envのOLLAMA_MODELがollama listにあるモデルか確認してください。
PaddleOCR import error
: 仮想環境を有効化し、pip install -r worker/requirements.txtを再実行してください。
- PCでTodo追加し、スマホで同じアカウントにログインして表示を確認します。
- スマホでTodo追加し、PCで表示を確認します。
- PCでカレンダー予定や設定を変更し、スマホに反映されるか確認します。
- localStorageを消して再読み込みし、Supabaseから復元されるか確認します。
- Webから画像/PDFをアップロードします。
- Supabase Storageにファイルが保存されたか確認します。
ai_jobsにpendingが作成されたか確認します。python worker/run_worker.py --onceを実行します。pending -> processing -> completedへ変わるか確認します。ai_jobs.ocr_textとai_jobs.ocr_layoutが保存されたか確認します。ai_resultsに要約、問題、解答、重要語句が保存されたか確認します。- WebサイトにOCR結果、問題、要約、解答が表示されるか確認します。
- エラー時は
failedとerror_messageが表示されるか確認します。