diff --git a/docs/astro.config.ts b/docs/astro.config.ts
index 7840e4823..29fdb8671 100644
--- a/docs/astro.config.ts
+++ b/docs/astro.config.ts
@@ -36,6 +36,7 @@ export default defineConfig({
],
customCss: [
'./src/styles/custom.css',
+ '@fontsource/quicksand/300.css',
],
}),
],
diff --git a/docs/package.json b/docs/package.json
index b35dc34b6..cf9429fbe 100644
--- a/docs/package.json
+++ b/docs/package.json
@@ -12,6 +12,7 @@
},
"dependencies": {
"@astrojs/starlight": "^0.32.3",
+ "@fontsource/quicksand": "^5.2.6",
"astro": "^5.5.3",
"sharp": "^0.33.5",
"starlight-theme-catppuccin": "^2.0.0"
diff --git a/docs/public/static/blog/DevLog-2025.03.10/customizable-theme-colors.mp4 b/docs/public/static/blog/DevLog-2025.03.10/customizable-theme-colors.mp4
new file mode 100644
index 000000000..b55926a1f
Binary files /dev/null and b/docs/public/static/blog/DevLog-2025.03.10/customizable-theme-colors.mp4 differ
diff --git a/docs/public/static/blog/DevLog-2025.03.20/airi-demo.mp4 b/docs/public/static/blog/DevLog-2025.03.20/airi-demo.mp4
new file mode 100644
index 000000000..2ee3152e7
Binary files /dev/null and b/docs/public/static/blog/DevLog-2025.03.20/airi-demo.mp4 differ
diff --git a/docs/public/static/blog/DevLog-2025.03.20/ashley-pitch-test.mp3 b/docs/public/static/blog/DevLog-2025.03.20/ashley-pitch-test.mp3
new file mode 100644
index 000000000..2ce65927e
Binary files /dev/null and b/docs/public/static/blog/DevLog-2025.03.20/ashley-pitch-test.mp3 differ
diff --git a/docs/public/static/blog/DevLog-2025.03.20/histoire-first-look.mp4 b/docs/public/static/blog/DevLog-2025.03.20/histoire-first-look.mp4
new file mode 100644
index 000000000..eebeef63b
Binary files /dev/null and b/docs/public/static/blog/DevLog-2025.03.20/histoire-first-look.mp4 differ
diff --git a/docs/src/assets/images/blog/DevLog-2025.03.20/elevenlabs-api-key.jpeg b/docs/src/assets/images/blog/DevLog-2025.03.20/elevenlabs-api-key.jpeg
new file mode 100644
index 000000000..1f7aa5698
Binary files /dev/null and b/docs/src/assets/images/blog/DevLog-2025.03.20/elevenlabs-api-key.jpeg differ
diff --git a/docs/src/assets/images/blog/DevLog-2025.03.20/elevenlabs.jpeg b/docs/src/assets/images/blog/DevLog-2025.03.20/elevenlabs.jpeg
new file mode 100644
index 000000000..320c85da6
Binary files /dev/null and b/docs/src/assets/images/blog/DevLog-2025.03.20/elevenlabs.jpeg differ
diff --git a/docs/src/assets/images/blog/DevLog-2025.03.20/histoire-color-slider-dark.png b/docs/src/assets/images/blog/DevLog-2025.03.20/histoire-color-slider-dark.png
new file mode 100644
index 000000000..beeb607af
Binary files /dev/null and b/docs/src/assets/images/blog/DevLog-2025.03.20/histoire-color-slider-dark.png differ
diff --git a/docs/src/assets/images/blog/DevLog-2025.03.20/histoire-color-slider.png b/docs/src/assets/images/blog/DevLog-2025.03.20/histoire-color-slider.png
new file mode 100644
index 000000000..1acd807a2
Binary files /dev/null and b/docs/src/assets/images/blog/DevLog-2025.03.20/histoire-color-slider.png differ
diff --git a/docs/src/assets/images/blog/DevLog-2025.03.20/histoire-logo-dark.png b/docs/src/assets/images/blog/DevLog-2025.03.20/histoire-logo-dark.png
new file mode 100644
index 000000000..067d016b2
Binary files /dev/null and b/docs/src/assets/images/blog/DevLog-2025.03.20/histoire-logo-dark.png differ
diff --git a/docs/src/assets/images/blog/DevLog-2025.03.20/histoire-logo.png b/docs/src/assets/images/blog/DevLog-2025.03.20/histoire-logo.png
new file mode 100644
index 000000000..d3ea0b8cc
Binary files /dev/null and b/docs/src/assets/images/blog/DevLog-2025.03.20/histoire-logo.png differ
diff --git a/docs/src/assets/images/blog/DevLog-2025.03.20/modules-i18n.jpeg b/docs/src/assets/images/blog/DevLog-2025.03.20/modules-i18n.jpeg
new file mode 100644
index 000000000..7f1a4fc99
Binary files /dev/null and b/docs/src/assets/images/blog/DevLog-2025.03.20/modules-i18n.jpeg differ
diff --git a/docs/src/assets/images/blog/DevLog-2025.03.20/new-ui-v4-speech-dark.png b/docs/src/assets/images/blog/DevLog-2025.03.20/new-ui-v4-speech-dark.png
new file mode 100644
index 000000000..cc440198d
Binary files /dev/null and b/docs/src/assets/images/blog/DevLog-2025.03.20/new-ui-v4-speech-dark.png differ
diff --git a/docs/src/assets/images/blog/DevLog-2025.03.20/new-ui-v4-speech.png b/docs/src/assets/images/blog/DevLog-2025.03.20/new-ui-v4-speech.png
new file mode 100644
index 000000000..c4a4f2c4e
Binary files /dev/null and b/docs/src/assets/images/blog/DevLog-2025.03.20/new-ui-v4-speech.png differ
diff --git a/docs/src/assets/images/blog/DevLog-2025.03.20/settings-i18n.jpeg b/docs/src/assets/images/blog/DevLog-2025.03.20/settings-i18n.jpeg
new file mode 100644
index 000000000..02b9cdd3c
Binary files /dev/null and b/docs/src/assets/images/blog/DevLog-2025.03.20/settings-i18n.jpeg differ
diff --git a/docs/src/assets/images/blog/DevLog-2025.03.20/steins-gate-gelnana-from-elpsycongrooblog.webp b/docs/src/assets/images/blog/DevLog-2025.03.20/steins-gate-gelnana-from-elpsycongrooblog.webp
new file mode 100644
index 000000000..1d38c1c65
Binary files /dev/null and b/docs/src/assets/images/blog/DevLog-2025.03.20/steins-gate-gelnana-from-elpsycongrooblog.webp differ
diff --git a/docs/src/assets/images/blog/DevLog-2025.03.20/steins-gate-mayori.webp b/docs/src/assets/images/blog/DevLog-2025.03.20/steins-gate-mayori.webp
new file mode 100644
index 000000000..5247ac8e9
Binary files /dev/null and b/docs/src/assets/images/blog/DevLog-2025.03.20/steins-gate-mayori.webp differ
diff --git a/docs/src/content/docs/blog/DevLog-2025.03.10.md b/docs/src/content/docs/blog/DevLog-2025.03.10.md
index 8906af9aa..e91342faa 100644
--- a/docs/src/content/docs/blog/DevLog-2025.03.10.md
+++ b/docs/src/content/docs/blog/DevLog-2025.03.10.md
@@ -79,7 +79,7 @@ At the end of March 8th, [@LemonNekoGH](https://github.com/LemonNekoGH) and
colors for the entire stage! (I never thought this could be done within hours...)
- https://github.com/moeru-ai/airi/pull/53
diff --git a/docs/src/content/docs/blog/DevLog-2025.03.20.mdx b/docs/src/content/docs/blog/DevLog-2025.03.20.mdx
new file mode 100644
index 000000000..89bf83ae0
--- /dev/null
+++ b/docs/src/content/docs/blog/DevLog-2025.03.20.mdx
@@ -0,0 +1,191 @@
+---
+title: DevLog @ 2025.03.20
+---
+
+import { Image } from 'astro:assets';
+import Gelbana from '../../../assets/images/blog/DevLog-2025.03.20/steins-gate-gelnana-from-elpsycongrooblog.webp'
+import NewUIV3 from '../../../assets/images/blog/DevLog-2025.03.10/new-ui-v3.png'
+import NewUIV3Dark from '../../../assets/images/blog/DevLog-2025.03.10/new-ui-v3-dark.png'
+import HistoireColorSlider from '../../../assets/images/blog/DevLog-2025.03.20/histoire-color-slider.png'
+import HistoireColorSliderDark from '../../../assets/images/blog/DevLog-2025.03.20/histoire-color-slider-dark.png'
+import HistoireLogo from '../../../assets/images/blog/DevLog-2025.03.20/histoire-logo.png'
+import HistoireLogoDark from '../../../assets/images/blog/DevLog-2025.03.20/histoire-logo-dark.png'
+import NewUIV4Speech from '../../../assets/images/blog/DevLog-2025.03.20/new-ui-v4-speech.png'
+import NewUIV4SpeechDark from '../../../assets/images/blog/DevLog-2025.03.20/new-ui-v4-speech-dark.png'
+import SteinsGateMayori from '../../../assets/images/blog/DevLog-2025.03.20/steins-gate-mayori.webp'
+
+Hello again! It has been 10 days since the [last post of DevLog](../references/contributing/guide/).
+
+We made a lot of improvements to our user interface, we made it possible
+to integrate more LLM providers, and speech providers, first time to post
+Airi on Discord, bilibili, and many other social media platforms.
+
+There is so much more that we can't wait to tell you about.
+
+## Dejavu
+
+Let's rewind the time a little bit!
+
+
+
+> Ahh, don't worry, our beloved [Airi](https://github.com/moeru-ai/airi) will
+> not turn into GEL-NANA like this. BUT, if you haven't watched the
+> [_Steins;Gate_](https://myanimelist.net/anime/9253/Steins_Gate) anime series,
+> try it~!
+
+We were working on the initial settings UI design, and animation has been
+improved, customizable theme coloring has been achieved for 10 days ago.
+It was indeed a busy week for any of us (especially we are all part-time on
+this project, haha, join us if you will. π₯Ί (PLEASED FACE)).
+
+And this was the final result we got at that time:
+
+
+
+
+
+ 0
+ .
+ 5
+ 7
+ 1
+ 0
+ 2
+ 4
+
+
+~~Welcome to the Ξ² sekaisen.~~
+
+Since we have the colored card for model radio group, and navigation items,
+with the customizable themes, it's obvious that we will definitely suffer
+in debugging the UI components within the business workflows, clearly it
+will slow us down.
+
+This is where we made the decision to introduce the amazing tool called
+[`Histoire`](https://histoire.dev), basically a
+[Storybook](https://storybook.js.org/) but much more native to
+[Vite](https://vitejs.dev) and [Vue.js](https://vuejs.org) combination.
+
+Here's the first look that [@sumimakito](https://github.com/sumimakito)
+recorded once done:
+
+
+
+The entire OKLCH color palette can spread on to the canvas all at once
+for us to take as reference. But it wasn't perfect to tryout the colors
+and have the same scheme of feelings of Project Airi's theme, was it?
+
+So I first re-implemented the color slider, which feels much more suitable:
+
+
+
+
+This does make the slider a bit more professional.
+
+The logo and the default greenish color can be replaced to align the theme
+of Airi, that's why I designed another dedicated logo for the UI page:
+
+
+
+
+Oh, right, the entire UI component has been deployed to Netlify as usual
+under the path `/ui/`, feel free to take a look at it if you ever wondered
+how does the UI elements look like:
+[https://airi.moeru.ai/ui/](https://airi.moeru.ai/ui/)
+
+There are tons of other features that we cannot cover in this DevLog entirely:
+
+- [x] Supported for all of the LLM providers.
+- [x] Improved the animation and transition of menu navigation UI.
+- [x] Improved the spacing of the fields, new form!
+- [x] Component for (almost all the todo components on the [Roadmap](https://github.com/moeru-ai/airi/issues/42))
+ - [x] Form
+ - [x] Radio
+ - [x] Radio Group
+ - [x] Model Catalog
+ - [x] Range
+ - [x] Input
+ - [x] Key Value Input
+ - [x] Data Gui
+ - [x] Range
+ - [x] Menu
+ - [x] Menu Item
+ - [x] Menu Status Item
+ - [x] Graphics
+ - [x] 3D
+ - [x] Physics
+ - [x] Cursor Momentum
+ - [x] And more...
+
+We did some other experiment over the momentum and 3D too.
+
+Check this out:
+
+
+
+
+We finally supported speech models configurations π! (Previously was
+only capable to configure for ElevenLabs) Since the
+[new `v0.1.2` version](https://github.com/moeru-ai/unspeech/releases/tag/v0.1.2)
+of another amazing project we were working on called `unspeech`, it's possible
+to request the Microsoft Speech service (a.k.a. Azure AI Speech service, or
+Cognitive Speech service) through
+[`@xsai/generate-speech`](https://xsai.js.org/docs/packages/generate/speech), which
+means we finally got a OpenAI API compatible TTS for Microsoft.
+
+But why was this so important to support?
+
+It's because that for the very first version of Neuro-sama, the text-to-speech
+service was powered by Microsoft, with the voice named `Ashley`, along with a
+`+20%` of pitch, you can get the same voice as Neuro-sama's first version, try it
+yourself:
+
+
+
+Isn't it the same, this is insane! That's means, we can finally approach to
+what Neuro-sama can do with the new **Speech** ability!
+
+
+
+