Spaces:

Ivan000
/

Web-page-generator

Running

App Files Files Community

Ivan000 commited on Sep 29, 2024

Commit

e1fee06

verified ·

1 Parent(s): 5ead3df

Upload M4uckaQk31lAuzVkS.html

Browse files

Files changed (1) hide show

M4uckaQk31lAuzVkS.html +311 -0

M4uckaQk31lAuzVkS.html ADDED Viewed

	@@ -0,0 +1,311 @@

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