nanakura/moeka-project
1
0
Fork 0
Code Issues Pull Requests 1 Actions 1 Packages Projects Releases Wiki Activity

chore(stage-ui): split subtitles

Browse Source
This commit is contained in:
Neko Ayaka
2025-07-06 22:54:17 +08:00
parent 917ed544b9
commit e6a1f12ac7
2 changed files with 82 additions and 66 deletions
Download Patch File Download Diff File Expand all files Collapse all files
packages/stage-ui/src/components/Scenes/Stage.vue
+1 -66
View File
@@ -17,7 +17,6 @@ import { onMounted, onUnmounted, ref } from 'vue'
import Live2DScene from './Live2D.vue'
import VRMScene from './VRM.vue'
import { useMarkdown } from '../../composables/markdown'
import { useQueue } from '../../composables/queue'
import { useDelayMessageQueue, useEmotionsMessageQueue, useMessageContentQueue } from '../../composables/queues'
import { llmInferenceEndToken } from '../../constants'
@@ -41,8 +40,7 @@ const vrmViewerRef = ref<{ setExpression: (expression: string) => void }>()
const { stageView } = storeToRefs(useSettings())
const { mouthOpenSize } = storeToRefs(useSpeakingStore())
const { audioContext, calculateVolume } = useAudioContext()
const { onBeforeMessageComposed, onBeforeSend, onTokenLiteral, onTokenSpecial, onStreamEnd, streamingMessage, onAssistantResponseEnd } = useChatStore()
const { process } = useMarkdown()
const { onBeforeMessageComposed, onBeforeSend, onTokenLiteral, onTokenSpecial, onStreamEnd, onAssistantResponseEnd } = useChatStore()
const providersStore = useProvidersStore()
const audioAnalyser = ref<AnalyserNode>()
@@ -243,68 +241,5 @@ onMounted(async () => {
@error="console.error"
/>
</div>
<div
v-if="streamingMessage.content !== ''"
class="animate-stripe"
absolute
left="1/2"
bottom="20%"
z="20"
rounded-2xl
text="primary-600"
px-2 py-2
transform="translate-x--1/2"
>
<div bg="primary-50" rounded-xl px-10 py-6>
<div class="markdown-content" v-html="process(streamingMessage.content as string)" />
</div>
</div>
</div>
</template>
<style lang="css" scoped>
/**
Plunker - Untitled
https://plnkr.co/edit/4wPv1ogKNMfJ6rQPhZdJ?p=preview&preview
by https://stackoverflow.com/a/31547711/19954520
*/
.animate-stripe {
background-image: repeating-linear-gradient(-45deg, #f472b6, #f472b6 25px, #f9a8d4 25px, #f9a8d4 50px);
animation: progress 2s linear infinite;
background-size: 150% 100%;
}
@-webkit-keyframes progress {
0% {
background-position: 0 0;
}
100% {
background-position: -75px 0px;
}
}
@-moz-keyframes progress {
0% {
background-position: 0 0;
}
100% {
background-position: -75px 0px;
}
}
@-ms-keyframes progress {
0% {
background-position: 0 0;
}
100% {
background-position: -75px 0px;
}
}
@keyframes progress {
0% {
background-position: 0 0;
}
100% {
background-position: -70px 0px;
}
}
</style>
packages/stage-ui/src/components/Scenes/StageSubtitlesWithStrip.vue
+81
View File
@@ -0,0 +1,81 @@
<script setup lang="ts">
import { useMarkdown } from '../../composables/markdown'
import { useChatStore } from '../../stores/chat'
const { streamingMessage } = useChatStore()
const { process } = useMarkdown()
</script>
<template>
<div
v-if="streamingMessage.content !== ''"
class="animate-stripe"
absolute
left="1/2"
bottom="20%"
z="20"
rounded-2xl
text="primary-600"
px-2 py-2
transform="translate-x--1/2"
>
<div bg="primary-50" rounded-xl px-10 py-6>
<div class="markdown-content" v-html="process(streamingMessage.content as string)" />
</div>
</div>
</template>
<style lang="css" scoped>
/**
Plunker - Untitled
https://plnkr.co/edit/4wPv1ogKNMfJ6rQPhZdJ?p=preview&preview
by https://stackoverflow.com/a/31547711/19954520
*/
.animate-stripe {
--animate-stripe-color-primary: color-mix(in srgb, oklch(74% var(--chromatic-chroma-400) calc(var(--chromatic-hue) + 0deg) / %alpha) 80%, oklch(100% 0 360 / %alpha));
--animate-stripe-color-secondary: color-mix(in srgb, oklch(90% var(--chromatic-chroma-200) calc(var(--chromatic-hue) + 0deg) / %alpha) 80%, oklch(100% 0 360 / %alpha));
background-image: repeating-linear-gradient(-45deg, var(--animate-stripe-color-primary), var(--animate-stripe-color-primary) 25px, var(--animate-stripe-color-secondary) 25px, var(--animate-stripe-color-secondary) 50px);
animation: progress 2s linear infinite;
background-size: 150% 100%;
}
.dark .animate-stripe {
--animate-stripe-color-primary: color-mix(in srgb, oklch(37% calc(var(--chromatic-chroma-900) * 0.5) var(--chromatic-hue)) 30%, oklch(100% 0 360));
--animate-stripe-color-secondary: color-mix(in srgb, oklch(29% calc(var(--chromatic-chroma-950) * 0.5) var(--chromatic-hue)) 30%, oklch(100% 0 360));
}
@-webkit-keyframes progress {
0% {
background-position: 0 0;
}
100% {
background-position: -75px 0px;
}
}
@-moz-keyframes progress {
0% {
background-position: 0 0;
}
100% {
background-position: -75px 0px;
}
}
@-ms-keyframes progress {
0% {
background-position: 0 0;
}
100% {
background-position: -75px 0px;
}
}
@keyframes progress {
0% {
background-position: 0 0;
}
100% {
background-position: -70px 0px;
}
}
</style>