Spaces:
Sleeping
Sleeping
| 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** | |