Merge pull request #59 from zhangzhuang15/dev

Dev

Author: zhangzhuang15

.vitepress/config.ts

@@ -344,6 +344,10 @@ export default defineConfig({
               text: '接触cpp',
               link: '/blog/learning-cpp'
             },
+            {
+              text: 'learn zig',
+              link: '/blog/learning-zig'
+            },
             {
               text: 'rust编译出来的executable file比cpp大？',
               link: '/blog/rust-binary-is-big'
@@ -360,6 +364,10 @@ export default defineConfig({
               text: '协程-用C语言实现',
               link: '/blog/coroutine'
             },
+            {
+              text: 'Talk about pthread',
+              link: '/blog/pthread'
+            },
             {
               text: "使用vue遇到的一些坑",
               link: '/blog/vue-apply'

.vitepress/theme/components/CharacterModel.vue

@@ -0,0 +1,90 @@
+<script setup lang="ts">
+import { onMounted, ref } from 'vue'
+import * as THREE from 'three'
+import Stats from 'three/addons/libs/stats.module.js'
+import { OrbitControls } from 'three/addons/controls/OrbitControls.js'
+import { OutlineEffect } from 'three/addons/effects/OutlineEffect.js'
+import { MMDLoader } from 'three/examples/jsm/loaders/MMDLoader.js';
+import "ammo.js"
+
+const containerRef = ref<HTMLDivElement | null>(null)
+
+onMounted(() => {
+  function loadMMD(scene: THREE.Scene, camera: THREE.Camera) {
+    const loader = new MMDLoader()
+
+    loader.load(
+      "/models/hutao.pmx",
+      async (mesh) => {
+        mesh.position.y = -10
+        const materials = mesh.material as THREE.Material[]
+        materials.forEach(material => {
+          material.lightMap = material.map
+          material.lightMapIntensity = 5
+          material.shininess = 10
+        })
+
+        scene.add(mesh)
+
+        function animate() {
+          requestAnimationFrame(animate)
+          effect.render(scene, camera)
+        }
+
+        animate()
+      },
+      async (xhr) => {
+        console.log((xhr.loaded / xhr.total * 100) + '% loadedstore');
+      },
+      function (error) { 
+        console.log('An error happened');
+      }
+    )
+  }
+
+  const camera = new THREE.PerspectiveCamera(
+    45,
+    containerRef.value!.offsetWidth / containerRef.value!.offsetHeight,
+    1,
+    2000
+  )
+  camera.position.z = 30
+
+  const scene = new THREE.Scene();
+
+  const directionalLight = new THREE.DirectionalLight(0xffffff, 0.1)
+  directionalLight.position.set(1, 1, 1).normalize()
+
+  scene.add(directionalLight)
+
+  const renderer = new THREE.WebGLRenderer({ antialias: true })
+  renderer.setPixelRatio(window.devicePixelRatio)
+  renderer.setSize(containerRef.value!.offsetWidth, containerRef.value!.offsetHeight)
+
+  containerRef.value!.appendChild(renderer.domElement)
+
+  const effect = new OutlineEffect(renderer)
+
+  const stats = new Stats()
+  containerRef.value!.appendChild(stats.dom)
+
+  loadMMD(scene, camera)
+
+  const controls = new OrbitControls(camera, renderer.domElement)
+  controls.minDistance = 10
+  controls.maxDistance = 100  
+})
+</script>
+
+<template>
+  <div ref="containerRef" class="model-container"></div>
+</template>
+
+<style scoped>
+.model-container {
+  width: 400px;
+  height: 400px;
+  margin: 0 auto;
+  border: 1px solid #ccc;
+}
+</style> 

.vitepress/theme/components/Home.vue

@@ -4,6 +4,7 @@ import { useData, useRouter } from "vitepress";
 import { computed } from "vue";
 import MusicIconButton from "./MusicIconButton.vue";
 import MemoryBoard from "./MemoryBoard.vue";
+import CharacterModel from "./CharacterModel.vue";
 
 const { isDark } = useData();
 
@@ -48,6 +49,10 @@ const visitBlog = () => go("/blog/index-page");
         </h3>
     </section>
 
+    <!-- <section class="gap-space">
+        <CharacterModel />
+    </section> -->
+
     <section class="gap-space flex flex-evenly">
         <NButton 
           type="primary" 

docs/blog/ai-faq.md

@@ -0,0 +1,126 @@
+---
+title: "AI工具畅谈"
+page: true 
+aside: true
+---
+
+# AI工具畅谈 
+
+## 如何运用AI技术让视频更清晰
+4K修复动漫“大闹天宫” ？
+
+4K修复经典老电影？
+
+怎么做到的？
+
+Take a look 👇
+
+#### **推荐工具：**
+- **Topaz Video Enhance AI**  
+  - **简介**：专为视频增强设计的AI工具。支持将低分辨率视频提升到4K，并修复噪声和模糊。
+  - **特点**：
+    - 支持批量处理。
+    - 提供高质量的超分辨率重建。
+    - 可以去除噪声并改善画质。
+  - **适用性**：适合希望快速提升视频清晰度的用户。
+
+- **GFox Video Enhancer AI**  
+  - **简介**：基于深度学习的视频增强工具，支持将低分辨率视频转换为4K。
+  - **特点**：
+    - 支持多线程加速处理。
+    - 可以修复压缩伪影（如块状效应）和噪声。
+    - 提供多种预设模式，适合不同类型的视频。
+
+- **Eltwise Upscale Pro**  
+  - **简介**：专注于视频超分辨率的AI工具，支持将视频提升到4K或更高分辨率。
+  - **特点**：
+    - 支持逐帧处理和实时预览。
+    - 提供高质量的锐化和降噪功能。
+    - 可以修复低质量画面。
+
+---
+
+### **2. 使用深度学习模型**
+如果你有一定的技术背景，可以使用开源的深度学习模型来训练或部署视频增强模型。
+
+#### **推荐模型：**
+- **EDSR（Enhanced Deep Residual Networks）**  
+  - **简介**：一种基于深度残差网络的超分辨率重建模型，广泛应用于图像和视频增强。
+  - **特点**：
+    - 支持多种分辨率提升（如从720p到4K）。
+    - 提供高质量的锐化和细节恢复。
+
+- **RealESRGAN**  
+  - **简介**：基于GANS（生成对抗网络）的超分辨率模型，能够显著提高视频清晰度并修复噪声。
+  - **特点**：
+    - 支持实时视频处理。
+    - 可以去除压缩伪影和噪声。
+    - 提供高质量的图像重建。
+
+- **VSR（Video Super Resolution）**  
+  - **简介**：专门针对视频设计的超分辨率模型，支持逐帧处理并保持视频流畅度。
+  - **特点**：
+    - 支持多种视频格式。
+    - 可以修复低质量画面和模糊。
+
+---
+
+### **3. 使用在线工具**
+如果你不想下载软件或训练模型，可以尝试一些在线AI视频增强服务。
+
+#### **推荐工具：**
+- **PimEyes AI Video Enhancer**  
+  - **简介**：一个基于AI的在线视频增强工具，支持将低分辨率视频提升到4K。
+  - **特点**：
+    - 免费试用版本可用。
+    - 支持批量处理。
+
+- **DeOldify（部分功能）**  
+  - **简介**：主要用于视频老化和修复，但也可以用于清晰度提升。
+  - **特点**：
+    - 提供免费在线服务。
+    - 支持多种格式。
+
+---
+
+### **4. 使用视频编辑软件中的AI插件**
+一些专业的视频编辑软件集成了一些AI增强功能，可以用来提升视频清晰度。
+
+#### **推荐工具：**
+- **Adobe Premiere Pro（与AI工具结合使用）**  
+  - **简介**： Adobe的视频编辑软件支持与外部AI工具（如Topaz Video Enhance AI）集成。
+  - **特点**：
+    - 支持时间修复和细节增强。
+    - 提供高质量的调色和修复功能。
+
+- **DaVinci Resolve Studio**  
+  - **简介**：免费且强大的视频编辑软件，支持与外部AI工具结合使用。
+  - **特点**：
+    - 提供降噪和锐化功能。
+    - 支持超分辨率重建（需借助插件）。
+
+---
+
+### **5. 使用深度学习框架训练模型**
+如果你有技术背景，可以尝试使用开源的深度学习框架训练自己的视频增强模型。
+
+#### **推荐框架：**
+- **TensorFlow**  
+  - **简介**：一个广泛使用的开源机器学习框架，支持自定义模型开发。
+  - **特点**：
+    - 支持超分辨率重建任务。
+    - 提供丰富的文档和社区支持。
+
+- **PyTorch**  
+  - **简介**：另一个流行的深度学习框架，适合快速实验和模型部署。
+  - **特点**：
+    - 支持动态计算图和灵活的模型设计。
+    - 提供许多预训练模型可用于视频增强任务。
+
+---
+
+### **6. 注意事项**
+- **原始质量**：AI工具可以显著提升清晰度，但无法完全恢复丢失的细节。如果原始MP4文件质量非常低（如720p或更低
+），提升到4K的效果可能有限。
+- **处理时间**：视频增强是一个计算密集型任务，尤其是高分辨率视频，处理时间可能会较长。
+- **版权问题**：确保你处理的视频是你拥有权利的，避免侵犯他人版权。

docs/blog/css-new-feature.md

@@ -0,0 +1,50 @@
+---
+title: "css new feature"
+page: true
+aside: true
+---
+
+# CSS New Feature
+
+## align-content
+Set element at center of its container, replace old way:
+```css 
+.center {
+    display: flex;
+    justify-content: center;
+    align-items: center;
+}
+```
+
+## `@property`
+Define custom property and use it with`var`
+
+## `@starting-style`
+Avoid flash of unstyled content.
+
+Flash of unstyled content: when page is loading, its style isn't loaded, it looks an unstyled page, then style loaded, it comes to styled page suddenly.
+
+## round, mod, rem
+`calc` is the old css math method, now it brings `round`, `mod` and `rem`.
+
+
+## light-dark
+Replace the old way `@media (prefers-color-scheme: dark)`, it looks like:
+```css 
+.main {
+    background: light-dark(white, blue);
+}
+```
+Background is white in light mode, and blue in dark mode.
+
+## `:user-valid` & `:user-invalid`
+Old way, `:valid` and `:invalid`, is triggered after page loaded. But new way,
+`:user-valid` and `:user-invalid` is triggered after user interacts with the field, e.g. `<input>` `<button>`.
+
+## interpolate-size
+Animating sizes in CSS was limited, now we have `interpolate-size`, it looks like:
+```css 
+.main {
+    interpolate-size: height ease-in-out 3s;
+}
+```