worker,js

// Configuration variables
const DEFAULT_API_URL = "https://api.groq.com/openai/v1/chat/completions";
const DEFAULT_MODEL = "llama-3.2-90b-text-preview";

async function makeApiCall(messages, maxTokens, apiUrl, apiKey, model, isFinalAnswer = false) {
  for (let attempt = 0; attempt < 3; attempt++) {
    try {
      const data = {
        model: model,
        messages: messages,
        max_tokens: maxTokens,
        temperature: 0.2,
        response_format: { type: "json_object" }
      };
      const headers = {
        "Content-Type": "application/json",
        "Authorization": `Bearer ${apiKey}`
      };
      const response = await fetch(apiUrl, {
        method: 'POST',
        headers: headers,
        body: JSON.stringify(data)
      });
      
      if (!response.ok) {
        throw new Error(`HTTP error! status: ${response.status}`);
      }
      
      const result = await response.json();
      return JSON.parse(result.choices[0].message.content);
    } catch (e) {
      if (attempt === 2) {
        if (isFinalAnswer) {
          return { title: "Error", content: `Failed to generate final answer after 3 attempts. Error: ${e.message}` };
        } else {
          return { title: "Error", content: `Failed to generate step after 3 attempts. Error: ${e.message}`, next_action: "final_answer" };
        }
      }
      await new Promise(resolve => setTimeout(resolve, 1000)); // Wait 1 second before retrying
    }
  }
}

async function* generateResponse(prompt, apiUrl, apiKey, model) {
  const messages = [
    {role: "system", content: `You are an expert AI assistant that explains your reasoning step by step. For each step, provide a title that describes what you're doing in that step, along with the content. Decide if you need another step or if you're ready to give the final answer. Respond in JSON format with 'title', 'content', and 'next_action' (either 'continue' or 'final_answer') keys. USE AS MANY REASONING STEPS AS POSSIBLE. AT LEAST 3. BE AWARE OF YOUR LIMITATIONS AS AN LLM AND WHAT YOU CAN AND CANNOT DO. IN YOUR REASONING, INCLUDE EXPLORATION OF ALTERNATIVE ANSWERS. CONSIDER YOU MAY BE WRONG, AND IF YOU ARE WRONG IN YOUR REASONING, WHERE IT WOULD BE. FULLY TEST ALL OTHER POSSIBILITIES. YOU CAN BE WRONG. WHEN YOU SAY YOU ARE RE-EXAMINING, ACTUALLY RE-EXAMINE, AND USE ANOTHER APPROACH TO DO SO. DO NOT JUST SAY YOU ARE RE-EXAMINING. USE AT LEAST 3 METHODS TO DERIVE THE ANSWER. USE BEST PRACTICES.

Example of a valid JSON response:\`\`\`json
{
    "title": "Identifying Key Information",
    "content": "To begin solving this problem, we need to carefully examine the given information and identify the crucial elements that will guide our solution process. This involves...",
    "next_action": "continue"
}\`\`\``},
    {role: "user", content: prompt},
    {role: "assistant", content: "Thank you! I will now think step by step following my instructions, starting at the beginning after decomposing the problem."}
  ];
  
  const steps = [];
  let stepCount = 1;
  let totalThinkingTime = 0;
  
  while (true) {
    const startTime = Date.now();
    const stepData = await makeApiCall(messages, 300, apiUrl, apiKey, model);
    const endTime = Date.now();
    const thinkingTime = (endTime - startTime) / 1000;
    totalThinkingTime += thinkingTime;
    
    steps.push([`Step ${stepCount}: ${stepData.title}`, stepData.content, thinkingTime]);
    
    messages.push({role: "assistant", content: JSON.stringify(stepData)});
    
    if (stepData.next_action === 'final_answer' || stepCount > 25) {
      break;
    }
    
    stepCount++;

    // Yield after each step
    yield { steps, totalThinkingTime: null };
  }

  // Generate final answer
  messages.push({role: "user", content: "Please provide the final answer based on your reasoning above."});
  
  const startTime = Date.now();
  const finalData = await makeApiCall(messages, 200, apiUrl, apiKey, model, true);
  const endTime = Date.now();
  const thinkingTime = (endTime - startTime) / 1000;
  totalThinkingTime += thinkingTime;
  
  steps.push(["Final Answer", finalData.content, thinkingTime]);

  yield { steps, totalThinkingTime };
}

async function handleRequest(request) {
  if (request.method === 'POST') {
    const { query, apiUrl, apiKey, model } = await request.json();

    if (!query || !apiKey) {
      return new Response('Please provide query and apiKey', { status: 400 });
    }

    const stream = new ReadableStream({
      async start(controller) {
        const encoder = new TextEncoder();
        for await (const { steps, totalThinkingTime } of generateResponse(query, apiUrl || DEFAULT_API_URL, apiKey, model || DEFAULT_MODEL)) {
          const response = {
            steps: steps.map(([title, content, thinkingTime]) => ({ title, content, thinkingTime })),
            totalThinkingTime
          };
          controller.enqueue(encoder.encode(JSON.stringify(response) + '\n'));
        }
        controller.close();
      }
    });

    return new Response(stream, {
      headers: {
        'Content-Type': 'application/json',
        'Transfer-Encoding': 'chunked'
      }
    });
  } else {
    // Return a simple HTML page for input
    return new Response(`
      <!DOCTYPE html>
      <html lang="en">
      <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <title>AI Query Interface</title>
        <script src="https://cdn.tailwindcss.com"></script>
      </head>
      <body class="bg-gray-100 p-8 transition-colors duration-200">
        <div id="container" class="max-w-5xl mx-auto bg-white rounded-xl shadow-md overflow-hidden p-6 transition-colors duration-200">
          <div class="flex justify-between items-center mb-4">
            <h1 class="text-2xl font-bold text-gray-900">AI Query Interface</h1>
          </div>
          <form id="queryForm" class="space-y-4">
            <div>
              <label for="apiUrl" class="block text-sm font-medium text-gray-700">API URL:</label>
              <input type="text" id="apiUrl" name="apiUrl" value="${DEFAULT_API_URL}" class="mt-1 block w-full rounded-md border-gray-300 shadow-sm focus:border-indigo-300 focus:ring focus:ring-indigo-200 focus:ring-opacity-50">
            </div>
            <div>
              <label for="apiKey" class="block text-sm font-medium text-gray-700">API Key:</label>
              <input type="password" id="apiKey" name="apiKey" required class="mt-1 block w-full rounded-md border-gray-300 shadow-sm focus:border-indigo-300 focus:ring focus:ring-indigo-200 focus:ring-opacity-50">
            </div>
            <div>
              <label for="model" class="block text-sm font-medium text-gray-700">Model:</label>
              <input type="text" id="model" name="model" value="${DEFAULT_MODEL}" class="mt-1 block w-full rounded-md border-gray-300 shadow-sm focus:border-indigo-300 focus:ring focus:ring-indigo-200 focus:ring-opacity-50">
            </div>
            <div>
              <label for="query" class="block text-sm font-medium text-gray-700">Query:</label>
              <textarea id="query" name="query" required class="mt-1 block w-full rounded-md border-gray-300 shadow-sm focus:border-indigo-300 focus:ring focus:ring-indigo-200 focus:ring-opacity-50" rows="3"></textarea>
            </div>
            <button type="submit" class="w-full bg-blue-500 hover:bg-blue-700 text-white font-bold py-2 px-4 rounded">
              Submit Query
            </button>
          </form>
          <div id="result" class="mt-6"></div>
        </div>
        <script>
          document.getElementById('queryForm').addEventListener('submit', async (e) => {
            e.preventDefault();
            const resultDiv = document.getElementById('result');
            resultDiv.innerHTML = 'Processing...';
            const formData = new FormData(e.target);
            const response = await fetch('', {
              method: 'POST',
              headers: {
                'Content-Type': 'application/json',
              },
              body: JSON.stringify(Object.fromEntries(formData)),
            });
            const reader = response.body.getReader();
            resultDiv.innerHTML = '';
            let stepCount = 0;
            while (true) {
              const { done, value } = await reader.read();
              if (done) break;
              const text = new TextDecoder().decode(value);
              const lines = text.split('\\n');
              for (const line of lines) {
                if (line.trim()) {
                  const data = JSON.parse(line);
                  data.steps.forEach((step, index) => {
                    if (index >= stepCount) {
                      const stepDiv = document.createElement('div');
                      stepDiv.innerHTML = \`<h3 class="font-bold mt-4">\${step.title}</h3><p>\${step.content}</p><p class="text-sm text-gray-500">Thinking time: \${step.thinkingTime.toFixed(2)}s</p>\`;
                      resultDiv.appendChild(stepDiv);
                      stepCount++;
                    }
                  });
                  if (data.totalThinkingTime !== null) {
                    const totalTimeDiv = document.createElement('div');
                    totalTimeDiv.innerHTML = \`<p class="font-bold mt-4">Total thinking time: \${data.totalThinkingTime.toFixed(2)}s</p>\`;
                    resultDiv.appendChild(totalTimeDiv);
                  }
                }
              }
            }
          });
        </script>
      </body>
      </html>
    `, {
      headers: { 'Content-Type': 'text/html' },
    });
  }
}

addEventListener('fetch', event => {
  event.respondWith(handleRequest(event.request));
});