1172 lines
55 KiB
Python
1172 lines
55 KiB
Python
"""Dynamic Programming algorithm JS generators for generate.py"""
|
||
|
||
def js_climbing_stairs():
|
||
return r'''
|
||
const examples = [
|
||
{input: 5, label: '示例1: n=5'},
|
||
{input: 3, label: '示例2: n=3'},
|
||
{input: 10, label: '示例3: n=10'},
|
||
];
|
||
let steps, stepCtrl, n;
|
||
|
||
function buildSteps(total) {
|
||
n = total; steps = [];
|
||
const dp = new Array(n + 1).fill(0);
|
||
dp[0] = 0; dp[1] = 1; dp[2] = 2;
|
||
steps.push({stage:'init', msg:'初始化：dp[1]=1（1种），dp[2]=2（2种）', dp:[...dp], current:-1, from1:-1, from2:-1});
|
||
for (let i = 3; i <= n; i++) {
|
||
steps.push({stage:'calc', msg:`计算 dp[${i}] = dp[${i-1}] + dp[${i-2}] = ${dp[i-1]} + ${dp[i-2]} = ${dp[i-1]+dp[i-2]}`, dp:[...dp], current:i, from1:i-1, from2:i-2});
|
||
dp[i] = dp[i-1] + dp[i-2];
|
||
steps.push({stage:'fill', msg:`dp[${i}] = ${dp[i]}，已填充`, dp:[...dp], current:i, from1:i-1, from2:i-2});
|
||
}
|
||
steps.push({stage:'done', msg:`结果：爬到第 ${n} 阶有 ${dp[n]} 种方法`, dp:[...dp], current:n, from1:-1, from2:-1});
|
||
}
|
||
|
||
function render(step) {
|
||
const s = steps[step];
|
||
let viz = '<div style="display:flex;align-items:flex-end;gap:3px;margin:12px 0 8px;">';
|
||
for (let i = 1; i <= n; i++) {
|
||
const filled = s.dp[i] > 0;
|
||
const isCurrent = i === s.current;
|
||
const isFrom1 = i === s.from1;
|
||
const isFrom2 = i === s.from2;
|
||
let bg = '#e2e8f0', color = '#64748b';
|
||
if (isCurrent && (s.stage==='fill'||s.stage==='done')) { bg = 'var(--green)'; color = 'white'; }
|
||
else if (isCurrent) { bg = 'var(--orange)'; color = 'white'; }
|
||
else if (isFrom1) { bg = '#dbeafe'; color = '#1e40af'; }
|
||
else if (isFrom2) { bg = '#ede9fe'; color = '#5b21b6'; }
|
||
else if (filled) { bg = '#f0fdf4'; color = '#166534'; }
|
||
viz += `<div style="width:42px;height:${36+i*6}px;background:${bg};border-radius:6px 6px 0 0;display:flex;flex-direction:column;align-items:center;justify-content:flex-end;padding:4px 0;font-size:11px;font-weight:600;color:${color};transition:all 0.3s;">
|
||
<span style="font-size:13px;">${s.dp[i]||''}</span><span style="font-size:9px;opacity:0.7;">${i}</span></div>`;
|
||
}
|
||
viz += '</div>';
|
||
viz += '<div style="margin-top:12px;"><b>dp 表：</b></div>';
|
||
const dpHl = {};
|
||
if (s.current > 0) dpHl[s.current-1] = s.stage==='fill'?'green':'orange';
|
||
if (s.from1 > 0) dpHl[s.from1-1] = 'blue';
|
||
if (s.from2 > 0) dpHl[s.from2-1] = 'purple';
|
||
viz += renderArray(s.dp.slice(1), {highlights: dpHl});
|
||
if (s.stage === 'calc') {
|
||
viz += `<div class="formula-box" style="margin-top:8px;">dp[${s.current}] = dp[${s.from1}] + dp[${s.from2}] = ${s.dp[s.from1]} + ${s.dp[s.from2]}</div>`;
|
||
}
|
||
$('vizArea').innerHTML = viz;
|
||
|
||
$('detailContent').innerHTML = '<div class="calc-block">' + s.msg + '</div>';
|
||
if (s.stage !== 'done' && s.current > 0) {
|
||
$('detailContent').innerHTML += `<div class="current-answer">dp[${s.current}] = <b>${s.dp[s.current]}</b></div>`;
|
||
}
|
||
if (s.stage === 'done') {
|
||
$('resultContent').innerHTML = `<div class="final-answer">爬到第 ${n} 阶有 <b>${s.dp[n]}</b> 种方法</div>`;
|
||
}
|
||
$('hintText').textContent = s.msg;
|
||
const stages = ['init→初始化','calc→递推计算','fill→填充','done→完成'];
|
||
$('pipeline').innerHTML = stages.map(st => {
|
||
const [k,l] = st.split('→');
|
||
return `<span class="pipe-step ${s.stage===k?'active':''}">${l}</span>`;
|
||
}).join('<i>→</i>');
|
||
}
|
||
|
||
function init() {
|
||
const sel = $('exampleSelect');
|
||
examples.forEach((e,i) => { sel.innerHTML += `<option value="${i}">${e.label}</option>`; });
|
||
$('inputArea').value = 'n=5';
|
||
buildSteps(examples[0].input);
|
||
stepCtrl = new StepController({onStep: render});
|
||
stepCtrl.setSteps(steps.map((_,i)=>i));
|
||
$('stepInfo').textContent = '步骤 1 / ' + steps.length;
|
||
stepCtrl.onStep = (idx) => { render(idx); $('stepInfo').textContent = `步骤 ${idx+1} / ${steps.length}`; };
|
||
$('applyBtn').onclick = () => {
|
||
const m = $('inputArea').value.match(/n=(\d+)/);
|
||
if (!m) { alert('格式: n=5'); return; }
|
||
buildSteps(parseInt(m[1]));
|
||
stepCtrl.setSteps(steps.map((_,i)=>i)); render(0); $('stepInfo').textContent = '步骤 1 / ' + steps.length;
|
||
};
|
||
$('exampleSelect').onchange = () => {
|
||
const e = examples[parseInt($('exampleSelect').value)];
|
||
$('inputArea').value = `n=${e.input}`;
|
||
buildSteps(e.input); stepCtrl.setSteps(steps.map((_,i)=>i)); render(0);
|
||
};
|
||
$('prevBtn').onclick = () => stepCtrl.prev();
|
||
$('nextBtn').onclick = () => stepCtrl.next();
|
||
$('jumpBtn').onclick = () => stepCtrl.jumpToEnd();
|
||
$('autoBtn').onclick = () => { const on = stepCtrl.toggleAuto(); $('autoBtn').textContent = on ? '暂停' : '自动播放'; };
|
||
$('resetBtn').onclick = () => { stepCtrl.reset(); $('autoBtn').textContent = '自动播放'; };
|
||
}
|
||
init();
|
||
$('codeArea').innerHTML = renderCode(`def climbStairs(n):
|
||
if n <= 2: return n
|
||
dp = [0] * (n + 1)
|
||
dp[1], dp[2] = 1, 2
|
||
for i in range(3, n + 1):
|
||
dp[i] = dp[i-1] + dp[i-2]
|
||
return dp[n]`, {lang:'Python'});
|
||
'''
|
||
|
||
|
||
def js_pascals_triangle():
|
||
return r'''
|
||
const examples = [
|
||
{input: 5, label: '示例1: numRows=5'},
|
||
{input: 1, label: '示例2: numRows=1'},
|
||
{input: 7, label: '示例3: numRows=7'},
|
||
];
|
||
let steps, stepCtrl, numRows;
|
||
|
||
function buildSteps(n) {
|
||
numRows = n; steps = [];
|
||
const triangle = [];
|
||
steps.push({stage:'init', msg:'开始生成杨辉三角，每行首尾为1，中间元素 = 上方两数之和', triangle:[], row:-1, col:-1});
|
||
for (let i = 0; i < numRows; i++) {
|
||
const row = new Array(i + 1).fill(1);
|
||
steps.push({stage:'newRow', msg:`第 ${i} 行共 ${i+1} 个元素，首尾均为 1`, triangle:JSON.parse(JSON.stringify(triangle)), row:i, col:-1});
|
||
for (let j = 1; j < i; j++) {
|
||
row[j] = triangle[i-1][j-1] + triangle[i-1][j];
|
||
steps.push({stage:'calc', msg:`triangle[${i}][${j}] = triangle[${i-1}][${j-1}] + triangle[${i-1}][${j}] = ${triangle[i-1][j-1]} + ${triangle[i-1][j]} = ${row[j]}`, triangle:JSON.parse(JSON.stringify(triangle)), row:i, col:j});
|
||
}
|
||
triangle.push([...row]);
|
||
steps.push({stage:'fillRow', msg:`第 ${i} 行填充完毕：[${row.join(', ')}]`, triangle:JSON.parse(JSON.stringify(triangle)), row:i, col:i});
|
||
}
|
||
steps.push({stage:'done', msg:`杨辉三角生成完毕，共 ${numRows} 行`, triangle:JSON.parse(JSON.stringify(triangle)), row:-1, col:-1});
|
||
}
|
||
|
||
function render(step) {
|
||
const s = steps[step];
|
||
let viz = '<div style="display:flex;flex-direction:column;align-items:center;gap:4px;padding:12px 0;">';
|
||
const maxRow = s.triangle.length;
|
||
for (let i = 0; i < maxRow; i++) {
|
||
const gap = Math.max(2, (maxRow - i) * 6);
|
||
viz += `<div style="display:flex;gap:${gap}px;justify-content:center;">`;
|
||
for (let j = 0; j <= i; j++) {
|
||
const val = s.triangle[i][j];
|
||
let cls = 'default';
|
||
if (i === s.row && s.stage !== 'done') {
|
||
cls = j === s.col ? 'orange' : 'green';
|
||
}
|
||
if (s.stage === 'calc' && i === s.row - 1 && (j === s.col - 1 || j === s.col)) {
|
||
cls = 'blue';
|
||
}
|
||
viz += `<span class="chip ${cls}" style="min-width:32px;height:28px;font-size:13px;">${val}</span>`;
|
||
}
|
||
viz += '</div>';
|
||
}
|
||
if (s.stage === 'newRow' || s.stage === 'calc') {
|
||
viz += `<div style="display:flex;gap:2px;justify-content:center;margin-top:2px;">`;
|
||
for (let j = 0; j <= s.row; j++) {
|
||
viz += `<span style="min-width:32px;height:28px;border:2px dashed var(--orange);border-radius:10px;display:flex;align-items:center;justify-content:center;font-size:13px;color:var(--text-muted);">?</span>`;
|
||
}
|
||
viz += '</div>';
|
||
}
|
||
viz += '</div>';
|
||
$('vizArea').innerHTML = viz;
|
||
|
||
let detail = '<div class="calc-block">' + s.msg + '</div>';
|
||
if (s.triangle.length > 0) {
|
||
detail += '<div style="margin-top:8px;"><b>当前三角：</b></div>';
|
||
s.triangle.forEach((row, i) => {
|
||
detail += `<div style="margin:2px 0;"><code>${i}: [${row.join(', ')}]</code></div>`;
|
||
});
|
||
}
|
||
$('detailContent').innerHTML = detail;
|
||
|
||
if (s.stage === 'done') {
|
||
$('resultContent').innerHTML = `<div class="final-answer">杨辉三角 <b>${numRows}</b> 行已生成</div>`;
|
||
}
|
||
$('hintText').textContent = s.msg;
|
||
const stages = ['init→开始','newRow→新行','calc→计算','fillRow→填充','done→完成'];
|
||
$('pipeline').innerHTML = stages.map(st => {
|
||
const [k,l] = st.split('→');
|
||
return `<span class="pipe-step ${s.stage===k?'active':''}">${l}</span>`;
|
||
}).join('<i>→</i>');
|
||
}
|
||
|
||
function init() {
|
||
const sel = $('exampleSelect');
|
||
examples.forEach((e,i) => { sel.innerHTML += `<option value="${i}">${e.label}</option>`; });
|
||
$('inputArea').value = 'numRows=5';
|
||
buildSteps(examples[0].input);
|
||
stepCtrl = new StepController({onStep: render});
|
||
stepCtrl.setSteps(steps.map((_,i)=>i));
|
||
$('stepInfo').textContent = '步骤 1 / ' + steps.length;
|
||
stepCtrl.onStep = (idx) => { render(idx); $('stepInfo').textContent = `步骤 ${idx+1} / ${steps.length}`; };
|
||
$('applyBtn').onclick = () => {
|
||
const m = $('inputArea').value.match(/numRows=(\d+)/);
|
||
if (!m) { alert('格式: numRows=5'); return; }
|
||
buildSteps(parseInt(m[1]));
|
||
stepCtrl.setSteps(steps.map((_,i)=>i)); render(0); $('stepInfo').textContent = '步骤 1 / ' + steps.length;
|
||
};
|
||
$('exampleSelect').onchange = () => {
|
||
const e = examples[parseInt($('exampleSelect').value)];
|
||
$('inputArea').value = `numRows=${e.input}`;
|
||
buildSteps(e.input); stepCtrl.setSteps(steps.map((_,i)=>i)); render(0);
|
||
};
|
||
$('prevBtn').onclick = () => stepCtrl.prev();
|
||
$('nextBtn').onclick = () => stepCtrl.next();
|
||
$('jumpBtn').onclick = () => stepCtrl.jumpToEnd();
|
||
$('autoBtn').onclick = () => { const on = stepCtrl.toggleAuto(); $('autoBtn').textContent = on ? '暂停' : '自动播放'; };
|
||
$('resetBtn').onclick = () => { stepCtrl.reset(); $('autoBtn').textContent = '自动播放'; };
|
||
}
|
||
init();
|
||
$('codeArea').innerHTML = renderCode(`def generate(numRows):
|
||
triangle = []
|
||
for i in range(numRows):
|
||
row = [1] * (i + 1)
|
||
for j in range(1, i):
|
||
row[j] = triangle[i-1][j-1] + triangle[i-1][j]
|
||
triangle.append(row)
|
||
return triangle`, {lang:'Python'});
|
||
'''
|
||
|
||
|
||
def js_house_robber():
|
||
return r'''
|
||
const examples = [
|
||
{input: [1,2,3,1], label: '示例1: [1,2,3,1]'},
|
||
{input: [2,7,9,3,1], label: '示例2: [2,7,9,3,1]'},
|
||
{input: [2,1,1,2], label: '示例3: [2,1,1,2]'},
|
||
];
|
||
let nums, steps, stepCtrl;
|
||
|
||
function buildSteps(arr) {
|
||
nums = [...arr]; steps = [];
|
||
const n = nums.length;
|
||
if (n === 0) { steps.push({stage:'done', msg:'数组为空', dp:[], rob:[]}); return; }
|
||
const dp = new Array(n).fill(0);
|
||
const rob = new Array(n).fill(false);
|
||
dp[0] = nums[0]; rob[0] = true;
|
||
steps.push({stage:'init', msg:`dp[0] = ${nums[0]}（只有一间房子，必须偷）`, dp:[...dp], rob:[...rob], current:0, choice:null});
|
||
if (n > 1) {
|
||
if (nums[1] > nums[0]) { dp[1] = nums[1]; rob[1] = true; rob[0] = false; }
|
||
else { dp[1] = nums[0]; rob[1] = false; }
|
||
steps.push({stage:'init2', msg:`dp[1] = max(${nums[0]}, ${nums[1]}) = ${dp[1]}`, dp:[...dp], rob:[...rob], current:1, choice:'max'});
|
||
}
|
||
for (let i = 2; i < n; i++) {
|
||
const notRob = dp[i-1];
|
||
const doRob = dp[i-2] + nums[i];
|
||
steps.push({stage:'compare', msg:`dp[${i}]：不偷 = dp[${i-1}] = ${notRob}，偷 = dp[${i-2}] + nums[${i}] = ${dp[i-2]} + ${nums[i]} = ${doRob}`, dp:[...dp], rob:[...rob], current:i, choice:'comparing', notRob, doRob});
|
||
if (doRob > notRob) {
|
||
dp[i] = doRob; rob[i] = true;
|
||
steps.push({stage:'rob', msg:`偷第 ${i} 间更优：dp[${i}] = ${doRob}`, dp:[...dp], rob:[...rob], current:i, choice:'rob'});
|
||
} else {
|
||
dp[i] = notRob; rob[i] = false;
|
||
steps.push({stage:'skip', msg:`不偷第 ${i} 间更优：dp[${i}] = ${notRob}`, dp:[...dp], rob:[...rob], current:i, choice:'skip'});
|
||
}
|
||
}
|
||
steps.push({stage:'done', msg:`最多可以偷取 ${dp[n-1]}`, dp:[...dp], rob:[...rob], current:n-1, choice:'done'});
|
||
}
|
||
|
||
function render(step) {
|
||
const s = steps[step];
|
||
let viz = '<div style="display:flex;gap:6px;margin:8px 0;">';
|
||
nums.forEach((v, i) => {
|
||
const isCurrent = i === s.current && s.stage !== 'done';
|
||
const isRobbed = s.rob[i];
|
||
let bg = '#e2e8f0', color = '#475569', border = '2px solid #cbd5e1';
|
||
if (isRobbed && s.stage === 'done') { bg = '#dcfce7'; color = '#166534'; border = '2px solid #16a34a'; }
|
||
else if (isCurrent && s.choice === 'rob') { bg = '#fef3c7'; color = '#92400e'; border = '2px solid #f59e0b'; }
|
||
else if (isCurrent) { bg = '#dbeafe'; color = '#1e40af'; border = '2px solid #3b82f6'; }
|
||
else if (isRobbed) { bg = '#dcfce7'; color = '#166534'; border = '2px solid #86efac'; }
|
||
viz += `<div style="width:56px;padding:8px 4px;background:${bg};border:${border};border-radius:10px;text-align:center;font-size:13px;font-weight:600;color:${color};transition:all 0.3s;">
|
||
<div style="font-size:16px;margin-bottom:2px;">🏠</div>
|
||
<div>${v}</div>
|
||
<div style="font-size:10px;color:${isRobbed?'#16a34a':'#94a3b8'};">${isRobbed?'偷':'·'}</div>
|
||
</div>`;
|
||
});
|
||
viz += '</div>';
|
||
viz += '<div style="margin-top:12px;"><b>dp 值：</b></div>';
|
||
const dpHl = {};
|
||
if (s.current >= 0) dpHl[s.current] = s.choice==='rob'?'orange':'blue';
|
||
viz += renderArray(s.dp, {highlights: dpHl});
|
||
if (s.stage === 'compare') {
|
||
viz += `<div class="formula-box" style="margin-top:8px;">dp[${s.current}] = max(不偷=${s.notRob}, 偷=${s.doRob})</div>`;
|
||
}
|
||
$('vizArea').innerHTML = viz;
|
||
|
||
$('detailContent').innerHTML = '<div class="calc-block">' + s.msg + '</div>';
|
||
if (s.dp.length > 0) {
|
||
$('detailContent').innerHTML += `<div class="current-answer">当前最大金额：<b>${s.dp[Math.max(0,s.current)]}</b></div>`;
|
||
}
|
||
if (s.stage === 'done') {
|
||
$('resultContent').innerHTML = `<div class="final-answer">最多可以偷取 <b>${s.dp[nums.length-1]}</b></div>`;
|
||
}
|
||
$('hintText').textContent = s.msg;
|
||
const stages = ['init→初始化','init2→初始化','compare→比较','rob→偷','skip→不偷','done→完成'];
|
||
$('pipeline').innerHTML = stages.map(st => {
|
||
const [k,l] = st.split('→');
|
||
return `<span class="pipe-step ${s.stage===k?'active':''}">${l}</span>`;
|
||
}).join('<i>→</i>');
|
||
}
|
||
|
||
function init() {
|
||
const sel = $('exampleSelect');
|
||
examples.forEach((e,i) => { sel.innerHTML += `<option value="${i}">${e.label}</option>`; });
|
||
$('inputArea').value = '[1,2,3,1]';
|
||
buildSteps(examples[0].input);
|
||
stepCtrl = new StepController({onStep: render});
|
||
stepCtrl.setSteps(steps.map((_,i)=>i));
|
||
$('stepInfo').textContent = '步骤 1 / ' + steps.length;
|
||
stepCtrl.onStep = (idx) => { render(idx); $('stepInfo').textContent = `步骤 ${idx+1} / ${steps.length}`; };
|
||
$('applyBtn').onclick = () => {
|
||
try { const arr = JSON.parse($('inputArea').value); buildSteps(arr); stepCtrl.setSteps(steps.map((_,i)=>i)); render(0); $('stepInfo').textContent = '步骤 1 / ' + steps.length; }
|
||
catch(e) { alert('请输入合法 JSON 数组'); }
|
||
};
|
||
$('exampleSelect').onchange = () => {
|
||
const e = examples[parseInt($('exampleSelect').value)];
|
||
$('inputArea').value = JSON.stringify(e.input);
|
||
buildSteps(e.input); stepCtrl.setSteps(steps.map((_,i)=>i)); render(0);
|
||
};
|
||
$('prevBtn').onclick = () => stepCtrl.prev();
|
||
$('nextBtn').onclick = () => stepCtrl.next();
|
||
$('jumpBtn').onclick = () => stepCtrl.jumpToEnd();
|
||
$('autoBtn').onclick = () => { const on = stepCtrl.toggleAuto(); $('autoBtn').textContent = on ? '暂停' : '自动播放'; };
|
||
$('resetBtn').onclick = () => { stepCtrl.reset(); $('autoBtn').textContent = '自动播放'; };
|
||
}
|
||
init();
|
||
$('codeArea').innerHTML = renderCode(`def rob(nums):
|
||
n = len(nums)
|
||
if n == 0: return 0
|
||
if n == 1: return nums[0]
|
||
dp = [0] * n
|
||
dp[0], dp[1] = nums[0], max(nums[0], nums[1])
|
||
for i in range(2, n):
|
||
dp[i] = max(dp[i-1], dp[i-2] + nums[i])
|
||
return dp[-1]`, {lang:'Python'});
|
||
'''
|
||
|
||
|
||
def js_perfect_squares():
|
||
return r'''
|
||
const examples = [
|
||
{input: 12, label: '示例1: n=12'},
|
||
{input: 13, label: '示例2: n=13'},
|
||
{input: 4, label: '示例3: n=4'},
|
||
];
|
||
let steps, stepCtrl, n;
|
||
|
||
function buildSteps(target) {
|
||
n = target; steps = [];
|
||
const dp = new Array(n + 1).fill(Infinity);
|
||
dp[0] = 0;
|
||
steps.push({stage:'init', msg:`初始化 dp[0]=0，其余为 ∞`, dp:[...dp], current:-1, bestJ:-1, candidates:[]});
|
||
for (let i = 1; i <= n; i++) {
|
||
let bestJ = 1, bestVal = Infinity;
|
||
const candidates = [];
|
||
for (let j = 1; j * j <= i; j++) {
|
||
candidates.push({j, sq: j*j, val: dp[i - j*j] + 1});
|
||
if (dp[i - j*j] + 1 < bestVal) { bestVal = dp[i - j*j] + 1; bestJ = j; }
|
||
}
|
||
steps.push({stage:'try', msg:`计算 dp[${i}]：尝试所有平方数`, dp:[...dp], current:i, bestJ:-1, candidates});
|
||
dp[i] = bestVal;
|
||
steps.push({stage:'fill', msg:`dp[${i}] = dp[${i-bestJ*bestJ}]+1 = ${dp[i-bestJ*bestJ]}+1 = ${bestVal}（选 ${bestJ}²=${bestJ*bestJ}）`, dp:[...dp], current:i, bestJ, candidates});
|
||
}
|
||
steps.push({stage:'done', msg:`${n} 最少需要 ${dp[n]} 个完全平方数`, dp:[...dp], current:n, bestJ:-1, candidates:[]});
|
||
}
|
||
|
||
function render(step) {
|
||
const s = steps[step];
|
||
let viz = '<div style="margin-top:8px;"><b>dp 表：</b></div>';
|
||
viz += '<div style="display:flex;flex-wrap:wrap;gap:4px;margin:8px 0;">';
|
||
for (let i = 0; i <= n; i++) {
|
||
let cls = 'default';
|
||
if (i === s.current) cls = s.stage==='try'?'orange':'green';
|
||
if (s.bestJ > 0 && i === s.current - s.bestJ*s.bestJ) cls = 'blue';
|
||
const val = s.dp[i] === Infinity ? '∞' : s.dp[i];
|
||
viz += `<span class="chip-group"><span class="chip ${cls}" style="min-width:32px;font-size:13px;">${val}</span><span class="chip-index">${i}</span></span>`;
|
||
}
|
||
viz += '</div>';
|
||
if (s.candidates && s.candidates.length > 0) {
|
||
viz += '<div style="margin-top:8px;"><b>候选平方数：</b></div>';
|
||
viz += '<div style="display:flex;gap:6px;flex-wrap:wrap;margin:4px 0;">';
|
||
s.candidates.forEach(c => {
|
||
const isBest = c.j === s.bestJ;
|
||
const bg = isBest ? '#dcfce7' : '#f0f9ff';
|
||
const bd = isBest ? '2px solid #16a34a' : '1px solid #cbd5e1';
|
||
viz += `<span style="padding:4px 10px;background:${bg};border:${bd};border-radius:8px;font-size:13px;">${c.j}²=${c.sq} → dp[${s.current-c.sq}]+1=${c.val===Infinity?'∞':c.val}</span>`;
|
||
});
|
||
viz += '</div>';
|
||
}
|
||
$('vizArea').innerHTML = viz;
|
||
|
||
$('detailContent').innerHTML = '<div class="calc-block">' + s.msg + '</div>';
|
||
if (s.current > 0 && s.dp[s.current] !== Infinity) {
|
||
$('detailContent').innerHTML += `<div class="current-answer">dp[${s.current}] = <b>${s.dp[s.current]}</b></div>`;
|
||
}
|
||
if (s.stage === 'done') {
|
||
$('resultContent').innerHTML = `<div class="final-answer">${n} 最少需要 <b>${s.dp[n]}</b> 个完全平方数</div>`;
|
||
}
|
||
$('hintText').textContent = s.msg;
|
||
const stages = ['init→初始化','try→尝试','fill→填充','done→完成'];
|
||
$('pipeline').innerHTML = stages.map(st => {
|
||
const [k,l] = st.split('→');
|
||
return `<span class="pipe-step ${s.stage===k?'active':''}">${l}</span>`;
|
||
}).join('<i>→</i>');
|
||
}
|
||
|
||
function init() {
|
||
const sel = $('exampleSelect');
|
||
examples.forEach((e,i) => { sel.innerHTML += `<option value="${i}">${e.label}</option>`; });
|
||
$('inputArea').value = 'n=12';
|
||
buildSteps(examples[0].input);
|
||
stepCtrl = new StepController({onStep: render});
|
||
stepCtrl.setSteps(steps.map((_,i)=>i));
|
||
$('stepInfo').textContent = '步骤 1 / ' + steps.length;
|
||
stepCtrl.onStep = (idx) => { render(idx); $('stepInfo').textContent = `步骤 ${idx+1} / ${steps.length}`; };
|
||
$('applyBtn').onclick = () => {
|
||
const m = $('inputArea').value.match(/n=(\d+)/);
|
||
if (!m) { alert('格式: n=12'); return; }
|
||
buildSteps(parseInt(m[1]));
|
||
stepCtrl.setSteps(steps.map((_,i)=>i)); render(0); $('stepInfo').textContent = '步骤 1 / ' + steps.length;
|
||
};
|
||
$('exampleSelect').onchange = () => {
|
||
const e = examples[parseInt($('exampleSelect').value)];
|
||
$('inputArea').value = `n=${e.input}`;
|
||
buildSteps(e.input); stepCtrl.setSteps(steps.map((_,i)=>i)); render(0);
|
||
};
|
||
$('prevBtn').onclick = () => stepCtrl.prev();
|
||
$('nextBtn').onclick = () => stepCtrl.next();
|
||
$('jumpBtn').onclick = () => stepCtrl.jumpToEnd();
|
||
$('autoBtn').onclick = () => { const on = stepCtrl.toggleAuto(); $('autoBtn').textContent = on ? '暂停' : '自动播放'; };
|
||
$('resetBtn').onclick = () => { stepCtrl.reset(); $('autoBtn').textContent = '自动播放'; };
|
||
}
|
||
init();
|
||
$('codeArea').innerHTML = renderCode(`def numSquares(n):
|
||
dp = [float('inf')] * (n + 1)
|
||
dp[0] = 0
|
||
for i in range(1, n + 1):
|
||
j = 1
|
||
while j * j <= i:
|
||
dp[i] = min(dp[i], dp[i - j*j] + 1)
|
||
j += 1
|
||
return dp[n]`, {lang:'Python'});
|
||
'''
|
||
|
||
|
||
def js_coin_change():
|
||
return r'''
|
||
const examples = [
|
||
{input: [1,2,5], amount: 11, label: '示例1: coins=[1,2,5], amount=11'},
|
||
{input: [2], amount: 3, label: '示例2: coins=[2], amount=3'},
|
||
{input: [1], amount: 0, label: '示例3: coins=[1], amount=0'},
|
||
];
|
||
let coins, amount, steps, stepCtrl;
|
||
|
||
function buildSteps(c, amt) {
|
||
coins = [...c]; amount = amt; steps = [];
|
||
const dp = new Array(amt + 1).fill(Infinity);
|
||
dp[0] = 0;
|
||
steps.push({stage:'init', msg:'初始化 dp[0]=0，其余为 ∞', dp:[...dp], current:-1, bestCoin:-1, candidates:[]});
|
||
for (let i = 1; i <= amt; i++) {
|
||
let bestCoin = -1, bestVal = Infinity;
|
||
const candidates = [];
|
||
for (const coin of coins) {
|
||
if (coin <= i) {
|
||
const val = dp[i - coin] + 1;
|
||
candidates.push({coin, prev: i - coin, val});
|
||
if (val < bestVal) { bestVal = val; bestCoin = coin; }
|
||
}
|
||
}
|
||
steps.push({stage:'try', msg:`计算 dp[${i}]：尝试所有硬币`, dp:[...dp], current:i, bestCoin:-1, candidates});
|
||
dp[i] = bestVal;
|
||
if (bestCoin > 0) {
|
||
steps.push({stage:'fill', msg:`dp[${i}] = dp[${i-bestCoin}]+1 = ${dp[i-bestCoin]}+1 = ${bestVal}（选硬币 ${bestCoin}）`, dp:[...dp], current:i, bestCoin, candidates});
|
||
} else {
|
||
steps.push({stage:'fill', msg:`dp[${i}] = ∞（无法凑出）`, dp:[...dp], current:i, bestCoin:-1, candidates});
|
||
}
|
||
}
|
||
steps.push({stage:'done', msg:dp[amt]===Infinity?`无法凑出金额 ${amt}`:`凑出金额 ${amt} 最少需要 ${dp[amt]} 枚硬币`, dp:[...dp], current:amt, bestCoin:-1, candidates:[]});
|
||
}
|
||
|
||
function render(step) {
|
||
const s = steps[step];
|
||
let viz = '<div style="margin-top:8px;"><b>金额轴 & dp 表：</b></div>';
|
||
viz += '<div style="display:flex;flex-wrap:wrap;gap:4px;margin:8px 0;">';
|
||
for (let i = 0; i <= amount; i++) {
|
||
const cls = i === s.current ? (s.stage==='try'?'orange':'green') : 'default';
|
||
const val = s.dp[i] === Infinity ? '∞' : s.dp[i];
|
||
viz += `<span class="chip-group"><span class="chip ${cls}" style="min-width:36px;font-size:13px;">${val}</span><span class="chip-index">${i}</span></span>`;
|
||
}
|
||
viz += '</div>';
|
||
viz += '<div style="margin-top:8px;"><b>硬币面额：</b></div>';
|
||
viz += '<div style="display:flex;gap:6px;margin:4px 0;">';
|
||
coins.forEach(c => {
|
||
const isBest = c === s.bestCoin;
|
||
const cls = isBest ? 'green' : 'default';
|
||
viz += `<span class="chip ${cls}" style="border-radius:50%;min-width:36px;height:36px;">${c}</span>`;
|
||
});
|
||
viz += '</div>';
|
||
if (s.candidates && s.candidates.length > 0) {
|
||
viz += '<div style="margin-top:8px;"><b>候选：</b></div>';
|
||
viz += '<div style="display:flex;gap:6px;flex-wrap:wrap;margin:4px 0;">';
|
||
s.candidates.forEach(c => {
|
||
const isBest = c.coin === s.bestCoin;
|
||
const bg = isBest ? '#dcfce7' : '#f0f9ff';
|
||
const bd = isBest ? '2px solid #16a34a' : '1px solid #cbd5e1';
|
||
viz += `<span style="padding:4px 10px;background:${bg};border:${bd};border-radius:8px;font-size:13px;">用${c.coin} → dp[${c.prev}]+1=${c.val===Infinity?'∞':c.val}</span>`;
|
||
});
|
||
viz += '</div>';
|
||
}
|
||
$('vizArea').innerHTML = viz;
|
||
|
||
$('detailContent').innerHTML = '<div class="calc-block">' + s.msg + '</div>';
|
||
if (s.current >= 0 && s.dp[s.current] !== Infinity) {
|
||
$('detailContent').innerHTML += `<div class="current-answer">dp[${s.current}] = <b>${s.dp[s.current]}</b></div>`;
|
||
}
|
||
if (s.stage === 'done') {
|
||
if (s.dp[amount] === Infinity) {
|
||
$('resultContent').innerHTML = '<div class="final-answer" style="border-color:#f87171;background:#fef2f2;">无法凑出该金额，返回 <b>-1</b></div>';
|
||
} else {
|
||
$('resultContent').innerHTML = `<div class="final-answer">最少需要 <b>${s.dp[amount]}</b> 枚硬币</div>`;
|
||
}
|
||
}
|
||
$('hintText').textContent = s.msg;
|
||
const stages = ['init→初始化','try→尝试','fill→填充','done→完成'];
|
||
$('pipeline').innerHTML = stages.map(st => {
|
||
const [k,l] = st.split('→');
|
||
return `<span class="pipe-step ${s.stage===k?'active':''}">${l}</span>`;
|
||
}).join('<i>→</i>');
|
||
}
|
||
|
||
function init() {
|
||
const sel = $('exampleSelect');
|
||
examples.forEach((e,i) => { sel.innerHTML += `<option value="${i}">${e.label}</option>`; });
|
||
$('inputArea').value = 'coins=[1,2,5], amount=11';
|
||
buildSteps(examples[0].input, examples[0].amount);
|
||
stepCtrl = new StepController({onStep: render});
|
||
stepCtrl.setSteps(steps.map((_,i)=>i));
|
||
$('stepInfo').textContent = '步骤 1 / ' + steps.length;
|
||
stepCtrl.onStep = (idx) => { render(idx); $('stepInfo').textContent = `步骤 ${idx+1} / ${steps.length}`; };
|
||
$('applyBtn').onclick = () => {
|
||
const m = $('inputArea').value.match(/coins=\[([^\]]+)\].*amount=(\d+)/);
|
||
if (!m) { alert('格式: coins=[1,2,5], amount=11'); return; }
|
||
const c = m[1].split(',').map(Number);
|
||
buildSteps(c, parseInt(m[2]));
|
||
stepCtrl.setSteps(steps.map((_,i)=>i)); render(0); $('stepInfo').textContent = '步骤 1 / ' + steps.length;
|
||
};
|
||
$('exampleSelect').onchange = () => {
|
||
const e = examples[parseInt($('exampleSelect').value)];
|
||
$('inputArea').value = `coins=[${e.input}], amount=${e.amount}`;
|
||
buildSteps(e.input, e.amount); stepCtrl.setSteps(steps.map((_,i)=>i)); render(0);
|
||
};
|
||
$('prevBtn').onclick = () => stepCtrl.prev();
|
||
$('nextBtn').onclick = () => stepCtrl.next();
|
||
$('jumpBtn').onclick = () => stepCtrl.jumpToEnd();
|
||
$('autoBtn').onclick = () => { const on = stepCtrl.toggleAuto(); $('autoBtn').textContent = on ? '暂停' : '自动播放'; };
|
||
$('resetBtn').onclick = () => { stepCtrl.reset(); $('autoBtn').textContent = '自动播放'; };
|
||
}
|
||
init();
|
||
$("codeArea").innerHTML = renderCode(
|
||
`def coinChange(coins, amount):\n` +
|
||
` dp = [float('inf')] * (amount + 1)\n` +
|
||
` dp[0] = 0\n` +
|
||
` for i in range(1, amount + 1):\n` +
|
||
` for coin in coins:\n` +
|
||
` if coin <= i:\n` +
|
||
` dp[i] = min(dp[i], dp[i - coin] + 1)\n` +
|
||
` return dp[amount] if dp[amount] != float('inf') else -1`,
|
||
{lang:'Python'}
|
||
);
|
||
'''
|
||
|
||
|
||
def js_word_break():
|
||
return r'''
|
||
const examples = [
|
||
{input: 'leetcode', dict: ['leet','code'], label: '示例1: "leetcode", ["leet","code"]'},
|
||
{input: 'applepenapple', dict: ['apple','pen'], label: '示例2: "applepenapple", ["apple","pen"]'},
|
||
{input: 'catsandog', dict: ['cats','dog','sand','and','cat'], label: '示例3: "catsandog"'},
|
||
];
|
||
let s, wordDict, steps, stepCtrl;
|
||
|
||
function buildSteps(str, dict) {
|
||
s = str; wordDict = dict; steps = [];
|
||
const n = str.length;
|
||
const dp = new Array(n + 1).fill(false);
|
||
dp[0] = true;
|
||
steps.push({stage:'init', msg:'dp[0]=true（空串可分割）', dp:[...dp], i:-1, j:-1, matched:false, matchWord:''});
|
||
for (let i = 1; i <= n; i++) {
|
||
steps.push({stage:'checkI', msg:`检查 dp[${i}]：能否将 s[0:${i}]="${s.slice(0,i)}" 分割`, dp:[...dp], i, j:-1, matched:false, matchWord:''});
|
||
for (let j = 0; j < i; j++) {
|
||
const sub = s.slice(j, i);
|
||
const inDict = dp[j] && dict.includes(sub);
|
||
if (dp[j]) {
|
||
steps.push({stage:'tryJ', msg:`dp[${j}]=true，检查 s[${j}:${i}]="${sub}" ${inDict?'在字典中 ✅':'不在字典中 ❌'}`, dp:[...dp], i, j, matched:inDict, matchWord:sub});
|
||
if (inDict) {
|
||
dp[i] = true;
|
||
steps.push({stage:'found', msg:`dp[${j}]=true 且 "${sub}" 在字典中 → dp[${i}]=true`, dp:[...dp], i, j, matched:true, matchWord:sub});
|
||
break;
|
||
}
|
||
}
|
||
}
|
||
if (!dp[i]) {
|
||
steps.push({stage:'fail', msg:`dp[${i}]=false（无法分割 s[0:${i}]）`, dp:[...dp], i, j:-1, matched:false, matchWord:''});
|
||
}
|
||
}
|
||
steps.push({stage:'done', msg:dp[n]?`"${s}" 可以被分割`:`"${s}" 无法被分割`, dp:[...dp], i:n, j:-1, matched:dp[n], matchWord:''});
|
||
}
|
||
|
||
function render(step) {
|
||
const st = steps[step];
|
||
let viz = '<div style="margin-top:8px;"><b>字符串：</b></div>';
|
||
viz += '<div style="display:flex;gap:2px;margin:8px 0;">';
|
||
for (let i = 0; i < s.length; i++) {
|
||
const inRange = st.j >= 0 && i >= st.j && i < st.i;
|
||
const cls = inRange ? (st.matched ? 'green' : 'orange') : 'default';
|
||
viz += `<span class="chip ${cls}" style="min-width:28px;font-size:14px;">${s[i]}</span>`;
|
||
}
|
||
viz += '</div>';
|
||
viz += '<div style="display:flex;gap:2px;margin-top:-4px;">';
|
||
for (let i = 0; i <= s.length; i++) {
|
||
viz += `<span style="min-width:28px;text-align:center;font-size:10px;color:var(--text-muted);">${i}</span>`;
|
||
}
|
||
viz += '</div>';
|
||
viz += '<div style="margin-top:8px;"><b>dp 状态：</b></div>';
|
||
viz += '<div style="display:flex;gap:3px;flex-wrap:wrap;margin:4px 0;">';
|
||
for (let i = 0; i <= s.length; i++) {
|
||
const isCur = i === st.i;
|
||
const cls = isCur ? 'orange' : (st.dp[i] ? 'green' : 'default');
|
||
viz += `<span class="chip ${cls}" style="min-width:32px;font-size:12px;height:28px;">${st.dp[i]?'T':'F'}</span>`;
|
||
}
|
||
viz += '</div>';
|
||
viz += '<div style="margin-top:8px;"><b>字典：</b></div>';
|
||
viz += '<div style="display:flex;gap:4px;flex-wrap:wrap;margin:4px 0;">';
|
||
wordDict.forEach(w => {
|
||
const isMatch = w === st.matchWord;
|
||
const cls = isMatch ? 'green' : 'default';
|
||
viz += `<span class="chip ${cls}" style="min-width:auto;padding:4px 10px;font-size:13px;">"${w}"</span>`;
|
||
});
|
||
viz += '</div>';
|
||
$('vizArea').innerHTML = viz;
|
||
|
||
$('detailContent').innerHTML = '<div class="calc-block">' + st.msg + '</div>';
|
||
if (st.stage === 'done') {
|
||
$('resultContent').innerHTML = `<div class="final-answer">${st.matched ? `"${s}" 可以被分割 ✅` : `"${s}" 无法被分割 ❌`}</div>`;
|
||
}
|
||
$('hintText').textContent = st.msg;
|
||
const stages = ['init→初始化','checkI→检查','tryJ→尝试','found→找到','fail→失败','done→完成'];
|
||
$('pipeline').innerHTML = stages.map(st2 => {
|
||
const [k,l] = st2.split('→');
|
||
return `<span class="pipe-step ${st.stage===k?'active':''}">${l}</span>`;
|
||
}).join('<i>→</i>');
|
||
}
|
||
|
||
function init() {
|
||
const sel = $('exampleSelect');
|
||
examples.forEach((e,i) => { sel.innerHTML += `<option value="${i}">${e.label}</option>`; });
|
||
$('inputArea').value = 's="leetcode", dict=["leet","code"]';
|
||
buildSteps(examples[0].input, examples[0].dict);
|
||
stepCtrl = new StepController({onStep: render});
|
||
stepCtrl.setSteps(steps.map((_,i)=>i));
|
||
$('stepInfo').textContent = '步骤 1 / ' + steps.length;
|
||
stepCtrl.onStep = (idx) => { render(idx); $('stepInfo').textContent = `步骤 ${idx+1} / ${steps.length}`; };
|
||
$('applyBtn').onclick = () => {
|
||
const m = $('inputArea').value.match(/s="([^"]+)"\s*,\s*dict=\[([^\]]+)\]/);
|
||
if (!m) { alert('格式: s="leetcode", dict=["leet","code"]'); return; }
|
||
const dict = m[2].match(/"([^"]*)"/g).map(x => x.replace(/"/g, ''));
|
||
buildSteps(m[1], dict);
|
||
stepCtrl.setSteps(steps.map((_,i)=>i)); render(0); $('stepInfo').textContent = '步骤 1 / ' + steps.length;
|
||
};
|
||
$('exampleSelect').onchange = () => {
|
||
const e = examples[parseInt($('exampleSelect').value)];
|
||
$('inputArea').value = `s="${e.input}", dict=["${e.dict.join('","')}"]`;
|
||
buildSteps(e.input, e.dict); stepCtrl.setSteps(steps.map((_,i)=>i)); render(0);
|
||
};
|
||
$('prevBtn').onclick = () => stepCtrl.prev();
|
||
$('nextBtn').onclick = () => stepCtrl.next();
|
||
$('jumpBtn').onclick = () => stepCtrl.jumpToEnd();
|
||
$('autoBtn').onclick = () => { const on = stepCtrl.toggleAuto(); $('autoBtn').textContent = on ? '暂停' : '自动播放'; };
|
||
$('resetBtn').onclick = () => { stepCtrl.reset(); $('autoBtn').textContent = '自动播放'; };
|
||
}
|
||
init();
|
||
$('codeArea').innerHTML = renderCode(`def wordBreak(s, wordDict):
|
||
n = len(s)
|
||
dp = [False] * (n + 1)
|
||
dp[0] = True
|
||
word_set = set(wordDict)
|
||
for i in range(1, n + 1):
|
||
for j in range(i):
|
||
if dp[j] and s[j:i] in word_set:
|
||
dp[i] = True
|
||
break
|
||
return dp[n]`, {lang:'Python'});
|
||
'''
|
||
|
||
|
||
def js_longest_increasing_subsequence():
|
||
return r'''
|
||
const examples = [
|
||
{input: [10,9,2,5,3,7,101,18], label: '示例1: [10,9,2,5,3,7,101,18]'},
|
||
{input: [0,1,0,3,2,3], label: '示例2: [0,1,0,3,2,3]'},
|
||
{input: [7,7,7,7,7,7,7], label: '示例3: [7,7,7,7,7,7,7]'},
|
||
];
|
||
let nums, steps, stepCtrl;
|
||
|
||
function buildSteps(arr) {
|
||
nums = [...arr]; steps = [];
|
||
const n = nums.length;
|
||
if (n === 0) { steps.push({stage:'done', msg:'数组为空', dp:[], best:0, prev:[]}); return; }
|
||
const dp = new Array(n).fill(1);
|
||
const prev = new Array(n).fill(-1);
|
||
steps.push({stage:'init', msg:'每个元素自身构成长度为1的递增子序列', dp:[...dp], current:-1, bestIdx:0, prev:[...prev]});
|
||
let bestIdx = 0;
|
||
for (let i = 1; i < n; i++) {
|
||
steps.push({stage:'check', msg:`检查 nums[${i}]=${nums[i]}，寻找 j<i 使得 nums[j]<nums[${i}]`, dp:[...dp], current:i, bestIdx, j:-1, prev:[...prev]});
|
||
for (let j = 0; j < i; j++) {
|
||
if (nums[j] < nums[i] && dp[j] + 1 > dp[i]) {
|
||
dp[i] = dp[j] + 1;
|
||
prev[i] = j;
|
||
steps.push({stage:'update', msg:`nums[${j}]=${nums[j]} < ${nums[i]}，dp[${i}] = dp[${j}]+1 = ${dp[i]}`, dp:[...dp], current:i, bestIdx, j, prev:[...prev]});
|
||
}
|
||
}
|
||
if (dp[i] > dp[bestIdx]) bestIdx = i;
|
||
steps.push({stage:'doneI', msg:`dp[${i}]=${dp[i]}，最长子序列长度 = ${dp[bestIdx]}`, dp:[...dp], current:i, bestIdx, prev:[...prev]});
|
||
}
|
||
steps.push({stage:'done', msg:`最长递增子序列长度 = ${dp[bestIdx]}`, dp:[...dp], current:bestIdx, bestIdx, prev:[...prev]});
|
||
}
|
||
|
||
function render(step) {
|
||
const s = steps[step];
|
||
const hl = {};
|
||
if (s.current >= 0 && s.stage !== 'done') hl[s.current] = 'orange';
|
||
if (s.j >= 0) hl[s.j] = 'blue';
|
||
if (s.stage === 'done') {
|
||
let idx = s.bestIdx;
|
||
while (idx >= 0) { hl[idx] = 'green'; idx = s.prev[idx]; }
|
||
}
|
||
let viz = renderArray(nums, {highlights: hl});
|
||
viz += '<div style="margin-top:8px;"><b>dp 值（以每个元素结尾的 LIS 长度）：</b></div>';
|
||
const dpHl = {};
|
||
if (s.current >= 0 && s.stage !== 'done') dpHl[s.current] = 'orange';
|
||
if (s.bestIdx >= 0 && s.stage === 'done') dpHl[s.bestIdx] = 'green';
|
||
viz += renderArray(s.dp, {highlights: dpHl});
|
||
if (s.stage === 'done') {
|
||
const lis = [];
|
||
let idx = s.bestIdx;
|
||
while (idx >= 0) { lis.unshift(nums[idx]); idx = s.prev[idx]; }
|
||
viz += `<div style="margin-top:8px;color:var(--green);"><b>LIS: [${lis.join(', ')}]</b></div>`;
|
||
}
|
||
$('vizArea').innerHTML = viz;
|
||
|
||
$('detailContent').innerHTML = '<div class="calc-block">' + s.msg + '</div>';
|
||
if (s.bestIdx >= 0) {
|
||
$('detailContent').innerHTML += `<div class="current-answer">当前 LIS 长度：<b>${s.dp[s.bestIdx]||1}</b></div>`;
|
||
}
|
||
if (s.stage === 'done') {
|
||
$('resultContent').innerHTML = `<div class="final-answer">最长递增子序列长度 = <b>${s.dp[s.bestIdx]}</b></div>`;
|
||
}
|
||
$('hintText').textContent = s.msg;
|
||
const stages = ['init→初始化','check→检查','update→更新','doneI→完成I','done→完成'];
|
||
$('pipeline').innerHTML = stages.map(st => {
|
||
const [k,l] = st.split('→');
|
||
return `<span class="pipe-step ${s.stage===k?'active':''}">${l}</span>`;
|
||
}).join('<i>→</i>');
|
||
}
|
||
|
||
function init() {
|
||
const sel = $('exampleSelect');
|
||
examples.forEach((e,i) => { sel.innerHTML += `<option value="${i}">${e.label}</option>`; });
|
||
$('inputArea').value = '[10,9,2,5,3,7,101,18]';
|
||
buildSteps(examples[0].input);
|
||
stepCtrl = new StepController({onStep: render});
|
||
stepCtrl.setSteps(steps.map((_,i)=>i));
|
||
$('stepInfo').textContent = '步骤 1 / ' + steps.length;
|
||
stepCtrl.onStep = (idx) => { render(idx); $('stepInfo').textContent = `步骤 ${idx+1} / ${steps.length}`; };
|
||
$('applyBtn').onclick = () => {
|
||
try { const arr = JSON.parse($('inputArea').value); buildSteps(arr); stepCtrl.setSteps(steps.map((_,i)=>i)); render(0); $('stepInfo').textContent = '步骤 1 / ' + steps.length; }
|
||
catch(e) { alert('请输入合法 JSON 数组'); }
|
||
};
|
||
$('exampleSelect').onchange = () => {
|
||
const e = examples[parseInt($('exampleSelect').value)];
|
||
$('inputArea').value = JSON.stringify(e.input);
|
||
buildSteps(e.input); stepCtrl.setSteps(steps.map((_,i)=>i)); render(0);
|
||
};
|
||
$('prevBtn').onclick = () => stepCtrl.prev();
|
||
$('nextBtn').onclick = () => stepCtrl.next();
|
||
$('jumpBtn').onclick = () => stepCtrl.jumpToEnd();
|
||
$('autoBtn').onclick = () => { const on = stepCtrl.toggleAuto(); $('autoBtn').textContent = on ? '暂停' : '自动播放'; };
|
||
$('resetBtn').onclick = () => { stepCtrl.reset(); $('autoBtn').textContent = '自动播放'; };
|
||
}
|
||
init();
|
||
$('codeArea').innerHTML = renderCode(`def lengthOfLIS(nums):
|
||
n = len(nums)
|
||
dp = [1] * n
|
||
for i in range(1, n):
|
||
for j in range(i):
|
||
if nums[j] < nums[i]:
|
||
dp[i] = max(dp[i], dp[j] + 1)
|
||
return max(dp)`, {lang:'Python'});
|
||
'''
|
||
|
||
|
||
def js_maximum_product_subarray():
|
||
return r'''
|
||
const examples = [
|
||
{input: [2,3,-2,4], label: '示例1: [2,3,-2,4]'},
|
||
{input: [-2,0,-1], label: '示例2: [-2,0,-1]'},
|
||
{input: [-2,3,-4], label: '示例3: [-2,3,-4]'},
|
||
];
|
||
let nums, steps, stepCtrl;
|
||
|
||
function buildSteps(arr) {
|
||
nums = [...arr]; steps = [];
|
||
const n = nums.length;
|
||
const maxDP = new Array(n).fill(0);
|
||
const minDP = new Array(n).fill(0);
|
||
maxDP[0] = nums[0]; minDP[0] = nums[0];
|
||
let globalMax = nums[0];
|
||
steps.push({stage:'init', msg:`maxDP[0]=${nums[0]}，minDP[0]=${nums[0]}（同时维护最大和最小）`, maxDP:[...maxDP], minDP:[...minDP], current:-1, globalMax, candidates:null});
|
||
for (let i = 1; i < n; i++) {
|
||
const candidates = [nums[i], maxDP[i-1]*nums[i], minDP[i-1]*nums[i]];
|
||
maxDP[i] = Math.max(...candidates);
|
||
minDP[i] = Math.min(...candidates);
|
||
globalMax = Math.max(globalMax, maxDP[i]);
|
||
steps.push({stage:'calc', msg:`nums[${i}]=${nums[i]}：候选值 = [${nums[i]}, ${maxDP[i-1]}×${nums[i]}=${candidates[1]}, ${minDP[i-1]}×${nums[i]}=${candidates[2]}]`, maxDP:[...maxDP], minDP:[...minDP], current:i, globalMax, candidates});
|
||
steps.push({stage:'fill', msg:`maxDP[${i}]=${maxDP[i]}，minDP[${i}]=${minDP[i]}，全局最大=${globalMax}`, maxDP:[...maxDP], minDP:[...minDP], current:i, globalMax, candidates});
|
||
}
|
||
steps.push({stage:'done', msg:`乘积最大子数组的积 = ${globalMax}`, maxDP:[...maxDP], minDP:[...minDP], current:n-1, globalMax, candidates:null});
|
||
}
|
||
|
||
function render(step) {
|
||
const s = steps[step];
|
||
const hl = {};
|
||
if (s.current >= 0) hl[s.current] = 'orange';
|
||
let viz = renderArray(nums, {highlights: hl});
|
||
viz += '<div style="margin-top:12px;"><b>maxDP（最大乘积）：</b></div>';
|
||
const maxHl = {};
|
||
if (s.current >= 0) maxHl[s.current] = 'green';
|
||
viz += renderArray(s.maxDP, {highlights: maxHl});
|
||
viz += '<div style="margin-top:8px;"><b>minDP（最小乘积）：</b></div>';
|
||
const minHl = {};
|
||
if (s.current >= 0) minHl[s.current] = 'purple';
|
||
viz += renderArray(s.minDP, {highlights: minHl});
|
||
if (s.candidates) {
|
||
viz += '<div style="margin-top:8px;"><b>三个候选：</b></div>';
|
||
viz += '<div style="display:flex;gap:8px;margin:4px 0;">';
|
||
const labels = ['当前数', 'maxDP×当前', 'minDP×当前'];
|
||
s.candidates.forEach((c, idx) => {
|
||
const isMax = c === s.maxDP[s.current];
|
||
const isMin = c === s.minDP[s.current];
|
||
let bd = '1px solid #cbd5e1', bg = '#f8fafc';
|
||
if (isMax && isMin) { bd = '2px solid #8b5cf6'; bg = '#ede9fe'; }
|
||
else if (isMax) { bd = '2px solid #16a34a'; bg = '#dcfce7'; }
|
||
else if (isMin) { bd = '2px solid #7c3aed'; bg = '#ede9fe'; }
|
||
viz += `<span style="padding:4px 10px;background:${bg};border:${bd};border-radius:8px;font-size:13px;">${labels[idx]}=<b>${c}</b></span>`;
|
||
});
|
||
viz += '</div>';
|
||
}
|
||
$('vizArea').innerHTML = viz;
|
||
|
||
$('detailContent').innerHTML = '<div class="calc-block">' + s.msg + '</div>';
|
||
$('detailContent').innerHTML += `<div class="current-answer">全局最大乘积：<b>${s.globalMax}</b></div>`;
|
||
if (s.stage === 'done') {
|
||
$('resultContent').innerHTML = `<div class="final-answer">乘积最大子数组的积 = <b>${s.globalMax}</b></div>`;
|
||
}
|
||
$('hintText').textContent = s.msg;
|
||
const stages = ['init→初始化','calc→计算','fill→填充','done→完成'];
|
||
$('pipeline').innerHTML = stages.map(st => {
|
||
const [k,l] = st.split('→');
|
||
return `<span class="pipe-step ${s.stage===k?'active':''}">${l}</span>`;
|
||
}).join('<i>→</i>');
|
||
}
|
||
|
||
function init() {
|
||
const sel = $('exampleSelect');
|
||
examples.forEach((e,i) => { sel.innerHTML += `<option value="${i}">${e.label}</option>`; });
|
||
$('inputArea').value = '[2,3,-2,4]';
|
||
buildSteps(examples[0].input);
|
||
stepCtrl = new StepController({onStep: render});
|
||
stepCtrl.setSteps(steps.map((_,i)=>i));
|
||
$('stepInfo').textContent = '步骤 1 / ' + steps.length;
|
||
stepCtrl.onStep = (idx) => { render(idx); $('stepInfo').textContent = `步骤 ${idx+1} / ${steps.length}`; };
|
||
$('applyBtn').onclick = () => {
|
||
try { const arr = JSON.parse($('inputArea').value); buildSteps(arr); stepCtrl.setSteps(steps.map((_,i)=>i)); render(0); $('stepInfo').textContent = '步骤 1 / ' + steps.length; }
|
||
catch(e) { alert('请输入合法 JSON 数组'); }
|
||
};
|
||
$('exampleSelect').onchange = () => {
|
||
const e = examples[parseInt($('exampleSelect').value)];
|
||
$('inputArea').value = JSON.stringify(e.input);
|
||
buildSteps(e.input); stepCtrl.setSteps(steps.map((_,i)=>i)); render(0);
|
||
};
|
||
$('prevBtn').onclick = () => stepCtrl.prev();
|
||
$('nextBtn').onclick = () => stepCtrl.next();
|
||
$('jumpBtn').onclick = () => stepCtrl.jumpToEnd();
|
||
$('autoBtn').onclick = () => { const on = stepCtrl.toggleAuto(); $('autoBtn').textContent = on ? '暂停' : '自动播放'; };
|
||
$('resetBtn').onclick = () => { stepCtrl.reset(); $('autoBtn').textContent = '自动播放'; };
|
||
}
|
||
init();
|
||
$('codeArea').innerHTML = renderCode(`def maxProduct(nums):
|
||
max_dp = min_dp = result = nums[0]
|
||
for i in range(1, len(nums)):
|
||
candidates = (nums[i], max_dp * nums[i], min_dp * nums[i])
|
||
max_dp = max(candidates)
|
||
min_dp = min(candidates)
|
||
result = max(result, max_dp)
|
||
return result`, {lang:'Python'});
|
||
'''
|
||
|
||
|
||
def js_partition_equal_subset_sum():
|
||
return r'''
|
||
const examples = [
|
||
{input: [1,5,11,5], label: '示例1: [1,5,11,5]'},
|
||
{input: [1,2,3,5], label: '示例2: [1,2,3,5]'},
|
||
{input: [1,1], label: '示例3: [1,1]'},
|
||
];
|
||
let nums, steps, stepCtrl, target;
|
||
|
||
function buildSteps(arr) {
|
||
nums = [...arr]; steps = [];
|
||
const sum = arr.reduce((a,b) => a + b, 0);
|
||
if (sum % 2 !== 0) {
|
||
target = 0;
|
||
steps.push({stage:'done', msg:`总和=${sum}为奇数，无法等分`, dp:null, target:0, itemIdx:-1, curJ:-1});
|
||
return;
|
||
}
|
||
target = sum / 2;
|
||
const n = arr.length;
|
||
const dp = new Array(target + 1).fill(false);
|
||
dp[0] = true;
|
||
steps.push({stage:'init', msg:`总和=${sum}，目标=${target}，0-1背包：每件物品选或不选`, dp:[...dp], target, itemIdx:-1, curJ:-1});
|
||
for (let i = 0; i < n; i++) {
|
||
steps.push({stage:'item', msg:`考虑物品 ${i}：nums[${i}]=${arr[i]}`, dp:[...dp], target, itemIdx:i, curJ:-1});
|
||
for (let j = target; j >= arr[i]; j--) {
|
||
if (dp[j - arr[i]] && !dp[j]) {
|
||
dp[j] = true;
|
||
steps.push({stage:'fill', msg:`dp[${j}] = dp[${j}-${arr[i]}] = dp[${j-arr[i]}] = true → dp[${j}]=true`, dp:[...dp], target, itemIdx:i, curJ:j});
|
||
}
|
||
}
|
||
if (dp[target]) {
|
||
steps.push({stage:'done', msg:`已找到和为 ${target} 的子集，可以等分！`, dp:[...dp], target, itemIdx:i, curJ:target});
|
||
return;
|
||
}
|
||
}
|
||
steps.push({stage:'done', msg:`无法找到和为 ${target} 的子集`, dp:[...dp], target, itemIdx:-1, curJ:-1});
|
||
}
|
||
|
||
function render(step) {
|
||
const s = steps[step];
|
||
if (!s.dp) {
|
||
$('vizArea').innerHTML = '<div class="formula-box">总和为奇数，直接返回 false</div>';
|
||
$('detailContent').innerHTML = '<div class="calc-block">' + s.msg + '</div>';
|
||
$('resultContent').innerHTML = '<div class="final-answer" style="border-color:#f87171;background:#fef2f2;">无法等分</div>';
|
||
$('hintText').textContent = s.msg;
|
||
$('pipeline').innerHTML = '<span class="pipe-step active">完成</span>';
|
||
return;
|
||
}
|
||
let viz = '<div style="margin-top:8px;"><b>物品：</b></div>';
|
||
viz += '<div style="display:flex;gap:4px;margin:4px 0;">';
|
||
nums.forEach((v, i) => {
|
||
const cls = i === s.itemIdx ? 'orange' : (i < s.itemIdx || s.stage==='done' ? 'green' : 'default');
|
||
viz += `<span class="chip ${cls}" style="min-width:36px;">${v}</span>`;
|
||
});
|
||
viz += '</div>';
|
||
viz += `<div style="margin-top:8px;"><b>dp 表（容量 0~${s.target}）：</b></div>`;
|
||
viz += '<div style="display:flex;flex-wrap:wrap;gap:3px;margin:4px 0;">';
|
||
for (let j = 0; j <= s.target; j++) {
|
||
let cls = s.dp[j] ? 'green' : 'default';
|
||
if (j === s.curJ) cls = 'orange';
|
||
viz += `<span class="chip-group"><span class="chip ${cls}" style="min-width:28px;font-size:12px;height:26px;">${s.dp[j]?'T':'F'}</span><span class="chip-index">${j}</span></span>`;
|
||
}
|
||
viz += '</div>';
|
||
$('vizArea').innerHTML = viz;
|
||
|
||
$('detailContent').innerHTML = '<div class="calc-block">' + s.msg + '</div>';
|
||
if (s.dp[s.target]) {
|
||
$('detailContent').innerHTML += `<div class="current-answer">dp[${s.target}] = <b>true</b></div>`;
|
||
}
|
||
if (s.stage === 'done') {
|
||
if (s.dp && s.dp[s.target]) {
|
||
$('resultContent').innerHTML = `<div class="final-answer">可以等分为两个子集，和各为 <b>${s.target}</b> ✅</div>`;
|
||
} else {
|
||
$('resultContent').innerHTML = '<div class="final-answer" style="border-color:#f87171;background:#fef2f2;">无法等分 ❌</div>';
|
||
}
|
||
}
|
||
$('hintText').textContent = s.msg;
|
||
const stages = ['init→初始化','item→物品','fill→填充','done→完成'];
|
||
$('pipeline').innerHTML = stages.map(st => {
|
||
const [k,l] = st.split('→');
|
||
return `<span class="pipe-step ${s.stage===k?'active':''}">${l}</span>`;
|
||
}).join('<i>→</i>');
|
||
}
|
||
|
||
function init() {
|
||
const sel = $('exampleSelect');
|
||
examples.forEach((e,i) => { sel.innerHTML += `<option value="${i}">${e.label}</option>`; });
|
||
$('inputArea').value = '[1,5,11,5]';
|
||
buildSteps(examples[0].input);
|
||
stepCtrl = new StepController({onStep: render});
|
||
stepCtrl.setSteps(steps.map((_,i)=>i));
|
||
$('stepInfo').textContent = '步骤 1 / ' + steps.length;
|
||
stepCtrl.onStep = (idx) => { render(idx); $('stepInfo').textContent = `步骤 ${idx+1} / ${steps.length}`; };
|
||
$('applyBtn').onclick = () => {
|
||
try { const arr = JSON.parse($('inputArea').value); buildSteps(arr); stepCtrl.setSteps(steps.map((_,i)=>i)); render(0); $('stepInfo').textContent = '步骤 1 / ' + steps.length; }
|
||
catch(e) { alert('请输入合法 JSON 数组'); }
|
||
};
|
||
$('exampleSelect').onchange = () => {
|
||
const e = examples[parseInt($('exampleSelect').value)];
|
||
$('inputArea').value = JSON.stringify(e.input);
|
||
buildSteps(e.input); stepCtrl.setSteps(steps.map((_,i)=>i)); render(0);
|
||
};
|
||
$('prevBtn').onclick = () => stepCtrl.prev();
|
||
$('nextBtn').onclick = () => stepCtrl.next();
|
||
$('jumpBtn').onclick = () => stepCtrl.jumpToEnd();
|
||
$('autoBtn').onclick = () => { const on = stepCtrl.toggleAuto(); $('autoBtn').textContent = on ? '暂停' : '自动播放'; };
|
||
$('resetBtn').onclick = () => { stepCtrl.reset(); $('autoBtn').textContent = '自动播放'; };
|
||
}
|
||
init();
|
||
$('codeArea').innerHTML = renderCode(`def canPartition(nums):
|
||
total = sum(nums)
|
||
if total % 2: return False
|
||
target = total // 2
|
||
dp = [False] * (target + 1)
|
||
dp[0] = True
|
||
for num in nums:
|
||
for j in range(target, num - 1, -1):
|
||
dp[j] = dp[j] or dp[j - num]
|
||
if dp[target]: return True
|
||
return dp[target]`, {lang:'Python'});
|
||
'''
|
||
|
||
|
||
def js_longest_valid_parentheses():
|
||
return r'''
|
||
const examples = [
|
||
{input: '(()', label: '示例1: "(()"'},
|
||
{input: ')()())', label: '示例2: ")()())"'},
|
||
{input: '', label: '示例3: ""'},
|
||
];
|
||
let s, steps, stepCtrl;
|
||
|
||
function buildSteps(str) {
|
||
s = str; steps = [];
|
||
if (str.length === 0) {
|
||
steps.push({stage:'done', msg:'空字符串，结果为 0', dp:[], stack:[-1], maxLen:0, current:-1, matched:-1});
|
||
return;
|
||
}
|
||
const n = str.length;
|
||
const dp = new Array(n).fill(0);
|
||
const stackArr = [-1];
|
||
let maxLen = 0;
|
||
steps.push({stage:'init', msg:'用栈方法：栈中保存索引，初始压入 -1 作为基线', dp:[...dp], stack:[-1], maxLen:0, current:-1, matched:-1});
|
||
for (let i = 0; i < n; i++) {
|
||
steps.push({stage:'check', msg:`处理 s[${i}]='${str[i]}'`, dp:[...dp], stack:[...stackArr], maxLen, current:i, matched:-1});
|
||
if (str[i] === '(') {
|
||
stackArr.push(i);
|
||
steps.push({stage:'push', msg:`遇到 '('，压入索引 ${i}`, dp:[...dp], stack:[...stackArr], maxLen, current:i, matched:-1});
|
||
} else {
|
||
if (stackArr.length > 1) {
|
||
stackArr.pop();
|
||
const start = stackArr[stackArr.length - 1];
|
||
const len = i - start;
|
||
maxLen = Math.max(maxLen, len);
|
||
dp[i] = len;
|
||
steps.push({stage:'pop', msg:`遇到 ')'，弹出栈顶，栈顶=${start}，有效长度=${i}-${start}=${len}`, dp:[...dp], stack:[...stackArr], maxLen, current:i, matched:start});
|
||
} else {
|
||
stackArr.length = 0;
|
||
stackArr.push(i);
|
||
steps.push({stage:'reset', msg:`遇到 ')' 但栈空（无匹配），重置基线为 ${i}`, dp:[...dp], stack:[...stackArr], maxLen, current:i, matched:-1});
|
||
}
|
||
}
|
||
}
|
||
steps.push({stage:'done', msg:`最长有效括号子串长度 = ${maxLen}`, dp:[...dp], stack:[...stackArr], maxLen, current:-1, matched:-1});
|
||
}
|
||
|
||
function render(step) {
|
||
const st = steps[step];
|
||
if (!st.dp || st.dp.length === 0) {
|
||
$('vizArea').innerHTML = '<div class="formula-box">空字符串，结果为 0</div>';
|
||
$('detailContent').innerHTML = '<div class="calc-block">' + st.msg + '</div>';
|
||
$('resultContent').innerHTML = '<div class="final-answer">最长有效括号长度 = <b>0</b></div>';
|
||
$('hintText').textContent = st.msg;
|
||
$('pipeline').innerHTML = '<span class="pipe-step active">完成</span>';
|
||
return;
|
||
}
|
||
let viz = '<div style="margin-top:8px;"><b>字符串：</b></div>';
|
||
viz += '<div style="display:flex;gap:3px;margin:8px 0;">';
|
||
for (let i = 0; i < s.length; i++) {
|
||
let cls = 'default';
|
||
if (i === st.current) cls = 'orange';
|
||
else if (st.dp[i] > 0) cls = 'green';
|
||
else if (i === st.matched) cls = 'blue';
|
||
viz += `<span class="chip ${cls}" style="min-width:28px;font-size:14px;">${s[i]}</span>`;
|
||
}
|
||
viz += '</div>';
|
||
viz += '<div style="display:flex;gap:3px;margin-top:-4px;">';
|
||
for (let i = 0; i < s.length; i++) {
|
||
viz += `<span style="min-width:28px;text-align:center;font-size:10px;color:var(--text-muted);">${i}</span>`;
|
||
}
|
||
viz += '</div>';
|
||
viz += '<div style="margin-top:8px;"><b>dp 值（以各位置结尾的有效长度）：</b></div>';
|
||
viz += '<div style="display:flex;gap:3px;margin:4px 0;">';
|
||
for (let i = 0; i < s.length; i++) {
|
||
let cls = st.dp[i] > 0 ? 'green' : 'default';
|
||
if (i === st.current) cls = 'orange';
|
||
viz += `<span class="chip ${cls}" style="min-width:28px;font-size:12px;height:28px;">${st.dp[i]}</span>`;
|
||
}
|
||
viz += '</div>';
|
||
if (st.stack) {
|
||
viz += '<div style="margin-top:8px;"><b>栈：</b></div>';
|
||
viz += '<div style="display:flex;gap:3px;flex-wrap:wrap;margin:4px 0;">';
|
||
st.stack.forEach((v, idx) => {
|
||
const cls = idx === st.stack.length - 1 ? 'blue' : 'default';
|
||
viz += `<span class="chip ${cls}" style="min-width:28px;font-size:12px;height:28px;">${v}</span>`;
|
||
});
|
||
viz += '</div>';
|
||
}
|
||
$('vizArea').innerHTML = viz;
|
||
|
||
$('detailContent').innerHTML = '<div class="calc-block">' + st.msg + '</div>';
|
||
if (st.maxLen > 0) {
|
||
$('detailContent').innerHTML += `<div class="current-answer">当前最长有效长度：<b>${st.maxLen}</b></div>`;
|
||
}
|
||
if (st.stage === 'done') {
|
||
$('resultContent').innerHTML = `<div class="final-answer">最长有效括号子串长度 = <b>${st.maxLen}</b></div>`;
|
||
}
|
||
$('hintText').textContent = st.msg;
|
||
const stages = ['init→初始化','check→检查','push→入栈','pop→匹配','reset→重置','done→完成'];
|
||
$('pipeline').innerHTML = stages.map(st2 => {
|
||
const [k,l] = st2.split('→');
|
||
return `<span class="pipe-step ${st.stage===k?'active':''}">${l}</span>`;
|
||
}).join('<i>→</i>');
|
||
}
|
||
|
||
function init() {
|
||
const sel = $('exampleSelect');
|
||
examples.forEach((e,i) => { sel.innerHTML += `<option value="${i}">${e.label}</option>`; });
|
||
$('inputArea').value = '"(()"';
|
||
buildSteps(examples[0].input);
|
||
stepCtrl = new StepController({onStep: render});
|
||
stepCtrl.setSteps(steps.map((_,i)=>i));
|
||
$('stepInfo').textContent = '步骤 1 / ' + steps.length;
|
||
stepCtrl.onStep = (idx) => { render(idx); $('stepInfo').textContent = `步骤 ${idx+1} / ${steps.length}`; };
|
||
$('applyBtn').onclick = () => {
|
||
const m = $('inputArea').value.match(/"([^"]+)"/);
|
||
if (!m) { alert('格式: "(()"'); return; }
|
||
buildSteps(m[1]);
|
||
stepCtrl.setSteps(steps.map((_,i)=>i)); render(0); $('stepInfo').textContent = '步骤 1 / ' + steps.length;
|
||
};
|
||
$('exampleSelect').onchange = () => {
|
||
const e = examples[parseInt($('exampleSelect').value)];
|
||
$('inputArea').value = `"${e.input}"`;
|
||
buildSteps(e.input); stepCtrl.setSteps(steps.map((_,i)=>i)); render(0);
|
||
};
|
||
$('prevBtn').onclick = () => stepCtrl.prev();
|
||
$('nextBtn').onclick = () => stepCtrl.next();
|
||
$('jumpBtn').onclick = () => stepCtrl.jumpToEnd();
|
||
$('autoBtn').onclick = () => { const on = stepCtrl.toggleAuto(); $('autoBtn').textContent = on ? '暂停' : '自动播放'; };
|
||
$('resetBtn').onclick = () => { stepCtrl.reset(); $('autoBtn').textContent = '自动播放'; };
|
||
}
|
||
init();
|
||
$('codeArea').innerHTML = renderCode(`def longestValidParentheses(s):
|
||
stack = [-1]
|
||
max_len = 0
|
||
for i, c in enumerate(s):
|
||
if c == '(':
|
||
stack.append(i)
|
||
else:
|
||
stack.pop()
|
||
if not stack:
|
||
stack.append(i)
|
||
else:
|
||
max_len = max(max_len, i - stack[-1])
|
||
return max_len`, {lang:'Python'});
|
||
'''
|