Spaces:

Ivan000
/

Web-page-generator

Running

File size: 11,364 Bytes

296bb43
e1fee06

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