Val Town Code SearchReturn to Val Town

2  // Background
3  BACKGROUND:
4    "https://imagedelivery.net/iHX6Ovru0O7AjmyT5yZRoA/8b501664-722e-4be8-cf71-83aab7756e00/public",
5
6  // Stevens
7  STEVENS_FRONT:
8    "https://imagedelivery.net/iHX6Ovru0O7AjmyT5yZRoA/8b8432bb-add2-44ad-bb12-44b8ea215500/public",
9  STEVENS_BACK:
10    "https://imagedelivery.net/iHX6Ovru0O7AjmyT5yZRoA/e28da8ab-7710-4b82-8e32-8fdf65c2ed00/public",
11  STEVENS_WALKING:
12    "https://imagedelivery.net/iHX6Ovru0O7AjmyT5yZRoA/bd7b9997-09b2-4b35-6eb9-9975a85bb700/public",
13
14  // Mailman
15  MAILMAN_STANDING:
16    "https://imagedelivery.net/iHX6Ovru0O7AjmyT5yZRoA/20a6493d-cc31-475e-aa83-ac97d317e400/public",
17  MAILMAN_WALKING:
18    "https://imagedelivery.net/iHX6Ovru0O7AjmyT5yZRoA/61604576-8a83-4d85-d5e4-8e8e26641700/public",
19};
20

82  const [cookieAndTeaMode, setCookieAndTeaMode] = useState(false);
83
84  // Fetch images from backend instead of blob storage directly
85  useEffect(() => {
86    // Set default background color in case image doesn't load
87    if (document.body) {
88      document.body.style.backgroundColor = "#2D1700"; // Dark brown leather color
89    }
90
91    // Fetch avatar image
92    fetch("/api/images/stevens.jpg")
93      .then((response) => {
94        if (response.ok) return response.blob();
95        throw new Error("Failed to load avatar image");
96      })
97      .then((imageBlob) => {
98        const url = URL.createObjectURL(imageBlob);
99        setAvatarUrl(url);
100      })
104
105    // Fetch wood background
106    fetch("/api/images/wood.jpg")
107      .then((response) => {
108        if (response.ok) return response.blob();
109        throw new Error("Failed to load wood background");
110      })
111      .then((imageBlob) => {
112        const url = URL.createObjectURL(imageBlob);
113        setWoodUrl(url);
114
115        // Apply wood background to body
116        if (document.body) {
117          document.body.style.backgroundImage = `url(${url})`;
118        }
119      })
362      return {
363        position: SCENE_ELEMENTS.DESK_SITTING,
364        image: ASSETS.STEVENS_FRONT,
365        highlightElement: SCENE_ELEMENTS.DESK,
366        animationClass: "no-animation",
372      return {
373        position: SCENE_ELEMENTS.DESK_SITTING,
374        image: ASSETS.STEVENS_FRONT,
375        highlightElement: null,
376        animationClass: "no-animation",
387            y: SCENE_ELEMENTS.MAILBOX.y - 20,
388          },
389          image: ASSETS.STEVENS_BACK,
390          highlightElement: SCENE_ELEMENTS.MAILBOX,
391          animationClass: "walk-to-mailbox",
398            y: SCENE_ELEMENTS.CALENDAR.y + 30,
399          },
400          image: ASSETS.STEVENS_BACK,
401          highlightElement: SCENE_ELEMENTS.CALENDAR,
402          animationClass: "walk-to-calendar",
409            y: SCENE_ELEMENTS.TELEGRAM.y + 10,
410          },
411          image: ASSETS.STEVENS_BACK,
412          highlightElement: SCENE_ELEMENTS.TELEGRAM,
413          animationClass: "walk-to-telegram",
417        return {
418          position: SCENE_ELEMENTS.OUTSIDE,
419          image: ASSETS.STEVENS_FRONT,
420          highlightElement: null,
421          animationClass: "walk-to-outside",
425        return {
426          position: SCENE_ELEMENTS.DESK_SITTING,
427          image: ASSETS.STEVENS_FRONT,
428          highlightElement: SCENE_ELEMENTS.DESK,
429          animationClass: "walk-to-desk",
623          box-shadow: inset 0 0 5px rgba(0, 0, 0, 0.4),
624            0 3px 8px rgba(0, 0, 0, 0.5);
625          image-rendering: pixelated;
626          cursor: pointer;
627          transition: transform 0.2s;
634        .notebook-pages {
635          background-color: #f8f1e0;
636          background-image: linear-gradient(#d6c6a5 1px, transparent 1px);
637          background-size: 100% 16px;
638          box-shadow: inset 0 0 8px rgba(0, 0, 0, 0.3);
639          image-rendering: pixelated;
640        }
641
652
653        .pixel-character {
654          image-rendering: pixelated;
655          position: absolute;
656          transition: left 0.7s ease-in-out, top 0.7s ease-in-out;
763          className="w-[512px] h-[512px] mx-auto relative"
764          style={{
765            backgroundImage: `url(${ASSETS.BACKGROUND})`,
766            backgroundSize: "cover",
767            backgroundPosition: "center",
768            imageRendering: "pixelated",
769          }}
770        >
799          {/* Stevens character */}
800          <img
801            src={stevensState.image}
802            alt="Stevens"
803            className={`pixel-character ${

17    <br />
18
19    Replace <code>name</code> with the name you gave the image.
20  </p>
21
99      <audio controls style="display: none" id="preview-audio"></audio>
100    </div>
101    <input type="file" id="file" accept="audio/*, image/*" required />
102  </label>
103  <label for="singing">
138  const nameInput = document.getElementById("name");
139  const fileInput = document.getElementById("file");
140  const previewImage = document.getElementById("preview");
141  const previewAudio = document.getElementById("preview-audio");
142  const uploadButton = document.getElementById("upload-button");
153  reader.onload = () => {
154    const dataUrl = reader.result;
155    previewImage.src = dataUrl; // the form just grabs whatever is here and uploads this, which may even be audio
156    previewAudio.src = dataUrl;
157  };
166  });
167
168  previewImage.addEventListener("load", () => {
169    previewImage.style.display = "block";
170  });
171
174  });
175
176  previewImage.addEventListener("error", () => {
177    previewImage.style.display = "none";
178  });
179
226      event.preventDefault();
227      const name = encodeURIComponent(nameInput.value);
228      const dataUrl = previewImage.src;
229      const body = JSON.stringify({ name, dataUrl });
230      uploadButton.disabled = true;
238        nameInput.value = "";
239        fileInput.value = "";
240        previewImage.src = "";
241        previewAudio.src = "";
242      } else {
320
321            const contentType = response.headers.get("content-type");
322            if (contentType.startsWith("image")) {
323              const imageElement = document.createElement("img");
324              imageElement.loading = "lazy";
325              imageElement.style.width = "100%";
326              imageElement.style.objectFit = "contain";
327              imageElement.style.height = "300px";
328              // src the response
329              const blob = await response.blob();
330              imageElement.src = URL.createObjectURL(blob);
331              imageElement.onerror = () => {
332                imageElement.remove();
333              };
334              previewContainer.appendChild(imageElement);
335            } else if (contentType.startsWith("audio")) {
336              const audioElement = document.createElement("audio");
368      });
369
370      // const imageElement = document.createElement("img");
371      // imageElement.loading = "lazy";
372      // imageElement.src = `https://tode.party?${upload.name}`;
373      // imageElement.style.width = "100%";
374      // imageElement.style.objectFit = "contain";
375      // imageElement.style.border = "1px solid rgb(159, 174, 238)";
376      // imageElement.style.backgroundColor = "rgb(55, 67, 98)";
377      // imageElement.style.height = "300px";
378      // imageElement.onerror = () => {
379      //   imageElement.remove();
380      // };
381

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");
69  }
70
71  // get ?&generate=image&frame=S0mth1ingKrAzy
72  if (frameId && !frame_list.includes(frameId)) {
73    const html = renderToString(
85  const generateUrl = frames[frameId as keyof typeof frames];
86
87  // get ?&generate=image&frame=weather
88  if (isImageRequest) {
89    const width = 800;
90    const height = 480;
91
92    const imageResponse = await generateImageFromHtml(generateUrl, width, height);
93    return new Response(imageResponse.body, {
94      status: imageResponse.status,
95      headers: {
96        "Content-Type": "image/png",
97      },
98    });

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

9## Example
10This val tracks mentions of "Val Town" and related terms, excluding noise like retweets and irrelevant accounts. Notifications are sent to a Discord webhook but can be easily reconfigured for other platforms.
11<img src="https://imagedelivery.net/iHX6Ovru0O7AjmyT5yZRoA/85912106-f625-443e-5321-6e2699453200/public" width="500"/>
12To see exactly how we use this template at Val Town: https://www.val.town/x/stevekrouse/twitterAlert
13
16### 1. Fork this Val
17To use this template, fork this val on the top right corner of this page.
18![Screenshot 2025-01-10 at 1.22.10 PM.png](https://imagedelivery.net/iHX6Ovru0O7AjmyT5yZRoA/c4ae349d-7e28-4378-8646-21c8958e1f00/public)
19
20### 2. View Source Code
21<em>The `CODE` box shows you the the full source code of this val, you may need to scroll down to see it.</em>
22![image.png](https://imagedelivery.net/iHX6Ovru0O7AjmyT5yZRoA/6a4dabb4-3b27-4cea-fce3-95a1a1c3cd00/public)
23
24### 3. Customize Query

9## Example
10This val tracks mentions of "Val Town" and related terms, excluding noise like retweets and irrelevant accounts. Notifications are sent to a Discord webhook but can be easily reconfigured for other platforms.
11<img src="https://imagedelivery.net/iHX6Ovru0O7AjmyT5yZRoA/85912106-f625-443e-5321-6e2699453200/public" width="500"/>
12To see exactly how we use this template at Val Town: https://www.val.town/x/stevekrouse/twitterAlert
13
16### 1. Fork this Val
17To use this template, fork this val on the top right corner of this page.
18![Screenshot 2025-01-10 at 1.22.10 PM.png](https://imagedelivery.net/iHX6Ovru0O7AjmyT5yZRoA/c4ae349d-7e28-4378-8646-21c8958e1f00/public)
19
20### 2. View Source Code
21<em>The `CODE` box shows you the the full source code of this val, you may need to scroll down to see it.</em>
22![image.png](https://imagedelivery.net/iHX6Ovru0O7AjmyT5yZRoA/6a4dabb4-3b27-4cea-fce3-95a1a1c3cd00/public)
23
24### 3. Customize Query

9## Example
10This val tracks mentions of "Val Town" and related terms, excluding noise like retweets and irrelevant accounts. Notifications are sent to a Discord webhook but can be easily reconfigured for other platforms.
11<img src="https://imagedelivery.net/iHX6Ovru0O7AjmyT5yZRoA/85912106-f625-443e-5321-6e2699453200/public" width="500"/>
12To see exactly how we use this template at Val Town: https://www.val.town/x/stevekrouse/twitterAlert
13
16### 1. Fork this Val
17To use this template, fork this val on the top right corner of this page.
18![Screenshot 2025-01-10 at 1.22.10 PM.png](https://imagedelivery.net/iHX6Ovru0O7AjmyT5yZRoA/c4ae349d-7e28-4378-8646-21c8958e1f00/public)
19
20### 2. View Source Code
21<em>The `CODE` box shows you the the full source code of this val, you may need to scroll down to see it.</em>
22![image.png](https://imagedelivery.net/iHX6Ovru0O7AjmyT5yZRoA/6a4dabb4-3b27-4cea-fce3-95a1a1c3cd00/public)
23
24### 3. Customize Query

18      SUM(cache_write_tokens) as total_cache_write_tokens,
19      SUM(price) as total_price,
20      SUM(num_images) as total_images
21    FROM ${USAGE_TABLE}
22    WHERE our_api_token = 1
101          total_cache_write_tokens: userData.cache_write_tokens,
102          total_price: userData.price,
103          total_images: 0,
104          used_inference_data: true
105        });