feat: improve score recognition, autoshrink selection, add processing

packages/api/src/services/results/recognizeScore.ts

@@ -73,8 +73,8 @@ export const recognizeScore = async (
             type: 'input_text',
             text:
               mix === 'Phoenix'
-                ? `Extract the vertically lined up white numbers from the photo according to the provided schema. One number per line, some numbers may have leading zeroes. All zeroes have a dot in the middle.`
-                : `Extract the vertically lined up white numbers from the photo according to the provided schema. One number per line, some numbers may have leading zeroes.`,
+                ? `Extract the vertically lined up numbers from the processed photo according to the provided schema. One number per line, some numbers may have leading zeroes. All zeroes have a dot in the middle.`
+                : `Extract the vertically lined up numbers from the processed photo according to the provided schema. One number per line, some numbers may have leading zeroes.`,
           },
           {
             type: 'input_image',

packages/web/src/features/leaderboards/AddResult.tsx → packages/web/src/features/leaderboards/components/add-result/AddResult.tsx

@@ -17,7 +17,7 @@ import { FaExclamationCircle } from 'react-icons/fa';
 import { IoIosWarning } from 'react-icons/io';
 import { useNavigate, useParams } from 'react-router-dom';
 
-import css from './components/add-result/add-result.module.scss';
+import css from './add-result.module.scss';
 
 import { useConfirmationPopup } from 'components/ConfirmationPopup/useConfirmationPopup';
 import Loader from 'components/Loader/Loader';
@@ -29,10 +29,11 @@ import { useUser } from 'hooks/useUser';
 import { useLanguage } from 'utils/context/translation';
 import { api } from 'utils/trpc';
 
-import { ScreenshotRecognition } from './components/add-result/ScreenshotRecognition';
-import { compressDataUrl } from './components/add-result/compressFile';
-import { useProcessedImage } from './components/add-result/useProcessedImage';
-import { useSingleChartQuery } from './hooks/useSingleChartQuery';
+import { useSingleChartQuery } from '../../hooks/useSingleChartQuery';
+import { ImageDataPreview } from './ImageDataPreview';
+import { ScreenshotRecognition } from './ScreenshotRecognition';
+import { compressImageData } from './imageUtils';
+import { useProcessedImage } from './useProcessedImage';
 
 const GRADE_OPTIONS = [
   { value: 'SSS', label: 'SSS' },
@@ -196,7 +197,7 @@ const AddResult = () => {
     setError(null);
 
     try {
-      const compressedScreenshot = await compressDataUrl(processedImage.squareDataUrl);
+      const compressedScreenshot = await compressImageData(processedImage.imageData);
 
       const data = {
         pass: rawData.pass,
@@ -255,9 +256,8 @@ const AddResult = () => {
             <div className={css.splitPanels}>
               <div className={css.screenshotPanel}>
                 {processedImage && (
-                  <img
-                    src={processedImage.squareDataUrl}
-                    alt="Screenshot"
+                  <ImageDataPreview
+                    imageData={processedImage.imageData}
                     style={{ maxWidth: '100%', maxHeight: 270 }}
                   />
                 )}
@@ -329,7 +329,8 @@ const AddResult = () => {
             <>
               <ScreenshotRecognition
                 showDate
-                squareDataUrl={processedImage.squareDataUrl}
+                imageData={processedImage.imageData}
+                naturalSize={processedImage.naturalSize}
                 date={processedImage.date}
                 mix={form.values.mix}
                 onScoreRecognized={(score) => {

packages/web/src/features/leaderboards/components/add-result/ImageDataPreview.tsx

@@ -0,0 +1,23 @@
+import { useEffect, useRef } from 'react';
+
+interface ImageDataPreviewProps {
+  imageData: ImageData;
+  style?: React.CSSProperties;
+}
+
+export const ImageDataPreview = ({ imageData, style }: ImageDataPreviewProps) => {
+  const canvasRef = useRef<HTMLCanvasElement>(null);
+
+  useEffect(() => {
+    const canvas = canvasRef.current;
+    if (!canvas) return;
+    canvas.width = imageData.width;
+    canvas.height = imageData.height;
+    const ctx = canvas.getContext('2d');
+    if (ctx) {
+      ctx.putImageData(imageData, 0, 0);
+    }
+  }, [imageData]);
+
+  return <canvas ref={canvasRef} style={style} />;
+};