diff --git a/package-lock.json b/package-lock.json index e5bea0c..739d041 100644 --- a/package-lock.json +++ b/package-lock.json @@ -8,6 +8,7 @@ "name": "ksuli-sibi", "version": "0.0.0", "dependencies": { + "@fontsource/poppins": "^5.1.1", "@mediapipe/tasks-vision": "^0.10.14", "@tensorflow/tfjs": "^4.20.0", "clsx": "^2.1.1", @@ -842,6 +843,12 @@ "node": "^18.18.0 || ^20.9.0 || >=21.1.0" } }, + "node_modules/@fontsource/poppins": { + "version": "5.1.1", + "resolved": "https://registry.npmjs.org/@fontsource/poppins/-/poppins-5.1.1.tgz", + "integrity": "sha512-PQVKHGQOK+UpVNPzTFF9Z9ez3CIDkunfvRXGH95hiDoqWJc1shW4JFqe4tEoqnq7RtZaYrw9aWQq58L4eny5xg==", + "license": "OFL-1.1" + }, "node_modules/@humanwhocodes/module-importer": { "version": "1.0.1", "resolved": "https://registry.npmjs.org/@humanwhocodes/module-importer/-/module-importer-1.0.1.tgz", diff --git a/package.json b/package.json index 64a06a1..a85dd3a 100644 --- a/package.json +++ b/package.json @@ -10,6 +10,7 @@ "preview": "vite preview" }, "dependencies": { + "@fontsource/poppins": "^5.1.1", "@mediapipe/tasks-vision": "^0.10.14", "@tensorflow/tfjs": "^4.20.0", "clsx": "^2.1.1", diff --git a/public/assets/images/menyusun-huruf.png b/public/assets/images/menyusun-huruf.png new file mode 100644 index 0000000..fa33804 Binary files /dev/null and b/public/assets/images/menyusun-huruf.png differ diff --git a/public/assets/images/tebak-huruf.png b/public/assets/images/tebak-huruf.png new file mode 100644 index 0000000..3e86e3f Binary files /dev/null and b/public/assets/images/tebak-huruf.png differ diff --git a/src/App.tsx b/src/App.tsx index 2788055..b4952db 100644 --- a/src/App.tsx +++ b/src/App.tsx @@ -1,6 +1,7 @@ import { Suspense } from "react"; import { Route, Routes } from "react-router-dom"; import myRoute from "./routes/routes"; +import MyLoading from "./components/organisms/MyLoading"; const App = () => { return ( @@ -11,7 +12,7 @@ const App = () => { key={index} path={route.path} element={ - Loading...}> + }> } diff --git a/src/components/molecules/NavLink.tsx b/src/components/molecules/NavLink.tsx index 3c11074..198acf6 100644 --- a/src/components/molecules/NavLink.tsx +++ b/src/components/molecules/NavLink.tsx @@ -1,6 +1,4 @@ import { cn } from "@/lib/utils"; -import { Link } from "react-router-dom"; - type NavLinkProps = { href: string; name: string; @@ -9,7 +7,7 @@ type NavLinkProps = { const NavLink = ({ href, name, isActive }: NavLinkProps) => { return ( - +
  • { > {name}
    • - +     ); }; diff --git a/src/components/organisms/HeaderPage.tsx b/src/components/organisms/HeaderPage.tsx index e3935c9..954d641 100644 --- a/src/components/organisms/HeaderPage.tsx +++ b/src/components/organisms/HeaderPage.tsx @@ -8,7 +8,7 @@ const HeaderPage = () => { const navStore = useNavbarStore(); return (
    -
    +
    { />

    K-SULI

    -

    Kedai Susu Tuli

    +

    Kedai Susu Tuli

      { + return ( +
      +
      +

      Loading...

      +
      + ); +}; + +export default MyLoading; \ No newline at end of file diff --git a/src/components/templates/LayoutPage.tsx b/src/components/templates/LayoutPage.tsx index 2e101d2..3321314 100644 --- a/src/components/templates/LayoutPage.tsx +++ b/src/components/templates/LayoutPage.tsx @@ -4,9 +4,9 @@ import FooterPage from "../organisms/FooterPage"; const LayoutPage = ({ children }: { children: React.ReactNode }) => { return ( -
      +
      -
      +
      {children}
      diff --git a/src/helper/MediapipeHelper.ts b/src/helper/MediapipeHelper.ts index e969547..9ab68c5 100644 --- a/src/helper/MediapipeHelper.ts +++ b/src/helper/MediapipeHelper.ts @@ -42,13 +42,13 @@ class MediapipeHelper { detectHands = async () => { if (this.videoRef.current === null) { - console.error("Video is not initialized."); + // console.error("Video is not initialized."); return; } if (this.videoRef && this.videoRef.current.readyState >= 2) { if (!this.handLandmarker) { - console.error("HandLandmarker is not initialized."); + // console.error("HandLandmarker is not initialized."); return; } const detections = this.handLandmarker.detectForVideo( @@ -86,7 +86,6 @@ class MediapipeHelper { } } - requestAnimationFrame(this.detectHands); }; } diff --git a/src/index.css b/src/index.css index 5a5f0c5..909e743 100644 --- a/src/index.css +++ b/src/index.css @@ -1,3 +1,4 @@ +@import "@fontsource/poppins"; @tailwind base; @tailwind components; @tailwind utilities; @@ -6,4 +7,5 @@ margin: 0; padding: 0; box-sizing: border-box; + @apply font-poppins; } \ No newline at end of file diff --git a/src/pages/Home.tsx b/src/pages/Home.tsx index d750c39..8857711 100644 --- a/src/pages/Home.tsx +++ b/src/pages/Home.tsx @@ -4,6 +4,7 @@ import { FaCircleCheck } from "react-icons/fa6"; import useNavbarStore from "@/stores/NavbarStore"; import MediapipeHelper from "@/helper/MediapipeHelper"; import DetectionHelper from "@/helper/DetectionHelper"; +import MyLoading from "@/components/organisms/MyLoading"; type PredictResult = { abjad: String; @@ -23,13 +24,18 @@ const Home = () => { const [handPresence, setHandPresence] = useState(false); const onHandDetected = async () => { + if (!mediapipeHelper || !detectionHelper) { + return; + } + + mediapipeHelper.detectHands(); + const result = mediapipeHelper.getResult(); if (result.handPresence) { // console.log("Hand Detected"); setHandPresence(true); const predict = await detectionHelper.makePrediction(result.finalResult); - console.log(predict); if (predict) { setResultPredict((prevState) => ({ @@ -37,7 +43,6 @@ const Home = () => { ...predict, })); } - } else { setHandPresence(false); } @@ -51,25 +56,20 @@ const Home = () => { video: true, }); + setLoadCamera(true); + if (videoRef.current) { videoRef.current.srcObject = stream; + mediapipeHelper = new MediapipeHelper(videoRef); + detectionHelper = new DetectionHelper(); } - mediapipeHelper = new MediapipeHelper(videoRef); - detectionHelper = new DetectionHelper(); - onHandDetected(); - - - } catch (error) { console.error("Error accessing webcam:", error); } - - }; - const store = useNavbarStore(); let mediapipeHelper: MediapipeHelper; let detectionHelper: DetectionHelper; @@ -79,12 +79,14 @@ const Home = () => { startWebcam(); - setLoadCamera(true); - - - return () => { - + if (videoRef.current) { + (videoRef.current.srcObject as MediaStream) + ?.getTracks() + .forEach((track) => { + track.stop(); + }); + } }; }, []); @@ -113,7 +115,10 @@ const Home = () => { >
      ) : ( -
      Loading...
      +
      +
      +

      Loading...

      +
      )}
      diff --git a/src/pages/Kuis.tsx b/src/pages/Kuis.tsx index 45f6003..eae45a7 100644 --- a/src/pages/Kuis.tsx +++ b/src/pages/Kuis.tsx @@ -11,14 +11,35 @@ const Kuis = () => { return (
      -

      Kuis SIBI

      -
      - +

      Ayoo Kuiss

      +

      Be the first!

      +
      +
      + Tebak Huruf +
      +

      Tebak Huruf

      +

      Tebak huruf dan coba simulasikan

      +
      +
      +
      + Menyusun Huruf +
      +

      Menyusun Huruf

      +

      Susun huruf jadi kata yang tepat

      +
      +
      ); }; - export default Kuis; diff --git a/tailwind.config.js b/tailwind.config.js index 126a952..c91eabe 100644 --- a/tailwind.config.js +++ b/tailwind.config.js @@ -3,6 +3,9 @@ export default { content: ["./index.html", "./src/**/*.{js,ts,jsx,tsx}"], theme: { extend: { + fontFamily: { + poppins: ["Poppins", "sans-serif"], + }, container: { center: true, padding: "1rem",