Mehmet
Admin
Aynı komutu farklı sohbetlerden tekrar bulmaya çalışıyorsanız küçük bir komut arşivi işinizi kolaylaştırabilir. Bu örnekte tek HTML dosyasıyla başlık ve komut saklayan bir başlangıç uygulaması var. Bir yapay zekâ sağlayıcısına bağlanmaz, API anahtarı istemez ve yazdıklarınızı sunucuya göndermez. Komutlar açık sayfanın belleğinde tutulur; kalıcı kopya için JSON indirmeniz gerekir.
Bu davranışı denemek için önce iki örnek kayıt girin, dışarı aktarın ve boş bir sayfa oturumuna geri yükleyin. Türkçe harflerin, satır sonlarının ve komut içindeki tırnakların korunduğunu kontrol edin. Eksik başlıkta kaydın reddedildiğini de deneyin. Hatalı JSON seçildiğinde arayüzün hata bildirmesi, farklı dosyaların sessizce komut gibi kabul edilmesini önler.
Geliştirmek isterseniz önce arama ve etiket ekleyin. Silme ve düzenleme gibi işlevlerden önce ayrı bir dışarı aktarma kopyası alın. Üretim uygulamasına dönüştürmek, kullanıcı hesabı ve sunucu saklaması gibi ek kararlar gerektirir. Bu sürümün hedefi, aynı bilgisayarda komutlarını görünür bir dosyayla taşımak isteyenler için anlaşılır bir başlangıç sunmaktır.
MDN: dosya çıktısı için nesne bağlantısı
Nasıl kullanılır?
Kodun tamamını bir metin düzenleyiciye yapıştırın. UTF-8 kodlamasıylakomut-defteri.html adıyla kaydedin ve tarayıcıda açın. Başlık alanına “Ürün açıklaması”, komut alanına kendi metninizi yazıp Komutu ekle düğmesini kullanın. Listede yeni bir başlık ve altında komutun aynısını görmelisiniz. Bu küçük sürüm, hesabı olan bir bulut uygulaması veya çok kullanıcılı hizmet değildir.
HTML:
<!doctype html>
<html lang="tr"><meta charset="utf-8">
<meta name="viewport" content="width=device-width,initial-scale=1">
<title>Komut Defteri</title>
<style>body{font:16px system-ui;max-width:760px;margin:24px auto;padding:16px}input,textarea{display:block;box-sizing:border-box;width:100%;margin:8px 0;padding:10px}button{padding:10px;margin:4px}pre{white-space:pre-wrap;overflow-wrap:anywhere;border:1px solid #aaa;padding:12px}</style>
<h1>Komut Defteri</h1>
<p>Kayıtlar sayfa belleğindedir. Kapatmadan önce JSON indir düğmesini kullanın.</p>
<label>Başlık<input id="title" maxlength="120"></label>
<label>Komut<textarea id="prompt" rows="6"></textarea></label>
<button id="add">Komutu ekle</button>
<button id="export">JSON indir</button>
<label>Önceki JSON dosyasını aç<input id="import" type="file" accept=".json,application/json"></label>
<p id="notice" role="status"></p><main id="items"></main>
<script>
const byId = id => document.getElementById(id);
let entries = [];
function render() {
byId('items').replaceChildren();
for (const entry of entries) {
const heading = document.createElement('h2');
const text = document.createElement('pre');
heading.textContent = entry.title;
text.textContent = entry.prompt;
byId('items').append(heading, text);
}
byId('notice').textContent = entries.length + ' kayıt var.';
}
byId('add').onclick = () => {
const title = byId('title').value.trim();
const prompt = byId('prompt').value.trim();
if (!title || !prompt) { byId('notice').textContent = 'Başlık ve komut gerekli.'; return; }
entries.push({title, prompt}); render();
byId('title').value = ''; byId('prompt').value = '';
};
byId('export').onclick = () => {
const blob = new Blob([JSON.stringify(entries, null, 2)], {type:'application/json;charset=utf-8'});
const url = URL.createObjectURL(blob);
const link = document.createElement('a');
link.href = url; link.download = 'komutlar.json'; link.click();
setTimeout(() => URL.revokeObjectURL(url), 1000);
};
byId('import').onchange = async event => {
const file = event.target.files[0]; if (!file) return;
if (file.size > 1000000) { byId('notice').textContent = 'Dosya 1 MB altında olmalı.'; return; }
try {
const data = JSON.parse(await file.text());
if (!Array.isArray(data) || data.length > 500 || data.some(x => !x || typeof x.title !== 'string' || typeof x.prompt !== 'string')) throw Error();
entries.push(...data.map(x => ({title:x.title, prompt:x.prompt}))); render();
} catch { byId('notice').textContent = 'Geçerli bir komutlar JSON dosyası seçin.'; }
};
</script></html>Kapatmadan önce çıktıyı indirin
JSON indir düğmesi arşivinizikomutlar.json dosyasına aktarır. Sayfayı kapatmadan önce bu dosyayı indirin. Yeniden açınca dosya seçme alanından kendi JSON yedeğinizi ekleyin. İçe aktarma mevcut listeye ekleme yapar; aynı dosyayı iki kez seçerseniz aynı kayıtları iki kez eklersiniz. Kod bunu bir eşitleme hizmeti gibi ele almaz.Bu davranışı denemek için önce iki örnek kayıt girin, dışarı aktarın ve boş bir sayfa oturumuna geri yükleyin. Türkçe harflerin, satır sonlarının ve komut içindeki tırnakların korunduğunu kontrol edin. Eksik başlıkta kaydın reddedildiğini de deneyin. Hatalı JSON seçildiğinde arayüzün hata bildirmesi, farklı dosyaların sessizce komut gibi kabul edilmesini önler.
Neden metni HTML olarak eklemiyor?
Komut alanında kod parçaları veya açılı ayraçlar bulunabilir. Örnek bunları sayfayatextContent ile metin olarak yerleştirir; komutları çalışan HTML'e çevirmek bu arşiv için gerekli değildir. JSON dışarı aktarma ise tarayıcının Blob ve nesne bağlantısı işlevlerini kullanır. Bu temel yöntemlerin belgeleri kaynaklarda bulunuyor.Geliştirmek isterseniz önce arama ve etiket ekleyin. Silme ve düzenleme gibi işlevlerden önce ayrı bir dışarı aktarma kopyası alın. Üretim uygulamasına dönüştürmek, kullanıcı hesabı ve sunucu saklaması gibi ek kararlar gerektirir. Bu sürümün hedefi, aynı bilgisayarda komutlarını görünür bir dosyayla taşımak isteyenler için anlaşılır bir başlangıç sunmaktır.
Kaynaklar
MDN: sayfa öğesi oluşturmaMDN: dosya çıktısı için nesne bağlantısı
