2
3
4
5
6
4
5// export const manager = {
6// getImages(type: string, count: number): Promise<string[]> {
7// return getImages(type, count);
8// },
9// };
10
11export async function getImages(type: string, count: number): Promise<string[]> {
12 // Query to select random rows of the specified type
13 const result = await sqlite.execute(
22 );
23
24 // console.log("images", await getImages("image", 1));
25 // Extract paths from the result rows
26 return result.rows.map(row => await blob.get(row.path));
7 const [uploadStatus, setUploadStatus] = useState<string>("Drag and drop files here");
8 const [fileUrl, setFileUrl] = useState<string | null>(null);
9 const [imageType, setImageType] = useState<string>("image");
10 const urlInputRef = useRef<HTMLInputElement>(null);
11
29
30 // Validate file type
31 if (!["image/jpeg", "image/gif", "image/png"].includes(file.type)) {
32 setUploadStatus("Only JPG, GIF, and PNG files are allowed");
33 return;
36 const formData = new FormData();
37 formData.append("file", file);
38 formData.append("type", imageType);
39
40 fetch("/upload", {
52 });
53 }
54 }, [imageType]);
55
56 const handleDragOver = useCallback((event: React.DragEvent<HTMLDivElement>) => {
77 <p>{uploadStatus}</p>
78 <select
79 value={imageType}
80 onChange={(e) => setImageType(e.target.value)}
81 style={{
82 width: "100%",
85 }}
86 >
87 <option value="image">Image</option>
88 <option value="gif">GIF</option>
89 <option value="stock_image">Stock Image</option>
90 </select>
91 <div
97 }}
98 >
99 Drag and drop an image here
100 </div>
101 {fileUrl && (
146 }}
147 >
148 View Image
149 </a>
150 </div>
167 const formData = await request.formData();
168 const file = formData.get("file") as File;
169 const imageType = formData.get("type") as string;
170
171 if (!file) {
204 await sqlite.execute(
205 `INSERT INTO ${DATABASE_TABLENAME} (type, path) VALUES (?, ?)`,
206 [imageType, filename],
207 );
208
211 url: publicUrl,
212 filename: filename,
213 type: imageType,
214 }),
215 {
223 <html>
224 <head>
225 <title>Image Upload</title>
226 <style>${css}</style>
227 </head>
3hi sophieee
4
5ok so i only edited `frontend_card`, you can see where im directly grabbing a public url i have in my blob storage aka: https://charmaine-blob_admin.web.val.run/api/public/public%2F1738957543311_Red_Happy_Valentine's_Day_PNG_Clip-Art_Image.png
6
7i would love to be able to make get requests to a url like that instead of hard coding them :p
1import { getImages } from "./image_manager";
2
3export default async function server(request: Request): Promise<Response> {
4 const url = new URL(request.url);
5 if (request.method === "GET" && url.pathname === "/image") {
6 console.log("its /images");
7 const imageUrls = await getImages("image", 1);
8 console.log("its after getImages");
9 return new Response(
10 JSON.stringify({
11 urls: imageUrls,
12 }),
13 {
23 <html>
24 <head>
25 <title>Random Image Placement</title>
26 <meta name="viewport" content="width=device-width, initial-scale=1">
27 <style>
152 "respect": "[Yes](https://developers.google.com/search/docs/crawling-indexing/overview-google-crawlers)",
153 },
154 "GoogleOther-Image": {
155 "description":
156 "\"Used by various product teams for fetching publicly accessible content from sites. For example, it may be used for one-off crawls for internal research and development.\"",
191 "respect": "Yes",
192 },
193 "ImagesiftBot": {
194 "description":
195 "Once images and text are downloaded from a webpage, ImageSift analyzes this data from the page and stores the information in an index. Our web intelligence products use this index to enable search and retrieval of similar images.",
196 "frequency": "No information.",
197 "function":
198 "ImageSiftBot is a web crawler that scrapes the internet for publicly available images to support our suite of web intelligence products",
199 "operator": "[ImageSift](https://imagesift.com)",
200 "respect": "[Yes](https://imagesift.com/about)",
201 },
202 "img2dataset": {
203 "description": "Downloads large sets of images into datasets for LLM training or other purposes.",
204 "frequency": "At the discretion of img2dataset users.",
205 "function": "Scrapes images for use in LLMs.",
206 "operator": "[img2dataset](https://github.com/rom1504/img2dataset)",
207 "respect": "Unclear at this time.",
2
3
4
5
6
3import { sendWithRateLimit } from "https://esm.town/v/wilt/emailToDiscord/discordClient";
4import { requestAsObject } from "https://esm.town/v/wilt/serializeRequest";
5import { imageSize } from "npm:image-size";
6
7export interface IEmailHandlerProps {
30}
31
32interface IImage {
33 url: string;
34 height?: number;
41 url?: string;
42 footer?: { text: string };
43 image?: IImage;
44 video?: IImage;
45 provider?: { name?: string; url?: string };
46}
125
126 const fileHooks: RequestInit[] = await Promise.all(sizedAttachments.map(async (file) => {
127 const embed: IEmbed = { image: { url: "attachment://" + file.name } };
128 const boundary = "--boundary";
129 const buf = await file.arrayBuffer();
3This is a lightweight Blob Admin interface to view and debug your Blob data.
4
5
6
7Versions 0-17 of this val were done with Hono and server-rendering.
440 {profile && (
441 <div className="flex items-center space-x-4">
442 <img src={profile.profileImageUrl} alt="Profile" className="w-8 h-8 rounded-full" />
443 <span>{profile.username}</span>
444 <a href="/auth/logout" className="text-blue-400 hover:text-blue-300">Logout</a>
583 alt="Blob content"
584 className="max-w-full h-auto"
585 onError={() => console.error("Error loading image")}
586 />
587 </div>
635 <li>Create public shareable links for blobs</li>
636 <li>View and manage public folder</li>
637 <li>Preview images directly in the interface</li>
638 </ul>
639 </div>
694 const { ValTown } = await import("npm:@valtown/sdk");
695 const vt = new ValTown();
696 const { email: authorEmail, profileImageUrl, username } = await vt.me.profile.retrieve();
697 // const authorEmail = me.email;
698
762
763 c.set("email", email);
764 c.set("profile", { profileImageUrl, username });
765 await next();
766};