Make it so that it understands color theory prompt it to understand also a bug I don’t want the color inspo the ai to make it that’s the user part the user can add or delete the colors, these colors get send to ai saying you must use this color and other colors that go along that follow the prompt, now write the full complete code and fix this issue <!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Generative Recolorer</title>
<style>
  body {
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Oxygen', 'Ubuntu', 'Cantarell', 'Fira Sans', 'Droid Sans', 'Helvetica Neue', sans-serif;
    margin: 0;
    padding: 0;
    background-color: #ffffff;
    color: #37352f;
    line-height: 1.5;
  }
  .container {
    max-width: 900px;
    margin: 0 auto;
    padding: 20px;
  }
  h1 {
    font-size: 40px;
    font-weight: 700;
    margin-bottom: 20px;
    border-bottom: 1px solid #e0e0e0;
    padding-bottom: 10px;
  }
  #svg-container {
    margin-top: 20px;
    border: 1px solid #e0e0e0;
    border-radius: 3px;
    width: 100%;
    height: 300px;
    overflow: auto;
    background-color: #f7f6f3;
    display: flex;
    justify-content: center;
    align-items: center;
  }
  #svg-container svg {
    max-width: 100%;
    max-height: 100%;
    width: auto;
    height: auto;
  }
  #controls {
    margin-top: 20px;
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
  }
  .color-picker {
    flex: 0 0 calc(50% - 5px);
    display: flex;
    align-items: center;
    background-color: #f7f6f3;
    padding: 8px;
    border-radius: 3px;
    box-sizing: border-box;
    transition: background-color 0.2s ease;
  }
  .color-picker:hover {
    background-color: #ebeced;
  }
  .color-picker label {
    flex: 1;
    font-size: 14px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    margin-right: 10px;
    color: #37352f;
  }
  .color-picker input[type="color"] {
    width: 24px;
    height: 24px;
    border: none;
    border-radius: 3px;
    background: none;
    cursor: pointer;
  }
  #fileInput {
    margin-bottom: 20px;
    font-size: 14px;
  }
  .button {
    display: inline-block;
    padding: 6px 12px;
    background-color: #e16259;
    color: white;
    border: none;
    border-radius: 3px;
    font-size: 14px;
    cursor: pointer;
    transition: background-color 0.3s;
  }
  .button:hover {
    background-color: #c54f47;
  }
  .file-input-wrapper {
    position: relative;
    overflow: hidden;
    display: inline-block;
  }
  .file-input-wrapper input[type=file] {
    font-size: 100px;
    position: absolute;
    left: 0;
    top: 0;
    opacity: 0;
    cursor: pointer;
  }
  .notion-button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    height: 32px;
    padding: 0 12px;
    font-size: 14px;
    line-height: 1;
    color: rgb(55, 53, 47);
    background: rgb(255, 255, 255);
    border: 1px solid rgb(55, 53, 47);
    border-radius: 3px;
    box-shadow: rgb(15 15 15 / 10%) 0px 1px 2px;
    transition: background 20ms ease-in 0s;
    cursor: pointer;
    white-space: nowrap;
  }
  .notion-button:hover {
    background: rgba(55, 53, 47, 0.08);
  }
  #chat-container {
    margin-top: 20px;
    border: 1px solid #e0e0e0;
    border-radius: 3px;
    height: 300px;
    display: flex;
    flex-direction: column;
  }
  #chat-messages {
    flex: 1;
    overflow-y: auto;
    padding: 10px;
  }
  #chat-input {
    display: flex;
    padding: 10px;
    border-top: 1px solid #e0e0e0;
  }
  #chat-input input {
    flex: 1;
    padding: 5px;
    border: 1px solid #e0e0e0;
    border-radius: 3px;
  }
  #chat-input button {
    margin-left: 10px;
  }
  .message {
    margin-bottom: 10px;
  }
  .user-message {
    text-align: right;
    color: #2b6cb0;
  }
  .ai-message {
    text-align: left;
    color: #2d3748;
  }
  #color-inspo {
    margin-top: 20px;
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
  }
  .color-swatch {
    width: 50px;
    height: 50px;
    border-radius: 5px;
    cursor: pointer;
  }
  #add-color-btn {
    width: 50px;
    height: 50px;
    border-radius: 5px;
    background-color: #f0f0f0;
    border: 2px dashed #ccc;
    cursor: pointer;
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: 24px;
  }
</style>
</head>
<body>

<div class="container">
  <h1>Generative Recolorer</h1>
  
  <div class="file-input-wrapper">
    <button class="notion-button">Upload SVG File</button>
    <input type="file" id="fileInput" accept=".svg" />
  </div>

  <div id="controls">
    <!-- Color pickers will be dynamically added here -->
  </div>

  <div id="svg-container">
    <p>No file selected.</p>
  </div>

  <h2>Color Inspiration</h2>
  <div id="color-inspo">
    <div id="add-color-btn">+</div>
  </div>

  <div id="chat-container">
    <div id="chat-messages"></div>
    <div id="chat-input">
      <input type="text" id="user-input" placeholder="Describe your desired color scheme...">
      <button class="notion-button" onclick="sendMessage()">Generate Palette</button>
    </div>
  </div>
  
  <button id="next-inspo" class="notion-button" style="margin-top: 10px;">Next Inspo</button>
</div>

<script>
  const fileInput = document.getElementById('fileInput');
  const svgContainer = document.getElementById('svg-container');
  const controls = document.getElementById('controls');
  const chatMessages = document.getElementById('chat-messages');
  const userInput = document.getElementById('user-input');
  const colorInspo = document.getElementById('color-inspo');
  const addColorBtn = document.getElementById('add-color-btn');
  const nextInspoBtn = document.getElementById('next-inspo');
  let svgContent = '';
  let colorMap = {};
  let chatHistory = [];

  const GROQ_API_KEY = '<TRUFFLEHOG_REDACTED_GROQ>';
  const GROQ_API_URL = 'https://api.groq.com/openai/v1/chat/completions';

  fileInput.addEventListener('change', function() {
    const file = this.files[0];

    if (file && file.type === 'image/svg+xml') {
      const reader = new FileReader();

      reader.addEventListener('load', function(e) {
        svgContent = e.target.result;
        svgContainer.innerHTML = svgContent;

        // Parse the SVG content
        const parser = new DOMParser();
        const svgDoc = parser.parseFromString(svgContent, 'image/svg+xml');

        // Get all elements with 'fill' or 'stroke' attributes
        const elements = svgDoc.querySelectorAll('[fill], [stroke]');
        colorMap = {};

        elements.forEach(el => {
          ['fill', 'stroke'].forEach(attr => {
            const color = el.getAttribute(attr);
            if (color && !color.startsWith('url(') && color !== 'none' && !color.startsWith('#0000')) {
              colorMap[color] = color;
            }
          });
        });

        // Remove previous controls
        controls.innerHTML = '';

        // Add color pickers for each unique color
        Object.keys(colorMap).forEach(color => {
          const div = document.createElement('div');
          div.className = 'color-picker';

          const label = document.createElement('label');
          label.textContent = color;
          div.appendChild(label);

          const input = document.createElement('input');
          input.type = 'color';
          input.value = color.startsWith('#') ? color : rgbToHex(color);
          input.dataset.originalColor = color;
          input.addEventListener('input', updateColors);
          div.appendChild(input);

          controls.appendChild(div);
        });

        // Adjust SVG size
        const svgElement = svgContainer.querySelector('svg');
        if (svgElement) {
          svgElement.style.maxWidth = '100%';
          svgElement.style.maxHeight = '100%';
          svgElement.style.width = 'auto';
          svgElement.style.height = 'auto';
        }
      });

      reader.readAsText(file);
    } else {
      svgContainer.innerHTML = '<p>Please select a valid SVG file.</p>';
    }
  });

  function updateColors() {
    // Replace colors in svgContent
    let updatedSvg = svgContent;
    const inputs = controls.querySelectorAll('input[type="color"]');
    inputs.forEach(input => {
      const originalColor = input.dataset.originalColor;
      const newColor = input.value;
      const regex = new RegExp(originalColor.replace(/[.*+?^${}()|[\]\\]/g, '\\$&'), 'gi');
      updatedSvg = updatedSvg.replace(regex, newColor);
    });

    svgContainer.innerHTML = updatedSvg;

    // Adjust SVG size
    const svgElement = svgContainer.querySelector('svg');
    if (svgElement) {
      svgElement.style.maxWidth = '100%';
      svgElement.style.maxHeight = '100%';
      svgElement.style.width = 'auto';
      svgElement.style.height = 'auto';
    }
  }

  function rgbToHex(rgb) {
    // Convert 'rgb(r, g, b)' to '#rrggbb'
    const result = rgb.match(/\d+/g);
    if (result) {
      return '#' + result.map(x => {
        const hex = parseInt(x).toString(16);
        return hex.length === 1 ? '0' + hex : hex;
      }).join('');
    }
    return '#000000';
  }

  async function sendMessage() {
    const message = userInput.value.trim();
    if (message) {
      // Display user message
      displayMessage(message, 'user-message');
      userInput.value = '';

      // Get current color palette
      const swatches = document.querySelectorAll('.color-swatch');
      const currentColors = Array.from(swatches).map(swatch => swatch.dataset.color);
      const colorString = currentColors.join(', ');

      // Add user message to chat history
      chatHistory.push({ role: 'user', content: message });

      try {
        const response = await fetch(GROQ_API_URL, {
          method: 'POST',
          headers: {
            'Content-Type': 'application/json',
            'Authorization': `Bearer ${GROQ_API_KEY}`
          },
          body: JSON.stringify({
            model: 'llama-3.1-70b-versatile',
            messages: [
              { role: 'system', content: 'You are a color palette generator. Given a description and existing colors, generate a matching and aesthetic color palette with hex codes.' },
              ...chatHistory,
              { role: 'user', content: `Current colors: ${colorString}. Generate a color palette for: ${message}. Provide 5 hex color codes that work well together and match the description.` }
            ]
          })
        });

        const data = await response.json();
        const aiMessage = data.choices[0].message.content;
        displayMessage(aiMessage, 'ai-message');

        // Add AI message to chat history
        chatHistory.push({ role: 'assistant', content: aiMessage });

        // Extract hex codes from the AI message
        const hexCodes = aiMessage.match(/#[0-9A-Fa-f]{6}/g);
        if (hexCodes) {
          applyColorPalette(hexCodes);
        }
      } catch (error) {
        console.error('Error:', error);
        displayMessage('Sorry, there was an error processing your request.', 'ai-message');
      }
    }
  }

  function displayMessage(message, className) {
    const messageElement = document.createElement('div');
    messageElement.textContent = message;
    messageElement.className = `message ${className}`;
    chatMessages.appendChild(messageElement);
    chatMessages.scrollTop = chatMessages.scrollHeight;
  }

  function applyColorPalette(hexCodes) {
    // Clear existing color swatches
    const existingSwatches = document.querySelectorAll('.color-swatch');
    existingSwatches.forEach(swatch => swatch.remove());

    // Add new color swatches
    hexCodes.forEach(color => {
      const swatch = document.createElement('div');
      swatch.className = 'color-swatch';
      swatch.style.backgroundColor = color;
      swatch.dataset.color = color;
      swatch.addEventListener('click', function() {
        this.remove();
      });
      colorInspo.insertBefore(swatch, addColorBtn);
    });

    // Update SVG colors
    const colorInputs = controls.querySelectorAll('input[type="color"]');
    colorInputs.forEach((input, index) => {
      if (index < hexCodes.length) {
        input.value = hexCodes[index];
      }
    });
    updateColors();
  }

  userInput.addEventListener('keypress', function(e) {
    if (e.key === 'Enter') {
      sendMessage();
    }
  });

  addColorBtn.addEventListener('click', function() {
    const colorPicker = document.createElement('input');
    colorPicker.type = 'color';
    colorPicker.style.display = 'none';
    document.body.appendChild(colorPicker);

    colorPicker.addEventListener('change', function() {
      const swatch = document.createElement('div');
      swatch.className = 'color-swatch';
      swatch.style.backgroundColor = this.value;
      swatch.dataset.color = this.value;
      swatch.addEventListener('click', function() {
        this.remove();
      });
      colorInspo.insertBefore(swatch, addColorBtn);
      document.body.removeChild(this);
    });

    colorPicker.click();
  });

  nextInspoBtn.addEventListener('click', function() {
    // Clear chat history
    chatHistory = [];
    
    // Clear chat messages
    chatMessages.innerHTML = '';
    
    // Clear color swatches
    const existingSwatches = document.querySelectorAll('.color-swatch');
    existingSwatches.forEach(swatch => swatch.remove());
    
    // Display a message indicating a fresh start
    displayMessage('Chat history cleared. Ready for new inspiration!', 'ai-message');
  });
</script>

</body>
</html>