1
2export const PROMPT_IMAGE_LIMIT = 5;
3
4export const processFiles = async (files: File[], images: (string | null)[], setImages: (images: (string | null)[]) => void) => {
5 const imageFiles = files.filter(file => file.type.startsWith('image/'));
6 const filesToProcess = imageFiles.slice(0, PROMPT_IMAGE_LIMIT - images.filter(Boolean).length);
7
8 if (filesToProcess.length === 0) return;
9
10 const newImages = [...images, ...Array(filesToProcess.length).fill(null)];
11 setImages(newImages);
12
13 const processedImages = await Promise.all(
14 filesToProcess.map(async (file) => {
15 return await readFileAsDataURL(file);
17 );
18
19 const updatedImages = [...images];
20 processedImages.forEach((dataUrl, index) => {
21 updatedImages[images.length + index] = dataUrl;
22 });
23
24 setImages(updatedImages.slice(0, PROMPT_IMAGE_LIMIT));
25};
26
30 reader.onload = () => {
31 const result = reader.result as string;
32 console.log("Image loaded, size:", result.length, "bytes");
33 resolve(result);
34 };
73
74function Avatar ({ user }) {
75 if (!user?.profileImageUrl) {
76 return (
77 <div className="avatar" />
81 return (
82 <img
83 src={user.profileImageUrl}
84 alt={user.username}
85 width="32"
10 return new Response(svg, {
11 headers: {
12 "Content-Type": "image/svg+xml",
13 },
14 });
12 total_price: number;
13 inference_price: number;
14 total_images: number;
15 used_inference_data?: boolean;
16}
44 <th>Total Price</th>
45 <th>Inference Price</th>
46 <th>Images</th>
47 </tr>
48 </thead>
59 <td class="price">${formatPrice(row.total_price)} ${row.used_inference_data ? '<span class="badge badge-info" title="Using inference data">I</span>' : ''}</td>
60 <td class="price">${formatPrice(row.inference_price || 0)}</td>
61 <td>${formatNumber(row.total_images)}</td>
62 </tr>
63 `).join("")}
178
179- **Redirects:** Use `return new Response(null, { status: 302, headers: { Location: "/place/to/redirect" }})` instead of `Response.redirect` which is broken
180- **Images:** Avoid external images or base64 images. Use emojis, unicode symbols, or icon fonts/libraries instead
181- **AI Image:** To inline generate an AI image use: `<img src="https://maxm-imggenurl.web.val.run/the-description-of-your-image" />`
182- **Storage:** DO NOT use the Deno KV module for storage
183- **Browser APIs:** DO NOT use the `alert()`, `prompt()`, or `confirm()` methods
10import { useCreditBalance } from "../hooks/useCreditBalance.tsx";
11import { Messages } from "./Messages.tsx";
12import { InputBox, ImageDropContainer } from "./InputBox.tsx";
13import { PreviewFrame } from "./PreviewFrame.tsx";
14import { BranchSelect } from "./BranchSelect.tsx";
68 refetch: () => void;
69}) {
70 const [images, setImages] = useState<(string|null)[]>([]);
71 const [selectedFiles, setSelectedFiles] = useState<string[]>([]);
72 const { audio, user } = useContext(AppContext);
88 branchId,
89 selectedFiles,
90 images,
91 soundEnabled: audio,
92 });
137
138 return (
139 <ImageDropContainer
140 running={running}
141 images={images}
142 setImages={setImages}>
143 <div className="single-column-container">
144 <div className="single-sticky-header">
148 rel="norefferer"
149 className="block-link text-link lockup">
150 {project.imageUrl ? (
151 <img src={project.imageUrl} className="image-thumbnail" />
152 ) : user?.profileImageUrl ? (
153 <img
154 src={user.profileImageUrl}
155 className="avatar"
156 alt={user.username}
159 />
160 ) : (
161 <div className="image-placeholder" />
162 )}
163 <div>{project.name}</div>
211 onSubmit={e => {
212 handleSubmit(e);
213 setImages([]);
214 }}
215 onCancel={handleStop}
216 running={running}
217 error={error}
218 images={images}
219 setImages={setImages}
220 />
221 )}
223 </div>
224 </div>
225 </ImageDropContainer>
226 );
227}
28 <meta name="viewport" content="width=device-width, initial-scale=1.0">
29 <title>Welcome to Val Town Powered Website</title>
30 <link rel="icon" href="https://www.val.town/favicon.svg?dot=false" type="image/svg+xml">
31 <link rel="preconnect" href="https://fonts.googleapis.com">
32 <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
267 <!-- Upper Section: Greeting -->
268 <section class="header-section">
269 <img src="https://sanuja.biz/images/favicon.webp" alt="Logo" class="logo">
270 <h1 class="greeting" id="greeting-text">Hello, ${sanitizedName}!</h1>
271 <p style="color: var(--text-secondary);">Welcome to this Val Town powered website.</p>
39 if (response.status > 400) {
40 const shortenedName = "Error (Forbidden)";
41 const image = "/assets/spotify.svg";
42 return { shortenedName, image };
43 } else if (response.status === 204) {
44 const shortenedName = "Currently Not Playing";
45 const image = "/assets/spotify.svg";
46 return { shortenedName, image };
47 }
48
49 const song = await response.json();
50 const image = song.item.album.images[0].url;
51 const artistNames = song.item.artists.map(a => a.name);
52 const link = song.item.external_urls.spotify;
65 formattedArtist,
66 artistLink,
67 image,
68 };
69 } catch (error) {
70 const shortenedName = "Error";
71 const image = "/assets/spotify.svg";
72 return { shortenedName, image };
73 }
74};
32 send("text", {
33 text:
34 "Failed to extract text from PDF. The file may be corrupted or image-based.",
35 });
36 send("done", {});
31 />
32 <meta property="og:site_name" content="into.md" />
33 <meta property="og:image" content="https://into.md/og-image.png" />
34
35 <!-- Twitter -->
36 <meta name="twitter:card" content="summary_large_image" />
37 <meta name="twitter:url" content="https://into.md/" />
38 <meta
44 content="Convert any webpage to clean markdown format. Prefix any URL with into.md/ for instant conversion."
45 />
46 <meta name="twitter:image" content="https://into.md/og-image.png" />
47
48 <link rel="icon" href="/favicon.ico" />
194
195 .link-underline {
196 background-image: linear-gradient(currentColor, currentColor);
197 background-position: 0 100%;
198 background-repeat: no-repeat;
