Maison > interface Web > js tutoriel > Comment créer un agent IA alimenté par votre écran et votre micro

Comment créer un agent IA alimenté par votre écran et votre micro

Linda Hamilton
Libérer: 2025-01-22 08:35:10
original
608 Les gens l'ont consulté

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

Screenpipe : une CLI/application pour l'enregistrement d'écran et de micro 24h/24 et 7j/7, l'OCR, la transcription et l'intégration de l'IA

Screenpipe est une application d'interface de ligne de commande (CLI) qui enregistre en continu l'activité de votre écran et de votre microphone, extrait les données de reconnaissance optique de caractères (OCR), génère des transcriptions et simplifie le processus d'introduction de ces données dans les modèles d'IA. Son système de tuyaux flexibles vous permet de créer des plugins puissants qui interagissent avec les informations capturées à l'écran et audio. Cet exemple montre la création d'un canal simple qui exploite Ollama pour analyser l'activité de l'écran.

Prérequis :

  • Screenpipe installé et opérationnel.
  • Chignon installé (npm install -g bun).
  • Ollama installé avec un modèle (DeepSeek-r1:1.5b est utilisé dans cet exemple).

1. Création de tuyaux :

Créez un nouveau tube Screenpipe à l'aide de la CLI :

bunx @screenpipe/create-pipe@latest
Copier après la connexion

Suivez les invites pour nommer votre canal (par exemple, "my-activity-analyzer") et choisissez un répertoire.

2. Configuration du projet :

Ouvrez le projet dans votre éditeur préféré (par exemple, Curseur, VS Code) :

cursor my-activity-analyzer
Copier après la connexion

La structure initiale du projet comprendra plusieurs fichiers. Pour cet exemple, supprimez les fichiers inutiles :

rm -rf src/app/api/intelligence src/components/obsidian-settings.tsx src/components/file-suggest-textarea.tsx
Copier après la connexion

3. Implémentation du travail Cron d'analyse :

Créez src/app/api/analyze/route.ts avec le code suivant :

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 });
  }
}
Copier après la connexion

4. pipe.json Configuration pour la planification :

Créez ou modifiez pipe.json pour inclure la tâche cron :

{
  "crons": [
    {
      "path": "/api/analyze",
      "schedule": "*/5 * * * *" // Runs every 5 minutes
    }
  ]
}
Copier après la connexion

5. Mise à jour de la page principale (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>
  );
}
Copier après la connexion

6. Tests locaux :

Exécutez le tuyau localement :

bun i  // or npm install
bun dev
Copier après la connexion

Accédez à l'application sur http://localhost:3000.

7. Installation du filtre :

Installez le tuyau dans Screenpipe :

  • UI : Ouvrez l'application Screenpipe, accédez à la section Pipes, cliquez sur " " et fournissez le chemin local vers votre pipe.
  • CLI :
    screenpipe install /path/to/my-activity-analyzer
    screenpipe enable my-activity-analyzer
    Copier après la connexion

    Comment ça marche :

    • Requête de données : pipe.queryScreenpipe() récupère les données d'écran et audio récentes.
    • Traitement IA : Ollama analyse les données à l'aide d'une invite.
    • UI : Une interface simple affiche les résultats de l'analyse.
    • Planification : La tâche cron de Screenpipe exécute l'analyse toutes les 5 minutes.

    Prochaines étapes :

    • Ajouter des options de configuration.
    • Intégrez-vous avec des services externes.
    • Implémentez des composants d'interface utilisateur plus sophistiqués.

    Références :

    • Documentation Screenpipe.
    • Exemple de tuyaux Screenpipe.
    • Référence du SDK Screenpipe.

    Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!

Déclaration de ce site Web
Le contenu de cet article est volontairement contribué par les internautes et les droits d'auteur appartiennent à l'auteur original. Ce site n'assume aucune responsabilité légale correspondante. Si vous trouvez un contenu suspecté de plagiat ou de contrefaçon, veuillez contacter admin@php.cn
Derniers articles par auteur
Tutoriels populaires
Plus>
Derniers téléchargements
Plus>
effets Web
Code source du site Web
Matériel du site Web
Modèle frontal