{title}

\n {typeof data === \"string\" ?

{data}

: (\n

\n {key.replace(/([A-Z])/g, \" $1\").replace(/^./, str => str.toUpperCase())}:{\" \"}\n {/* Nicer formatting */}\n {typeof value === \"object\" && value !== null\n ? ` ${value.score}/10 - ${value.comment}`\n : ` ${value}`}\n

\n )}\n

\n );\n };\n\n return (\n

AI Grading Report {report.timestamp ? `(${report.timestamp})` : \"\"}

\n\n {renderSection(\"Overall Estimated Grade\", report.estimatedGrade)}\n {renderSection(\"Grading Summary\", report.summary)}\n {renderSection(\"Card Details\", report.cardDetails)}\n {renderSection(\"Condition Analysis\", report.condition)}\n {renderSection(\"Rarity & Investment Notes\", report.rarityInvestment)}\n {renderSection(\"Additional Notes\", report.notes)}\n\n

\n Disclaimer:{\" \"}\n This is an AI-generated visual estimation for informational purposes only. It does not guarantee a specific\n grade from professional services like PSA and should not substitute professional evaluation. Accuracy depends\n heavily on image quality.\n

\n );\n };\n\n const renderPastResults = () => {\n if (pastResults.length === 0) {\n return

No past grading results found in local storage.

;\n }\n return (\n

Grading History (Last {pastResults.length})

\n \n

\n $\"Thumbnail\"$ \n \n {result.cardName || \"Graded Card\"} - {result?.estimatedGrade?.grade || \"N/A\"} ({result.timestamp})\n \n \n

\n );\n };\n\n return (\n

AI Card Grading Assistant (Beta)

\n Upload a clear, well-lit photo of your card on a plain white or black background. The better the image, the\n better the AI analysis (estimation only!).\n

\n\n

\n \n {imageBase64 && (\n

\n $\"Card$ \n

\n )}\n \n {isLoading ? \"Analyzing Card...\" : \"Grade This Card\"}\n \n

\n\n {isLoading && (\n

Processing image and generating report... This may take a moment.

\n )}\n {error &&

{error}

}\n\n {gradingResult && renderReport(gradingResult)}\n\n

\n {renderPastResults()}\n

\n );\n}\n\n// --- Client-side Rendering ---\nfunction client() {\n const rootElement = document.getElementById(\"root\");\n if (rootElement) {\n createRoot(rootElement).render();\n } else {\n console.error(\"Root element not found for React app\");\n }\n}\nif (typeof document !== \"undefined\") {\n requestAnimationFrame(client);\n}\n\n// --- Backend Server (Val Town) ---\nexport default async function server(request: Request): Promise {\n const { OpenAI } = await import(\"https://esm.town/v/std/openai\");\n\n if (request.method === \"OPTIONS\") {\n // Handle CORS preflight requests if needed (though likely not necessary for same-origin val fetches)\n return new Response(null, { headers: { \"Allow\": \"POST, OPTIONS\" } });\n }\n\n // --- API Route: /grade-card ---\n if (request.method === \"POST\" && new URL(request.url).pathname === \"/grade-card\") {\n try {\n // Check for OpenAI API Key in Val Town secrets\n const openai = new OpenAI();\n const { imageBase64 } = await request.json();\n if (!imageBase64 || typeof imageBase64 !== \"string\") {\n return Response.json({ error: \"Missing or invalid image data (imageBase64).\" }, { status: 400 });\n }\n\n console.log(\"Received image data, preparing request to OpenAI...\"); // Log start\n\n const modelChoice = \"gpt-4o\"; // Use GPT-4o for better vision capabilities. Use \"gpt-4o-mini\" for lower cost/speed, potentially less accuracy.\n\n // --- Construct the detailed prompt for OpenAI ---\n const prompt = `\nYou are an expert collectible card grader simulating a PSA-style inspection based SOLELY on the provided image. Analyze the card image and provide a detailed N-point inspection report in JSON format.\n\n**Image Analysis Instructions:**\n1. Identify the card if possible (name, set, year). If not identifiable, state 'Unknown'. Spend some time afterward to ponder the future of the card, the set, the character, their universe, wherw it is going, etc. based on known facts.\n2. Evaluate the card's condition based ONLY on what is visible in the image. Be critical but fair.\n3. Assess the following points (provide a score from 1-10 where applicable AND a brief comment for each):\n * **Centering:** Visual estimate of left/right and top/bottom balance. (Score: 1-10, Comment)\n * **Corners:** Sharpness, presence of whitening, rounding, fuzziness, bends. (Score: 1-10, Comment)\n * **Edges:** Smoothness, presence of whitening, chips, nicks, roughness. (Score: 1-10, Comment)\n * **Surface (Front):** Look for scratches, print lines/dots, scuffs, stains, dents, creases, loss of gloss/sheen. (Score: 1-10, Comment)\n * **Surface (Back):** (Assume similar quality if back isn't visible, but note if it is) Mention any visible back defects if applicable. (Score: 1-10, Comment)\n * **Color:** Vibrancy, richness, signs of fading or discoloration. (Comment Only)\n * **Texture/Print Quality:** Assess print clarity, registration, and any visible texture (like holofoil) consistency/flaws. (Comment Only)\n4. Estimate the card's **Rarity** based on visual cues (e.g., holographic, reverse holo, numbering if visible) and general knowledge if identifiable. Comment on its potential impact.\n5. Provide a highly speculative **Investmentability Quotient** comment based on perceived popularity, condition, and rarity. Use cautious language.\n6. Synthesize all factors into an **Estimated Overall Grade** on the PSA 1-10 scale (e.g., \"PSA 7\", \"Potential PSA 9\", \"Likely PSA 8\"). Provide a **Summary** justifying this grade, mentioning the key positive and negative factors observed.\n7. Add any **Additional Notes** or observations.\n\n**Output Format:**\nRespond ONLY with a single JSON object. Do not include any text before or after the JSON. The JSON object should strictly follow this structure:\n{\n \"gradingReport\": {\n \"cardDetails\": {\n \"name\": \"string | Unknown\",\n \"set\": \"string | Unknown\",\n \"year\": \"string | Unknown\"\n },\n \"condition\": {\n \"centering\": { \"score\": number, \"comment\": \"string\" },\n \"corners\": { \"score\": number, \"comment\": \"string\" },\n \"edges\": { \"score\": number, \"comment\": \"string\" },\n \"surfaceFront\": { \"score\": number, \"comment\": \"string\" },\n \"surfaceBack\": { \"score\": number, \"comment\": \"string\" },\n \"color\": { \"comment\": \"string\" },\n \"texturePrintQuality\": { \"comment\": \"string\" }\n },\n \"rarityInvestment\": {\n \"rarityAssessment\": \"string\",\n \"investmentabilityComment\": \"string\"\n },\n \"estimatedGrade\": {\n \"grade\": \"string (e.g., PSA 8, Likely PSA 6, Potential PSA 10)\",\n \"confidence\": \"string (e.g., High, Medium, Low - based on image clarity/visible details)\"\n },\n \"estimatedPrice\": \"number | null\",\n \"summary\": \"string (Justification for the grade)\",\n \"notes\": \"string (Optional additional observations)\"\n }\n}\nEnsure all comments are concise but informative. Scores should range from 1 (Poor) to 10 (Gem Mint). Be realistic based on the visual evidence.\n`;\n\n const response = await openai.chat.completions.create({\n model: modelChoice,\n response_format: { type: \"json_object\" }, // Enforce JSON output\n messages: [\n {\n role: \"system\",\n content: prompt, // The detailed instructions act as the system message\n },\n {\n role: \"user\",\n content: [\n {\n type: \"text\",\n text: \"Please analyze this card image and provide the grading report in the specified JSON format.\",\n },\n {\n type: \"image_url\",\n image_url: {\n // Prepend the necessary prefix for base64 data URI\n url: `data:image/jpeg;base64,${imageBase64}`, // Assuming jpeg, adjust if needed (png often works too)\n detail: \"high\", // Request high detail analysis\n },\n },\n ],\n },\n ],\n max_tokens: 1500, // Allow sufficient tokens for a detailed JSON response\n });\n\n console.log(\"Received response from OpenAI.\"); // Log success\n\n const jsonString = response.choices[0]?.message?.content;\n if (!jsonString) {\n throw new Error(\"OpenAI did not return valid response content.\");\n }\n\n // Parse the JSON response from OpenAI\n let parsedResponse;\n try {\n parsedResponse = JSON.parse(jsonString);\n console.log(\"Successfully parsed JSON response.\");\n } catch (parseError) {\n console.error(\"Failed to parse JSON from OpenAI:\", jsonString);\n throw new Error(\"AI returned improperly formatted JSON data.\");\n }\n\n // Return the structured report\n return Response.json(parsedResponse); // Send the parsed object { gradingReport: {...} }\n } catch (error) {\n console.error(`Error in /grade-card endpoint: ${error}`, error.stack);\n return Response.json({ error: `Server error during grading: ${error.message}` }, { status: 500 });\n }\n }\n\n // --- Serve HTML for GET requests (loads the React app) ---\n if (request.method === \"GET\" && new URL(request.url).pathname === \"/\") {\n return new Response(htmlContent, { // Use htmlContent defined below\n headers: { \"content-type\": \"text/html; charset=utf-8\" },\n });\n }\n\n // --- Default 404 for other routes ---\n return new Response(\"Not Found\", { status: 404 });\n}\n\n// --- HTML Content --- (Moved outside the server function for clarity)\nconst htmlContent = `\n\n\n\n AI Card Grader\n \n \n \n\n\n

Loading AI Card Grader...

\n \n \n\n\n`;\n\n// Make sure the htmlContent uses the current val's URL for the script source\n// (The template literal `${import.meta.url}` inside the htmlContent string handles this)","deleted","label",[98],"permalink","https://www.val.town/x/find/Cardvalue/code/main.tsx","extension","actionData","errors"]