Val Town Code SearchReturn to Val Town

75      width: 100%;
76      height: 100%;
77      background: url('https://images.unsplash.com/photo-1506318137071-a8e063b4bec0?auto=format&fit=crop&w=1950&q=80') center/cover;
78      opacity: 0.3;
79      z-index: -1;

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}

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}

4          // Execute the code directly and capture its result
5          const result = await (async () => {
6            // Create a pixel art cat inspired by the pixel art shown in the reference image
7const pixelKitty = `
8  ▄    ▄

4          // Execute the code directly and capture its result
5          const result = await (async () => {
6            // Create a pixel art cat inspired by the pixel art shown in the reference image
7const pixelKitty = `
8  ▄▄   ▄▄

4          // Execute the code directly and capture its result
5          const result = await (async () => {
6            // Create a pixel art style cat similar to the image
7const pixelCat = `
8  ╭━━━━━╮

39        <h1>🚀 Awesome Website</h1>
40        <p>Created to make your day a little more colorful!</p>
41        <img src="https://picsum.photos/300/200" alt="Random Cool Image">
42    </div>
43</body>

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 [imageUrls, setImageUrls] = useState<string[]>([]);
10  const [loading, setLoading] = useState(false);
11  const [numImages, setNumImages] = useState(1);
12
13  const generateImage = async (e?: React.FormEvent) => {
14    e?.preventDefault();
15    setLoading(true);
16    setImageUrls([]);
17    const fal = createFalClient({
18      proxyUrl: "/api/fal/proxy",
20
21    try {
22      const requests = Array(numImages).fill(null).map(() =>
23        fal.run("fal-ai/flux-pro/v1.1", {
24          input: {
25            prompt,
26            image_size: "landscape_4_3",
27            num_inference_steps: 4,
28            num_images: 1,
29            enable_safety_checker: true,
30            sync_mode: true,
34
35      const results = await Promise.all(requests);
36      const newImageUrls = results.flatMap(result => result.data.images.map((img: any) => img.url));
37      setImageUrls(newImageUrls);
38    } catch (error) {
39      console.error("Error generating image:", error);
40    } finally {
41      setLoading(false);
46    <div className="min-h-screen bg-black text-white py-12 px-4 sm:px-6 lg:px-8">
47      <div className="max-w-4xl mx-auto">
48        <h1 className="text-4xl font-bold text-center mb-8">Fal AI Image Generator</h1>
49        <div className="bg-gray-900 rounded-lg p-6 mb-8 shadow-lg">
50          <form className="flex flex-col sm:flex-row gap-4" onSubmit={generateImage}>
51            <input
52              type="text"
53              value={prompt}
54              onChange={(e) => setPrompt(e.target.value)}
55              placeholder="Enter your image prompt"
56              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"
57            />
58            <select
59              value={numImages}
60              onChange={(e) => setNumImages(Number(e.target.value))}
61              className="px-4 py-2 bg-gray-800 border border-gray-700 rounded-md focus:ring-2 focus:ring-blue-500 focus:border-transparent"
62            >
63              {[1, 2, 3, 4, 10].map((num) => (
64                <option key={num} value={num}>
65                  {num} {num === 1 ? 'image' : 'images'}
66                </option>
67              ))}
68            </select>
69            <button
70              onClick={generateImage}
71              disabled={loading || !prompt}
72              className={`px-6 py-2 rounded-md text-white font-medium transition-colors duration-200 ${
98                )
99                : (
100                  "Generate Image"
101                )}
102            </button>
103          </form>
104        </div>
105        {imageUrls.length > 0 && (
106          <div className="grid grid-cols-1 gap-4">
107            {imageUrls.map((url, index) => (
108              <div key={index} className="bg-gray-900 rounded-lg overflow-hidden shadow-lg">
109                <img src={url} alt={`Generated image ${index + 1}`} className="w-full h-auto" />
110              </div>
111            ))}
140          <meta charset="UTF-8">
141          <meta name="viewport" content="width=device-width, initial-scale=1.0">
142          <title>Fal AI Image Generator</title>
143          <script src="https://cdn.tailwindcss.com"></script>
144          <style>