summaryrefslogtreecommitdiff
path: root/makima/frontend
diff options
context:
space:
mode:
authorsoryu <soryu@soryu.co>2025-12-22 14:18:27 +0000
committersoryu <soryu@soryu.co>2025-12-23 14:47:18 +0000
commitfcf6d22f6f83b13af61b7c2c395d37411d40a92a (patch)
treebb2cf5e5483c99556863c1def9ded18d42342d11 /makima/frontend
parent0741a8b8e9a2099c82bff6d6b9ebbce9c07cad53 (diff)
downloadsoryu-fcf6d22f6f83b13af61b7c2c395d37411d40a92a.tar.gz
soryu-fcf6d22f6f83b13af61b7c2c395d37411d40a92a.zip
Update makima FE to have autoscroll and simplify FE
Diffstat (limited to 'makima/frontend')
-rw-r--r--makima/frontend/index.html2
-rw-r--r--makima/frontend/package.json1
-rw-r--r--makima/frontend/src/components/Masthead.tsx6
-rw-r--r--makima/frontend/src/components/listen/ControlPanel.tsx4
-rw-r--r--makima/frontend/src/routes/_index.tsx93
-rw-r--r--makima/frontend/src/routes/listen.tsx10
6 files changed, 29 insertions, 87 deletions
diff --git a/makima/frontend/index.html b/makima/frontend/index.html
index de991a5..aea9671 100644
--- a/makima/frontend/index.html
+++ b/makima/frontend/index.html
@@ -5,7 +5,7 @@
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>makima.jp</title>
<link rel="icon" href="/logo.svg" type="image/svg+xml" />
- <meta name="description" content="Makima - Real-time speech-to-text platform" />
+ <meta name="description" content="Makima - Mesh listening lattice for contested domains" />
</head>
<body>
<div id="root"></div>
diff --git a/makima/frontend/package.json b/makima/frontend/package.json
index 5327089..9d11792 100644
--- a/makima/frontend/package.json
+++ b/makima/frontend/package.json
@@ -5,6 +5,7 @@
"type": "module",
"scripts": {
"dev": "vite",
+ "dev:prod": "VITE_API_ENV=production vite",
"build": "tsc -b && vite build",
"preview": "vite preview"
},
diff --git a/makima/frontend/src/components/Masthead.tsx b/makima/frontend/src/components/Masthead.tsx
index a89977f..6b69433 100644
--- a/makima/frontend/src/components/Masthead.tsx
+++ b/makima/frontend/src/components/Masthead.tsx
@@ -18,7 +18,7 @@ export function Masthead({ showTicker = false, showNav = true }: MastheadProps)
makima.jp
</h1>
<small className="block text-[#dbe7ff] text-xs tracking-wide">
- Real-time Speech Recognition
+ Listening System
</small>
</div>
</Link>
@@ -29,9 +29,9 @@ export function Masthead({ showTicker = false, showNav = true }: MastheadProps)
<div className="absolute inset-y-0 left-0 w-3 bg-gradient-to-b from-[rgba(231,237,247,0.5)] to-transparent" />
<div className="absolute inset-y-0 right-0 w-3 bg-gradient-to-b from-[rgba(231,237,247,0.5)] to-transparent rotate-180" />
<span className="ticker-content">
- /// MAKIMA INFORMATION SERVICE // REAL-TIME STT PLATFORM ///
+ /// MAKIMA LISTENING SYSTEM // MESH LATTICE FOR CONTESTED DOMAINS ///
TRANSPORT: WEBSOCKET /// ENCODING: PCM32F /// STATUS: ONLINE ///
- MAKIMA.JP /// MAKIMA INFORMATION SERVICE // REAL-TIME STT PLATFORM
+ MAKIMA.JP /// MAKIMA LISTENING SYSTEM // MESH LATTICE FOR CONTESTED DOMAINS
/// TRANSPORT: WEBSOCKET /// ENCODING: PCM32F /// STATUS: ONLINE ///
MAKIMA.JP ///
</span>
diff --git a/makima/frontend/src/components/listen/ControlPanel.tsx b/makima/frontend/src/components/listen/ControlPanel.tsx
index 4d86850..25dbefe 100644
--- a/makima/frontend/src/components/listen/ControlPanel.tsx
+++ b/makima/frontend/src/components/listen/ControlPanel.tsx
@@ -41,7 +41,7 @@ export function ControlPanel({
const isRequesting = micStatus === "requesting";
return (
- <div className="panel h-full p-4 flex flex-col items-center justify-center gap-4">
+ <div className="panel p-4 flex flex-col items-center justify-center gap-3">
{/* Logo button */}
<div className="flex flex-col items-center gap-2">
<Logo
@@ -123,7 +123,7 @@ export function ControlPanel({
)}
{/* Buttons */}
- <div className="flex gap-2 mt-2">
+ <div className="flex gap-2">
<button
onClick={onReset}
className="px-3 py-1.5 font-mono text-xs text-[#dbe7ff] bg-[#0d1b2d] border border-[#0f3c78] hover:border-[#3f6fb3] transition-colors uppercase tracking-wide"
diff --git a/makima/frontend/src/routes/_index.tsx b/makima/frontend/src/routes/_index.tsx
index 568e300..4c3c2c0 100644
--- a/makima/frontend/src/routes/_index.tsx
+++ b/makima/frontend/src/routes/_index.tsx
@@ -1,91 +1,32 @@
import { Masthead } from "../components/Masthead";
import { Logo } from "../components/Logo";
-import { RewriteLink } from "../components/RewriteLink";
export default function HomePage() {
return (
<div className="relative z-10 min-h-screen flex flex-col">
<Masthead showTicker showNav />
- <main className="flex-1 p-6 md:p-8">
- <section className="grid grid-cols-1 md:grid-cols-[1.1fr_0.9fr] gap-6 items-center mb-8">
- <div className="order-2 md:order-1">
- <span className="inline-block px-2 py-1 border border-[#3f6fb3] bg-[#0f1c2f] text-[#9bc3ff] font-mono text-xs tracking-wide uppercase mb-3">
- Real-time STT Platform
- </span>
- <h2 className="m-0 mb-3 text-xl text-[#f0f5ff] tracking-wide">
- リアルタイム音声認識
- </h2>
- <p className="my-2 text-[#e4edff]">
- Makima provides real-time speech-to-text transcription with speaker
- diarization. Stream audio from your microphone or upload files for
- instant transcription.
- </p>
- <p className="my-2 text-[#e4edff]">
- 高精度なリアルタイム音声認識エンジン。WebSocket
- 経由でストリーミング処理を行い、話者分離にも対応。
- </p>
-
- <div className="flex flex-wrap gap-3 mt-4">
- <RewriteLink to="/listen" className="!py-2 !px-3 text-sm">
- Start Listening
- </RewriteLink>
- <RewriteLink href="https://github.com/soryu-co" external className="!py-2 !px-3 text-sm">
- GitHub
- </RewriteLink>
- <RewriteLink href="https://soryu.co" external className="!py-2 !px-3 text-sm">
- soryu.co
- </RewriteLink>
- </div>
- </div>
-
- <div className="order-1 md:order-2 flex justify-center">
+ <main className="flex-1 p-6 md:p-8 flex flex-col items-center justify-center">
+ <section className="text-center max-w-xl">
+ <div className="flex justify-center mb-6">
<Logo size={160} />
</div>
- </section>
- <div className="panel p-4 md:p-5 relative">
- <span className="absolute -top-2.5 left-3 px-1.5 py-0.5 bg-[#0f1c2f] border border-[#3f6fb3] font-mono text-xs tracking-wide">
- FEATURES//MAKIMA
+ <span className="inline-block px-2 py-1 border border-[#3f6fb3] bg-[#0f1c2f] text-[#9bc3ff] font-mono text-xs tracking-wide uppercase mb-3">
+ Listening System
</span>
- <h3 className="mt-2 mb-3 text-lg text-[#eef5ff]">Platform Features</h3>
- <div className="grid grid-cols-1 md:grid-cols-2 gap-3 mt-3 text-sm text-[#e4edff]">
- <div className="border border-[#3f6fb3] bg-[#0d1b2d] p-3 font-mono tracking-tight">
- <strong className="text-[#9bc3ff]">Real-time Streaming</strong>
- <br />
- WebSocket-based audio streaming with low latency transcription
- </div>
- <div className="border border-[#3f6fb3] bg-[#0d1b2d] p-3 font-mono tracking-tight">
- <strong className="text-[#9bc3ff]">Speaker Diarization</strong>
- <br />
- Automatic speaker identification and labeling
- </div>
- <div className="border border-[#3f6fb3] bg-[#0d1b2d] p-3 font-mono tracking-tight">
- <strong className="text-[#9bc3ff]">End-of-Utterance</strong>
- <br />
- Smart detection of speech boundaries
- </div>
- <div className="border border-[#3f6fb3] bg-[#0d1b2d] p-3 font-mono tracking-tight">
- <strong className="text-[#9bc3ff]">Multi-format</strong>
- <br />
- Support for PCM32F and PCM16 audio encoding
- </div>
- </div>
- </div>
-
- <div className="mt-6 border border-[#0f3c78] bg-[#0f3c78] text-[#dbe7ff] shadow-[inset_0_0_0_1px_rgba(255,255,255,0.1)]">
- <header className="border-b border-[rgba(197,219,255,0.4)] px-3 py-2.5 font-mono tracking-wide text-xs flex justify-between items-center">
- <strong>API // makima.jp</strong>
- <span className="text-[#92b8ff]">endpoint: wss://api.makima.jp</span>
- </header>
- <pre className="m-0 px-3 py-4 font-mono text-xs leading-relaxed bg-[linear-gradient(0deg,rgba(255,255,255,0.05)_1px,rgba(15,60,120,0.25)_1px)]">
-{`[001] endpoint ............... /api/v1/listen
-[002] protocol ............... WebSocket
-[003] encoding ............... pcm32f / pcm16
-[004] sample_rate ............ 16000 Hz (default)
-[005] features ............... transcription, diarization, eou`}
- </pre>
- </div>
+ <h2 className="m-0 mb-3 text-xl text-[#f0f5ff] tracking-wide">
+ Mesh Listening Lattice
+ </h2>
+ <p className="my-2 text-[#e4edff]">
+ Makima is a mesh listening lattice for contested domains, delivering
+ live audio surveillance, detection, and analysis in one persistent layer.
+ </p>
+ <p className="my-2 text-[#e4edff]">
+ Dynamic telemetry for detection, orchestration, and mission-critical
+ decisions. Real-time transcription with speaker diarization.
+ </p>
+ </section>
</main>
<footer className="px-4 py-3 border-t-4 border-double border-[#23477a] bg-gradient-to-b from-[rgba(11,18,32,0.95)] to-[rgba(14,26,45,0.7)] text-xs text-[#e4edff] text-center">
diff --git a/makima/frontend/src/routes/listen.tsx b/makima/frontend/src/routes/listen.tsx
index 06769fd..9ac0a94 100644
--- a/makima/frontend/src/routes/listen.tsx
+++ b/makima/frontend/src/routes/listen.tsx
@@ -126,22 +126,22 @@ export default function ListenPage() {
const error = ws.error || mic.error;
return (
- <div className="relative z-10 min-h-screen flex flex-col">
+ <div className="relative z-10 h-screen flex flex-col overflow-hidden">
<Masthead showTicker={false} showNav />
- <main className="flex-1 p-4 md:p-6 grid grid-cols-1 md:grid-cols-[300px_1fr] grid-rows-[1fr_auto] md:grid-rows-[1fr_200px] gap-4 min-h-0">
+ <main className="flex-1 p-4 md:p-6 grid grid-cols-1 md:grid-cols-[300px_1fr] grid-rows-[minmax(0,1fr)_auto] md:grid-rows-[minmax(0,1fr)_auto] gap-4 min-h-0 overflow-hidden">
{/* Speaker Panel - top left on desktop, hidden on mobile */}
- <div className="hidden md:block row-span-1">
+ <div className="hidden md:block row-span-1 min-h-0 overflow-hidden">
<SpeakerPanel speakers={speakers} />
</div>
{/* Transcript Panel - right side, spans 2 rows on desktop */}
- <div className="md:row-span-2 min-h-[300px] md:min-h-0">
+ <div className="md:row-span-2 min-h-0 overflow-hidden">
<TranscriptPanel transcripts={ws.transcripts} />
</div>
{/* Control Panel - bottom left on desktop */}
- <div className="md:col-start-1 md:row-start-2">
+ <div className="md:col-start-1 md:row-start-2 shrink-0">
<ControlPanel
isListening={isListening}
isConnected={ws.isConnected}
generated by cgit v1.2.3 (git 2.39.1) at 2026-05-21 17:24:03 +0000