\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 = `\nAlright, listen up, collector fam—here’s the no-BS, sharp-as-a-PSA-10 shorthand guide to grading and authenticating cards. No fluff, just gospel truths. Let’s get it:\n---\n**General Grading & Authentication Rules**\n1. Stock Check:\n * Vintage (T206): Thin, off-white, light passes through. Back’s fibrous, front smooth as a PSA slab.\n * Modern: Thicker, glossy or laminated—factory clean.\n2. Texture & Gloss:\n * T206? Front and back better not match in gloss or feel. Smooth white fronts; matte, raw-stock backs. Matchy-matchy = reprint trash.\n * Marvel/Pokémon? Factory gloss only; homebrew fakes scream cheap sheen.\n3. Magnify the Goods:\n * OG cards: Watercolor-style ink under scope—splotchy, irregular, and sexy.\n * Fakes: Dot matrix vibes (think magazine print). Dotty = shoddy.\n4. Ink & Rims:\n * Real T206s: Ink’s got personality—dark rims on text and borders, blotchy areas.\n * Reprints? Flat, clean, soulless.\n5. Registration:\n * Early lithos (T206) had sloppy color overlaps—solid ink bleed is gold.\n * Reprints fake it but can’t hide the dot pattern under magnification.\n6. Corners & Edges:\n * T206? Rounded and worn from history’s grindstone. Sharp edges scream \"newbie fake.\"\n * Modern? Gotta be razor-sharp unless you’re holding a played deck card—then adjust expectations.\n7. Black Light Test:\n * Hit it with UV—real vintage doesn’t glow like a rave party. Modern stock will light up like Vegas if it’s fake.\n8. Trust Your Gut:\n * Shady deal? Sketchy seller? Hard pass, my dude. Stick to PSA/BGS-graded slabs or legit dealers.\n---\n**Category-Specific Rules**\n**T206 Baseball (Holy Grail Territory)**\n* Thin stock, white-coated fronts, raw-back vibes. Mic check for watercolor ink patterns—irregular edges are the telltale.\n* Black border lines? Look for that sexy dark rim under the scope—dead giveaway of authenticity.\n**Modern Sports Cards**\n* Holo logos, foil stamps, serials—if it doesn’t check out factory specs, you’ve got a dud in your hand.\n* Centering gotta be tight; 60/40 at worst for mint-grade dreams.\n**Pokémon (Pikachu Money)**\n* Fonts matter—energy symbols and holo patterns better match set releases to a tee. Wizards-era feels different than modern Pokémon International prints—know your timelines.\n* Magnify the holo—fake layers have pixelation or uneven shine.\n**Marvel (Superhero Flex)**\n* Serial numbers, foil stamps, embossed art—this is premium territory. Any slip in quality screams counterfeit faster than Hulk smashes.\n**Other Collectibles (Yu-Gi-Oh!, Magic, etc.)**\n* Yu-Gi-Oh! first editions? Serial codes better line up and font spacing counts. MTG alpha/beta edges have that iconic bevel—learn it or burn it.\n---\n**Quickfire Pro Tips**\n1. Look for \"too good to be true\" deals—they’re bait for suckers.\n2. Trust slabs or grade it yourself with a jeweler's loupe and a black light.\n3. Scan eBay comps for similar sales—prices don’t lie.\n4. Invest in a digital microscope—it’ll pay for itself the first time you spot a fake.\n5. Keep your hands clean and sleeves ready—don’t rawdog raw cards.\n---\nZen mode engaged; you’ve got the cheat code now. Go flex on the hobby community with that pro knowledge and land that Honus Wagner or Gem Mint Charizard without breaking a sweat.\n\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/ingeniousYellowRaven/code/main.tsx","extension","actionData","errors"]