Val Town Code SearchReturn to Val Town

97  const svg = render(badge);
98
99  return new Response(svg, { headers: { "Content-Type": "image/svg+xml;charset=utf-8" } });
100}

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"/>

1/**
2 * This meme creation tool app will allow users to create memes by selecting an image and adding top and bottom text.
3 * We'll use HTML5 Canvas to render the meme directly in the browser, with custom positioning for different meme templates.
4 */
35  }, []);
36
37  const getTextPositions = (imageWidth: number, imageHeight: number, templateId: string): [TextPosition, TextPosition] => {
38    const defaultColor = "white";
39    switch (templateId) {
40      case "1": // Drake
41        return [
42          { x: imageWidth * 0.7, y: imageHeight * 0.25, maxWidth: imageWidth * 0.5, color: "black" },
43          { x: imageWidth * 0.7, y: imageHeight * 0.75, maxWidth: imageWidth * 0.5, color: "black" }
44        ];
45      case "2": // Distracted Boyfriend
46        return [
47          { x: imageWidth * 0.6, y: imageHeight * 0.1, maxWidth: imageWidth * 0.3, color: defaultColor },
48          { x: imageWidth * 0.8, y: imageHeight * 0.1, maxWidth: imageWidth * 0.3, color: defaultColor }
49        ];
50      case "3": // Two Buttons
51        return [
52          { x: imageWidth * 0.5, y: imageHeight * 0.1, maxWidth: imageWidth * 0.8, color: defaultColor },
53          { x: imageWidth * 0.5, y: imageHeight * 0.9, maxWidth: imageWidth * 0.8, color: defaultColor }
54        ];
55      case "4": // Expanding Brain
56        return [
57          { x: imageWidth * 0.5, y: imageHeight * 0.15, maxWidth: imageWidth * 0.8, color: defaultColor },
58          { x: imageWidth * 0.5, y: imageHeight * 0.95, maxWidth: imageWidth * 0.8, color: defaultColor }
59        ];
60      case "5": // Change My Mind
61        return [
62          { x: imageWidth * 0.5, y: imageHeight * 0.7, maxWidth: imageWidth * 0.8, color: defaultColor },
63          { x: imageWidth * 0.5, y: imageHeight * 0.9, maxWidth: imageWidth * 0.8, color: defaultColor }
64        ];
65      default:
66        return [
67          { x: imageWidth * 0.5, y: imageHeight * 0.1, maxWidth: imageWidth * 0.9, color: defaultColor },
68          { x: imageWidth * 0.5, y: imageHeight * 0.9, maxWidth: imageWidth * 0.9, color: defaultColor }
69        ];
70    }
78    if (!ctx) return;
79
80    const selectedImage = templates.find(t => t.id === selectedTemplate);
81    if (!selectedImage) return;
82
83    const image = new Image();
84    image.crossOrigin = "anonymous";
85    image.onload = () => {
86      canvas.width = image.width;
87      canvas.height = image.height;
88      ctx.drawImage(image, 0, 0);
89
90      const fontSize = Math.floor(image.height / 15);
91      ctx.font = `bold ${fontSize}px Impact, sans-serif`;
92      ctx.textAlign = "center";
93
94      const [topPosition, bottomPosition] = getTextPositions(image.width, image.height, selectedTemplate);
95
96      // Function to draw text with word wrap
131      setMemeUrl(canvas.toDataURL());
132    };
133    image.src = selectedImage.url;
134  };
135
164      </form>
165      <canvas ref={canvasRef} style={{ display: 'none' }}></canvas>
166      {memeUrl && <img src={memeUrl} alt="Generated Meme" className="meme-image" />}
167      <p>
168        <a href={import.meta.url.replace("esm.town", "val.town")} target="_blank">View Source</a>
247    background-color: #45a049;
248  }
249  .meme-image {
250    max-width: 100%;
251    display: block;

71          canvas.height = video.videoHeight;
72          canvas.width = video.videoWidth;
73          context.drawImage(video, 0, 0, canvas.width, canvas.height);
74          const imageData = context.getImageData(0, 0, canvas.width, canvas.height);
75          addDebug(`Scanning frame: ${canvas.width}x${canvas.height}`);
76          const code = jsQR(imageData.data, imageData.width, imageData.height);
77
78          if (code) {

11  "file-upload",
12  "multipart-form-data",
13  "image-upload",
14  "s3",
15  "uploadcare",

1# Code on Val Town
2
3![Screenshot 2024-02-27 at 1.25.46 PM.png](https://imagedelivery.net/iHX6Ovru0O7AjmyT5yZRoA/6b67bb0a-d80f-4f3d-5b17-57b5378b3e00/public)
4
5Adds a "Code on Val Town" ribbon to your page. This lets your website visitors navigate to the code behind it.

20 * - Analyzing gene expression data in bioinformatics
21 * - Exploring customer segmentation in marketing analytics
22 * - Visualizing image embeddings in computer vision tasks
23 */
24
133        <li>Analyzing gene expression data in bioinformatics</li>
134        <li>Exploring customer segmentation in marketing analytics</li>
135        <li>Visualizing image embeddings in computer vision tasks</li>
136    </ul>
137

14- Visualizing word embeddings in a scatterplotcs
15- Exploring customer segmentation in marketing analytics
16- Visualizing image embeddings in computer vision tasks

3This is a lightweight Blob Admin interface to view and debug your Blob data.
4
5![b7321ca2cd80899250589b9aa08bc3cae9c7cea276282561194e7fc537259b46.png](https://imagedelivery.net/iHX6Ovru0O7AjmyT5yZRoA/311a81bb-18d8-4583-b7e3-64bac326f700/public)
6
7Use this button to install the val:

1# ☔️ Umbrella reminder if there's rain today
2
3![Screenshot 2023-09-14 at 12.31.32.png](https://imagedelivery.net/iHX6Ovru0O7AjmyT5yZRoA/d82916ca-f8d9-4b49-88c6-420ab67a7700/public)
4
5## Setup