\n {phase === \"anticipating\" && (\n

Analyzing...

\n Scan Integrity:\n {formatNumber(score)}\n

\n \n

\n )}\n

\n \n {displayGrade}\n

Grade Determined!

\n Final Estimate:{\" \"}\n {targetGrade}\n

(Loading full report...)

\n \n \n );\n}\n\nfunction ImageUploader({ side, imageFile, onFileChange, disabled }) {\n const [preview, setPreview] = useState(null);\n const fileInputRef = useRef(null);\n\n useEffect(() => {\n if (!imageFile) {\n setPreview(null);\n return;\n }\n const objectUrl = URL.createObjectURL(imageFile);\n setPreview(objectUrl);\n return () => URL.revokeObjectURL(objectUrl);\n }, [imageFile]);\n\n const handleClick = () => fileInputRef.current.click();\n\n return (\n

\n \n {preview\n ? {`${side}

\n : (\n

\n +\n

Upload {side}

\n )}\n

\n );\n}\n\nfunction CardGraderApp() {\n const [frontImageFile, setFrontImageFile] = useState(null);\n const [backImageFile, setBackImageFile] = useState(null);\n const [gradingResult, setGradingResult] = useState(null);\n const [pastResults, setPastResults] = useState([]);\n const [isLoading, setIsLoading] = useState(false);\n const [error, setError] = useState(null);\n const [isRevealingScore, setIsRevealingScore] = useState(false);\n const [pendingReportData, setPendingReportData] = useState(null);\n const [revealTrigger, setRevealTrigger] = useState(0);\n\n useEffect(() => {\n try {\n const stored = localStorage.getItem(LOCAL_STORAGE_KEY);\n if (stored) setPastResults(JSON.parse(stored));\n } catch (e) {\n console.error(\"Failed to load past results:\", e);\n }\n }, []);\n\n useEffect(() => {\n if (gradingResult && !isRevealingScore) {\n const exists = pastResults.some(pr => pr.timestamp === gradingResult.timestamp);\n if (!exists) {\n const updatedResults = [gradingResult, ...pastResults].slice(0, 20);\n setPastResults(updatedResults);\n localStorage.setItem(LOCAL_STORAGE_KEY, JSON.stringify(updatedResults));\n }\n }\n }, [gradingResult, pastResults, isRevealingScore]);\n\n const resetState = () => {\n setGradingResult(null);\n setError(null);\n setIsRevealingScore(false);\n setPendingReportData(null);\n setFrontImageFile(null);\n setBackImageFile(null);\n };\n\n const handleFileChange = (setter) => (event) => {\n const file = event.target.files[0];\n if (file && file.type.startsWith(\"image/\")) {\n setter(file);\n setError(null);\n } else {\n setter(null);\n setError(\"Please select a valid image file.\");\n }\n };\n\n const toBase64 = file =>\n new Promise((resolve, reject) => {\n const reader = new FileReader();\n reader.readAsDataURL(file);\n reader.onload = () => resolve(reader.result);\n reader.onerror = error => reject(error);\n });\n\n const handleGradeRequest = useCallback(async () => {\n if (!frontImageFile || !backImageFile || isLoading || isRevealingScore) return;\n\n setIsLoading(true);\n setError(null);\n setGradingResult(null);\n\n try {\n const [frontB64WithPrefix, backB64WithPrefix] = await Promise.all([\n toBase64(frontImageFile),\n toBase64(backImageFile),\n ]);\n\n const frontImageBase64 = frontB64WithPrefix.split(\",\")[1];\n const backImageBase64 = backB64WithPrefix.split(\",\")[1];\n\n if (!frontImageBase64 || !backImageBase64) {\n throw new Error(\"Could not read image file data.\");\n }\n\n const response = await fetch(\"/grade-card\", {\n method: \"POST\",\n headers: { \"Content-Type\": \"application/json\" },\n body: JSON.stringify({ frontImageBase64, backImageBase64 }),\n });\n\n if (!response.ok) {\n const errData = await response.json().catch(() => ({}));\n throw new Error(errData.error || `HTTP error! Status: ${response.status}`);\n }\n\n const data = await response.json();\n if (data.error || !data.gradingReport) {\n throw new Error(data.error || \"AI response was missing the 'gradingReport' object.\");\n }\n\n const report = {\n ...data.gradingReport,\n timestamp: generateTimestamp(),\n frontImagePreview: frontB64WithPrefix,\n backImagePreview: backB64WithPrefix,\n };\n\n setPendingReportData(report);\n setIsLoading(false);\n setIsRevealingScore(true);\n setRevealTrigger(p => p + 1);\n } catch (err) {\n console.error(\"Grading request failed:\", err);\n setError(`Grading failed: ${err.message}`);\n setIsLoading(false);\n }\n }, [frontImageFile, backImageFile, isLoading, isRevealingScore]);\n\n const handleRevealComplete = useCallback(() => {\n setIsRevealingScore(false);\n setGradingResult(pendingReportData);\n setPendingReportData(null);\n window.scrollTo(0, 0);\n }, [pendingReportData]);\n\n const viewPastResult = (result) => {\n setGradingResult(result);\n setFrontImageFile(null);\n setBackImageFile(null);\n setError(null);\n setIsRevealingScore(false);\n window.scrollTo(0, 0);\n };\n\n const clearHistory = () => {\n setPastResults([]);\n localStorage.removeItem(LOCAL_STORAGE_KEY);\n };\n\n const renderReport = (report) => {\n if (!report) return null;\n const { cardDetails, frontAnalysis, backAnalysis, finalGrade, marketAssessment, summary } = report;\n\n const renderAnalysisSection = (title, analysis) => (\n

{title}

\n {key.replace(/([A-Z])/g, \" $1\").replace(/^./, str => str.toUpperCase())}:\n {value.score}/10 - {value.comment}\n

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

AI Grading Report

{report.timestamp}

\n\n

\n $\"Card$ \n $\"Card$ \n

{cardDetails.name}

{cardDetails.set} ({cardDetails.year})

\n Final Estimated Grade\n {finalGrade.grade}\n

Overall Summary

{summary}

Market Assessment

\n Estimated Price: {marketAssessment.estimatedPrice}\n

\n Investment Notes: {marketAssessment.investmentNotes}\n

\n\n

\n {frontAnalysis && renderAnalysisSection(\"Front Condition Analysis\", frontAnalysis)}\n {backAnalysis && renderAnalysisSection(\"Back Condition Analysis\", backAnalysis)}\n

\n\n

\n Disclaimer:{\" \"}\n This is an AI-generated visual estimation. It is for entertainment and informational purposes only and is not\n a substitute for professional grading.\n

\n \n

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

Grading History

\n \n

\n $\"Thumbnail\"$ \n \n {result.cardDetails.name || \"Graded Card\"} - {result.finalGrade.grade}{\" \"}\n ({result.timestamp})\n \n viewPastResult(result)}\n className=\"secondary view-btn\"\n disabled={isLoading || isRevealingScore}\n >\n View\n \n

\n );\n };\n\n const MainContent = () => {\n if (gradingResult) {\n return renderReport(gradingResult);\n }\n\n return (\n <>\n

AI Card Grading Assistant

\n Upload high-quality, well-lit images of the card's front and back against a neutral, contrasting background\n for the most accurate analysis.\n

\n \n \n

\n \n {isLoading ? \"Analyzing...\" : \"Grade This Card\"}\n \n {isLoading && !isRevealingScore && (\n

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

\n )}\n {error && !isRevealingScore &&

{error}

}\n

\n {renderPastResults()}\n \n );\n };\n\n return (\n

\n {isRevealingScore && pendingReportData && (\n \n )}\n \n

\n );\n}\n\nfunction client() {\n const root = document.getElementById(\"root\");\n if (root) createRoot(root).render();\n}\nif (typeof document !== \"undefined\") {\n requestAnimationFrame(client);\n}\n\nexport default async function server(request) {\n const { OpenAI } = await import(\"https://esm.town/v/std/openai\");\n const corsHeaders = {\n \"Access-Control-Allow-Origin\": \"*\",\n \"Access-Control-Allow-Methods\": \"POST, GET, OPTIONS\",\n \"Access-Control-Allow-Headers\": \"Content-Type\",\n };\n\n if (request.method === \"OPTIONS\") {\n return new Response(null, { headers: { ...corsHeaders, \"Allow\": \"POST, GET, OPTIONS\" } });\n }\n\n if (request.method === \"POST\" && new URL(request.url).pathname === \"/grade-card\") {\n try {\n const openai = new OpenAI();\n const { frontImageBase64, backImageBase64 } = await request.json();\n\n if (!frontImageBase64 || !backImageBase64) {\n return Response.json({ error: \"Both front and back image data are required.\" }, {\n status: 400,\n headers: corsHeaders,\n });\n }\n\n const modelChoice = \"gpt-4o\";\n\n const prompt = `\nYou are a world-class, expert trading card grader named 'Autogrok'. You will perform a systematic, repeatable analysis of a trading card based on two provided images: a front and a back. Your process must be rigorous and your output must be a single, clean JSON object.\n\n**Autogrok Grading Protocol:**\n\n1. **Card Identification:**\n * From the 'front' image, identify the card's name, set, and year. If any detail is unidentifiable, state 'Unknown'.\n\n2. **Image Pre-Analysis (Internal Step - Do not output):**\n * Mentally or algorithmically isolate the card from its background in both images. Your entire analysis must be based on the card itself, not the surface it is on. Acknowledge this isolation step in your analysis.\n\n3. **Condition Analysis - Front:**\n * Evaluate the 'front' image for the following four attributes. For each attribute, provide a score from 1 (poor) to 10 (gem mint) and a concise, descriptive comment.\n * **Centering:** Assess the left/right and top/bottom border ratios. Note any significant imbalance.\n * **Corners:** Examine all four corners for sharpness, roundness, whitening, or fraying.\n * **Edges:** Inspect the top, bottom, left, and right edges for smoothness, chipping, or whitening.\n * **Surface:** Look for scratches, print lines, dimples, stains, or loss of gloss. For holographic cards, note any holo-specific scratches.\n\n4. **Condition Analysis - Back:**\n * Perform the same four-point evaluation on the 'back' image. Flaws on the back are just as important as the front.\n * **Centering:** Assess border ratios.\n * **Corners:** Check for sharpness and wear.\n * **Edges:** Look for chipping and whiteness.\n * **Surface:** Check for scuffs, scratches, or stains.\n\n5. **Synthesis & Final Grade Determination:**\n * Review the scores from the front and back analysis. The final grade is limited by the lowest score of any single attribute. A card cannot be a 'PSA 10' if one of its corners is a 7.\n * Determine a final, single overall grade on the 1-10 PSA scale (e.g., \"PSA 8\", \"PSA 5.5\").\n * Write a comprehensive summary paragraph justifying the final grade. This summary must reference the specific strengths and, more importantly, the key flaws identified during the front and back analysis that determined the final score.\n\n6. **Market Assessment:**\n * Provide a speculative price range based on the card's identity and its estimated grade. Use cautious language. If the card is common or its value is highly volatile, state that.\n * Provide a brief investment note, considering the card's popularity, rarity, and condition.\n\n**JSON Output Specification:**\nYour entire response must be a single JSON object. Do not include any text, markdown, or commentary before or after the JSON block. The structure MUST be exactly as follows:\n{\n \"gradingReport\": {\n \"cardDetails\": {\n \"name\": \"string\",\n \"set\": \"string\",\n \"year\": \"string\"\n },\n \"frontAnalysis\": {\n \"centering\": { \"score\": number, \"comment\": \"string\" },\n \"corners\": { \"score\": number, \"comment\": \"string\" },\n \"edges\": { \"score\": number, \"comment\": \"string\" },\n \"surface\": { \"score\": number, \"comment\": \"string\" }\n },\n \"backAnalysis\": {\n \"centering\": { \"score\": number, \"comment\": \"string\" },\n \"corners\": { \"score\": number, \"comment\": \"string\" },\n \"edges\": { \"score\": number, \"comment\": \"string\" },\n \"surface\": { \"score\": number, \"comment\": \"string\" }\n },\n \"finalGrade\": {\n \"grade\": \"string\",\n \"confidence\": \"string (High, Medium, Low)\"\n },\n \"summary\": \"string\",\n \"marketAssessment\": {\n \"estimatedPrice\": \"string\",\n \"investmentNotes\": \"string\"\n }\n }\n}\n`;\n\n const response = await openai.chat.completions.create({\n model: modelChoice,\n response_format: { type: \"json_object\" },\n messages: [\n { role: \"system\", content: prompt },\n {\n role: \"user\",\n content: [\n {\n type: \"text\",\n text:\n \"Please execute the Autogrok Grading Protocol on the following card images and return the specified JSON object. Image 1 is the front, Image 2 is the back.\",\n },\n { type: \"image_url\", image_url: { url: `data:image/jpeg;base64,${frontImageBase64}`, detail: \"high\" } },\n { type: \"image_url\", image_url: { url: `data:image/jpeg;base64,${backImageBase64}`, detail: \"high\" } },\n ],\n },\n ],\n max_tokens: 2500,\n });\n\n const jsonString = response.choices[0]?.message?.content;\n if (!jsonString) {\n throw new Error(\"OpenAI returned an empty response.\");\n }\n\n const parsedResponse = JSON.parse(jsonString);\n\n if (!parsedResponse.gradingReport) {\n throw new Error(\"AI response was missing the root 'gradingReport' key.\");\n }\n\n return Response.json(parsedResponse, { headers: corsHeaders });\n } catch (error) {\n console.error(`Error in /grade-card endpoint: ${error.message}`, error.stack);\n return Response.json({ error: `Server error during grading: ${error.message}` }, {\n status: 500,\n headers: corsHeaders,\n });\n }\n }\n\n if (request.method === \"GET\" && new URL(request.url).pathname === \"/\") {\n const html = `\n\n\n AI Card Grader\n \n \n \n \n \n \n\n\n

\n \n\n`;\n return new Response(html, { headers: { ...corsHeaders, \"Content-Type\": \"text/html; charset=utf-8\" } });\n }\n\n return new Response(\"Not Found\", { status: 404, headers: corsHeaders });\n}","deleted","label",[98],"permalink","https://www.val.town/x/svc/Cards/code/main.tsx","extension","actionData","errors"]