Spaces:

Ivan000
/

Web-page-generator

Running

App Files Files Community

Ivan000 commited on Sep 30, 2024

Commit

963800d

verified ·

1 Parent(s): e0e8d2f

Update index.html

Browse files

Files changed (1) hide show

index.html +301 -237

index.html CHANGED Viewed

@@ -1,291 +1,349 @@
-<html><head>
-<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-value {
-        display: inline-block;
-        width: 50px;
-        text-align: right;
     }
     #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>
-            </select>
-            <br><br>
-            <label for="max-tokens">Max Tokens: <span id="max-tokens-value">1000</span></label>
-            <input type="range" id="max-tokens" min="500" max="1024" 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.getElementById('max-tokens-value').textContent = 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;
-    document.getElementById('max-tokens-value').textContent = 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('max-tokens').addEventListener('input', function() {
-    document.getElementById('max-tokens-value').textContent = this.value;
-});
-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';
@@ -297,15 +355,21 @@ async function generateWebsiteFromAPI(prompt) {
         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>

+<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';
         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>