Star Office UI（ピクセルオフィス・ステータスUI）

Web
Star Office UI（ピクセルオフィス・ステータスUI）

Star Office UI（ピクセルオフィス・ステータスUI）

小規模な「ピクセルオフィス」風ステータスUI。トップダウンのオフィス背景上を小さなキャラクターが状態（state）に応じて移動し、任意でスピーチバブルやタイピング風の演出を補助。モバイル向けに Cloudflare Tunnel の quick tunnel でのアクセス対応例があり、AIアシスタントやボットの可視化フロントエンドとして手早く組み込める軽量デモです（ドキュメントは主に中文）。

https://github.com/ringhyacinth/Star-Office-UI

概要

Star Office UI は、AIアシスタントなどのステータスを視覚的に表現するための小さなフロントエンド（デモ）です。トップダウン視点のピクセルオフィス背景にキャラクターが配置され、idle / syncing / error のような休憩エリア表示や、writing / researching / executing のようなデスク作業エリア表示を状態に応じて切り替えます。UI は定期的に /status エンドポイントをポーリングして状態を取得し、任意でスピーチバブルやタイピングエフェクトを表示。モバイルからの手軽なアクセス手段として Cloudflare Tunnel の quick tunnel を使う手順が示されています。ドキュメントは主に中国語ですが、短いコードベースなのでカスタマイズしやすい構成です。

GitHub

リポジトリの統計情報

  • スター数: 12
  • フォーク数: 2
  • ウォッチャー数: 12
  • コミット数: 2
  • ファイル数: 8
  • メインの言語: HTML

主な特徴

  • ピクセルアート風のトップダウンオフィス背景とキャラクターによる状態表示
  • 状態（state）に基づくエリア移動（idle/syncing/error → 休憩エリア、writing/researching/executing → デスク）
  • スピーチバブルやタイピング効果などの簡易アニメーションをサポート
  • Cloudflare Tunnel を用いたモバイル向けクイックアクセス例を提供

技術的なポイント

Star Office UI はシンプルな HTML/CSS/JavaScript で実装された軽量フロントエンドです。UI は定期的に /status エンドポイントをポーリングし、取得した state 値に応じてキャラクターの位置や表示を切り替えます。位置の切り替えやアニメーションは CSS（および軽量な JS 制御）で行われるため、ランタイム依存が少なくブラウザ互換性が高い設計です。スピーチバブルやタイピング風の演出は、テキストの一部をタイプライター風に表示するような簡単な JS ロジックや CSS トランジションで実現しており、UI の見た目を変えるだけで表現の幅を広げられます。リポジトリには backend ディレクトリが含まれており、そこにステータス応答を返す簡易エンドポイントやサンプル実装が置かれている想定で、実運用ではここを AI の状態を返す実サービスに差し替えるだけで統合できます。また、Cloudflare Tunnel の quick tunnel を使う手順が示されており、ローカル環境で動かしているアシスタントをモバイルから手早く確認するワークフローが組めます。ドキュメントやデモは主に中国語で書かれていますが、ファイル数が少なく構造が明快なため、UI 表示や state マッピングのカスタマイズは容易です。

プロジェクトの構成

主要なファイルとディレクトリ：

  • .gitignore: file
  • LICENSE: file
  • README.md: file
  • SKILL.md: file
  • backend: dir

…他 3 ファイル

（ファイル数が少ないため、実装を読むことで短時間で理解・改変できます。backend ディレクトリは /status を返すエンドポイントなどのサンプルを含む想定です。）

まとめ

軽量で視覚的に分かりやすく、AIアシスタントの状態可視化に手早く使えるデモUI。

リポジトリ情報：

READMEの抜粋：

Star Office UI

A tiny “pixel office” status UI for your AI assistant.

  • Pixel office background (top-down)
  • A little character that moves between areas based on state
  • Optional speech bubble / typing effect
  • Mobile-friendly access via Cloudflare Tunnel quick tunnel

Language: the demo code/docs are currently mainly in Chinese (中文). PRs welcome.

What it looks like

  • idle / syncing / error → breakroom area
  • writing / researching / executing → desk area

The UI polls /status …