Home 2

<style>
    :root {
        --aki-bg-dark: #0A0E2B; /* Haupt-Hintergrund (sehr dunkles Blau) */
        --aki-bg-medium: #1D2B4F; /* Formular-Hintergrund (gedecktes Blau) */
        --aki-accent-orange: #F97426; /* CTA-Orange für Buttons */
        --aki-text-light: #F0F0F0;   /* Haupt-Textfarbe (fast weiß) */
        --aki-text-dark: #0A0E2B;    /* Textfarbe auf hellem Grund */
        --aki-border-color: #3a4a6e; /* Randfarbe für Inputs */
    }
    .aki-json-editor-container {
        font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
        background-color: var(--aki-bg-dark);
        border: 1px solid var(--aki-border-color);
        border-radius: 12px;
        padding: 25px;
        color: var(--aki-text-light);
        max-width: 800px;
        margin: 20px auto;
        box-shadow: 0 8px 25px rgba(0,0,0,0.2);
    }
    .aki-json-editor-container h2 {
        font-size: 28px;
        font-weight: 700;
        text-align: center;
        margin-top: 0;
        margin-bottom: 20px;
        color: #fff;
    }
    .aki-json-editor-container h3 {
        font-size: 20px;
        margin-top: 30px;
        border-bottom: 2px solid var(--aki-accent-orange);
        padding-bottom: 8px;
    }
    .aki-json-editor-container textarea {
        width: 100%;
        min-height: 180px;
        border: 1px solid var(--aki-border-color);
        border-radius: 8px;
        padding: 12px;
        font-family: "Courier New", Courier, monospace;
        font-size: 14px;
        background-color: var(--aki-bg-medium);
        color: var(--aki-text-light);
        resize: vertical;
    }
    .aki-json-editor-container button {
        background-color: var(--aki-accent-orange);
        color: #fff;
        border: none;
        padding: 12px 25px;
        border-radius: 8px;
        font-size: 18px;
        font-weight: bold;
        cursor: pointer;
        transition: transform 0.2s, background-color 0.3s;
        margin-top: 15px;
        display: block;
        width: 100%;
    }
    .aki-json-editor-container button:hover {
        background-color: #e86315;
        transform: translateY(-2px);
    }
    .aki-json-editor-container #interactive-form {
        margin-top: 20px;
        padding: 20px;
        background-color: var(--aki-bg-medium);
        border-radius: 8px;
    }
     .aki-json-editor-container #interactive-form:empty::before {
        content: "Der Editor erscheint hier, nachdem ein gültiges JSON verarbeitet wurde.";
        color: #aab;
        font-style: italic;
    }
    .aki-json-editor-container fieldset {
        border: 1px solid var(--aki-border-color);
        border-radius: 8px;
        padding: 15px;
        margin-bottom: 15px;
    }
    .aki-json-editor-container legend {
        font-weight: bold;
        font-size: 18px;
        padding: 0 10px;
        color: var(--aki-accent-orange);
    }
    .aki-json-editor-container .form-group {
        margin-bottom: 12px;
        display: flex;
        align-items: center;
        flex-wrap: wrap;
        gap: 10px;
    }
    .aki-json-editor-container .form-group label {
        flex: 1 1 150px;
        font-weight: 500;
        color: var(--aki-text-light);
    }
    .aki-json-editor-container .form-group input {
        flex: 2 1 280px;
        padding: 10px;
        border: 1px solid var(--aki-border-color);
        border-radius: 5px;
        background-color: var(--aki-bg-dark);
        color: var(--aki-text-light);
        font-size: 15px;
    }
    .aki-json-editor-container .form-group input[type="color"] {
        padding: 0;
        min-height: 40px;
        flex: 0 1 50px;
    }
    .aki-json-editor-container #error-message {
        color: #ff8a80;
        margin-top: 10px;
        font-weight: bold;
        display: none;
    }
    .aki-json-editor-container .info-box {
        background-color: var(--aki-bg-medium);
        border-left: 4px solid var(--aki-accent-orange);
        padding: 15px;
        margin: 25px 0;
        border-radius: 4px;
    }
    .aki-json-editor-container .info-box code {
        background-color: var(--aki-bg-dark);
        padding: 3px 6px;
        border-radius: 4px;
        font-family: "Courier New", Courier, monospace;
        color: var(--aki-accent-orange);
    }
</style>

<div class="aki-json-editor-container">
    <h2>Dein Weg zum perfekten KI-Bild</h2>

    <div class="info-box">
        <p><strong>Anleitung:</strong></p>
        <ol>
            <li>Fordere von einer KI (z.B. ChatGPT, Gemini) eine Bildbeschreibung im JSON-Format an. Ein guter Prompt ist:
                <br><code>Beschreibe ein Bild [deiner Wahl] als detailliertes JSON. Nutze logische englische Schlüssel wie scene, subjects, style, lighting und camera.</code>
            </li>
            <li>Füge das JSON unten ein und klicke auf "JSON verarbeiten".</li>
            <li>Passe die Bildeigenschaften im interaktiven Editor an.</li>
            <li>Kopiere den neuen JSON-Code und nutze ihn als perfekten Prompt für deine Bilderstellung.</li>
        </ol>
    </div>

    <h3>1. JSON-Code einfügen</h3>
    <textarea id="json-input" placeholder="Fügen Sie hier Ihren JSON-Code ein..."></textarea>
    <button id="process-btn">JSON verarbeiten & Editor starten</button>
    <p id="error-message"></p>

    <h3>2. Bildeigenschaften anpassen</h3>
    <div id="interactive-form"></div>

    <h3>3. Neuen JSON-Code kopieren</h3>
    <textarea id="json-output" readonly placeholder="Ihr bearbeiteter JSON-Code erscheint hier..."></textarea>
</div>

<script>
document.addEventListener('DOMContentLoaded', () => {
    const processBtn = document.getElementById('process-btn');
    const jsonInput = document.getElementById('json-input');
    const jsonOutput = document.getElementById('json-output');
    const formContainer = document.getElementById('interactive-form');
    const errorMessage = document.getElementById('error-message');

    let jsonObject = {};
    
    // --- Internes Wörterbuch für die Übersetzung der Schlüssel ---
    const keyTranslations = {
        "scene": "Szene", "description": "Beschreibung", "subjects": "Subjekte/Objekte",
        "type": "Typ", "position": "Position", "style": "Stil", "color_palette": "Farbpalette",
        "lighting": "Beleuchtung", "mood": "Stimmung", "composition": "Komposition",
        "camera": "Kamera", "angle": "Winkel", "distance": "Distanz", "background": "Hintergrund",
        "sky": "Himmel", "color": "Farbe", "sun": "Sonne", "size": "Größe",
        "main_objects": "Hauptobjekte", "name": "Name", "count": "Anzahl",
        "details": "Details", "state": "Zustand", "reflection": "Spiegelung",
        "setting": "Schauplatz", "mood": "Stimmung", "artistic_style": "Künstlerischer Stil",
        "foreground": "Vordergrund", "midground": "Mittelgrund", "background": "Hintergrund",
        "elements": "Elemente", "specifications": "Spezifikationen"
    };
    
    // --- Beispiel-JSON, das deine empfohlene Struktur nutzt ---
    const placeholderJSON = {
      "scene": "Eine mystische Waldlichtung in der Dämmerung",
      "subjects": [
        {
          "type": "Fuchs",
          "description": "trägt einen kleinen Zauberhut, sitzt auf einem Baumstumpf",
          "position": "Mitte"
        }
      ],
      "style": "Bilderbuch-Illustration",
      "color_palette": [
        "#2E4053", // Waldgrün
        "#FFD700", // Gold
        "#17202A"  // Mitternachtsblau
      ],
      "lighting": "Weiches, gesprenkeltes Sonnenlicht, das durch die Bäume fällt",
      "mood": "Launisch und gemütlich",
      "camera": {
        "angle": "Augenhöhe",
        "distance": "Halbnahaufnahme"
      }
    };
    jsonInput.value = JSON.stringify(placeholderJSON, null, 2);


    processBtn.addEventListener('click', () => {
        errorMessage.style.display = 'none';
        formContainer.innerHTML = '';
        try {
            jsonObject = JSON.parse(jsonInput.value);
            createForm(jsonObject, formContainer, []);
            updateOutput();
        } catch (e) {
            errorMessage.textContent = 'Fehler: Ungültiges JSON-Format. Bitte prüfen Sie den Code.';
            errorMessage.style.display = 'block';
            jsonOutput.value = '';
        }
    });

    function createForm(obj, parentElement, path) {
        const isRoot = path.length === 0;
        const container = isRoot ? parentElement : document.createElement('fieldset');
        
        if (!isRoot) {
            const legend = document.createElement('legend');
            legend.textContent = translateAndFormatKey(path[path.length - 1]);
            container.appendChild(legend);
        }

        for (const key in obj) {
            if (!Object.prototype.hasOwnProperty.call(obj, key)) continue;

            const newPath = [...path, key];
            const value = obj[key];

            if (Array.isArray(value)) {
                // Arrays werden als Textarea dargestellt, da dynamische Felder zu komplex wären.
                createField(translateAndFormatKey(key), JSON.stringify(value, null, 2), 'textarea', container, newPath, true);
            } else if (typeof value === 'object' && value !== null) {
                // Für Objekte rekursiv eine neue Gruppe erstellen
                createForm(value, container, newPath);
            } else {
                // Für einfache Werte (String, Zahl, etc.) ein Input-Feld erstellen
                createField(translateAndFormatKey(key), value, 'input', container, newPath);
            }
        }
        if (!isRoot) {
            parentElement.appendChild(container);
        }
    }

    function createField(labelText, value, type, parentElement, path, isArray = false) {
        const formGroup = document.createElement('div');
        formGroup.className = 'form-group';

        const label = document.createElement('label');
        label.textContent = labelText;
        formGroup.appendChild(label);

        let input;
        if (type === 'textarea') {
            input = document.createElement('textarea');
            input.value = value;
            input.rows = value.split('\n').length + 1; // Höhe anpassen
            // Manuelle Bearbeitung von Arrays ist komplex, daher hier als Textfeld.
            // Zukünftige Erweiterung könnte hier ansetzen.
        } else {
            input = document.createElement('input');
            input.value = value;

            if (typeof value === 'number') {
                input.type = 'number';
                input.step = '0.01';
            } else if (typeof value === 'string' && value.startsWith('#') && (value.length === 7 || value.length === 4)) {
                input.type = 'color';
                const textInput = document.createElement('input');
                textInput.type = 'text';
                textInput.value = value;
                textInput.style.marginLeft = '10px';
                textInput.oninput = (e) => {
                    input.value = e.target.value;
                    updateValue(path, e.target.value);
                };
                input.oninput = (e) => {
                    textInput.value = e.target.value;
                    updateValue(path, e.target.value);
                };
                formGroup.appendChild(input);
                formGroup.appendChild(textInput);
                parentElement.appendChild(formGroup);
                return;
            } else {
                input.type = 'text';
            }
        }

        input.dataset.path = path.join('.');
        input.addEventListener('input', (e) => {
            let newValue = e.target.value;
            if (e.target.type === 'number') {
                newValue = parseFloat(newValue) || 0;
            }
            if(isArray) {
                 try {
                    newValue = JSON.parse(newValue);
                } catch(err) {
                    // Falls JSON ungültig ist, als String belassen
                }
            }
            updateValue(path, newValue);
        });

        formGroup.appendChild(input);
        parentElement.appendChild(formGroup);
    }

    function updateValue(path, value) {
        let current = jsonObject;
        for (let i = 0; i < path.length - 1; i++) {
            current = current[path[i]];
        }
        current[path[path.length - 1]] = value;
        updateOutput();
    }
    
    function updateOutput() {
        jsonOutput.value = JSON.stringify(jsonObject, null, 2);
    }

    function translateAndFormatKey(key) {
        if (keyTranslations[key]) {
            return keyTranslations[key];
        }
        // Fallback: 'camera_angle' -> 'Camera Angle'
        return key.replace(/_/g, ' ').replace(/\b\w/g, l => l.toUpperCase());
    }
});
</script>