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(`![image](${success[1]})\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');