{"id":41738,"date":"2026-05-12T21:05:10","date_gmt":"2026-05-12T18:05:10","guid":{"rendered":"https:\/\/fatihsoysal.com\/blog\/cevrimdisi-ilk-yapay-zeka-uygulamalari-llama-3-ve-react-ile-nasil-gelistirilir\/"},"modified":"2026-05-12T21:05:10","modified_gmt":"2026-05-12T18:05:10","slug":"cevrimdisi-ilk-yapay-zeka-uygulamalari-llama-3-ve-react-ile-nasil-gelistirilir","status":"publish","type":"post","link":"https:\/\/fatihsoysal.com\/blog\/cevrimdisi-ilk-yapay-zeka-uygulamalari-llama-3-ve-react-ile-nasil-gelistirilir\/","title":{"rendered":"\u00c7evrimd\u0131\u015f\u0131 \u0130lk Yapay Zeka Uygulamalar\u0131: LLaMA 3 ve React ile Nas\u0131l Geli\u015ftirilir?"},"content":{"rendered":"

\u00c7evrimd\u0131\u015f\u0131 \u0130lk Yapay Zeka Uygulamalar\u0131: LLaMA 3 ve React ile Nas\u0131l Geli\u015ftirilir?<\/h2>\n

G\u00fcn\u00fcm\u00fcz dijital \u00e7a\u011f\u0131nda, internet ba\u011flant\u0131s\u0131n\u0131n kesintisiz oldu\u011fu varsay\u0131m\u0131yla \u00e7al\u0131\u015fan bir\u00e7ok uygulama bulunmaktad\u0131r. Ancak, internet eri\u015fiminin k\u0131s\u0131tl\u0131 oldu\u011fu veya hi\u00e7 olmad\u0131\u011f\u0131 durumlarda bile sorunsuz \u00e7al\u0131\u015fabilen, y\u00fcksek performansl\u0131 yapay zeka uygulamalar\u0131 geli\u015ftirmek art\u0131k hayal de\u011fil. Bu makalede, Meta’n\u0131n g\u00fc\u00e7l\u00fc a\u00e7\u0131k kaynak dil modeli LLaMA 3’\u00fc ve modern web geli\u015ftirmenin temel ta\u015flar\u0131ndan React’i kullanarak \u00e7evrimd\u0131\u015f\u0131 (offline-first) bir yapay zeka uygulamas\u0131n\u0131 nas\u0131l ad\u0131m ad\u0131m in\u015fa edece\u011fimizi ke\u015ffedece\u011fiz. Kullan\u0131c\u0131 deneyimini, veri gizlili\u011fini ve eri\u015filebilirli\u011fi \u00f6n planda tutan bu yakla\u015f\u0131m, mobil cihazlardan end\u00fcstriyel \u00e7\u00f6z\u00fcmlere kadar geni\u015f bir yelpazede yeni kap\u0131lar a\u00e7maktad\u0131r.<\/p>\n

\u00c7evrimd\u0131\u015f\u0131 \u0130lk Yakla\u015f\u0131m ve Yerel Yapay Zeka Modelleri Neden \u00d6nemli?<\/h2>\n

\u00c7evrimd\u0131\u015f\u0131 ilk (offline-first) yakla\u015f\u0131m, bir uygulaman\u0131n internet ba\u011flant\u0131s\u0131 olmasa bile tamamen i\u015flevsel kalmas\u0131n\u0131 sa\u011flayan bir tasar\u0131m felsefesidir. Bu, uygulaman\u0131n \u00f6ncelikle yerel veri depolama ve i\u015flem yeteneklerine dayanmas\u0131, internet ba\u011flant\u0131s\u0131 mevcut oldu\u011funda ise verileri senkronize etmesi anlam\u0131na gelir. Kullan\u0131c\u0131lar i\u00e7in bu, kesintisiz bir deneyim, daha h\u0131zl\u0131 yan\u0131t s\u00fcreleri ve internet ba\u011flant\u0131s\u0131 maliyetlerinden ba\u011f\u0131ms\u0131zl\u0131k demektir. \u00d6zellikle mobil cihazlarda veya altyap\u0131n\u0131n zay\u0131f oldu\u011fu b\u00f6lgelerde, \u00e7evrimd\u0131\u015f\u0131 ilk uygulamalar kritik bir fark yaratabilir. \u00d6rne\u011fin, bir saha g\u00f6revlisinin internetin olmad\u0131\u011f\u0131 bir \u015fantiyede veri toplamas\u0131 veya bir \u00f6\u011frencinin evdeki internet kesintisine ra\u011fmen ders materyallerine eri\u015fmeye devam etmesi gibi senaryolar, bu yakla\u015f\u0131m\u0131n de\u011ferini a\u00e7\u0131k\u00e7a ortaya koymaktad\u0131r.<\/p>\n

Peki, bu felsefeyi yapay zeka (AI) uygulamalar\u0131na nas\u0131l entegre edebiliriz? Geleneksel olarak, \u00e7o\u011fu yapay zeka modeli bulut tabanl\u0131 sunucularda \u00e7al\u0131\u015f\u0131r ve her istek i\u00e7in internet ba\u011flant\u0131s\u0131 gerektirir. Ancak yerel yapay zeka modelleri, ad\u0131ndan da anla\u015f\u0131laca\u011f\u0131 gibi, do\u011frudan kullan\u0131c\u0131n\u0131n cihaz\u0131nda (bilgisayar, telefon, tablet vb.) \u00e7al\u0131\u015f\u0131r. Bu durum, bir dizi \u00f6nemli avantaj\u0131 beraberinde getirir. \u0130lk olarak, veri gizlili\u011fi ve g\u00fcvenli\u011fi artar; hassas veriler asla cihaz\u0131 terk etmez ve bulut sunucular\u0131na g\u00f6nderilmez. Bu, \u00f6zellikle sa\u011fl\u0131k, finans veya ki\u015fisel verilerle \u00e7al\u0131\u015fan uygulamalar i\u00e7in hayati \u00f6neme sahiptir. \u0130kinci olarak, yan\u0131t s\u00fcreleri \u00f6nemli \u00f6l\u00e7\u00fcde k\u0131sal\u0131r. \u0130nternet \u00fczerinden veri g\u00f6nderme ve alma gecikmesi (latency) ortadan kalkt\u0131\u011f\u0131 i\u00e7in, yapay zeka i\u015flemleri an\u0131nda ger\u00e7ekle\u015fir. Bu, ger\u00e7ek zamanl\u0131 \u00e7eviri, anl\u0131k metin \u00f6zetleme veya h\u0131zl\u0131 g\u00f6r\u00fcnt\u00fc analizi gibi uygulamalarda kullan\u0131c\u0131 deneyimini radikal bir \u015fekilde iyile\u015ftirir.<\/p>\n

\u00dc\u00e7\u00fcnc\u00fc bir avantaj ise maliyet tasarrufudur. Bulut tabanl\u0131 yapay zeka hizmetleri genellikle kullan\u0131m ba\u015f\u0131na \u00fccretlendirilir ve bu maliyetler, yo\u011fun kullan\u0131mlarda h\u0131zla artabilir. Yerel modellerde ise, ba\u015flang\u0131\u00e7taki donan\u0131m yat\u0131r\u0131m\u0131 d\u0131\u015f\u0131nda ek bir maliyet olu\u015fmaz. Son olarak, yerel yapay zeka modelleri, internet ba\u011flant\u0131s\u0131n\u0131n olmad\u0131\u011f\u0131 veya \u00e7ok yava\u015f oldu\u011fu durumlarda bile tamamen i\u015flevsel kal\u0131r. Bu, uzaktan \u00e7al\u0131\u015fma, seyahat veya do\u011fal afetler gibi durumlarda bile uygulaman\u0131n g\u00fcvenilirli\u011fini garanti eder. Elbette, yerel modellerin de zorluklar\u0131 vard\u0131r. Cihaz\u0131n i\u015flem g\u00fcc\u00fc ve bellek kapasitesi s\u0131n\u0131rl\u0131 olabilir, bu da daha k\u00fc\u00e7\u00fck ve optimize edilmi\u015f modellerin kullan\u0131lmas\u0131n\u0131 gerektirebilir. Ayr\u0131ca, model g\u00fcncellemelerinin y\u00f6netimi ve da\u011f\u0131t\u0131m\u0131 da bulut tabanl\u0131 \u00e7\u00f6z\u00fcmlere g\u00f6re farkl\u0131 stratejiler gerektirir. Ancak, bu zorluklar, geli\u015fen teknoloji ve optimize edilmi\u015f modeller sayesinde giderek daha a\u015f\u0131labilir hale gelmektedir. Bu nedenle, \u00e7evrimd\u0131\u015f\u0131 ilk yakla\u015f\u0131m ve yerel yapay zeka modelleri, modern uygulama geli\u015ftirme paradigmalar\u0131nda giderek daha merkezi bir rol oynamaktad\u0131r.<\/p>\n

LLaMA 3 Nedir ve Yerel Ortamda Nas\u0131l \u00c7al\u0131\u015f\u0131r?<\/h2>\n

LLaMA 3, Meta taraf\u0131ndan geli\u015ftirilen ve a\u00e7\u0131k kaynak olarak sunulan en yeni b\u00fcy\u00fck dil modelidir (Large Language Model – LLM). \u00d6nceki s\u00fcr\u00fcmleri LLaMA 1 ve LLaMA 2’nin \u00fczerine in\u015fa edilen LLaMA 3, metin anlama, metin \u00fcretme, kod yazma, \u00e7eviri yapma ve karma\u015f\u0131k ak\u0131l y\u00fcr\u00fctme gibi bir\u00e7ok do\u011fal dil i\u015fleme (NLP) g\u00f6revinde etkileyici performans sergilemektedir. Modelin a\u00e7\u0131k kaynak do\u011fas\u0131, geli\u015ftiricilere ve ara\u015ft\u0131rmac\u0131lara LLaMA 3’\u00fc kendi projelerine entegre etme, \u00f6zelle\u015ftirme ve hatta daha da geli\u015ftirme \u00f6zg\u00fcrl\u00fc\u011f\u00fc sunar. Farkl\u0131 parametre boyutlar\u0131na sahip versiyonlar\u0131 (\u00f6rne\u011fin, 8B, 70B), \u00e7e\u015fitli donan\u0131m ve performans ihtiya\u00e7lar\u0131na uygun \u00e7\u00f6z\u00fcmler sunar. 8B parametreli model, daha az kaynak gerektirdi\u011fi i\u00e7in genellikle yerel cihazlarda \u00e7al\u0131\u015ft\u0131rmak i\u00e7in tercih edilirken, 70B gibi daha b\u00fcy\u00fck modeller daha fazla i\u015flem g\u00fcc\u00fc ve bellek gerektirir.<\/p>\n

LLaMA 3’\u00fc yerel bir ortamda \u00e7al\u0131\u015ft\u0131rmak, uygulaman\u0131z\u0131n internet ba\u011flant\u0131s\u0131ndan ba\u011f\u0131ms\u0131z olarak g\u00fc\u00e7l\u00fc yapay zeka yeteneklerine sahip olmas\u0131n\u0131 sa\u011flar. Bu, \u00f6zellikle veri gizlili\u011fi kritik olan veya an\u0131nda yan\u0131t gerektiren uygulamalar i\u00e7in b\u00fcy\u00fck bir avantajd\u0131r. LLaMA 3’\u00fc yerel olarak \u00e7al\u0131\u015ft\u0131rman\u0131n birka\u00e7 yolu vard\u0131r. En pop\u00fcler ve eri\u015filebilir y\u00f6ntemlerden biri Ollama<\/a> kullanmakt\u0131r. Ollama, LLaMA gibi b\u00fcy\u00fck dil modellerini yerel bilgisayar\u0131n\u0131zda kolayca kurman\u0131z\u0131 ve \u00e7al\u0131\u015ft\u0131rman\u0131z\u0131 sa\u011flayan bir ara\u00e7t\u0131r. Birka\u00e7 komutla LLaMA 3’\u00fc indirip bir yerel API olarak kullan\u0131ma haz\u0131r hale getirebilirsiniz. Ollama, modelleri optimize edilmi\u015f bir \u015fekilde \u00e7al\u0131\u015ft\u0131r\u0131r ve geli\u015ftiricilerin bu modellere HTTP API arac\u0131l\u0131\u011f\u0131yla kolayca eri\u015fmesini sa\u011flar. Bu, React gibi bir \u00f6n u\u00e7 (frontend) uygulamas\u0131n\u0131n, bir web sunucusuna istek g\u00f6nderir gibi yerel LLaMA 3 modeline istek g\u00f6nderebilece\u011fi anlam\u0131na gelir.<\/p>\n

Ollama ile kurulum olduk\u00e7a basittir. \u0130lk olarak, Ollama’n\u0131n resmi web sitesinden i\u015fletim sisteminize uygun istemciyi indirip kurars\u0131n\u0131z. Kurulum tamamland\u0131ktan sonra, bir terminal (u\u00e7birim) a\u00e7arak LLaMA 3 modelini indirebilirsiniz. \u00d6rne\u011fin, 8B parametreli modeli indirmek i\u00e7in \u015fu komutu kullanman\u0131z yeterlidir:<\/p>\n

\n
ollama run llama3<\/pre>\n
<\/code>\n<\/div>\n
Bu komut, LLaMA 3 modelini indirir ve yerel bir sunucuda \u00e7al\u0131\u015fmaya ba\u015flar. Model indirildikten sonra, Ollama varsay\u0131lan olarak http:\/\/localhost:11434<\/code> adresinde bir API sunar. Bu API'yi kullanarak modelle etkile\u015fime ge\u00e7ebilirsiniz. \u00d6rne\u011fin, metin tamamlama veya sohbet (chat) i\u015flevleri i\u00e7in POST istekleri g\u00f6nderebilirsiniz. LLaMA 3'\u00fc yerel olarak \u00e7al\u0131\u015ft\u0131rmak i\u00e7in donan\u0131m gereksinimleri modelin boyutuna g\u00f6re de\u011fi\u015fir. 8B parametreli bir model i\u00e7in genellikle en az 8 GB RAM'e sahip bir bilgisayar \u00f6nerilirken, daha iyi performans i\u00e7in bir grafik i\u015flem birimi (GPU) ve daha fazla RAM tercih edilir. Modern i\u015flemciler (CPU) \u00fczerinde de \u00e7al\u0131\u015fabilse de, GPU kullan\u0131m\u0131 \u00e7ok daha h\u0131zl\u0131 sonu\u00e7lar verir. T\u00fcrkiye'deki geli\u015ftiriciler ve i\u015fletmeler i\u00e7in bu, \u00f6zellikle internet altyap\u0131s\u0131n\u0131n her yerde ayn\u0131 olmad\u0131\u011f\u0131 b\u00f6lgelerde, m\u00fc\u015fteri hizmetleri botlar\u0131, ki\u015fisel asistanlar veya i\u00e7erik \u00fcretim ara\u00e7lar\u0131 gibi uygulamalar\u0131 \u00e7evrimd\u0131\u015f\u0131 olarak sunma potansiyeli yarat\u0131r. \u00d6rne\u011fin, bir avukatl\u0131k b\u00fcrosu, m\u00fcvekkil bilgilerini d\u0131\u015far\u0131ya g\u00f6ndermeden hukuki belgeleri \u00f6zetleyebilen yerel bir yapay zeka asistan\u0131 kullanabilir.<\/p>\n
React ile \u00c7evrimd\u0131\u015f\u0131 Destekli Bir Kullan\u0131c\u0131 Aray\u00fcz\u00fc Olu\u015fturma<\/h2>\n
React, Facebook taraf\u0131ndan geli\u015ftirilen ve kullan\u0131c\u0131 aray\u00fczleri (User Interfaces - UI) olu\u015fturmak i\u00e7in kullan\u0131lan pop\u00fcler bir JavaScript k\u00fct\u00fcphanesidir. Bile\u015fen tabanl\u0131 (component-based) yap\u0131s\u0131 sayesinde, karma\u015f\u0131k UI'lar\u0131 k\u00fc\u00e7\u00fck, yeniden kullan\u0131labilir ve y\u00f6netilebilir par\u00e7alara b\u00f6lerek geli\u015ftirmeyi kolayla\u015ft\u0131r\u0131r. \u00c7evrimd\u0131\u015f\u0131 ilk yapay zeka uygulamam\u0131z i\u00e7in React'i tercih etmemizin temel nedenlerinden biri, modern web uygulamalar\u0131n\u0131n (Progressive Web Apps - PWA) temelini olu\u015fturan g\u00fc\u00e7l\u00fc \u00e7evrimd\u0131\u015f\u0131 yetenekleriyle kolayca entegre olabilmesidir. React uygulamalar\u0131, Service Worker'lar arac\u0131l\u0131\u011f\u0131yla \u00f6nbellekleme (caching) stratejileri uygulayarak internet ba\u011flant\u0131s\u0131 olmasa bile \u00e7al\u0131\u015fmaya devam edebilir.<\/p>\n
Bir React uygulamas\u0131n\u0131 \u00e7evrimd\u0131\u015f\u0131 dostu hale getirmenin anahtar\u0131, Service Worker'lard\u0131r. Service Worker'lar, taray\u0131c\u0131 ile a\u011f aras\u0131nda bir proxy (vekil sunucu) g\u00f6revi g\u00f6ren JavaScript dosyalar\u0131d\u0131r. Uygulaman\u0131z\u0131n kaynaklar\u0131n\u0131 (HTML, CSS, JavaScript, resimler vb.) \u00f6nbelle\u011fe alabilir ve internet ba\u011flant\u0131s\u0131 olmad\u0131\u011f\u0131nda bu \u00f6nbellekten sunabilirler. Bu sayede, kullan\u0131c\u0131lar uygulaman\u0131z\u0131 \u00e7evrimd\u0131\u015f\u0131 durumdayken bile ba\u015flatabilir ve temel i\u015flevlerini kullanabilirler. Create React App veya Vite gibi modern React proje iskeletleri (framework) genellikle Service Worker entegrasyonu i\u00e7in haz\u0131r \u015fablonlar sunar. \u00d6rne\u011fin, Create React App'te src\/index.js<\/code> dosyas\u0131nda serviceWorkerRegistration.register()<\/code> \u00e7a\u011fr\u0131s\u0131n\u0131 aktif hale getirerek uygulaman\u0131z\u0131 PWA'ya d\u00f6n\u00fc\u015ft\u00fcrebilirsiniz.<\/p>\n
\n
import React from 'react';\nimport ReactDOM from 'react-dom\/client';\nimport '.\/index.css';\nimport App from '.\/App';\nimport * as serviceWorkerRegistration from '.\/serviceWorkerRegistration';\n\nconst root = ReactDOM.createRoot(document.getElementById('root'));\nroot.render(\n  \n    \n  <\/React.StrictMode>\n);\n\n\/\/ Service Worker'\u0131 kaydet\nserviceWorkerRegistration.register();<\/pre>\n
<\/code>\n<\/div>\n
\u00c7evrimd\u0131\u015f\u0131 bir uygulamada veri y\u00f6netimi de kritik \u00f6neme sahiptir. Kullan\u0131c\u0131n\u0131n cihaz\u0131nda kal\u0131c\u0131 veri depolamak i\u00e7in \u00e7e\u015fitli se\u00e7enekler mevcuttur. localStorage<\/code> ve sessionStorage<\/code> basit anahtar-de\u011fer \u00e7iftleri i\u00e7in uygun olsa da, daha karma\u015f\u0131k ve b\u00fcy\u00fck veri setleri i\u00e7in IndexedDB<\/a> tercih edilir. IndexedDB, taray\u0131c\u0131da \u00e7al\u0131\u015fan, g\u00fc\u00e7l\u00fc bir NoSQL veritaban\u0131d\u0131r ve yap\u0131land\u0131r\u0131lm\u0131\u015f verileri depolamak i\u00e7in idealdir. localForage<\/code> gibi k\u00fct\u00fcphaneler, IndexedDB, WebSQL ve localStorage aras\u0131nda otomatik olarak en iyi depolama mekanizmas\u0131n\u0131 se\u00e7erek geli\u015ftiriciler i\u00e7in kullan\u0131m\u0131 kolayla\u015ft\u0131r\u0131r. Bu k\u00fct\u00fcphane sayesinde, verileri asenkron olarak kaydedebilir ve alabiliriz, bu da kullan\u0131c\u0131 aray\u00fcz\u00fcn\u00fcn donmas\u0131n\u0131 engeller.<\/p>\n
React'te durum y\u00f6netimi (state management) i\u00e7in Redux Toolkit, Zustand veya Context API gibi ara\u00e7lar kullan\u0131labilir. \u00c7evrimd\u0131\u015f\u0131 senaryolarda, uygulaman\u0131n durumunu ve verilerini senkronize tutmak \u00f6nemlidir. Kullan\u0131c\u0131 \u00e7evrimd\u0131\u015f\u0131yken yapt\u0131\u011f\u0131 de\u011fi\u015fiklikler yerel olarak kaydedilmeli ve internet ba\u011flant\u0131s\u0131 geri geldi\u011finde sunucuya g\u00f6nderilmelidir. Bu \"senkronizasyon\" mekanizmas\u0131, uygulaman\u0131n sa\u011flaml\u0131\u011f\u0131n\u0131 ve veri b\u00fct\u00fcnl\u00fc\u011f\u00fcn\u00fc sa\u011flar. \u00d6rne\u011fin, bir not alma uygulamas\u0131nda, kullan\u0131c\u0131 \u00e7evrimd\u0131\u015f\u0131yken yeni bir not olu\u015fturdu\u011funda, bu not IndexedDB'ye kaydedilir. Ba\u011flant\u0131 geldi\u011finde, kaydedilen notlar otomatik olarak bulut sunucusuna senkronize edilir. Kullan\u0131c\u0131 aray\u00fcz\u00fc (UI) a\u00e7\u0131s\u0131ndan, \u00e7evrimd\u0131\u015f\u0131 durumu kullan\u0131c\u0131ya a\u00e7\u0131k\u00e7a bildirmek \u00f6nemlidir. Bir \"\u00c7evrimd\u0131\u015f\u0131 moddas\u0131n\u0131z\" mesaj\u0131 veya bir senkronizasyon simgesi, kullan\u0131c\u0131n\u0131n uygulaman\u0131n mevcut durumu hakk\u0131nda bilgi sahibi olmas\u0131n\u0131 sa\u011flar ve olas\u0131 kafa kar\u0131\u015f\u0131kl\u0131klar\u0131n\u0131 \u00f6nler. Kullan\u0131c\u0131 deneyimini (UX) tasarlarken, \u00e7evrimd\u0131\u015f\u0131 modda hangi i\u015flevlerin kullan\u0131labilir oldu\u011funu ve hangi i\u015flevlerin internet gerektirdi\u011fini net bir \u015fekilde belirtmek, kullan\u0131c\u0131 memnuniyetini art\u0131racakt\u0131r. React'in esnek yap\u0131s\u0131 ve zengin k\u00fct\u00fcphane ekosistemi, bu t\u00fcr karma\u015f\u0131k \u00e7evrimd\u0131\u015f\u0131 senaryolar\u0131 y\u00f6netmek i\u00e7in g\u00fc\u00e7l\u00fc bir temel sunar.<\/p>\n
LLaMA 3 ve React Entegrasyonu: Ad\u0131m Ad\u0131m Uygulama Geli\u015ftirme<\/h2>\n
\u015eimdiye kadar LLaMA 3'\u00fcn yerel \u00e7al\u0131\u015fmas\u0131n\u0131 ve React'in \u00e7evrimd\u0131\u015f\u0131 yeteneklerini ayr\u0131 ayr\u0131 inceledik. Bu b\u00f6l\u00fcmde, bu iki teknolojiyi bir araya getirerek \u00e7evrimd\u0131\u015f\u0131 ilk bir yapay zeka uygulamas\u0131n\u0131 nas\u0131l geli\u015ftirece\u011fimizi ad\u0131m ad\u0131m ele alaca\u011f\u0131z. Bir \"ki\u015fisel asistan\" veya \"not \u00f6zetleyici\" uygulamas\u0131 senaryosu \u00fczerinden ilerleyelim. Bu uygulama, kullan\u0131c\u0131lar\u0131n notlar\u0131n\u0131 \u00e7evrimd\u0131\u015f\u0131 kaydetmesine ve LLaMA 3 kullanarak bu notlar\u0131 \u00f6zetlemesine olanak tan\u0131yacak.<\/p>\n
Ad\u0131m 1: Proje Kurulumu ve Ollama Entegrasyonu<\/h3>\n
\u00d6ncelikle, yeni bir React projesi olu\u015ftural\u0131m. Vite, h\u0131zl\u0131 ba\u015flang\u0131\u00e7 ve geli\u015ftirme deneyimi sundu\u011fu i\u00e7in iyi bir se\u00e7enektir:<\/p>\n
\n
npm create vite@latest my-offline-ai-app -- --template react\ncd my-offline-ai-app\nnpm install<\/pre>\n
<\/code>\n<\/div>\n
Daha sonra, Ollama'y\u0131 yerel makinenize kurdu\u011funuzdan ve LLaMA 3 modelini \u00e7al\u0131\u015ft\u0131rd\u0131\u011f\u0131n\u0131zdan emin olun (ollama run llama3<\/code>). Ollama varsay\u0131lan olarak http:\/\/localhost:11434<\/code> adresinde \u00e7al\u0131\u015facakt\u0131r. React uygulaman\u0131zdan bu adrese istek g\u00f6nderece\u011fiz. \u00c7evrimd\u0131\u015f\u0131 veri depolama i\u00e7in localForage<\/code> k\u00fct\u00fcphanesini kural\u0131m:<\/p>\n
\n
npm install localforage<\/pre>\n
<\/code>\n<\/div>\n
Ad\u0131m 2: LLaMA 3 ile Etkile\u015fim i\u00e7in API Servisi<\/h3>\n
src\/services\/aiService.js<\/code> ad\u0131nda bir dosya olu\u015ftural\u0131m. Bu dosya, Ollama API'si ile etkile\u015fim kuracak fonksiyonlar\u0131 i\u00e7erecek:<\/p>\n
\n
\/\/ src\/services\/aiService.js\nconst OLLAMA_API_URL = 'http:\/\/localhost:11434\/api\/generate';\n\nexport const summarizeText = async (text) => {\n  try {\n    const response = await fetch(OLLAMA_API_URL, {\n      method: 'POST',\n      headers: {\n        'Content-Type': 'application\/json',\n      },\n      body: JSON.stringify({\n        model: 'llama3',\n        prompt: A\u015fa\u011f\u0131daki metni \u00f6zetle: ${text}<\/code>,\n        stream: false, \/\/ Stream yerine tek seferde yan\u0131t alal\u0131m\n      }),\n    });\n\n    if (!response.ok) {\n      throw new Error(HTTP error! status: ${response.status}<\/code>);\n    }\n\n    const data = await response.json();\n    return data.response.trim();\n  } catch (error) {\n    console.error('LLaMA 3 ile \u00f6zetleme hatas\u0131:', error);\n    \/\/ \u00c7evrimd\u0131\u015f\u0131 durumda veya hata durumunda bo\u015f bir string d\u00f6nebiliriz\n    return '\u00d6zetleme yap\u0131lamad\u0131. L\u00fctfen internet ba\u011flant\u0131n\u0131z\u0131 ve Ollama sunucusunu kontrol edin.';\n  }\n};<\/pre>\n
<\/code>\n<\/div>\n
Bu kod, verilen metni LLaMA 3'e g\u00f6ndererek bir \u00f6zet talep eder. Hata durumlar\u0131n\u0131 da ele alarak kullan\u0131c\u0131ya geri bildirim sa\u011flar.<\/p>\n
Ad\u0131m 3: \u00c7evrimd\u0131\u015f\u0131 Veri Y\u00f6netimi<\/h3>\n
src\/services\/dataService.js<\/code> ad\u0131nda bir dosya olu\u015ftural\u0131m. Bu dosya, notlar\u0131 localForage<\/code> kullanarak kaydedecek ve alacak:<\/p>\n
\n
\/\/ src\/services\/dataService.js\nimport localForage from 'localforage';\n\nlocalForage.config({\n  name: 'myOfflineAiApp',\n  storeName: 'notes',\n  description: 'Kullan\u0131c\u0131 notlar\u0131 ve \u00f6zetleri',\n});\n\nexport const saveNote = async (note) => {\n  const existingNotes = await getNotes();\n  const updatedNotes = existingNotes ? [...existingNotes, note] : [note];\n  await localForage.setItem('notes', updatedNotes);\n  return note;\n};\n\nexport const getNotes = async () => {\n  return await localForage.getItem('notes');\n};\n\nexport const updateNote = async (id, updatedNote) => {\n  const notes = await getNotes();\n  const index = notes.findIndex(note => note.id === id);\n  if (index !== -1) {\n    notes[index] = { ...notes[index], ...updatedNote };\n    await localForage.setItem('notes', notes);\n    return notes[index];\n  }\n  return null;\n};<\/pre>\n
<\/code>\n<\/div>\n
Bu servis, notlar\u0131 IndexedDB'ye kaydetme, alma ve g\u00fcncelleme i\u015flevlerini sa\u011flar. Her bir not, benzersiz bir kimli\u011fe, i\u00e7eri\u011fe ve \u00f6zetine sahip olabilir.<\/p>\n
Ad\u0131m 4: React Bile\u015fenini Olu\u015fturma<\/h3>\n
src\/App.jsx<\/code> dosyas\u0131n\u0131 g\u00fcncelleyelim. Bu, notlar\u0131 listeleyecek, yeni not ekleyecek ve \u00f6zetleme i\u015flevini kullanacak ana bile\u015fenimiz olacak:<\/p>\n
\n
\/\/ src\/App.jsx\nimport React, { useState, useEffect } from 'react';\nimport { saveNote, getNotes, updateNote } from '.\/services\/dataService';\nimport { summarizeText } from '.\/services\/aiService';\nimport { v4 as uuidv4 } from 'uuid'; \/\/ Benzersiz ID'ler i\u00e7in\nimport '.\/App.css'; \/\/ Basit stil dosyas\u0131\n\nfunction App() {\n  const [notes, setNotes] = useState([]);\n  const [newNoteContent, setNewNoteContent] = useState('');\n  const [isOnline, setIsOnline] = useState(navigator.onLine);\n\n  useEffect(() => {\n    \/\/ Mevcut notlar\u0131 y\u00fckle\n    const loadNotes = async () => {\n      const storedNotes = await getNotes();\n      setNotes(storedNotes || []);\n    };\n    loadNotes();\n\n    \/\/ \u00c7evrimd\u0131\u015f\u0131\/\u00e7evrimi\u00e7i durumu dinle\n    window.addEventListener('online', () => setIsOnline(true));\n    window.addEventListener('offline', () => setIsOnline(false));\n\n    return () => {\n      window.removeEventListener('online', () => setIsOnline(true));\n      window.removeEventListener('offline', () => setIsOnline(false));\n    };\n  }, []);\n\n  const handleAddNote = async () => {\n    if (newNoteContent.trim() === '') return;\n\n    const newNote = {\n      id: uuidv4(),\n      content: newNoteContent,\n      summary: '',\n      createdAt: new Date().toISOString(),\n    };\n\n    const savedNote = await saveNote(newNote);\n    setNotes((prevNotes) => [...prevNotes, savedNote]);\n    setNewNoteContent('');\n  };\n\n  const handleSummarizeNote = async (noteId) => {\n    const noteToSummarize = notes.find((note) => note.id === noteId);\n    if (!noteToSummarize) return;\n\n    \/\/ \u00d6zetleme i\u015flemi s\u0131ras\u0131nda kullan\u0131c\u0131ya geri bildirim ver\n    const updatedNotes = notes.map(n => \n      n.id === noteId ? { ...n, summary: '\u00d6zetleniyor...' } : n\n    );\n    setNotes(updatedNotes);\n\n    const summary = await summarizeText(noteToSummarize.content);\n    \n    const updatedNote = await updateNote(noteId, { summary });\n    setNotes((prevNotes) =>\n      prevNotes.map((note) => (note.id === noteId ? updatedNote : note))\n    );\n  };\n\n  return (\n    
\n      
\u00c7evrimd\u0131\u015f\u0131 AI Not Asistan\u0131<\/h1>\n      
status ${isOnline ? 'online' : 'offline'}<\/code>}>\n        Durum: {isOnline ? '\u00c7evrimi\u00e7i' : '\u00c7evrimd\u0131\u015f\u0131'}\n      <\/p>\n\n      
\n         setNewNoteContent(e.target.value)}\n        ><\/textarea>\n