document.write(`
  <h1>Another World for ChatGPT API</h1>
  <div style="margin: 20px; padding: 20px;">

    <h3>Select a World-Famous Historical Place</h3>

    <!-- Dropdown list of historical places -->
    <select id="historicalPlaces">
      <option value="eiffelTower">Eiffel Tower</option>
      <option value="pyramids">Pyramids of Giza</option>
      <option value="colosseum">Colosseum</option>
      <!-- Add more options as needed -->
    </select>

    <button onclick="drawSelectedPlace();" class="ab-normbutton"> Draw Selected Place</button>

    <pre></pre>

    <div id="drawing-section" style="width: 60vw; height: 60vh; background-color: #ccffff; border: 1px solid black; margin: 20; padding: 20px;">
      <h3> Drawing Section </h3>
      <!-- Drawing will be displayed here -->
    </div>

    <style>
      body {
        margin: 20px;
        padding: 20px;
      }

      select, button {
        margin-top: 10px;
      }

      #drawing-section {
        margin-top: 20px;
      }
    </style>

    <script src="https://unpkg.com/three@r133/build/three.js"></script>

    <script>
      function drawSelectedPlace() {
        // Get the selected historical place from the dropdown
        var selectedPlace = document.getElementById("historicalPlaces").value;

        // Construct a prompt for ChatGPT
        var prompt = 'Draw the ' + selectedPlace + ' using Three.js';

        // Construct request as JSON
        var thedata = {
          "model": "gpt-3.5-turbo",
          "temperature": 0.7,
          "messages": [{
            "role": "user",
            "content": prompt
          }]
        };

        // Then as string representing that JSON:
        var thedatastring = JSON.stringify(thedata);

        // HTTP headers must be set up with API key
        var apikey = "[Your-ChatGPT-API-Key]";

        var headers = new Headers({
          "Content-Type": "application/json",
          "Authorization": "Bearer " + apikey
        });

        // POST to 3rd party URL
        fetch("https://api.openai.com/v1/chat/completions", {
          method: "POST",
          headers: headers,
          body: thedatastring
        })
        .then(response => response.json())
        .then(data => successfn(data))
        .catch(() => errorfn());
      }

      function successfn(data) {
        var answer = data["choices"][0].message.content;
        renderDrawing(answer);
      }

      function errorfn() {
        document.getElementById("drawing-section").innerHTML = "<font color=red><b>Failed to generate drawing. Please try again.</b></font>";
      }

      function renderDrawing(generatedCode) {
        // Clear previous content in the container
        document.getElementById("drawing-section").innerHTML = '';

        // Create a script element to contain the generated code
        const script = document.createElement('script');
        script.type = 'module';
        script.text = generatedCode;

        // Append the script element to the body
        document.body.appendChild(script);

        // Remove the script element after execution
        script.remove();
      }
    </script>
  </div>
`);