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
Linda Hamiltonasal
2025-01-22 08:35:10553semak imbas

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:

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

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):

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

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

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

3. Melaksanakan Tugasan Cron Analisis:

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

<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 Konfigurasi untuk Penjadualan:

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

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

5. Mengemas kini Halaman Utama (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. Ujian Tempatan:

Jalankan paip secara setempat:

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

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:
    <code class="language-bash">screenpipe install /path/to/my-activity-analyzer
    screenpipe enable my-activity-analyzer</code>

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:
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