Val Town Code SearchReturn to Val Town

77async function getScreenshot(url: string) {
78  const resp = await fetch(
79    "https://api.apiflash.com/v1/urltoimage?" + new URLSearchParams({
80      access_key: Deno.env.get("API_FLASH"),
81      url,
82      delay: "5",
83      format: "webp",
84      response_type: "image",
85      width: "1200",
86      height: "1200",

133            transform: scaleX(1);
134            transform-origin: center;
135            background-image: linear-gradient(45deg, #ff6b6b, #feca57, #48dbfb, #ff9ff3);
136            background-clip: text;
137            background-size: 300% 300%;

3Ask me about r's in strawberry
4
5![Screenshot 2024-12-13 at 13.49.45@2x.png](https://imagedelivery.net/iHX6Ovru0O7AjmyT5yZRoA/aaa3dc9f-2f43-4c1d-5b03-4e38a1f4ff00/public)
6

260  }
261
262  const sampleImageUrl =
263    "https://www.hollywoodreporter.com/wp-content/uploads/2024/11/tga24_poster1_4k-e1731968563811.jpg";
264
279        <meta property="og:title" content="Game Awards Prediction Challenge">
280        <meta property="og:description" content="Predict the winners of the Game Awards and compete with others!">
281        <meta property="og:image" content="${sampleImageUrl}">
282        <meta property="og:url" content="${import.meta.url}">
283        <meta property="og:type" content="website">
284        
285        <meta name="twitter:card" content="summary_large_image">
286        <meta name="twitter:title" content="Game Awards Prediction Challenge">
287        <meta name="twitter:description" content="Predict the winners of the Game Awards and compete with others!">
288        <meta name="twitter:image" content="${sampleImageUrl}">
289        
290        <link rel="icon" href="data:image/svg+xml,<svg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 100 100%22><text y=%22.9em%22 font-size=%2290%22>🎮</text></svg>">
291        
292        <style>${css}</style>

15    return new Response(buffer, {
16      headers: {
17        "Content-Type": "image/png",
18      },
19    });
38    }
39    
40    const pngBlob = await canvas.convertToBlob({ type: 'image/png' });
41    const buffer = await pngBlob.arrayBuffer();
42    
44      status: 500,
45      headers: {
46        "Content-Type": "image/png",
47        "X-Error-Message": String(error)
48      },

163          media.type === "photo"
164            ? (
165              <div key={index} className="image-container">
166                <img src={media.url} alt="Tweet media" className="tweet-image" onLoad={onMediaLoad} />
167              </div>
168            )
527}
528
529.image-container {
530  width: 100%;
531  height: 300px;
537}
538
539.tweet-image {
540  width: 100%;
541  height: 100%;

49
50function App() {
51  const [backgroundImage, setBackgroundImage] = useState<string | null>(null);
52  const [backgroundConfig, setBackgroundConfig] = useState<BackgroundConfig>({
53    type: 'gradient',
62  const canvasRef = useRef<HTMLCanvasElement>(null);
63
64  const handleImageUpload = (e: React.ChangeEvent<HTMLInputElement>) => {
65    const file = e.target.files?.[0];
66    if (file) {
67      const reader = new FileReader();
68      reader.onload = (event) => {
69        setBackgroundImage(event.target?.result as string);
70      };
71      reader.readAsDataURL(file);
220    createGradient(ctx);
221
222    // Draw background image if uploaded
223    if (backgroundImage) {
224      const img = new Image();
225      img.onload = () => {
226        // Scale and center image
227        const scale = Math.max(1200 / img.width, 630 / img.height);
228        const width = img.width * scale;
231        const y = (630 - height) / 2;
232        
233        ctx.drawImage(img, x, y, width, height);
234        
235        // Draw text nodes
241        });
242      };
243      img.src = backgroundImage;
244    } else {
245      // Draw text nodes without background image
246      textNodes.forEach(node => {
247        ctx.fillStyle = node.color;
251      });
252    }
253  }, [backgroundImage, backgroundConfig, textNodes]);
254
255  const downloadImage = () => {
256    const canvas = canvasRef.current;
257    if (!canvas) return;
258
259    const link = document.createElement('a');
260    link.download = 'opengraph-image.png';
261    link.href = canvas.toDataURL('image/png');
262    link.click();
263  };
271      fontFamily: 'system-ui, sans-serif' 
272    }}>
273      <h1>OpenGraph Image Generator</h1>
274      
275      <div style={{ display: 'flex', gap: '10px', marginBottom: '20px', flexWrap: 'wrap' }}>
276        <input 
277          type="file" 
278          accept="image/*" 
279          onChange={handleImageUpload} 
280        />
281        
382      ))}
383
384      <button onClick={downloadImage}>Download Image</button>
385
386      <canvas 
419    <html>
420      <head>
421        <title>OpenGraph Image Generator</title>
422        <meta name="viewport" content="width=device-width, initial-scale=1" />
423      </head>

49
50function App() {
51  const [backgroundImage, setBackgroundImage] = useState<string | null>(null);
52  const [backgroundConfig, setBackgroundConfig] = useState<BackgroundConfig>({
53    type: 'gradient',
62  const canvasRef = useRef<HTMLCanvasElement>(null);
63
64  const handleImageUpload = (e: React.ChangeEvent<HTMLInputElement>) => {
65    const file = e.target.files?.[0];
66    if (file) {
67      const reader = new FileReader();
68      reader.onload = (event) => {
69        setBackgroundImage(event.target?.result as string);
70      };
71      reader.readAsDataURL(file);
220    createGradient(ctx);
221
222    // Draw background image if uploaded
223    if (backgroundImage) {
224      const img = new Image();
225      img.onload = () => {
226        // Scale and center image
227        const scale = Math.max(1200 / img.width, 630 / img.height);
228        const width = img.width * scale;
231        const y = (630 - height) / 2;
232        
233        ctx.drawImage(img, x, y, width, height);
234        
235        // Draw text nodes
241        });
242      };
243      img.src = backgroundImage;
244    } else {
245      // Draw text nodes without background image
246      textNodes.forEach(node => {
247        ctx.fillStyle = node.color;
251      });
252    }
253  }, [backgroundImage, backgroundConfig, textNodes]);
254
255  const downloadImage = () => {
256    const canvas = canvasRef.current;
257    if (!canvas) return;
258
259    const link = document.createElement('a');
260    link.download = 'opengraph-image.png';
261    link.href = canvas.toDataURL('image/png');
262    link.click();
263  };
271      fontFamily: 'system-ui, sans-serif' 
272    }}>
273      <h1>OpenGraph Image Generator</h1>
274      
275      <div style={{ display: 'flex', gap: '10px', marginBottom: '20px', flexWrap: 'wrap' }}>
276        <input 
277          type="file" 
278          accept="image/*" 
279          onChange={handleImageUpload} 
280        />
281        
382      ))}
383
384      <button onClick={downloadImage}>Download Image</button>
385
386      <canvas 
419    <html>
420      <head>
421        <title>OpenGraph Image Generator</title>
422        <meta name="viewport" content="width=device-width, initial-scale=1" />
423      </head>

8      "content": [{
9        type: "text",
10        text: "Explain this image in 1-3 emoji",
11      }, {
12        type: "image_url",
13        image_url: {
14          url: "https://0x0.st/XNxo.png",
15        },

4
5
6![image.png](https://imagedelivery.net/iHX6Ovru0O7AjmyT5yZRoA/df520ac1-06f0-4502-902e-0e07adaab400/public)
7
8Ways this could be better:
9
10- Give it a better name, like: actuallygoodemojisearch.net
11- Index the emojis better, eg: feed the emoji image into an llm and get a richer description of what the emoji is and represents.
12- Make static pages for each emoji with "related" emojis (do vector similarity on the current emoji against other emojis).