From e016e84fe317c7c4c167b3ce49bd439028204bd3 Mon Sep 17 00:00:00 2001
From: AmyangXYZ <amyang.xyz@gmail.com>
Date: Wed, 25 Sep 2024 23:01:44 -0400
Subject: [PATCH] update readme

---
 README.md           | 10 ++++++----
 src/App.tsx         | 27 ++++++++++++++++++++++-----
 src/assets/main.css | 16 ++++++++--------
 3 files changed, 36 insertions(+), 17 deletions(-)

diff --git a/README.md b/README.md
index 010e2b1..e3f6d5f 100644
--- a/README.md
+++ b/README.md
@@ -2,7 +2,7 @@
 
 <img width="300px" alt="demo_pose" src="./logo.jpg" />
 
-[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!
 
 <img width="400px" alt="demo_pose" src="./demo1.gif" />
 <img width="400px" alt="demo_face" src="./demo2.gif" />
@@ -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 {
         </div>
       )}
       <header className="header">
-        <h3>MiKaPo</h3>
+        <div className="header-item">
+          <Avatar
+            alt="MiKaPo"
+            src="/logo.png"
+            sx={{
+              width: 36,
+              height: 36,
+              marginRight: ".5rem",
+              transition: "transform 2s ease-in-out",
+              "&:hover": {
+                transform: "rotate(360deg)",
+              },
+            }}
+          />
+          <h2>MiKaPo </h2>
+        </div>
 
-        <p>FPS: {fps}</p>
+        <div className="header-item" style={{ marginTop: "-.7rem" }}>
+          <p>FPS: {fps}</p>
+        </div>
         <div className="header-item">
           <a href="https://github.com/AmyangXYZ/MiKaPo" target="_blank">
             <IconButton>
@@ -42,8 +59,8 @@ function App(): JSX.Element {
             <img
               src="https://cdn.buymeacoffee.com/buttons/v2/default-blue.png"
               alt="Buy Me A Coffee"
-              width={120}
-              height={28}
+              width={140}
+              height={34}
             />
           </a>
         </div>
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;
   }
 }