Update index.html

This commit is contained in:
The Ghost of FOSS' Future 2024-09-17 07:08:30 -05:00 committed by GitHub
parent 474886d640
commit 4cca1ee261
No known key found for this signature in database
GPG key ID: B5690EEEBB952194

View file

@ -2,80 +2,92 @@
<html> <html>
<head> <head>
<title>SneedPage</title> <title>SneedPage</title>
<style>
#preview {
width: 100%;
height: 400px; /* Adjust height as needed */
border: 1px solid #ccc;
}
</style>
</head> </head>
<body> <body>
<textarea id="prompt" rows="10" cols="50"></textarea> <textarea id="prompt" rows="10" cols="50"></textarea>
<button onclick="generateWebsite()">Prompt</button> <button onclick="generateWebsite()">Generate</button>
<div id="preview" width="100%" height="32%"></div> <iframe id="preview"></iframe>
<button onclick="saveHTML()">Save HTML</button> <button onclick="saveHTML()">Save HTML</button>
<script> <script>
let currentHTML; let currentHTML = '';
function generateWebsite() { function generateWebsite() {
const prompt = document.getElementById("prompt").value; const prompt = document.getElementById("prompt").value;
// Replace with your Ollama API call and processing logic
const generatedHTML = generateHTMLFromPrompt(prompt); const generatedHTML = generateHTMLFromPrompt(prompt);
// Load the generated HTML into the iframe // Load the generated HTML into the iframe
const iframe = document.getElementById("preview"); const iframe = document.getElementById("preview");
iframe.contentDocument.open(); const iframeDoc = iframe.contentWindow.document;
iframe.contentDocument.write(generatedHTML); iframeDoc.open();
iframe.contentDocument.close(); iframeDoc.write(generatedHTML);
iframeDoc.close();
} }
function saveHTML() { function saveHTML() {
const generatedHTML = currentHTML; if (!currentHTML) {
const blob = new Blob([generatedHTML], { type: "text/html" }); alert("No HTML to save. Generate content first.");
return;
}
const blob = new Blob([currentHTML], { type: "text/html" });
const a = document.createElement("a"); const a = document.createElement("a");
a.href = URL.createObjectURL(blob); a.href = URL.createObjectURL(blob);
a.download = "generated_website.html"; a.download = "generated_website.html";
a.click(); a.click();
} }
// Replace this with your Ollama API integration and HTML generation logic
let answerCount = 0
let body;
function generateHTMLFromPrompt(prompt) { function generateHTMLFromPrompt(prompt) {
const url = "https://ollama-api.nodemixaholic.com/api/generate"; const url = "https://ollama-api.nodemixaholic.com/api/generate";
if (answercount < 1) { const answerCount = 0; // Assuming you want this to start at 0
if (answerCount < 1) {
prompt += ` prompt += `
Create this in HTML, CSS, and Javascript as a single-page application with dynamically loading content. Create this in HTML, CSS, and Javascript as a single-page application with dynamically loading content.
Do NOT use external libraries.` Do NOT use external libraries.`;
} else { } else {
prompt += ` prompt += `
See that? Yeah do that to the following website code: See that? Yeah do that to the following website code:
${currentHTML} ${currentHTML}
Be sure to use HTML, CSS, and Javascript and make it a single-page application with dynamically loading content. Be sure to use HTML, CSS, and Javascript and make it a single-page application with dynamically loading content.
Do NOT use external libraries. Do NOT use external libraries.
Fix any bugs as well.` Fix any bugs as well.`;
} }
body = JSON.stringify({ const body = JSON.stringify({
model: "starcoder2:7b", model: "starcoder2:7b",
prompt: prompt // User's prompt from the text area prompt: prompt // User's prompt from the text area
}); });
fetch(url, {
method: "POST", return fetch(url, {
headers: { method: "POST",
"Content-Type": "application/json" headers: {
}, "Content-Type": "application/json"
body: body },
}) body: body
.then(response => response.json()) })
.then(data => { .then(response => response.json())
// Display the generated website code in a designated area (e.g., pre tag) .then(data => {
currentHTML = data.response; // Update the currentHTML and display it in the iframe
document.getElementById("preview").innerHTML = currentHTML; currentHTML = data.response;
answerCount++ document.getElementById("preview").contentWindow.document.open();
return data.response; document.getElementById("preview").contentWindow.document.write(currentHTML);
}) document.getElementById("preview").contentWindow.document.close();
.catch(error => { return data.response;
console.error(error); })
// Handle API errors and display an error message to the user .catch(error => {
}); console.error('Error:', error);
// Handle API errors and display an error message to the user
});
} }
</script> </script>
</body> </body>