Val Town Code SearchReturn to Val Town

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
56    branch_id: branchId,
57    val_id: project.id,
58    num_images: images?.length || 0,
59    model,
60  });
66  let coreMessages = convertToCoreMessages(messages);
67
68  // If there are images, we need to add them to the last user message
69  if (images && Array.isArray(images) && images.length > 0) {
70    // Find the last user message
71    const lastUserMessageIndex = coreMessages.findIndex(
89      };
90
91      // Add each image to the content array using the correct ImagePart format
92      for (const image of images) {
93        if (image && image.url) {
94          // Extract mime type from data URL if available
95          let mimeType = undefined;
96          if (image.url.startsWith("data:")) {
97            const matches = image.url.match(/^data:([^;]+);/);
98            if (matches && matches.length > 1) {
99              mimeType = matches[1];
102
103          newUserMessage.content.push({
104            type: "image",
105            image: image.url,
106            mimeType,
107          });

73  </div>
74    
75    <!-- Single Step: Camera/Image Capture + Question -->
76    <div class="bg-white rounded-[32px] card-washed-shadow ">
77      <div class="camera-container mb-4">
84          :disabled="isProcessing"
85          class="bg-gray-200 text-black px-4 py-2 rounded-xl hover:bg-gray-300 focus:outline-none focus:ring-2 focus:ring-gray-400">
86          <span class="text-xs font-mono" x-show="!isProcessing">Analyze the Quiz Image!</span>
87          <span class="text-xs font-mono" x-show="isProcessing">Processing...</span>
88        </button>
107      <div x-show="isProcessing" class="flex flex-col items-center justify-center py-8">
108        <div class="loading-spinner mb-4"></div>
109        <p class="text-gray-600 font-mono">Processing image and answering...</p>
110      </div>
111      
171            canvas.height = videoElement.videoHeight;
172            const context = canvas.getContext('2d');
173            context.drawImage(videoElement, 0, 0, canvas.width, canvas.height);
174            const blob = await new Promise(resolve => canvas.toBlob(resolve, 'image/jpeg'));
175            const formData = new FormData();
176            formData.append('image_input', blob);
177
178            const response = await fetch('/api/ask', {
188            this.totalTime = data.totalTime;
189          } catch (error) {
190            alert('Error processing image and question. Please try again.');
191          } finally {
192            this.isProcessing = false;
216  try {
217    const formData = await c.req.formData();
218    const imageFile = formData.get('image_input');
219
220    if (!imageFile || !(imageFile instanceof Blob)) {
221      return c.json({ error: 'No image file provided' }, 400);
222    }
223
224    // Convert blob to base64
225    const arrayBuffer = await imageFile.arrayBuffer();
226    const bytes = new Uint8Array(arrayBuffer);
227    const base64Image = uint8ToBase64(bytes);
228
229    // Step 1: OCR
236        {
237          role: 'system',
238          content: 'You are an expert OCR (Optical Character Recognition) assistant. Your task is to extract ALL text from the provided image. Return ONLY the extracted text without any commentary, introductions, or explanations - just the raw text content that you see in the image, preserving paragraph structure when possible.'
239        },
240        {
243            {
244              type: 'text',
245              text: 'Extract all text from this image. Return only the extracted text without any additional commentary.'
246            },
247            {
248              type: 'image_url',
249              image_url: {
250                url: `data:image/jpeg;base64,${base64Image}`
251              }
252            }

3
4// Функция для работы с API Gemini
5async function geminiImageAnalysis(base64Image: string | null, prompt: string) {
6  const GEMINI_API_KEY = Deno.env.get("GEMINI_API_KEY");
7
20        body: JSON.stringify({
21          contents: [{
22            parts: base64Image
23              ? [
24                { text: prompt },
25                {
26                  inlineData: {
27                    mimeType: "image/jpeg",
28                    data: base64Image,
29                  },
30                },
170Входящее сообщение: ${text}`;
171
172    const response = await geminiImageAnalysis(null, contextualPrompt);
173    console.log("Ответ на текстовое сообщение:", response.slice(0, 200));
174
181
182// Обработка изображений
183async function processImageMessage(imageBuffer: ArrayBuffer): Promise<string[]> {
184  try {
185    if (!imageBuffer || imageBuffer.byteLength === 0) {
186      return ["Изображение не было корректно загружено."];
187    }
188
189    // Конвертация изображения в base64
190    const uint8Array = new Uint8Array(imageBuffer);
191    const chunks = [];
192    const chunkSize = 8192;
196    }
197
198    const base64Image = btoa(chunks.join(""));
199
200    const prompt = `Ты профессиональный репетитор. 
218Важно: объясняй максимально просто и понятно для ученика 5-9 класса!`;
219
220    const solution = await geminiImageAnalysis(base64Image, prompt);
221    return splitLongText(solution);
222  } catch (error) {
242        4. Если вопрос не задан, сделай общий обзор содержания`;
243
244    const response = await geminiImageAnalysis(base64Pdf, contextPrompt);
245    return splitLongText(response);
246  } catch (error) {
366    if (photo && photo.length > 0) {
367      const largestPhoto = photo[photo.length - 1];
368      const imageBuffer = await downloadTelegramFile(largestPhoto.file_id);
369
370      if (imageBuffer) {
371        const responseParts = await processImageMessage(imageBuffer);
372        for (const part of responseParts) {
373          await sendTelegramMessage(chatId, part);
377
378    // Обработка изображений в формате документа
379    if (document && (document.mime_type === "image/jpeg" || document.mime_type === "image/png")) {
380      const imageBuffer = await downloadTelegramFile(document.file_id);
381
382      if (imageBuffer) {
383        const responseParts = await processImageMessage(imageBuffer);
384        for (const part of responseParts) {
385          await sendTelegramMessage(chatId, part);

3It's common to have code and types that are needed on both the frontend and the backend. It's important that you write this code in a particularly defensive way because it's limited by what both environments support:
4
5![shapes at 25-02-25 11.57.13.png](https://imagedelivery.net/iHX6Ovru0O7AjmyT5yZRoA/75db1d51-d9b3-45e0-d178-25d886c10700/public)
6
7For example, you *cannot* use the `Deno` keyword. For imports, you can't use `npm:` specifiers, so we reccomend `https://esm.sh` because it works on the server & client. You *can* use TypeScript because that is transpiled in `/backend/index.ts` for the frontend. Most code that works on the frontend tends to work in Deno, because Deno is designed to support "web-standards", but there are definitely edge cases to look out for.

21## `favicon.svg`
22
23As of this writing Val Town only supports text files, which is why the favicon is an SVG and not an .ico or any other binary image format. If you need binary file storage, check out [Blob Storage](https://docs.val.town/std/blob/).
24
25## `components/`

6    <title>React Hono Val Town Starter</title>
7    <link rel="stylesheet" href="/public/style.css">
8    <link rel="icon" href="/public/favicon.svg" sizes="any" type="image/svg+xml">
9  </head>
10  <body>

6    <title>React Hono Val Town Starter</title>
7    <link rel="stylesheet" href="/frontend/style.css">
8    <link rel="icon" href="/frontend/favicon.svg" type="image/svg+xml">
9  </head>
10  <body>

6    <title>React Hono Val Town Starter</title>
7    <link rel="stylesheet" href="/frontend/style.css">
8    <link rel="icon" href="/frontend/favicon.svg" type="image/svg+xml">
9  </head>
10  <body>

3_It's a tool that sends a daily email that shows everyone who you follow on Bluesky who has updated their profile in the last day. You can Remix it on Val Town (this website), tweak a few environnment variables, and it'll be yours!_ Here's what an email looks like with a person's description update:
4
5![CleanShot 2025-05-16 at 14.12.46@2x.png](https://imagedelivery.net/iHX6Ovru0O7AjmyT5yZRoA/bf137c7d-be26-4bc8-ff5e-78399c22b200/public)
6
7## Setup

3View and interact with your Val Town SQLite data. It's based off Steve's excellent [SQLite Admin](https://www.val.town/v/stevekrouse/sqlite_admin?v=46) val, adding the ability to run SQLite queries directly in the interface. This new version has a revised UI and that's heavily inspired by [LibSQL Studio](https://github.com/invisal/libsql-studio) by [invisal](https://github.com/invisal). This is now more an SPA, with tables, queries and results showing up on the same page. 
4
5![image.webp](https://imagedelivery.net/iHX6Ovru0O7AjmyT5yZRoA/c8e102fd-39ca-4bfb-372a-8d36daf43900/public)
6
7## Install