Val Town Code SearchReturn to Val Town

13// Load our data tile from url, arraybuffer, or blob, so we can work with it:
14const tiff = await fromUrl("https://www.wpc.ncep.noaa.gov/heatrisk/data/HeatRisk_1_Mercator.tif");
15const image = await tiff.getImage(); // by default, the first image is read.
16
17// Convert a GPS coordinate to a pixel coordinate in our tile:
18
19const bbox = image.getBoundingBox();
20const pixelWidth = image.getWidth();
21const pixelHeight = image.getHeight();
22const bboxWidth = bbox[2] - bbox[0];
23const bboxHeight = bbox[3] - bbox[1];
35
36const window = [xPx, yPx, xPx + 1, yPx + 1];
37const data = await image.readRasters({ window });
38
39console.log(data);
40
41// const rasters = await image.readRasters();
42// const { width, height, [0]: raster } = rasters;
43

668      bio?: string | null;
669      /** @description The url for the user's profile picture */
670      profileImageUrl?: string | null;
671    }) & components["schemas"]["Author"];
672    BaseVal: {

12
13// INST: Add these keys in val env variables
14// NOTE: the image notes don't work at the moment, and if you add a image note,
15// the task is skipped
16
22var add_to_habitify_todoist_project_id = "XXXX"; // INST: Project ID goes here
23var todoist_dict_mapping = { // Note: You can choose to leave this dict empty and it will still work
24  "Image Notes": { // This is for a section that is image notes only for any habit without adding a log
25    "todoist-section-id": "XXXX", // INST: section id for just image notes section goes here
26    "habitify-area-name": "undefined", // keep this value as undefined
27    specialPrompt: "only_image", // keep the value as only_image
28  },
29  "Text Notes": { // This is for a section that is text notes only for any habit without adding a log
30    "habitify-area-name": "undefined", // keep this value as undefined
31    "todoist-section-id": "XXXX", // INST: section id for just image notes section goes here
32    specialPrompt: "only_text", // keep the value as only_text
33  },
115}
116
117async function resizeAndConvertImage(imageBuffer) {
118  try {
119    const image = await Jimp.read(imageBuffer);
120    const resizedImage = await image.resize(800, 800, Jimp.RESIZE_BILINEAR);
121    const jpegBuffer = await resizedImage.quality(80).getBufferAsync(Jimp.MIME_JPEG);
122
123    if (jpegBuffer.length >= 2000000) {
124      console.error("Error: Resized image size should be smaller than 2MB");
125      return null;
126    }
128    return jpegBuffer;
129  } catch (error) {
130    console.error("Error processing image:", error);
131    return null;
132  }
133}
134
135async function downloadImage(url) {
136  try {
137    const response = await fetch(url, {
144    }
145
146    const imageBuffer = await response.buffer();
147    const resizedImageBuffer = await resizeAndConvertImage(imageBuffer);
148
149    return resizedImageBuffer;
150  } catch (error) {
151    console.error("Error downloading or processing image:", error);
152    return null;
153  }
227  let habitSchema;
228
229  if (specialPrompt === "only_text" || specialPrompt === "only_image") {
230    habitSchema = z.object({
231      name: z.enum(habitKeys),
264  prompt += "The habits you can choose from are: " + habitKeys_str + ".\n";
265
266  if (specialPrompt === "only_image" || specialPrompt === "only_text") {
267    prompt +=
268      "You are extracting the name of the habit, the date of the habit (if mentioned, or otherwise an empty string), and any note if it exists about a habit (if mentioned, or otherwise an empty string). Remember, a note is associated with only 1 habit and will say 'note that' or something like that.\n";
365}
366
367async function addImageNote(habit_id, created_at, imageBuffer) {
368  const url = `https://api.habitify.me/notes/addImageNote/${habit_id}?created_at=${encodeURIComponent(created_at)}`;
369  const headers = {
370    Authorization: HABITIFY_API_KEY,
371    "Content-Type": "image/jpeg",
372  };
373
376      method: "POST",
377      headers: headers,
378      body: imageBuffer,
379    });
380    if (!response.ok) {
462  for (const task of tasks) {
463    console.log(task);
464    task.imageComments = null;
465    if (task.commentCount > 0) {
466      const imageComments = [];
467      const todoist_comments = await getCommentsForTask(task.id);
468      for (const comment of todoist_comments) {
469        // console.log(comment);
470        if (comment.attachment && comment.attachment.resourceType === "image") {
471          const imageBuffer = await downloadImage(comment.attachment.image);
472          if (imageBuffer) {
473            imageComments.push(imageBuffer);
474          }
475        }
476      }
477      task.imageComments = imageComments ? imageComments : null;
478    }
479
480    /// START---REMOVE ONCE UPLOAD IS FIXED
481    if (task.imageComments) {
482      continue;
483    }
499    console.log(habits);
500    for (const habit of habits) {
501      if (specialPrompt != "only_image" || specialPrompt != "only_text") {
502        await addLog(
503          habits_list[habitifyAreaName][habit.name].id,
510        await addTextNote(habits_list[habitifyAreaName][habit.name].id, habit.date, habit.note);
511      }
512      if (task.imageComments) {
513        for (const imageComment of task.imageComments) {
514          await addImageNote(
515            habits_list[habitifyAreaName][habit.name].id,
516            habit.date,
517            imageComment,
518          );
519        }

19      "name": "Thomas Davis",
20      "label": "Web Developer",
21      "image": "https://avatars0.githubusercontent.com/u/416209?s=460&u=38f220a2c9c658141804f881c334c594eb1642ac&v=4",
22      "summary":
23        "I'm a full stack web developer who can build apps from the ground up. I've worked mostly at startups so I am used to wearing many hats. I am a very product focused developer who prioritizes user feedback first and foremost. I'm generally very flexible when investigating new roles. ",

1import { ImageMagick, initializeImageMagick, MagickGeometry } from "https://deno.land/x/imagemagick_deno@0.0.14/mod.ts";
2
3export async function modifyImage(
4  input: Uint8Array | "logo:",
5) {
6  return new Promise<File>((resolve) => {
7    ImageMagick.read(input, (image) => {
8      image.trim();
9      image.repage();
10      image.write((data) => resolve(new File([data], "logo.png", { type: "image/png" })));
11    });
12  });

1Code from https://deno.com/blog/build-image-resizing-api
2
3Useful for compressing an image before sending to chatgpt4v, for example

1import {
2  ImageMagick,
3  initializeImageMagick,
4  Magick,
5  MagickFormat,
6  Quantum,
7} from "https://esm.sh/@imagemagick/magick-wasm";
8
9const resp = await fetch("https://esm.sh/@imagemagick/magick-wasm@0.0.29/dist/magick.wasm");
10const wasmBytes = await resp.arrayBuffer();
11
12initializeImageMagick(wasmBytes).then(() => {
13  console.log(Magick.imageMagickVersion);
14  console.log("Delegates:", Magick.delegates);
15  console.log("Features:", Magick.features);
17
18  console.log("");
19  ImageMagick.read("logo:", image => {
20    image.resize(100, 100);
21    image.blur(1, 5);
22    console.log(image.toString());
23
24    image.write(MagickFormat.Jpeg, data => {
25      console.log(data.length);
26    });

23      "<svg xmlns=\"http://www.w3.org/2000/svg\" xmlns:xlink=\"http://www.w3.org/1999/xlink\" version=\"1.1\" ",
24    ),
25    { headers: { "Content-Type": "image/svg+xml" } },
26  );
27}

14};
15
16const promptKey = 'imagePromptValue';
17
18export function updateForm() {
45
46    const model = document.getElementById('model').value;
47    const imageSize = document.getElementById('image_size')?.value;
48    const prompt = document.getElementById('prompt').value;
49
59    loadingShimmer.className = 'loading-shimmer';
60
61    const imageFooter = document.createElement('div');
62    imageFooter.className = 'image-footer';
63
64    const modelElement = document.createElement('p');
71    removeButton.onclick = () => loadingContainer.remove();
72
73    imageFooter.appendChild(modelElement);
74    imageFooter.appendChild(removeButton);
75
76    loadingContainer.appendChild(loadingShimmer);
77    loadingContainer.appendChild(imageFooter);
78    resultDiv.prepend(loadingContainer);
79
87        'landscape_16_9': 16 / 9
88    };
89    const aspectRatio = aspectRatios[imageSize] || 1; // Default to 1 if imageSize is not found
90    const containerWidth = loadingContainer.offsetWidth;
91    loadingShimmer.style.height = `${containerWidth / aspectRatio}px`;
97    const guidanceScale = document.getElementById('guidance_scale')?.value;
98    const seed = document.getElementById('seed')?.value;
99    const numImages = document.getElementById('num_images')?.value;
100    const enableSafetyChecker = document.getElementById('enable_safety_checker')?.checked;
101    const syncMode = document.getElementById('sync_mode')?.checked;
108        prompt,
109        negative_prompt: negativePrompt || undefined,
110        image_size: imageSize,
111        num_inference_steps: numInferenceSteps ? parseInt(numInferenceSteps) : undefined,
112        guidance_scale: guidanceScale ? parseFloat(guidanceScale) : undefined,
113        seed: seed ? parseInt(seed) : undefined,
114        num_images: numImages ? parseInt(numImages) : undefined,
115        enable_safety_checker: enableSafetyChecker !== undefined ? enableSafetyChecker : undefined,
116        sync_mode: syncMode !== undefined ? syncMode : undefined,
119    };
120
121    const response = await fetch('/generate-image', {
122        method: 'POST',
123        headers: {
128
129    const data = await response.json();
130    handleImageResponse(data, imageSize, model);
131}
132
133function handleImageResponse(data, imageSize, model) {
134    const resultDiv = document.getElementById('result');
135
136    if (data.imageUrls) {
137        data.imageUrls.forEach((imageUrl, index) => {
138            const imgElement = new Image();
139            imgElement.src = imageUrl;
140            imgElement.alt = `Generated Image ${index + 1}`;
141            imgElement.style.display = 'none';
142
147                loadingShimmer.remove();
148                imgElement.style.display = 'block';
149                loadingContainer.insertBefore(imgElement, loadingContainer.querySelector('.image-footer'));
150            };
151
173    updateForm();
174    const modelElement = document.getElementById('model');
175    const formElement = document.getElementById('imageForm');
176    const resetButton = document.getElementById('resetButton');
177

3Outputs:
4```text
5ImageMagick 7.1.1-30 Q8 x86_64 dd459b01f:20240407 https://imagemagick.org
6Delegates: freetype heic jng jp2 jpeg jxl lcms lqr openexr png raw tiff webp xml zlib
7Features: Cipher