### **Prompt da usare con ChatGPT per personalizzare il template Teachable Machine** 📌 **ISTRUZIONI PER L'USO:** - Copia e incolla questo prompt nella tua richiesta a ChatGPT. - **Compila la sezione "La mia richiesta"** con quello che vuoi modificare. - Se necessario, **aggiungi il codice del tuo progetto** per permettere a ChatGPT di fornirti la risposta più precisa possibile. <ex> **Ciao ChatGPT!** Sto lavorando su un progetto in cui integro un modello di **Teachable Machine** per classificare immagini in due categorie nel mio sito web. 🔹 **Il mio livello di competenza:** - Ho una conoscenza di base di **HTML e CSS**. - Non conosco **JavaScript**, quindi preferisco spiegazioni chiare e passo dopo passo. - Sto utilizzando un **template preconfigurato**, quindi voglio modificare solo le parti necessarie senza riscrivere tutto. Prima di fornirmi codice tuo chiedimi di inviarti le mie attuali parti di codice interessato 🔹 **Come è strutturato il mio codice?** Il mio codice segue questa struttura: - **HTML**: - Un `<input>` per il caricamento delle immagini. - Un `<img>` per visualizzare l'anteprima dell'immagine caricata. - Due `<div>` che mostrano la classificazione e la percentuale di accuratezza. - **CSS**: Stile di base per i contenitori e i risultati. - **JavaScript**: - Carica il modello di Teachable Machine. - Esegue la classificazione dell'immagine caricata. - Mostra il risultato all'interno dei div corrispondenti. 🔹 **Placeholder presenti nel codice:** | Segnaposto | Funzione | |------------------|----------| | `id="imageUpload"` | Input per il caricamento delle immagini | | `id="imagePreview"` | Visualizzazione dell'immagine caricata | | `class="accuracy"` | Mostra la percentuale di accuratezza della predizione | | `class="predicted-class"` | Mostra il nome della classe predetta | | `id="class-1"` / `id="class-2"` | Sezioni per mostrare i risultati della classificazione | Per favore, usa questi segnaposti nel codice che fornisci per garantire la compatibilità con il mio progetto. Prima di suggerire modifiche al codice, chiedimi di incollare i miei file, così potrai integrare la soluzione nel mio codice esistente senza sovrascriverlo. La funzione js per predire è questa: ```js async function predict() { const image = document.getElementById('imagePreview'); const prediction = await model.predict(image, false); prediction.sort((a, b) => b.probability - a.probability); const bestResult = prediction[0]; Object.keys(CLASSI).forEach(key => { document.getElementById(key).style.display = 'none'; }); let selectedClass = Object.keys(CLASSI).find(key => CLASSI[key] === bestResult.className); if (selectedClass) { document.getElementById(selectedClass).style.display = 'block'; document.querySelector(`#${selectedClass} .accuracy`).textContent = (bestResult.probability * 100).toFixed(2); document.querySelector(`#${selectedClass} .predicted-class`).textContent = bestResult.className; } } ``` e la mia sezione html relativa alla risposta: ```html <section class="container"> <h2>Carica un'immagine per la classificazione</h2> <input type="file" id="imageUpload" accept="image/*"> <br> <img id="imagePreview" style="height: 300px; display: none;" /> <br> <div id="result-container"> <div id="class-1" class="result-box" style="display: none;"> <h3>Questa immagine appartiene alla Classe <span class="predicted-class"></span></h3> <p>Precisione: <span class="accuracy"></span>%</p> </div> <div id="class-2" class="result-box" style="display: none;"> <h3>Questa immagine appartiene alla Classe <span class="predicted-class"></span></h3> <p>Precisione: <span class="accuracy"></span>%</p> </div> </div> </section> ``` Ora pian piano ti farò delle richieste, tu tieni a mente questa mia descrizione iniziale e chiedi pure altro se hai bisogno </ex>