Val Town Code SearchReturn to Val Town

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>

20  <meta property="og:title" content="GitHub Line Counter">
21  <meta property="og:description" content="Find out how many lines of code any repository on GitHub has, right from your browser.">
22  <meta property="og:image" content="https://g-countgithublocopengraph.web.val.run/og">
23  <meta property="og:type" content="website">
24  <meta property="og:url" content="https://g-countgithublocui.web.val.run/">
25  <meta property="twitter:card" content="summary_large_image">
26  <meta property="twitter:title" content="GitHub Line Counter">
27  <meta property="twitter:description" content="Find out how many lines of code any repository on GitHub has, right from your browser.">
28  <meta property="twitter:image" content="https://g-countgithublocopengraph.web.val.run/og">
29  <meta property="twitter:url" content="https://g-countgithublocui.web.val.run/">
30  <link rel="icon" href="data:image/svg+xml,<svg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 100 100%22><text y=%22.9em%22 font-size=%2290%22>⚙️</text></svg>">
31  <link rel="stylesheet" href="/styles.css">
32  <script type="module" src="/main.js" defer></script>
273  <meta property="og:title" content="GitHub Line Counter for ${escape(user)}/${escape(repo)}">
274  <meta property="og:description" content="Find out how many lines of code this or any other GitHub repository has, right from your browser.">
275  <meta property="og:image" content="${ogImg.href}">
276  <meta property="og:type" content="website">
277  <meta property="og:url" content="${url.href}">
278  <meta property="twitter:card" content="summary_large_image">
279  <meta property="twitter:title" content="GitHub Line Counter for ${escape(user)}/${escape(repo)}">
280  <meta property="twitter:description" content="Find out how many lines of code this or any other GitHub repository has, right from your browser.">
281  <meta property="twitter:image" content="${ogImg.href}">
282  <meta property="twitter:url" content="${url.href}">
283  <link rel="icon" href="data:image/svg+xml,<svg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 100 100%22><text y=%22.9em%22 font-size=%2290%22>⚙️</text></svg>">
284  <script>
285    window.location.href = ${JSON.stringify(redirectUrl.href)};

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

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

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

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

1## MOVED TO: [https://www.val.town/x/michaelwschultz/frame](https://www.val.town/x/michaelwschultz/frame)
2
3### Gathers information and returns an image of this val
4
5### Why
14actually draw things to a screen like all the e-ink display libraries.
15
16Migrated from folder: Archive/generateframeImage

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

221        left: `${petState.x}px`,
222        top: `${petState.y}px`,
223        backgroundImage:
224          `url('https://ipfs.io/ipfs/bafybeib5iedrzr7unbp4zq6rkrab3caik7nw7rfzlcfvu4xqs6bfk7dgje/${spriteNum}.png')`,
225        backgroundPosition: `-${petState.frameIndex * SPRITE_SIZE}px -${ROW_INDEX[petState.animation] * SPRITE_SIZE}px`,
288    height: calc(var(--scale) * 32px);
289    background-size: calc(var(--scale) * 512px) calc(var(--scale) * 256px);
290    image-rendering: pixelated;
291  }
292