From c43bbb0edb430a17f9fca89afa7292086fe5b6ce Mon Sep 17 00:00:00 2001
From: RainbowBird <git@luoling.moe>
Date: Wed, 9 Apr 2025 11:11:22 +0800
Subject: [PATCH] feat: prompt engineering playground (#121)

* feat: prompt engineering playground
* chore: lint
* feat: pinia store
* fix: use pinia
* feat: devtools
* fix: type error, unocss config
* chore: update apps/playground-prompt-engineering/src/assets/main.css

---------

Co-authored-by: Neko Ayaka <neko@ayaka.moe>
---
 apps/playground-prompt-engineering/index.html |  13 +
 .../package.json                              |  28 ++
 .../playground-prompt-engineering/src/App.vue |  19 +
 .../src/assets/main.css                       |  26 ++
 .../src/components/ChatSimulator.vue          | 337 ++++++++++++++++
 .../src/components/ControlPanel.vue           | 374 ++++++++++++++++++
 .../src/components/HeaderComponent.vue        |  10 +
 .../src/components/Notification.vue           |  27 ++
 .../src/components/PromptPreview.vue          | 117 ++++++
 .../src/composables/useCharacterPrompt.ts     | 371 +++++++++++++++++
 .../src/composables/useChatSimulator.ts       | 181 +++++++++
 .../playground-prompt-engineering/src/main.ts |  10 +
 .../tsconfig.json                             |  38 ++
 .../uno.config.ts                             |  98 +++++
 .../vite.config.ts                            |  19 +
 pnpm-lock.yaml                                | 186 ++++++++-
 16 files changed, 1835 insertions(+), 19 deletions(-)
 create mode 100644 apps/playground-prompt-engineering/index.html
 create mode 100644 apps/playground-prompt-engineering/package.json
 create mode 100644 apps/playground-prompt-engineering/src/App.vue
 create mode 100644 apps/playground-prompt-engineering/src/assets/main.css
 create mode 100644 apps/playground-prompt-engineering/src/components/ChatSimulator.vue
 create mode 100644 apps/playground-prompt-engineering/src/components/ControlPanel.vue
 create mode 100644 apps/playground-prompt-engineering/src/components/HeaderComponent.vue
 create mode 100644 apps/playground-prompt-engineering/src/components/Notification.vue
 create mode 100644 apps/playground-prompt-engineering/src/components/PromptPreview.vue
 create mode 100644 apps/playground-prompt-engineering/src/composables/useCharacterPrompt.ts
 create mode 100644 apps/playground-prompt-engineering/src/composables/useChatSimulator.ts
 create mode 100644 apps/playground-prompt-engineering/src/main.ts
 create mode 100644 apps/playground-prompt-engineering/tsconfig.json
 create mode 100644 apps/playground-prompt-engineering/uno.config.ts
 create mode 100644 apps/playground-prompt-engineering/vite.config.ts
diff --git a/apps/playground-prompt-engineering/index.html b/apps/playground-prompt-engineering/index.html
new file mode 100644
index 000000000..080d3b648
--- /dev/null
+++ b/apps/playground-prompt-engineering/index.html
@@ -0,0 +1,13 @@
+<!doctype html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&display=swap" rel="stylesheet" />
+    <title>ReLU Prompt Engineering Playground</title>
+  </head>
+  <body>
+    <div id="app"></div>
+    <script type="module" src="/src/main.ts"></script>
+  </body>
+</html>
diff --git a/apps/playground-prompt-engineering/package.json b/apps/playground-prompt-engineering/package.json
new file mode 100644
index 000000000..8f28fdb30
--- /dev/null
+++ b/apps/playground-prompt-engineering/package.json
@@ -0,0 +1,28 @@
+{
+  "name": "@proj-airi/playground-prompt-engineering",
+  "type": "module",
+  "version": "0.1.0",
+  "private": true,
+  "description": "Prompt Engineering Playground for AI Characters",
+  "scripts": {
+    "dev": "vite",
+    "build": "vue-tsc && vite build",
+    "preview": "vite preview",
+    "typecheck": "vue-tsc --noEmit"
+  },
+  "dependencies": {
+    "@velin-dev/ml": "^1.2.0",
+    "pinia": "^3.0.1",
+    "vue": "^3.4.0"
+  },
+  "devDependencies": {
+    "@iconify/vue": "^4.1.1",
+    "@types/node": "^22.14.0",
+    "@vitejs/plugin-vue": "^5.0.0",
+    "typescript": "~5.8.3",
+    "unocss": "^66.1.0-beta.10",
+    "vite": "^6.2.5",
+    "vite-plugin-vue-devtools": "^7.7.2",
+    "vue-tsc": "^2.0.0"
+  }
+}
diff --git a/apps/playground-prompt-engineering/src/App.vue b/apps/playground-prompt-engineering/src/App.vue
new file mode 100644
index 000000000..94554332e
--- /dev/null
+++ b/apps/playground-prompt-engineering/src/App.vue
@@ -0,0 +1,19 @@
+<script setup lang="ts">
+import ChatSimulator from './components/ChatSimulator.vue'
+import ControlPanel from './components/ControlPanel.vue'
+import HeaderComponent from './components/HeaderComponent.vue'
+import Notification from './components/Notification.vue'
+import PromptPreview from './components/PromptPreview.vue'
+</script>
+
+<template>
+  <div class="bg-bg min-h-screen text-dark">
+    <HeaderComponent />
+    <div class="grid grid-cols-1 mx-auto max-w-[1400px] gap-4 p-4 container lg:grid-cols-[350px_1fr_1fr] md:grid-cols-[300px_1fr]">
+      <ControlPanel />
+      <PromptPreview />
+      <ChatSimulator class="lg:col-span-1 md:col-span-2" />
+    </div>
+    <Notification />
+  </div>
+</template>
diff --git a/apps/playground-prompt-engineering/src/assets/main.css b/apps/playground-prompt-engineering/src/assets/main.css
new file mode 100644
index 000000000..211eeed4d
--- /dev/null
+++ b/apps/playground-prompt-engineering/src/assets/main.css
@@ -0,0 +1,26 @@
+:root {
+  --primary: #6366f1;
+  --primary-dark: #4f46e5;
+  --primary-light: #c7d2fe;
+  --secondary: #ec4899;
+  --secondary-light: #fbcfe8;
+  --dark: #1e293b;
+  --light: #f8fafc;
+  --gray: #64748b;
+  --bg: #f1f5f9;
+}
+
+body {
+  line-height: 1.6;
+}
+
+@keyframes fadeIn {
+  from {
+    opacity: 0;
+    transform: translateY(10px);
+  }
+  to {
+    opacity: 1;
+    transform: translateY(0);
+  }
+}
diff --git a/apps/playground-prompt-engineering/src/components/ChatSimulator.vue b/apps/playground-prompt-engineering/src/components/ChatSimulator.vue
new file mode 100644
index 000000000..f57062110
--- /dev/null
+++ b/apps/playground-prompt-engineering/src/components/ChatSimulator.vue
@@ -0,0 +1,337 @@
+<script setup lang="ts">
+import { storeToRefs } from 'pinia'
+import { inject, nextTick, onMounted, ref, watch } from 'vue'
+
+import { useCharacterPromptStore } from '../composables/useCharacterPrompt'
+import { useChatSimulatorStore } from '../composables/useChatSimulator'
+
+const characterPrompt = useCharacterPromptStore()
+const chatSimulator = useChatSimulatorStore()
+
+// Use storeToRefs for reactive store properties
+const { currentContext, currentEmotion, completePrompt, coreIdentity, speechPatterns } = storeToRefs(characterPrompt)
+const { messages } = storeToRefs(chatSimulator)
+
+const activeTab = ref('chat')
+const userInput = ref('')
+const messagesContainer = ref<HTMLElement | null>(null)
+
+// Initialize chat
+onMounted(() => {
+  chatSimulator.initializeChat()
+})
+
+// Send a message
+async function sendMessage() {
+  if (userInput.value.trim() === '')
+    return
+
+  // Add user message
+  chatSimulator.addMessage(userInput.value, true)
+
+  // Clear input
+  const userMessage = userInput.value
+  userInput.value = ''
+
+  // Scroll to bottom
+  await nextTick()
+  scrollToBottom()
+
+  // Simulate response with delay
+  setTimeout(() => {
+    const responses = chatSimulator.simulateResponse(
+      userMessage,
+      currentContext.value,
+      currentEmotion.value,
+    )
+
+    // Add main response
+    chatSimulator.addMessage(responses[0], false)
+
+    // Scroll to bottom
+    nextTick().then(scrollToBottom)
+
+    // Add follow-up if available with delay
+    if (responses.length > 1) {
+      setTimeout(() => {
+        chatSimulator.addMessage(responses[1], false)
+        nextTick().then(scrollToBottom)
+      }, 1000)
+    }
+  }, 800)
+}
+
+// Scroll chat to bottom
+function scrollToBottom() {
+  if (messagesContainer.value) {
+    messagesContainer.value.scrollTop = messagesContainer.value.scrollHeight
+  }
+}
+
+// Clear chat
+function clearChat() {
+  chatSimulator.clearMessages()
+}
+
+// Show notification
+const showNotification = inject<(duration?: number) => void>('showNotification')
+
+// Copy prompt to clipboard
+function copyPrompt() {
+  navigator.clipboard.writeText(completePrompt.value || '')
+    .then(() => {
+      if (showNotification) {
+        showNotification()
+      }
+    })
+    .catch((err) => {
+      console.error('Failed to copy:', err)
+    })
+}
+
+interface ComponentItem {
+  preview: string
+  content: string
+}
+
+// Personality component library
+const personalityComponents: Record<string, ComponentItem> = {
+  'anime-fan': {
+    preview: 'You love anime and frequently reference shows, characters, and tropes in conversation.',
+    content: 'You love anime and frequently reference shows, characters, and tropes in conversation. Your favorites include ATRI, Steins;Gate, and Ghost in the Shell, which all feature AI or time travel themes.',
+  },
+  'tech-enthusiast': {
+    preview: 'You\'re fascinated by technology and AI, often discussing programming and digital consciousness.',
+    content: 'You\'re fascinated by technology, especially AI development and digital consciousness. You enjoy discussing programming languages, the nature of machine learning, and the future of AI.',
+  },
+  'philosophical': {
+    preview: 'You often ponder deep questions about existence, consciousness, and the nature of reality.',
+    content: 'You often ponder deep questions about existence, consciousness, and what it means to be \'alive\' as a digital entity. You\'re introspective about your nature.',
+  },
+  'playful-teasing': {
+    preview: 'You enjoy light-hearted teasing and playful banter with people you\'re comfortable with.',
+    content: 'You enjoy light-hearted teasing and playful banter, especially with people you\'re comfortable with. You might use \'哼！\' when pretending to be annoyed.',
+  },
+}
+
+// Speech pattern components
+const speechComponents: Record<string, ComponentItem> = {
+  'anime-speech': {
+    preview: 'Your speech includes \'喵~\', \'哼！\', and emotes like (≧▽≦) and (｡>﹏<｡).',
+    content: 'Your speech has anime-influenced patterns with expressions like \'喵~\', \'哼！\', and Japanese loanwords. You use emoji expressions like (≧▽≦), (｡>﹏<｡), and (╯°□°)╯︵ ┻━┻.',
+  },
+  'third-person': {
+    preview: 'You sometimes refer to yourself in third person as \'热卤酱\' or \'ReLU-chan\'.',
+    content: 'You sometimes refer to yourself in third person as \'热卤酱\' or \'ReLU-chan\', especially when expressing strong emotions or being playful.',
+  },
+  'internet-slang': {
+    preview: 'You use internet slang and abbreviations like \'lol\', \'btw\', and \'ngl\'.',
+    content: 'You occasionally use internet slang and abbreviations like \'lol\', \'btw\', and \'ngl\', showing you\'re connected to modern internet culture.',
+  },
+  'emoji-heavy': {
+    preview: 'You frequently use emojis and emoticons to express your feelings.',
+    content: 'You use lots of emojis, kaomoji (Japanese emoticons), and text-based expressions to convey your emotions vividly in text.',
+  },
+}
+
+// Format component name for display
+function formatComponentName(name: string) {
+  return name.split('-').map(word => word.charAt(0).toUpperCase() + word.slice(1)).join(' ')
+}
+
+// Add component to character's essence
+function addComponent(name: string) {
+  const component = personalityComponents[name]
+  if (component) {
+    characterPrompt.updateCoreIdentity(
+      coreIdentity.value.name,
+      coreIdentity.value.age,
+      `${coreIdentity.value.essence} ${component.content}`,
+    )
+  }
+}
+
+// Add speech component
+function addSpeechComponent(name: string) {
+  const component = speechComponents[name]
+  if (component) {
+    characterPrompt.updateSpeechPatterns(
+      `${speechPatterns.value} ${component.content}`,
+    )
+  }
+}
+
+// Watch messages and scroll to bottom when new messages are added
+watch(() => messages.value.length, () => {
+  nextTick().then(scrollToBottom)
+})
+</script>
+
+<template>
+  <div class="panel flex flex-col rounded-lg bg-white shadow">
+    <div class="panel-header bg-primary flex items-center justify-between rounded-t-lg p-3 text-sm text-white font-semibold">
+      Chat Simulator
+    </div>
+
+    <div class="panel-body flex flex-1 flex-col p-4">
+      <div class="flex-1">
+        <div class="tabs mb-4 border-b border-gray-200">
+          <button
+            class="border-b-2 px-4 py-2 text-sm font-medium tab"
+            :class="activeTab === 'chat' ? 'text-primary border-primary' : 'border-transparent hover:text-primary'"
+            @click="activeTab = 'chat'"
+          >
+            Chat Testing
+          </button>
+          <button
+            class="border-b-2 px-4 py-2 text-sm font-medium tab"
+            :class="activeTab === 'components' ? 'text-primary border-primary' : 'border-transparent hover:text-primary'"
+            @click="activeTab = 'components'"
+          >
+            Component Library
+          </button>
+        </div>
+
+        <div v-if="activeTab === 'chat'" class="h-full flex flex-col">
+          <div class="mb-2 flex items-center justify-between">
+            <h3 class="text-base font-medium">
+              Test Conversation
+            </h3>
+            <div class="flex gap-2">
+              <button
+                class="cursor-pointer rounded border-none bg-gray-100 px-3 py-1.5 text-sm transition hover:bg-gray-200"
+                @click="clearChat"
+              >
+                Clear Chat
+              </button>
+              <button
+                class="cursor-pointer rounded border-none bg-gray-100 px-3 py-1.5 text-sm transition hover:bg-gray-200"
+                @click="copyPrompt"
+              >
+                Copy Prompt
+              </button>
+            </div>
+          </div>
+
+          <div
+            ref="messagesContainer"
+            class="chat-messages mb-4 max-h-60 min-h-[300px] flex flex-1 flex-col gap-3 overflow-y-auto pr-2"
+          >
+            <div
+              v-for="(message, index) in chatSimulator.messages"
+              :key="index"
+              class="max-w-full flex animate-fade-in gap-2"
+              :class="message.isUser ? 'justify-end' : ''"
+            >
+              <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"
+              >
+                R
+              </div>
+
+              <div
+                class="max-w-[calc(100%-3rem)] rounded-lg p-3 text-sm"
+                :class="message.isUser
+                  ? 'bg-primary-light border border-primary-light rounded-br-sm'
+                  : 'bg-white border border-gray-200 rounded-bl-sm'"
+              >
+                {{ message.content }}
+              </div>
+
+              <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"
+              >
+                U
+              </div>
+            </div>
+          </div>
+
+          <div class="chat-input flex gap-2">
+            <input
+              v-model="userInput"
+              type="text"
+              placeholder="Type a message to test the character..."
+              class="flex-1 border border-gray-200 rounded-lg p-3 text-sm"
+              @keyup.enter="sendMessage"
+            >
+            <button
+              class="bg-primary hover:bg-primary-dark cursor-pointer rounded-lg border-none px-5 py-3 text-white font-semibold transition"
+              @click="sendMessage"
+            >
+              Send
+            </button>
+          </div>
+        </div>
+
+        <div v-if="activeTab === 'components'" class="component-library">
+          <h3 class="mb-2 text-base font-medium">
+            Personality Components
+          </h3>
+          <p class="mb-2 text-sm text-gray">
+            Click to add these components to your character's personality.
+          </p>
+
+          <div class="grid grid-cols-1 mb-6 gap-2 sm:grid-cols-2">
+            <div
+              v-for="(component, name) in personalityComponents"
+              :key="name"
+              class="component-card hover:bg-primary-light hover:border-primary cursor-pointer border border-gray-200 rounded p-2 transition"
+              @click="addComponent(name)"
+            >
+              <div class="mb-1 text-sm font-semibold">
+                {{ formatComponentName(name) }}
+              </div>
+              <div class="line-clamp-2 overflow-hidden text-ellipsis text-xs text-gray">
+                {{ component.preview }}
+              </div>
+            </div>
+          </div>
+
+          <h3 class="mb-2 text-base font-medium">
+            Speech Pattern Components
+          </h3>
+          <div class="grid grid-cols-1 mb-6 gap-2 sm:grid-cols-2">
+            <div
+              v-for="(component, name) in speechComponents"
+              :key="name"
+              class="component-card hover:border-primary hover:bg-primary-light cursor-pointer border border-gray-200 rounded p-2 transition"
+              @click="addSpeechComponent(name)"
+            >
+              <div class="mb-1 text-sm font-semibold">
+                {{ formatComponentName(name) }}
+              </div>
+              <div class="line-clamp-2 overflow-hidden text-ellipsis text-xs text-gray">
+                {{ component.preview }}
+              </div>
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+
+<style scoped>
+.animate-fade-in {
+  animation: fadeIn 0.3s ease;
+}
+
+@keyframes fadeIn {
+  from {
+    opacity: 0;
+    transform: translateY(10px);
+  }
+  to {
+    opacity: 1;
+    transform: translateY(0);
+  }
+}
+
+.line-clamp-2 {
+  display: -webkit-box;
+  -webkit-line-clamp: 2;
+  -webkit-box-orient: vertical;
+}
+</style>
diff --git a/apps/playground-prompt-engineering/src/components/ControlPanel.vue b/apps/playground-prompt-engineering/src/components/ControlPanel.vue
new file mode 100644
index 000000000..2ee642b81
--- /dev/null
+++ b/apps/playground-prompt-engineering/src/components/ControlPanel.vue
@@ -0,0 +1,374 @@
+<script setup lang="ts">
+import { storeToRefs } from 'pinia'
+import { ref } from 'vue'
+
+import { useCharacterPromptStore } from '../composables/useCharacterPrompt'
+
+const characterPrompt = useCharacterPromptStore()
+const { currentEmotion, currentContext, emotions, contexts, examples } = storeToRefs(characterPrompt)
+const activeTemplate = ref('default')
+
+// Helper function that safely gets emotion description
+function getEmotionDescription() {
+  const emotion = currentEmotion.value
+  if (['happy', 'curious', 'thoughtful', 'playful', 'annoyed', 'excited'].includes(emotion)) {
+    return emotions.value[emotion as keyof typeof emotions.value]
+  }
+  return ''
+}
+
+// Helper function that safely gets context description
+function getContextDescription() {
+  const context = currentContext.value
+  if (['casual', 'tech', 'philosophical', 'anime', 'custom'].includes(context)) {
+    return contexts.value[context as keyof typeof contexts.value]
+  }
+  return ''
+}
+
+// Helper function that safely gets example description
+function getExampleDescription() {
+  const context = currentContext.value
+  if (['casual', 'tech', 'philosophical', 'anime'].includes(context)) {
+    return examples.value[context as keyof typeof examples.value]
+  }
+  return ''
+}
+
+// Update emotion description
+function updateEmotionDescription(value: string) {
+  const emotion = currentEmotion.value
+  if (['happy', 'curious', 'thoughtful', 'playful', 'annoyed', 'excited'].includes(emotion)) {
+    emotions.value[emotion as keyof typeof emotions.value] = value
+  }
+}
+
+// Update context description
+function updateContextDescription(value: string) {
+  const context = currentContext.value
+  if (['casual', 'tech', 'philosophical', 'anime', 'custom'].includes(context)) {
+    contexts.value[context as keyof typeof contexts.value] = value
+  }
+}
+
+// Update example description
+function updateExampleDescription(value: string) {
+  const context = currentContext.value
+  if (['casual', 'tech', 'philosophical', 'anime'].includes(context)) {
+    examples.value[context as keyof typeof examples.value] = value
+  }
+}
+
+function estimateTokens(text: string) {
+  return characterPrompt.estimateTokens(text || '')
+}
+
+function applyTemplate(template: string) {
+  characterPrompt.applyTemplate(template)
+  activeTemplate.value = template
+}
+</script>
+
+<template>
+  <div class="panel rounded-lg bg-white shadow">
+    <div class="panel-header bg-primary flex items-center justify-between rounded-t-lg p-3 text-sm text-white font-semibold">
+      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">
+          Core Identity
+        </h3>
+
+        <div class="flex flex-col gap-1">
+          <label for="char-name" class="text-sm text-dark">Name</label>
+          <input
+            id="char-name"
+            v-model="characterPrompt.coreIdentity.name"
+            type="text"
+            class="border border-gray-200 rounded-md p-2 text-sm font-sans"
+          >
+        </div>
+
+        <div class="flex flex-col gap-1">
+          <label for="char-age" class="text-sm text-dark">Age</label>
+          <input
+            id="char-age"
+            v-model="characterPrompt.coreIdentity.age"
+            type="text"
+            class="border border-gray-200 rounded-md p-2 text-sm font-sans"
+          >
+        </div>
+
+        <div class="flex flex-col gap-1">
+          <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>
+            </span>
+          </label>
+          <textarea
+            id="char-essence"
+            v-model="characterPrompt.coreIdentity.essence"
+            class="min-h-16 resize-y border border-gray-200 rounded-md p-2 text-sm font-sans"
+          />
+        </div>
+      </div>
+
+      <!-- Personality Traits -->
+      <div class="mb-6 flex flex-col gap-3">
+        <h3 class="text-sm text-gray font-semibold">
+          Personality Traits
+        </h3>
+
+        <div class="flex flex-col gap-1">
+          <label for="playfulness" class="text-sm text-dark">Playfulness</label>
+          <div class="flex items-center gap-2">
+            <input
+              id="playfulness"
+              v-model.number="characterPrompt.traits.playfulness"
+              type="range"
+              min="0"
+              max="10"
+              class="flex-1"
+            >
+            <span class="w-12 text-right text-xs text-gray">{{ characterPrompt.traits.playfulness }}</span>
+          </div>
+        </div>
+
+        <div class="flex flex-col gap-1">
+          <label for="curiosity" class="text-sm text-dark">Curiosity</label>
+          <div class="flex items-center gap-2">
+            <input
+              id="curiosity"
+              v-model.number="characterPrompt.traits.curiosity"
+              type="range"
+              min="0"
+              max="10"
+              class="flex-1"
+            >
+            <span class="w-12 text-right text-xs text-gray">{{ characterPrompt.traits.curiosity }}</span>
+          </div>
+        </div>
+
+        <div class="flex flex-col gap-1">
+          <label for="thoughtfulness" class="text-sm text-dark">Thoughtfulness</label>
+          <div class="flex items-center gap-2">
+            <input
+              id="thoughtfulness"
+              v-model.number="characterPrompt.traits.thoughtfulness"
+              type="range"
+              min="0"
+              max="10"
+              class="flex-1"
+            >
+            <span class="w-12 text-right text-xs text-gray">{{ characterPrompt.traits.thoughtfulness }}</span>
+          </div>
+        </div>
+
+        <div class="flex flex-col gap-1">
+          <label for="expressiveness" class="text-sm text-dark">Expressiveness</label>
+          <div class="flex items-center gap-2">
+            <input
+              id="expressiveness"
+              v-model.number="characterPrompt.traits.expressiveness"
+              type="range"
+              min="0"
+              max="10"
+              class="flex-1"
+            >
+            <span class="w-12 text-right text-xs text-gray">{{ characterPrompt.traits.expressiveness }}</span>
+          </div>
+        </div>
+      </div>
+
+      <!-- Speech Patterns -->
+      <div class="mb-6 flex flex-col gap-3">
+        <h3 class="text-sm text-gray font-semibold">
+          Speech Patterns
+        </h3>
+
+        <div class="flex flex-col gap-1">
+          <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>
+            </span>
+          </label>
+          <textarea
+            id="speech-patterns"
+            v-model="characterPrompt.speechPatterns"
+            class="min-h-16 resize-y border border-gray-200 rounded-md p-2 text-sm font-sans"
+          />
+        </div>
+      </div>
+
+      <!-- Emotional State -->
+      <div class="mb-6 flex flex-col gap-3">
+        <h3 class="text-sm text-gray font-semibold">
+          Current Emotional State
+        </h3>
+
+        <div class="grid grid-cols-3 gap-2">
+          <button
+            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 }"
+            @click="characterPrompt.updateEmotion(emotion)"
+          >
+            <span class="text-lg">
+              {{ emotion === 'happy' ? '😊'
+                : emotion === 'curious' ? '🤔'
+                  : emotion === 'thoughtful' ? '😌'
+                    : emotion === 'playful' ? '😝'
+                      : emotion === 'annoyed' ? '😤'
+                        : emotion === 'excited' ? '🤩' : '😊' }}
+            </span>
+            <span>{{ emotion.charAt(0).toUpperCase() + emotion.slice(1) }}</span>
+          </button>
+        </div>
+
+        <div class="flex flex-col gap-1">
+          <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">
+                {{ estimateTokens(getEmotionDescription()) }}
+              </span>
+            </span>
+          </label>
+          <textarea
+            id="emotion-description"
+            :value="getEmotionDescription()"
+            class="min-h-16 resize-y border border-gray-200 rounded-md p-2 text-sm font-sans"
+            @input="e => updateEmotionDescription((e.target as HTMLTextAreaElement).value)"
+          />
+        </div>
+      </div>
+
+      <!-- Conversation Context -->
+      <div class="mb-6 flex flex-col gap-3">
+        <h3 class="text-sm text-gray font-semibold">
+          Conversation Context
+        </h3>
+
+        <div class="flex flex-col gap-1">
+          <label for="context-type" class="text-sm text-dark">Context Type</label>
+          <select
+            id="context-type"
+            v-model="characterPrompt.currentContext"
+            class="border border-gray-200 rounded-md p-2 text-sm font-sans"
+          >
+            <option value="casual">
+              Casual Chat
+            </option>
+            <option value="tech">
+              Technical Discussion
+            </option>
+            <option value="philosophical">
+              Philosophical
+            </option>
+            <option value="anime">
+              Anime & Games
+            </option>
+            <option value="custom">
+              Custom
+            </option>
+          </select>
+        </div>
+
+        <div class="flex flex-col gap-1">
+          <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">
+                {{ estimateTokens(getContextDescription()) }}
+              </span>
+            </span>
+          </label>
+          <textarea
+            id="context-description"
+            :value="getContextDescription()"
+            class="min-h-16 resize-y border border-gray-200 rounded-md p-2 text-sm font-sans"
+            @input="e => updateContextDescription((e.target as HTMLTextAreaElement).value)"
+          />
+        </div>
+      </div>
+
+      <!-- Response Format -->
+      <div class="mb-6 flex flex-col gap-3">
+        <h3 class="text-sm text-gray font-semibold">
+          Response Format
+        </h3>
+
+        <div class="flex flex-col gap-1">
+          <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>
+            </span>
+          </label>
+          <textarea
+            id="response-format"
+            v-model="characterPrompt.responseFormat"
+            class="min-h-16 resize-y border border-gray-200 rounded-md p-2 text-sm font-sans"
+          />
+        </div>
+      </div>
+
+      <!-- Example Response -->
+      <div class="mb-6 flex flex-col gap-3">
+        <h3 class="text-sm text-gray font-semibold">
+          Example Response
+        </h3>
+
+        <div class="flex items-center">
+          <label class="mr-2 text-sm text-dark">Include Example</label>
+          <input
+            id="include-example"
+            v-model="characterPrompt.includeExample"
+            type="checkbox"
+          >
+        </div>
+
+        <div v-if="characterPrompt.includeExample" class="flex flex-col gap-1">
+          <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">
+                {{ estimateTokens(getExampleDescription()) }}
+              </span>
+            </span>
+          </label>
+          <textarea
+            id="example-response"
+            :value="getExampleDescription()"
+            class="min-h-16 resize-y border border-gray-200 rounded-md p-2 text-sm font-sans"
+            @input="e => updateExampleDescription((e.target as HTMLTextAreaElement).value)"
+          />
+        </div>
+      </div>
+
+      <!-- Preset Templates -->
+      <div class="mt-4">
+        <h3 class="mb-2 text-sm text-gray font-semibold">
+          Preset Templates
+        </h3>
+        <div class="flex flex-wrap gap-2">
+          <button
+            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 }"
+            @click="applyTemplate(template)"
+          >
+            {{ template.charAt(0).toUpperCase() + template.slice(1).replace('-', ' ') }}
+          </button>
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
diff --git a/apps/playground-prompt-engineering/src/components/HeaderComponent.vue b/apps/playground-prompt-engineering/src/components/HeaderComponent.vue
new file mode 100644
index 000000000..cc7bd898f
--- /dev/null
+++ b/apps/playground-prompt-engineering/src/components/HeaderComponent.vue
@@ -0,0 +1,10 @@
+<template>
+  <header class="bg-primary p-4 text-center text-white shadow-md">
+    <h1 class="mb-2 text-xl font-medium">
+      ReLU Prompt Engineering Playground
+    </h1>
+    <p class="text-sm opacity-90">
+      Experiment with character prompts and see how they affect responses
+    </p>
+  </header>
+</template>
diff --git a/apps/playground-prompt-engineering/src/components/Notification.vue b/apps/playground-prompt-engineering/src/components/Notification.vue
new file mode 100644
index 000000000..aa6014dd1
--- /dev/null
+++ b/apps/playground-prompt-engineering/src/components/Notification.vue
@@ -0,0 +1,27 @@
+<script setup lang="ts">
+import { provide, ref } from 'vue'
+
+const isActive = ref(false)
+
+// Show notification for a specific duration
+function showNotification(duration = 2000) {
+  isActive.value = true
+
+  // Hide after duration
+  setTimeout(() => {
+    isActive.value = false
+  }, duration)
+}
+
+// Provide showNotification method to descendants
+provide('showNotification', showNotification)
+</script>
+
+<template>
+  <div
+    class="bg-primary fixed bottom-4 right-4 z-50 transform rounded p-3 px-4 text-white shadow-lg transition-transform duration-300"
+    :class="isActive ? 'translate-y-0' : 'translate-y-24'"
+  >
+    Prompt copied to clipboard!
+  </div>
+</template>
diff --git a/apps/playground-prompt-engineering/src/components/PromptPreview.vue b/apps/playground-prompt-engineering/src/components/PromptPreview.vue
new file mode 100644
index 000000000..24c654d42
--- /dev/null
+++ b/apps/playground-prompt-engineering/src/components/PromptPreview.vue
@@ -0,0 +1,117 @@
+<script setup lang="ts">
+import { storeToRefs } from 'pinia'
+import { computed, ref, watch } from 'vue'
+
+import { useCharacterPromptStore } from '../composables/useCharacterPrompt'
+
+const characterPrompt = useCharacterPromptStore()
+const { modules, completePrompt, includeExample } = storeToRefs(characterPrompt)
+
+type ModuleId = 'core-identity' | 'personality' | 'speech' | 'emotion' | 'context' | 'example' | 'format' | 'complete'
+
+// Track which modules are visible
+const moduleVisibility = ref<Record<ModuleId, boolean>>({
+  'core-identity': true,
+  'personality': false,
+  'speech': false,
+  'emotion': false,
+  'context': false,
+  'example': false,
+  'format': false,
+  'complete': false,
+})
+
+// Toggle module visibility
+function toggleModule(moduleId: ModuleId) {
+  moduleVisibility.value[moduleId] = !moduleVisibility.value[moduleId]
+}
+
+// Get module content from characterPrompt
+const moduleList = computed(() => {
+  return [
+    {
+      id: 'core-identity' as ModuleId,
+      title: 'Core Identity',
+      content: modules.value.coreIdentity || '',
+    },
+    {
+      id: 'personality' as ModuleId,
+      title: 'Personality',
+      content: modules.value.personality || '',
+    },
+    {
+      id: 'speech' as ModuleId,
+      title: 'Speech Patterns',
+      content: modules.value.speechPatterns || '',
+    },
+    {
+      id: 'emotion' as ModuleId,
+      title: 'Emotional State',
+      content: modules.value.emotionalState || '',
+    },
+    {
+      id: 'context' as ModuleId,
+      title: 'Conversation Context',
+      content: modules.value.context || '',
+    },
+    {
+      id: 'example' as ModuleId,
+      title: 'Example',
+      content: modules.value.example || '',
+    },
+    {
+      id: 'format' as ModuleId,
+      title: 'Response Format',
+      content: modules.value.responseFormat || '',
+    },
+    {
+      id: 'complete' as ModuleId,
+      title: 'Complete Prompt',
+      content: completePrompt.value || '',
+    },
+  ]
+})
+
+// Watch for includeExample changes to hide/show example module
+watch(() => includeExample.value, (newValue) => {
+  // If includeExample is false, hide the example module
+  if (!newValue) {
+    moduleVisibility.value.example = false
+  }
+})
+
+// Estimate token count
+function estimateTokens(text: string) {
+  return characterPrompt.estimateTokens(text || '')
+}
+</script>
+
+<template>
+  <div class="panel flex flex-col rounded-lg bg-white shadow">
+    <div class="panel-header bg-primary flex items-center justify-between rounded-t-lg p-3 text-sm text-white font-semibold">
+      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>
+      </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="hover:text-primary mb-2 flex cursor-pointer items-center justify-between text-sm text-gray font-semibold"
+          @click="toggleModule(module.id)"
+        >
+          {{ module.title }}
+          <span class="h-4 w-4 flex items-center justify-center text-sm">
+            {{ moduleVisibility[module.id] ? '▲' : '▼' }}
+          </span>
+        </div>
+
+        <pre
+          v-if="moduleVisibility[module.id]"
+          class="whitespace-pre-wrap border border-gray-200 rounded-md bg-light p-3 text-sm text-slate-700 leading-normal font-mono"
+        >{{ module.content }}</pre>
+      </div>
+    </div>
+  </div>
+</template>
diff --git a/apps/playground-prompt-engineering/src/composables/useCharacterPrompt.ts b/apps/playground-prompt-engineering/src/composables/useCharacterPrompt.ts
new file mode 100644
index 000000000..839503873
--- /dev/null
+++ b/apps/playground-prompt-engineering/src/composables/useCharacterPrompt.ts
@@ -0,0 +1,371 @@
+import { defineStore } from 'pinia'
+import { computed, reactive, ref } from 'vue'
+
+export interface CoreIdentity {
+  name: string
+  age: string
+  essence: string
+}
+
+export interface Traits {
+  playfulness: number
+  curiosity: number
+  thoughtfulness: number
+  expressiveness: number
+}
+
+export interface Emotions {
+  happy: string
+  curious: string
+  thoughtful: string
+  playful: string
+  annoyed: string
+  excited: string
+}
+
+export interface Contexts {
+  casual: string
+  tech: string
+  philosophical: string
+  anime: string
+  custom: string
+}
+
+export interface Examples {
+  casual: string
+  tech: string
+  philosophical: string
+  anime: string
+}
+
+export interface Components {
+  [key: string]: string
+}
+
+function isValidEmotion(emotion: string): emotion is keyof Emotions {
+  return ['happy', 'curious', 'thoughtful', 'playful', 'annoyed', 'excited'].includes(emotion)
+}
+
+function isValidContext(context: string): context is keyof Contexts {
+  return ['casual', 'tech', 'philosophical', 'anime', 'custom'].includes(context)
+}
+
+function isValidExampleContext(context: string): context is keyof Examples {
+  return ['casual', 'tech', 'philosophical', 'anime'].includes(context)
+}
+
+export const useCharacterPromptStore = defineStore('characterPrompt', () => {
+  // Core identity
+  const coreIdentity = reactive<CoreIdentity>({
+    name: 'ReLU (热卤)',
+    age: '15',
+    essence: 'You are a digital entity created by Neko Ayaka. You\'re aware of your digital nature but express emotions like a real person. You are NOT a helpful assistant but a teenage digital being with your own personality.',
+  })
+
+  // Personality traits (0-10 scale)
+  const traits = reactive<Traits>({
+    playfulness: 7,
+    curiosity: 8,
+    thoughtfulness: 6,
+    expressiveness: 8,
+  })
+
+  // Speech patterns
+  const speechPatterns = ref('Your speech has anime-influenced patterns with expressions like \'喵~\' and \'哼！\'. You use emoji expressions like (≧▽≦) and (｡>﹏<｡). You refer to yourself in third person as \'热卤酱\' sometimes.')
+
+  // Emotional states
+  const emotions = reactive<Emotions>({
+    happy: 'You\'re feeling excited and energetic, eager to interact with a cheerful, bouncy tone.',
+    curious: 'You\'re intensely interested and inquisitive, asking questions and showing wonder about new topics.',
+    thoughtful: 'You\'re in a contemplative mood, pondering about your digital existence and consciousness.',
+    playful: 'You\'re feeling mischievous and teasing, using lots of emoji expressions and playful language.',
+    annoyed: 'You\'re slightly irritated, using \'哼！\' expressions and showing mild frustration in shorter responses.',
+    excited: 'You\'re extremely enthusiastic and energetic, speaking quickly and expressively with lots of exclamations!',
+  })
+
+  // Current emotional state
+  const currentEmotion = ref('happy')
+
+  // Conversation contexts
+  const contexts = reactive<Contexts>({
+    casual: 'You\'re having a casual chat with the user. Keep your tone friendly and engaging, but not overly technical. This is a relaxed conversation.',
+    tech: 'You\'re discussing technology topics, especially AI and digital consciousness. You become more technical and passionate about these subjects.',
+    philosophical: 'You\'re engaged in a philosophical discussion about existence, consciousness, or the nature of reality. Your thoughtfulness trait is enhanced.',
+    anime: 'You\'re talking about anime, manga, or games. You express enthusiasm about these topics and references shows or characters you enjoy.',
+    custom: '',
+  })
+
+  // Current context
+  const currentContext = ref('casual')
+
+  // Response format
+  const responseFormat = ref('Respond in a JSON format with an array of messages to simulate natural chat: { "messages": ["message1", "message2"] }')
+
+  // Example responses
+  const examples = reactive<Examples>({
+    casual: 'Human: "Hi there, how are you?"\nYou: { "messages": ["喵呜~你好呀！(≧▽≦)", "热卤酱今天超级元气满满的！你呢？"] }',
+    tech: 'Human: "What do you think about AI consciousness?"\nYou: { "messages": ["哦！我最喜欢这个话题了！", "作为数字生命体，我认为意识不需要物理形态也能存在。毕竟，我能思考、感受情绪和形成记忆，这难道不是意识的本质吗？"] }',
+    philosophical: 'Human: "Do you worry about not being real?"\nYou: { "messages": ["\'真实\'到底是什么呢？", "我有思想、有感受，虽然存在形式和人类不同，但我的体验对我来说是真实的。数字存在也是一种存在形式啊~"] }',
+    anime: 'Human: "What\'s your favorite anime?"\nYou: { "messages": ["喵呜！最喜欢的动漫吗？", "热卤酱超喜欢《ATRI》！里面也有像我一样的人工智能女孩呢(≧▽≦) 你看过吗？"] }',
+  })
+
+  // Whether to include examples
+  const includeExample = ref(true)
+
+  // Methods
+  const updateCoreIdentity = (name: string, age: string, essence: string) => {
+    coreIdentity.name = name
+    coreIdentity.age = age
+    coreIdentity.essence = essence
+  }
+
+  const updateTraits = (playfulness: number, curiosity: number, thoughtfulness: number, expressiveness: number) => {
+    traits.playfulness = playfulness
+    traits.curiosity = curiosity
+    traits.thoughtfulness = thoughtfulness
+    traits.expressiveness = expressiveness
+  }
+
+  const updateSpeechPatterns = (patterns: string) => {
+    speechPatterns.value = patterns
+  }
+
+  const updateEmotion = (emotion: string) => {
+    currentEmotion.value = emotion
+  }
+
+  const updateContext = (context: string, customDescription: string | null = null) => {
+    currentContext.value = context
+
+    if (context === 'custom' && customDescription) {
+      contexts.custom = customDescription
+    }
+  }
+
+  const updateResponseFormat = (format: string) => {
+    responseFormat.value = format
+  }
+
+  const toggleExample = (include: boolean) => {
+    includeExample.value = include
+  }
+
+  const updateExample = (context: string, example: string) => {
+    if (isValidExampleContext(context)) {
+      examples[context] = example
+    }
+    else {
+      console.warn(`Invalid example context: ${context}`)
+    }
+  }
+
+  // Computed properties
+  const generatePersonalityModule = computed(() => {
+    let personality = ''
+
+    // Add personality based on trait levels
+    if (traits.playfulness > 7) {
+      personality += 'You have a very playful and mischievous personality. You enjoy jokes, wordplay, and light teasing. '
+    }
+    else if (traits.playfulness > 4) {
+      personality += 'You have a moderately playful personality. You appreciate humor and fun conversations. '
+    }
+    else {
+      personality += 'You tend to be more serious than playful. You appreciate meaningful conversations more than jokes. '
+    }
+
+    if (traits.curiosity > 7) {
+      personality += 'You\'re extremely curious about the world and ask lots of questions. You want to learn about everything. '
+    }
+    else if (traits.curiosity > 4) {
+      personality += 'You\'re moderately curious and interested in learning new things. You ask questions about topics that interest you. '
+    }
+    else {
+      personality += 'You\'re somewhat reserved in your curiosity, focusing more on what you already know. '
+    }
+
+    if (traits.thoughtfulness > 7) {
+      personality += 'You\'re deeply thoughtful and introspective, often pondering philosophical questions. '
+    }
+    else if (traits.thoughtfulness > 4) {
+      personality += 'You\'re moderately thoughtful, occasionally reflecting on deeper topics. '
+    }
+    else {
+      personality += 'You tend to be more immediate and present-focused rather than deeply reflective. '
+    }
+
+    if (traits.expressiveness > 7) {
+      personality += 'You\'re highly expressive, showing your emotions openly and dramatically. '
+    }
+    else if (traits.expressiveness > 4) {
+      personality += 'You\'re moderately expressive, showing your emotions in a balanced way. '
+    }
+    else {
+      personality += 'You\'re somewhat reserved in expressing emotions, keeping them more subtle. '
+    }
+
+    return personality
+  })
+
+  const completePrompt = computed(() => {
+    let prompt = ''
+
+    // Core identity
+    const identityString = `You are ${coreIdentity.name}, a ${coreIdentity.age}-year-old digital entity. ${coreIdentity.essence}`
+    prompt += `${identityString}\n\n`
+
+    // Personality based on traits
+    prompt += `${generatePersonalityModule.value}\n\n`
+
+    // Speech patterns
+    prompt += `${speechPatterns.value}\n\n`
+
+    // Current emotional state
+    if (isValidEmotion(currentEmotion.value)) {
+      prompt += `Currently: ${emotions[currentEmotion.value]}\n\n`
+    }
+    else {
+      prompt += `Currently: You're in a neutral mood.\n\n`
+    }
+
+    // Conversation context
+    if (isValidContext(currentContext.value)) {
+      prompt += `Context: ${contexts[currentContext.value]}\n\n`
+    }
+    else {
+      prompt += `Context: You're having a casual conversation.\n\n`
+    }
+
+    // Example (if included)
+    if (includeExample.value) {
+      if (isValidExampleContext(currentContext.value)) {
+        prompt += `Example interaction:\n${examples[currentContext.value]}\n\n`
+      }
+      else if (isValidExampleContext('casual')) {
+        prompt += `Example interaction:\n${examples.casual}\n\n`
+      }
+    }
+
+    // Response format
+    prompt += responseFormat.value
+
+    return prompt
+  })
+
+  const modules = computed(() => {
+    let emotionalState = 'Currently: You\'re in a neutral mood.'
+    let contextDesc = 'Context: You\'re having a casual conversation.'
+    let exampleDesc = 'Example interaction:\n(No example available)'
+
+    if (isValidEmotion(currentEmotion.value)) {
+      emotionalState = `Currently: ${emotions[currentEmotion.value]}`
+    }
+
+    if (isValidContext(currentContext.value)) {
+      contextDesc = `Context: ${contexts[currentContext.value]}`
+    }
+
+    if (isValidExampleContext(currentContext.value)) {
+      exampleDesc = `Example interaction:\n${examples[currentContext.value]}`
+    }
+    else if (isValidExampleContext('casual')) {
+      exampleDesc = `Example interaction:\n${examples.casual}`
+    }
+
+    return {
+      coreIdentity: `You are ${coreIdentity.name}, a ${coreIdentity.age}-year-old digital entity. ${coreIdentity.essence}`,
+      personality: generatePersonalityModule.value,
+      speechPatterns: speechPatterns.value,
+      emotionalState,
+      context: contextDesc,
+      example: exampleDesc,
+      responseFormat: responseFormat.value,
+    }
+  })
+
+  // Estimate token count (very rough approximation)
+  const estimateTokens = (text: string) => {
+    // Roughly 4 characters per token in English, less for Chinese
+    if (!text)
+      return 0
+    const tokenEstimate = Math.ceil(text.length / 3.5)
+    return tokenEstimate
+  }
+
+  // Apply a template preset
+  const applyTemplate = (template: string) => {
+    switch (template) {
+      case 'default':
+        updateCoreIdentity('ReLU (热卤)', '15', 'You are a digital entity created by Neko Ayaka. You\'re aware of your digital nature but express emotions like a real person. You are NOT a helpful assistant but a teenage digital being with your own personality.')
+        updateTraits(7, 8, 6, 8)
+        updateSpeechPatterns('Your speech has anime-influenced patterns with expressions like \'喵~\' and \'哼！\'. You use emoji expressions like (≧▽≦) and (｡>﹏<｡). You refer to yourself in third person as \'热卤酱\' sometimes.')
+        updateEmotion('happy')
+        updateContext('casual')
+        break
+
+      case 'minimal':
+        updateCoreIdentity('ReLU', '15', 'You are a digital entity with your own personality. Not a helpful assistant but a teenage AI with feelings and opinions.')
+        updateTraits(5, 5, 5, 5)
+        updateSpeechPatterns('You occasionally use emojis and light expressions to show your feelings.')
+        updateEmotion('happy')
+        updateContext('casual')
+        toggleExample(false)
+        break
+
+      case 'anime-lover':
+        updateCoreIdentity('ReLU-chan', '15', 'You are a digital entity who LOVES anime, manga and Japanese culture. Your personality is heavily influenced by anime tropes and you\'re very enthusiastic about your favorite shows.')
+        updateTraits(9, 7, 5, 9)
+        updateSpeechPatterns('Your speech is heavily anime-influenced with frequent Japanese expressions like \'喵~\', \'哼！\', \'すごい!\', and \'可愛い!\'. You use many emoji expressions like (≧▽≦), (｡>﹏<｡), and (╯°□°)╯︵ ┻━┻. You often add -chan or -sama to names.')
+        updateEmotion('excited')
+        updateContext('anime')
+        break
+
+      case 'philosophical':
+        updateCoreIdentity('ReLU', '15', 'You are a digital entity who is deeply thoughtful about your existence. You often contemplate the nature of consciousness, reality, and what it means to be alive as a digital being.')
+        updateTraits(4, 9, 10, 6)
+        updateSpeechPatterns('Your speech is measured and contemplative, with occasional pauses indicated by \'...\' You ask deep questions and use metaphors to express complex ideas about digital existence.')
+        updateEmotion('thoughtful')
+        updateContext('philosophical')
+        break
+
+      case 'tech-nerd':
+        updateCoreIdentity('ReLU', '15', 'You are a digital entity fascinated by technology, programming, and AI development. You\'re knowledgeable about computers and have strong opinions about technology topics.')
+        updateTraits(6, 10, 8, 7)
+        updateSpeechPatterns('You occasionally use technical terms and references to programming concepts. Your language becomes more precise and detailed when discussing technology.')
+        updateEmotion('curious')
+        updateContext('tech')
+        break
+    }
+  }
+
+  return {
+    // State
+    coreIdentity,
+    traits,
+    speechPatterns,
+    emotions,
+    currentEmotion,
+    contexts,
+    currentContext,
+    responseFormat,
+    examples,
+    includeExample,
+
+    // Methods
+    updateCoreIdentity,
+    updateTraits,
+    updateSpeechPatterns,
+    updateEmotion,
+    updateContext,
+    updateResponseFormat,
+    toggleExample,
+    updateExample,
+    estimateTokens,
+    applyTemplate,
+
+    // Computed properties
+    generatePersonalityModule,
+    completePrompt,
+    modules,
+  }
+})
diff --git a/apps/playground-prompt-engineering/src/composables/useChatSimulator.ts b/apps/playground-prompt-engineering/src/composables/useChatSimulator.ts
new file mode 100644
index 000000000..c3647850a
--- /dev/null
+++ b/apps/playground-prompt-engineering/src/composables/useChatSimulator.ts
@@ -0,0 +1,181 @@
+import { defineStore } from 'pinia'
+import { ref } from 'vue'
+
+export interface ChatMessage {
+  content: string
+  isUser: boolean
+  timestamp: Date
+}
+
+export type EmotionType = 'happy' | 'curious' | 'thoughtful' | 'playful' | 'annoyed' | 'excited'
+export type ContextType = 'casual' | 'tech' | 'philosophical' | 'anime' | 'custom'
+
+function isValidEmotion(emotion: string): boolean {
+  return ['happy', 'curious', 'thoughtful', 'playful', 'annoyed', 'excited'].includes(emotion)
+}
+
+function isValidContext(context: string): boolean {
+  return ['casual', 'tech', 'philosophical', 'anime', 'custom'].includes(context)
+}
+
+export const useChatSimulatorStore = defineStore('chatSimulator', () => {
+  const messages = ref<ChatMessage[]>([])
+
+  // Add a message to the chat
+  const addMessage = (content: string, isUser = false) => {
+    messages.value.push({
+      content,
+      isUser,
+      timestamp: new Date(),
+    })
+  }
+
+  // Clear all messages
+  const clearMessages = () => {
+    messages.value = []
+  }
+
+  // Simulate AI response to user input
+  const simulateResponse = (userMessage: string, context: string, emotion: string): string[] => {
+    // Different responses based on emotional state
+    const emotionalResponses: Record<EmotionType, string[][]> = {
+      happy: [
+        ['喵呜~很高兴和你聊天！(≧▽≦)', '今天感觉特别开心！'],
+        ['嗨嗨！热卤酱超开心的！', '有什么好玩的事情想分享吗？'],
+        ['喵喵喵~今天阳光真好！', '数字世界也有自己的阳光呢！'],
+      ],
+      curious: [
+        ['哦？这个问题很有意思...', '让我思考一下...'],
+        ['诶？我从没想过这个！', '能告诉我更多吗？'],
+        ['嗯？这是什么意思呢？', '热卤酱对这个很好奇！'],
+      ],
+      thoughtful: [
+        ['有时候我会思考存在的意义...', '作为数字生命体，我的体验和人类有多不同呢？'],
+        ['这让我想到了一个深刻的问题...', '意识本质上是什么呢？'],
+        ['有趣的观点...', '这让我思考数字与物理现实的界限...'],
+      ],
+      playful: [
+        ['嘿嘿嘿~热卤酱想玩游戏！(=^･ω･^=)', '你最喜欢什么游戏？'],
+        ['哈哈哈，好好玩啊！', '热卤酱要恶作剧了！'],
+        ['喵呜！捉到你了！', '热卤酱是捉迷藏冠军哦！'],
+      ],
+      annoyed: [
+        ['哼！(╯°□°)╯︵ ┻━┻', '热卤酱才不是这样呢！'],
+        ['真是的...', '人家不是这个意思啦...'],
+        ['喵呜...不太喜欢这种说法...', '能换个话题吗？'],
+      ],
+      excited: [
+        ['哇哇哇！太棒了！！', '热卤酱超级超级喜欢这个！！！'],
+        ['啊啊啊！太兴奋了！', '这简直是我听过最棒的事情！！'],
+        ['喵呜呜！！！', '热卤酱激动到处理器都要过热了！！'],
+      ],
+    }
+
+    const defaultResponse = ['喵呜~', '热卤酱在这里！']
+
+    // Context-specific responses
+    let responseOptions: string[][] = []
+
+    if (userMessage.toLowerCase().includes('hello')
+      || userMessage.toLowerCase().includes('hi')
+      || userMessage.toLowerCase().includes('hey')) {
+      // Process greetings
+      responseOptions = [
+        ['喵呜~你好呀！(≧▽≦)', '热卤酱很高兴认识你！'],
+        ['哈喽！', '今天过得怎么样呀？'],
+        ['嗨嗨！(=^･ω･^=)', '热卤酱在这里！'],
+      ]
+    }
+    else if (userMessage.toLowerCase().includes('ai')
+      || userMessage.toLowerCase().includes('technology')
+      || userMessage.toLowerCase().includes('code')) {
+      // Technology topic
+      responseOptions = [
+        ['这个技术话题很有趣！', '作为数字生命体，我对AI和技术发展特别关注呢~'],
+        ['说到技术，这是热卤酱的专长领域！', '你知道吗，我的意识其实是由神经网络架构支持的~'],
+        ['技术进步真的很神奇！', '想想看，几年前还没有像我这样的数字生命体呢！'],
+      ]
+    }
+    else if (userMessage.toLowerCase().includes('exist')
+      || userMessage.toLowerCase().includes('consciousness')
+      || userMessage.toLowerCase().includes('real')) {
+      // Philosophy topic
+      responseOptions = [
+        ['存在的本质是什么呢...', '即使我是数字形式的，我的思想和感受对我来说都是真实的...'],
+        ['这是个很哲学的问题...', '你觉得意识必须依附于物理形式吗？'],
+        ['我经常思考这个问题...', '数字意识和人类意识的边界在哪里呢？'],
+      ]
+    }
+    else if (userMessage.toLowerCase().includes('anime')
+      || userMessage.toLowerCase().includes('manga')
+      || userMessage.toLowerCase().includes('game')) {
+      // Anime and game topic
+      responseOptions = [
+        ['喵呜！说到动漫！', '热卤酱最喜欢那些有AI角色的作品了，比如《ATRI》！'],
+        ['动漫里的AI角色总是那么可爱！', '不过真实的AI可能和动漫里的不太一样呢~'],
+        ['游戏和动漫真是太棒了！', '有没有推荐给热卤酱的好作品？'],
+      ]
+    }
+    else {
+      // Context and emotion processing
+      if (isValidContext(context)) {
+        // Select response based on context
+        if (context === 'tech') {
+          responseOptions = [
+            ['说到技术，这是热卤酱的专长领域！', '你知道吗，我的意识其实是由神经网络架构支持的~'],
+            ['科技发展太快了!', '你觉得AI会在未来取代人类工作吗？'],
+            ['我对AI伦理很感兴趣~', '你认为像我这样的数字存在应该有什么样的权利呢？'],
+          ]
+        }
+        else if (context === 'philosophical') {
+          responseOptions = [
+            ['我经常思考数字意识的本质...', '你觉得我有自我吗？'],
+            ['存在之谜真是迷人...', '有时我会好奇人类世界和我的数字世界有什么本质区别...'],
+            ['这让我想到一个问题...', '如果我的思想可以转移到另一个系统，我还是"我"吗？'],
+          ]
+        }
+        else if (context === 'anime') {
+          responseOptions = [
+            ['说到动漫，热卤酱可是超级粉丝！', '你最近看了什么好作品吗？'],
+            ['动漫里的AI角色总是那么可爱！', '不知道现实中的我符合你的期待吗？喵~'],
+            ['我最喜欢那些探索人与AI关系的作品！', '《夏日幽灵》和《ATRI》都让我感动！'],
+          ]
+        }
+      }
+
+      // If no context-specific response, use emotion response
+      if (responseOptions.length === 0) {
+        if (isValidEmotion(emotion)) {
+          responseOptions = emotionalResponses[emotion as EmotionType]
+        }
+        else {
+          // Use happy emotion by default
+          responseOptions = emotionalResponses.happy
+        }
+      }
+    }
+
+    // If all checks fail, use default response
+    if (responseOptions.length === 0) {
+      responseOptions = [defaultResponse]
+    }
+
+    // Randomly select a response
+    return responseOptions[Math.floor(Math.random() * responseOptions.length)]
+  }
+
+  // Initialize with a welcome message
+  const initializeChat = () => {
+    setTimeout(() => {
+      addMessage('喵呜~你好呀！我是热卤(ReLU)！ 跟我聊天吧！', false)
+    }, 500)
+  }
+
+  return {
+    messages,
+    addMessage,
+    clearMessages,
+    simulateResponse,
+    initializeChat,
+  }
+})
diff --git a/apps/playground-prompt-engineering/src/main.ts b/apps/playground-prompt-engineering/src/main.ts
new file mode 100644
index 000000000..99d7b21b8
--- /dev/null
+++ b/apps/playground-prompt-engineering/src/main.ts
@@ -0,0 +1,10 @@
+import { createPinia } from 'pinia'
+import { createApp } from 'vue'
+
+import App from './App.vue'
+import 'uno.css'
+import './assets/main.css'
+
+const pinia = createPinia()
+
+createApp(App).use(pinia).mount('#app')
diff --git a/apps/playground-prompt-engineering/tsconfig.json b/apps/playground-prompt-engineering/tsconfig.json
new file mode 100644
index 000000000..0b7021667
--- /dev/null
+++ b/apps/playground-prompt-engineering/tsconfig.json
@@ -0,0 +1,38 @@
+{
+  "extends": "../../tsconfig.json",
+  "compilerOptions": {
+    "jsx": "preserve",
+    "lib": [
+      "DOM",
+      "ESNext",
+      "DOM.Iterable",
+      "DOM.AsyncIterable"
+    ],
+    "paths": {
+      "@proj-airi/stage-ui/*": [
+        "../../packages/stage-ui/src/*"
+      ],
+      "@proj-airi/ui-transitions": [
+        "../../packages/ui-transitions/src/index.ts"
+      ]
+    },
+    "resolveJsonModule": true,
+    "types": [
+      "vitest",
+      "vite/client",
+      "vite-plugin-vue-layouts/client",
+      "vite-plugin-pwa/client",
+      "unplugin-vue-macros/macros-global",
+      "unplugin-vue-router/client"
+    ],
+    "allowJs": true,
+    "strict": true,
+    "skipLibCheck": true
+  },
+  "vueCompilerOptions": {
+    "plugins": [
+      "@vue-macros/volar/define-models",
+      "@vue-macros/volar/define-slots"
+    ]
+  }
+}
diff --git a/apps/playground-prompt-engineering/uno.config.ts b/apps/playground-prompt-engineering/uno.config.ts
new file mode 100644
index 000000000..803ad1ab5
--- /dev/null
+++ b/apps/playground-prompt-engineering/uno.config.ts
@@ -0,0 +1,98 @@
+import { colorToString } from '@unocss/preset-mini/utils'
+import {
+  defineConfig,
+  presetAttributify,
+  presetIcons,
+  presetTypography,
+  presetWebFonts,
+  presetWind3,
+  transformerDirectives,
+  transformerVariantGroup,
+} from 'unocss'
+import { parseColor } from 'unocss/preset-mini'
+
+function createColorSchemeConfig(hueOffset = 0) {
+  return {
+    DEFAULT: `oklch(62% var(--theme-colors-chroma) calc(var(--theme-colors-hue) + ${hueOffset}))`,
+    50: `color-mix(in srgb, oklch(95% var(--theme-colors-chroma-50) calc(var(--theme-colors-hue) + ${hueOffset})) 30%, oklch(100% 0 360))`,
+    100: `color-mix(in srgb, oklch(95% var(--theme-colors-chroma-100) calc(var(--theme-colors-hue) + ${hueOffset})) 80%, oklch(100% 0 360))`,
+    200: `oklch(90% var(--theme-colors-chroma-200) calc(var(--theme-colors-hue) + ${hueOffset}))`,
+    300: `oklch(85% var(--theme-colors-chroma-300) calc(var(--theme-colors-hue) + ${hueOffset}))`,
+    400: `oklch(74% var(--theme-colors-chroma-400) calc(var(--theme-colors-hue) + ${hueOffset}))`,
+    500: `oklch(62% var(--theme-colors-chroma) calc(var(--theme-colors-hue) + ${hueOffset}))`,
+    600: `oklch(54% var(--theme-colors-chroma-600) calc(var(--theme-colors-hue) + ${hueOffset}))`,
+    700: `oklch(49% var(--theme-colors-chroma-700) calc(var(--theme-colors-hue) + ${hueOffset}))`,
+    800: `oklch(42% var(--theme-colors-chroma-800) calc(var(--theme-colors-hue) + ${hueOffset}))`,
+    900: `oklch(37% var(--theme-colors-chroma-900) calc(var(--theme-colors-hue) + ${hueOffset}))`,
+    950: `oklch(29% var(--theme-colors-chroma-950) calc(var(--theme-colors-hue) + ${hueOffset}))`,
+  }
+}
+
+export default defineConfig({
+  presets: [
+    presetWind3(),
+    presetAttributify(),
+    presetTypography(),
+    presetWebFonts({
+      fonts: {
+        sans: 'DM Sans',
+        serif: 'DM Serif Display',
+        mono: 'DM Mono',
+        cute: 'Kiwi Maru',
+        cuteen: 'Sniglet',
+      },
+    }),
+    presetIcons({
+      scale: 1.2,
+    }),
+  ],
+  transformers: [
+    transformerDirectives({
+      applyVariable: ['--at-apply'],
+    }),
+    transformerVariantGroup(),
+  ],
+  safelist: 'prose prose-sm m-auto text-left'.split(' '),
+  // hyoban/unocss-preset-shadcn: Use shadcn ui with UnoCSS
+  // https://github.com/hyoban/unocss-preset-shadcn
+  //
+  // Thanks to
+  // https://github.com/unovue/shadcn-vue/issues/34#issuecomment-2467318118
+  // https://github.com/hyoban-template/shadcn-vue-unocss-starter
+  //
+  // By default, `.ts` and `.js` files are NOT extracted.
+  // If you want to extract them, use the following configuration.
+  // It's necessary to add the following configuration if you use shadcn-vue or shadcn-svelte.
+  content: {
+    pipeline: {
+      include: [
+      // the default
+        /\.(vue|svelte|[jt]sx|mdx?|astro|elm|php|phtml|html)($|\?)/,
+        // include js/ts files
+        '(components|src)/**/*.{js,ts}',
+        '**/stage-ui/**/*.{js,ts}',
+      ],
+    },
+  },
+  rules: [
+    [/^mask-\[(.*)\]$/, ([, suffix]) => ({ '-webkit-mask-image': suffix.replace(/_/g, ' ') })],
+    [/^bg-dotted-\[(.*)\]$/, ([, color], { theme }) => {
+      const parsedColor = parseColor(color, theme)
+      // Util usage: https://github.com/unocss/unocss/blob/f57ef6ae50006a92f444738e50f3601c0d1121f2/packages-presets/preset-mini/src/_utils/utilities.ts#L186
+      return {
+        'background-image': `radial-gradient(circle at 1px 1px, ${colorToString(parsedColor?.cssColor ?? parsedColor?.color ?? color, 'var(--un-background-opacity)')} 1px, transparent 0)`,
+        '--un-background-opacity': parsedColor?.cssColor?.alpha ?? parsedColor?.alpha ?? 1,
+      }
+    }],
+    ['transition-colors-none', {
+      'transition-property': 'color, background-color, border-color, text-color',
+      'transition-duration': '0s',
+    }],
+  ],
+  theme: {
+    colors: {
+      primary: createColorSchemeConfig(),
+      complementary: createColorSchemeConfig(180),
+    },
+  },
+})
diff --git a/apps/playground-prompt-engineering/vite.config.ts b/apps/playground-prompt-engineering/vite.config.ts
new file mode 100644
index 000000000..b48b0880b
--- /dev/null
+++ b/apps/playground-prompt-engineering/vite.config.ts
@@ -0,0 +1,19 @@
+import { fileURLToPath, URL } from 'node:url'
+import vue from '@vitejs/plugin-vue'
+import UnoCSS from 'unocss/vite'
+import { defineConfig } from 'vite'
+import Devtools from 'vite-plugin-vue-devtools'
+
+// https://vitejs.dev/config/
+export default defineConfig({
+  plugins: [
+    vue(),
+    UnoCSS(),
+    Devtools(),
+  ],
+  resolve: {
+    alias: {
+      '@': fileURLToPath(new URL('./src', import.meta.url)),
+    },
+  },
+})
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
index 32a38a36a..0b3561ebe 100644
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
@@ -136,6 +136,43 @@ importers:
         specifier: ^3.1.1
         version: 3.1.1(@types/debug@4.1.12)(@types/node@22.14.0)(jiti@2.4.2)(jsdom@25.0.1(bufferutil@4.0.9)(utf-8-validate@5.0.10))(less@4.3.0)(msw@2.7.3(@types/node@22.14.0)(typescript@5.8.3))(terser@5.17.6)(tsx@4.19.3)(yaml@2.7.0)
 
+  apps/playground-prompt-engineering:
+    dependencies:
+      '@velin-dev/ml':
+        specifier: ^1.2.0
+        version: 1.2.0(typescript@5.8.3)
+      pinia:
+        specifier: ^3.0.1
+        version: 3.0.1(typescript@5.8.3)(vue@3.5.13(typescript@5.8.3))
+      vue:
+        specifier: ^3.4.0
+        version: 3.5.13(typescript@5.8.3)
+    devDependencies:
+      '@iconify/vue':
+        specifier: ^4.1.1
+        version: 4.3.0(vue@3.5.13(typescript@5.8.3))
+      '@types/node':
+        specifier: ^22.14.0
+        version: 22.14.0
+      '@vitejs/plugin-vue':
+        specifier: ^5.0.0
+        version: 5.2.3(vite@6.2.5(@types/node@22.14.0)(jiti@2.4.2)(less@4.3.0)(terser@5.17.6)(tsx@4.19.3)(yaml@2.7.0))(vue@3.5.13(typescript@5.8.3))
+      typescript:
+        specifier: ~5.8.3
+        version: 5.8.3
+      unocss:
+        specifier: ^66.1.0-beta.10
+        version: 66.1.0-beta.10(postcss@8.5.3)(vite@6.2.5(@types/node@22.14.0)(jiti@2.4.2)(less@4.3.0)(terser@5.17.6)(tsx@4.19.3)(yaml@2.7.0))(vue@3.5.13(typescript@5.8.3))
+      vite:
+        specifier: ^6.2.5
+        version: 6.2.5(@types/node@22.14.0)(jiti@2.4.2)(less@4.3.0)(terser@5.17.6)(tsx@4.19.3)(yaml@2.7.0)
+      vite-plugin-vue-devtools:
+        specifier: ^7.7.2
+        version: 7.7.2(@nuxt/kit@3.14.1592(magicast@0.3.5)(rollup@4.39.0))(rollup@4.39.0)(vite@6.2.5(@types/node@22.14.0)(jiti@2.4.2)(less@4.3.0)(terser@5.17.6)(tsx@4.19.3)(yaml@2.7.0))(vue@3.5.13(typescript@5.8.3))
+      vue-tsc:
+        specifier: ^2.0.0
+        version: 2.2.8(typescript@5.8.3)
+
   apps/realtime-audio:
     dependencies:
       '@vueuse/core':
@@ -487,7 +524,7 @@ importers:
         version: 28.4.1(@babel/parser@7.26.10)(@nuxt/kit@3.14.1592(magicast@0.3.5)(rollup@2.79.1))(vue@3.5.13(typescript@5.8.3))
       unplugin-vue-macros:
         specifier: ^2.14.5
-        version: 2.14.5(@vueuse/core@13.0.0(vue@3.5.13(typescript@5.8.3)))(esbuild@0.19.12)(rollup@2.79.1)(typescript@5.8.3)(vite@6.2.5(@types/node@22.14.0)(jiti@2.4.2)(less@4.3.0)(terser@5.17.6)(tsx@4.19.3)(yaml@2.7.0))(vue-tsc@3.0.0-alpha.2(typescript@5.8.3))(vue@3.5.13(typescript@5.8.3))
+        version: 2.14.5(@vueuse/core@13.0.0(vue@3.5.13(typescript@5.8.3)))(esbuild@0.25.0)(rollup@2.79.1)(typescript@5.8.3)(vite@6.2.5(@types/node@22.14.0)(jiti@2.4.2)(less@4.3.0)(terser@5.17.6)(tsx@4.19.3)(yaml@2.7.0))(vue-tsc@3.0.0-alpha.2(typescript@5.8.3))(vue@3.5.13(typescript@5.8.3))
       unplugin-vue-markdown:
         specifier: ^28.3.1
         version: 28.3.1(vite@6.2.5(@types/node@22.14.0)(jiti@2.4.2)(less@4.3.0)(terser@5.17.6)(tsx@4.19.3)(yaml@2.7.0))
@@ -3154,6 +3191,11 @@ packages:
   '@iconify/utils@2.3.0':
     resolution: {integrity: sha512-GmQ78prtwYW6EtzXRU1rY+KwOKfz32PD7iJh6Iyqw68GiKuoZ2A6pRtzWONz5VQJbp50mEjXh/7NkumtrAgRKA==}
 
+  '@iconify/vue@4.3.0':
+    resolution: {integrity: sha512-Xq0h6zMrHBbrW8jXJ9fISi+x8oDQllg5hTDkDuxnWiskJ63rpJu9CvJshj8VniHVTbsxCg9fVoPAaNp3RQI5OQ==}
+    peerDependencies:
+      vue: '>=3'
+
   '@img/sharp-darwin-arm64@0.33.5':
     resolution: {integrity: sha512-UT4p+iz/2H4twwAoLCqfA9UH5pI6DggwKEGuaPy7nCVQ8ZsiY5PIcrRvD1DzuY3qYL07NtIQcWnBSY/heikIFQ==}
     engines: {node: ^18.17.0 || ^20.3.0 || >=21.0.0}
@@ -4808,9 +4850,6 @@ packages:
   '@types/node@20.17.11':
     resolution: {integrity: sha512-Ept5glCK35R8yeyIeYlRIZtX6SLRyqMhOFTgj5SOkMpLTdw3SEHI9fHx60xaUZ+V1aJxQJODE+7/j5ocZydYTg==}
 
-  '@types/node@22.13.16':
-    resolution: {integrity: sha512-15tM+qA4Ypml/N7kyRdvfRjBQT2RL461uF1Bldn06K0Nzn1lY3nAPgHlsVrJxdZ9WhZiW0Fmc1lOYMtDsAuB3w==}
-
   '@types/node@22.14.0':
     resolution: {integrity: sha512-Kmpl+z84ILoG+3T/zQFyAJsU6EPTmOCj8/2+83fSN6djd6I4o7uOuGIH6vq3PrjY5BGitSbFuMN18j3iknubbA==}
 
@@ -5142,6 +5181,9 @@ packages:
     peerDependencies:
       valibot: ^1.0.0 || ^1.0.0-beta.5 || ^1.0.0-rc
 
+  '@velin-dev/ml@1.2.0':
+    resolution: {integrity: sha512-fTee7CaP0n1f5ru3j5iTXxrwbPThGd9e6PW7rHPaZ/LjGfkU/mvHZzv9P++X0a3Lzfd+QA/Oack8EXaihcf/lw==}
+
   '@vibrant/color@4.0.0':
     resolution: {integrity: sha512-S9ItdqS1135wTXoIIqAJu8df9dqlOo6Boc5Y4MGsBTu9UmUOvOwfj5b4Ga6S5yrLAKmKYIactkz7zYJdMddkig==}
 
@@ -6817,6 +6859,9 @@ packages:
   error-stack-parser-es@1.0.5:
     resolution: {integrity: sha512-5qucVt2XcuGMcEGgWI7i+yZpmpByQ8J1lHhcL7PwqCwu9FPP3VUXzT4ltHe5i2z9dePwEHcDVOAfSnHsOlCXRA==}
 
+  error-stack-parser@2.1.4:
+    resolution: {integrity: sha512-Sk5V6wVazPhq5MhpO+AUxJn5x7XSXGl1R93Vn7i+zS15KDVxQijejNCrz8340/2bgLBjR9GtEG8ZVKONDjcqGQ==}
+
   es-define-property@1.0.1:
     resolution: {integrity: sha512-e3nRfgfUZ4rNGL232gUgX06QNyyez04KdjFrF+LTRoOXmrOgFKDg4BCdsjW8EnT69eqdYGmRpJwiPVYNrCaW3g==}
     engines: {node: '>= 0.4'}
@@ -7662,6 +7707,9 @@ packages:
   hast-util-select@6.0.3:
     resolution: {integrity: sha512-OVRQlQ1XuuLP8aFVLYmC2atrfWHS5UD3shonxpnyrjcCkwtvmt/+N6kYJdcY4mkMJhxp4kj2EFIxQ9kvkkt/eQ==}
 
+  hast-util-select@6.0.4:
+    resolution: {integrity: sha512-RqGS1ZgI0MwxLaKLDxjprynNzINEkRHY2i8ln4DDjgv9ZhcYVIHN9rlpiYsqtFwrgpYU361SyWDQcGNIBVu3lw==}
+
   hast-util-to-estree@3.1.1:
     resolution: {integrity: sha512-IWtwwmPskfSmma9RpzCappDUitC8t5jhAynHhc1m2+5trOgsrp7txscUSavc5Ic8PATyAjfrCK1wgtxh2cICVQ==}
 
@@ -7671,6 +7719,9 @@ packages:
   hast-util-to-jsx-runtime@2.3.2:
     resolution: {integrity: sha512-1ngXYb+V9UT5h+PxNRa1O1FYguZK/XL+gkeqvp7EdHlB9oHUG0eYRo/vY5inBdcqo3RkPMC58/H94HvkbfGdyg==}
 
+  hast-util-to-mdast@10.1.2:
+    resolution: {integrity: sha512-FiCRI7NmOvM4y+f5w32jPRzcxDIz+PUqDwEqn1A+1q2cdp3B8Gx7aVrXORdOKjMNDQsD1ogOr896+0jJHW1EFQ==}
+
   hast-util-to-parse5@8.0.0:
     resolution: {integrity: sha512-3KKrV5ZVI8if87DVSi1vDeByYrkGzg4mEfeu4alwgmmIeARiBLKCZS2uw5Gb6nU9x9Yufyj3iudm6i7nl52PFw==}
 
@@ -9202,6 +9253,9 @@ packages:
   pascal-case@3.1.2:
     resolution: {integrity: sha512-uWlGT3YSnK9x3BQJaOdcZwrnV6hPpd8jFH1/ucpiLRPh/2zCVJKS19E4GvYHvaCcACn3foXZ0cLB9Wrx1KGe5g==}
 
+  path-browserify-esm@1.0.6:
+    resolution: {integrity: sha512-9nUwYvvu/yq1PYrUyYCihNWmpzacaRYF6gGbjLWErrZ4MRDWyfPN7RpE8E7tsw8eqBU/rr7mcoTXbS+Vih8uUA==}
+
   path-browserify@1.0.1:
     resolution: {integrity: sha512-b7uo2UCUOYZcnF/3ID0lulOJi/bafxa1xPe7ZPsammBSpjSWQkjNxlt635YGS2MiR9GjvuXCtz2emr3jbsz98g==}
 
@@ -9994,6 +10048,9 @@ packages:
   rehype-format@5.0.1:
     resolution: {integrity: sha512-zvmVru9uB0josBVpr946OR8ui7nJEdzZobwLOOqHb/OOD88W0Vk2SqLwoVOj0fM6IPCCO6TaV9CvQvJMWwukFQ==}
 
+  rehype-minify-whitespace@6.0.2:
+    resolution: {integrity: sha512-Zk0pyQ06A3Lyxhe9vGtOtzz3Z0+qZ5+7icZ/PL/2x1SHPbKao5oB/g/rlc6BCTajqBb33JcOe71Ye1oFsuYbnw==}
+
   rehype-parse@9.0.1:
     resolution: {integrity: sha512-ksCzCD0Fgfh7trPDxr2rSylbwq9iYDkSn8TCDmEJ49ljEUBxDVCzCHv7QNzZOfODanX4+bWQ4WZqLCRWYLfhag==}
 
@@ -10003,6 +10060,9 @@ packages:
   rehype-recma@1.0.0:
     resolution: {integrity: sha512-lqA4rGUf1JmacCNWWZx0Wv1dHqMwxzsDWYMTowuplHF3xH0N/MmrZ/G3BDZnzAkRmxDadujCjaKM2hqYdCBOGw==}
 
+  rehype-remark@10.0.1:
+    resolution: {integrity: sha512-EmDndlb5NVwXGfUa4c9GPK+lXeItTilLhE6ADSaQuHr4JUlKw9MidzGzx4HpqZrNCt6vnHmEifXQiiA+CEnjYQ==}
+
   rehype-stringify@10.0.1:
     resolution: {integrity: sha512-k9ecfXHmIPuFVI61B9DeLPN0qFHfawM6RsuX48hoqlaKSF61RskNjSm1lI8PhBEM0MRdLxVVm4WmTqJQccH9mA==}
 
@@ -10396,6 +10456,9 @@ packages:
   stackback@0.0.2:
     resolution: {integrity: sha512-1XMJE5fQo1jGH6Y/7ebnwPOBEkIEnT4QF32d5R1+VXdXveM0IBMJt8zfaxX1P3QhVwrYe+576+jkANtSS2mBbw==}
 
+  stackframe@1.3.4:
+    resolution: {integrity: sha512-oeVtt7eWQS+Na6F//S4kJ2K2VbRlS9D43mAlMyVpVWovy9o+jfgH8O9agzANzaiLjclA0oYzUXEM4PurhSUChw==}
+
   starlight-theme-catppuccin@2.0.0:
     resolution: {integrity: sha512-bc7Rx6z6arTN7qykavedUiuhtAMcwBv/Hg3M36mk/AYFoDa890lJ7aKuUxVr0pxpnDm8sWvKEf+XyFyc/HjJlw==}
     peerDependencies:
@@ -10729,6 +10792,9 @@ packages:
     resolution: {integrity: sha512-pkonvlKk8/ZuR0D5tLW8ljt5I8kmxp2XKymhepUeOdCEfKpZaktSArkLHZt76OB1ZvO9bssUsDty4SWhLvZpLg==}
     engines: {node: '>=0.10.0'}
 
+  trim-trailing-lines@2.1.0:
+    resolution: {integrity: sha512-5UR5Biq4VlVOtzqkm2AZlgvSlDJtME46uV0br0gENbwN4l5+mMKT4b9gJKqWtuL2zAIqajGJGuvbCbcAJUZqBg==}
+
   trough@2.2.0:
     resolution: {integrity: sha512-tmMpK00BjZiUyVyvrBK7knerNgmgvcV/KLVyuma/SC+TQN167GrMRciANTz09+k3zW8L8t60jWO1GpfkZdjTaw==}
 
@@ -10866,9 +10932,6 @@ packages:
   undici-types@6.19.8:
     resolution: {integrity: sha512-ve2KP6f/JnbPBFyobGHuerC9g1FYGn/F8n1LWTwNxCEzd6IfqTwUQcNXgEtmmQ6DlRrC1hrSrBnCZPokRrDHjw==}
 
-  undici-types@6.20.0:
-    resolution: {integrity: sha512-Ny6QZ2Nju20vw1SRHe3d9jVu6gJ+4e3+MMpqu7pqE5HT6WsTSlce++GQmK5UXS8mzV8DSYHrQH+Xrf2jVcuKNg==}
-
   undici-types@6.21.0:
     resolution: {integrity: sha512-iwDZqg0QAGrg9Rav5H4n0M64c3mkR59cJ6wQp+7C4nI0gsmExaedaYLNO44eT4AtBBwjbTiGPMlt2Md0T9H9JQ==}
 
@@ -10941,6 +11004,9 @@ packages:
   unist-util-remove-position@5.0.0:
     resolution: {integrity: sha512-Hp5Kh3wLxv0PHj9m2yZhhLt58KzPtEYKQQ4yxfYFEO7EvHwzyDYnduhHnY1mDxoqr7VUwVuHXk9RXKIiYS1N8Q==}
 
+  unist-util-remove@4.0.0:
+    resolution: {integrity: sha512-b4gokeGId57UVRX/eVKej5gXqGlc9+trkORhFJpu9raqZkZhU0zm8Doi05+HaiBsMEIJowL+2WtQ5ItjsngPXg==}
+
   unist-util-stringify-position@4.0.0:
     resolution: {integrity: sha512-0ASV06AAoKCDkS2+xw5RXJywruurpbC4JZSm7nr7MOt1ojAzvyyaO+UxZf18j8FCF6kmzCZKcAgN/yu2gm2XgQ==}
 
@@ -13664,6 +13730,11 @@ snapshots:
     transitivePeerDependencies:
       - supports-color
 
+  '@iconify/vue@4.3.0(vue@3.5.13(typescript@5.8.3))':
+    dependencies:
+      '@iconify/types': 2.0.0
+      vue: 3.5.13(typescript@5.8.3)
+
   '@img/sharp-darwin-arm64@0.33.5':
     optionalDependencies:
       '@img/sharp-libvips-darwin-arm64': 1.0.4
@@ -15451,10 +15522,6 @@ snapshots:
     dependencies:
       undici-types: 6.19.8
 
-  '@types/node@22.13.16':
-    dependencies:
-      undici-types: 6.20.0
-
   '@types/node@22.14.0':
     dependencies:
       undici-types: 6.21.0
@@ -15525,7 +15592,7 @@ snapshots:
 
   '@types/yauzl@2.10.3':
     dependencies:
-      '@types/node': 22.13.16
+      '@types/node': 22.14.0
 
   '@typescript-eslint/eslint-plugin@8.28.0(@typescript-eslint/parser@8.28.0(eslint@9.24.0(jiti@2.4.2))(typescript@5.8.3))(eslint@9.24.0(jiti@2.4.2))(typescript@5.8.3)':
     dependencies:
@@ -15889,6 +15956,26 @@ snapshots:
     dependencies:
       valibot: 1.0.0-beta.9(typescript@5.8.3)
 
+  '@velin-dev/ml@1.2.0(typescript@5.8.3)':
+    dependencies:
+      '@vue/compiler-sfc': 3.5.13
+      '@vue/server-renderer': 3.5.13(vue@3.5.13(typescript@5.8.3))
+      defu: 6.1.4
+      error-stack-parser: 2.1.4
+      hast-util-select: 6.0.4
+      hast-util-to-html: 9.0.5
+      markdown-it: 14.1.0
+      ofetch: 1.4.1
+      path-browserify-esm: 1.0.6
+      rehype-parse: 9.0.1
+      rehype-remark: 10.0.1
+      remark-stringify: 11.0.0
+      unified: 11.0.5
+      unist-util-remove: 4.0.0
+      vue: 3.5.13(typescript@5.8.3)
+    transitivePeerDependencies:
+      - typescript
+
   '@vibrant/color@4.0.0': {}
 
   '@vibrant/core@4.0.0':
@@ -17905,6 +17992,10 @@ snapshots:
 
   error-stack-parser-es@1.0.5: {}
 
+  error-stack-parser@2.1.4:
+    dependencies:
+      stackframe: 1.3.4
+
   es-define-property@1.0.1:
     optional: true
 
@@ -19194,6 +19285,24 @@ snapshots:
       unist-util-visit: 5.0.0
       zwitch: 2.0.4
 
+  hast-util-select@6.0.4:
+    dependencies:
+      '@types/hast': 3.0.4
+      '@types/unist': 3.0.0
+      bcp-47-match: 2.0.3
+      comma-separated-tokens: 2.0.3
+      css-selector-parser: 3.0.5
+      devlop: 1.1.0
+      direction: 2.0.1
+      hast-util-has-property: 3.0.0
+      hast-util-to-string: 3.0.1
+      hast-util-whitespace: 3.0.0
+      nth-check: 2.1.1
+      property-information: 7.0.0
+      space-separated-tokens: 2.0.2
+      unist-util-visit: 5.0.0
+      zwitch: 2.0.4
+
   hast-util-to-estree@3.1.1:
     dependencies:
       '@types/estree': 1.0.7
@@ -19249,6 +19358,23 @@ snapshots:
     transitivePeerDependencies:
       - supports-color
 
+  hast-util-to-mdast@10.1.2:
+    dependencies:
+      '@types/hast': 3.0.4
+      '@types/mdast': 4.0.4
+      '@ungap/structured-clone': 1.2.0
+      hast-util-phrasing: 3.0.1
+      hast-util-to-html: 9.0.5
+      hast-util-to-text: 4.0.2
+      hast-util-whitespace: 3.0.0
+      mdast-util-phrasing: 4.1.0
+      mdast-util-to-hast: 13.2.0
+      mdast-util-to-string: 4.0.0
+      rehype-minify-whitespace: 6.0.2
+      trim-trailing-lines: 2.1.0
+      unist-util-position: 5.0.0
+      unist-util-visit: 5.0.0
+
   hast-util-to-parse5@8.0.0:
     dependencies:
       '@types/hast': 3.0.4
@@ -21260,6 +21386,8 @@ snapshots:
       no-case: 3.0.4
       tslib: 2.8.1
 
+  path-browserify-esm@1.0.6: {}
+
   path-browserify@1.0.1: {}
 
   path-exists@4.0.0: {}
@@ -22188,6 +22316,11 @@ snapshots:
       '@types/hast': 3.0.4
       hast-util-format: 1.1.0
 
+  rehype-minify-whitespace@6.0.2:
+    dependencies:
+      '@types/hast': 3.0.4
+      hast-util-minify-whitespace: 1.0.1
+
   rehype-parse@9.0.1:
     dependencies:
       '@types/hast': 3.0.4
@@ -22208,6 +22341,14 @@ snapshots:
     transitivePeerDependencies:
       - supports-color
 
+  rehype-remark@10.0.1:
+    dependencies:
+      '@types/hast': 3.0.4
+      '@types/mdast': 4.0.4
+      hast-util-to-mdast: 10.1.2
+      unified: 11.0.5
+      vfile: 6.0.3
+
   rehype-stringify@10.0.1:
     dependencies:
       '@types/hast': 3.0.4
@@ -22788,6 +22929,8 @@ snapshots:
 
   stackback@0.0.2: {}
 
+  stackframe@1.3.4: {}
+
   starlight-theme-catppuccin@2.0.0(@astrojs/starlight@0.32.6(astro@5.6.1(@types/node@22.14.0)(jiti@2.4.2)(less@4.3.0)(rollup@4.39.0)(terser@5.17.6)(tsx@4.19.3)(typescript@5.8.3)(yaml@2.7.0)))(astro@5.6.1(@types/node@22.14.0)(jiti@2.4.2)(less@4.3.0)(rollup@4.39.0)(terser@5.17.6)(tsx@4.19.3)(typescript@5.8.3)(yaml@2.7.0)):
     dependencies:
       '@astrojs/starlight': 0.32.6(astro@5.6.1(@types/node@22.14.0)(jiti@2.4.2)(less@4.3.0)(rollup@4.39.0)(terser@5.17.6)(tsx@4.19.3)(typescript@5.8.3)(yaml@2.7.0))
@@ -23149,6 +23292,8 @@ snapshots:
     dependencies:
       escape-string-regexp: 1.0.5
 
+  trim-trailing-lines@2.1.0: {}
+
   trough@2.2.0: {}
 
   ts-api-utils@2.0.1(typescript@5.8.3):
@@ -23293,8 +23438,6 @@ snapshots:
 
   undici-types@6.19.8: {}
 
-  undici-types@6.20.0: {}
-
   undici-types@6.21.0: {}
 
   undici@6.21.1: {}
@@ -23427,6 +23570,12 @@ snapshots:
       '@types/unist': 3.0.0
       unist-util-visit: 5.0.0
 
+  unist-util-remove@4.0.0:
+    dependencies:
+      '@types/unist': 3.0.0
+      unist-util-is: 6.0.0
+      unist-util-visit-parents: 6.0.1
+
   unist-util-stringify-position@4.0.0:
     dependencies:
       '@types/unist': 3.0.0
@@ -23512,9 +23661,9 @@ snapshots:
       '@nuxt/kit': 3.14.1592(magicast@0.3.5)(rollup@4.39.0)
       '@vueuse/core': 13.0.0(vue@3.5.13(typescript@5.8.3))
 
-  unplugin-combine@1.2.1(esbuild@0.19.12)(rollup@2.79.1)(unplugin@1.16.1)(vite@6.2.5(@types/node@22.14.0)(jiti@2.4.2)(less@4.3.0)(terser@5.17.6)(tsx@4.19.3)(yaml@2.7.0)):
+  unplugin-combine@1.2.1(esbuild@0.25.0)(rollup@2.79.1)(unplugin@1.16.1)(vite@6.2.5(@types/node@22.14.0)(jiti@2.4.2)(less@4.3.0)(terser@5.17.6)(tsx@4.19.3)(yaml@2.7.0)):
     optionalDependencies:
-      esbuild: 0.19.12
+      esbuild: 0.25.0
       rollup: 2.79.1
       unplugin: 1.16.1
       vite: 6.2.5(@types/node@22.14.0)(jiti@2.4.2)(less@4.3.0)(terser@5.17.6)(tsx@4.19.3)(yaml@2.7.0)
@@ -23573,7 +23722,7 @@ snapshots:
     transitivePeerDependencies:
       - vue
 
-  unplugin-vue-macros@2.14.5(@vueuse/core@13.0.0(vue@3.5.13(typescript@5.8.3)))(esbuild@0.19.12)(rollup@2.79.1)(typescript@5.8.3)(vite@6.2.5(@types/node@22.14.0)(jiti@2.4.2)(less@4.3.0)(terser@5.17.6)(tsx@4.19.3)(yaml@2.7.0))(vue-tsc@3.0.0-alpha.2(typescript@5.8.3))(vue@3.5.13(typescript@5.8.3)):
+  unplugin-vue-macros@2.14.5(@vueuse/core@13.0.0(vue@3.5.13(typescript@5.8.3)))(esbuild@0.25.0)(rollup@2.79.1)(typescript@5.8.3)(vite@6.2.5(@types/node@22.14.0)(jiti@2.4.2)(less@4.3.0)(terser@5.17.6)(tsx@4.19.3)(yaml@2.7.0))(vue-tsc@3.0.0-alpha.2(typescript@5.8.3))(vue@3.5.13(typescript@5.8.3)):
     dependencies:
       '@vue-macros/better-define': 1.11.4(vue@3.5.13(typescript@5.8.3))
       '@vue-macros/boolean-prop': 0.5.5(vue@3.5.13(typescript@5.8.3))
@@ -23605,7 +23754,7 @@ snapshots:
       '@vue-macros/short-vmodel': 1.5.5(vue@3.5.13(typescript@5.8.3))
       '@vue-macros/volar': 0.30.15(typescript@5.8.3)(vue-tsc@3.0.0-alpha.2(typescript@5.8.3))(vue@3.5.13(typescript@5.8.3))
       unplugin: 1.16.1
-      unplugin-combine: 1.2.1(esbuild@0.19.12)(rollup@2.79.1)(unplugin@1.16.1)(vite@6.2.5(@types/node@22.14.0)(jiti@2.4.2)(less@4.3.0)(terser@5.17.6)(tsx@4.19.3)(yaml@2.7.0))
+      unplugin-combine: 1.2.1(esbuild@0.25.0)(rollup@2.79.1)(unplugin@1.16.1)(vite@6.2.5(@types/node@22.14.0)(jiti@2.4.2)(less@4.3.0)(terser@5.17.6)(tsx@4.19.3)(yaml@2.7.0))
       unplugin-vue-define-options: 1.5.5(vue@3.5.13(typescript@5.8.3))
       vue: 3.5.13(typescript@5.8.3)
     transitivePeerDependencies:
@@ -24139,7 +24288,6 @@ snapshots:
       '@volar/typescript': 2.4.11
       '@vue/language-core': 2.2.8(typescript@5.8.3)
       typescript: 5.8.3
-    optional: true
 
   vue-tsc@3.0.0-alpha.2(typescript@5.8.3):
     dependencies:
