@@ -22,6 +22,10 @@ export default defineConfig({
|
||||
label: 'References',
|
||||
autogenerate: { directory: 'references' },
|
||||
},
|
||||
{
|
||||
label: 'Blog',
|
||||
autogenerate: { directory: 'blog' },
|
||||
},
|
||||
],
|
||||
head: [
|
||||
{ tag: 'link', attrs: { rel: 'icon', type: 'image/svg+xml', href: '/favicon.svg', sizes: 'any' } },
|
||||
|
||||
|
After Width: | Height: | Size: 201 KiB |
|
After Width: | Height: | Size: 201 KiB |
|
After Width: | Height: | Size: 43 KiB |
|
After Width: | Height: | Size: 45 KiB |
|
After Width: | Height: | Size: 86 KiB |
|
After Width: | Height: | Size: 97 KiB |
|
After Width: | Height: | Size: 133 KiB |
|
After Width: | Height: | Size: 132 KiB |
|
After Width: | Height: | Size: 74 KiB |
|
After Width: | Height: | Size: 176 KiB |
|
After Width: | Height: | Size: 165 KiB |
|
After Width: | Height: | Size: 142 KiB |
@@ -0,0 +1,108 @@
|
||||
---
|
||||
title: DevLog @ 2025.03.05
|
||||
---
|
||||
|
||||
## Dejavu
|
||||
|
||||
Yesterday I added one extra package called
|
||||
[`gpuu` (GPU utilities)](https://github.com/moeru-ai/airi/tree/main/packages/gpuu)
|
||||
to help us work with WebGPU, and perhaps we can use it to interact with real
|
||||
GPU devices too. There is not that much capabilities it can do right now,
|
||||
we will add more capabilities for it in the future.
|
||||
|
||||
It feels like this:
|
||||
|
||||
```ts
|
||||
import { check } from '@proj-airi/gpuu/webgpu'
|
||||
import { onMounted } from 'vue'
|
||||
|
||||
onMounted(() => {
|
||||
const result = await check()
|
||||
console.log(result)
|
||||
|
||||
// do something with the result
|
||||
})
|
||||
```
|
||||
|
||||
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:
|
||||
|
||||

|
||||
|
||||
## 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:
|
||||
|
||||

|
||||
|
||||
And edited with other variants:
|
||||
|
||||

|
||||
|
||||
All of those were only suitable for dark theme, "we need a dark theme version
|
||||
logo as well!" I thought, so I did this:
|
||||
|
||||

|
||||
|
||||
[@kwaa](https://github.com/kwaa) said that we can try to swap the color schemes
|
||||
for both themes:
|
||||
|
||||

|
||||
|
||||
This indeed looks better.
|
||||
|
||||
We updated the Typography too:
|
||||
|
||||

|
||||
|
||||
And optimized the background colors:
|
||||
|
||||

|
||||
|
||||
So this is what we get finally:
|
||||
|
||||

|
||||
|
||||
Later on today, I was working on publishing the
|
||||
[documentation site](https://airi.build) of Project Airi online, for me,
|
||||
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:
|
||||
|
||||

|
||||

|
||||
|
||||
[Basic guide](https://airi.build/guides/),
|
||||
[contribution guidelines](https://airi.build/references/contributing/guide/),
|
||||
and [designing guidelines](https://airi.build/references/design-guidelines/)
|
||||
were all included from this moment.
|
||||
|
||||
I spent a whole noon to get a feel of the Text PV animations on YouTube,
|
||||
I really like them, I wish I can implement similar transitioning effect on
|
||||
browser too!
|
||||
|
||||
https://www.youtube.com/watch?v=_AIgv0EsOE4
|
||||
|
||||
Luckily, I do know a developer & artist that really good at this:
|
||||
[yui540](https://github.com/yui540) (you can check his/her personal website
|
||||
here: [yui540.com](https://yui540.com)), and he/she just posted a brand new
|
||||
repository for demonstrating the fantastic transition effects he/she used.
|
||||
|
||||
I added the related resources and website links into the
|
||||
[https://airi.build](https://airi.build) site, you can check them out.
|
||||
|
||||
## DevStream
|
||||
|
||||
I ported many of the animation transitions from [yui540](https://github.com/yui540)'s
|
||||
[repository](https://github.com/yui540/css-animations) to
|
||||
[https://proj-airi-packages-ui-transitions.netlify.app/#/](https://proj-airi-packages-ui-transitions.netlify.app/#/).
|
||||
|
||||
It worked really well:
|
||||
|
||||

|
||||
|
||||
That's all for today's DevLog, thank you to everyone that joined the DevStream
|
||||
and stayed with me until the end. I'll see you all tomorrow.
|
||||
@@ -0,0 +1,92 @@
|
||||
---
|
||||
title: DevLog @ 2025.03.06
|
||||
---
|
||||
|
||||
## Dejavu
|
||||
|
||||
Previous day, I was on DevStream to show the progress of making the
|
||||
fundamental animations and transitions for Airi.
|
||||
|
||||
The goal is to port and adapt the amazing work done by [@yui540](https://yui540.com/)
|
||||
into a reusable Vue component for any of the Vue project to be able to use it.
|
||||
|
||||
> Details of yui540 and referenced libraries and work already were included
|
||||
> at the newly deployed documentation site at
|
||||
> [https://airi.build/references/design-guidelines/resources/](https://airi.build/references/design-guidelines/resources/).
|
||||
|
||||
The result is quite good, already deployed to
|
||||
[https://proj-airi-packages-ui-transitions.netlify.app/#/](https://proj-airi-packages-ui-transitions.netlify.app/#/).
|
||||
|
||||

|
||||
|
||||
> And also, from now on, all of the playgrounds of each packages will use
|
||||
> "proj-airi" + "${subDirectory}" + "${packageName}" pattern for the Netlify
|
||||
> deployment.
|
||||
|
||||
While the goal of previous day was trying to split the implementation of
|
||||
CSS into Vue component, the actual part for reusable wasn't done yet,
|
||||
I'll still need to design a workflow and mechanism that extensible and
|
||||
flexible for other pages to use.
|
||||
|
||||
## Day time
|
||||
|
||||
I experimented with the definePage macro hook from unplugging-vue-router,
|
||||
found it quite worked well for my scenario and decided the path to follow
|
||||
on.
|
||||
|
||||
And I ported 3 new animation transitions from
|
||||
[https://cowardly-witch.netlify.app/](https://cowardly-witch.netlify.app/),
|
||||
they were already available on
|
||||
[https://proj-airi-packages-ui-transitions.netlify.app/#/](https://proj-airi-packages-ui-transitions.netlify.app/#/) .
|
||||
|
||||
I deployed the official documentation site onto https://airi.build yesterday,
|
||||
[@kwaa](https://github.com/kwaa) commented that he would suggest me try
|
||||
the `https://airi.more.ai/docs` approach instead, but I couldn't figure out
|
||||
a way to make a 200 redirect proxy for /docs.
|
||||
|
||||
I experimented it a little with like ten commits fighting against CI/CD
|
||||
pipeline (yes fighting against again), but still not made it work.
|
||||
|
||||
Later on this day, I researched some of the technologies and
|
||||
[open source repositories](https://github.com/deepseek-ai/open-infra-index)
|
||||
that DeepSeek team has released for a week ago, as well as the so called
|
||||
ByteDance released [LLM gateway AIBrix](https://github.com/vllm-project/aibrix).
|
||||
And was researching whether the newly released and announced Phi-4-mini was
|
||||
capable of porting for Airi to use, good news is,
|
||||
[Phi-4-mini](https://techcommunity.microsoft.com/blog/educatordeveloperblog/welcome-to-the-new-phi-4-models---microsoft-phi-4-mini--phi-4-multimodal/4386037)
|
||||
included the function calling abilities, that means we can finally build our
|
||||
agents with pre-trained support.
|
||||
|
||||
## DevStream
|
||||
|
||||
I contacted another artist afternoon, saying that I am willing to pay
|
||||
for a customized pixel art commission for me to use it as an avatar
|
||||
for my next coming update accounts.
|
||||
|
||||
~~Yes I asked the artist to put some Easter eggs inside haha, good luck you folks finding it.~~
|
||||
|
||||
The layout and setup of the live stream has been updated 😻 It was designed
|
||||
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.
|
||||
|
||||

|
||||
|
||||
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,
|
||||
I found several bugs in my previous design for the animation component, good
|
||||
news is that I already fixed them, and the new animation transition is available
|
||||
already at our official deployment at [https://airi.moeru.ai](https://airi.moeru.ai).
|
||||
|
||||
I finally made the decision that coming from some random thoughts about the module
|
||||
configuration UI and settings page. They were all implemented, and went on live,
|
||||
should provide a better feeling when tweaking the settings now, I hope you
|
||||
like it.
|
||||
|
||||
After I get off the stream and finally get on hands playing the result on my
|
||||
phone, while it does work on desktop and tablet devices, I found that I
|
||||
accidentally break the animation on mobile devices, will get this fixed tomorrow
|
||||
daytime 😹.
|
||||
|
||||
That's all for today's DevLog, thank you to everyone that joined the DevStream
|
||||
and stayed with me until the end. I'll see you all tomorrow.
|
||||
@@ -27,3 +27,8 @@
|
||||
--sl-color-gray-7: #f7f6f6;
|
||||
--sl-color-black: #ffffff;
|
||||
}
|
||||
|
||||
.sl-markdown-content img {
|
||||
width: 100%;
|
||||
height: auto;
|
||||
}
|
||||
|
||||