Public
HTTP
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
import serve, { events, forward, sleep } from "https://esm.town/v/jeffreyyoung/poe_bot?v=45";
import Replicate from "npm:replicate";
const replicate = new Replicate({
auth: Deno.env.get("REPLICATE_API_KEY"),
});
export default serve({
async *handleMessage(req) {
const lastMsg = req.query.at(-1);
if (lastMsg && lastMsg.attachments.at(0)) {
yield events.replace("Generating image");
let success = null;
let error = null;
replicate.run("jagilley/controlnet-scribble:435061a1b5a4c1e26740464bf786efdfa9cb3a3ac488595a2de23e143fdb0117", {
input: {
image: lastMsg.attachments.at(0).url,
prompt: lastMsg.content.trim() || "photorealistic",
},
}).then(r => {
success = r;
}).catch(e => {
error = e || true;
console.error("Something went wrong", e);
});
let seconds = 0;
while (!success && !error) {
console.log("waiting", success, error);
yield events.replace(`Generating image (${seconds++} seconds)`);
await sleep(1000);
}
if (error) {
yield events.replace("Something went wrong");
} else {
console.log("success!", success);
yield events.replace(`\n`);
}
} else {
let result = null;
yield "No image recieved\n";
}
yield html;
yield events.done();
},
settings: {
allow_attachments: true,
introduction_message: html,
},
});
var html = `
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Drawing App</title>
<link href="
https://cdn.jsdelivr.net/npm/@picocss/pico@2.0.6/css/pico.min.css
" rel="stylesheet">
<style>
body {
font-family: Arial, sans-serif;
display: flex;
flex-direction: column;
align-items: center;
padding: 20px;
}
canvas {
border: 1px solid #000;
cursor: crosshair;
}
#controls {
margin-top: 20px;
display: flex;
gap: 10px;
}
input, button {
padding: 5px 10px;
font-size: 16px;
}
</style>
</head>
<body>
<h3>
Draw something
</h3>
<canvas id="drawingCanvas" width="400" height="400"></canvas>
<div id="controls">
<input type="text" id="description" placeholder="Description">
<button id="clearBtn">Clear</button>
<button id="generateBtn">Generate</button>
</div>
<script>
const canvas = document.getElementById('drawingCanvas');
const ctx = canvas.getContext('2d');
const description = document.getElementById('description');
const clearBtn = document.getElementById('clearBtn');