Val Town Code SearchReturn to Val Town

10  return new Response(svg, {
11    headers: {
12      "Content-Type": "image/svg+xml",
13    },
14  });

11  total_cache_write_tokens: number;
12  total_price: number;
13  total_images: number;
14  used_inference_data?: boolean;
15}
40              <th>Cache Write</th>
41              <th>Total Price</th>
42              <th>Images</th>
43            </tr>
44          </thead>
54                <td>${formatNumber(row.total_cache_write_tokens)} ${row.used_inference_data ? '<span class="badge badge-info" title="Using inference data">I</span>' : ''}</td>
55                <td class="price">${formatPrice(row.total_price)} ${row.used_inference_data ? '<span class="badge badge-info" title="Using inference data">I</span>' : ''}</td>
56                <td>${formatNumber(row.total_images)}</td>
57              </tr>
58            `).join("")}

178
179- **Redirects:** Use `return new Response(null, { status: 302, headers: { Location: "/place/to/redirect" }})` instead of `Response.redirect` which is broken
180- **Images:** Avoid external images or base64 images. Use emojis, unicode symbols, or icon fonts/libraries instead
181- **AI Image:** To inline generate an AI image use: `<img src="https://maxm-imggenurl.web.val.run/the-description-of-your-image" />`
182- **Storage:** DO NOT use the Deno KV module for storage
183- **Browser APIs:** DO NOT use the `alert()`, `prompt()`, or `confirm()` methods

9import { useUsageStats } from "../hooks/useUsageStats.ts";
10import { Messages } from "./Messages.tsx";
11import { InputBox, ImageDropContainer } from "./InputBox.tsx";
12import { PreviewFrame } from "./PreviewFrame.tsx";
13import { BranchSelect } from "./BranchSelect.tsx";
66  refetch: () => void;
67}) {
68  const [images, setImages] = useState<(string|null)[]>([]);
69  const [selectedFiles, setSelectedFiles] = useState<string[]>([]);
70  const { audio, user } = useContext(AppContext);
85    branchId,
86    selectedFiles,
87    images,
88    soundEnabled: audio,
89  });
109
110  return (
111    <ImageDropContainer
112      running={running}
113      images={images}
114      setImages={setImages}>
115      <div className="single-column-container">
116        <div className="single-sticky-header">
120            rel="norefferer"
121            className="block-link text-link lockup">
122            {project.imageUrl ? (
123              <img src={project.imageUrl} className="image-thumbnail" />
124            ) : user?.profileImageUrl ? (
125              <img
126                src={user.profileImageUrl}
127                className="avatar"
128                alt={user.username}
131              />
132            ) : (
133              <div className="image-placeholder" />
134            )}
135            <div>{project.name}</div>
178              onSubmit={e => {
179                handleSubmit(e);
180                setImages([]);
181              }}
182              onCancel={handleStop}
183              running={running}
184              error={error}
185              images={images}
186              setImages={setImages}
187            />
188          )}
190        </div>
191      </div>
192    </ImageDropContainer>
193  );
194}

24              href={`#${item?.properties?.Name?.title?.[0]?.plain_text}`}
25              style={{
26                backgroundImage: `url(${item?.icon?.external?.url})`,
27              }}
28            >

2This project demonstrates how to build autonomous agents on Val Town that can be triggered by API calls, cron jobs, etc.
3
4![Screenshot 2025-05-29 at 8.03.54 PM.png](https://imagedelivery.net/iHX6Ovru0O7AjmyT5yZRoA/8d53ae11-7cc7-415d-9a2d-edd9c66c5500/public)
5
6## Setup

45  eventType: EventType;
46  seriesTitle: string;
47  seriesImage?: string | null;
48  seriesPageUrl: string;
49  chapterNumberText: string;
54  minutesAgo: number;
55  definitiveSeriesTitle?: string;
56  definitiveSeriesImage?: string;
57  synopsis?: string | null;
58}
269  chapterLinkElement: cheerio.Element,
270  seriesTitle: string,
271  seriesImage: string | null | undefined,
272  releaseTimeTextFromCaller: string,
273  seriesPageUrl: string,
275  | Omit<
276    ChapterEventInfo,
277    "eventType" | "seasonNumber" | "definitiveSeriesTitle" | "definitiveSeriesImage" | "synopsis"
278  >
279  | null {
294  return {
295    seriesTitle,
296    seriesImage,
297    seriesPageUrl,
298    chapterNumberText: chapterNumberTextInHtml,
361      }
362      const seriesPageUrl = new URL(seriesPagePath, BASE_URL).href;
363      const preliminarySeriesImage = $itemBlock.find("div.col-span-3 a img").attr("src");
364      const seriesImageFullUrl = preliminarySeriesImage ? new URL(preliminarySeriesImage, BASE_URL).href : null;
365
366      $itemBlock.find("div.flex.flex-col > span.flex-1 > div.flex.flex-row.justify-between").each((_cIdx, chapDiv) => {
388          $chapterLinkAnchor.get(0) as cheerio.Element,
389          preliminarySeriesTitle,
390          seriesImageFullUrl,
391          releaseTimeText,
392          seriesPageUrl,
418async function scrapeSeriesPageForDetails(
419  seriesPageUrl: string,
420): Promise<Pick<ChapterEventInfo, "definitiveSeriesTitle" | "definitiveSeriesImage" | "synopsis">> {
421  log("Scraping series page for details:", seriesPageUrl);
422  try {
454    if (!definitiveSeriesTitle) definitiveSeriesTitle = "Unknown Title";
455
456    const imageSelectors = [
457      "div.flex.flex-col.items-center img.aspect-\\[2\\/3\\]",
458      ".summary_image img",
459      ".info-cover img",
460      ".tab-summary .summary_image img",
461      "meta[property=\"og:image\"]",
462      "meta[name=\"twitter:image\"]",
463      ".wp-post-image",
464    ];
465    let definitiveSeriesImage = "";
466    for (const selector of imageSelectors) {
467      const $el = $(selector).first();
468      if ($el.length) {
469        definitiveSeriesImage = $el.attr("src") || $el.attr("content") || "";
470        if (definitiveSeriesImage) break;
471      }
472    }
473    if (definitiveSeriesImage && !definitiveSeriesImage.startsWith("http")) {
474      try {
475        definitiveSeriesImage = new URL(definitiveSeriesImage, BASE_URL).href;
476      } catch (e) {
477        errorLog(`Invalid image URL ${definitiveSeriesImage} for series ${seriesPageUrl}`);
478        definitiveSeriesImage = "";
479      }
480    }
481    log(`Scraped definitive image attempt for ${seriesPageUrl}: "${definitiveSeriesImage}"`);
482
483    let synopsis: string | null = null;
516    }
517    log(`Scraped synopsis attempt for ${seriesPageUrl}: "${synopsis ? synopsis.substring(0, 50) + "..." : "None"}"`);
518    return { definitiveSeriesTitle, definitiveSeriesImage, synopsis };
519  } catch (e) {
520    errorLog(`Exception in scrapeSeriesPageForDetails for ${seriesPageUrl}:`, e.message);
521    return {
522      definitiveSeriesTitle: "Error fetching title",
523      definitiveSeriesImage: "",
524      synopsis: "Error fetching synopsis.",
525    };
573
574      event.definitiveSeriesTitle = details.definitiveSeriesTitle;
575      event.definitiveSeriesImage = details.definitiveSeriesImage || event.seriesImage || "";
576      event.synopsis = details.synopsis || null;
577
611    const seasonNum = event.seasonNumber;
612    const synopsisText = event.synopsis ? `\n\n<b>Synopsis:</b>\n${htmlToText(event.synopsis)}` : "";
613    const imageUrl = event.definitiveSeriesImage || event.seriesImage;
614    let messageContent = "";
615    let sentinelKeyPart = "";
639    try {
640      log(`Announcing to PRIMARY (${PRIMARY_CHAT_ID}): ${nameOfManhwa} - Event: ${event.eventType}`);
641      if (imageUrl && (event.eventType === EventType.NEW_SERIES || event.eventType === EventType.SEASON_START)) {
642        await bot.api.sendPhoto(PRIMARY_CHAT_ID, imageUrl, { caption: messageContent, parse_mode: "HTML" });
643      } else {
644        await bot.api.sendMessage(PRIMARY_CHAT_ID, messageContent, {
668      try {
669        log(`Reposting to SECONDARY (${SECONDARY_CHAT_ID}): ${nameOfManhwa} - Event: ${event.eventType}`);
670        if (imageUrl && (event.eventType === EventType.NEW_SERIES || event.eventType === EventType.SEASON_START)) {
671          await bot.api.sendPhoto(SECONDARY_CHAT_ID, imageUrl, { caption: messageContent, parse_mode: "HTML" });
672        } else {
673          await bot.api.sendMessage(SECONDARY_CHAT_ID, messageContent, {

297              <div class="algolia_hit-right">
298                <div class="algolia_img-container">
299                  <img src="${hit["image"]}" loading="lazy" class="algolia_hit_img">
300                </div>
301                <div class="icon-1x1-medium w-embed"><svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M7 17L17 7M17 7H7M17 7V17" stroke="#6D7978" stroke-width="2" stroke-linecap="square"></path></svg></div></div>
386  hit["videoDuration"] || ""
387}</div></div>
388          <img class="algolia_video_image" src="${hit["coverImageUrl"]}" alt="${hit["name"]}" loading="lazy" />
389          <div class="absolute-plain-center algolia"><div class="tiny-button_wrapper"><div class="tiny-button negatif"><div class="icon-tiny-button w-embed"><svg width="9" height="12" viewBox="0 0 9 12" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M8.38315 4.752L2.15238 0.252C1.92115 0.08475 1.65323 0 1.38462 0C1.16031 0 0.936 0.0585 0.731077 0.17775C0.281077 0.43875 0 0.9465 0 1.5V10.5C0 11.0535 0.281077 11.5613 0.731077 11.8223C0.936 11.9415 1.16031 12 1.38462 12C1.65323 12 1.92115 11.9153 2.15308 11.748L8.38385 7.248C8.76877 6.96975 9 6.50175 9 6C9 5.49825 8.76877 5.03025 8.38315 4.752Z" fill="currentColor"></path></svg></div><div class="hover-button negatif"></div></div></div></div>
390          
456    </div>
457    <div class="algolia_hit-right">
458      <div class="algolia_img-container"><img src="${hit["image"]}" loading="lazy" alt="" class="algolia_hit_img"></div>
459      <div class="icon-1x1-medium w-embed"><svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M7 17L17 7M17 7H7M17 7V17" stroke="#6D7978" stroke-width="2" stroke-linecap="square"></path></svg></div></div>
460  </a>

5import satori from 'npm:satori'
6
7export function handleImageEndpoints(app: Hono) {
8  const headers = {
9    'Content-Type': 'image/png',
10    'cache-control': 'public, max-age=86400',
11  }
12  app.get('/image', async (c) => {
13    return c.body(await homeImage(), 200, headers)
14  })
15  app.get('/icon', async (c) => {
16    const rounded = !!c.req.query('rounded')
17    return c.body(await iconImage(rounded), 200, headers)
18  })
19}
20
21export async function homeImage() {
22  return await ogImage(
23    <div tw="w-full h-full flex justify-start items-end text-[100px] bg-black text-white p-[50px]">
24      <div tw="flex flex-col items-start">
32}
33
34export async function iconImage(rounded = false) {
35  const roundedClass = rounded ? 'rounded-[96px]' : ''
36  return await ogImage(
37    <div
38      tw={`w-full h-full flex justify-center items-center text-[100px] bg-[#7c65c1] text-white p-[50px] ${roundedClass}`}
49//////////
50
51export async function ogImage(body, options = {}) {
52  const svg = await satori(body, {
53    width: 945,
59      if (code === 'emoji') {
60        const unicode = segment.codePointAt(0).toString(16).toUpperCase()
61        return `data:image/svg+xml;base64,` + btoa(await loadEmoji(unicode))
62      }
63      return ''
95  const base64 = Buffer.from(svg).toString('base64')
96  // console.log('getIconDataUrl', name, svg, base64)
97  return `data:image/svg+xml;base64,${base64}`
98}
99

6    <title>Glance cobrowse demo</title>
7    <link rel="stylesheet" href="/frontend/style.css" />
8    <link rel="icon" href="/frontend/favicon.svg" type="image/svg+xml" />
9    <script src="https://cdn.tailwindcss.com"></script>
10    <link