---
title: Virtual Laboratoire Chimique
emoji: ⚗️
colorFrom: blue
colorTo: purple
sdk: docker
port: 7860
---

# ⚗️ Laboratoire Virtuel de Chimie

Un laboratoire de chimie interactif et pédagogique pour les étudiants en sciences. Pratiquez des réactions chimiques virtuelles, apprenez les interactions entre substances et explorez la chimie en toute sécurité.

## 🌟 Caractéristiques

- **Simulation Interactive** : Mélangez des substances et observez les réactions chimiques
- **Déscriptions Détaillées** : Observations réalistes des réactions basées sur l'IA
- **Contrôle de la Température** : Explorez comment la température affecte les réactions
- **Recommandations de Sécurité** : Rappels automatiques des précautions de sécurité
- **Suggestions d'Expériences** : Découvrez de nouvelles combinaisons à essayer
- **Inventaire de Substances** : Catalogue complet avec propriétés physico-chimiques

## 🚀 Démarrage Rapide

### Installation Locale

1. **Clonez le dépôt** (si nécessaire)
   ```bash
   git clone https://huggingface.co/spaces/rinogeek/VirtualLabo
   cd VirtualLabo
   ```

2. **Installez les dépendances**
   ```bash
   # Avec bun (recommandé - plus rapide)
   bun install
   
   # Ou avec npm
   npm install
   ```

3. **Lancez le serveur de développement**
   ```bash
   bun run dev
   # ou
   npm run dev
   ```

4. **Ouvrez votre navigateur**
   ```
   http://localhost:8080
   ```

### Construction pour Production

```bash
bun run build
# ou
npm run build
```

## 🐳 Déploiement avec Docker

### Localement

```bash
# Construire l'image
docker build -t virtual-labo .

# Lancer le conteneur
docker run -p 7860:7860 virtual-labo
```

L'application sera accessible à `http://localhost:7860`

### Sur Hugging Face Spaces

1. **Allez sur** [Hugging Face Spaces](https://huggingface.co/spaces)
2. **Créez un nouvel espace** ou utilisez [cet espace](https://huggingface.co/spaces/rinogeek/VirtualLabo)
3. **Sélectionnez Docker** comme SDK
4. **Reliez ce dépôt** ou uploadez les fichiers
5. **Déploiement automatique** lors du push

L'espace écoute automatiquement sur le port **7860**.

## 📋 Exigences

- **Node.js** ≥ 18
- **Bun** (optionnel, mais recommandé)
- **Docker** (pour le déploiement containerisé)

## 🎓 Utilisation

### Interface Principale

1. **Sélectionnez des substances** dans l'inventaire
2. **Ajustez la température** (0-100°C)
3. **Cliquez sur "Mélanger"** pour voir la réaction
4. **Lisez les observations** détaillées générées par IA
5. **Explorez les suggestions** pour d'autres expériences

### Fonctionnalités Avancées

- **Enregistrement en temps réel** : Voyez la réaction se dérouler
- **Annotations** : Annotez vos observations
- **Gestion de l'espace de travail** : Sauvegardez vos expériences
- **Calqueur de tissu** : Visualisation des réactions sur toile

## 🔧 Configuration

### Variables d'Environnement

```bash
# Port (défaut: 7860 sur HuggingFace)
PORT=7860

# Host (défaut: 0.0.0.0)
HOST=0.0.0.0

# Environnement
NODE_ENV=production
```

### Configuration Vite

Voir [vite.config.ts](vite.config.ts) pour les options avancées.

## 📦 Stack Technologique

- **Frontend**
  - React 18+
  - TypeScript
  - Tailwind CSS
  - shadcn/ui Components
  - Vite (build tool)

- **Backend**
  - Node.js
  - Express (middleware)
  - Vite Dev Server

- **Outils**
  - ESLint pour la qualité du code
  - PostCSS pour les styles
  - Fabric.js pour la visualisation

## 🎨 Composants Principaux

- `ChemicalCalculator` : Logique des réactions chimiques
- `FabricLabCanvas` : Visualisation des réactions
- `Inventory` : Gestion des substances
- `ResultsPanel` : Affichage des résultats
- `TimelapseRecorder` : Enregistrement des réactions
- `WorkspaceManager` : Gestion du projet

## 📁 Structure du Projet

```
.
├── public/              # Assets statiques
├── server/              # Middleware serveur
├── src/
│   ├── components/      # Composants React
│   ├── data/           # Données (substances, modèles)
│   ├── hooks/          # React hooks personnalisés
│   ├── lib/            # Utilitaires
│   ├── pages/          # Pages principales
│   ├── services/       # Services API
│   ├── App.tsx         # Application principale
│   └── main.tsx        # Point d'entrée
├── Dockerfile          # Configuration Docker
├── server.js           # Serveur HTTP production
├── index.html          # HTML d'entrée
├── vite.config.ts      # Configuration Vite
├── tsconfig.json       # Configuration TypeScript
└── package.json        # Dépendances et scripts
```

## 🤝 Contribution

Les contributions sont bienvenues ! Consultez les issues ou créez une pull request.

## 📝 Licence

Ce projet est disponible sous licence MIT.

## 🌐 Liens Utiles

- **Espace HuggingFace** : https://huggingface.co/spaces/rinogeek/VirtualLabo
- **Dépôt Source** : [GitHub/GitLab]
- **Documentation Vite** : https://vitejs.dev
- **shadcn/ui** : https://ui.shadcn.com

## ⚠️ Avertissement Pédagogique

Ce laboratoire est une **simulation éducative**. Les réactions affichées sont basées sur des données scientifiques, mais :

- Il ne remplace pas une véritable expérience de laboratoire
- Les observations peuvent être simplifiées
- Consultez un chimiste/enseignant pour les applications réelles
- Respectez les protocoles de sécurité réels lors d'expériences réelles

## 📞 Support

Pour les problèmes ou questions :
- Ouvrez une issue sur le dépôt
- Contactez le développeur via HuggingFace
- Consultez la documentation officielle

---

**Créé avec ❤️ pour les étudiants en chimie**