@elgap/edukaai 0.1.0

package/.output/server/chunks/build/index-DgKa1cy0.mjs

@@ -0,0 +1,360 @@
+import { _ as __nuxt_component_0 } from './nuxt-link-Ceyd90PQ.mjs';
+import { mergeProps, withCtx, createTextVNode, openBlock, createBlock, createVNode, toDisplayString, useSSRContext } from 'vue';
+import { ssrRenderAttrs, ssrRenderComponent, ssrRenderList, ssrRenderClass, ssrInterpolate } from 'vue/server-renderer';
+import { _ as _export_sfc, u as useHead } from './server.mjs';
+import '../nitro/nitro.mjs';
+import 'node:http';
+import 'node:https';
+import 'node:events';
+import 'node:buffer';
+import 'node:fs';
+import 'node:path';
+import 'node:crypto';
+import 'node:url';
+import '@iconify/utils';
+import 'consola';
+import 'pinia';
+import 'vue-router';
+import 'tailwindcss/colors';
+import '@iconify/vue';
+import '../routes/renderer.mjs';
+import 'vue-bundle-renderer/runtime';
+import 'unhead/server';
+import 'devalue';
+import 'unhead/utils';
+
+const _sfc_main = {
+  __name: "index",
+  __ssrInlineRender: true,
+  setup(__props) {
+    useHead({
+      title: "Guide - edukaAI",
+      meta: [
+        {
+          name: "description",
+          content: "Complete guide to LLM fine-tuning and creating training datasets"
+        }
+      ]
+    });
+    const bestPractices = [
+      {
+        title: "Quality over Quantity",
+        description: "100 excellent examples beat 1000 mediocre ones. Review and improve regularly.",
+        color: "bg-blue-500"
+      },
+      {
+        title: "Diversity is Key",
+        description: "Include different question styles, formats, and difficulty levels.",
+        color: "bg-green-500"
+      },
+      {
+        title: "Use Real Conversations",
+        description: "Import from AI assistants or use actual user interactions.",
+        color: "bg-purple-500"
+      },
+      {
+        title: "Cover Edge Cases",
+        description: "Include examples of common mistakes and error handling.",
+        color: "bg-orange-500"
+      },
+      {
+        title: "Be Consistent",
+        description: "Use the same system prompt for related examples.",
+        color: "bg-pink-500"
+      },
+      {
+        title: "Show, Don't Just Tell",
+        description: "Include code examples and concrete demonstrations.",
+        color: "bg-yellow-500"
+      },
+      {
+        title: "Iterate & Improve",
+        description: "Don't aim for perfect on the first try. Build quality over time.",
+        color: "bg-indigo-500"
+      },
+      {
+        title: "Test Your Dataset",
+        description: "Try training on 100 examples before committing to 1000.",
+        color: "bg-teal-500"
+      }
+    ];
+    const commonMistakes = [
+      {
+        title: "Vague Instructions",
+        description: `Instructions like "help me with Python" are too vague. The model can't learn from ambiguous inputs.`,
+        solution: 'Be specific: "How do I handle file reading errors in Python with proper exception handling?"'
+      },
+      {
+        title: "Inconsistent Style",
+        description: "Mixing formal responses with casual ones confuses the model.",
+        solution: "Pick a consistent tone and stick with it using system prompts."
+      },
+      {
+        title: "Too Many Similar Examples",
+        description: "100 variations of the same question doesn't help.",
+        solution: "Cover diverse topics. Quality diversity beats quantity similarity."
+      },
+      {
+        title: "Ignoring Quality Ratings",
+        description: "Marking everything as 5-star means you'll train on bad data.",
+        solution: "Be honest with ratings. Only approve 3+ stars."
+      },
+      {
+        title: "Rushing to 1000",
+        description: "Focusing only on number without quality harms your model.",
+        solution: "Focus on creating 10 excellent examples, then 50, then 100."
+      }
+    ];
+    const faqs = [
+      {
+        question: "How many examples do I need?",
+        answer: "We recommend <strong>1000 high-quality examples</strong> for your first fine-tuning. Start with 100 for testing, 500 for noticeable improvement, and 1000+ for solid results. Remember: quality beats quantity!"
+      },
+      {
+        question: "Where can I find sample data to learn from?",
+        answer: 'Visit our <NuxtLink to="/sample-datasets" class="text-blue-600 hover:underline">Sample Datasets page</NuxtLink> to download example datasets and explore public datasets like Stanford Alpaca, ShareGPT, and OpenOrca. These are great for understanding what high-quality training data looks like!'
+      },
+      {
+        question: "Can I import from ChatGPT / Claude?",
+        answer: "Yes! edukaAI imports from <strong>Claude Code</strong> (full support), <strong>Cursor</strong> (chat history), and <strong>OpenCode</strong> (limited). Go to the Import page to get started."
+      },
+      {
+        question: "How long does it take?",
+        answer: "Manual creation: 5-10 min per example = 85-170 hours for 1000. <strong>Recommended:</strong> Import 70% from conversations + create 30% manually = 10-20 hours of curation."
+      },
+      {
+        question: "Do I need programming experience?",
+        answer: "<strong>No!</strong> edukaAI is designed for beginners. You just need domain knowledge (e.g., understanding coding if building a coding assistant). We handle the technical parts."
+      },
+      {
+        question: "What models can I fine-tune?",
+        answer: "You can fine-tune: <strong>Open source</strong> (Llama 2, Mistral - free), via <strong>HuggingFace</strong> (easy), via <strong>OpenAI API</strong> (GPT-3.5), or any platform accepting Alpaca/ShareGPT format."
+      },
+      {
+        question: "How much does it cost?",
+        answer: "<strong>Local (open source):</strong> Free! Need RTX 3060+ GPU.<br/><strong>Cloud:</strong> $5-20 per training run.<br/><strong>OpenAI:</strong> ~$2-10 for 1000 examples.<br/>Start with smaller models to save costs."
+      }
+    ];
+    const glossary = [
+      {
+        id: "base-model",
+        word: "Base Model",
+        definition: "The pre-trained LLM you start with (GPT-4, Llama 2, etc.)"
+      },
+      {
+        id: "dataset",
+        word: "Dataset",
+        definition: "A collection of training examples used to teach the AI"
+      },
+      {
+        id: "epoch",
+        word: "Epoch",
+        definition: "One complete pass through the dataset during training"
+      },
+      {
+        id: "fine-tuning",
+        word: "Fine-Tuning",
+        definition: "Training a pre-trained model on specific data to improve performance"
+      },
+      {
+        id: "hallucination",
+        word: "Hallucination",
+        definition: "When AI generates incorrect or made-up information"
+      },
+      {
+        id: "instruction",
+        word: "Instruction",
+        definition: "The input part of a training example (what the user asks)"
+      },
+      {
+        id: "llm",
+        word: "LLM",
+        definition: "Large Language Model - AI trained on vast amounts of text"
+      },
+      {
+        id: "output",
+        word: "Output",
+        definition: "The desired answer the AI should produce"
+      },
+      {
+        id: "parameters",
+        word: "Parameters",
+        definition: "Internal numbers that define how the model works (7B = 7 billion)"
+      },
+      {
+        id: "system-prompt",
+        word: "System Prompt",
+        definition: "Instructions defining AI personality and behavior"
+      },
+      {
+        id: "token",
+        word: "Token",
+        definition: 'A piece of text the AI processes ("Hello world" ≈ 2-3 tokens)'
+      },
+      {
+        id: "training",
+        word: "Training",
+        definition: "The process of adjusting model parameters for better outputs"
+      }
+    ];
+    return (_ctx, _push, _parent, _attrs) => {
+      const _component_NuxtLink = __nuxt_component_0;
+      _push(`<div${ssrRenderAttrs(mergeProps({ class: "max-w-5xl mx-auto pb-20" }, _attrs))} data-v-d323dde7><div class="text-center mb-12 py-12 bg-gradient-to-br from-blue-50 to-purple-50 rounded-2xl" data-v-d323dde7><div class="text-6xl mb-4" data-v-d323dde7>📚</div><h1 class="text-4xl font-bold mb-4" data-v-d323dde7> The Complete Guide to LLM Fine-Tuning </h1><p class="text-xl text-gray-600 max-w-2xl mx-auto" data-v-d323dde7> Everything you need to know to create your first training dataset and fine-tune your own AI model </p><div class="mt-6 flex justify-center gap-4 text-sm" data-v-d323dde7><span class="px-3 py-1 bg-white rounded-full shadow-sm" data-v-d323dde7>🎯 Beginner Friendly</span><span class="px-3 py-1 bg-white rounded-full shadow-sm" data-v-d323dde7>📖 Step-by-Step</span><span class="px-3 py-1 bg-white rounded-full shadow-sm" data-v-d323dde7>💡 Practical Examples</span></div></div><div class="card mb-8 bg-gradient-to-r from-purple-600 to-blue-600 text-white overflow-hidden" data-v-d323dde7><div class="p-8" data-v-d323dde7><div class="flex flex-col md:flex-row items-center justify-between gap-6" data-v-d323dde7><div class="flex-1" data-v-d323dde7><div class="flex items-center gap-2 mb-3" data-v-d323dde7><span class="px-2 py-1 bg-white/20 rounded text-xs font-semibold" data-v-d323dde7>TECHNICAL DEEP DIVE</span></div><h2 class="text-2xl font-bold mb-3" data-v-d323dde7>🧠 LLM Training Explained</h2><p class="text-lg text-purple-100 mb-4" data-v-d323dde7> Want to understand how AI actually works? Learn about next-token prediction, transformers, attention mechanisms, and how neural networks learn — explained for technically-minded beginners. </p><div class="flex flex-wrap gap-2 text-sm mb-4" data-v-d323dde7><span class="px-3 py-1 bg-white/20 rounded-full" data-v-d323dde7>Tokens</span><span class="px-3 py-1 bg-white/20 rounded-full" data-v-d323dde7>Neural Networks</span><span class="px-3 py-1 bg-white/20 rounded-full" data-v-d323dde7>Transformers</span><span class="px-3 py-1 bg-white/20 rounded-full" data-v-d323dde7>Attention</span></div>`);
+      _push(ssrRenderComponent(_component_NuxtLink, {
+        to: "/help/llm-training",
+        class: "inline-flex items-center gap-2 px-6 py-3 bg-white text-purple-600 rounded-lg font-semibold hover:bg-purple-50 transition-colors"
+      }, {
+        default: withCtx((_, _push2, _parent2, _scopeId) => {
+          if (_push2) {
+            _push2(` Read the Technical Guide <svg class="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24" data-v-d323dde7${_scopeId}><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M13 7l5 5m0 0l-5 5m5-5H6" data-v-d323dde7${_scopeId}></path></svg>`);
+          } else {
+            return [
+              createTextVNode(" Read the Technical Guide "),
+              (openBlock(), createBlock("svg", {
+                class: "w-5 h-5",
+                fill: "none",
+                stroke: "currentColor",
+                viewBox: "0 0 24 24"
+              }, [
+                createVNode("path", {
+                  "stroke-linecap": "round",
+                  "stroke-linejoin": "round",
+                  "stroke-width": "2",
+                  d: "M13 7l5 5m0 0l-5 5m5-5H6"
+                })
+              ]))
+            ];
+          }
+        }),
+        _: 1
+      }, _parent));
+      _push(`</div><div class="hidden md:block text-6xl" data-v-d323dde7>🧬</div></div></div></div><div class="card mb-8 sticky top-4 z-30 bg-white/95 backdrop-blur shadow-lg" data-v-d323dde7><h2 class="text-lg font-semibold mb-4" data-v-d323dde7>📑 Quick Navigation</h2><div class="flex flex-wrap gap-2 text-sm" data-v-d323dde7><button class="toc-btn" data-v-d323dde7> What is Fine-Tuning? </button><button class="toc-btn" data-v-d323dde7> Getting Started </button><button class="toc-btn" data-v-d323dde7> Training Examples </button><button class="toc-btn" data-v-d323dde7> Field Guide </button><button class="toc-btn" data-v-d323dde7> Best Practices </button><button class="toc-btn" data-v-d323dde7> Common Mistakes </button><button class="toc-btn" data-v-d323dde7> Real Examples </button><button class="toc-btn" data-v-d323dde7>FAQ</button><button class="toc-btn" data-v-d323dde7>Glossary</button><button class="toc-btn bg-blue-600 text-white" data-v-d323dde7> Start Now → </button></div></div><section id="what-is-finetuning" class="mb-16" data-v-d323dde7><div class="flex items-center gap-3 mb-6" data-v-d323dde7><span class="text-3xl" data-v-d323dde7>🎯</span><h2 class="text-2xl font-bold" data-v-d323dde7>What is LLM Fine-Tuning?</h2></div><div class="card" data-v-d323dde7><div class="prose max-w-none" data-v-d323dde7><p class="text-lg leading-relaxed mb-6" data-v-d323dde7><strong data-v-d323dde7>Large Language Model (LLM) Fine-Tuning</strong> is the process of taking a pre-trained AI model (like GPT, Claude, or Llama) and teaching it to be better at specific tasks by training it on examples of those tasks. </p><div class="bg-blue-50 p-6 rounded-xl my-6" data-v-d323dde7><h3 class="font-semibold text-blue-900 mb-3" data-v-d323dde7>🎓 Simple Analogy</h3><p class="text-blue-800" data-v-d323dde7> Think of a pre-trained LLM as a student who has learned general knowledge from reading the entire internet. Fine-tuning is like giving that student specialized training in a specific field—teaching them to be a doctor, lawyer, or software engineer by showing them examples of expert work in that field. </p></div><h3 class="text-xl font-semibold mt-8 mb-4" data-v-d323dde7>Why Fine-Tune?</h3><div class="grid grid-cols-1 md:grid-cols-2 gap-4" data-v-d323dde7><div class="p-4 bg-green-50 rounded-lg border border-green-200" data-v-d323dde7><h4 class="font-medium text-green-800 mb-2" data-v-d323dde7> ✅ Better Performance </h4><p class="text-sm text-gray-600" data-v-d323dde7> Your model becomes an expert in YOUR specific domain, with better accuracy and relevance. </p></div><div class="p-4 bg-blue-50 rounded-lg border border-blue-200" data-v-d323dde7><h4 class="font-medium text-blue-800 mb-2" data-v-d323dde7>💰 Lower Costs</h4><p class="text-sm text-gray-600" data-v-d323dde7> Fine-tuned smaller models can outperform larger general models for specific tasks. </p></div><div class="p-4 bg-purple-50 rounded-lg border border-purple-200" data-v-d323dde7><h4 class="font-medium text-purple-800 mb-2" data-v-d323dde7> ⚡ Faster Responses </h4><p class="text-sm text-gray-600" data-v-d323dde7> Specialized models are more efficient and respond faster. </p></div><div class="p-4 bg-orange-50 rounded-lg border border-orange-200" data-v-d323dde7><h4 class="font-medium text-orange-800 mb-2" data-v-d323dde7>🔒 Privacy</h4><p class="text-sm text-gray-600" data-v-d323dde7> Your data stays on your infrastructure. No need to send sensitive data to third-party APIs. </p></div></div><h3 class="text-xl font-semibold mt-8 mb-4" data-v-d323dde7> The Fine-Tuning Process </h3><div class="bg-gray-50 p-6 rounded-xl" data-v-d323dde7><div class="grid grid-cols-1 md:grid-cols-4 gap-4" data-v-d323dde7><div class="text-center" data-v-d323dde7><div class="w-12 h-12 bg-blue-500 rounded-full flex items-center justify-center text-white font-bold mx-auto mb-2" data-v-d323dde7> 1 </div><h4 class="font-medium" data-v-d323dde7>Collect Data</h4><p class="text-xs text-gray-600" data-v-d323dde7>Gather 100-10000 examples</p></div><div class="text-center" data-v-d323dde7><div class="w-12 h-12 bg-blue-500 rounded-full flex items-center justify-center text-white font-bold mx-auto mb-2" data-v-d323dde7> 2 </div><h4 class="font-medium" data-v-d323dde7>Create Dataset</h4><p class="text-xs text-gray-600" data-v-d323dde7>Format instruction → output</p></div><div class="text-center" data-v-d323dde7><div class="w-12 h-12 bg-blue-500 rounded-full flex items-center justify-center text-white font-bold mx-auto mb-2" data-v-d323dde7> 3 </div><h4 class="font-medium" data-v-d323dde7>Train Model</h4><p class="text-xs text-gray-600" data-v-d323dde7>30 min to a few hours</p></div><div class="text-center" data-v-d323dde7><div class="w-12 h-12 bg-green-500 rounded-full flex items-center justify-center text-white font-bold mx-auto mb-2" data-v-d323dde7> 4 </div><h4 class="font-medium" data-v-d323dde7>Deploy &amp; Use</h4><p class="text-xs text-gray-600" data-v-d323dde7>Test and go live!</p></div></div></div><div class="mt-8 p-6 bg-gradient-to-r from-yellow-50 to-orange-50 rounded-xl border border-yellow-200" data-v-d323dde7><h3 class="font-semibold text-lg mb-3" data-v-d323dde7> 🎯 The 1000 Example Milestone </h3><p class="text-gray-700 mb-3" data-v-d323dde7> We recommend starting with <strong data-v-d323dde7>1000 high-quality examples</strong> for your first fine-tuning. This is the sweet spot where most models show significant improvement. </p><ul class="list-disc list-inside text-sm text-gray-600 space-y-1" data-v-d323dde7><li data-v-d323dde7>Enough data for the model to learn patterns</li><li data-v-d323dde7>Not so much that training takes forever</li><li data-v-d323dde7> Achievable goal for beginners (create 20-30 examples per day) </li><li data-v-d323dde7>Proven minimum for meaningful fine-tuning</li></ul></div></div></div></section><section id="getting-started" class="mb-16" data-v-d323dde7><div class="flex items-center gap-3 mb-6" data-v-d323dde7><span class="text-3xl" data-v-d323dde7>🚀</span><h2 class="text-2xl font-bold" data-v-d323dde7>Getting Started: Your First Dataset</h2></div><div class="card" data-v-d323dde7><div class="space-y-8" data-v-d323dde7><div class="relative pl-8 border-l-2 border-blue-300" data-v-d323dde7><div class="absolute -left-3 top-0 w-6 h-6 bg-blue-500 rounded-full flex items-center justify-center text-white font-bold text-sm" data-v-d323dde7> 1 </div><h3 class="font-semibold text-xl mb-3" data-v-d323dde7>Choose Your Domain</h3><p class="text-gray-600 mb-4" data-v-d323dde7> First, decide what you want your AI to be good at. The more specific, the better. </p><div class="grid grid-cols-1 md:grid-cols-2 gap-3" data-v-d323dde7><div class="p-3 bg-red-50 rounded-lg border border-red-200" data-v-d323dde7><span class="text-red-600 font-medium" data-v-d323dde7>❌ Too Broad:</span><p class="text-sm text-gray-600 mt-1" data-v-d323dde7>&quot;Help with everything&quot;</p></div><div class="p-3 bg-green-50 rounded-lg border border-green-200" data-v-d323dde7><span class="text-green-600 font-medium" data-v-d323dde7>✅ Good:</span><p class="text-sm text-gray-600 mt-1" data-v-d323dde7> &quot;Help junior developers debug React code&quot; </p></div></div></div><div class="relative pl-8 border-l-2 border-blue-300" data-v-d323dde7><div class="absolute -left-3 top-0 w-6 h-6 bg-blue-500 rounded-full flex items-center justify-center text-white font-bold text-sm" data-v-d323dde7> 2 </div><h3 class="font-semibold text-xl mb-3" data-v-d323dde7>Collect Source Material</h3><div class="grid grid-cols-3 gap-4" data-v-d323dde7><div class="text-center p-4 bg-gray-50 rounded-lg" data-v-d323dde7><div class="text-2xl mb-2" data-v-d323dde7>💬</div><h4 class="font-medium text-sm" data-v-d323dde7>AI Conversations</h4><p class="text-xs text-gray-600" data-v-d323dde7>Use Claude, GPT, Cursor</p></div><div class="text-center p-4 bg-gray-50 rounded-lg" data-v-d323dde7><div class="text-2xl mb-2" data-v-d323dde7>📄</div><h4 class="font-medium text-sm" data-v-d323dde7>Documentation</h4><p class="text-xs text-gray-600" data-v-d323dde7>Convert docs to Q&amp;A</p></div><div class="text-center p-4 bg-gray-50 rounded-lg" data-v-d323dde7><div class="text-2xl mb-2" data-v-d323dde7>✍️</div><h4 class="font-medium text-sm" data-v-d323dde7>Manual Creation</h4><p class="text-xs text-gray-600" data-v-d323dde7>Write from scratch</p></div></div><div class="mt-4 p-3 bg-blue-50 rounded-lg" data-v-d323dde7><p class="text-sm text-blue-800" data-v-d323dde7> 💡 <strong data-v-d323dde7>Tip:</strong> Not sure what good data looks like? Check out our `);
+      _push(ssrRenderComponent(_component_NuxtLink, {
+        to: "/sample-datasets",
+        class: "underline hover:text-blue-600"
+      }, {
+        default: withCtx((_, _push2, _parent2, _scopeId) => {
+          if (_push2) {
+            _push2(`sample datasets`);
+          } else {
+            return [
+              createTextVNode("sample datasets")
+            ];
+          }
+        }),
+        _: 1
+      }, _parent));
+      _push(` with real examples you can download and study! </p></div></div><div class="relative pl-8 border-l-2 border-blue-300" data-v-d323dde7><div class="absolute -left-3 top-0 w-6 h-6 bg-blue-500 rounded-full flex items-center justify-center text-white font-bold text-sm" data-v-d323dde7> 3 </div><h3 class="font-semibold text-xl mb-3" data-v-d323dde7> Create Your First 10 Examples </h3><p class="text-gray-600 mb-4" data-v-d323dde7> Start small! Create 10 high-quality examples to get a feel for the process. </p><div class="bg-blue-50 p-4 rounded-lg" data-v-d323dde7><h4 class="font-medium text-blue-900 mb-2" data-v-d323dde7>🎯 Daily Goal</h4><p class="text-blue-800" data-v-d323dde7> Aim for <strong data-v-d323dde7>10-20 examples per day</strong>. At this pace, you&#39;ll reach 1000 examples in 2-3 months. Quality matters more than speed! </p></div></div><div class="relative pl-8 border-l-2 border-blue-300" data-v-d323dde7><div class="absolute -left-3 top-0 w-6 h-6 bg-blue-500 rounded-full flex items-center justify-center text-white font-bold text-sm" data-v-d323dde7> 4 </div><h3 class="font-semibold text-xl mb-3" data-v-d323dde7>Review and Approve</h3><p class="text-gray-600" data-v-d323dde7> Go through your examples and rate their quality. Mark low-quality ones as &quot;Draft&quot; or &quot;Rejected&quot;. Only approve examples that are truly excellent (4-5 stars). </p></div><div class="relative pl-8 border-l-2 border-green-500" data-v-d323dde7><div class="absolute -left-3 top-0 w-6 h-6 bg-green-500 rounded-full flex items-center justify-center text-white font-bold text-sm" data-v-d323dde7> 5 </div><h3 class="font-semibold text-xl mb-3" data-v-d323dde7>Export and Train!</h3><p class="text-gray-600" data-v-d323dde7> Once you hit 1000 approved examples, export your dataset and start training. You&#39;re ready to create your first fine-tuned model! </p></div></div></div></section><section id="training-examples" class="mb-16" data-v-d323dde7><div class="flex items-center gap-3 mb-6" data-v-d323dde7><span class="text-3xl" data-v-d323dde7>📖</span><h2 class="text-2xl font-bold" data-v-d323dde7>Understanding Training Examples</h2></div><div class="card" data-v-d323dde7><h3 class="text-xl font-semibold mb-4" data-v-d323dde7>What is a Training Example?</h3><p class="text-lg mb-6" data-v-d323dde7> A training example teaches the AI a specific input-output pattern. It shows the model: <strong data-v-d323dde7>&quot;When someone asks this, respond like this.&quot;</strong></p><div class="bg-gray-50 p-6 rounded-xl mb-6" data-v-d323dde7><h4 class="font-semibold mb-4" data-v-d323dde7>Basic Structure</h4><div class="space-y-4" data-v-d323dde7><div class="p-4 bg-white rounded-lg border-l-4 border-blue-500 shadow-sm" data-v-d323dde7><div class="text-sm text-blue-600 font-medium mb-1" data-v-d323dde7> 👤 USER (Instruction) </div><p class="text-gray-800" data-v-d323dde7> &quot;How do I reverse a string in Python?&quot; </p></div><div class="text-center text-gray-400" data-v-d323dde7><svg class="w-6 h-6 mx-auto" fill="none" stroke="currentColor" viewBox="0 0 24 24" data-v-d323dde7><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 14l-7 7m0 0l-7-7m7 7V3" data-v-d323dde7></path></svg></div><div class="p-4 bg-white rounded-lg border-l-4 border-green-500 shadow-sm" data-v-d323dde7><div class="text-sm text-green-600 font-medium mb-1" data-v-d323dde7> 🤖 ASSISTANT (Output) </div><div class="font-mono text-sm bg-gray-100 p-3 rounded mt-2" data-v-d323dde7><p class="mb-2" data-v-d323dde7> You can reverse a string in Python using slicing: </p><code data-v-d323dde7>reversed_string = original_string[::-1]</code><p class="mt-2" data-v-d323dde7>For example:</p><code data-v-d323dde7>text = &quot;Hello&quot;<br data-v-d323dde7>print(text[::-1]) # Output: &quot;olleH&quot;</code></div></div></div></div><h3 class="text-xl font-semibold mb-4" data-v-d323dde7>Quality Levels</h3><div class="space-y-4" data-v-d323dde7><div class="p-4 bg-red-50 rounded-lg border border-red-200" data-v-d323dde7><div class="flex items-center gap-2 mb-2" data-v-d323dde7><span class="text-red-600 font-bold" data-v-d323dde7>⭐⭐ Poor (1-2 stars)</span></div><p class="text-sm text-gray-700 mb-2" data-v-d323dde7><strong data-v-d323dde7>Instruction:</strong> &quot;Python help&quot; </p><p class="text-sm text-gray-700 mb-2" data-v-d323dde7><strong data-v-d323dde7>Output:</strong> &quot;Here&#39;s some Python code: print(&#39;hello&#39;)&quot; </p><p class="text-sm text-red-600" data-v-d323dde7>Too vague, unhelpful, no context</p></div><div class="p-4 bg-yellow-50 rounded-lg border border-yellow-200" data-v-d323dde7><div class="flex items-center gap-2 mb-2" data-v-d323dde7><span class="text-yellow-600 font-bold" data-v-d323dde7>⭐⭐⭐ Average (3 stars)</span></div><p class="text-sm text-gray-700 mb-2" data-v-d323dde7><strong data-v-d323dde7>Instruction:</strong> &quot;How to reverse a string&quot; </p><p class="text-sm text-gray-700 mb-2" data-v-d323dde7><strong data-v-d323dde7>Output:</strong> &quot;Use slicing: [::-1]&quot; </p><p class="text-sm text-yellow-700" data-v-d323dde7> Okay, but lacks explanation and examples </p></div><div class="p-4 bg-green-50 rounded-lg border border-green-200" data-v-d323dde7><div class="flex items-center gap-2 mb-2" data-v-d323dde7><span class="text-green-600 font-bold" data-v-d323dde7>⭐⭐⭐⭐⭐ Excellent (5 stars)</span></div><p class="text-sm text-gray-700 mb-2" data-v-d323dde7><strong data-v-d323dde7>Instruction:</strong> &quot;What&#39;s the most Pythonic way to reverse a string, and why is it better than other methods? Include time complexity.&quot; </p><p class="text-sm text-gray-700 mb-2" data-v-d323dde7><strong data-v-d323dde7>Output:</strong> Comprehensive answer with multiple methods, comparison, time complexity analysis, and code examples </p><p class="text-sm text-green-700" data-v-d323dde7> Specific, educational, thorough, best practices </p></div></div></div></section><section id="field-guide" class="mb-16" data-v-d323dde7><div class="flex items-center gap-3 mb-6" data-v-d323dde7><span class="text-3xl" data-v-d323dde7>📝</span><h2 class="text-2xl font-bold" data-v-d323dde7>Complete Field Guide</h2></div><div class="card mb-6" data-v-d323dde7><h3 class="text-xl font-semibold mb-6 text-blue-600" data-v-d323dde7> Core Fields (Required) </h3><div class="space-y-8" data-v-d323dde7><div class="border-l-4 border-blue-500 pl-4" data-v-d323dde7><h4 class="text-lg font-semibold mb-2 flex items-center gap-2" data-v-d323dde7> 🎯 Instruction <span class="text-xs bg-red-100 text-red-700 px-2 py-0.5 rounded" data-v-d323dde7>Required</span></h4><p class="text-gray-600 mb-3" data-v-d323dde7> The main question or task. This is what the user will type to get a response from your model. </p><div class="grid grid-cols-1 md:grid-cols-2 gap-3" data-v-d323dde7><div class="bg-green-50 p-3 rounded-lg" data-v-d323dde7><p class="text-sm text-green-800 font-medium mb-2" data-v-d323dde7>✅ Good:</p><p class="text-sm text-gray-700" data-v-d323dde7> &quot;Explain how React&#39;s useEffect hook works, including the dependency array, cleanup functions, and common pitfalls to avoid. Provide code examples for each concept.&quot; </p></div><div class="bg-red-50 p-3 rounded-lg" data-v-d323dde7><p class="text-sm text-red-800 font-medium mb-2" data-v-d323dde7>❌ Bad:</p><p class="text-sm text-gray-700" data-v-d323dde7>&quot;React help&quot;</p></div></div><div class="mt-3 text-sm bg-blue-50 p-3 rounded" data-v-d323dde7><strong data-v-d323dde7>💡 Pro Tips:</strong><ul class="list-disc list-inside mt-1 space-y-1" data-v-d323dde7><li data-v-d323dde7>Be specific about what you want</li><li data-v-d323dde7>Use natural language like a real user would</li><li data-v-d323dde7>Length: 50-500 characters is ideal</li><li data-v-d323dde7>Include context if needed</li></ul></div></div><div class="border-l-4 border-green-500 pl-4" data-v-d323dde7><h4 class="text-lg font-semibold mb-2 flex items-center gap-2" data-v-d323dde7> 📝 Output / Response <span class="text-xs bg-red-100 text-red-700 px-2 py-0.5 rounded" data-v-d323dde7>Required</span></h4><p class="text-gray-600 mb-3" data-v-d323dde7> The ideal AI response. This is what you want the model to learn to produce. Make it as good as you want your AI to be. </p><div class="bg-green-50 p-4 rounded-lg" data-v-d323dde7><p class="text-sm text-green-800 font-medium mb-2" data-v-d323dde7> ✅ What Makes Good Output: </p><ul class="list-disc list-inside text-sm text-gray-700 space-y-1" data-v-d323dde7><li data-v-d323dde7><strong data-v-d323dde7>Directly answers</strong> the instruction completely </li><li data-v-d323dde7><strong data-v-d323dde7>Well-structured</strong> - uses formatting, lists, code blocks </li><li data-v-d323dde7><strong data-v-d323dde7>Accurate</strong> - factually correct information </li><li data-v-d323dde7><strong data-v-d323dde7>Includes examples</strong> - shows, don&#39;t just tell </li><li data-v-d323dde7><strong data-v-d323dde7>Explains reasoning</strong> - helps user understand why </li><li data-v-d323dde7><strong data-v-d323dde7>Appropriate tone</strong> - matches your desired style </li></ul></div></div></div></div><div class="card" data-v-d323dde7><h3 class="text-xl font-semibold mb-6 text-purple-600" data-v-d323dde7> Metadata Fields </h3><div class="grid grid-cols-1 md:grid-cols-2 gap-6" data-v-d323dde7><div class="border-l-4 border-purple-400 pl-4" data-v-d323dde7><h4 class="font-semibold mb-2" data-v-d323dde7>🎭 System Prompt</h4><p class="text-gray-600 text-sm mb-3" data-v-d323dde7> Defines the AI&#39;s personality, role, and behavior. Think of it as the &quot;character sheet&quot; for your AI. </p><div class="bg-purple-50 p-3 rounded text-sm" data-v-d323dde7><strong data-v-d323dde7>Example:</strong><br data-v-d323dde7> &quot;You are a patient senior software engineer who mentors junior developers. Explain concepts clearly, use analogies, and always provide code examples.&quot; </div></div><div class="border-l-4 border-purple-400 pl-4" data-v-d323dde7><h4 class="font-semibold mb-2" data-v-d323dde7>🏷️ Category</h4><p class="text-gray-600 text-sm mb-3" data-v-d323dde7> Organizes your dataset into topics. </p><div class="flex flex-wrap gap-1 text-xs" data-v-d323dde7><span class="px-2 py-1 bg-gray-100 rounded" data-v-d323dde7>Coding</span><span class="px-2 py-1 bg-gray-100 rounded" data-v-d323dde7>Explanation</span><span class="px-2 py-1 bg-gray-100 rounded" data-v-d323dde7>Analysis</span><span class="px-2 py-1 bg-gray-100 rounded" data-v-d323dde7>Writing</span><span class="px-2 py-1 bg-gray-100 rounded" data-v-d323dde7>Math</span><span class="px-2 py-1 bg-gray-100 rounded" data-v-d323dde7>Science</span><span class="px-2 py-1 bg-gray-100 rounded" data-v-d323dde7>General</span></div></div><div class="border-l-4 border-purple-400 pl-4" data-v-d323dde7><h4 class="font-semibold mb-2" data-v-d323dde7>📊 Difficulty</h4><p class="text-gray-600 text-sm mb-3" data-v-d323dde7>Tracks complexity level.</p><div class="space-y-1 text-sm" data-v-d323dde7><div class="flex items-center gap-2" data-v-d323dde7><span class="w-3 h-3 bg-green-400 rounded-full" data-v-d323dde7></span><span data-v-d323dde7><strong data-v-d323dde7>Beginner</strong> - Basic concepts</span></div><div class="flex items-center gap-2" data-v-d323dde7><span class="w-3 h-3 bg-yellow-400 rounded-full" data-v-d323dde7></span><span data-v-d323dde7><strong data-v-d323dde7>Intermediate</strong> - Practical applications</span></div><div class="flex items-center gap-2" data-v-d323dde7><span class="w-3 h-3 bg-red-400 rounded-full" data-v-d323dde7></span><span data-v-d323dde7><strong data-v-d323dde7>Advanced</strong> - Complex reasoning</span></div></div></div><div class="border-l-4 border-purple-400 pl-4" data-v-d323dde7><h4 class="font-semibold mb-2" data-v-d323dde7>⭐ Quality Rating</h4><p class="text-gray-600 text-sm mb-2" data-v-d323dde7> Your assessment (1-5 stars) </p><div class="space-y-1 text-xs" data-v-d323dde7><div data-v-d323dde7>⭐⭐⭐⭐⭐ = Excellent - Perfect for training</div><div data-v-d323dde7>⭐⭐⭐⭐ = Very Good - Solid example</div><div data-v-d323dde7>⭐⭐⭐ = Good - Acceptable, could improve</div><div data-v-d323dde7>⭐⭐ = Fair - Needs major revision</div><div data-v-d323dde7>⭐ = Poor - Don&#39;t use for training</div></div></div></div></div></section><section id="best-practices" class="mb-16" data-v-d323dde7><div class="flex items-center gap-3 mb-6" data-v-d323dde7><span class="text-3xl" data-v-d323dde7>⭐</span><h2 class="text-2xl font-bold" data-v-d323dde7>Best Practices &amp; Expert Tips</h2></div><div class="grid grid-cols-1 md:grid-cols-2 gap-4" data-v-d323dde7><!--[-->`);
+      ssrRenderList(bestPractices, (tip, idx) => {
+        _push(`<div class="card" data-v-d323dde7><div class="flex items-start gap-3" data-v-d323dde7><div class="${ssrRenderClass([tip.color, "flex-shrink-0 w-8 h-8 rounded-full flex items-center justify-center text-white font-bold text-sm"])}" data-v-d323dde7>${ssrInterpolate(idx + 1)}</div><div data-v-d323dde7><h3 class="font-semibold mb-1" data-v-d323dde7>${ssrInterpolate(tip.title)}</h3><p class="text-sm text-gray-600" data-v-d323dde7>${ssrInterpolate(tip.description)}</p></div></div></div>`);
+      });
+      _push(`<!--]--></div></section><section id="common-mistakes" class="mb-16" data-v-d323dde7><div class="flex items-center gap-3 mb-6" data-v-d323dde7><span class="text-3xl" data-v-d323dde7>⚠️</span><h2 class="text-2xl font-bold" data-v-d323dde7>Common Mistakes to Avoid</h2></div><div class="space-y-4" data-v-d323dde7><!--[-->`);
+      ssrRenderList(commonMistakes, (mistake, idx) => {
+        _push(`<div class="card border-l-4 border-red-400" data-v-d323dde7><h3 class="font-semibold text-lg mb-2 text-red-700" data-v-d323dde7> ❌ ${ssrInterpolate(mistake.title)}</h3><p class="text-gray-600 mb-3" data-v-d323dde7>${ssrInterpolate(mistake.description)}</p><div class="bg-green-50 p-3 rounded text-sm" data-v-d323dde7><strong data-v-d323dde7>✅ Instead:</strong> ${ssrInterpolate(mistake.solution)}</div></div>`);
+      });
+      _push(`<!--]--></div></section><section id="real-examples" class="mb-16" data-v-d323dde7><div class="flex items-center gap-3 mb-6" data-v-d323dde7><span class="text-3xl" data-v-d323dde7>💡</span><h2 class="text-2xl font-bold" data-v-d323dde7>Real-World Examples</h2></div><div class="card mb-6" data-v-d323dde7><div class="flex items-center justify-between mb-4" data-v-d323dde7><div class="flex items-center gap-2" data-v-d323dde7><span class="text-2xl" data-v-d323dde7>💻</span><h3 class="text-xl font-semibold" data-v-d323dde7>Example: React Error Handling</h3></div><div class="flex gap-2" data-v-d323dde7><span class="px-2 py-1 bg-blue-100 text-blue-700 text-xs rounded" data-v-d323dde7>Coding</span><span class="px-2 py-1 bg-green-100 text-green-700 text-xs rounded" data-v-d323dde7>⭐⭐⭐⭐⭐</span><span class="px-2 py-1 bg-purple-100 text-purple-700 text-xs rounded" data-v-d323dde7>Intermediate</span></div></div><div class="space-y-3" data-v-d323dde7><div class="p-3 bg-blue-50 rounded-lg" data-v-d323dde7><div class="text-sm text-blue-800 font-medium mb-1" data-v-d323dde7> 🎯 Instruction: </div><p class="text-sm text-gray-700" data-v-d323dde7> &quot;I&#39;m getting &#39;TypeError: Cannot read property map of undefined&#39; in React. How do I properly handle this?&quot; </p></div><div class="p-3 bg-gray-50 rounded-lg" data-v-d323dde7><div class="text-sm text-gray-800 font-medium mb-1" data-v-d323dde7>📎 Input:</div><pre class="text-xs bg-gray-100 p-2 rounded overflow-x-auto" data-v-d323dde7><code data-v-d323dde7>{users.map(user =&gt; &lt;div key={user.id}&gt;{user.name}&lt;/div&gt;)}</code></pre></div><div class="p-3 bg-green-50 rounded-lg" data-v-d323dde7><div class="text-sm text-green-800 font-medium mb-1" data-v-d323dde7> 📝 Output: </div><div class="text-xs text-gray-700 space-y-2" data-v-d323dde7><p data-v-d323dde7> This happens when <code data-v-d323dde7>users</code> is undefined. Here are 3 solutions: </p><p data-v-d323dde7><strong data-v-d323dde7>1. Default value:</strong> <code data-v-d323dde7>{users = []}</code></p><p data-v-d323dde7><strong data-v-d323dde7>2. Conditional:</strong> Check if users exists before mapping </p><p data-v-d323dde7><strong data-v-d323dde7>3. Optional chaining:</strong><code data-v-d323dde7>{users?.map(...)}</code></p></div></div></div></div><div class="card" data-v-d323dde7><h3 class="font-semibold mb-3" data-v-d323dde7>🎓 What Makes Great Examples?</h3><div class="grid grid-cols-2 md:grid-cols-3 gap-3 text-sm" data-v-d323dde7><div class="p-2 bg-green-50 rounded" data-v-d323dde7>✅ Clear instructions</div><div class="p-2 bg-green-50 rounded" data-v-d323dde7>✅ Complete outputs</div><div class="p-2 bg-green-50 rounded" data-v-d323dde7>✅ Code examples</div><div class="p-2 bg-green-50 rounded" data-v-d323dde7>✅ Educational value</div><div class="p-2 bg-green-50 rounded" data-v-d323dde7>✅ Practical application</div><div class="p-2 bg-green-50 rounded" data-v-d323dde7>✅ Proper metadata</div></div></div></section><section id="faq" class="mb-16" data-v-d323dde7><div class="flex items-center gap-3 mb-6" data-v-d323dde7><span class="text-3xl" data-v-d323dde7>❓</span><h2 class="text-2xl font-bold" data-v-d323dde7>Frequently Asked Questions</h2></div><div class="space-y-4" data-v-d323dde7><!--[-->`);
+      ssrRenderList(faqs, (faq, idx) => {
+        _push(`<div class="card" data-v-d323dde7><h3 class="font-semibold text-lg mb-2 text-blue-700" data-v-d323dde7>${ssrInterpolate(faq.question)}</h3><p class="text-gray-600 text-sm" data-v-d323dde7>${faq.answer ?? ""}</p></div>`);
+      });
+      _push(`<!--]--></div></section><section id="glossary" class="mb-16" data-v-d323dde7><div class="flex items-center gap-3 mb-6" data-v-d323dde7><span class="text-3xl" data-v-d323dde7>📖</span><h2 class="text-2xl font-bold" data-v-d323dde7>Glossary</h2></div><div class="card" data-v-d323dde7><p class="text-gray-600 mb-4 text-sm" data-v-d323dde7> Click any term to learn more about it in detail. </p><div class="grid grid-cols-1 md:grid-cols-2 gap-x-8 gap-y-3 text-sm" data-v-d323dde7><!--[-->`);
+      ssrRenderList(glossary, (term, idx) => {
+        _push(`<div class="group" data-v-d323dde7>`);
+        _push(ssrRenderComponent(_component_NuxtLink, {
+          to: `/help/glossary?term=${term.id}`,
+          class: "block hover:bg-gray-50 p-2 rounded-lg transition-colors"
+        }, {
+          default: withCtx((_, _push2, _parent2, _scopeId) => {
+            if (_push2) {
+              _push2(`<h3 class="font-semibold text-blue-700 group-hover:text-blue-800 flex items-center gap-2" data-v-d323dde7${_scopeId}>${ssrInterpolate(term.word)} <svg class="w-4 h-4 opacity-0 group-hover:opacity-100 transition-opacity" fill="none" stroke="currentColor" viewBox="0 0 24 24" data-v-d323dde7${_scopeId}><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 5l7 7-7 7" data-v-d323dde7${_scopeId}></path></svg></h3><p class="text-gray-600" data-v-d323dde7${_scopeId}>${ssrInterpolate(term.definition)}</p>`);
+            } else {
+              return [
+                createVNode("h3", { class: "font-semibold text-blue-700 group-hover:text-blue-800 flex items-center gap-2" }, [
+                  createTextVNode(toDisplayString(term.word) + " ", 1),
+                  (openBlock(), createBlock("svg", {
+                    class: "w-4 h-4 opacity-0 group-hover:opacity-100 transition-opacity",
+                    fill: "none",
+                    stroke: "currentColor",
+                    viewBox: "0 0 24 24"
+                  }, [
+                    createVNode("path", {
+                      "stroke-linecap": "round",
+                      "stroke-linejoin": "round",
+                      "stroke-width": "2",
+                      d: "M9 5l7 7-7 7"
+                    })
+                  ]))
+                ]),
+                createVNode("p", { class: "text-gray-600" }, toDisplayString(term.definition), 1)
+              ];
+            }
+          }),
+          _: 2
+        }, _parent));
+        _push(`</div>`);
+      });
+      _push(`<!--]--></div></div></section><section id="next-steps" class="mb-12" data-v-d323dde7><div class="card bg-gradient-to-br from-blue-50 to-purple-50" data-v-d323dde7><div class="text-center mb-6" data-v-d323dde7><div class="text-5xl mb-4" data-v-d323dde7>🚀</div><h2 class="text-2xl font-bold mb-2" data-v-d323dde7>Ready to Start Your Journey?</h2><p class="text-gray-600" data-v-d323dde7> You&#39;ve learned everything you need. Now it&#39;s time to build your first dataset! </p></div><div class="grid grid-cols-1 md:grid-cols-3 gap-4" data-v-d323dde7>`);
+      _push(ssrRenderComponent(_component_NuxtLink, {
+        to: "/examples/new",
+        class: "p-6 bg-white rounded-xl hover:shadow-lg transition-shadow text-center"
+      }, {
+        default: withCtx((_, _push2, _parent2, _scopeId) => {
+          if (_push2) {
+            _push2(`<div class="text-3xl mb-3" data-v-d323dde7${_scopeId}>✏️</div><h3 class="font-semibold text-lg mb-1" data-v-d323dde7${_scopeId}>Create Example</h3><p class="text-sm text-gray-600" data-v-d323dde7${_scopeId}> Start with your first training example </p>`);
+          } else {
+            return [
+              createVNode("div", { class: "text-3xl mb-3" }, "✏️"),
+              createVNode("h3", { class: "font-semibold text-lg mb-1" }, "Create Example"),
+              createVNode("p", { class: "text-sm text-gray-600" }, " Start with your first training example ")
+            ];
+          }
+        }),
+        _: 1
+      }, _parent));
+      _push(ssrRenderComponent(_component_NuxtLink, {
+        to: "/import",
+        class: "p-6 bg-white rounded-xl hover:shadow-lg transition-shadow text-center"
+      }, {
+        default: withCtx((_, _push2, _parent2, _scopeId) => {
+          if (_push2) {
+            _push2(`<div class="text-3xl mb-3" data-v-d323dde7${_scopeId}>📥</div><h3 class="font-semibold text-lg mb-1" data-v-d323dde7${_scopeId}>Import</h3><p class="text-sm text-gray-600" data-v-d323dde7${_scopeId}> Import from Claude, Cursor, or OpenCode </p>`);
+          } else {
+            return [
+              createVNode("div", { class: "text-3xl mb-3" }, "📥"),
+              createVNode("h3", { class: "font-semibold text-lg mb-1" }, "Import"),
+              createVNode("p", { class: "text-sm text-gray-600" }, " Import from Claude, Cursor, or OpenCode ")
+            ];
+          }
+        }),
+        _: 1
+      }, _parent));
+      _push(ssrRenderComponent(_component_NuxtLink, {
+        to: "/examples",
+        class: "p-6 bg-white rounded-xl hover:shadow-lg transition-shadow text-center"
+      }, {
+        default: withCtx((_, _push2, _parent2, _scopeId) => {
+          if (_push2) {
+            _push2(`<div class="text-3xl mb-3" data-v-d323dde7${_scopeId}>📊</div><h3 class="font-semibold text-lg mb-1" data-v-d323dde7${_scopeId}>View Dataset</h3><p class="text-sm text-gray-600" data-v-d323dde7${_scopeId}>Track your progress to 1000</p>`);
+          } else {
+            return [
+              createVNode("div", { class: "text-3xl mb-3" }, "📊"),
+              createVNode("h3", { class: "font-semibold text-lg mb-1" }, "View Dataset"),
+              createVNode("p", { class: "text-sm text-gray-600" }, "Track your progress to 1000")
+            ];
+          }
+        }),
+        _: 1
+      }, _parent));
+      _push(`</div></div></section><div class="text-center py-8 text-gray-500 text-sm" data-v-d323dde7><p data-v-d323dde7>🎓 edukaAI - Learn LLM fine-tuning by building datasets</p><p class="mt-2" data-v-d323dde7> &quot;The best way to learn is by doing. Start creating today!&quot; </p></div></div>`);
+    };
+  }
+};
+const _sfc_setup = _sfc_main.setup;
+_sfc_main.setup = (props, ctx) => {
+  const ssrContext = useSSRContext();
+  (ssrContext.modules || (ssrContext.modules = /* @__PURE__ */ new Set())).add("pages/help/index.vue");
+  return _sfc_setup ? _sfc_setup(props, ctx) : void 0;
+};
+const index = /* @__PURE__ */ _export_sfc(_sfc_main, [["__scopeId", "data-v-d323dde7"]]);
+
+export { index as default };
+//# sourceMappingURL=index-DgKa1cy0.mjs.map

package/.output/server/chunks/build/index-DgKa1cy0.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"index-DgKa1cy0.mjs","sources":["../../../../node_modules/.cache/nuxt/.nuxt/dist/server/_nuxt/index-DgKa1cy0.js"],"names":[],"mappings":"","x_google_ignoreList":[0]}