OWL（DIY版Manus）搭配腾讯混元食用味道如何

原创

黄希彤

修改于 2025-03-08 13:10:36

20800

代码可运行

文章被收录于专栏：黄希彤的专栏黄希彤的专栏

运行总次数：0

代码可运行

Manus的邀请码拿不到，DIY版的OWL也可以解解渴的。不过跑这种所谓的通用Agent挺费token的，能不能用国产的混元大模型来跑呢？那必须是可以的。

1 安装anaconda，然后根据 ReadMe一次操作

git clone https://github.com/camel-ai/owl.git 下载项目
执行conda create -n owl python=3.11 设置py3.11环境，
python -m pip install -r requirements.txt安装依赖

安装过程可能会遇到错误

      !!
      
              ********************************************************************************
              Requirements should be satisfied by a PEP 517 installer.
              If you are using pip, you can try `pip install --use-pep517`.
              ********************************************************************************
      
      !!
        dist.fetch_build_eggs(dist.setup_requires)
      Traceback (most recent call last):
        File "<string>", line 2, in <module>
        File "<pip-setuptools-caller>", line 34, in <module>
        File "/private/var/folders/v9/762pjr6j5gg489508s5jlm640000gn/T/pip-install-v_xejfo0/googlemaps_f8a7b469389c4476b189c64e1f4d1c16/setup.py", line 27, in <module>

python不是太懂，把错误丢给元宝看下，然后根据提示操作

pip install --use-pep517 googlemaps

反正遇到问题了问元宝就对了。

2 第一次运行会提示

 Looks like Playwright was just installed or updated.  
 Please run the following command to download new browsers: 
 
         playwright install

playwright 需要安装浏览器才能工作，照着做就可以了。

3 复制 .env_example 为.env，然后配置混元API-Key。如果没有key到这里创建一个

# MODEL & API (See https://github.com/camel-ai/camel/blob/master/camel/types/enums.py)

# OPENAI API
OPENAI_API_KEY = "sk-你的混元API-Key"
OPENAI_API_BASE_URL = "https://api.hunyuan.cloud.tencent.com/v1"

4 编辑run.py，把模型名称修改成混元大模型

    user_model = ModelFactory.create(
        model_platform=ModelPlatformType.OPENAI,
#       model_type=ModelType.GPT_4O,
        model_type="hunyuan-large-longcontext",
        model_config_dict=ChatGPTConfig(temperature=0, top_p=1).as_dict(), # [Optional] the config for model
    )

    assistant_model = ModelFactory.create(
        model_platform=ModelPlatformType.OPENAI,
#       model_type=ModelType.GPT_4O,
        model_type="hunyuan-large-longcontext",
        model_config_dict=ChatGPTConfig(temperature=0, top_p=1).as_dict(), # [Optional] the config for model
    )

5 注意到.env环境中还有很多工具需要获取相应的key配置进去才能完成复杂的任务，为了验证混元模型的工作，我们先交代一个不需要用到其他工具的简单的小任务看看工作情况。继续编辑run.py，修改question：

# Example case
question = "帮我生成一个网页，上面有三个不同颜色的随机弹跳的小球。"

society = construct_society(question)
answer, chat_history, token_count = run_society(society)

logger.success(f"Answer: {answer}")

6 运行结果如下：

2025-03-08 19:20:50.689 | INFO     | utils.enhanced_role_playing:run_society:428 - Round #0 user_response:
 Instruction: 首先，我们需要了解如何使用HTML和CSS来创建一个网页，并在网页上添加动画效果。请使用搜索引擎查找相关的教程或文档，以便我们能够开始创建这个网页。

Instruction: 从搜索结果中找到一个关于HTML和CSS创建动画的教程，并查看如何实现小球弹跳的效果。

Instruction: 使用HTML和CSS编写代码，创建一个包含三个不同颜色小球的网页。确保每个小球都有不同的颜色，并且它们能够在网页上弹跳。

Instruction: 在浏览器中打开你编写的HTML文件，检查小球的颜色和弹跳效果是否符合要求。如果不符合，请根据教程进行调整。

Instruction: 如果需要，可以使用JavaScript来增强动画效果，例如让小球的速度和方向更加随机。

Instruction: 最后，验证你的网页是否满足任务要求。可以通过截图或分享网页链接来进行验证。

<TASK_DONE>

            Now please make a final answer of the original task based on our conversation : <task>帮我生成一个网页，上面有三个不同颜色的随机弹跳的小球。</task>
            
2025-03-08 19:20:50.690 | INFO     | utils.enhanced_role_playing:run_society:429 - Round #0 assistant_response:
 ### 解决方案

为了生成一个包含三个不同颜色的随机弹跳小球的网页，我们可以使用HTML、CSS和JavaScript来实现。以下是详细的步骤：

#### 1. 创建HTML结构

首先，我们需要创建一个基本的HTML文件结构，包括一个`<canvas>`元素，用于绘制小球。

```html
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Bouncing Balls</title>
    <link rel="stylesheet" href="styles.css">
</head>
<body>
    <canvas id="bouncing-canvas"></canvas>
    <script src="script.js"></script>
</body>
</html>
```

#### 2. 编写CSS样式

接下来，我们编写CSS样式来设置网页的基本布局和样式。

```css
/* styles.css */
body {
    display: flex;
    justify-content: center;
    align-items: center;
    height: 100vh;
    margin: 0;
    background-color: #f0f0f0;
}

canvas {
    border: 1px solid #000;
}
```

#### 3. 编写JavaScript代码

最后，我们编写JavaScript代码来实现小球的弹跳效果。我们将使用`<canvas>`元素来绘制小球，并通过JavaScript来更新它们的位置。

```javascript
// script.js
const canvas = document.getElementById('bouncing-canvas');
const ctx = canvas.getContext('2d');

canvas.width = window.innerWidth;
canvas.height = window.innerHeight;

class Ball {
    constructor(x, y, radius, color) {
        this.x = x;
        this.y = y;
        this.radius = radius;
        this.color = color;
        this.dx = Math.random() * 4 - 2;
        this.dy = Math.random() * 4 - 2;
    }

    draw() {
        ctx.beginPath();
        ctx.arc(this.x, this.y, this.radius, 0, Math.PI * 2);
        ctx.fillStyle = this.color;
        ctx.fill();
        ctx.closePath();
    }

    update() {
        if (this.x + this.radius > canvas.width || this.x - this.radius < 0) {
            this.dx = -this.dx;
        }
        if (this.y + this.radius > canvas.height || this.y - this.radius < 0) {
            this.dy = -this.dy;
        }
        this.x += this.dx;
        this.y += this.dy;
        this.draw();
    }
}

function init() {
    const balls = [];
    for (let i = 0; i < 3; i++) {
        const radius = Math.random() * 50 + 20;
        const x = Math.random() * (canvas.width - radius * 2) + radius;
        const y = Math.random() * (canvas.height - radius * 2) + radius;
        const color = `rgb(${Math.random() * 255}, ${Math.random() * 255}, ${Math.random() * 255})`;
        balls.push(new Ball(x, y, radius, color));
    }
    function animate() {
        requestAnimationFrame(animate);
        ctx.clearRect(0, 0, canvas.width, canvas.height);
        balls.forEach(ball => ball.update());
    }
    animate();
}

init();
```

#### 4. 验证结果

将上述HTML、CSS和JavaScript代码保存为三个不同的文件（例如`index.html`、`styles.css`和`script.js`），并在浏览器中打开`index.html`文件。你应该能看到三个不同颜色的小球在网页上随机弹跳。

### 验证

你可以通过截图或分享网页链接来验证结果。确保每个小球的颜色不同，并且它们能够在网页上弹跳。

通过这种方式，我们成功地创建了一个包含三个不同颜色的随机弹跳小球的网页。
2025-03-08 19:20:50.690 | SUCCESS  | __main__:<module>:83 - Answer: ### 解决方案

为了生成一个包含三个不同颜色的随机弹跳小球的网页，我们可以使用HTML、CSS和JavaScript来实现。以下是详细的步骤：

#### 1. 创建HTML结构

首先，我们需要创建一个基本的HTML文件结构，包括一个`<canvas>`元素，用于绘制小球。

```html
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Bouncing Balls</title>
    <link rel="stylesheet" href="styles.css">
</head>
<body>
    <canvas id="bouncing-canvas"></canvas>
    <script src="script.js"></script>
</body>
</html>
```

#### 2. 编写CSS样式

接下来，我们编写CSS样式来设置网页的基本布局和样式。

```css
/* styles.css */
body {
    display: flex;
    justify-content: center;
    align-items: center;
    height: 100vh;
    margin: 0;
    background-color: #f0f0f0;
}

canvas {
    border: 1px solid #000;
}
```

#### 3. 编写JavaScript代码

最后，我们编写JavaScript代码来实现小球的弹跳效果。我们将使用`<canvas>`元素来绘制小球，并通过JavaScript来更新它们的位置。

```javascript
// script.js
const canvas = document.getElementById('bouncing-canvas');
const ctx = canvas.getContext('2d');

canvas.width = window.innerWidth;
canvas.height = window.innerHeight;

class Ball {
    constructor(x, y, radius, color) {
        this.x = x;
        this.y = y;
        this.radius = radius;
        this.color = color;
        this.dx = Math.random() * 4 - 2;
        this.dy = Math.random() * 4 - 2;
    }

    draw() {
        ctx.beginPath();
        ctx.arc(this.x, this.y, this.radius, 0, Math.PI * 2);
        ctx.fillStyle = this.color;
        ctx.fill();
        ctx.closePath();
    }

    update() {
        if (this.x + this.radius > canvas.width || this.x - this.radius < 0) {
            this.dx = -this.dx;
        }
        if (this.y + this.radius > canvas.height || this.y - this.radius < 0) {
            this.dy = -this.dy;
        }
        this.x += this.dx;
        this.y += this.dy;
        this.draw();
    }
}

function init() {
    const balls = [];
    for (let i = 0; i < 3; i++) {
        const radius = Math.random() * 50 + 20;
        const x = Math.random() * (canvas.width - radius * 2) + radius;
        const y = Math.random() * (canvas.height - radius * 2) + radius;
        const color = `rgb(${Math.random() * 255}, ${Math.random() * 255}, ${Math.random() * 255})`;
        balls.push(new Ball(x, y, radius, color));
    }
    function animate() {
        requestAnimationFrame(animate);
        ctx.clearRect(0, 0, canvas.width, canvas.height);
        balls.forEach(ball => ball.update());
    }
    animate();
}

init();
```

#### 4. 验证结果

将上述HTML、CSS和JavaScript代码保存为三个不同的文件（例如`index.html`、`styles.css`和`script.js`），并在浏览器中打开`index.html`文件。你应该能看到三个不同颜色的小球在网页上随机弹跳。

### 验证

你可以通过截图或分享网页链接来验证结果。确保每个小球的颜色不同，并且它们能够在网页上弹跳。

通过这种方式，我们成功地创建了一个包含三个不同颜色的随机弹跳小球的网页。