Unlisted
HTTP (deprecated)
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
// This approach creates an HTML page with an iframe and a form to submit prompts to VALL-E.
// We use postMessage to communicate between the iframe and the parent window.
// The main function renders the HTML and handles the postMessage events.
// We use a list of 10 prompts to test VALL-E with various small website scenarios.
// We've added functionality to evaluate the generated vals and retry on errors.
// Timeouts have been added for both generation and evaluation phases.
// A query parameter "model" can be passed to specify the model to use.
// The progress information is now displayed above the iframe, including the model being used.
export default async function main(req: Request): Promise<Response> {
const url = new URL(req.url);
const model = url.searchParams.get("model") || "gpt-4o-mini";
const contextWindowSize = url.searchParams.get("contextWindowSize") || "9999999999";
const genericPrompt =
"Create an HTML website that returns meaningful HTML on the homepage (without any query parameters). It should have a backend that uses blob storage. ";
const prompts = [
"Create a simple todo list app with a backend API",
"Develop a basic blog platform with posts and comments",
"Make a currency converter (with hardcoded exchange rates)",
"Create a quiz game with a scoring system",
"Build a simple e-commerce product listing page",
"Develop a recipe sharing website with search functionality",
"Make a basic chat application",
"Create a personal finance tracker with data visualization",
"Build a movie review website with user ratings",
"Make a realistic looking Hacker News clone with a backend, upvotes, and a separate page for submitting new stories",
].map(prompt => genericPrompt + prompt);
const html = `
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>VALL-E Evaluation</title>
</head>
<body>
<h1>VALL-E Evaluation</h1>
<p>Model: ${model}</p>
<div id="status"></div>
<ul id="results"></ul>
<div id="total-score"></div>
<iframe name="valle-frame" style="width: 100%; height: 500px; border: 1px solid #ccc;"></iframe>
<form id="prompt-form" action="https://janpaul123-valle.web.val.run" method="POST" target="valle-frame">
<input type="hidden" name="userprompt" id="userprompt">
<input type="hidden" name="model" value="${model}">
<input type="hidden" name="contextWindowSize" value="${contextWindowSize}">
</form>
<script>
const prompts = ${JSON.stringify(prompts)};
let currentPromptIndex = 0;
let currentRetryCount = 0;
let currentTempValName = '';
let totalScore = 0;
let generationTimeout, evaluationTimeout;
function submitNextPrompt() {
if (currentPromptIndex < prompts.length) {
document.getElementById('userprompt').value = prompts[currentPromptIndex];
document.getElementById('prompt-form').submit();
document.getElementById('status').textContent = \`Submitted prompt \${currentPromptIndex + 1} of \${prompts.length}\`;
clearTimeout(generationTimeout);
generationTimeout = setTimeout(() => {
handleError('Generation timed out after 100 seconds');
}, 100000);
} else {
document.getElementById('status').textContent = 'All prompts have been evaluated!';
document.getElementById('total-score').textContent = \`Total Score: \${totalScore}\`;
window.parent.postMessage({ messageType: "evalsFinished", totalScore }, "*");
}
}
function evaluateVal(tempValName) {
currentTempValName = tempValName;
const iframe = document.querySelector('iframe');
iframe.src = \`https://janpaul123-httpvalerrorcatcher.web.val.run/?val=janpaul123/\${tempValName}\`;
clearTimeout(evaluationTimeout);
evaluationTimeout = setTimeout(() => {
handleError('Evaluation timed out after 10 seconds');
}, 10000);
}
function addResult(message, points) {
const resultsList = document.getElementById('results');
const listItem = document.createElement('li');
listItem.innerHTML = \`Prompt \${currentPromptIndex + 1}: \${message} (\${points} points)\`;
resultsList.appendChild(listItem);
totalScore += points;
}
function handleError(errorMessage) {
if (currentRetryCount < 2) {
currentRetryCount++;
submitNextPrompt(); // Retry generation
} else {
addResult(\`Failed after 3 attempts. Last error: \${errorMessage}\`, 0);
currentPromptIndex++;