feat: update

.gitignore

@@ -26,6 +26,7 @@ dist-ssr
 miao-directory.exe
 miao-directory-amd64-linux
 miao-directory-amd64-win.exe
+miao-directory-amd64-win.upx.exe
 test
 stats.html
 

README.md

@@ -10,13 +10,13 @@
 | 创建音乐播放器组件（仿QQ音乐移动端吧） | ✅ |
 | plugin增加些属性，icon, disable, group之类的 | ✅ |
 | 实现miaoDirectory的排序功能 | ✅ |
+| 重构主界面，拆分主界面组件的实现 | ✅ |
 | 重构miaoFetchApi.getFile， 增加进度 | ❌ |
 | 完善miaoDirectory的搜索功能 | ❌ |
 | 完善图片浏览插件 | ❌ |
 | VirtualDirectory更新时更新文件信息 | ❌ |
 | miaoDirectory的复制文件/文件夹功能 | ❌ |
 | 重构miaoDropHandler的实现 | ❌ |
-| 重构主界面，拆分主界面组件的实现 | ❌ |
 
 
 | 长期计划 |

src/components/miaoDraggableDiv.vue

@@ -13,7 +13,7 @@ import { onMounted, ref } from 'vue'
 const props = defineProps<{
    isDraggable?: boolean,
    bindVirtualFiles?: VirtualFile[],
-   bindVirtualDirectories?: VirtualDirectory[]
+   bindVirtualDirectories?: VirtualDirectory[],
 }>()
 const emit = defineEmits<{
    onDragStart: [e: DragEvent]

src/plugins/browser_llm/browser_llm.vue

@@ -72,22 +72,18 @@ const chatHistory = ref<{ role: string, content: string }[]>([]);
 const chatHistoryRef = ref<HTMLElement | null>(null);
 const llmInstance = ref<any>(null);
 
-// 实时生成内容管理
 const generatingMessage = ref(false);
 const currentGeneratedText = ref('');
 
-// 更新加载进度
 const updateLoadingProgress = (progress: number, state: string) => {
   loadingProgress.value = progress;
   loadingState.value = state;
 };
 
-// 渲染Markdown为HTML
 const renderMarkdown = (text: string) => {
   return md.render(text);
 };
 
-// 初始化模型
 const initializeModel = async () => {
   if (!currentFiles.value || currentFiles.value.length === 0) {
     loadingState.value = '错误：未找到模型文件';
@@ -98,10 +94,8 @@ const initializeModel = async () => {
     const modelFile = currentFiles.value[0];
     const modelName = modelFile.name.split('.model.bin')[0] && modelFile.name.split('.model.task')[0];
 
-    // 第一阶段：开始加载
     updateLoadingProgress(5, '正在加载MediaPipe LLM引擎...');
 
-    // 模拟下载进度
     const simulateDownloadProgress = () => {
       const totalTime = 2000; // 2秒
       const interval = 100; // 每100毫秒更新一次
@@ -122,16 +116,12 @@ const initializeModel = async () => {
 
     simulateDownloadProgress();
 
-    // 初始化FilesetResolver
     updateLoadingProgress(20, '正在初始化MediaPipe文件解析器...');
     const genai = await FilesetResolver.forGenAiTasks(
       currentDirectories.value[0]?.url ?? "https://cdn.jsdelivr.net/npm/@mediapipe/tasks-genai@latest/wasm"
     );
-
-    // 第二阶段：文件解析器加载完成
     updateLoadingProgress(40, '正在加载模型文件...');
 
-    // 模拟模型文件加载进度
     const simulateModelLoadingProgress = () => {
       const totalTime = 3000; // 3秒
       const interval = 100; // 每100毫秒更新一次
@@ -152,25 +142,20 @@ const initializeModel = async () => {
 
     simulateModelLoadingProgress();
 
-    // 创建LLM推理实例
     llmInstance.value = await LlmInference.createFromOptions(genai, {
       baseOptions: {
         modelAssetPath: modelFile.url
       },
-      maxTokens: 1024,
+      maxTokens: 2048,
       temperature: 0.7
     });
 
-    // 第三阶段：模型加载完成
     updateLoadingProgress(90, '初始化对话...');
 
-    // 短暂延迟以显示最终阶段
     await new Promise(resolve => setTimeout(resolve, 500));
 
-    // 加载完成
     updateLoadingProgress(100, '加载完成！');
 
-    // 短暂延迟以显示100%完成状态
     await new Promise(resolve => setTimeout(resolve, 300));
 
     loading.value = false;

src/plugins/miaoDirectory/components/miaoDirectoryItemsContainer.vue

@@ -10,6 +10,7 @@
             v-for="dir in showData_directory"
             :key="dir.id"
             min-height="50px"
+            :disable-lazy="props.index < 20"
             margin="10px">
             <miaoDirectoryItem
                :item="dir"

src/plugins/onnx_demo_emotion/onnx_demo.vue

@@ -149,23 +149,18 @@ const processImage = async () => {
    modelOutput.value = null
 
    try {
-      // 显示处理信息
       const alertUpdate = miaoMessageRef.value!.alertTip('正在加载ONNX模型...', { type: 'info', timeout: 2000 })
 
-      // 1. 加载模型
       const modelResponse = await fetch(onnxModel.value.url)
       const modelBuffer = await modelResponse.arrayBuffer()
       alertUpdate('正在创建推理会话...')
 
-      // 创建ONNX会话
       const session = await ort.InferenceSession.create(modelBuffer)
 
-      // 2. 加载和预处理图像
       alertUpdate('正在加载图像...')
       const imgResponse = await fetch(inputImage.value.url)
       const imgBlob = await imgResponse.blob()
 
-      // 将图像转换为适合模型的格式
       alertUpdate('正在预处理图像...')
       const size = 64
       const img = await createImageBitmap(imgBlob)
@@ -186,29 +181,20 @@ const processImage = async () => {
       const inputTensor = new ort.Tensor('float32', new Float32Array(greyScale), [1, 1, size, size])
 
       alertUpdate('执行模型推理...')
-
-      // 3. 运行模型推理
       const outputMap = await session.run({
-         // 这里的键名应该根据实际模型的输入名称进行调整
          Input2505: inputTensor
       })
 
-      // 4. 处理模型输出
       alertUpdate('处理模型输出结果...')
 
-      // 获取输出数据（假设输出张量名为"output"，可能需要根据实际模型调整）
       const outputTensor = Object.values(outputMap)[0]
-      // 将输出格式化为可读内容
       const formattedOutput = JSON.stringify(
          {
-            // shape: outputTensor.dims,
             data: [...[...(outputTensor as { data: Float32Array }).data].entries()].sort((a, b) => b[1] - a[1]).map(([index, value]) => ({ index, value }))
          },
          null,
          2
       )
-
-      // 设置结果
       modelOutput.value = formattedOutput
 
       alertUpdate('处理完成!', { type: 'success' })
@@ -223,25 +209,20 @@ const processImage = async () => {
 
 onMounted(async () => {
    console.log('currentDirectories.value[0].url', currentDirectories.value[0]?.url)
-   // 如果传入了onnxruntime-web，则使用传入的，否则从jsdelivr加载
    if (currentDirectories.value && currentDirectories.value.length > 0 && currentDirectories.value[0].url) {
       const ortModule = await import(/* @vite-ignore */ `${currentDirectories.value[0].url}dist/ort.all.min.mjs`);
       ort = ortModule;
       console.log('ort', ort)
    } else {
-      // 从jsdelivr加载
       //  @ts-ignore
       const ortModule = await import(/* @vite-ignore */ 'https://cdn.jsdelivr.net/npm/onnxruntime-web/dist/ort.all.min.js');
       ort = ortModule;
    }
    
-   // 初始化模型
    await initModel();
 })
 
-// 初始化模型函数
 const initModel = async () => {
-   // 初始化时检查是否有适合的文件
    if (inputImage.value && onnxModel.value) {
       miaoMessageRef.value?.alertTip('已检测到图像和ONNX模型，可以进行处理', { type: 'info', timeout: 2000 })
    }