Capítulo 9 — Personalización y Modificación

1. Estructura del archivo HTML

El archivo contiene tres partes principales:

<head>: Estilos CSS y metadatos.
<body>: Contenido visible (formularios, botones).
<script>: Funciones JavaScript al final.

2. Cómo modificar los estilos (CSS)

Busca la sección <style> dentro de <head>. Puedes cambiar colores, fuentes o espaciado editando las reglas CSS.

Ejemplo: Para cambiar el color principal, busca:

--primary: #3498db;

y cámbialo por:

--primary: #27ae60; /* Verde */

3. Cómo añadir nuevas opciones

Busca bloques como este en el HTML:

<select id="estilo">
  <option value="impresionista">Impresionista</option>
  <option value="realista">Realista</option>
</select>

Para añadir un nuevo estilo, inserta una nueva línea:

<option value="gótico">Gótico</option>

Repite esto para colores, emociones, formatos, etc.

Nota: El "value" debe ser sin tildes ni espacios si se usa en JavaScript. El texto entre las etiquetas es lo que ve el usuario.

4. Cómo modificar el texto del prompt generado

Busca en el JavaScript la función generarPrompt(). Allí verás una línea como esta:

let prompt = `Genera una imagen de ${entorno}, en estilo ${estilo}...`;

Puedes reescribirla completamente. Ejemplo:

let prompt = `IA, crea: ${entorno}, estilo ${estilo}. --ar 16:9`;

5. Cómo añadir función para guardar como .txt

Agrega esta función en la sección de <script>:

function guardarComoTXT() {
    const prompt = document.getElementById('resultado').value;
    if (!prompt) {
        alert('Genera un prompt primero.');
        return;
    }
    const blob = new Blob([prompt], { type: 'text/plain' });
    const url = URL.createObjectURL(blob);
    const a = document.createElement('a');
    a.href = url;
    a.download = 'prompt.txt';
    a.click();
    URL.revokeObjectURL(url);
}

Luego añade un botón en el HTML:

<button onclick="guardarComoTXT()">💾 Guardar Prompt</button>

6. Cómo integrar con una API (avanzado)

Ejemplo básico (requiere API key y backend seguro):

fetch('https://api.midjourney.com/imagen', {
    method: 'POST',
    headers: { 'Authorization': 'Bearer TU_KEY' },
    body: JSON.stringify({ prompt: prompt })
})

Advertencia: Nunca pongas tu API key directamente en el HTML. Usa un backend para proteger tus credenciales.

7. Ideas para extender la herramienta

Guardar historial con localStorage.
Añadir modo oscuro.
Exportar configuraciones a JSON.
Añadir pestañas o acordeones para organizar el contenido.
Convertirlo en PWA (aplicación web instalable).
Añadir más opciones de personalización para los prompts.

Consejo: Siempre trabaja sobre una copia del archivo original. Así no pierdes la versión funcional si algo sale mal.