render images correctly

TheDuckAI · Jul 22, 2023 · 6e126ee · 6e126ee
1 parent 6fb9ee4
commit 6e126ee
Show file tree

Hide file tree

Showing 6 changed files with 81 additions and 20 deletions.
diff --git a/package.json b/package.json
@@ -24,6 +24,7 @@
     "framer-motion": "^10.13.0",
     "husky": "^8.0.3",
     "lint-staged": "^13.2.3",
+    "lodash": "^4.17.21",
     "mongoose": "^7.3.3",
     "next": "13.4.9",
     "postcss": "8.4.25",

diff --git a/src/screens/ARB/Arb.tsx b/src/screens/ARB/Arb.tsx
@@ -1,4 +1,5 @@
 import React from "react";
+import { redirect } from "next/navigation";
 import {
   Box,
   Flex,
@@ -38,7 +39,7 @@ const Arb: React.FC = () => {
       <Box as="section" bg="gray.100" py={10}>
         <Container maxW="container.md">
           <Flex direction="column" align="center">
-            <Heading as="h1" size="2xl">
+            <Heading as="h1" size="xl">
               ARB: Advanced Reasoning Benchmark for Large Language Models
             </Heading>
 
@@ -121,14 +122,16 @@ const Arb: React.FC = () => {
               >
                 Code
               </Button>
-              <Button
-                leftIcon={<FaImages />}
-                colorScheme="teal"
-                variant="solid"
-                ml={4}
-              >
-                Dataset
-              </Button>
+              <Link href="/home">
+                <Button
+                  leftIcon={<FaImages />}
+                  colorScheme="teal"
+                  variant="solid"
+                  ml={4}
+                >
+                  Interface
+                </Button>
+              </Link>
             </Flex>
           </Flex>
         </Container>

diff --git a/src/screens/Home/Components/Mathjax.tsx b/src/screens/Home/Components/Mathjax.tsx
@@ -8,14 +8,16 @@ const MathJaxComponent: React.FC<MathJaxProps> = ({ problemStatement }) => {
   const [parsedContent, setParsedContent] = useState<string>("");
 
   useEffect(() => {
-    const regex = /\$(.*?)\$|\\\((.*?)\\\)|\\\[(.*?)\\\]/g;
+    const regex = /\$\$(.*?)\$\$|\$(.*?)\$|\\\((.*?)\\\)|\\\[(.*?)\\\]/g;
     let result;
 
     let parsedString = problemStatement;
 
     while ((result = regex.exec(problemStatement)) !== null) {
       if (result[1]) {
-        parsedString = parsedString.replace(result[0], `\\(${result[1]}\\)`);
+        parsedString = parsedString.replace(result[0], `\\[${result[1]}\\]`);
+      } else if (result[2]) {
+        parsedString = parsedString.replace(result[0], `\\(${result[2]}\\)`);
       }
     }
 

diff --git a/src/screens/Home/Home.tsx b/src/screens/Home/Home.tsx
@@ -1,4 +1,7 @@
 import { useEffect, useState } from "react";
+import { Image } from "@chakra-ui/react";
+import { Center } from "@chakra-ui/react";
+
 import {
   Box,
   Button,
@@ -196,6 +199,51 @@ export default function Home() {
           <Box fontWeight="bold" mb={4}>
             <MathJaxComponent problemStatement={problemStatement} />
           </Box>
+          {randomEndpoint === "/api/mcatScienceImageProblem" && (
+            <Box mt={5}>
+              <Text fontWeight="bold" mb={2}>
+                Images:
+              </Text>
+              {problem.Images &&
+                problem.Images.map((imageName, index) => {
+                  const imageUrl = `https://storage.googleapis.com/images_problems/${imageName}`;
+                  return (
+                    <Center key={index} mb={4}>
+                      <Image
+                        src={imageUrl}
+                        alt={`Problem image ${index + 1}`}
+                        width={"50%"}
+                        height={"auto"}
+                        maxW="50vw"
+                        mx="auto"
+                      />
+                    </Center>
+                  );
+                })}
+            </Box>
+          )}
+          {randomEndpoint === "/api/physicsImgProblem" && (
+            <Box mt={5}>
+              <Text fontWeight="bold" mb={2}>
+                Images:
+              </Text>
+              {problem.Images &&
+                problem.Images.map((imageUrl, index) => {
+                  return (
+                    <Center key={index} mb={4}>
+                      <Image
+                        src={imageUrl}
+                        alt={`Problem image ${index + 1}`}
+                        width={"50%"}
+                        height={"auto"}
+                        maxW="50vw"
+                        mx="auto"
+                      />
+                    </Center>
+                  );
+                })}
+            </Box>
+          )}
 
           {!isNumericalProblem(problem) && (
             <Box mt={5} key={`${problemType}-${Date.now()}`}>

diff --git a/src/server/mongodb/actions/mcatProblem.js b/src/server/mongodb/actions/mcatProblem.js
@@ -4,25 +4,27 @@ import {
   mcatScienceImgModel,
 } from "../models/mcat_problem";
 
+import _ from "lodash";
+
 async function getRandomReadingProblem() {
-  const randomDocument = await mcatReadingValModel.aggregate([
-    { $sample: { size: 1 } },
+  const randomDocuments = await mcatReadingValModel.aggregate([
+    { $sample: { size: 5 } },
   ]);
-  return randomDocument[0];
+  return _.sample(randomDocuments);
 }
 
 async function getRandomScienceProblem() {
-  const randomDocument = await mcatScienceValModel.aggregate([
-    { $sample: { size: 1 } },
+  const randomDocuments = await mcatScienceValModel.aggregate([
+    { $sample: { size: 5 } },
   ]);
-  return randomDocument[0];
+  return _.sample(randomDocuments);
 }
 
 async function getRandomScienceImagesProblem() {
-  const randomDocument = await mcatScienceImgModel.aggregate([
-    { $sample: { size: 1 } },
+  const randomDocuments = await mcatScienceImgModel.aggregate([
+    { $sample: { size: 5 } },
   ]);
-  return randomDocument[0];
+  return _.sample(randomDocuments);
 }
 
 export {

diff --git a/yarn.lock b/yarn.lock
@@ -3113,6 +3113,11 @@ [email protected]:
   resolved "https://registry.yarnpkg.com/lodash.mergewith/-/lodash.mergewith-4.6.2.tgz#617121f89ac55f59047c7aec1ccd6654c6590f55"
   integrity sha512-GK3g5RPZWTRSeLSpgP8Xhra+pnjBC56q9FZYe1d5RN3TJ35dbkGy3YqBSMbyCrlbi+CM9Z3Jk5yTL7RCsqboyQ==
 
+lodash@^4.17.21:
+  version "4.17.21"
+  resolved "https://registry.yarnpkg.com/lodash/-/lodash-4.17.21.tgz#679591c564c3bffaae8454cf0b3df370c3d6911c"
+  integrity sha512-v2kDEe57lecTulaDIuNTPy3Ry4gLGJ6Z1O3vE1krgXZNrsQ+LFTGHVxVjcXPs17LhbZVGedAJv8XZ1tvj5FvSg==
+
 log-update@^4.0.0:
   version "4.0.0"
   resolved "https://registry.yarnpkg.com/log-update/-/log-update-4.0.0.tgz#589ecd352471f2a1c0c570287543a64dfd20e0a1"