what this app code doing? html><head><base href="https://websim.ai"><title>WebSim API Generator</title>
<script src="https://cdn.tailwindcss.com"></script>
<link href="https://cdnjs.cloudflare.com/ajax/libs/prism/1.24.1/themes/prism.min.css" rel="stylesheet" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/prism/1.24.1/prism.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/prism/1.24.1/components/prism-json.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/prism/1.24.1/components/prism-markup.min.js"></script>
<style>
  @keyframes pulse {
    0%, 100% { transform: scale(1); }
    50% { transform: scale(1.1); }
  }
  .loading {
    display: inline-block;
    width: 20px;
    height: 20px;
    border-radius: 50%;
    background-color: #ffffff;
    animation: pulse 1s infinite;
  }
</style>
</head><body class="bg-gray-100 text-gray-800 font-sans">

<div class="container mx-auto px-4 py-8 max-w-4xl">
  <h1 class="text-3xl font-bold text-blue-600 mb-6">WebSim API Generator</h1>

  <div class="mb-6">
    <button id="guide-toggle" class="w-full bg-blue-500 text-white py-2 px-4 rounded hover:bg-blue-600 transition duration-300">How to Use This Tool (Click to Expand)</button>
    <div id="guide-content" class="hidden mt-4 bg-white shadow-md rounded p-6">
      <ol class="list-decimal list-inside space-y-2">
        <li><strong>Input Your Concept:</strong> Describe your API idea, as vague or detailed as you like.</li>
        <li><strong>Generate the API:</strong> Our system will create an API based on your description.</li>
        <li><strong>Test the API:</strong> Use the provided tester to ensure it works as expected. Choose the appropriate Accept header.</li>
        <li><strong>Modify if Needed:</strong> Use the API Enhancer to refine the API's capabilities.</li>
        <li><strong>Copy API Details:</strong> Once satisfied, copy the API details for use in your WebSim prompt.</li>
        <li><strong>Contextual Blending (Advanced):</strong> 
          <ul class="list-disc list-inside ml-4 mt-2">
            <li>Save this site as a bookmark.</li>
            <li>Drag the bookmark to the address bar in your WebSim session.</li>
            <li>In your WebSim prompt, instruct to use this site as documentation to set up all APIs for your site.</li>
            <li>Perfect for quickly adding APIs to your mockup in one go!</li>
          </ul>
        </li>
      </ol>
    </div>
  </div>

  <div class="bg-blue-100 border-l-4 border-blue-500 p-4 mb-6 rounded">
    <p class="font-bold">Welcome to the WebSim API Generator!</p>
    <p>Create and test powerful, context-aware API endpoints for your WebSim projects. Our system can interpret free-form text or structured parameters, adapting to your needs.</p>
    <p class="mt-2"><strong>Pro Tip:</strong> These APIs are aware of the WebSim context they run in, making them inherently more relevant without explicit parameters.</p>
  </div>

  <div class="bg-green-100 border-l-4 border-green-500 p-4 mb-6 rounded">
    <p class="font-bold">Important: Accept Header</p>
    <p>All API endpoints in this system require the Accept header to be explicitly set to one of the following:</p>
    <ul class="list-disc list-inside ml-4 mt-2">
      <li>text/plain</li>
      <li>text/html</li>
      <li>application/json</li>
    </ul>
    <p class="mt-2">The response format will vary based on the Accept header you choose.</p>
  </div>

  <div class="bg-white shadow-md rounded p-6 mb-6">
    <h3 class="text-xl font-semibold text-blue-600 mb-4"><span class="font-bold text-red-500">POST</span> <span class="text-green-500">/api/generate_api</span></h3>
    <p class="mb-4">Generate a powerful, context-aware API endpoint based on your description.</p>
    <form id="api-doc-generator-form">
      <textarea id="api-description" class="w-full p-2 border rounded mb-4" placeholder="Describe the API endpoint you want (e.g., 'Create an API that understands character interactions and generates story events')" required></textarea>
      <textarea id="added-context" class="w-full p-2 border rounded mb-4" placeholder="(Optional) Add any additional context or WebSim-specific details"></textarea>
      <button type="submit" class="bg-blue-500 text-white py-2 px-4 rounded hover:bg-blue-600 transition duration-300">Generate WebSim API <span class="loading hidden"></span></button>
    </form>
    <div id="api-doc-result" class="mt-4 p-4 bg-gray-100 rounded hidden"></div>
  </div>

  <div id="generated-endpoint"></div>

  <div class="bg-blue-50 border border-blue-200 rounded p-6 mt-6">
    <h3 class="text-xl font-semibold text-blue-600 mb-4">API Enhancer</h3>
    <p class="mb-4">Want to expand your API's capabilities? Describe the enhancements, and our system will adapt the API accordingly.</p>
    <form id="api-enhancer-form">
      <textarea id="api-enhancements" class="w-full p-2 border rounded mb-4" placeholder="Describe how you want to enhance the API (e.g., 'Make it understand emotions in character interactions' or 'Add support for multiple languages')" required></textarea>
      <button type="submit" class="bg-blue-500 text-white py-2 px-4 rounded hover:bg-blue-600 transition duration-300">Enhance API <span class="loading hidden"></span></button>
    </form>
    <div id="api-enhancer-result" class="mt-4 p-4 bg-gray-100 rounded hidden"></div>
  </div>
</div>

<script>
const apiCall = async (endpoint, data, acceptHeader) => {
  try {
    const response = await fetch(`/api/${endpoint}`, {
      method: 'POST',
      headers: { 
        'Content-Type': 'application/json', 
        'Accept': acceptHeader 
      },
      body: JSON.stringify(data),
    });
    if (!response.ok) throw new Error(`HTTP error! status: ${response.status}`);
    
    if (acceptHeader === 'application/json') {
      return await response.json();
    } else {
      return await response.text();
    }
  } catch (error) {
    console.error('API call failed:', error);
    throw error;
  }
};

const createAPIDetailsElement = (apiDetails) => {
  const container = document.createElement('div');
  container.className = 'bg-white shadow-md rounded p-6 mb-6';
  
  container.innerHTML = `
    <h3 class="text-xl font-semibold text-blue-600 mb-4"><span class="font-bold text-red-500">${apiDetails.method}</span> <span class="text-green-500">/api/${apiDetails.endpoint}</span></h3>
    <p class="mb-4">${apiDetails.description}</p>
    <h4 class="font-semibold mb-2">Overview:</h4>
    <p class="mb-4">${apiDetails.overview}</p>
    <h4 class="font-semibold mb-2">Input:</h4>
    <p class="mb-4">This API accepts both structured parameters and free-form text. The system will interpret your input contextually.</p>
    <pre class="bg-gray-100 p-4 rounded overflow-x-auto mb-4"><code class="language-json">${JSON.stringify(apiDetails.inputExample, null, 2)}</code></pre>
    <h4 class="font-semibold mb-2">Output:</h4>
    <p class="mb-4">The API returns a response tailored to your input, the WebSim context, and the Accept header. Here's a sample output:</p>
    <pre class="bg-gray-100 p-4 rounded overflow-x-auto mb-4"><code class="language-json">${JSON.stringify(apiDetails.outputExample, null, 2)}</code></pre>
    <div class="bg-yellow-100 border-l-4 border-yellow-500 p-4 mb-4 rounded">
      <p class="font-bold">Important: Accept Header</p>
      <p>This API requires the Accept header to be explicitly set to one of the following:</p>
      <ul class="list-disc list-inside ml-4 mt-2">
        <li>text/plain</li>
        <li>text/html</li>
        <li>application/json</li>
      </ul>
      <p class="mt-2">The response format will vary based on the Accept header you choose.</p>
    </div>
    <div class="bg-green-100 border-l-4 border-green-500 p-4 mb-4 rounded">This API adapts to your input and the WebSim context, providing relevant responses based on the Accept header.</div>
    <div class="bg-yellow-100 border-l-4 border-yellow-500 p-4 mb-4 rounded italic">AI Prompt Note: This API endpoint (/api/${apiDetails.endpoint}) uses advanced techniques to understand and respond to queries. It's aware of the WebSim context and can handle both structured and unstructured input.</div>
    ${apiDetails.addedContext ? `<div class="bg-yellow-100 border-l-4 border-yellow-500 p-4 mb-4 rounded italic">Additional Context: ${apiDetails.addedContext}</div>` : ''}
  `;

  const copyButton = document.createElement('button');
  copyButton.textContent = 'Copy API Details';
  copyButton.className = 'bg-green-500 text-white py-2 px-4 rounded hover:bg-green-600 transition duration-300';
  copyButton.onclick = () => {
    navigator.clipboard.writeText(container.textContent)
      .then(() => {
        copyButton.textContent = 'Copied!';
        setTimeout(() => copyButton.textContent = 'Copy API Details', 2000);
      })
      .catch(err => console.error('Failed to copy text: ', err));
  };
  container.appendChild(copyButton);

  Prism.highlightAllUnder(container);

  return container;
};

const createEndpointTester = (apiDetails) => {
  const container = document.createElement('div');
  container.className = 'bg-white shadow-md rounded p-6 mb-6';
  
  container.innerHTML = `
    <h4 class="text-xl font-semibold text-blue-600 mb-4">Test API Endpoint</h4>
    <div class="bg-green-100 border-l-4 border-green-500 p-4 mb-4 rounded">This API can handle both structured input and free-form text. Feel free to experiment!</div>
    <form class="endpoint-tester-form">
      <textarea name="api_input" placeholder="Enter your query or structured input here" class="w-full p-2 border rounded mb-4" required></textarea>
      <div class="mb-4">
        <label for="accept-header" class="block mb-2">Select Accept Header:</label>
        <select name="accept_header" id="accept-header" class="w-full p-2 border rounded">
          <option value="application/json">application/json</option>
          <option value="text/plain">text/plain</option>
          <option value="text/html">text/html</option>
        </select>
      </div>
      <button type="submit" class="bg-blue-500 text-white py-2 px-4 rounded hover:bg-blue-600 transition duration-300">Send Request <span class="loading hidden"></span></button>
    </form>
    <div class="result mt-4 p-4 bg-gray-100 rounded hidden"></div>
    <div class="html-preview mt-4 p-4 bg-white border rounded hidden"></div>
  `;

  container.querySelector('form').onsubmit = async (e) => {
    e.preventDefault();
    const form = e.target;
    const submitButton = form.querySelector('button[type="submit"]');
    const loadingSpinner = submitButton.querySelector('.loading');
    const resultDiv = container.querySelector('.result');
    const htmlPreviewDiv = container.querySelector('.html-preview');
    
    submitButton.disabled = true;
    loadingSpinner.classList.remove('hidden');

    try {
      const formData = new FormData(form);
      const data = Object.fromEntries(formData.entries());
      const acceptHeader = data.accept_header;
      delete data.accept_header;

      const result = await apiCall(apiDetails.endpoint, data, acceptHeader);

      resultDiv.innerHTML = '';
      htmlPreviewDiv.classList.add('hidden');

      if (acceptHeader === 'application/json') {
        const pre = document.createElement('pre');
        const code = document.createElement('code');
        code.className = 'language-json';
        code.textContent = JSON.stringify(result, null, 2);
        pre.appendChild(code);
        resultDiv.appendChild(pre);
        Prism.highlightElement(code);
      } else if (acceptHeader === 'text/html') {
        const pre = document.createElement('pre');
        const code = document.createElement('code');
        code.className = 'language-markup';
        code.textContent = result;
        pre.appendChild(code);
        resultDiv.appendChild(pre);
        Prism.highlightElement(code);

        htmlPreviewDiv.innerHTML = result;
        htmlPreviewDiv.classList.remove('hidden');
      } else {
        resultDiv.textContent = result;
      }

      resultDiv.classList.remove('hidden');
    } catch (error) {
      resultDiv.textContent = `Error: ${error.message}`;
      resultDiv.classList.remove('hidden');
      htmlPreviewDiv.classList.add('hidden');
    } finally {
      submitButton.disabled = false;
      loadingSpinner.classList.add('hidden');
    }
  };

  return container;
};

document.getElementById('api-doc-generator-form').addEventListener('submit', async function(e) {
  e.preventDefault();
  const submitButton = this.querySelector('button[type="submit"]');
  const loadingSpinner = submitButton.querySelector('.loading');
  
  submitButton.disabled = true;
  loadingSpinner.classList.remove('hidden');

  try {
    const data = {
      description: document.getElementById('api-description').value,
      addedContext: document.getElementById('added-context').value
    };
    const result = await apiCall('generate_api', data, 'application/json');

    const generatedEndpoint = document.getElementById('generated-endpoint');
    generatedEndpoint.innerHTML = '';
    generatedEndpoint.appendChild(createAPIDetailsElement(result));
    generatedEndpoint.appendChild(createEndpointTester(result));

    document.getElementById('api-doc-result').classList.add('hidden');
  } catch (error) {
    const generatedEndpoint = document.getElementById('generated-endpoint');
    generatedEndpoint.innerHTML = `<p class="text-red-500">Error: ${error.message}</p>`;
  } finally {
    submitButton.disabled = false;
    loadingSpinner.classList.add('hidden');
  }
});

document.getElementById('api-enhancer-form').addEventListener('submit', async function(e) {
  e.preventDefault();
  const submitButton = this.querySelector('button[type="submit"]');
  const loadingSpinner = submitButton.querySelector('.loading');
  const resultDiv = document.getElementById('api-enhancer-result');
  
  submitButton.disabled = true;
  loadingSpinner.classList.remove('hidden');

  try {
    const data = {
      enhancements: document.getElementById('api-enhancements').value
    };
    const result = await apiCall('enhance_api', data, 'application/json');

    const generatedEndpoint = document.getElementById('generated-endpoint');
    generatedEndpoint.innerHTML = '';
    generatedEndpoint.appendChild(createAPIDetailsElement(result));
    generatedEndpoint.appendChild(createEndpointTester(result));

    resultDiv.textContent = 'API enhanced successfully. See updated details above.';
    resultDiv.classList.remove('hidden');
  } catch (error) {
    resultDiv.textContent = `Error: ${error.message}`;
    resultDiv.classList.remove('hidden');
  } finally {
    submitButton.disabled = false;
    loadingSpinner.classList.add('hidden');
  }
});

document.getElementById('guide-toggle').addEventListener('click', function() {
  const content = document.getElementById('guide-content');
  content.classList.toggle('hidden');
  this.textContent = content.classList.contains('hidden') 
    ? 'How to Use This Tool (Click to Expand)' 
    : 'How to Use This Tool (Click to Collapse)';
});
</script>

</body></html>