11 let html = `<h1>${valTownInspo.title}</h1>
12 <p>${valTownInspo.description}</p>
13 <a href="https://val.town/${valTownInspo.val}"><img src="${valTownInspo.image}" style="max-width:576px"/></a>
14 <p><a href="https://www.val.town/settings/intervals">Unsubscribe here</a></p>`;
15
11function App() {
12 const [json, setJson] = useState("");
13 const [imageUrl, setImageUrl] = useState("");
14 const [error, setError] = useState("");
15 const [isLoading, setIsLoading] = useState(false);
19 setIsLoading(true);
20 setError("");
21 setImageUrl("");
22
23 try {
32 if (data.error) {
33 setError(data.error);
34 } else if (data.imageUrl) {
35 setImageUrl(data.imageUrl);
36 }
37 } catch (error) {
44 return (
45 <div className="container">
46 <h1>JSON to DALL-E Image Generator</h1>
47 <form onSubmit={handleSubmit}>
48 <textarea
54 >
55 </textarea>
56 <button type="submit" disabled={isLoading}>Generate Image</button>
57 </form>
58 {isLoading && <div id="loadingIndicator">Generating image...</div>}
59 {error && (
60 <div>
62 </div>
63 )}
64 {imageUrl && (
65 <div>
66 <img src={imageUrl} alt="Generated image" />
67 </div>
68 )}
116 font-style: italic;
117 }
118 #imageContainer {
119 margin-top: 20px;
120 }
167 const dallePrompt = completion.choices[0].message.content;
168
169 // Generate DALL-E image
170 const response = await openai.images.generate({
171 model: "dall-e-3",
172 prompt: dallePrompt,
175 });
176
177 return new Response(JSON.stringify({ imageUrl: response.data[0].url, dallePrompt }), {
178 headers: { "Content-Type": "application/json" },
179 });
190 <html>
191 <head>
192 <title>JSON to DALL-E Image Generator</title>
193 <style>${css}</style>
194 </head>
1# ☔️ Umbrella reminder if there's rain today
2
3
4
5## Setup
4
5
6<img width="400px" src="https://imagedelivery.net/iHX6Ovru0O7AjmyT5yZRoA/2661d748-d7a7-4d1e-85a4-f60fae262000/public" />
7
11 let html = `<h1>${valTownInspo.title}</h1>
12 <p>${valTownInspo.description}</p>
13 <a href="https://val.town/${valTownInspo.val}"><img src="${valTownInspo.image}" style="max-width:576px"/></a>
14 <p><a href="https://www.val.town/settings/intervals">Unsubscribe here</a></p>`;
15
34
35 const dist_nowcast_warnings =
36 "https://reactjs.imd.gov.in/geoserver/imd/wms?service=WMS&request=GetMap&layers=imd%3ANowcast_StateDistrict_Merged&styles=&format=image%2Fsvg&transparent=true&version=1.1.1&width=256&height=256&srs=EPSG%3A4326&bbox="
37 + bbox;
38
39 // env=day:Day1_Color
40 const dist_warnings_today =
41 "https://reactjs.imd.gov.in/geoserver/imd/wms?service=WMS&request=GetMap&layers=imd%3AWarnings_StateDistrict_Merged&styles=&format=image%2Fsvg&transparent=true&version=1.1.1&env=day%3ADay1_Color&width=256&height=256&srs=EPSG%3A4326&bbox="
42 + bbox;
43
44 // env=day:Day2_Color
45 const dist_warnings_today_plus_1 =
46 "https://reactjs.imd.gov.in/geoserver/imd/wms?service=WMS&request=GetMap&layers=imd%3AWarnings_StateDistrict_Merged&styles=&format=image%2Fsvg&transparent=true&version=1.1.1&env=day%3ADay2_Color&width=256&height=256&srs=EPSG%3A4326&bbox="
47 + bbox;
48
49 // env=day:Day3_Color
50 const dist_warnings_today_plus_2 =
51 "https://reactjs.imd.gov.in/geoserver/imd/wms?service=WMS&request=GetMap&layers=imd%3AWarnings_StateDistrict_Merged&styles=&format=image%2Fsvg&transparent=true&version=1.1.1&env=day%3ADay3_Color&width=256&height=256&srs=EPSG%3A4326&bbox="
52 + bbox;
53
54 // env=day:Day4_Color
55 const dist_warnings_today_plus_3 =
56 "https://reactjs.imd.gov.in/geoserver/imd/wms?service=WMS&request=GetMap&layers=imd%3AWarnings_StateDistrict_Merged&styles=&format=image%2Fsvg&transparent=true&version=1.1.1&env=day%3ADay4_Color&width=256&height=256&srs=EPSG%3A4326&bbox="
57 + bbox;
58
59 // env=day:Day5_Color
60 const dist_warnings_today_plus_4 =
61 "https://reactjs.imd.gov.in/geoserver/imd/wms?service=WMS&request=GetMap&layers=imd%3AWarnings_StateDistrict_Merged&styles=&format=image%2Fsvg&transparent=true&version=1.1.1&env=day%3ADay5_Color&width=256&height=256&srs=EPSG%3A4326&bbox="
62 + bbox;
63 /*
4
5<div align="center">
6<img src="https://imagedelivery.net/iHX6Ovru0O7AjmyT5yZRoA/67a1d35e-c37c-41a4-0e5a-03a9ba585d00/public" width="700px"/>
7</div>
218 functions where possible. Unless specified, don't add error handling,
219 make sure that errors bubble up to the caller.
220 Avoid external images or base64 images, use emojis, unicode symtols, or icon fonts/libraries instead, unless that's
221 not practical for the user's request (e.g. if they ask for a particular animated gif).
222 If the user asks for something that requires persistence, use the Val Town Blob storage API, unless
280functions where possible. Unless specified, don't add error handling,
281make sure that errors bubble up to the caller.
282Avoid external images or base64 images, use emojis, unicode symtols, or icon fonts/libraries instead, unless that's
283not practical for the user's request (e.g. if they ask for a particular animated gif).
284If the user asks for something that requires persistence, use the Val Town Blob storage API, unless
315 ---
316
317 Val Town comes with blob storage built-in. It allows for storing any data: text, JSON, images. You can access it via [\`std/blob\`](https://www.val.town/v/std/blob).
318
319 Blob storage is scoped globally to your account. If you set a blob in one val, you can retrieve it by the same key in another val. It's backed by Cloudflare R2.
29 "User-Agent":
30 "Mozilla/5.0 (Macintosh; Intel Mac OS X 10_15_7) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/121.0.0.0 Safari/537.36",
31 "Accept": "text/html,application/xhtml+xml,application/xml;q=0.9,image/avif,image/webp,image/apng,*/*;q=0.8",
32 "Accept-Language": "en-US,en;q=0.5",
33 "Sec-Fetch-Site": "cross-site",
3Protect your vals behind a password. Use session cookies to persist authentication.
4
5
6
7## Demo
