برنامه نویسی

چگونه یک عامل هوش مصنوعی با صفحه نمایش و میکروفون خود ایجاد کنید

توضیحات تصویر

screenpipe یک برنامه CLI / است که صفحه‌نمایش و میکروفون‌های شما را 24/7 ضبط می‌کند، OCR، رونویسی و غیره را 100% به صورت محلی استخراج می‌کند و تغذیه آن را به هوش مصنوعی آسان می‌کند.

سیستم لوله screenpipe به شما امکان می‌دهد پلاگین‌های قدرتمندی بسازید که با صفحه نمایش و داده‌های صوتی ضبط‌شده تعامل دارند. بیایید یک لوله ساده ایجاد کنیم که از olama برای تجزیه و تحلیل فعالیت صفحه نمایش شما استفاده می کند.

پیش نیازها

  • Screenpipe نصب شده و در حال اجرا است

  • نان نصب شده است

  • olama نصب شده با یک مدل (ما استفاده خواهیم کرد deepseek-r1:1.5b)

1. لوله خود را ایجاد کنید

ابتدا، اجازه دهید یک لوله جدید با استفاده از CLI رسمی ایجاد کنیم:

bunx @screenpipe/create-pipe@latest
وارد حالت تمام صفحه شوید

از حالت تمام صفحه خارج شوید

وقتی از شما خواسته شد:

  • لوله خود را نام ببرید (به عنوان مثال، “my-activity-analyzer”)
  • یک دایرکتوری انتخاب کنید

2. ساختار پروژه

اکنون ویرایشگر مورد علاقه خود را باز کنید cursor یا vscode و پروژه را باز کنید.

cursor my-activity-analyzer
وارد حالت تمام صفحه شوید

از حالت تمام صفحه خارج شوید

پس از ایجاد، پروژه شما باید به شکل زیر باشد:

my-activity-analyzer/
├── README.md
├── package.json
├── pipe.json
├── public
├── src
│   ├── app
│   ├── components
│   ├── hooks
│   └── lib
├── tailwind.config.ts
└── tsconfig.json
وارد حالت تمام صفحه شوید

از حالت تمام صفحه خارج شوید

بیایید برخی از فایل هایی که مورد نیاز نیستند را حذف کنیم:

rm -rf src/app/api/intelligence src/components/obsidian-settings.tsx src/components/file-suggest-textarea.tsx
وارد حالت تمام صفحه شوید

از حالت تمام صفحه خارج شوید

3. یک cron job را پیاده سازی کنید که برای تجزیه و تحلیل فعالیت استفاده می شود

یک فایل جدید ایجاد کنید src/app/api/analyze/route.ts و این کد را اضافه کنید:

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

    // query last 5 minutes of activity
    const fiveMinutesAgo = new Date(Date.now() - 5 * 60 * 1000).toISOString();
    const results = await pipe.queryScreenpipe({
      startTime: fiveMinutesAgo,
      limit: 10,
      contentType: "all",
    });

    // setup ollama with selected model
    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 }
    );
  }
}

وارد حالت تمام صفحه شوید

از حالت تمام صفحه خارج شوید

4. یک پیکربندی ساده vercel مانند pipe.json برای زمان بندی ایجاد کنید:

{
  "crons": [
    {
      "path": "/api/analyze",
      "schedule": "*/5 * * * *"
    }
  ]
}
وارد حالت تمام صفحه شوید

از حالت تمام صفحه خارج شوید

5. صفحه اصلی را برای نمایش تجزیه و تحلیل به روز کنید

باز کردن 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>
        ))}

        <form onSubmit={handleSubmit} className="flex gap-2">
          <input
            value={input}
            onChange={handleInputChange}
            placeholder="Type a message..."
            className="w-full"
          />
          <Button type="submit">Send</Button>
        </form>
      </div>
    </main>
  );
}

وارد حالت تمام صفحه شوید

از حالت تمام صفحه خارج شوید

6. تست محلی

لوله خود را اجرا کنید:

bun i # or use npm
bun dev
وارد حالت تمام صفحه شوید

از حالت تمام صفحه خارج شوید

بازدید کنید http://localhost:3000 برای تست لوله شما

7. نصب در screenpipe

شما می توانید لوله خود را به دو روش نصب کنید:

الف) از طریق رابط کاربری:

  • برنامه screenpipe را باز کنید
  • برو سراغ لوله ها
  • روی “+” کلیک کنید و مسیر محلی لوله خود را وارد کنید

ب) با استفاده از CLI:

screenpipe install /path/to/my-activity-analyzer
screenpipe enable my-activity-analyzer
وارد حالت تمام صفحه شوید

از حالت تمام صفحه خارج شوید

چگونه کار می کند

بیایید بخش های کلیدی را تجزیه کنیم:

  1. پرس و جو داده ها: استفاده می کنیم pipe.queryScreenpipe() برای واکشی داده های صفحه/صوتی اخیر
  2. پردازش ai: olama داده ها را از طریق یک دستور ساده تجزیه و تحلیل می کند
  3. رابط کاربری: یک دکمه ساده تجزیه و تحلیل را فعال می کند و نتایج را نمایش می دهد
  4. برنامه ریزی: screenpipe هر 5 دقیقه با cron job تماس می گیرد

مراحل بعدی

می توانید لوله خود را با موارد زیر تقویت کنید:

  • اضافه کردن گزینه های پیکربندی
  • اتصال به خدمات خارجی
  • افزودن اجزای رابط کاربری پیچیده تر

مراجع مفید

نوشته های مشابه

دیدگاهتان را بنویسید

نشانی ایمیل شما منتشر نخواهد شد. بخش‌های موردنیاز علامت‌گذاری شده‌اند *

دکمه بازگشت به بالا