[{"_1":2,"_3":-5,"_4":-5},"loaderData",{"_5":6,"_7":8},"actionData","errors","root",{"_26":27,"_28":29,"_30":12,"_31":12,"_32":12,"_33":12,"_34":12,"_35":12,"_36":37},"routes/canvas.shared.$sharedTextdocId",{"_9":10,"_11":12},"sharedTextdoc",{"_13":14,"_15":-7,"_16":17,"_18":19,"_20":21,"_22":23,"_24":12,"_25":12},"isAuthenticated",false,"sharedTextdocId","69a08c8c73d081918be6ece93097a1b9","versionInt","title","Interactive Prompt Engineering Trainer (react Single-file)","type","code/react","content","import React, { useEffect, useMemo, useRef, useState } from \"react\";\nimport { motion, AnimatePresence } from \"framer-motion\";\nimport {\n Card,\n CardContent,\n CardHeader,\n CardTitle,\n CardDescription,\n} from \"@/components/ui/card\";\nimport { Button } from \"@/components/ui/button\";\nimport { Badge } from \"@/components/ui/badge\";\nimport { Progress } from \"@/components/ui/progress\";\nimport { Input } from \"@/components/ui/input\";\nimport { Textarea } from \"@/components/ui/textarea\";\nimport {\n Select,\n SelectContent,\n SelectItem,\n SelectTrigger,\n SelectValue,\n} from \"@/components/ui/select\";\nimport { Tabs, TabsContent, TabsList, TabsTrigger } from \"@/components/ui/tabs\";\nimport { Separator } from \"@/components/ui/separator\";\nimport {\n CheckCircle2,\n Flame,\n Lightbulb,\n Play,\n RotateCcw,\n Sparkles,\n Target,\n Trophy,\n Wand2,\n} from \"lucide-react\";\n\n/**\n * Interactive Prompt Engineering Trainer (MVP)\n * - Mini-lessons + practice\n * - Prompt \"playground\" (no external API) with a rubric-based self-eval\n * - One-question-at-a-time quizzes\n * - Streak + progress saved in localStorage\n */\n\n// ---------- Utilities ----------\nconst clamp = (n, a, b) => Math.max(a, Math.min(b, n));\nconst uid = () => Math.random().toString(36).slice(2, 10);\n\nfunction useLocalStorageState(key, initial) {\n const [state, setState] = useState(() => {\n try {\n const raw = localStorage.getItem(key);\n return raw ? JSON.parse(raw) : initial;\n } catch {\n return initial;\n }\n });\n useEffect(() => {\n try {\n localStorage.setItem(key, JSON.stringify(state));\n } catch {}\n }, [key, state]);\n return [state, setState];\n}\n\n// ---------- Curriculum (editable) ----------\nconst LESSONS = [\n {\n id: \"basics\",\n level: \"Beginner\",\n title: \"Что такое хороший промпт\",\n summary: \"Цель, контекст, формат ответа, ограничения.\",\n concepts: [\n {\n k: \"Цель\",\n v: \"Что именно должен сделать ИИ (сделай X, чтобы получить Y).\",\n },\n {\n k: \"Контекст\",\n v: \"Факты/вводные, которые нужны модели (аудитория, тон, данные).\",\n },\n {\n k: \"Формат\",\n v: \"Как должен выглядеть ответ: список, таблица, JSON, чек‑лист.\",\n },\n {\n k: \"Ограничения\",\n v: \"Что нельзя/не нужно делать: длина, источники, допущения.\",\n },\n ],\n practice: {\n task: \"Перепиши промпт так, чтобы ответ был полезнее и предсказуемее.\",\n badPrompt: \"Напиши пост про промпт инжениринг.\",\n goalHint: \"Добавь цель поста, аудиторию, структуру и стиль.\",\n checklist: [\n \"Есть явная цель\",\n \"Указана аудитория\",\n \"Задан формат (структура)\",\n \"Указан тон/стиль\",\n \"Есть ограничения (объем/не делать)\",\n ],\n },\n quiz: [\n {\n q: \"Какой элемент промпта сильнее всего снижает расплывчатость ответа?\",\n options: [\n \"Красивые прилагательные\",\n \"Ясный формат результата\",\n \"Смайлики\",\n \"Случайные примеры\",\n ],\n a: 1,\n why: \"Формат делает результат проверяемым: модель ‘знает’, как должен выглядеть ответ.\",\n },\n ],\n },\n {\n id: \"examples\",\n level: \"Intermediate\",\n title: \"Примеры и контрпримеры\",\n summary: \"Few-shot: показываем, что ‘хорошо’, и что ‘плохо’.\",\n concepts: [\n {\n k: \"Пример\",\n v: \"1–3 образца желаемого вывода помогают модели перенять стиль и логику.\",\n },\n {\n k: \"Контрпример\",\n v: \"Покажи, чего избегать (ошибки, лишняя вода, неверный формат).\",\n },\n {\n k: \"Разделение\",\n v: \"Отделяй входные данные от инструкций (маркировкой или блоками).\",\n },\n ],\n practice: {\n task: \"Добавь 1 хороший пример и 1 контрпример к промпту, чтобы повысить качество.\",\n badPrompt:\n \"Сделай резюме текста и выдели главное. Текст: ...\",\n goalHint:\n \"Опиши формат резюме и покажи пример результата на маленьком фрагменте.\",\n checklist: [\n \"Есть пример желаемого вывода\",\n \"Есть контрпример (чего избегать)\",\n \"Данные отделены от инструкций\",\n \"Пример короткий и релевантный\",\n ],\n },\n quiz: [\n {\n q: \"Зачем нужен контрпример в промпте?\",\n options: [\n \"Чтобы сделать промпт длиннее\",\n \"Чтобы уточнить, чего НЕ делать\",\n \"Чтобы запутать модель\",\n \"Чтобы добавить юмор\",\n ],\n a: 1,\n why: \"Контрпример задаёт границы и снижает риск ‘не того’ формата/тона.\",\n },\n ],\n },\n {\n id: \"systems\",\n level: \"Advanced\",\n title: \"Роли, правила и проверка результата\",\n summary: \"Роль + критерии качества + самопроверка.\",\n concepts: [\n {\n k: \"Роль\",\n v: \"‘Ты — редактор/аналитик/преподаватель’. Роль влияет на стиль и приоритеты.\",\n },\n {\n k: \"Критерии\",\n v: \"Чёткие критерии качества: полнота, точность, структура, тон.\",\n },\n {\n k: \"Самопроверка\",\n v: \"Попроси модель проверить ответ по чек‑листу и исправить несоответствия.\",\n },\n ],\n practice: {\n task: \"Добавь критерии качества и шаг самопроверки к промпту.\",\n badPrompt:\n \"Проанализируй идею стартапа и скажи, стоит ли делать.\",\n goalHint:\n \"Сделай критерии (рынок/риски/гипотезы) и финальную самопроверку.\",\n checklist: [\n \"Есть роль\",\n \"Есть критерии оценки\",\n \"Есть шаг самопроверки\",\n \"Есть структура ответа\",\n ],\n },\n quiz: [\n {\n q: \"Что лучше всего помогает повысить надёжность ответа при сложной задаче?\",\n options: [\n \"Попросить написать быстрее\",\n \"Добавить критерии и самопроверку\",\n \"Убрать контекст\",\n \"Запретить уточнения\",\n ],\n a: 1,\n why: \"Критерии + самопроверка дают модели ‘рамку’ и механизм исправления ошибок.\",\n },\n ],\n },\n];\n\nconst RUBRIC = [\n {\n id: \"goal\",\n label: \"Ясная цель\",\n hint: \"Можно проверить ‘по одному предложению’: что нужно получить на выходе?\",\n },\n {\n id: \"context\",\n label: \"Достаточный контекст\",\n hint: \"Есть ли входные данные, аудитория, тон, ограничения?\",\n },\n {\n id: \"format\",\n label: \"Задан формат\",\n hint: \"Список/таблица/JSON/шаблон. Чем точнее — тем лучше.\",\n },\n {\n id: \"constraints\",\n label: \"Ограничения/границы\",\n hint: \"Что исключить? объем? источники?\",\n },\n {\n id: \"checks\",\n label: \"Проверка качества\",\n hint: \"Чек‑лист или самопроверка в конце.\",\n },\n];\n\n// ---------- Main App ----------\nexport default function PromptEngineeringTrainer() {\n const [profile, setProfile] = useLocalStorageState(\"pe_trainer_profile_v1\", {\n name: \"\",\n goal: \"\",\n level: \"Beginner\",\n });\n\n const [progress, setProgress] = useLocalStorageState(\"pe_trainer_progress_v1\", {\n streak: 0,\n lastActive: null,\n completed: {}, // lessonId -> { practice: bool, quiz: bool }\n points: 0,\n });\n\n const [activeLessonId, setActiveLessonId] = useState(LESSONS[0].id);\n const activeLesson = useMemo(\n () => LESSONS.find((l) => l.id === activeLessonId) || LESSONS[0],\n [activeLessonId]\n );\n\n // Streak update (daily)\n useEffect(() => {\n const today = new Date();\n const dayKey = today.toISOString().slice(0, 10);\n setProgress((p) => {\n if (p.lastActive === dayKey) return p;\n if (!p.lastActive) return { ...p, lastActive: dayKey, streak: 1 };\n const prev = new Date(p.lastActive + \"T00:00:00\");\n const diffDays = Math.round((today - prev) / (1000 * 60 * 60 * 24));\n if (diffDays === 1) return { ...p, lastActive: dayKey, streak: p.streak + 1 };\n return { ...p, lastActive: dayKey, streak: 1 };\n });\n }, [setProgress]);\n\n const completion = useMemo(() => {\n const total = LESSONS.length * 2; // practice + quiz\n const done = LESSONS.reduce((acc, l) => {\n const c = progress.completed[l.id] || {};\n return acc + (c.practice ? 1 : 0) + (c.quiz ? 1 : 0);\n }, 0);\n return { total, done, pct: total ? Math.round((done / total) * 100) : 0 };\n }, [progress.completed]);\n\n const markDone = (lessonId, part) => {\n setProgress((p) => {\n const prev = p.completed[lessonId] || { practice: false, quiz: false };\n if (prev[part]) return p;\n const nextCompleted = {\n ...p.completed,\n [lessonId]: { ...prev, [part]: true },\n };\n return { ...p, completed: nextCompleted, points: p.points + 10 };\n });\n };\n\n return (\n

\n \n\n

\n \n \n \n\n \n \n \n Урок\n Практика\n Квиз\n \n\n \n \n \n\n \n markDone(activeLesson.id, \"practice\")}\n done={!!(progress.completed[activeLesson.id]?.practice)}\n />\n \n\n \n markDone(activeLesson.id, \"quiz\")}\n done={!!(progress.completed[activeLesson.id]?.quiz)}\n />\n \n \n\n

\n \n

\n\n

\n );\n}\n\nfunction Header({ profile, setProfile, progress, completion }) {\n const [editing, setEditing] = useState(false);\n const [tmp, setTmp] = useState(profile);\n\n useEffect(() => setTmp(profile), [profile]);\n\n return (\n \n \n

\n \n Интерактивный тренажёр по промпт‑инжинирингу\n \n \n Мини‑уроки → практика → квиз. Прогресс сохраняется локально в браузере.\n \n

\n\n

\n \n Стрик: {progress.streak}\n \n \n Очки: {progress.points}\n \n \n

\n\n

\n Общий прогресс\n {completion.done}/{completion.total} • {completion.pct}%\n

\n \n

\n \n\n \n {editing && (\n \n \n \n

Имя (опционально)

\n setTmp((s) => ({ ...s, name: e.target.value }))}\n placeholder=\"Например: Helen\"\n />\n

Уровень

\n setTmp((s) => ({ ...s, level: v }))}\n >\n \n \n \n \n Beginner\n Intermediate\n Advanced\n \n \n

Цель обучения

\n setTmp((s) => ({ ...s, goal: e.target.value }))}\n placeholder=\"Напр.: писать ТЗ для чат‑бота\"\n />\n

\n\n

\n \n {\n setProfile(tmp);\n setEditing(false);\n }}\n >\n Сохранить\n \n

\n \n \n )}\n \n \n );\n}\n\nfunction LessonList({ activeLessonId, setActiveLessonId, progress }) {\n return (\n \n \n Программа\n Выбирай уроки в любом порядке.\n \n \n {LESSONS.map((l) => {\n const c = progress.completed[l.id] || {};\n const doneCount = (c.practice ? 1 : 0) + (c.quiz ? 1 : 0);\n const isActive = l.id === activeLessonId;\n return (\n setActiveLessonId(l.id)}\n className={\n \"w-full rounded-2xl border p-3 text-left transition hover:shadow-sm \" +\n (isActive ? \"border-primary/50 shadow-sm\" : \"border-border\")\n }\n >\n

\n {l.title}\n \n {l.level}\n \n

{l.summary}

\n \n {doneCount}/2\n \n {doneCount === 2 && }\n

\n \n );\n })}\n\n

\n {\n const next = LESSONS[(LESSONS.findIndex((x) => x.id === activeLessonId) + 1) % LESSONS.length];\n setActiveLessonId(next.id);\n }}\n >\n Следующий урок\n \n

\n \n \n );\n}\n\nfunction LessonView({ lesson, progress }) {\n const c = progress.completed[lesson.id] || {};\n return (\n \n \n \n \n {lesson.title}\n \n

\n Практика\n Квиз\n

\n \n {lesson.summary}\n \n \n

\n {lesson.concepts.map((x) => (\n

{x.k}

{x.v}

\n ))}\n\n

\n Мини‑шаблон промпта\n

Скопируй и адаптируй под задачу.

\n{`Роль: ты — [кто?]\nЦель: сделай [что?] чтобы получить [зачем?]\nКонтекст: [аудитория/данные/тон]\nФормат: [список/таблица/JSON]\nОграничения: [объем/что не делать]\nПроверка: перед финалом проверь по чек‑листу: [...]`}\n

\n \n \n );\n}\n\nfunction PracticeLab({ lesson, onComplete, done }) {\n const [draft, setDraft] = useState(\"\");\n const [checks, setChecks] = useState(() => lesson.practice.checklist.map(() => false));\n const [submitted, setSubmitted] = useState(false);\n\n useEffect(() => {\n setDraft(\"\");\n setChecks(lesson.practice.checklist.map(() => false));\n setSubmitted(false);\n }, [lesson.id]);\n\n const score = useMemo(() => {\n const got = checks.filter(Boolean).length;\n return { got, total: checks.length, pct: Math.round((got / checks.length) * 100) };\n }, [checks]);\n\n return (\n \n \n \n \n Практика: улучшай промпт\n \n {done && Готово}\n \n \n Сначала перепиши промпт. Затем отметь чек‑лист — это твоя самопроверка.\n \n \n \n

Слабый промпт

\n {lesson.practice.badPrompt}\n

\n Подсказка: {lesson.practice.goalHint}\n

\n\n

Твоя улучшенная версия

\n setDraft(e.target.value)}\n placeholder=\"Напиши улучшенный промпт здесь...\"\n className=\"mt-2 min-h-[180px]\"\n />\n

\n setSubmitted(true)}\n disabled={draft.trim().length < 12}\n >\n Проверить по чек‑листу\n \n {\n setDraft(\"\");\n setChecks(lesson.practice.checklist.map(() => false));\n setSubmitted(false);\n }}\n >\n Сброс\n \n

\n\n \n {submitted && (\n \n

Самопроверка

\n Отметь пункты, которые реально есть в твоём промпте.\n

\n = 80 ? \"default\" : \"secondary\"}>\n {score.got}/{score.total}\n \n

\n\n

\n {lesson.practice.checklist.map((item, i) => (\n \n \n setChecks((arr) => {\n const next = [...arr];\n next[i] = e.target.checked;\n return next;\n })\n }\n />\n

{item}

\n \n ))}\n

\n\n

\n Совет: если пункт не отмечается — добавь его и перепроверь.\n

\n \n Завершить практику\n \n

\n \n )}\n \n \n \n );\n}\n\nfunction Quiz({ lesson, onComplete, done }) {\n const questions = lesson.quiz || [];\n const [idx, setIdx] = useState(0);\n const [selected, setSelected] = useState(null);\n const [attempts, setAttempts] = useState(0);\n const [feedback, setFeedback] = useState(null);\n\n useEffect(() => {\n setIdx(0);\n setSelected(null);\n setAttempts(0);\n setFeedback(null);\n }, [lesson.id]);\n\n const q = questions[idx];\n const isLast = idx === questions.length - 1;\n\n if (!q) {\n return (\n \n \n Квиз\n Для этого урока пока нет вопросов.\n \n \n );\n }\n\n const submit = () => {\n if (selected === null) return;\n const correct = selected === q.a;\n const nextAttempts = attempts + 1;\n setAttempts(nextAttempts);\n\n if (correct) {\n setFeedback({ ok: true, text: q.why });\n return;\n }\n\n if (nextAttempts >= 2) {\n setFeedback({ ok: false, text: `Правильный ответ: “${q.options[q.a]}”. ${q.why}` });\n } else {\n setFeedback({ ok: false, text: \"Не совсем. Попробуй ещё раз.\" });\n }\n };\n\n const next = () => {\n setSelected(null);\n setAttempts(0);\n setFeedback(null);\n if (!isLast) setIdx((i) => i + 1);\n };\n\n const canFinish = isLast && feedback && (feedback.ok || attempts >= 2);\n\n return (\n \n \n \n Квиз (1 вопрос за раз)\n {done && Готово}\n \n \n Сначала попытка, затем подсказка. После 2 попыток — показываем ответ.\n \n \n \n

\n Вопрос {idx + 1}/{questions.length}\n Попытки: {attempts}/2\n

\n\n

{q.q}

\n {q.options.map((opt, i) => {\n const active = selected === i;\n return (\n setSelected(i)}\n className={\n \"rounded-2xl border p-3 text-left transition \" +\n (active ? \"border-primary/50 shadow-sm\" : \"border-border hover:shadow-sm\")\n }\n >\n

{opt}

\n \n );\n })}\n

\n\n

\n \n

\n Подсказка: подумай, что делает ответ проверяемым и воспроизводимым.\n

\n\n \n {feedback && (\n \n

\n \n {feedback.ok ? \"Верно.\" : \"\"}\n {\" \"}\n {feedback.text}\n

\n\n

\n {!isLast && (feedback.ok || attempts >= 2) && (\n \n )}\n {canFinish && (\n \n )}\n

\n \n )}\n \n

\n \n \n );\n}\n\nfunction Playground() {\n const [useRubric, setUseRubric] = useState(true);\n const [prompt, setPrompt] = useState(\"\");\n const [context, setContext] = useState(\"\");\n const [outputFormat, setOutputFormat] = useState(\"Список шагов\");\n const [rubricScores, setRubricScores] = useState(() => Object.fromEntries(RUBRIC.map((r) => [r.id, 0])));\n const [notes, setNotes] = useState(\"\");\n\n const total = useMemo(() => {\n const sum = Object.values(rubricScores).reduce((a, b) => a + b, 0);\n const max = RUBRIC.length * 3;\n return { sum, max, pct: Math.round((sum / max) * 100) };\n }, [rubricScores]);\n\n const generated = useMemo(() => {\n // This is NOT an LLM call. It's a structured \"prompt builder\" to teach components.\n const blocks = [];\n if (prompt.trim()) blocks.push(`Цель/задача: ${prompt.trim()}`);\n if (context.trim()) blocks.push(`Контекст/данные: ${context.trim()}`);\n blocks.push(`Формат: ${outputFormat}`);\n if (useRubric) blocks.push(`Проверка: оцени ответ по критериям: цель, контекст, формат, ограничения, проверка.`);\n return blocks.join(\"\\n\");\n }, [prompt, context, outputFormat, useRubric]);\n\n const setScore = (id, value) =>\n setRubricScores((s) => ({ ...s, [id]: clamp(value, 0, 3) }));\n\n return (\n \n \n \n Песочница промпта\n \n \n Собери промпт из частей и оцени его по рубрике. Это тренирует “мышцу” качества.\n \n \n \n

Задача (что сделать?)

\n setPrompt(e.target.value)}\n placeholder=\"Напр.: Составь план урока по ...\"\n />\n

Контекст (данные/аудитория/тон)

\n setContext(e.target.value)}\n placeholder=\"Напр.: аудитория — новички, стиль — дружелюбный, есть 5 пунктов...\"\n className=\"min-h-[110px]\"\n />\n

Формат ответа

\n \n

\n\n

\n \n setUseRubric(e.target.checked)}\n />\n Добавить шаг самопроверки (рекомендуется)\n \n

\n\n

Собранный промпт

\n                {generated || \"(Заполни поля слева — здесь появится итоговый промпт.)\"}\n

\n Подсказка: попробуй сделать каждую строку максимально конкретной.\n

\n\n

Рубрика качества (0–3)

0 — нет, 1 — слабовато, 2 — нормально, 3 — отлично

\n = 75 ? \"default\" : \"secondary\"}>\n {total.sum}/{total.max}\n \n

\n\n

\n {RUBRIC.map((r) => (\n

{r.label}

{r.hint}

\n \n

\n ))}\n

\n\n

Заметки: что улучшить дальше?

\n setNotes(e.target.value)}\n placeholder=\"Напр.: добавить ограничения по длине, указать аудиторию, прописать структуру...\"\n className=\"min-h-[90px]\"\n />\n

\n\n

Мини‑челлендж (30 секунд)

\n Сделай один апгрейд: добавь ограничение (объем/что не делать) и оцени рубрикой снова.\n

\n \n \n );\n}\n\nfunction Footer() {\n return (\n

\n Сделано как учебный MVP: добавляй уроки в массив LESSONS и расширяй рубрику.\n

\n );\n}\n","access","public","isModerationBlocked","isAnonifyApiKeyDetected","dd",{"_38":39,"_40":41},"disablePrefetch",true,"shouldPrefetchAccount","shouldPrefetchUser","shouldPrefetchSystemHints","promoteCss","disableSSR","stripModulepreloadImports","statsigGateEvaluationsPromise",["P",37],"traceId","11461168981837319661","traceTime",1778761707775]