From 9a0bb1e26e03e14c518af169161af074ff450cbd Mon Sep 17 00:00:00 2001 From: mphstar Date: Sat, 22 Feb 2025 18:32:22 +0700 Subject: [PATCH] handling loading + slicing kuis page --- package-lock.json | 7 +++++ package.json | 1 + public/assets/images/menyusun-huruf.png | Bin 0 -> 9806 bytes public/assets/images/tebak-huruf.png | Bin 0 -> 3661 bytes src/App.tsx | 3 +- src/components/molecules/NavLink.tsx | 6 ++-- src/components/organisms/HeaderPage.tsx | 4 +-- src/components/organisms/MyLoading.tsx | 12 ++++++++ src/components/templates/LayoutPage.tsx | 4 +-- src/helper/MediapipeHelper.ts | 5 ++- src/index.css | 2 ++ src/pages/Home.tsx | 39 +++++++++++++----------- src/pages/Kuis.tsx | 29 +++++++++++++++--- tailwind.config.js | 3 ++ 14 files changed, 82 insertions(+), 33 deletions(-) create mode 100644 public/assets/images/menyusun-huruf.png create mode 100644 public/assets/images/tebak-huruf.png create mode 100644 src/components/organisms/MyLoading.tsx 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 0000000000000000000000000000000000000000..fa33804559abf805e52e70009074f9ef5a046fb0 GIT binary patch literal 9806 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 literal 0 HcmV?d00001 diff --git a/public/assets/images/tebak-huruf.png b/public/assets/images/tebak-huruf.png new file mode 100644 index 0000000000000000000000000000000000000000..3e86e3f4e9a1c5dbb337ebf911bc8d5cf20e33ec GIT binary patch literal 3661 zcmV-T4zlryP)1^@s6`Gxm200009a7bBm000XU z000XU0RWnu7ytkO0drDELIAGL9O(c600d`2O+f$vv5yP+DHywCf*cLH$okbd;bjUd8TLC9Jym_-r}ftYz!c>c*lU?YoKoSZ0LNK#NA4>U3qremP7)M%ZGui)%P> zV##C}QmL@KkxC7OLZJ!iv1j^l?6Mzf3i=>#s>jTj$PEoZY-+04B}orR0J~s*{#Hor za>3-()WF=EAB5c>e*$7`3TlTChGf%T{9%vbGoX%%#bQBG6raM8eA(_wjK#t8)=6mk z*Z-ilNLz##o;+rxr3iHj3KJIH?sts{Lu5h$NPhQznBBG+YKySfa7(B&vewd<6~)r1 z-hK8w`2KtpgxQ-=8;n^`U0KfLP3Dz> z8OuRu-)D!juY~Fb3PQMCi<*n0a`u#7sfj3Rlt3ZXwF(?XD*w0EOdJv=J~j0&`4!v@ z14AeRIqHW5sjN6v_c`S3T`m_zV7nw>8}dVh_vlHmA1V|nP1VGyrL(UD5-8oh3Im0= zs-8HlO1H*>v#*47_h;p9&elLdF0Cq!qvEjU>??u%P@?YZWQmKeLe|p+mHe$pc&Sd7ye>Wp!tZA zf)>eW#A`2OMnvy$(!KCP`l|rgXJ4b!Xe?s zCw71VOa}yc&c4RN%q9gx!Vse)qWp3KQ-OjoXSl$_u+PaAQ%KToRz~*8q&dT%O*%V$ zC1(_T&BX%+0s4jKjn_|?6~~S_`^7}@KtYOvC$$euP}0t0@%XNK9@*E5Oy_6vGYVAk z38^h+7g_0wlk+P82Z4)X2_>_gSr%9*#kH^;B(Gb;E^MRA?cPsQ!>nhF>j63C^NU>r zfk41gfkMu5vSml7t1)M97c_qH`ix&jp=BAUHu%5m#f!cdEFg=6zU9HJU#Tldn1>#o zh2S!&Y`bsmDBsR0X#NT;Ajg(+=D2|plngSlG!O`ZNkodsfD7X^!DKSI223Kl01TCe zaw;RGtQj(ah`n%4Q!t$3P(Tm{4wKaF`kZ>h?RH1OBwQSZ;o>k17l&cEI1EGLM1jL3 z+;SL(i^DKn9EM?P*Mw|n`e+}L^eAIAzzrO_@{=s(G{=hb< z2Yf!?1uzK{-P(zdPMZ>jAS-(b1*P{!g$Z$n1}}kCDmj;RctF4~4ROCUCm0*M2EW;V z5YC?Yf8Kubb>Bfh_Xzqsr{R`Ugg^b^NP#c}`MB5qcm&Sq9J3oy5XvuqTa1j4UoU-p ztn_g^;FiNMTpWhs;xG&sr#e`AgbNp^I&g6s4K5DDaB&!hi^DLYBuP==FbTIDhT-Bc z3>SxC4A1A#{Knajji<>s-1P-$Ycp1aL31QlspMSNF(l536Q|+Xr+)`#dGxXG8!Euq zdjGv}VN6rui)fIr(xP) z!A5)g3bjOu`eNMTp%HN(cJy&25%wQtP9)^FPP=wznEIq>3Z z@Xp&G8g5UMfc?LISr$kO?N>gFW@Bl}+z9lf5G%qEblw;5p0n-#)rRag(zP0_(B5Y5 zE*nEb=9jJO)g8QzmZui^$l;^%8c!o6D}0QLnXa%LhCb=h$G!($CJQMx;QapXpZ?I) zIf-fWH+;~WLf2cbX|{O8RxGZ&HPo%qgj4@->+Wv)bx%VMLK~%)twF_czA~m7G=w-c z^(PL((>Dy$kOdz8R_=3{g$D#2$7zg!z+x>o>ojJ!#(fUEv@$l%v3lFIh7iX}POctk z2yx7=1F9Ezw8k(Zq*4tx2yLt3vJE@o=^KV=jDVm)@5;`UI9s=U8O%bd8ogzJ+LhMz zxbm8*0uOp{1U=p3?3qstpF=m`)~mjG;>jP&bpteIO^a(wEx=_J=IYkSdaPKG7P2U# z6*sKHLun0E99Rino%02Yw@u^XsJMCaCNz7}mJ0(n-92w>)h92TyI-gcg4QT%ya+`P1@K8Vd#8aOe8G&&JQ4 zKx62ML?Tfz0QWgav&WOSox!VpWOx+3UT;BLy`*X@&b+o3nSE_-ZOw^;pBqdjlLzs~ zEnomH4${(6_{FYWyBdO_5EwyQIIp%O%3iqL?p(lu0YdNj^XK<>cX#h8_qn`V%X0qQ zIoVI9V=VzAQ&p3QbK-5ROE^E@&KuU7GsyqpMf1?kN>sb8)iZI0UX;y_&agW+nyK zt}T3bR5a3(Emllu0szIL(}pqB5-lC=zV!BJ3D2E zZWmXsT!E>0Ja6C9P-xG(?(TlQ_O^&aeRVpWmeU~gqHTK7;Ev+_O!k=FxNv;p_xoY_ zipr;@>Hmn1I&WW7Q!`{FSDuxW^FL!(7Pgf;9FC1&mv663D+B3w;8-Wmx0MR74T(b^ zMqlpi?5rGhq_QHYg{UQdyt+H_DzB8G!NI&V4*gl7Ww+*v+S)3Al02n~Zd}ig?z}$V zz^cy9En5Ghgwj!bh1CZrCzMDeV0vmQ??22UQ8L z>95-FD5%?RxO3qS^`T%8;**nk-|1{JxiOpG$qTO)%NYWdINA|&J<#6K0f9gODnTzO zh;((y;}km~amL2R^7iS4*SfzoUE^-5R_F~zqeB-l1h&Utws)+MttYT_Da6r2)uA=H z2JEd~#|xxK$#?P$fePvt=?Yf+Pz(V&x3 zHq@4CxM}dJ93vv#t8+KpAU}EW!i79brJpgPqof`eM+h(lMhl{Kc?O!b&11gE(kLVGa~7#M`ABxnJbJe(X#6iWv^v1=}pf{$WRLrVX9h$wGF3n;Wr*|===H}#T z9WIUmC{3k^wh$EPFV-3>l0DF77242>C@3h=U2dd*)uby0GF_RV4esEk_TRPB(Mg?dvK|4VeKW#4x>caWv>fPgh3A;h!hZls#83 z`Kh3nFr_;{c61aDa4CGJfhZS8gI@Hsd_@R8zkV%LM3I1DMyE!O!uRRv>98yg`kMiK zQ9rj()2se@k)anoIXPdY=i`WJ9P7y9EDZz-%5+YhI<-dm8Rs5C=(zH-e;7oB)!X<7 z=d%=$Xp^7u_!OK!H>_JY*ro{r^tvzY*hf7_)s7*2;PyA`a1 zl)5-@YC25s&0eqkj!rz>>h}lns#h$Z{;(ik0hX*^J0oh>OsgJx)8q2*^!s07*5_>6 zwCRFs^MdB^aWDZnSIqY21STt$yKzwrDqXmwST}BCyC5AG=(xk^b)y7c96@F+hZS)0 zE9mulmnz~azF9}yuzW&xTib1yLR-*CwD|o|E{?+};-V#lX*(ybA|6`t<&hEDnkj@P fQRy9LWrLpr7$fXoNgM5#00000NkvXXu0mjfu5SNd literal 0 HcmV?d00001 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",