fix: improved OCR and extracted text AI generation (#212)

HansGabriel · Dec 2, 2023 · 9b308ba · 9b308ba · vercel · Dec 2, 2023
1 parent 48de83c
commit 9b308ba
Show file tree

Hide file tree

Showing 5 changed files with 32 additions and 10 deletions.
diff --git a/apps/expo/src/components/bottom-sheet/ChoiceBottomSheet.tsx b/apps/expo/src/components/bottom-sheet/ChoiceBottomSheet.tsx
@@ -40,7 +40,7 @@ const ChoiceBottomSheet: FC<Props> = ({
               Reminder
             </Text>
             <Text className="font-nunito-semibold self-center px-8 text-center text-sm">
-              Please create at least five (5) questions to save the test!
+              Please create at least one (1) question to save the test!
             </Text>
           </View>
         </View>

diff --git a/apps/expo/src/components/buttons/AppButton.tsx b/apps/expo/src/components/buttons/AppButton.tsx
@@ -21,6 +21,7 @@ interface ButtonProps extends TouchableOpacityProps {
   isLoading?: boolean;
   loadingColor?: string;
   Vheight?: string;
+  disabled?: boolean;
 }
 
 const borderRadiusSize = (size: string | undefined) => {
@@ -59,8 +60,9 @@ export const AppButton = ({
   fontStyle,
   TOwidth,
   Vwidth,
-  Vheight = "14",
+  Vheight = "12",
   isLoading = false,
+  disabled = isLoading,
   loadingColor = "black",
   ...props
 }: ButtonProps) => {
@@ -69,7 +71,7 @@ export const AppButton = ({
       className={`my-${marginY} mx-${marginX} w-${TOwidth} justify-center self-center`}
       onPress={onPress}
       {...props}
-      disabled={isLoading}
+      disabled={disabled}
     >
       <View
         className={` h-${Vheight} w-${Vwidth} flex-row items-center justify-center self-center rounded-[${borderRadiusSize(

diff --git a/apps/expo/src/screens/create-reviewer/index.tsx b/apps/expo/src/screens/create-reviewer/index.tsx
@@ -67,16 +67,15 @@ export const CreateReviewerScreen = ({
     type: "create",
   };
   const richText = useRef<RichEditor | null>(null);
-  let highlightedText = "";
   const regex =
-    /<span style="(?:font-size: 1em; )?background-color: yellow;">(?:<b>)?(?:<i>)?(?:<u>)?(.*?)(?:<\/u>)?(?:<\/i>)?(?:<\/b>)?<\/span>/g;
+    /<span style="(?:font-size: 1em; )?background-color: yellow;">(?:<b>)*(?:<i>)*(?:<u>)*([\s\S]*?)(?:<\/u>)*(?:<\/i>)*(?:<\/b>)*<\/span>/g;
   const types: QuestionType[] = [
     "multiple_choice",
     "true_or_false",
     "multi_select",
     "identification",
   ];
-
+  let highlightedText = "";
   const randomizeQuestionType = Math.floor(Math.random() * types.length);
   const questionType = types[randomizeQuestionType];
   const mappedQuestionType = mapQuestionType(
@@ -281,7 +280,10 @@ export const CreateReviewerScreen = ({
             onError: (error) => {
               errorToast({
                 title: "Error",
-                message: error.message,
+                message:
+                  fileType === "image/*"
+                    ? error.message
+                    : "Cannot transcribe images from PDF",
               });
               setIsImageUploading(false);
               setIsPDFUploading(false);
@@ -649,7 +651,7 @@ export const CreateReviewerScreen = ({
             name="content"
           />
         </View>
-        <View className="w-[90%] flex-row justify-around self-center">
+        <View className="w-[90%] flex-row justify-around self-center my-5">
           <AppButton
             text="Upload PDF"
             buttonColor="violet-600"
@@ -660,6 +662,7 @@ export const CreateReviewerScreen = ({
             TOwidth="36"
             Vwidth="36"
             isLoading={isPDFUploading}
+            disabled={isImageUploading || isPDFUploading}
             onPress={() =>
               filePicker({
                 fileType: "application/pdf",
@@ -677,6 +680,7 @@ export const CreateReviewerScreen = ({
             TOwidth="36"
             Vwidth="36"
             isLoading={isImageUploading}
+            disabled={isPDFUploading || isImageUploading}
             onPress={() =>
               filePicker({
                 fileType: "image/*",

diff --git a/packages/api/src/router/pdfTextExtraction.ts b/packages/api/src/router/pdfTextExtraction.ts
@@ -1,3 +1,4 @@
+/* eslint-disable @typescript-eslint/no-explicit-any */
 import { router, protectedProcedure } from "../trpc";
 import { z } from "zod";
 
@@ -22,6 +23,9 @@ export const textExtractionRouter = router({
       const formData = new FormData();
       formData.append("base64image", file);
       formData.append("filetype", fileType);
+      formData.append("OCREngine", "2");
+      formData.append("detectOrientation", "true");
+      formData.append("scale", "true");
       if (apiKey) {
         formData.append("apikey", apiKey);
       }
@@ -36,8 +40,20 @@ export const textExtractionRouter = router({
       }
 
       const data = await response.json();
+      if (data.IsErroredOnProcessing) {
+        throw new Error("OCR request failed");
+      }
+      let combinedText = "";
+      if (data.ParsedResults.length > 1) {
+        data.ParsedResults.forEach((item: any) => {
+          combinedText += item.ParsedText + "\n";
+        });
+      } else {
+        combinedText = data.ParsedResults?.[0]?.ParsedText;
+      }
+
       const ocrResult: OCRResult = {
-        text: data.ParsedResults?.[0]?.ParsedText || "",
+        text: combinedText,
       };
 
       return ocrResult;

diff --git a/packages/schema/src/test.ts b/packages/schema/src/test.ts
@@ -101,7 +101,7 @@ export const testInputSchema = z.object({
   questions: z
     .array(questionSchema)
     .min(1, {
-      message: "At least five questions is required",
+      message: "At least one question is required",
     })
     .max(100, {
       message: "At most 100 questions are allowed",