pepperplus/pepperplus-ui
1
0
Fork 0
Code Issues Pull Requests 1 Actions Packages Projects Releases Wiki Activity

Merge remote-tracking branch 'origin/dev' into feat/visual-programming-interface

Browse Source 
# Conflicts:
#	src/App.tsx
#	src/pages/Home/Home.tsx
#	src/pages/TemplatePage/Template.tsx
This commit is contained in:
JGerla
2025-10-12 13:49:36 +02:00
parent a9effb7c23 ae91046a52
commit cf77267e95
11 changed files with 248 additions and 121 deletions
Download Patch File Download Diff File Expand all files Collapse all files

4
.githooks/pre-commit
View File

@@ -8,11 +8,11 @@ if echo "$branch" | grep -Eq "(dev|main)"; then
fi
# allowed pattern <type/>
if echo "$branch" | grep -Eq "^(feat|fix|refactor|perf|style|test|docs|build|chore|revert)\/\w+-\w+-\w+"; then
if echo "$branch" | grep -Eq "^(feat|fix|refactor|perf|style|test|docs|build|chore|revert)\/\w+(-\w+){0,5}$"; then
echo "✅ Branch name valid: $branch"
exit 0
else
echo "❌ Invalid branch name: $branch"
echo "Branch must be named <type>/<description-of-branch> (must have 2 stipes - -)"
echo "Branch must be named <type>/<description-of-branch> (must have one to six words separated by a dash)"
exit 1
fi

137
src/App.css
View File

@@ -1,24 +1,3 @@
#root {
max-width: 1280px;
margin: 0 auto;
padding: 2rem;
text-align: center;
}
.logo {
height: 6em;
padding: 1.5em;
will-change: filter;
transition: filter 300ms;
}
.logo:hover {
filter: drop-shadow(0 0 2em #646cffaa);
}
.logo.react:hover {
filter: drop-shadow(0 0 2em #61dafbaa);
}
.logopepper {
height: 8em;
padding: 1.5em;
@@ -32,27 +11,21 @@
filter: drop-shadow(0 0 10em #4eff14aa);
}
@keyframes logo-spin {
from {
transform: rotate(0deg);
}
to {
transform: rotate(360deg);
}
}
@keyframes logo-pepper-spin {
from {
transform: rotate(-20deg);
0% {
transform: rotate(0);
}
to {
25% {
transform: rotate(20deg);
}
75% {
transform: rotate(-20deg);
}
100% {
transform: rotate(0);
}
}
@keyframes logo-pepper-scale {
from {
transform: scale(1,1);
@@ -63,19 +36,13 @@
}
@media (prefers-reduced-motion: no-preference) {
a:nth-of-type(2) .logo {
animation: logo-spin infinite 20s linear;
.logopepper:hover {
animation: logo-pepper-spin infinite 1s linear;
}
}
@media (prefers-reduced-motion: no-preference) {
.logopepper {
animation: logo-pepper-spin infinite 1s linear alternate;
}
}
@media (prefers-reduced-motion: no-preference) {
.logoPepperScaling {
.logoPepperScaling:hover {
animation: logo-pepper-scale infinite 1s linear alternate;
}
}
@@ -113,3 +80,83 @@ button.movePage.right{
button.movePage:hover{
background-color: rgb(0, 176, 176);
}
header {
position: sticky;
top: 0;
left: 0;
right: 0;
padding: 1rem;
display: flex;
gap: 1rem;
align-items: center;
justify-content: center;
backdrop-filter: blur(10px);
z-index: 1; /* Otherwise any translated elements render above the blur?? */
}
main {
padding: 1rem 0;
}
.flex-row {
display: flex;
flex-direction: row;
}
.flex-col {
display: flex;
flex-direction: column;
}
.flex-1 {
flex: 1;
}
.flex-wrap {
flex-wrap: wrap;
}
.align-center {
align-items: center;
}
.justify-center {
justify-content: center;
}
.justify-between {
justify-content: space-between;
}
.gap-sm {
gap: .25rem;
}
.gap-md {
gap: .5rem;
}
.gap-lg {
gap: 1rem;
}
.padding-sm {
padding: .25rem;
}
.padding-md {
padding: .5rem;
}
.padding-lg {
padding: 1rem;
}
.round-sm {
border-radius: .25rem;
}
.round-md {
border-radius: .5rem;
}
.round-lg {
border-radius: 1rem;
}

25
src/App.tsx
View File

@@ -1,17 +1,24 @@
import { Routes, Route } from 'react-router'
import { Routes, Route, Link } from 'react-router'
import './App.css'
import VisProg from './pages/VisProgPage/VisProg.tsx'
import TemplatePage from './pages/TemplatePage/Template.tsx'
import Home from './pages/Home/Home.tsx'
import Robot from './pages/Robot/Robot.tsx';
function App(){
return (
<Routes>
<Route path="/" element={<Home />} />
<Route path="/visprog" element={<VisProg />} />
</Routes>
<div>
<header>
<Link to={"/"}>Home</Link>
</header>
<main className={"flex-col align-center"}>
<Routes>
<Route path="/" element={<Home />} />
<Route path="/template" element={<TemplatePage />} />
<Route path="/robot" element={<Robot />} />
</Routes>
</main>
</div>
)
}
export default App
export default App

5
src/components/components.tsx
View File

@@ -1,14 +1,11 @@
// src/components/Counter.tsx
import { useState } from 'react'
//import style from './Counter.module.css' // optional, if you want a CSS module for reset button
import '../App.css'
function Counter() {
const [count, setCount] = useState(0)
return (
<div className="card">
<button onClick={() => setCount((count) => count + 3)}>
<button onClick={() => setCount((count) => count + 1)}>
count is {count}
</button>
<button className='reset' onClick={() => setCount(0)}>

18
src/index.css
View File

@@ -13,6 +13,16 @@
-moz-osx-font-smoothing: grayscale;
}
html, body {
margin: 0;
padding: 0;
height: 100dvh;
width: 100dvw;
overflow-x: hidden;
overflow-y: scroll;
}
a {
font-weight: 500;
color: #646cff;
@@ -22,14 +32,6 @@ a:hover {
color: #535bf2;
}
body {
margin: 0;
display: flex;
place-items: center;
min-width: 320px;
min-height: 100vh;
}
h1 {
font-size: 3.2em;
line-height: 1.1;

18
src/pages/Home/Home.module.css
View File

@@ -1,6 +1,24 @@
.read_the_docs {
color: #888;
}
.card {
padding: 2em;
}
.links {
display: flex;
flex-direction: column;
gap: 1em;
align-items: center;
}
.gap-xl {
gap: 2rem;
}
.links {
display: flex;
flex-direction: column;
gap: 1em;
}

47
src/pages/Home/Home.tsx
View File

@@ -1,47 +1,20 @@
import { Link } from 'react-router'
import reactLogo from '../../assets/react.svg'
import viteLogo from '../../assets/vite.svg'
import pepperLogo from '../../assets/pepper_transp2_small.svg'
import style from './Home.module.css'
import Counter from '../../components/components.tsx'
import styles from './Home.module.css'
function Home() {
return (
<>
<div>
<div className = "logoPepperScaling">
<a href="https://git.science.uu.nl/ics/sp/2025/n25b" target="_blank">
<img src={pepperLogo} className="logopepper" alt="Pepper logo" />
</a>
</div>
<a href="https://vite.dev" target="_blank">
<img src={viteLogo} className="logo" alt="Vite logo" />
</a>
<a href="https://react.dev" target="_blank">
<img src={reactLogo} className="logo react" alt="React logo" />
<div className={`flex-col ${styles.gapXl}`}>
<div className="logoPepperScaling">
<a href="https://git.science.uu.nl/ics/sp/2025/n25b" target="_blank">
<img src={pepperLogo} className="logopepper" alt="Pepper logo" />
</a>
</div>
<h1>Vite + React</h1>
<Counter />
<Link to = '/visprog'>
<button className='movePage right' onClick={() : void => {}}>
Page Cool --{'>'}
</button>
</Link>
<p>
Edit <code>src/App.tsx</code> and save to test HMR
</p>
<p className={style.read_the_docs}>
Click on the Vite and React logos to learn more
</p>
</>
<div className={styles.links}>
<Link to={"/robot"}>Robot Interaction →</Link>
<Link to={"/template"}>Template →</Link>
</div>
</div>
)
}

94
src/pages/Robot/Robot.tsx Normal file
View File

@@ -0,0 +1,94 @@
import { useState, useEffect, useRef } from 'react'
export default function Robot() {
const [message, setMessage] = useState('');
const [listening, setListening] = useState(false);
const [conversation, setConversation] = useState<{"role": "user" | "assistant", "content": string}[]>([])
const conversationRef = useRef<HTMLDivElement | null>(null);
const [conversationIndex, setConversationIndex] = useState(0);
const sendMessage = async () => {
try {
const response = await fetch("http://localhost:8000/message", {
method: "POST",
headers: {
"Content-Type": "application/json",
},
body: JSON.stringify({ message }),
});
const data = await response.json();
console.log(data);
} catch (error) {
console.error("Error sending message: ", error);
}
};
useEffect(() => {
const eventSource = new EventSource("http://localhost:8000/sse");
eventSource.onmessage = (event) => {
try {
const data = JSON.parse(event.data);
if ("voice_active" in data) setListening(data.voice_active);
if ("speech" in data) setConversation(conversation => [...conversation, {"role": "user", "content": data.speech}]);
if ("llm_response" in data) setConversation(conversation => [...conversation, {"role": "assistant", "content": data.llm_response}]);
} catch {
console.log("Unparsable SSE message:", event.data);
}
};
return () => {
eventSource.close();
};
}, [conversationIndex]);
useEffect(() => {
if (!conversationRef || !conversationRef.current) return;
conversationRef.current.scrollTop = conversationRef.current.scrollHeight;
}, [conversation]);
return (
<>
<h1>Robot interaction</h1>
<h2>Force robot speech</h2>
<div className={"flex-row gap-md justify-center"}>
<input
type="text"
value={message}
onChange={(e) => setMessage(e.target.value)}
onKeyDown={(e) => e.key === "Enter" && sendMessage().then(() => setMessage(""))}
placeholder="Enter a message"
/>
<button onClick={sendMessage}>Speak</button>
</div>
<div className={"flex-col gap-lg align-center"}>
<h2>Conversation</h2>
<p>Listening {listening ? "🟢" : "🔴"}</p>
<div style={{ maxHeight: "200px", maxWidth: "600px", overflowY: "auto"}} ref={conversationRef}>
{conversation.map((item, i) => (
<p key={i}
style={{
backgroundColor: item["role"] == "user"
? "color-mix(in oklab, canvas, blue 20%)"
: "color-mix(in oklab, canvas, gray 20%)",
whiteSpace: "pre-line",
}}
className={"round-md padding-md"}
>{item["content"]}</p>
))}
</div>
<div className={"flex-row gap-md justify-center"}>
<button onClick={() => {
setConversationIndex((conversationIndex) => conversationIndex + 1)
setConversation([])
}}>Reset</button>
<button onClick={() => {
setConversationIndex((conversationIndex) => conversationIndex == -1 ? 0 : -1)
setConversation([])
}}>{conversationIndex == -1 ? "Start" : "Stop"}</button>
</div>
</div>
</>
);
}

4
src/pages/TemplatePage/Template.module.css
View File

@@ -1,4 +0,0 @@
button.reset:hover {
background-color: yellow;
}

12
src/pages/TemplatePage/Template.tsx
View File

@@ -1,21 +1,9 @@
import { Link } from 'react-router'
import Counter from '../../components/components.tsx'
//this is your css file where you can style your buttons and such
//you can still use css parts from App.css, but also overwrite them
function TemplatePage() {
return (
<>
<Counter />
<Link to = {"/"}> {/* here you link to the homepage, in App.tsx you can link new pages */}
<button className= 'movePage left' onClick={() :void => {}}>
Page {'<'}-- Go Home
</button>
</Link>
</>
)
}

5
vite.config.ts
View File

@@ -4,4 +4,9 @@ import react from '@vitejs/plugin-react'
// https://vite.dev/config/
export default defineConfig({
plugins: [react()],
css: {
modules: {
localsConvention: "camelCase",
}
},
})