// Use JS to write HTML and data to the page using document.write()
document.write(`
  <style>
    /* General Body Styling */
    body {
        font-family: 'Poppins', sans-serif;
        margin: 0;
        padding: 0;
        background: linear-gradient(to bottom right, #f4f7fb, #dfe9f3);
        color: #333;
        text-align: center;
    }

    /* Header Styling */
    h1 {
        color: #2b2d42;
        margin-top: 30px;
        font-size: 36px;
        font-weight: bold;
        text-shadow: 1px 1px 3px rgba(0, 0, 0, 0.1);
    }

    p {
        font-size: 18px;
        line-height: 1.6;
        color: #555;
        margin: 10px 0 30px;
    }

    /* Flexbox Centering */
    .container {
        display: flex;
        flex-direction: column;
        align-items: center;
        padding: 20px;
    }

    /* Textarea Styling */
    textarea {
        width: 80%;
        max-width: 600px;
        margin: 20px auto;
        padding: 15px;
        border-radius: 8px;
        border: 2px solid #ddd;
        font-size: 16px;
        box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
        resize: none;
        transition: border-color 0.3s ease, box-shadow 0.3s ease;
    }

    textarea:focus {
        outline: none;
        border-color: #4caf50;
        box-shadow: 0 0 8px rgba(76, 175, 80, 0.5);
    }

    /* Button Styling */
    button {
        background-color: #4caf50;
        color: white;
        padding: 15px 30px;
        font-size: 16px;
        border: none;
        border-radius: 50px;
        cursor: pointer;
        transition: transform 0.3s ease, background-color 0.3s ease, box-shadow 0.3s ease;
        margin-top: 10px;
        display: inline-block;
    }

    button:hover {
        background-color: #45a049;
        transform: translateY(-3px);
        box-shadow: 0 6px 12px rgba(0, 0, 0, 0.2);
    }

    button:active {
        transform: translateY(0);
        box-shadow: 0 3px 6px rgba(0, 0, 0, 0.2);
    }

    /* Results Section Styling */
    .result-section {
        margin-top: 40px;
        width: 80%;
        max-width: 600px;
        background: white;
        padding: 20px;
        border-radius: 12px;
        box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
        text-align: left;
    }

    .result-section h3 {
        color: #2b2d42;
        font-size: 20px;
        margin-bottom: 10px;
    }

    .result-section p {
        font-size: 16px;
        line-height: 1.6;
        color: #444;
        margin: 10px 0;
    }

    /* Hover effect for result sections */
    .result-section:hover {
        box-shadow: 0 6px 18px rgba(0, 0, 0, 0.2);
    }

    /* Footer Styling */
    footer {
        margin-top: 50px;
        font-size: 14px;
        color: #aaa;
        text-align: center;
    }

    footer a {
        color: #4caf50;
        text-decoration: none;
        transition: color 0.3s ease;
    }

    footer a:hover {
        color: #45a049;
        text-decoration: underline;
    }

    /* Responsive Design */
    @media (max-width: 768px) {
        h1 {
            font-size: 28px;
        }

        textarea {
            width: 90%;
        }

        button {
            width: 100%;
        }

        .result-section {
            width: 90%;
        }
    }
  </style>

  <div class="container">
    <h1>Text Summarization using AI APIs</h1>

    <p>
      Enter text below, and the system will summarize it using two different AI models.
    </p>

    <textarea id="inputText" rows="10" placeholder="Enter text to summarize..."></textarea>

    <button onclick="getSummaries()">Summarize</button>

    <div class="result-section">
      <h3>Hugging Face Summary:</h3>
      <p id="hfSummary">Summary will appear here...</p>
    </div>

    <div class="result-section">
      <h3>Cohere AI Summary:</h3>
      <p id="cohereAISummary">Summary will appear here...</p>
    </div>
  </div>

  <footer>
    Built with ❤️ using JavaScript | <a href="https://huggingface.co" target="_blank">Hugging Face</a> | <a href="https://cohere.ai" target="_blank">Cohere AI</a>
  </footer>
`);

// API Keys
const HF_API_KEY = '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';  // Hugging Face API Key
const COHERE_API_KEY = 'M3Cz7SwRD8n6teTdwjBbpT3DvK2HHr9ph7NAcWJD';  // Cohere AI API Key

// Endpoints
const HF_API_URL = 'https://api-inference.huggingface.co/models/facebook/bart-large-cnn';
const COHERE_API_URL = 'https://api.cohere.ai/v1/summarize';  // Cohere AI Summarization endpoint

// Summarize text using Hugging Face API
async function summarizeWithHF(text) {
  try {
    const response = await axios.post(HF_API_URL, 
      { inputs: text },
      {
        headers: {
          'Authorization': `Bearer ${HF_API_KEY}`,
          'Content-Type': 'application/json',
        },
      }
    );
    return response.data[0].summary_text;
  } catch (error) {
    console.error('Hugging Face error:', error.response ? error.response.data : error.message);
    return "Error with Hugging Face summarization.";
  }
}

// Summarize text using Cohere AI API
async function summarizeWithCohereAI(text) {
  try {
    const response = await axios.post(COHERE_API_URL, 
      { text: text },
      {
        headers: {
          'Authorization': `Bearer ${COHERE_API_KEY}`,  // Correct format for Cohere API Key
          'Content-Type': 'application/json',
        },
      }
    );
    if (response.data && response.data.summary) {
      return response.data.summary;
    } else {
      console.error('Unexpected response from Cohere AI:', response.data);
      return "Unexpected response from Cohere AI.";
    }
  } catch (error) {
    console.error('Cohere AI error:', error.response ? error.response.data : error.message);
    return "Error with Cohere AI summarization.";
  }
}

// Main function to compare the results from both APIs
async function getSummaries() {
  const text = document.getElementById('inputText').value;

  if (text.trim() === "") {
    alert("Please enter some text to summarize.");
    return;
  }

  const hfSummary = await summarizeWithHF(text);
  const cohereAISummary = await summarizeWithCohereAI(text);

  document.getElementById('hfSummary').innerText = hfSummary;
  document.getElementById('cohereAISummary').innerText = cohereAISummary;
}

// Include Axios library
const script = document.createElement('script');
script.src = 'https://cdn.jsdelivr.net/npm/axios/dist/axios.min.js';
document.head.appendChild(script);