화면과 마이크를 사용하여 AI 에이전트를 만드는 방법

Screenpipe: 연중무휴 화면 및 마이크 녹음, OCR, 전사 및 AI 통합을 위한 CLI/앱

Screenpipe는 화면과 마이크 활동을 지속적으로 기록하고, 광학 문자 인식(OCR) 데이터를 추출하고, 텍스트 변환을 생성하고, 이 데이터를 AI 모델에 공급하는 프로세스를 단순화하는 명령줄 인터페이스(CLI) 애플리케이션입니다. 유연한 파이프 시스템을 사용하면 캡처된 화면 및 오디오 정보와 상호 작용하는 강력한 플러그인을 만들 수 있습니다. 이 예에서는 Ollama를 활용하여 화면 활동을 분석하는 간단한 파이프를 구축하는 방법을 보여줍니다.

전제 조건:

• 스크린파이프가 설치되어 작동 중입니다.
• 번이 설치되었습니다(npm install -g bun).
• 모델과 함께 설치된 Ollama(이 예에서는 DeepSeek-r1:1.5b가 사용됨)

1. 파이프 생성:

CLI를 사용하여 새 Screenpipe 파이프를 생성합니다.

bunx @screenpipe/create-pipe@latest

메시지에 따라 파이프 이름을 지정하고(예: "my-activity-analyzer") 디렉토리를 선택하세요.

2. 프로젝트 설정:

원하는 편집기(예: 커서, VS Code)에서 프로젝트를 엽니다.

cursor my-activity-analyzer

초기 프로젝트 구조에는 여러 파일이 포함됩니다. 이 예에서는 불필요한 파일을 제거합니다.

rm -rf src/app/api/intelligence src/components/obsidian-settings.tsx src/components/file-suggest-textarea.tsx

3. 분석 크론 작업 구현:

다음 코드를 사용하여 src/app/api/analyze/route.ts을 만듭니다.

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 });
  }
}

4. pipe.json 예약 구성:

크론 작업을 포함하도록 pipe.json 생성 또는 수정:

{
  "crons": [
    {
      "path": "/api/analyze",
      "schedule": "*/5 * * * *" // Runs every 5 minutes
    }
  ]
}

5. 메인 페이지 업데이트(src/app/page.tsx):

"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>
  );
}

6. 로컬 테스트:

로컬에서 파이프 실행:

bun i  // or npm install
bun dev

http://localhost:3000에서 애플리케이션에 접속하세요.

7. 스크린파이프 설치:

파이프를 Screenpipe에 설치합니다:

• UI: Screenpipe 앱을 열고 Pipes 섹션으로 이동한 후 " "를 클릭하고 파이프에 대한 로컬 경로를 제공합니다.
• CLI:

  screenpipe install /path/to/my-activity-analyzer
  screenpipe enable my-activity-analyzer

작동 방식:

• 데이터 쿼리: pipe.queryScreenpipe()는 최근 화면 및 오디오 데이터를 검색합니다.
• AI 처리: Ollama는 프롬프트를 사용하여 데이터를 분석합니다.
• UI: 간단한 인터페이스로 분석 결과를 표시합니다.
• 예약: Screenpipe의 cron 작업은 5분마다 분석을 실행합니다.

다음 단계:

• 구성 옵션을 추가하세요.
• 외부 서비스와 통합하세요.
• 보다 정교한 UI 구성요소를 구현하세요.

참고자료:

• 스크린파이프 문서
• 스크린파이프 파이프 예시
• Screenpipe SDK 참조

위 내용은 화면과 마이크를 사용하여 AI 에이전트를 만드는 방법의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!