docs: image, switch to cyan

2024-12-28 18:36:17 +08:00
parent d995315c6b
commit e7fe31bfba
6 changed files with 36 additions and 16 deletions
@@ -1,3 +1,7 @@
+<p align="center">
+  <img src="./docs/public/readme-image-pc-preview.png" width="50%">
+</p>
+
 <h1 align="center">アイリ VTuber</h1>

 <p align="center">
@@ -1,3 +1,7 @@
+<p align="center">
+  <img src="./docs/public/readme-image-pc-preview.png" width="50%">
+</p>
+
 <h1 align="center">アイリ VTuber</h1>

 <p align="center">
@@ -16,7 +20,19 @@ pnpm i
 pnpm dev
 ```

-## Acknowledgements
+## 使用的模型
+
+- [onnx-community/whisper-large-v3-turbo · Hugging Face](https://huggingface.co/onnx-community/whisper-large-v3-turbo)
+
+## 类似项目
+
+- [InsanityLabs/AIVTuber](https://github.com/InsanityLabs/AIVTuber?tab=readme-ov-file)
+- [IRedDragonICY/vixevia](https://github.com/IRedDragonICY/vixevia)
+- [t41372/Open-LLM-VTuber](https://github.com/t41372/Open-LLM-VTuber)
+
+## 鸣谢

 - [pixiv/ChatVRM](https://github.com/pixiv/ChatVRM)
 - [josephrocca/ChatVRM-js: A JS conversion/adaptation of parts of the ChatVRM (TypeScript) code for standalone use in OpenCharacters and elsewhere](https://github.com/josephrocca/ChatVRM-js)
+- UI 和样式的设计受 [Cookard](https://store.steampowered.com/app/2919650/Cookard/)，[UNBEATABLE](https://store.steampowered.com/app/2240620/UNBEATABLE/)，以及 [Sensei! I like you so much!](https://store.steampowered.com/app/2957700/_/)，还有 [Ayame by Mercedes Bazan](https://dribbble.com/shots/22157656-Ayame) 和 [Wish by Mercedes Bazan](https://dribbble.com/shots/24501019-Wish) 的作品启发
+- [mallorbc/whisper_mic](https://github.com/mallorbc/whisper_mic)
@@ -188,9 +188,9 @@ onAfterSend(async () => {
    </div>
    <div flex="~ row" gap-2>
      <button
-        bg="teal-100 hover:teal-200 dark:teal-800 dark:hover:teal-700"
+        bg="cyan-100 hover:cyan-200 dark:cyan-800 dark:hover:cyan-700"
        transition="all duration-250 ease-in-out"
-        text="teal-400"
+        text="cyan-400"
        mb-6 flex cursor-pointer items-center justify-center gap-2 rounded-full px-4 py-2
        @click="handleLoadWhisper"
      >
@@ -212,10 +212,10 @@ onAfterSend(async () => {
        <TransitionVertical>
          <fieldset
            v-if="showMicrophoneSelect"
-            transform="translate-y--100%" right="-50%" bottom="-10" text="teal-400 dark:white" bg="white dark:teal-900" border="solid 4 teal-200 dark:teal-800"
+            transform="translate-y--100%" right="-50%" bottom="-10" text="cyan-400 dark:white" bg="white dark:cyan-900" border="solid 4 cyan-200 dark:cyan-800"
            absolute z-30 rounded-2xl px-2 py-2 text-right text-nowrap text-base font-sans
          >
-            <label v-for="(input, index) in audioInputs" :key="index" class="[&_div_span]:dark:hover:bg-teal-300 [&_div_span]:dark:hover:bg-teal-900">
+            <label v-for="(input, index) in audioInputs" :key="index" class="[&_div_span]:dark:hover:bg-cyan-300 [&_div_span]:dark:hover:bg-cyan-900">
              <input type="radio" name="audioInput" :value="input.deviceId" hidden @change="handleAudioInputChange">
              <div flex="~ row" cursor-pointer items-center gap-2 grid="cols-2">
                <div min-w="6">
@@ -223,7 +223,7 @@ onAfterSend(async () => {
                </div>
                <span
                  inline-block
-                  :class="[input.deviceId === selectedAudioDeviceId ? 'teal-400 dark:text-white' : 'teal-400/50 dark:text-white/50']"
+                  :class="[input.deviceId === selectedAudioDeviceId ? 'cyan-400 dark:text-white' : 'cyan-400/50 dark:text-white/50']"
                  transition="all duration-250 ease-in-out"
                >
                  {{ input.label }}
@@ -233,9 +233,9 @@ onAfterSend(async () => {
          </fieldset>
        </TransitionVertical>
        <label
-          bg="teal-100 hover:teal-200 dark:teal-800 dark:hover:teal-700"
+          bg="cyan-100 hover:cyan-200 dark:cyan-800 dark:hover:cyan-700"
          transition="all duration-250 ease-in-out"
-          text="teal-400"
+          text="cyan-400"
          mb-6 flex cursor-pointer items-center justify-center gap-2 rounded-full px-4 py-2
        >
          <input v-model="showMicrophoneSelect" type="checkbox" hidden>
@@ -59,14 +59,14 @@ onTokenLiteral(async () => {
        <div v-else-if="message.role === 'user'" flex="~ row-reverse" ml="12">
          <div
            flex="~ col"
-            border="4 solid teal-200/50 dark:teal-500/50"
-            shadow="md teal-200/50 dark:none"
+            border="4 solid cyan-200/50 dark:cyan-500/50"
+            shadow="md cyan-200/50 dark:none"
            px="2"
            h="unset <sm:fit" min-w-20 rounded-lg px-2 py-1
-            bg="<md:teal-500/25"
+            bg="<md:cyan-500/25"
          >
            <div>
-              <span text-xs text="teal-400/90 dark:teal-600/90" font-semibold class="inline <sm:hidden">You</span>
+              <span text-xs text="cyan-400/90 dark:cyan-600/90" font-semibold class="inline <sm:hidden">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 />
@@ -57,14 +57,14 @@ onTokenLiteral(async () => {
        <div v-else-if="message.role === 'user'" flex="~">
          <div
            flex="~ col"
-            border="4 solid teal-200/50 dark:teal-500/50"
-            shadow="md teal-200/50 dark:none"
+            border="4 solid cyan-200/50 dark:cyan-500/50"
+            shadow="md cyan-200/50 dark:none"
            px="2"
            h="unset <sm:fit" min-w-20 rounded-lg px-2 py-1
-            bg="<md:teal-500/25"
+            bg="<md:cyan-500/25"
          >
            <div>
-              <span text-xs text="teal-400/90 dark:teal-600/90" font-semibold class="inline <sm:hidden">You</span>
+              <span text-xs text="cyan-400/90 dark:cyan-600/90" font-semibold class="inline <sm:hidden">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 />