Groq Vision OCR & Compound Beta App

[{"_1":2,"_3":-5,"_4":-5},"loaderData",{"_5":6,"_7":8,"_9":10},"actionData","errors","root",{"_154":155,"_156":157},"routes/_app.x.$handle.$name",{"_95":94,"_32":45,"_103":85,"_27":104,"_13":14,"_105":-5,"_11":106,"_107":108,"_109":110,"_111":112,"_113":114,"_20":-5,"_115":-5,"_116":-5,"_117":25,"_118":119,"_120":57,"_121":-5,"_122":-5,"_123":124},"routes/_app.x.$handle.$name.branch.$branch.version.$version.diff",{"_11":12,"_13":14,"_15":16,"_17":-5,"_18":-5},"project",{"_43":44,"_32":45,"_38":46,"_47":-5,"_48":25,"_49":50,"_51":50,"_52":-5,"_53":-5,"_18":54,"_55":31,"_56":57,"_58":-5,"_59":-5,"_60":61,"_62":63,"_64":-5,"_65":-5,"_66":-5,"_67":-5,"_68":69,"_70":69,"_71":72,"_73":72,"_74":72,"_75":69,"_76":69,"_77":78,"_79":80,"_81":82,"_83":25},"version",4,"changes",[19],"aiChatInfo","userId",{"_20":21,"_22":23,"_24":25,"_26":25,"_27":28,"_29":28},"file",{"_30":31,"_32":28,"_33":34,"_35":37,"_38":39,"_40":14,"_41":42,"_24":25},"previous",{"_30":31,"_32":28,"_33":34,"_35":36},"deleted",false,"deletedHere","path","main.tsx","latestPath","fileId","9c0fd0d0-371b-11f0-8bf9-9e149126039e","name","fileType","http","content","import { Hono } from 'https://deno.land/x/hono@v3.11.12/mod.ts';\nimport { serve } from 'https://deno.land/std@0.190.0/http/server.ts';\nimport \"jsr:@std/dotenv/load\"; // needed for deno run; not req for smallweb or valtown\nimport Groq from \"npm:groq-sdk\";\nimport { marked } from \"npm:marked\";\n\n// Helper function to convert Uint8Array to base64\nfunction uint8ToBase64(bytes) {\n let binary = '';\n for (let i = 0; i < bytes.length; i++) {\n binary += String.fromCharCode(bytes[i]);\n }\n return btoa(binary);\n}\n\nconst app = new Hono();\nconst groq = new Groq({ apiKey: Deno.env.get(\"GROQ_API_KEY\") });\n\n// HTML content (inline)\nconst htmlContent = `\n\n\n \n \n Groq Vision OCR & Compound Beta App\n \n \n \n \n\n\n

\n\n

\n High Quality Trivia Assistant\n

\n \n \n

\n \n

\n\n \n

\n \n \n \n \n

\n \n

Processing image and answering...

\n \n \n

\n\n

\n High Quality Trivia Assistant\n

\n \n \n

\n \n

\n\n \n

\n \n \n \n \n

\n \n

Processing image and answering...

\n \n \n

\n\n \n\n`;\n\n// Serve root with HTML content\napp.get('/', (c) => {\n return c.html(htmlContent);\n});\n\n\n// API endpoint for combining OCR and Compound Beta\napp.post('/api/ask', async (c) => {\n try {\n const formData = await c.req.formData();\n const imageFile = formData.get('image_input');\n\n if (!imageFile || !(imageFile instanceof Blob)) {\n return c.json({ error: 'No image file provided' }, 400);\n }\n\n // Convert blob to base64\n const arrayBuffer = await imageFile.arrayBuffer();\n const bytes = new Uint8Array(arrayBuffer);\n const base64Image = uint8ToBase64(bytes);\n\n // Step 1: OCR\n console.log('OCRing...');\n const ocrStart = Date.now();\n const ocrResponse = await groq.chat.completions.create({\n model: 'meta-llama/llama-4-scout-17b-16e-instruct',\n // model: 'meta-llama/llama-4-maverick-17b-128e-instruct',\n messages: [\n {\n role: 'system',\n 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.'\n },\n {\n role: 'user',\n content: [\n {\n type: 'text',\n text: 'Extract all text from this image. Return only the extracted text without any additional commentary.'\n },\n {\n type: 'image_url',\n image_url: {\n url: `data:image/jpeg;base64,${base64Image}`\n }\n }\n ]\n }\n ],\n temperature: 0.2\n });\n const ocrEnd = Date.now();\n const ocrTime = (ocrEnd - ocrStart) / 1000; // seconds\n\n const extractedText = ocrResponse.choices[0].message.content;\n console.log('OCRed text:', extractedText);\n\n let answer, html;\n let userPrompt, systemPrompt;\n\n systemPrompt = `You are a helpful quiz assistant. Only show you answer as ANSWER: — don't describe your thought process.\nAlways select your answer from the provided choices in the text, making your best guess if it's not clear. \nNever answer \"not above\", \"none of the above\", or similar unless that is explicitly one of the options. \nReturn only the answer choice (e.g., \"B. Paris\" or \"True\" or \"42\"), with no extra commentary.\nIf it is NOT A QUIZ QUESTION, then just summarize or describe the following text as concisely as possible`;\n userPrompt = `ONLY ANSWER THE QUESTION WITH THE RIGHT ANSWER. Pick the best answer from the choices in this question: ${extractedText}, and start your answer with \"ANSWER:\".`;\n\n const answerStart = Date.now();\n const searchResponse = await groq.chat.completions.create({\n // model: 'compound-beta-mini',\n model: 'compound-beta',\n messages: [\n {\n role: 'system',\n content: systemPrompt\n },\n {\n role: 'user',\n content: userPrompt\n }\n ],\n temperature: 0.3\n });\n const answerEnd = Date.now();\n const answerTime = (answerEnd - answerStart) / 1000; // seconds\n\n answer = searchResponse.choices[0].message.content;\n console.log('Answer:', answer);\n\n html = marked(answer);\n\n // Total roundtrip time (from start of OCR to end of answer)\n const totalTime = (answerEnd - ocrStart) / 1000;\n\n return c.json({ \n text: answer, \n html, \n extractedText, \n ocrTime, \n answerTime, \n totalTime \n });\n } catch (error) {\n console.error('Server error:', error);\n return c.json({ error: 'Server error: ' + error.message }, 500);\n }\n});\n\n// Export app.fetch for Val Town, otherwise export app — this is only for hono apps\nexport default (typeof Deno !== \"undefined\" && Deno.env.get(\"valtown\")) ? app.fetch : app;","createdAt",["D",1747929274624],"branchVersion","branchId","9c0e8ea0-371b-11f0-8bf9-9e149126039e","id","9c0e5dea-371b-11f0-8bf9-9e149126039e","hqtrivial",["D",1747925217029],"deletedAt","legacyEnvVars","privacy","public","httpPrivacy","description","imageUrl","a8270e74-6479-475a-8025-9b69544ee0e7","pinnedFileId","pinPreview",true,"pinMigrated","screenshotVersion","likeCount",0,"orgId","8319defa-6e1a-46d4-ba66-2114ffd3360b","tursoName","tursoHostname","tursoMeasuredAt","pinned","userPerm","r","valPerm","blobPerm","rw","emailPerm","sqlitePerm","projectPerm","telemetryPerm","user",{"_95":94,"_102":98},"org",{"_95":94,"_96":-5,"_97":98,"_18":54,"_99":100,"_101":25},"branch",{"_13":84,"_32":85,"_43":42,"_86":44,"_87":-5,"_88":-5,"_89":-5,"_90":-5,"_91":-5,"_92":45,"_93":94},"isOwned",5,"main","projectId","forkedBranchId","forkedBranchVersion","forkedProjectPrivacy","forkedProjectId","forkedProjectOrgId","projectName","userHandle","yawnxyz","handle","displayName","avatar","https://images.clerk.dev/oauth_github/img_2NnaHhpxNuH1xWRIRjQNoo16TVc.jpeg","tier","pro","canRestrictVals","profileImageUrl","branchName","","adoptOrgId",{"_43":44,"_32":45,"_38":150,"_47":-5,"_48":25,"_49":50,"_51":50,"_52":-5,"_53":-5,"_18":54,"_55":31,"_56":57,"_58":-5,"_59":-5,"_60":61,"_62":63,"_64":-5,"_65":-5,"_66":-5,"_67":-5,"_68":69,"_70":69,"_71":72,"_73":72,"_74":72,"_75":69,"_76":69,"_77":151,"_79":152,"_81":153,"_83":25},"tree",[145],"files",[145],"counts",{"_134":61,"_135":136,"_137":61,"_138":139,"_140":141},"contents",[125],"upstreamProject","upstreamBranch","emptyEnvVars","flags",[],"hasHttpFiles","grants","orgs","customDomains",{},{"_43":126,"_32":28,"_30":31,"_127":-5,"_41":42,"_40":14,"_128":25,"_38":129,"_13":130,"_33":34,"_35":37,"_24":25,"_131":132,"_27":133},"0e92de8c-3725-11f0-828d-9e149126039e","parentId","latest",["D",1747929274624],3,"label","hqtrivia",[28],"pulls","branches",1,"forks","envVars",{"_142":136,"_144":61},"connections",{"_142":61,"_143":61},"count","unfilledCount","emptyCount",{"_43":126,"_32":28,"_30":31,"_127":-5,"_41":42,"_40":14,"_128":25,"_38":146,"_13":130,"_33":34,"_35":37,"_24":25,"_131":132,"_147":148,"_27":149},["D",1747929274624],"children",[],[28],["D",1747925217029],{"_95":94,"_102":98},{"_95":94,"_96":-5,"_97":98,"_18":54,"_99":100,"_101":25},{"_13":84,"_32":85,"_43":42,"_86":44,"_87":-5,"_88":-5,"_89":-5,"_90":-5,"_91":-5,"_92":45,"_93":94},"ctx",{"_77":-5,"_122":187,"_188":189,"_190":191,"_192":25,"_193":25,"_194":25,"_195":57,"_196":-5,"_197":-7,"_198":-7,"_199":61,"_200":25,"_201":25,"_202":-5,"_203":25,"_204":25,"_205":25,"_206":-5},"ENV",{"_158":159,"_160":161,"_162":85,"_163":164,"_165":166,"_167":168,"_169":170,"_171":172,"_173":174,"_175":176,"_177":178,"_179":180,"_181":182,"_183":184,"_185":186},"REACT_APP_SENTRY_DSN","https://586020d86f05489db63a554690acf1e9@o1398359.ingest.sentry.io/6724499","RENDER_GIT_COMMIT","fdb67791413f4386b4dbf18f354029a617f6160f","RENDER_GIT_BRANCH","POSTHOG_API_TOKEN","phc_nmoyuAkStEZuUp69rYlg1DZgrIt19Gx0Y4Hwf8tGgJP","POSTHOG_API_HOST","https://wart.val.town","WEB_API_TEMPLATE","https://{val}.web.val.run","APP_URL","https://www.val.town","MODULE_URL","https://esm.town","VANITY_WEB_API_TEMPLATE","https://{label}.val.run/","DENOLS_URL","https://lsp.val.town","NODE_ENV","production","CLOUDFLARE_TURNSTILE_SITE_KEY","0x4AAAAAACtaIZJH7s9rBMZ6","GOOGLE_CLIENT_ID","875989696899-jtsqkhlbdv5jrlsk8631p7ipjg3c6o62.apps.googleusercontent.com","STRIPE_PUBLISHABLE_KEY","pk_live_51N2zvWEpZTTLipIkVEwXrUG9AT0yeOOEYxszarZT1jpsZV58Ly6wlg3SltZpHN26CUalOBmUSY7adQRQiSkCZz2500qSXNkf8Y","API_URL","https://api.val.town",[],"preferencesKeybindings","default","preferencesTheme","light","preferencesFixers","preferencesCopilot","preferencesSelectionAi","preferencesCloseBrackets","preferencesChatPanelState","preferencesDprint","preferencesDenofmt","notificationCount","flagDenols","isBusinessOrgMember","businessOrgHandle","isBusinessOrgAdmin","isHigherTownieTier","navCollapsed","currentOrgId"]

Diff · v4