ズレナビ

本プロジェクトは 【技育CAMP2026】ハッカソン Vol.2 で作成されたプロダクトです。

概要

ズレナビは、ユーザーの作業状況を解析し、「集中しているかどうか」を判定・可視化・通知するデスクトップアプリケーションです。

デスクトップ環境上のアクティブなウィンドウ情報やスクリーンショット画像をもとに、視覚言語モデル (Vision-Language Model; VLM) を用いて状態を推定します。 デスクトップアプリケーション化には Electron を使用しており、リアルタイムにユーザーの作業状態を把握し、集中支援を行います。

主な機能

Home機能

• アクティブなウィンドウのアプリ・タブ情報の取得
• スクリーンショット画像の取得
• 集中状態の2値判定（集中 / 非集中）

Chat機能

• 集中をサポート・リマインドするチャット機能

技術スタック

• フロントエンド: React, TypeScript, Vite, Tailwind CSS, Material UI, Jotai
• バックエンド: Python, FastAPI, uv
• デスクトップ: Electron
• 機械学習: ローカル LLM（models/ 配下に配置）

セットアップ

以下のツールがインストールされていることを確認してください。

• Python (3.12以上推奨)
• uv (Python パッケージマネージャー)
• Bun (JavaScript ランタイム & パッケージマネージャー)

自動セットアップ（推奨）

スクリプトを実行するだけで、必要なパッケージのインストールとモデルのダウンロードが完了します。

./scripts/setup.sh

※モデルは backend/models/ に保存されます。初期モデルサイズは約 2.7GB です。

手動セットアップ

各ディレクトリで個別にセットアップを行う場合は以下のコマンドを実行してください。

# Backend setup
cd backend
uv sync

# Model download
./scripts/model_download.sh

# Frontend setup
cd ../frontend
bun install

# Electron setup
cd ../electron
bun install

起動方法

アプリケーションの開発環境を立ち上げるには、スクリプトを使った自動起動（推奨）と、各環境を個別に立ち上げる手動起動の2つの方法があります。

自動起動（推奨）

用意されている起動スクリプトを使用すると、バックエンドとフロントエンドの開発サーバーを同時に立ち上げることができます。

# 開発サーバー（Backend & Frontend & Electron）の起動
./scripts/dev.sh

手動起動

各プロセスを別々のターミナルで管理・確認したい場合は、以下の手順で起動してください。（ターミナルを3つ開く必要があります）

1. バックエンドの起動

cd backend
uv run uvicorn src.api.main:app --reload

※ APIサーバーが http://localhost:8000 で起動します。

2. フロントエンドの起動

cd frontend
bun run dev

※ 開発サーバーが http://localhost:5173 で起動します。

3. Electron（デスクトップアプリ）の起動

cd electron
bun run dev

※ デスクトップアプリケーションのウィンドウが立ち上がります。