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}

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;

2 * This ego booster app takes a selfie, sends it to GPT-4o-mini for analysis,
3 * and streams funny, specific compliments about the user's appearance.
4 * We use the WebRTC API for camera access, the OpenAI API for image analysis,
5 * and server-sent events for real-time streaming of compliments.
6 */
73    const context = canvasRef.current.getContext('2d');
74    if (context) {
75      context.drawImage(videoRef.current, 0, 0, canvasRef.current.width, canvasRef.current.height);
76      console.log("Selfie captured on canvas");
77      try {
78        const blob = await new Promise<Blob | null>((resolve) => canvasRef.current!.toBlob(resolve, 'image/jpeg'));
79        if (blob) {
80          console.log("Blob created, size:", blob.size);
81          const formData = new FormData();
82          formData.append('image', blob, 'selfie.jpg');
83          
84          console.log("Sending request to /analyze");
112        } else {
113          console.log("Failed to create blob");
114          throw new Error("Failed to create image blob");
115        }
116      } catch (error) {
177    console.log("Handling POST request to /analyze");
178    const formData = await request.formData();
179    const image = formData.get('image') as File;
180
181    if (!image) {
182      console.log("No image provided in request");
183      return new Response('No image provided', { status: 400 });
184    } else {
185      console.log("Image received, size:", image.size);
186    }
187
192      async start(controller) {
193        try {
194          console.log("Starting to process image");
195          const arrayBuffer = await image.arrayBuffer();
196          const base64Image = btoa(String.fromCharCode(...new Uint8Array(arrayBuffer)));
197
198          console.log("Sending request to OpenAI");
202              {
203                role: "system",
204                content: "You are a hilarious and overly enthusiastic ego booster. Your job is to provide 5 funny, specific, and over-the-top compliments about the person's appearance in the image. Be creative, exaggerate, and make it entertaining! Keep each compliment short and punchy, around 10-15 words max. Use lots of emojis and fun language. Respond in markdown format, with each compliment as a separate bullet point."
205              },
206              {
208                content: [
209                  { type: "text", text: "Analyze this selfie and give me 5 short, funny, specific compliments about my appearance:" },
210                  { type: "image_url", image_url: { url: `data:image/jpeg;base64,${base64Image}` } }
211                ]
212              }

5/**
6 * Provides functions for interacting with your account's blob storage.
7 * Blobs can store any data type (text, JSON, images, etc.) and allow
8 * retrieval across different vals using the same key.
9 * ([Docs ↗](https://docs.val.town/std/blob))

14
15<img 
16  src="https://imagedelivery.net/iHX6Ovru0O7AjmyT5yZRoA/d2a422fe-8dc3-4f04-aaa3-3c35a2e99100/public" 
17  width="500px"
18/>
50where they can pick which way to login: email, Google, Github, etc.
51
52![Screenshot 2024-08-08 at 08.48.41.gif](https://imagedelivery.net/iHX6Ovru0O7AjmyT5yZRoA/36674739-cd88-472c-df16-cd0b3a62bc00/public)
53
54[Live Demo](https://www.val.town/v/stevekrouse/lastlogin_demo)

1
2![Screenshot 2024-08-08 at 08.48.41.gif](https://imagedelivery.net/iHX6Ovru0O7AjmyT5yZRoA/7442086d-36b2-454d-bd5f-3c28615e9000/public)
3
4

3We hosted a party in the Val Town office and I texted a link to this site to all guests:
4
5![Screenshot 2024-08-05 at 12.30.16@2x.png](https://imagedelivery.net/iHX6Ovru0O7AjmyT5yZRoA/120a1c41-bedb-4bda-568d-2c0913d46800/public)
6
7You can see a demo here: https://x.com/stevekrouse/status/1819018859099132128

7
8const TMDB_API_BASE = "https://api.themoviedb.org/3"
9const TMDB_IMAGE_BASE = "https://image.tmdb.org/t/p/w200"
10
11const headers = {
65    movies.map((movie, index) => `
66            <div class="movie-container">
67              <img src="${TMDB_IMAGE_BASE}${movie.poster_path}" alt="${movie.title}" style="width: 100px;">
68              <div class="movie-info">
69                <h3>${movie.title}</h3>
130      return `
131            <div class="movie-result ${resultClass}">
132              <img src="${TMDB_IMAGE_BASE}${movie.poster_path}" alt="${movie.title}" style="width: 100px;">
133              <div class="movie-info">
134                <h3>${movie.title}</h3>

4
5<img width="300px"
6  src="https://imagedelivery.net/iHX6Ovru0O7AjmyT5yZRoA/3618d5f1-fe2c-4b44-bdef-3c679f390700/public"/>
7
8

42  functions where possible. Unless specified, don't add error handling, 
43  make sure that errors bubble up to the caller.
44  Avoid external images or base64 images, use emojis, unicode symtols, or icon fonts/libraries instead, unless that's
45  not practical for the user's request (e.g. if they ask for a particular animated gif).
46  If the user asks for something that requires persistence, use the Val Town Blob storage API, unless