Qwen-Agent: Demo Projesi ile Rehber

Bu blog yazısında, herhangi bir web sayfasının içeriğini gerçek zamanlı olarak özetleyen, Qwen-Agent tarafından desteklenen bir tarayıcı uzantısını nasıl oluşturacağınızı adım adım göstereceğim. Şunları ele alacağız:

• Alibaba'nın Qwen3 modelini Ollama ile yerelde kullanma
• Yapılandırılmış yönlendirme ve araç kullanımı için Qwen-Agent kullanma
• Akışlı UI güncellemeleriyle bir Chrome uzantısı oluşturma
• Gerçek zamanlı özetleme için FastAPI backend ekleme

Sonunda, tek tıkla tarayıcınızda web sayfalarını okuyan ve özetleyen, Qwen3 tarafından desteklenen çevrimdışı çalışabilen bir özetleyici ajana sahip olacaksınız.

Okurlarımızı, haftanın öne çıkan gelişmelerini sade bir şekilde anlatan, ücretsiz Cuma bültenimiz The Median ile yapay zekâdaki en son yeniliklerden haberdar ediyoruz. Abone olun; haftada sadece birkaç dakikada güncel kalın:

Qwen-Agent Nedir?

Qwen-Agent, Alibaba tarafından, Qwen3 model ailesiyle güçlü LLM uygulamaları geliştirmek için oluşturulmuş hafif bir Python çatısıdır. Şunlara odaklanır:

• Yönerge izleyen ajanlar
• Araç kullanımı ve fonksiyon çağrımı
• Bellek ve çok turlu planlama
• Yapılandırılmış iletilerle esnek yönlendirme

Özünde, Qwen-Agent; sağlam akıl yürütme ve kod çalıştırma yeteneklerine sahip modüler yapay zekâ ajanlarının geliştirilmesini kolaylaştırır. LLM sarmalayıcıları ve araçlar gibi atomik bileşenlerin yanı sıra iş akışlarını düzenlemek için üst düzey Agent sınıfları içerir.

Qwen-Agent, bulut tabanlı API'lerle (Alibaba DashScope gibi) ve vLLM ve Ollama gibi OpenAI uyumlu yerel çalışma zamanlarıyla çalışır. Şunlarla güçlü LLM uygulamaları oluşturmayı kolaylaştırır:

• FastAPI ile hızlı entegrasyon
• Önyüz arayüzleri için yerleşik akış
• Özelleştirilebilir fonksiyon araç zincirleri
• Tam çevrimdışı mahremiyet ve performans

Proje Genel Bakışı: Gerçek Zamanlı Web Özetleyici Uzantısı

Bu bölümde, Qwen-Agent tarafından desteklenen gerçek zamanlı bir özetleyici uzantısı oluşturacağız. Şunlar dahildir:

• Web sayfası metnini kabul eden ve bir özet döndüren bir FastAPI backend
• Görünür sayfa içeriğini yakalayan bir Chrome uzantısı açılır penceresi
• Özet oluşturulurken akışlı bir kullanıcı arayüzü
• Yerelde Ollama ile çalışan Qwen3:1.7B tarafından desteklenen backend

Hadi projenin her bir parçasını birlikte inceleyelim.

Adım 1: Qwen3 Backend'ini Kurma

Bu adımda, backend'in uzantımızla eşzamanlı çalışması için hazırlamamız gereken tüm kod dosyalarını ele alacağız.

Adım 1.1: Bağımlılıklar ve kütüphaneler 

Önce sisteminize ollama kurun. Ardından, backend için gereken tüm Python bağımlılıklarını requirements.txt dosyasında listeleyin. Bu, makineler ve konteynerler arasında tutarlı bir ortam kurulmasını sağlar.

fastapi
uvicorn
python-dateutil
python-dotenv
qwen-agent[code_interpreter]
matplotlib

Her bir kütüphanenin ne için kullanıldığına dair kısa bir özet:

• qwen-agent[code_interpreter]: Araç kullanımı desteğiyle birlikte kod yürütme ve yapılandırılmış akıl yürütme sağlayan çekirdek ajan çerçevesi.
• fastapi ve uvicorn: Birlikte eşzamanlı olmayan API backend'ini çalıştırır ve özetleyici mantığınızı sunar.
• python-dotenv ve python-dateutil: Ortam değişkenleri ve tarih/saat işlemleri için yardımcı kütüphaneler (gelecekte ölçekleme için faydalı).
• matplotlib: Grafik çizmek veya görsel çıktılar göstermek için kullanılır (opsiyonel) 

Projeyi yerelde çalıştırmak isterseniz, tüm bağımlılıkları yüklemek için şu komutu çalıştırın:

pip install -r requirements.txt

Adım 1.2: DockerFile kurulumu (opsiyonel)

Şimdi, uygulamamızı içeren minimal bir Python ortamı oluşturan ve 7864 portunu dışa açan bir Dockerfile hazırlayalım; böylece Chrome uzantısı FastAPI backend'ine istek gönderebilsin.

FROM python:3.10

WORKDIR /app
COPY . .

RUN pip install --no-cache-dir -r requirements.txt

EXPOSE 7864

CMD ["uvicorn", "app:app", "--host", "0.0.0.0", "--port", "7864"]

Bu kurulum, Docker yerine Uvicorn ile yerelde çalıştırmayı seçerseniz opsiyoneldir.

Adım 1.3: Qwen'i Ollama ile sunma

Sonrasında, Qwen3 modelini Ollama kullanarak yerelde indirip sunmanız gerekecek. Bu adım, LLM servisinin makinenizde barındırılmasıyla çevrimdışı çıkarım yapabilmenizi sağlar.

ollama pull qwen3:1.7b
ollama serve 

Adım 1.4: FastAPI özetleme sunucusunu oluşturma

app.py dosyası, Qwen-Agent aracılığıyla yerelde çalışan Qwen3:1.7B modelini kullanarak web sayfası içeriklerinin gerçek zamanlı özetlerini akışla sunan bir FastAPI sunucusu tanımlar.

Adım 1.4.1: İçe aktarımlar

FastAPI, akış yardımcıları ve modeli ile araç yeteneklerini saran Assistant gibi Qwen-Agent bileşenlerini içe aktararak başlayın.

import re
from fastapi import FastAPI, Request
from fastapi.responses import StreamingResponse
from pydantic import BaseModel
from typing import List, Dict, Any
from qwen_agent.agents import Assistant
import logging

Adım 1.4.2: FastAPI Uygulaması başlatma

Sonraki adımda, içeriği almak için basit bir RequestData şeması tanımlıyor ve bir Assistant bot örneği oluşturuyoruz. 

app = FastAPI()
class RequestData(BaseModel):
    content: str
bot = Assistant(
    llm={
        "model": "qwen3:1.7b",
        "model_server": "http://localhost:11434/v1",
        "api_key": "EMPTY"
    },
    function_list=["code_interpreter"],
    system_message="You are a summarization assistant. Directly output the cleaned summary of the given text without any reasoning, self-talk, thoughts, or internal planning steps. Do not include phrases like 'I think', 'maybe', 'let's', 'the user wants', or anything not part of the final summary. Your output must look like it was written by an editor, not a model."
)

Yukarıdaki kodda, bot, Qwen-Agent'in Assistant sınıfının bir örneğidir ve Ollama aracılığıyla yerelde sunulan Qwen3:1.7B modeliyle etkileşim kuracak şekilde yapılandırılmıştır. İçeriği analiz etmek ve gerekirse Python kodu çalıştırmak için yerleşik code_interpreter aracını kullanır. Özel bir system_message, kısa ve öz web sayfası özetleri üretmesi için davranışını yönlendirir.

Not: Yanıt süresini ve bellek kullanımını önemli ölçüde azaltmak için qwen3:0.6b veya qwen3:1.7b gibi daha küçük modelleri kullanabilirsiniz. Bu, yoğun akıl yürütme gerektirmeyen hızlı özetleme görevleri için özellikle faydalıdır.

Adım 1.4.3: Özetleyici rotası

Son olarak, bir uç nokta gelen içeriği okur ve model tarafından oluşturuldukça canlı özet metnini iletir. Akışlı çıktı kullanır; böylece kullanıcı, tam yanıtın üretilmesini beklemek zorunda kalmaz.

@app.post("/summarize_stream_status")
async def summarize_stream_status(data: RequestData):
    user_input = data.content
    def stream():
        try:
            yield "🔍 Reading content on website...\n"
            print(" Received text:", user_input[:200])
            messages = [
            {"role": "system", "content": "You are a summarization assistant. Directly output the cleaned summary of the given text without any reasoning, self-talk, thoughts, or internal planning steps. Do not include phrases like 'I think', 'maybe', 'let's', 'the user wants', or anything not part of the final summary. Your output must look like it was written by an editor, not a model."},
            {"role": "user", "content": "<nothink>\nSummarize the following text clearly and concisely. Do not include any internal thoughts, planning, or reasoning. Just return the final summary:\n\n" + user_input + "\n</nothink>"}
            ]
            yield "🧠 Generating summary...\n"
            result = bot.run(messages)
            result_list = list(result)
            print(" Raw result:", result_list)
            # Extract summary
            last_content = None
            for item in reversed(result_list):
                if isinstance(item, list):
                    for subitem in reversed(item):
                        if isinstance(subitem, dict) and "content" in subitem:
                            last_content = subitem["content"]
                            break
                if last_content:
                    break
            if not last_content:
                yield " No valid summary found.\n"
                return
            summary = re.sub(r"</?think>", "", last_content)
            summary = re.sub(
                r"(?s)^.*?(Summary:|Here's a summary|The key points are|Your tutorial|This tutorial|To summarize|Final summary:)", 
                "", 
                summary, 
                flags=re.IGNORECASE
            )
            summary = re.sub(r"\n{3,}", "\n\n", summary)
            summary = summary.strip()
            yield "\n📄 Summary:\n" + summary + "\n"
        except Exception as e:
            print(" Error:", e)
            yield f"\n Error: {str(e)}\n"
    return StreamingResponse(stream(), media_type="text/plain")

Özetleyicimizin çalışma şekli şöyle:

• Fonksiyon, ham web sayfası metnini tutan content adlı bir alan bekleyen RequestData şemasıyla POST verisini alır.
• Aşamalı olarak iletiler üretmek için iç içe bir stream() üreteci tanımlanır. Bu, nihai özet tamamlanmadan önce önyüze gerçek zamanlı geri bildirim gönderilmesini sağlar.
• İleti listesi, iç akıl yürütmeyi bastırmak için kullanıcı iletisinde açıkça bir </nothink> etiketi sarmalayıcısı içerir; ayrıntılı bir sistem komutu ise bu davranışı pekiştirir.
• Qwen-Agent botu, messages içinde tek bir kullanıcı girdisi bulunan bir liste ile bot.run(messages) kullanılarak çağrılır. 
• Model yanıtları akışla gelir ve result_list içine toplanır. Kod, LLM tarafından döndürülen en son içerik dizesini çıkarmak için listeyi sondan başa doğru döngüye sokar.
• Qwen'in <think> ve </think> gibi iç akıl yürütme işaretleri, regex ile çıktından kaldırılarak nihai özet temizlenir.
• Geçerli içerik bulunamazsa bir geri dönüş iletisi gönderilir. Aksi halde, temizlenmiş özet önyüze akışla iletilir.

Adım 2: Chrome Uzantısını Oluşturma

Bu bölüm, önyüz arayüzü, sayfa içeriğini çıkarmaya yönelik mantık, arka plan iletişim betikleri ve yapılandırma metadatasını içeren, uzantı için gerekli tüm dosyaları açıklar.

Tek tek betiklere geçmeden önce, her dosyanın ne yaptığına dair kısa bir özet:

• manifest.json: Uzantı metadatasını, izinleri ve betikleri tanımlayan yapılandırma dosyasıdır.
• popup.html: Chrome uzantısı açılır penceresi için görünür arayüzü bir düğme ve çıktı paneliyle tanımlar.
• popup.js: Önyüz mantığını yönetir; geçerli sekmenin metnini yakalar ve özeti UI'a akışla iletir.
• content.js: İstendiğinde görünür web sayfası içeriğini çıkarır; içerik betiği olarak görev yapar.
• background.js: Backend iletişimini koordine eder ve akışla gelen özetleri açılır pencereye iletir.
• icon.png: Chrome araç çubuğu ve uzantı yöneticisinde görüntülenen uzantı simgesidir.

Birlikte, bu dosyalar uzantının etkileşimli ve tepkisel olmasını, ayrıca yerel bir model sunucusuyla iletişim kurmasını sağlar.

Adım 1: Uzantı metadatası

manifest.json, Chrome için metadata içerir. Uzantının davranışını, izinlerini, arka plan servis çalışanını ve açılır pencere arayüzünü tanımlar.

{
    "manifest_version": 3,
    "name": "Web Summarizer",
    "version": "1.0",
    "description": "Summarize the content of the current page using a local LLM agent.",
    "permissions": [
      "scripting",
      "activeTab",
      "storage"
    ],
    "host_permissions": [
      "<all_urls>"
    ],
    "action": {
      "default_popup": "popup.html",
      "default_icon": "icon.png"
    },
    "background": {
      "service_worker": "background.js"
    },
    "content_scripts": [
      {
        "matches": ["<all_urls>"],
        "js": ["content.js"],
        "run_at": "document_idle"
      }
    ]
}  

Bu dosya, Chrome uzantınızın yapılandırmasını ve yeteneklerini tanımlar. scripting (JavaScript enjekte etmek), activeTab (geçerli sekmeye erişmek) ve storage (kullanıcı tercihlerini kaydetmek) gibi temel izinleri verir.

"<all_urls>" ile host_permissions alanı, uzantının herhangi bir web sayfasında çalışmasına izin verir. Ayrıca popup.html ve icon.png aracılığıyla uzantının arayüzünü kurar ve bir servis çalışanı (background.js) kullanarak arka plan davranışını kaydeder. Son olarak, gerektiğinde web sayfası içeriğiyle etkileşime olanak tanıyan bir içerik betiği (content.js) tanımlar.

Adım 2: Görünür bir arayüz oluşturma 

popup.html, uzantının görünür arayüzünü tanımlar. Görünür metni yakalayan etkin sekmeyle bağlantı kurar ve bunu backend sunucunuza gönderir. 

<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Web Summarizer Assistant</title>
  <style>
    body {
      width: 500px;
      height: 600px;
      background-color: aliceblue;
      
      
      
    }
    .container {
      display: flex;
      flex-direction: column;
      align-items: center;
      gap: 15px;
    }
    button {
      border: none;
      border-radius: 5px;
      background-
      color: white;
      
      
      cursor: pointer;
    }
    button:hover {
      background-
    }
    pre {
      background-
      border: 1px solid #ccc;
      border-radius: 5px;
      
      width: 90%;
      height: 350px;
      overflow: auto;
    }
    input[type="text"] {
      
      width: 90%;
      border-radius: 5px;
      border: 1px solid #ccc;
    }
  </style>
</head>
<body>
  <div class="container">
    <h2>Summarize Current Page</h2>
    <button id="summarizeBtn">Summarize</button>
    <pre id="output">Summary will appear here...</pre>
  </div>
  <script src="popup.js"></script>
</body>
</html>

Yukarıdaki kodu adım adım inceleyelim:

1. Önce, karakter kodlaması, görünüm alanı ayarları için meta etiketleri ve bir <title> etiketi içeren temel bir HTML yapısı kuruyoruz.
2. Ardından, <body> etiketi içinde, tüm UI öğelerini barındıran bir kapsayıcı yer alır; bunlar şunlardır:

• Kullanıcıya mevcut sayfayı özetlemesini söyleyen bir <h2> başlık.
• Kullanıcının içerik çıkarma ve özetlemeyi tetiklemek için tıkladığı bir Summarize düğmesi (“#summarizeBtn”).
• Özet akışla gelirken kaydırılabilir bir panel görevi gören bir <pre> öğesi (“#output”).

3. Açılır pencerenin temiz ve okunaklı görünmesi için gömülü CSS ile stil verilir. Çıktının kaydırılabilir ve belirgin olması için pre bloğu kullanılır.
4. popup.js betiği, düğme tıklamalarını dinler, sayfa içeriğini çıkarır, bunu FastAPI backend'ine gönderir ve özet metnini akışla çıktı paneline yazar.

Adım 3: Bir önyüz arayüzü oluşturma 

popup.js, düğme tıklamalarına yanıt veren, geçerli sekmeden metin çıkaran, bunu backend'e gönderen ve özeti gerçek zamanlı olarak çıktı alanına akışla yazan bir önyüz mantık denetleyicisidir.

document.addEventListener('DOMContentLoaded', function () {
    let serverAddress = '127.0.0.1'; 
    document.getElementById('summarizeBtn').addEventListener('click', async () => {
      const [tab] = await chrome.tabs.query({ active: true, currentWindow: true });
      chrome.scripting.executeScript(
        {
          target: { tabId: tab.id },
          func: () => {
            try {
              return document.body?.innerText || 'EMPTY';
            } catch (e) {
              return 'SCRIPT_ERROR';
            }
          }
        },
        async (results) => {
          const pageText = results?.[0]?.result || '';
          console.log(' Extracted text:', pageText.slice(0, 500));
          if (pageText === 'SCRIPT_ERROR') {
            document.getElementById('output').innerText = 'Could not access page content (script error).';
            return;
          }
          if (!pageText || pageText.trim() === 'EMPTY') {
            document.getElementById('output').innerText = ' No page text found.';
            return;
          }
          try {
            console.log( Sending streaming POST to http://${serverAddress}:7864/summarize_stream_status);
            const res = await fetch(http://${serverAddress}:7864/summarize_stream_status, {
            method: 'POST',
            headers: { 'Content-Type': 'application/json' },
            body: JSON.stringify({ content: pageText }),
            });
            const reader = res.body.getReader();
            const decoder = new TextDecoder();
            let resultText = '';
            while (true) {
            const { done, value } = await reader.read();
            if (done) break;
            const chunk = decoder.decode(value, { stream: true });
            resultText += chunk;
            document.getElementById('output').innerText = resultText;
            }
          } catch (err) {
            console.error(' Fetch error:', err);
            document.getElementById('output').innerText = ' Failed to get summary.\n' + err.message;
          }
        }
      );
    });
  });

Bu JavaScript dosyası, kullanıcıların tek tıkla web sayfası içeriğini çıkarıp özetlemesine imkân vererek Chrome uzantısının önyüz mantığını çalıştırır.

Nasıl çalıştığı şöyle:

• DOMContentLoaded ile pop-up yüklendiğinde "Summarize" düğmesine bir olay dinleyicisi eklenir.
• Düğmeye tıklanınca, uzantı chrome.tabs.query ile etkin sekmeyi sorgular.
• Ardından chrome.scripting.executeScript ile o sekmede bir içerik betiği çalıştırılır; bu betik sayfa gövdesinin innerText'ini çıkarmaya çalışır.
• Betik başarısız olursa veya boş içerik döndürürse, arayüzde uygun geri dönüş iletileri gösterilir.
• Metin başarıyla çıkarılırsa, http://127.0.0.1:7864/summarize_stream_status adresindeki yerel FastAPI backend'ine bir POST isteği olarak gönderilir.
• Yanıt, res.body.getReader() kullanılarak akışla okunur; bu sayede özetin parçaları çıktı panelinde gerçek zamanlı görünür.
• TextDecoder, akışla gelen her metin parçasını çözümler ve anlık olarak görüntüye ekler.
• Ağ veya backend hataları yakalanır ve hata ayıklama ya da kullanıcı geri bildirimi için açılır pencerede gösterilir.

Adım 4: Web sayfası içeriğini çıkarma

Web sayfası içeriğini backend'imize göndermeden önce, bunu geçerli sekmeden çıkarmanın bir yoluna ihtiyacımız var. content.js betiği, arka plan veya açılır pencere betiklerinden gelen iletileri dinler ve web sayfasından görünür metin içeriğini döndürür. 

chrome.runtime.onMessage.addListener((request, sender, sendResponse) => {
    if (request.type === "GET_PAGE_TEXT") {
      const bodyText = document.body.innerText.trim();
      sendResponse({ text: bodyText || null });
    }
});

Bu betik, "GET_PAGE_TEXT" türündeki iletileri dinler ve görünür gövde metnini (document.body.innerText) çıkarıp döndürerek yanıtlar. Bu sayede, arka plan çalışanı; her seferinde kod enjekte etmeye gerek kalmadan web sayfası içeriğini kolayca isteyebilir; iletişim temiz ve eşzamanlı olmayan şekilde kalır.

Adım 5: Backend koordinasyonu

Arka plan betiği (background.js), açılır pencere arayüzü ve içerik betikleri arasında köprü görevi görür. İleti aktarımının ve özetleme koordinasyonunun perde arkasında düzgün bir şekilde gerçekleşmesini sağlar.

chrome.runtime.onMessage.addListener(async (request, sender, sendResponse) => {
    if (request.type === "SUMMARIZE_PAGE") {
      const tabId = sender.tab.id;
        chrome.scripting.executeScript(
        {
          target: { tabId },
          func: () => {
            try {
              return document.body?.innerText || 'EMPTY';
            } catch (e) {
              return 'SCRIPT_ERROR';
            }
          }
        },
        async (results) => {
          const pageText = results?.[0]?.result || '';
          if (!pageText || pageText === 'SCRIPT_ERROR') {
            chrome.runtime.sendMessage({
              type: 'SUMMARY_RESULT',
              summary: ' Failed to read page text.',
            });
            return;
          }
          chrome.storage.local.get(['database_host'], async function (result) {
            const host = result.database_host || '127.0.0.1';
            try {
              const response = await fetch(http://${host}:7864/summarize_stream_status, {
                method: 'POST',
                headers: { 'Content-Type': 'application/json' },
                body: JSON.stringify({ content: pageText }),
              });
              const reader = response.body.getReader();
              const decoder = new TextDecoder();
              let fullSummary = '';
              while (true) {
                const { done, value } = await reader.read();
                if (done) break;
                const chunk = decoder.decode(value, { stream: true });
                fullSummary += chunk;
                chrome.runtime.sendMessage({
                  type: 'SUMMARY_PROGRESS',
                  chunk
                });
              }
              chrome.runtime.sendMessage({
                type: 'SUMMARY_DONE',
                summary: fullSummary
              });
            } catch (err) {
              chrome.runtime.sendMessage({
                type: 'SUMMARY_RESULT',
                summary: ' Error during summarization: ' + err.message
              });
            }
          });
        }
      );
      return true; 
    }
  });
  

Yukarıdaki kod, içerik çıkarma, özetleme ve gerçek zamanlı güncellemelerin sorunsuz akışını sağlar. Adım adım nasıl çalıştığı şöyle:

• Açılır penceredeki düğme tıklamasıyla tetiklenen "SUMMARIZE_PAGE" türündeki bir iletiyi dinler.
• Tetiklendikten sonra, sender.tab.id ile etkin sekmeyi belirler ve web sayfasından görünür metni çıkarmak için chrome.scripting.executeScript ile enjekte edilmiş bir betik çalıştırır.
• İçeriğe erişilemezse veya boşsa, bir geri dönüş iletisi gönderir.
• database_host'u (genellikle 127.0.0.1) Chrome'un yerel depolamasından alır ve çıkarılan içerikle FastAPI backend'ine bir POST isteği göndermek için kullanır.
• Sonra, bir akış bağlantısı açar ve yanıtı ReadableStreamDefaultReader ile parça parça okur.
• Her parça çözümlendikçe, 'SUMMARY_PROGRESS' türüyle açılır pencereye ara güncellemeler gönderir.
• Akış bittiğinde, tam özetle son bir ileti gönderir. Bu süreçte bir hata oluşursa, bunun yerine bir geri dönüş iletisi gönderilir.

Bu arka plan betiği, UI'ı engellemeden veya sayfayı yenilemeden Chrome uzantısında gerçek zamanlı, akışlı özetleri mümkün kılmanın anahtarıdır.

Adım 6: Uzantı simgesi ekleme

Uzantı için bir simge görseli seçin veya çizin ve uzantı klasöründe icon.png olarak kaydedin. Bizim kullanacağımız görsel:

Görsel FireFly ile oluşturuldu

Genel klasör yapınız şöyle görünmelidir:

QWEN-WEB-SUMMARIZER/
├── backend/
│   ├── app.py
│   ├── Dockerfile
│   └── requirements.txt
├── extension/
│   ├── background.js
│   ├── content.js
│   ├── icon.png
│   ├── manifest.json
│   ├── popup.html
│   └── popup.js

Adım 3: Uygulamayı Çalıştırma

Her şeyi yerelde çalıştırmak için, terminalde şu komutu çalıştırın:

uvicorn backend.app:app --host 0.0.0.0 --port 7864

Bu yöntem, Docker olmadan yerel geliştirme veya hata ayıklama için idealdir. Docker'da çalıştırmak için, terminalinizde şu komutları sırayla çalıştırın:

docker build -t qwen-agent-backend .
docker run -p 7864:7864 qwen-agent-backend

Chrome uzantısı 7864 portuyla iletişim kurar.  Şimdi, uzantınızı Chrome'da çalıştırmak için şu adımları izleyin:

• Chrome'u açın ve arama çubuğunun sağ tarafındaki “Uzantılar” seçeneğine tıklayın.
• “Geliştirici modunu” açın ve “Paketlenmemiş öğe yükle”ye tıklayın (sol üst).

• Ardından, tüm dosyaları içeren uzantı klasörümüzü yükleyin ve onayı bekleyin.
• Açılır pencere uzantı kurulumunu onayladıktan sonra, herhangi bir web sayfasında uzantı simgesine tıklayın ve yerel Qwen3 modelinizi kullanarak akışlı bir özet alın.

Sonuçlara bakalım:

Sonuç

Bu projede, Ollama aracılığıyla yerelde çalışan Qwen3:1.7B modelini ve Qwen-Agent çerçevesini kullanarak gerçek zamanlı bir web sayfası özetleme asistanı oluşturduk. LLM çıkarımını yönetecek bir FastAPI backend'i geliştirdik ve görünür sayfa içeriğini yakalayıp canlı akışla özet gösteren bir Chrome uzantısıyla entegre ettik.

Bu demo, Qwen-Agent'in tarayıcıda tamamen çevrimdışı, araç destekli akıl yürütme iş akışlarını nasıl mümkün kıldığını gösteriyor. Tarayıcı otomasyon araçları, araştırma yardımcıları veya belge tabanlı sohbet botları gibi daha gelişmiş yerel ajanlar için temel oluşturur.

Yapay zekâ ajanları hakkında daha fazla bilgi edinmek için şu bloglara göz atın:

• n8n: Örneklerle Rehber
• Yapay Zekâ Ajanı Türleri
• Agentic AI Nedir?