diff --git a/README.md b/README.md index 010e2b1..e3f6d5f 100644 --- a/README.md +++ b/README.md @@ -2,7 +2,7 @@ demo_pose -[MiKaPo](https://mikapo.amyang.dev) is a **Web-based tool** that poses MMD models from video input in real-time. +[MiKaPo](https://mikapo.amyang.dev) is a **Web-based tool** that poses MMD models from video input in real-time. Welcome feature requests and PRs! demo_pose demo_face @@ -19,10 +19,12 @@ - [x] Pose detection - [x] Face detection - [ ] Hand detection -- [x] Video upload +- [ ] Environment selection +- [x] Video, image upload - [x] Camera input -- [ ] Model selection -- [ ] Ollama support (electron version) +- [x] Model selection +- [ ] Ollama support ([electron version](https://github.com/AmyangXYZ/MiKaPo-Electron)) +- [ ] VMD export ## Project Setup diff --git a/src/App.tsx b/src/App.tsx index c81c96a..f732917 100644 --- a/src/App.tsx +++ b/src/App.tsx @@ -2,7 +2,7 @@ import { useState } from "react" import Video from "./Video" import MMDScene from "./MMDScene" import { NormalizedLandmark } from "@mediapipe/tasks-vision" -import { IconButton } from "@mui/material" +import { Avatar, IconButton } from "@mui/material" import { FontAwesomeIcon } from "@fortawesome/react-fontawesome" import { faGithub } from "@fortawesome/free-brands-svg-icons" import { Download } from "@mui/icons-material" @@ -24,9 +24,26 @@ function App(): JSX.Element { )}
-

MiKaPo

+
+ +

MiKaPo

+
-

FPS: {fps}

+
+

FPS: {fps}

+
@@ -42,8 +59,8 @@ function App(): JSX.Element { Buy Me A Coffee
diff --git a/src/assets/main.css b/src/assets/main.css index 2ef15be..85e3d5a 100644 --- a/src/assets/main.css +++ b/src/assets/main.css @@ -32,9 +32,9 @@ body { } .header { - height: 2rem; + height: 2.5rem; width: 100%; - padding: 0 0.5rem; + padding: 0 1rem; top: 0.5rem; left: 0; position: absolute; @@ -86,7 +86,7 @@ body { .video-player { position: absolute; - top: 4.5rem; + top: 5rem; left: 1rem; width: 400px; z-index: 1001; @@ -99,7 +99,7 @@ video { .toolbar { position: absolute; - top: 2.5rem; + top: 3rem; left: 1rem; width: 400px; z-index: 1002; @@ -131,7 +131,7 @@ video { .model-selector { position: absolute; - bottom: 0.2rem; + bottom: 0.5rem; right: 1rem; z-index: 1002; } @@ -150,7 +150,7 @@ a { .toolbar { position: relative; - top: 0.3rem; + top: 0.4rem; left: auto; width: 100%; height: 2rem; @@ -160,11 +160,11 @@ a { height: 200px; width: 100%; left: auto; - top: 0.3rem; + top: 0.4rem; } .header { position: relative; - height: 2rem; + height: 2.5rem; } }