Val Town Code SearchReturn to Val Town

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

1// Thank you for the feedback! You're right, we need to handle cases where playlist images might be missing.
2// Let's update the code to handle this gracefully and provide a default image when necessary.
3
4import { Hono } from "npm:hono@3";
95                  playlistEl.className = 'bg-gray-800 rounded-lg p-4 mb-4 flex items-center cursor-pointer hover:bg-gray-700 transition-colors duration-300';
96                  playlistEl.onclick = () => fetchTracks(playlist.id, playlist.name);
97                  const imageUrl = playlist.images && playlist.images.length > 0 ? playlist.images[0].url : 'https://via.placeholder.com/60';
98                  playlistEl.innerHTML = \`
99                    <img src="\${imageUrl}" alt="\${playlist.name}" class="w-16 h-16 rounded-md mr-4 object-cover">
100                    <div>
101                      <h3 class="font-semibold text-lg text-green-400">\${playlist.name}</h3>
125                    const artistNames = track.track.artists.map(artist => artist.name).join(', ');
126                    const duration = new Date(track.track.duration_ms).toISOString().substr(14, 5);
127                    const imageUrl = track.track.album.images && track.track.album.images.length > 0 ? track.track.album.images[0].url : 'https://via.placeholder.com/50';
128                    trackEl.innerHTML = \`
129                      <div class="text-gray-500 mr-4 w-8 text-center">\${index + 1}</div>
130                      <img src="\${imageUrl}" alt="\${track.track.name}" class="w-12 h-12 rounded-md mr-4 object-cover">
131                      <div class="flex-grow">
132                        <h3 class="font-semibold text-green-400">\${track.track.name}</h3>