README.md

metadata

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)

   git clone https://huggingface.co/spaces/rinogeek/VirtualLabo
   cd VirtualLabo
   

2. Installez les dépendances

   # Avec bun (recommandé - plus rapide)
   bun install
   
   # Ou avec npm
   npm install
   

3. Lancez le serveur de développement

   bun run dev
   # ou
   npm run dev
   

4. Ouvrez votre navigateur

   http://localhost:8080
   

Construction pour Production

bun run build
# ou
npm run build

🐳 Déploiement avec Docker

Localement

# 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
2. Créez un nouvel espace ou utilisez cet espace
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

# 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 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