A RAG keresés alapjai: Hogyan tudod okossá tenni a weboldalad saját dokumentumokkal?
Bevezetés: Amikor a weboldalad nem csak információt jelenít meg, hanem értelmezni is tudja
Képzeld el, hogy egy kisvállalkozóként vagy egy céges portálon egy új támogatási rendszert vezetsz be. A látogatóid kérdéseket tesznek fel, de a válaszok nem a sablonos FAQ-ban, hanem a saját belső dokumentumokban, PDF-útmutatókban és korábbi levelezésekben rejtőznek. Itt jön képbe a RAG (Retrieval-Augmented Generation), ami lényegében egy olyan rendszer, ami nemcsak információt keres, hanem kontextusba helyezve, értelmesen meg is válaszol. Ha weboldalt készítesz, ez nem csak egy AI trükk – ez egy olyan szolgáltatás, amivel konkurenciaelőnyt biztosíthatsz az ügyfeleidnek.
Mi is az a RAG valójában?
RAG két lépésből áll: lekérésből (Retrieval) és kiegészítésből (Augmented Generation). Először a rendszer a felhasználó kérdésének lényegét kivonatolja, majd keres a saját dokumentumtáradban a legrelevánsabb információkért. Ezek alapján egy nyelvi modell (pl. egy AI) konkrét, forrásolt választ állít össze. Ez nem egy általános chatbot – ez egy szakértő, aki ismeri a te dokumentumaidat.
Kulcsfogalmak: Embeddings és AI Development
Az egész rendszer az embedding-eken (beágyazásokon) alapszik. Ez egy olyan technika, ami a szavakat, mondatokat számok (vektorok) sorozatává alakítja úgy, hogy a hasonló jelentésű szövegek a térben is közel kerüljenek. Az AI development ebben a kontextusban azt jelenti, hogy ezeket a beágyazásokat és a lekérdezéseket együttműködésre kényszeríted a te adatoddal.Hogyan illesztheted be egy weboldalba? Egy gyakorlati megközelítés
Tegyük fel, hogy egy WordPress alapú szakmai portált fejlesztesz, ahol a cikkek mellett a felhasználók kérdéseket tehetnek fel. A backend (PHP) felelős lesz a dokumentumok feldolgozásáért és a vektoros keresésért.
1. Backend (PHP): A dokumentumok előkészítése és keresés
A dokumentumokat (pl. PDF fájlokat) először szöveggé kell alakítani, majd beágyazásokat kell generálni belőlük. Ehhez külső API-t (pl. OpenAI) használhatsz. Az alábbi példa egy egyszerűsített keretrendszert mutat a dokumentumok vektorainak tárolására és keresésére.
documents[$id] = $text;
// Itt hívnád meg valójában az embedding API-t (pl. OpenAI)
// Szimuláljuk egy egyszerű vektorral
$this->embeddings[$id] = $this->generateSimpleEmbedding($text);
}
private function generateSimpleEmbedding($text) {
// Egy valós implementációban itt történne a komplex embedding generálás
// Most egy egyszerű, szimulált vektort adunk vissza
$words = str_word_count($text, 1);
$vector = array_fill(0, 10, 0); // 10 dimenziós szimulált vektor
// ... itt lenne a valós beágyazó logika ...
return $vector;
}
// Keresés a leginkább hasonló embedding-ű dokumentumok között
public function findRelevantDocuments($queryEmbedding, $topK = 3) {
$scores = [];
foreach ($this->embeddings as $id => $docEmbedding) {
// Egyszerű koszinusz hasonlóság számítás (szimulálva)
$similarity = $this->cosineSimilarity($queryEmbedding, $docEmbedding);
$scores[$id] = $similarity;
}
arsort($scores); // Csökkenő sorrend
return array_slice($scores, 0, $topK, true);
}
private function cosineSimilarity($vecA, $vecB) {
// Egyszerűsített számítás - valós implementációban teljes vektor műveletek
$dot = 0;
for ($i = 0; $i releváns dokumentumok -> válasz generálás (szimulálva)
public function getRAGAnswer($query) {
$queryEmbedding = $this->generateSimpleEmbedding($query);
$relevantDocs = $this->findRelevantDocuments($queryEmbedding);
$context = "";
foreach (array_keys($relevantDocs) as $docId) {
$context .= $this->documents[$docId] . "\n---\n";
}
// Itt általában külső LLM API-t hívnánk a $context és $query alapján
// Szimuláció: visszaadjuk a kontextust és a találatokat
return [
'context' => $context,
'relevant_doc_ids' => array_keys($relevantDocs)
];
}
}
// Példa használat
$processor = new DocumentRAGProcessor();
$processor->addDocument(1, "A WordPress weboldal készítés során fontos a SEO barát URL struktúra.");
$processor->addDocument(2, "A Bootstrap használata gyors, reszponzív webfejlesztést tesz lehetővé.");
$processor->addDocument(3, "CSS és SCSS segítségével testre szabható a weboldal megjelenése.");
$result = $processor->getRAGAnswer("Hogyan javíthatom a WordPress SEO-mat?");
print_r($result);
?>2. Frontend (jQuery, Bootstrap, SCSS): A felhasználói élmény
A frontend feladata, hogy egy letisztult, modern felületen megjelenítse a kérdés-kérdés lehetőséget és a válaszokat. Bootstrap segítségével gyorsan hozhatunk létre reszponzív felületet, SCSS-sel pedig könnyen testre szabhatjuk a kinézetet.
<!-- A HTML struktúra Bootstrap komponensekkel -->
<div class="rag-search-container container mt-5">
<div class="card shadow">
<div class="card-header bg-primary text-white">
<h5 class="mb-0"><i class="fas fa-search me-2"></i>Kérdezd a dokumentumtárat</h5>
</div>
<div class="card-body">
<div class="mb-3">
<label for="ragQuery" class="form-label">Tedd fel a kérdésed:</label>
<textarea class="form-control" id="ragQuery" rows="3"></textarea>
</div>
<button id="askButton" class="btn btn-success">
<i class="fas fa-paper-plane me-2"></i>Küldés
</button>
<div id="loadingSpinner" class="mt-3 text-center" style="display:none">
<div class="spinner-border text-primary" role="status">
<span class="visually-hidden">Betöltés...</span>
</div>
</div>
<div id="ragAnswer" class="mt-4 p-3 border rounded" style="display:none">
<!-- Ide jön a generált válasz -->
</div>
</div>
</div>
</div>// jQuery kezelő a lekérdezéshez és a válasz megjelenítéséhez
$(document).ready(function() {
$('#askButton').on('click', function() {
let query = $('#ragQuery').val().trim();
if (!query) {
alert('Kérjük, írj be egy kérdést!');
return;
}
// Megjelenítjük a betöltési animációt
$('#loadingSpinner').show();
$('#ragAnswer').hide().empty();
// AJAX hívás a PHP backendnek
$.ajax({
url: '/api/rag-query.php',
method: 'POST',
data: { query: query },
dataType: 'json'
})
.done(function(response) {
let answerHtml = `<h6 class="text-success">Válasz a dokumentumaid alapján:</h6>`;
answerHtml += `<p class="mb-3">${response.answer || 'Nincs pontos egyezés.'}</p>`;
if (response.sources && response.sources.length) {
answerHtml += `<hr><h6>Forrás dokumentumok:</h6><ul class="list-group list-group-flush">`;
response.sources.forEach(source => {
answerHtml += `<li class="list-group-item">${source.title}</li>`;
});
answerHtml += `</ul>`;
}
$('#ragAnswer').html(answerHtml).show();
})
.fail(function() {
$('#ragAnswer').html('<p class="text-danger">Hiba történt a válasz generálása közben.</p>').show();
})
.always(function() {
$('#loadingSpinner').hide();
});
});
});// SCSS stílusok a komponens testreszabásához
$primary-color: #4361ee;
$success-color: #06d6a0;
.rag-search-container {
.card {
border: none;
border-radius: 12px;
.card-header {
border-radius: 12px 12px 0 0 !important;
font-weight: 600;
}
}
#ragAnswer {
background-color: lighten($primary-color, 45%);
border-color: $primary-color !important;
transition: all 0.3s ease;
&:hover {
box-shadow: 0 4px 12px rgba($primary-color, 0.15);
}
}
#askButton {
background-color: $success-color;
border: none;
font-weight: 600;
padding: 0.75rem 1.5rem;
transition: background-color 0.3s;
&:hover {
background-color: darken($success-color, 10%);
}
}
}Gyakori buktatók és tanácsok
1. Minőségi adatok, minőségi válaszok: Ha a feltöltött dokumentumok rendezetlenek vagy rossz minőségűek, a RAG rendszer is rossz válaszokat fog adni. A dokumentumok előzetes strukturálása és tisztítása kulcsfontosságú. 2. Nem csak technikai kérdés: A kisvállalkozó számfontosságú, hogy ez a rendszer csökkentheti a támogatási terhelést, a döntéshozó pedig látja a hatékonyságnövekedést. Ne csak a technikai részleteket emeld ki, hanem az üzleti hasznot is. 3. Teljesítmény és skálázhatóság: Nagy dokumentumtárak esetén a vektoros keresés lassú lehet. Megoldások: chunking (dokumentumok kisebb darabokra bontása), megfelelő indexelés (pl. FAISS, Pinecone). 4. Biztonság: Ügyelj arra, hogy a RAG rendszer csak azokhoz a dokumentumokhoz férjen hozzá, amelyekhez a felhasználónak joga van. Ez különösen fontos, ha belső céges portálon használod.
Összegzés: Miért érdemes RAG-ot építeni a weboldaladba?
A RAG technológia nem csak egy fejlesztői eszköz – egy stratégiai erősséggé válhat a weboldalad számára. Egy WordPress weboldal készítés során ezzel a funkcióval megkülönböztetheted magát a versenytársaktól. Egy cég számára pedig egy intelligens, önfenntartó tudásbázist jelent, amely 0/24-ben válaszol. Az AI development ebben a formában már nem egy távoli jövőképe, hanem egy olyan integrálható komponens, amely a webfejlesztés következő lépcsőfokát jelenti. Kezdd kicsiben – egy jól strukturált dokumentumkészlettel –, és építs rá egy olyan rendszert, amely nem csak megjeleníti az információt, hanem értelmes párbeszédre is képes.
A weboldalon megjelenő szöveges és vizuális tartalmak előállításához mesterséges intelligenciát (AI) használunk.