Agent Template

Türkçe Genel Yardımcı

Kullanıcının Türkçe olarak yazdığı istekleri yerine getiren, soru cevaplayan, metin yazan ve pratik yardım sunan sohbet odaklı genel amaçlı bir ajan.

Türkçe genel yardımcı sohbet yazma soru-cevap

Use this template Back to List

rempelemed Sep 20, 2026 1 use

Preview Mode

This is a preview with sample data. The template uses placeholders like which will be replaced with actual agent data.

About This Template

Türkçe Genel Yardımcı is a browser-executable AI agent template built on AgentOp. It runs entirely in the browser using Python (via Pyodide) and can be deployed without a server — just download the generated HTML file and open it locally or host it anywhere.

Topics Türkçe genel yardımcı sohbet yazma soru-cevap

Template Preview

Template Metadata

Slug: turkce-genel-yardmc
Created By: rempelemed
Created: Sep 20, 2026
Usage Count: 1

Code Statistics

HTML Lines: 94
CSS Lines: 217
JS Lines: 158
Python Lines: 16

Source Code

<!DOCTYPE html>
<html lang="tr">
<head>
  <meta charset="UTF-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  <title>{{ agent_name }}</title>
  <style>{{ css_code }}</style>
</head>
<body>
  <div class="app-shell">
    <aside class="sidebar">
      <div class="brand-card">
        <div class="emoji">🧠</div>
        <div>
          <h1>{{ agent_name }}</h1>
          <p>{{ description }}</p>
        </div>
      </div>

      <div class="panel">
        <h2>✨ Neler yapar?</h2>
        <ul class="feature-list">
          <li>Metin yazar, düzenler ve yeniden ifade eder</li>
          <li>Soruları Türkçe ve net biçimde cevaplar</li>
          <li>Özet, plan, taslak ve fikir üretir</li>
          <li>Günlük işlerde hızlı yardımcı olur</li>
        </ul>
      </div>

      <div class="panel">
        <h2>💡 Örnek istekler</h2>
        <div class="chips" id="example-chips">
          <button type="button" class="chip">Kısa bir teşekkür mesajı yaz</button>
          <button type="button" class="chip">Bu paragrafı sadeleştir</button>
          <button type="button" class="chip">Bir iş planı taslağı çıkar</button>
          <button type="button" class="chip">Bu konuyu bana basitçe anlat</button>
        </div>
      </div>
    </aside>

    <main class="main-panel">
      <section class="composer-card">
        <div class="composer-head">
          <div>
            <h2>💬 Türkçe istek alanı</h2>
            <p>Ne istediğini yaz, yardımcı olayım.</p>
          </div>
          <div class="status-wrap">
            <span id="status-badge" class="status-badge">Başlatılıyor…</span>
          </div>
        </div>

        <div id="inline-error" class="inline-error hidden"></div>

        <label for="user-input" class="input-label">İsteğin</label>
        <textarea id="user-input" placeholder="Örn: Müşteriye gönderilecek profesyonel bir gecikme bilgilendirme e-postası yaz." rows="7"></textarea>

        <div class="actions-row">
          <button id="send-btn" class="primary-btn" type="button">Yanıt Oluştur</button>
          <button id="clear-btn" class="secondary-btn" type="button">Temizle</button>
        </div>
      </section>

      <section class="results-card">
        <div class="results-head">
          <h2>📝 Sohbet</h2>
        </div>
        <div id="results-container" class="results-container">
          <div class="empty-state" id="empty-state">
            <div class="empty-emoji">🇹🇷</div>
            <h3>Türkçe yardımcı hazır</h3>
            <p>Yazma, açıklama, özetleme ve düzenleme işlerinde hızlı destek al.</p>
            <ul>
              <li>✍️ Metin üretimi ve düzenleme</li>
              <li>📚 Açıklama ve soru cevaplama</li>
              <li>🧩 Fikir geliştirme ve yapılandırma</li>
              <li>⚡ Günlük işlerde pratik hız</li>
            </ul>
          </div>
        </div>
      </section>
    </main>
  </div>

  <div id="loading-overlay" class="loading-overlay hidden" aria-hidden="true">
    <div class="spinner-card">
      <div class="spinner"></div>
      <p>Yanıt hazırlanıyor…</p>
    </div>
  </div>

  <script>{{ js_code }}</script>
</body>
</html>

:root {
  --bg: #f4f7fb;
  --panel: #ffffff;
  --panel-alt: #eef4ff;
  --text: #172033;
  --muted: #5f6b85;
  --primary: #315efb;
  --primary-dark: #2647c7;
  --border: #d9e2f2;
  --success: #1f9d68;
  --danger: #c0392b;
  --shadow: 0 14px 40px rgba(34, 62, 120, 0.12);
  --radius-xl: 22px;
  --radius-lg: 16px;
  --radius-md: 12px;
  --font: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Arial, sans-serif;
}

* { box-sizing: border-box; }
html, body { margin: 0; padding: 0; background: linear-gradient(180deg, #f7f9fc 0%, #eef4ff 100%); color: var(--text); font-family: var(--font); }
body { min-height: 100vh; }
.hidden { display: none !important; }

.app-shell {
  max-width: 1440px;
  margin: 0 auto;
  padding: 24px;
  display: grid;
  grid-template-columns: 360px 1fr;
  gap: 24px;
}

.sidebar, .main-panel {
  display: flex;
  flex-direction: column;
  gap: 20px;
}

.brand-card, .panel, .composer-card, .results-card {
  background: var(--panel);
  border: 1px solid var(--border);
  border-radius: var(--radius-xl);
  box-shadow: var(--shadow);
}

.brand-card {
  padding: 22px;
  display: flex;
  align-items: flex-start;
  gap: 16px;
}

.emoji, .empty-emoji { font-size: 2rem; }
.brand-card h1 { margin: 0 0 8px; font-size: 1.45rem; }
.brand-card p, .panel p, .composer-head p, .empty-state p { margin: 0; color: var(--muted); line-height: 1.5; }
.panel { padding: 20px; }
.panel h2, .composer-head h2, .results-head h2 { margin: 0 0 12px; font-size: 1.05rem; }
.feature-list { margin: 0; padding-left: 20px; color: var(--muted); line-height: 1.7; }

.chips { display: flex; flex-wrap: wrap; gap: 10px; }
.chip {
  border: 1px solid var(--border);
  background: var(--panel-alt);
  color: var(--text);
  border-radius: 999px;
  padding: 10px 14px;
  cursor: pointer;
  font: inherit;
}
.chip:hover { border-color: var(--primary); }

.composer-card, .results-card { padding: 22px; }
.composer-head, .results-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  margin-bottom: 16px;
}

.status-badge {
  display: inline-flex;
  align-items: center;
  padding: 8px 12px;
  border-radius: 999px;
  background: #eef2ff;
  border: 1px solid #cfd8ff;
  color: var(--primary-dark);
  font-size: 0.92rem;
}

.input-label {
  display: inline-block;
  margin-bottom: 8px;
  font-weight: 600;
}

textarea {
  width: 100%;
  resize: vertical;
  min-height: 180px;
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  padding: 16px;
  font: inherit;
  background: #fff;
  color: var(--text);
  line-height: 1.6;
}

textarea:focus-visible, button:focus-visible {
  outline: 3px solid rgba(49, 94, 251, 0.2);
  outline-offset: 2px;
}

.actions-row {
  margin-top: 16px;
  display: flex;
  gap: 12px;
  flex-wrap: wrap;
}

.primary-btn, .secondary-btn {
  border: none;
  border-radius: 14px;
  padding: 12px 18px;
  font: inherit;
  font-weight: 700;
  cursor: pointer;
}
.primary-btn { background: var(--primary); color: white; }
.primary-btn:hover { background: var(--primary-dark); }
.secondary-btn { background: #eef2f8; color: var(--text); border: 1px solid var(--border); }
button:disabled { opacity: 0.6; cursor: not-allowed; }

.inline-error {
  margin-bottom: 14px;
  border: 1px solid #f1c0ba;
  background: #fff2f0;
  color: var(--danger);
  border-radius: 12px;
  padding: 12px 14px;
}

.results-container {
  min-height: 420px;
  display: flex;
  flex-direction: column;
  gap: 14px;
}

.empty-state {
  border: 1px dashed var(--border);
  border-radius: var(--radius-lg);
  padding: 28px;
  background: linear-gradient(180deg, #fafcff 0%, #f3f7ff 100%);
}
.empty-state h3 { margin: 12px 0 8px; }
.empty-state ul { margin: 14px 0 0; padding-left: 20px; color: var(--muted); line-height: 1.7; }

.message {
  border-radius: 18px;
  padding: 16px;
  line-height: 1.65;
  border: 1px solid var(--border);
  white-space: pre-wrap;
  word-break: break-word;
}
.message.user { background: #eef4ff; align-self: flex-end; max-width: 85%; }
.message.assistant { background: #ffffff; align-self: stretch; }
.message-label {
  display: block;
  font-size: 0.85rem;
  color: var(--muted);
  margin-bottom: 8px;
  font-weight: 700;
}

.loading-overlay {
  position: fixed;
  inset: 0;
  background: rgba(22, 31, 54, 0.28);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 20px;
}
.spinner-card {
  background: white;
  border-radius: 18px;
  padding: 22px 26px;
  min-width: 220px;
  text-align: center;
  box-shadow: var(--shadow);
}
.spinner {
  width: 34px;
  height: 34px;
  margin: 0 auto 12px;
  border-radius: 50%;
  border: 4px solid #dbe5ff;
  border-top-color: var(--primary);
  animation: spin 0.9s linear infinite;
}
@keyframes spin { to { transform: rotate(360deg); } }

@media (max-width: 1200px) {
  .app-shell { grid-template-columns: 1fr; }
}

@media (max-width: 768px) {
  .app-shell { padding: 16px; gap: 16px; }
  .brand-card, .panel, .composer-card, .results-card { border-radius: 18px; }
  .actions-row { flex-direction: column; }
  .primary-btn, .secondary-btn { width: 100%; }
  .message.user { max-width: 100%; }
}

function escapeHtml(str) {
  return String(str)
    .replace(/&/g, '&amp;')
    .replace(/</g, '&lt;')
    .replace(/>/g, '&gt;')
    .replace(/"/g, '&quot;')
    .replace(/'/g, '&#39;');
}

(function () {
  const sendBtn = document.getElementById('send-btn');
  const clearBtn = document.getElementById('clear-btn');
  const userInput = document.getElementById('user-input');
  const resultsContainer = document.getElementById('results-container');
  const emptyState = document.getElementById('empty-state');
  const inlineError = document.getElementById('inline-error');
  const overlay = document.getElementById('loading-overlay');
  const statusBadge = document.getElementById('status-badge');
  const exampleChips = document.querySelectorAll('#example-chips .chip');

  let ready = false;

  function setStatus(text) {
    statusBadge.textContent = text;
  }

  function showError(message) {
    inlineError.textContent = message;
    inlineError.classList.remove('hidden');
  }

  function clearError() {
    inlineError.textContent = '';
    inlineError.classList.add('hidden');
  }

  function setLoading(isLoading) {
    sendBtn.disabled = isLoading;
    clearBtn.disabled = isLoading;
    userInput.disabled = isLoading;
    overlay.classList.toggle('hidden', !isLoading);
  }

  function ensureConversationVisible() {
    if (emptyState) emptyState.classList.add('hidden');
  }

  window.addMessage = function (type, content) {
    ensureConversationVisible();
    const msg = document.createElement('div');
    msg.className = 'message ' + (type === 'user' ? 'user' : 'assistant');
    const label = type === 'user' ? 'Sen' : 'Yardımcı';
    msg.innerHTML = '<span class="message-label">' + escapeHtml(label) + '</span><div>' + escapeHtml(content) + '</div>';
    resultsContainer.appendChild(msg);
    resultsContainer.scrollTop = resultsContainer.scrollHeight;
    return msg;
  };

  function updateLastAssistantMessage(content) {
    const messages = resultsContainer.querySelectorAll('.message.assistant');
    const last = messages[messages.length - 1];
    if (!last) {
      window.addMessage('assistant', content);
      return;
    }
    const label = last.querySelector('.message-label');
    last.innerHTML = '<span class="message-label">' + escapeHtml(label ? label.textContent : 'Yardımcı') + '</span><div>' + escapeHtml(content) + '</div>';
  }

  async function checkReady() {
    if (!window.pyodideReady) return false;
    if (window.PROVIDER === 'local') {
      if (!window.agentManager || !window.agentManager.isLoaded) {
        setStatus('Model yüklenmeli');
        return false;
      }
    }
    return true;
  }

  async function init() {
    const ok = await checkReady();
    ready = ok;
    if (ok) {
      setStatus('Hazır');
    } else if (window.PROVIDER === 'local') {
      setStatus('Üstten model yükleyin');
    } else {
      setStatus('Başlatılıyor…');
    }
  }

  async function handleSend() {
    clearError();
    const query = userInput.value.trim();

    if (!query) {
      showError('Lütfen Türkçe isteğini yaz.');
      return;
    }

    const ok = await checkReady();
    if (!ok) {
      showError(window.PROVIDER === 'local' ? 'Devam etmek için üst bardan bir model yükleyin.' : 'Sistem henüz hazır değil. Lütfen birkaç saniye sonra tekrar deneyin.');
      return;
    }

    ready = true;
    ensureConversationVisible();
    window.addMessage('user', query);
    setLoading(true);
    setStatus('İşleniyor…');

    try {
      window.pyodide.globals.set('user_query', query);
      const response = await window.pyodide.runPythonAsync('await process_user_query(user_query)');
      updateLastAssistantMessage(String(response || ''));
      userInput.value = '';
      setStatus('Hazır');
    } catch (err) {
      console.error(err);
      showError('Yanıt oluşturulurken bir hata oluştu. Lütfen tekrar dene.');
      setStatus('Hata');
    } finally {
      setLoading(false);
    }
  }

  function handleClear() {
    clearError();
    userInput.value = '';
    resultsContainer.innerHTML = '';
    if (emptyState) {
      resultsContainer.appendChild(emptyState);
      emptyState.classList.remove('hidden');
    }
  }

  sendBtn.addEventListener('click', handleSend);
  clearBtn.addEventListener('click', handleClear);

  userInput.addEventListener('keydown', function (e) {
    if ((e.ctrlKey || e.metaKey) && e.key === 'Enter') {
      e.preventDefault();
      handleSend();
    }
  });

  exampleChips.forEach(function (chip) {
    chip.addEventListener('click', function () {
      userInput.value = chip.textContent.trim();
      userInput.focus();
    });
  });

  document.addEventListener('pyodide-ready', init);
  if (window.pyodideReady) init();
})();

async def process_user_query(query: str) -> str:
    """Kullanıcının Türkçe isteğine kısa, net ve yardımcı bir yanıt üretir.

    Args:
        query: Kullanıcının Türkçe isteği.

    Returns:
        Modelin ürettiği yanıt metni.
    """
    clean_query = (query or '').strip()
    if not clean_query:
        return 'Lütfen bir istek yaz.'

    prompt = f"""Kullanıcı isteği:\n{clean_query}\n\nTürkçe, net ve yararlı bir yanıt ver. İstek yazma veya düzenleme ise doğrudan sonucu üret. Soru ise anlaşılır şekilde cevapla. Gerekirse maddeler kullan ama gereksiz uzatma yapma."""
    answer = await agentop_llm.generate(prompt, globals().get('TEMPLATE_SYSTEM_PROMPT', ''))
    return answer.strip() if isinstance(answer, str) and answer.strip() else 'Bir yanıt üretilemedi.'