Spaces:

Ivan000
/

Web-page-generator

Running

File size: 11,673 Bytes

<html>

<head>
  <base href="https://websim.ai/">
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>WebSim inside WebSim</title>
  <style>
    body {
      font-family: Arial, sans-serif;
      margin: 0;
      padding: 0;
      background-color: #f0f0f0;
    }

    #header {
      background-color: #333;
      color: white;
      padding: 10px;
      display: flex;
      justify-content: space-between;
      align-items: center;
    }

    #prompt-input {
      flex-grow: 1;
      margin-right: 10px;
      padding: 5px;
      font-size: 16px;
    }

    #generate-btn,
    #settings-btn {
      background-color: #4CAF50;
      border: none;
      color: white;
      padding: 5px 10px;
      text-align: center;
      text-decoration: none;
      display: inline-block;
      font-size: 16px;
      margin: 4px 2px;
      cursor: pointer;
    }

    #settings-modal {
      display: none;
      position: fixed;
      z-index: 1;
      left: 0;
      top: 0;
      width: 100%;
      height: 100%;
      overflow: auto;
      background-color: rgba(0, 0, 0, 0.4);
    }

    .modal-content {
      background-color: #fefefe;
      margin: 15% auto;
      padding: 20px;
      border: 1px solid #888;
      width: 80%;
      max-width: 500px;
    }

    #result {
      margin: 20px;
      padding: 20px;
      background-color: white;
      border-radius: 5px;
      box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
    }

    .close {
      color: #aaa;
      float: right;
      font-size: 28px;
      font-weight: bold;
    }

    .close:hover,
    .close:focus {
      color: black;
      text-decoration: none;
      cursor: pointer;
    }

    #system-prompt {
      width: 100%;
      height: 100px;
      margin-top: 10px;
    }

    #loading {
      display: none;
      position: fixed;
      top: 50%;
      left: 50%;
      transform: translate(-50%, -50%);
    }

    .spinner {
      width: 50px;
      height: 50px;
      border: 5px solid #f3f3f3;
      border-top: 5px solid #3498db;
      border-radius: 50%;
      animation: spin 1s linear infinite;
    }

    @keyframes spin {
      0% {
        transform: rotate(0deg);
      }

      100% {
        transform: rotate(360deg);
      }
    }

    #original-response {
      margin-top: 20px;
      padding: 10px;
      background-color: #f9f9f9;
      border: 1px solid #ddd;
      border-radius: 5px;
    }

    #copy-btn,
    #reset-settings-btn {
      margin-top: 10px;
      padding: 5px 10px;
      background-color: #008CBA;
      color: white;
      border: none;
      border-radius: 3px;
      cursor: pointer;
    }

    #reset-settings-btn {
      background-color: #f44336;
    }

    #max-tokens {
      width: 100px;
      padding: 5px;
      font-size: 16px;
    }

    #model-select {
      margin-top: 10px;
      padding: 5px;
      font-size: 16px;
    }
  </style>
</head>

<body>
  <div id="header">
    <input type="text" id="prompt-input" placeholder="Enter website description...">
    <button id="generate-btn">Generate</button>
    <button id="settings-btn">Settings</button>
  </div>

  <div id="settings-modal">
    <div class="modal-content">
      <span class="close">&times;</span>
      <h2>Settings</h2>
      <label for="huggingface-token">Hugging Face Token:</label>
      <input type="text" id="huggingface-token">
      <br><br>
      <label for="model-select">Select Model:</label>
      <select id="model-select">
        <option value="codellama/CodeLlama-34b-Instruct-hf">CodeLlama-34b-Instruct-hf</option>
        <option value="mistralai/Mistral-Small-Instruct-2409">Mistral-Small-Instruct-2409</option>
        <option value="microsoft/Phi-3.5-mini-instruct">Phi-3.5-mini-instruct</option>
        <option value="01-ai/Yi-1.5-34B-Chat">Yi-1.5-34B-Chat</option>
        <option value="google/gemma-2-27b-it">Gemma-2-27b-it</option>
        <option value="meta-llama/Meta-Llama-3-8B-Instruct">Meta-Llama-3-8B-Instruct</option>
        <option value="HuggingFaceH4/zephyr-7b-beta">Zephyr-7b-beta</option>
      </select>
      <br><br>
      <label for="max-tokens">Max Tokens:</label>
      <input type="number" id="max-tokens" min="1" value="1000">
      <br><br>
      <label for="system-prompt">System prompt:</label>
      <textarea id="system-prompt">Do not write any comments to your code, do not write anything before or after the code itself. Write HTML, CSS, and JavaScript in a single file. Generate only complete, working code without abbreviations or omissions. Do not use markdown code blocks (```) or any similar formatting. You are strictly prohibited from providing any explanations, comments, or any text that is not part of the actual code, including any statements after the code.</textarea>
      <br><br>
      <button id="save-settings">Save</button>
      <button id="reset-settings-btn">Reset to Default</button>
    </div>
  </div>

  <div id="result"></div>

  <div id="original-response"></div>
  <button id="copy-btn" style="display: none;">Copy Original Response</button>

  <div id="loading">
    <div class="spinner"></div>
  </div>

  <script>
    let currentPrompt = '';
    let currentCode = '';
    let selectedModel = localStorage.getItem('selectedModel') || "codellama/CodeLlama-34b-Instruct-hf";
    let huggingFaceToken = localStorage.getItem('huggingFaceToken') || "";
    const defaultSystemPrompt = "Do not write any comments to your code, do not write anything before or after the code itself. Write HTML, CSS, and JavaScript in a single file. Generate only complete, working code without abbreviations or omissions. Do not use markdown code blocks (```) or any similar formatting. You are strictly prohibited from providing any explanations, comments, or any text that is not part of the actual code, including any statements after the code.";
    let systemPrompt = localStorage.getItem('systemPrompt') || defaultSystemPrompt;
    let maxTokens = localStorage.getItem('maxTokens') || 1000;

    document.getElementById('settings-btn')
      .addEventListener('click', function() {
        document.getElementById('settings-modal')
          .style.display = 'block';
        document.getElementById('huggingface-token')
          .value = huggingFaceToken;
        document.getElementById('model-select')
          .value = selectedModel;
        document.getElementById('system-prompt')
          .value = systemPrompt;
        document.getElementById('max-tokens')
          .value = maxTokens;
      });

    document.getElementsByClassName('close')[0].addEventListener('click', function() {
      document.getElementById('settings-modal')
        .style.display = 'none';
    });

    document.getElementById('save-settings')
      .addEventListener('click', function() {
        huggingFaceToken = document.getElementById('huggingface-token')
          .value;
        selectedModel = document.getElementById('model-select')
          .value;
        systemPrompt = document.getElementById('system-prompt')
          .value;
        maxTokens = document.getElementById('max-tokens')
          .value;
        localStorage.setItem('huggingFaceToken', huggingFaceToken);
        localStorage.setItem('selectedModel', selectedModel);
        localStorage.setItem('systemPrompt', systemPrompt);
        localStorage.setItem('maxTokens', maxTokens);
        document.getElementById('settings-modal')
          .style.display = 'none';
        console.log("Settings saved. Token:", huggingFaceToken, "Model:", selectedModel, "System Prompt:", systemPrompt, "Max Tokens:", maxTokens);
      });

    document.getElementById('reset-settings-btn')
      .addEventListener('click', function() {
        selectedModel = "codellama/CodeLlama-34b-Instruct-hf";
        systemPrompt = defaultSystemPrompt;
        maxTokens = 1000;
        document.getElementById('model-select')
          .value = selectedModel;
        document.getElementById('system-prompt')
          .value = systemPrompt;
        document.getElementById('max-tokens')
          .value = maxTokens;
        localStorage.setItem('selectedModel', selectedModel);
        localStorage.setItem('systemPrompt', systemPrompt);
        localStorage.setItem('maxTokens', maxTokens);
        console.log("Settings reset to default. Model:", selectedModel, "System Prompt:", systemPrompt, "Max Tokens:", maxTokens);
      });

    document.getElementById('generate-btn')
      .addEventListener('click', generateWebsite);

    document.getElementById('prompt-input')
      .addEventListener('keypress', function(event) {
        if (event.key === 'Enter') {
          generateWebsite();
        }
      });

    document.getElementById('copy-btn')
      .addEventListener('click', function() {
        const originalResponse = document.getElementById('original-response')
          .textContent;
        navigator.clipboard.writeText(originalResponse)
          .then(function() {
            alert('Original response copied to clipboard!');
          }, function(err) {
            console.error('Could not copy text: ', err);
          });
      });

    function generateWebsite() {
      currentPrompt = document.getElementById('prompt-input')
        .value;
      if (currentPrompt) {
        generateWebsiteFromAPI(currentPrompt);
      }
    }

    async function generateWebsiteFromAPI(prompt) {
      if (!huggingFaceToken) {
        alert("Please set your Hugging Face token in the settings.");
        return;
      }

      const apiUrl = 'https://api-inference.huggingface.co/models/' + selectedModel + '/v1/chat/completions';

      let messages = [{
          "role": "system",
          "content": systemPrompt
        },
        {
          "role": "user",
          "content": "Generate a website based on this description: " + prompt
        }
      ];

      document.getElementById('loading')
        .style.display = 'block';

      try {
        const response = await fetch(apiUrl, {
          method: 'POST',
          headers: {
            'Authorization': 'Bearer ' + huggingFaceToken,
            'Content-Type': 'application/json'
          },
          body: JSON.stringify({
            model: selectedModel,
            messages: messages,
            max_tokens: parseInt(maxTokens),
            stream: false
          })
        });

        document.getElementById('loading')
          .style.display = 'none';

        if (!response.ok) {
          throw new Error(`HTTP error! status: ${response.status}`);
        }

        const data = await response.json();
        currentCode = data.choices[0].message.content;

        const resultDiv = document.getElementById('result');
        resultDiv.innerHTML = '';

        const sandbox = document.createElement('iframe');
        sandbox.style.width = '100%';
        sandbox.style.height = '500px';
        sandbox.style.border = 'none';
        resultDiv.appendChild(sandbox);

        const sandboxContent = sandbox.contentDocument || sandbox.contentWindow.document;
        sandboxContent.open();
        sandboxContent.write(currentCode);
        sandboxContent.close();

        document.getElementById('original-response')
          .textContent = currentCode;
        document.getElementById('copy-btn')
          .style.display = 'block';

      } catch (error) {
        document.getElementById('loading')
          .style.display = 'none';
        console.error('There was a problem with the fetch operation:', error);
        document.getElementById('result')
          .innerHTML = `<p>An error occurred while generating the website: ${error.message}</p>`;
      }
    }
  </script>

</body>

</html>