From 06f15fc8faef6c2323634899c5eb7a9f09bd511e Mon Sep 17 00:00:00 2001
From: Kevin-Umali <kevinumali0999@gmail.com>
Date: Sat, 30 Sep 2023 13:14:16 +0800
Subject: [PATCH] Fix page slow api call, update openai prompt and added theme
 for dark/light mode

---
 client/src/components/CustomMarkdown.tsx      |  2 +-
 client/src/components/Navbar.tsx              | 12 +--
 .../components/generate/CategoryFilter.tsx    |  2 +-
 .../src/components/generate/PurposeFilter.tsx |  8 +-
 client/src/main.tsx                           |  3 +-
 client/src/pages/Home.tsx                     |  7 +-
 client/src/styles/theme.ts                    | 66 ++++++++++++++
 server/src/controllers/openai.controller.ts   | 87 ++++++++++---------
 8 files changed, 125 insertions(+), 62 deletions(-)
 create mode 100644 client/src/styles/theme.ts

diff --git a/client/src/components/CustomMarkdown.tsx b/client/src/components/CustomMarkdown.tsx
index 1197b36..5b18110 100644
--- a/client/src/components/CustomMarkdown.tsx
+++ b/client/src/components/CustomMarkdown.tsx
@@ -60,7 +60,7 @@ const CustomMarkdown: React.FC<CustomMarkdownrProps> = ({ content }) => {
             component: Link,
             props: { mb: 2, textDecorationLine: "underline" },
           },
-          img: { component: Image, props: { mb: 4, loading: "lazy" } },
+          img: { component: Image, props: { mb: 4 } },
           pre: {
             component: MarkdownPre,
             props: { mb: 4 },
diff --git a/client/src/components/Navbar.tsx b/client/src/components/Navbar.tsx
index 9e76fb6..940b371 100644
--- a/client/src/components/Navbar.tsx
+++ b/client/src/components/Navbar.tsx
@@ -7,17 +7,7 @@ const Navbar: React.FC = () => {
   const { colorMode, toggleColorMode } = useColorMode();
 
   return (
-    <Flex
-      as="nav"
-      align="center"
-      justify="space-between"
-      wrap="wrap"
-      padding={{ base: "1rem", md: "1.5rem" }}
-      bg={colorMode === "light" ? "white" : "gray.800"}
-      color={colorMode === "light" ? "gray.600" : "white"}
-      boxShadow="sm"
-      width="100%"
-    >
+    <Flex as="nav" align="center" justify="space-between" wrap="wrap" padding={{ base: "1rem", md: "1.5rem" }} boxShadow="sm" width="100%">
       <Flex align="center" mr={5}>
         <Box display={{ base: "block", md: "none" }} mr="2"></Box>
         <Box>
diff --git a/client/src/components/generate/CategoryFilter.tsx b/client/src/components/generate/CategoryFilter.tsx
index 5f83e4a..e2fbf42 100644
--- a/client/src/components/generate/CategoryFilter.tsx
+++ b/client/src/components/generate/CategoryFilter.tsx
@@ -11,7 +11,7 @@ const CategoryFilter: React.FC<CategoryFilterProps> = ({ categories, onCategoryC
       <HStack spacing={4} alignItems="center">
         <Text fontSize="md">Category:</Text>
       </HStack>
-      <Select mt={2} defaultValue={"Anything"} placeholder="Select category" onChange={(e) => onCategoryChange(e.target.value)}>
+      <Select mt={2} defaultValue={0} placeholder="Select category" onChange={(e) => onCategoryChange(e.target.value)}>
         {categories.map((category) => (
           <option key={category} value={category}>
             {category}
diff --git a/client/src/components/generate/PurposeFilter.tsx b/client/src/components/generate/PurposeFilter.tsx
index 80399b5..c34debd 100644
--- a/client/src/components/generate/PurposeFilter.tsx
+++ b/client/src/components/generate/PurposeFilter.tsx
@@ -8,10 +8,10 @@ const PurposeFilter: React.FC<PurposeFilterProps> = ({ onPurposeChange, ...props
   return (
     <Box {...props}>
       <Text mb={2}>End Result Purpose:</Text>
-      <Select onChange={(e) => onPurposeChange(e.target.value)}>
-        <option value="personal">Personal Use</option>
-        <option value="gift">Gift</option>
-        <option value="other">Other</option>
+      <Select defaultValue={0} onChange={(e) => onPurposeChange(e.target.value)}>
+        <option value="Personal Use">Personal Use</option>
+        <option value="Gift">Gift</option>
+        <option value="Other">Other</option>
       </Select>
     </Box>
   );
diff --git a/client/src/main.tsx b/client/src/main.tsx
index 9f51e8a..099390f 100644
--- a/client/src/main.tsx
+++ b/client/src/main.tsx
@@ -4,11 +4,12 @@ import App from "./App.tsx";
 import { ChakraProvider } from "@chakra-ui/react";
 import "./styles/index.css";
 import { BrowserRouter as Router } from "react-router-dom";
+import theme from "./styles/theme.ts";
 
 ReactDOM.createRoot(document.getElementById("root")!).render(
   <React.StrictMode>
     <Router>
-      <ChakraProvider>
+      <ChakraProvider theme={theme}>
         <App />
       </ChakraProvider>
     </Router>
diff --git a/client/src/pages/Home.tsx b/client/src/pages/Home.tsx
index 848b2cc..bfbe836 100644
--- a/client/src/pages/Home.tsx
+++ b/client/src/pages/Home.tsx
@@ -1,4 +1,4 @@
-import { useState, useCallback, useMemo } from "react";
+import { useState, useCallback, useMemo, useEffect } from "react";
 import {
   VStack,
   Box,
@@ -21,7 +21,6 @@ import {
   Icon,
   useBreakpointValue,
   Container,
-  useSafeLayoutEffect,
 } from "@chakra-ui/react";
 import { FaRegLightbulb, FaInfoCircle } from "react-icons/fa";
 
@@ -50,7 +49,7 @@ const Home = () => {
   const [availableTime, setAvailableTime] = useState(0);
   const [budget, setBudget] = useState(0);
   const [tools, setTools] = useState([""]);
-  const [purpose, setPurpose] = useState("");
+  const [purpose, setPurpose] = useState("Personal Use");
   const [safetyConfirmed, setSafetyConfirmed] = useState(false);
   const [showAdvancedOptions, setShowAdvancedOptions] = useState(false);
   const { activeStep, goToNext, goToPrevious } = useSteps({
@@ -88,7 +87,7 @@ const Home = () => {
     }
   };
 
-  useSafeLayoutEffect(() => {
+  useEffect(() => {
     fetchTotalCount();
   }, []);
 
diff --git a/client/src/styles/theme.ts b/client/src/styles/theme.ts
new file mode 100644
index 0000000..8bd8e2d
--- /dev/null
+++ b/client/src/styles/theme.ts
@@ -0,0 +1,66 @@
+import { extendTheme } from "@chakra-ui/react";
+
+const theme = extendTheme({
+  colors: {
+    text: {
+      light: "#0d0702",
+      dark: "#fdf7f2",
+    },
+    background: {
+      light: "#ffffff",
+      dark: "#000000",
+    },
+    primary: {
+      light: "#6aabec",
+      dark: "#135495",
+    },
+    secondary: {
+      light: "#c5c5f7",
+      dark: "#08083a",
+    },
+    accent: {
+      light: "#1cd4d4",
+      dark: "#2be3e3",
+    },
+    border: {
+      light: "#e0e0e0",
+      dark: "#1a1a1a",
+    },
+  },
+  styles: {
+    global: ({ colorMode }: { colorMode: string }) => ({
+      "html, body": {
+        bg: colorMode === "dark" ? "background.dark" : "background.light",
+        lineHeight: "1.5",
+      },
+      "*": {
+        color: colorMode === "dark" ? "text.dark" : "text.light",
+        transition: "color 0.2s",
+      },
+      "button, input, textarea, select": {
+        transition: "all 0.2s",
+      },
+      hr: {
+        borderColor: colorMode === "dark" ? "border.dark" : "border.light",
+      },
+    }),
+  },
+  fonts: {
+    body: "Segoe UI, Poppins, Noto Sans Old North Arabian, sans-serif",
+    heading: "Segoe UI, Poppins, Noto Sans Old North Arabian, sans-serif",
+    mono: "Segoe UI, Poppins, Noto Sans Old North Arabian, sans-serif",
+  },
+  components: {
+    Divider: {
+      baseStyle: ({ colorMode }: { colorMode: string }) => ({
+        borderColor: colorMode === "dark" ? "border.dark" : "border.light",
+      }),
+    },
+  },
+  config: {
+    initialColorMode: "light",
+    useSystemColorMode: false,
+  },
+});
+
+export default theme;
diff --git a/server/src/controllers/openai.controller.ts b/server/src/controllers/openai.controller.ts
index 86b9dd0..a614906 100644
--- a/server/src/controllers/openai.controller.ts
+++ b/server/src/controllers/openai.controller.ts
@@ -17,45 +17,52 @@ interface IdeaRequestBody {
 export const generateIdea = async (req: Request, res: Response, next: NextFunction) => {
   try {
     const { materials, onlySpecified, difficulty, category, tools, time, budget, endPurpose }: IdeaRequestBody = req.body;
+    console.log(materials, onlySpecified, difficulty, category, tools, time, budget, endPurpose);
 
     const openai: OpenAI = req.app.get("openai");
 
-    const materialsString = onlySpecified ? `Only use the following specified materials: ${materials.join(", ")}.` : `Include any materials, especially the specified ones: ${materials.join(", ")}.`;
+    const materialsDescription = onlySpecified
+      ? `Only use the following specified materials: ${materials.join(", ")}.`
+      : `Include any materials, especially the specified ones: ${materials.join(", ")}.`;
 
-    const toolsString = tools.length > 0 ? `Work with these tools: ${tools.join(", ")}.` : "Recommend tools that might be beneficial for the projects.";
+    const toolsDescription = tools.filter(Boolean).length > 0 ? `Work with these tools: ${tools.join(", ")}.` : "Recommend tools that might be beneficial for the projects.";
 
-    const timeString = time === 0 ? "There's no strict time constraint." : `The available time to complete the project is approximately ${time} hours.`;
+    const timeDescription = time === 0 ? "There's no strict time constraint." : `The available time to complete the project is approximately ${time} hours.`;
 
-    const budgetString = budget === 0 ? "The budget is flexible." : `The budget is set between ₱0 and ₱${budget}.`;
+    const budgetDescription = budget === 0 ? "The budget is flexible." : `The budget is set between ₱0 and ₱${budget}.`;
 
-    const purposeString = endPurpose !== "other" ? `The desired outcome of these projects is primarily for ${endPurpose}.` : "The end goal for these projects is versatile.";
+    const purposeDescription = endPurpose.toLowerCase() !== "other" ? `The desired outcome of these projects is primarily for ${endPurpose}.` : "The end goal for these projects is versatile.";
 
     const prompt: string = `
-      Please generate a response in the following JSON format:
-
-      {
-          "ideas": [
-              {
-                  "title": "The name of the project",
-                  "materials": ["List of required materials"],
-                  "tools": ["List of required tools"],
-                  "time": "Estimated time to complete the project",
-                  "budget": "Estimated budget for the project in ₱",
-                  "steps": ["Detailed step-by-step guide to complete the project"],
-                  "description": "A short descriptive text of the project"
-              },
-              ... // And so on for three ideas
-          ]
-      }
-
-      I'm looking for 3 unique DIY project concepts suitable for a ${difficulty} difficulty within the ${category} category.
-      ${materialsString}
-      ${toolsString}
-      ${timeString}
-      ${budgetString}
-      ${purposeString}
-      `;
+    I'm looking for 3 unique DIY project concepts. Here are the details:
+
+    - Difficulty: ${difficulty}
+    - Category: ${category}
+    - Materials: ${materialsDescription}
+    - Tools: ${toolsDescription}
+    - Time: ${timeDescription}
+    - Budget: ${budgetDescription}
+    - Purpose: ${purposeDescription}
+
+    Please provide the ideas in the following JSON format:
+
+    {
+        "ideas": [
+            {
+                "title": "The name of the project",
+                "materials": ["List of required materials"],
+                "tools": ["List of required tools"],
+                "time": "Estimated time to complete the project",
+                "budget": "Estimated budget for the project in ₱, including the materials and tools cost if needed",
+                "steps": ["Detailed step-by-step guide to complete the project"],
+                "description": "A short descriptive text of the project"
+            },
+            ... // Please provide three ideas in total.
+        ]
+    }
+    `;
 
+    console.log(prompt);
     const completion = await openai.chat.completions.create({
       model: "gpt-3.5-turbo",
       messages: [
@@ -90,17 +97,17 @@ export const explainProjectByTitle = async (req: Request, res: Response, next: N
     const openai: OpenAI = req.app.get("openai");
 
     const prompt = `
-      Please provide a detailed, step-by-step guide on how to build the project described below:
-      
-      Title: ${title}
-      Materials Required: ${materials.join(", ")}
-      Tools Needed: ${tools.join(", ")}
-      Estimated Time for Completion: ${time}
-      Budget Estimate: ${budget}
-      Project Overview: ${description}
-
-      Begin with an overview, and then break down each step, keeping in mind the materials and tools mentioned.
-      `;
+    I need a detailed, step-by-step guide for building a project. Here are the project details:
+
+    - **Title**: ${title}
+    - **Materials Required**: ${materials.join(", ")}
+    - **Tools Needed**: ${tools.join(", ")}
+    - **Estimated Time for Completion**: ${time} hours (or specify units as required)
+    - **Budget Estimate**: ₱${budget} (or use the appropriate currency symbol)
+    - **Project Overview**: ${description}
+
+    Please start with a brief overview of the process and then break down each step in detail, taking into consideration the provided materials and tools. Each step should be clear and actionable.
+    `;
 
     const completion = await openai.chat.completions.create({
       model: "gpt-3.5-turbo",