Val Town Code SearchReturn to Val Town

257// --- Card Grader Frontend Component ---
258function CardGraderApp() {
259  const [imageFile, setImageFile] = useState(null);
260  const [imageBase64, setImageBase64] = useState(null);
261  const [gradingResult, setGradingResult] = useState(null); // Final displayed result
262  const [pastResults, setPastResults] = useState([]);
305  const handleFileChange = (event) => {
306    const file = event.target.files[0];
307    if (file && file.type.startsWith("image/")) {
308      setError(null);
309      setGradingResult(null);
310      setIsRevealingScore(false); // Reset reveal state
311      setPendingReportData(null); // Reset pending data
312      setImageFile(file);
313
314      const reader = new FileReader();
315      reader.onloadend = () => {
316        setImageBase64(reader.result);
317      };
318      reader.onerror = () => {
319        setError("Failed to read the image file.");
320        setImageBase64(null);
321        setImageFile(null);
322      };
323      reader.readAsDataURL(file);
324    } else {
325      setError("Please select a valid image file (jpg, png, webp, etc.).");
326      setImageBase64(null);
327      setImageFile(null);
328    }
329  };
330
331  const handleGradeRequest = useCallback(async () => {
332    if (!imageBase64 || isLoading || isRevealingScore) return;
333
334    setIsLoading(true);
339
340    try {
341      const base64Data = imageBase64.split(",")[1];
342      if (!base64Data) {
343        throw new Error("Could not extract image data for processing.");
344      }
345
347        method: "POST",
348        headers: { "Content-Type": "application/json" },
349        body: JSON.stringify({ imageBase64: base64Data }),
350      });
351
370        ...data.gradingReport,
371        timestamp: generateTimestamp(),
372        imagePreview: imageBase64,
373        cardName: data.gradingReport?.cardDetails?.name || "Unknown Card",
374      };
389      setPendingReportData(null);
390    }
391  }, [imageBase64, isLoading, isRevealingScore]);
392
393  // --- Handler for when animation completes ---
412
413  const viewPastResult = (result) => {
414    setImageBase64(result.imagePreview);
415    setGradingResult(result);
416    setError(null);
417    setImageFile(null);
418    setIsRevealingScore(false); // Ensure reveal is off
419    setPendingReportData(null);
482          {pastResults.map((result, index) => (
483            <li key={result.timestamp || index}>
484              <img src={result.imagePreview} alt="Thumbnail" width="40" height="auto" />
485              <span>
486                {result.cardName || "Graded Card"} - {result?.estimatedGrade?.grade || "N/A"} ({result.timestamp})
520        <input
521          type="file"
522          accept="image/*"
523          onChange={handleFileChange}
524          disabled={isLoading || isRevealingScore} // Disable during reveal
525        />
526        {imageBase64 && !isRevealingScore && ( // Hide preview during reveal
527          <div className="image-preview">
528            <img src={imageBase64} alt="Card Preview" />
529          </div>
530        )}
531        <button onClick={handleGradeRequest} disabled={!imageBase64 || isLoading || isRevealingScore}>
532          {/* Disable during reveal */}
533          {isLoading ? "Analyzing Card..." : "Grade This Card"}
537      {/* Show loading message *only* if loading AND *not* revealing score */}
538      {isLoading && !isRevealingScore && (
539        <div className="message loading">Processing image and generating report... This may take a moment.</div>
540      )}
541      {/* Show error message if error exists AND *not* revealing score */}
592      // Check for OpenAI API Key in Val Town secrets
593      const openai = new OpenAI(); // Assumes OPENAI_API_KEY is set in Val Town secrets
594      const { imageBase64 } = await request.json();
595      if (!imageBase64 || typeof imageBase64 !== "string") {
596        return Response.json({ error: "Missing or invalid image data (imageBase64)." }, {
597          status: 400,
598          headers: corsHeaders,
600      }
601
602      console.log("Received image data, preparing request to OpenAI...");
603
604      const modelChoice = "gpt-4o"; // Or "gpt-4o-mini"
606      // --- Construct the detailed prompt for OpenAI ---
607      const prompt = `
608You 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.
609
610# PSA Grading Lens - Instructions for Autogrok Relay
611
612## Objective:
613Evaluate trading card images based on PSA grading standards, focusing on key attributes such as corners, edges, surface, centering, and overall presentation.
614
615## Steps:
6227. **Estimated Grade**: Assign PSA grade (1-10 scale) based on cumulative condition.
623
624**Image Analysis Instructions:**
6251.  Identify the card (name, set, year) if possible. If not, state 'Unknown'. Ponder its future context if identifiable.
6262.  Evaluate condition ONLY from the image. Be critical but fair.
6273.  Assess points (score 1-10 AND brief comment):
628    * **Centering:** Visual estimate L/R, T/B. (Score: 1-10, Comment)
670            role: "user",
671            content: [
672              { type: "text", text: "Analyze this card image and provide the report in the specified JSON format." },
673              {
674                type: "image_url",
675                image_url: {
676                  url: `data:image/jpeg;base64,${imageBase64}`, // Assume jpeg, adjust if needed
677                  detail: "high",
678                },
779        .upload-section { display: flex; flex-direction: column; align-items: center; gap: 15px; margin-bottom: 25px; padding: 20px; border: 1px dashed var(--border-color); border-radius: 5px; background-color: #fdfdfd; }
780        input[type="file"] { border: 1px solid var(--border-color); padding: 8px; border-radius: 4px; max-width: 300px; }
781        .image-preview { max-width: 300px; max-height: 400px; margin-top: 10px; border: 1px solid var(--border-color); background-color: #eee; display: flex; justify-content: center; align-items: center; }
782        .image-preview img { max-width: 100%; max-height: 390px; object-fit: contain; border-radius: 3px; }
783        button { padding: 10px 20px; font-size: 1em; border-radius: 5px; border: none; cursor: pointer; transition: background-color 0.2s ease; background-color: var(--primary-color); color: white; }
784        button:hover:not(:disabled) { background-color: var(--primary-hover); }
806        .past-results img { border-radius: 3px; border: 1px solid var(--border-color); object-fit: contain; }
807        .past-results span { flex-grow: 1; font-size: 0.9em;}
808        @media (max-width: 700px) { body { padding: 10px; } .card-grader-app { padding: 15px; } h1 { font-size: 1.5em; } button { font-size: 0.95em; padding: 8px 15px; } .image-preview { max-width: 100%; } }
809        /* --- END Base & Card Grader CSS --- */
810

13// --- Frontend Component ---
14function CardGraderApp() {
15  const [imageFile, setImageFile] = useState(null);
16  const [imageBase64, setImageBase64] = useState(null);
17  const [gradingResult, setGradingResult] = useState(null);
18  const [pastResults, setPastResults] = useState([]);
49  const handleFileChange = (event) => {
50    const file = event.target.files[0];
51    if (file && file.type.startsWith("image/")) {
52      setError(null); // Clear previous errors
53      setGradingResult(null); // Clear previous result display
54      setImageFile(file);
55
56      const reader = new FileReader();
57      reader.onloadend = () => {
58        setImageBase64(reader.result); // This includes the "data:image/..." prefix
59      };
60      reader.onerror = () => {
61        setError("Failed to read the image file.");
62        setImageBase64(null);
63        setImageFile(null);
64      };
65      reader.readAsDataURL(file);
66    } else {
67      setError("Please select a valid image file (jpg, png, webp, etc.).");
68      setImageBase64(null);
69      setImageFile(null);
70    }
71  };
72
73  const handleGradeRequest = useCallback(async () => {
74    if (!imageBase64 || isLoading) return;
75
76    setIsLoading(true);
80    try {
81      // Extract base64 data part *without* the prefix
82      const base64Data = imageBase64.split(",")[1];
83      if (!base64Data) {
84        throw new Error("Could not extract image data for processing.");
85      }
86
88        method: "POST",
89        headers: { "Content-Type": "application/json" },
90        body: JSON.stringify({ imageBase64: base64Data }), // Send only the data part
91      });
92
105      }
106
107      // Add timestamp and original image to the result before saving
108      setGradingResult({
109        ...data.gradingReport, // The report object from backend
110        timestamp: generateTimestamp(),
111        imagePreview: imageBase64, // Store preview for history
112        cardName: data.gradingReport?.cardDetails?.name || "Unknown Card", // Use for history title
113      });
119      setIsLoading(false);
120    }
121  }, [imageBase64, isLoading]);
122
123  const clearHistory = () => {
134  const viewPastResult = (result) => {
135    // Display a selected past result in the main view
136    setImageBase64(result.imagePreview);
137    setGradingResult(result); // Display the past result object
138    setError(null);
139    setImageFile(null); // Indicate we are viewing a past result, not a new file
140    window.scrollTo(0, 0); // Scroll to top
141  };
184          This is an AI-generated visual estimation for informational purposes only. It does not guarantee a specific
185          grade from professional services like PSA and should not substitute professional evaluation. Accuracy depends
186          heavily on image quality.
187        </div>
188      </div>
201          {pastResults.map((result, index) => (
202            <li key={result.timestamp || index}>
203              <img src={result.imagePreview} alt="Thumbnail" width="40" height="auto" />
204              <span>
205                {result.cardName || "Graded Card"} - {result?.estimatedGrade?.grade || "N/A"} ({result.timestamp})
219      <h1>AI Card Grading Assistant (Beta)</h1>
220      <p className="instructions">
221        Upload a clear, well-lit photo of your card on a plain white or black background. The better the image, the
222        better the AI analysis (estimation only!).
223      </p>
226        <input
227          type="file"
228          accept="image/*"
229          onChange={handleFileChange}
230          disabled={isLoading}
231        />
232        {imageBase64 && (
233          <div className="image-preview">
234            <img src={imageBase64} alt="Card Preview" />
235          </div>
236        )}
237        <button
238          onClick={handleGradeRequest}
239          disabled={!imageBase64 || isLoading}
240        >
241          {isLoading ? "Analyzing Card..." : "Grade This Card"}
244
245      {isLoading && (
246        <div className="message loading">Processing image and generating report... This may take a moment.</div>
247      )}
248      {error && <div className="message error">{error}</div>}
283      // Check for OpenAI API Key in Val Town secrets
284      const openai = new OpenAI();
285      const { imageBase64 } = await request.json();
286      if (!imageBase64 || typeof imageBase64 !== "string") {
287        return Response.json({ error: "Missing or invalid image data (imageBase64)." }, { status: 400 });
288      }
289
290      console.log("Received image data, preparing request to OpenAI..."); // Log start
291
292      const modelChoice = "gpt-4o"; // Use GPT-4o for better vision capabilities. Use "gpt-4o-mini" for lower cost/speed, potentially less accuracy.
294      // --- Construct the detailed prompt for OpenAI ---
295      const prompt = `
296You 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.
297
298**Image Analysis Instructions:**
2991.  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.
3002.  Evaluate the card's condition based ONLY on what is visible in the image. Be critical but fair.
3013.  Assess the following points (provide a score from 1-10 where applicable AND a brief comment for each):
302    * **Centering:** Visual estimate of left/right and top/bottom balance. (Score: 1-10, Comment)
336    "estimatedGrade": {
337        "grade": "string (e.g., PSA 8, Likely PSA 6, Potential PSA 10)",
338        "confidence": "string (e.g., High, Medium, Low - based on image clarity/visible details)"
339    },
340    "estimatedPrice": "number | null",
359              {
360                type: "text",
361                text: "Please analyze this card image and provide the grading report in the specified JSON format.",
362              },
363              {
364                type: "image_url",
365                image_url: {
366                  // Prepend the necessary prefix for base64 data URI
367                  url: `data:image/jpeg;base64,${imageBase64}`, // Assuming jpeg, adjust if needed (png often works too)
368                  detail: "high", // Request high detail analysis
369                },
489        }
490
491        .image-preview {
492            max-width: 300px; /* Limit preview size */
493            max-height: 400px;
494            margin-top: 10px;
495            border: 1px solid var(--border-color);
496            background-color: #eee; /* BG for transparent images */
497            display: flex;
498            justify-content: center;
499            align-items: center;
500        }
501        .image-preview img {
502            max-width: 100%;
503            max-height: 390px;
598             h1 { font-size: 1.5em; }
599            button { font-size: 0.95em; padding: 8px 15px; }
600            .image-preview { max-width: 100%; }
601        }
602    </style>

19  // Upload state
20  const [uploadData, setUploadData] = useState({
21    imagePreview: null,
22    caption: "",
23    location: "",
68    return Array.from({ length: 15 }, (_, i) => ({
69      id: `photo${i}`,
70      imageUrl: `/api/placeholder/${800 + i}/${600 + i}`,
71      caption: `Beautiful capture #${i + 1}`,
72      location: locations[Math.floor(Math.random() * locations.length)],
133      setUploadData({
134        ...uploadData,
135        imagePreview: "/api/placeholder/800/600",
136      });
137    }
164      const newPhoto = {
165        id: `photo${photos.length + 1}`,
166        imageUrl: uploadData.imagePreview,
167        caption: uploadData.caption,
168        location: uploadData.location,
178      setPhotos([newPhoto, ...photos]);
179      setUploadData({
180        imagePreview: null,
181        caption: "",
182        location: "",
402            {/* Photo */}
403            <img
404              src={selectedPhoto.imageUrl}
405              alt={selectedPhoto.caption}
406              style={{
814              >
815                <img
816                  src={photo.imageUrl}
817                  alt={photo.caption}
818                  style={{
939
940        <form onSubmit={handleUploadSubmit} style={{ padding: "20px" }}>
941          {!uploadData.imagePreview
942            ? (
943              <div
961                  onChange={handleFileSelect}
962                  style={{ display: "none" }}
963                  accept="image/*"
964                />
965              </div>
968              <div>
969                <img
970                  src={uploadData.imagePreview}
971                  alt="Preview"
972                  style={{
1228            onClick={() => {
1229              setUploadData({
1230                imagePreview: null,
1231                caption: "",
1232                location: "",
1371                </div>
1372
1373                {/* Image */}
1374                <img
1375                  src={photo.imageUrl}
1376                  alt={photo.caption}
1377                  onClick={() => openPhotoDetail(photo)}
1498              >
1499                <img
1500                  src={photo.imageUrl}
1501                  alt={photo.caption}
1502                  style={{

3This is a lightweight Blob Admin interface to view and debug your Blob data.
4
5![Screenshot 2024-11-22 at 15.43.43@2x.png](https://imagedelivery.net/iHX6Ovru0O7AjmyT5yZRoA/d075a4ee-93ec-4cdd-4823-7c8aee593f00/public)
6
7Versions 0-17 of this val were done with Hono and server-rendering. 

20  price: number;
21  category: "cultural" | "standard";
22  imageUrl: string;
23  stockQuantity: number;
24}
36      price REAL NOT NULL,
37      category TEXT NOT NULL,
38      imageUrl TEXT NOT NULL,
39      stockQuantity INTEGER NOT NULL
40    )
53    await sqlite.execute(
54      `INSERT INTO ${KEY}_products 
55      (name, description, price, category, imageUrl, stockQuantity) 
56      VALUES (?, ?, ?, ?, ?, ?)`,
57      [
60        product.price,
61        product.category,
62        product.imageUrl,
63        product.stockQuantity,
64      ],
360      price: 0,
361      category: "standard",
362      imageUrl: "",
363      stockQuantity: 0,
364    });
432          </div>
433          <div style={{ marginBottom: "10px" }}>
434            <label>Image URL:</label>
435            <input
436              type="url"
437              value={newProduct.imageUrl}
438              onChange={(e) => setNewProduct({ ...newProduct, imageUrl: e.target.value })}
439              required
440              style={{ width: "100%", padding: "5px" }}
531                  >
532                    <img
533                      src={product.imageUrl}
534                      alt={product.name}
535                      style={{ maxWidth: "100%", height: "250px", objectFit: "cover" }}
566              <div key={product.id} style={{ display: "flex", alignItems: "center", marginBottom: "10px" }}>
567                <img
568                  src={product.imageUrl}
569                  alt={product.name}
570                  style={{ width: "100px", marginRight: "10px" }}
606            >
607              <img
608                src={selectedProduct.imageUrl}
609                alt={selectedProduct.name}
610                style={{ maxWidth: "50%", objectFit: "cover" }}

15const firebaseConfig = {
16  apiKey: "AIzaSyBRdHIXJcFUMV3h7k2GFg9wY0S_hUttaZU",
17  authDomain: "tommy-ai-image-generator-d2466.firebaseapp.com",
18  databaseURL: "https://tommy-ai-image-generator-d2466-default-rtdb.firebaseio.com",
19  projectId: "tommy-ai-image-generator-d2466",
20  storageBucket: "tommy-ai-image-generator-d2466.firebasestorage.app",
21  messagingSenderId: "720885566827",
22  appId: "1:720885566827:web:41d6a2b8d8197e078dd02e",
64    // When both authenticated and ads are loaded, redirect
65    if (isAuthenticated && adsLoaded) {
66      window.location.href = "https://ggghh-aiimagegeneratormobilefriendly.web.val.run";
67    }
68  }, [isAuthenticated, adsLoaded]);

128        key: svgKey,
129        data: svgContent,
130        contentType: 'image/svg+xml'
131      })
132    });

122        key: svgKey,
123        data: svgContent,
124        contentType: 'image/svg+xml'
125      })
126    });

341        return new Response(svgText, {
342          headers: {
343            'Content-Type': 'image/svg+xml',
344            'Cache-Control': 'no-cache'
345          }

1export default async function handler(req) {
2  // For direct SVG access, serve the SVG with proper content type
3  if (req.headers.get('accept')?.includes('image/svg+xml') || 
4      req.url.includes('?format=svg')) {
5    
42    `, {
43      headers: {
44        'Content-Type': 'image/svg+xml',
45        'Cache-Control': 'max-age=3600',
46        'Access-Control-Allow-Origin': '*'