Çevrimdışı İlk Yapay Zeka Uygulamaları: LLaMA 3 ve React ile Nasıl Geliştirilir?

Günümüz dijital çağında, internet bağlantısının kesintisiz olduğu varsayımıyla çalışan birçok uygulama bulunmaktadır. Ancak, internet erişiminin kısıtlı olduğu veya hiç olmadığı durumlarda bile sorunsuz çalışabilen, yüksek performanslı yapay zeka uygulamaları geliştirmek artık hayal değil. Bu makalede, Meta’nın güçlü açık kaynak dil modeli LLaMA 3’ü ve modern web geliştirmenin temel taşlarından React’i kullanarak çevrimdışı (offline-first) bir yapay zeka uygulamasını nasıl adım adım inşa edeceğimizi keşfedeceğiz. Kullanıcı deneyimini, veri gizliliğini ve erişilebilirliği ön planda tutan bu yaklaşım, mobil cihazlardan endüstriyel çözümlere kadar geniş bir yelpazede yeni kapılar açmaktadır.

Çevrimdışı İlk Yaklaşım ve Yerel Yapay Zeka Modelleri Neden Önemli?

Çevrimdışı ilk (offline-first) yaklaşım, bir uygulamanın internet bağlantısı olmasa bile tamamen işlevsel kalmasını sağlayan bir tasarım felsefesidir. Bu, uygulamanın öncelikle yerel veri depolama ve işlem yeteneklerine dayanması, internet bağlantısı mevcut olduğunda ise verileri senkronize etmesi anlamına gelir. Kullanıcılar için bu, kesintisiz bir deneyim, daha hızlı yanıt süreleri ve internet bağlantısı maliyetlerinden bağımsızlık demektir. Özellikle mobil cihazlarda veya altyapının zayıf olduğu bölgelerde, çevrimdışı ilk uygulamalar kritik bir fark yaratabilir. Örneğin, bir saha görevlisinin internetin olmadığı bir şantiyede veri toplaması veya bir öğrencinin evdeki internet kesintisine rağmen ders materyallerine erişmeye devam etmesi gibi senaryolar, bu yaklaşımın değerini açıkça ortaya koymaktadır.

Peki, bu felsefeyi yapay zeka (AI) uygulamalarına nasıl entegre edebiliriz? Geleneksel olarak, çoğu yapay zeka modeli bulut tabanlı sunucularda çalışır ve her istek için internet bağlantısı gerektirir. Ancak yerel yapay zeka modelleri, adından da anlaşılacağı gibi, doğrudan kullanıcının cihazında (bilgisayar, telefon, tablet vb.) çalışır. Bu durum, bir dizi önemli avantajı beraberinde getirir. İlk olarak, veri gizliliği ve güvenliği artar; hassas veriler asla cihazı terk etmez ve bulut sunucularına gönderilmez. Bu, özellikle sağlık, finans veya kişisel verilerle çalışan uygulamalar için hayati öneme sahiptir. İkinci olarak, yanıt süreleri önemli ölçüde kısalır. İnternet üzerinden veri gönderme ve alma gecikmesi (latency) ortadan kalktığı için, yapay zeka işlemleri anında gerçekleşir. Bu, gerçek zamanlı çeviri, anlık metin özetleme veya hızlı görüntü analizi gibi uygulamalarda kullanıcı deneyimini radikal bir şekilde iyileştirir.

Üçüncü bir avantaj ise maliyet tasarrufudur. Bulut tabanlı yapay zeka hizmetleri genellikle kullanım başına ücretlendirilir ve bu maliyetler, yoğun kullanımlarda hızla artabilir. Yerel modellerde ise, başlangıçtaki donanım yatırımı dışında ek bir maliyet oluşmaz. Son olarak, yerel yapay zeka modelleri, internet bağlantısının olmadığı veya çok yavaş olduğu durumlarda bile tamamen işlevsel kalır. Bu, uzaktan çalışma, seyahat veya doğal afetler gibi durumlarda bile uygulamanın güvenilirliğini garanti eder. Elbette, yerel modellerin de zorlukları vardır. Cihazın işlem gücü ve bellek kapasitesi sınırlı olabilir, bu da daha küçük ve optimize edilmiş modellerin kullanılmasını gerektirebilir. Ayrıca, model güncellemelerinin yönetimi ve dağıtımı da bulut tabanlı çözümlere göre farklı stratejiler gerektirir. Ancak, bu zorluklar, gelişen teknoloji ve optimize edilmiş modeller sayesinde giderek daha aşılabilir hale gelmektedir. Bu nedenle, çevrimdışı ilk yaklaşım ve yerel yapay zeka modelleri, modern uygulama geliştirme paradigmalarında giderek daha merkezi bir rol oynamaktadır.

LLaMA 3 Nedir ve Yerel Ortamda Nasıl Çalışır?

LLaMA 3, Meta tarafından geliştirilen ve açık kaynak olarak sunulan en yeni büyük dil modelidir (Large Language Model – LLM). Önceki sürümleri LLaMA 1 ve LLaMA 2’nin üzerine inşa edilen LLaMA 3, metin anlama, metin üretme, kod yazma, çeviri yapma ve karmaşık akıl yürütme gibi birçok doğal dil işleme (NLP) görevinde etkileyici performans sergilemektedir. Modelin açık kaynak doğası, geliştiricilere ve araştırmacılara LLaMA 3’ü kendi projelerine entegre etme, özelleştirme ve hatta daha da geliştirme özgürlüğü sunar. Farklı parametre boyutlarına sahip versiyonları (örneğin, 8B, 70B), çeşitli donanım ve performans ihtiyaçlarına uygun çözümler sunar. 8B parametreli model, daha az kaynak gerektirdiği için genellikle yerel cihazlarda çalıştırmak için tercih edilirken, 70B gibi daha büyük modeller daha fazla işlem gücü ve bellek gerektirir.

LLaMA 3’ü yerel bir ortamda çalıştırmak, uygulamanızın internet bağlantısından bağımsız olarak güçlü yapay zeka yeteneklerine sahip olmasını sağlar. Bu, özellikle veri gizliliği kritik olan veya anında yanıt gerektiren uygulamalar için büyük bir avantajdır. LLaMA 3’ü yerel olarak çalıştırmanın birkaç yolu vardır. En popüler ve erişilebilir yöntemlerden biri Ollama kullanmaktır. Ollama, LLaMA gibi büyük dil modellerini yerel bilgisayarınızda kolayca kurmanızı ve çalıştırmanızı sağlayan bir araçtır. Birkaç komutla LLaMA 3’ü indirip bir yerel API olarak kullanıma hazır hale getirebilirsiniz. Ollama, modelleri optimize edilmiş bir şekilde çalıştırır ve geliştiricilerin bu modellere HTTP API aracılığıyla kolayca erişmesini sağlar. Bu, React gibi bir ön uç (frontend) uygulamasının, bir web sunucusuna istek gönderir gibi yerel LLaMA 3 modeline istek gönderebileceği anlamına gelir.

Ollama ile kurulum oldukça basittir. İlk olarak, Ollama’nın resmi web sitesinden işletim sisteminize uygun istemciyi indirip kurarsınız. Kurulum tamamlandıktan sonra, bir terminal (uçbirim) açarak LLaMA 3 modelini indirebilirsiniz. Örneğin, 8B parametreli modeli indirmek için şu komutu kullanmanız yeterlidir:

ollama run llama3

Bu komut, LLaMA 3 modelini indirir ve yerel bir sunucuda çalışmaya başlar. Model indirildikten sonra, Ollama varsayılan olarak http://localhost:11434 adresinde bir API sunar. Bu API'yi kullanarak modelle etkileşime geçebilirsiniz. Örneğin, metin tamamlama veya sohbet (chat) işlevleri için POST istekleri gönderebilirsiniz. LLaMA 3'ü yerel olarak çalıştırmak için donanım gereksinimleri modelin boyutuna göre değişir. 8B parametreli bir model için genellikle en az 8 GB RAM'e sahip bir bilgisayar önerilirken, daha iyi performans için bir grafik işlem birimi (GPU) ve daha fazla RAM tercih edilir. Modern işlemciler (CPU) üzerinde de çalışabilse de, GPU kullanımı çok daha hızlı sonuçlar verir. Türkiye'deki geliştiriciler ve işletmeler için bu, özellikle internet altyapısının her yerde aynı olmadığı bölgelerde, müşteri hizmetleri botları, kişisel asistanlar veya içerik üretim araçları gibi uygulamaları çevrimdışı olarak sunma potansiyeli yaratır. Örneğin, bir avukatlık bürosu, müvekkil bilgilerini dışarıya göndermeden hukuki belgeleri özetleyebilen yerel bir yapay zeka asistanı kullanabilir.

React ile Çevrimdışı Destekli Bir Kullanıcı Arayüzü Oluşturma

React, Facebook tarafından geliştirilen ve kullanıcı arayüzleri (User Interfaces - UI) oluşturmak için kullanılan popüler bir JavaScript kütüphanesidir. Bileşen tabanlı (component-based) yapısı sayesinde, karmaşık UI'ları küçük, yeniden kullanılabilir ve yönetilebilir parçalara bölerek geliştirmeyi kolaylaştırır. Çevrimdışı ilk yapay zeka uygulamamız için React'i tercih etmemizin temel nedenlerinden biri, modern web uygulamalarının (Progressive Web Apps - PWA) temelini oluşturan güçlü çevrimdışı yetenekleriyle kolayca entegre olabilmesidir. React uygulamaları, Service Worker'lar aracılığıyla önbellekleme (caching) stratejileri uygulayarak internet bağlantısı olmasa bile çalışmaya devam edebilir.

Bir React uygulamasını çevrimdışı dostu hale getirmenin anahtarı, Service Worker'lardır. Service Worker'lar, tarayıcı ile ağ arasında bir proxy (vekil sunucu) görevi gören JavaScript dosyalarıdır. Uygulamanızın kaynaklarını (HTML, CSS, JavaScript, resimler vb.) önbelleğe alabilir ve internet bağlantısı olmadığında bu önbellekten sunabilirler. Bu sayede, kullanıcılar uygulamanızı çevrimdışı durumdayken bile başlatabilir ve temel işlevlerini kullanabilirler. Create React App veya Vite gibi modern React proje iskeletleri (framework) genellikle Service Worker entegrasyonu için hazır şablonlar sunar. Örneğin, Create React App'te src/index.js dosyasında serviceWorkerRegistration.register() çağrısını aktif hale getirerek uygulamanızı PWA'ya dönüştürebilirsiniz.

import React from 'react';
import ReactDOM from 'react-dom/client';
import './index.css';
import App from './App';
import * as serviceWorkerRegistration from './serviceWorkerRegistration';

const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(
  
    
  
);

// Service Worker'ı kaydet
serviceWorkerRegistration.register();

Çevrimdışı bir uygulamada veri yönetimi de kritik öneme sahiptir. Kullanıcının cihazında kalıcı veri depolamak için çeşitli seçenekler mevcuttur. localStorage ve sessionStorage basit anahtar-değer çiftleri için uygun olsa da, daha karmaşık ve büyük veri setleri için IndexedDB tercih edilir. IndexedDB, tarayıcıda çalışan, güçlü bir NoSQL veritabanıdır ve yapılandırılmış verileri depolamak için idealdir. localForage gibi kütüphaneler, IndexedDB, WebSQL ve localStorage arasında otomatik olarak en iyi depolama mekanizmasını seçerek geliştiriciler için kullanımı kolaylaştırır. Bu kütüphane sayesinde, verileri asenkron olarak kaydedebilir ve alabiliriz, bu da kullanıcı arayüzünün donmasını engeller.

React'te durum yönetimi (state management) için Redux Toolkit, Zustand veya Context API gibi araçlar kullanılabilir. Çevrimdışı senaryolarda, uygulamanın durumunu ve verilerini senkronize tutmak önemlidir. Kullanıcı çevrimdışıyken yaptığı değişiklikler yerel olarak kaydedilmeli ve internet bağlantısı geri geldiğinde sunucuya gönderilmelidir. Bu "senkronizasyon" mekanizması, uygulamanın sağlamlığını ve veri bütünlüğünü sağlar. Örneğin, bir not alma uygulamasında, kullanıcı çevrimdışıyken yeni bir not oluşturduğunda, bu not IndexedDB'ye kaydedilir. Bağlantı geldiğinde, kaydedilen notlar otomatik olarak bulut sunucusuna senkronize edilir. Kullanıcı arayüzü (UI) açısından, çevrimdışı durumu kullanıcıya açıkça bildirmek önemlidir. Bir "Çevrimdışı moddasınız" mesajı veya bir senkronizasyon simgesi, kullanıcının uygulamanın mevcut durumu hakkında bilgi sahibi olmasını sağlar ve olası kafa karışıklıklarını önler. Kullanıcı deneyimini (UX) tasarlarken, çevrimdışı modda hangi işlevlerin kullanılabilir olduğunu ve hangi işlevlerin internet gerektirdiğini net bir şekilde belirtmek, kullanıcı memnuniyetini artıracaktır. React'in esnek yapısı ve zengin kütüphane ekosistemi, bu tür karmaşık çevrimdışı senaryoları yönetmek için güçlü bir temel sunar.

LLaMA 3 ve React Entegrasyonu: Adım Adım Uygulama Geliştirme

Şimdiye kadar LLaMA 3'ün yerel çalışmasını ve React'in çevrimdışı yeteneklerini ayrı ayrı inceledik. Bu bölümde, bu iki teknolojiyi bir araya getirerek çevrimdışı ilk bir yapay zeka uygulamasını nasıl geliştireceğimizi adım adım ele alacağız. Bir "kişisel asistan" veya "not özetleyici" uygulaması senaryosu üzerinden ilerleyelim. Bu uygulama, kullanıcıların notlarını çevrimdışı kaydetmesine ve LLaMA 3 kullanarak bu notları özetlemesine olanak tanıyacak.

Adım 1: Proje Kurulumu ve Ollama Entegrasyonu

Öncelikle, yeni bir React projesi oluşturalım. Vite, hızlı başlangıç ve geliştirme deneyimi sunduğu için iyi bir seçenektir:

npm create vite@latest my-offline-ai-app -- --template react
cd my-offline-ai-app
npm install

Daha sonra, Ollama'yı yerel makinenize kurduğunuzdan ve LLaMA 3 modelini çalıştırdığınızdan emin olun (ollama run llama3). Ollama varsayılan olarak http://localhost:11434 adresinde çalışacaktır. React uygulamanızdan bu adrese istek göndereceğiz. Çevrimdışı veri depolama için localForage kütüphanesini kuralım:

npm install localforage

Adım 2: LLaMA 3 ile Etkileşim için API Servisi

src/services/aiService.js adında bir dosya oluşturalım. Bu dosya, Ollama API'si ile etkileşim kuracak fonksiyonları içerecek:

// src/services/aiService.js
const OLLAMA_API_URL = 'http://localhost:11434/api/generate';

export const summarizeText = async (text) => {
  try {
    const response = await fetch(OLLAMA_API_URL, {
      method: 'POST',
      headers: {
        'Content-Type': 'application/json',
      },
      body: JSON.stringify({
        model: 'llama3',
        prompt: Aşağıdaki metni özetle: ${text},
        stream: false, // Stream yerine tek seferde yanıt alalım
      }),
    });

    if (!response.ok) {
      throw new Error(HTTP error! status: ${response.status});
    }

    const data = await response.json();
    return data.response.trim();
  } catch (error) {
    console.error('LLaMA 3 ile özetleme hatası:', error);
    // Çevrimdışı durumda veya hata durumunda boş bir string dönebiliriz
    return 'Özetleme yapılamadı. Lütfen internet bağlantınızı ve Ollama sunucusunu kontrol edin.';
  }
};

Bu kod, verilen metni LLaMA 3'e göndererek bir özet talep eder. Hata durumlarını da ele alarak kullanıcıya geri bildirim sağlar.

Adım 3: Çevrimdışı Veri Yönetimi

src/services/dataService.js adında bir dosya oluşturalım. Bu dosya, notları localForage kullanarak kaydedecek ve alacak:

// src/services/dataService.js
import localForage from 'localforage';

localForage.config({
  name: 'myOfflineAiApp',
  storeName: 'notes',
  description: 'Kullanıcı notları ve özetleri',
});

export const saveNote = async (note) => {
  const existingNotes = await getNotes();
  const updatedNotes = existingNotes ? [...existingNotes, note] : [note];
  await localForage.setItem('notes', updatedNotes);
  return note;
};

export const getNotes = async () => {
  return await localForage.getItem('notes');
};

export const updateNote = async (id, updatedNote) => {
  const notes = await getNotes();
  const index = notes.findIndex(note => note.id === id);
  if (index !== -1) {
    notes[index] = { ...notes[index], ...updatedNote };
    await localForage.setItem('notes', notes);
    return notes[index];
  }
  return null;
};

Bu servis, notları IndexedDB'ye kaydetme, alma ve güncelleme işlevlerini sağlar. Her bir not, benzersiz bir kimliğe, içeriğe ve özetine sahip olabilir.

Adım 4: React Bileşenini Oluşturma

src/App.jsx dosyasını güncelleyelim. Bu, notları listeleyecek, yeni not ekleyecek ve özetleme işlevini kullanacak ana bileşenimiz olacak:

// src/App.jsx
import React, { useState, useEffect } from 'react';
import { saveNote, getNotes, updateNote } from './services/dataService';
import { summarizeText } from './services/aiService';
import { v4 as uuidv4 } from 'uuid'; // Benzersiz ID'ler için
import './App.css'; // Basit stil dosyası

function App() {
  const [notes, setNotes] = useState([]);
  const [newNoteContent, setNewNoteContent] = useState('');
  const [isOnline, setIsOnline] = useState(navigator.onLine);

  useEffect(() => {
    // Mevcut notları yükle
    const loadNotes = async () => {
      const storedNotes = await getNotes();
      setNotes(storedNotes || []);
    };
    loadNotes();

    // Çevrimdışı/çevrimiçi durumu dinle
    window.addEventListener('online', () => setIsOnline(true));
    window.addEventListener('offline', () => setIsOnline(false));

    return () => {
      window.removeEventListener('online', () => setIsOnline(true));
      window.removeEventListener('offline', () => setIsOnline(false));
    };
  }, []);

  const handleAddNote = async () => {
    if (newNoteContent.trim() === '') return;

    const newNote = {
      id: uuidv4(),
      content: newNoteContent,
      summary: '',
      createdAt: new Date().toISOString(),
    };

    const savedNote = await saveNote(newNote);
    setNotes((prevNotes) => [...prevNotes, savedNote]);
    setNewNoteContent('');
  };

  const handleSummarizeNote = async (noteId) => {
    const noteToSummarize = notes.find((note) => note.id === noteId);
    if (!noteToSummarize) return;

    // Özetleme işlemi sırasında kullanıcıya geri bildirim ver
    const updatedNotes = notes.map(n => 
      n.id === noteId ? { ...n, summary: 'Özetleniyor...' } : n
    );
    setNotes(updatedNotes);

    const summary = await summarizeText(noteToSummarize.content);
    
    const updatedNote = await updateNote(noteId, { summary });
    setNotes((prevNotes) =>
      prevNotes.map((note) => (note.id === noteId ? updatedNote : note))
    );
  };

  return (
    

      
Çevrimdışı AI Not Asistanı
      
status ${isOnline ? 'online' : 'offline'}}>
        Durum: {isOnline ? 'Çevrimiçi' : 'Çevrimdışı'}
      

      

         setNewNoteContent(e.target.value)}
        >
        Not Ekle
      

      

        
Notlarınız
        {notes.length === 0 ? (
          
Henüz notunuz yok. Bir tane ekleyin!
        ) : (
          

            {notes.map((note) => (
              

                
İçerik: {note.content}
                
Özet: {note.summary || 'Henüz özetlenmedi.'}
                 handleSummarizeNote(note.id)} disabled={!isOnline && note.summary !== 'Özetleniyor...'}>
                  Özetle
                
              
            ))}
          
        )}
      
    
  );
}

export default App;

Bu kodda, notları yerel olarak saklıyoruz ve LLaMA 3 API'sine sadece internet bağlantısı varken özetleme isteği gönderiyoruz. Ancak, summarizeText fonksiyonumuz çevrimdışı durumda da bir hata mesajı dönebiliyor, bu sayede kullanıcıya geri bildirim sağlayabiliyoruz. Gerçek bir çevrimdışı ilk uygulamada, özetleme isteğini de bir kuyruğa alıp bağlantı geldiğinde gönderme gibi daha gelişmiş senkronizasyon mekanizmaları kurulabilir. uuid kütüphanesini kurmayı unutmayın: npm install uuid.

Adım 5: Service Worker Entegrasyonu (Vite için)

Vite projelerinde Service Worker entegrasyonu için vite-plugin-pwa gibi eklentiler kullanılabilir. Bu eklenti, workbox kütüphanesini kullanarak Service Worker'ları otomatik olarak oluşturur ve yapılandırır. vite.config.js dosyanıza ekleyerek PWA özelliklerini etkinleştirebilirsiniz. Bu, uygulamanızın statik varlıklarını (HTML, CSS, JS) önbelleğe alarak çevrimdışı çalışmasını sağlar.

// vite.config.js
import { defineConfig } from 'vite';
import react from '@vitejs/plugin-react';
import { VitePWA } from 'vite-plugin-pwa';

export default defineConfig({
  plugins: [
    react(),
    VitePWA({
      registerType: 'autoUpdate',
      devOptions: {
        enabled: true // Geliştirme ortamında PWA'yı etkinleştir
      },
      manifest: {
        name: 'Çevrimdışı AI Not Asistanı',
        short_name: 'AI Notlar',
        description: 'LLaMA 3 ile çevrimdışı not özetleme uygulaması',
        theme_color: '#ffffff',
        icons: [
          {
            src: 'pwa-192x192.png',
            sizes: '192x192',
            type: 'image/png'
          },
          {
            src: 'pwa-512x512.png',
            sizes: '512x512',
            type: 'image/png'
          }
        ]
      }
    })
  ],
});

Bu adımlarla, LLaMA 3'ü yerel olarak kullanan ve React ile çevrimdışı çalışabilen basit bir not özetleme uygulaması geliştirmiş olursunuz. Kullanıcılar, internet bağlantısı olmasa bile notlarını ekleyebilir ve daha sonra bağlantı geldiğinde özetleme işlevini kullanabilirler. Bu, çevrimdışı ilk yapay zeka uygulamalarının temelini oluşturur.

Performans Optimizasyonu ve Kullanıcı Deneyimi İpuçları

Çevrimdışı ilk yapay zeka uygulamaları geliştirirken performans ve kullanıcı deneyimi (UX), başarının anahtarıdır. Yerel olarak çalışan büyük dil modelleri (LLM'ler) cihazın kaynaklarını yoğun bir şekilde kullanabilir, bu nedenle optimizasyon kritik öneme sahiptir. Ayrıca, çevrimdışı modda kullanıcıya tutarlı ve bilgilendirici bir deneyim sunmak da büyük önem taşır.

Model Optimizasyonu ve Seçimi

LLaMA 3 gibi modellerin farklı boyutları (8B, 70B vb.) vardır. Yerel cihazlarda çalışırken, en küçük ve en optimize edilmiş versiyonları (örneğin, 8B veya daha küçük, nicelenmiş - quantized - versiyonları) tercih etmek performansı önemli ölçüde artırır. Nicelenmiş modeller, modelin ağırlıklarını daha az bit kullanarak temsil eder, bu da dosya boyutunu küçültür ve bellek kullanımını azaltırken, genellikle kabul edilebilir bir doğruluk seviyesini korur. Ollama gibi araçlar, bu nicelenmiş modelleri kolayca indirip çalıştırma imkanı sunar. Uygulamanızın spesifik ihtiyaçlarına göre, daha küçük, özel olarak eğitilmiş modeller (fine-tuned models) de değerlendirilebilir.

Akışlı Yanıtlar (Streamed Responses)

Yapay zeka modelinden gelen yanıtların tamamını beklemek yerine, yanıtları "akış" (stream) halinde almak, kullanıcı deneyimini önemli ölçüde iyileştirir. Kullanıcı, metnin yavaş yavaş ekranda belirdiğini gördüğünde, uygulamanın çalışır durumda olduğunu ve yanıtın geldiğini hisseder. Bu, özellikle uzun metinlerin üretildiği veya özetlendiği durumlarda algılanan hızı artırır. Ollama API'si, akışlı yanıtları destekler; bu özelliği kullanarak kullanıcı arayüzünüzü buna göre güncelleyebilirsiniz.

// Ö