audex 1.0.7a3__py3-none-any.whl

audex/view/pages/voiceprint/update.py

@@ -0,0 +1,195 @@
+from __future__ import annotations
+
+import asyncio
+import typing as t
+
+from dependency_injector.wiring import Provide
+from dependency_injector.wiring import inject
+from fastapi import Depends
+from nicegui import ui
+
+from audex.container import Container
+from audex.service.doctor import DoctorService
+from audex.view.decorators import handle_errors
+
+
+@ui.page("/voiceprint/update")
+@handle_errors
+@inject
+async def render(
+    doctor_service: DoctorService = Depends(Provide[Container.service.doctor]),
+) -> None:
+    """Render voiceprint update page."""
+
+    # Check if has voiceprint
+    has_vp = await doctor_service.has_voiceprint()
+    if not has_vp:
+        ui.notify("您还未注册声纹，请先注册", type="warning", position="top")
+        ui.navigate.to("/voiceprint/enroll")
+        return
+
+    # Add CSS
+    ui.add_head_html('<link rel="stylesheet" href="/static/css/voiceprint/update.css">')
+
+    # State
+    is_recording = {"value": False}
+    update_context: dict[str, t.Any] = {"value": None}
+    elapsed_time = {"value": 0}
+    timer_task: dict[str, asyncio.Task[t.Any] | None] = {"value": None}
+
+    # Header
+    with (
+        ui.header().classes("header-glass items-center justify-between px-6 py-3"),
+        ui.row().classes("items-center gap-3"),
+    ):
+        ui.button(icon="arrow_back", on_click=lambda: ui.navigate.to("/")).props(
+            "flat round"
+        ).tooltip("返回主面板")
+        ui.label("更新声纹").classes("text-h6 font-semibold text-grey-9")
+
+    # Main container
+    with (
+        ui.element("div").classes("voiceprint-container"),
+        ui.element("div").classes("voiceprint-content"),
+    ):
+        # Left side: Steps
+        with ui.column().classes("voiceprint-steps"):
+            ui.label("操作流程").classes("text-h5 font-bold text-grey-9 mb-2")
+
+            with ui.column().classes("gap-4"):
+                with ui.row().classes("items-start gap-3"):
+                    ui.label("1").classes(
+                        "text-sm font-bold text-white w-6 h-6 flex items-center justify-center"
+                    ).style("background: #8b5cf6; border-radius: 50%;")
+                    with ui.column().classes("gap-1"):
+                        ui.label("点击按钮开始").classes("text-sm font-medium text-grey-9")
+                        ui.label("启动录音功能").classes("text-xs text-grey-6")
+
+                with ui.row().classes("items-start gap-3"):
+                    ui.label("2").classes(
+                        "text-sm font-bold text-white w-6 h-6 flex items-center justify-center"
+                    ).style("background: #8b5cf6; border-radius: 50%;")
+                    with ui.column().classes("gap-1"):
+                        ui.label("朗读右侧文字").classes("text-sm font-medium text-grey-9")
+                        ui.label("清晰完整朗读").classes("text-xs text-grey-6")
+
+                with ui.row().classes("items-start gap-3"):
+                    ui.label("3").classes(
+                        "text-sm font-bold text-white w-6 h-6 flex items-center justify-center"
+                    ).style("background: #8b5cf6; border-radius: 50%;")
+                    with ui.column().classes("gap-1"):
+                        ui.label("点击停止完成").classes("text-sm font-medium text-grey-9")
+                        ui.label("时长 5-20 秒").classes("text-xs text-grey-6")
+
+        # Center: Text to read
+        with ui.column().classes("voiceprint-text"):
+            ui.label("请朗读：").classes("text-body1 text-grey-6")
+            ui.label(doctor_service.config.vpr_text_content).classes(
+                "text-h4 text-grey-9 font-semibold leading-relaxed"
+            ).style(
+                "line-height: 1.8; "
+                "word-break: keep-all; "
+                "overflow-wrap: break-word; "
+                "white-space: normal;"
+            )
+
+        # Right side: Recording button
+        with ui.column().classes("voiceprint-button"):
+            # Timer
+            timer_label = ui.label("00:00").classes("timer")
+
+            # Button container
+            button_container = ui.element("div").style(
+                "position: relative; display: flex; align-items: center; justify-content: center;"
+            )
+
+            with button_container:
+                # Rings
+                ring1 = ui.element("div").classes("recording-ring")
+                ring1.visible = False
+                ring2 = ui.element("div").classes("recording-ring").style("animation-delay: 0.8s;")
+                ring2.visible = False
+                ring3 = ui.element("div").classes("recording-ring").style("animation-delay: 1.6s;")
+                ring3.visible = False
+
+                @handle_errors
+                async def toggle_recording():
+                    """Toggle recording."""
+                    if not is_recording["value"]:
+                        # Start
+                        ctx = await doctor_service.update_vp()
+                        update_context["value"] = ctx
+                        await ctx.start()
+
+                        is_recording["value"] = True
+                        elapsed_time["value"] = 0
+
+                        record_btn.props("icon=stop color=negative")
+
+                        ring1.visible = True
+                        ring2.visible = True
+                        ring3.visible = True
+
+                        ui.notify("开始录音", type="info")
+                        timer_task["value"] = asyncio.create_task(update_timer())
+
+                    else:
+                        # Stop
+                        if elapsed_time["value"] < 5:
+                            ui.notify("录音时间不足 5 秒，请继续", type="warning")
+                            return
+
+                        if timer_task["value"]:
+                            timer_task["value"].cancel()
+
+                        record_btn.props("loading icon=mic color=grey")
+
+                        ring1.visible = False
+                        ring2.visible = False
+                        ring3.visible = False
+
+                        try:
+                            ctx = update_context["value"]
+                            result = await ctx.close()
+
+                            is_recording["value"] = False
+
+                            ui.notify(
+                                f"声纹更新成功！录音时长: {result.duration_ms / 1000:.1f}秒",
+                                type="positive",
+                            )
+
+                            await asyncio.sleep(2)
+                            ui.navigate.to("/")
+
+                        except Exception:
+                            record_btn.props(remove="loading")
+                            record_btn.props("icon=mic color=purple")
+                            is_recording["value"] = False
+                            raise
+
+                async def update_timer():
+                    try:
+                        while is_recording["value"]:
+                            await asyncio.sleep(1)
+                            elapsed_time["value"] += 1
+
+                            minutes = elapsed_time["value"] // 60
+                            seconds = elapsed_time["value"] % 60
+                            timer_label.text = f"{minutes:02d}:{seconds:02d}"
+
+                            if elapsed_time["value"] >= 20:
+                                await toggle_recording()
+                                break
+                    except asyncio.CancelledError:
+                        pass
+
+                record_btn = (
+                    ui.button(icon="mic", on_click=toggle_recording)
+                    .props("round unelevated color=purple size=xl")
+                    .classes("record-button")
+                    .style("font-size: 3em ! important;")
+                )
+
+            # Hint
+            ui.label("点击按钮开始录音").classes("text-sm text-grey-6")

audex/view/static/css/dashboard.css

@@ -0,0 +1,452 @@
+@import "global.css";
+@import "glass.css";
+
+
+/* ==================== Utility ==================== */
+.cursor-pointer {
+    cursor: pointer;
+}
+
+/* ==================== Animations ==================== */
+
+/* Gradient text animation */
+.gradient-text {
+    background: linear-gradient(-45deg, #ee7752, #e73c7e, #23a6d5, #23d5ab, #f093fb, #4facfe);
+    background-size: 400% 400%;
+    -webkit-background-clip: text;
+    -webkit-text-fill-color: transparent;
+    background-clip: text;
+    animation: gradient-shift 8s ease infinite;
+    font-weight: 700;
+}
+
+@keyframes gradient-shift {
+    0% {
+        background-position: 0 50%;
+    }
+    50% {
+        background-position: 100% 50%;
+    }
+    100% {
+        background-position: 0 50%;
+    }
+}
+
+/* ==================== Cards ==================== */
+
+/* Super card with hover and active states */
+.super-card {
+    border-radius: 28px !important;
+    background: rgba(255, 255, 255, 0.9) !important;
+    backdrop-filter: blur(20px) !important;
+    -webkit-backdrop-filter: blur(20px) !important;
+    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.06), 0 2px 8px rgba(0, 0, 0, 0.04) !important;
+    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1) !important;
+}
+
+.super-card:hover {
+    transform: translateY(-6px) scale(1.02);
+    box-shadow: 0 12px 28px rgba(0, 0, 0, 0.12), 0 6px 14px rgba(0, 0, 0, 0.08) !important;
+}
+
+.super-card:active {
+    transform: translateY(-3px) scale(1.01);
+    transition: all 0.1s cubic-bezier(0.4, 0, 0.2, 1) !important;
+}
+
+/* Active card state (for server running) */
+.super-card-active {
+    border: 2px solid #c10015 !important;
+    box-shadow: 0 4px 20px rgba(193, 0, 21, 0.15) !important;
+}
+
+.super-card-active:hover {
+    box-shadow: 0 12px 32px rgba(193, 0, 21, 0.25) !important;
+}
+
+/* Button press */
+.press-button:active {
+    transform: scale(0.95);
+}
+
+/* Icon rotate on hover */
+.rotate-icon {
+    transition: transform 0.4s cubic-bezier(0.4, 0, 0.2, 1);
+}
+
+.super-card:hover .rotate-icon {
+    transform: rotate(8deg) scale(1.15);
+}
+
+/* Pure white background */
+.bg-white {
+    background: #ffffff !important;
+    padding: 40px 60px !important;
+    margin: 0 !important;
+    margin-top: 120px !important;
+    box-sizing: border-box !important;
+    overflow: visible !important;
+    min-height: auto !important;
+    height: auto !important;
+}
+
+/* ==================== Buttons (dashboard 特有) ==================== */
+
+/* Header buttons */
+.header-btn {
+    border-radius: 8px !important;
+    min-width: 100px !important;
+    height: 40px !important;
+    font-size: 14px !important;
+    font-weight: 500 !important;
+    transition: all 0.2s ease !important;
+}
+
+.header-btn:hover {
+    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15) !important;
+    transform: translateY(-1px);
+}
+
+.export-btn {
+    background: white !important;
+    color: #374151 !important;
+    border: 1px solid #d1d5db !important;
+}
+
+.export-btn:hover {
+    border-color: #9ca3af !important;
+}
+
+/* Action buttons */
+.action-btn {
+    transition: all 0.2s ease !important;
+    border-radius: 8px !important;
+    min-width: 70px !important;
+    height: 32px !important;
+    padding: 0 12px !important;
+    font-size: 13px !important;
+    font-weight: 500 !important;
+}
+
+.action-btn:hover {
+    transform: translateY(-1px);
+    box-shadow: 0 3px 8px rgba(0, 0, 0, 0.12);
+}
+
+.btn-primary {
+    background: #3b82f6 !important;
+    color: white !important;
+    border: none !important;
+}
+
+.btn-secondary {
+    background: white !important;
+    color: #374151 !important;
+    border: 1px solid #d1d5db !important;
+}
+
+.btn-secondary:hover {
+    border-color: #9ca3af !important;
+}
+
+/* Delete button */
+.btn-delete {
+    background: white !important;
+    border: none !important;
+    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1) !important;
+    color: #6b7280 !important;
+    border-radius: 50% !important;
+    width: 36px !important;
+    height: 36px !important;
+    min-width: 36px !important;
+    transition: all 0.2s ease !important;
+}
+
+.btn-delete:hover {
+    background: #f3f4f6 !important;
+    color: #374151 !important;
+    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.15) !important;
+}
+
+.btn-delete .q-btn__content {
+    min-width: unset !important;
+    width: 100% !important;
+    padding: 0 !important;
+}
+
+.press-button {
+    background: transparent !important;
+    box-shadow: none !important;
+}
+
+.press-button:active {
+    transform: scale(0.95);
+}
+
+/* Button layout */
+.button-layout {
+    display: flex !important;
+    justify-content: space-between !important;
+    align-items: center !important;
+    width: 100% !important;
+    margin-top: auto !important;
+    gap: 16px !important;
+}
+
+.right-buttons {
+    display: flex !important;
+    gap: 12px !important;
+}
+
+/* ==================== Status Badges ==================== */
+
+.status-badge {
+    padding: 4px 8px;
+    border-radius: 12px;
+    font-size: 0.75rem;
+    font-weight: 500;
+    display: inline-block;
+}
+
+.status-completed {
+    background: #dcfce7;
+    color: #166534;
+}
+
+.status-in-progress {
+    background: #fef3c7;
+    color: #92400e;
+}
+
+.status-cancelled {
+    background: #fee2e2;
+    color: #991b1b;
+}
+
+/* ==================== Empty State ==================== */
+
+.empty-state {
+    background: transparent;
+    border: none;
+    padding: 80px 40px;
+    text-align: center;
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+}
+
+.empty-content {
+    display: flex !important;
+    flex-direction: column !important;
+    align-items: center !important;
+    justify-content: center !important;
+    text-align: center !important;
+    width: 100% !important;
+    height: 100% !important;
+}
+
+/* Empty state button */
+.empty-state .q-btn {
+    border-radius: 12px !important;
+    font-size: 16px !important;
+    font-weight: 500 !important;
+    letter-spacing: 0.02em !important;
+    transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1) !important;
+    min-width: 140px !important;
+    height: 48px !important;
+    text-transform: none !important;
+}
+
+.empty-state .q-btn:hover {
+    transform: translateY(-2px);
+    box-shadow: 0 8px 20px rgba(25, 118, 210, 0.25) !important;
+}
+
+.empty-state .q-btn:active {
+    transform: translateY(0);
+}
+
+/* ==================== Dialog ==================== */
+
+.dialog-card {
+    background: white !important;
+    border-radius: 16px !important;
+    box-shadow: 0 10px 40px rgba(0, 0, 0, 0.15) !important;
+}
+
+/* Info box */
+.info-box {
+    background: #f9fafb;
+    border: 1px solid #e5e7eb;
+    border-radius: 12px;
+    padding: 20px;
+}
+
+.export-summary-box {
+    background: white;
+    border: 1px solid #e5e7eb;
+    border-radius: 12px;
+    padding: 16px;
+}
+
+.divider {
+    height: 1px;
+    background: rgba(0, 0, 0, 0.08);
+    margin: 12px 0;
+}
+
+/* Info field */
+.info-field {
+    padding: 12px 0;
+    border-bottom: 1px solid rgba(0, 0, 0, 0.06);
+}
+
+/* ==================== Responsive ==================== */
+
+@media (max-width: 1400px) {
+    .bg-white {
+        padding: 40px 60px !important;
+    }
+
+    .px-6 {
+        padding-left: 2.5rem !important;
+        padding-right: 2.5rem !important;
+    }
+}
+
+@media (max-width: 1024px) {
+    .bg-white {
+        padding: 30px 40px !important;
+    }
+
+    .px-6 {
+        padding-left: 2rem !important;
+        padding-right: 2rem !important;
+    }
+}
+
+/* ==================== WiFi Indicator ==================== */
+
+.wifi-indicator-btn {
+    border-radius: 50% !important;
+    width: 44px !important;
+    height: 44px !important;
+    min-width: 44px !important;
+    background: transparent !important;
+    transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1) !important;
+}
+
+.wifi-indicator-btn:hover {
+    background: rgba(0, 0, 0, 0.04) !important;
+}
+
+.wifi-indicator-btn:active {
+    background: rgba(0, 0, 0, 0.08) !important;
+    transform: scale(0.95);
+}
+
+/* WiFi Dialog */
+.wifi-dialog-card {
+    border-radius: 20px;
+    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.15), 0 8px 24px rgba(0, 0, 0, 0.1);
+    animation: slideUp 0.3s cubic-bezier(0.4, 0, 0.2, 1);
+}
+
+/* Networks container - scrollable but hide scrollbar */
+.wifi-dialog-card .q-scrollarea__thumb {
+    display: none !important;
+}
+
+/* Alternative: hide native scrollbar */
+.wifi-dialog-card *::-webkit-scrollbar {
+    display: none !important;
+}
+
+.wifi-dialog-card * {
+    -ms-overflow-style: none !important;
+    scrollbar-width: none !important;
+}
+
+/* Current Connection Card - Clean, no border, no background */
+.wifi-current-card {
+    background: transparent !important;
+    border: none !important;
+    border-radius: 12px !important;
+    padding: 16px !important;
+    margin-bottom: 16px !important;
+    box-shadow: none !important;
+    transition: all 0.2s ease !important;
+}
+
+.wifi-current-card:hover {
+    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08) !important;
+}
+
+/* Network Cards - No border, shadow on hover */
+.wifi-network-card {
+    border-radius: 12px !important;
+    padding: 14px !important;
+    transition: all 0.2s ease !important;
+    background: white !important;
+    border: none !important;
+    box-shadow: none !important;
+    cursor: pointer !important;
+}
+
+.wifi-network-card:hover {
+    box-shadow: 0 4px 12px rgba(102, 126, 234, 0.15) !important;
+    transform: translateY(-2px);
+}
+
+/* Connect Form - Compact, single row height */
+.wifi-connect-form {
+    background: rgba(248, 249, 250, 0.6) !important;
+    border: none !important;
+    border-radius: 12px !important;
+    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06) !important;
+    overflow: hidden !important;
+    transition: max-height 0.4s cubic-bezier(0.4, 0, 0.2, 1),
+                opacity 0.3s ease,
+                padding 0.3s ease !important;
+}
+
+/* Input row - force input to take remaining space */
+.wifi-connect-form .q-field {
+    flex: 1 !important;
+    min-width: 0 !important;
+}
+
+/* Connect Button - Fixed width, always on the right */
+.wifi-connect-btn {
+    border-radius: 50% !important;
+    width: 40px !important;
+    height: 40px !important;
+    min-width: 40px !important;
+    max-width: 40px !important;
+    transition: all 0.2s ease !important;
+    background: white !important;
+    border: none !important;
+    color: #3b82f6 !important;
+    box-shadow: none !important;
+    flex-shrink: 0 ! important;
+    margin-left: auto !important;
+}
+
+.wifi-connect-btn:hover {
+    background: rgba(59, 130, 246, 0.1) !important;
+    transform: scale(1.1);
+}
+
+.wifi-connect-btn:active {
+    transform: scale(0.95);
+}
+
+/* Scan Button */
+.wifi-scan-btn {
+    border-radius: 50% !important;
+    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1) !important;
+}
+
+.wifi-scan-btn:hover {
+    transform: rotate(180deg) scale(1.1);
+}

audex/view/static/css/glass.css

@@ -0,0 +1,22 @@
+.header-glass {
+    backdrop-filter: blur(80px) saturate(200%) !important;
+    -webkit-backdrop-filter: blur(80px) saturate(200%) !important;
+    background: rgba(255, 255, 255, 0.5) !important;
+    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.03) !important;
+    padding-top: 1.5rem !important;
+    padding-bottom: 1.5rem !important;
+    margin-top: 1.5rem !important;
+    min-height: 60px !important;
+    position: fixed !important;
+    top: 0 !important;
+    left: 0 !important;
+    right: 0 !important;
+    z-index: 1000 !important;
+}
+
+.glass-card {
+    border-radius: 24px !important;
+    background: transparent !important;
+    box-shadow: none !important;
+    border: 1px solid rgba(0, 0, 0, 0.08) !important;
+}