export default function({ iframeSrc }) {
return async (req) => {
const { extractValInfo } = await import("https://esm.town/v/pomdtr/extractValInfo?v=29");
const { author, name } = extractValInfo(import.meta.url);
return new Response(
`<html>
<head>
<title>VALL-E-DRAW</title>
<meta name="viewport" content="width=device-width, initial-scale=1, viewport-fit=cover" />
<link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Inter:wght@500;700&display=swap"/>
<link rel="stylesheet" href="https://esm.sh/tldraw@2.3.0/tldraw.css"/>
<link href="https://unpkg.com/tailwindcss@^2/dist/tailwind.min.css" rel="stylesheet" />
<style> body { font-family: "Inter"; } </style>
</head>
<body>
<div id="root"></div>
<script type="module" src="https://esm.town/v/${author}/${name}"></script/>
<script>
document.addEventListener("DOMContentLoaded", (event) => {
window.makeValleDrawClient({
iframeSrc: ${JSON.stringify(iframeSrc)},
model: "gpt-4o-mini"
});
});
</script>
</body>
</html>`,
{ headers: { "Content-Type": "text/html" } },
);
};
}
if (typeof document !== "undefined") {
(window as any).makeValleDrawClient = async function({ iframeSrc, model }) {
const ret = { url: "https://esm.sh/~ae19cbe7d55c481140f1002355f248f335382639" };
const {
ReactDOM,
React,
tldraw,
useHotkeys,
} = await import(ret.url + "?bundle-deps");
const { useCallback, useRef, useEffect } = React;
const {
Tldraw,
useEditor,
useToasts,
createShapeId,
BaseBoxShapeUtil,
DefaultSpinner,
HTMLContainer,
SvgExportContext,
TLBaseShape,
TldrawUiIcon,
Vec,
stopEventPropagation,
toDomPrecision,
useIsEditing,
useValue,
sortByIndex,
} = tldraw;
function MakeRealButton() {
const editor = useEditor();
const { addToast } = useToasts();
const handleClick = useCallback(async () => {
try {
const selectedShapes = editor.getSelectedShapes();
if (selectedShapes.length === 0) throw Error("First select something to make real.");
const { maxX, midY } = editor.getSelectionPageBounds();
const text = `export default async function main(req: Request): Promise<Response> {
return new Response("Hello, World!", {
headers: { "Content-Type": "text/plain" },
});
}`;
let previewHeight = (540 * 2) / 3;
let previewWidth = (960 * 2) / 3;