From 749652163b24d9316a86733d83ec7cd545a05673 Mon Sep 17 00:00:00 2001 From: GRZ4NA Date: Fri, 10 Dec 2021 18:12:32 +0100 Subject: [PATCH] style/ui changes --- public/index.html | 4 +- src/assets/loadingCircle.png | Bin 0 -> 19592 bytes src/components/About/index.module.scss | 5 ++ src/components/About/index.tsx | 20 ++++++++ .../AlertDialog/index.module.scss | 4 +- src/{ => components}/AlertDialog/index.tsx | 0 .../AlertDialog/spawnDialog.tsx | 2 +- src/components/CreditTile/index.module.scss | 45 ++++++++++++++++++ src/components/CreditTile/index.tsx | 20 ++++++++ src/components/Overlay/index.tsx | 30 ++++-------- src/components/Results/index.module.scss | 15 ++++++ src/components/Results/index.tsx | 32 +++++++++++++ src/index.scss | 25 +++++++++- src/index.tsx | 13 +++-- 14 files changed, 188 insertions(+), 27 deletions(-) create mode 100644 src/assets/loadingCircle.png create mode 100644 src/components/About/index.module.scss create mode 100644 src/components/About/index.tsx rename src/{ => components}/AlertDialog/index.module.scss (76%) rename src/{ => components}/AlertDialog/index.tsx (100%) rename src/{ => components}/AlertDialog/spawnDialog.tsx (98%) create mode 100644 src/components/CreditTile/index.module.scss create mode 100644 src/components/CreditTile/index.tsx create mode 100644 src/components/Results/index.module.scss create mode 100644 src/components/Results/index.tsx diff --git a/public/index.html b/public/index.html index 495c6cc..78cfedb 100644 --- a/public/index.html +++ b/public/index.html @@ -27,7 +27,9 @@
- Trash Recognizer logo +
+ Trash Recognizer logo +
diff --git a/src/assets/loadingCircle.png b/src/assets/loadingCircle.png new file mode 100644 index 0000000000000000000000000000000000000000..e50c2dbc6061123a4d4201d5c1387d011259086a GIT binary patch literal 19592 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 void }> = (props) => { + return ( + +

Trash helper

+ + + + + + + + ); +}; diff --git a/src/AlertDialog/index.module.scss b/src/components/AlertDialog/index.module.scss similarity index 76% rename from src/AlertDialog/index.module.scss rename to src/components/AlertDialog/index.module.scss index 52c3aba..34888fa 100644 --- a/src/AlertDialog/index.module.scss +++ b/src/components/AlertDialog/index.module.scss @@ -1,4 +1,4 @@ -@import "../index.scss"; +@import "../../index.scss"; .container { width: 100%; @@ -18,4 +18,6 @@ padding: 10px; clip-path: inset(0 0 0 0); position: relative; + border: 1.5px solid lighten($background, 10%); + box-shadow: 0 0 0.5px black; } diff --git a/src/AlertDialog/index.tsx b/src/components/AlertDialog/index.tsx similarity index 100% rename from src/AlertDialog/index.tsx rename to src/components/AlertDialog/index.tsx diff --git a/src/AlertDialog/spawnDialog.tsx b/src/components/AlertDialog/spawnDialog.tsx similarity index 98% rename from src/AlertDialog/spawnDialog.tsx rename to src/components/AlertDialog/spawnDialog.tsx index 9dc31f1..0aa1036 100644 --- a/src/AlertDialog/spawnDialog.tsx +++ b/src/components/AlertDialog/spawnDialog.tsx @@ -5,7 +5,7 @@ import { AlertDialog } from "./index"; export const spawnDialog = async (elements: (close: (data: any) => void) => ReactNode, windowStyles?: CSSProperties) => { const container = document.createElement("div"); const backgroundColor = "rgba(0,0,0,0.75)"; - const animationDuration = 300; + const animationDuration = 250; (container.style as any) = "display: block; overflow: hidden; width: 100vw; height: 100vh; z-index: 20; position: fixed; top: 0; left: 0"; diff --git a/src/components/CreditTile/index.module.scss b/src/components/CreditTile/index.module.scss new file mode 100644 index 0000000..df78cbe --- /dev/null +++ b/src/components/CreditTile/index.module.scss @@ -0,0 +1,45 @@ +@import "../../index.scss"; + +.container { + text-decoration: none; + animation: in-anim 0.3s ease-out both; + transform: translateY(15px); + opacity: 0; + transition: all 0.3s ease; + background-color: transparent; + border-radius: 15px; + padding: 10px; + border: solid 1px transparent; + display: block; + &:hover { + background-color: rgba(200, 200, 200, 0.2); + border: solid 1px lighten(rgba(200, 200, 200, 0.2), 10%); + } +} + +.img { + border-radius: 50%; + padding: 10px; + transition: transform 0.2s ease-out; + width: 10vh; + height: 10vh; + .container:hover & { + transform: scale(1.1); + } +} + +.title { + font-size: 20px; + color: $text; +} + +@keyframes in-anim { + from { + transform: translateY(15px); + opacity: 0; + } + to { + transform: translateY(0); + opacity: 1; + } +} diff --git a/src/components/CreditTile/index.tsx b/src/components/CreditTile/index.tsx new file mode 100644 index 0000000..57fce74 --- /dev/null +++ b/src/components/CreditTile/index.tsx @@ -0,0 +1,20 @@ +import { FC } from "react"; +import { Box } from "../Box"; +import style from "./index.module.scss"; + +export const CreditTile: FC<{ title: string; imageUrl?: string; gh?: string; delay?: number }> = (props) => { + return ( + + + {props.title} +
{props.title}
+ + + ); +}; diff --git a/src/components/Overlay/index.tsx b/src/components/Overlay/index.tsx index 42a7e50..4bbeb75 100644 --- a/src/components/Overlay/index.tsx +++ b/src/components/Overlay/index.tsx @@ -1,39 +1,29 @@ import { FC, useContext } from "react"; -import { spawnDialog } from "../../AlertDialog/spawnDialog"; +import { spawnDialog } from "../AlertDialog/spawnDialog"; import { modelCtx } from "../../constants"; -import { getVideoFrame } from "../../utils/getVideoFrame"; +import { About } from "../About"; import { Icon } from "../Icon"; +import { Results } from "../Results"; import style from "./index.module.scss"; export const Overlay: FC = () => { const model = useContext(modelCtx); - return (
- - + + + + ); }); }} diff --git a/src/components/Results/index.module.scss b/src/components/Results/index.module.scss new file mode 100644 index 0000000..0eea74f --- /dev/null +++ b/src/components/Results/index.module.scss @@ -0,0 +1,15 @@ +.loadingLbl { + text-align: center; +} +.loadingCircle { + animation: spin 1s linear infinite; +} + +@keyframes spin { + from { + transform: rotate(0deg); + } + to { + transform: rotate(360deg); + } +} diff --git a/src/components/Results/index.tsx b/src/components/Results/index.tsx new file mode 100644 index 0000000..d8a53cc --- /dev/null +++ b/src/components/Results/index.tsx @@ -0,0 +1,32 @@ +import { FC, useContext, useEffect, useState } from "react"; +import { modelCtx } from "../../constants"; +import { getVideoFrame } from "../../utils/getVideoFrame"; +import style from "./index.module.scss"; +import loadingCircle from "../../assets/loadingCircle.png"; +import { Box } from "../Box"; + +export const Results: FC<{}> = (_) => { + const [el, uel] = useState( + + +

Trwa analizowanie zdjęcia...

+ + ); + const model = useContext(modelCtx); + + useEffect(() => { + const can = getVideoFrame(document.querySelector("#video-feed") as HTMLVideoElement); + model?.classify(can).then((r) => { + console.log(r); + uel( + <> + {r?.[0].className} +

{r?.[0].className}

+

{r?.[0].probability}

+ + ); + }); + }, [model]); + + return el; +}; diff --git a/src/index.scss b/src/index.scss index bff67a6..da375fc 100644 --- a/src/index.scss +++ b/src/index.scss @@ -40,6 +40,29 @@ button { &:hover { background-color: $text; color: black; - border-color: darken($text, 10%); + border-color: darken($text, 30%); } } + +.btn-inverse { + border: none; + padding: 10px; + box-shadow: none; + border-radius: $borderRadius; + background-color: $text; + color: black; + transition: all $transitionDuration ease; + border: 1.5px solid darken($text, 30%); + box-shadow: 0 0 0.5px black; + cursor: pointer; + &:hover { + background-color: $background; + color: $text; + border-color: lighten($background, 10%); + } +} + +::selection { + background-color: darken($text, 20%); + color: black; +} diff --git a/src/index.tsx b/src/index.tsx index 2ddbef4..91a44e0 100644 --- a/src/index.tsx +++ b/src/index.tsx @@ -7,7 +7,14 @@ import { modelCtx, videoStreamCtx } from "./constants"; import { load as loadModel } from "@tensorflow-models/mobilenet"; const main = async () => { - console.log("Requesting camera access..."); + const appContainer = document.querySelector("#app"); + const infoLabel = document.createElement("p"); + infoLabel.style.color = "white"; + infoLabel.style.fontSize = "25px"; + infoLabel.style.fontFamily = "Arial, sans-serif"; + infoLabel.style.fontWeight = "100"; + infoLabel.innerHTML = "Oczekiwanie na uprawnienia dostępu do kamery..."; + appContainer?.children[0].appendChild(infoLabel); const videoStream = (await window.navigator.mediaDevices?.getUserMedia({ video: { facingMode: "environment" } }).catch((e) => { if (e instanceof DOMException) { @@ -15,7 +22,7 @@ const main = async () => { } return null; })) ?? null; - console.log("Loading AI model..."); + infoLabel.innerHTML = "Wczytywanie aplikacji..."; const model = await loadModel(); ReactDOM.render( @@ -25,7 +32,7 @@ const main = async () => { , - document.querySelector("#app") + appContainer ); };