Val Town Code SearchReturn to Val Town

46            transform: scaleX(1);
47            transform-origin: center;
48            background-image: linear-gradient(45deg, #ff6b6b, #feca57, #48dbfb, #ff9ff3);
49            background-clip: text;
50            background-size: 300% 300%;

3This is a lightweight Blob Admin interface to view and debug your Blob data.
4
5![b7321ca2cd80899250589b9aa08bc3cae9c7cea276282561194e7fc537259b46.png](https://imagedelivery.net/iHX6Ovru0O7AjmyT5yZRoA/311a81bb-18d8-4583-b7e3-64bac326f700/public)
6
7## Installation

3This is a lightweight Blob Admin interface to view and debug your Blob data.
4
5![b7321ca2cd80899250589b9aa08bc3cae9c7cea276282561194e7fc537259b46.png](https://imagedelivery.net/iHX6Ovru0O7AjmyT5yZRoA/311a81bb-18d8-4583-b7e3-64bac326f700/public)
6
7## Installation

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" },

11
12  try {
13    const imageUrl = await getMostPopularPinterestImage(query);
14    return new Response(JSON.stringify({ image: imageUrl }), {
15      headers: { 
16        "Content-Type": "application/json",
26}
27
28async function getMostPopularPinterestImage(query: string): Promise<string> {
29  const searchUrl = `https://api.pinterest.com/v5/search/pins?query=${encodeURIComponent(query)}&page_size=50&sort_order=popularity`;
30  const response = await fetch(searchUrl, {
46    const mostPopularPin = sortedPins[0];
47
48    if (mostPopularPin.images) {
49      // Get the largest available image
50      const images = mostPopularPin.images;
51      const largestImage = images[images.length - 1];
52      return largestImage.url;
53    }
54  }
55
56  throw new Error("No popular image found");
57}

1# Gathers information and returns an image of this val
2
3### Why

142}
143
144async function generateImage(html: string): Promise<Response> {
145  const apiKey = Deno.env.get("API_FLASH_KEY");
146  const encodedHtml = encodeURIComponent(html);
147  const url =
148    `https://api.apiflash.com/v1/urltoimage?access_key=${apiKey}&url=https://michaelwschultz-generateframeimage.web.val.run&width=800&height=480&format=png&fresh=true`;
149
150  try {
155    return response;
156  } catch (error) {
157    console.error("Error generating image:", error);
158    return new Response("Failed to generate image", { status: 500 });
159  }
160}
162export default async function(req: Request) {
163  const url = new URL(req.url);
164  const isImageRequest = url.searchParams.get("generate") === "image";
165
166  const latitude = 37.5296;
170  const html = renderToString(<WeatherDisplay weather={weather} />);
171
172  if (isImageRequest) {
173    const imageResponse = await generateImage(html);
174    return new Response(imageResponse.body, {
175      status: imageResponse.status,
176      headers: {
177        "Content-Type": "image/png",
178        "Cache-Control": "no-store, max-age=0",
179      },

7function App() {
8  const [prompt, setPrompt] = useState("");
9  const [imageUrl, setImageUrl] = useState("");
10  const [loading, setLoading] = useState(false);
11
12  const generateImage = async (e?: React.FormEvent) => {
13    e?.preventDefault();
14    setLoading(true);
21        input: {
22          prompt,
23          image_size: "landscape_4_3",
24          num_inference_steps: 4,
25          num_images: 1,
26          enable_safety_checker: true,
27          sync_mode: true,
28        },
29      });
30      setImageUrl(result.data.images[0].url);
31    } catch (error) {
32      console.error("Error generating image:", error);
33    } finally {
34      setLoading(false);
39    <div className="min-h-screen bg-black text-white py-12 px-4 sm:px-6 lg:px-8">
40      <div className="max-w-3xl mx-auto">
41        <h1 className="text-4xl font-bold text-center mb-8">Fal AI Image Generator</h1>
42        <div className="bg-gray-900 rounded-lg p-6 mb-8 shadow-lg">
43          <form className="flex flex-col sm:flex-row gap-4" onSubmit={generateImage}>
44            <input
45              type="text"
46              value={prompt}
47              onChange={(e) => setPrompt(e.target.value)}
48              placeholder="Enter your image prompt"
49              className="flex-grow px-4 py-2 bg-gray-800 border border-gray-700 rounded-md focus:ring-2 focus:ring-blue-500 focus:border-transparent"
50            />
51            <button
52              onClick={generateImage}
53              disabled={loading || !prompt}
54              className={`px-6 py-2 rounded-md text-white font-medium transition-colors duration-200 ${
80                )
81                : (
82                  "Generate Image"
83                )}
84            </button>
85          </form>
86        </div>
87        {imageUrl && (
88          <div className="bg-gray-900 rounded-lg overflow-hidden shadow-lg">
89            <img src={imageUrl} alt="Generated image" className="w-full h-auto" />
90          </div>
91        )}
118          <meta charset="UTF-8">
119          <meta name="viewport" content="width=device-width, initial-scale=1.0">
120          <title>Fal AI Image Generator</title>
121          <script src="https://cdn.tailwindcss.com"></script>
122          <style>