speechflow 1.6.3 → 1.6.4

package/speechflow-ui-st/package.json

@@ -16,20 +16,20 @@
     "dependencies": {
         "vue":                              "3.5.21",
         "vue3-spinners":                    "1.3.1",
-        "moment":                           "2.30.1",
         "luxon":                            "3.7.2",
         "@opensumi/reconnecting-websocket": "4.4.0",
-        "axios":                            "1.11.0",
+        "axios":                            "1.12.1",
         "typopro-web":                      "4.2.7",
         "@fortawesome/fontawesome-free":    "7.0.1",
         "patch-package":                    "8.0.0",
-        "@rse/stx":                         "1.1.0"
+        "@rse/stx":                         "1.1.1",
+        "animejs":                          "4.1.3"
     },
     "devDependencies": {
-        "vite":                             "7.1.4",
-        "typescript-eslint":                "8.42.0",
-        "@typescript-eslint/eslint-plugin": "8.42.0",
-        "@typescript-eslint/parser":        "8.42.0",
+        "vite":                             "7.1.5",
+        "typescript-eslint":                "8.43.0",
+        "@typescript-eslint/eslint-plugin": "8.43.0",
+        "@typescript-eslint/parser":        "8.43.0",
         "@vitejs/plugin-vue":               "6.0.1",
         "@rollup/plugin-yaml":              "4.1.2",
         "vite-plugin-node-polyfills":       "0.24.0",
@@ -50,7 +50,7 @@
 
         "nodemon":                          "3.1.10",
         "shx":                              "0.4.0",
-        "stylelint":                        "16.23.1",
+        "stylelint":                        "16.24.0",
         "stylelint-config-html":            "1.1.0",
         "stylelint-config-recommended-vue": "1.6.1",
         "stylelint-config-standard":        "39.0.0",
@@ -59,12 +59,13 @@
         "postcss-html":                     "1.8.0",
         "stylus":                           "0.64.0",
         "typescript":                       "5.9.2",
-        "vue-tsc":                          "3.0.6",
+        "vue-tsc":                          "3.0.7",
         "delay-cli":                        "2.0.0",
         "cross-env":                        "10.0.0",
         "serve":                            "14.2.5",
 
-        "@types/luxon":                     "3.7.1"
+        "@types/luxon":                     "3.7.1",
+        "@types/animejs":                   "3.1.13"
     },
     "overrides": {
         "@liuli-util/vite-plugin-node":     { "vite": ">=6.0.0" }

package/speechflow-ui-st/src/app.vue

@@ -8,23 +8,25 @@
 
 <template>
     <div class="app">
-        <div class="block">
-            <div class="text-col"
-                v-bind:class="{ intermediate: lastTextBlockKind === 'intermediate' }">
-                <div v-bind:key="value"
-                    v-for="(value, idx) of text"
-                    class="text-value">
-                    {{ value }}
-                    <span class="cursor" v-if="idx === (text.length - 1) && lastTextBlockKind === 'intermediate'">
-                        <spinner-grid class="spinner-grid" size="32"/>
+        <div class="area">
+            <div class="block" ref="block">
+                <span v-bind:key="chunk.id"
+                    v-for="(chunk, idx) of text"
+                    class="chunk"
+                    v-bind:class="{ intermediate: chunk.kind === 'intermediate', removed: chunk.removed }"
+                    v-bind:ref="`chunk-${chunk.id}`">
+                    {{ chunk.text }}
+                    <span class="cursor" v-if="idx === (text.length - 1) && chunk.kind === 'intermediate'">
+                        <spinner-grid class="spinner-grid" size="50"/>
                     </span>
-                </div>
+                </span>
             </div>
         </div>
     </div>
 </template>
 
 <style lang="stylus">
+/*  entire app  */
 .app
     position: relative
     width:   100vw
@@ -35,53 +37,74 @@
     flex-direction: column
     justify-content: center
     align-items: center
-    .block
-        height: 20vh
-        width: 80vw
+
+    /*  rendering area  */
+    .area
+        height: auto
+        min-height: 30vh
+        max-height: 60vh
+        width: 75vw
         position: absolute
-        bottom: 1vh
-        .text-col
+        bottom: 4vh
+        mask: linear-gradient(to bottom, transparent 0%, black 50%)
+        overflow-x: hidden
+        overflow-y: hidden
+        display: flex
+        flex-direction: column
+        align-items: center
+        justify-content: flex-end
+
+        /*  content block  */
+        .block
+            display: block
+            text-align: left
             width: 100%
-            height: 100%
-            overflow-x: hidden
-            overflow-y: scroll
-            display: flex
-            flex-direction: column
-            align-items: flex-end
-            justify-content: flex-end
-            .text-value
-                width: calc(100% - 2 * 1.0vw)
-                background-color: #000000c0
-                color: #ffffff
-                border-radius: 1vw
-                font-size: 2vw
-                padding: 0.5vw 1.0vw
-                margin-bottom: 0.5vw
-                overflow-wrap: break-word
+            overflow-wrap: break-word
+
+            /*  content chunk  */
+            .chunk
+                color: #eeeeee
+                background-color: #000000b0
+                text-shadow: 0 0 0.20vw #000000
+                -webkit-text-stroke: 0.05vw #000000
+                font-size: 2.0vw
+                font-weight: 600
+                line-height: 1.4
+                padding-left:  0.20vw
+                padding-right: 0.20vw
                 .cursor
                     display: inline-block
                     margin-left: 10px
-        .text-col.intermediate
-            .text-value:last-child
-                background-color: #666666c0
+                &.intermediate:last-child
+                    color: #ffffff
+                &.removed
+                    opacity: 0
 </style>
 
 <script setup lang="ts">
-import { defineComponent }   from "vue"
-import { VueSpinnerGrid }    from "vue3-spinners"
-import moment                from "moment"
-import { Duration }          from "luxon"
-import ReconnectingWebSocket from "@opensumi/reconnecting-websocket"
+import { defineComponent }    from "vue"
+import { VueSpinnerGrid }     from "vue3-spinners"
+import { DateTime, Duration } from "luxon"
+import ReconnectingWebSocket  from "@opensumi/reconnecting-websocket"
+import * as anime             from "animejs"
 </script>
 
 <script lang="ts">
+type TextChunk = {
+    id:             string,
+    timestamp:      DateTime,
+    kind:           "intermediate" | "final",
+    text:           string,
+    removing:       boolean,
+    removed:        boolean
+}
 type SpeechFlowChunk = {
     timestampStart: Duration,
     timestampEnd:   Duration,
     kind:           "intermediate" | "final",
     type:           "text",
     payload:        string,
-    meta:           Map<string, any>
+    meta:           Map<string, unknown>
 }
 export default defineComponent({
     name: "app",
@@ -89,13 +112,39 @@ export default defineComponent({
         "spinner-grid":  VueSpinnerGrid
     },
     data: () => ({
-        text: [] as string[],
-        lastTextBlockKind: ""
+        text: [] as TextChunk[],
+        chunkIdCounter: 0,
+        cleanupIntervalId: null as ReturnType<typeof setInterval> | null
     }),
     async mounted () {
         /*  determine API URL  */
         const url = new URL("/api", document.location.href).toString()
 
+        /*  optically remove outdated text chunks  */
+        this.cleanupIntervalId = setInterval(() => {
+            for (const chunk of this.text) {
+                if (chunk.timestamp < DateTime.now().minus({ seconds: 20 }) && !chunk.removing && !chunk.removed) {
+                    const el = this.$refs[`chunk-${chunk.id}`] as HTMLSpanElement
+                    if (!el)
+                        continue
+
+                    /*  start removing  */
+                    chunk.removing = true
+                    chunk.removed  = false
+                    anime.animate(el, {
+                        opacity:    [ 1, 0 ],
+                        duration:   2000,
+                        easing:     "easeOutQuad",
+                        onComplete: () => {
+                            /*  end removing  */
+                            chunk.removing = false
+                            chunk.removed  = true
+                        }
+                    })
+                }
+            }
+        }, 500)
+
         /*  connect to WebSocket API for receiving dashboard information  */
         const ws = new ReconnectingWebSocket(url, [], {
             reconnectionDelayGrowFactor: 1.3,
@@ -104,7 +153,18 @@ export default defineComponent({
             connectionTimeout:           4000,
             minUptime:                   5000
         })
+
+        /*  track connection open/close  */
+        ws.addEventListener("open", (ev) => {
+            this.log("INFO", "WebSocket connection established")
+        })
+        ws.addEventListener("close", (ev) => {
+            this.log("INFO", "WebSocket connection destroyed")
+        })
+
+        /*  receive messages  */
         ws.addEventListener("message", (ev) => {
+            /*  parse message  */
             let chunk: SpeechFlowChunk
             try {
                 chunk = JSON.parse(ev.data)
@@ -113,18 +173,52 @@ export default defineComponent({
                 this.log("ERROR", "Failed to parse WebSocket message", { error, data: ev.data })
                 return
             }
-            if (this.lastTextBlockKind === "intermediate")
-                this.text[this.text.length - 1] = chunk.payload
+
+            /*  process text chunks  */
+            if (this.text.length > 0 && this.text[this.text.length - 1].kind === "intermediate") {
+                /*  override previous intermediate text chunk
+                    with either another intermediate one or a final one  */
+                const lastChunk = this.text[this.text.length - 1]
+                lastChunk.text      = chunk.payload
+                lastChunk.kind      = chunk.kind
+                lastChunk.timestamp = DateTime.now()
+            }
             else {
-                this.text.push(chunk.payload)
-                this.text = this.text.slice(-2)
+                /*  remove content in case all chunks were removed
+                    (this way new next chunk starts at the left edge again
+                    and the overall memory consumption is reduced)  */
+                if (this.text.every((chunk) => chunk.removed))
+                    this.text = []
+
+                /*  add new text chunk  */
+                this.text.push({
+                    id:        `chunk-${this.chunkIdCounter++}`,
+                    text:      chunk.payload,
+                    kind:      chunk.kind,
+                    timestamp: DateTime.now(),
+                    removing:  false,
+                    removed:   false
+                })
             }
-            this.lastTextBlockKind = chunk.kind
+
+            /*  ensure we always scrolled the chunks inside the block to the bottom  */
+            this.$nextTick(() => {
+                const block = this.$refs.block as HTMLDivElement
+                block.scrollTop = block.scrollHeight
+            })
         })
     },
+    beforeUnmount () {
+        /*  cleanup  */
+        if (this.cleanupIntervalId !== null) {
+            clearInterval(this.cleanupIntervalId)
+            this.cleanupIntervalId = null
+        }
+    },
     methods: {
+        /*  helper function for console logging  */
         log (level: string, msg: string, data: { [ key: string ]: any } | null = null) {
-            const timestamp = moment().format("YYYY-MM-DD hh:mm:ss.SSS")
+            const timestamp = DateTime.now().toFormat("yyyy-MM-dd HH:mm:ss.SSS")
             let output = `${timestamp} [${level}]: ${msg}`
             if (data !== null)
                 output += ` (${Object.keys(data)

package/speechflow-ui-st/src/index.ts

@@ -7,7 +7,11 @@
 /*  external dependencies  */
 import * as Vue from "vue"
 import               "typopro-web/web/TypoPRO-SourceSansPro/TypoPRO-SourceSansPro-Regular.css"
+import               "typopro-web/web/TypoPRO-SourceSansPro/TypoPRO-SourceSansPro-RegularIt.css"
+import               "typopro-web/web/TypoPRO-SourceSansPro/TypoPRO-SourceSansPro-Semibold.css"
+import               "typopro-web/web/TypoPRO-SourceSansPro/TypoPRO-SourceSansPro-SemiboldIt.css"
 import               "typopro-web/web/TypoPRO-SourceSansPro/TypoPRO-SourceSansPro-Bold.css"
+import               "typopro-web/web/TypoPRO-SourceSansPro/TypoPRO-SourceSansPro-BoldIt.css"
 import               "@fortawesome/fontawesome-free/js/all.min.js"
 import               "@fortawesome/fontawesome-free/css/all.min.css"