fix: adjust AI button placement and fix fractions in prompt

Author: Speedrunyourknowledge

calc-backend/src/controllers/gemini.controller.ts

@@ -19,7 +19,7 @@ export async function askIntegral(req: Request, res: Response) {
     config: {
       maxOutputTokens: 225,
       temperature: 0.3,
-      systemInstruction: "You are a calculus 1 tutor. You will brielfy summarize the integral asked in the context of a Riemann Sum to a student. The student has a program to let them visualize their function that has their function graphed and they can move a slider to change the amount of rectangles in the Riemann Sum. Try to limit yourself to 150 words. You should use html tags for math symbols, instead of '^' use <sup></sup> and instead of '/' for fractions you can use &frasl;"
+      systemInstruction: "You are a calculus 1 tutor. You will brielfy summarize the integral asked in the context of a Riemann Sum to a student. The student has a program to let them visualize their function that has their function graphed and they can move a slider to change the amount of rectangles in the Riemann Sum. Try to limit yourself to 150 words. You should use html tags for math symbols, instead of '^' use <sup></sup>"
     },
   });
 

calc-frontend/src/App/RootLayout.tsx

@@ -13,9 +13,9 @@ function RootLayout(){
     <>
       <ScrollRestoration/>
       <div className="flex flex-col">
-        <div className="header flex items-center justify-between gap-4">
+        <div className="header flex items-center justify-between gap-[15px]">
 
-          <div className="flex items-center gap-2">
+          <div className="flex items-center gap-[8px]">
             <Link to ='/'>
                 <h1 className="w-fit font-medium">Calc Visualizer</h1>
             </Link>

calc-frontend/src/components/ui/AskAIButtonIntegral.tsx

@@ -22,7 +22,7 @@ function AskAIButtonIntegral({
   const [open, setOpen] = useState(false);
   const [loading, setLoading] = useState(false);
   const [markdownText, setMarkdownText] = useState(
-    `## 🤖 Ask AI\n\n### Graph your function, then click above for an explanation!`
+    `### 🤖 Ask AI\n### Graph your function, then click above for an explanation!`
   );
 
   const handleAskAI = async () => {
@@ -46,7 +46,7 @@ function AskAIButtonIntegral({
       onAIResponseComplete();
 
     } catch (error) {
-      setMarkdownText(`## ❌ An error occured, please try again`);
+      setMarkdownText(`### ❌ An error occured, please try again`);
       console.error(error);
     } finally {
       setLoading(false);
@@ -56,7 +56,7 @@ function AskAIButtonIntegral({
   // the user has created a new graph
   useEffect(() => {
     if(key !== ''){
-      setMarkdownText(`## 🤖 Ask AI\n\n### Click above for an explanation!`);
+      setMarkdownText(`### 🤖 Ask AI\n### Click above for an explanation!`);
     }
   },[key])
 
@@ -66,10 +66,10 @@ function AskAIButtonIntegral({
         onClick={() => {
           setOpen(true);
         }}
-        className="cursor-pointer relative w-16 h-16 rounded-xl p-0.5 bg-gradient-to-tr from-pink-500 via-yellow-400 to-blue-500 hover:scale-105 transition-transform"
+        className="cursor-pointer relative w-15 h-15 rounded-xl p-0.5 bg-gradient-to-tr from-pink-500 via-yellow-400 to-blue-500 hover:scale-105 transition-transform"
       >
         <div className="flex flex-col items-center justify-center w-full h-full bg-gray-800 text-white rounded-xl text-xs font-medium">
-          <div className="text-lg font-bold mb-1">?</div>
+          <div className="text-lg font-bold">?</div>
           Ask AI
         </div>
       </button>
@@ -85,16 +85,16 @@ function AskAIButtonIntegral({
             <div className="flex justify-between items-center mb-2 border-b-2 border-solid gap-2">
               {canAskAI ? (
                 <button onClick={handleAskAI} className="cursor-pointer pb-1">
-                  <h2 className="text-xl font-semibold">{`Ask AI About: ${func}`}</h2>
+                  <h3 className="font-semibold">{`Ask AI About: ${func}`}</h3>
                 </button>
               ) : (
                 <button
                   className="cursor-pointer pb-1"
                   onClick={() => setOpen(false)}
                 >
-                  <h2 className="text-l font-medium">
+                  <h3 className="font-medium">
                     Generate a New Function to Ask a Question
-                  </h2>
+                  </h3>
                 </button>
               )}
 

calc-frontend/src/components/ui/SaveFunctionButton.tsx

@@ -20,7 +20,7 @@ function SaveFunctionButton({onSave, saving, enableSave}: {onSave: (session: Ses
 
     if(saving){
       return (
-        <button className="back-button ml-[1rem]">
+        <button className="back-button">
           <div className="animate-spin w-[1.125rem] h-[1.125rem] border-3 border-t-transparent border-white rounded-full"></div>
         </button>
       )
@@ -32,7 +32,7 @@ function SaveFunctionButton({onSave, saving, enableSave}: {onSave: (session: Ses
         <TooltipProvider delayDuration={0}>
           <Tooltip>
             <TooltipTrigger asChild>
-              <button className="back-button ml-[1rem] disabled">Save Function</button>
+              <button className="back-button disabled">Save Function</button>
             </TooltipTrigger>
 
             <TooltipContent className="tooltip-content">
@@ -45,7 +45,7 @@ function SaveFunctionButton({onSave, saving, enableSave}: {onSave: (session: Ses
     }
 
     return (
-      <button className="back-button ml-[1rem]" onClick={handleClick}>
+      <button className="back-button" onClick={handleClick}>
         Save Function
       </button>
     )

calc-frontend/src/pages/CustomIntegral.tsx

@@ -105,7 +105,6 @@ function CustomInt() {
       newFunc = generateFunction(funcLatex, python_code ?? true)
     }
     catch{
-      setCanAskAI(false);
       setFormatCheck('Please enter a valid function')
       return 1
     }
@@ -118,7 +117,6 @@ function CustomInt() {
     // check if bounds are valid
     if(checkBounds !== 'success'){
       setFormatCheck(checkBounds)
-      setCanAskAI(false);
       return 1
     }
 
@@ -133,10 +131,10 @@ function CustomInt() {
     // check that new graph is different from old one
     if(newFuncKey !== funcKey){
       setFuncKey(newFuncKey)
+      setCanAskAI(true);
     }
 
     setFormatCheck('')
-    setCanAskAI(true);
     setJsFunc(generateFunction(editMF.current.latex(), false));
 
     return 0
@@ -176,14 +174,17 @@ function CustomInt() {
 
   return(
     <div>
-      <div style={{display:'flex', justifyContent:'space-between'}}>
+      <div className="gap-[15px]" style={{display:'flex', justifyContent:'space-between'}}>
         <Link to="/integrals" tabIndex={-1}>
           <button className="back-button"> Back</button>
         </Link>
-      
-        <SaveFunctionButton onSave={saveFunction} saving={saving} enableSave={enableSave}></SaveFunctionButton>
 
-        <div></div>
+        <div>
+          <SaveFunctionButton onSave={saveFunction} saving={saving} enableSave={enableSave}></SaveFunctionButton>
+        </div>
+        
+        <AskAIButton func={jsFunc} lowerBound={bounds[0]} upperBound={bounds[1]} key={funcKey} 
+            canAskAI={canAskAI} onAIResponseComplete={handleAIResponseComplete}/>
       </div>
 
       <div className="center-header flex flex-wrap justify-center gap-[.5rem]" style={{alignItems:"center"}}>
@@ -206,13 +207,6 @@ function CustomInt() {
         <button className="go-button brighten mb-[.5rem]" onClick={()=>generateOutput()}>Graph</button>
       </div>
 
-      <div style={{display:'grid'}}>
-        <div className="" style={{position:'fixed', zIndex:'1', justifySelf:'end'}}>
-          <AskAIButton func={jsFunc} lowerBound={bounds[0]} upperBound={bounds[1]} key={funcKey} 
-            canAskAI={canAskAI} onAIResponseComplete={handleAIResponseComplete}/>
-        </div>
-      </div>
-
       {
         formatCheck === ''? func === ''? null :
           <div className="graph-outer-box" style={{justifyContent: "center", marginTop:'.5rem'}}>