style(stage-*): font weight adjustments

This commit is contained in:
Neko Ayaka
2025-06-28 00:41:24 +08:00
parent 0bc7abc396
commit f05eb04f38
22 changed files with 50 additions and 50 deletions
@@ -169,7 +169,7 @@ watch(() => messages.value.length, () => {
<template>
<div class="panel flex flex-col rounded-lg bg-white shadow">
<div class="panel-header flex items-center justify-between rounded-t-lg bg-primary p-3 text-sm text-white font-semibold">
<div class="panel-header flex items-center justify-between rounded-t-lg bg-primary p-3 text-sm text-white font-normal">
Chat Simulator
</div>
@@ -225,7 +225,7 @@ watch(() => messages.value.length, () => {
>
<div
v-if="!message.isUser"
class="bg-secondary-light text-secondary h-8 w-8 flex flex-shrink-0 items-center justify-center rounded-full text-sm font-semibold"
class="bg-secondary-light text-secondary h-8 w-8 flex flex-shrink-0 items-center justify-center rounded-full text-sm font-normal"
>
R
</div>
@@ -241,7 +241,7 @@ watch(() => messages.value.length, () => {
<div
v-if="message.isUser"
class="bg-primary-light text-primary-dark h-8 w-8 flex flex-shrink-0 items-center justify-center rounded-full text-sm font-semibold"
class="bg-primary-light text-primary-dark h-8 w-8 flex flex-shrink-0 items-center justify-center rounded-full text-sm font-normal"
>
U
</div>
@@ -257,7 +257,7 @@ watch(() => messages.value.length, () => {
@keyup.enter="sendMessage"
>
<button
class="hover:bg-primary-dark cursor-pointer rounded-lg border-none bg-primary px-5 py-3 text-white font-semibold transition"
class="hover:bg-primary-dark cursor-pointer rounded-lg border-none bg-primary px-5 py-3 text-white font-normal transition"
@click="sendMessage"
>
Send
@@ -280,7 +280,7 @@ watch(() => messages.value.length, () => {
class="component-card hover:bg-primary-light cursor-pointer border border-gray-200 rounded p-2 transition hover:border-primary"
@click="addComponent(name)"
>
<div class="mb-1 text-sm font-semibold">
<div class="mb-1 text-sm font-normal">
{{ formatComponentName(name) }}
</div>
<div class="line-clamp-2 overflow-hidden text-ellipsis text-xs text-gray">
@@ -299,7 +299,7 @@ watch(() => messages.value.length, () => {
class="component-card hover:bg-primary-light cursor-pointer border border-gray-200 rounded p-2 transition hover:border-primary"
@click="addSpeechComponent(name)"
>
<div class="mb-1 text-sm font-semibold">
<div class="mb-1 text-sm font-normal">
{{ formatComponentName(name) }}
</div>
<div class="line-clamp-2 overflow-hidden text-ellipsis text-xs text-gray">
@@ -72,14 +72,14 @@ function applyTemplate(template: string) {
<template>
<div class="panel rounded-lg bg-white shadow">
<div class="panel-header flex items-center justify-between rounded-t-lg bg-primary p-3 text-sm text-white font-semibold">
<div class="panel-header flex items-center justify-between rounded-t-lg bg-primary p-3 text-sm text-white font-normal">
Character Configuration
</div>
<div class="panel-body max-h-[calc(100vh-13rem)] overflow-y-auto p-4">
<!-- Core Identity -->
<div class="mb-6 flex flex-col gap-3">
<h3 class="text-sm text-gray font-semibold">
<h3 class="text-sm text-gray font-normal">
Core Identity
</h3>
@@ -107,7 +107,7 @@ function applyTemplate(template: string) {
<label for="char-essence" class="flex justify-between text-sm text-dark">
<span>Essence</span>
<span class="text-xs text-gray">
Tokens: <span class="rounded bg-gray-100 px-1.5 py-0.5 font-semibold">{{ estimateTokens(characterPrompt.coreIdentity.essence) }}</span>
Tokens: <span class="rounded bg-gray-100 px-1.5 py-0.5 font-normal">{{ estimateTokens(characterPrompt.coreIdentity.essence) }}</span>
</span>
</label>
<textarea
@@ -120,7 +120,7 @@ function applyTemplate(template: string) {
<!-- Personality Traits -->
<div class="mb-6 flex flex-col gap-3">
<h3 class="text-sm text-gray font-semibold">
<h3 class="text-sm text-gray font-normal">
Personality Traits
</h3>
@@ -187,7 +187,7 @@ function applyTemplate(template: string) {
<!-- Speech Patterns -->
<div class="mb-6 flex flex-col gap-3">
<h3 class="text-sm text-gray font-semibold">
<h3 class="text-sm text-gray font-normal">
Speech Patterns
</h3>
@@ -195,7 +195,7 @@ function applyTemplate(template: string) {
<label for="speech-patterns" class="flex justify-between text-sm text-dark">
<span>Expression Style</span>
<span class="text-xs text-gray">
Tokens: <span class="rounded bg-gray-100 px-1.5 py-0.5 font-semibold">{{ estimateTokens(characterPrompt.speechPatterns) }}</span>
Tokens: <span class="rounded bg-gray-100 px-1.5 py-0.5 font-normal">{{ estimateTokens(characterPrompt.speechPatterns) }}</span>
</span>
</label>
<textarea
@@ -208,7 +208,7 @@ function applyTemplate(template: string) {
<!-- Emotional State -->
<div class="mb-6 flex flex-col gap-3">
<h3 class="text-sm text-gray font-semibold">
<h3 class="text-sm text-gray font-normal">
Current Emotional State
</h3>
@@ -217,7 +217,7 @@ function applyTemplate(template: string) {
v-for="emotion in ['happy', 'curious', 'thoughtful', 'playful', 'annoyed', 'excited']"
:key="emotion"
class="flex flex-col cursor-pointer items-center justify-center gap-1 border border-gray-200 rounded-md bg-white p-2 text-sm transition-colors"
:class="{ 'bg-primary-light border-primary font-semibold shadow': characterPrompt.currentEmotion === emotion }"
:class="{ 'bg-primary-light border-primary font-normal shadow': characterPrompt.currentEmotion === emotion }"
@click="characterPrompt.updateEmotion(emotion)"
>
<span class="text-lg">
@@ -236,7 +236,7 @@ function applyTemplate(template: string) {
<label for="emotion-description" class="flex justify-between text-sm text-dark">
<span>Emotion Description</span>
<span class="text-xs text-gray">
Tokens: <span class="rounded bg-gray-100 px-1.5 py-0.5 font-semibold">
Tokens: <span class="rounded bg-gray-100 px-1.5 py-0.5 font-normal">
{{ estimateTokens(getEmotionDescription()) }}
</span>
</span>
@@ -252,7 +252,7 @@ function applyTemplate(template: string) {
<!-- Conversation Context -->
<div class="mb-6 flex flex-col gap-3">
<h3 class="text-sm text-gray font-semibold">
<h3 class="text-sm text-gray font-normal">
Conversation Context
</h3>
@@ -285,7 +285,7 @@ function applyTemplate(template: string) {
<label for="context-description" class="flex justify-between text-sm text-dark">
<span>Context Description</span>
<span class="text-xs text-gray">
Tokens: <span class="rounded bg-gray-100 px-1.5 py-0.5 font-semibold">
Tokens: <span class="rounded bg-gray-100 px-1.5 py-0.5 font-normal">
{{ estimateTokens(getContextDescription()) }}
</span>
</span>
@@ -301,7 +301,7 @@ function applyTemplate(template: string) {
<!-- Response Format -->
<div class="mb-6 flex flex-col gap-3">
<h3 class="text-sm text-gray font-semibold">
<h3 class="text-sm text-gray font-normal">
Response Format
</h3>
@@ -309,7 +309,7 @@ function applyTemplate(template: string) {
<label for="response-format" class="flex justify-between text-sm text-dark">
<span>Format Instructions</span>
<span class="text-xs text-gray">
Tokens: <span class="rounded bg-gray-100 px-1.5 py-0.5 font-semibold">{{ estimateTokens(characterPrompt.responseFormat) }}</span>
Tokens: <span class="rounded bg-gray-100 px-1.5 py-0.5 font-normal">{{ estimateTokens(characterPrompt.responseFormat) }}</span>
</span>
</label>
<textarea
@@ -322,7 +322,7 @@ function applyTemplate(template: string) {
<!-- Example Response -->
<div class="mb-6 flex flex-col gap-3">
<h3 class="text-sm text-gray font-semibold">
<h3 class="text-sm text-gray font-normal">
Example Response
</h3>
@@ -339,7 +339,7 @@ function applyTemplate(template: string) {
<label for="example-response" class="flex justify-between text-sm text-dark">
<span>Example</span>
<span class="text-xs text-gray">
Tokens: <span class="rounded bg-gray-100 px-1.5 py-0.5 font-semibold">
Tokens: <span class="rounded bg-gray-100 px-1.5 py-0.5 font-normal">
{{ estimateTokens(getExampleDescription()) }}
</span>
</span>
@@ -355,7 +355,7 @@ function applyTemplate(template: string) {
<!-- Preset Templates -->
<div class="mt-4">
<h3 class="mb-2 text-sm text-gray font-semibold">
<h3 class="mb-2 text-sm text-gray font-normal">
Preset Templates
</h3>
<div class="flex flex-wrap gap-2">
@@ -363,7 +363,7 @@ function applyTemplate(template: string) {
v-for="template in ['default', 'minimal', 'anime-lover', 'philosophical', 'tech-nerd']"
:key="template"
class="cursor-pointer border border-gray-200 rounded-md bg-white p-1.5 px-3 text-sm transition-colors"
:class="{ 'bg-primary text-white border-primary-dark font-semibold': activeTemplate === template }"
:class="{ 'bg-primary text-white border-primary-dark font-normal': activeTemplate === template }"
@click="applyTemplate(template)"
>
{{ template.charAt(0).toUpperCase() + template.slice(1).replace('-', ' ') }}
@@ -88,17 +88,17 @@ function estimateTokens(text: string) {
<template>
<div class="panel flex flex-col rounded-lg bg-white shadow">
<div class="panel-header flex items-center justify-between rounded-t-lg bg-primary p-3 text-sm text-white font-semibold">
<div class="panel-header flex items-center justify-between rounded-t-lg bg-primary p-3 text-sm text-white font-normal">
Prompt Preview
<span class="text-xs">
Total Tokens: <span class="rounded bg-white/20 px-1.5 py-0.5 font-semibold">{{ estimateTokens(completePrompt || '') }}</span>
Total Tokens: <span class="rounded bg-white/20 px-1.5 py-0.5 font-normal">{{ estimateTokens(completePrompt || '') }}</span>
</span>
</div>
<div class="panel-body max-h-[calc(100vh-13rem)] flex-1 overflow-y-auto p-4">
<div v-for="(module, index) in moduleList" :key="index" class="mb-3">
<div
class="mb-2 flex cursor-pointer items-center justify-between text-sm text-gray font-semibold hover:text-primary"
class="mb-2 flex cursor-pointer items-center justify-between text-sm text-gray font-normal hover:text-primary"
@click="toggleModule(module.id)"
>
{{ module.title }}
+1 -1
View File
@@ -189,7 +189,7 @@ if (import.meta.hot) { // For better DX
>
<div class="absolute h-32 w-full flex items-center justify-center b-2 b-primary bg-white">
<div class="wall absolute top-0 h-8" />
<div data-tauri-drag-region class="absolute left-0 top-0 h-full w-full flex animate-flash animate-duration-5s animate-count-infinite items-center justify-center text-1.5rem text-primary-300 font-bold">
<div data-tauri-drag-region class="absolute left-0 top-0 h-full w-full flex animate-flash animate-duration-5s animate-count-infinite items-center justify-center text-1.5rem text-primary-300 font-normal">
DRAG HERE TO MOVE
</div>
<div data-tauri-drag-region class="wall absolute bottom-0 h-8" />
@@ -178,7 +178,7 @@ const cardPostHistoryInstructions = makeComputed('postHistoryInstructions')
<DialogOverlay class="data-[state=open]:animate-fadeIn data-[state=closed]:animate-fadeOut fixed inset-0 z-100 bg-black/50 backdrop-blur-sm" />
<DialogContent class="data-[state=open]:animate-contentShow data-[state=closed]:animate-contentHide fixed left-1/2 top-1/2 z-100 m-0 max-h-[90vh] max-w-6xl w-[92vw] flex flex-col overflow-auto border border-neutral-200 rounded-xl bg-white p-5 shadow-xl 2xl:w-[60vw] lg:w-[80vw] md:w-[85vw] xl:w-[70vw] -translate-x-1/2 -translate-y-1/2 dark:border-neutral-700 dark:bg-neutral-800 sm:p-6">
<div class="w-full flex flex-col gap-5">
<DialogTitle text-2xl font-bold class="from-primary-500 to-primary-400 bg-gradient-to-r bg-clip-text text-transparent">
<DialogTitle text-2xl font-normal class="from-primary-500 to-primary-400 bg-gradient-to-r bg-clip-text text-transparent">
{{ t("settings.pages.card.create_card") }}
</DialogTitle>
@@ -174,7 +174,7 @@ const activeTab = computed({
<div flex="~ row" items-center justify-between>
<div>
<div flex="~ row" items-center gap-2>
<DialogTitle text-2xl font-bold class="from-primary-500 to-primary-400 bg-gradient-to-r bg-clip-text text-transparent">
<DialogTitle text-2xl font-normal class="from-primary-500 to-primary-400 bg-gradient-to-r bg-clip-text text-transparent">
{{ selectedCard.name }}
</DialogTitle>
<div v-if="isActive" class="flex items-center gap-1 rounded-full bg-primary-100 px-2 py-0.5 text-xs text-primary-600 font-medium dark:bg-primary-900/40 dark:text-primary-400">
@@ -44,7 +44,7 @@ function handleConfirm() {
<AlertDialogContent
class="data-[state=open]:animate-contentShow data-[state=closed]:animate-contentHide fixed left-1/2 top-1/2 z-100 max-w-md w-full border border-neutral-200 rounded-xl bg-white p-6 shadow-xl -translate-x-1/2 -translate-y-1/2 dark:border-neutral-700 dark:bg-neutral-800"
>
<AlertDialogTitle class="mb-4 text-xl font-bold">
<AlertDialogTitle class="mb-4 text-xl font-normal">
{{ t('settings.pages.card.delete_card') }}
</AlertDialogTitle>
<AlertDialogDescription class="mb-6">
@@ -32,7 +32,7 @@ const { t } = useI18n()
:delay="5 * 50"
transition="all ease-in-out duration-250"
>
<span text-lg font-semibold>{{ $t('settings.pages.themes.sections.section.custom-color.fields.field.primary-color.label') }}</span>
<span text-lg font-normal>{{ $t('settings.pages.themes.sections.section.custom-color.fields.field.primary-color.label') }}</span>
<label relative flex cursor-pointer items-center gap-2>
<input
v-model="settings.themeColorsHueDynamic"
@@ -19,7 +19,7 @@ const dark = useDark()
<template v-else>
<img :src="Logo" h-8 w-8 class="theme-colored">
</template>
<div translate-y="[2px]" font-semibold font-quicksand>
<div translate-y="[2px]" font-normal font-quicksand>
<span>AIRI</span>
</div>
</RouterLink>
@@ -232,7 +232,7 @@ onAfterSend(async () => {
</div>
</div>
<div flex="~ row" gap-2 hidden>
<div flex="~ row" relative text-white font-bold>
<div flex="~ row" relative text-white font-normal>
<TransitionVertical>
<fieldset
v-if="showMicrophoneSelect"
@@ -46,7 +46,7 @@ onTokenLiteral(async () => {
>
<div flex="~ row" gap-2>
<div flex-1>
<span text-xs text="violet-400/90 dark:violet-600/90" font-semibold class="inline <sm:hidden">{{ t('stage.chat.message.character-name.core-system') }}</span>
<span text-xs text="violet-400/90 dark:violet-600/90" font-normal class="inline <sm:hidden">{{ t('stage.chat.message.character-name.core-system') }}</span>
</div>
<div i-solar:danger-triangle-bold-duotone text-violet-500 />
</div>
@@ -63,7 +63,7 @@ onTokenLiteral(async () => {
rounded-lg px-2 py-1 h="unset <sm:fit" bg="<md:primary-500/25"
>
<div>
<span text-xs text="primary-400/90 dark:primary-600/90" font-semibold class="inline <sm:hidden">{{ t('stage.chat.message.character-name.airi') }}</span>
<span text-xs text="primary-400/90 dark:primary-600/90" font-normal class="inline <sm:hidden">{{ t('stage.chat.message.character-name.airi') }}</span>
</div>
<div v-if="sending && index === messages.length - 1" i-eos-icons:three-dots-loading />
<div v-else class="markdown-content break-words" text="base <sm:xs" v-html="process(message.content as string)" />
@@ -75,7 +75,7 @@ onTokenLiteral(async () => {
h="unset <sm:fit" min-w-20 rounded-lg px-2 py-1 bg="<md:cyan-500/25"
>
<div>
<span text-xs text="cyan-400/90 dark:cyan-600/90" font-semibold class="inline <sm:hidden">{{ t('stage.chat.message.character-name.you') }}</span>
<span text-xs text="cyan-400/90 dark:cyan-600/90" font-normal class="inline <sm:hidden">{{ t('stage.chat.message.character-name.you') }}</span>
</div>
<div v-if="message.content" class="markdown-content break-words" text="base <sm:xs" v-html="process(message.content as string)" />
<div v-else />
@@ -50,7 +50,7 @@ onTokenLiteral(async () => {
bg="<md:primary-500/25"
>
<div>
<span text-xs text="primary-400/90 dark:primary-600/90" font-semibold class="inline <sm:hidden">{{ t('stage.chat.message.character-name.airi') }}</span>
<span text-xs text="primary-400/90 dark:primary-600/90" font-normal class="inline <sm:hidden">{{ t('stage.chat.message.character-name.airi') }}</span>
</div>
<div v-if="message.content" class="markdown-content" text="base <sm:xs" v-html="process(message.content as string)" />
<div v-else i-eos-icons:three-dots-loading />
@@ -66,7 +66,7 @@ onTokenLiteral(async () => {
bg="<md:cyan-500/25"
>
<div>
<span text-xs text="cyan-400/90 dark:cyan-600/90" font-semibold class="inline <sm:hidden">{{ t('stage.chat.message.character-name.you') }}</span>
<span text-xs text="cyan-400/90 dark:cyan-600/90" font-normal class="inline <sm:hidden">{{ t('stage.chat.message.character-name.you') }}</span>
</div>
<div v-if="message.content" class="markdown-content" text="base <sm:xs" v-html="process(message.content as string)" />
<div v-else />
@@ -178,7 +178,7 @@ const cardPostHistoryInstructions = makeComputed('postHistoryInstructions')
<DialogOverlay class="data-[state=open]:animate-fadeIn data-[state=closed]:animate-fadeOut fixed inset-0 z-100 bg-black/50 backdrop-blur-sm" />
<DialogContent class="data-[state=open]:animate-contentShow data-[state=closed]:animate-contentHide fixed left-1/2 top-1/2 z-100 m-0 max-h-[90vh] max-w-6xl w-[92vw] flex flex-col overflow-auto border border-neutral-200 rounded-xl bg-white p-5 shadow-xl 2xl:w-[60vw] lg:w-[80vw] md:w-[85vw] xl:w-[70vw] -translate-x-1/2 -translate-y-1/2 dark:border-neutral-700 dark:bg-neutral-800 sm:p-6">
<div class="w-full flex flex-col gap-5">
<DialogTitle text-2xl font-bold class="from-primary-500 to-primary-400 bg-gradient-to-r bg-clip-text text-transparent">
<DialogTitle text-2xl font-normal class="from-primary-500 to-primary-400 bg-gradient-to-r bg-clip-text text-transparent">
{{ t("settings.pages.card.create_card") }}
</DialogTitle>
@@ -174,7 +174,7 @@ const activeTab = computed({
<div flex="~ row" items-center justify-between>
<div>
<div flex="~ row" items-center gap-2>
<DialogTitle text-2xl font-bold class="from-primary-500 to-primary-400 bg-gradient-to-r bg-clip-text text-transparent">
<DialogTitle text-2xl font-normal class="from-primary-500 to-primary-400 bg-gradient-to-r bg-clip-text text-transparent">
{{ selectedCard.name }}
</DialogTitle>
<div v-if="isActive" class="flex items-center gap-1 rounded-full bg-primary-100 px-2 py-0.5 text-xs text-primary-600 font-medium dark:bg-primary-900/40 dark:text-primary-400">
@@ -44,7 +44,7 @@ function handleConfirm() {
<AlertDialogContent
class="data-[state=open]:animate-contentShow data-[state=closed]:animate-contentHide fixed left-1/2 top-1/2 z-100 max-w-md w-full border border-neutral-200 rounded-xl bg-white p-6 shadow-xl -translate-x-1/2 -translate-y-1/2 dark:border-neutral-700 dark:bg-neutral-800"
>
<AlertDialogTitle class="mb-4 text-xl font-bold">
<AlertDialogTitle class="mb-4 text-xl font-normal">
{{ t('settings.pages.card.delete_card') }}
</AlertDialogTitle>
<AlertDialogDescription class="mb-6">
@@ -32,7 +32,7 @@ const { t } = useI18n()
:delay="5 * 50"
transition="all ease-in-out duration-250"
>
<span text-lg font-semibold>{{ $t('settings.pages.themes.sections.section.custom-color.fields.field.primary-color.label') }}</span>
<span text-lg font-normal>{{ $t('settings.pages.themes.sections.section.custom-color.fields.field.primary-color.label') }}</span>
<label relative flex cursor-pointer items-center gap-2>
<input
v-model="settings.themeColorsHueDynamic"
@@ -68,7 +68,7 @@ async function onSendMessage() {
</button>
</div>
<div w-full rounded-lg bg="neutral-100 dark:neutral-700" p-2>
<h3 font-semibold>
<h3 font-normal>
Streaming Message
</h3>
<div>{{ streamingMessage.content }}</div>
@@ -50,7 +50,7 @@ function onSendMessage() {
</div>
<div w-full flex flex-row gap-4>
<div w-full rounded-lg bg="neutral-100 dark:neutral-700" p-2>
<h3 font-semibold>
<h3 font-normal>
Emotion Message
</h3>
<div v-for="message in emotionMessageContentProcessed" :key="message">
@@ -58,7 +58,7 @@ function onSendMessage() {
</div>
</div>
<div w-full rounded-lg bg="neutral-100 dark:neutral-700" p-2>
<h3 font-semibold>
<h3 font-normal>
Delays
</h3>
<div v-for="message in delaysProcessed" :key="message">
@@ -50,7 +50,7 @@ function onSendMessage() {
</div>
<div w-full flex flex-row gap-4>
<div w-full rounded-lg bg="neutral-100 dark:neutral-700" p-2>
<h3 font-semibold>
<h3 font-normal>
Messages
</h3>
<div v-for="message in messagesProcessed" :key="message">
@@ -58,7 +58,7 @@ function onSendMessage() {
</div>
</div>
<div w-full rounded-lg bg="neutral-100 dark:neutral-700" p-2>
<h3 font-semibold>
<h3 font-normal>
Emotions
</h3>
<div v-for="message in emotionsProcessed" :key="message">
@@ -50,7 +50,7 @@ async function onSendMessage() {
</div>
<div w-full flex flex-row gap-4>
<div w-full rounded-lg bg="neutral-100 dark:neutral-700" p-2>
<h3 font-semibold>
<h3 font-normal>
TTS Message
</h3>
<div v-for="message in ttsProcessed" :key="message">
@@ -74,7 +74,7 @@ watch([() => props.title, () => props.subtitle, route], async () => {
<div v-if="subtitle" absolute left-0 top-0 translate-y="[-80%]">
<span text="neutral-300 dark:neutral-500" text-nowrap>{{ subtitle }}</span>
</div>
<div text-nowrap text-3xl font-semibold>
<div text-nowrap text-3xl font-normal>
{{ title }}
</div>
</h1>
@@ -78,7 +78,7 @@ function goToStep(index: number) {
<slot name="step" :step="step" :index="index" :is-active="index === value">
<!-- Default step rendering -->
<div class="flex flex-col gap-1">
<p v-if="typeof step === 'object' && step !== null && 'title' in step" class="mb-4 pb-0 pt-0 text-xl text-primary-600 font-bold dark:text-primary-300">
<p v-if="typeof step === 'object' && step !== null && 'title' in step" class="mb-4 pb-0 pt-0 text-xl text-primary-600 font-normal dark:text-primary-300">
{{ step.title }}
</p>
<p v-if="typeof step === 'object' && step !== null && 'description' in step" class="text-sm text-neutral-600 dark:text-neutral-300">