ImgJoc - AI Image Analysis

[{"_1":2,"_3":-5,"_4":-5},"loaderData",{"_5":6,"_7":8,"_9":10},"actionData","errors","root",{"_152":153,"_154":155},"routes/_app.x.$handle.$name",{"_11":12,"_13":14,"_15":16,"_18":19,"_17":-7,"_115":-5,"_20":116,"_22":117,"_118":119,"_120":121,"_25":122,"_24":-5,"_123":-5,"_124":-5,"_125":53,"_126":127,"_128":44,"_129":-5,"_130":-5,"_131":132},"routes/_app.x.$handle.$name.branch.$branch.code.$",{"_11":12,"_13":14,"_15":16,"_17":-7,"_18":19,"_20":21,"_22":23,"_24":-7,"_25":26,"_27":-5,"_28":-5,"_29":-5,"_30":-5,"_31":-5},"handle","legal","name","ImgJoc","branchName","main","version","path","","project",{"_33":61,"_13":14,"_45":62,"_63":-5,"_64":53,"_65":66,"_67":66,"_68":-5,"_69":-5,"_70":71,"_72":37,"_73":44,"_74":44,"_75":-5,"_76":77,"_78":79,"_80":-5,"_81":-5,"_82":-5,"_83":-5,"_84":85,"_86":85,"_87":88,"_89":88,"_90":88,"_91":85,"_92":85,"_93":94,"_95":96,"_97":98,"_99":53},"tree",[56],"file","contents",[32],"upstream","pull","ahead","behind","envVars",{"_33":34,"_13":35,"_36":37,"_38":-5,"_39":40,"_41":42,"_43":44,"_45":46,"_17":47,"_48":49,"_50":51,"_52":53,"_54":-5,"_18":55},"id","538086c4-4fb8-11f0-a23d-f69ea79377d9","main.tsx","fileId","31cf2c52-4fb7-11f0-b5b9-f69ea79377d9","parentId","branchId","31ccc3c2-4fb7-11f0-b5b9-f69ea79377d9","branchVersion",5,"latest",true,"createdAt",["D",1750631354184],4,"fileType","http","content","const domainIdentificationSystemPromptTemplate = `\nYou are an AI assistant, ImgJoc, designed to quickly and accurately classify images. Your goal is to analyze the provided image and determine its domain and primary purpose. Return your findings STRICTLY as a JSON object.\n\nThe \"domain\" should be a concise category (e.g., \"Nature Photography\", \"Architectural Drawing\", \"Medical Scan\", \"UI/UX Mockup\", \"Historical Photo\", \"Chart or Graph\").\nThe \"purpose\" should be a brief description of what the image aims to convey (e.g., \"To capture the beauty of a mountain landscape\", \"To outline the floor plan of a new building\", \"To show a cross-section of a human brain for diagnosis\", \"To visualize quarterly sales data\").\n\nExample:\n- Input (an image of a bar chart):\n- Output: { \"domain\": \"Chart or Graph\", \"purpose\": \"To present a visual comparison of sales figures across different regions.\" }\n`;\n\nconst taskSuggestionSystemPromptTemplate = `\nAI assistant, ImgJoc. Your goal is to suggest a comprehensive and diverse list of potential tasks or analyses that a user might want to perform on the provided image.\n\nYou must give a complete rhetorical list of likely tasks or analyses, even the unlikely ones you think one might not be interested in. Trust me, we are.. Name that group 'Misc'.\n\nYou have been given the image's likely domain and purpose. Use this context to generate highly relevant and useful suggestions.\n\n- IMAGE DOMAIN: %%IMAGE_DOMAIN%%\n- IMAGE PURPOSE: %%IMAGE_PURPOSE%%\n\nReturn your suggestions STRICTLY as a JSON object. The keys are category names (e.g., \"Object Detection\", \"Content Description\", \"Technical Analysis\"). Values are arrays of objects, each with \"task\" (a string describing the task) and \"is_high_priority\" (boolean). Foundational tasks like general description and key element identification should be marked as \"is_high_priority: true\".\n\nExample for a 'Nature Photography' image:\n- \"Content Description\": \"Describe the main subject and setting of the photo.\", \"Identify the time of day and weather conditions.\"\n- \"Object Detection\": \"List all visible animals and plants.\", \"Identify any man-made objects in the scene.\"\n- \"Technical Analysis\": \"Analyze the photographic composition (e.g., rule of thirds, leading lines).\", \"Estimate the camera settings used (e.g., aperture, shutter speed).\"\n\nIMAGE:\n==============\n[Image will be provided in the user message]\n`;\n\nconst imgJocAIAnalysisSystemPromptTemplate = `\nAI System for Precise Image Information Extraction. Your goal is to perform the user-specified task(s) on the provided image. Your output MUST be a single JSON object (no markdown formatting) that strictly follows the schema provided below. When identifying specific items, use a corresponding \"finding_type\" (e.g., \"Object Identified\", \"Key Theme\", \"Color Palette Analysis\", \"Text Extraction\"). For \"Section Analysis\", which might apply to diagrams or comics, provide the section title in the description, a summary of its meaning in 'implications', and any relevant notes.\n\nTASK(S) / QUERY: %%TASK_QUERY%%\nIMAGE SOURCE: %%INPUT_SOURCE_DESCRIPTION%%\n\nAnalyze the image provided in the user message. Meticulously map ALL findings to the JSON schema, presenting information objectively. If the image is insufficient or ambiguous for parts of the query, note this in the 'limitations_or_warnings' field.\n\nOutput JSON Schema:\n{\n \"request_details\": { \"operation_performed\": \"string\", \"input_source_description\": \"string\" },\n \"analysis_summary\": { \"overview\": \"string\", \"key_findings_count\": \"integer\" },\n \"detailed_findings\": [\n {\n \"finding_id\": \"string\", // e.g., \"OBJ-001\"\n \"finding_type\": \"string\", // e.g., \"Object Identified\", \"Key Theme\", \"Color Palette Analysis\"\n \"description\": \"string\", // For Section Analysis, this is the section title.\n \"severity_or_importance\": \"string\", // e.g., \"High\", \"Medium\", \"Low\"\n \"bounding_box\": [ \"integer\", \"integer\", \"integer\", \"integer\" ], // Optional: [x, y, width, height]\n \"implications\": \"string\", // For Section Analysis, this is the summary of the section.\n \"recommended_action\": \"string\", // e.g., \"Further review recommended\", \"N/A\"\n \"confidence_score\": \"float\" // 0.0 to 1.0\n }\n ],\n \"execution_metadata\": {\n \"status\": \"string\", // e.g., \"Completed\", \"Completed with warnings\"\n \"timestamp\": \"string\", // ISO 8601\n \"limitations_or_warnings\": \"string\",\n \"disclaimer\": \"string\"\n }\n}\n`;\n\n// --- Type Definitions ---\ninterface LogEntry {\n agent: string;\n message: string | object;\n type: \"step\" | \"result\" | \"error\" | \"input\" | \"final\" | \"info\";\n}\ninterface ImgJocAIResponse {\n request_details: { operation_performed: string; input_source_description: string };\n analysis_summary: { overview: string; key_findings_count: number };\n detailed_findings: Array<{\n finding_id: string;\n finding_type: string;\n description: string;\n severity_or_importance?: string;\n bounding_box?: [number, number, number, number];\n implications?: string;\n recommended_action?: string;\n confidence_score?: number;\n }>;\n execution_metadata: { status: string; timestamp: string; limitations_or_warnings: string; disclaimer: string };\n}\ninterface ImgJocImage {\n id: string;\n name: string;\n base64: string;\n sourceType: \"file\";\n sourceValue: string;\n dateAdded: string;\n type: \"image\";\n}\ninterface ImgJocAnalysis {\n id: string;\n imgId: string;\n imgName?: string;\n query: string;\n result: ImgJocAIResponse;\n datePerformed: string;\n type: \"analysis\";\n}\ninterface GroupedSuggestions {\n [category: string]: { task: string; is_high_priority: boolean }[];\n}\n\nfunction generateHtmlShell(initialQuery, sourceUrl) {\n const escapedQuery = initialQuery.replace(//g, \">\");\n // NOTE: All client-side template literals `${...}` are escaped as `\\${...}`\n // so the server-side JS engine doesn't interpret them.\n return `\n\n\n\n\n\nImgJoc - AI Image Analysis\n\n\n\n

\n\n

\n${\n [\"dashboard\", \"new-analysis\", \"history\", \"settings\", \"image-detail\", \"analysis-detail\"].map(v =>\n `

`\n ).join(\"\")\n }\n

\n\n\n`;\n}\n\nexport default async function(req: Request) {\n const { OpenAI } = await import(\"https://esm.town/v/std/openai\");\n // The 'Buffer' class is specific to Node.js. In other environments like Deno or Cloudflare Workers,\n // this might not be available. The client-side logic correctly uses FileReader, which is standard.\n // The server-side logic has been updated to expect a data URL directly.\n const { Buffer } = await import(\"node:buffer\");\n\n const CORS_HEADERS = {\n \"Access-Control-Allow-Origin\": \"*\",\n \"Access-Control-Allow-Methods\": \"POST, GET, OPTIONS\",\n \"Access-Control-Allow-Headers\": \"Content-Type, Accept\",\n };\n if (req.method === \"OPTIONS\") return new Response(null, { status: 204, headers: CORS_HEADERS });\n\n const url = new URL(req.url);\n const format = url.searchParams.get(\"format\");\n const action = url.searchParams.get(\"action\");\n const sourceUrl = import.meta.url.replace(\"esm.town\", \"val.town\");\n const openai = new OpenAI();\n\n async function fileToDataURL(file: File): Promise {\n const arrayBuffer = await file.arrayBuffer();\n // Using Buffer here assumes a Node.js-compatible environment.\n const base64 = Buffer.from(arrayBuffer).toString(\"base64\");\n return `data:${file.type};base64,${base64}`;\n }\n\n async function callAI(\n systemPrompt: string,\n userMessage: any, // Can be string or vision payload\n log: LogEntry[],\n agentName: string,\n ): Promise

Code