Public
Script
Val Town is a social website to write and deploy JavaScript.
Build APIs and schedule functions from your browser.
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
document.addEventListener("DOMContentLoaded", () => {
const promptInput = document.getElementById("prompt");
const resultDiv = document.getElementById("result");
const modelSelect = document.getElementById("realtimeModel");
let debounceTimeout;
let abortController = null;
promptInput.addEventListener("input", () => {
clearTimeout(debounceTimeout);
debounceTimeout = setTimeout(generateImages, 500);
});
async function generateImages() {
resultDiv.innerHTML = ''; // Clear previous results
if (abortController) {
abortController.abort(); // Cancel the previous request
}
abortController = new AbortController();
const signal = abortController.signal;
const prompt = promptInput.value;
const model = modelSelect.value;
try {
const response = await fetch('/realtime-generate-image', {
method: 'POST',
headers: {
'Content-Type': 'application/json',
},
body: JSON.stringify({ prompt, model }),
signal: signal,
});
if (!response.ok) {
throw new Error(`HTTP error! status: ${response.status}`);
}
const data = await response.json(); // Parse the JSON response
if (data.urls && Array.isArray(data.urls)) {
data.urls.forEach(url => {
appendImage(url, model);
});
} else {
throw new Error('Invalid response format from server.');
}
} catch (error) {
if (error.name === 'AbortError') {
console.log('Request aborted');
} else {
console.error('Error generating images:', error);
// Handle the error, display an error message, etc.
}
} finally {
abortController = null;
}
}
function appendImage(imageUrl, model) {
const imgElement = new Image();
imgElement.src = imageUrl;
imgElement.alt = "Generated Image";
imgElement.className = 'generated-image';
const loadingContainer = document.createElement('div');
loadingContainer.className = 'loading-container';
const loadingShimmer = document.createElement('div');
loadingShimmer.className = 'loading-shimmer';
const imageFooter = document.createElement('div');
imageFooter.className = 'image-footer';
const modelElement = document.createElement('p');
modelElement.textContent = `Model: ${model}`;
modelElement.className = 'model-name';
const removeButton = document.createElement('button');
removeButton.textContent = 'x';
removeButton.className = 'close-button';
removeButton.onclick = () => loadingContainer.remove();
imageFooter.appendChild(modelElement);
imageFooter.appendChild(removeButton);
loadingContainer.appendChild(loadingShimmer);
loadingContainer.appendChild(imageFooter);
resultDiv.appendChild(loadingContainer);
imgElement.onload = () => {
loadingShimmer.remove();
imgElement.style.display = 'block';
loadingContainer.insertBefore(imgElement, imageFooter);
};
loadingContainer.appendChild(imgElement);
}
});
June 17, 2024