gui-knowledge-bench

Author: Kendrick-Stein

.github/workflows/build_vue.yml

@@ -0,0 +1,26 @@
+name: Build Vue
+
+on:
+  push:
+    branches: [ main ]
+  pull_request:
+    branches: [ main ]
+
+# Sets permissions of the GITHUB_TOKEN to allow deployment to GitHub Pages
+permissions:
+  contents: write
+  pages: write
+  id-token: write
+
+jobs:
+  build_vue:
+    runs-on: ubuntu-latest
+    name: Build Vue
+    steps:
+    - uses: actions/checkout@v2
+    - id: Build-Vue
+      uses: xRealNeon/VuePagesAction@1.0.1
+      with:
+        username: 'Kendrick-Stein'
+        reponame: 'GUI-Knowledge-Bench'
+        token: ${{ secrets.GITHUB_TOKEN }} # Leave this line unchanged

.gitignore

@@ -0,0 +1,47 @@
+# Logs
+logs
+*.log
+npm-debug.log*
+yarn-debug.log*
+yarn-error.log*
+pnpm-debug.log*
+lerna-debug.log*
+
+# Dependency directories
+node_modules
+.pnpm-store/
+
+# Build outputs
+dist
+dist-ssr
+*.local
+.vite/
+
+# Local env files
+.env
+.env.local
+.env.*.local
+
+# Editor directories and files
+.vscode/*
+!.vscode/extensions.json
+!.vscode/settings.json
+.idea
+.DS_Store
+*.suo
+*.ntvs*
+*.njsproj
+*.sln
+*.sw?
+
+# Coverage directory used by tools like istanbul
+coverage
+
+# Cache directories
+.npm
+.eslintcache
+.stylelintcache
+
+# Optional: Uncomment if using Cypress for testing
+# cypress/videos/
+# cypress/screenshots/

.gitlab-ci.yml

@@ -0,0 +1,25 @@
+image: node:22
+
+stages:
+  - pages
+
+pages:
+  stage: pages
+  before_script:
+    - corepack enable
+    - corepack prepare pnpm@latest-9 --activate
+    - pnpm config set store-dir .pnpm-store
+  script:
+    - pnpm install # install dependencies
+    - pnpm run build --base=/fire-web/
+    - rm -rf public/*
+    - cp -a dist/. public/
+  cache:
+    key:
+      files:
+        - pnpm-lock.yaml
+    paths:
+      - .pnpm-store
+  artifacts:
+    paths:
+      - public

LICENSE

@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) 2025 GUI-Knowledge-Bench
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.

README.md

@@ -0,0 +1,72 @@
+# GUI-Knowledge-Bench
+
+Project website for GUI-Knowledge-Bench
+
+## 🚀 Demo
+
+
+
+## 🛠️ Tech Stack
+
+- **Frontend Framework**: Vue 3
+- **UI Components**: Element Plus
+- **Build Tool**: Vite
+- **HTTP Client**: Axios
+
+## 📋 Features
+
+- Interactive demonstration of multi-modal agent tuning
+- Visualization of VLM-driven agent capabilities
+- Tool usage efficiency metrics
+
+## 🔧 Development Setup
+
+### Prerequisites
+
+- [Node.js](https://nodejs.org/) (v16 or higher)
+- [pnpm](https://pnpm.io/) (recommended) or npm
+
+### Installation
+
+1. Clone the repository
+
+
+2. Install dependencies
+```bash
+pnpm install
+```
+
+3. Start the development server
+```bash
+pnpm dev
+```
+
+## 🏗️ Building for Production
+
+```bash
+pnpm build
+```
+
+The built files will be in the `dist` directory, ready to be deployed.
+
+## 🚀 Deployment
+
+This project is set up for GitHub Pages deployment:
+
+1. Build the project
+```bash
+pnpm build
+```
+
+2. Push to GitHub
+```bash
+git add .
+git commit -m "Ready for deployment"
+git push
+```
+
+3. Configure GitHub Pages to serve from the desired branch
+
+## 📄 License
+
+[MIT License](LICENSE)

change_color.py

@@ -0,0 +1,80 @@
+def replace_colors_in_vue(input_file, output_file):
+    """
+    将Vue文件中的蓝色系配色替换为紫色系
+    """
+    
+    # 定义所有需要替换的颜色映射
+    color_replacements = [
+        # 主要颜色替换
+        ('#1a237e', '#4a148c'),  # 深紫色，用于标题
+        
+        # 链接和强调色
+        ('#1976d2', '#7b1fa2'),  # 主紫色
+        ('#1565c0', '#6a1b9a'),  # 深一点的紫色，hover状态
+        ('#0d47a1', '#4a148c'),  # 更深的紫色，hover状态
+        
+        # 浅色背景和边框
+        ('#90caf9', '#ce93d8'),  # 浅紫色，用于边框
+        ('#64b5f6', '#ba68c8'),  # 渐变色的浅端
+        ('#42a5f5', '#ab47bc'),  # hover渐变的浅端
+        
+        # 背景色调整
+        ('#e3f0fc', '#f3e5f5'),  # 很浅的紫色背景
+        ('#e3f2fd', '#f3e5f5'),  # 图标颜色
+        ('#e3eaf2', '#e1bee7'),  # 边框色
+        
+        # 阴影颜色调整
+        ('rgba(25, 118, 210, 0.04)', 'rgba(123, 31, 162, 0.04)'),
+        ('rgba(25, 118, 210, 0.06)', 'rgba(123, 31, 162, 0.06)'),
+        ('rgba(25, 118, 210, 0.08)', 'rgba(123, 31, 162, 0.08)'),
+        ('rgba(25, 118, 210, 0.13)', 'rgba(123, 31, 162, 0.13)'),
+        ('rgba(25, 118, 210, 0.18)', 'rgba(123, 31, 162, 0.18)'),
+        
+        # 渐变调整
+        ('linear-gradient(90deg, #1976d2 0%, #64b5f6 100%)', 
+         'linear-gradient(90deg, #7b1fa2 0%, #ba68c8 100%)'),
+        ('linear-gradient(90deg, #1565c0 0%, #42a5f5 100%)', 
+         'linear-gradient(90deg, #6a1b9a 0%, #ab47bc 100%)'),
+    ]
+    
+    # 读取输入文件
+    try:
+        with open(input_file, 'r', encoding='utf-8') as f:
+            content = f.read()
+    except FileNotFoundError:
+        print(f"错误：找不到输入文件 {input_file}")
+        return
+    except Exception as e:
+        print(f"读取文件时出错：{e}")
+        return
+    
+    # 执行所有替换
+    replaced_count = 0
+    for old_color, new_color in color_replacements:
+        count = content.count(old_color)
+        if count > 0:
+            content = content.replace(old_color, new_color)
+            replaced_count += count
+            print(f"替换 {old_color} -> {new_color} ({count} 处)")
+    
+    # 写入输出文件
+    try:
+        with open(output_file, 'w', encoding='utf-8') as f:
+            f.write(content)
+        print(f"\n✅ 成功！总共替换了 {replaced_count} 处颜色")
+        print(f"新文件已保存到：{output_file}")
+    except Exception as e:
+        print(f"写入文件时出错：{e}")
+        return
+
+# 使用示例
+if __name__ == "__main__":
+    # 设置输入和输出文件路径
+    input_vue_file = "D:\科研\ICLR2026\dart\src\components\Main.vue"  # 替换为你的原始Vue文件路径
+    output_vue_file = "D:\科研\ICLR2026\dart\src\components\Main_alt.vue"  # 输出的紫色主题Vue文件
+    
+    # 执行颜色替换
+    replace_colors_in_vue(input_vue_file, output_vue_file)
+    
+    print("\n提示：请将你的Vue代码保存为 'original.vue' 文件，")
+    print("然后运行这个脚本，会生成 'purple_theme.vue' 文件")

index.html

@@ -0,0 +1,13 @@
+<!doctype html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <link rel="icon" href="./icon.png" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title> GUI-Knowledge-Bench </title>
+  </head>
+  <body>
+    <div id="app"></div>
+    <script type="module" src="/src/main.js"></script>
+  </body>
+</html>