non salva/carica automaticamente e non importa nemmeno i dati salvati dal json, ti incollo il codoice vedi se risolvi: <!DOCTYPE html>
<html lang="it">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Generatore di Prompt Interattivo</title>
    <style>
        body {
            font-family: Arial, sans-serif;
            max-width: 800px;
            margin: 0 auto;
            padding: 20px;
        }
        .select-container {
            display: flex;
            align-items: center;
            margin-bottom: 10px;
        }
        .select-label {
            width: 150px;
            text-align: right;
            margin-right: 10px;
        }
        select, button {
            margin: 5px 0;
            padding: 5px;
        }
        select {
            flex-grow: 1;
        }
        button {
            width: 100%;
        }
        #output {
            margin-top: 20px;
            border: 1px solid #ccc;
            padding: 10px;
            min-height: 100px;
        }
        .main-container {
            display: flex;
            flex-direction: column;
            align-items: center;
        }
        .left-container {
            width: 100%;
        }
        .right-container {
            width: 100%;
            display: flex;
            justify-content: center;
        }
        #generaPromptButton {
            font-size: 1.2em;
            padding: 10px;
            margin-top: 20px;
            height: 60px;
            width: 200px;
        }
    </style>
</head>
<body>
    <h1>Generatore di Prompt Interattivo</h1>
    
    <div class="main-container">
        <div class="left-container">
            <div class="select-container">
                <label class="select-label" for="nomi">Nome:</label>
                <select id="nomi"></select>
            </div>
            <div class="select-container">
                <label class="select-label" for="categoria-prompt">Categoria Prompt:</label>
                <select id="categoria-prompt"></select>
            </div>
            <div class="select-container">
                <label class="select-label" for="sottocategoria-prompt">Sottocategoria Prompt:</label>
                <select id="sottocategoria-prompt"></select>
            </div>
            <div class="select-container">
                <label class="select-label" for="categoria-luogo">Categoria Luogo:</label>
                <select id="categoria-luogo"></select>
            </div>
            <div class="select-container">
                <label class="select-label" for="luoghi">Luogo:</label>
                <select id="luoghi"></select>
            </div>
            <div class="select-container">
                <label class="select-label" for="azioni">Azione:</label>
                <select id="azioni"></select>
            </div>
            <div class="select-container">
                <label class="select-label" for="ausiliare">Ausiliare 1:</label>
                <select id="ausiliare"></select>
            </div>
            <div class="select-container">
                <label class="select-label" for="ausiliare2">Ausiliare 2:</label>
                <select id="ausiliare2"></select>
            </div>
            
            <button onclick="aggiungiOpzione('nomi')">Aggiungi Nome</button>
            <button onclick="aggiungiCategoria()">Aggiungi Categoria Prompt</button>
            <button onclick="aggiungiSottocategoria()">Aggiungi Sottocategoria Prompt</button>
            <button onclick="aggiungiCategoriaLuogo()">Aggiungi Categoria Luogo</button>
            <button onclick="aggiungiOpzione('luoghi')">Aggiungi Luogo</button>
            <button onclick="aggiungiOpzione('azioni')">Aggiungi Azione</button>
            <button onclick="aggiungiOpzione('ausiliare')">Aggiungi Ausiliare 1</button>
            <button onclick="aggiungiOpzione('ausiliare2')">Aggiungi Ausiliare 2</button>
            
            <button onclick="modificaOpzione()">Modifica Opzione</button>
            <button onclick="eliminaOpzione()">Elimina Opzione</button>
            <button onclick="importaLista()">Importa Lista</button>
            
            <button onclick="esportaDati()">Esporta Dati</button>
            <button onclick="importaDati()">Importa Dati</button>
        </div>
        <div class="right-container">
            <button id="generaPromptButton" onclick="generaPrompt()">Genera Prompt</button>
        </div>
    </div>
    
    <div id="output"></div>

    <script>
        const selectIds = ['nomi', 'categoria-prompt', 'sottocategoria-prompt', 'categoria-luogo', 'luoghi', 'azioni', 'ausiliare', 'ausiliare2'];
        const selectIdsWithBlank = ['categoria-luogo', 'luoghi', 'azioni', 'ausiliare', 'ausiliare2'];
        let promptCategorie = {};
        let luogoCategorie = {};

        function salvaOpzioni() {
            selectIds.forEach(id => {
                if (id !== 'sottocategoria-prompt' && id !== 'categoria-luogo') {
                    const opzioni = Array.from(document.getElementById(id).options).map(opt => opt.value).filter(opt => opt !== '');
                    localStorage.setItem(id, JSON.stringify(opzioni));
                }
            });
            localStorage.setItem('promptCategorie', JSON.stringify(promptCategorie));
            localStorage.setItem('luogoCategorie', JSON.stringify(luogoCategorie));
        }

        function caricaOpzioni() {
            selectIds.forEach(id => {
                if (id !== 'sottocategoria-prompt' && id !== 'categoria-luogo') {
                    const opzioni = JSON.parse(localStorage.getItem(id) || '[]');
                    popolaSelect(id, opzioni.sort());
                }
            });
            promptCategorie = JSON.parse(localStorage.getItem('promptCategorie') || '{}');
            luogoCategorie = JSON.parse(localStorage.getItem('luogoCategorie') || '{}');
            aggiornaCategorieSottocategorie();
            aggiornaCategorieLuogo();
        }

        function popolaSelect(id, opzioni) {
            const select = document.getElementById(id);
            select.innerHTML = '';
            if (selectIdsWithBlank.includes(id)) {
                const blankOption = document.createElement('option');
                blankOption.text = '(vuoto)';
                blankOption.value = '';
                select.add(blankOption);
            }
            opzioni.forEach(opt => {
                const option = document.createElement('option');
                option.text = opt;
                select.add(option);
            });
        }

        function rimuoviOpzioneSelezionata(selectId) {
            const select = document.getElementById(selectId);
            if (select && select.selectedIndex > -1) {
                select.remove(select.selectedIndex);
            }
        }

        function aggiungiOpzione(selectId) {
            const nuovaOpzione = prompt(Inserisci una nuova opzione per ${selectId}:);
            if (nuovaOpzione) {
                const select = document.getElementById(selectId);
                const opzioni = Array.from(select.options).map(opt => opt.value).filter(opt => opt !== '');
                opzioni.push(nuovaOpzione);
                popolaSelect(selectId, opzioni.sort());
                salvaOpzioni();
            }
        }

        function aggiungiCategoria() {
            const nuovaCategoria = prompt("Inserisci una nuova categoria di prompt:");
            if (nuovaCategoria) {
                promptCategorie[nuovaCategoria] = [];
                aggiornaCategorieSottocategorie();
                salvaOpzioni();
            }
        }

        function aggiungiSottocategoria() {
            const categoriaSelect = document.getElementById('categoria-prompt');
            const categoriaSelezionata = categoriaSelect.value;
            if (categoriaSelezionata) {
                const nuovaSottocategoria = prompt(Inserisci una nuova sottocategoria per ${categoriaSelezionata}:);
                if (nuovaSottocategoria) {
                    promptCategorie[categoriaSelezionata].push(nuovaSottocategoria);
                    promptCategorie[categoriaSelezionata].sort();
                    aggiornaCategorieSottocategorie();
                    salvaOpzioni();
                }
            } else {
                alert("Seleziona prima una categoria.");
            }
        }

        function aggiungiCategoriaLuogo() {
            const nuovaCategoria = prompt("Inserisci una nuova categoria di luogo (Interno/Esterno):");
            if (nuovaCategoria) {
                luogoCategorie[nuovaCategoria] = [];
                aggiornaCategorieLuogo();
                salvaOpzioni();
            }
        }

        function aggiornaCategorieSottocategorie() {
            const categoriaSelect = document.getElementById('categoria-prompt');
            const sottocategoriaSelect = document.getElementById('sottocategoria-prompt');
            
            popolaSelect('categoria-prompt', Object.keys(promptCategorie).sort());

            categoriaSelect.onchange = function() {
                const categoriaSelezionata = this.value;
                popolaSelect('sottocategoria-prompt', (promptCategorie[categoriaSelezionata] || []).sort());
            }
            
            categoriaSelect.onchange();
        }

        function aggiornaCategorieLuogo() {
            const categoriaLuogoSelect = document.getElementById('categoria-luogo');
            const luoghiSelect = document.getElementById('luoghi');
            
            popolaSelect('categoria-luogo', Object.keys(luogoCategorie).sort());

            categoriaLuogoSelect.onchange = function() {
                const categoriaSelezionata = this.value;
                popolaSelect('luoghi', (luogoCategorie[categoriaSelezionata] || []).sort());
            }
            
            categoriaLuogoSelect.onchange();
        }

        function modificaOpzione() {
            const selectId = prompt("Inserisci l'ID della select che desideri modificare:");
            const select = document.getElementById(selectId);
            if (select && select.selectedIndex > -1) {
                const nuovaOpzione = prompt("Inserisci il nuovo valore per l'opzione selezionata:", select.value);
                if (nuovaOpzione) {
                    select.options[select.selectedIndex].text = nuovaOpzione;
                    select.options[select.selectedIndex].value = nuovaOpzione;
                    salvaOpzioni();
                }
            } else {
                alert("Nessuna opzione selezionata o select non valida.");
            }
        }

        function eliminaOpzione() {
            const selectId = prompt("Inserisci l'ID della select da cui eliminare l'opzione:");
            rimuoviOpzioneSelezionata(selectId);
            salvaOpzioni();
        }

        function esportaDati() {
            const dati = {
                nomi: JSON.parse(localStorage.getItem('nomi') || '[]'),
                'categoria-prompt': JSON.parse(localStorage.getItem('categoria-prompt') || '[]'),
                'sottocategoria-prompt': JSON.parse(localStorage.getItem('sottocategoria-prompt') || '{}'),
                'categoria-luogo': JSON.parse(localStorage.getItem('categoria-luogo') || '[]'),
                luoghi: JSON.parse(localStorage.getItem('luoghi') || '[]'),
                azioni: JSON.parse(localStorage.getItem('azioni') || '[]'),
                ausiliare: JSON.parse(localStorage.getItem('ausiliare') || '[]'),
                ausiliare2: JSON.parse(localStorage.getItem('ausiliare2') || '[]'),
                promptCategorie: JSON.parse(localStorage.getItem('promptCategorie') || '{}'),
                luogoCategorie: JSON.parse(localStorage.getItem('luogoCategorie') || '{}')
            };
            const blob = new Blob([JSON.stringify(dati, null, 2)], {type: 'application/json'});
            const url = URL.createObjectURL(blob);
            const a = document.createElement('a');
            a.href = url;
            a.download = 'promptData.json';
            a.click();
            URL.revokeObjectURL(url);
        }

        function importaDati() {
            const input = document.createElement('input');
            input.type = 'file';
            input.accept = 'application/json';
            input.onchange = function(event) {
                const file = event.target.files[0];
                const reader = new FileReader();
                reader.onload = function(e) {
                    const dati = JSON.parse(e.target.result);
                    localStorage.setItem('nomi', JSON.stringify(dati.nomi || []));
                    localStorage.setItem('categoria-prompt', JSON.stringify(dati['categoria-prompt'] || []));
                    localStorage.setItem('sottocategoria-prompt', JSON.stringify(dati['sottocategoria-prompt'] || {}));
                    localStorage.setItem('categoria-luogo', JSON.stringify(dati['categoria-luogo'] || []));
                    localStorage.setItem('luoghi', JSON.stringify(dati.luoghi || []));
                    localStorage.setItem('azioni', JSON.stringify(dati.azioni || []));
                    localStorage.setItem('ausiliare', JSON.stringify(dati.ausiliare || []));
                    localStorage.setItem('ausiliare2', JSON.stringify(dati.ausiliare2 || []));
                    localStorage.setItem('promptCategorie', JSON.stringify(dati.promptCategorie || {}));
                    localStorage.setItem('luogoCategorie', JSON.stringify(dati.luogoCategorie || {}));
                    caricaOpzioni();
                };
                reader.readAsText(file);
            };
            input.click();
        }

        function importaLista() {
            const selectId = prompt("Inserisci l'ID della select a cui desideri aggiungere una lista:");
            const lista = prompt("Inserisci una lista di valori separati da virgola:");
            if (selectId && lista) {
                const valori = lista.split(',').map(v => v.trim());
                const select = document.getElementById(selectId);
                const opzioni = Array.from(select.options).map(opt => opt.value).filter(opt => opt !== '');
                valori.forEach(val => opzioni.push(val));
                popolaSelect(selectId, opzioni.sort());
                salvaOpzioni();
            }
        }

        function generaPrompt() {
            const nome = document.getElementById('nomi').value;
            const categoriaPrompt = document.getElementById('categoria-prompt').value;
            const sottocategoriaPrompt = document.getElementById('sottocategoria-prompt').value;
            const categoriaLuogo = document.getElementById('categoria-luogo').value;
            const luogo = document.getElementById('luoghi').value;
            const azione = document.getElementById('azioni').value;
            const ausiliare1 = document.getElementById('ausiliare').value;
            const ausiliare2 = document.getElementById('ausiliare2').value;

            let prompt = ${nome} is in the ${categoriaLuogo} ${luogo};
            prompt += azione ? , performing the action of ${azione} : '';
            prompt += ausiliare1 ? , assisted by ${ausiliare1} : '';
            prompt += ausiliare2 ? , with the help of ${ausiliare2} : '';
            prompt += , under the ${categoriaPrompt} category (${sottocategoriaPrompt}).;

            document.getElementById('output').innerText = prompt;
        }

        document.addEventListener('DOMContentLoaded', caricaOpzioni);
    </script>
</body>
</html>