9export interface ModelCapabilities {
10 textToText: boolean;
11 imageGeneration: boolean;
12 multimodal: boolean;
13 reasoning: boolean;
14 candidate_count?: number;
15 // For multimodal inputs
16 image_base64?: string;
17}
18
31 capabilities: {
32 textToText: true,
33 imageGeneration: false,
34 multimodal: false,
35 reasoning: true,
59 capabilities: {
60 textToText: true,
61 imageGeneration: false,
62 multimodal: true,
63 reasoning: true,
94 const content: Record<string, unknown> = { text: msg.content };
95
96 // Handle multimodal content if image is provided in provider params
97 if (msg.role === "user" && this.currentImageBase64) {
98 content.inlineData = {
99 mimeType: "image/jpeg",
100 data: this.currentImageBase64,
101 };
102 }
106 }
107
108 // Store current image for multimodal requests
109 private currentImageBase64: string | null = null;
110
111 async complete(
119 }
120
121 // Store image for multimodal processing if provided
122 this.currentImageBase64 = config?.providerParams?.image_base64 || null;
123
124 // Note: This is a placeholder as Val Town doesn't have a native Google AI client
147 const result = await response.json();
148
149 // Clear stored image after request
150 this.currentImageBase64 = null;
151
152 // Approximate token count based on characters
26 capabilities: {
27 textToText: true,
28 imageGeneration: false,
29 multimodal: true,
30 reasoning: true,
54 capabilities: {
55 textToText: true,
56 imageGeneration: false,
57 multimodal: true,
58 reasoning: true,
51 capabilities: {
52 textToText: true,
53 imageGeneration: false,
54 multimodal: false,
55 reasoning: true,
80 capabilities: {
81 textToText: true,
82 imageGeneration: false,
83 multimodal: true,
84 reasoning: true,
2import { createRoot } from "https://esm.sh/react-dom@18.2.0/client";
3import React, { useEffect, useRef, useState } from "https://esm.sh/react@18.2.0";
4import { RandomPositionImage } from "./random_position_image";
5import { TextArt } from "./text_art";
6import { generateStaticHTML } from "./generate_static_html";
8function App() {
9 const [urls, setUrls] = useState([]);
10 const [imagePositions, setImagePositions] = useState([]);
11 const [valentineName, setValentineName] = useState("");
12 const [message, setMessage] = useState("");
16 try {
17 const params = new URLSearchParams({
18 image: "5",
19 gif: "3",
20 stock_image: "3",
21 });
22 const response = await fetch(`/image?${params.toString()}`, {
23 method: "GET",
24 });
76 height: "100vh",
77 width: "100vw",
78 backgroundImage: "url('https://shouser-blob_admin.web.val.run/api/public/pink_gradient_background.jpg')",
79 backgroundSize: "cover",
80 backgroundPosition: "center",
194 textShadow: "1px 1px 0px #000000",
195 }}>
196 ♪ drag text & images! ♪
197 </div>
198 </div>
199
200 {urls.map((url, index) => (
201 <RandomPositionImage
202 key={`img-${index}`}
203 imageUrl={url}
204 existingPositions={imagePositions.slice(0, index)}
205 />
206 ))}
210 key={`text-${index}`}
211 text={text}
212 existingPositions={imagePositions}
213 />
214 ))}
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>