اصنع تطبيق ملاحظات شخصي بالذكاء الاصطناعي باستخدام GPT وMarkdown وLocalStorage

اصنع تطبيق ملاحظات شخصي بالذكاء الاصطناعي باستخدام GPT وMarkdown وLocalStorage

April 2, 2025

يوضح هذا الدليل كيفية إنشاء تطبيق خفيف لتدوين الملاحظات يعمل على المتصفح، حيث يمكن للمستخدمين الكتابة باستخدام Markdown وتحديد نص للحصول على ملخصات أو إعادة صياغة من خلال GPT. يتم حفظ جميع البيانات في المتصفح، ويمكنك نسخ أو تصدير الملاحظات بسهولة.

🧰 المتطلبات الأساسية

مفتاح OpenAI API
معرفة أساسية بـ HTML / CSS / JavaScript
لا حاجة إلى خادم (Backend)

🔧 الخطوة 1: إنشاء قالب HTML

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>AI Markdown Notes</title>
  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/simplemde/dist/simplemde.min.css">
  <style>
    body { background: #0f172a; color: #e2e8f0; font-family: sans-serif; padding: 2rem; }
    .btn { padding: 0.5rem 1rem; background: #38bdf8; border: none; border-radius: 6px; color: white; cursor: pointer; }
    textarea, .editor-preview { background: #1e293b !important; color: #f1f5f9 !important; }
  </style>
</head>
<body>
  <h1>📝 تطبيق ملاحظات بالذكاء الاصطناعي</h1>
  <textarea id="editor"></textarea>
  <br>
  <button class="btn" onclick="summarizeNote()">✨ تلخيص التحديد</button>
  <button class="btn" onclick="saveNote()">💾 حفظ الملاحظة</button>
  <button class="btn" onclick="copyNote()">📋 نسخ الملاحظة</button>
</body>
</html>

📦 الخطوة 2: إضافة JavaScript ومنطق GPT

<script src="https://cdn.jsdelivr.net/npm/simplemde/dist/simplemde.min.js"></script>
<script>
const apiKey = "YOUR_OPENAI_API_KEY";
const editor = new SimpleMDE({ element: document.getElementById("editor") });

// تحميل الملاحظة المحفوظة
window.onload = () => {
  const saved = localStorage.getItem("aiNote");
  if (saved) editor.value(saved);
};

function saveNote() {
  const content = editor.value();
  localStorage.setItem("aiNote", content);
  alert("✅ تم حفظ الملاحظة محلياً!");
}

function copyNote() {
  navigator.clipboard.writeText(editor.value())
    .then(() => alert("✅ تم النسخ!"));
}

async function summarizeNote() {
  const selection = window.getSelection().toString() || editor.value();
  const response = await fetch("https://api.openai.com/v1/chat/completions", {
    method: "POST",
    headers: {
      "Content-Type": "application/json",
      "Authorization": `Bearer ${apiKey}`
    },
    body: JSON.stringify({
      model: "gpt-3.5-turbo",
      messages: [{ role: "user", content: `Summarize this: ${selection}` }],
      temperature: 0.5
    })
  });

  const result = await response.json();
  const summary = result.choices?.[0]?.message?.content;
  if (summary) {
    editor.codemirror.replaceSelection(`\n\n**AI Summary:** ${summary}`);
  }
}
</script>

⚡ أفكار إضافية

إضافة خيار “إعادة الصياغة” باستخدام GPT
تصدير الملاحظات كملفات `.md` أو `.txt`
دعم ملاحظات متعددة
تحويل التطبيق إلى إضافة لمتصفح كروم

🔗 الخلاصة

يعد هذا التطبيق لتدوين الملاحظات المدعوم بالذكاء الاصطناعي طريقة سريعة وفعالة لتعزيز إنتاجيتك باستخدام GPT — وكل ذلك باستخدام HTML وJavaScript فقط، بدون تثبيت، وبدون خوادم. جربه محليًا أو أضفه إلى لوحة تحكمك الشخصية!