首页 >web前端 >js教程 >如何创建由屏幕和麦克风驱动的人工智能代理

如何创建由屏幕和麦克风驱动的人工智能代理

Linda Hamilton
Linda Hamilton原创
2025-01-22 08:35:10549浏览

How to create an AI agent powered by your screen & mic

Screenpipe:用于 24/7 屏幕和麦克风录音、OCR、转录和 AI 集成的 CLI/应用程序

Screenpipe 是一个命令行界面 (CLI) 应用程序,可连续记录您的屏幕和麦克风活动、提取光学字符识别 (OCR) 数据、生成转录,并简化将此数据输入 AI 模型的过程。 其灵活的管道系统允许您创建功能强大的插件,与捕获的屏幕和音频信息进行交互。此示例演示了构建一个利用 Ollama 分析屏幕活动的简单管道。

先决条件:

  • Screenpipe 已安装并正在运行。
  • 小圆面包已安装 (npm install -g bun)。
  • Ollama 安装了模型(本例中使用 DeepSeek-r1:1.5b)。

1。管道创建:

使用 CLI 创建一个新的 Screenpipe 管道:

<code class="language-bash">bunx @screenpipe/create-pipe@latest</code>

按照提示命名您的管道(例如“my-activity-analyzer”)并选择一个目录。

2。项目设置:

在您喜欢的编辑器(例如,光标、VS Code)中打开项目:

<code class="language-bash">cursor my-activity-analyzer</code>

初始项目结构将包含多个文件。 对于此示例,删除不必要的文件:

<code class="language-bash">rm -rf src/app/api/intelligence src/components/obsidian-settings.tsx src/components/file-suggest-textarea.tsx</code>

3。实施分析 Cron 作业:

使用以下代码创建src/app/api/analyze/route.ts

<code class="language-typescript">import { NextResponse } from "next/server";
import { pipe } from "@screenpipe/js";
import { streamText } from "ai";
import { ollama } from "ollama-ai-provider";

export async function POST(request: Request) {
  try {
    const { messages, model } = await request.json();
    console.log("model:", model);

    const fiveMinutesAgo = new Date(Date.now() - 5 * 60 * 1000).toISOString();
    const results = await pipe.queryScreenpipe({
      startTime: fiveMinutesAgo,
      limit: 10,
      contentType: "all",
    });

    const provider = ollama(model);
    const result = streamText({
      model: provider,
      messages: [
        ...messages,
        {
          role: "user",
          content: `Analyze this activity data and summarize what I've been doing: ${JSON.stringify(results)}`,
        },
      ],
    });

    return result.toDataStreamResponse();
  } catch (error) {
    console.error("error:", error);
    return NextResponse.json({ error: "Failed to analyze activity" }, { status: 500 });
  }
}</code>

4。 pipe.json 调度配置:

创建或修改 pipe.json 以包含 cron 作业:

<code class="language-json">{
  "crons": [
    {
      "path": "/api/analyze",
      "schedule": "*/5 * * * *" // Runs every 5 minutes
    }
  ]
}</code>

5。更新主页 (src/app/page.tsx):

<code class="language-typescript">"use client";

import { useState } from "react";
import { Button } from "@/components/ui/button";
import { OllamaModelsList } from "@/components/ollama-models-list";
import { Label } from "@/components/ui/label";
import { useChat } from "ai/react";

export default function Home() {
  const [selectedModel, setSelectedModel] = useState("deepseek-r1:1.5b");
  const { messages, input, handleInputChange, handleSubmit } = useChat({
    body: { model: selectedModel },
    api: "/api/analyze",
  });

  return (
    <main className="p-4 max-w-2xl mx-auto space-y-4">
      <div className="space-y-2">
        <label htmlFor="model">Ollama Model</label>
        <OllamaModelsList defaultValue={selectedModel} onChange={setSelectedModel} />
      </div>

      <div>
        {messages.map((message) => (
          <div key={message.id}>
            <div>{message.role === "user" ? "User: " : "AI: "}</div>
            <div>{message.content}</div>
          </div>
        ))}
      </div>
    </main>
  );
}</code>

6。本地测试:

在本地运行管道:

<code class="language-bash">bun i  // or npm install
bun dev</code>

访问http://localhost:3000应用程序。

7。屏管安装:

将管道安装到 Screenpipe 中:

  • UI:打开 Screenpipe 应用程序,导航到“管道”部分,单击“”,然后提供管道的本地路径。
  • CLI:
    <code class="language-bash">screenpipe install /path/to/my-activity-analyzer
    screenpipe enable my-activity-analyzer</code>

工作原理:

  • 数据查询: pipe.queryScreenpipe()检索最近的屏幕和音频数据。
  • 人工智能处理:Ollama 使用提示分析数据。
  • UI:简单的界面显示分析结果。
  • 调度: Screenpipe 的 cron 作业每 5 分钟执行一次分析。

后续步骤:

  • 添加配置选项。
  • 与外部服务集成。
  • 实现更复杂的 UI 组件。

参考文献:

  • Screenpipe 文档。
  • Screenpipe 管道示例。
  • Screenpipe SDK 参考。

以上是如何创建由屏幕和麦克风驱动的人工智能代理的详细内容。更多信息请关注PHP中文网其他相关文章!

声明:
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系admin@php.cn