Val Town Code Search

replaceEmojisWithImages main.tsx1 match

@tmcw•Updated 7 months ago

1export async function replaceEmojisWithImages(
2  req: express.Request,
3  res: express.Response,

generateRAdioDjRss main.tsx2 matches

@tmcw•Updated 7 months ago

5export const generateRAdioDjRss = async () => {
6  const rssItems = previousDjs.map((dj) => {
7    const djImgSrc = `https://r-a-d.io/api/dj-image/${
8      encodeURIComponent(
9        dj.djimage,
10      )
11    }`

hiraganaWordBuilder main.tsx18 matches

@ashryanio•Updated 7 months ago

60  const [isComplete, setIsComplete] = useState(false);
61  const [inputStatus, setInputStatus] = useState([]);
62  const [imageData, setImageData] = useState("");
63  const [isLoading, setIsLoading] = useState(false);
64  const [isTransitioning, setIsTransitioning] = useState(false);
88  };
89
90  const fetchImage = async (romaji) => {
91    setIsLoading(true);
92    try {
93      const response = await fetch(`/api/image/${romaji}`);
94      if (!response.ok) {
95        throw new Error("Failed to fetch image");
96      }
97      const data = await response.json();
98      if (data && data.image) {
99        const dataUrl = `data:image/png;base64,${data.image}`;
100        setImageData(dataUrl);
101      } else {
102        throw new Error("Invalid image data received");
103      }
104    } catch (error) {
105      console.error("Error fetching image:", error);
106      setImageData("");
107    } finally {
108      setIsLoading(false);
119      setInputStatus([]);
120      setIsComplete(false);
121      fetchImage(newWord.romaji);
122      setIsTransitioning(false);
123    }, 300);
178            </div>
179          )
180          : imageData
181          ? <img src={imageData} alt="Vocabulary word" className="w-40 h-40 object-cover rounded-lg shadow-md" />
182          : (
183            <div className="w-40 h-40 flex items-center justify-center bg-gray-200 rounded-lg">
184              <span className="text-gray-500">No image available</span>
185            </div>
186          )}
264  const url = new URL(request.url);
265
266  if (url.pathname.startsWith("/api/image/")) {
267    const romaji = url.pathname.split("/").pop();
268    try {
269      // This is a placeholder for the actual image retrieval from Val Town blob storage
270      // You'll need to implement the actual retrieval logic here
271      const vocabularyJson = await blob.getJSON(romaji);
275      });
276    } catch (error) {
277      console.error("Error fetching image:", error);
278      return new Response("Image not found", { status: 404 });
279    }
280  }

getJsonAndRenderAsImage main.tsx16 matches

@ashryanio•Updated 7 months ago

5
6function App() {
7  const [imageData, setImageData] = useState<string | null>(null);
8  const [error, setError] = useState<string | null>(null);
9
10  useEffect(() => {
11    async function fetchImage() {
12      try {
13        const response = await fetch("/image");
14        if (!response.ok) {
15          throw new Error(`HTTP error! status: ${response.status}`);
16        }
17        const data = await response.json();
18        if (data && data.image) {
19          setImageData(`data:image/png;base64,${data.image}`);
20        } else {
21          throw new Error("Invalid image data received");
22        }
23      } catch (error) {
24        console.error("Error fetching image:", error);
25        setError(error instanceof Error ? error.message : "Error loading image");
26      }
27    }
28    fetchImage();
29  }, []);
30
31  return (
32    <div>
33      <h1>Image from Blob Storage</h1>
34      {imageData
35        ? (
36          <img
37            src={imageData}
38            alt="Fetched from blob storage"
39            style={{ maxWidth: "100%" }}
42        : error
43        ? <p>Error: {error}</p>
44        : <p>Loading image...</p>}
45    </div>
46  );
56
57export default async function server(request: Request): Promise<Response> {
58  if (request.url.endsWith("/image")) {
59    try {
60      const jsonData = await blob.getJSON("image-test");
61      return new Response(JSON.stringify(jsonData), {
62        headers: { "Content-Type": "application/json" },
76    <html>
77      <head>
78        <title>Image from Blob Storage</title>
79        <style>${css}</style>
80      </head>

getBlobAndRenderAsImage main.tsx14 matches

@ashryanio•Updated 7 months ago

5
6function App() {
7  const [imageData, setImageData] = useState<string | null>(null);
8  const [error, setError] = useState<string | null>(null);
9
10  useEffect(() => {
11    async function fetchImage() {
12      try {
13        const response = await fetch("/image");
14        if (!response.ok) {
15          throw new Error(`HTTP error! status: ${response.status}`);
22        });
23
24        setImageData(dataUrl);
25      } catch (error) {
26        console.error("Error fetching image:", error);
27        setError(error instanceof Error ? error.message : "Error loading image");
28      }
29    }
30    fetchImage();
31  }, []);
32
33  return (
34    <div>
35      <h1>Image from Blob Storage</h1>
36      {imageData
37        ? (
38          <img
39            src={imageData}
40            alt="Fetched from blob storage"
41            style={{ maxWidth: "100%" }}
44        : error
45        ? <p>Error: {error}</p>
46        : <p>Loading image...</p>}
47    </div>
48  );
58
59export default async function server(request: Request): Promise<Response> {
60  if (request.url.endsWith("/image")) {
61    try {
62      const response = await blob.get("test.png");
63
64      return new Response(response.body, {
65        headers: { "Content-Type": "image/png" },
66      });
67    } catch (error) {
79    <html>
80      <head>
81        <title>Image from Blob Storage</title>
82        <style>${css}</style>
83      </head>

getJsonAndRenderAsImage README.md13 matches

@ashryanio•Updated 7 months ago

1# getJsonAndRenderAsImage
2
3Shows how to get a JSON object containing a base64 imaged stored in Val Town blob storage and render it as an image in the DOM with React.
4
5## Setup
6
7Make sure you have a JSON object named `image-test` in your Val Town blob storage (alternatively, you can change the key name in the blob getter in the script).
8
9The object should look like this:
11```json
12{
13  "image": "base64stringgoeshere"
14}
15```
16
17To easily upload an image to your blob storage, [fork this val](
18getBlobAndRenderAsImage), run it, and enter your API key in the password input.
19
20## How it works
221. Fetching the JSON:
23
24  - The client-side React component makes a fetch request to "/image".
25  - This request is handled by our server function.
26
282. Server-side handling:
29
30  - The server function calls `blob.getJSON("image-test")`.
31  - This `blob.getJSON()` method makes an HTTP request to the Val Town API.
32  - The API returns a Response object containing the JSON data.
546. Creating a data URL:
55
56  - We extract the image data from the JSON object at `data.image`.
57  - We prepend the data URL prefix to the image data.
58  - This data URL is a base64-encoded string representing the image.
59
60
64
65
668. Rendering the image:
67
68  - We use the data URL as the src attribute of an `<img>` tag.
69  - The browser decodes the base64 data and renders the image.
70
71## Further reading on Val Town blobs

hackerNewsDigest README.md1 match

@workingpleasewait•Updated 7 months ago

4
5
6<img width="400px" src="https://imagedelivery.net/iHX6Ovru0O7AjmyT5yZRoA/2661d748-d7a7-4d1e-85a4-f60fae262000/public" />
7

uptime README.md1 match

@cjpais•Updated 7 months ago

10
11<div align="center">
12<img src="https://imagedelivery.net/iHX6Ovru0O7AjmyT5yZRoA/67a1d35e-c37c-41a4-0e5a-03a9ba585d00/public" width="500px"/>
13</div>

status README.md1 match

@cjpais•Updated 7 months ago

4
5<div align="center">
6<img src="https://imagedelivery.net/iHX6Ovru0O7AjmyT5yZRoA/67a1d35e-c37c-41a4-0e5a-03a9ba585d00/public" width="700px"/>
7</div>

placeholderKittenImages main.tsx28 matches

@ashryanio•Updated 7 months ago

1// This val creates a publicly accessible kitten image generator using the Val Town image generation API.
2// It supports generating square images with a single dimension parameter or rectangular images with two dimension parameters.
3
4export default async function server(request: Request): Promise<Response> {
13        <meta charset="UTF-8">
14        <meta name="viewport" content="width=device-width, initial-scale=1.0">
15        <title>Kitten Image Generator</title>
16        <style>
17          body {
31            margin-bottom: 20px;
32          }
33          .example-image {
34            display: block;
35            max-width: 100%;
75      </head>
76      <body>
77        <h1>Welcome to the Kitten Image Generator!</h1>
78        <div class="instructions">
79          <p>Use this service to generate cute kitten images of various sizes:</p>
80          <p>For square images: <code>/width</code> (e.g., <code>/400</code> for a 400x400 image)</p>
81          <p>For rectangular images: <code>/width/height</code> (e.g., <code>/400/300</code> for a 400x300 image)</p>
82        </div>
83        <div class="form-container">
84          <h2>Generate a Kitten Image</h2>
85          <form id="kittenForm">
86            <label for="width">Width (64-1024):</label>
91          </form>
92        </div>
93        <p>Here's an example of a generated 400x400 kitten image:</p>
94        <img src="/400" alt="Example 400x400 kitten" class="example-image">
95        <p>Start generating your own kitten images by using the form above or modifying the URL!</p>
96        <script>
97          document.getElementById('kittenForm').addEventListener('submit', function(e) {
111
112  if (parts.length === 1) {
113    // Square image
114    width = height = parseInt(parts[0]);
115  } else if (parts.length === 2) {
116    // Rectangular image
117    width = parseInt(parts[0]);
118    height = parseInt(parts[1]);
119  } else {
120    return new Response('Invalid URL format. Use /width for square images or /width/height for rectangular images.', 
121      { status: 400, headers: { 'Content-Type': 'text/plain' } });
122  }
132
133  const prompt = `A cute kitten, high quality, detailed`;
134  const imageGenerationUrl = `https://maxm-imggenurl.web.val.run/${encodeURIComponent(prompt)}?width=${width}&height=${height}`;
135
136  try {
137    console.log(`Generating image with dimensions: ${width}x${height}`);
138    const imageResponse = await fetch(imageGenerationUrl);
139    console.log(`Response status: ${imageResponse.status}`);
140
141    if (!imageResponse.ok) {
142      throw new Error(`Failed to generate image: ${imageResponse.status} ${imageResponse.statusText}`);
143    }
144
145    const imageBlob = await imageResponse.blob();
146    console.log(`Successfully generated image, size: ${imageBlob.size} bytes`);
147
148    // Return the image as-is, without any processing
149    return new Response(imageBlob, {
150      headers: {
151        'Content-Type': 'image/png',
152        'Cache-Control': 'public, max-age=86400',
153      },
154    });
155  } catch (error) {
156    console.error('Error generating image:', error.message);
157    return new Response(`Failed to generate image: ${error.message}`, { status: 500, headers: { 'Content-Type': 'text/plain' } });
158  }
159}

« Previous

1...538 539 540 541 542 543 544...622

Projects

View all 97 projects

brainrot_image_gen1 file match

@dcm31•Updated 1 week ago

Generate images for Italian Brainrot characters using FAL AI

Users

View all 2 users

@Atiq1 project

Updated 3 days ago

"Focal Lens with Atig Wazir" "Welcome to my photography journey! I'm Atiq Wazir, a passionate photographer capturing life's beauty one frame at a time. Explore my gallery for stunning images, behind-the-scenes stories, and tips & tricks to enhance your own

Documentation

View all 7 documentation results

Val Town Code Search Return to Val Town

replaceEmojisWithImages main.tsx1 match

generateRAdioDjRss main.tsx2 matches

hiraganaWordBuilder main.tsx18 matches

getJsonAndRenderAsImage main.tsx16 matches

getBlobAndRenderAsImage main.tsx14 matches

getJsonAndRenderAsImage README.md13 matches

hackerNewsDigest README.md1 match

uptime README.md1 match

status README.md1 match

placeholderKittenImages main.tsx28 matches

Projects

image-inpainting1 file match

brainrot_image_gen1 file match

Users

@Chrimage1 project

@Atiq1 project

Documentation

Val Town Code SearchReturn to Val Town

replaceEmojisWithImagesmain.tsx1 match

generateRAdioDjRssmain.tsx2 matches

hiraganaWordBuildermain.tsx18 matches

getJsonAndRenderAsImagemain.tsx16 matches

getBlobAndRenderAsImagemain.tsx14 matches

getJsonAndRenderAsImageREADME.md13 matches

hackerNewsDigestREADME.md1 match

uptimeREADME.md1 match

statusREADME.md1 match

placeholderKittenImagesmain.tsx28 matches

Projects

image-inpainting1 file match

brainrot_image_gen1 file match

Users

@Chrimage1 project

@Atiq1 project

Documentation

Val Town Code Search Return to Val Town

replaceEmojisWithImages main.tsx1 match

generateRAdioDjRss main.tsx2 matches

hiraganaWordBuilder main.tsx18 matches

getJsonAndRenderAsImage main.tsx16 matches

getBlobAndRenderAsImage main.tsx14 matches

getJsonAndRenderAsImage README.md13 matches

hackerNewsDigest README.md1 match

uptime README.md1 match

status README.md1 match

placeholderKittenImages main.tsx28 matches