IA image analysis - v0 by Vercel

<!DOCTYPE html><html lang="fr"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Application Mobile d'Analyse d'Images avec IA</title> <style> body { font-family: Arial, sans-serif; margin: 0; padding: 20px; background-color: #f4f4f4; display: flex; flex-direction: column; align-items: center; } h1 { color: #333; } #upload-section { margin-bottom: 20px; } #image-preview { max-width: 100%; max-height: 400px; margin-bottom: 20px; border: 2px solid #ddd; border-radius: 8px; } #analyze-btn { background-color: #4CAF50; color: white; padding: 10px 20px; border: none; border-radius: 5px; cursor: pointer; font-size: 16px; margin-bottom: 20px; } #analyze-btn:hover { background-color: #45a049; } #results { width: 100%; max-width: 600px; background-color: white; padding: 15px; border-radius: 8px; box-shadow: 0 2px 10px rgba(0,0,0,0.1); } #results h2 { margin-top: 0; } #results ul { list-style-type: none; padding: 0; } #results li { background-color: #f9f9f9; margin: 5px 0; padding: 10px; border-radius: 5px; border: 1px solid #ddd; } #loading { display: none; font-style: italic; color: #666; } </style>  <script src="https://cdn.jsdelivr.net/npm/@tensorflow/tfjs@latest/dist/tf.min.js"></script>  <script src="https://cdn.jsdelivr.net/npm/@tensorflow-models/coco-ssd@latest"></script></head><body> <h1>Analyse d'Images avec IA</h1> <div id="upload-section"> <input type="file" id="image-upload" accept="image/*"> </div> <img id="image-preview" src="" alt="Prévisualisation de l'image"> <button id="analyze-btn" disabled>Analyser l'Image</button> <p id="loading">Chargement du modèle et analyse en cours...</p> <div id="results"></div> <script> let model; const imageUpload = document.getElementById('image-upload'); const imagePreview = document.getElementById('image-preview'); const analyzeBtn = document.getElementById('analyze-btn'); const loading = document.getElementById('loading'); const results = document.getElementById('results'); // Charger le modèle Coco-SSD au démarrage async function loadModel() { try { model = await cocoSsd.load(); console.log('Modèle chargé avec succès'); } catch (error) { console.error('Erreur lors du chargement du modèle:', error); alert('Impossible de charger le modèle IA. Vérifiez votre connexion internet.'); } } loadModel(); // Prévisualiser l'image uploadée imageUpload.addEventListener('change', (event) => { const file = event.target.files[0]; if (file) { const reader = new FileReader(); reader.onload = (e) => { imagePreview.src = e.target.result; analyzeBtn.disabled = false; }; reader.readAsDataURL(file); } }); // Analyser l'image analyzeBtn.addEventListener('click', async () => { if (!model) { alert('Le modèle IA n\'est pas encore chargé. Attendez un moment.'); return; } loading.style.display = 'block'; results.innerHTML = ''; analyzeBtn.disabled = true; try { const img = imagePreview; const predictions = await model.detect(img); if (predictions.length > 0) { let html = '<h2>Résultats de l\'Analyse :</h2><ul>'; predictions.forEach((pred) => { html += `<li>${pred.class} (Confiance: ${Math.round(pred.score * 100)}%)</li>`; }); html += '</ul>'; results.innerHTML = html; } else { results.innerHTML = '<p>Aucun objet détecté.</p>'; } } catch (error) { console.error('Erreur lors de l\'analyse:', error); results.innerHTML = '<p>Erreur lors de l\'analyse de l\'image.</p>'; } finally { loading.style.display = 'none'; analyzeBtn.disabled = false; } }); </script></body></html>

Lance le script et mets-le sur un serveur local

Show full message