The theme generator now uses AI to produce cohesive animated gradients by deriving both the color palette and motion parameters from a single text prompt.

# Generate a complete theme (colors + animation) from a single prompt.
# 1. First, update your prompt engineering function that communicates with the local LLM.
# The new prompt should request a specific JSON schema.

const createThemePrompt = (description) => {
  // Previously, we only asked for colors.
  // const oldPrompt = `Generate a JSON array of 5 hex color strings for: "${description}".`;

  // Now, we ask for a full theme object including animation parameters.
  const newPrompt = `
    Based on the following description, generate a JSON object for a theme.
    Description: "${description}"
    The JSON object must have two keys:
    1. "colors": an array of 5 hex color strings.
    2. "animation": an object with "style" (string, e.g., 'waves', 'orbs', 'plasma'), "speed" (number, 0.1 to 2.0), and "complexity" (integer, 1 to 5).
    Do not include any other text.
  `;
  return newPrompt;
};

# 2. The LLM will now return a richer JSON object.
# For a prompt like "calm deep ocean waves at midnight", you might get:
# {
#   "colors": ["#000428", "#004e92", "#1a2a6c", "#b21f1f", "#fdbb2d"],
#   "animation": {
#     "style": "waves",
#     "speed": 0.4,
#     "complexity": 2
#   }
# }

# 3. Finally, update your React components to use these new animation parameters.

// Old component signature might have been:
// const AnimatedGradient = ({ colors }) => { ... };

// New component accepts the full theme object.
const AnimatedGradient = ({ theme }) => {
  // Destructure colors and animation parameters from the theme prop.
  const { colors, animation } = theme;

  // Use the new parameters to dynamically style your animation.
  // This is a conceptual example; your implementation may vary.
  const animationStyle = {
    '--animation-speed': `${animation.speed}s`,
    '--animation-complexity': animation.complexity,
  };

  return (
    <div
      className={`gradient-canvas gradient-style-${animation.style}`}
      style={{
        ...animationStyle,
        '--color-1': colors[0],
        '--color-2': colors[1],
        // ...and so on for other colors
      }}
    >
      {/* Your gradient rendering logic here */}
    </div>
  );
};