Heim > Web-Frontend > js-Tutorial > So erstellen Sie einen KI-Agenten, der über Ihren Bildschirm und Ihr Mikrofon gesteuert wird

So erstellen Sie einen KI-Agenten, der über Ihren Bildschirm und Ihr Mikrofon gesteuert wird

Linda Hamilton
Freigeben: 2025-01-22 08:35:10
Original
535 Leute haben es durchsucht

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

Screenpipe: Eine CLI/App für Bildschirm- und Mikrofonaufzeichnung rund um die Uhr, OCR, Transkription und KI-Integration

Screenpipe ist eine Befehlszeilenschnittstellenanwendung (CLI), die kontinuierlich Ihre Bildschirm- und Mikrofonaktivität aufzeichnet, OCR-Daten (Optical Character Recognition) extrahiert, Transkriptionen generiert und den Prozess der Einspeisung dieser Daten in KI-Modelle vereinfacht. Dank seines flexiblen Pipe-Systems können Sie leistungsstarke Plugins erstellen, die mit erfassten Bildschirm- und Audioinformationen interagieren. Dieses Beispiel zeigt den Aufbau einer einfachen Pipe, die Ollama nutzt, um die Bildschirmaktivität zu analysieren.

Voraussetzungen:

  • Screenpipe installiert und läuft.
  • Brötchen installiert (npm install -g bun).
  • Ollama mit einem Modell installiert (DeepSeek-r1:1.5b wird in diesem Beispiel verwendet).

1. Rohrerstellung:

Erstellen Sie eine neue Screenpipe-Pipe mit der CLI:

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

Folgen Sie den Anweisungen, um Ihrer Pipe einen Namen zu geben (z. B. „mein-Aktivitätsanalysator“) und wählen Sie ein Verzeichnis aus.

2. Projekt-Setup:

Öffnen Sie das Projekt in Ihrem bevorzugten Editor (z. B. Cursor, VS-Code):

<code class="language-bash">cursor my-activity-analyzer</code>
Nach dem Login kopieren

Die anfängliche Projektstruktur umfasst mehrere Dateien. Entfernen Sie für dieses Beispiel unnötige Dateien:

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

3. Implementierung des Analyse-Cron-Jobs:

Erstellen Sie src/app/api/analyze/route.ts mit dem folgenden Code:

<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>
Nach dem Login kopieren

4. pipe.jsonKonfiguration für die Terminplanung:

Erstellen oder ändern Sie pipe.json, um den Cron-Job einzuschließen:

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

5. Aktualisieren der Hauptseite (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>
Nach dem Login kopieren

6. Lokale Tests:

Führen Sie die Pipe lokal aus:

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

Zur Anwendung gelangen Sie unter http://localhost:3000.

7. Installation des Siebrohrs:

Installieren Sie das Rohr in Screenpipe:

  • Benutzeroberfläche: Öffnen Sie die Screenpipe-App, navigieren Sie zum Abschnitt „Pipes“, klicken Sie auf „ “ und geben Sie den lokalen Pfad zu Ihrer Pipe an.
  • CLI:
    <code class="language-bash">screenpipe install /path/to/my-activity-analyzer
    screenpipe enable my-activity-analyzer</code>
    Nach dem Login kopieren

Wie es funktioniert:

  • Datenabfrage: pipe.queryScreenpipe() ruft aktuelle Bildschirm- und Audiodaten ab.
  • KI-Verarbeitung:Ollama analysiert die Daten anhand einer Eingabeaufforderung.
  • Benutzeroberfläche:Eine einfache Benutzeroberfläche zeigt die Analyseergebnisse an.
  • Planung: Der Cronjob von Screenpipe führt die Analyse alle 5 Minuten aus.

Nächste Schritte:

  • Konfigurationsoptionen hinzufügen.
  • In externe Dienste integrieren.
  • Implementieren Sie anspruchsvollere UI-Komponenten.

Referenzen:

  • Screenpipe-Dokumentation.
  • Beispiel Screenpipe-Rohre.
  • Screenpipe SDK-Referenz.

Das obige ist der detaillierte Inhalt vonSo erstellen Sie einen KI-Agenten, der über Ihren Bildschirm und Ihr Mikrofon gesteuert wird. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!

Quelle:php.cn
Erklärung dieser Website
Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn
Neueste Artikel des Autors
Beliebte Tutorials
Mehr>
Neueste Downloads
Mehr>
Web-Effekte
Quellcode der Website
Website-Materialien
Frontend-Vorlage