Merge pull request #120 from danielemery/117-add-a-way-for-a-user-to-mark-a-quiz-with-inaccurrate-ai-ocr-and-display-when-someone-has-marked-it

Implement reporting of inaccurate OCR and display a warning when a user has reported it

Author: danielemery

src/QuizDetails.tsx

@@ -16,8 +16,7 @@ import {
   formatDateTimeShortTime,
   userIdentifier,
 } from './helpers';
-import { AI_PROCESS_QUIZ_IMAGES, QUIZ, QUIZZES } from './queries/quiz';
-import { MARK_QUIZ_ILLEGIBLE } from './queries/quiz';
+import { AI_PROCESS_QUIZ_IMAGES, MARK_INACCURATE_OCR, MARK_QUIZ_ILLEGIBLE, QUIZ, QUIZZES } from './queries/quiz';
 import { userCanPerformAction } from './services/authorization';
 import { Quiz as QuizType } from './types/quiz';
 
@@ -44,6 +43,9 @@ export default function Quiz() {
       navigate('/');
     },
   });
+  const [markInaccurateOCR, { loading: isMarkingQuizInaccurateOCR }] = useMutation(MARK_INACCURATE_OCR, {
+    refetchQueries: [{ query: QUIZ, variables: { id } }],
+  });
   const [aiProcessQuizImages, { loading: isProcessingQuizImages }] = useMutation(AI_PROCESS_QUIZ_IMAGES, {
     refetchQueries: [{ query: QUIZ, variables: { id } }],
   });
@@ -78,7 +80,9 @@ export default function Quiz() {
               </div>
             )}
           </dl>
-          {data.quiz.questions.length > 0 ? <QuizQuestions questions={data.quiz.questions} /> : null}
+          {data.quiz.questions.length > 0 ? (
+            <QuizQuestions questions={data.quiz.questions} reportedInaccurateOCR={data.quiz.reportedInaccurateOCR} />
+          ) : null}
           {[...data.quiz.images]
             .sort((a, b) => {
               return imageTypeSortValues[a.type] - imageTypeSortValues[b.type];
@@ -93,13 +97,23 @@ export default function Quiz() {
             <Button onClick={() => markQuizIllegible({ variables: { id } })} disabled={isMarkingQuizIllegible} warning>
               Mark Quiz Illegible
             </Button>
+            {!data.quiz.reportedInaccurateOCR && (
+              <Button
+                onClick={() => markInaccurateOCR({ variables: { id } })}
+                disabled={isMarkingQuizInaccurateOCR}
+                warning
+              >
+                Mark Inaccurate OCR
+              </Button>
+            )}
+
             {userCanPerformAction(user, 'TRIGGER_AI_PROCESSING') && data.quiz.aiProcessingState !== 'QUEUED' && (
               <Button
                 onClick={() => aiProcessQuizImages({ variables: { id } })}
                 disabled={isProcessingQuizImages}
                 warning
               >
-                {isProcessingQuizImages ? 'Processing...' : 'Trigger AI Processing'}
+                Trigger AI Processing
               </Button>
             )}
           </div>

src/QuizQuestions.tsx

@@ -1,17 +1,20 @@
+import classNames from 'classnames';
+
 import { ExpandCollapseSection } from './components/ExpandCollapseSection';
 import { QuizQuestion } from './types/quiz';
 
 export interface QuizQuestionsProps {
   questions: QuizQuestion[];
+  reportedInaccurateOCR: boolean;
 }
 
-export default function QuizQuestions({ questions }: QuizQuestionsProps) {
+export default function QuizQuestions({ questions, reportedInaccurateOCR }: QuizQuestionsProps) {
   return (
     <>
-      <ExpandCollapseSection title='Questions' initiallyShown={true}>
-        <div className='font-bold italic text-sm mb-4'>
+      <ExpandCollapseSection title='Questions' initiallyShown={!reportedInaccurateOCR}>
+        <div className={classNames('font-bold italic text-sm mb-4', { 'text-red-500': reportedInaccurateOCR })}>
           Please note these questions have been extracted using google gemini, there is no guarantee on the accuracy of
-          the question extraction.
+          the question extraction.{reportedInaccurateOCR && ' At least one user has reported the OCR to be inaccurate.'}
         </div>
         <ol>
           {questions.map((question) => (
@@ -22,9 +25,9 @@ export default function QuizQuestions({ questions }: QuizQuestionsProps) {
         </ol>
       </ExpandCollapseSection>
       <ExpandCollapseSection title='Answers' fallbackText='Answers are hidden by default.' initiallyShown={false}>
-        <div className='font-bold italic text-sm mb-4'>
+        <div className={classNames('font-bold italic text-sm mb-4', { 'text-red-500': reportedInaccurateOCR })}>
           Please note these answers have been extracted using google gemini, there is no guarantee on the accuracy of
-          the answer extraction.
+          the answer extraction.{reportedInaccurateOCR && ' At least one user has reported the OCR to be inaccurate.'}
         </div>
         <ol>
           {questions.map((question) => (

src/queries/quiz.ts

@@ -58,6 +58,7 @@ export const QUIZ = gql`
         answer
       }
       aiProcessingState
+      reportedInaccurateOCR
     }
   }
 `;
@@ -158,6 +159,12 @@ export const MARK_QUIZ_ILLEGIBLE = gql`
   }
 `;
 
+export const MARK_INACCURATE_OCR = gql`
+  mutation MarkInaccurateOCR($id: String!) {
+    markInaccurateOCR(quizId: $id)
+  }
+`;
+
 export const AI_PROCESS_QUIZ_IMAGES = gql`
   mutation AIProcessQuizImages($id: String!) {
     aiProcessQuizImages(quizId: $id)

src/types/quiz.ts

@@ -32,4 +32,5 @@ export interface Quiz {
   images: QuizImage[];
   questions: QuizQuestion[];
   aiProcessingState: QuizAIProcessingState;
+  reportedInaccurateOCR: boolean;
 }