VALL-E-DRAW

/** @jsxImportSource https://esm.sh/react@18.3.1 **/ // import build from "https://esm.sh/build"; // const ret = await build({ // dependencies: { // "react-dom": "18.3.1", // "react": "18.3.1", // "tldraw": "2.3.0", // "@reecelucas/react-use-hotkeys": "2.0.0", // }, // source: ` // export * as ReactDOM from "react-dom"; // export * as React from "react"; // export * as tldraw from "tldraw"; // import useHotkeys from "@reecelucas/react-use-hotkeys"; // export { useHotkeys }; // `, // }); // console.log(ret.url); 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( ` VALL-E-DRAW

`, { 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 { return new Response("Hello, World!", { headers: { "Content-Type": "text/plain" }, }); }`; let previewHeight = (540 * 2) / 3; let previewWidth = (960 * 2) / 3; // const highestPreview = selectedShapes // .filter((s) => s.type === "preview") // .sort(sortByIndex) // .reverse()[0]; // if (highestPreview) { // previewHeight = highestPreview.props.h; // previewWidth = highestPreview.props.w; // } const prompt = `Make an HTTP Val that outputs HTML (there is no need to import stevekrouse/html).\n` + selectedShapes.filter((s) => s.type === "text").map((s) => s.props.text).join("\n"); const loadValName = selectedShapes.filter((s) => s.type === "preview" && s.props.finishedValName ).map((s) => s.props.finishedValName)[0] || ""; const newShapeId = createShapeId(); editor.createShape({ id: `${newShapeId}_preview`, type: "preview", x: maxX + 60, y: midY - previewHeight / 2, props: { prompt, loadValName, w: previewWidth, h: previewHeight, iframeWidth: 800, source: "", }, meta: {}, }); } catch (e: any) { console.error(e); addToast({ title: "Something went wrong", description: `${e.message.slice(0, 200)}`, }); } }, [editor, addToast]); useHotkeys("q", handleClick); return ( ); } function App() { return ( <>

}} />

); } const root = ReactDOM.createRoot(document.getElementById("root")); root.render(); // // // // // // https://github.com/tldraw/make-real/blob/3093e7d528683370b2ac60c1346ce3694e07ccae/app/PreviewShape/PreviewShape.tsx class PreviewShapeUtil extends BaseBoxShapeUtil { static type = "preview" as const; getDefaultProps() { return { prompt: "", loadValName: "", finishedValName: "", w: (960 * 2) / 3, h: (540 * 2) / 3, previewWidth: (960 * 2) / 3 * 2, dateCreated: Date.now(), }; } canEdit = (_shape) => true; isAspectRatioLocked = (_shape) => false; canResize = (_shape) => true; component(shape) { const isEditing = useIsEditing(shape.id); const boxShadow = useValue( "box shadow", () => { const rotation = this.editor.getShapePageTransform(shape)!.rotation(); return getRotatedBoxShadow(rotation); }, [this.editor], ); const hasSubmitted = useRef(); useEffect(() => { if (hasSubmitted.current) { return; } if (shape.props.finishedValName) { (document.getElementById(`${shape.id}_iframe`) as HTMLIFrameElement).src = `${iframeSrc}/?fullscreen=1&loadValName=${shape.props.finishedValName}`; } else { (document.getElementById(`${shape.id}_form`) as HTMLFormElement).submit(); } hasSubmitted.current = true; }); const onMessage = useCallback((event) => { if ( event.source.window === (document.getElementById(`${shape.id}_iframe`) as HTMLIFrameElement).contentWindow && event.data.messageType === "generationFinished" ) { this.editor.updateShape({ id: shape.id, type: "preview", props: { finishedValName: event.data.tempValName }, }); } }, []); useEffect(() => { window.addEventListener("message", onMessage); return () => window.removeEventListener("message", onMessage); }, [onMessage]); return (

codingcanvas