init

Author: Pengxiang-Li

.env.production

@@ -0,0 +1 @@
+NEXT_PUBLIC_BASE_PATH=/CUA-Trace-Viewer 

.github/workflows/deploy.yml

@@ -0,0 +1,52 @@
+name: Deploy to GitHub Pages
+
+on:
+  push:
+    branches: [ main ]
+  workflow_dispatch:
+
+# 设置GITHUB_TOKEN的权限
+permissions:
+  contents: read
+  pages: write
+  id-token: write
+
+# 允许一个并发部署
+concurrency:
+  group: "pages"
+  cancel-in-progress: false
+
+jobs:
+  # 单个部署工作流
+  build-and-deploy:
+    environment:
+      name: github-pages
+      url: ${{ steps.deployment.outputs.page_url }}
+    runs-on: ubuntu-latest
+    steps:
+      - name: Checkout
+        uses: actions/checkout@v4
+      
+      - name: Setup Node
+        uses: actions/setup-node@v4
+        with:
+          node-version: "18"
+          cache: 'npm'
+      
+      - name: Setup Pages
+        uses: actions/configure-pages@v4
+      
+      - name: Install dependencies
+        run: npm ci
+      
+      - name: Build
+        run: npm run build
+      
+      - name: Upload artifact
+        uses: actions/upload-pages-artifact@v3
+        with:
+          path: ./out
+      
+      - name: Deploy to GitHub Pages
+        id: deployment
+        uses: actions/deploy-pages@v4 

.gitignore

@@ -0,0 +1,46 @@
+# dependencies
+/node_modules
+/.pnp
+.pnp.js
+
+# testing
+/coverage
+
+# next.js
+/.next/
+/out/
+
+# production
+/build
+
+# misc
+.DS_Store
+*.pem
+
+# debug
+npm-debug.log*
+yarn-debug.log*
+yarn-error.log*
+
+# local env files
+.env*.local
+.env
+
+# vercel
+.vercel
+
+# typescript
+*.tsbuildinfo
+next-env.d.ts
+
+# IDE specific files
+.idea
+.vscode
+*.swp
+*.swo
+
+# Media files (since they might be large and project-specific)
+# /public/screenshots/*
+# /public/videos/*
+# !public/screenshots/.gitkeep
+# !public/videos/.gitkeep

README.md

@@ -0,0 +1,157 @@
+# Computer Use Agent Trace Viewer
+
+A web-based visualization tool for Computer Use Agent traces, displaying the agent's thought process, actions, screenshots, and corresponding videos.
+
+![Computer Use Agent Trace Viewer](figure/page.png)
+
+## 📋 Features
+
+- Interactive timeline of agent activities with screenshots, thoughts, and actions
+- Synchronized video playback
+- Adjustable split view (drag to resize)
+- Time-synchronized scrolling
+- Multiple trace instances on a single page
+- External JSON data support
+
+## 🛠️ Prerequisites
+
+- [Node.js](https://nodejs.org/) (v16.x or newer)
+- npm (comes with Node.js) or [Yarn](https://yarnpkg.com/)
+
+## 🚀 Getting Started
+
+### 1. Clone the Repository
+
+```bash
+git clone https://github.com/Computer-use-agents/CUA-Trace-Viewer.git
+cd CUA-Trace-Viewer
+```
+
+### 2. Install Dependencies
+
+```bash
+npm install
+```
+
+### 3. Start the Development Server
+
+```bash
+npm run dev
+```
+
+Visit [http://localhost:3000](http://localhost:3000) to see your trace viewer in action!
+
+## 📁 Project Structure
+
+The project uses the following structure for its data:
+
+## Screenshots and Videos
+
+Create the following directories: 
+
+```bash
+mkdir -p public  public/screenshots public/videos 
+```
+
+Place your screenshots and videos in the following directories:
+
+- `public/screenshots/`: Contains the screenshots
+- `public/videos/`: Contains the videos   
+
+### JSON Data Files
+
+The trace data is stored in JSON files under `src/data/` directory:
+- `trace1.json`: Contains the first set of agent activities
+- `trace2.json`: Contains the second set of agent activities
+
+Each item in the trace data follows this format:
+
+```json
+{
+  "timestamp": "2024-03-20T10:00:00Z",
+  "screenshot": "/screenshots/image.png",
+  "thought": "Agent is analyzing the current screen content...",
+  "action": "click the button",
+  "video": "/videos/test.mp4",
+  "timeRange": {
+    "start": 0,
+    "end": 5
+  }
+}
+```
+
+## ✨ Customization
+
+### Adding More Trace Viewers
+
+To add more trace viewers, create a new JSON file in `src/data/` directory and import it in `app/page.tsx`:
+
+```typescript
+import trace3Data from '../src/data/trace3.json';
+
+// Then use it in a TraceViewer component
+<TraceViewer data={trace3Data} id="viewer3" />
+```
+
+### Modifying the Layout
+
+- Adjust the default split ratio in the `TraceViewer` component by changing the `splitPosition` initial state
+- Customize the styling using Tailwind classes in the component files
+
+### Loading Data from API
+
+To load data from an API instead of JSON files:
+
+```typescript
+'use client';
+import { useState, useEffect } from 'react';
+import TraceViewer from '../src/components/TraceViewer';
+
+export default function Home() {
+  const [data, setData] = useState(null);
+  const [loading, setLoading] = useState(true);
+  
+  useEffect(() => {
+    async function fetchData() {
+      try {
+        const response = await fetch('/api/traces/1');
+        const data = await response.json();
+        setData(data);
+      } finally {
+        setLoading(false);
+      }
+    }
+    fetchData();
+  }, []);
+  
+  if (loading) return <div>Loading traces...</div>;
+  
+  return (
+    <main>
+      {data && <TraceViewer data={data} id="viewer1" />}
+    </main>
+  );
+}
+```
+
+## 🔧 Troubleshooting
+
+### Images or Videos Not Loading
+
+- Ensure the paths in your data match the actual file paths in the `public` directory
+- Paths should be relative to the `public` directory (e.g., `/screenshots/image.png`, not `public/screenshots/image.png`)
+- Check browser console for any 404 errors
+
+### JSON Data Issues
+
+- Verify your JSON files are properly formatted with valid JSON
+- Make sure all required fields are present (timestamp, screenshot, thought, action, video, timeRange)
+- Check that timeRange contains valid start and end values
+
+## 🤝 Contributing
+
+Contributions are welcome! Please feel free to submit a Pull Request.
+
+## 📄 License
+
+This project is open source and available under the [MIT License](LICENSE). 

app/layout.tsx

@@ -0,0 +1,27 @@
+import '../src/styles/globals.css'
+import { Metadata } from 'next'
+
+export const metadata: Metadata = {
+  title: 'Computer Use Agent - macOS Agent',
+  description: 'Intelligent Desktop Automation',
+}
+
+export default function RootLayout({
+  children,
+}: {
+  children: React.ReactNode
+}) {
+  return (
+    <html lang="en">
+      <head>
+        <meta charSet="utf-8" />
+        <meta name="viewport" content="width=device-width, initial-scale=1" />
+        <link
+          rel="stylesheet"
+          href={process.env.NODE_ENV === 'production' ? '/CUA-Trace-Viewer/_next/static/css/app/layout.css' : '/_next/static/css/app/layout.css'}
+        />
+      </head>
+      <body>{children}</body>
+    </html>
+  )
+} 

app/not-found.tsx

@@ -0,0 +1,13 @@
+import Link from 'next/link'
+
+export default function NotFound() {
+  return (
+    <div className="flex flex-col items-center justify-center min-h-screen text-center p-4">
+      <h2 className="text-2xl font-bold mb-4">页面未找到</h2>
+      <p className="mb-4">找不到请求的资源</p>
+      <Link href="/" className="text-blue-500 hover:underline">
+        返回首页
+      </Link>
+    </div>
+  )
+}