Rumah > hujung hadapan web > tutorial js > Cara membuat ejen AI yang dikuasakan oleh skrin & mikrofon anda

Cara membuat ejen AI yang dikuasakan oleh skrin & mikrofon anda

Linda Hamilton
Lepaskan: 2025-01-22 08:35:10
asal
608 orang telah melayarinya

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

Paip Skrin: CLI/Apl untuk Rakaman Skrin dan Mikrofon 24/7, OCR, Transkripsi dan Integrasi AI

Screenpipe ialah aplikasi antara muka baris arahan (CLI) yang merekodkan skrin dan aktiviti mikrofon anda secara berterusan, mengekstrak data Pengecaman Aksara Optik (OCR), menjana transkripsi dan memudahkan proses menyuap data ini ke dalam model AI. Sistem paip fleksibelnya membolehkan anda mencipta pemalam berkuasa yang berinteraksi dengan skrin yang ditangkap dan maklumat audio. Contoh ini menunjukkan membina paip ringkas yang memanfaatkan Ollama untuk menganalisis aktiviti skrin.

Prasyarat:

  • Screenpipe dipasang dan berjalan.
  • Bun dipasang (npm install -g bun).
  • Ollama dipasang dengan model (DeepSeek-r1:1.5b digunakan dalam contoh ini).

1. Penciptaan Paip:

Buat paip Screenpipe baharu menggunakan CLI:

bunx @screenpipe/create-pipe@latest
Salin selepas log masuk

Ikuti gesaan untuk menamakan paip anda (cth., "penganalisis-aktiviti saya") dan pilih direktori.

2. Persediaan Projek:

Buka projek dalam editor pilihan anda (cth., Kursor, Kod VS):

cursor my-activity-analyzer
Salin selepas log masuk

Struktur projek awal akan merangkumi beberapa fail. Untuk contoh ini, alih keluar fail yang tidak diperlukan:

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

3. Melaksanakan Tugasan Cron Analisis:

Buat src/app/api/analyze/route.ts dengan kod berikut:

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 });
  }
}
Salin selepas log masuk

4. pipe.json Konfigurasi untuk Penjadualan:

Buat atau ubah suai pipe.json untuk memasukkan tugas cron:

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

5. Mengemas kini Halaman Utama (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>
  );
}
Salin selepas log masuk

6. Ujian Tempatan:

Jalankan paip secara setempat:

bun i  // or npm install
bun dev
Salin selepas log masuk

Akses aplikasi di http://localhost:3000.

7. Pemasangan Screenpipe:

Pasang paip ke dalam Screenpipe:

  • UI: Buka apl Screenpipe, navigasi ke bahagian Pipes, klik " ", dan berikan laluan setempat ke paip anda.
  • CLI:
    screenpipe install /path/to/my-activity-analyzer
    screenpipe enable my-activity-analyzer
    Salin selepas log masuk

    Cara ia Berfungsi:

    • Pertanyaan Data: pipe.queryScreenpipe() mendapatkan semula data skrin dan audio terkini.
    • Pemprosesan AI: Ollama menganalisis data menggunakan gesaan.
    • UI: Antara muka yang ringkas memaparkan hasil analisis.
    • Penjadualan: Tugas cron Screenpipe melaksanakan analisis setiap 5 minit.

    Langkah Seterusnya:

    • Tambah pilihan konfigurasi.
    • Bersepadu dengan perkhidmatan luaran.
    • Laksanakan komponen UI yang lebih canggih.

    Rujukan:

    • Dokumentasi paip skrin.
    • Contoh paip Screenpipe.
    • Rujukan SDK Skrin.

    Atas ialah kandungan terperinci Cara membuat ejen AI yang dikuasakan oleh skrin & mikrofon anda. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!

Kenyataan Laman Web ini
Kandungan artikel ini disumbangkan secara sukarela oleh netizen, dan hak cipta adalah milik pengarang asal. Laman web ini tidak memikul tanggungjawab undang-undang yang sepadan. Jika anda menemui sebarang kandungan yang disyaki plagiarisme atau pelanggaran, sila hubungi admin@php.cn
Artikel terbaru oleh pengarang
Tutorial Popular
Lagi>
Muat turun terkini
Lagi>
kesan web
Kod sumber laman web
Bahan laman web
Templat hujung hadapan