Val Town Code SearchReturn to Val Town

1/**
2 * This dating app allows users to upload photos of their bedside table and phone case.
3 * It uses Val Town's SQLite for data persistence and blob storage for image uploads.
4 * The app includes a simple matching algorithm based on common items in bedside tables.
5 */
12  const [user, setUser] = useState(null);
13  const [matches, setMatches] = useState([]);
14  const [bedsideImage, setBedsideImage] = useState(null);
15  const [phoneCaseImage, setPhoneCaseImage] = useState(null);
16
17  useEffect(() => {
25      const userData = await response.json();
26      setUser(userData);
27      setBedsideImage(userData.bedsideImage);
28      setPhoneCaseImage(userData.phoneCaseImage);
29    }
30  };
38  };
39
40  const handleImageUpload = async (event, type) => {
41    const file = event.target.files[0];
42    const formData = new FormData();
43    formData.append('image', file);
44    formData.append('type', type);
45
52      const result = await response.json();
53      if (type === 'bedside') {
54        setBedsideImage(result.imageUrl);
55      } else {
56        setPhoneCaseImage(result.imageUrl);
57      }
58    }
65        <div>
66          <h2>Welcome, {user.name}!</h2>
67          <div className="image-upload">
68            <h3>Your Bedside Table</h3>
69            {bedsideImage ? (
70              <img src={bedsideImage} alt="Bedside Table" className="uploaded-image" />
71            ) : (
72              <input type="file" onChange={(e) => handleImageUpload(e, 'bedside')} />
73            )}
74          </div>
75          <div className="image-upload">
76            <h3>Your Phone Case</h3>
77            {phoneCaseImage ? (
78              <img src={phoneCaseImage} alt="Phone Case" className="uploaded-image" />
79            ) : (
80              <input type="file" onChange={(e) => handleImageUpload(e, 'phonecase')} />
81            )}
82          </div>
86              <div key={match.id} className="match">
87                <h4>{match.name}</h4>
88                <img src={match.bedsideImage} alt="Bedside Table" className="match-image" />
89                <img src={match.phoneCaseImage} alt="Phone Case" className="match-image" />
90              </div>
91            ))}
118      id INTEGER PRIMARY KEY AUTOINCREMENT,
119      name TEXT NOT NULL,
120      bedsideImage TEXT,
121      phoneCaseImage TEXT
122    )
123  `);
131      id: 1,
132      name: "John Doe",
133      bedsideImage: "https://maxm-imggenurl.web.val.run/a-simple-bedside-table-with-a-lamp-and-book",
134      phoneCaseImage: "https://maxm-imggenurl.web.val.run/a-plain-black-phone-case"
135    };
136    return new Response(JSON.stringify(user), { headers: { 'Content-Type': 'application/json' } });
140    // In a real app, you'd implement a matching algorithm. Here we're returning dummy data.
141    const matches = [
142      { id: 2, name: "Jane Smith", bedsideImage: "https://maxm-imggenurl.web.val.run/a-bedside-table-with-plants-and-a-clock", phoneCaseImage: "https://maxm-imggenurl.web.val.run/a-colorful-floral-phone-case" },
143      { id: 3, name: "Bob Johnson", bedsideImage: "https://maxm-imggenurl.web.val.run/a-messy-bedside-table-with-many-gadgets", phoneCaseImage: "https://maxm-imggenurl.web.val.run/a-rugged-outdoor-phone-case" }
144    ];
145    return new Response(JSON.stringify(matches), { headers: { 'Content-Type': 'application/json' } });
148  if (path === '/upload' && request.method === 'POST') {
149    const formData = await request.formData();
150    const image = formData.get('image') as File;
151    const type = formData.get('type') as string;
152
153    if (image && type) {
154      const imageBuffer = await image.arrayBuffer();
155      const imageKey = `${KEY}_${type}_${Date.now()}`;
156      await blob.set(imageKey, imageBuffer);
157      const imageUrl = `https://val.town/v/${KEY}/blobs/${imageKey}`;
158
159      // Update user's image in the database
160      await sqlite.execute(`
161        UPDATE ${KEY}_users
162        SET ${type === 'bedside' ? 'bedsideImage' : 'phoneCaseImage'} = ?
163        WHERE id = 1
164      `, [imageUrl]);
165
166      return new Response(JSON.stringify({ imageUrl }), { headers: { 'Content-Type': 'application/json' } });
167    }
168
206}
207
208.image-upload {
209  margin-bottom: 20px;
210}
211
212.uploaded-image, .match-image {
213  max-width: 200px;
214  max-height: 200px;

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      });

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});