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}

22const VISUAL_ANALYZER_PROMPT = `
23You are a master drywall inspector with expertise in diagnosing material failures and environmental defects.
24You will be provided with an image of a drywall problem.
25Analyze the image to identify the issue, its likely cause, and the correct method for repair.
26
27You MUST respond ONLY with a single, minified JSON object with four keys: "diagnosis", "probable_cause", "repair_protocol", and "materials_required".
190  }
191  #file-upload-label:hover { border-color: var(--accent-color); }
192  #image-preview {
193    max-width: 100%;
194    max-height: 200px;
342          <div class="form-group">
343            <label for="file-upload" id="file-upload-label">Tap to Upload Photo of Defect</label>
344            <input type="file" id="file-upload" accept="image/*" style="display:none;" required>
345            <img id="image-preview" style="display:none;">
346          </div>
347          <button type="submit" class="btn-submit">Analyze Defect</button>
419  const loader = $('#loader');
420
421  let currentImageBase64 = null;
422
423  function switchView(viewId) {
470              contentHTML += \`<div class="justification-box"><strong>Justification:</strong> \${data.justification}</div>\`;
471              break;
472          case 'analyzeImage':
473              contentHTML = '<h3>Defect Analysis</h3>';
474              contentHTML += \`<p><strong>Diagnosis:</strong> \${data.diagnosis}</p>\`;
532  $('#form-analyzer').addEventListener('submit', (e) => {
533    e.preventDefault();
534    if (!currentImageBase64) {
535      alert('Please select an image first.');
536      return;
537    }
538    const payload = { image: currentImageBase64 };
539    handleApiRequest('analyzeImage', payload, $('#results-analyzer'));
540  });
541  
562  });
563  
564  // Image Upload Handler
565  $('#file-upload').addEventListener('change', (e) => {
566    const file = e.target.files[0];
569    const reader = new FileReader();
570    reader.onload = (event) => {
571      const img = $('#image-preview');
572      img.src = event.target.result;
573      img.style.display = 'block';
574      // Store just the base64 part
575      currentImageBase64 = event.target.result.split(',')[1];
576      $('#file-upload-label').textContent = file.name;
577    };
623          break;
624
625        case "analyzeImage":
626          if (!body.image) {
627            throw new Error("Image data is missing from the request.");
628          }
629          messages.push(
634                { type: "text", text: "Analyze this drywall defect." },
635                {
636                  type: "image_url",
637                  image_url: {
638                    url: `data:image/jpeg;base64,${body.image}`,
639                  },
640                },

168
169### Overlay
170- **Best for**: Modals, dialogs, forms, image viewers
171- **Config**: `modal: true/false`, `backdrop: true/false`, `position: 'center'|'top'|'bottom'`
172- **Size**: Use `maxWidth`, `maxHeight` for responsive design

1html,
2header {
3  background-image: url("https://cdn.glitch.global/63c872e5-8f6b-4b1a-b13d-3bd869977d11/notebook_background.png?v=1729196634939");
4  background-repeat: no-repeat;
5  background-size: 1000px;

143    this.y = y;
144    // this.rot = 0.7;
145    this.img = loadImage(url);
146    this.width = width;
147    this.height = height;
150  display() {
151    push();
152    imageMode(CENTER);
153    translate(this.x, this.y);
154    image(this.img, 0, 0, this.width, this.height);
155    pop();
156  }