Val Town Code SearchReturn to Val Town

1interface WikipediaImage {
2  source: string;
3  width: number;
9  pageId: number;
10  extract: string;
11  image?: WikipediaImage;
12  url: string;
13}
14
15export const fetchWikipediaImage = async (request: Request): Promise<Response> => {
16  const url = new URL(request.url);
17  const pageName = url.searchParams.get("title");
30    return formatResponse(pageData, format);
31  } catch (error) {
32    console.error("Error fetching Wikipedia image:", error);
33    return new Response("An error occurred while fetching the image", { status: 500 });
34  }
35};
63  apiUrl.searchParams.append("action", "query");
64  apiUrl.searchParams.append("titles", searchResult.title);
65  apiUrl.searchParams.append("prop", "pageimages|extracts|info|images|pageprops");
66  apiUrl.searchParams.append("piprop", "original|name");
67  apiUrl.searchParams.append("pithumbsize", "1000");
89  const page = pages[0] as any;
90
91  const image = await getImageFromPage(page);
92
93  return {
95    pageId: page.pageid,
96    extract: page.extract || "No description available.",
97    image: image,
98    url: page.fullurl,
99  };
100}
101
102async function getImageFromPage(page: any): Promise<WikipediaImage | undefined> {
103  console.log("Page data:", JSON.stringify(page, null, 2));
104
105  // Check for page_image in pageprops (this is usually the main image)
106  if (page.pageprops && page.pageprops.page_image) {
107    const imageData = await getImageInfo(page.pageprops.page_image);
108    if (imageData) return imageData;
109  }
110
111  // If no main image found, try the original image
112  if (page.original) {
113    return {
118  }
119
120  // If still no image, try the images array
121  if (page.images && page.images.length > 0) {
122    for (const image of page.images) {
123      const imageData = await getImageInfo(image.title);
124      if (imageData) return imageData;
125    }
126  }
127
128  console.log("No image found for the page.");
129  return undefined;
130}
131
132async function getImageInfo(filename: string): Promise<WikipediaImage | undefined> {
133  // Remove 'File:' prefix if it exists
134  filename = filename.replace(/^File:/, "");
137  apiUrl.searchParams.append("action", "query");
138  apiUrl.searchParams.append("titles", `File:${filename}`);
139  apiUrl.searchParams.append("prop", "imageinfo");
140  apiUrl.searchParams.append("iiprop", "url|size");
141  apiUrl.searchParams.append("format", "json");
144  const data = await response.json();
145
146  console.log("Image info response:", JSON.stringify(data, null, 2));
147
148  const pages = Object.values(data.query.pages);
149  if (pages.length > 0) {
150    const page = pages[0] as any;
151    if (page.imageinfo && page.imageinfo[0]) {
152      const imageInfo = page.imageinfo[0];
153      return {
154        source: imageInfo.url,
155        width: imageInfo.width,
156        height: imageInfo.height,
157      };
158    }
159  }
160
161  console.log("No image info found for:", filename);
162  return undefined;
163}
168): Response {
169  const responseData = {
170    imageUrl: pageData.image ? pageData.image.source : "No image available",
171    pageTitle: pageData.title,
172    pageUrl: pageData.url,
186          <h2>${responseData.pageTitle}</h2>
187          ${
188        responseData.imageUrl !== "No image available"
189          ? `<img src="${responseData.imageUrl}" alt="${responseData.pageTitle}" style="max-width: 100%; height: auto;"/>`
190          : "<p>No image available</p>"
191      }
192          <p>${responseData.extract}</p>
198      });
199    default:
200      return new Response(responseData.imageUrl, {
201        headers: { "Content-Type": "text/plain" },
202      });

22  borderWindowOuter: `inset -1px -1px ${colors.windowFrame}, inset 1px 1px ${colors.buttonFace}`,
23  minimizeIcon:
24    "data:image/svg+xml;charset=utf-8,%3Csvg width='6' height='2' viewBox='0 0 6 2' fill='none' xmlns='http://www.w3.org/2000/svg'%3E %3Crect width='6' height='2' fill='black'/%3E %3C/svg%3E",
25  maximizeIcon:
26    "data:image/svg+xml;charset=utf-8,%3Csvg width='9' height='8' viewBox='0 0 9 8' fill='none' xmlns='http://www.w3.org/2000/svg'%3E %3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M0 2V7V8H1H8H9V7V2V0H8H1H0V2ZM8 7V2H1V7H8Z' fill='black'/%3E %3C/svg%3E",
27  closeIcon:
28    "data:image/svg+xml;charset=utf-8,%3Csvg width='8' height='7' viewBox='0 0 8 7' fill='none' xmlns='http://www.w3.org/2000/svg'%3E %3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M0 0H1H2V1H3V2H4H5V1H6V0H7H8V1H7V2H6V3H5V4H6V5H7V6H8V7H7H6V6H5V5H4H3V6H2V7H1H0V6H1V5H2V4H3V3H2V2H1V1H0V0Z' fill='black'/%3E %3C/svg%3E",
29  elementSpacing: 8,
30};
122    <TitleBarControl
123      style={{
124        backgroundImage: `url(${tokens.minimizeIcon})`,
125        backgroundRepeat: "no-repeat",
126        // // Only a single value is supported
139    <TitleBarControl
140      style={{
141        backgroundImage: `url(${tokens.maximizeIcon})`,
142        backgroundRepeat: "no-repeat",
143        // backgroundPosition: "top 2px left 3x",
155      marginLeft={2}
156      style={{
157        backgroundImage: `url(${tokens.closeIcon})`,
158        backgroundRepeat: "no-repeat",
159        // backgroundPosition: "top 3px left 4px",
285
286  return c.body(svg, 200, {
287    "Content-Type": "image/svg+xml",
288  });
289});

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

1import { ImageMagick, initializeImageMagick, MagickGeometry } from "https://deno.land/x/imagemagick_deno@0.0.14/mod.ts";
2
3export async function modifyImage(
4  file: File,
5  params: { width: number; height: number },
6) {
7  const imageBuffer = new Uint8Array(await file.arrayBuffer());
8  const sizingData = new MagickGeometry(
9    params.width,
12  sizingData.ignoreAspectRatio = params.height > 0 && params.width > 0;
13  return new Promise<File>((resolve) => {
14    ImageMagick.read(imageBuffer, (image) => {
15      image.resize(sizingData);
16      image.write((data) => resolve(new File([data], file.name, { type: file.type })));
17    });
18  });

16            <meta name="viewport" content="width=device-width, initial-scale=1.0">
17            <title>hello, resume</title>
18            <link rel="icon" href="data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 32 32'><text y='50%' font-size='24' text-anchor='middle' x='50%' dy='.3em'>📄</text></svg>">
19            <style>
20              ${helloResume}
29      }
30
31      // Add OG image URL and custom title to the config
32      const ogImageUrl = 'https://tseeley.com/images/ufoog.JPG'; // Replace with your actual OG image URL
33      const customTitle = `resume ✦ thomas seeley`; // You can customize this as needed
34
35      const resumeHTML = renderResume({
36        ...config,
37        ogImageUrl,
38        customTitle
39      });

10* Create a [Val Town API token](https://www.val.town/settings/api), open the browser preview of this val, and use the API token as the password to log in.
11
12<img width=500 src="https://imagedelivery.net/iHX6Ovru0O7AjmyT5yZRoA/7077d1b5-1fa7-4a9b-4b93-f8d01d3e4f00/public"/>

3Every weekday at 9am EDT send a message to our team's #engineering Discord channel to start a thread to remind us to do our standup.
4
5![Screenshot 2024-03-14 at 09.27.26.png](https://imagedelivery.net/iHX6Ovru0O7AjmyT5yZRoA/c5309028-4983-4a27-1aab-0e2bb0fc1800/public)
6
7Slack version: @mikker/dailySlackRoundup

3View and interact with your Val Town SQLite data. It's based off Steve's excellent [SQLite Admin](https://www.val.town/v/stevekrouse/sqlite_admin?v=46) val, adding the ability to run SQLite queries directly in the interface. This new version has a revised UI and that's heavily inspired by [LibSQL Studio](https://github.com/invisal/libsql-studio) by [invisal](https://github.com/invisal). This is now more an SPA, with tables, queries and results showing up on the same page. 
4
5![image.webp](https://imagedelivery.net/iHX6Ovru0O7AjmyT5yZRoA/c8e102fd-39ca-4bfb-372a-8d36daf43900/public)
6
7## Install 

1# [Infinite SVG Graph](https://maxm-infinitesvggraph.web.val.run/)
2
3[![image.png](https://i.imgur.com/noRUzvk.gif)](https://maxm-infinitesvggraph.web.val.run/)
4
5A connected graph of AI-generated SVG images.
6
7Ask it to make any kind of SVG. Add your contribution to the graph. Make it POP!

8// Val-name scoped table addressing.
9const { name } = extractValInfo(import.meta.url);
10const tableName = `${name}_svg_images`;
11const heartHashTableName = `${name}_heart_hash`;
12
94    const decoder = new TextDecoder();
95    const svgCode = document.getElementById("svgCode");
96    const svgImage = document.getElementById("svgImage");
97    let foundSVGEnd = false;
98    let htmlContent = "";
99    let jsonResponse = "";
100    svgCode.textContent = "";
101    svgImage.innerHTML = "";
102    while (true) {
103      const { done, value } = await reader.read();
105      if (!foundSVGEnd) {
106        svgCode.textContent += decoder.decode(value, { stream: true });
107        svgImage.innerHTML = svgCode.textContent + "</svg>";
108        Prism.highlightElement(svgCode);
109        if (svgCode.textContent.indexOf("</svg>") > -1) {
338        <div class="bg-white p-6 rounded-lg shadow-md mb-8">
339            <div class="flex space-x-4 mb-4">
340                <div class="w-1/2 border p-4 rounded" id="svgImage">
341                    ${svg.svg.svg_source}
342                </div>
398  const stream = await openai.chat.completions.create({
399    messages: [
400      { role: "user", content: "make me an svg image" },
401      { role: "system", content: "```xml\n" + svg.svg_source + "\n```" },
402      { role: "user", content: "Edit this svg. " + prompt },
421    });
422    try {
423      const svgDoc = parser.parseFromString(svgString, "image/svg+xml");
424      if (!svgDoc) return false;
425      const parserError = svgDoc.getElementsByTagName("parsererror");
434  let foundSVGEnd = false;
435  let buffer = "";
436  let svgImage = "";
437  return new Response(
438    new ReadableStream({
444          if (!foundSVGStart && location > -1) {
445            foundSVGStart = true;
446            svgImage = buffer.slice(location);
447            controller.enqueue(encoder.encode(buffer.slice(location)));
448            buffer = "";
449          } else if (foundSVGStart && !foundSVGEnd) {
450            svgImage += line;
451            let endLocation = svgImage.indexOf("</svg>");
452            if (endLocation > -1) {
453              svgImage = svgImage.slice(0, endLocation + "</svg>".length);
454              foundSVGEnd = true;
455              console.log(JSON.stringify(svgImage));
456            }
457            controller.enqueue(encoder.encode(line));
459        }
460        controller.enqueue(encoder.encode("     "));
461        if (isValidSVG(svgImage)) {
462          try {
463            let resp = await sqlite.execute({
464              sql: `INSERT INTO ${tableName} (prompt, svg_source, parent_id) VALUES (?, ?, ?) RETURNING *`,
465              args: [prompt, svgImage, svg.id],
466            });
467            controller.enqueue(encoder.encode(JSON.stringify(resultSetToSVG(resp)[0])));
496  let svg = await getSVG(c.req.param("id"));
497  return new Response(addSVGNamespace(svg.svg_source), {
498    headers: { "Content-Type": "image/svg+xml", "Cache-Control": "max-age=86400" },
499  });
500});