Val Town Code Search

valentines_day_card_generator random_position_image7 matches

@shouser•Updated 2 months ago

2import React, { useEffect, useRef, useState } from "https://esm.sh/react@18.2.0";
3
4export function RandomPositionImage({
5  imageUrl = "https://maxm-imggenurl.web.val.run/random-colorful-abstract-shape",
6  existingPositions = [],
7}) {
8  const [position, setPosition] = useState({ top: 0, left: 0 });
9  const [size, setSize] = useState({ width: 250, height: 250 });
10  const [imageLoaded, setImageLoaded] = useState(false);
11  const [isDragging, setIsDragging] = useState(false);
12  const [dragOffset, setDragOffset] = useState({ x: 0, y: 0 });
113        width: `${size.width}`,
114        height: `auto`,
115        opacity: imageLoaded ? 1 : 0,
116        transition: isDragging ? "none" : "opacity 0.3s ease-in-out",
117        cursor: isDragging ? "grabbing" : "grab",
121      <img
122        ref={imgRef}
123        src={imageUrl}
124        alt="Random Generated Image"
125        onLoad={() => setImageLoaded(true)}
126        style={{
127          width: "100%",

valentines_day_card_generator get_images7 matches

@shouser•Updated 2 months ago

3import { DATABASE_TABLENAME } from "./constants";
4
5// export async function getImages(type: string, count: number): Promise<string[]> {
6//   // Query to select random rows of the specified type
7//   const result = await sqlite.execute(
16//   );
17
18//   let images: string[] = [];
19//   for (const row of result.rows) {
20//     // console.log("row", row);
21//     // const blobUrl = await blob.get(row["path"] as string);
22//     images.push(row["path"] as string);
23//   }
24
25//   return images;
26// }
27
28export async function getImages(typeCountMap: Record<string, number>): Promise<Array<string>> {
29  const params: (string | number)[] = [];
30
41
42console.log(
43  await getImages({
44    "image": 10,
45    "gif": 5,
46  }),

valentines_day_card_generator image_uploader14 matches

@shouser•Updated 2 months ago

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, publicUrl],
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>

valentines_day_card_generator index5 matches

@shouser•Updated 2 months ago

1import { getImages } from "./get_images";
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    const params = url.searchParams;
7
14    console.log("typecountmpap", typeCountMap);
15
16    const imageUrls = await getImages(typeCountMap);
17
18    return new Response(
19      JSON.stringify({
20        urls: imageUrls,
21      }),
22      {
32    <html>
33      <head>
34        <title>Random Image Placement</title>
35        <meta name="viewport" content="width=device-width, initial-scale=1">
36        <style>

valentines_day_card_generator frontend_card18 matches

@charmaine•Updated 2 months ago

3import React, { useEffect, useRef, useState } from "https://esm.sh/react@18.2.0";
4
5// import { getImages } from "./get-images";
6
7// const images = await getImages("image", 12);
8// export const IMAGE_URLS = images;
9
10// mock data
11const IMAGE_URLS = [
12  "https://charmaine-blob_admin.web.val.run/api/public/public%2F1738957396306_pngtree-valentine-day-gift-box-open-love-heart-and-rose-potale-greeting-png-image_6564851.png",
13  "https://charmaine-blob_admin.web.val.run/api/public/public%2F1738959510139_2020-heart-pounding-animation.gif",
14  "https://charmaine-blob_admin.web.val.run/api/public/public%2F1738959545863_sugary-heart-valentine-png-5692911.png",
15  "https://charmaine-blob_admin.web.val.run/api/public/public%2F1738957543311_Red_Happy_Valentine's_Day_PNG_Clip-Art_Image.png",
16];
17
81}
82
83function DraggableImage({ imageUrl, initialPosition, index, onPositionChange, isCreating, delay = 0 }) {
84  const [position, setPosition] = useState(initialPosition);
85  const [isDragging, setIsDragging] = useState(false);
149    >
150      <img
151        src={imageUrl}
152        alt="Valentine"
153        style={{
165  const [message, setMessage] = useState("");
166  const [isCreating, setIsCreating] = useState(false);
167  const [imagePositions, setImagePositions] = useState([]);
168  const [showEnvelope, setShowEnvelope] = useState(false);
169  const [contentVisible, setContentVisible] = useState(false);
177      if (urlMessage) setMessage(decodeURIComponent(urlMessage));
178      if (urlPositions) {
179        setImagePositions(JSON.parse(decodeURIComponent(urlPositions)));
180      } else {
181        initializeRandomPositions();
196      scale: 0.8 + Math.random() * 0.4,
197    }));
198    setImagePositions(positions);
199  };
200
201  const handlePositionChange = (index, newPosition) => {
202    const newPositions = [...imagePositions];
203    newPositions[index] = newPosition;
204    setImagePositions(newPositions);
205  };
206
208    const url = new URL(window.location.href);
209    url.searchParams.set("message", message);
210    url.searchParams.set("positions", encodeURIComponent(JSON.stringify(imagePositions)));
211    navigator.clipboard.writeText(url.toString());
212    alert("URL copied to clipboard!");
278            />
279            <div style={{ fontSize: "14px", color: "#666" }}>
280              Drag the images to arrange them
281            </div>
282            <button
347      )}
348
349      {imagePositions.map((position, index) => (
350        <DraggableImage
351          key={index}
352          index={index}
353          imageUrl={IMAGE_URLS[index % IMAGE_URLS.length]}
354          initialPosition={position}
355          onPositionChange={handlePositionChange}

valentines_day_card_generator get-images8 matches

@charmaine•Updated 2 months ago

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  let images: string[] = [];
25  console.log(result.rows);
26  for (const row of result.rows) {
27    const blobPath = await blob.get(row["path"] as string);
28    images.push(`https://shouser-blob_admin.web.val.run/api/public/${blobPath.url}`);
29  }
30
31  return images;
32  // console.log("images", await getImages("image", 1));
33  // Extract paths from the result rows
34  // return result.rows.map(asyncrow => await blob.get(row.path as string));
35}
36
37console.log(await getImages("image", 10));

codemirrorTs README.md1 match

@tmcw•Updated 2 months ago

2
3
4![image.png](https://imagedelivery.net/iHX6Ovru0O7AjmyT5yZRoA/4534f57c-96cc-4eba-bc51-5b3b52e78500/public)
5
6

valentines_day_card_generator image_manager4 matches

@charmaine•Updated 2 months ago

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));

valentines_day_card_generator image_uploader14 matches

@charmaine•Updated 2 months ago

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>

valentines_day_card_generator README.md1 match

@charmaine•Updated 2 months ago

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