Modern web uygulamalar\u0131nda kullan\u0131c\u0131 deneyimini d\u00f6n\u00fc\u015ft\u00fcren, sunucusuz ve 1 milisaniyenin alt\u0131nda tepki s\u00fcresiyle \u00e7al\u0131\u015fan semantik arama entegrasyonunu ke\u015ffedin. React projelerinizde arama yeteneklerini nas\u0131l geli\u015ftirece\u011finizi \u00f6\u011frenin. Kullan\u0131c\u0131lar\u0131n\u0131z\u0131n arad\u0131klar\u0131 bilgiye an\u0131nda, do\u011fru ve ba\u011flamsal olarak ula\u015fmas\u0131n\u0131 sa\u011flamak, g\u00fcn\u00fcm\u00fcz dijital d\u00fcnyas\u0131nda rekabet avantaj\u0131 elde etmenin temel yollar\u0131ndan biridir. Ancak geleneksel anahtar kelime tabanl\u0131 arama motorlar\u0131, genellikle kullan\u0131c\u0131 niyetini tam olarak anlayamaz ve alakas\u0131z sonu\u00e7lar sunabilir. Peki ya arama deneyimini tamamen yeniden tan\u0131mlayabilir, arka u\u00e7 (backend) sunucular\u0131na ihtiya\u00e7 duymadan, ultra h\u0131zl\u0131 ve anlam tabanl\u0131 bir arama motorunu do\u011frudan React uygulaman\u0131za entegre edebilirsek?<\/p>\n
Bu makale, tam da bu sorunun cevab\u0131n\u0131 veriyor. React tabanl\u0131 uygulamalar\u0131n\u0131za sunucusuz (serverless) ve 1 milisaniyenin alt\u0131nda (sub-1ms) tepki s\u00fcresiyle \u00e7al\u0131\u015fan semantik arama yeteneklerini nas\u0131l ekleyece\u011finizi ad\u0131m ad\u0131m a\u00e7\u0131klayaca\u011f\u0131z. Geleneksel arama motorlar\u0131n\u0131n s\u0131n\u0131rl\u0131l\u0131klar\u0131n\u0131 a\u015farak, kullan\u0131c\u0131lar\u0131n do\u011fal dilde yapt\u0131klar\u0131 sorgular\u0131 anlayabilen ve onlara en alakal\u0131 sonu\u00e7lar\u0131 sunabilen bir sistem kuraca\u011f\u0131z. Bu yenilik\u00e7i yakla\u015f\u0131m, hem geli\u015ftirme maliyetlerini d\u00fc\u015f\u00fcrecek hem de kullan\u0131c\u0131lar\u0131n\u0131za ola\u011fan\u00fcst\u00fc bir deneyim sunacakt\u0131r. Haz\u0131rsan\u0131z, web geli\u015ftirmenin gelece\u011fine do\u011fru bir yolculu\u011fa \u00e7\u0131kal\u0131m.<\/p>\n
Geleneksel arama motorlar\u0131 genellikle anahtar kelime e\u015fle\u015ftirmesine dayan\u0131r. Yani, “en iyi kahve makinesi” yazd\u0131\u011f\u0131n\u0131zda, sistem “kahve” ve “makinesi” kelimelerini i\u00e7eren belgeleri arar. Bu yakla\u015f\u0131m, basit sorgular i\u00e7in yeterli olsa da, kullan\u0131c\u0131 niyetini veya sorgunun arkas\u0131ndaki anlam\u0131 anlamakta yetersiz kal\u0131r. \u00d6rne\u011fin, “sabahlar\u0131 beni uyand\u0131racak bir i\u00e7ecek” arad\u0131\u011f\u0131n\u0131zda, anahtar kelime tabanl\u0131 bir sistem “uyand\u0131racak” veya “i\u00e7ecek” kelimelerini i\u00e7eren rastgele sonu\u00e7lar getirebilir. Oysa semantik arama, bu sorgunun “kahve” veya “enerji i\u00e7ece\u011fi” gibi \u00fcr\u00fcnlerle ilgili oldu\u011funu anlayabilir.<\/p>\n
Semantik arama (semantic search), anahtar kelime e\u015fle\u015ftirmesinin \u00f6tesine ge\u00e7erek, sorgular\u0131n ve belgelerin arkas\u0131ndaki anlam\u0131 (semantics) anlamaya odaklanan bir arama t\u00fcr\u00fcd\u00fcr. Bu, kullan\u0131c\u0131lar\u0131n do\u011fal dilde yapt\u0131klar\u0131 sorgular\u0131n ba\u011flam\u0131n\u0131 ve niyetini kavrayarak, onlara \u00e7ok daha alakal\u0131 ve do\u011fru sonu\u00e7lar sunulmas\u0131n\u0131 sa\u011flar. \u00d6rne\u011fin, bir e-ticaret sitesinde “Anneler G\u00fcn\u00fc i\u00e7in anlaml\u0131 bir hediye” arad\u0131\u011f\u0131n\u0131zda, semantik arama, sadece “hediye” kelimesini i\u00e7eren \u00fcr\u00fcnleri de\u011fil, ayn\u0131 zamanda “\u00f6zel”, “duygusal”, “ki\u015fiselle\u015ftirilmi\u015f” gibi anlamlarla ili\u015fkili \u00fcr\u00fcnleri de \u00f6nceliklendirebilir. Bu, kullan\u0131c\u0131lar\u0131n arad\u0131klar\u0131n\u0131 daha h\u0131zl\u0131 ve verimli bir \u015fekilde bulmalar\u0131na yard\u0131mc\u0131 olurken, ayn\u0131 zamanda uygulaman\u0131z\u0131n genel kullan\u0131c\u0131 deneyimini de \u00f6nemli \u00f6l\u00e7\u00fcde iyile\u015ftirir.<\/p>\n
Geleneksel anahtar kelime aramas\u0131, “elma” arad\u0131\u011f\u0131n\u0131zda “elma” kelimesi ge\u00e7en her \u015feyi getirir. Ancak “sa\u011fl\u0131kl\u0131 meyveler” arad\u0131\u011f\u0131n\u0131zda, “elma” kelimesi ge\u00e7mese bile elma ile ilgili i\u00e7eri\u011fi getirmesi semantik araman\u0131n g\u00fcc\u00fcd\u00fcr. Geleneksel arama, e\u015f anlaml\u0131 kelimeleri (sinonimleri) veya ilgili kavramlar\u0131 anlamakta zorlan\u0131r. \u00d6rne\u011fin, “araba” ve “otomobil” kelimeleri farkl\u0131 kabul edilir. Semantik arama ise bu iki kelimenin ayn\u0131 anlama geldi\u011fini bilir. Ayr\u0131ca, geleneksel arama, sorgunun ba\u011flam\u0131n\u0131 g\u00f6z ard\u0131 eder. “Bank” kelimesi, bir finans kurumu da olabilir, nehir kenar\u0131ndaki bir y\u00fckselti de. Semantik arama, sorgunun di\u011fer kelimeleriyle birlikte bu ba\u011flam\u0131 \u00e7\u00f6zebilir. Bu derin anlama yetene\u011fi, kullan\u0131c\u0131lara sadece kelimelerin de\u011fil, fikirlerin ve niyetlerin e\u015fle\u015fti\u011fi sonu\u00e7lar sunarak, arama deneyimini devrim niteli\u011finde geli\u015ftirir.<\/p>\n
Semantik araman\u0131n kalbinde vekt\u00f6r g\u00f6mme (vector embeddings) kavram\u0131 yatar. Vekt\u00f6r g\u00f6mme, metin, resim veya ses gibi karma\u015f\u0131k verileri, \u00e7ok boyutlu bir uzayda say\u0131sal vekt\u00f6rlere d\u00f6n\u00fc\u015ft\u00fcrme i\u015flemidir. Bu vekt\u00f6rler, verinin anlamsal \u00f6zelliklerini ve ba\u011flam\u0131n\u0131 yakalar. \u00d6rne\u011fin, “kedi” ve “k\u00f6pek” kelimeleri, bu \u00e7ok boyutlu uzayda birbirine yak\u0131n vekt\u00f6rlere sahipken, “ta\u015f” kelimesi daha uzak bir vekt\u00f6re sahip olacakt\u0131r. \u00c7\u00fcnk\u00fc “kedi” ve “k\u00f6pek” benzer \u00f6zelliklere (evcil hayvan, memeli) sahipken, “ta\u015f” tamamen farkl\u0131 bir kategoriye aittir. Bu sayede, bir sorguyu da vekt\u00f6re d\u00f6n\u00fc\u015ft\u00fcrd\u00fc\u011f\u00fcm\u00fczde, bu sorgu vekt\u00f6r\u00fcne en yak\u0131n olan belge vekt\u00f6rlerini bularak, anlamsal olarak en alakal\u0131 sonu\u00e7lar\u0131 elde edebiliriz. Bu yak\u0131nl\u0131\u011f\u0131 \u00f6l\u00e7mek i\u00e7in kosin\u00fcs benzerli\u011fi (cosine similarity) veya \u00d6klid mesafesi (Euclidean distance) gibi matematiksel y\u00f6ntemler kullan\u0131l\u0131r. Kosin\u00fcs benzerli\u011fi, iki vekt\u00f6r aras\u0131ndaki a\u00e7\u0131y\u0131 \u00f6l\u00e7er; a\u00e7\u0131 ne kadar k\u00fc\u00e7\u00fckse, vekt\u00f6rler o kadar benzerdir. Bu teknoloji, b\u00fcy\u00fck dil modellerinin (LLM’ler) ve yapay zeka tabanl\u0131 sistemlerin temelini olu\u015fturur ve anlamsal araman\u0131n bu kadar g\u00fc\u00e7l\u00fc olmas\u0131n\u0131 sa\u011flar.<\/p>\n
Geleneksel olarak, semantik arama yetenekleri b\u00fcy\u00fck sunucu altyap\u0131lar\u0131 gerektirir. Ancak sunucusuz (serverless) mimari ve modern taray\u0131c\u0131 teknolojileri sayesinde, bu g\u00fc\u00e7l\u00fc yetenekleri do\u011frudan istemci taraf\u0131na (client-side) ta\u015f\u0131yabiliriz. Bu yakla\u015f\u0131m, hem maliyetleri d\u00fc\u015f\u00fcr\u00fcr hem de performans a\u00e7\u0131s\u0131ndan inan\u0131lmaz avantajlar sunar. Sunucusuz, yani arka u\u00e7 (backend) sunucular\u0131na ihtiya\u00e7 duymayan bir arama motoru kurmak, uygulaman\u0131z\u0131n da\u011f\u0131t\u0131m\u0131n\u0131 basitle\u015ftirir ve bak\u0131m y\u00fck\u00fcn\u00fc azalt\u0131r.<\/p>\n
Sunucusuz ve istemci taraf\u0131 yakla\u015f\u0131m\u0131n\u0131n bir\u00e7ok cazip avantaj\u0131 bulunmaktad\u0131r. \u0130lk olarak, maliyet etkinli\u011fi \u00f6n plandad\u0131r. Arama sorgular\u0131n\u0131 i\u015flemek i\u00e7in s\u00fcrekli \u00e7al\u0131\u015fan bir sunucuya ihtiya\u00e7 duymad\u0131\u011f\u0131n\u0131z i\u00e7in, sunucu bar\u0131nd\u0131rma ve i\u015fletme maliyetlerinden \u00f6nemli \u00f6l\u00e7\u00fcde tasarruf edersiniz. G\u00f6mme vekt\u00f6rlerini olu\u015fturma a\u015famas\u0131 i\u00e7in bir kez sunucusuz fonksiyon (\u00f6rne\u011fin AWS Lambda, Azure Functions) kullanmak yeterlidir, sonras\u0131nda t\u00fcm arama i\u015flemi kullan\u0131c\u0131n\u0131n taray\u0131c\u0131s\u0131nda ger\u00e7ekle\u015fir. \u0130kincisi, h\u0131z ve performans a\u00e7\u0131s\u0131ndan e\u015fsizdir. Veriler do\u011frudan kullan\u0131c\u0131n\u0131n cihaz\u0131nda i\u015flendi\u011fi i\u00e7in, a\u011f gecikmeleri (network latency) minimuma iner ve “1ms alt\u0131” tepki s\u00fcreleri elde etmek m\u00fcmk\u00fcn hale gelir. \u00dc\u00e7\u00fcnc\u00fcs\u00fc, \u00f6l\u00e7eklenebilirlik kendili\u011finden gelir. Kullan\u0131c\u0131 say\u0131s\u0131 artt\u0131k\u00e7a, her kullan\u0131c\u0131n\u0131n cihaz\u0131 kendi arama i\u015flemini yapt\u0131\u011f\u0131 i\u00e7in, sunucu taraf\u0131nda ek bir y\u00fck olu\u015fmaz. Bu da uygulaman\u0131z\u0131n milyonlarca kullan\u0131c\u0131ya sorunsuz hizmet verebilece\u011fi anlam\u0131na gelir. Ancak, bu yakla\u015f\u0131m\u0131n baz\u0131 zorluklar\u0131 da vard\u0131r. En b\u00fcy\u00fck zorluklardan biri, veri setinin boyutudur. B\u00fcy\u00fck veri setlerinin tamam\u0131n\u0131 kullan\u0131c\u0131n\u0131n taray\u0131c\u0131s\u0131na indirmek, ilk y\u00fckleme s\u00fcresini uzatabilir ve cihaz\u0131n belle\u011fini zorlayabilir. Bu nedenle, veri setini optimize etmek, par\u00e7alara ay\u0131rmak veya sadece gerekli k\u0131s\u0131mlar\u0131 y\u00fcklemek gibi stratejiler geli\u015ftirmek kritik \u00f6nem ta\u015f\u0131r. Ayr\u0131ca, istemci taraf\u0131 i\u015flem g\u00fcc\u00fc, \u00e7ok b\u00fcy\u00fck ve karma\u015f\u0131k modeller i\u00e7in s\u0131n\u0131rlay\u0131c\u0131 olabilir. Ancak \u00e7o\u011fu senaryo i\u00e7in bu yakla\u015f\u0131mlar olduk\u00e7a yeterlidir.<\/p>\n
Semantik arama motorumuzun temelini, her bir belgenin veya \u00f6\u011fenin (\u00fcr\u00fcn, makale vb.) temsil eden vekt\u00f6r g\u00f6mmeler olu\u015fturur. Bu g\u00f6mmeler, uygulaman\u0131n \u00e7al\u0131\u015fmas\u0131 s\u0131ras\u0131nda de\u011fil, genellikle bir kerelik veya periyodik bir i\u015flemle arka planda (offline) olu\u015fturulur. Bu i\u015flemi bir sunucusuz fonksiyon (\u00f6rne\u011fin, bir AWS Lambda fonksiyonu veya Google Cloud Function) kullanarak otomatikle\u015ftirebilirsiniz. Bu fonksiyon, elinizdeki metin verilerini (\u00f6rne\u011fin, \u00fcr\u00fcn a\u00e7\u0131klamalar\u0131, blog yaz\u0131lar\u0131) al\u0131r ve Sentence-BERT, OpenAI Embeddings API’si veya Hugging Face modelleri gibi \u00f6nceden e\u011fitilmi\u015f bir dil modeli kullanarak her bir metin i\u00e7in say\u0131sal bir vekt\u00f6r dizisi (embedding) olu\u015fturur. Bu vekt\u00f6rler, genellikle y\u00fcksek boyutlu (\u00f6rne\u011fin, 384, 768 veya 1536 boyutlu) ondal\u0131k say\u0131lardan olu\u015fur.<\/p>\n
Olu\u015fturulan bu vekt\u00f6rler, daha sonra istemci taraf\u0131nda kolayca eri\u015filebilir bir formatta saklanmal\u0131d\u0131r. En yayg\u0131n y\u00f6ntemlerden biri, bu vekt\u00f6rleri bir JSON dosyas\u0131 olarak kaydetmektir. \u00d6rne\u011fin:<\/p>\n
\n [\n {\n \"id\": \"urun-1\",\n \"text\": \"K\u0131\u015fl\u0131k s\u0131cak tutan mont\",\n \"embedding\": [0.123, 0.456, ..., 0.789]\n },\n {\n \"id\": \"urun-2\",\n \"text\": \"Yazl\u0131k hafif elbise\",\n \"embedding\": [0.987, 0.654, ..., 0.321]\n }\n ]\n <\/code><\/pre>\n<\/div>\nBu JSON dosyas\u0131, uygulaman\u0131z\u0131n bir par\u00e7as\u0131 olarak veya bir \u0130\u00e7erik Da\u011f\u0131t\u0131m A\u011f\u0131 (CDN) \u00fczerinden sunulabilir. Daha b\u00fcy\u00fck veri setleri i\u00e7in, bu verileri IndexedDB gibi istemci taraf\u0131 veritabanlar\u0131nda depolayarak daha h\u0131zl\u0131 eri\u015fim sa\u011flayabilir veya verileri par\u00e7alara ay\u0131r\u0131p (chunking) sadece ihtiya\u00e7 duyulan k\u0131s\u0131mlar\u0131 y\u00fckleyebilirsiniz. Bu sayede, React uygulaman\u0131z ba\u015flang\u0131\u00e7ta t\u00fcm veriyi indirmek zorunda kalmaz, bu da ilk y\u00fckleme s\u00fcresini optimize eder.<\/p>\n
React Uygulamas\u0131nda Arama Motoru Kurulumu<\/h4>\n
Veri haz\u0131rl\u0131\u011f\u0131 tamamland\u0131ktan sonra, s\u0131ra React uygulaman\u0131zda bu vekt\u00f6rleri kullanarak bir arama motoru kurmaya gelir. Bu a\u015famada, istemci taraf\u0131nda h\u0131zl\u0131 ve verimli vekt\u00f6r benzerli\u011fi aramas\u0131 yapabilen bir k\u00fct\u00fcphaneye ihtiyac\u0131m\u0131z var. hnswlib-node<\/code><\/a> k\u00fct\u00fcphanesinin WebAssembly (WASM) portu olan hnswlib-wasm<\/code><\/a>, bu i\u015f i\u00e7in m\u00fckemmel bir se\u00e7enektir. HNSW (Hierarchical Navigable Small World) algoritmas\u0131, b\u00fcy\u00fck veri setlerinde bile en yak\u0131n kom\u015fu aramas\u0131n\u0131 (nearest neighbor search) ola\u011fan\u00fcst\u00fc h\u0131zlarda ger\u00e7ekle\u015ftirebilen, son teknoloji bir indeksleme y\u00f6ntemidir.<\/p>\n\u0130lk ad\u0131m olarak, hnswlib-wasm<\/code> k\u00fct\u00fcphanesini projenize eklemelisiniz:<\/p>\n\n\n npm install hnswlib-wasm\n # veya\n yarn add hnswlib-wasm\n <\/code><\/pre>\n<\/div>\nDaha sonra, React uygulaman\u0131zda verileri y\u00fckleyecek ve HNSW indeksini olu\u015fturacak bir bile\u015fen veya hook tasarlayabilirsiniz. Bu i\u015flem, genellikle uygulaman\u0131n ba\u015flang\u0131c\u0131nda veya arama bile\u015feni y\u00fcklendi\u011finde bir kez yap\u0131l\u0131r.<\/p>\n
\n\n import React, { useState, useEffect, useRef } from 'react';\n import { HierarchicalNSW } from 'hnswlib-wasm';\n\n function SemanticSearch() {\n const [query, setQuery] = useState('');\n const [results, setResults] = useState([]);\n const hnswIndex = useRef(null);\n const data = useRef([]); \/\/ Orijinal verileri saklamak i\u00e7in\n\n useEffect(() => {\n const loadDataAndBuildIndex = async () => {\n \/\/ G\u00f6mme vekt\u00f6rlerini i\u00e7eren JSON dosyas\u0131n\u0131 y\u00fckleyin\n const response = await fetch('\/data\/embeddings.json');\n const embeddedData = await response.json();\n\n \/\/ Orijinal verileri ve g\u00f6mmeleri ayr\u0131 ayr\u0131 saklay\u0131n\n data.current = embeddedData;\n\n \/\/ Vekt\u00f6r boyutunu ilk \u00f6\u011feden al\u0131n\n const dim = embeddedData[0].embedding.length;\n const maxElements = embeddedData.length;\n\n \/\/ HNSW indeksini ba\u015flat\u0131n\n const index = new HierarchicalNSW('cosine', dim); \/\/ Kosin\u00fcs benzerli\u011fi kullan\u0131yoruz\n index.initIndex(maxElements);\n index.set NumThreads(navigator.hardwareConcurrency || 4); \/\/ Paralel i\u015flem i\u00e7in\n\n \/\/ Verileri indekse ekleyin\n embeddedData.forEach((item, i) => {\n index.addPoint(item.embedding, i); \/\/ Vekt\u00f6r\u00fc ve orijinal veri indeksini ekle\n });\n\n hnswIndex.current = index;\n console.log('HNSW indeksi ba\u015far\u0131yla y\u00fcklendi ve olu\u015fturuldu.');\n };\n\n loadDataAndBuildIndex();\n }, []);\n\n const handleSearch = async (e) => {\n setQuery(e.target.value);\n if (!hnswIndex.current || e.target.value.length < 3) {\n setResults([]);\n return;\n }\n\n \/\/ Sorgu metnini vekt\u00f6re d\u00f6n\u00fc\u015ft\u00fcrmek i\u00e7in bir API \u00e7a\u011fr\u0131s\u0131 veya client-side model kullan\u0131n\n \/\/ Bu \u00f6rnekte, basitlik ad\u0131na sabit bir vekt\u00f6r kullanaca\u011f\u0131z.\n \/\/ Ger\u00e7ek uygulamada, sorguyu bir dil modeline g\u00f6nderip vekt\u00f6r\u00fcn\u00fc alman\u0131z gerekir.\n const queryEmbedding = await getQueryEmbedding(e.target.value); \/\/ Bu fonksiyonu sizin sa\u011flaman\u0131z gerekiyor\n\n if (!queryEmbedding) {\n setResults([]);\n return;\n }\n\n const k = 5; \/\/ En yak\u0131n 5 sonucu getir\n const searchResult = hnswIndex.current.searchKNN(queryEmbedding, k);\n \n const foundItems = searchResult.neighbors.map(index => data.current[index]);\n setResults(foundItems);\n };\n\n \/\/ Bu fonksiyon, sorgu metnini al\u0131p vekt\u00f6r g\u00f6mmeye d\u00f6n\u00fc\u015ft\u00fcrmelidir.\n \/\/ Ger\u00e7ek bir uygulamada, bu bir API \u00e7a\u011fr\u0131s\u0131 (\u00f6rn. OpenAI) veya\n \/\/ client-side \u00e7al\u0131\u015fan k\u00fc\u00e7\u00fck bir model (\u00f6rn. ONNX Runtime ile) olabilir.\n const getQueryEmbedding = async (text) => {\n \/\/ \u00d6rnek: Basitlik ad\u0131na, burada ger\u00e7ek bir g\u00f6mme olu\u015fturma i\u015flemi yap\u0131lmam\u0131\u015ft\u0131r.\n \/\/ Normalde, bir API'ye istek g\u00f6nderirsiniz:\n \/\/ const response = await fetch('\/api\/get-embedding', { method: 'POST', body: JSON.stringify({ text }) });\n \/\/ const data = await response.json();\n \/\/ return data.embedding;\n console.warn(\"getQueryEmbedding fonksiyonu hen\u00fcz ger\u00e7ek bir g\u00f6mme olu\u015fturmuyor. L\u00fctfen bu k\u0131sm\u0131 uygulaman\u0131za g\u00f6re g\u00fcncelleyin.\");\n \/\/ Dummy embedding for demonstration (must match the dimension of your data embeddings)\n return new Array(data.current[0].embedding.length).fill(0).map(() => Math.random());\n };\n\n return (\n \n \n {results.map((item) => (\n - \n {item.text}<\/strong> (ID: {item.id})\n <\/li>\n ))}\n <\/ul>\n <\/div>\n );\n }\n\n export default SemanticSearch;\n <\/code><\/pre>\n<\/div>\n
Yukar\u0131daki kod \u00f6rne\u011finde, getQueryEmbedding<\/code> fonksiyonunun ger\u00e7ek bir g\u00f6mme olu\u015fturma i\u015flemi yapmad\u0131\u011f\u0131na dikkat edin. Bu fonksiyonu, uygulaman\u0131z\u0131n gereksinimlerine g\u00f6re bir API \u00e7a\u011fr\u0131s\u0131 (\u00f6rne\u011fin, bir sunucusuz fonksiyon \u00fczerinden OpenAI Embeddings API’sine) veya taray\u0131c\u0131da \u00e7al\u0131\u015fan k\u00fc\u00e7\u00fck bir dil modeli (\u00f6rne\u011fin, ONNX Runtime ve Transformers.js ile) kullanarak hayata ge\u00e7irmelisiniz. Sorgu metnini vekt\u00f6re d\u00f6n\u00fc\u015ft\u00fcrme i\u015flemi, semantik araman\u0131n can damar\u0131d\u0131r.<\/p>\n1ms Alt\u0131 Performans \u0130\u00e7in Optimizasyon Stratejileri<\/h3>\n
React uygulaman\u0131zda semantik arama \u00f6zelli\u011fini entegre etmek bir ba\u015flang\u0131\u00e7t\u0131r, ancak as\u0131l zorluk bunu 1 milisaniyenin alt\u0131nda bir tepki s\u00fcresiyle \u00e7al\u0131\u015ft\u0131rmakt\u0131r. Bu t\u00fcr bir performans, kullan\u0131c\u0131 deneyimini radikal bir \u015fekilde iyile\u015ftirir ve uygulaman\u0131z\u0131 rakiplerinden ay\u0131r\u0131r. Bu hedefe ula\u015fmak i\u00e7in birka\u00e7 \u00f6nemli optimizasyon stratejisi uygulamam\u0131z gerekiyor.<\/p>\n
WebAssembly (WASM) ve HNSW Algoritmas\u0131<\/h4>\n
Performans\u0131n anahtar\u0131, yo\u011fun matematiksel i\u015flemleri taray\u0131c\u0131da inan\u0131lmaz h\u0131zlarda ger\u00e7ekle\u015ftirebilen WebAssembly (WASM) teknolojisindedir. Vekt\u00f6r benzerli\u011fi hesaplamalar\u0131 ve HNSW (Hierarchical Navigable Small World) gibi karma\u015f\u0131k indeksleme algoritmalar\u0131, JavaScript’te \u00e7al\u0131\u015ft\u0131\u011f\u0131nda yava\u015f kalabilir. Ancak bu algoritmalar\u0131n WASM’ye derlenmi\u015f versiyonlar\u0131, neredeyse yerel (native) uygulama h\u0131z\u0131nda \u00e7al\u0131\u015f\u0131r. hnswlib-wasm<\/code> gibi k\u00fct\u00fcphaneler, HNSW algoritmas\u0131n\u0131 WASM olarak sunarak, milyonlarca vekt\u00f6r aras\u0131nda bile milisaniyeler i\u00e7inde en yak\u0131n kom\u015fular\u0131 bulmay\u0131 m\u00fcmk\u00fcn k\u0131lar. Bu, arama sorgular\u0131n\u0131n an\u0131nda yan\u0131tlanmas\u0131n\u0131 sa\u011flayarak, kullan\u0131c\u0131lar\u0131n ak\u0131c\u0131 ve kesintisiz bir deneyim ya\u015famas\u0131n\u0131 garantiler.<\/p>\nWeb Workers ile Arka Planda \u0130\u015flem<\/h4>\n
Taray\u0131c\u0131lar tek i\u015f par\u00e7ac\u0131kl\u0131 (single-threaded) yap\u0131ya sahiptir, yani uzun s\u00fcren bir i\u015flem ana i\u015f par\u00e7ac\u0131\u011f\u0131n\u0131 bloke edebilir ve kullan\u0131c\u0131 aray\u00fcz\u00fcn\u00fcn (UI) donmas\u0131na neden olabilir. Semantik arama, \u00f6zellikle b\u00fcy\u00fck veri setleri \u00fczerinde \u00e7al\u0131\u015f\u0131rken veya karma\u015f\u0131k sorgu g\u00f6mmeleri olu\u015fturulurken yo\u011fun bir i\u015flem olabilir. Bu sorunu \u00e7\u00f6zmek i\u00e7in Web Workers kullanmak kritik \u00f6neme sahiptir. Web Workers, taray\u0131c\u0131n\u0131n ana i\u015f par\u00e7ac\u0131\u011f\u0131ndan ba\u011f\u0131ms\u0131z olarak arka planda kod \u00e7al\u0131\u015ft\u0131rman\u0131za olanak tan\u0131r. Arama indeksini y\u00fckleme, olu\u015fturma ve arama sorgular\u0131n\u0131 i\u015fleme gibi t\u00fcm yo\u011fun i\u015flemleri bir Web Worker’a devrederek, ana i\u015f par\u00e7ac\u0131\u011f\u0131n\u0131n serbest kalmas\u0131n\u0131 ve kullan\u0131c\u0131 aray\u00fcz\u00fcn\u00fcn her zaman duyarl\u0131 (responsive) kalmas\u0131n\u0131 sa\u011flayabiliriz. Bu, kullan\u0131c\u0131lar\u0131n arama yaparken bile sayfada gezinmeye veya di\u011fer etkile\u015fimleri s\u00fcrd\u00fcrmeye devam edebilece\u011fi anlam\u0131na gelir.<\/p>\n
\n\n \/\/ worker.js\n import { HierarchicalNSW } from 'hnswlib-wasm';\n\n let hnswIndex = null;\n let data = [];\n\n self.onmessage = async (event) => {\n const { type, payload } = event.data;\n\n switch (type) {\n case 'init':\n data = payload.embeddedData;\n const dim = data[0].embedding.length;\n const maxElements = data.length;\n\n hnswIndex = new HierarchicalNSW('cosine', dim);\n hnswIndex.initIndex(maxElements);\n hnswIndex.setNumThreads(navigator.hardwareConcurrency || 4);\n\n data.forEach((item, i) => {\n hnswIndex.addPoint(item.embedding, i);\n });\n self.postMessage({ type: 'ready' });\n break;\n\n case 'search':\n if (hnswIndex) {\n const { queryEmbedding, k } = payload;\n const searchResult = hnswIndex.searchKNN(queryEmbedding, k);\n const foundItems = searchResult.neighbors.map(index => data[index]);\n self.postMessage({ type: 'results', payload: foundItems });\n }\n break;\n }\n };\n <\/code><\/pre>\n<\/div>\n\n\n \/\/ React bile\u015feninizde\n import React, { useState, useEffect, useRef } from 'react';\n\n function SemanticSearchWithWorker() {\n const [query, setQuery] = useState('');\n const [results, setResults] = useState([]);\n const workerRef = useRef(null);\n\n useEffect(() => {\n workerRef.current = new Worker(new URL('.\/worker.js', import.meta.url));\n \n workerRef.current.onmessage = (event) => {\n const { type, payload } = event.data;\n if (type === 'ready') {\n console.log('Web Worker haz\u0131r ve indeks y\u00fcklendi.');\n } else if (type === 'results') {\n setResults(payload);\n }\n };\n\n const loadAndInitWorker = async () => {\n const response = await fetch('\/data\/embeddings.json');\n const embeddedData = await response.json();\n workerRef.current.postMessage({ type: 'init', payload: { embeddedData } });\n };\n\n loadAndInitWorker();\n\n return () => {\n workerRef.current.terminate();\n };\n }, []);\n\n const handleSearch = async (e) => {\n const searchTerm = e.target.value;\n setQuery(searchTerm);\n if (searchTerm.length < 3) {\n setResults([]);\n return;\n }\n\n const queryEmbedding = await getQueryEmbedding(searchTerm); \/\/ Sorgu g\u00f6mme fonksiyonunuz\n if (queryEmbedding) {\n workerRef.current.postMessage({ type: 'search', payload: { queryEmbedding, k: 5 } });\n }\n };\n\n \/\/ ... (getQueryEmbedding ve render k\u0131sm\u0131 \u00f6nceki \u00f6rnekle ayn\u0131)\n return (\n \n \n {results.map((item) => (\n - \n {item.text}<\/strong> (ID: {item.id})\n <\/li>\n ))}\n <\/ul>\n <\/div>\n );\n }\n\n export default SemanticSearchWithWorker;\n <\/code><\/pre>\n<\/div>\n
Veri Y\u00fckleme ve \u00d6nbellekleme Teknikleri<\/h4>\n
B\u00fcy\u00fck veri setleri ile \u00e7al\u0131\u015f\u0131rken, t\u00fcm g\u00f6mme vekt\u00f6rlerini bir kerede y\u00fcklemek uygulaman\u0131n ba\u015flang\u0131\u00e7 s\u00fcresini uzatabilir. Bu durumu optimize etmek i\u00e7in \u00e7e\u015fitli teknikler kullan\u0131labilir. \u0130lk olarak, veri setini daha k\u00fc\u00e7\u00fck par\u00e7alara (chunks) ay\u0131rabilir ve sadece ihtiya\u00e7 duyulan par\u00e7alar\u0131 talep \u00fczerine (lazy loading) y\u00fckleyebilirsiniz. \u00d6rne\u011fin, ilk 1000 \u00f6\u011feyi y\u00fckleyip, kullan\u0131c\u0131 sayfan\u0131n sonuna yakla\u015ft\u0131k\u00e7a veya arama sonu\u00e7lar\u0131n\u0131 filtreledik\u00e7e ek par\u00e7alar\u0131 getirebilirsiniz. \u0130kinci olarak, y\u00fcklenen verileri taray\u0131c\u0131n\u0131n yerel depolama alan\u0131 olan IndexedDB’de \u00f6nbelle\u011fe alabilirsiniz. Bu sayede, kullan\u0131c\u0131 uygulamay\u0131 tekrar ziyaret etti\u011finde, veriler a\u011fdan tekrar indirilmek yerine yerel \u00f6nbellekten h\u0131zl\u0131ca y\u00fcklenebilir. Bu, \u00f6zellikle mobil cihazlarda veya yava\u015f internet ba\u011flant\u0131lar\u0131nda kullan\u0131c\u0131 deneyimini \u00f6nemli \u00f6l\u00e7\u00fcde iyile\u015ftirir. \u00dc\u00e7\u00fcnc\u00fcs\u00fc, g\u00f6mme vekt\u00f6rlerinin bulundu\u011fu JSON dosyas\u0131n\u0131 bir \u0130\u00e7erik Da\u011f\u0131t\u0131m A\u011f\u0131 (CDN) \u00fczerinden sunarak, kullan\u0131c\u0131ya co\u011frafi olarak en yak\u0131n sunucudan verinin daha h\u0131zl\u0131 gelmesini sa\u011flayabilirsiniz. Bu tekniklerin birle\u015fimi, uygulaman\u0131z\u0131n ilk y\u00fckleme s\u00fcresini optimize ederken, arama performans\u0131ndan \u00f6d\u00fcn vermeden b\u00fcy\u00fck veri setleriyle \u00e7al\u0131\u015fabilmesini sa\u011flar.<\/p>\n
Kullan\u0131c\u0131 Aray\u00fcz\u00fc Optimizasyonlar\u0131<\/h4>\n
1ms alt\u0131 performans sadece arka plandaki i\u015flemlerle ilgili de\u011fildir; ayn\u0131 zamanda kullan\u0131c\u0131 aray\u00fcz\u00fcn\u00fcn (UI) nas\u0131l tepki verdi\u011fini de kapsar. Kullan\u0131c\u0131 bir arama sorgusu yazd\u0131\u011f\u0131nda, her tu\u015f vuru\u015funda arama i\u015flemini tetiklemek gereksiz y\u00fck yaratabilir. Bu durumu \u00f6nlemek i\u00e7in “debouncing” ve “throttling” teknikleri kullan\u0131l\u0131r. Debouncing, kullan\u0131c\u0131n\u0131n yazmay\u0131 bitirmesini bekleyerek, belirli bir s\u00fcre (\u00f6rne\u011fin 300ms) boyunca ba\u015fka bir tu\u015f vuru\u015fu gelmezse arama i\u015flemini tetikler. Bu, gereksiz arama sorgular\u0131n\u0131 azalt\u0131r ve sunucuya veya Web Worker’a binen y\u00fck\u00fc hafifletir. Throttling ise, belirli bir zaman aral\u0131\u011f\u0131nda (\u00f6rne\u011fin 200ms) arama i\u015fleminin sadece bir kez tetiklenmesini sa\u011flar. Her iki teknik de kullan\u0131c\u0131 deneyimini iyile\u015ftirir, \u00e7\u00fcnk\u00fc kullan\u0131c\u0131 aray\u00fcz\u00fc daha duyarl\u0131 kal\u0131r ve gereksiz beklemeler ortadan kalkar. React’te bu t\u00fcr optimizasyonlar\u0131 useEffect<\/code> hook’u ve zamanlay\u0131c\u0131lar (setTimeout<\/code>, clearTimeout<\/code>) kullanarak kolayca uygulayabilirsiniz.<\/p>\nGer\u00e7ek D\u00fcnya Senaryolar\u0131: Semantik Araman\u0131n Fark Yaratt\u0131\u011f\u0131 Yerler<\/h3>\n
Semantik arama, sadece teknik bir yenilik olman\u0131n \u00f6tesinde, bir\u00e7ok farkl\u0131 sekt\u00f6rde kullan\u0131c\u0131 deneyimini k\u00f6kten de\u011fi\u015ftirebilecek ger\u00e7ek d\u00fcnya uygulamalar\u0131na sahiptir. Bu b\u00f6l\u00fcmde, semantik araman\u0131n fark yaratt\u0131\u011f\u0131 baz\u0131 senaryolar\u0131 ve vaka analizlerini inceleyece\u011fiz.<\/p>\n
E-ticarette Ak\u0131ll\u0131 \u00dcr\u00fcn Ke\u015ffi<\/h4>\n
E-ticaret siteleri, milyonlarca \u00fcr\u00fcnle dolu olabilir ve kullan\u0131c\u0131lar\u0131n arad\u0131klar\u0131 \u00fcr\u00fcn\u00fc bulmas\u0131, geleneksel anahtar kelime aramalar\u0131yla zorla\u015fabilir. Bir kullan\u0131c\u0131 “yazl\u0131k hafif elbiseler” arad\u0131\u011f\u0131nda, anahtar kelime tabanl\u0131 bir sistem genellikle bu kelimeleri i\u00e7eren \u00fcr\u00fcnleri listeler. Ancak semantik arama, “sahilde giyilebilecek rahat ve \u015f\u0131k k\u0131yafetler” gibi daha do\u011fal ve ba\u011flamsal bir sorguyu anlayabilir. Bu, sadece “elbise” kelimesi ge\u00e7en \u00fcr\u00fcnleri de\u011fil, ayn\u0131 zamanda “tunik”, “etek”, “\u015fort” gibi ilgili \u00fcr\u00fcnleri de kullan\u0131c\u0131n\u0131n niyetine g\u00f6re sunabilir. Semantik arama sayesinde, kullan\u0131c\u0131lar istedikleri \u00fcr\u00fcne daha h\u0131zl\u0131 ula\u015f\u0131r, yanl\u0131\u015f \u00fcr\u00fcnlerle zaman kaybetmez ve al\u0131\u015fveri\u015f deneyimleri ki\u015fiselle\u015ftirilmi\u015f bir hal al\u0131r. Bu da m\u00fc\u015fteri memnuniyetini art\u0131r\u0131r ve d\u00f6n\u00fc\u015f\u00fcm oranlar\u0131n\u0131 y\u00fckseltir. \u00d6rne\u011fin, bir kullan\u0131c\u0131 “evcil hayvan\u0131m i\u00e7in rahat bir yatak” arad\u0131\u011f\u0131nda, sistem sadece “yatak” kelimesini i\u00e7eren \u00fcr\u00fcnleri de\u011fil, ayn\u0131 zamanda “minder”, “oyun mat\u0131” gibi evcil hayvan konforuyla ilgili di\u011fer \u00fcr\u00fcnleri de sunabilir, hatta “ortopedik” veya “hipoalerjenik” gibi \u00f6zelliklere sahip \u00fcr\u00fcnleri \u00f6nceliklendirebilir.<\/p>\n
Kurumsal Bilgi Bankalar\u0131nda H\u0131zl\u0131 Eri\u015fim<\/h4>\n
B\u00fcy\u00fck \u015firketler ve kurumlar, y\u00fcz binlerce belge, rapor, prosed\u00fcr ve e-posta ile dolu geni\u015f bilgi bankalar\u0131na sahiptir. \u00c7al\u0131\u015fanlar\u0131n bu bilgi y\u0131\u011f\u0131nlar\u0131 aras\u0131nda do\u011fru bilgiyi bulmas\u0131, zaman al\u0131c\u0131 ve verimsiz bir s\u00fcre\u00e7 olabilir. Geleneksel anahtar kelime aramas\u0131, “Proje X b\u00fct\u00e7e sapmalar\u0131” gibi spesifik bir sorguda i\u015fe yararken, “Proje X’in finansal sa\u011fl\u0131\u011f\u0131na dair endi\u015feler” gibi daha genel bir sorguda yetersiz kal\u0131r. Semantik arama, bu t\u00fcr do\u011fal dil sorgular\u0131n\u0131 anlayarak, ilgili finansal raporlar\u0131, toplant\u0131 tutanaklar\u0131n\u0131 veya e-posta yaz\u0131\u015fmalar\u0131n\u0131, sorgudaki anahtar kelimeler do\u011frudan ge\u00e7mese bile bulabilir. Bu, \u00e7al\u0131\u015fanlar\u0131n bilgiye an\u0131nda eri\u015fmesini sa\u011flayarak operasyonel verimlili\u011fi art\u0131r\u0131r, karar alma s\u00fcre\u00e7lerini h\u0131zland\u0131r\u0131r ve tekrarlayan sorulara harcanan zaman\u0131 azalt\u0131r. Ayr\u0131ca, yeni \u00e7al\u0131\u015fanlar\u0131n \u015firket i\u00e7i bilgilere adaptasyonunu kolayla\u015ft\u0131r\u0131r ve bilgi silolar\u0131n\u0131 (information silos) ortadan kald\u0131r\u0131r.<\/p>\n
Medya ve \u0130\u00e7erik Platformlar\u0131nda Ki\u015fiselle\u015ftirilmi\u015f \u00d6neriler<\/h4>\n
Haber siteleri, blog platformlar\u0131, video ak\u0131\u015f hizmetleri ve m\u00fczik platformlar\u0131 gibi i\u00e7erik odakl\u0131 uygulamalar, kullan\u0131c\u0131lar\u0131n ilgi alanlar\u0131na uygun i\u00e7erikleri ke\u015ffetmelerine yard\u0131mc\u0131 olmak i\u00e7in semantik aramay\u0131 kullanabilir. Bir kullan\u0131c\u0131 “bilim kurgu filmleri” arad\u0131\u011f\u0131nda, geleneksel arama bu kategoriye giren filmleri listeler. Ancak semantik arama, “gelecek temal\u0131, d\u00fc\u015f\u00fcnd\u00fcr\u00fcc\u00fc sinema eserleri” gibi bir sorguyu anlayarak, sadece bilim kurgu filmlerini de\u011fil, ayn\u0131 zamanda felsefi derinli\u011fi olan distopik dizileri veya teknoloji odakl\u0131 belgeselleri de \u00f6nerebilir. Bu, kullan\u0131c\u0131lara daha zengin ve ki\u015fiselle\u015ftirilmi\u015f bir i\u00e7erik ke\u015fif deneyimi sunar. \u00d6rne\u011fin, bir haber sitesinde “iklim de\u011fi\u015fikli\u011finin ekonomik etkileri” arand\u0131\u011f\u0131nda, sistem sadece bu anahtar kelimeleri i\u00e7eren makaleleri de\u011fil, ayn\u0131 zamanda ye\u015fil enerji yat\u0131r\u0131mlar\u0131, s\u00fcrd\u00fcr\u00fclebilir tar\u0131m veya karbon vergisi gibi ilgili konular\u0131 i\u015fleyen i\u00e7erikleri de sunarak kullan\u0131c\u0131n\u0131n konuya dair tam bir bak\u0131\u015f a\u00e7\u0131s\u0131 kazanmas\u0131na yard\u0131mc\u0131 olabilir. Bu sayede, i\u00e7erik t\u00fcketimi artar ve kullan\u0131c\u0131lar\u0131n platformda ge\u00e7irdi\u011fi s\u00fcre uzar.<\/p>\n
\u0130leri D\u00fczey Optimizasyonlar ve Gelecek Perspektifleri<\/h3>\n
React uygulaman\u0131za sunucusuz semantik arama entegrasyonu, zaten g\u00fc\u00e7l\u00fc bir ad\u0131md\u0131r. Ancak daha b\u00fcy\u00fck veri setleriyle \u00e7al\u0131\u015fmak, arama sonu\u00e7lar\u0131n\u0131 daha da iyile\u015ftirmek ve sistemin gelecekteki ihtiya\u00e7lara uygun olmas\u0131n\u0131 sa\u011flamak i\u00e7in baz\u0131 ileri d\u00fczey optimizasyonlar ve stratejiler d\u00fc\u015f\u00fcnmek faydal\u0131 olacakt\u0131r.<\/p>\n
B\u00fcy\u00fck Veri Setleri ile \u00c7al\u0131\u015fma<\/h4>\n
E\u011fer milyonlarca \u00f6\u011felik bir veri setiniz varsa, t\u00fcm g\u00f6mme vekt\u00f6rlerini istemci taraf\u0131na indirmek pratik olmayabilir. Bu durumda, veri setini mant\u0131ksal par\u00e7alara (segmentlere) ay\u0131rmak ve sadece kullan\u0131c\u0131n\u0131n arama kapsam\u0131na giren veya ilk y\u00fcklemede gerekli olan par\u00e7alar\u0131 indirmek \u00f6nemlidir. \u00d6rne\u011fin, e-ticaret uygulamas\u0131nda sadece belirli bir kategoriye ait \u00fcr\u00fcnlerin g\u00f6mmelerini y\u00fckleyebilirsiniz. Ayr\u0131ca, CDN (\u0130\u00e7erik Da\u011f\u0131t\u0131m A\u011f\u0131) kullan\u0131m\u0131, b\u00fcy\u00fck JSON dosyalar\u0131n\u0131n veya di\u011fer veri par\u00e7alar\u0131n\u0131n kullan\u0131c\u0131lara co\u011frafi olarak en yak\u0131n noktadan h\u0131zl\u0131 bir \u015fekilde ula\u015ft\u0131r\u0131lmas\u0131n\u0131 sa\u011flar. Daha da ileri giderek, sunucusuz bir arka u\u00e7 (\u00f6rne\u011fin, Firebase Cloud Functions veya AWS Lambda) ile entegre bir “embedding proxy” olu\u015fturabilirsiniz. Bu proxy, kullan\u0131c\u0131n\u0131n sorgu vekt\u00f6r\u00fcn\u00fc al\u0131r ve sadece ilgili veri segmentlerinin g\u00f6mmelerini istemciye g\u00f6nderir. Bu, istemci taraf\u0131ndaki veri y\u00fck\u00fcn\u00fc \u00f6nemli \u00f6l\u00e7\u00fcde azalt\u0131r.<\/p>\n
Hibrit Arama Stratejileri<\/h4>\n
Saf semantik arama bazen belirli anahtar kelime e\u015fle\u015fmelerini g\u00f6zden ka\u00e7\u0131rabilir veya kullan\u0131c\u0131lar\u0131n \u00e7ok spesifik terimlerle arama yapt\u0131\u011f\u0131 durumlarda yetersiz kalabilir. Bu nedenle, semantik arama ile geleneksel anahtar kelime aramas\u0131n\u0131 birle\u015ftiren hibrit yakla\u015f\u0131mlar olduk\u00e7a etkili olabilir. \u00d6rne\u011fin, ilk olarak anahtar kelime tabanl\u0131 bir filtreleme uygulayabilir, ard\u0131ndan filtrelenmi\u015f sonu\u00e7lar \u00fczerinde semantik arama yapabilirsiniz. Veya her iki arama motorundan gelen sonu\u00e7lar\u0131 belirli a\u011f\u0131rl\u0131klarla birle\u015ftirerek nihai sonu\u00e7 setini olu\u015fturabilirsiniz. Algolia<\/a> veya Elasticsearch<\/a> gibi platformlar, bu t\u00fcr hibrit yakla\u015f\u0131mlar\u0131 destekleyen g\u00fc\u00e7l\u00fc ara\u00e7lar sunar, ancak client-side \u00e7\u00f6z\u00fcm\u00fcm\u00fczde de basit bir mant\u0131kla bu entegrasyonu sa\u011flamak m\u00fcmk\u00fcnd\u00fcr. \u00d6rne\u011fin, kullan\u0131c\u0131n\u0131n sorgusunda belirli bir \u00fcr\u00fcn kodu varsa, do\u011frudan o \u00fcr\u00fcn\u00fc getirebilir, yoksa semantik aramaya ge\u00e7i\u015f yapabilirsiniz.<\/p>\nModel G\u00fcncellemeleri ve Veri Senkronizasyonu<\/h4>\n
Zamanla, kulland\u0131\u011f\u0131n\u0131z g\u00f6mme modelleri geli\u015febilir veya veri setiniz g\u00fcncellenebilir. Bu durumda, yeni g\u00f6mme vekt\u00f6rlerini olu\u015fturman\u0131z ve istemci taraf\u0131ndaki veriyi senkronize etmeniz gerekir. Bu s\u00fcreci otomatikle\u015ftirmek i\u00e7in bir CI\/CD (S\u00fcrekli Entegrasyon\/S\u00fcrekli Da\u011f\u0131t\u0131m) boru hatt\u0131 (pipeline) kurabilirsiniz. Veri kayna\u011f\u0131n\u0131z g\u00fcncellendi\u011finde, otomatik olarak yeni g\u00f6mmeler olu\u015fturulur, JSON dosyalar\u0131 g\u00fcncellenir ve CDN’e da\u011f\u0131t\u0131l\u0131r. \u0130stemci taraf\u0131nda ise, uygulaman\u0131z\u0131n yeni veri setini ne zaman ve nas\u0131l indirece\u011fini y\u00f6netmelisiniz. Bu, s\u00fcr\u00fcm kontrol\u00fc ile yap\u0131labilir; \u00f6rne\u011fin, uygulaman\u0131z\u0131n bir “veri s\u00fcr\u00fcm\u00fc” kontrol etmesini ve yeni bir s\u00fcr\u00fcm oldu\u011funda g\u00fcncellenmi\u015f g\u00f6mmeleri indirmesini sa\u011flayabilirsiniz. Ayr\u0131ca, kullan\u0131c\u0131lar\u0131n eski verilerle arama yapmas\u0131n\u0131 engellemek i\u00e7in, uygulama a\u00e7\u0131l\u0131\u015f\u0131nda veya belirli aral\u0131klarla veri g\u00fcncellemelerini kontrol etmek \u00f6nemlidir.<\/p>\n
G\u00fcvenlik ve Gizlilik Hususlar\u0131<\/h4>\n
\u0130stemci taraf\u0131nda veri depolama ve i\u015fleme yaparken g\u00fcvenlik ve gizlilik \u00f6nemli hususlard\u0131r. E\u011fer uygulaman\u0131z hassas veya ki\u015fisel veriler i\u00e7eriyorsa, bu verilerin do\u011frudan istemciye indirilmesi riskli olabilir. Bu durumda, semantik arama i\u00e7in kullan\u0131lan verilerin anonimle\u015ftirildi\u011finden veya yaln\u0131zca herkese a\u00e7\u0131k bilgilerden olu\u015ftu\u011fundan emin olmal\u0131s\u0131n\u0131z. Ayr\u0131ca, g\u00f6mme vekt\u00f6rleri dahi olsa, bu verilerin k\u00f6t\u00fc niyetli ki\u015filer taraf\u0131ndan tersine m\u00fchendislik (reverse engineering) ile orijinal verilere ula\u015f\u0131lamayacak \u015fekilde tasarlanmas\u0131 \u00f6nemlidir. \u00c7o\u011fu semantik arama senaryosunda (\u00fcr\u00fcn aramas\u0131, blog yaz\u0131s\u0131 ke\u015ffi gibi) kullan\u0131lan veriler zaten herkese a\u00e7\u0131k oldu\u011fu i\u00e7in bu bir sorun te\u015fkil etmez. Ancak, finansal kay\u0131tlar veya sa\u011fl\u0131k bilgileri gibi hassas verilerle \u00e7al\u0131\u015f\u0131yorsan\u0131z, istemci taraf\u0131 arama yerine sunucu taraf\u0131 \u00e7\u00f6z\u00fcmleri veya hibrit yakla\u015f\u0131mlar daha uygun olabilir.<\/p>\n
Sonu\u00e7 ve S\u0131k\u00e7a Sorulan Sorular (SSS)<\/h3>\n
React uygulaman\u0131za sunucusuz ve 1 milisaniyenin alt\u0131nda tepki s\u00fcresiyle semantik arama entegrasyonu, kullan\u0131c\u0131 deneyimini d\u00f6n\u00fc\u015ft\u00fcrmek ve rekabet avantaj\u0131 elde etmek i\u00e7in g\u00fc\u00e7l\u00fc bir yoldur. Geleneksel anahtar kelime tabanl\u0131 arama motorlar\u0131n\u0131n \u00f6tesine ge\u00e7erek, kullan\u0131c\u0131lar\u0131n do\u011fal dildeki niyetlerini anlayan ve onlara en alakal\u0131 sonu\u00e7lar\u0131 sunan bir sistem kurduk. WebAssembly’nin g\u00fcc\u00fc, Web Workers’\u0131n \u00e7oklu i\u015f par\u00e7ac\u0131\u011f\u0131 yetenekleri ve HNSW gibi ileri d\u00fczey indeksleme algoritmalar\u0131 sayesinde, bu karma\u015f\u0131k sistemi do\u011frudan taray\u0131c\u0131da, ola\u011fan\u00fcst\u00fc h\u0131zlarda \u00e7al\u0131\u015ft\u0131rabildik. Bu yakla\u015f\u0131m, sadece geli\u015ftirme ve bar\u0131nd\u0131rma maliyetlerini d\u00fc\u015f\u00fcrmekle kalm\u0131yor, ayn\u0131 zamanda uygulaman\u0131z\u0131n \u00f6l\u00e7eklenebilirli\u011fini art\u0131r\u0131yor ve kullan\u0131c\u0131lara kesintisiz, ak\u0131c\u0131 bir arama deneyimi sunuyor. E-ticaretten kurumsal bilgi y\u00f6netim sistemlerine, i\u00e7erik platformlar\u0131ndan ki\u015fiselle\u015ftirilmi\u015f \u00f6neri motorlar\u0131na kadar bir\u00e7ok alanda semantik arama, bilginin ke\u015ffedilme \u015feklini yeniden tan\u0131ml\u0131yor. Gelecekte, daha da ak\u0131ll\u0131, daha ba\u011flamsal ve daha ki\u015fisel arama deneyimlerinin standart hale gelmesi beklenmektedir ve bu teknoloji, bu gelece\u011fin temel ta\u015flar\u0131ndan birini olu\u015fturmaktad\u0131r.<\/p>\n
S\u0131k\u00e7a Sorulan Sorular (SSS)<\/h4>\n\n- Bu yakla\u015f\u0131m b\u00fcy\u00fck veri setleri i\u00e7in uygun mu?<\/strong>\n
Evet, uygun optimizasyonlarla (veri setini par\u00e7alara ay\u0131rma, lazy loading, CDN kullan\u0131m\u0131, IndexedDB ile \u00f6nbellekleme) milyonlarca \u00f6\u011felik veri setleri i\u00e7in bile kullan\u0131labilir. Ancak \u00e7ok b\u00fcy\u00fck veri setlerinde (milyarlarca \u00f6\u011fe) performans ve bellek k\u0131s\u0131tlamalar\u0131 nedeniyle hibrit veya sunucu taraf\u0131 \u00e7\u00f6z\u00fcmler daha uygun olabilir.<\/p>\n<\/li>\n
- Hangi g\u00f6mme modellerini kullanmal\u0131y\u0131m?<\/strong>\n
Se\u00e7im, veri tipinize ve uygulaman\u0131z\u0131n gereksinimlerine ba\u011fl\u0131d\u0131r. Genel ama\u00e7l\u0131 metinler i\u00e7in Sentence-BERT<\/a> modelleri (\u00f6rne\u011fin, all-MiniLM-L6-v2<\/code>) pop\u00fcler ve etkilidir. Daha y\u00fcksek kaliteli ve karma\u015f\u0131k metinler i\u00e7in OpenAI Embeddings API’si<\/a> (text-embedding-ada-002<\/code>) m\u00fckemmel sonu\u00e7lar verir. Hugging Face \u00fczerinde de bir\u00e7ok farkl\u0131 dil modeli bulunmaktad\u0131r. Sorgu g\u00f6mme modelinizin, veri g\u00f6mme modelinizle ayn\u0131 olmas\u0131 \u00f6nemlidir.<\/p>\n<\/li>\n- Hassas veriler i\u00e7in g\u00fcvenlik nas\u0131l sa\u011flan\u0131r?<\/strong>\n
E\u011fer arama yap\u0131lacak veriler hassas veya ki\u015fisel bilgiler i\u00e7eriyorsa, bu verilerin do\u011frudan istemciye indirilmesi g\u00fcvenlik riski ta\u015f\u0131r. Bu durumda, verileri anonimle\u015ftirmek, \u015fifrelemek veya yaln\u0131zca herkese a\u00e7\u0131k bilgilerle \u00e7al\u0131\u015fmak en iyi yakla\u015f\u0131md\u0131r. \u00c7ok hassas veriler i\u00e7in istemci taraf\u0131 arama yerine, g\u00fcvenli bir sunucu taraf\u0131 arama \u00e7\u00f6z\u00fcm\u00fc veya veri eri\u015fimini s\u0131k\u0131 bir \u015fekilde kontrol eden hibrit bir yakla\u015f\u0131m d\u00fc\u015f\u00fcn\u00fclmelidir.<\/p>\n<\/li>\n
- 1ms alt\u0131 h\u0131z her zaman garanti edilebilir mi?<\/strong>\n
\u00c7o\u011fu modern cihazda ve optimize edilmi\u015f uygulamalarda 1ms alt\u0131 tepki s\u00fcreleri elde edilebilir. Ancak cihaz\u0131n i\u015flem g\u00fcc\u00fc, veri setinin b\u00fcy\u00fckl\u00fc\u011f\u00fc ve karma\u015f\u0131kl\u0131\u011f\u0131, taray\u0131c\u0131n\u0131n performans\u0131 ve ayn\u0131 anda \u00e7al\u0131\u015fan di\u011fer i\u015flemler bu s\u00fcreyi etkileyebilir. Web Workers ve WASM kullan\u0131m\u0131, bu s\u00fcreyi m\u00fcmk\u00fcn oldu\u011funca d\u00fc\u015f\u00fck tutmak i\u00e7in kritik \u00f6neme sahiptir.<\/p>\n<\/li>\n
- G\u00f6mme olu\u015fturma maliyetli midir?<\/strong>\n
G\u00f6mme olu\u015fturma i\u015flemi, \u00f6zellikle b\u00fcy\u00fck veri setleri i\u00e7in, kullan\u0131lan API’ye (\u00f6rne\u011fin OpenAI) veya hesaplama kaynaklar\u0131na (GPU’lar) ba\u011fl\u0131 olarak maliyetli olabilir. Ancak bu i\u015flem genellikle bir kerelik veya periyodik bir g\u00f6rev oldu\u011fu i\u00e7in, toplam maliyet sunucu tabanl\u0131 s\u00fcrekli \u00e7al\u0131\u015fan bir arama motoruna g\u00f6re \u00e7ok daha d\u00fc\u015f\u00fckt\u00fcr. Maliyetleri optimize etmek i\u00e7in, a\u00e7\u0131k kaynakl\u0131 ve yerel olarak \u00e7al\u0131\u015ft\u0131r\u0131labilen modelleri kullanabilir veya sunucusuz fonksiyonlar\u0131n\u0131z\u0131 maliyet etkin b\u00f6lgelerde \u00e7al\u0131\u015ft\u0131rabilirsiniz.<\/p>\n<\/li>\n<\/ol>\n
#SemantikArama #ReactJS #WebGeli\u015ftirme #PerformansOptimizasyonu #Sunucusuz<\/p>\n