DIRISI 2025 Hackathon – Frontend Streamlit

Application web Streamlit pour l'anticipation des pannes réseau par l'IA Interface simplifiée pour l'aide à la décision et la simulation

📋 Vue d'ensemble

Interface web Streamlit pour la gestion et la prédiction de pannes réseau.

⚠️ Note: Le frontend a été migré de React vers Streamlit pour une meilleure compatibilité avec l'environnement Jupyter Lab OVHcloud (pas de Node.js disponible).

Fonctionnalités principales:

📊 Visualiser la topologie réseau en temps réel
🔮 Prédire les risques de panne (IA/ML)
🎯 Générer des plans d'action optimisés
🧪 Simuler des scénarios de défaillance (what-if)
📈 Tracer et expliquer les décisions ML (explicabilité)

Points clés:

✅ Offline-First : fonctionne sans backend (fixtures locales)
✅ Simple : une seule commande pour démarrer
✅ Interactif : visualisations Plotly intégrées
✅ Production-Ready : Docker Compose, prêt pour déploiement

🚀 Démarrage Rapide

Développement local

# Installer les dépendances
pip install -r requirements.txt

# Lancer Streamlit
streamlit run streamlit_app.py

# Ou avec make
make streamlit

Avec Docker

# Build et run
make streamlit-docker

# Ou manuellement
docker build -t dirisi-frontend:latest -f Dockerfile.streamlit .
docker run -p 3000:3000 dirisi-frontend:latest

Stack complète (Backend + Frontend)

cd docker
docker-compose up

📋 Fonctionnalités

📊 Dashboard: Vue d'ensemble du réseau et métriques clés
🌐 Topologie: Visualisation interactive du graphe réseau avec Plotly
🔮 Prédictions: Prédiction de pannes avec IA
📋 Planification: Génération de plans d'action optimisés
🎮 Simulation: Scénarios What-If
🔄 Mode Offline: Utilise les fixtures quand le backend est indisponible

🛠️ Technologies

Streamlit - Framework web Python
Plotly - Visualisations interactives
Pandas - Traitement des données
Requests - Appels API

🔧 Configuration

Variables d'environnement

# URL du backend (défaut: http://localhost:8080)
export VITE_API_BASE=http://localhost:8080

# Ou
export BACKEND_URL=http://localhost:8080

Sur Jupyter Lab OVHcloud

# Le backend tourne sur le port 8000 (8080 réservé par Jupyter)
export VITE_API_BASE=http://localhost:8000
streamlit run streamlit_app.py --server.port 3000 --server.address 0.0.0.0 --server.headless true

📂 Structure

├── streamlit_app.py          # Application Streamlit principale
├── requirements.txt          # Dépendances Python
├── Dockerfile.streamlit      # Dockerfile Streamlit
├── src/
│   └── fixtures/            # Données de test (mode offline)
│       ├── topology.json
│       ├── predictions.json
│       ├── plan.json
│       └── simulate.json
└── docker/
    ├── Dockerfile           # Dockerfile React (legacy)
    └── docker-compose.yml   # Stack complète

🔄 Migration React → Streamlit

Correspondance des fonctionnalités

React (ancien)	Streamlit (nouveau)
React Router	Sidebar navigation
Zustand stores	Session state
TypeScript types	Python types
Vite + Node.js	Streamlit CLI
TailwindCSS	Streamlit native + CSS
Caddy server	Streamlit server

Routes API utilisées (identiques)

GET /health - Health check
GET /v1/topology - Topologie réseau
POST /v1/predict - Prédictions
POST /v1/plan - Planification
POST /v1/simulate - Simulation
GET /v1/explain - Explications
GET /v1/metrics - Métriques
POST /v1/ingest - Ingestion de données

🧪 Tests

# Tests unitaires (React legacy)
make test

# Tests E2E (React legacy)
make e2e

🐳 Docker

Build

docker build -t dirisi-frontend:latest -f Dockerfile.streamlit .

Run

docker run -p 3000:3000 \
  -e VITE_API_BASE=http://backend:8080 \
  dirisi-frontend:latest

📖 Documentation

README_STREAMLIT.md - Documentation Streamlit détaillée
docs/ - Documentation React (legacy)

🤝 Contribution

Voir CONTRIBUTING.md

📝 License

MIT - Voir LICENSE

📊 Visualiser la topologie réseau en temps (quasi) réel
🔮 Prédire les risques de panne (IA/ML)
🎯 Générer des plans d’action optimisés
🧪 Simuler des scénarios de défaillance (what-if)
📈 Tracer et expliquer les décisions ML (explicabilité)

Points clés

✅ Offline-First : fonctionne sans backend (fixtures locales)
✅ Performant : bundle < 300 KB gzippé
✅ Sécurisé : CSP stricte, pas de CDN externe, Caddy durci
✅ Explicable : features & règles visibles
✅ Production-Ready : Docker Compose, tests E2E, CI/CD-ready

📚 Table des matières

🚀 Démarrage rapide
🎯 Contexte
🏗️ Architecture
✨ Fonctionnalités
🐳 Docker
🧪 Tests
🔌 Mode Offline
🔒 Sécurité
📂 Structure du projet
🛠️ Développement
📄 Pages
❓ Inconnues & Actions
📄 Licence & 👥 Équipe

🚀 Démarrage rapide

Option 1 – Docker Compose (recommandé)

# Arborescence requise
DIRISI-Hackathon/
├── dirisi25-hackathon-frontend/   # Ce repo
└── dirisi25-hackathon-backend/    # Backend requis

# Lancer tout
cd dirisi25-hackathon-frontend
make docker

Lance :

Frontend Streamlit : http://localhost:3000
Backend FastAPI : http://localhost:8080
Réseau Docker isolé avec healthchecks

Arrêt propre : Ctrl+C ou docker-compose down

Option 2 – Développement local

# Installation
pip install -r requirements.txt

# Lancer Streamlit (nécessite backend sur 8080)
streamlit run streamlit_app.py

# Ou avec make
make streamlit

Le frontend sera accessible sur http://localhost:8501

Option 3 – Streamlit avec Docker seul

# Build
docker build -t dirisi-frontend:latest -f Dockerfile.streamlit .

# Run
docker run -p 3000:3000 \
  -e VITE_API_BASE=http://backend:8080 \
  dirisi-frontend:latest

✨ Fonctionnalités

Pages principales

📊 Dashboard
- Vue d'ensemble du réseau
- Métriques clés en temps réel
- Indicateurs de santé
🌐 Topologie
- Graphe interactif du réseau (Plotly)
- Visualisation des nœuds et liens
- État en temps réel
🔮 Prédictions
- Sélection de cibles (nœuds/liens)
- Prédiction de risque de panne (ML)
- Score de risque et ETA
- Explications des prédictions
📋 Planification
- Génération de plans d'action
- Optimisation multi-objectifs
- Actions recommandées (rerouting, scaling, etc.)
🎮 Simulation
- Scénarios What-If
- Simulation de pannes
- Impact sur le réseau

Mode Offline

✅ L'application fonctionne sans backend grâce aux fixtures :

Active automatiquement si le backend est indisponible
Données de test dans src/fixtures/
Switch manuel possible via la sidebar

🏗️ Architecture

Stack technique

Technologie	Version	Usage
Streamlit	1.30+	Framework web
Python	3.11	Langage
Plotly	5.18+	Visualisations
Pandas	2.1+	Traitement données
Requests	2.31+	Appels API
Docker	24+	Conteneurisation

Architecture applicative


┌─────────────────────────────────────────────────────────────┐
│              Frontend Streamlit (Python 3.11)               │
│  Pages    → Dashboard / Topology / Predict / Plan / Simulate│
│  Services → API calls via requests                          │
│  State    → st.session_state (ui, data, mode)               │
│  Mode ONLINE → Backend API (localhost:8080)                 │
│  Mode OFFLINE → fixtures/*.json (seed 42)                   │
└─────────────────────────────────────────────────────────────┘
                              ↓
                    ┌──────────────────┐
                    │  Backend FastAPI │
                    │  (port 8080)     │
                    └──────────────────┘

Flux de données

User → Streamlit UI → Session State
                ↓
         Backend Check
                ↓
    ┌───────────┴───────────┐
    ↓                       ↓
ONLINE Mode             OFFLINE Mode
    ↓                       ↓
API Call                Fixtures
    ↓                       ↓
Response → Display

🔌 Mode Offline

L'application détecte automatiquement si le backend est disponible :

✅ Backend disponible : Mode ONLINE (données en temps réel)
❌ Backend indisponible : Mode OFFLINE (fixtures locales)

Fixtures incluses (src/fixtures/) :

topology.json - Structure du réseau
predictions.json - Exemples de prédictions
plan.json - Plans d'action
simulate.json - Résultats de simulation
health.json - État de santé

Switch manuel : Bouton dans la sidebar pour forcer le mode

🐳 Docker

Fichiers

docker/
├── Dockerfile.streamlit   # Image Streamlit
└── docker-compose.yml     # Stack complète

Docker Compose

# Lancer la stack complète
cd docker
docker-compose up

# En arrière-plan
docker-compose up -d

# Arrêter
docker-compose down

# Rebuild
docker-compose build

# Logs
docker-compose logs -f frontend

Services exposés:

Frontend : http://localhost:3000
Backend : http://localhost:8080

📂 Structure du projet

dirisi25-hackathon-frontend/
├── streamlit_app.py           # Application principale
├── requirements.txt           # Dépendances Python
├── Dockerfile.streamlit       # Image Docker
├── Makefile                   # Commandes utiles
├── src/
│   └── fixtures/             # Données de test (mode offline)
│       ├── topology.json
│       ├── predictions.json
│       ├── plan.json
│       ├── simulate.json
│       └── health.json
├── docker/
│   ├── Dockerfile            # React legacy (archivé)
│   ├── Caddyfile             # React legacy
│   └── docker-compose.yml    # Stack complète
└── docs/                     # Documentation React legacy

🔧 Configuration

Variables d'environnement

# URL du backend
export VITE_API_BASE=http://localhost:8080
# ou
export BACKEND_URL=http://localhost:8080

Configuration Streamlit

Créer .streamlit/config.toml :

[server]
port = 3000
address = "0.0.0.0"
headless = true

[theme]
primaryColor = "#3B82F6"
backgroundColor = "#FFFFFF"
secondaryBackgroundColor = "#F3F4F6"
textColor = "#1F2937"

Déploiement Jupyter Lab OVHcloud

# Le backend utilise le port 8000 (8080 réservé)
export VITE_API_BASE=http://localhost:8000

# Lancer Streamlit
streamlit run streamlit_app.py \
  --server.port 3000 \
  --server.address 0.0.0.0 \
  --server.headless true

🔄 Migration React → Streamlit

Raisons de la migration

Compatibilité Jupyter Lab : Pas de Node.js disponible sur l'environnement OVHcloud
Simplicité : Moins de dépendances, stack Python unifiée
Rapidité de développement : Moins de code, prototypage rapide
Visualisations : Plotly intégré nativement

Correspondance des fonctionnalités

React (ancien)	Streamlit (nouveau)
React Router	Sidebar navigation
Zustand stores	st.session_state
TypeScript types	Python type hints
Vite + npm	Streamlit CLI + pip
TailwindCSS	Streamlit native + CSS
Caddy server	Streamlit server
Plotly.js	Plotly Python
axios/fetch	requests

API Backend (inchangée)

Toutes les routes API restent identiques :

GET /health - Health check
GET /v1/topology - Topologie réseau
POST /v1/predict - Prédictions
POST /v1/plan - Planification
POST /v1/simulate - Simulation
GET /v1/explain - Explications
GET /v1/metrics - Métriques
POST /v1/ingest - Ingestion de données

Code Legacy

Le code React original est conservé dans :

src/ (composants TypeScript/React)
docs/ (documentation React)
docker/Dockerfile (build React/Caddy)

🤝 Contribution

Voir CONTRIBUTING.md dans le backend

📝 License

MIT - Voir LICENSE

🎯 Contexte

Hackathon DIRISI 2025 — Thème : « Anticiper les pannes par l'IA »

Application offline-first démontrable sans internet : visualisation en temps réel, prédiction ML, planification optimisée, simulation what-if, et explicabilité des décisions.

🔌 Mode Offline

Détection auto au boot :

GET /health timeout 2s → si échec : OFFLINE ; si succès : ONLINE

Fixtures locales (src/fixtures/):

health.json • topology.json • predictions.json • plan.json • simulate.json

UI dégradée : badge OFFLINE, bouton Re-essayer, toutes pages fonctionnelles.

🔒 Sécurité

CSP (ex. via Caddy)

Content-Security-Policy:
  default-src 'self';
  script-src 'self';
  style-src 'self' 'unsafe-inline';
  img-src 'self' data: https:;
  font-src 'self' data: https:;
  connect-src 'self' http://localhost:8080 http://127.0.0.1:8080;
  object-src 'none';
  base-uri 'self';
  frame-ancestors 'none';

Headers : X-Content-Type-Options, X-Frame-Options, X-XSS-Protection, Referrer-Policy, Permissions-Policy. Principes : No-CDN, no-analytics, no-cookies, no-eval, HTTPS en prod, timeouts API.

📂 Structure du projet

dirisi25-hackathon-frontend/
├── docker/               # Dockerfile, Caddyfile, compose
├── docs/                 # DOCKER_GUIDE, QUICKSTART, etc.
├── scripts/              # check/start/test docker
├── src/
│   ├── components/       # UI réutilisable
│   ├── routes/           # pages
│   ├── services/         # appels backend, logique métier
│   ├── store/            # Zustand
│   ├── types/            # TS types
│   ├── fixtures/         # données offline
│   └── lib/              # utils (api, layout, format)
├── tests/                # unit + e2e
├── .env.example
├── .eslintrc.cjs
├── .prettierrc
├── playwright.config.ts
├── vite.config.ts
├── vitest.config.ts
├── tailwind.config.js
├── package.json
└── Makefile

🛠️ Développement

Prérequis

Node.js 18+, npm 9+
Docker & Docker Compose (pour la démo complète)

Setup & scripts

git clone git@github.com:Rqbln/dirisi25-hackathon-frontend.git
cd dirisi25-hackathon-frontend
npm ci
cp .env.example .env

npm run dev           # serveur dev (HMR)
npm run build         # build prod
npm run preview       # preview du build
npm run lint          # eslint
npm run format        # prettier
npm run type-check    # TS noEmit

# équivalents Make
make dev | make build | make preview | make test | make e2e | make lint | make format

Conventions

TypeScript strict (pas de any)
Functional components + hooks
Tailwind (purge actif)
Conventional commits (feat:, fix:, docs:, …)

📄 Pages

/ Dashboard : 6 cartes métriques, alertes triables
/topology Carte : SVG interactif (survol/clic)
/predict Prédictions : horizon, cibles, risk bands + explications
/plan Planification : objectifs/contraintes → actions + gains
/simulate Simulation : scénarios panne (durée/intensité) → impact + plan
/about À propos : contexte, statut, liens docs

❓ Inconnues & Actions

Inconnues

Design tokens Défense : palettes/couleurs officielles ?
Critères UX : interopérabilité, a11y, perf ?
Sécurité poste : navigateur imposé (Firefox ESR ?), poste isolé ?
Données réelles : volumétrie/latences (pagination/virtualisation) ?
Déploiement : intranet Défense / proxys / ports autorisés ?

Plan A (actuel) : UI minimaliste + fixtures + backend local, offline-first Plan B (si autorisé) : polling 5–10s / WebSocket notifications / export PDF / thème Défense / virtualisation >1000 entités

Objectifs perf : bundle < 300 KB, FP < 1s, TTI < 2s, Lighthouse > 90

📄 Licence & 👥 Équipe

Licence : MIT — voir LICENSE Équipe : Projet Hackathon DIRISI 2025 — Anticiper les pannes par l’IA

Note déploiement

Front & back dans le même dossier parent (compose)

make docker lance automatiquement les deux services

En prod : HTTPS dans le Caddyfile + variables d’environnement sécurisées

Name		Name	Last commit message	Last commit date
Latest commit History 11 Commits
docker		docker
jupyter-deployment		jupyter-deployment
src/fixtures		src/fixtures
.gitignore		.gitignore
Dockerfile.streamlit		Dockerfile.streamlit
Makefile		Makefile
README.md		README.md
README.md.backup		README.md.backup
README_STREAMLIT.md		README_STREAMLIT.md
requirements.txt		requirements.txt
streamlit_app.py		streamlit_app.py

Folders and files

Latest commit

History

Repository files navigation

DIRISI 2025 Hackathon – Frontend Streamlit

📋 Vue d'ensemble

📚 Table des matières

🚀 Démarrage Rapide

Développement local

Avec Docker

Stack complète (Backend + Frontend)

📋 Fonctionnalités

🛠️ Technologies

🔧 Configuration

Variables d'environnement

Sur Jupyter Lab OVHcloud

📂 Structure

🔄 Migration React → Streamlit

Correspondance des fonctionnalités

Routes API utilisées (identiques)

🧪 Tests

🐳 Docker

Build

Run

📖 Documentation

🤝 Contribution

📝 License

📚 Table des matières

🚀 Démarrage rapide

Option 1 – Docker Compose (recommandé)

Option 2 – Développement local

Option 3 – Streamlit avec Docker seul

✨ Fonctionnalités

Pages principales

Mode Offline

🏗️ Architecture

Stack technique

Architecture applicative

Flux de données

🔌 Mode Offline

🐳 Docker

Fichiers

Docker Compose

📂 Structure du projet

🔧 Configuration

Variables d'environnement

Configuration Streamlit

Déploiement Jupyter Lab OVHcloud

🔄 Migration React → Streamlit

Raisons de la migration

Correspondance des fonctionnalités

API Backend (inchangée)

Code Legacy

🤝 Contribution

📝 License

🎯 Contexte

🔌 Mode Offline

🔒 Sécurité

CSP (ex. via Caddy)

📂 Structure du projet

🛠️ Développement

Prérequis

Setup & scripts

📄 Pages

❓ Inconnues & Actions

📄 Licence & 👥 Équipe

About

Resources

Uh oh!

Stars

Watchers

Forks

Releases

Packages 0

Uh oh!

Contributors

Uh oh!

Languages

Packages