chore: use AVIF instead of PNG/JPG as more as possible (#301)

.github/CONTRIBUTING.md

@@ -299,13 +299,18 @@ pnpm -F @proj-airi/minecraft-bot start
 
 ### Before commit
 
-> [!CAUTION]
->
-> Please make sure lint (static checkers) and TypeScript compilers are satisfied:
->
-> ```shell
-> pnpm lint && pnpm typecheck
-> ```
+Please make sure lint (static checkers) and TypeScript compilers are satisfied:
+
+```shell
+pnpm lint && pnpm typecheck
+```
+
+If you are committing images, consider using AVIF format instead of PNG, JPG etc. You can convert existing images to AVIF by running:
+
+```shell
+cd docs
+pnpm to-avif <PATH_TO_IMAGE_OR_DIRECTORY1> <PATH_2> <PATH_3> ...
+```
 
 > [!NOTE]
 >

README.md

@@ -1,15 +1,15 @@
 <picture>
   <source
     width="100%"
-    srcset="./docs/content/public/banner-dark-1280x640.png"
+    srcset="./docs/content/public/banner-dark-1280x640.avif"
     media="(prefers-color-scheme: dark)"
   />
   <source
     width="100%"
-    srcset="./docs/content/public/banner-light-1280x640.png"
+    srcset="./docs/content/public/banner-light-1280x640.avif"
     media="(prefers-color-scheme: light), (prefers-color-scheme: no-preference)"
   />
-  <img width="250" src="./docs/content/public/banner-light-1280x640.png" />
+  <img width="250" src="./docs/content/public/banner-light-1280x640.avif" />
 </picture>
 
 <h1 align="center">Project AIRI</h1>
@@ -94,7 +94,7 @@ This means that **アイリ VTuber is capable to run on modern browsers and devi
 
 ## Current progress
 
-<img src="./docs/content/public/readme-image-pc-preview.png">
+<img src="./docs/content/public/readme-image-pc-preview.avif">
 
 Capable of
 

docs/.vitepress/components/Home.vue

@@ -1,7 +1,7 @@
 <script setup lang="ts">
 import { useI18n } from 'vue-i18n'
 
-import homeCover from '../assets/home-cover-2025-07-15.png'
+import homeCover from '../assets/home-cover-2025-07-15.avif'
 
 const { t } = useI18n()
 

docs/.vitepress/custom/Docs.vue

@@ -54,7 +54,7 @@ const isCharactersPage = computed(() => path.value.includes('characters'))
         <img
           class="max-w-none w-[90rem] flex-none"
           decoding="async"
-          src="/new-bg.png"
+          src="/new-bg.avif"
           alt="backdrop"
         >
       </div>
@@ -76,7 +76,7 @@ const isCharactersPage = computed(() => path.value.includes('characters'))
           :key="path"
           class="mb-4 block xl:hidden"
         >
-          <CollapsibleTrigger class="border-muted bg-card data-[state=open]:bg-muted mb-2 border rounded-lg px-4 py-2 text-sm">
+          <CollapsibleTrigger class="bg-card border-muted data-[state=open]:bg-muted mb-2 border rounded-lg px-4 py-2 text-sm">
             On this page
           </CollapsibleTrigger>
 

docs/README.ja-JP.md

@@ -1,15 +1,15 @@
 <picture>
   <source
     width="100%"
-    srcset="./content/public/banner-dark-1280x640.png"
+    srcset="./content/public/banner-dark-1280x640.avif"
     media="(prefers-color-scheme: dark)"
   />
   <source
     width="100%"
-    srcset="./content/public/banner-light-1280x640.png"
+    srcset="./content/public/banner-light-1280x640.avif"
     media="(prefers-color-scheme: light), (prefers-color-scheme: no-preference)"
   />
-  <img width="250" src="./content/public/banner-light-1280x640.png" />
+  <img width="250" src="./content/public/banner-light-1280x640.avif" />
 </picture>
 
 <h1 align="center">Project AIRI</h1>
@@ -81,7 +81,7 @@
 
 ## 現在の進捗
 
-<img src="./content/public/readme-image-pc-preview.png">
+<img src="./content/public/readme-image-pc-preview.avif">
 
 可能なこと
 

docs/README.zh-CN.md

@@ -1,15 +1,15 @@
 <picture>
   <source
     width="100%"
-    srcset="./content/public/banner-dark-1280x640.png"
+    srcset="./content/public/banner-dark-1280x640.avif"
     media="(prefers-color-scheme: dark)"
   />
   <source
     width="100%"
-    srcset="./content/public/banner-light-1280x640.png"
+    srcset="./content/public/banner-light-1280x640.avif"
     media="(prefers-color-scheme: light), (prefers-color-scheme: no-preference)"
   />
-  <img width="250" src="./content/public/banner-light-1280x640.png" />
+  <img width="250" src="./content/public/banner-light-1280x640.avif" />
 </picture>
 
 <h1 align="center">Project AIRI</h1>
@@ -81,7 +81,7 @@
 
 ## 当前进度
 
-<img src="./content/public/readme-image-pc-preview.png">
+<img src="./content/public/readme-image-pc-preview.avif">
 
 - [x] 思维能力
   - [x] 玩 [Minecraft](https://www.minecraft.net)

docs/content/en/blog/DevLog-2025.03.05/index.md

@@ -30,42 +30,42 @@ Last week, our corporate designer/artist has submitted our commission for the
 basic/first version of Project AIRI logo. The feeling of the logo looks like
 this:
 
-![](./assets/airi-logos-v1.png)
+![](./assets/airi-logos-v1.avif)
 
 ## Daytime
 
 From the perspective of designing, these were so complex and user unfriendly
 when scaled down to Home Screen app sizes. Therefore I added this version:
 
-![](./assets/airi-logo-v2.png)
+![](./assets/airi-logo-v2.avif)
 
 And edited with other variants:
 
-![](./assets/airi-logos-v2.png)
+![](./assets/airi-logos-v2.avif)
 
 All of those were only suitable for dark theme, "we need a dark theme version
 logo as well!" I thought, so I did this:
 
-![](./assets/airi-logo-v2-dark.png)
+![](./assets/airi-logo-v2-dark.avif)
 
 [@kwaa](https://github.com/kwaa) said that we can try to swap the color schemes
 for both themes:
 
-![](./assets/airi-logos-v3.png)
+![](./assets/airi-logos-v3.avif)
 
 This indeed looks better.
 
 We updated the Typography too:
 
-![](./assets/airi-logos-v4.png)
+![](./assets/airi-logos-v4.avif)
 
 And optimized the background colors:
 
-![](./assets/airi-logos-v5.png)
+![](./assets/airi-logos-v5.avif)
 
 So this is what we get finally:
 
-![](./assets/airi-logos-final.png)
+![](./assets/airi-logos-final.avif)
 
 Later on today, I was working on publishing the
 [documentation site](https://airi.build) of Project AIRI online, for me,
@@ -74,8 +74,8 @@ and other developers, artists to use it as a reference and guidelines.
 I did it! And the newly designed logo has been put into the
 [documentation site](https://airi.build) along with the color palette:
 
-![](./assets/airi-build-light.png)
-![](./assets/airi-build-dark.png)
+![](./assets/airi-build-light.avif)
+![](./assets/airi-build-dark.avif)
 
 [Basic guide](../guides/),
 [contribution guidelines](../references/contributing/guide/),

docs/content/en/blog/DevLog-2025.03.06/index.md

@@ -76,7 +76,7 @@ by myself almost a year ago, but it still looks great and feel calm when
 looking at it. Please leave comments in the chat for any suggestions, really
 appreciated.
 
-![](./assets/live-stream-layout-update.jpeg)
+![](./assets/live-stream-layout-update.avif)
 
 During the DevStream of today, I was trying to integrate the stage transition
 animation component into AIRI's website main stage, it wasn't that smooth,

docs/content/en/blog/DevLog-2025.03.10/index.md

@@ -24,14 +24,14 @@ Including [@LemonNekoGH](https://github.com/LemonNekoGH),
 It was me that first finished the basic version of the settings' design, it feels
 like this:
 
-![](./assets/new-ui-v1.png)
+![](./assets/new-ui-v1.avif)
 
-![](./assets/new-ui-v1-dark.png)
+![](./assets/new-ui-v1-dark.avif)
 
 And later on [@sumimakito](https://github.com/sumimakito) went up online helped me
 implementing this dotted effect for the buttons:
 
-![](./assets/new-ui-v2.png)
+![](./assets/new-ui-v2.avif)
 
 > We can now feels more beats from the menu, isn't it?!
 
@@ -97,9 +97,9 @@ They even made it possible for the logo to follow the customizable colors 🤯.
 
 This was the final result we got, give it a try!
 
-![](./assets/new-ui-v3.png)
+![](./assets/new-ui-v3.avif)
 
-![](./assets/new-ui-v3-dark.png)
+![](./assets/new-ui-v3-dark.avif)
 
 And as always, feel free to come and contribute to us! We are absolutely here open and
 friendly to everyone, even for those not familiar with programming and coding!

docs/content/en/blog/DevLog-2025.03.20/index.md

@@ -6,14 +6,14 @@ date: 2025-03-20
 
 <script setup>
 import Gelbana from './assets/steins-gate-gelnana-from-elpsycongrooblog.webp'
-import NewUIV3 from '../DevLog-2025.03.10/assets/new-ui-v3.png'
-import NewUIV3Dark from '../DevLog-2025.03.10/assets/new-ui-v3-dark.png'
-import HistoireColorSlider from './assets/histoire-color-slider.png'
-import HistoireColorSliderDark from './assets/histoire-color-slider-dark.png'
-import HistoireLogo from './assets/histoire-logo.png'
-import HistoireLogoDark from './assets/histoire-logo-dark.png'
-import NewUIV4Speech from './assets/new-ui-v4-speech.png'
-import NewUIV4SpeechDark from './assets/new-ui-v4-speech-dark.png'
+import NewUIV3 from '../DevLog-2025.03.10/assets/new-ui-v3.avif'
+import NewUIV3Dark from '../DevLog-2025.03.10/assets/new-ui-v3-dark.avif'
+import HistoireColorSlider from './assets/histoire-color-slider.avif'
+import HistoireColorSliderDark from './assets/histoire-color-slider-dark.avif'
+import HistoireLogo from './assets/histoire-logo.avif'
+import HistoireLogoDark from './assets/histoire-logo-dark.avif'
+import NewUIV4Speech from './assets/new-ui-v4-speech.avif'
+import NewUIV4SpeechDark from './assets/new-ui-v4-speech-dark.avif'
 import SteinsGateMayori from './assets/steins-gate-mayori.webp'
 </script>
 

docs/content/en/blog/DevLog-2025.04.06/index.md

@@ -5,13 +5,13 @@ date: 2025-04-06
 ---
 
 <script setup>
-import MemoryDecay from './assets/memory-decay.png'
-import MemoryRetrieval from './assets/memory-retrieval.png'
-import CharacterCard from './assets/character-card.png'
-import CharacterCardDetail from './assets/character-card-detail.png'
-import MoreThemeColors from './assets/more-theme-colors.png'
-import AwesomeAIVTuber from './assets/awesome-ai-vtuber-logo-light.png'
-import ReLUStickerWow from './assets/relu-sticker-wow.png'
+import MemoryDecay from './assets/memory-decay.avif'
+import MemoryRetrieval from './assets/memory-retrieval.avif'
+import CharacterCard from './assets/character-card.avif'
+import CharacterCardDetail from './assets/character-card-detail.avif'
+import MoreThemeColors from './assets/more-theme-colors.avif'
+import AwesomeAIVTuber from './assets/awesome-ai-vtuber-logo-light.avif'
+import ReLUStickerWow from './assets/relu-sticker-wow.avif'
 </script>
 
 ## Before all the others 在其他东西之前

docs/content/en/blog/DevLog-2025.04.14/index.md

@@ -102,21 +102,21 @@ RAG 现在会流行一个新的流程，就是 reranking model，相当于是**
 
 [Project AIRI Memory Driver @duckdb/duckdb-wasm Playground](https://drizzle-orm-duckdb-wasm.netlify.app/#/memory-decay)
 
-![](./assets/memory-driver.jpg)
+![](./assets/memory-driver.avif)
 
 左边这个高亮的 half life 就是记忆的半衰期。
 
 默认情况下时间流逝速度是 1s 1 天，所以 7s 后，记忆的分数就会减半。
 
 什么是记忆分数？记忆分数基本上是由这个控制的：
-![](./assets/memory-controler.jpg)
+![](./assets/memory-controler.avif)
 
 得出的分数就是 current score
 
 什么是 original 呢，就是初始化的时候的分数。
 
 例子：原始分数为 523，它的当前分数实际上是在慢慢变少的：
-![](./assets/memory-decay.jpg)
+![](./assets/memory-decay.avif)
 
 在继续介绍之前，解释一下，这个遗忘曲线的 SQL 是无状态的。
 
@@ -160,17 +160,17 @@ RAG 现在会流行一个新的流程，就是 reranking model，相当于是**
 
 我们可以再来回顾一下 DevLog 中提到的排序表达式，应该会能帮助理解。
 
-![](./assets/review-1.jpg)
+![](./assets/review-1.avif)
 
 余弦距离就是「相关度」，是最基本的粗排：
-![](./assets/review-2.jpg)
+![](./assets/review-2.avif)
 
 现在需要时间参与进去，那我们多加一个字段拿来存储时间距离就好了，然后再弄一个单独的字段存合并分数 `(1.2 * similarity) + (0.2 * time_relevance)` ，其中 语义相关度 占 1.2 倍权重（倍率因子，不要求小于 1），时间距离相关度占 0.2 倍权重。
 
 这样我们就很巧妙地把无状态的多字段相关度排序 SQL 实现出来了，还让它可以调节参数（1.2 和 0.2）。
 
 在记忆详情卡上，可以点击 simulate retrieval，这可以主动触发一次记忆召回。
-![](./assets/memory-retrieval.jpg)
+![](./assets/memory-retrieval.avif)
 
 现在的 demo 里面是直接给原本的表里的 retrieval count（召回次数）字段用 UPDATE 语句写了 +1 来实现的。
 
@@ -185,7 +185,7 @@ RAG 现在会流行一个新的流程，就是 reranking model，相当于是**
 https://drizzle-orm-duckdb-wasm.netlify.app/#/memory-simulator
 
 这个新的 simulator 里面就有情绪相关的模拟：
-![](./assets/memory-emotional-simulator.jpg)
+![](./assets/memory-emotional-simulator.avif)
 
 ### 情绪和记忆相关吗？
 
@@ -196,7 +196,7 @@ https://drizzle-orm-duckdb-wasm.netlify.app/#/memory-simulator
 如果对「某段过去的记忆开心，并且希望再次体验它」，但是由于「暂时没办法实现这个记忆里面的场景」，所以觉得「得不到就难过」。
 
 可以在记忆数据库中存储「欢欣」和「厌恶」的分数：
-![](./assets/memory-emotional-score.jpg)
+![](./assets/memory-emotional-score.avif)
 
 ### PTSD？
 
@@ -206,7 +206,7 @@ PTSD 通常会涉及到两个词「trigger」和「闪回」，很明显 PTSD
 
 可以参考一下 https://yutsuki.moe/2019/09/a0d0fa1b/ 里面的情绪模型。
 
-![](./assets/memory-emotional-model.jpg)
+![](./assets/memory-emotional-model.avif)
 
 ## 还有很多事情要做……