Rumah >hujung hadapan web >tutorial js >Cara membuat ejen AI yang dikuasakan oleh skrin & mikrofon anda
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:
npm install -g bun
).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:
<code class="language-bash">screenpipe install /path/to/my-activity-analyzer screenpipe enable my-activity-analyzer</code>
Cara ia Berfungsi:
pipe.queryScreenpipe()
mendapatkan semula data skrin dan audio terkini.Langkah Seterusnya:
Rujukan:
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!