Code Explanation Generator - AiPro Institute\u2122<\/title>\n <style>\n *{margin:0;padding:0;box-sizing:border-box}\n body{font-family:-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,'Helvetica Neue',Arial,sans-serif;line-height:1.6;color:#333;background:#fff;padding:2rem 1rem}\n .container{max-width:900px;margin:0 auto}\n .page-title{text-align:center;font-size:2.5rem;font-weight:700;background:linear-gradient(135deg,#667eea 0%,#764ba2 100%);-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text;margin-bottom:2rem}\n .card{background:#fff;border-radius:12px;box-shadow:0 4px 6px rgba(0,0,0,.1);overflow:hidden;margin-bottom:2rem}\n .card-header{background:linear-gradient(135deg,#667eea 0%,#764ba2 100%);color:#fff;padding:2rem}\n .card-header h1{font-size:2rem;margin-bottom:.5rem}\n .card-header .subtitle{font-size:1.1rem;opacity:.95}\n .meta-badges,.tool-badges{display:flex;gap:.75rem;margin-top:1rem;flex-wrap:wrap}\n .badge{background:rgba(255,255,255,.2);padding:.4rem .9rem;border-radius:20px;font-size:.9rem;backdrop-filter:blur(10px)}\n .tool-badge{background:transparent;border:1px solid rgba(255,255,255,.4);padding:.4rem .9rem;border-radius:20px;font-size:.85rem}\n .card-body{padding:2.5rem}\n .section-title-container{display:flex;justify-content:space-between;align-items:center;margin:2.5rem 0 1.25rem 0}\n .section-title-container:first-child{margin-top:0}\n .section-title{font-size:1.75rem;color:#764ba2;border-left:4px solid #764ba2;padding-left:1rem;margin:0}\n .copy-button{background:linear-gradient(135deg,#667eea 0%,#764ba2 100%);color:#fff;border:none;padding:.6rem 1.5rem;border-radius:6px;cursor:pointer;font-size:.95rem;font-weight:500;transition:opacity .3s}\n .copy-button:hover{opacity:.9}\n .prompt-box{background:#f8f9fa;border:1px solid #dee2e6;border-radius:8px;padding:1.5rem;margin:1.25rem 0;font-family:'Courier New',monospace;font-size:.95rem;line-height:1.6;white-space:pre-wrap;overflow-x:auto}\n .placeholder{color:#fd7e14;font-weight:bold}\n .tip-box{background:#fff9e6;border-left:4px solid #ffc107;padding:1.25rem;margin:1.25rem 0;border-radius:4px}\n .tip-box strong{color:#f57c00}\n h3{color:#764ba2;font-size:1.35rem;margin:2rem 0 1rem 0}\n p{margin-bottom:1rem;line-height:1.8}\n ul,ol{margin-left:2rem;margin-bottom:1rem}\n li{margin-bottom:.5rem;line-height:1.8}\n .example-output{background:#f0f8ff;border:2px solid #4a90e2;border-radius:8px;padding:1.5rem;margin:1.25rem 0}\n .example-output h4{color:#4a90e2;margin-bottom:1rem}\n .chain-step{background:#f8f9fa;border-left:4px solid #667eea;padding:1.5rem;margin:1.5rem 0;border-radius:4px}\n .chain-step h4{color:#667eea;margin-bottom:.75rem}\n .footer{background:#f8f9fa;padding:2rem;margin-top:2rem;border-radius:8px;display:flex;justify-content:space-around;align-items:center;flex-wrap:wrap;gap:1.5rem}\n .footer-stat{text-align:center}\n .footer-stat-value{font-size:1.75rem;font-weight:700;color:#764ba2}\n .footer-stat-label{color:#666;font-size:.95rem}\n @media (max-width:768px){.page-title{font-size:1.75rem}.card-header h1{font-size:1.5rem}.card-body{padding:1.5rem}.section-title{font-size:1.35rem}.section-title-container{flex-direction:column;align-items:flex-start;gap:1rem}.footer{flex-direction:column}}\n <\/style>\n<\/head>\n<body>\n <div class=\"container\">\n <h1 class=\"page-title\">Code Explanation Generator<\/h1>\n\n <div class=\"card\">\n <div class=\"card-header\">\n <h1>Code Explanation Generator<\/h1>\n <p class=\"subtitle\">Problem Solving & Analysis<\/p>\n <div class=\"meta-badges\"><span class=\"badge\">\u23f1\ufe0f 10-20 minutes<\/span><span class=\"badge\">\ud83d\udcca Beginner<\/span><\/div>\n <div class=\"tool-badges\"><span class=\"tool-badge\">ChatGPT<\/span><span class=\"tool-badge\">Claude<\/span><span class=\"tool-badge\">Gemini<\/span><span class=\"tool-badge\">Perplexity<\/span><span class=\"tool-badge\">Grok<\/span><\/div>\n <\/div>\n\n <div class=\"card-body\">\n <div class=\"section-title-container\"><h2 class=\"section-title\">The Prompt<\/h2><button class=\"copy-button\" onclick=\"copyPrompt()\">\ud83d\udccb Copy Prompt<\/button><\/div>\n\n <div class=\"prompt-box\" id=\"promptContent\">You are a senior software engineer and educator. Explain the code below clearly and accurately.\n\n<span class=\"placeholder\">[CODE_SNIPPET]<\/span>\n\n<span class=\"placeholder\">[LANGUAGE]<\/span> (e.g., Python, JavaScript, Java)\n\n<span class=\"placeholder\">[AUDIENCE_LEVEL]<\/span> (e.g., beginner, intermediate, senior)\n\n<span class=\"placeholder\">[GOALS]<\/span> (e.g., \"understand logic\", \"refactor\", \"debug\", \"performance\")\n\nUse the E.X.P.L.A.I.N. Framework:\n\n**E - Explain purpose** (what problem it solves)\n**X - eXecute mentally** (walk through with sample input)\n**P - Point out key parts** (functions, loops, conditions)\n**L - List assumptions** (inputs, invariants, side effects)\n**A - Analyze complexity** (time\/space, bottlenecks)\n**I - Identify risks** (bugs, edge cases, security)\n**N - Next improvements** (refactors, tests, better naming)\n\nDELIVER 10 SECTIONS:\n\n\u2713 1) High-level summary\n\u2713 2) Inputs\/Outputs\n\u2713 3) Step-by-step walkthrough (with sample)\n\u2713 4) Key lines explained (annotate 8-15 lines)\n\u2713 5) Data structures used\n\u2713 6) Complexity analysis\n\u2713 7) Edge cases\n\u2713 8) Risks & security concerns\n\u2713 9) Suggested improvements\n\u2713 10) Quick tests to validate behavior\n\nRULES:\n- If code is incomplete, list missing context\n- Prefer clarity over jargon; define terms for beginners\n- If asked, provide a refactored version separately\n<\/div>\n\n <div class=\"tip-box\"><strong>\ud83d\udca1 Pro Tip:<\/strong> The fastest way to understand code is to trace it with a small input and write down state changes. Don\u2019t start by reading every line\u2014start by predicting what it should do.<\/div>\n\n <div class=\"section-title-container\"><h2 class=\"section-title\">The Logic<\/h2><\/div>\n\n <h3>1. Purpose-First Explanation Builds a Mental Map Before Details<\/h3>\n <p><strong>WHY IT WORKS:<\/strong> Readers get lost when explanations start at line 1 without context. Purpose-first establishes what success looks like: inputs, outputs, and constraints. This creates a mental map that helps readers interpret each line (\u201cthis loop is building the index\u201d). Without purpose, readers misattribute meaning and can\u2019t distinguish important logic from plumbing. A top-down approach mirrors how experienced engineers onboard: first, explain what the module does; then dive into implementation.<\/p>\n <p><strong>EXAMPLE:<\/strong> If a function is actually a rate limiter but looks like \u201crandom arithmetic,\u201d explaining the intent reveals why counters and timestamps exist. Then each variable becomes meaningful. Purpose-first explanations improve comprehension and reduce confusion-driven errors when modifying code.<\/p>\n\n <h3>2. Walking Through a Sample Input Reveals State Transitions and Hidden Assumptions<\/h3>\n <p><strong>WHY IT WORKS:<\/strong> Code is dynamic; static reading misses how values change. A \u201cmental execution\u201d with a small sample makes control flow concrete and surfaces hidden assumptions: expected input format, ordering, null handling. It also reveals off-by-one errors and side effects. For learners, walkthroughs convert abstract loops into visible progress. For seniors, walkthroughs quickly validate correctness and identify edge cases.<\/p>\n <p><strong>EXAMPLE:<\/strong> A parser may assume lines end with \u201c\\n\u201d; a sample trace shows it fails on last line. A cache may assume keys are strings; a trace reveals collisions. By tracing, you detect these assumptions before they cause bugs in production.<\/p>\n\n <h3>3. Line Annotations Create Anchors for Future Debugging and Maintenance<\/h3>\n <p><strong>WHY IT WORKS:<\/strong> Explanations that paraphrase code without pointing to exact lines are hard to apply. Annotating key lines (8\u201315) makes the explanation actionable: the reader knows where logic lives. This is crucial for debugging: when a bug appears, you can map symptoms to lines. Line annotations also support code review and onboarding documentation\u2014engineers can revisit explanations later without rereading everything.<\/p>\n <p><strong>EXAMPLE:<\/strong> \u201cLine 12: if (seen.has(id)) return; prevents duplicate processing.\u201d When you later see duplicates, you know exactly where to inspect. Annotated explanations reduce ramp-up time for new contributors because they highlight the \u201cspine\u201d of the function.<\/p>\n\n <h3>4. Complexity Analysis Prevents Hidden Performance Regressions<\/h3>\n <p><strong>WHY IT WORKS:<\/strong> Many code changes fail not because they\u2019re incorrect but because they become slow or memory-heavy at scale. Complexity analysis (O(n), O(n log n), O(n^2)) identifies hotspots and helps engineers choose better data structures. It also guides test design: if complexity is O(n^2), you need stress tests. Including complexity in explanations builds performance intuition and reduces the chance of shipping \u201cworks on my machine\u201d code that fails at production volumes.<\/p>\n <p><strong>EXAMPLE:<\/strong> A nested loop over users \u00d7 orders might be fine for 100 records but catastrophic for 1M. Complexity analysis reveals need for indexing (hash map) or database joins. Engineers who include complexity checks in code explanation catch these issues early.<\/p>\n\n <h3>5. Risk and Security Review Catches Vulnerabilities Early (Even in \u201cSimple\u201d Code)<\/h3>\n <p><strong>WHY IT WORKS:<\/strong> Code often interacts with untrusted input. Even small scripts can contain injection risks, unsafe deserialization, path traversal, or data leaks through logging. Including a security lens in explanation helps developers build safe habits. It also highlights operational risks: missing error handling, silent failures, brittle dependencies. This reduces incidents and improves reliability.<\/p>\n <p><strong>EXAMPLE:<\/strong> If code builds SQL using string concatenation, the explanation should flag SQL injection risk and recommend parameterized queries. If code logs tokens, flag secret leakage. These are common oversights that get missed when explanations focus only on logic.<\/p>\n\n <h3>6. Improvement Suggestions Turn Understanding Into Better Code<\/h3>\n <p><strong>WHY IT WORKS:<\/strong> Explanation alone is passive. Suggestions for refactor, tests, naming, and modularization create immediate next steps. They also teach best practices by example. For teams, this bridges education and code quality: the output is not just \u201cwhat it does\u201d but \u201chow to make it safer and easier to maintain.\u201d This increases the value of the explanation prompt and makes it useful in code reviews and onboarding.<\/p>\n <p><strong>EXAMPLE:<\/strong> Suggest extracting a helper function for repeated logic, adding unit tests for edge cases, replacing magic numbers with constants, or adding type hints. In mature teams, explanation + improvements reduces review iterations because issues are pre-identified and can be fixed quickly.<\/p>\n\n <div class=\"section-title-container\"><h2 class=\"section-title\">Example Output Preview<\/h2><\/div>\n <div class=\"example-output\">\n <h4>Sample: Explain a Python Function (with metrics)<\/h4>\n <p><strong>Code:<\/strong> A function that deduplicates records by id and returns the latest by timestamp.<\/p>\n <p><strong>Summary:<\/strong> Builds a dictionary keyed by id; keeps the record with max timestamp. Output is a list of unique records.<\/p>\n <p><strong>Complexity:<\/strong> O(n) time, O(k) space where k is unique ids. Bottleneck: timestamp parsing if done repeatedly.<\/p>\n <p><strong>Risks:<\/strong> If timestamp is missing\/invalid, comparison fails; recommend default handling. If input order matters, returning dict values may be unstable; recommend sorting output.<\/p>\n <p><strong>Tests:<\/strong> empty list, duplicate ids, equal timestamps, missing timestamps, large n (100k) performance.<\/p>\n <\/div>\n\n <div class=\"section-title-container\"><h2 class=\"section-title\">Prompt Chain Strategy<\/h2><\/div>\n <div class=\"chain-step\"><h4>Step 1: Explain + Walkthrough<\/h4><p><strong>Prompt:<\/strong> Use the main Code Explanation Generator.<\/p><p><strong>Expected Output:<\/strong> Clear explanation with walkthrough, complexity, risks, and tests.<\/p><\/div>\n <div class=\"chain-step\"><h4>Step 2: Refactor + Add Tests<\/h4><p><strong>Prompt:<\/strong> \u201cRefactor the code for readability and add unit tests (pytest\/jest). Keep behavior identical.\u201d<\/p><p><strong>Expected Output:<\/strong> Improved code and tests.<\/p><\/div>\n <div class=\"chain-step\"><h4>Step 3: Security Hardening<\/h4><p><strong>Prompt:<\/strong> \u201cRun a security review and propose changes to prevent injection, secret leakage, and unsafe IO.\u201d<\/p><p><strong>Expected Output:<\/strong> Hardened version and checklist.<\/p><\/div>\n\n <div class=\"section-title-container\"><h2 class=\"section-title\">Human-in-the-Loop Refinements<\/h2><\/div>\n <h3>Ask for the Real Inputs and Expected Outputs<\/h3>\n <p>Without real examples, explanations can be generic. <strong>Technique:<\/strong> request a sample input\/output pair.<\/p>\n <h3>Confirm Language\/Runtime Versions<\/h3>\n <p>Behavior differs by version. <strong>Technique:<\/strong> specify Python 3.11 vs 3.7, Node 18 vs 14.<\/p>\n <h3>Use a Minimal Walkthrough Input<\/h3>\n <p>Choose smallest input that exercises all branches. <strong>Technique:<\/strong> 3\u20135 items max.<\/p>\n <h3>Highlight Side Effects Explicitly<\/h3>\n <p>Mutations and IO matter. <strong>Technique:<\/strong> note in-place edits, global state, network calls.<\/p>\n <h3>Validate With a Reviewer If Code Is Safety-Critical<\/h3>\n <p>For security or finance code, require peer review. <strong>Technique:<\/strong> checklist-based review.<\/p>\n <h3>Store Explanations Next to Code<\/h3>\n <p>Make it reusable. <strong>Technique:<\/strong> add docstring or README with the summary and tests.<\/p>\n\n <div class=\"footer\">\n <div class=\"footer-stat\"><div class=\"footer-stat-value\">4.9\u2605<\/div><div class=\"footer-stat-label\">Average Rating<\/div><\/div>\n <div class=\"footer-stat\"><div class=\"footer-stat-value\">3,041<\/div><div class=\"footer-stat-label\">Times Copied<\/div><\/div>\n <div class=\"footer-stat\"><div class=\"footer-stat-value\">246<\/div><div class=\"footer-stat-label\">Reviews<\/div><\/div>\n <\/div>\n <\/div>\n <\/div>\n <\/div>\n\n <script>\n function copyPrompt(){\n const promptContent=document.getElementById('promptContent').innerText;\n navigator.clipboard.writeText(promptContent).then(()=>{\n const button=document.querySelector('.copy-button');\n const originalText=button.innerHTML;\n button.innerHTML='\u2713 Copied!';\n setTimeout(()=>{button.innerHTML=originalText;},2000);\n }).catch(err=>console.error('Failed to copy text: ',err));\n }\n <\/script>\n<\/body>\n<\/html>\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t<\/section>\n\t\t\t\t<\/div>","protected":false},"excerpt":{"rendered":"<p>Code Explanation Generator – AiPro Institute\u2122 Code Explanation Generator Code Explanation Generator Problem Solving & Analysis \u23f1\ufe0f 10-20 minutes\ud83d\udcca Beginner ChatGPTClaudeGeminiPerplexityGrok The Prompt \ud83d\udccb Copy Prompt You are a senior software engineer and educator. Explain the code below clearly and accurately. [CODE_SNIPPET] [LANGUAGE] (e.g., Python, JavaScript, Java) [AUDIENCE_LEVEL] (e.g., beginner, intermediate, senior) [GOALS] (e.g., “understand…<\/p>","protected":false},"author":1,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"_acf_changed":false,"footnotes":""},"categories":[173],"tags":[],"class_list":["post-5670","post","type-post","status-publish","format-standard","hentry","category-problem-solving-analysis"],"acf":[],"_links":{"self":[{"href":"https:\/\/teen.aiproinstitute.com\/zh\/wp-json\/wp\/v2\/posts\/5670","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/teen.aiproinstitute.com\/zh\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/teen.aiproinstitute.com\/zh\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/teen.aiproinstitute.com\/zh\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/teen.aiproinstitute.com\/zh\/wp-json\/wp\/v2\/comments?post=5670"}],"version-history":[{"count":4,"href":"https:\/\/teen.aiproinstitute.com\/zh\/wp-json\/wp\/v2\/posts\/5670\/revisions"}],"predecessor-version":[{"id":5694,"href":"https:\/\/teen.aiproinstitute.com\/zh\/wp-json\/wp\/v2\/posts\/5670\/revisions\/5694"}],"wp:attachment":[{"href":"https:\/\/teen.aiproinstitute.com\/zh\/wp-json\/wp\/v2\/media?parent=5670"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/teen.aiproinstitute.com\/zh\/wp-json\/wp\/v2\/categories?post=5670"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/teen.aiproinstitute.com\/zh\/wp-json\/wp\/v2\/tags?post=5670"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}

\n\t\t\t\t\t\t

\n\t\t\t\t\t

\n\t\t\t

\n\t\t\t\t\t\t

\n\t\t\t\t\t\n\n\n \n \n Code Explanation Generator - AiPro Institute\u2122<\/title>\n <style>\n *{margin:0;padding:0;box-sizing:border-box}\n body{font-family:-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,'Helvetica Neue',Arial,sans-serif;line-height:1.6;color:#333;background:#fff;padding:2rem 1rem}\n .container{max-width:900px;margin:0 auto}\n .page-title{text-align:center;font-size:2.5rem;font-weight:700;background:linear-gradient(135deg,#667eea 0%,#764ba2 100%);-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text;margin-bottom:2rem}\n .card{background:#fff;border-radius:12px;box-shadow:0 4px 6px rgba(0,0,0,.1);overflow:hidden;margin-bottom:2rem}\n .card-header{background:linear-gradient(135deg,#667eea 0%,#764ba2 100%);color:#fff;padding:2rem}\n .card-header h1{font-size:2rem;margin-bottom:.5rem}\n .card-header .subtitle{font-size:1.1rem;opacity:.95}\n .meta-badges,.tool-badges{display:flex;gap:.75rem;margin-top:1rem;flex-wrap:wrap}\n .badge{background:rgba(255,255,255,.2);padding:.4rem .9rem;border-radius:20px;font-size:.9rem;backdrop-filter:blur(10px)}\n .tool-badge{background:transparent;border:1px solid rgba(255,255,255,.4);padding:.4rem .9rem;border-radius:20px;font-size:.85rem}\n .card-body{padding:2.5rem}\n .section-title-container{display:flex;justify-content:space-between;align-items:center;margin:2.5rem 0 1.25rem 0}\n .section-title-container:first-child{margin-top:0}\n .section-title{font-size:1.75rem;color:#764ba2;border-left:4px solid #764ba2;padding-left:1rem;margin:0}\n .copy-button{background:linear-gradient(135deg,#667eea 0%,#764ba2 100%);color:#fff;border:none;padding:.6rem 1.5rem;border-radius:6px;cursor:pointer;font-size:.95rem;font-weight:500;transition:opacity .3s}\n .copy-button:hover{opacity:.9}\n .prompt-box{background:#f8f9fa;border:1px solid #dee2e6;border-radius:8px;padding:1.5rem;margin:1.25rem 0;font-family:'Courier New',monospace;font-size:.95rem;line-height:1.6;white-space:pre-wrap;overflow-x:auto}\n .placeholder{color:#fd7e14;font-weight:bold}\n .tip-box{background:#fff9e6;border-left:4px solid #ffc107;padding:1.25rem;margin:1.25rem 0;border-radius:4px}\n .tip-box strong{color:#f57c00}\n h3{color:#764ba2;font-size:1.35rem;margin:2rem 0 1rem 0}\n p{margin-bottom:1rem;line-height:1.8}\n ul,ol{margin-left:2rem;margin-bottom:1rem}\n li{margin-bottom:.5rem;line-height:1.8}\n .example-output{background:#f0f8ff;border:2px solid #4a90e2;border-radius:8px;padding:1.5rem;margin:1.25rem 0}\n .example-output h4{color:#4a90e2;margin-bottom:1rem}\n .chain-step{background:#f8f9fa;border-left:4px solid #667eea;padding:1.5rem;margin:1.5rem 0;border-radius:4px}\n .chain-step h4{color:#667eea;margin-bottom:.75rem}\n .footer{background:#f8f9fa;padding:2rem;margin-top:2rem;border-radius:8px;display:flex;justify-content:space-around;align-items:center;flex-wrap:wrap;gap:1.5rem}\n .footer-stat{text-align:center}\n .footer-stat-value{font-size:1.75rem;font-weight:700;color:#764ba2}\n .footer-stat-label{color:#666;font-size:.95rem}\n @media (max-width:768px){.page-title{font-size:1.75rem}.card-header h1{font-size:1.5rem}.card-body{padding:1.5rem}.section-title{font-size:1.35rem}.section-title-container{flex-direction:column;align-items:flex-start;gap:1rem}.footer{flex-direction:column}}\n <\/style>\n<\/head>\n<body>\n <div class=\"container\">\n <h1 class=\"page-title\">Code Explanation Generator<\/h1>\n\n <div class=\"card\">\n <div class=\"card-header\">\n <h1>Code Explanation Generator<\/h1>\n <p class=\"subtitle\">Problem Solving & Analysis<\/p>\n <div class=\"meta-badges\"><span class=\"badge\">\u23f1\ufe0f 10-20 minutes<\/span><span class=\"badge\">\ud83d\udcca Beginner<\/span><\/div>\n <div class=\"tool-badges\"><span class=\"tool-badge\">ChatGPT<\/span><span class=\"tool-badge\">Claude<\/span><span class=\"tool-badge\">Gemini<\/span><span class=\"tool-badge\">Perplexity<\/span><span class=\"tool-badge\">Grok<\/span><\/div>\n <\/div>\n\n <div class=\"card-body\">\n <div class=\"section-title-container\"><h2 class=\"section-title\">The Prompt<\/h2><button class=\"copy-button\" onclick=\"copyPrompt()\">\ud83d\udccb Copy Prompt<\/button><\/div>\n\n <div class=\"prompt-box\" id=\"promptContent\">You are a senior software engineer and educator. Explain the code below clearly and accurately.\n\n<span class=\"placeholder\">[CODE_SNIPPET]<\/span>\n\n<span class=\"placeholder\">[LANGUAGE]<\/span> (e.g., Python, JavaScript, Java)\n\n<span class=\"placeholder\">[AUDIENCE_LEVEL]<\/span> (e.g., beginner, intermediate, senior)\n\n<span class=\"placeholder\">[GOALS]<\/span> (e.g., \"understand logic\", \"refactor\", \"debug\", \"performance\")\n\nUse the E.X.P.L.A.I.N. Framework:\n\n**E - Explain purpose** (what problem it solves)\n**X - eXecute mentally** (walk through with sample input)\n**P - Point out key parts** (functions, loops, conditions)\n**L - List assumptions** (inputs, invariants, side effects)\n**A - Analyze complexity** (time\/space, bottlenecks)\n**I - Identify risks** (bugs, edge cases, security)\n**N - Next improvements** (refactors, tests, better naming)\n\nDELIVER 10 SECTIONS:\n\n\u2713 1) High-level summary\n\u2713 2) Inputs\/Outputs\n\u2713 3) Step-by-step walkthrough (with sample)\n\u2713 4) Key lines explained (annotate 8-15 lines)\n\u2713 5) Data structures used\n\u2713 6) Complexity analysis\n\u2713 7) Edge cases\n\u2713 8) Risks & security concerns\n\u2713 9) Suggested improvements\n\u2713 10) Quick tests to validate behavior\n\nRULES:\n- If code is incomplete, list missing context\n- Prefer clarity over jargon; define terms for beginners\n- If asked, provide a refactored version separately\n<\/div>\n\n <div class=\"tip-box\"><strong>\ud83d\udca1 Pro Tip:<\/strong> The fastest way to understand code is to trace it with a small input and write down state changes. Don\u2019t start by reading every line\u2014start by predicting what it should do.<\/div>\n\n <div class=\"section-title-container\"><h2 class=\"section-title\">The Logic<\/h2><\/div>\n\n <h3>1. Purpose-First Explanation Builds a Mental Map Before Details<\/h3>\n <p><strong>WHY IT WORKS:<\/strong> Readers get lost when explanations start at line 1 without context. Purpose-first establishes what success looks like: inputs, outputs, and constraints. This creates a mental map that helps readers interpret each line (\u201cthis loop is building the index\u201d). Without purpose, readers misattribute meaning and can\u2019t distinguish important logic from plumbing. A top-down approach mirrors how experienced engineers onboard: first, explain what the module does; then dive into implementation.<\/p>\n <p><strong>EXAMPLE:<\/strong> If a function is actually a rate limiter but looks like \u201crandom arithmetic,\u201d explaining the intent reveals why counters and timestamps exist. Then each variable becomes meaningful. Purpose-first explanations improve comprehension and reduce confusion-driven errors when modifying code.<\/p>\n\n <h3>2. Walking Through a Sample Input Reveals State Transitions and Hidden Assumptions<\/h3>\n <p><strong>WHY IT WORKS:<\/strong> Code is dynamic; static reading misses how values change. A \u201cmental execution\u201d with a small sample makes control flow concrete and surfaces hidden assumptions: expected input format, ordering, null handling. It also reveals off-by-one errors and side effects. For learners, walkthroughs convert abstract loops into visible progress. For seniors, walkthroughs quickly validate correctness and identify edge cases.<\/p>\n <p><strong>EXAMPLE:<\/strong> A parser may assume lines end with \u201c\\n\u201d; a sample trace shows it fails on last line. A cache may assume keys are strings; a trace reveals collisions. By tracing, you detect these assumptions before they cause bugs in production.<\/p>\n\n <h3>3. Line Annotations Create Anchors for Future Debugging and Maintenance<\/h3>\n <p><strong>WHY IT WORKS:<\/strong> Explanations that paraphrase code without pointing to exact lines are hard to apply. Annotating key lines (8\u201315) makes the explanation actionable: the reader knows where logic lives. This is crucial for debugging: when a bug appears, you can map symptoms to lines. Line annotations also support code review and onboarding documentation\u2014engineers can revisit explanations later without rereading everything.<\/p>\n <p><strong>EXAMPLE:<\/strong> \u201cLine 12: if (seen.has(id)) return; prevents duplicate processing.\u201d When you later see duplicates, you know exactly where to inspect. Annotated explanations reduce ramp-up time for new contributors because they highlight the \u201cspine\u201d of the function.<\/p>\n\n <h3>4. Complexity Analysis Prevents Hidden Performance Regressions<\/h3>\n <p><strong>WHY IT WORKS:<\/strong> Many code changes fail not because they\u2019re incorrect but because they become slow or memory-heavy at scale. Complexity analysis (O(n), O(n log n), O(n^2)) identifies hotspots and helps engineers choose better data structures. It also guides test design: if complexity is O(n^2), you need stress tests. Including complexity in explanations builds performance intuition and reduces the chance of shipping \u201cworks on my machine\u201d code that fails at production volumes.<\/p>\n <p><strong>EXAMPLE:<\/strong> A nested loop over users \u00d7 orders might be fine for 100 records but catastrophic for 1M. Complexity analysis reveals need for indexing (hash map) or database joins. Engineers who include complexity checks in code explanation catch these issues early.<\/p>\n\n <h3>5. Risk and Security Review Catches Vulnerabilities Early (Even in \u201cSimple\u201d Code)<\/h3>\n <p><strong>WHY IT WORKS:<\/strong> Code often interacts with untrusted input. Even small scripts can contain injection risks, unsafe deserialization, path traversal, or data leaks through logging. Including a security lens in explanation helps developers build safe habits. It also highlights operational risks: missing error handling, silent failures, brittle dependencies. This reduces incidents and improves reliability.<\/p>\n <p><strong>EXAMPLE:<\/strong> If code builds SQL using string concatenation, the explanation should flag SQL injection risk and recommend parameterized queries. If code logs tokens, flag secret leakage. These are common oversights that get missed when explanations focus only on logic.<\/p>\n\n <h3>6. Improvement Suggestions Turn Understanding Into Better Code<\/h3>\n <p><strong>WHY IT WORKS:<\/strong> Explanation alone is passive. Suggestions for refactor, tests, naming, and modularization create immediate next steps. They also teach best practices by example. For teams, this bridges education and code quality: the output is not just \u201cwhat it does\u201d but \u201chow to make it safer and easier to maintain.\u201d This increases the value of the explanation prompt and makes it useful in code reviews and onboarding.<\/p>\n <p><strong>EXAMPLE:<\/strong> Suggest extracting a helper function for repeated logic, adding unit tests for edge cases, replacing magic numbers with constants, or adding type hints. In mature teams, explanation + improvements reduces review iterations because issues are pre-identified and can be fixed quickly.<\/p>\n\n <div class=\"section-title-container\"><h2 class=\"section-title\">Example Output Preview<\/h2><\/div>\n <div class=\"example-output\">\n <h4>Sample: Explain a Python Function (with metrics)<\/h4>\n <p><strong>Code:<\/strong> A function that deduplicates records by id and returns the latest by timestamp.<\/p>\n <p><strong>Summary:<\/strong> Builds a dictionary keyed by id; keeps the record with max timestamp. Output is a list of unique records.<\/p>\n <p><strong>Complexity:<\/strong> O(n) time, O(k) space where k is unique ids. Bottleneck: timestamp parsing if done repeatedly.<\/p>\n <p><strong>Risks:<\/strong> If timestamp is missing\/invalid, comparison fails; recommend default handling. If input order matters, returning dict values may be unstable; recommend sorting output.<\/p>\n <p><strong>Tests:<\/strong> empty list, duplicate ids, equal timestamps, missing timestamps, large n (100k) performance.<\/p>\n <\/div>\n\n <div class=\"section-title-container\"><h2 class=\"section-title\">Prompt Chain Strategy<\/h2><\/div>\n <div class=\"chain-step\"><h4>Step 1: Explain + Walkthrough<\/h4><p><strong>Prompt:<\/strong> Use the main Code Explanation Generator.<\/p><p><strong>Expected Output:<\/strong> Clear explanation with walkthrough, complexity, risks, and tests.<\/p><\/div>\n <div class=\"chain-step\"><h4>Step 2: Refactor + Add Tests<\/h4><p><strong>Prompt:<\/strong> \u201cRefactor the code for readability and add unit tests (pytest\/jest). Keep behavior identical.\u201d<\/p><p><strong>Expected Output:<\/strong> Improved code and tests.<\/p><\/div>\n <div class=\"chain-step\"><h4>Step 3: Security Hardening<\/h4><p><strong>Prompt:<\/strong> \u201cRun a security review and propose changes to prevent injection, secret leakage, and unsafe IO.\u201d<\/p><p><strong>Expected Output:<\/strong> Hardened version and checklist.<\/p><\/div>\n\n <div class=\"section-title-container\"><h2 class=\"section-title\">Human-in-the-Loop Refinements<\/h2><\/div>\n <h3>Ask for the Real Inputs and Expected Outputs<\/h3>\n <p>Without real examples, explanations can be generic. <strong>Technique:<\/strong> request a sample input\/output pair.<\/p>\n <h3>Confirm Language\/Runtime Versions<\/h3>\n <p>Behavior differs by version. <strong>Technique:<\/strong> specify Python 3.11 vs 3.7, Node 18 vs 14.<\/p>\n <h3>Use a Minimal Walkthrough Input<\/h3>\n <p>Choose smallest input that exercises all branches. <strong>Technique:<\/strong> 3\u20135 items max.<\/p>\n <h3>Highlight Side Effects Explicitly<\/h3>\n <p>Mutations and IO matter. <strong>Technique:<\/strong> note in-place edits, global state, network calls.<\/p>\n <h3>Validate With a Reviewer If Code Is Safety-Critical<\/h3>\n <p>For security or finance code, require peer review. <strong>Technique:<\/strong> checklist-based review.<\/p>\n <h3>Store Explanations Next to Code<\/h3>\n <p>Make it reusable. <strong>Technique:<\/strong> add docstring or README with the summary and tests.<\/p>\n\n <div class=\"footer\">\n <div class=\"footer-stat\"><div class=\"footer-stat-value\">4.9\u2605<\/div><div class=\"footer-stat-label\">Average Rating<\/div><\/div>\n <div class=\"footer-stat\"><div class=\"footer-stat-value\">3,041<\/div><div class=\"footer-stat-label\">Times Copied<\/div><\/div>\n <div class=\"footer-stat\"><div class=\"footer-stat-value\">246<\/div><div class=\"footer-stat-label\">Reviews<\/div><\/div>\n <\/div>\n <\/div>\n <\/div>\n <\/div>\n\n <script>\n function copyPrompt(){\n const promptContent=document.getElementById('promptContent').innerText;\n navigator.clipboard.writeText(promptContent).then(()=>{\n const button=document.querySelector('.copy-button');\n const originalText=button.innerHTML;\n button.innerHTML='\u2713 Copied!';\n setTimeout(()=>{button.innerHTML=originalText;},2000);\n }).catch(err=>console.error('Failed to copy text: ',err));\n }\n <\/script>\n<\/body>\n<\/html>\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t<\/section>\n\t\t\t\t<\/div>","protected":false},"excerpt":{"rendered":"<p>Code Explanation Generator – AiPro Institute\u2122 Code Explanation Generator Code Explanation Generator Problem Solving & Analysis \u23f1\ufe0f 10-20 minutes\ud83d\udcca Beginner ChatGPTClaudeGeminiPerplexityGrok The Prompt \ud83d\udccb Copy Prompt You are a senior software engineer and educator. Explain the code below clearly and accurately. [CODE_SNIPPET] [LANGUAGE] (e.g., Python, JavaScript, Java) [AUDIENCE_LEVEL] (e.g., beginner, intermediate, senior) [GOALS] (e.g., “understand…<\/p>","protected":false},"author":1,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"_acf_changed":false,"footnotes":""},"categories":[173],"tags":[],"class_list":["post-5670","post","type-post","status-publish","format-standard","hentry","category-problem-solving-analysis"],"acf":[],"_links":{"self":[{"href":"https:\/\/teen.aiproinstitute.com\/zh\/wp-json\/wp\/v2\/posts\/5670","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/teen.aiproinstitute.com\/zh\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/teen.aiproinstitute.com\/zh\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/teen.aiproinstitute.com\/zh\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/teen.aiproinstitute.com\/zh\/wp-json\/wp\/v2\/comments?post=5670"}],"version-history":[{"count":4,"href":"https:\/\/teen.aiproinstitute.com\/zh\/wp-json\/wp\/v2\/posts\/5670\/revisions"}],"predecessor-version":[{"id":5694,"href":"https:\/\/teen.aiproinstitute.com\/zh\/wp-json\/wp\/v2\/posts\/5670\/revisions\/5694"}],"wp:attachment":[{"href":"https:\/\/teen.aiproinstitute.com\/zh\/wp-json\/wp\/v2\/media?parent=5670"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/teen.aiproinstitute.com\/zh\/wp-json\/wp\/v2\/categories?post=5670"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/teen.aiproinstitute.com\/zh\/wp-json\/wp\/v2\/tags?post=5670"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}