Val Town Code SearchReturn to Val Town

2import { useRef, useState, useEffect } from "react";
3import { PlusIcon, ArrowUpIcon, Square, XIcon } from "./icons.tsx";
4import { processFiles } from "../utils/images.ts";
5
6export function InputBox ({
11  running,
12  error,
13  images,
14  setImages,
15} : {
16  value: string;
20  running: boolean;
21  error: any;
22  images: (string|null)[];
23  setImages: (images: (string|null)[]) => void;
24}) {
25  const form = useRef(null);
57          autoFocus={true}
58        />
59        <ImageRow images={images} setImages={setImages} />
60        <div className="toolbar">
61          <UploadButton
62            disabled={running}
63            images={images}
64            setImages={setImages}
65          />
66          <div className="spacer" />
88}
89
90export function ImageDropContainer ({
91  images,
92  setImages,
93  running,
94  children,
95}: {
96  images: (string|null)[];
97  setImages: (images: (string|null)[]) => void;
98  running: boolean;
99  children: React.ReactNode;
100}) {
101  const dragging = useImageDrop({ images, setImages, running });
102
103  return (
105      {children}
106      {dragging && (
107        <div className="image-drop-overlay">
108          <div className="image-drop-inner">
109            Drop images here to upload
110          </div>
111        </div>
115}
116
117export function useImageDrop ({ images, setImages, running }: {
118  images: (string|null)[];
119  setImages(images: (string|null)[]) => void;
120  running: boolean;
121}) {
143    setDragging(false);
144    if (e.dataTransfer?.files && !running) {
145      processFiles(Array.from(e.dataTransfer.files), images, setImages);
146    }
147  }
164}
165
166function ImageRow ({ images, setImages }: {
167  images: (string|null)[];
168  setImages: (images: (string|null)[]) => void;
169}) {
170  return (
171    <div className="image-row">
172      {images.map((image, i) => (
173        <Thumbnail
174          key={i}
175          image={image}
176          onRemove={() => {
177            setImages([
178              ...images.slice(0, i),
179              ...images.slice(i + 1),
180            ]);
181          }}
186}
187
188function Thumbnail ({ image, onRemove }: {
189  image: string|null;
190  onRemove: () => void;
191}) {
192  if (!image) return null;
193
194  return (
195    <div className="input-image">
196      <img
197        src={image}
198        alt="User uploaded image"
199        className="image-thumbnail"
200      />
201      <button
202        type="button"
203        title="Remove image"
204        className="remove-image-button"
205        onClick={onRemove}
206      >
212
213function UploadButton ({
214  images,
215  setImages,
216  disabled,
217}: {
218  images: (string|null)[];
219  setImages: (images: (string|null)[]) => void;
220  disabled: boolean;
221}) {
226      <button
227        type="button"
228        title="Upload image"
229        disabled={disabled}
230        onClick={e => {
234        <PlusIcon />
235        <div className="sr-only">
236          Upload image
237        </div>
238      </button>
243        onChange={e => {
244          if (e.target.files) {
245            processFiles(Array.from(e.target.files), images, setImages);
246          }
247        }}

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

33        <button className="h6">Log out</button>
34      </form>
35      {user?.profileImageUrl && (
36        <img
37          src={user.profileImageUrl}
38          alt={user.username}
39          width="32"

10  return new Response(svg, {
11    headers: {
12      "Content-Type": "image/svg+xml",
13    },
14  });

11  total_cache_write_tokens: number;
12  total_price: number;
13  total_images: number;
14  used_inference_data?: boolean;
15}
40              <th>Cache Write</th>
41              <th>Total Price</th>
42              <th>Images</th>
43            </tr>
44          </thead>
54                <td>${formatNumber(row.total_cache_write_tokens)} ${row.used_inference_data ? '<span class="badge badge-info" title="Using inference data">I</span>' : ''}</td>
55                <td class="price">${formatPrice(row.total_price)} ${row.used_inference_data ? '<span class="badge badge-info" title="Using inference data">I</span>' : ''}</td>
56                <td>${formatNumber(row.total_images)}</td>
57              </tr>
58            `).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

9import { useUsageStats } from "../hooks/useUsageStats.ts";
10import { Messages } from "./Messages.tsx";
11import { InputBox, ImageDropContainer } from "./InputBox.tsx";
12import { PreviewFrame } from "./PreviewFrame.tsx";
13import { BranchSelect } from "./BranchSelect.tsx";
66  refetch: () => void;
67}) {
68  const [images, setImages] = useState<(string|null)[]>([]);
69  const [selectedFiles, setSelectedFiles] = useState<string[]>([]);
70  const { audio, user } = useContext(AppContext);
84    branchId,
85    selectedFiles,
86    images,
87    soundEnabled: audio,
88  });
108
109  return (
110    <ImageDropContainer
111      running={running}
112      images={images}
113      setImages={setImages}>
114      <div className="single-column-container">
115        <div className="single-sticky-header">
119            rel="norefferer"
120            className="block-link text-link lockup">
121            {project.imageUrl ? (
122              <img src={project.imageUrl} className="image-thumbnail" />
123            ) : user?.profileImageUrl ? (
124              <img
125                src={user.profileImageUrl}
126                className="avatar"
127                alt={user.username}
130              />
131            ) : (
132              <div className="image-placeholder" />
133            )}
134            <div>{project.name}</div>
153            onSubmit={e => {
154              handleSubmit(e);
155              setImages([]);
156            }}
157            onCancel={handleStop}
158            running={running}
159            error={error}
160            images={images}
161            setImages={setImages}
162          />
163          <Footer />
164        </div>
165      </div>
166    </ImageDropContainer>
167  );
168}

9## Example
10This val tracks mentions of "Val Town" and related terms, excluding noise like retweets and irrelevant accounts. Notifications are sent to a Discord webhook but can be easily reconfigured for other platforms.
11<img src="https://imagedelivery.net/iHX6Ovru0O7AjmyT5yZRoA/85912106-f625-443e-5321-6e2699453200/public" width="500"/>
12To see exactly how we use this template at Val Town: https://www.val.town/x/stevekrouse/twitterAlert
13
16### 1. Fork this Val
17To use this template, fork this val on the top right corner of this page.
18![Screenshot 2025-01-10 at 1.22.10 PM.png](https://imagedelivery.net/iHX6Ovru0O7AjmyT5yZRoA/c4ae349d-7e28-4378-8646-21c8958e1f00/public)
19
20### 2. View Source Code
21<em>The `CODE` box shows you the the full source code of this val, you may need to scroll down to see it.</em>
22![image.png](https://imagedelivery.net/iHX6Ovru0O7AjmyT5yZRoA/6a4dabb4-3b27-4cea-fce3-95a1a1c3cd00/public)
23
24### 3. Customize Query

1# ☔️ Umbrella reminder if there's rain today
2
3![Screenshot 2023-09-14 at 12.31.32.png](https://imagedelivery.net/iHX6Ovru0O7AjmyT5yZRoA/d82916ca-f8d9-4b49-88c6-420ab67a7700/public)
4
5## Setup

26    "title": "Markdown Editor",
27    "code":
28      "<!DOCTYPE html>\n<html lang=\"en\">\n<head>\n    <meta charset=\"UTF-8\">\n    <meta http-equiv=\"X-UA-Compatible\" content=\"IE=edge\">\n    <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\">\n    <title>Markdown Editor</title>\n    <link href=\"https://cdn.jsdelivr.net/npm/tailwindcss@2.2.19/dist/tailwind.min.css\" rel=\"stylesheet\">\n</head>\n<body class=\"bg-white\">\n    <div class=\"max-w-full mx-auto p-4 pt-6 md:p-6 lg:p-8\">\n        <h1 class=\"text-3xl text-center mb-4\">Markdown Editor</h1>\n        <div class=\"flex flex-row\">\n            <div class=\"editor p-4 rounded-lg border border-gray-200 w-full md:w-1/2\">\n                <textarea id=\"editor\" class=\"w-full h-screen p-2 border border-gray-200 rounded-lg\" placeholder=\"Type your Markdown here...\"></textarea>\n            </div>\n            <div class=\"preview p-4 rounded-lg border border-gray-200 w-full md:w-1/2 ml-2 md:ml-4 lg:ml-8\">\n                <div id=\"preview\"></div>\n            </div>\n        </div>\n        <p class=\"text-center mt-4\">Built on <a href=\"https://cerebrascoder.com\">Cerebras Coder</a></p>\n    </div>\n\n    <script>\n        const editor = document.getElementById('editor');\n        const preview = document.getElementById('preview');\n\n        // Initialize textarea with default markdown\n        const defaultMarkdown = `\n# Introduction to Markdown\nMarkdown is a lightweight markup language that is easy to read and write. It is often used for formatting text in plain text editors, chat applications, and even web pages.\n\n## Headers\nHeaders are denoted by the # symbol followed by a space. The number of # symbols determines the level of the header:\n# Heading 1\n## Heading 2\n### Heading 3\n\n## Emphasis\nYou can use emphasis to make your text **bold** or *italic*:\n*Italics*\n**Bold**\n\n## Lists\nYou can use lists to organize your text:\n* Item 1\n* Item 2\n* Item 3\nOr\n1. Item 1\n2. Item 2\n3. Item 3\n\n## Links\nYou can use links to reference external resources:\n[Google](https://www.google.com)\n\n## Images\nYou can use images to add visual content:\n![Markdown Logo](https://upload.wikimedia.org/wikipedia/commons/thumb/4/48/Markdown-mark.svg/208px-Markdown-mark.svg.png)\n`;\n        editor.value = defaultMarkdown;\n\n        // Update preview on input\n        editor.addEventListener('input', () => {\n            const markdown = editor.value;\n            const html = markdownToHtml(markdown);\n            preview.innerHTML = html;\n        });\n\n        // Initialize preview with default markdown\n        const defaultHtml = markdownToHtml(defaultMarkdown);\n        preview.innerHTML = defaultHtml;\n\n        // Function to convert Markdown to HTML\n        function markdownToHtml(markdown) {\n            // Bold\n            markdown = markdown.replace(/\\*\\*(.*?)\\*\\*/g, '<b>$1</b>');\n\n            // Italic\n            markdown = markdown.replace(/\\*(.*?)\\*/g, '<i>$1</i>');\n\n            // Links\n            markdown = markdown.replace(/\\[(.*?)\\]\\((.*?)\\)/g, '<a href=\"$2\">$1</a>');\n\n            // Images\n            markdown = markdown.replace(/!\\[(.*?)\\]\\((.*?)\\)/g, '<img src=\"$2\" alt=\"$1\">');\n\n            // Headings\n            markdown = markdown.replace(/(^#{1,6} )(.*)/gm, (match, level, text) => {\n                return `<h${level.length}>${text}</h${level.length}>`;\n            });\n\n            // Lists\n            markdown = markdown.replace(/^(\\*|\\d+\\.) (.*)/gm, (match, marker, text) => {\n                if (marker.startsWith('*')) {\n                    return `<li>${text}</li>`;\n                } else {\n                    return `<li>${text}</li>`;\n                }\n            });\n\n            // Line breaks\n            markdown = markdown.replace(/\\n/g, '<br>');\n\n            // Fix for nested lists\n            markdown = markdown.replace(/<li><li>/g, '<li>');\n            markdown = markdown.replace(/<\\/li><\\/li>/g, '</li>');\n\n            // Wrap lists in ul\n            markdown = markdown.replace(/(<li>.*<\\/li>)/g, '<ul>$1</ul>');\n\n            return markdown;\n        }\n    </script>\n</body>\n</html>",
29    "performance": {
30      "tokensPerSecond": 4092.96,