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

Calculating Final Grade...

\n Points:\n {formatNumber(score)}\n

\n Bonus:\n x{Math.max(1, Math.round(bonus))}\n

\n \n

\n )}\n\n

\n \n {displayGrade}\n

\n\n

Grade Determined!

\n Overall Estimate: {targetGrade}\n

(Displaying full report next...)

\n \n \n );\n}\n\n// --- Card Grader Frontend Component ---\nfunction CardGraderApp() {\n const [imageFile, setImageFile] = useState(null);\n const [imageBase64, setImageBase64] = useState(null);\n const [gradingResult, setGradingResult] = useState(null); // Final displayed result\n const [pastResults, setPastResults] = useState([]);\n const [isLoading, setIsLoading] = useState(false);\n const [error, setError] = useState(null);\n\n // --- State for Score Reveal ---\n const [isRevealingScore, setIsRevealingScore] = useState(false);\n const [pendingReportData, setPendingReportData] = useState(null); // Temp store result\n const [revealTrigger, setRevealTrigger] = useState(0); // Increment to trigger animation\n\n // Load past results from localStorage on mount\n useEffect(() => {\n try {\n const storedResults = localStorage.getItem(LOCAL_STORAGE_KEY);\n if (storedResults) {\n setPastResults(JSON.parse(storedResults));\n }\n } catch (e) {\n console.error(\"Failed to load past results from localStorage:\", e);\n setError(\"Could not load past grading results.\");\n }\n }, []);\n\n // Save result to localStorage whenever gradingResult changes AND not revealing score\n useEffect(() => {\n if (gradingResult && gradingResult.timestamp && !isRevealingScore) {\n try {\n // Avoid adding duplicates if viewing past results caused re-render\n const exists = pastResults.some(pr =>\n pr.timestamp === gradingResult.timestamp && pr.cardName === gradingResult.cardName\n );\n if (!exists) {\n const updatedResults = [gradingResult, ...pastResults].slice(0, 20); // Keep last 20 results\n setPastResults(updatedResults);\n localStorage.setItem(LOCAL_STORAGE_KEY, JSON.stringify(updatedResults));\n }\n } catch (e) {\n console.error(\"Failed to save result to localStorage:\", e);\n // Don't overwrite main error state for this\n // setError(\"Could not save the grading result to local history.\");\n }\n }\n }, [gradingResult, pastResults, isRevealingScore]); // Added isRevealingScore dependency\n\n const handleFileChange = (event) => {\n const file = event.target.files[0];\n if (file && file.type.startsWith(\"image/\")) {\n setError(null);\n setGradingResult(null);\n setIsRevealingScore(false); // Reset reveal state\n setPendingReportData(null); // Reset pending data\n setImageFile(file);\n\n const reader = new FileReader();\n reader.onloadend = () => {\n setImageBase64(reader.result);\n };\n reader.onerror = () => {\n setError(\"Failed to read the image file.\");\n setImageBase64(null);\n setImageFile(null);\n };\n reader.readAsDataURL(file);\n } else {\n setError(\"Please select a valid image file (jpg, png, webp, etc.).\");\n setImageBase64(null);\n setImageFile(null);\n }\n };\n\n const handleGradeRequest = useCallback(async () => {\n if (!imageBase64 || isLoading || isRevealingScore) return;\n\n setIsLoading(true);\n setError(null);\n setGradingResult(null);\n setIsRevealingScore(false);\n setPendingReportData(null);\n\n try {\n const base64Data = imageBase64.split(\",\")[1];\n if (!base64Data) {\n throw new Error(\"Could not extract image data for processing.\");\n }\n\n const response = await fetch(\"/grade-card\", {\n method: \"POST\",\n headers: { \"Content-Type\": \"application/json\" },\n body: JSON.stringify({ imageBase64: base64Data }),\n });\n\n if (!response.ok) {\n let errorMsg = `HTTP error! Status: ${response.status}`;\n try {\n const errData = await response.json();\n errorMsg = errData.error || errorMsg;\n } catch { /* Ignore if response body isn't JSON */ }\n throw new Error(errorMsg);\n }\n\n const data = await response.json();\n if (data.error) {\n throw new Error(data.error);\n }\n if (!data.gradingReport) { // Add check for expected structure\n throw new Error(\"AI response missing 'gradingReport' data.\");\n }\n\n const dataWithTimestamp = {\n ...data.gradingReport,\n timestamp: generateTimestamp(),\n imagePreview: imageBase64,\n cardName: data.gradingReport?.cardDetails?.name || \"Unknown Card\",\n };\n\n // --- Trigger Score Reveal ---\n console.log(\"Grading data received, preparing score reveal...\");\n setPendingReportData(dataWithTimestamp);\n setIsLoading(false);\n setIsRevealingScore(true);\n setRevealTrigger(prev => prev + 1);\n // --- End Trigger ---\n } catch (err) {\n console.error(\"Grading request failed:\", err);\n setError(`Grading failed: ${err.message}`);\n setGradingResult(null);\n setIsLoading(false);\n setIsRevealingScore(false);\n setPendingReportData(null);\n }\n }, [imageBase64, isLoading, isRevealingScore]);\n\n // --- Handler for when animation completes ---\n const handleRevealComplete = useCallback(() => {\n console.log(\"Handling reveal completion...\");\n setIsRevealingScore(false);\n setGradingResult(pendingReportData);\n setPendingReportData(null);\n window.scrollTo(0, 0);\n }, [pendingReportData]);\n\n const clearHistory = () => {\n try {\n localStorage.removeItem(LOCAL_STORAGE_KEY);\n setPastResults([]);\n setError(null);\n } catch (e) {\n console.error(\"Failed to clear localStorage:\", e);\n setError(\"Could not clear grading history.\");\n }\n };\n\n const viewPastResult = (result) => {\n setImageBase64(result.imagePreview);\n setGradingResult(result);\n setError(null);\n setImageFile(null);\n setIsRevealingScore(false); // Ensure reveal is off\n setPendingReportData(null);\n window.scrollTo(0, 0);\n };\n\n // --- Render Functions ---\n const renderReport = (report) => {\n if (!report) return null;\n\n const renderSection = (title, data) => {\n if (!data && typeof data !== \"number\" && typeof data !== \"string\") return null; // Check more thoroughly\n return (\n

{title}

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

{data}

: ( // Also allow numbers directly\n

\n {key.replace(/([A-Z])/g, \" $1\").replace(/^./, str => str.toUpperCase())}:{\" \"}\n {/* Improved handling for value display */}\n {value === null || value === undefined\n ? \"N/A\"\n : typeof value === \"object\" && value !== null && value.hasOwnProperty(\"score\")\n && value.hasOwnProperty(\"comment\")\n ? ` ${value.score}/10 - ${value.comment}`\n : typeof value === \"object\"\n ? JSON.stringify(value) // Basic fallback for other objects\n : ` ${value}`}\n

\n )}\n

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

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

\n {renderSection(\"Overall Estimated Grade\", report.estimatedGrade)}\n {renderSection(\"Estimated Price\", report.estimatedPrice)}\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 Disclaimer: This is an AI-generated visual estimation...\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 viewPastResult(result)}\n className=\"secondary view-btn\"\n disabled={isLoading || isRevealingScore}\n >\n View\n \n

\n );\n };\n\n // --- Main Render ---\n return (\n

\n {/* --- Render Score Reveal Overlay conditionally --- */}\n {isRevealingScore && pendingReportData && (\n \n )}\n\n

AI Card Grading Assistant (Beta)

\n Upload a clear, well-lit photo of your card on a plain white or black background...\n

\n\n

\n \n {imageBase64 && !isRevealingScore && ( // Hide preview during reveal\n

\n $\"Card$ \n

\n )}\n \n

\n\n {/* Show loading message *only* if loading AND *not* revealing score */}\n {isLoading && !isRevealingScore && (\n

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

\n )}\n {/* Show error message if error exists AND *not* revealing score */}\n {error && !isRevealingScore &&

{error}

}\n\n {/* Show final report *only* if result exists AND *not* revealing score */}\n {gradingResult && !isRevealingScore && renderReport(gradingResult)}\n\n

\n {/* Render past results, disable buttons if loading/revealing */}\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 return new Response(null, {\n headers: {\n \"Allow\": \"POST, GET, OPTIONS\",\n \"Access-Control-Allow-Origin\": \"*\", // Allow requests from any origin (adjust if needed)\n \"Access-Control-Allow-Methods\": \"POST, GET, OPTIONS\",\n \"Access-Control-Allow-Headers\": \"Content-Type\",\n },\n });\n }\n\n // Add CORS headers for actual requests too\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 // --- 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(); // Assumes OPENAI_API_KEY is set in Val Town secrets\n const { imageBase64 } = await request.json();\n if (!imageBase64 || typeof imageBase64 !== \"string\") {\n return Response.json({ error: \"Missing or invalid image data (imageBase64).\" }, {\n status: 400,\n headers: corsHeaders,\n });\n }\n\n console.log(\"Received image data, preparing request to OpenAI...\");\n\n const modelChoice = \"gpt-4o\"; // Or \"gpt-4o-mini\"\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# PSA Grading Lens - Instructions for Autogrok Relay\n\n## Objective:\nEvaluate trading card images based on PSA grading standards, focusing on key attributes such as corners, edges, surface, centering, and overall presentation.\n\n## Steps:\n1. **Corners**: Check sharpness, fraying, rounding, wear.\n2. **Edges**: Inspect cleanliness, smoothness, chipping, nicks, discoloration.\n3. **Surface**: Assess gloss, colors, scratches, scuffs, print lines, staining, fingerprints, smudges.\n4. **Centering**: Estimate L/R and T/B ratios (e.g., 60/40). Note imbalances.\n5. **Overall Presentation**: Evaluate visual appeal, preservation. Consider foil/embossing if present.\n6. **Special Notes**: For inserts/foils, check for micro-scratches. Check embossed details.\n7. **Estimated Grade**: Assign PSA grade (1-10 scale) based on cumulative condition.\n\n**Image Analysis Instructions:**\n1. Identify the card (name, set, year) if possible. If not, state 'Unknown'. Ponder its future context if identifiable.\n2. Evaluate condition ONLY from the image. Be critical but fair.\n3. Assess points (score 1-10 AND brief comment):\n * **Centering:** Visual estimate L/R, T/B. (Score: 1-10, Comment)\n * **Corners:** Sharpness, whitening, rounding, bends. (Score: 1-10, Comment)\n * **Edges:** Smoothness, whitening, chips, nicks. (Score: 1-10, Comment)\n * **Surface (Front):** Scratches, print lines/dots, scuffs, stains, dents, creases, gloss loss. (Score: 1-10, Comment)\n * **Surface (Back):** Note if visible & defects. If not visible, note assumption based on front. (Score: 1-10, Comment)\n * **Color:** Vibrancy, fading. (Comment Only)\n * **Texture/Print Quality:** Clarity, registration, texture flaws (holo). (Comment Only)\n4. Estimate **Rarity** from visual cues (holo, numbering) and general knowledge. Comment on impact.\n5. Provide speculative **Investmentability Quotient** comment (popularity, condition, rarity). Use cautious language.\n6. Synthesize into **Estimated Overall Grade** (e.g., \"PSA 7\", \"Potential PSA 9\"). Provide **Summary** justification. Mention key +/- factors. Estimate **Price Range** (e.g., \"$10-$15\", \"Highly Variable\", null if unknown) based on grade, rarity, and general market knowledge (state source if possible, e.g., \"based on recent eBay comps for similar grades\").\n7. Add **Additional Notes**.\n\n**Output Format:**\nRespond ONLY with a single JSON object. No text before/after. Strict structure:\n{\n \"gradingReport\": {\n \"cardDetails\": { \"name\": \"string | Unknown\", \"set\": \"string | Unknown\", \"year\": \"string | Unknown\" },\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\": { \"rarityAssessment\": \"string\", \"investmentabilityComment\": \"string\" },\n \"estimatedGrade\": { \"grade\": \"string (e.g., PSA 8)\", \"confidence\": \"string (High, Medium, Low)\" },\n \"estimatedPrice\": \"string | null\",\n \"summary\": \"string (Justification)\",\n \"notes\": \"string (Optional)\"\n }\n}\nEnsure comments concise. Scores 1-10. Be realistic.\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 { type: \"text\", text: \"Analyze this card image and provide the report in the specified JSON format.\" },\n {\n type: \"image_url\",\n image_url: {\n url: `data:image/jpeg;base64,${imageBase64}`, // Assume jpeg, adjust if needed\n detail: \"high\",\n },\n },\n ],\n },\n ],\n max_tokens: 2000, // Increased slightly for potentially longer summaries/notes\n });\n\n console.log(\"Received response from OpenAI.\");\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 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 // Add extra check for the nested gradingReport structure\n if (!parsedResponse || !parsedResponse.gradingReport) {\n console.error(\"Parsed JSON missing 'gradingReport' key:\", parsedResponse);\n throw new Error(\"AI response missing expected 'gradingReport' structure.\");\n }\n\n return Response.json(parsedResponse, { headers: corsHeaders }); // Send the { gradingReport: {...} } object\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}` }, {\n status: 500,\n headers: corsHeaders,\n });\n }\n }\n\n // --- Serve HTML for GET requests (loads the React app) ---\n if (request.method === \"GET\" && new URL(request.url).pathname === \"/\") {\n // Use htmlContent defined below, ensuring it includes the current URL for the script src\n const finalHtmlContent = htmlContent.replace(\n \"\",\n ``, // Inject current request URL dynamically\n );\n return new Response(finalHtmlContent, {\n headers: { ...corsHeaders, \"content-type\": \"text/html; charset=utf-8\" },\n });\n }\n\n // --- Default 404 for other routes ---\n return new Response(\"Not Found\", { status: 404, headers: corsHeaders });\n}\n\n// --- HTML Content --- (CSS includes both Card Grader and Score Reveal styles)\nconst htmlContent = `\n\n\n\n AI Card Grader\n \n \n \n \n\n\n \n

Loading AI Card Grader...

\n \n \n\n\n`;","deleted","label",[98],"permalink","https://www.val.town/x/Learn/campycards/code/main.tsx","extension","actionData","errors"]