Val Town Code SearchReturn to Val Town

188// const c = async B9 => {
189//   try {
190//     var BB = await K("https://megacloud.tv/images/loading.png?v=0.0.9");
191//     window.bytes = BB;
192//     console.log("THis thing is working");
454//       Bh(BW).textBaseline = BK(BT, Bl);
455//     };
456//     BE.wbg.__wbg_drawImage_cb13768a1bdc04bd = function() {
457//       return Bg(function(BW, BT, Bl, BC) {
458//         Bh(BW).drawImage(Bh(BT), Bl, BC);
459//       }, arguments);
460//     };
461//     BE.wbg.__wbg_getImageData_66269d289f37d3c7 = function() {
462//       return Bg(function(BW, BT, Bl, BC, Bj) {
463//         return Bf(Bh(BW).getImageData(BT, Bl, BC, Bj));
464//       }, arguments);
465//     };
556//       return Bf(Bh(BW).style);
557//     };
558//     BE.wbg.__wbg_instanceof_HtmlImageElement_9c82d4e3651a8533 = function(BW) {
559//       let BT;
560//       try {
561//         BT = Bh(BW) instanceof HTMLImageElement;
562//       } catch (Bl) {
563//         BT = false;

26
27      if (!response.ok) {
28        throw new Error("Failed to generate image");
29      }
30
40  return (
41    <div className="container">
42      <h1>AI Image Generator</h1>
43      <form onSubmit={handleSubmit}>
44        <textarea
45          value={prompt}
46          onChange={(e) => setPrompt(e.target.value)}
47          placeholder="Enter your image prompt here..."
48          required
49        />
58        </div>
59        <button type="submit" disabled={isLoading}>
60          {isLoading ? "Generating..." : "Generate Image"}
61        </button>
62      </form>
64      {result && (
65        <div className="result">
66          <img src={result.imageUrl} alt="Generated image" />
67          <p>Image saved as: {result.savedUrl}</p>
68        </div>
69      )}
94          <meta charset="UTF-8">
95          <meta name="viewport" content="width=device-width, initial-scale=1.0">
96          <title>AI Image Generator</title>
97          <style>${css}</style>
98        </head>
174    if (resultData.status === "succeeded") {
175      console.log("Generation succeeded!");
176      let imageUrl: string | undefined;
177
178      if (Array.isArray(resultData.output)) {
179        imageUrl = resultData.output[0];
180      } else if (typeof resultData.output === "string") {
181        imageUrl = resultData.output;
182      }
183
184      if (imageUrl) {
185        const { blob } = await import("https://esm.town/v/std/blob");
186        const timestamp = new Date().getTime();
187        const imageName = `generated-image-${timestamp}.jpg`;
188
189        const imageResponse = await fetch(imageUrl);
190        if (!imageResponse.ok) throw new Error("Failed to download image");
191
192        const imageBlob = await imageResponse.blob();
193        await blob.set(imageName, imageBlob);
194
195        return new Response(JSON.stringify({ imageUrl, savedUrl: imageName }), {
196          headers: { "Content-Type": "application/json" },
197        });
199    }
200  } else {
201    console.log("Using Val Town's free image generator...");
202    const imageUrl = `https://maxm-imggenurl.web.val.run/${encodeURIComponent(prompt)}`;
203
204    const { blob } = await import("https://esm.town/v/std/blob");
205    const timestamp = new Date().getTime();
206    const imageName = `generated-image-${timestamp}.jpg`;
207
208    const imageResponse = await fetch(imageUrl);
209    if (!imageResponse.ok) throw new Error("Failed to generate image");
210
211    const imageBlob = await imageResponse.blob();
212    await blob.set(imageName, imageBlob);
213
214    return new Response(JSON.stringify({ imageUrl, savedUrl: imageName }), {
215      headers: { "Content-Type": "application/json" },
216    });
217  }
218
219  return new Response(JSON.stringify({ error: "Failed to generate image" }), {
220    status: 500,
221    headers: { "Content-Type": "application/json" },

8  const [isLoading, setIsLoading] = useState(false);
9  const [error, setError] = useState("");
10  const [imageUrl, setImageUrl] = useState("");
11
12  const handleSubmit = async (e: React.FormEvent) => {
14    setIsLoading(true);
15    setError("");
16    setImageUrl("");
17
18    try {
24
25      if (!response.ok) {
26        throw new Error("Failed to generate image");
27      }
28
29      const data = await response.json();
30      setImageUrl(data.imageUrl);
31    } catch (err) {
32      setError(err.message);
38  return (
39    <div className="container">
40      <h1>AI Image Generator</h1>
41      <form onSubmit={handleSubmit}>
42        <textarea
43          value={prompt}
44          onChange={(e) => setPrompt(e.target.value)}
45          placeholder="Enter your image prompt here..."
46          required
47        />
56        </div>
57        <button type="submit" disabled={isLoading}>
58          {isLoading ? "Generating..." : "Generate Image"}
59        </button>
60      </form>
61      {error && <p className="error">{error}</p>}
62      {imageUrl && (
63        <div className="image-container">
64          <img src={imageUrl} alt="Generated" />
65        </div>
66      )}
142      if (resultData.status === "succeeded") {
143        console.log("Generation succeeded!");
144        let imageUrl: string | undefined;
145
146        if (Array.isArray(resultData.output)) {
147          imageUrl = resultData.output[0];
148        } else if (typeof resultData.output === "string") {
149          imageUrl = resultData.output;
150        }
151
152        if (imageUrl) {
153          const { blob } = await import("https://esm.town/v/std/blob");
154          const timestamp = new Date().getTime();
155          const imageName = `generated-image-${timestamp}.jpg`;
156
157          const imageResponse = await fetch(imageUrl);
158          if (!imageResponse.ok) throw new Error("Failed to download image");
159
160          const imageBlob = await imageResponse.blob();
161          await blob.set(imageName, imageBlob);
162
163          return new Response(JSON.stringify({ imageUrl, savedUrl: imageName }), {
164            headers: { "Content-Type": "application/json" },
165          });
167      }
168    } else {
169      console.log("Using Val Town's free image generator...");
170      const imageUrl = `https://maxm-imggenurl.web.val.run/${encodeURIComponent(prompt)}`;
171
172      const { blob } = await import("https://esm.town/v/std/blob");
173      const timestamp = new Date().getTime();
174      const imageName = `generated-image-${timestamp}.jpg`;
175
176      const imageResponse = await fetch(imageUrl);
177      if (!imageResponse.ok) throw new Error("Failed to generate image");
178
179      const imageBlob = await imageResponse.blob();
180      await blob.set(imageName, imageBlob);
181
182      return new Response(JSON.stringify({ imageUrl, savedUrl: imageName }), {
183        headers: { "Content-Type": "application/json" },
184      });
185    }
186
187    return new Response(JSON.stringify({ error: "Failed to generate image" }), {
188      status: 500,
189      headers: { "Content-Type": "application/json" },
197        <meta charset="UTF-8">
198        <meta name="viewport" content="width=device-width, initial-scale=1.0">
199        <title>AI Image Generator</title>
200        <style>${css}</style>
201      </head>
280}
281
282.image-container {
283  margin-top: 20px;
284  text-align: center;
285}
286
287.image-container img {
288  max-width: 100%;
289  border-radius: 4px;

64    if (resultData.status === "succeeded") {
65      console.log("Generation succeeded!");
66      let imageUrl: string | undefined;
67
68      if (Array.isArray(resultData.output)) {
69        imageUrl = resultData.output[0];
70      } else if (typeof resultData.output === "string") {
71        imageUrl = resultData.output;
72      }
73
74      if (imageUrl) {
75        const { blob } = await import("https://esm.town/v/std/blob");
76        const timestamp = new Date().getTime();
77        const imageName = `generated-image-${timestamp}.jpg`;
78
79        const imageResponse = await fetch(imageUrl);
80        if (!imageResponse.ok) throw new Error("Failed to download image");
81
82        const imageBlob = await imageResponse.blob();
83        await blob.set(imageName, imageBlob);
84
85        return new Response(JSON.stringify({ imageUrl, savedUrl: imageName }), {
86          headers: { "Content-Type": "application/json" },
87        });
89    }
90  } else {
91    console.log("Using Val Town's free image generator...");
92    const imageUrl = `https://maxm-imggenurl.web.val.run/${encodeURIComponent(prompt)}`;
93
94    const { blob } = await import("https://esm.town/v/std/blob");
95    const timestamp = new Date().getTime();
96    const imageName = `generated-image-${timestamp}.jpg`;
97
98    const imageResponse = await fetch(imageUrl);
99    if (!imageResponse.ok) throw new Error("Failed to generate image");
100
101    const imageBlob = await imageResponse.blob();
102    await blob.set(imageName, imageBlob);
103
104    return new Response(JSON.stringify({ imageUrl, savedUrl: imageName }), {
105      headers: { "Content-Type": "application/json" },
106    });
107  }
108
109  return new Response(JSON.stringify({ error: "Failed to generate image" }), {
110    status: 500,
111    headers: { "Content-Type": "application/json" },

64    if (resultData.status === "succeeded") {
65      console.log("Generation succeeded!");
66      let imageUrl: string | undefined;
67
68      if (Array.isArray(resultData.output)) {
69        imageUrl = resultData.output[0];
70      } else if (typeof resultData.output === "string") {
71        imageUrl = resultData.output;
72      }
73
74      if (imageUrl) {
75        const { blob } = await import("https://esm.town/v/std/blob");
76        const timestamp = new Date().getTime();
77        const imageName = `generated-image-${timestamp}.jpg`;
78
79        const imageResponse = await fetch(imageUrl);
80        if (!imageResponse.ok) throw new Error("Failed to download image");
81
82        const imageBlob = await imageResponse.blob();
83        await blob.set(imageName, imageBlob);
84
85        return new Response(JSON.stringify({ imageUrl, savedUrl: imageName }), {
86          headers: { "Content-Type": "application/json" },
87        });
89    }
90  } else {
91    console.log("Using Val Town's free image generator...");
92    const imageUrl = `https://maxm-imggenurl.web.val.run/${encodeURIComponent(prompt)}`;
93
94    const { blob } = await import("https://esm.town/v/std/blob");
95    const timestamp = new Date().getTime();
96    const imageName = `generated-image-${timestamp}.jpg`;
97
98    const imageResponse = await fetch(imageUrl);
99    if (!imageResponse.ok) throw new Error("Failed to generate image");
100
101    const imageBlob = await imageResponse.blob();
102    await blob.set(imageName, imageBlob);
103
104    return new Response(JSON.stringify({ imageUrl, savedUrl: imageName }), {
105      headers: { "Content-Type": "application/json" },
106    });
107  }
108
109  return new Response(JSON.stringify({ error: "Failed to generate image" }), {
110    status: 500,
111    headers: { "Content-Type": "application/json" },

64    if (resultData.status === "succeeded") {
65      console.log("Generation succeeded!");
66      let imageUrl: string | undefined;
67
68      if (Array.isArray(resultData.output)) {
69        imageUrl = resultData.output[0];
70      } else if (typeof resultData.output === "string") {
71        imageUrl = resultData.output;
72      }
73
74      if (imageUrl) {
75        const { blob } = await import("https://esm.town/v/std/blob");
76        const timestamp = new Date().getTime();
77        const imageName = `generated-image-${timestamp}.jpg`;
78
79        const imageResponse = await fetch(imageUrl);
80        if (!imageResponse.ok) throw new Error("Failed to download image");
81
82        const imageBlob = await imageResponse.blob();
83        await blob.set(imageName, imageBlob);
84
85        return new Response(JSON.stringify({ imageUrl, savedUrl: imageName }), {
86          headers: { "Content-Type": "application/json" },
87        });
89    }
90  } else {
91    console.log("Using Val Town's free image generator...");
92    const imageUrl = `https://maxm-imggenurl.web.val.run/${encodeURIComponent(prompt)}`;
93
94    const { blob } = await import("https://esm.town/v/std/blob");
95    const timestamp = new Date().getTime();
96    const imageName = `generated-image-${timestamp}.jpg`;
97
98    const imageResponse = await fetch(imageUrl);
99    if (!imageResponse.ok) throw new Error("Failed to generate image");
100
101    const imageBlob = await imageResponse.blob();
102    await blob.set(imageName, imageBlob);
103
104    return new Response(JSON.stringify({ imageUrl, savedUrl: imageName }), {
105      headers: { "Content-Type": "application/json" },
106    });
107  }
108
109  return new Response(JSON.stringify({ error: "Failed to generate image" }), {
110    status: 500,
111    headers: { "Content-Type": "application/json" },

83. Hit "Generate" to see your AI-crafted t-shirt design appear!
9
10## Image Generation Sources
11- **With Replicate API Key**: Uses **Replicate Hosted Flux models** for high-quality designs.
12- **Without Replicate Key**: Falls back to a Val.town image generator for quick designs.
13
14## Requirements

51    content: emailAddress
52      + " "
53      + body.data.profile_image_url
54      + " " + JSON.stringify(technologies),
55  });

5interface Suggestion {
6  text: string;
7  imageUrl: string;
8  productUrl: string;
9}
166        <div className="suggestions">
167          <h2>Gift Suggestions:</h2>
168          <p className="ai-image-note">Note: The images below are AI-generated. Click on an image to see actual products on Google Shopping.</p>
169          <div className="suggestions-grid">
170            {suggestions.map((suggestion, index) => (
171              <div key={index} className="suggestion">
172                {suggestion.imageUrl && (
173                  <a href={suggestion.productUrl} target="_blank" rel="noopener noreferrer" className="product-link sparkle-button">
174                    <img src={suggestion.imageUrl} alt={suggestion.text} className="product-image" onError={(e) => {
175                      console.error("Image failed to load:", e);
176                      e.currentTarget.style.display = 'none';
177                    }} />
178                  </a>
179                )}
180                {!suggestion.imageUrl && <p className="no-image">No image available for this product.</p>}
181                <p className="product-name">{suggestion.text}</p>
182              </div>
209}
210
211async function searchProduct(query: string): Promise<{ imageUrl: string; productUrl: string } | null> {
212  try {
213    // Using a more realistic product image placeholder
214    const imageUrl = `https://maxm-imggenurl.web.val.run/${encodeURIComponent(query)}`;
215    // Using Google Shopping as the product search URL
216    const productUrl = `https://www.google.com/search?tbm=shop&q=${encodeURIComponent(query)}`;
217
218    console.log("Product search result:", { imageUrl, productUrl });
219    return { imageUrl, productUrl };
220  } catch (error) {
221    console.error("Error searching for product:", error);
270            return {
271              text: suggestion.text,
272              imageUrl: product?.imageUrl || "",
273              productUrl: product?.productUrl || "",
274            };
537  }
538
539  .product-image {
540    max-width: 100%;
541    height: 200px;
546  }
547
548  .product-image:hover {
549    transform: scale(1.03);
550    box-shadow: 0 6px 12px rgba(0, 0, 0, 0.15);
592  }
593
594  .ai-image-note {
595    font-size: 14px;
596    color: #7f8c8d;
640    right: 0;
641    bottom: 0;
642    background-image: 
643      radial-gradient(circle, #fff 10%, transparent 10%),
644      radial-gradient(circle, #fff 10%, transparent 10%);
676  }
677
678  .no-image {
679    height: 200px;
680    display: flex;
804    }
805
806    .product-image {
807      height: 150px;
808    }
849    }
850
851    .product-image {
852      height: 180px;
853    }

5First conversation:
6
7![FirstConversation.png](https://imagedelivery.net/iHX6Ovru0O7AjmyT5yZRoA/78c48b8b-8a1b-4caf-ef23-2ad78be3a100/public)
8
9What GPT sent do the API:
20Separate conversation somewhere in the future:
21
22![Second Conversation.png](https://imagedelivery.net/iHX6Ovru0O7AjmyT5yZRoA/bae24fd1-cec7-49b1-ac16-74b9f5aa4c00/public)
23
24# Setup