Val Town Code SearchReturn to Val Town

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

747  background-color: var(--highlight);
748}
749.card-image {
750  display: flex;
751  align-items: center;
774}
775
776.image-placeholder,
777.image-thumbnail {
778  flex-shrink: 0;
779  width: 40px;
782  object-fit: cover;
783}
784.image-placeholder {
785  background-color: var(--muted);
786}
793}
794
795.image-row {
796  display: flex;
797  gap: var(--space-1);
798}
799.input-image {
800  position: relative;
801  border: 1px solid var(--muted);
802  border-radius: 6px;
803}
804.remove-image-button {
805  position: absolute;
806  top: 0;
815  opacity: 0;
816}
817.input-image:hover .remove-image-button {
818  opacity: 1;
819}
820
821.image-drop-overlay {
822  position: fixed;
823  top: 0;
832  justify-content: center;
833}
834.image-drop-inner {
835  padding: var(--space-2);
836  background-color: var(--background);
837}
838
839.transition, .input-box, .icon-button, .button, .remove-image-button {
840  transition-property: color, background-color, border-color, opacity;
841  transition-duration: 200ms;

26  }
27
28  const { messages, project, branchId, anthropicApiKey, selectedFiles, images } = await c.req.json();
29
30  // do we want to allow user-provided tokens still
48    branch_id: branchId,
49    val_id: project.id,
50    num_images: images?.length || 0,
51    model: "claude-3-7-sonnet-20250219",
52  });
58  let coreMessages = convertToCoreMessages(messages);
59
60  // If there are images, we need to add them to the last user message
61  if (images && Array.isArray(images) && images.length > 0) {
62    // Find the last user message
63    const lastUserMessageIndex = coreMessages.findIndex(
81      };
82
83      // Add each image to the content array using the correct ImagePart format
84      for (const image of images) {
85        if (image && image.url) {
86          // Extract mime type from data URL if available
87          let mimeType = undefined;
88          if (image.url.startsWith("data:")) {
89            const matches = image.url.match(/^data:([^;]+);/);
90            if (matches && matches.length > 1) {
91              mimeType = matches[1];
94
95          newUserMessage.content.push({
96            type: "image",
97            image: image.url,
98            mimeType,
99          });

18      SUM(cache_write_tokens) as total_cache_write_tokens,
19      SUM(price) as total_price,
20      SUM(num_images) as total_images
21    FROM ${USAGE_TABLE}
22    WHERE our_api_token = 1
101          total_cache_write_tokens: userData.cache_write_tokens,
102          total_price: userData.price,
103          total_images: 0,
104          used_inference_data: true
105        });

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("")}

16  price: number | null;
17  finish_reason: string | null;
18  num_images: number | null;
19  our_api_token: number;
20}
191              <th>Price</th>
192              <th>Finish</th>
193              <th>Images</th>
194              <th>Our API</th>
195            </tr>
215                <td class="price">${formatPrice(row.price)}</td>
216                <td>${row.finish_reason || '-'}</td>
217                <td>${formatNumber(row.num_images)}</td>
218                <td>${formatBoolean(row.our_api_token)}</td>
219              </tr>

109  model,
110  our_api_token,
111  num_images,
112}: {
113  bearerToken: string;
116  model: string;
117  our_api_token: boolean;
118  num_images: number;
119}) {
120  const user = await getUser(bearerToken);
128      model,
129      our_api_token,
130      num_images
131      ) VALUES (?, ?, ?, ?, ?, ?, ?, ?)
132      `,
139      model,
140      our_api_token ? 1 : 0,
141      num_images,
142    ],
143  );

18  price?: number;
19  finish_reason?: string;
20  num_images?: number;
21  our_api_token: boolean;
22}
43      price REAL,
44      finish_reason TEXT,
45      num_images INTEGER,
46      our_api_token INTEGER NOT NULL,
47      finish_timestamp INTEGER

29  - [x] File write as a code embed
30  - [x] str_replace as a diff view
31- [x] make image drop area invisible and bigger
32- [x] Give it all the code (except maybe .txt files) as initial context (like cursor sonnet max)
33- [x] I seem to have lost the delete file tool and instructions, try to find them back in history or re-create?
55- [x] Create branch
56- [x] URL input + pathname
57- [x] Image upload controls
58- [x] Preview refresh button
59- [x] Audio controls

1// Global variables
2let currentWebsiteId = null;
3let currentImageKey = null;
4let websites = [];
5let users = [];
7
8// DOM elements
9const imageUpload = document.getElementById('imageUpload');
10const previewImg = document.getElementById('previewImg');
11const selectImageBtn = document.getElementById('selectImageBtn');
12const websiteUrl = document.getElementById('websiteUrl');
13const isActive = document.getElementById('isActive');
42// Set up all event listeners
43function setupEventListeners() {
44  // Image upload
45  selectImageBtn.addEventListener('click', () => {
46    imageUpload.click();
47  });
48  
49  imageUpload.addEventListener('change', handleImageUpload);
50  
51  // Form inputs
61}
62
63// Handle image upload
64async function handleImageUpload(event) {
65  const file = event.target.files[0];
66  if (!file) return;
75  // Upload to server
76  const formData = new FormData();
77  formData.append('image', file);
78  
79  try {
80    const response = await fetch('/api/upload-image', {
81      method: 'POST',
82      body: formData
86    
87    if (result.success) {
88      currentImageKey = result.key;
89      markAsDirty();
90    } else {
91      alert('Error uploading image: ' + result.error);
92    }
93  } catch (error) {
94    console.error('Error uploading image:', error);
95    alert('Error uploading image. Please try again.');
96  }
97}
174    const tdLogo = document.createElement('td');
175    const img = document.createElement('img');
176    img.src = website.image_key ? `/api/image/${website.image_key}` : '/frontend/placeholder.jpg';
177    img.alt = 'Logo';
178    img.style.width = '100px';
251    // Set current website ID
252    currentWebsiteId = website.id;
253    currentImageKey = website.image_key;
254    
255    // Populate form
256    if (website.image_key) {
257      previewImg.src = `/api/image/${website.image_key}`;
258    } else {
259      previewImg.src = '/frontend/placeholder.jpg';
297    const data = {
298      id: currentWebsiteId,
299      image_key: currentImageKey,
300      url: websiteUrl.value.trim(),
301      is_active: isActive.checked,
382function resetForm() {
383  currentWebsiteId = null;
384  currentImageKey = null;
385  
386  previewImg.src = '/frontend/placeholder.jpg';