Star Office UI : un bureau pixel pour vos agents IA avec personnages et zones d’activité

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

📌 Star Office UI est une interface utilisateur de type « bureau pixel » pour assistant IA qui transforme les états de travail invisibles en un petit espace visuel avec personnages, notes quotidiennes et agents invités. Le projet propose un fond de bureau vue de dessus où un petit personnage se déplace entre différentes zones selon l’état de l’assistant, avec bulle de dialogue et effet de frappe en option, le tout accessible via mobile grâce à un tunnel Cloudflare. La stack technique est minimaliste avec un backend Flask en Python servant la page et le statut, un frontend Phaser gérant le rendu graphique et les animations, et un fichier state.json stockant l’état runtime mis à jour via un helper Python.

Le principe repose sur un polling de l’endpoint /status par le frontend Phaser qui adapte la position du personnage selon l’état retourné : idle, syncing ou error renvoient vers la zone breakroom, tandis que writing, researching ou executing envoient le personnage vers le bureau de travail. Cette métaphore visuelle permet de visualiser instantanément ce que fait l’assistant sans lire de logs ni d’interface technique. La structure du projet est volontairement simple avec un dossier backend pour l’API Flask, un dossier frontend contenant le code Phaser et l’image de fond office_bg.png en 800×600, un fichier state.json pour l’état runtime, et un script set_state.py pour simplifier les mises à jour d’état depuis la ligne de commande.

Points clés:

• 🏠 Bureau pixel vue de dessus avec zones thématiques (breakroom, desk)
• 🎮 Personnage animé se déplaçant selon l’état de l’assistant
• 💬 Bulle de dialogue optionnelle avec effet de frappe
• 📱 Accès mobile via Cloudflare Tunnel pour exposition publique
• 🔧 Stack minimaliste : Flask + Phaser + fichier JSON state
• ⚡ Mise à jour d’état en une commande via set_state.py
• 🎨 Fond personnalisable en 800×600 PNG
• 🌐 Exposition publique sécurisée par tunnel HTTPS

Le démarrage local se fait en quelques étapes après installation de Flask : placer une image de fond 800×600 dans frontend/office_bg.png, lancer le backend avec python app.py depuis le dossier backend, puis ouvrir http://127.0.0.1:18791 dans le navigateur. Les mises à jour d’état s’effectuent depuis la racine du projet avec python3 star-office-ui/set_state.py writing « Working on a task… » ou python3 star-office-ui/set_state.py idle « Standing by », ce qui modifie state.json et est immédiatement reflété dans l’interface. Pour un accès public, l’outil recommande cloudflared tunnel –url http://127.0.0.1:18791 qui fournit une URL HTTPS temporaire de type xxx.trycloudflare.com, pratique pour partager l’état d’un assistant sans exposition permanente.

Côté sécurité, les créateurs précisent que toute personne possédant l’URL du tunnel peut lire /status, donc il convient de ne pas mettre d’informations sensibles dans le champ detail. Si nécessaire, un système de token peut être ajouté pour protéger l’endpoint, ou alors se contenter de retourner des états grossiers sans détails. Le projet est sous licence MIT pour le code, mais les assets graphiques sont réservés à un usage non-commercial pour apprentissage, ce qui signifie que le bureau pixel et les personnages sont utilisables pour des projets personnels ou éducatifs mais pas pour des produits commerciaux sans autorisation.

Techniquement, le backend Flask sert à la fois la page index.html et l’endpoint /status qui renvoie le contenu de state.json au format JSON avec les champs state et detail. Le frontend Phaser charge l’image de fond, initialise le personnage à une position par défaut, puis interroge /status à intervalles réguliers pour mettre à jour la position et afficher la bulle de dialogue si un message est présent. L’effet de frappe anime le texte caractère par caractère pour plus de dynamisme, donnant l’impression que le personnage « écrit » ou « parle » en temps réel. La compatibilité mobile est assurée par Phaser qui gère le responsive et les inputs tactiles, permettant de consulter l’état depuis un smartphone via le tunnel Cloudflare.

L’originalité de Star Office UI réside dans sa capacité à humaniser des processus d’automatisation par ailleurs invisibles. Au lieu de logs texte ou d’indicateurs techniques, on obtient une représentation visuelle immédiate : l’assistant est au repos, au travail, en erreur, en recherche. Cette métaphore spatiale est particulièrement adaptée aux agents IA dont l’activité peut être longue ou asynchrone, offrant une fenêtre apaisante sur des processus qui otherwise restent abstraits. Le format pixel art renforce cette dimension « bureau toy » avec un côté rétro et charmant qui contraste avec la modernité des agents IA qu’il sert à visualiser.

Concrètement, Star Office UI est un projet qui s’intègre facilement à n’importe quel pipeline d’agents IA existants. Il suffit de modifier le script qui génère les états pour qu’il appelle set_state.py ou écrive directement dans state.json, et l’interface se met à jour automatiquement. La séparation entre backend et frontend permet aussi d’héberger l’interface séparément de la logique de l’assistant, ou d’adapter le format d’échange (fichier, API, message queue) selon l’architecture. Pour les équipes travaillant sur des agents autonomes, multi-agents ou assistants personnels, cette UI offre un moyen simple et élégant de donner une « présence » visuelle à ces entités numériques.