# lab

**Repository Path**: lab_6/lab

## Basic Information

- **Project Name**: lab
- **Description**: No description available
- **Primary Language**: Unknown
- **License**: Not specified
- **Default Branch**: main
- **Homepage**: None
- **GVP Project**: No

## Statistics

- **Stars**: 0
- **Forks**: 0
- **Created**: 2026-08-06
- **Last Updated**: 2026-08-06

## Categories & Tags

**Categories**: Uncategorized

**Tags**: None

## README

# Lab - Practical Tutorials and Example Projects Collection

This repository contains two independent practical projects:

1. **Agent Development Practice** (`agent-lab/`) - Tutorial on developing Agents based on Large Language Models
2. **Vue 3 vs React 19 Comparative Study** (`vue-react-lab/`) - Front-end Framework Comparison Learning Guide

---

## 1. Agent Development Practice (agent-lab)

A tutorial on Agent development compiled from real project experience, containing a complete knowledge system from basics to production.

### Core Content

| Module | Topic | Key Knowledge Points |
|------|------|-----------|
| s1_no_loop.py | Basic Understanding | Demonstrates typical limitations without an Agent loop |
| s2_tools.py | Tool Definition | Tool description writing standards, parameter format examples |
| s3_agent_loop.py | Agent Loop | Single-step/Multi-step task execution, Error self-healing |
| s4_multi_tools.py | Multi-tool Collaboration | Sandbox security, File operations, Combined tool usage |
| s5_memory.py | Context Management | Four compression strategies, Token estimation, External memory |
| s6_react.py | ReAct Pattern | Separation of planning and execution, Self-critique mechanism |
| s7_production.py | Production-grade Features | Permission control, Quota management, Injection protection, Audit logs |
| s8_rag.py | Retrieval Augmentation | Document chunking, BM25 retrieval, Agentic RAG |
| s9_multi_agent.py | Multi-Agent Pattern | Router, Pipeline, Parallel aggregation |
| s10_project.py | Comprehensive Example | Full assistant implementation with Persistent Memory + Knowledge Base |

### Quick Start

```bash
cd agent-lab
pip install -r requirements.txt

# Run a single demo module
python s3_agent_loop.py

# Enter interactive mode
python s3_agent_loop.py  # Some modules support interactive mode
```

### Supplementary Resources

- **AGENT_CHEATSHEET.md**: Development cheat sheet, including common patterns and best practices
- **llm.py**: LLM client wrapper, providing chat, tool calling, streaming output, and other functions

---

## 2. Vue 3 vs React 19 Comparative Study (vue-react-lab)

Compare and learn the syntactic differences and core concepts of Vue 3 and React 19 through a Todo application.

### Project Structure

```
vue-react-lab/
├── vue-todo/          # Vue 3 Implementation (Port 5173)
│   ├── src/
│   │   ├── views/     # Page components
│   │   ├── components/# Reusable components
│   │   ├── stores/    # Pinia state management
│   │   └── router/    # Vue Router configuration
│   └── vite.config.js
│
├── react-todo/        # React 19 Implementation (Port 5174)
│   ├── src/
│   │   ├── pages/     # Page components
│   │   ├── components/# Reusable components
│   │   ├── contexts/  # React Context
│   │   └── hooks/     # Custom Hooks
│   └── vite.config.js
│
├── CHEATSHEHEET.md    # Vue → React Syntax Cheat Sheet
└── README.md          # Learning Guide
```

### Core Concept Comparison

| Feature | Vue 3 | React 19 |
|------|-------|----------|
| Declare State | `ref` / `reactive` | `useState` |
| Modify State | Direct assignment | `setState(newValue)` |
| Derived Data | `computed` | `useMemo` |
| Side Effects | `watch` / `onMounted` | `useEffect` |
| Form Binding | `v-model` | Controlled Components |
| List Rendering | `v-for` | `map()` |
| Parent-Child Communication | `props` + `emit` | Props Callback |
| Slots | `<slot>` | `children` prop |
| Cross-layer Passing | `provide` / `inject` | Context |
| Global State | Pinia | Context + useReducer |

### Quick Start

```bash
cd vue-react-lab

# Install dependencies
cd vue-todo && npm install && cd ..
cd react-todo && npm install && cd ..

# Start both projects simultaneously
# Terminal 1: Vue 3
cd vue-todo && npm run dev

# Terminal 2: React 19
cd react-todo && npm run dev
```

Access URLs:
- Vue 3: http://localhost:5173
- React 19: http://localhost:5174

---

## Suggested Learning Paths

### Agent Development Learning Path

1. **s1_no_loop.py** → Understand the limitations of basic LLMs
2. **s2_tools.py** → Master tool definition principles
3. **s3_agent_loop.py** → Understand the Agent loop mechanism
4. **s4_multi_tools.py** → Learn tool collaboration and security
5. **s5_memory.py** → Solve context expansion issues
6. **s6_react.py** → Improve planning capabilities
7. **s7_production.py** → Essential features for production environments
8. **s8_rag.py** / **s9_multi_agent.py** → Advanced topics

### Frontend Framework Learning Path

1. Read through **README.md** to understand overall differences
2. Refer to **CHEATSHEET.md** while learning
3. Run both Todo projects simultaneously to compare implementations
4. Pay special attention to template syntax, reactivity, and component communication

---

## Project Features

### Agent Lab Features

- ✅ Summary of lessons learned from real projects
- ✅ Each module has an independent demo (`demo*_`)
- ✅ Supports interactive mode for free exploration
- ✅ Companion cheat sheet for quick reference during development

### Vue-React Lab Features

- ✅ Same functionality implemented across both frameworks for comparison
- ✅ Intentionally embedded pitfalls "only encountered in real projects"
- ✅ Covers most high-frequency usage scenarios
- ✅ Linting configured (react-todo)

---

## Environment Requirements

- Python 3.10+ (agent-lab)
- Node.js 18+ (vue-react-lab)
- npm or pnpm

---

## License

This project is for learning and exchange purposes only.