Val Town Code SearchReturn to Val Town

17    <br />
18
19    Replace <code>name</code> with the name you gave the image. Names can
20    contain spaces, emojis, anything!
21  </p>
100      <audio controls style="display: none" id="preview-audio"></audio>
101    </div>
102    <input type="file" id="file" accept="audio/*, image/*" required />
103  </label>
104  <label for="singing">
139  const nameInput = document.getElementById("name");
140  const fileInput = document.getElementById("file");
141  const previewImage = document.getElementById("preview");
142  const previewAudio = document.getElementById("preview-audio");
143  const uploadButton = document.getElementById("upload-button");
154  reader.onload = () => {
155    const dataUrl = reader.result;
156    previewImage.src = dataUrl; // the form just grabs whatever is here and uploads this, which may even be audio
157    previewAudio.src = dataUrl;
158  };
167  });
168
169  previewImage.addEventListener("load", () => {
170    previewImage.style.display = "block";
171  });
172
175  });
176
177  previewImage.addEventListener("error", () => {
178    previewImage.style.display = "none";
179  });
180
227      event.preventDefault();
228      const name = encodeURIComponent(nameInput.value);
229      const dataUrl = previewImage.src;
230      const body = JSON.stringify({ name, dataUrl });
231      uploadButton.disabled = true;
239        nameInput.value = "";
240        fileInput.value = "";
241        previewImage.src = "";
242        previewAudio.src = "";
243      } else {
321
322            const contentType = response.headers.get("content-type");
323            if (contentType.startsWith("image")) {
324              const imageElement = document.createElement("img");
325              imageElement.loading = "lazy";
326              imageElement.style.width = "100%";
327              imageElement.style.objectFit = "contain";
328              imageElement.style.height = "300px";
329              // src the response
330              const blob = await response.blob();
331              imageElement.src = URL.createObjectURL(blob);
332              imageElement.onerror = () => {
333                imageElement.remove();
334              };
335              previewContainer.appendChild(imageElement);
336            } else if (contentType.startsWith("audio")) {
337              const audioElement = document.createElement("audio");
369      });
370
371      // const imageElement = document.createElement("img");
372      // imageElement.loading = "lazy";
373      // imageElement.src = `https://tode.party?${upload.name}`;
374      // imageElement.style.width = "100%";
375      // imageElement.style.objectFit = "contain";
376      // imageElement.style.border = "1px solid rgb(159, 174, 238)";
377      // imageElement.style.backgroundColor = "rgb(55, 67, 98)";
378      // imageElement.style.height = "300px";
379      // imageElement.onerror = () => {
380      //   imageElement.remove();
381      // };
382

17    <br />
18
19    Replace <code>name</code> with the name you gave the image. Names can
20    contain spaces, emojis, anything!
21  </p>
100      <audio controls style="display: none" id="preview-audio"></audio>
101    </div>
102    <input type="file" id="file" accept="audio/*, image/*" required />
103  </label>
104  <label for="singing">
139  const nameInput = document.getElementById("name");
140  const fileInput = document.getElementById("file");
141  const previewImage = document.getElementById("preview");
142  const previewAudio = document.getElementById("preview-audio");
143  const uploadButton = document.getElementById("upload-button");
154  reader.onload = () => {
155    const dataUrl = reader.result;
156    previewImage.src = dataUrl; // the form just grabs whatever is here and uploads this, which may even be audio
157    previewAudio.src = dataUrl;
158  };
167  });
168
169  previewImage.addEventListener("load", () => {
170    previewImage.style.display = "block";
171  });
172
175  });
176
177  previewImage.addEventListener("error", () => {
178    previewImage.style.display = "none";
179  });
180
227      event.preventDefault();
228      const name = encodeURIComponent(nameInput.value);
229      const dataUrl = previewImage.src;
230      const body = JSON.stringify({ name, dataUrl });
231      uploadButton.disabled = true;
239        nameInput.value = "";
240        fileInput.value = "";
241        previewImage.src = "";
242        previewAudio.src = "";
243      } else {
321
322            const contentType = response.headers.get("content-type");
323            if (contentType.startsWith("image")) {
324              const imageElement = document.createElement("img");
325              imageElement.loading = "lazy";
326              imageElement.style.width = "100%";
327              imageElement.style.objectFit = "contain";
328              imageElement.style.height = "300px";
329              // src the response
330              const blob = await response.blob();
331              imageElement.src = URL.createObjectURL(blob);
332              imageElement.onerror = () => {
333                imageElement.remove();
334              };
335              previewContainer.appendChild(imageElement);
336            } else if (contentType.startsWith("audio")) {
337              const audioElement = document.createElement("audio");
369      });
370
371      // const imageElement = document.createElement("img");
372      // imageElement.loading = "lazy";
373      // imageElement.src = `https://tode.party?${upload.name}`;
374      // imageElement.style.width = "100%";
375      // imageElement.style.objectFit = "contain";
376      // imageElement.style.border = "1px solid rgb(159, 174, 238)";
377      // imageElement.style.backgroundColor = "rgb(55, 67, 98)";
378      // imageElement.style.height = "300px";
379      // imageElement.onerror = () => {
380      //   imageElement.remove();
381      // };
382

169      {
170        headers: {
171          "content-type": "image/svg+xml;charset=UTF-8",
172        },
173      },

140      {
141        headers: {
142          "content-type": "image/svg+xml;charset=UTF-8",
143        },
144      },

31
32export interface InstagramPostMeta {
33  imageUrl: string;
34  caption: string;
35  username: string;
55
56  return {
57    imageUrl: await fetch(`https://www.instagram.com/p/${id}/media/?size=l`, {
58      headers: {
59        "Accept":

32
33  try {
34    const { caption, username, imageUrl } = await instagramPostExtract(
35      fullInstagramUrl,
36    );
37
38    // If the 'proxyImage' parameter is present, proxy the image
39    if (c.req.query("proxyImage") === "true") {
40      try {
41        const imageResponse = await fetch(imageUrl);
42        if (!imageResponse.ok) {
43          throw new Error(`Failed to fetch image: ${imageResponse.status}`);
44        }
45
46        // Return the proxied image with appropriate content type
47        const contentType = imageResponse.headers.get("Content-Type") ||
48          "image/jpeg";
49        return new Response(imageResponse.body, {
50          headers: { "Content-Type": contentType },
51        });
53        if (fetchError instanceof Error) {
54          return c.json({
55            error: "Failed to proxy image: " + fetchError.message,
56          }, 502);
57        }
58      }
59    } else {
60      // By default, return JSON with caption, username, and image URL
61      // Construct a proper proxied image URL
62      const url = new URL(c.req.url);
63      const host = url.host;
64      const protocol = url.protocol;
65      const proxiedImageUrl = `${protocol}//${host}/extract?url=${
66        encodeURIComponent(fullInstagramUrl)
67      }&proxyImage=true`;
68
69      return c.json({
70        caption,
71        username,
72        imageUrl: imageUrl,
73        proxiedImageUrl: proxiedImageUrl,
74      });
75    }
99
100  try {
101    const { caption, username, imageUrl } = await instagramPostExtract(
102      fullInstagramUrl!,
103    );
104
105    // If the 'proxyImage' parameter is present, proxy the image
106    if (c.req.query("proxyImage") === "true") {
107      try {
108        const imageResponse = await fetch(imageUrl);
109        if (!imageResponse.ok) {
110          throw new Error(`Failed to fetch image: ${imageResponse.status}`);
111        }
112
113        // Return the proxied image with appropriate content type
114        const contentType = imageResponse.headers.get("Content-Type") ||
115          "image/jpeg";
116        return new Response(imageResponse.body, {
117          headers: { "Content-Type": contentType },
118        });
120        if (fetchError instanceof Error) {
121          return c.json({
122            error: "Failed to proxy image: " + fetchError.message,
123          }, 502);
124        }
125      }
126    } else {
127      // By default, return JSON with caption, username, and image URL
128      // Construct a proper proxied image URL
129      const url = new URL(c.req.url);
130      const host = url.host;
131      const protocol = url.protocol;
132      const proxiedImageUrl = `${protocol}//${host}/extract/${
133        encodeURIComponent(fullInstagramUrl!)
134      }?proxyImage=true`;
135
136      return c.json({
137        caption,
138        username,
139        imageUrl: imageUrl,
140        proxiedImageUrl: proxiedImageUrl,
141      });
142    }

1# Instagram Post Scraper
2
3A simple web application for extracting image and caption data from Instagram posts.
4
5## Endpoints
7- `/` - Main application page
8- `/extract?url={instagram_url}` - API endpoint to extract post data
9- `/extract?url={instagram_url}&proxyImage=true` - Endpoint to proxy Instagram images
10
11## Usage
12
131. Enter an Instagram post URL in the input field
142. The application will fetch the image and caption
153. Copy the text with attribution using the "Copy Text" button
164. Save the image (on mobile tap and hold)
17

5  const [url, setUrl] = useState("");
6  const [resultCaption, setResultText] = useState("");
7  const [resultImage, setResultImage] = useState("");
8  const [copyStatus, setCopyStatus] = useState("");
9  const imageRef = useRef(null);
10  const textRef = useRef(null);
11
17          console.log(data);
18          setResultText(`Reposted from @${data.username}\n\n${data.caption}`);
19          setResultImage(data.proxiedImageUrl);
20        })
21        .catch((error) => {
22          console.error("Error fetching data:", error);
23          setResultText("Error fetching data");
24          setResultImage("");
25        });
26    }
44    <div style={{ maxWidth: "600px", margin: "0 auto", padding: "20px" }}>
45      <h1>Instagram Extracter</h1>
46      <h2>Extract images from single-image instagram posts</h2>
47
48      <div>
49        <label>
50          {(resultImage && resultCaption)
51            ? "Post URL"
52            : "Enter the URL to the Post"}
59        />
60
61        {!(resultImage && resultCaption) && (
62          <p style={{ marginBottom: "10px" }}>
63            Click the share button at the bottom left of post (the paper
67      </div>
68
69      {resultImage && resultCaption && (
70        <>
71          {copyStatus && (
97              <div style={{ marginTop: "20px" }}>
98                <img
99                  ref={imageRef}
100                  src={resultImage}
101                  alt="Result"
102                  style={{ maxWidth: "100%", border: "1px solid #ccc" }}
103                />
104                Click and hold, then click save image.
105              </div>
106            </div>

2import { Hono } from "https://deno.land/x/hono/mod.ts";
3import { blob } from "https://esm.town/v/std/blob";
4import { backupBingImage } from "./backupImage.tsx";
5import { fetchBingImage } from "./fetchBingImage.tsx";
6
7const app = new Hono();
10app.get("/list", async (c) => {
11  try {
12    const images = await blob.list("bing-images-of-day/");
13    const imageDates = images
14      .map(img => img.key.replace("bing-images-of-day/", ""))
15      .sort((a, b) => {
16        const parseDate = (dateString: string) => {
20        return parseDate(b).getTime() - parseDate(a).getTime();
21      })
22      .map(imageFile => [imageFile.replace(".jpg", ""), `${DEPLOY_URL}/get/${imageFile}`]);
23
24    return c.json(Object.fromEntries(imageDates));
25  } catch (error) {
26    return c.json([], 200);
30app.get("/get/:date", async (c) => {
31  const date = c.req.param("date");
32  const imageKey = `bing-images-of-day/${date}`;
33
34  try {
35    const imageBlob = await blob.get(imageKey);
36    if (!imageBlob) return c.json({ error: "Image not found" }, 404);
37
38    const modifiedResponse = new Response(imageBlob.body, {
39      headers: {
40        "Content-Type": "image/jpeg",
41        "Access-Control-Allow-Origin": "*",
42      },
45    return modifiedResponse;
46  } catch (error) {
47    return c.json({ error: "Image not found" }, 404);
48  }
49});
51app.get("/", async (c) => {
52  try {
53    // Use our helper function to fetch the current Bing image
54    const response = await fetchBingImage();
55    if (!response.ok) throw new Error(`HTTP error! status: ${response.status}`);
56
57    const imageBlob = await response.blob();
58
59    return new Response(imageBlob, {
60      headers: {
61        "Content-Type": "image/jpeg",
62        "Access-Control-Allow-Origin": "*",
63      },
64    });
65  } catch (error) {
66    return c.json({ error: "Failed to fetch current Bing image" }, 500);
67  }
68});
70app.get("/backup", async (c) => {
71  try {
72    // Use our backup helper to save today's image
73    await backupBingImage();
74    return c.json({ success: true, message: "Image backed up successfully" });
75  } catch (error) {
76    return c.json({ error: "Failed to backup image" }, 500);
77  }
78});
84        path: "/",
85        method: "GET",
86        description: "Fetches the current Bing Image of the Day.",
87        response: "JPEG image with headers `Content-Type: image/jpeg`.",
88      },
89      {
90        path: "/list",
91        method: "GET",
92        description: "Lists all saved Bing Images of the Day.",
93        response: "JSON object with dates as keys and URLs as values.",
94      },
96        path: "/get/:date",
97        method: "GET",
98        description: "Fetches a saved Bing Image of the Day for a specific date.",
99        urlParams: "date - format: MM-DD-YYYY",
100        response: "JPEG image or JSON error if not found.",
101      },
102      {
103        path: "/backup",
104        method: "GET",
105        description: "Manually triggers a backup of today's Bing Image of the Day.",
106        response: "JSON status message",
107      },

1# Bing Image of the Day Archive
2
3This Val Town project fetches, displays, and archives the Bing Image of the Day, providing an API to access both current and historical images.
4
5## Overview
6
7- Fetch the current Bing Image of the Day
8- Archive images to Val Town blob storage with date-based naming
9- List all archived images with their dates
10- Retrieve specific historical images by date
11
12## API Endpoints
14| Endpoint | Method | Description |
15|----------|--------|-------------|
16| `/` | GET | Returns the current Bing Image of the Day |
17| `/list` | GET | Returns a JSON object listing all archived images with dates as keys and URLs as values |
18| `/get/:date` | GET | Returns a specific archived image by date (format: MM-DD-YYYY) |
19| `/backup` | GET | Manually triggers a backup of the current Bing Image of the Day |
20| `/docs` | GET | Returns API documentation in JSON format |
21
22### How It Works
23
24- The service scrapes the Bing image from a public source (bing.gifposter.com)
25- Images are stored in Val Town's blob storage with keys in the format `bing-images-of-day/MM-DD-YYYY.jpg`
26- The main API serves both current and archived images with proper caching headers
27- Automation can be set up to trigger the backup endpoint daily to build a complete archive
28
29## Usage Examples
30
31### View Current Image
32
33```
35```
36
37Returns the current Bing Image of the Day as a JPEG with appropriate headers.
38
39### List All Archived Images
40
41```
53```
54
55### Get Specific Image by Date
56
57```
59```
60
61Returns the image for January 15, 2024 as a JPEG.