Val Town Code SearchReturn to Val Town

4
5function App() {
6  const [imageUrl, setImageUrl] = useState(null);
7  const [webpUrl, setWebpUrl] = useState(null);
8  const [originalSize, setOriginalSize] = useState(null);
15      const reader = new FileReader();
16      reader.onload = (e) => {
17        setImageUrl(e.target.result);
18        setOriginalSize(formatSize(file.size));
19      };
23
24  const convertToWebP = () => {
25    if (!imageUrl) return;
26
27    const img = new Image();
28    img.onload = () => {
29      const canvas = document.createElement('canvas');
31      canvas.height = img.height;
32      const ctx = canvas.getContext('2d');
33      ctx.drawImage(img, 0, 0);
34      
35      canvas.toBlob((blob) => {
37        setWebpUrl(url);
38        setWebpSize(formatSize(blob.size));
39      }, 'image/webp');
40    };
41    img.src = imageUrl;
42  };
43
44  const deleteImages = () => {
45    setImageUrl(null);
46    setWebpUrl(null);
47    setOriginalSize(null);
62  return (
63    <div className="container">
64      <h1>Image to WebP Converter</h1>
65      <input 
66        type="file" 
67        accept="image/*" 
68        onChange={handleFileChange} 
69        ref={fileInputRef}
70      />
71      {imageUrl && (
72        <div>
73          <img src={imageUrl} alt="Original" className="preview" />
74          <p>Original Size: {originalSize}</p>
75          <button onClick={convertToWebP}>Convert to WebP</button>
83        </div>
84      )}
85      {(imageUrl || webpUrl) && (
86        <button onClick={deleteImages} className="delete-btn">Delete Images</button>
87      )}
88      <p className="footer">
106        <meta charset="UTF-8">
107        <meta name="viewport" content="width=device-width, initial-scale=1.0">
108        <title>Image to WebP Converter</title>
109        <style>${css}</style>
110      </head>

169      {
170        headers: {
171          "content-type": "image/svg+xml;charset=UTF-8",
172        },
173      },

28          src="https://maxm-imggenurl.web.val.run/profile-picture" 
29          alt="Profile" 
30          className="profile-image" 
31        />
32        <h1>Your Name</h1>
103}
104
105.profile-image {
106  width: 120px;
107  height: 120px;

114  introduction_message?: string;
115  expand_text_attachments?: boolean;
116  enable_image_comprehension?: boolean;
117  enforce_author_role_alternation?: boolean;
118  enable_multi_bot_chat_prompting?: boolean;

9const createMap = (data) => {
10  const baseUrl = "https://www.davidrumsey.com/luna/servlet/iiif/";
11  // const resourceId = data.image_url.replace("/info.json", "");
12  const resourceId = baseUrl + data.id;
13  const resourceMask = data.m;
25      width,
26      height,
27      type: "ImageService2",
28      partOf: [
29        {

57      "<svg xmlns=\"http://www.w3.org/2000/svg\" xmlns:xlink=\"http://www.w3.org/1999/xlink\" version=\"1.1\" ",
58    ),
59    { headers: { "Content-Type": "image/svg+xml" } },
60  );
61}

11|-----|-----|
12| Web page | https://alexwein-fabwbogglelike.web.val.run |
13| Observable Plot for image | https://observablehq.com/plot/ |
14| wordnik from words | https://github.com/wordnik/wordlist |

3Feel free to mess around with this val and make it your own :). Just click on "Fork" in the top right.
4
5You can change the phrases that show up as you click no, you can change the firstImg and secondImg, maybe even add more images. And you can also change the colors and any of the text on the screen!
6
7Have fun with it and hopefully your crush says yes hehe.

3Feel free to mess around with this val and make it your own :). Just click on "Fork" in the top right.
4
5You can change the phrases that show up as you click no, you can change the firstImg and secondImg, maybe even add more images. And you can also change the colors and any of the text on the screen!
6
7Have fun with it and hopefully your crush says yes hehe.

3Yep you can run it from the [vscode extension](https://marketplace.visualstudio.com/items?itemName=pomdtr.valtown).
4
5![2844a1869371362842589e509b36aea1d8c3bd4bbefe3eee08742ee0eb62d965.png](https://imagedelivery.net/iHX6Ovru0O7AjmyT5yZRoA/3980d11e-ac5b-4448-bfe1-8a78f24e0800/public)
6