Val Town Code SearchReturn to Val Town

4  <meta charset="UTF-8">
5  <meta name="viewport" content="width=device-width, initial-scale=1.0">
6  <title>AI Image Recognition</title>
7  <!-- TailwindCSS -->
8  <script src="https://cdn.twind.style" crossorigin></script>
29  <div class="container mx-auto px-4 py-8 max-w-4xl">
30    <header class="text-center mb-8">
31      <h1 class="text-3xl font-bold text-blue-600 mb-2">AI Image Recognition</h1>
32      <p class="text-gray-600">Enter an image URL to get an AI-powered description</p>
33    </header>
34    
35    <main class="bg-white rounded-lg shadow-md p-6">
36      <div class="mb-6">
37        <label for="imageUrl" class="block text-sm font-medium text-gray-700 mb-2">Image URL</label>
38        <div class="flex">
39          <input 
40            type="text" 
41            id="imageUrl" 
42            placeholder="https://example.com/image.jpg" 
43            class="flex-1 rounded-l-md border border-gray-300 px-4 py-2 focus:outline-none focus:ring-2 focus:ring-blue-500"
44          >
50          </button>
51        </div>
52        <p class="mt-1 text-sm text-gray-500">Paste a direct link to an image (JPG, PNG, etc.)</p>
53      </div>
54      
55      <div id="previewContainer" class="mb-6 hidden">
56        <h2 class="text-lg font-medium text-gray-800 mb-2">Image Preview</h2>
57        <div class="flex justify-center bg-gray-100 rounded-md p-2">
58          <img id="imagePreview" src="" alt="Preview" class="max-h-64 rounded">
59        </div>
60      </div>
62      <div id="loadingContainer" class="mb-6 hidden text-center py-4">
63        <div class="loading-spinner mr-2"></div>
64        <span class="text-gray-600">Analyzing image...</span>
65      </div>
66      
87  <script>
88    // DOM elements
89    const imageUrlInput = document.getElementById('imageUrl');
90    const analyzeBtn = document.getElementById('analyzeBtn');
91    const previewContainer = document.getElementById('previewContainer');
92    const imagePreview = document.getElementById('imagePreview');
93    const loadingContainer = document.getElementById('loadingContainer');
94    const resultContainer = document.getElementById('resultContainer');
98    
99    // Event listeners
100    imageUrlInput.addEventListener('input', updatePreview);
101    analyzeBtn.addEventListener('click', analyzeImage);
102    
103    // Handle Enter key in the input field
104    imageUrlInput.addEventListener('keydown', (e) => {
105      if (e.key === 'Enter') {
106        analyzeImage();
107      }
108    });
109    
110    // Update image preview when URL changes
111    function updatePreview() {
112      const imageUrl = imageUrlInput.value.trim();
113      
114      if (imageUrl) {
115        imagePreview.src = imageUrl;
116        previewContainer.classList.remove('hidden');
117        
118        // Handle image load errors
119        imagePreview.onerror = () => {
120          previewContainer.classList.add('hidden');
121        };
125    }
126    
127    // Analyze the image using the API
128    async function analyzeImage() {
129      const imageUrl = imageUrlInput.value.trim();
130      
131      if (!imageUrl) {
132        showError('Please enter an image URL');
133        return;
134      }
146            'Content-Type': 'application/json',
147          },
148          body: JSON.stringify({ imageUrl }),
149        });
150        

1# AI Image Recognition App
2
3This Val Town app uses OpenAI's Vision API to analyze images and provide descriptions of their content.
4
5## Features
6
7- Submit image URLs for AI analysis
8- Get detailed descriptions of image content
9- Simple, user-friendly interface
10
17
181. Visit the app URL
192. Enter an image URL in the input field
203. Click "Analyze Image"
214. View the AI-generated description of the image
22
23## Technologies Used

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

7  branchId: string | undefined;
8  selectedFiles: string[];
9  images: (string | null)[];
10  soundEnabled: boolean;
11}
17  // bearerToken,
18  selectedFiles,
19  images,
20  soundEnabled,
21}: UseChatLogicProps) {
40      branchId,
41      selectedFiles,
42      images: images
43        .filter((img): img is string => {
44          const isValid = typeof img === "string" && img.startsWith("data:");
45          if (!isValid && img !== null) {
46            console.warn(
47              "Invalid image format:",
48              img?.substring(0, 50) + "..."
49            );

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

172
173- **Redirects:** Use `return new Response(null, { status: 302, headers: { Location: "/place/to/redirect" }})` instead of `Response.redirect` which is broken
174- **Images:** Avoid external images or base64 images. Use emojis, unicode symbols, or icon fonts/libraries instead
175- **AI Image:** To inline generate an AI image use: `<img src="https://maxm-imggenurl.web.val.run/the-description-of-your-image" />`
176- **Storage:** DO NOT use the Deno KV module for storage
177- **Browser APIs:** DO NOT use the `alert()`, `prompt()`, or `confirm()` methods

782  background-color: var(--highlight);
783}
784.card-image {
785  display: flex;
786  align-items: center;
809}
810
811.image-placeholder,
812.image-thumbnail {
813  flex-shrink: 0;
814  width: 40px;
817  object-fit: cover;
818}
819.image-placeholder {
820  background-color: var(--muted);
821}
828}
829
830.image-row {
831  display: flex;
832  gap: var(--space-1);
833}
834.input-image {
835  position: relative;
836  border: 1px solid var(--muted);
837  border-radius: 6px;
838}
839.remove-image-button {
840  position: absolute;
841  top: 0;
850  opacity: 0;
851}
852.input-image:hover .remove-image-button {
853  opacity: 1;
854}
855
856.image-drop-overlay {
857  position: fixed;
858  top: 0;
867  justify-content: center;
868}
869.image-drop-inner {
870  padding: var(--space-2);
871  background-color: var(--background);
872}
873
874.transition, .input-box, .icon-button, .button, .remove-image-button {
875  transition-property: color, background-color, border-color, opacity;
876  transition-duration: 200ms;

33  }
34
35  const { messages, project, branchId, anthropicApiKey, selectedFiles, images } = await c.req.json();
36
37  // do we want to allow user-provided tokens still
63    branch_id: branchId,
64    val_id: project.id,
65    num_images: images?.length || 0,
66    model: "claude-3-7-sonnet-20250219",
67  });
73  let coreMessages = convertToCoreMessages(messages);
74
75  // If there are images, we need to add them to the last user message
76  if (images && Array.isArray(images) && images.length > 0) {
77    // Find the last user message
78    const lastUserMessageIndex = coreMessages.findIndex(
96      };
97
98      // Add each image to the content array using the correct ImagePart format
99      for (const image of images) {
100        if (image && image.url) {
101          // Extract mime type from data URL if available
102          let mimeType = undefined;
103          if (image.url.startsWith("data:")) {
104            const matches = image.url.match(/^data:([^;]+);/);
105            if (matches && matches.length > 1) {
106              mimeType = matches[1];
109
110          newUserMessage.content.push({
111            type: "image",
112            image: image.url,
113            mimeType,
114          });

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

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>