Val Town Code SearchReturn to Val Town

4
5export default function App() {
6  const [imageSrc, setImageSrc] = useState<string | null>(null);
7  const [ready, setReady] = useState(false);
8
9  // Canvas refs
10  const baseCanvas = useRef<HTMLCanvasElement>(null); // shows uploaded image
11  const drawCanvas = useRef<HTMLCanvasElement>(null); // red overlay for drawing
12  const maskCanvas = useRef<HTMLCanvasElement>(null); // hidden, true mask (white bg, transparent strokes)
20    const reader = new FileReader();
21    reader.onload = () => {
22      setImageSrc(reader.result as string);
23      setReady(false); // will flip true once image is loaded
24    };
25    reader.readAsDataURL(file);
26  };
27
28  /** Once imageSrc changes, draw it onto baseCanvas and size all canvases */
29  useEffect(() => {
30    if (!imageSrc) return;
31    const img = new Image();
32    img.src = imageSrc;
33    img.onload = () => {
34      const { width, height } = img;
39      });
40
41      // Draw uploaded image
42      baseCanvas.current!.getContext("2d")!.drawImage(img, 0, 0);
43
44      // Prepare mask canvas: opaque white everywhere to start
50      setReady(true);
51    };
52  }, [imageSrc]);
53
54  /* Helper: convert pointer to canvas coords */
126    const link = document.createElement("a");
127    link.download = "mask.png";
128    link.href = maskCanvas.current!.toDataURL("image/png");
129    link.click();
130  };
144      <h1>OpenAI In-painting Mask Editor</h1>
145
146      <input type="file" accept="image/*" onChange={onFileChange} />
147
148      {imageSrc && (
149        <div
150          style={{
168      )}
169
170      {imageSrc && (
171        <div style={{ marginTop: 12 }}>
172          <button onClick={clearMask}>Clear Mask</button>
184        correspond to your strokes – exactly what{" "}
185        <a
186          href="https://platform.openai.com/docs/guides/image-generation#mask-requirements"
187          target="_blank"
188          rel="noopener noreferrer"

9  // - data (string)
10  // - type (string)
11  // - image (data url string)
12
13  // sanity checks:
15  // - data, hmm this needs to be long i guess.. maybe some crazy upper limit sanity check though
16  // - type, not too long
17  // - image, not toooo large a file size
18  let body;
19  try {
26  const data = body.data;
27  const type = body.type;
28  const image = body.image;
29
30  // Sanity checks
38  }
39
40  if (image.length > 20 * 1024 * 1024) {
41    return Response.json({ ok: false, error: "Thumbnail too large" });
42  }
58  );
59
60  await blob.set("pondiverse_image" + id.lastInsertRowid, image);
61  return Response.json({ ok: true });
62}

9      data TEXT,
10      type TEXT,
11      image TEXT,
12      time DATETIME NOT NULL,
13      hidden BOOLEAN

4import { Header } from "./components.tsx";
5import hemolog from "./frames/hemolog.tsx";
6import generateImageFromHtml from "./generateImageFromHtml.ts";
7
8export default async function(req: Request) {
9  const url = new URL(req.url);
10  const isImageRequest = url.searchParams.get("generate") === "image";
11  const isListRequest = url.searchParams.get("generate") === "list";
12  const frameId = url.searchParams.get("frame");
68  }
69
70  // get ?&generate=image&frame=S0mth1ingKrAzy
71  if (frameId && !frame_list.includes(frameId)) {
72    const html = renderToString(
84  const generateUrl = frames[frameId as keyof typeof frames];
85
86  // get ?&generate=image&frame=weather
87  if (isImageRequest) {
88    const width = 800;
89    const height = 480;
90
91    const imageResponse = await generateImageFromHtml(generateUrl, width, height);
92    return new Response(imageResponse.body, {
93      status: imageResponse.status,
94      headers: {
95        "Content-Type": "image/png",
96      },
97    });

2// API key required
3
4// TODO: Add caching of image
5export default async function generateImageFromHtml(
6  valUrl: string,
7  width: number = 800,
13  const apiKey = Deno.env.get("API_FLASH_KEY");
14  const generateUrl =
15    `https://api.apiflash.com/v1/urltoimage?access_key=${apiKey}&url=${valUrl}&width=${width}&height=${height}&format=png&fresh=true`;
16
17  try {
22    return response;
23  } catch (error) {
24    return new Response("Failed to generate image", { status: 500 });
25  }
26}

8  service_version: string;
9  title: string;
10  url: string; // image to display
11};
12

2import deleteCreation from "./deleteCreation";
3import getCreation from "./getCreation";
4import getCreationImage from "./getCreationImage";
5import getCreations from "./getCreations";
6import updateTable from "./updateTable";
14    case "/get-creation":
15      return getCreation(req);
16    case "/get-creation-image":
17      return getCreationImage(req);
18    case "/get-creations":
19      return getCreations(req);

12  // Iterate through each one and delete it's blob
13  for (const row of res.rows) {
14    blob.delete("pondiverse_image" + row.id);
15  }
16
53  // for (let creation of response.rows) {
54  //   creation.url = `https://pondiverse.val.run/get-creation?id=${creation.id}`;
55  //   creation.image = `https://pondiverse.val.run/get-creation-image?id=${creation.id}`;
56  // }
57

9  let response;
10  try {
11    response = await blob.get("pondiverse_image" + id);
12  } catch (e) {
13    return new Response(null, { status: 404 });

14  // This makes forking harder sorry
15  // creation.uri = `https://pondiverse.val.run/get-creation?id=${creation.id}`;
16  // creation.image = `https://pondiverse.val.run/get-creation-image?id=${creation.id}`;
17  return Response.json(creation);
18}