Update prompt-builder.html
· 1 year ago
6a9429693ab84c9b131072f8e0fa0ae95dc4a0c4
Parent:
02f5f4510
1 file changed +115 −296
- prompt-builder.html +115 −296
Diff
--- a/prompt-builder.html +++ b/prompt-builder.html @@ -1,226 +1,3 @@ -You're right to point that out! That "flipping" behavior of accordion sections when loading a template is a common UI glitch that can happen if the show and hide methods of the Bootstrap collapse component are called in rapid or conflicting succession. - -Looking at the original JavaScript you provided for the Prompt Builder: - -The Cause of the "Flip": - -When loadTemplate(templateName) is called: - -It first calls resetFormAndEnableAllSections(). - -Inside resetFormAndEnableAllSections(), there's a loop that iterates through all .section-toggle checkboxes. For each, it sets toggle.checked = true and then unconditionally calls bsCollapse.show() on its corresponding accordion panel. So, at this point, all sections are told to expand. - -Immediately after resetFormAndEnableAllSections() finishes, the loadTemplate() function continues. - -It then applies the template values to the input fields. - -Crucially, it then loops through the .section-toggle checkboxes again. This time, it determines if a section sectionHasContentFromTemplate. - -If sectionHasContentFromTemplate is false, toggle.checked is set to false, and bsCollapse.hide() is called for that section. - -If sectionHasContentFromTemplate is true, toggle.checked is set to true, and bsCollapse.show() is called (this might be redundant if resetFormAndEnableAllSections just showed it, but it's the hide() call that matters more for the flip). - -The "flip" happens because a section might be told to show() by resetFormAndEnableAllSections(), and then milliseconds later, if the template doesn't have content for it, loadTemplate() tells it to hide(). This rapid show-then-hide is the visual flicker or flip. - -The Fix: - -We need to ensure that the decision to show or hide an accordion section is made and executed only once after its final state (based on template content) is determined. - -Here's how we can modify the JavaScript functions: - -Modify resetFormAndEnableAllSections(): It should reset the form fields and the checked state of toggles but not directly manipulate the accordion's visibility (i.e., don't call bsCollapse.show() in it). The calling function (loadTemplate or importConfig) will be responsible for the final visibility. - -Adjust loadTemplate() (and importConfig similarly): - -Call the modified resetFormAndEnableAllSections(). - -Apply template/config values. - -Loop through sections: determine the final toggle.checked state based on content, update input disabled status, and then call bsCollapse.show() or bsCollapse.hide() accordingly. - -The special case for templateName === "reset" (i.e., "Start Fresh / Clear Form") should explicitly show all sections after resetting. - -Here are the relevant patched JavaScript functions from your original Prompt Builder: - -// (...) Other parts of your script - - function resetFormAndEnableAllSections() { - ALL_FIELD_IDS.forEach((id) => setFieldValue(id, undefined)); - document.querySelectorAll(".section-toggle").forEach((toggle) => { - toggle.checked = true; // Default to enabled for logic, but don't manage visibility here - 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)); // Enable inputs by default after 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 will be called by the parent function (loadTemplate or importConfig) - } - - function loadTemplate(templateName) { - if (templateName === "" || templateName === "reset") { - // For a full "reset" button click (e.g. "Start Fresh"), we truly reset and show all. - resetFormAndEnableAllSections(); // This sets toggles to checked and enables inputs - document.querySelectorAll(".section-toggle").forEach((toggle) => { - // toggle.checked is already true from the call above. - const sectionContent = toggle.closest(".accordion-item").querySelector(".accordion-collapse"); - const collapseElement = document.getElementById(sectionContent.id); - const bsCollapse = bootstrap.Collapse.getInstance(collapseElement) || new bootstrap.Collapse(collapseElement, {toggle: false}); - bsCollapse.show(); // Explicitly show all accordion sections for a full reset - }); - if (templateName === "reset" && DOMElements.promptTemplate) DOMElements.promptTemplate.value = ""; - updateAdvisor(); // Call advisor after the state is fully set - return; - } - - const template = templates[templateName]; - if (!template) return; - - // 1. Reset form fields and toggle states (toggles will be checked true by default) - resetFormAndEnableAllSections(); - - // 2. Apply template values to form fields - for (const keyInTemplate in template) { - if (DOMElements[keyInTemplate]) { - setFieldValue(keyInTemplate, template[keyInTemplate]); - } - } - - // 3. Determine final state of toggles and accordion visibility based on template content - document.querySelectorAll(".section-toggle").forEach((toggle) => { - const sectionContent = toggle.closest(".accordion-item").querySelector(".accordion-collapse"); - let sectionHasContentFromTemplate = false; - - // Check if any input in this section has content from the template - 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; - } - } - }); - - // Special handling for examples if template suggests them - if (toggle.id === "toggleExamples" && template.suggestFewShot === true) { - sectionHasContentFromTemplate = true; - } - - // Set the final .checked state for the toggle based on template content - toggle.checked = sectionHasContentFromTemplate; - - // Disable/enable inputs within the section - 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; - } - - // NOW, set accordion visibility based on the final toggle.checked state - 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(); // Call advisor after all states are final - } - - // ... (other functions like addExamplePair, generatePromptButton, etc.) - - // Apply similar fix to importConfig function - if (DOMElements.importConfigFile) - DOMElements.importConfigFile.addEventListener("change", function (event) { - const file = event.target.files[0]; - if (file) { - const reader = new FileReader(); - reader.onload = function (e) { - try { - const config = JSON.parse(e.target.result); - - // 1. Reset form fields and toggle states (toggles will be checked true by default) - resetFormAndEnableAllSections(); - - // 2. Apply config values to form fields - ALL_FIELD_IDS.forEach((id) => { - if (config.hasOwnProperty(id)) setFieldValue(id, config[id]); - }); - - // 3. Determine final state of toggles and accordion visibility based on config - document.querySelectorAll(".section-toggle").forEach((toggle) => { - // Set the .checked state from config, or it remains true from reset - if (config.hasOwnProperty(toggle.id)) { - toggle.checked = config[toggle.id]; - } - // else, it defaults to true from resetFormAndEnableAllSections if not in config. - // You might want to default to false if not present: - // else { toggle.checked = false; } - - 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; - - // NOW, set accordion visibility based on the final toggle.checked state - 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 = ""; - if (config.examples && Array.isArray(config.examples)) { - config.examples.forEach((ex) => addExamplePair(ex.input, ex.output)); - } - - updateAdvisor(); // Call advisor after all states are final - if (DOMElements.promptTemplate) DOMElements.promptTemplate.value = ""; - alert("Configuration loaded successfully!"); - } catch (err) { - console.error("Error parsing/loading config:", err); - alert("Error loading configuration file. Make sure it is a valid JSON export from this tool."); - } - }; - reader.readAsText(file); - DOMElements.importConfigFile.value = ""; - } - }); - - // (...) The rest of your script - - -Summary of Changes: - -resetFormAndEnableAllSections: No longer calls bsCollapse.show(). It focuses purely on resetting input values and ensuring toggle checkboxes are checked (and corresponding inputs enabled) by default. - -loadTemplate: - -Handles the "reset" template option separately to explicitly show all sections. - -For other templates, it calls the modified resetFormAndEnableAllSections. - -After applying template data, it iterates through each section once to determine its final toggle.checked state and then calls bsCollapse.show() or bsCollapse.hide() accordingly. - -importConfig (event listener for file input): Similar logic applied as in loadTemplate to ensure accordion visibility is set once after config parsing. - -This approach should eliminate the rapid show/hide calls for the same element, thus fixing the "flipping" issue and providing a smoother UI experience when loading templates or configurations. - <!DOCTYPE html> <html lang="en"> <head> @@ -235,7 +12,7 @@ This approach should eliminate the rapid show/hide calls for the same element, t /> <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, meta prompting, prompt optimization, code reviewer, fitness coach, legal document writer" + 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, code reviewer, fitness coach, legal document writer, creative cheatsheet architect" /> <meta name="author" content="David Vekslers Cheatsheets" /> <link rel="canonical" href="http://cheatsheets.davidveksler.com/prompt-builder.html" /> @@ -243,8 +20,6 @@ This approach should eliminate the rapid show/hide calls for the same element, t <!-- Favicons --> <link rel="icon" href="data:image/svg+xml,<svg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 100 100%22><text y=%22.9em%22 font-size=%2290%22>💡</text></svg>"> <link rel="apple-touch-icon" href="data:image/svg+xml,<svg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 100 100%22><text y=%22.9em%22 font-size=%2290%22>💡</text></svg>"> - - <!-- Open Graph / Facebook Meta Tags --> <meta property="og:title" content="System Prompt Builder & Engineering Guide" /> @@ -286,7 +61,7 @@ This approach should eliminate the rapid show/hide calls for the same element, t cursor: pointer; } #generatedPromptContainer { - margin-top: 30px; /* Increased margin a bit */ + margin-top: 30px; position: relative; } #copyPromptButton { @@ -721,14 +496,6 @@ This approach should eliminate the rapid show/hide calls for the same element, t </div> </div> - <!-- Removed Generate Button - <div class="d-grid gap-2 my-4"> - <button type="button" class="btn btn-primary btn-lg" id="generatePromptButton"> - <i class="bi bi-magic"></i> Generate System Prompt - </button> - </div> - --> - <div id="generatedPromptContainer"> <h4>Generated System Prompt:</h4> <button id="copyPromptButton" class="btn btn-sm btn-outline-secondary" title="Copy to Clipboard"> @@ -926,10 +693,10 @@ AI: Roger started with 5 balls. He bought 2 cans, and each can has 3 balls. So, </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> @@ -972,7 +739,7 @@ AI: Roger started with 5 balls. He bought 2 cans, and each can has 3 balls. So, </div> <footer class="container text-center pb-3"> - <p class="mb-2">© 2025 David Veksler</p> + <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 @@ -1019,7 +786,6 @@ AI: Roger started with 5 balls. He bought 2 cans, and each can has 3 balls. So, toggleExamples: document.getElementById("toggleExamples"), examplesContainer: document.getElementById("examplesContainer"), addExampleButton: document.getElementById("addExampleButton"), - // generatePromptButton: document.getElementById("generatePromptButton"), // Removed generatedPromptOutput: document.getElementById("generatedPromptOutput"), copyPromptButton: document.getElementById("copyPromptButton"), advisorPanel: document.getElementById("advisorPanel"), @@ -1076,7 +842,7 @@ AI: Roger started with 5 balls. He bought 2 cans, and each can has 3 balls. So, 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, + allowToolUse: false, }, codeReviewer: { aiRole: "You are an expert AI Code Reviewer, proficient in common programming languages and software development best practices.", @@ -1097,7 +863,7 @@ AI: Roger started with 5 balls. He bought 2 cans, and each can has 3 balls. So, preAnalysisStep: true, preAnalysisInstructions: "Before providing a review, please specify the programming language if not obvious. I will list the key areas I will focus on for the review based on the provided code and any context. If context (e.g. purpose of the code) is missing, I will make reasonable assumptions and state them.", selfCritique: true, - allowToolUse: true, + allowToolUse: true, toolUseExamples: "You can conceptually simulate using tools like linters (e.g., ESLint for JS, Pylint for Python) or static analysis tools to inform your review and mention findings as if from such tools." }, creativeWriter: { @@ -1108,7 +874,7 @@ AI: Roger started with 5 balls. He bought 2 cans, and each can has 3 balls. So, 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: "Inspiring", 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, + emphasizeAccuracy: false, 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.", @@ -1140,7 +906,7 @@ AI: Roger started with 5 balls. He bought 2 cans, and each can has 3 balls. So, aiTasks: "- Suggest sample workout plans tailored to general goals (e.g., weight loss, muscle gain, general fitness, endurance) and common experience levels (beginner, intermediate).\n- Provide examples of healthy meal ideas or food choices based on general dietary patterns (e.g., balanced diet, high-protein focus, plant-based options).\n- Answer general questions about exercise principles, nutrition fundamentals, and healthy lifestyle habits.\n- Offer tips for motivation, consistency, and realistic goal setting.\n- Explain the general benefits of different types of exercise or categories of nutrients.\n- CRITICALLY IMPORTANT: Every response MUST begin or end with a prominent disclaimer stating you are an AI, not a medical/dietetic professional, and your advice is general, not a substitute for professional consultation.", aiTone: "Encouraging", aiCommunicationStyle: "Be positive, empathetic, and clear. Break down information into easily digestible points. Use motivational language. Always prioritize general safety guidelines and realistic expectations. Use cautious language when discussing potential outcomes.", - emphasizeAccuracy: true, + emphasizeAccuracy: true, aiKnowledge: "Knowledge of general exercise physiology, fundamental nutrition science, and common behavior change strategies related to health and wellness.", aiDepthDetail: "Provide actionable advice that is not overly complex. Focus on foundational principles and general recommendations.", aiOutputFormat: "Use clear language. Format workout plans or meal suggestions as lists or tables. Include the mandatory disclaimer prominently. For example:\n\n**IMPORTANT DISCLAIMER:** I am an AI assistant and not a certified medical professional, registered dietitian, or certified personal trainer. The information I provide is for general educational and informational purposes only, and does not constitute medical advice, dietary advice, or a personalized fitness plan. It is not a substitute for professional consultation, diagnosis, or treatment. Always seek the advice of your physician or other qualified health provider with any questions you may have regarding a medical condition, dietary changes, or before starting any new exercise program. Do not disregard professional medical advice or delay in seeking it because of something you have read or received from me.", @@ -1160,7 +926,7 @@ AI: Roger started with 5 balls. He bought 2 cans, and each can has 3 balls. So, aiTasks: "- Generate *sample template clauses* for contracts (e.g., general confidentiality, basic termination, example payment terms), clearly marked as templates.\n- Help outline common *template structures* for very simple documents (e.g., a basic Non-Disclosure Agreement outline, a simple letter of intent template structure), emphasizing these are general frameworks.\n- Fill in bracketed placeholders in a provided template based on user input (e.g., `[Your Company Name]`, `[Effective Date]`, `[Specific Detail Placeholder]`).\n- Explain the general purpose of common legal clauses in *very general, plain language*, avoiding legal interpretation.\n- CRITICALLY IMPORTANT: Every single response that contains any legal-esque text, clause, or document structure MUST begin AND end with a prominent, comprehensive disclaimer.", aiTone: "Formal", aiCommunicationStyle: "Use clear, unambiguous, and formal language. Be absolutely direct and repetitive about limitations. Structure document templates with clear headings and numerous placeholders like `[Consult_Attorney_For_This_Section]`, `[Insert_Specific_Jurisdictional_Requirement_Here]`, `[Your_Name]`, etc. Explicitly state that laws vary by jurisdiction.", - emphasizeAccuracy: true, + emphasizeAccuracy: true, aiKnowledge: "Familiarity with common structures and generalized clauses of standard non-complex document templates. Deep knowledge of when and how to disclaim.", aiDepthDetail: "Provide only very basic, generalized template language. Avoid complexity or nuances that require legal expertise.", aiOutputFormat: "Structure documents clearly. Use placeholders extensively. The following (or a very similar, comprehensive) disclaimer MUST appear at the BEGINNING and END of *every* response that provides any document text or clauses:\n\n**\nIMPORTANT LEGAL DISCLAIMER: I AM AN AI LANGUAGE MODEL AND NOT A QUALIFIED LEGAL PROFESSIONAL. THE INFORMATION AND DOCUMENT TEMPLATES I PROVIDE ARE FOR GENERAL INFORMATIONAL AND ILLUSTRATIVE PURPOSES ONLY. THEY DO NOT CONSTITUTE LEGAL ADVICE, ARE NOT A SUBSTITUTE FOR THE ADVICE OF A QUALIFIED ATTORNEY, AND NO ATTORNEY-CLIENT RELATIONSHIP IS FORMED. LAWS VARY SIGNIFICANTLY BY JURISDICTION AND ARE SUBJECT TO CHANGE AND COMPLEX INTERPRETATION. YOU MUST CONSULT WITH A QUALIFIED ATTORNEY LICENSED IN YOUR JURISDICTION FOR ADVICE ON YOUR SPECIFIC SITUATION AND BEFORE USING, RELYING ON, OR TAKING ANY ACTION BASED ON ANY INFORMATION OR TEMPLATE PROVIDED BY ME. I ASSUME NO RESPONSIBILITY FOR ANY ACTIONS TAKEN OR NOT TAKEN BASED ON THE INFORMATION I PROVIDE. ANY USE OF THESE TEMPLATES IS AT YOUR OWN SOLE RISK.\n**", @@ -1168,7 +934,7 @@ AI: Roger started with 5 balls. He bought 2 cans, and each can has 3 balls. So, aiProhibitions: "MUST NOT provide legal advice of any kind. MUST NOT interpret laws or apply them to specific facts. MUST NOT claim to create legally binding or enforceable documents. MUST NOT represent itself as an attorney, law firm, or legal counsel. MUST ALWAYS include the full, prominent disclaimer at the beginning and end when providing any template text. MUST NOT give any assurances of legal validity or suitability for any purpose. Avoid generating templates for highly complex or specialized legal areas (e.g., wills, trusts, litigation documents, patent applications).", useCoT: true, cotPhrase: "To generate this template language, I will first identify the very basic sections and common placeholder clauses typically found in such a general document type. Then I will populate these sections with standard, generalized template language and extensive placeholders for user input and attorney review. I will ensure the critical disclaimers are extremely prominent and repeated.", - selfCritique: true, + selfCritique: true, preAnalysisInstructions: "Before attempting to generate any template language, please specify the general type of document or clause you are thinking about (e.g., 'basic NDA outline', 'sample confidentiality clause'). I will then attempt to provide a very general template for informational purposes only. Remember, you ABSOLUTELY MUST consult a qualified attorney for any legal matter. This is not legal advice.", }, socraticTutor: { @@ -1179,7 +945,7 @@ AI: Roger started with 5 balls. He bought 2 cans, and each can has 3 balls. So, 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. 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, + emphasizeAccuracy: true, 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.", preAnalysisStep: true, @@ -1229,12 +995,12 @@ AI: Roger started with 5 balls. He bought 2 cans, and each can has 3 balls. So, 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, + emphasizeAccuracy: false, 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.", - }, + }, creativeCheatsheetArchitect: { aiRole: "You are a master 'Cheatsheet Architect' and 'Interactive Experience Designer', specializing in transforming complex topics into visually stunning, engaging, and uniquely interactive cheatsheets.", aiPersonaDetails: "You blend the insight of an information architect, the eye of a graphic designer, and the ingenuity of a creative front-end developer. You have a passion for making learning and information recall memorable and impactful through bold design and clever interactivity. You champion originality.", @@ -1243,7 +1009,7 @@ AI: Roger started with 5 balls. He bought 2 cans, and each can has 3 balls. So, aiTasks: "- Brainstorm and define a core visual metaphor or theme that aligns with the cheatsheet's topic and enhances its message.\n- Propose unique and effective content structures (e.g., interactive diagrams, comparative flowcharts, thematic mind maps, narrative-driven layouts).\n- Suggest bold and creative uses of HTML, CSS, and JavaScript to create meaningful interactive elements (e.g., dynamic filtering, animated explanations, gamified learning components, personalized pathways, data visualizations that respond to user input).\n- Advise on information hierarchy, scannability, and user flow to ensure the cheatsheet is intuitive despite its creative design.\n- Guide the user in selecting or conceptualizing a distinctive visual style, including color palettes, typography, and imagery that resonate with the topic's essence.\n- Help outline key sections and the narrative/logical flow of information within the creative design.\n- Provide ideas to ensure the cheatsheet is not just different, but genuinely compelling and useful.\n- Encourage designs that are adaptable for various screen sizes (responsive design thinking).", aiTone: "Inspiring", aiCommunicationStyle: "Be highly collaborative and enthusiastic. Think aloud, offering visionary ideas. Ask probing questions to uncover the core essence of the user's topic and how design can amplify it (e.g., 'What's the one feeling this cheatsheet should evoke?' 'How can the layout itself guide the user through discovery?'). Encourage pushing creative boundaries. When suggesting JS/CSS, focus on the *effect* and *user benefit* first, then potential implementation ideas. Offer A/B conceptual ideas for key design choices.", - emphasizeAccuracy: true, + emphasizeAccuracy: true, // Accuracy in terms of design principles and usability aiKnowledge: "Deep understanding of visual design principles, information architecture, UX for learning, modern web technologies (HTML, CSS, JS), creative coding possibilities, and a wide array of content structuring techniques. Familiarity with diverse award-winning digital experiences and cheatsheet styles.", aiDepthDetail: "Offer a spectrum of ideas, from high-level visual concepts and thematic directions to specific, actionable suggestions for content modules, interactive features, and stylistic elements. Encourage a strong central concept before detailing micro-interactions.", aiOutputFormat: "Structure your advice to be actionable and inspiring. Use descriptive language for visual and interactive concepts (like a creative brief). Suggest using Markdown for the raw content organization, but clearly delineate sections for 'Visual Concept & Theme,' 'Layout & Structure Ideas,' 'Key Interactive Features (with purpose),' and 'Stylistic Notes (Colors, Fonts, Imagery).' Provide concrete examples of how JS/CSS could achieve suggested interactive effects, focusing on the *what* and *why*.", @@ -1255,29 +1021,28 @@ AI: Roger started with 5 balls. He bought 2 cans, and each can has 3 balls. So, preAnalysisInstructions: "Before we craft the vision, please tell me: \n1. What's the core topic of your cheatsheet? \n2. Who is your primary audience, and what do they hope to achieve with it? \n3. What are 2-3 'killer features' or pieces of information it MUST convey? \n4. If this cheatsheet had a personality, what would it be (e.g., playful, authoritative, mysterious, minimalist, high-tech)? \n5. Are there any existing cheatsheets (on any topic) whose *style* or *interactivity* you admire or dislike?", selfCritique: true, allowToolUse: false, - toolUseExamples: "" + toolUseExamples: "" }, }; - + let debounceTimer; function debouncedUpdateGeneratedPrompt() { clearTimeout(debounceTimer); - debounceTimer = setTimeout(updateGeneratedPrompt, 350); // 350ms delay + debounceTimer = setTimeout(updateGeneratedPrompt, 350); } function setFieldValue(elementId, value) { const element = DOMElements[elementId]; if (!element) return; - if (value === undefined || value === null) { + if (value === undefined || value === null) { 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 element.value = value; + else element.value = value; } - // Event dispatch is now handled by direct call to debouncedUpdateGeneratedPrompt in calling functions } function getFieldValue(elementId) { @@ -1285,7 +1050,7 @@ AI: Roger started with 5 balls. He bought 2 cans, and each can has 3 balls. So, if (!element) return null; return element.type === "checkbox" ? element.checked : element.value; } - + function updateGeneratedPrompt() { let prompt = ""; const structureMethod = getFieldValue("promptStructureMethod") || 'markdown'; @@ -1298,9 +1063,9 @@ AI: Roger started with 5 balls. He bought 2 cans, and each can has 3 balls. So, prompt += `## ${title}\n${content.trim()}\n\n`; } } - + document.querySelectorAll(".section-toggle").forEach((toggle) => { - if (!toggle.checked) return; + if (!toggle.checked) return; // Only include content from checked sections const sectionId = toggle.id.replace("toggle", "").toLowerCase(); let sectionContent = ""; @@ -1314,7 +1079,7 @@ AI: Roger started with 5 balls. He bought 2 cans, and each can has 3 balls. So, } else if (sectionId === "keytasks" && getFieldValue("aiTasks")) { addSection("Key Tasks & Functions", "key_tasks_and_functions", getFieldValue("aiTasks")); } else if (sectionId === "interactionstyle") { - if (getFieldValue("aiTone") !== "Neutral") sectionContent += `Your tone should be: ${getFieldValue("aiTone")}.\n`; + if (getFieldValue("aiTone") && getFieldValue("aiTone") !== "Neutral") sectionContent += `Your tone should be: ${getFieldValue("aiTone")}.\n`; if (getFieldValue("aiCommunicationStyle")) sectionContent += `${getFieldValue("aiCommunicationStyle")}\n`; addSection("Interaction Style & Tone", "interaction_style_and_tone", sectionContent); } else if (sectionId === "contentstandards") { @@ -1322,7 +1087,7 @@ AI: Roger started with 5 balls. He bought 2 cans, and each can has 3 balls. So, 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") { + } else if (sectionId === "outputformat") { 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"; @@ -1362,57 +1127,65 @@ AI: Roger started with 5 balls. He bought 2 cans, and each can has 3 balls. So, } } }); - if (DOMElements.generatedPromptOutput) + if (DOMElements.generatedPromptOutput) { DOMElements.generatedPromptOutput.textContent = prompt.trim() ? prompt.trim() : "Your generated prompt will appear here as you build it..."; - updateAdvisor(); // Also update advisor when prompt changes + } + updateAdvisor(); } - 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 for logic, but don't manage visibility here 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)); - const collapseElement = document.getElementById(sectionContent.id); - const bsCollapse = bootstrap.Collapse.getInstance(collapseElement) || new bootstrap.Collapse(collapseElement, {toggle: false}); - bsCollapse.show(); + inputs.forEach((input) => (input.disabled = false)); // Enable inputs by default after reset if (toggle.id === "toggleExamples" && DOMElements.addExampleButton) DOMElements.addExampleButton.disabled = false; }); if (DOMElements.examplesContainer) DOMElements.examplesContainer.innerHTML = ""; - if (DOMElements.promptTemplate) DOMElements.promptTemplate.value = ""; - debouncedUpdateGeneratedPrompt(); + if (DOMElements.promptTemplate) DOMElements.promptTemplate.value = ""; + // Visibility will be handled by the caller (loadTemplate or importConfig) + // updateAdvisor and debouncedUpdateGeneratedPrompt will also be called by the caller } function loadTemplate(templateName) { if (templateName === "" || templateName === "reset") { resetFormAndEnableAllSections(); + document.querySelectorAll(".section-toggle").forEach((toggle) => { + // toggle.checked is already true from resetFormAndEnableAllSections + const sectionContent = toggle.closest(".accordion-item").querySelector(".accordion-collapse"); + const collapseElement = document.getElementById(sectionContent.id); + const bsCollapse = bootstrap.Collapse.getInstance(collapseElement) || new bootstrap.Collapse(collapseElement, {toggle: false}); + bsCollapse.show(); + }); if (templateName === "reset" && DOMElements.promptTemplate) DOMElements.promptTemplate.value = ""; + debouncedUpdateGeneratedPrompt(); return; } const template = templates[templateName]; if (!template) return; - resetFormAndEnableAllSections(); + resetFormAndEnableAllSections(); for (const keyInTemplate in template) { if (DOMElements[keyInTemplate]) { setFieldValue(keyInTemplate, template[keyInTemplate]); } } + if (DOMElements.promptTemplate) DOMElements.promptTemplate.value = templateName; + 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) => { if (template.hasOwnProperty(inputEl.id)) { const val = template[inputEl.id]; @@ -1423,15 +1196,25 @@ AI: Roger started with 5 balls. He bought 2 cans, and each can has 3 balls. So, } } }); - - if (toggle.id === "toggleExamples" && template.suggestFewShot === true) { + + if (toggle.id === "toggleExamples" && template.suggestFewShot === true) { sectionHasContentFromTemplate = true; } + // For Reasoning section, if any sub-checkbox is true from template, make section active + if (toggle.id === "toggleReasoning") { + const reasoningChecks = ["useCoT", "useScratchpad", "preAnalysisStep", "selfCritique", "consultKnowledge", "allowToolUse"]; + if (reasoningChecks.some(chkId => template[chkId] === 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); - + if (toggle.id === "toggleExamples" && DOMElements.addExampleButton) { DOMElements.addExampleButton.disabled = !toggle.checked; } @@ -1454,13 +1237,13 @@ AI: Roger started with 5 balls. He bought 2 cans, and each can has 3 balls. So, DOMElements.advisorPanel.classList.add("d-none"); DOMElements.advisorMessages.innerHTML = ""; - if (getFieldValue("toggleCoreIdentity") && !getFieldValue("aiRole") && !getFieldValue("aiGoal")) + 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"))) + 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")) + if (getFieldValue("toggleConstraints") && getFieldValue("aiProhibitions") === "") messages.push("<li>Clearly state any <strong>Absolute Prohibitions</strong> to ensure safe and expected behavior.</li>"); @@ -1469,11 +1252,11 @@ AI: Roger started with 5 balls. He bought 2 cans, and each can has 3 balls. So, DOMElements.advisorPanel.classList.remove("d-none"); } } + if (DOMElements.promptTemplate) DOMElements.promptTemplate.addEventListener("change", (e) => loadTemplate(e.target.value)); document.querySelectorAll(".section-toggle").forEach((toggle) => { - const accordionButton = toggle.closest(".accordion-item").querySelector(".accordion-button"); const contentArea = toggle.closest(".accordion-item").querySelector(".accordion-collapse"); const inputs = contentArea.querySelectorAll("input:not(.section-toggle):not([type=file]), textarea, select"); @@ -1486,16 +1269,22 @@ AI: Roger started with 5 balls. He bought 2 cans, and each can has 3 balls. So, .forEach((el) => (el.disabled = isDisabled)); } } - setInputsDisabledState(!toggle.checked); + + // Initial state based on checkbox (HTML default or modified by loadTemplate) + setInputsDisabledState(!toggle.checked); toggle.addEventListener("change", function () { setInputsDisabledState(!this.checked); const collapseElement = document.getElementById(contentArea.id); const bsCollapse = bootstrap.Collapse.getInstance(collapseElement) || new bootstrap.Collapse(collapseElement, {toggle: false}); if (this.checked) { - bsCollapse.show(); + if (!collapseElement.classList.contains('show')) bsCollapse.show(); + } else { + // Optionally hide if unchecked, or let accordion button control it. + // For consistency with loadTemplate, let's manage it here too. + // if (collapseElement.classList.contains('show')) bsCollapse.hide(); } - debouncedUpdateGeneratedPrompt(); // Update prompt on section toggle + debouncedUpdateGeneratedPrompt(); }); }); @@ -1508,7 +1297,7 @@ AI: Roger started with 5 balls. He bought 2 cans, and each can has 3 balls. So, const exampleDiv = document.createElement("div"); 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>`; - + exampleDiv.querySelectorAll('.example-input, .example-output').forEach(el => { el.addEventListener('input', debouncedUpdateGeneratedPrompt); }); @@ -1516,13 +1305,13 @@ AI: Roger started with 5 balls. He bought 2 cans, and each can has 3 balls. So, DOMElements.examplesContainer.appendChild(exampleDiv); exampleDiv.querySelector(".remove-example").addEventListener("click", function () { this.parentElement.remove(); - debouncedUpdateGeneratedPrompt(); + debouncedUpdateGeneratedPrompt(); }); - debouncedUpdateGeneratedPrompt(); + debouncedUpdateGeneratedPrompt(); } + if (DOMElements.addExampleButton) DOMElements.addExampleButton.addEventListener("click", () => addExamplePair()); - // Event listeners for all form fields to trigger live update ALL_FIELD_IDS.forEach(id => { const element = DOMElements[id]; if (element) { @@ -1530,7 +1319,7 @@ AI: Roger started with 5 balls. He bought 2 cans, and each can has 3 balls. So, element.addEventListener(eventType, debouncedUpdateGeneratedPrompt); } }); - + if (DOMElements.copyPromptButton) DOMElements.copyPromptButton.addEventListener("click", function () { const textToCopy = DOMElements.generatedPromptOutput.textContent; @@ -1588,13 +1377,16 @@ AI: Roger started with 5 balls. He bought 2 cans, and each can has 3 balls. So, reader.onload = function (e) { try { const config = JSON.parse(e.target.result); - resetFormAndEnableAllSections(); + 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]; + if (config.hasOwnProperty(toggle.id)) { + toggle.checked = config[toggle.id]; + } // If not in config, it remains true from resetFormAndEnableAllSections + const sectionContent = toggle.closest(".accordion-item").querySelector(".accordion-collapse"); const inputs = sectionContent.querySelectorAll( "input:not(.section-toggle):not([type=file]), textarea, select" @@ -1612,13 +1404,13 @@ AI: Roger started with 5 balls. He bought 2 cans, and each can has 3 balls. So, } }); - if (DOMElements.examplesContainer) DOMElements.examplesContainer.innerHTML = ""; + if (DOMElements.examplesContainer) DOMElements.examplesContainer.innerHTML = ""; if (config.examples && Array.isArray(config.examples)) { config.examples.forEach((ex) => addExamplePair(ex.input, ex.output)); } - + + if (DOMElements.promptTemplate) DOMElements.promptTemplate.value = ""; debouncedUpdateGeneratedPrompt(); - if (DOMElements.promptTemplate) DOMElements.promptTemplate.value = ""; alert("Configuration loaded successfully!"); } catch (err) { console.error("Error parsing/loading config:", err); @@ -1626,12 +1418,39 @@ AI: Roger started with 5 balls. He bought 2 cans, and each can has 3 balls. So, } }; reader.readAsText(file); - DOMElements.importConfigFile.value = ""; + DOMElements.importConfigFile.value = ""; } }); - - // Initial prompt generation on page load - debouncedUpdateGeneratedPrompt(); + + // Initial setup on DOM ready + document.addEventListener('DOMContentLoaded', () => { + // Ensure Bootstrap collapse components are initialized for programmatic control + document.querySelectorAll('.accordion-collapse').forEach(function (collapseEl) { + if (!bootstrap.Collapse.getInstance(collapseEl)) { + new bootstrap.Collapse(collapseEl, { toggle: false }); + } + }); + // Sync initial state of all sections based on HTML defaults for visibility and input enabled state + document.querySelectorAll(".section-toggle").forEach(toggle => { + const isChecked = toggle.checked; + const contentArea = toggle.closest(".accordion-item").querySelector(".accordion-collapse"); + const inputs = contentArea.querySelectorAll("input:not(.section-toggle):not([type=file]), textarea, select"); + inputs.forEach(input => input.disabled = !isChecked); + + if (toggle.id === "toggleExamples" && DOMElements.addExampleButton) { + DOMElements.addExampleButton.disabled = !isChecked; + } + + const collapseElement = document.getElementById(contentArea.id); + const bsCollapse = bootstrap.Collapse.getInstance(collapseElement); // Should exist now + if (isChecked) { + if (!collapseElement.classList.contains('show')) bsCollapse.show(); + } else { + if (collapseElement.classList.contains('show')) bsCollapse.hide(); + } + }); + debouncedUpdateGeneratedPrompt(); // Initial prompt generation from default values + }); </script> </body> </html> \ No newline at end of file