2 console.log("generatestatichtml");
3 // Get the main container
4 const container = document.querySelector("div[style*=\"backgroundImage\"]");
5 if (!container) return;
6
22 height: 100vh;
23 width: 100vw;
24 background-image: url('https://shouser-blob_admin.web.val.run/api/public/pink_gradient_background.jpg');
25 background-size: cover;
26 background-position: center;
33`;
34
35 // Get all images and text elements
36 const elements = container.querySelectorAll("div[style*=\"position: absolute\"]");
37
41
42 if (img) {
43 // It's an image element
44 html += ` <div style="
45 position: absolute;
49 height: ${el.style.height};
50 ">
51 <img src="${img.src}" alt="Valentine Image" style="
52 width: 100%;
53 height: 100%;
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%",
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 }),
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>
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>
3Move circles around. State is synced with the server. Open a window in another tab and watch the circles update as you move them .
4
5
6
195 if (logoData) {
196 return new Response(logoData, {
197 headers: { "Content-Type": "image/png" },
198 });
199 }
1165 <meta property="og:description" content="Turn your ideas into fully functional apps in less than a second – powered by Llama3.3-70b on Cerebras's super-fast wafer chips. Code is 100% open-source, hosted on Val Town."">
1166 <meta property="og:type" content="website">
1167 <meta property="og:image" content="https://stevekrouse-blob_admin.web.val.run/api/public/CerebrasCoderOG.jpg">
1168
1169
1165 <meta property="og:description" content="Turn your ideas into fully functional apps in less than a second – powered by Llama3.3-70b on Cerebras's super-fast wafer chips. Code is 100% open-source, hosted on Val Town."">
1166 <meta property="og:type" content="website">
1167 <meta property="og:image" content="https://stevekrouse-blob_admin.web.val.run/api/public/CerebrasCoderOG.jpg">
1168
1169
8
9<div align="center">
10<img src="https://imagedelivery.net/iHX6Ovru0O7AjmyT5yZRoA/67a1d35e-c37c-41a4-0e5a-03a9ba585d00/public" width="500px"/>
11</div>
