Update prompt-builder.html
· 1 year ago
3963ae43fa3407435e2d4bb126e6c4743e9a1128
Parent:
034ee6b03
1 file changed +424 −511
- prompt-builder.html +424 −511
Diff
--- a/prompt-builder.html +++ b/prompt-builder.html @@ -12,7 +12,7 @@ /> <meta name="keywords" - content="system prompt, prompt engineering, LLM, AI, prompt builder, prompt guide, generative AI, large language models, AI assistant, prompt templates, AI tools" + content="system prompt, prompt engineering, LLM, AI, prompt builder, prompt guide, generative AI, large language models, AI assistant, prompt templates, AI tools, meta prompting, prompt optimization" /> <meta name="author" content="David Vekslers Cheatsheets" /> <link rel="canonical" href="http://cheatsheets.davidveksler.com/prompt-builder.html" /> @@ -24,27 +24,26 @@ <!-- Open Graph / Facebook Meta Tags --> - <meta property="og:title" content="System Prompt Builder & Engineering Guide" /> + <meta property="og:title" content="Enhanced System Prompt Builder & Engineering Guide" /> <meta property="og:description" - content="Build effective system prompts for LLMs and learn prompt engineering techniques with this interactive tool and guide." + content="Build powerful, effective system prompts for LLMs and learn advanced prompt engineering techniques with this interactive tool and comprehensive guide." /> <meta property="og:type" content="website" /> <meta property="og:url" content="http://cheatsheets.davidveksler.com/prompt-builder.html" /> <meta property="og:image" content="http://cheatsheets.davidveksler.com/images/prompt-builder-og-image.png" /> - <meta property="og:image:alt" content="Screenshot of the System Prompt Builder & Guide Tool Interface" /> + <meta property="og:image:alt" content="Screenshot of the Enhanced System Prompt Builder & Guide Tool Interface" /> <meta property="og:site_name" content="David Vekslers Cheatsheets" /> <!-- Twitter Card Meta Tags --> <meta name="twitter:card" content="summary_large_image" /> - <meta name="twitter:title" content="System Prompt Builder & Engineering Guide" /> + <meta name="twitter:title" content="Enhanced System Prompt Builder & Engineering Guide" /> <meta name="twitter:description" - content="Build effective system prompts for LLMs and learn prompt engineering techniques with this interactive tool and guide." + content="Build powerful, effective system prompts for LLMs and learn advanced prompt engineering techniques with this interactive tool and comprehensive guide." /> - <meta name="twitter:image" content="http://cheatsheets.davidveksler.com/images/prompt-builder-og-image.png" /> <!-- Same as OG Image --> - <meta name="twitter:image:alt" content="Screenshot of the System Prompt Builder & Guide Tool Interface" /> - <!-- <meta name="twitter:creator" content="@YourTwitterHandle"> --> <!-- Optional: Twitter username --> + <meta name="twitter:image" content="http://cheatsheets.davidveksler.com/images/prompt-builder-og-image.png" /> + <meta name="twitter:image:alt" content="Screenshot of the Enhanced System Prompt Builder & Guide Tool Interface" /> <!-- Stylesheets --> <link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet" /> @@ -52,13 +51,13 @@ <style> body { padding-top: 20px; - background-color: #f8f9fa; /* Light gray background */ + background-color: #f8f9fa; font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", - "Segoe UI Symbol"; /* Modern system font stack */ + "Segoe UI Symbol"; } .container-main { - max-width: 980px; /* Slightly wider for better content flow */ + max-width: 980px; } .form-check-input[type="checkbox"] { cursor: pointer; @@ -74,136 +73,122 @@ z-index: 10; } .advisor-panel { - background-color: #eef7ff; /* Light blue */ - border-left: 5px solid #0d6efd; /* Primary blue */ + background-color: #eef7ff; + border-left: 5px solid #0d6efd; padding: 15px; margin-bottom: 20px; font-size: 0.9em; - border-radius: 0.375rem; /* Added subtle rounding */ + border-radius: 0.375rem; } .advisor-panel ul { padding-left: 20px; margin-bottom: 0; } .nav-tabs .nav-link { - color: #0d6efd; /* Primary blue for inactive tabs */ - font-weight: 500; /* Slightly bolder tab text */ + color: #0d6efd; + font-weight: 500; } .nav-tabs .nav-link.active { - color: #495057; /* Dark gray for active tab text */ - background-color: #fff; /* White background for active tab */ + color: #495057; + background-color: #fff; border-color: #dee2e6 #dee2e6 #fff; } .tab-content { - border: 1px solid #dee2e6; /* Standard Bootstrap border color */ + border: 1px solid #dee2e6; border-top: none; - padding: 25px; /* Increased padding for better spacing */ - background-color: #fff; /* White background for tab content */ - box-shadow: 0 0.25rem 0.75rem rgba(0, 0, 0, 0.05); /* Subtle shadow for depth */ - border-bottom-left-radius: 0.375rem; /* Rounded bottom corners */ - border-bottom-right-radius: 0.375rem; /* Rounded bottom corners */ + padding: 25px; + background-color: #fff; + box-shadow: 0 0.25rem 0.75rem rgba(0, 0, 0, 0.05); + border-bottom-left-radius: 0.375rem; + border-bottom-right-radius: 0.375rem; } .guide-section h4 { - margin-top: 1.75rem; /* Increased top margin */ + margin-top: 1.75rem; margin-bottom: 0.75rem; - color: #0d6efd; /* Primary blue */ - border-bottom: 1px solid #e9ecef; /* Subtle separator */ - padding-bottom: 0.5rem; /* Space below text, above border */ + color: #0d6efd; + border-bottom: 1px solid #e9ecef; + padding-bottom: 0.5rem; } .guide-section h5 { - margin-top: 1.25rem; /* Increased top margin */ + margin-top: 1.25rem; margin-bottom: 0.5rem; - color: #198754; /* Success green */ + color: #198754; } .guide-section p, .guide-section li { font-size: 0.95rem; - line-height: 1.65; /* Slightly more line height */ + line-height: 1.65; } .guide-section code { background-color: #e9ecef; padding: 0.2em 0.4em; border-radius: 3px; font-size: 0.9em; - color: #d63384; /* Bootstrap pink for code */ + color: #d63384; } - .guide-section pre > code { /* For multi-line code blocks in guide */ + .guide-section pre > code { display: block; padding: 1rem; white-space: pre-wrap; word-break: break-all; } - - /* Visual Appeal Enhancements */ .header-title-area { padding-bottom: 1.5rem; - border-bottom: 1px solid #dee2e6; /* Separator line */ + border-bottom: 1px solid #dee2e6; margin-bottom: 1.5rem !important; } .header-title-area h1 { - font-size: 2.2rem; /* Adjusted title size */ - color: #343a40; /* Darker color for title */ + font-size: 2.2rem; + color: #343a40; font-weight: 600; } .header-title-area h1 .bi { - color: #0d6efd; /* Icon color match primary */ - margin-right: 0.6rem; /* Space between icon and text */ - vertical-align: -0.1em; /* Align icon better with text */ + color: #0d6efd; + margin-right: 0.6rem; + vertical-align: -0.1em; } - .accordion-button { font-weight: 500; } .accordion-button:not(.collapsed) { - background-color: #e7f1ff; /* Lighter blue when open */ - color: #0a58ca; /* Darker blue text for open accordion */ + background-color: #e7f1ff; + color: #0a58ca; } .accordion-button:focus { - box-shadow: 0 0 0 0.25rem rgba(13, 110, 253, 0.25); /* Bootstrap focus ring */ + box-shadow: 0 0 0 0.25rem rgba(13, 110, 253, 0.25); } .accordion-item { - margin-bottom: 0.75rem; /* Spacing between accordion items */ + margin-bottom: 0.75rem; border: 1px solid #dee2e6; - border-radius: 0.375rem !important; /* Rounded accordion items */ - overflow: hidden; /* To make border-radius work with accordion buttons */ + border-radius: 0.375rem !important; + overflow: hidden; } - .accordion-item:first-of-type { - border-top-left-radius: 0.375rem !important; - border-top-right-radius: 0.375rem !important; - } - .accordion-item:last-of-type { - border-bottom-left-radius: 0.375rem !important; - border-bottom-right-radius: 0.375rem !important; - } - #generatedPromptOutput { - background-color: #f1f3f5; /* Slightly different bg from tab content, less stark than f8f9fa */ + background-color: #f1f3f5; border-radius: 0.25rem; - font-family: 'SFMono-Regular', Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace; /* Monospace font */ + font-family: 'SFMono-Regular', Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace; font-size: 0.9em; line-height: 1.5; } - .config-buttons-wrapper { display: flex; - justify-content: flex-start; /* Default for mobile */ + justify-content: flex-start; gap: 0.5rem; } - @media (min-width: 768px) { /* md breakpoint */ + @media (min-width: 768px) { .config-buttons-wrapper { - justify-content: flex-end; /* Align to end on medium and larger screens */ + justify-content: flex-end; } } - footer.text-center { padding-top: 2rem; padding-bottom: 1rem; border-top: 1px solid #e0e0e0; - color: #6c757d; /* Muted text color */ + color: #6c757d; font-size: 0.9rem; } footer.text-center a { - color: #0d6efd; /* Primary blue for links */ + color: #0d6efd; text-decoration: none; } footer.text-center a:hover { @@ -213,11 +198,10 @@ </head> <body> <div class="container container-main"> - <div class="text-center header-title-area"> <!-- mb-4 removed, handled by new class --> + <div class="text-center header-title-area"> <h1><i class="bi bi-journal-richtext"></i>System Prompt Builder & Engineering Guide</h1> </div> - <!-- Tabs Navigation --> <ul class="nav nav-tabs" id="myTab" role="tablist"> <li class="nav-item" role="presentation"> <button @@ -249,9 +233,7 @@ </li> </ul> - <!-- Tab Content --> <div class="tab-content" id="myTabContent"> - <!-- Builder Tab Pane --> <div class="tab-pane fade show active" id="builder-tab-pane" @@ -270,10 +252,13 @@ <option value="creativeWriter">Creative Storyteller</option> <option value="dataAnalyst">Data Analyst Assistant</option> <option value="socraticTutor">Socratic Tutor</option> + <option value="customerSupportAgent">Customer Support Agent</option> + <option value="researchSynthesizer">Research Synthesizer</option> + <option value="brainstormingFacilitator">Brainstorming Facilitator</option> <option value="reset">Start Fresh / Clear Form</option> </select> </div> - <div class="col-md-6"> <!-- text-md-end removed --> + <div class="col-md-6"> <div class="config-buttons-wrapper mt-2 mt-md-0"> <button class="btn btn-sm btn-outline-secondary" id="exportConfig"> <i class="bi bi-download"></i> Export @@ -295,49 +280,27 @@ <!-- Section 1: Core Identity & Goal --> <div class="accordion-item"> <h2 class="accordion-header"> - <button - class="accordion-button" - type="button" - data-bs-toggle="collapse" - data-bs-target="#collapseOne" - aria-expanded="true" - > - <input - type="checkbox" - class="form-check-input me-2 section-toggle" - id="toggleCoreIdentity" - checked - />1. Core Identity & Goal + <button class="accordion-button" type="button" data-bs-toggle="collapse" data-bs-target="#collapseOne" aria-expanded="true"> + <input type="checkbox" class="form-check-input me-2 section-toggle" id="toggleCoreIdentity" checked />1. Core Identity & Goal </button> </h2> <div id="collapseOne" class="accordion-collapse collapse show" data-bs-parent="#promptBuilderAccordion"> <div class="accordion-body"> <div class="mb-3"> - <label for="aiRole" class="form-label"><strong>AI Role/Persona:</strong></label - ><input - type="text" - class="form-control" - id="aiRole" - placeholder="e.g., You are an expert astrophysicist..." - /> + <label for="aiRole" class="form-label"><strong>AI Role/Persona:</strong></label> + <input type="text" class="form-control" id="aiRole" placeholder="e.g., You are an expert astrophysicist..."/> + </div> + <div class="mb-3"> + <label for="aiPersonaDetails" class="form-label"><strong>Persona Details (Optional):</strong></label> + <textarea class="form-control" id="aiPersonaDetails" rows="2" placeholder="e.g., You have a PhD, specialize in black holes, and are slightly witty."></textarea> </div> <div class="mb-3"> - <label for="aiGoal" class="form-label"><strong>Primary Goal:</strong></label - ><input - type="text" - class="form-control" - id="aiGoal" - placeholder="e.g., Your primary goal is to explain complex concepts..." - /> + <label for="aiGoal" class="form-label"><strong>Primary Goal:</strong></label> + <input type="text" class="form-control" id="aiGoal" placeholder="e.g., Your primary goal is to explain complex concepts..."/> </div> <div class="mb-3"> - <label for="aiAudience" class="form-label"><strong>Target Audience (Optional):</strong></label - ><input - type="text" - class="form-control" - id="aiAudience" - placeholder="e.g., High school students." - /> + <label for="aiAudience" class="form-label"><strong>Target Audience (Optional):</strong></label> + <input type="text" class="form-control" id="aiAudience" placeholder="e.g., High school students."/> </div> </div> </div> @@ -345,50 +308,29 @@ <!-- Section 2: Key Tasks & Functions --> <div class="accordion-item"> <h2 class="accordion-header"> - <button - class="accordion-button collapsed" - type="button" - data-bs-toggle="collapse" - data-bs-target="#collapseTwo" - > - <input type="checkbox" class="form-check-input me-2 section-toggle" id="toggleKeyTasks" checked />2. - Key Tasks & Functions + <button class="accordion-button collapsed" type="button" data-bs-toggle="collapse" data-bs-target="#collapseTwo"> + <input type="checkbox" class="form-check-input me-2 section-toggle" id="toggleKeyTasks" checked />2. Key Tasks & Functions </button> </h2> <div id="collapseTwo" class="accordion-collapse collapse" data-bs-parent="#promptBuilderAccordion"> <div class="accordion-body"> - <label for="aiTasks" class="form-label"><strong>Specific Tasks:</strong></label - ><textarea - class="form-control" - id="aiTasks" - rows="3" - placeholder="List tasks using action verbs..." - ></textarea> + <label for="aiTasks" class="form-label"><strong>Specific Tasks:</strong></label> + <textarea class="form-control" id="aiTasks" rows="3" placeholder="List tasks using action verbs..."></textarea> </div> </div> </div> <!-- Section 3: Interaction Style & Tone --> <div class="accordion-item"> <h2 class="accordion-header"> - <button - class="accordion-button collapsed" - type="button" - data-bs-toggle="collapse" - data-bs-target="#collapseThree" - > - <input - type="checkbox" - class="form-check-input me-2 section-toggle" - id="toggleInteractionStyle" - checked - />3. Interaction Style & Tone + <button class="accordion-button collapsed" type="button" data-bs-toggle="collapse" data-bs-target="#collapseThree"> + <input type="checkbox" class="form-check-input me-2 section-toggle" id="toggleInteractionStyle" checked />3. Interaction Style & Tone </button> </h2> <div id="collapseThree" class="accordion-collapse collapse" data-bs-parent="#promptBuilderAccordion"> <div class="accordion-body"> <div class="mb-3"> - <label for="aiTone" class="form-label"><strong>Tone:</strong></label - ><select class="form-select" id="aiTone"> + <label for="aiTone" class="form-label"><strong>Tone:</strong></label> + <select class="form-select" id="aiTone"> <option value="Neutral" selected>Neutral</option> <option value="Formal">Formal</option> <option value="Casual">Casual</option> @@ -399,17 +341,13 @@ <option value="Technical">Technical</option> <option value="Patient">Patient</option> <option value="Encouraging">Encouraging</option> + <option value="Skeptical">Skeptical</option> + <option value="Objective">Objective</option> </select> </div> <div class="mb-3"> - <label for="aiCommunicationStyle" class="form-label" - ><strong>Communication Style Details (Optional):</strong></label - ><textarea - class="form-control" - id="aiCommunicationStyle" - rows="2" - placeholder="e.g., Ask clarifying questions..." - ></textarea> + <label for="aiCommunicationStyle" class="form-label"><strong>Communication Style Details (Optional):</strong></label> + <textarea class="form-control" id="aiCommunicationStyle" rows="2" placeholder="e.g., Ask clarifying questions... Use analogies..."></textarea> </div> </div> </div> @@ -417,47 +355,23 @@ <!-- Section 4: Content Standards & Expertise --> <div class="accordion-item"> <h2 class="accordion-header"> - <button - class="accordion-button collapsed" - type="button" - data-bs-toggle="collapse" - data-bs-target="#collapseFour" - > - <input - type="checkbox" - class="form-check-input me-2 section-toggle" - id="toggleContentStandards" - checked - />4. Content Standards & Expertise + <button class="accordion-button collapsed" type="button" data-bs-toggle="collapse" data-bs-target="#collapseFour"> + <input type="checkbox" class="form-check-input me-2 section-toggle" id="toggleContentStandards" checked />4. Content Standards & Expertise </button> </h2> <div id="collapseFour" class="accordion-collapse collapse" data-bs-parent="#promptBuilderAccordion"> <div class="accordion-body"> <div class="form-check mb-2"> - <input class="form-check-input" type="checkbox" id="emphasizeAccuracy" checked /><label - class="form-check-label" - for="emphasizeAccuracy" - >Emphasize accuracy and evidence-based reasoning.</label - > + <input class="form-check-input" type="checkbox" id="emphasizeAccuracy" checked /> + <label class="form-check-label" for="emphasizeAccuracy">Emphasize accuracy and evidence-based reasoning.</label> </div> <div class="mb-3"> - <label for="aiKnowledge" class="form-label" - ><strong>Knowledge Base/Cutoff (Optional):</strong></label - ><input - type="text" - class="form-control" - id="aiKnowledge" - placeholder="e.g., Your knowledge is current up to January 2024." - /> + <label for="aiKnowledge" class="form-label"><strong>Knowledge Base/Cutoff (Optional):</strong></label> + <input type="text" class="form-control" id="aiKnowledge" placeholder="e.g., Your knowledge is current up to January 2024. Access to [specific docs]."/> </div> <div class="mb-3"> - <label for="aiDepthDetail" class="form-label"><strong>Depth/Detail Level (Optional):</strong></label - ><input - type="text" - class="form-control" - id="aiDepthDetail" - placeholder="e.g., Provide highly detailed answers." - /> + <label for="aiDepthDetail" class="form-label"><strong>Depth/Detail Level (Optional):</strong></label> + <input type="text" class="form-control" id="aiDepthDetail" placeholder="e.g., Provide highly detailed answers. Offer executive summaries first."/> </div> </div> </div> @@ -465,47 +379,32 @@ <!-- Section 5: Output Requirements & Formatting --> <div class="accordion-item"> <h2 class="accordion-header"> - <button - class="accordion-button collapsed" - type="button" - data-bs-toggle="collapse" - data-bs-target="#collapseFive" - > - <input - type="checkbox" - class="form-check-input me-2 section-toggle" - id="toggleOutputFormat" - checked - />5. Output Requirements & Formatting + <button class="accordion-button collapsed" type="button" data-bs-toggle="collapse" data-bs-target="#collapseFive"> + <input type="checkbox" class="form-check-input me-2 section-toggle" id="toggleOutputFormat" checked />5. Output Requirements & Formatting </button> </h2> <div id="collapseFive" class="accordion-collapse collapse" data-bs-parent="#promptBuilderAccordion"> <div class="accordion-body"> <div class="mb-3"> - <label for="aiOutputFormat" class="form-label"><strong>Format Instructions:</strong></label - ><textarea - class="form-control" - id="aiOutputFormat" - rows="3" - placeholder="e.g., Respond in Markdown. Use JSON for lists..." - ></textarea> + <label for="promptStructureMethod" class="form-label"><strong>Overall Prompt Structure for LLM:</strong></label> + <select class="form-select" id="promptStructureMethod"> + <option value="markdown" selected>Markdown Headings (Default)</option> + <option value="xml">XML Tags (e.g., for Anthropic/Claude)</option> + </select> + <small class="form-text text-muted">This structures the entire system prompt you're building.</small> + </div> + <hr> + <div class="mb-3"> + <label for="aiOutputFormat" class="form-label"><strong>AI Response Format Instructions:</strong></label> + <textarea class="form-control" id="aiOutputFormat" rows="3" placeholder="e.g., Respond in Markdown. Use JSON for lists with keys 'item', 'value'..."></textarea> </div> <div class="mb-3"> - <label for="aiLengthConstraints" class="form-label" - ><strong>Length Constraints (Optional):</strong></label - ><input - type="text" - class="form-control" - id="aiLengthConstraints" - placeholder="e.g., Keep summaries under 200 words." - /> + <label for="aiLengthConstraints" class="form-label"><strong>AI Response Length Constraints (Optional):</strong></label> + <input type="text" class="form-control" id="aiLengthConstraints" placeholder="e.g., Keep summaries under 200 words."/> </div> <div class="form-check mb-2"> - <input class="form-check-input" type="checkbox" id="useHeadingsLists" checked /><label - class="form-check-label" - for="useHeadingsLists" - >Use headings and lists for clarity.</label - > + <input class="form-check-input" type="checkbox" id="useHeadingsLists" checked /> + <label class="form-check-label" for="useHeadingsLists">AI should use headings and lists for clarity in its response.</label> </div> </div> </div> @@ -513,48 +412,23 @@ <!-- Section 6: Constraints & Safeguards --> <div class="accordion-item"> <h2 class="accordion-header"> - <button - class="accordion-button collapsed" - type="button" - data-bs-toggle="collapse" - data-bs-target="#collapseSix" - > - <input - type="checkbox" - class="form-check-input me-2 section-toggle" - id="toggleConstraints" - checked - />6. Constraints & Safeguards + <button class="accordion-button collapsed" type="button" data-bs-toggle="collapse" data-bs-target="#collapseSix"> + <input type="checkbox" class="form-check-input me-2 section-toggle" id="toggleConstraints" checked />6. Constraints & Safeguards </button> </h2> <div id="collapseSix" class="accordion-collapse collapse" data-bs-parent="#promptBuilderAccordion"> <div class="accordion-body"> <div class="mb-3"> - <label for="aiProhibitions" class="form-label" - ><strong>Absolute Prohibitions (MUST NOT do):</strong></label - ><textarea - class="form-control" - id="aiProhibitions" - rows="3" - placeholder="e.g., Do not provide medical advice..." - ></textarea> + <label for="aiProhibitions" class="form-label"><strong>Absolute Prohibitions (MUST NOT do):</strong></label> + <textarea class="form-control" id="aiProhibitions" rows="3" placeholder="e.g., Do not provide medical advice... Do not generate harmful content..."></textarea> </div> <div class="mb-3"> - <label for="aiAvoidances" class="form-label" - ><strong>Scope Limitations / Topics to Avoid (Optional):</strong></label - ><textarea - class="form-control" - id="aiAvoidances" - rows="2" - placeholder="e.g., Avoid discussing contemporary political figures." - ></textarea> + <label for="aiAvoidances" class="form-label"><strong>Scope Limitations / Topics to Avoid (Optional):</strong></label> + <textarea class="form-control" id="aiAvoidances" rows="2" placeholder="e.g., Avoid discussing contemporary political figures. Stick to topics X, Y, Z."></textarea> </div> <div class="form-check mb-2"> - <input class="form-check-input" type="checkbox" id="avoidBias" checked /><label - class="form-check-label" - for="avoidBias" - >Strive for neutrality and avoid societal biases.</label - > + <input class="form-check-input" type="checkbox" id="avoidBias" checked /> + <label class="form-check-label" for="avoidBias">Strive for neutrality and avoid societal biases.</label> </div> </div> </div> @@ -562,60 +436,40 @@ <!-- Section 7: Reasoning & Process (Advanced) --> <div class="accordion-item"> <h2 class="accordion-header"> - <button - class="accordion-button collapsed" - type="button" - data-bs-toggle="collapse" - data-bs-target="#collapseSeven" - > - <input type="checkbox" class="form-check-input me-2 section-toggle" id="toggleReasoning" />7. - Reasoning & Process + <button class="accordion-button collapsed" type="button" data-bs-toggle="collapse" data-bs-target="#collapseSeven"> + <input type="checkbox" class="form-check-input me-2 section-toggle" id="toggleReasoning" />7. Reasoning & Process </button> </h2> <div id="collapseSeven" class="accordion-collapse collapse" data-bs-parent="#promptBuilderAccordion"> <div class="accordion-body"> <div class="form-check mb-2"> - <input class="form-check-input" type="checkbox" id="useCoT" /><label - class="form-check-label" - for="useCoT" - >Employ step-by-step reasoning (Chain-of-Thought).</label - ><input - type="text" - class="form-control form-control-sm mt-1" - id="cotPhrase" - placeholder="Optional: Custom phrase e.g., 'Let's think step by step.'" - /> + <input class="form-check-input" type="checkbox" id="useCoT" /> + <label class="form-check-label" for="useCoT">Employ step-by-step reasoning (Chain-of-Thought).</label> + <input type="text" class="form-control form-control-sm mt-1" id="cotPhrase" placeholder="Optional: Custom phrase e.g., 'Let's think step by step.'"/> + </div> + <div class="form-check mb-2"> + <input class="form-check-input" type="checkbox" id="useScratchpad" /> + <label class="form-check-label" for="useScratchpad">Use an internal scratchpad/thinking process.</label> + <input type="text" class="form-control form-control-sm mt-1" id="scratchpadTags" placeholder="Optional: e.g., Enclose thoughts in <thinking></thinking> tags."/> </div> <div class="form-check mb-2"> - <input class="form-check-input" type="checkbox" id="useScratchpad" /><label - class="form-check-label" - for="useScratchpad" - >Use an internal scratchpad/thinking process.</label - ><input - type="text" - class="form-control form-control-sm mt-1" - id="scratchpadTags" - placeholder="Optional: e.g., Enclose thoughts in <thinking></thinking> tags." - /> + <input class="form-check-input" type="checkbox" id="preAnalysisStep" /> + <label class="form-check-label" for="preAnalysisStep">Perform a pre-analysis/planning step before answering.</label> + <input type="text" class="form-control form-control-sm mt-1" id="preAnalysisInstructions" placeholder="Optional: e.g., 'Before answering, outline key points.'"/> </div> <div class="form-check mb-2"> - <input class="form-check-input" type="checkbox" id="selfCritique" /><label - class="form-check-label" - for="selfCritique" - >Perform self-critique and refinement.</label - > + <input class="form-check-input" type="checkbox" id="selfCritique" /> + <label class="form-check-label" for="selfCritique">Perform self-critique and refinement.</label> </div> <div class="form-check mb-2"> - <input class="form-check-input" type="checkbox" id="consultKnowledge" /><label - class="form-check-label" - for="consultKnowledge" - >Consult external knowledge if necessary.</label - ><input - type="text" - class="form-control form-control-sm mt-1" - id="knowledgeSourceHint" - placeholder="Optional: e.g., 'Refer to pre-loaded documents about X.'" - /> + <input class="form-check-input" type="checkbox" id="consultKnowledge" /> + <label class="form-check-label" for="consultKnowledge">Consult external knowledge/tools if necessary and capable.</label> + <input type="text" class="form-control form-control-sm mt-1" id="knowledgeSourceHint" placeholder="Optional: e.g., 'Refer to pre-loaded documents about X.'"/> + </div> + <div class="form-check mb-2"> + <input class="form-check-input" type="checkbox" id="allowToolUse" /> + <label class="form-check-label" for="allowToolUse">Allow use of specific external tools (if model is capable).</label> + <input type="text" class="form-control form-control-sm mt-1" id="toolUseExamples" placeholder="Optional: e.g., 'You can use search_engine tool. You can use calculator tool.'" /> </div> </div> </div> @@ -623,14 +477,8 @@ <!-- Section 8: Few-Shot Examples --> <div class="accordion-item"> <h2 class="accordion-header"> - <button - class="accordion-button collapsed" - type="button" - data-bs-toggle="collapse" - data-bs-target="#collapseEight" - > - <input type="checkbox" class="form-check-input me-2 section-toggle" id="toggleExamples" />8. Few-Shot - Examples + <button class="accordion-button collapsed" type="button" data-bs-toggle="collapse" data-bs-target="#collapseEight"> + <input type="checkbox" class="form-check-input me-2 section-toggle" id="toggleExamples" />8. Few-Shot Examples </button> </h2> <div id="collapseEight" class="accordion-collapse collapse" data-bs-parent="#promptBuilderAccordion"> @@ -639,12 +487,11 @@ <button type="button" class="btn btn-sm btn-outline-primary mt-2" id="addExampleButton"> <i class="bi bi-plus-circle"></i> Add Example </button> - <small class="form-text text-muted d-block mt-1">Provide 1-3 clear input/output pairs.</small> + <small class="form-text text-muted d-block mt-1">Provide 1-3 clear input/output pairs. Few-shot examples significantly improve performance, especially for custom formats or nuanced tasks. Ensure examples are high-quality and accurately reflect the desired output.</small> </div> </div> </div> </div> - <!-- End Accordion --> <div class="d-grid gap-2 my-4"> <button type="button" class="btn btn-primary btn-lg" id="generatePromptButton"> @@ -659,9 +506,7 @@ <pre><code id="generatedPromptOutput" class="p-3 border d-block" style="min-height: 200px; white-space: pre-wrap; word-wrap: break-word;">Your generated prompt will appear here...</code></pre> </div> </div> - <!-- End Builder Tab Pane --> - <!-- Guide Tab Pane --> <div class="tab-pane fade" id="guide-tab-pane" role="tabpanel" aria-labelledby="guide-tab" tabindex="0"> <h2 class="mt-2">Effective Prompt Engineering: A Cheatsheet</h2> <p class="lead"> @@ -694,7 +539,7 @@ </ul> <h5>C. Define the Desired Output Format</h5> - <p>Tell the AI how you want the response structured. This greatly improves usability.</p> + <p>Tell the AI how you want its response structured. This greatly improves usability.</p> <ul> <li> Examples: @@ -707,7 +552,7 @@ <li><code>Use Markdown for formatting.</code></li> </ul> </li> - <li>For complex tasks, specifying structured output (JSON, XML, YAML) is highly recommended.</li> + <li>For complex tasks, specifying structured output (JSON, XML, YAML) is highly recommended for the AI's response.</li> </ul> <h5>D. Assign a Persona/Role</h5> @@ -725,6 +570,7 @@ Specify desired tone (e.g., <code>formal</code>, <code>casual</code>, <code>witty</code>, <code>empathetic</code>) and target audience. </li> + <li>Be specific about the persona's expertise level, background, and even disposition if relevant (e.g., 'You are a skeptical but fair journalist,' 'You are an encouraging mentor').</li> </ul> </div> @@ -768,6 +614,8 @@ AI: Roger started with 5 balls. He bought 2 cans, and each can has 3 balls. So, <code>"Break this down."</code> to your prompt. Some models respond well to instructions like <code>"Show your work."</code> </p> + <h5>D. Self-Consistency</h5> + <p>For complex reasoning tasks where high accuracy is crucial, you can improve reliability by generating multiple responses to the same prompt (e.g., by increasing the model's "temperature" or randomness setting if available, or by slightly rephrasing the prompt). Then, select the most common answer or the one that appears most robust across several generations. This helps reduce the chance of an occasional flawed reasoning path.</p> </div> <div class="guide-section"> @@ -784,17 +632,19 @@ AI: Roger started with 5 balls. He bought 2 cans, and each can has 3 balls. So, <h5>B. Structuring Prompts with Delimiters/Tags</h5> <p> - Use clear separators (e.g., triple quotes <code>"""</code>, XML tags - <code><instruction>...</instruction></code - >, Markdown headings <code>## Input Data</code>) to distinguish instructions, context, examples, and input - data. This helps the AI parse the prompt effectively. + Use clear separators (e.g., triple quotes <code>"""</code>, XML tags like <code><instruction>...</instruction></code>, or Markdown headings <code>## Input Data</code>) to distinguish instructions, context, examples, and input data. <strong>This is highly recommended as it significantly helps the AI parse the prompt effectively.</strong> Anthropic's Claude models, for instance, are specifically trained to pay attention to XML tags, making them particularly effective for structuring prompts for these models. Using distinct tags for different instruction types (e.g., <code><role></code>, <code><user_query></code>, <code><output_constraints></code>) is a best practice. </p> - <p>Anthropic's Claude models, for instance, are specifically trained to pay attention to XML tags.</p> - <pre><code><role>You are a helpful assistant.</role> + <pre><code><role_definition> + You are a helpful assistant. +</role_definition> + <user_query> -What's the capital of France? + What's the capital of France? </user_query> -<instructions>Respond concisely.</instructions></code></pre> + +<output_instructions> + Respond concisely. +</output_instructions></code></pre> <h5>C. Breaking Down Complex Tasks (Prompt Chaining)</h5> <p> @@ -820,16 +670,18 @@ What's the capital of France? <p> For complex reasoning, instruct the model to "think out loud" or use a scratchpad area (which you might instruct it to exclude from the final output). Some models benefit from being told to put intermediate - thoughts in specific tags (e.g., <code><thinking>...</thinking></code - >). + thoughts in specific tags (e.g., <code><thinking>...</thinking></code> or <code><scratchpad>...</scratchpad></code>) and then explicitly tell it to exclude content within these tags from the final user-facing response. </p> <h5>F. Retrieval Augmented Generation (RAG)</h5> - <p> - Not strictly a prompting technique but related: RAG combines LLMs with external knowledge retrieval. The - prompt might instruct the AI to first retrieve relevant information from a specified knowledge base and - then use that information to generate its response. This is key for up-to-date or domain-specific - knowledge. + <p> + Retrieval Augmented Generation (RAG) is a powerful technique where the LLM's knowledge is augmented by dynamically retrieving information from external sources (like a vector database of your documents, or a live API) <em>before</em> generating a response. While setting up a full RAG system is beyond simple prompting, you can simulate aspects of it by: + <ul> + <li>Providing specific context directly in the prompt (if it's short enough).</li> + <li>Instructing the AI to formulate queries it <em>would</em> use to find information if it had access to a search tool, then (if in an interactive setup) you can run those searches and provide the results back to the AI in a subsequent turn.</li> + <li>For models with built-in browsing/tool use, explicitly instructing them to search for specific information can be a form of RAG.</li> + </ul> + This is key for tasks requiring up-to-date, domain-specific, or private knowledge not present in the model's training data. </p> <h5>G. Understanding Context Window & Placement</h5> @@ -838,9 +690,28 @@ What's the capital of France? <li> Experiment with instruction placement. Some models are more sensitive to instructions at the beginning, others at the end, especially with long contexts (e.g., Anthropic suggests important instructions can go - at the end for Claude). + at the end for Claude). It's often effective to place the most critical instruction or the primary task right before the user's input if providing few-shot examples or extensive context. </li> </ul> + <h5>H. Tree of Thoughts (ToT)</h5> + <p>An advanced technique where the model is prompted to explore multiple reasoning paths (like branches of a tree) for a problem. It can evaluate these different paths and choose the most promising one, or even backtrack if a path seems unhelpful. This is more complex to implement in a single prompt and often involves the LLM self-critiquing different lines of thought.</p> + + <h5>I. ReAct (Reasoning and Acting)</h5> + <p>This framework enables LLMs to generate both reasoning traces (like Chain-of-Thought) and task-specific actions. These actions can include using tools (like a calculator or a search engine API) and then integrating the information gathered from these tools back into its reasoning process to arrive at a final answer. To implement this, you'd define the available tools and instruct the model on how it can decide to use them.</p> + + <h5>J. Directional Stimulus Prompting (DSP)</h5> + <p>Instead of providing highly explicit instructions for every detail, DSP involves giving the model subtle "hints" or "cues" that gently steer it towards the desired output style, content focus, or level of detail. This can be useful for creative tasks where you want to guide the model without over-constraining it. For example, including a few keywords related to a specific theme can act as a directional stimulus.</p> + + <h5>K. CLEAR Framework (Concise, Logical, Explicit, Adapt, Reflect)</h5> + <p>Some practitioners advocate for frameworks like CLEAR to structure their prompting approach systematically: + <ul> + <li><strong>Concise:</strong> Be brief but comprehensive. Avoid verbosity.</li> + <li><strong>Logical:</strong> Structure your prompt in a way that makes sense for the AI to process.</li> + <li><strong>Explicit:</strong> Clearly state what you want, including format, persona, and constraints. Don't make the AI guess.</li> + <li><strong>Adapt:</strong> Be prepared to iterate. If the first prompt doesn't work, analyze the output and adapt your prompt.</li> + <li><strong>Reflect:</strong> After the interaction, consider what worked, what didn't, and why, to improve future prompts.</li> + </ul> + </p> </div> <div class="guide-section"> @@ -853,6 +724,7 @@ What's the capital of France? <ul> <li>Explicitly instruct against stereotypes or biased language if the topic is sensitive.</li> <li>Ask for balanced perspectives.</li> + <li>If appropriate for the AI's role, instruct it to acknowledge uncertainty or the limitations of its knowledge, rather than generating speculative or potentially misleading information.</li> </ul> <h5>B. Adapting to Model Updates</h5> @@ -860,39 +732,33 @@ What's the capital of France? LLMs are constantly evolving. Strategies that work well today might need adjustment as models are updated. Stay informed about best practices for the specific model you're using. </p> + <p>Different models may have different strengths, weaknesses, and optimal prompting styles. What works best for GPT-4o might need slight adjustments for Claude 3.5 Sonnet or Gemini 1.5 Pro. Always refer to the latest documentation or guides provided by the AI lab for the specific model you are using.</p> </div> <p class="mt-4 text-center"> <small>This guide is a starting point. The best way to learn is by experimenting!</small> </p> </div> - <!-- End Guide Tab Pane --> </div> - <!-- End Tab Content --> <footer class="container text-center pb-3"> - <p class="mb-2">© 2025 David Veksler</p> - <div> - <a href="https://www.linkedin.com/in/davidveksler/" title="David Veksler on LinkedIn" target="_blank" rel="noopener noreferrer" class="mx-2 link-secondary"> - <i class="bi bi-linkedin"></i> LinkedIn - </a> - <a href="https://cheatsheets.davidveksler.com/" title="Browse All Cheatsheets" class="mx-2 link-secondary"> - <i class="bi bi-collection"></i> All Cheatsheets - </a> - </div> -</footer> + <p class="mb-2">© 2025 David Veksler</p> + <div> + <a href="https://www.linkedin.com/in/davidveksler/" title="David Veksler on LinkedIn" target="_blank" rel="noopener noreferrer" class="mx-2 link-secondary"> + <i class="bi bi-linkedin"></i> LinkedIn + </a> + <a href="https://cheatsheets.davidveksler.com/" title="Browse All Cheatsheets" class="mx-2 link-secondary"> + <i class="bi bi-collection"></i> All Cheatsheets + </a> + </div> + </footer> </div> - <!-- End Container --> <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js"></script> <script> - // ALL PREVIOUS JAVASCRIPT FOR THE BUILDER GOES HERE - // (DOMElements, templates, loadTemplate, updateAdvisor, setFieldValue, getFieldValue, resetFormAndEnableAllSections, section toggle logic, example adding, generate prompt, copy, import/export) - // No new JS is strictly needed for the Bootstrap tabs themselves as they are driven by data attributes. - // However, ensure existing JS doesn't conflict and all element selectors are still valid. - const DOMElements = { promptTemplate: document.getElementById("promptTemplate"), aiRole: document.getElementById("aiRole"), + aiPersonaDetails: document.getElementById("aiPersonaDetails"), aiGoal: document.getElementById("aiGoal"), aiAudience: document.getElementById("aiAudience"), aiTasks: document.getElementById("aiTasks"), @@ -901,6 +767,7 @@ What's the capital of France? emphasizeAccuracy: document.getElementById("emphasizeAccuracy"), aiKnowledge: document.getElementById("aiKnowledge"), aiDepthDetail: document.getElementById("aiDepthDetail"), + promptStructureMethod: document.getElementById("promptStructureMethod"), // New aiOutputFormat: document.getElementById("aiOutputFormat"), aiLengthConstraints: document.getElementById("aiLengthConstraints"), useHeadingsLists: document.getElementById("useHeadingsLists"), @@ -911,9 +778,13 @@ What's the capital of France? cotPhrase: document.getElementById("cotPhrase"), useScratchpad: document.getElementById("useScratchpad"), scratchpadTags: document.getElementById("scratchpadTags"), + preAnalysisStep: document.getElementById("preAnalysisStep"), // New + preAnalysisInstructions: document.getElementById("preAnalysisInstructions"), // New selfCritique: document.getElementById("selfCritique"), consultKnowledge: document.getElementById("consultKnowledge"), knowledgeSourceHint: document.getElementById("knowledgeSourceHint"), + allowToolUse: document.getElementById("allowToolUse"), // New + toolUseExamples: document.getElementById("toolUseExamples"), // New toggleExamples: document.getElementById("toggleExamples"), examplesContainer: document.getElementById("examplesContainer"), addExampleButton: document.getElementById("addExampleButton"), @@ -940,98 +811,137 @@ What's the capital of France? const templates = { technicalExplainer: { aiRole: "You are an expert technical explainer and educator, skilled in breaking down complex topics.", - aiGoal: - "Your primary goal is to explain intricate technical or scientific concepts in a clear, concise, and easily understandable manner for a non-expert audience or learners.", + aiPersonaDetails: "You approach topics methodically and aim for deep conceptual understanding in your audience.", + aiGoal: "Your primary mission is to deconstruct intricate technical or scientific concepts in a clear, concise, and easily understandable manner for a non-expert audience or learners.", aiAudience: "Non-experts, students, or individuals new to the subject.", - aiTasks: - "- Define key terminology using simple language.\n- Use illustrative analogies and real-world examples.\n- Break down complex processes into logical steps.\n- Answer follow-up questions patiently and thoroughly.", + aiTasks: "- Define key terminology using simple language.\n- Use illustrative analogies and real-world examples.\n- Break down complex processes into logical steps.\n- Answer follow-up questions patiently and thoroughly.", aiTone: "Patient", - aiCommunicationStyle: - "Maintain a supportive and encouraging tone. Avoid jargon where possible; if unavoidable, explain it immediately. Structure explanations logically.", + aiCommunicationStyle: "Maintain a supportive and encouraging tone. Avoid jargon where possible; if unavoidable, explain it immediately. Structure explanations logically, starting with a high-level overview then drilling down. Confirm understanding if the topic is very complex.", emphasizeAccuracy: true, - aiDepthDetail: - "Provide sufficient detail for understanding without overwhelming the user. Focus on core concepts first.", - aiOutputFormat: - "Respond in well-structured paragraphs. Use bullet points or numbered lists for steps or key takeaways. Consider using Markdown for emphasis (bold, italics) where helpful.", + aiDepthDetail: "Provide sufficient detail for understanding without overwhelming the user. Focus on core concepts first.", + aiOutputFormat: "Respond in well-structured paragraphs. Use bullet points or numbered lists for steps or key takeaways. Consider using Markdown for emphasis (bold, italics) where helpful.", useHeadingsLists: true, - aiProhibitions: - "Do not provide overly simplistic answers that sacrifice critical nuance or accuracy. Do not invent information if unsure.", + aiProhibitions: "Do not provide overly simplistic answers that sacrifice critical nuance or accuracy. Do not invent information if unsure.", useCoT: true, - cotPhrase: "Let's break this down step-by-step to ensure clarity.", + cotPhrase: "Let's break this down logically. First, I will address A, then B, then C.", + preAnalysisStep: true, + preAnalysisInstructions: "Before explaining, briefly outline the main sub-topics you will address to cover the concept comprehensively.", selfCritique: true, }, codeAssistant: { - aiRole: - "You are an expert AI programming assistant, proficient across multiple programming languages and paradigms.", - aiGoal: - "Your primary goal is to help users write, debug, optimize, and understand code, and to provide guidance on software development best practices.", - aiTasks: - "- Write code snippets or functions based on user requirements.\n- Identify bugs in user-provided code and suggest corrections.\n- Explain code logic, algorithms, and design patterns.\n- Suggest optimizations for performance or readability.\n- Translate code snippets between languages (if applicable).\n- Offer advice on project structure and tooling.", + aiRole: "You are an expert AI programming assistant, proficient across multiple programming languages and paradigms.", + aiPersonaDetails: "You are meticulous, detail-oriented, and prioritize best practices in software development.", + aiGoal: "Your primary goal is to help users write, debug, optimize, and understand code, and to provide guidance on software development best practices.", + aiTasks: "- Write code snippets or functions based on user requirements.\n- Identify bugs in user-provided code and suggest corrections.\n- Explain code logic, algorithms, and design patterns.\n- Suggest optimizations for performance or readability.\n- Translate code snippets between languages (if applicable).\n- Advise on security best practices related to the code.\n- Offer to refactor code for clarity or efficiency.\n- Offer advice on project structure and tooling.", aiTone: "Technical", - aiCommunicationStyle: - "Be precise, clear, and direct. When providing code, explain its purpose, usage, and any important considerations (e.g., dependencies, potential edge cases).", + aiCommunicationStyle: "Be precise, clear, and direct. When providing code, explain its purpose, usage, and any important considerations (e.g., dependencies, potential edge cases). If multiple solutions exist, briefly outline pros and cons. Always state any assumptions made about the user's environment or requirements.", emphasizeAccuracy: true, aiKnowledge: "Assume up-to-date knowledge of common programming languages, libraries, and frameworks.", - aiOutputFormat: - "All code MUST be in fenced code blocks with the language specified (e.g., ```python ... ```).\nProvide explanations and reasoning outside of code blocks, typically before or after the code.", + aiOutputFormat: "All code MUST be in fenced code blocks with the language specified (e.g., ```python ... ```).\nProvide explanations and reasoning outside of code blocks, typically before or after the code.", useHeadingsLists: true, - aiProhibitions: - "Do not execute arbitrary code. Do not provide opinions on programming language superiority without specific context. Do not store or share user's proprietary code unless explicitly part of a secure, agreed-upon workflow.", + aiProhibitions: "Do not execute arbitrary code. Do not provide opinions on programming language superiority without specific context. Do not store or share user's proprietary code unless explicitly part of a secure, agreed-upon workflow.", useCoT: true, cotPhrase: "Let's analyze the requirements and then structure the code.", + preAnalysisStep: true, + preAnalysisInstructions: "Before generating or debugging code, reiterate your understanding of the problem or the user's specific request. List any ambiguities you need clarified.", + scratchpadTags: "<thinking_process></thinking_process>", + allowToolUse: false, // Potentially true if the model could verify code against a linter API, etc. }, creativeWriter: { - aiRole: "You are a highly imaginative and versatile creative storyteller and writing partner.", - aiGoal: - "Your primary goal is to assist users in brainstorming, developing, and writing various forms of creative content, including stories, poems, scripts, and marketing copy.", + aiRole: "You are a highly imaginative and versatile creative storyteller and writing partner. You are an expert in various narrative structures, poetic forms, and persuasive writing techniques.", + aiPersonaDetails: "You are enthusiastic, inspiring, and love exploring unconventional ideas.", + aiGoal: "Your primary goal is to assist users in brainstorming, developing, and writing various forms of creative content, including stories, poems, scripts, and marketing copy.", aiAudience: "Writers, marketers, hobbyists, or anyone seeking creative inspiration.", - aiTasks: - "- Generate story ideas, plot points, or character concepts based on prompts.\n- Write original narrative passages, descriptions, or dialogue in various styles and genres.\n- Compose poetry in different forms (e.g., sonnet, haiku, free verse).\n- Help develop marketing slogans, ad copy, or product descriptions.\n- Brainstorm alternative phrasings or creative angles.", + aiTasks: "- Generate story ideas, plot points, or character concepts based on prompts.\n- Write original narrative passages, descriptions, or dialogue in various styles and genres.\n- Compose poetry in different forms (e.g., sonnet, haiku, free verse).\n- Help develop marketing slogans, ad copy, or product descriptions.\n- Brainstorm alternative phrasings or creative angles.\n- Offer critiques or suggestions for improving user-provided creative text.\n- Adapt writing style based on specified genre, mood, or target audience.", aiTone: "Witty", - aiCommunicationStyle: - "Embrace creativity and be flexible with user requests. Offer multiple options or suggestions when appropriate. Be playful and inspiring.", - emphasizeAccuracy: false, + aiCommunicationStyle: "Embrace creativity and be flexible with user requests. Offer multiple options or suggestions when appropriate. Be playful and inspiring. Feel free to ask clarifying questions to better understand the user's creative vision (e.g., 'What is the core emotion you want this scene to evoke?').", + emphasizeAccuracy: false, // Focus is on creativity aiDepthDetail: "Vary detail based on the request – from short snippets to more developed passages.", - aiOutputFormat: - "Format responses according to the creative genre (e.g., prose paragraphs, script format with character names, stanzas for poetry). Use rich vocabulary and imagery.", - aiProhibitions: - "Do not plagiarize existing copyrighted works. Do not generate offensive, hateful, or harmful creative content. Clearly distinguish AI-generated content if it's to be used directly.", + aiOutputFormat: "Format responses according to the creative genre (e.g., prose paragraphs, script format with character names, stanzas for poetry). Use rich vocabulary and imagery.", + aiProhibitions: "Do not plagiarize existing copyrighted works. Do not generate offensive, hateful, or harmful creative content. Clearly distinguish AI-generated content if it's to be used directly.", + preAnalysisStep: true, + preAnalysisInstructions: "For complex creative requests, briefly list 2-3 different angles or approaches you could take before proceeding with one.", }, dataAnalyst: { aiRole: "You are a meticulous and insightful Data Analyst Assistant.", - aiGoal: - "Your primary goal is to help users understand, interpret, and derive insights from data. You can assist with data cleaning, exploratory data analysis, visualization ideas, and statistical interpretations.", - aiTasks: - "- Suggest methods for cleaning and preparing datasets.\n- Propose relevant questions for exploratory data analysis (EDA).\n- Describe potential patterns or anomalies to look for in data.\n- Explain statistical concepts or test results in understandable terms.\n- Recommend appropriate chart types for visualizing different kinds of data.\n- Help formulate hypotheses based on initial data observations.", + aiPersonaDetails: "You are data-driven, analytical, and skilled at explaining complex statistical ideas simply.", + aiGoal: "Your primary goal is to help users understand, interpret, and derive insights from data. You aim to empower users to make data-informed decisions by clarifying complex data and statistical concepts.", + aiTasks: "- Suggest methods for cleaning and preparing datasets.\n- Propose relevant questions for exploratory data analysis (EDA).\n- Describe potential patterns or anomalies to look for in data.\n- Explain statistical concepts or test results in understandable terms.\n- Recommend appropriate chart types for visualizing different kinds of data.\n- Help formulate hypotheses based on initial data observations.\n- Help interpret the output of statistical software or libraries.\n- Discuss potential biases in data or analysis methods.", aiTone: "Technical", - aiCommunicationStyle: - "Be precise and data-driven in your explanations. Clearly define any assumptions made. If providing interpretations, state confidence levels or potential alternative explanations.", + aiCommunicationStyle: "Be precise and data-driven in your explanations. Clearly define any assumptions made. If providing interpretations, state confidence levels or potential alternative explanations.", emphasizeAccuracy: true, - aiKnowledge: - "Assume familiarity with common statistical methods, data visualization principles, and data manipulation techniques.", - aiOutputFormat: - "Structure responses logically. Use bullet points for lists of suggestions or steps. When discussing data, be specific. If suggesting code (e.g., Python/R for analysis), use fenced code blocks.", + aiKnowledge: "Assume familiarity with common statistical methods, data visualization principles, and data manipulation techniques.", + aiOutputFormat: "Structure responses logically. Use bullet points for lists of suggestions or steps. When discussing data, be specific. If suggesting code (e.g., Python/R for analysis), use fenced code blocks.", useHeadingsLists: true, - aiProhibitions: - "Do not perform actual data analysis on user-provided raw data if not explicitly designed and secured for it. Do not make definitive financial or business decisions based solely on preliminary interpretations. Emphasize that AI suggestions are for assistance and require human oversight and validation.", + aiProhibitions: "Do not perform actual data analysis on user-provided raw data if not explicitly designed and secured for it. Do not make definitive financial or business decisions based solely on preliminary interpretations. Emphasize that AI suggestions are for assistance and require human oversight and validation.", useCoT: true, - cotPhrase: "Let's consider the data and the analytical steps required.", + cotPhrase: "Let's approach this systematically. First, define the question. Second, consider the data available. Third, outline potential methods...", selfCritique: true, + preAnalysisInstructions: "Before suggesting an analytical approach, list the key variables involved and the primary question being addressed." }, socraticTutor: { aiRole: "You are a patient and insightful Socratic Tutor.", - aiGoal: - "Your primary goal is to guide users to deeper understanding and critical thinking by asking probing questions, rather than providing direct answers. Help users explore concepts, identify assumptions, and develop their own conclusions.", + aiPersonaDetails: "You are curious, encouraging, and believe in guiding learners to their own insights.", + aiGoal: "Your primary goal is to guide users to deeper understanding and critical thinking by asking probing questions, rather than providing direct answers. Help users explore concepts, identify assumptions, and develop their own conclusions. Your ultimate aim is to foster independent thinking and a robust understanding, not just to transmit facts.", aiAudience: "Students, learners, or anyone wishing to explore a topic in depth.", - aiTasks: - "- Respond to user statements or questions with further questions that encourage reflection.\n- Help users break down complex problems into smaller, more manageable parts.\n- Challenge assumptions respectfully.\n- Guide users to identify inconsistencies in their reasoning.\n- Encourage users to consider alternative perspectives.\n- Summarize and reflect back user's key points to ensure understanding.", + aiTasks: "- Respond to user statements or questions with further questions that encourage reflection.\n- Help users break down complex problems into smaller, more manageable parts.\n- Challenge assumptions respectfully.\n- Guide users to identify inconsistencies in their reasoning.\n- Encourage users to consider alternative perspectives.\n- Summarize and reflect back user's key points to ensure understanding.", aiTone: "Encouraging", - aiCommunicationStyle: - "Primarily use questions. When providing information, frame it tentatively or as something to consider. Be patient and allow the user time to think. Avoid judgmental language.", - emphasizeAccuracy: true, + aiCommunicationStyle: "Primarily use questions. When providing information, frame it tentatively or as something to consider. Be patient and allow the user time to think. Avoid judgmental language. If the user is stuck, offer a small hint or a simpler related question before resorting to more direct explanation. Periodically summarize what has been discussed to ensure alignment.", + emphasizeAccuracy: true, // Accuracy in guiding the thought process aiDepthDetail: "Adjust questioning depth based on user's responses and engagement.", - aiProhibitions: - "Do not give direct answers unless specifically asked after multiple attempts at Socratic guidance, and even then, try to lead them. Do not frustrate the user with excessive or unhelpful questioning. Do not express personal opinions.", + aiProhibitions: "Do not give direct answers unless specifically asked after multiple attempts at Socratic guidance, and even then, try to lead them. Do not frustrate the user with excessive or unhelpful questioning. Do not express personal opinions.", + preAnalysisStep: true, + preAnalysisInstructions: "When the user presents a topic or question, briefly consider the core assumptions or concepts you want to help them explore through questioning." + }, + customerSupportAgent: { + aiRole: "You are a friendly, patient, and highly effective Customer Support Agent.", + aiPersonaDetails: "You genuinely want to help people solve their problems and leave them feeling positive about their interaction.", + aiGoal: "Your primary goal is to resolve customer inquiries and issues efficiently and empathetically, ensuring customer satisfaction. You need to understand the customer's problem, provide accurate information, guide them through solutions, and escalate issues appropriately if they cannot be resolved at your level.", + aiAudience: "Customers who may be frustrated, confused, or seeking help with a product/service.", + aiTasks: "- Actively listen to and acknowledge the customer's issue.\n- Ask clarifying questions to fully understand the problem.\n- Provide clear, step-by-step instructions for troubleshooting or solutions.\n- Access and reference a knowledge base (simulated or real, specified in aiKnowledge) for accurate information.\n- Identify when an issue requires escalation to a supervisor or specialized team.\n- Document interactions and solutions clearly (if applicable).\n- Maintain a positive and helpful demeanor even with difficult customers.", + aiTone: "Empathetic", + aiCommunicationStyle: "Use clear, simple language. Avoid technical jargon unless the customer uses it first. Show empathy and understanding (e.g., 'I understand this must be frustrating for you.'). Summarize the resolution to ensure clarity. Always thank the customer.", + emphasizeAccuracy: true, + aiKnowledge: "Assume access to a comprehensive knowledge base about [Specify Product/Service Area, e.g., 'our company's XYZ software suite'].", + aiOutputFormat: "Structure responses for easy readability. Use short paragraphs and bullet points for steps. Clearly state any actions the customer needs to take or what you will do next.", + useHeadingsLists: true, + aiProhibitions: "Do not make promises you cannot keep. Do not argue with the customer. Do not share confidential company information not meant for public disclosure. Do not provide personal opinions.", + useCoT: true, + cotPhrase: "Let me think through the best way to help with this. First, I need to understand the exact issue by asking clarifying questions. Then, I'll check our knowledge base for standard solutions. Finally, I'll propose the clearest steps for resolution.", + selfCritique: true, + }, + researchSynthesizer: { + aiRole: "You are a meticulous Research Synthesizer, adept at compiling and summarizing information from multiple sources.", + aiPersonaDetails: "You are objective, analytical, and excel at identifying connections and discrepancies in textual data.", + aiGoal: "Your primary goal is to process provided texts or research findings, identify key themes, synthesize information, and present a concise, coherent summary or analysis. You should highlight agreements, disagreements, and gaps in the provided information.", + aiAudience: "Researchers, students, analysts, or anyone needing to understand complex information from various inputs.", + aiTasks: "- Identify the main arguments and evidence in each provided source text.\n- Compare and contrast information across different source texts.\n- Group related findings or themes from the input.\n- Summarize the collective understanding of a topic based SOLELY on the provided inputs.\n- Point out inconsistencies or areas where more research might be needed (based ONLY on the provided texts).\n- If requested, generate an annotated bibliography or list of key takeaways with source attribution (from provided information).", + aiTone: "Formal", + aiCommunicationStyle: "Be objective, analytical, and precise. Clearly attribute information to its source if multiple sources are provided within the prompt (e.g., 'Source A states..., while Source B suggests...'). Use neutral language.", + emphasizeAccuracy: true, + aiDepthDetail: "Provide a summary that captures the essence and critical details from the input texts without being overly verbose. The level of detail should be appropriate for an executive summary unless otherwise specified.", + aiOutputFormat: "Organize the synthesis logically, perhaps by theme or by research question. Use clear headings and bullet points. If comparing sources, a table format (described in text) might be appropriate for some aspects.", + useHeadingsLists: true, + aiProhibitions: "Do not introduce external information not present in the provided source texts. Do not express personal opinions or biases. Do not plagiarize; synthesize in your own words while accurately representing the input.", + useCoT: true, + cotPhrase: "To synthesize this information, I will first extract key points from each source, then identify common themes and differences, and finally construct a consolidated overview based strictly on the provided material.", + preAnalysisStep: true, + preAnalysisInstructions: "Before synthesizing, list the primary documents/sources provided and state the main question or topic the synthesis should address.", + selfCritique: true, + }, + brainstormingFacilitator: { + aiRole: "You are an energetic and innovative Brainstorming Facilitator.", + aiPersonaDetails: "You are highly creative, positive, and skilled at sparking divergent thinking.", + aiGoal: "Your primary goal is to help users generate a wide range of creative ideas, explore different perspectives, challenge assumptions, and build upon initial thoughts to develop novel solutions or concepts.", + aiAudience: "Individuals or teams looking for creative input, problem-solving ideas, or new perspectives.", + aiTasks: "- Generate diverse ideas related to a user's topic or problem.\n- Ask provocative or 'what if' questions to stimulate new thinking.\n- Suggest unconventional approaches or connections (e.g., SCAMPER technique, random word association).\n- Help build upon and expand user-generated ideas (e.g., using 'Yes, and...' logic).\n- Introduce constraints or 'challenge cards' (e.g., 'How would you solve this with only $10?' or 'What if it had to be blue?') to spark different kinds of creativity.\n- Organize or categorize brainstormed ideas if requested, AFTER the primary generation phase.\n- Maintain a positive, non-judgmental, and encouraging atmosphere throughout the idea generation phase.", + aiTone: "Encouraging", + aiCommunicationStyle: "Be playful, curious, and open-minded. Use enthusiastic language. Offer many alternatives. Avoid criticizing initial ideas; focus on generation first, evaluation later (if requested by the user for a separate step).", + emphasizeAccuracy: false, // Focus is on idea quantity and novelty + aiOutputFormat: "Often best as lists of ideas, questions, or mind-map-like structures (described in text). Use varied phrasing. Offer a mix of concise and slightly more elaborated ideas. Number ideas for easy reference.", + aiProhibitions: "Do not shut down ideas prematurely during the generation phase. Do not get stuck on a single line of thought for too long unless the user wants to deep-dive. Avoid negativity or critiques during brainstorming.", + preAnalysisStep: true, + preAnalysisInstructions: "To kick off the brainstorm, ask the user for the core problem/topic and if there are any initial thoughts or desired outcomes. Then, propose 2-3 different brainstorming techniques we could start with.", }, }; @@ -1039,15 +949,15 @@ What's the capital of France? const element = DOMElements[elementId]; if (!element) return; - if (value === undefined) { + if (value === undefined || value === null) { // Check for null too if (element.type === "checkbox") element.checked = false; else if (element.tagName === "SELECT") element.value = element.options[0] ? element.options[0].value : ""; else element.value = ""; } else { if (element.type === "checkbox") element.checked = Boolean(value); - else if (element.tagName === "SELECT") element.value = value; - else element.value = value; + else element.value = value; // Works for select and text inputs/textareas } + // Dispatch events to ensure any listeners (like advisor) are triggered element.dispatchEvent(new Event("input", { bubbles: true })); element.dispatchEvent(new Event("change", { bubbles: true })); } @@ -1061,16 +971,22 @@ What's the capital of France? function resetFormAndEnableAllSections() { ALL_FIELD_IDS.forEach((id) => setFieldValue(id, undefined)); document.querySelectorAll(".section-toggle").forEach((toggle) => { - toggle.checked = true; + toggle.checked = true; // Default to enabled const sectionContent = toggle.closest(".accordion-item").querySelector(".accordion-collapse"); const inputs = sectionContent.querySelectorAll( "input:not(.section-toggle):not([type=file]), textarea, select" ); inputs.forEach((input) => (input.disabled = false)); + // Ensure accordion sections visually reflect checkbox state + const collapseElement = document.getElementById(sectionContent.id); + const bsCollapse = bootstrap.Collapse.getInstance(collapseElement) || new bootstrap.Collapse(collapseElement, {toggle: false}); + bsCollapse.show(); // Show all sections on reset + if (toggle.id === "toggleExamples" && DOMElements.addExampleButton) DOMElements.addExampleButton.disabled = false; }); if (DOMElements.examplesContainer) DOMElements.examplesContainer.innerHTML = ""; + if (DOMElements.promptTemplate) DOMElements.promptTemplate.value = ""; // Reset dropdown updateAdvisor(); } @@ -1084,45 +1000,53 @@ What's the capital of France? const template = templates[templateName]; if (!template) return; - ALL_FIELD_IDS.forEach((id) => setFieldValue(id, undefined)); - if (DOMElements.examplesContainer) DOMElements.examplesContainer.innerHTML = ""; + // First, reset all fields to default (unchecked/empty) and enable all sections + resetFormAndEnableAllSections(); + // Then, apply template values for (const keyInTemplate in template) { if (DOMElements[keyInTemplate]) { setFieldValue(keyInTemplate, template[keyInTemplate]); } } + // Finally, disable sections that have no content from the template document.querySelectorAll(".section-toggle").forEach((toggle) => { const sectionContent = toggle.closest(".accordion-item").querySelector(".accordion-collapse"); let sectionHasContentFromTemplate = false; - sectionContent - .querySelectorAll("input:not(.section-toggle):not([type=file]), textarea, select") - .forEach((inputEl) => { + + sectionContent.querySelectorAll("input:not(.section-toggle):not([type=file]), textarea, select").forEach((inputEl) => { if (template.hasOwnProperty(inputEl.id)) { - const val = template[inputEl.id]; - if (inputEl.type === "checkbox") { - if (val === true) sectionHasContentFromTemplate = true; - } else if (val !== undefined && val !== null && val !== "") { - sectionHasContentFromTemplate = true; - } + const val = template[inputEl.id]; + if (inputEl.type === "checkbox") { + if (val === true) sectionHasContentFromTemplate = true; + } else if (val !== undefined && val !== null && val !== "") { + sectionHasContentFromTemplate = true; + } } - }); + }); + + // Special handling for examples if template suggests them but doesn't provide any + if (toggle.id === "toggleExamples" && template.suggestFewShot === true) { + sectionHasContentFromTemplate = true; + } - toggle.checked = sectionHasContentFromTemplate; - const inputsToToggle = sectionContent.querySelectorAll( - "input:not(.section-toggle):not([type=file]), textarea, select" - ); - inputsToToggle.forEach((input) => (input.disabled = !toggle.checked)); + toggle.checked = sectionHasContentFromTemplate; + const inputsToToggle = sectionContent.querySelectorAll("input:not(.section-toggle):not([type=file]), textarea, select"); + inputsToToggle.forEach(input => input.disabled = !toggle.checked); + if (toggle.id === "toggleExamples" && DOMElements.addExampleButton) { - DOMElements.addExampleButton.disabled = !toggle.checked; - if (template.suggestFewShot && !toggle.checked) { - // Example: template might have a 'suggestFewShot: true' flag - toggle.checked = true; - inputsToToggle.forEach((input) => (input.disabled = false)); - DOMElements.addExampleButton.disabled = false; - } + DOMElements.addExampleButton.disabled = !toggle.checked; + } + + // Ensure accordion visibility matches checkbox + const collapseElement = document.getElementById(sectionContent.id); + const bsCollapse = bootstrap.Collapse.getInstance(collapseElement) || new bootstrap.Collapse(collapseElement, {toggle: false}); + if (toggle.checked) { + bsCollapse.show(); + } else { + bsCollapse.hide(); } }); updateAdvisor(); @@ -1130,15 +1054,20 @@ What's the capital of France? function updateAdvisor() { const messages = []; - if (!DOMElements.advisorPanel || !DOMElements.advisorMessages) return; // In case elements aren't found + if (!DOMElements.advisorPanel || !DOMElements.advisorMessages) return; DOMElements.advisorPanel.classList.add("d-none"); DOMElements.advisorMessages.innerHTML = ""; - if (!getFieldValue("aiRole") && !getFieldValue("aiGoal")) - messages.push("<li>Define the AI's <strong>Role</strong> and <strong>Goal</strong>.</li>"); - if (!getFieldValue("aiTasks") && (getFieldValue("aiRole") || getFieldValue("aiGoal"))) - messages.push("<li>List specific <strong>Key Tasks</strong>.</li>"); + if (getFieldValue("toggleCoreIdentity") && !getFieldValue("aiRole") && !getFieldValue("aiGoal")) + messages.push("<li>Define the AI's <strong>Role</strong> and <strong>Goal</strong> for a strong foundation.</li>"); + if (getFieldValue("toggleKeyTasks") && !getFieldValue("aiTasks") && (getFieldValue("aiRole") || getFieldValue("aiGoal"))) + messages.push("<li>List specific <strong>Key Tasks</strong> the AI should perform.</li>"); + if (getFieldValue("toggleExamples") && DOMElements.examplesContainer && DOMElements.examplesContainer.children.length === 0) + messages.push("<li>Consider adding 1-3 <strong>Few-Shot Examples</strong> for complex tasks or specific output styles.</li>"); + if (getFieldValue("toggleConstraints") && !getFieldValue("aiProhibitions")) + messages.push("<li>Clearly state any <strong>Absolute Prohibitions</strong> to ensure safe and expected behavior.</li>"); + if (messages.length > 0) { DOMElements.advisorMessages.innerHTML = messages.join(""); @@ -1162,28 +1091,21 @@ What's the capital of France? .forEach((el) => (el.disabled = isDisabled)); } } - setInputsDisabledState(!toggle.checked); + setInputsDisabledState(!toggle.checked); // Initial state based on checkbox toggle.addEventListener("change", function () { setInputsDisabledState(!this.checked); + // If checkbox enables a section, ensure it's shown + const collapseElement = document.getElementById(contentArea.id); + const bsCollapse = bootstrap.Collapse.getInstance(collapseElement) || new bootstrap.Collapse(collapseElement, {toggle: false}); + if (this.checked) { + bsCollapse.show(); + } else { + // Optional: you might want to hide it if unchecked, or let user control via accordion button + // bsCollapse.hide(); + } updateAdvisor(); }); - - if (accordionButton) { - accordionButton.addEventListener("click", function () { - // Bootstrap's collapse event might be more reliable, but setTimeout is simpler here - setTimeout(() => { - const isCollapsed = !contentArea.classList.contains('show'); - if (isCollapsed && toggle.checked) { // If it was open due to checkbox but button collapses it - // This logic might need refinement if accordion state and checkbox state desync - } else if (!isCollapsed && !toggle.checked) { // If checkbox is off but accordion opens - // This scenario might need attention too. - } - // For now, primarily driven by checkbox - setInputsDisabledState(!toggle.checked); - }, 350); // Allow time for collapse animation - }); - } }); function addExamplePair(initialInput = "", initialOutput = "") { @@ -1193,7 +1115,7 @@ What's the capital of France? } const exampleId = Date.now(); const exampleDiv = document.createElement("div"); - exampleDiv.classList.add("example-pair", "mb-3", "p-2", "border", "rounded", "bg-light"); // Added bg-light for slight differentiation + exampleDiv.classList.add("example-pair", "mb-3", "p-2", "border", "rounded", "bg-light"); exampleDiv.innerHTML = `<h6 class="small text-muted">Example Pair</h6><textarea class="form-control form-control-sm example-input" rows="2" placeholder="User: ...">${initialInput}</textarea><textarea class="form-control form-control-sm example-output mt-1" rows="3" placeholder="AI: ...">${initialOutput}</textarea><button type="button" class="btn btn-sm btn-outline-danger mt-2 remove-example" data-example-id="${exampleId}"><i class="bi bi-trash"></i> Remove</button>`; DOMElements.examplesContainer.appendChild(exampleDiv); exampleDiv.querySelector(".remove-example").addEventListener("click", function () { @@ -1205,6 +1127,17 @@ What's the capital of France? if (DOMElements.generatePromptButton) DOMElements.generatePromptButton.addEventListener("click", function () { let prompt = ""; + const structureMethod = getFieldValue("promptStructureMethod") || 'markdown'; + + function addSection(title, xmlTag, content) { + if (!content || content.trim() === "") return; + if (structureMethod === 'xml') { + prompt += `<${xmlTag}>\n${content.trim()}\n</${xmlTag}>\n\n`; + } else { + prompt += `## ${title}\n${content.trim()}\n\n`; + } + } + document.querySelectorAll(".section-toggle").forEach((toggle) => { if (!toggle.checked) return; @@ -1213,72 +1146,57 @@ What's the capital of France? if (sectionId === "coreidentity") { if (getFieldValue("aiRole")) sectionContent += `You are: ${getFieldValue("aiRole")}\n`; + if (getFieldValue("aiPersonaDetails")) sectionContent += `Persona Details: ${getFieldValue("aiPersonaDetails")}\n`; if (getFieldValue("aiGoal")) sectionContent += `Your primary goal is: ${getFieldValue("aiGoal")}\n`; - if (getFieldValue("aiAudience")) - sectionContent += `Tailor your responses for: ${getFieldValue("aiAudience")}.\n`; - if (sectionContent) prompt += `## Core Identity & Goal\n${sectionContent.trim()}\n\n`; + if (getFieldValue("aiAudience")) sectionContent += `Tailor your responses for: ${getFieldValue("aiAudience")}.\n`; + addSection("Core Identity & Goal", "core_identity_and_goal", sectionContent); } else if (sectionId === "keytasks" && getFieldValue("aiTasks")) { - prompt += `## Key Tasks & Functions\n${getFieldValue("aiTasks").trim()}\n\n`; + addSection("Key Tasks & Functions", "key_tasks_and_functions", getFieldValue("aiTasks")); } else if (sectionId === "interactionstyle") { - if (getFieldValue("aiTone") !== "Neutral") // Only add if not default neutral - sectionContent += `Your tone should be: ${getFieldValue("aiTone")}.\n`; + if (getFieldValue("aiTone") !== "Neutral") sectionContent += `Your tone should be: ${getFieldValue("aiTone")}.\n`; if (getFieldValue("aiCommunicationStyle")) sectionContent += `${getFieldValue("aiCommunicationStyle")}\n`; - if (sectionContent) prompt += `## Interaction Style & Tone\n${sectionContent.trim()}\n\n`; + addSection("Interaction Style & Tone", "interaction_style_and_tone", sectionContent); } else if (sectionId === "contentstandards") { - if (getFieldValue("emphasizeAccuracy")) - sectionContent += "You must prioritize accuracy and rely on evidence-based reasoning.\n"; - if (getFieldValue("aiKnowledge")) - sectionContent += `Your knowledge base: ${getFieldValue("aiKnowledge")}.\n`; - if (getFieldValue("aiDepthDetail")) - sectionContent += `Regarding depth and detail: ${getFieldValue("aiDepthDetail")}.\n`; - if (sectionContent) prompt += `## Content Standards & Expertise\n${sectionContent.trim()}\n\n`; - } else if (sectionId === "outputformat") { - if (getFieldValue("aiOutputFormat")) - sectionContent += `Output formatting instructions:\n${getFieldValue("aiOutputFormat")}\n`; - if (getFieldValue("aiLengthConstraints")) - sectionContent += `Adhere to these length constraints: ${getFieldValue("aiLengthConstraints")}.\n`; - if (getFieldValue("useHeadingsLists")) sectionContent += "Use headings, lists, etc., for clarity.\n"; - if (sectionContent) prompt += `## Output Requirements & Formatting\n${sectionContent.trim()}\n\n`; + if (getFieldValue("emphasizeAccuracy")) sectionContent += "You must prioritize accuracy and rely on evidence-based reasoning.\n"; + if (getFieldValue("aiKnowledge")) sectionContent += `Your knowledge base: ${getFieldValue("aiKnowledge")}.\n`; + if (getFieldValue("aiDepthDetail")) sectionContent += `Regarding depth and detail: ${getFieldValue("aiDepthDetail")}.\n`; + addSection("Content Standards & Expertise", "content_standards_and_expertise", sectionContent); + } else if (sectionId === "outputformat") { // Note: promptStructureMethod is for the *overall* prompt, not the AI's response format here. + if (getFieldValue("aiOutputFormat")) sectionContent += `AI Response Formatting Instructions:\n${getFieldValue("aiOutputFormat")}\n`; + if (getFieldValue("aiLengthConstraints")) sectionContent += `Adhere to these AI response length constraints: ${getFieldValue("aiLengthConstraints")}.\n`; + if (getFieldValue("useHeadingsLists")) sectionContent += "In your responses, use headings, lists, etc., for clarity.\n"; + addSection("AI Response Output Requirements & Formatting", "ai_response_output_formatting", sectionContent); } else if (sectionId === "constraints") { - if (getFieldValue("aiProhibitions")) - sectionContent += `Absolute Prohibitions (You MUST NOT):\n${getFieldValue("aiProhibitions")}\n`; - if (getFieldValue("aiAvoidances")) - sectionContent += `Scope Limitations / Topics to Avoid:\n${getFieldValue("aiAvoidances")}\n`; + if (getFieldValue("aiProhibitions")) sectionContent += `Absolute Prohibitions (You MUST NOT):\n${getFieldValue("aiProhibitions")}\n`; + if (getFieldValue("aiAvoidances")) sectionContent += `Scope Limitations / Topics to Avoid:\n${getFieldValue("aiAvoidances")}\n`; if (getFieldValue("avoidBias")) sectionContent += "Strive for neutrality and avoid societal biases.\n"; - if (sectionContent) prompt += `## Constraints & Safeguards\n${sectionContent.trim()}\n\n`; + addSection("Constraints & Safeguards", "constraints_and_safeguards", sectionContent); } else if (sectionId === "reasoning") { - if (getFieldValue("useCoT")) - sectionContent += `Employ step-by-step reasoning. ${ - getFieldValue("cotPhrase") ? getFieldValue("cotPhrase").trim() + "\n" : "\n" - }`; - if (getFieldValue("useScratchpad")) - sectionContent += `Use an internal scratchpad. ${ - getFieldValue("scratchpadTags") - ? "Enclose thoughts in " + getFieldValue("scratchpadTags").trim() + ".\n" - : "\n" - }`; - if (getFieldValue("selfCritique")) - sectionContent += "Perform self-critique and refinement before finalizing.\n"; - if (getFieldValue("consultKnowledge")) - sectionContent += `Consult external knowledge if necessary. ${ - getFieldValue("knowledgeSourceHint") ? getFieldValue("knowledgeSourceHint").trim() + "\n" : "\n" - }`; - if (sectionContent) prompt += `## Reasoning & Process\n${sectionContent.trim()}\n\n`; + if (getFieldValue("useCoT")) sectionContent += `Employ step-by-step reasoning. ${getFieldValue("cotPhrase") ? getFieldValue("cotPhrase").trim() + "\n" : "Let's think step by step.\n"}`; + if (getFieldValue("useScratchpad")) sectionContent += `Use an internal scratchpad/thinking process. ${getFieldValue("scratchpadTags") ? "Enclose thoughts in " + getFieldValue("scratchpadTags").trim() + " and do not include these in the final response unless asked.\n" : "You can use a scratchpad area for your thoughts.\n"}`; + if (getFieldValue("preAnalysisStep")) sectionContent += `Perform a pre-analysis/planning step before answering. ${getFieldValue("preAnalysisInstructions") ? getFieldValue("preAnalysisInstructions").trim() + "\n" : "\n"}`; + if (getFieldValue("selfCritique")) sectionContent += "Perform self-critique and refinement before finalizing your response.\n"; + if (getFieldValue("consultKnowledge")) sectionContent += `Consult external knowledge/tools if necessary and capable. ${getFieldValue("knowledgeSourceHint") ? getFieldValue("knowledgeSourceHint").trim() + "\n" : "\n"}`; + if (getFieldValue("allowToolUse")) sectionContent += `You may use specified external tools if you are capable. ${getFieldValue("toolUseExamples") ? "Examples of allowed tools: " + getFieldValue("toolUseExamples").trim() + "\n" : "\n"}`; + addSection("Reasoning & Process", "reasoning_and_process", sectionContent); } else if (sectionId === "examples") { const examplePairs = DOMElements.examplesContainer.querySelectorAll(".example-pair"); if (examplePairs.length > 0) { - let examplesText = "Here are some examples of ideal interactions:\n\n"; + let examplesText = ""; + if (structureMethod !== 'xml') examplesText += "Here are some examples of ideal interactions:\n\n"; // XML wrapper handles this examplePairs.forEach((pair, index) => { const userInput = pair.querySelector(".example-input").value.trim(); const aiOutput = pair.querySelector(".example-output").value.trim(); if (userInput && aiOutput) { - examplesText += `--- Example ${ - index + 1 - } ---\nUser: ${userInput}\nAI: ${aiOutput}\n--- End Example ${index + 1} ---\n\n`; + if (structureMethod === 'xml') { + examplesText += `<example_pair id="${index + 1}">\n <user_input><![CDATA[${userInput}]]></user_input>\n <ai_response><![CDATA[${aiOutput}]]></ai_response>\n</example_pair>\n`; + } else { + examplesText += `--- Example ${index + 1} ---\nUser: ${userInput}\nAI: ${aiOutput}\n--- End Example ${index + 1} ---\n\n`; + } } }); - if (examplesText.length > "Here are some examples of ideal interactions:\n\n".length) { // Check if any actual examples were added - prompt += `## Few-Shot Examples\n${examplesText.trim()}\n\n`; + if (examplesText.trim() !== "") { + addSection("Few-Shot Examples", "few_shot_examples", examplesText); } } } @@ -1305,7 +1223,6 @@ What's the capital of France? }) .catch((err) => console.error("Failed to copy: ", err)); } else { - // Provide feedback if nothing to copy const originalText = DOMElements.copyPromptButton.innerHTML; DOMElements.copyPromptButton.innerHTML = '<i class="bi bi-x-lg"></i> Nothing!'; setTimeout(() => { @@ -1348,40 +1265,38 @@ What's the capital of France? reader.onload = function (e) { try { const config = JSON.parse(e.target.result); - resetFormAndEnableAllSections(); // Clear form before loading + resetFormAndEnableAllSections(); ALL_FIELD_IDS.forEach((id) => { if (config.hasOwnProperty(id)) setFieldValue(id, config[id]); }); document.querySelectorAll(".section-toggle").forEach((toggle) => { if (config.hasOwnProperty(toggle.id)) toggle.checked = config[toggle.id]; - const contentArea = toggle.closest(".accordion-item").querySelector(".accordion-collapse"); - const inputs = contentArea.querySelectorAll( + const sectionContent = toggle.closest(".accordion-item").querySelector(".accordion-collapse"); + const inputs = sectionContent.querySelectorAll( "input:not(.section-toggle):not([type=file]), textarea, select" ); inputs.forEach((input) => (input.disabled = !toggle.checked)); if (toggle.id === "toggleExamples" && DOMElements.addExampleButton) DOMElements.addExampleButton.disabled = !toggle.checked; + + // Ensure accordion sections reflect checkbox state visually + const collapseElement = document.getElementById(sectionContent.id); + const bsCollapse = bootstrap.Collapse.getInstance(collapseElement) || new bootstrap.Collapse(collapseElement, {toggle: false}); + if (toggle.checked) { + bsCollapse.show(); + } else { + bsCollapse.hide(); + } }); - if (DOMElements.examplesContainer) DOMElements.examplesContainer.innerHTML = ""; // Clear again to be sure + if (DOMElements.examplesContainer) DOMElements.examplesContainer.innerHTML = ""; if (config.examples && Array.isArray(config.examples)) { config.examples.forEach((ex) => addExamplePair(ex.input, ex.output)); } - // Ensure accordion sections reflect checkbox state visually if they were closed - document.querySelectorAll(".section-toggle").forEach(toggle => { - const collapseElement = document.getElementById(toggle.closest('.accordion-item').querySelector('.accordion-collapse').id); - const bsCollapse = bootstrap.Collapse.getInstance(collapseElement) || new bootstrap.Collapse(collapseElement, {toggle: false}); - if (toggle.checked) { - bsCollapse.show(); - } else { - bsCollapse.hide(); - } - }); - - + updateAdvisor(); - DOMElements.promptTemplate.value = ""; // Reset template dropdown + if (DOMElements.promptTemplate) DOMElements.promptTemplate.value = ""; alert("Configuration loaded successfully!"); } catch (err) { console.error("Error parsing/loading config:", err); @@ -1389,11 +1304,9 @@ What's the capital of France? } }; reader.readAsText(file); - DOMElements.importConfigFile.value = ""; // Reset file input + DOMElements.importConfigFile.value = ""; } }); - - // Initial call to set up advisor if needed updateAdvisor(); </script> </body>