// Cloned by Sean Adeduntan on 31 Jul 2025 from World "CA138 Practical by Dermot and Sean" by Sean Adeduntan 
// Please leave this clone trail here.

const HF_TOKEN = "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";

// Create your existing header
const header = document.createElement('header');
header.style.backgroundColor = '#333';
header.style.padding = '10px';
header.style.margin = '-10px';
header.style.marginBottom = '10px';
header.style.textAlign = 'center';
header.style.color = 'white';
header.style.fontSize = '30px';
header.appendChild(document.createElement('h1').appendChild(document.createTextNode('AI Comparison')));

// Create main container
const main = document.createElement('main');
main.style.display = 'flex';
main.style.flexDirection = 'column';
main.style.padding = '20px';

// Create input row
const inputRow = document.createElement('div');
inputRow.style.display = 'flex';
inputRow.style.justifyContent = 'center';
inputRow.style.marginBottom = '20px';
inputRow.style.gap = '10px';

const inputBox = document.createElement('textarea');
inputBox.placeholder = 'Give a description of your story...';
inputBox.style.width = '60%';
inputBox.style.height = '80px';
inputBox.style.padding = '10px';
inputBox.style.borderRadius = '5px';
inputBox.style.border = '1px solid #ccc';

const submitBtn = document.createElement('button');
submitBtn.textContent = 'Compare Responses';
submitBtn.style.padding = '10px 20px';
submitBtn.style.backgroundColor = '#4CAF50';
submitBtn.style.color = 'white';
submitBtn.style.border = 'none';
submitBtn.style.borderRadius = '5px';
submitBtn.style.cursor = 'pointer';

inputRow.appendChild(inputBox);
inputRow.appendChild(submitBtn);

// Create output container
const outputContainer = document.createElement('div');
outputContainer.style.display = 'flex';
outputContainer.style.justifyContent = 'space-around';
outputContainer.style.gap = '20px';

function createOutputBox(modelName) {
  const box = document.createElement('div');
  box.style.width = '45%';
  box.style.border = '1px solid #ddd';
  box.style.borderRadius = '5px';
  box.style.padding = '15px';
  box.style.backgroundColor = '#f9f9f9';
  
  const title = document.createElement('h2');
  title.textContent = modelName;
  title.style.marginTop = '0';
  title.style.color = '#333';
  
  const content = document.createElement('div');
  content.id = `${modelName.toLowerCase()}-output`;
  content.style.minHeight = '200px';
  content.style.marginTop = '10px';
  content.style.whiteSpace = 'pre-wrap';
  
  box.appendChild(title);
  box.appendChild(content);
  return box;
}

const qwenOutput = createOutputBox('Qwen');
const deepseekOutput = createOutputBox('DeepSeek');
const judgeOutput = createOutputBox('AI-Judge');

outputContainer.appendChild(qwenOutput);
outputContainer.appendChild(deepseekOutput);
outputContainer.appendChild(judgeOutput);

// Assemble UI
main.appendChild(inputRow);
main.appendChild(outputContainer);
document.body.appendChild(header);
document.body.appendChild(main);

// Query function
function query(data) {
  return fetch(
    "https://router.huggingface.co/v1/chat/completions",
    {
      headers: {
        Authorization: `Bearer ${HF_TOKEN}`,
        "Content-Type": "application/json",
      },
      method: "POST",
      body: JSON.stringify(data),
    }
  ).then(response => response.json());
}

// Handle button click
submitBtn.addEventListener('click', () => {
  const userInput = "Write a story about" + inputBox.value.trim();
  
  if (!userInput) {
    alert('Please enter a question');
    return;
  }
  
  // Set loading states
  document.getElementById('qwen-output').textContent = 'Loading response...';
  document.getElementById('deepseek-output').textContent = 'Loading response...';
  document.getElementById('ai-judge-output').textContent = 'Waiting for comparison...';
  
  // Disable button during request
  submitBtn.disabled = true;
  submitBtn.textContent = 'Processing...';
  submitBtn.style.backgroundColor = '#cccccc';
  
  // Query both models
  const qwenPromise = query({
    messages: [{ role: "user", content: userInput }],
    model: "Qwen/Qwen3-Coder-30B-A3B-Instruct:fireworks-ai"
  });
  
  const deepseekPromise = query({
    messages: [{ role: "user", content: userInput }],
    model: "deepseek-ai/DeepSeek-V3:fireworks-ai"
  });
  
  // Process responses
  Promise.all([qwenPromise, deepseekPromise])
    .then(([qwenResponse, deepseekResponse]) => {
      document.getElementById('qwen-output').textContent = 
        qwenResponse.choices[0].message.content;
      document.getElementById('deepseek-output').textContent = 
        deepseekResponse.choices[0].message.content;
      // Create prompt for judge
      const judgePrompt = `Act as an impartial judge. Compare these two responses to the prompt: "${userInput}"\n\n` +
                         `Qwen Response:\n${qwenResponse.choices[0].message.content}\n\n` +
                         `DeepSeek Response:\n${deepseekResponse.choices[0].message.content}\n\n` +
                         `Which response is better?. ` +
                         `Provide a detailed analysis and make a definitive decision on which is better. Answer in plain text`;
      return query({
        messages: [{ role: "user", content: judgePrompt }],
        model: "zai-org/GLM-4.5:fireworks-ai"
      }).then(judgeResponse => {
        document.getElementById('ai-judge-output').textContent = 
          judgeResponse.choices[0].message.content;
      });
    })
    .catch(error => {
      console.error("Error:", error);
      document.getElementById('qwen-output').textContent = 'Error loading response';
      document.getElementById('deepseek-output').textContent = 'Error loading response';
      document.getElementById('ai-judge-output').textContent = 'Error in judgment process';
    })
    .finally(() => {
      submitBtn.disabled = false;
      submitBtn.textContent = 'Compare Responses';
      submitBtn.style.backgroundColor = '#4CAF50';
    });
});

document.body.appendChild(header);
document.body.appendChild(main);