Val Town Code SearchReturn to Val Town

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}

3Feel free to mess around with this val and make it your own :). Just click on "Fork" in the top right.
4
5You can change the phrases that show up as you click no, you can change the firstImg and secondImg, maybe even add more images. And you can also change the colors and any of the text on the screen!
6
7Have fun with it and hopefully your crush says yes hehe.

8// This is a placeholder function showing how you would call an AI API.
9// You would replace this with the actual Google AI SDK (`@google/generative-ai`).
10async function getTextFromImageWithGemini(filePath: string): Promise<string> {
11  console.log("\n--- Entering AI Text Extraction Step ---");
12  console.log(`(Pretending to send image at '${filePath}' to a multimodal AI...)`);
13  
14  // In a real scenario, you would:
15  // 1. Install the Google AI SDK: `npm install @google/generative-ai`
16  // 2. Initialize the Gemini client with your API key.
17  // 3. Read the image file from the filePath.
18  // 4. Convert it to a format the API accepts (like base64).
19  // 5. Send it to the model (e.g., 'gemini-1.5-flash').
50    const page = pages.length > 0 ? pages[0] : await browser.newPage();
51    
52    // Using a specific review page which is known to have a spec image
53    const url = 'https://amanz.my/2024448310/'; // Ulasan: HONOR Magic6 Pro
54    await page.goto(url, { waitUntil: "domcontentloaded" });
55    console.log(`Mapsd to: ${url}`);
56
57    // --- STEP 1: Find and Download the Spec Image ---
58    console.log("\n--- Locating product specification image... ---");
59
60    // This selector targets an image inside a <figure> tag, within the article body.
61    // This is often a good guess, but it might need to be adjusted for other articles.
62    const imageSelector = 'figure.wp-block-image img';
63
64    // Use page.$eval to find the element and get its 'src' attribute
65    const imageUrl = await page.$eval(imageSelector, (img: HTMLImageElement) => {
66      return img.src; // Get the source URL of the image
67    });
68    
69    console.log(`Found image URL: ${imageUrl}`);
70
71    // Download the image
72    console.log("Downloading image...");
73    const imageResponse = await fetch(imageUrl);
74    if (!imageResponse.ok) {
75      throw new Error(`Failed to download image: ${imageResponse.statusText}`);
76    }
77
78    // Convert the image response to a buffer (raw binary data)
79    const imageBuffer = await imageResponse.arrayBuffer();
80
81    // Save the buffer to a local file
82    const imageFileName = 'spec-image.jpg';
83    await fs.writeFile(imageFileName, Buffer.from(imageBuffer));
84    console.log(`Image successfully saved as '${imageFileName}'`);
85
86    // --- STEP 2: Send the Image to AI for Text Extraction ---
87    const extractedText = await getTextFromImageWithGemini(imageFileName);
88
89    console.log("\n--- AI Analysis Complete ---");
96      // Specifically check for selector error
97      if (error.message.includes('failed to find element matching selector')) {
98        console.error(`Could not find the specification image. The CSS selector might need to be updated for this article.`);
99      } else {
100        console.error(error.message);

23        content_type: string;
24        content_length: number | null;
25        image?: {
26          width_px: number;
27          height_px: number;
30          title: string;
31          description: string;
32          image: string;
33        };
34      };
72    console.log("CastData", castData);
73
74    // Process embeds - separate images for upload vs URLs for text
75    let mediaIds: string[] = [];
76    let textUrls: string[] = [];
78    if (castData.embeds && castData.embeds.length > 0) {
79      for (const embed of castData.embeds) {
80        // Check if this is an imagedelivery.net URL (download and upload as media)
81        if (embed.url.startsWith("https://imagedelivery.net")) {
82          // We'll process these as uploadable images
83          continue; // Handle after getting Twitter client
84        }
93      }
94
95      // Append non-image URLs to text
96      if (textUrls.length > 0) {
97        castText = castText + " " + textUrls.join(" ");
126    });
127
128    // Process imagedelivery.net URLs - download and upload as media
129    if (castData.embeds && castData.embeds.length > 0) {
130      const imageEmbeds = castData.embeds
131        .filter(embed => embed.url.startsWith("https://imagedelivery.net"))
132        .slice(0, 2); // Limit to 2 images (Farcaster's limit)
133
134      for (const embed of imageEmbeds) {
135        try {
136          console.log("Downloading image from:", embed.url);
137
138          // Get image format from Farcaster metadata
139          const contentType = embed.metadata?.content_type;
140          if (!contentType || !contentType.startsWith("image/")) {
141            throw new Error(`Invalid or missing content type: ${contentType}`);
142          }
143
144          // Convert MIME type to format string for Twitter API
145          let imageFormat: string;
146          switch (contentType) {
147            case "image/jpeg":
148              imageFormat = "jpeg";
149              break;
150            case "image/png":
151              imageFormat = "png";
152              break;
153            case "image/webp":
154              imageFormat = "webp";
155              break;
156            case "image/gif":
157              imageFormat = "gif";
158              break;
159            default:
160              throw new Error(`Unsupported image format: ${contentType}`);
161          }
162
163          // Download the image
164          const imageResponse = await fetch(embed.url);
165          if (!imageResponse.ok) {
166            throw new Error(`Failed to download image: ${imageResponse.status} ${imageResponse.statusText}`);
167          }
168
169          const imageBuffer = await imageResponse.arrayBuffer();
170          const imageUint8Array = new Uint8Array(imageBuffer);
171
172          console.log("Uploading image to Twitter, size:", imageUint8Array.length, "bytes, format:", imageFormat);
173
174          // Upload to Twitter using Buffer and correct format
175          const mediaUpload = await twitterClient.v1.uploadMedia(Buffer.from(imageUint8Array), {
176            type: imageFormat,
177          });
178
179          mediaIds.push(mediaUpload);
180          console.log("Successfully uploaded image, media ID:", mediaUpload);
181        } catch (error) {
182          console.error("Failed to process image:", embed.url, "Error:", error);
183          // Skip posting entire tweet if image processing fails
184          return new Response("OK", { status: 200 });
185        }

22            font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
23        }
24        .background-image {
25            position: fixed;
26            top: 0;
41</head>
42<body>
43    <div class="background-image" style="background-image: url('https://source.unsplash.com/1920x1080/?fitness,running,cycling')"></div>
44    <nav class="navbar navbar-expand-lg navbar-dark bg-dark fixed-top">
45        <div class="container">