support algorithm comparison

dist/assets/index-Bs9s2ktO.css

@@ -1 +0,0 @@
-@layer properties{@supports (((-webkit-hyphens:none)) and (not (margin-trim:inline))) or ((-moz-orient:inline) and (not (color:rgb(from red r g b)))){*,:before,:after,::backdrop{--tw-translate-x:0;--tw-translate-y:0;--tw-translate-z:0;--tw-space-y-reverse:0;--tw-border-style:solid;--tw-leading:initial;--tw-font-weight:initial;--tw-tracking:initial;--tw-shadow:0 0 #0000;--tw-shadow-color:initial;--tw-shadow-alpha:100%;--tw-inset-shadow:0 0 #0000;--tw-inset-shadow-color:initial;--tw-inset-shadow-alpha:100%;--tw-ring-color:initial;--tw-ring-shadow:0 0 #0000;--tw-inset-ring-color:initial;--tw-inset-ring-shadow:0 0 #0000;--tw-ring-inset:initial;--tw-ring-offset-width:0px;--tw-ring-offset-color:#fff;--tw-ring-offset-shadow:0 0 #0000;--tw-blur:initial;--tw-brightness:initial;--tw-contrast:initial;--tw-grayscale:initial;--tw-hue-rotate:initial;--tw-invert:initial;--tw-opacity:initial;--tw-saturate:initial;--tw-sepia:initial;--tw-drop-shadow:initial;--tw-drop-shadow-color:initial;--tw-drop-shadow-alpha:100%;--tw-drop-shadow-size:initial}}}@layer theme{:root,:host{--font-sans:ui-sans-serif,system-ui,sans-serif,"Apple Color Emoji","Segoe UI Emoji","Segoe UI Symbol","Noto Color Emoji";--font-mono:ui-monospace,SFMono-Regular,Menlo,Monaco,Consolas,"Liberation Mono","Courier New",monospace;--color-orange-200:oklch(90.1% .076 70.697);--color-orange-300:oklch(83.7% .128 66.29);--color-orange-400:oklch(75% .183 55.934);--color-blue-600:oklch(54.6% .245 262.881);--color-slate-50:oklch(98.4% .003 247.858);--color-slate-200:oklch(92.9% .013 255.508);--color-slate-300:oklch(86.9% .022 252.894);--color-slate-600:oklch(44.6% .043 257.281);--color-slate-800:oklch(27.9% .041 260.031);--color-gray-100:oklch(96.7% .003 264.542);--color-gray-200:oklch(92.8% .006 264.531);--color-gray-300:oklch(87.2% .01 258.338);--color-gray-700:oklch(37.3% .034 259.733);--color-gray-950:oklch(13% .028 261.692);--color-stone-50:oklch(98.5% .001 106.423);--color-stone-100:oklch(97% .001 106.424);--color-stone-200:oklch(92.3% .003 48.717);--color-stone-300:oklch(86.9% .005 56.366);--color-stone-400:oklch(70.9% .01 56.259);--color-stone-500:oklch(55.3% .013 58.071);--color-stone-700:oklch(37.4% .01 67.558);--color-white:#fff;--spacing:.25rem;--text-sm:.875rem;--text-sm--line-height:calc(1.25/.875);--text-lg:1.125rem;--text-lg--line-height:calc(1.75/1.125);--text-xl:1.25rem;--text-xl--line-height:calc(1.75/1.25);--text-2xl:1.5rem;--text-2xl--line-height:calc(2/1.5);--font-weight-normal:400;--font-weight-medium:500;--font-weight-semibold:600;--font-weight-bold:700;--tracking-tight:-.025em;--tracking-wide:.025em;--animate-spin:spin 1s linear infinite;--default-font-family:var(--font-sans);--default-mono-font-family:var(--font-mono)}}@layer base{*,:after,:before,::backdrop{box-sizing:border-box;border:0 solid;margin:0;padding:0}::file-selector-button{box-sizing:border-box;border:0 solid;margin:0;padding:0}html,:host{-webkit-text-size-adjust:100%;tab-size:4;line-height:1.5;font-family:var(--default-font-family,ui-sans-serif,system-ui,sans-serif,"Apple Color Emoji","Segoe UI Emoji","Segoe UI Symbol","Noto Color Emoji");font-feature-settings:var(--default-font-feature-settings,normal);font-variation-settings:var(--default-font-variation-settings,normal);-webkit-tap-highlight-color:transparent}hr{height:0;color:inherit;border-top-width:1px}abbr:where([title]){-webkit-text-decoration:underline dotted;text-decoration:underline dotted}h1,h2,h3,h4,h5,h6{font-size:inherit;font-weight:inherit}a{color:inherit;-webkit-text-decoration:inherit;text-decoration:inherit}b,strong{font-weight:bolder}code,kbd,samp,pre{font-family:var(--default-mono-font-family,ui-monospace,SFMono-Regular,Menlo,Monaco,Consolas,"Liberation Mono","Courier New",monospace);font-feature-settings:var(--default-mono-font-feature-settings,normal);font-variation-settings:var(--default-mono-font-variation-settings,normal);font-size:1em}small{font-size:80%}sub,sup{vertical-align:baseline;font-size:75%;line-height:0;position:relative}sub{bottom:-.25em}sup{top:-.5em}table{text-indent:0;border-color:inherit;border-collapse:collapse}:-moz-focusring{outline:auto}progress{vertical-align:baseline}summary{display:list-item}ol,ul,menu{list-style:none}img,svg,video,canvas,audio,iframe,embed,object{vertical-align:middle;display:block}img,video{max-width:100%;height:auto}button,input,select,optgroup,textarea{font:inherit;font-feature-settings:inherit;font-variation-settings:inherit;letter-spacing:inherit;color:inherit;opacity:1;background-color:#0000;border-radius:0}::file-selector-button{font:inherit;font-feature-settings:inherit;font-variation-settings:inherit;letter-spacing:inherit;color:inherit;opacity:1;background-color:#0000;border-radius:0}:where(select:is([multiple],[size])) optgroup{font-weight:bolder}:where(select:is([multiple],[size])) optgroup option{padding-inline-start:20px}::file-selector-button{margin-inline-end:4px}::placeholder{opacity:1}@supports (not ((-webkit-appearance:-apple-pay-button))) or (contain-intrinsic-size:1px){::placeholder{color:currentColor}@supports (color:color-mix(in lab,red,red)){::placeholder{color:color-mix(in oklab,currentcolor 50%,transparent)}}}textarea{resize:vertical}::-webkit-search-decoration{-webkit-appearance:none}::-webkit-date-and-time-value{min-height:1lh;text-align:inherit}::-webkit-datetime-edit{display:inline-flex}::-webkit-datetime-edit-fields-wrapper{padding:0}::-webkit-datetime-edit{padding-block:0}::-webkit-datetime-edit-year-field{padding-block:0}::-webkit-datetime-edit-month-field{padding-block:0}::-webkit-datetime-edit-day-field{padding-block:0}::-webkit-datetime-edit-hour-field{padding-block:0}::-webkit-datetime-edit-minute-field{padding-block:0}::-webkit-datetime-edit-second-field{padding-block:0}::-webkit-datetime-edit-millisecond-field{padding-block:0}::-webkit-datetime-edit-meridiem-field{padding-block:0}::-webkit-calendar-picker-indicator{line-height:1}:-moz-ui-invalid{box-shadow:none}button,input:where([type=button],[type=reset],[type=submit]){appearance:button}::file-selector-button{appearance:button}::-webkit-inner-spin-button{height:auto}::-webkit-outer-spin-button{height:auto}[hidden]:where(:not([hidden=until-found])){display:none!important}}@layer components;@layer utilities{.fixed{position:fixed}.relative{position:relative}.inset-0{inset:calc(var(--spacing)*0)}.z-50{z-index:50}.m-4{margin:calc(var(--spacing)*4)}.-mt-2{margin-top:calc(var(--spacing)*-2)}.-mt-5{margin-top:calc(var(--spacing)*-5)}.-mt-6{margin-top:calc(var(--spacing)*-6)}.mt-0{margin-top:calc(var(--spacing)*0)}.-mb-2{margin-bottom:calc(var(--spacing)*-2)}.mb-0{margin-bottom:calc(var(--spacing)*0)}.mb-3{margin-bottom:calc(var(--spacing)*3)}.mb-4{margin-bottom:calc(var(--spacing)*4)}.flex{display:flex}.grid{display:grid}.hidden{display:none}.h-8{height:calc(var(--spacing)*8)}.h-10{height:calc(var(--spacing)*10)}.h-16{height:calc(var(--spacing)*16)}.h-64{height:calc(var(--spacing)*64)}.h-full{height:100%}.h-px{height:1px}.min-h-0{min-height:calc(var(--spacing)*0)}.min-h-64{min-height:calc(var(--spacing)*64)}.min-h-\[320px\]{min-height:320px}.min-h-\[420px\]{min-height:420px}.w-16{width:calc(var(--spacing)*16)}.w-fit{width:fit-content}.w-full{width:100%}.min-w-0{min-width:calc(var(--spacing)*0)}.flex-1{flex:1}.flex-none{flex:none}.translate-y-4{--tw-translate-y:calc(var(--spacing)*4);translate:var(--tw-translate-x)var(--tw-translate-y)}.animate-spin{animation:var(--animate-spin)}.cursor-pointer{cursor:pointer}.resize-none{resize:none}.list-decimal{list-style-type:decimal}.list-disc{list-style-type:disc}.grid-cols-1{grid-template-columns:repeat(1,minmax(0,1fr))}.grid-cols-2{grid-template-columns:repeat(2,minmax(0,1fr))}.grid-cols-3{grid-template-columns:repeat(3,minmax(0,1fr))}.grid-cols-\[1fr_12fr_1fr\]{grid-template-columns:1fr 12fr 1fr}.grid-cols-\[6rem_minmax\(0\,1fr\)\]{grid-template-columns:6rem minmax(0,1fr)}.flex-col{flex-direction:column}.items-center{align-items:center}.justify-between{justify-content:space-between}.justify-center{justify-content:center}.gap-0\.5{gap:calc(var(--spacing)*.5)}.gap-1{gap:calc(var(--spacing)*1)}.gap-1\.5{gap:calc(var(--spacing)*1.5)}.gap-2{gap:calc(var(--spacing)*2)}.gap-3{gap:calc(var(--spacing)*3)}.gap-4{gap:calc(var(--spacing)*4)}.gap-6{gap:calc(var(--spacing)*6)}.gap-12{gap:calc(var(--spacing)*12)}:where(.space-y-6>:not(:last-child)){--tw-space-y-reverse:0;margin-block-start:calc(calc(var(--spacing)*6)*var(--tw-space-y-reverse));margin-block-end:calc(calc(var(--spacing)*6)*calc(1 - var(--tw-space-y-reverse)))}.justify-self-end{justify-self:flex-end}.overflow-auto{overflow:auto}.rounded{border-radius:.25rem}.rounded-full{border-radius:3.40282e38px}.border{border-style:var(--tw-border-style);border-width:1px}.border-4{border-style:var(--tw-border-style);border-width:4px}.border-b{border-bottom-style:var(--tw-border-style);border-bottom-width:1px}.border-b-2{border-bottom-style:var(--tw-border-style);border-bottom-width:2px}.border-gray-200{border-color:var(--color-gray-200)}.border-gray-300{border-color:var(--color-gray-300)}.border-orange-400{border-color:var(--color-orange-400)}.border-slate-200{border-color:var(--color-slate-200)}.border-stone-200{border-color:var(--color-stone-200)}.border-stone-300{border-color:var(--color-stone-300)}.border-t-blue-600{border-top-color:var(--color-blue-600)}.bg-gray-100{background-color:var(--color-gray-100)}.bg-orange-200{background-color:var(--color-orange-200)}.bg-slate-50{background-color:var(--color-slate-50)}.bg-slate-300{background-color:var(--color-slate-300)}.bg-stone-50{background-color:var(--color-stone-50)}.bg-stone-100{background-color:var(--color-stone-100)}.bg-white{background-color:var(--color-white)}.p-2{padding:calc(var(--spacing)*2)}.p-4{padding:calc(var(--spacing)*4)}.p-6{padding:calc(var(--spacing)*6)}.px-2{padding-inline:calc(var(--spacing)*2)}.px-3{padding-inline:calc(var(--spacing)*3)}.px-5{padding-inline:calc(var(--spacing)*5)}.py-1{padding-block:calc(var(--spacing)*1)}.py-2{padding-block:calc(var(--spacing)*2)}.pr-0\.25{padding-right:calc(var(--spacing)*.25)}.pl-4{padding-left:calc(var(--spacing)*4)}.text-center{text-align:center}.text-right{text-align:right}.text-2xl{font-size:var(--text-2xl);line-height:var(--tw-leading,var(--text-2xl--line-height))}.text-lg{font-size:var(--text-lg);line-height:var(--tw-leading,var(--text-lg--line-height))}.text-sm{font-size:var(--text-sm);line-height:var(--tw-leading,var(--text-sm--line-height))}.text-xl{font-size:var(--text-xl);line-height:var(--tw-leading,var(--text-xl--line-height))}.leading-6{--tw-leading:calc(var(--spacing)*6);line-height:calc(var(--spacing)*6)}.font-bold{--tw-font-weight:var(--font-weight-bold);font-weight:var(--font-weight-bold)}.font-medium{--tw-font-weight:var(--font-weight-medium);font-weight:var(--font-weight-medium)}.font-normal{--tw-font-weight:var(--font-weight-normal);font-weight:var(--font-weight-normal)}.font-semibold{--tw-font-weight:var(--font-weight-semibold);font-weight:var(--font-weight-semibold)}.tracking-tight{--tw-tracking:var(--tracking-tight);letter-spacing:var(--tracking-tight)}.tracking-wide{--tw-tracking:var(--tracking-wide);letter-spacing:var(--tracking-wide)}.whitespace-nowrap{white-space:nowrap}.text-gray-700{color:var(--color-gray-700)}.text-gray-950{color:var(--color-gray-950)}.text-orange-400{color:var(--color-orange-400)}.text-slate-600{color:var(--color-slate-600)}.text-slate-800{color:var(--color-slate-800)}.text-stone-500{color:var(--color-stone-500)}.text-stone-700{color:var(--color-stone-700)}.shadow-sm{--tw-shadow:0 1px 3px 0 var(--tw-shadow-color,#0000001a),0 1px 2px -1px var(--tw-shadow-color,#0000001a);box-shadow:var(--tw-inset-shadow),var(--tw-inset-ring-shadow),var(--tw-ring-offset-shadow),var(--tw-ring-shadow),var(--tw-shadow)}.blur{--tw-blur:blur(8px);filter:var(--tw-blur,)var(--tw-brightness,)var(--tw-contrast,)var(--tw-grayscale,)var(--tw-hue-rotate,)var(--tw-invert,)var(--tw-saturate,)var(--tw-sepia,)var(--tw-drop-shadow,)}.last\:mb-0:last-child{margin-bottom:calc(var(--spacing)*0)}@media(hover:hover){.hover\:bg-gray-200:hover{background-color:var(--color-gray-200)}.hover\:bg-orange-300:hover{background-color:var(--color-orange-300)}.hover\:bg-stone-200:hover{background-color:var(--color-stone-200)}}.focus\:ring-2:focus{--tw-ring-shadow:var(--tw-ring-inset,)0 0 0 calc(2px + var(--tw-ring-offset-width))var(--tw-ring-color,currentcolor);box-shadow:var(--tw-inset-shadow),var(--tw-inset-ring-shadow),var(--tw-ring-offset-shadow),var(--tw-ring-shadow),var(--tw-shadow)}.focus\:ring-stone-400:focus{--tw-ring-color:var(--color-stone-400)}.focus\:outline-none:focus{--tw-outline-style:none;outline-style:none}.disabled\:cursor-not-allowed:disabled{cursor:not-allowed}.disabled\:opacity-50:disabled{opacity:.5}@media(min-width:64rem){.lg\:flex{display:flex}.lg\:h-dvh{height:100dvh}.lg\:grid-cols-\[2fr_1fr\]{grid-template-columns:2fr 1fr}.lg\:gap-12{gap:calc(var(--spacing)*12)}}.\[\&_p\]\:mb-0 p{margin-bottom:calc(var(--spacing)*0)}}.title{font-size:32px;font-weight:700}.status{color:var(--ink-soft);border:1px solid var(--line);background:#ffffffbf;border-radius:999px;flex:none;align-items:center;gap:8px;padding:8px 12px;font-size:12px;display:flex}.status span{background:#d69b25;border-radius:50%;width:8px;height:8px;box-shadow:0 0 0 4px #f8ebca}.status.ready span{background:#2c9b68;box-shadow:0 0 0 4px #d9f0e5}.status.error span{background:#c74848;box-shadow:0 0 0 4px #f5dddd}@property --tw-translate-x{syntax:"*";inherits:false;initial-value:0}@property --tw-translate-y{syntax:"*";inherits:false;initial-value:0}@property --tw-translate-z{syntax:"*";inherits:false;initial-value:0}@property --tw-space-y-reverse{syntax:"*";inherits:false;initial-value:0}@property --tw-border-style{syntax:"*";inherits:false;initial-value:solid}@property --tw-leading{syntax:"*";inherits:false}@property --tw-font-weight{syntax:"*";inherits:false}@property --tw-tracking{syntax:"*";inherits:false}@property --tw-shadow{syntax:"*";inherits:false;initial-value:0 0 #0000}@property --tw-shadow-color{syntax:"*";inherits:false}@property --tw-shadow-alpha{syntax:"<percentage>";inherits:false;initial-value:100%}@property --tw-inset-shadow{syntax:"*";inherits:false;initial-value:0 0 #0000}@property --tw-inset-shadow-color{syntax:"*";inherits:false}@property --tw-inset-shadow-alpha{syntax:"<percentage>";inherits:false;initial-value:100%}@property --tw-ring-color{syntax:"*";inherits:false}@property --tw-ring-shadow{syntax:"*";inherits:false;initial-value:0 0 #0000}@property --tw-inset-ring-color{syntax:"*";inherits:false}@property --tw-inset-ring-shadow{syntax:"*";inherits:false;initial-value:0 0 #0000}@property --tw-ring-inset{syntax:"*";inherits:false}@property --tw-ring-offset-width{syntax:"<length>";inherits:false;initial-value:0}@property --tw-ring-offset-color{syntax:"*";inherits:false;initial-value:#fff}@property --tw-ring-offset-shadow{syntax:"*";inherits:false;initial-value:0 0 #0000}@property --tw-blur{syntax:"*";inherits:false}@property --tw-brightness{syntax:"*";inherits:false}@property --tw-contrast{syntax:"*";inherits:false}@property --tw-grayscale{syntax:"*";inherits:false}@property --tw-hue-rotate{syntax:"*";inherits:false}@property --tw-invert{syntax:"*";inherits:false}@property --tw-opacity{syntax:"*";inherits:false}@property --tw-saturate{syntax:"*";inherits:false}@property --tw-sepia{syntax:"*";inherits:false}@property --tw-drop-shadow{syntax:"*";inherits:false}@property --tw-drop-shadow-color{syntax:"*";inherits:false}@property --tw-drop-shadow-alpha{syntax:"<percentage>";inherits:false;initial-value:100%}@property --tw-drop-shadow-size{syntax:"*";inherits:false}@keyframes spin{to{transform:rotate(360deg)}}

dist/assets/index-D4A1ut36.css

@@ -0,0 +1 @@
+@layer properties{@supports (((-webkit-hyphens:none)) and (not (margin-trim:inline))) or ((-moz-orient:inline) and (not (color:rgb(from red r g b)))){*,:before,:after,::backdrop{--tw-translate-x:0;--tw-translate-y:0;--tw-translate-z:0;--tw-space-y-reverse:0;--tw-border-style:solid;--tw-leading:initial;--tw-font-weight:initial;--tw-tracking:initial;--tw-shadow:0 0 #0000;--tw-shadow-color:initial;--tw-shadow-alpha:100%;--tw-inset-shadow:0 0 #0000;--tw-inset-shadow-color:initial;--tw-inset-shadow-alpha:100%;--tw-ring-color:initial;--tw-ring-shadow:0 0 #0000;--tw-inset-ring-color:initial;--tw-inset-ring-shadow:0 0 #0000;--tw-ring-inset:initial;--tw-ring-offset-width:0px;--tw-ring-offset-color:#fff;--tw-ring-offset-shadow:0 0 #0000;--tw-blur:initial;--tw-brightness:initial;--tw-contrast:initial;--tw-grayscale:initial;--tw-hue-rotate:initial;--tw-invert:initial;--tw-opacity:initial;--tw-saturate:initial;--tw-sepia:initial;--tw-drop-shadow:initial;--tw-drop-shadow-color:initial;--tw-drop-shadow-alpha:100%;--tw-drop-shadow-size:initial}}}@layer theme{:root,:host{--font-sans:ui-sans-serif,system-ui,sans-serif,"Apple Color Emoji","Segoe UI Emoji","Segoe UI Symbol","Noto Color Emoji";--font-mono:ui-monospace,SFMono-Regular,Menlo,Monaco,Consolas,"Liberation Mono","Courier New",monospace;--color-red-700:oklch(50.5% .213 27.518);--color-orange-200:oklch(90.1% .076 70.697);--color-orange-300:oklch(83.7% .128 66.29);--color-orange-400:oklch(75% .183 55.934);--color-blue-600:oklch(54.6% .245 262.881);--color-slate-50:oklch(98.4% .003 247.858);--color-slate-200:oklch(92.9% .013 255.508);--color-slate-300:oklch(86.9% .022 252.894);--color-slate-600:oklch(44.6% .043 257.281);--color-slate-800:oklch(27.9% .041 260.031);--color-gray-100:oklch(96.7% .003 264.542);--color-gray-200:oklch(92.8% .006 264.531);--color-gray-300:oklch(87.2% .01 258.338);--color-gray-700:oklch(37.3% .034 259.733);--color-gray-950:oklch(13% .028 261.692);--color-stone-50:oklch(98.5% .001 106.423);--color-stone-100:oklch(97% .001 106.424);--color-stone-200:oklch(92.3% .003 48.717);--color-stone-300:oklch(86.9% .005 56.366);--color-stone-400:oklch(70.9% .01 56.259);--color-stone-500:oklch(55.3% .013 58.071);--color-stone-600:oklch(44.4% .011 73.639);--color-stone-700:oklch(37.4% .01 67.558);--color-white:#fff;--spacing:.25rem;--text-xs:.75rem;--text-xs--line-height:calc(1/.75);--text-sm:.875rem;--text-sm--line-height:calc(1.25/.875);--text-lg:1.125rem;--text-lg--line-height:calc(1.75/1.125);--text-xl:1.25rem;--text-xl--line-height:calc(1.75/1.25);--text-2xl:1.5rem;--text-2xl--line-height:calc(2/1.5);--font-weight-normal:400;--font-weight-medium:500;--font-weight-semibold:600;--font-weight-bold:700;--tracking-tight:-.025em;--tracking-wide:.025em;--animate-spin:spin 1s linear infinite;--default-font-family:var(--font-sans);--default-mono-font-family:var(--font-mono)}}@layer base{*,:after,:before,::backdrop{box-sizing:border-box;border:0 solid;margin:0;padding:0}::file-selector-button{box-sizing:border-box;border:0 solid;margin:0;padding:0}html,:host{-webkit-text-size-adjust:100%;tab-size:4;line-height:1.5;font-family:var(--default-font-family,ui-sans-serif,system-ui,sans-serif,"Apple Color Emoji","Segoe UI Emoji","Segoe UI Symbol","Noto Color Emoji");font-feature-settings:var(--default-font-feature-settings,normal);font-variation-settings:var(--default-font-variation-settings,normal);-webkit-tap-highlight-color:transparent}hr{height:0;color:inherit;border-top-width:1px}abbr:where([title]){-webkit-text-decoration:underline dotted;text-decoration:underline dotted}h1,h2,h3,h4,h5,h6{font-size:inherit;font-weight:inherit}a{color:inherit;-webkit-text-decoration:inherit;text-decoration:inherit}b,strong{font-weight:bolder}code,kbd,samp,pre{font-family:var(--default-mono-font-family,ui-monospace,SFMono-Regular,Menlo,Monaco,Consolas,"Liberation Mono","Courier New",monospace);font-feature-settings:var(--default-mono-font-feature-settings,normal);font-variation-settings:var(--default-mono-font-variation-settings,normal);font-size:1em}small{font-size:80%}sub,sup{vertical-align:baseline;font-size:75%;line-height:0;position:relative}sub{bottom:-.25em}sup{top:-.5em}table{text-indent:0;border-color:inherit;border-collapse:collapse}:-moz-focusring{outline:auto}progress{vertical-align:baseline}summary{display:list-item}ol,ul,menu{list-style:none}img,svg,video,canvas,audio,iframe,embed,object{vertical-align:middle;display:block}img,video{max-width:100%;height:auto}button,input,select,optgroup,textarea{font:inherit;font-feature-settings:inherit;font-variation-settings:inherit;letter-spacing:inherit;color:inherit;opacity:1;background-color:#0000;border-radius:0}::file-selector-button{font:inherit;font-feature-settings:inherit;font-variation-settings:inherit;letter-spacing:inherit;color:inherit;opacity:1;background-color:#0000;border-radius:0}:where(select:is([multiple],[size])) optgroup{font-weight:bolder}:where(select:is([multiple],[size])) optgroup option{padding-inline-start:20px}::file-selector-button{margin-inline-end:4px}::placeholder{opacity:1}@supports (not ((-webkit-appearance:-apple-pay-button))) or (contain-intrinsic-size:1px){::placeholder{color:currentColor}@supports (color:color-mix(in lab,red,red)){::placeholder{color:color-mix(in oklab,currentcolor 50%,transparent)}}}textarea{resize:vertical}::-webkit-search-decoration{-webkit-appearance:none}::-webkit-date-and-time-value{min-height:1lh;text-align:inherit}::-webkit-datetime-edit{display:inline-flex}::-webkit-datetime-edit-fields-wrapper{padding:0}::-webkit-datetime-edit{padding-block:0}::-webkit-datetime-edit-year-field{padding-block:0}::-webkit-datetime-edit-month-field{padding-block:0}::-webkit-datetime-edit-day-field{padding-block:0}::-webkit-datetime-edit-hour-field{padding-block:0}::-webkit-datetime-edit-minute-field{padding-block:0}::-webkit-datetime-edit-second-field{padding-block:0}::-webkit-datetime-edit-millisecond-field{padding-block:0}::-webkit-datetime-edit-meridiem-field{padding-block:0}::-webkit-calendar-picker-indicator{line-height:1}:-moz-ui-invalid{box-shadow:none}button,input:where([type=button],[type=reset],[type=submit]){appearance:button}::file-selector-button{appearance:button}::-webkit-inner-spin-button{height:auto}::-webkit-outer-spin-button{height:auto}[hidden]:where(:not([hidden=until-found])){display:none!important}}@layer components;@layer utilities{.fixed{position:fixed}.relative{position:relative}.inset-0{inset:calc(var(--spacing)*0)}.z-50{z-index:50}.m-4{margin:calc(var(--spacing)*4)}.-mt-2{margin-top:calc(var(--spacing)*-2)}.-mt-5{margin-top:calc(var(--spacing)*-5)}.-mt-6{margin-top:calc(var(--spacing)*-6)}.mt-0{margin-top:calc(var(--spacing)*0)}.-mb-2{margin-bottom:calc(var(--spacing)*-2)}.mb-0{margin-bottom:calc(var(--spacing)*0)}.mb-3{margin-bottom:calc(var(--spacing)*3)}.mb-4{margin-bottom:calc(var(--spacing)*4)}.flex{display:flex}.grid{display:grid}.hidden{display:none}.h-3{height:calc(var(--spacing)*3)}.h-8{height:calc(var(--spacing)*8)}.h-10{height:calc(var(--spacing)*10)}.h-16{height:calc(var(--spacing)*16)}.h-64{height:calc(var(--spacing)*64)}.h-full{height:100%}.h-px{height:1px}.min-h-0{min-height:calc(var(--spacing)*0)}.min-h-64{min-height:calc(var(--spacing)*64)}.min-h-\[320px\]{min-height:320px}.min-h-\[420px\]{min-height:420px}.w-3{width:calc(var(--spacing)*3)}.w-16{width:calc(var(--spacing)*16)}.w-fit{width:fit-content}.w-full{width:100%}.min-w-0{min-width:calc(var(--spacing)*0)}.flex-1{flex:1}.flex-none{flex:none}.shrink-0{flex-shrink:0}.translate-y-4{--tw-translate-y:calc(var(--spacing)*4);translate:var(--tw-translate-x)var(--tw-translate-y)}.animate-spin{animation:var(--animate-spin)}.cursor-pointer{cursor:pointer}.resize-none{resize:none}.list-decimal{list-style-type:decimal}.list-disc{list-style-type:disc}.grid-cols-1{grid-template-columns:repeat(1,minmax(0,1fr))}.grid-cols-2{grid-template-columns:repeat(2,minmax(0,1fr))}.grid-cols-3{grid-template-columns:repeat(3,minmax(0,1fr))}.grid-cols-\[1fr_12fr_1fr\]{grid-template-columns:1fr 12fr 1fr}.grid-cols-\[6rem_minmax\(0\,1fr\)\]{grid-template-columns:6rem minmax(0,1fr)}.flex-col{flex-direction:column}.flex-wrap{flex-wrap:wrap}.items-center{align-items:center}.justify-between{justify-content:space-between}.justify-center{justify-content:center}.gap-0\.5{gap:calc(var(--spacing)*.5)}.gap-1{gap:calc(var(--spacing)*1)}.gap-1\.5{gap:calc(var(--spacing)*1.5)}.gap-2{gap:calc(var(--spacing)*2)}.gap-3{gap:calc(var(--spacing)*3)}.gap-4{gap:calc(var(--spacing)*4)}.gap-6{gap:calc(var(--spacing)*6)}.gap-12{gap:calc(var(--spacing)*12)}:where(.space-y-6>:not(:last-child)){--tw-space-y-reverse:0;margin-block-start:calc(calc(var(--spacing)*6)*var(--tw-space-y-reverse));margin-block-end:calc(calc(var(--spacing)*6)*calc(1 - var(--tw-space-y-reverse)))}.justify-self-end{justify-self:flex-end}.overflow-auto{overflow:auto}.rounded{border-radius:.25rem}.rounded-full{border-radius:3.40282e38px}.border{border-style:var(--tw-border-style);border-width:1px}.border-4{border-style:var(--tw-border-style);border-width:4px}.border-b{border-bottom-style:var(--tw-border-style);border-bottom-width:1px}.border-b-2{border-bottom-style:var(--tw-border-style);border-bottom-width:2px}.border-gray-200{border-color:var(--color-gray-200)}.border-gray-300{border-color:var(--color-gray-300)}.border-orange-400{border-color:var(--color-orange-400)}.border-slate-200{border-color:var(--color-slate-200)}.border-stone-200{border-color:var(--color-stone-200)}.border-stone-300{border-color:var(--color-stone-300)}.border-t-blue-600{border-top-color:var(--color-blue-600)}.bg-gray-100{background-color:var(--color-gray-100)}.bg-orange-200{background-color:var(--color-orange-200)}.bg-slate-50{background-color:var(--color-slate-50)}.bg-slate-300{background-color:var(--color-slate-300)}.bg-stone-50{background-color:var(--color-stone-50)}.bg-stone-100{background-color:var(--color-stone-100)}.bg-white{background-color:var(--color-white)}.p-2{padding:calc(var(--spacing)*2)}.p-4{padding:calc(var(--spacing)*4)}.p-6{padding:calc(var(--spacing)*6)}.px-2{padding-inline:calc(var(--spacing)*2)}.px-3{padding-inline:calc(var(--spacing)*3)}.px-5{padding-inline:calc(var(--spacing)*5)}.py-1{padding-block:calc(var(--spacing)*1)}.py-2{padding-block:calc(var(--spacing)*2)}.pr-0\.25{padding-right:calc(var(--spacing)*.25)}.pl-4{padding-left:calc(var(--spacing)*4)}.text-center{text-align:center}.text-right{text-align:right}.text-2xl{font-size:var(--text-2xl);line-height:var(--tw-leading,var(--text-2xl--line-height))}.text-lg{font-size:var(--text-lg);line-height:var(--tw-leading,var(--text-lg--line-height))}.text-sm{font-size:var(--text-sm);line-height:var(--tw-leading,var(--text-sm--line-height))}.text-xl{font-size:var(--text-xl);line-height:var(--tw-leading,var(--text-xl--line-height))}.text-xs{font-size:var(--text-xs);line-height:var(--tw-leading,var(--text-xs--line-height))}.leading-6{--tw-leading:calc(var(--spacing)*6);line-height:calc(var(--spacing)*6)}.font-bold{--tw-font-weight:var(--font-weight-bold);font-weight:var(--font-weight-bold)}.font-medium{--tw-font-weight:var(--font-weight-medium);font-weight:var(--font-weight-medium)}.font-normal{--tw-font-weight:var(--font-weight-normal);font-weight:var(--font-weight-normal)}.font-semibold{--tw-font-weight:var(--font-weight-semibold);font-weight:var(--font-weight-semibold)}.tracking-tight{--tw-tracking:var(--tracking-tight);letter-spacing:var(--tracking-tight)}.tracking-wide{--tw-tracking:var(--tracking-wide);letter-spacing:var(--tracking-wide)}.whitespace-nowrap{white-space:nowrap}.text-gray-700{color:var(--color-gray-700)}.text-gray-950{color:var(--color-gray-950)}.text-orange-400{color:var(--color-orange-400)}.text-red-700{color:var(--color-red-700)}.text-slate-600{color:var(--color-slate-600)}.text-slate-800{color:var(--color-slate-800)}.text-stone-500{color:var(--color-stone-500)}.text-stone-600{color:var(--color-stone-600)}.text-stone-700{color:var(--color-stone-700)}.shadow-sm{--tw-shadow:0 1px 3px 0 var(--tw-shadow-color,#0000001a),0 1px 2px -1px var(--tw-shadow-color,#0000001a);box-shadow:var(--tw-inset-shadow),var(--tw-inset-ring-shadow),var(--tw-ring-offset-shadow),var(--tw-ring-shadow),var(--tw-shadow)}.blur{--tw-blur:blur(8px);filter:var(--tw-blur,)var(--tw-brightness,)var(--tw-contrast,)var(--tw-grayscale,)var(--tw-hue-rotate,)var(--tw-invert,)var(--tw-saturate,)var(--tw-sepia,)var(--tw-drop-shadow,)}.last\:mb-0:last-child{margin-bottom:calc(var(--spacing)*0)}@media(hover:hover){.hover\:bg-gray-200:hover{background-color:var(--color-gray-200)}.hover\:bg-orange-300:hover{background-color:var(--color-orange-300)}.hover\:bg-stone-200:hover{background-color:var(--color-stone-200)}}.focus\:ring-2:focus{--tw-ring-shadow:var(--tw-ring-inset,)0 0 0 calc(2px + var(--tw-ring-offset-width))var(--tw-ring-color,currentcolor);box-shadow:var(--tw-inset-shadow),var(--tw-inset-ring-shadow),var(--tw-ring-offset-shadow),var(--tw-ring-shadow),var(--tw-shadow)}.focus\:ring-stone-400:focus{--tw-ring-color:var(--color-stone-400)}.focus\:outline-none:focus{--tw-outline-style:none;outline-style:none}.disabled\:cursor-not-allowed:disabled{cursor:not-allowed}.disabled\:opacity-50:disabled{opacity:.5}@media(min-width:64rem){.lg\:flex{display:flex}.lg\:h-dvh{height:100dvh}.lg\:grid-cols-\[2fr_1fr\]{grid-template-columns:2fr 1fr}.lg\:gap-12{gap:calc(var(--spacing)*12)}}.\[\&_p\]\:mb-0 p{margin-bottom:calc(var(--spacing)*0)}}.title{font-size:32px;font-weight:700}.status{color:var(--ink-soft);border:1px solid var(--line);background:#ffffffbf;border-radius:999px;flex:none;align-items:center;gap:8px;padding:8px 12px;font-size:12px;display:flex}.status span{background:#d69b25;border-radius:50%;width:8px;height:8px;box-shadow:0 0 0 4px #f8ebca}.status.ready span{background:#2c9b68;box-shadow:0 0 0 4px #d9f0e5}.status.error span{background:#c74848;box-shadow:0 0 0 4px #f5dddd}@property --tw-translate-x{syntax:"*";inherits:false;initial-value:0}@property --tw-translate-y{syntax:"*";inherits:false;initial-value:0}@property --tw-translate-z{syntax:"*";inherits:false;initial-value:0}@property --tw-space-y-reverse{syntax:"*";inherits:false;initial-value:0}@property --tw-border-style{syntax:"*";inherits:false;initial-value:solid}@property --tw-leading{syntax:"*";inherits:false}@property --tw-font-weight{syntax:"*";inherits:false}@property --tw-tracking{syntax:"*";inherits:false}@property --tw-shadow{syntax:"*";inherits:false;initial-value:0 0 #0000}@property --tw-shadow-color{syntax:"*";inherits:false}@property --tw-shadow-alpha{syntax:"<percentage>";inherits:false;initial-value:100%}@property --tw-inset-shadow{syntax:"*";inherits:false;initial-value:0 0 #0000}@property --tw-inset-shadow-color{syntax:"*";inherits:false}@property --tw-inset-shadow-alpha{syntax:"<percentage>";inherits:false;initial-value:100%}@property --tw-ring-color{syntax:"*";inherits:false}@property --tw-ring-shadow{syntax:"*";inherits:false;initial-value:0 0 #0000}@property --tw-inset-ring-color{syntax:"*";inherits:false}@property --tw-inset-ring-shadow{syntax:"*";inherits:false;initial-value:0 0 #0000}@property --tw-ring-inset{syntax:"*";inherits:false}@property --tw-ring-offset-width{syntax:"<length>";inherits:false;initial-value:0}@property --tw-ring-offset-color{syntax:"*";inherits:false;initial-value:#fff}@property --tw-ring-offset-shadow{syntax:"*";inherits:false;initial-value:0 0 #0000}@property --tw-blur{syntax:"*";inherits:false}@property --tw-brightness{syntax:"*";inherits:false}@property --tw-contrast{syntax:"*";inherits:false}@property --tw-grayscale{syntax:"*";inherits:false}@property --tw-hue-rotate{syntax:"*";inherits:false}@property --tw-invert{syntax:"*";inherits:false}@property --tw-opacity{syntax:"*";inherits:false}@property --tw-saturate{syntax:"*";inherits:false}@property --tw-sepia{syntax:"*";inherits:false}@property --tw-drop-shadow{syntax:"*";inherits:false}@property --tw-drop-shadow-color{syntax:"*";inherits:false}@property --tw-drop-shadow-alpha{syntax:"<percentage>";inherits:false;initial-value:100%}@property --tw-drop-shadow-size{syntax:"*";inherits:false}@keyframes spin{to{transform:rotate(360deg)}}

dist/assets/{pyodide.worker-CMc9uFEp.js → pyodide.worker-Cq5E6qzM.js}

@@ -1,4 +1,4 @@
-(function(){"use strict";var s=`import numpy as np
+(function(){"use strict";var y=`import numpy as np
 from sympy import (
     lambdify, 
     symbols, 
@@ -354,210 +354,7 @@ class OptimizationManager:
                 )
             else:
                 raise ValueError("Unsupported algorithm for bivariate mode")
-
-        def handle_compute_trajectory(self, settings: dict) -> dict[str, dict]:
-            """
-            Compute function values and a full trajectory for the given settings
-            without modifying the manager's current state.
-            """
-            try:
-                mode = settings.get("mode", "").lower().strip()
-                function = settings.get("functionExpr", "").strip()
-                xlim = settings.get("xlim", [])
-                ylim = settings.get("ylim", [])
-
-                if not self._is_valid_function(function, mode, xlim, ylim):
-                    return {
-                        "trajectoryValues": {"x": [], "y": []},
-                        "functionValues": {"x": [], "y": []},
-                    }
-
-                # compute function values (local)
-                if mode == "univariate":
-                    x = np.linspace(xlim[0], xlim[1], 101)
-                    f = lambdify('x', self._parse_function(function), modules=['numpy'])
-                    y = f(x)
-                    if not isinstance(y, np.ndarray):
-                        y = np.full_like(x, y)
-                    function_values = {"x": x.tolist(), "y": y.tolist()}
-
-                elif mode == "bivariate":
-                    x = np.linspace(xlim[0], xlim[1], 101)
-                    y = np.linspace(ylim[0], ylim[1], 101)
-                    X, Y = np.meshgrid(x, y)
-                    expr = self._parse_function(function)
-                    f = lambdify(('x', 'y'), expr, modules=['numpy'])
-                    gradient_x = lambdify(('x', 'y'), expr.diff('x'), modules=['numpy'])
-                    gradient_y = lambdify(('x', 'y'), expr.diff('y'), modules=['numpy'])
-                    Z = f(X, Y)
-                    gradient_x_values = gradient_x(X, Y)
-                    gradient_y_values = gradient_y(X, Y)
-                    if not isinstance(Z, np.ndarray):
-                        Z = np.full_like(X, Z)
-                    if not isinstance(gradient_x_values, np.ndarray):
-                        gradient_x_values = np.full_like(X, gradient_x_values)
-                    if not isinstance(gradient_y_values, np.ndarray):
-                        gradient_y_values = np.full_like(Y, gradient_y_values)
-                    function_values = {
-                        "x": x.tolist(),
-                        "y": y.tolist(),
-                        "z": Z.tolist(),
-                        "gradientX": gradient_x_values.tolist(),
-                        "gradientY": gradient_y_values.tolist(),
-                    }
-                else:
-                    raise ValueError("Unsupported mode")
-
-                # compute trajectory values using existing helper logic
-                # choose a reasonably large number of steps for comparison
-                steps = 100
-                # reuse _compute_trajectory_values logic by calling the same functions
-                # but capture result into a local variable
-                mode_key = mode
-                algorithm = settings.get("algorithm", "").lower().strip().replace(" ", "_")
-
-                if mode_key == "univariate":
-                    if algorithm == "gradient_descent":
-                        traj = gd_univariate(
-                            self._parse_function(function),
-                            float(settings["x0"]),
-                            float(settings.get("learningRate", 0.1)),
-                            float(settings.get("momentum", 0.0)),
-                            steps,
-                        )
-                    elif algorithm == "nesterov":
-                        traj = nesterov_univariate(
-                            self._parse_function(function),
-                            float(settings["x0"]),
-                            float(settings.get("learningRate", 0.1)),
-                            float(settings.get("momentum", 0.0)),
-                            steps,
-                        )
-                    elif algorithm == "adam":
-                        traj = adam_univariate(
-                            self._parse_function(function),
-                            float(settings["x0"]),
-                            float(settings.get("learningRate", 0.1)),
-                            float(settings.get("beta1", 0.9)),
-                            float(settings.get("beta2", 0.999)),
-                            float(settings.get("epsilon", 1e-8)),
-                            steps,
-                        )
-                    elif algorithm == "adagrad":
-                        traj = adagrad_univariate(
-                            self._parse_function(function),
-                            float(settings["x0"]),
-                            float(settings.get("learningRate", 0.1)),
-                            float(settings.get("epsilon", 1e-8)),
-                            steps,
-                        )
-                    elif algorithm == "rmsprop":
-                        traj = rmsprop_univariate(
-                            self._parse_function(function),
-                            float(settings["x0"]),
-                            float(settings.get("learningRate", 0.1)),
-                            float(settings.get("beta", 0.9)),
-                            float(settings.get("epsilon", 1e-8)),
-                            steps,
-                        )
-                    elif algorithm == "adadelta":
-                        traj = adadelta_univariate(
-                            self._parse_function(function),
-                            float(settings["x0"]),
-                            float(settings.get("beta", 0.9)),
-                            float(settings.get("epsilon", 1e-3)),
-                            steps,
-                        )
-                    elif algorithm == "newton":
-                        traj = newton_univariate(
-                            self._parse_function(function),
-                            float(settings["x0"]),
-                            steps,
-                        )
-                    else:
-                        raise ValueError("Unsupported algorithm for univariate mode")
-
-                elif mode_key == "bivariate":
-                    if algorithm == "gradient_descent":
-                        traj = gd_bivariate(
-                            self._parse_function(function),
-                            float(settings["x0"]),
-                            float(settings["y0"]),
-                            float(settings.get("learningRate", 0.1)),
-                            float(settings.get("momentum", 0.0)),
-                            steps,
-                        )
-                    elif algorithm == "nesterov":
-                        traj = nesterov_bivariate(
-                            self._parse_function(function),
-                            float(settings["x0"]),
-                            float(settings["y0"]),
-                            float(settings.get("learningRate", 0.1)),
-                            float(settings.get("momentum", 0.0)),
-                            steps,
-                        )
-                    elif algorithm == "adam":
-                        traj = adam_bivariate(
-                            self._parse_function(function),
-                            float(settings["x0"]),
-                            float(settings["y0"]),
-                            float(settings.get("learningRate", 0.1)),
-                            float(settings.get("beta1", 0.9)),
-                            float(settings.get("beta2", 0.999)),
-                            float(settings.get("epsilon", 1e-8)),
-                            steps,
-                        )
-                    elif algorithm == "adagrad":
-                        traj = adagrad_bivariate(
-                            self._parse_function(function),
-                            float(settings["x0"]),
-                            float(settings["y0"]),
-                            float(settings.get("learningRate", 0.1)),
-                            float(settings.get("epsilon", 1e-8)),
-                            steps,
-                        )
-                    elif algorithm == "rmsprop":
-                        traj = rmsprop_bivariate(
-                            self._parse_function(function),
-                            float(settings["x0"]),
-                            float(settings["y0"]),
-                            float(settings.get("learningRate", 0.1)),
-                            float(settings.get("beta", 0.9)),
-                            float(settings.get("epsilon", 1e-8)),
-                            steps,
-                        )
-                    elif algorithm == "adadelta":
-                        traj = adadelta_bivariate(
-                            self._parse_function(function),
-                            float(settings["x0"]),
-                            float(settings["y0"]),
-                            float(settings.get("beta", 0.9)),
-                            float(settings.get("epsilon", 1e-3)),
-                            steps,
-                        )
-                    elif algorithm == "newton":
-                        traj = newton_bivariate(
-                            self._parse_function(function),
-                            float(settings["x0"]),
-                            float(settings["y0"]),
-                            steps,
-                        )
-                    else:
-                        raise ValueError("Unsupported algorithm for bivariate mode")
-
-                else:
-                    raise ValueError("Unsupported mode")
-
-                return {
-                    "functionValues": function_values,
-                    "trajectoryValues": traj,
-                }
-            except Exception as e:
-                return {
-                    "trajectoryValues": {"x": [], "y": []},
-                    "functionValues": {"x": [], "y": []},
-                }
-`,l=`import numpy as np
+`,u=`import numpy as np
 from sympy import lambdify, Expr
 
 
@@ -1220,4 +1017,4 @@ def adam_bivariate(
         "gradient": gradient_values,
         "hessian": hessian_values,
     }
-`;const f="https://cdn.jsdelivr.net/pyodide/v0.26.1/full/pyodide.mjs";let e=null,t=null;async function r(){const{loadPyodide:n}=await import(f);e=await n({indexURL:"https://cdn.jsdelivr.net/pyodide/v0.26.1/full/"}),await e.loadPackage(["numpy","sympy"]),e.FS.writeFile("optimization_logic.py",l),e.FS.writeFile("optimization_manager.py",s),e.runPython("from optimization_manager import OptimizationManager; manager = OptimizationManager();"),t=e.globals.get("manager"),t||console.error("Failed to initialize optimization manager"),self.postMessage({type:"READY"})}function i(n){if(!n)return null;try{const a=n.toJs({dict_converter:Object.fromEntries});n.destroy&&n.destroy(),self.postMessage({type:"RESULT",data:a})}catch(a){console.error("Error handling Python result:",a)}}self.onmessage=async n=>{const a=n.data;if(!t){console.warn("Pyodide is not ready yet");return}switch(a.type){case"INIT":const o=e.toPy(a.settings);i(t.handle_update_settings(o));break;case"NEXT_STEP":i(t.handle_next_step());break;case"PREV_STEP":i(t.handle_prev_step());break;case"RESET":i(t.handle_reset());break;default:console.error("Unknown message type:",a);break}},r()})();
+`;const x="https://cdn.jsdelivr.net/pyodide/v0.26.1/full/pyodide.mjs";let e=null,t=null;async function d(){const{loadPyodide:a}=await import(x);e=await a({indexURL:"https://cdn.jsdelivr.net/pyodide/v0.26.1/full/"}),await e.loadPackage(["numpy","sympy"]),e.FS.writeFile("optimization_logic.py",u),e.FS.writeFile("optimization_manager.py",y),e.runPython("from optimization_manager import OptimizationManager; manager = OptimizationManager();"),t=e.globals.get("manager"),t||console.error("Failed to initialize optimization manager"),self.postMessage({type:"READY"})}function s(a){if(!a)return null;try{const n=a.toJs({dict_converter:Object.fromEntries});a.destroy&&a.destroy(),self.postMessage({type:"RESULT",data:n})}catch(n){console.error("Error handling Python result:",n)}}self.onmessage=async a=>{const n=a.data;if(!t){console.warn("Pyodide is not ready yet");return}switch(n.type){case"COMPARE":{const p=n.settings.map((m,r)=>{const o=e.globals.get("OptimizationManager"),i=o();o.destroy();const f=e.toPy(m);try{i.handle_update_settings(f)?.destroy(),i._compute_trajectory_values(f,n.iteration+1);const l=i.trajectory_values;try{return{id:n.ids[r],values:l.toJs({dict_converter:Object.fromEntries})}}finally{l.destroy()}}catch(l){return{id:n.ids[r],values:{x:[],y:[]},error:String(l)}}finally{f.destroy(),i.destroy()}});self.postMessage({type:"COMPARISON_RESULT",requestId:n.requestId,trajectories:p});break}case"INIT":const _=e.toPy(n.settings);s(t.handle_update_settings(_));break;case"NEXT_STEP":s(t.handle_next_step());break;case"PREV_STEP":s(t.handle_prev_step());break;case"RESET":s(t.handle_reset());break;default:console.error("Unknown message type:",n);break}},d()})();

dist/index.html

@@ -5,8 +5,8 @@
     <link rel="icon" type="image/svg+xml" href="/vite.svg" />
     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
     <title>Optimization</title>
-    <script type="module" crossorigin src="/assets/index-DxXDp_Rq.js"></script>
-    <link rel="stylesheet" crossorigin href="/assets/index-Bs9s2ktO.css">
+    <script type="module" crossorigin src="/assets/index-nsC-BkSr.js"></script>
+    <link rel="stylesheet" crossorigin href="/assets/index-D4A1ut36.css">
   </head>
   <body>
     <div id="root"></div>

frontends/react/src/AlgorithmControls.tsx

@@ -0,0 +1,167 @@
+import { useEffect, useState } from "react";
+import { InputField } from "@elvis/ui";
+import { SUPPORTED_ALGORITHMS, type SettingsUi } from "./types";
+export const DEFAULT_HYPERPARAMETERS = {
+  "Gradient Descent": { learningRate: "0.1", momentum: "0.0" },
+  "Nesterov": { learningRate: "0.1", momentum: "0.1" },
+  "Adam": { learningRate: "0.1", beta1: "0.9", beta2: "0.999", epsilon: "1e-8" },
+  "Adagrad": { learningRate: "0.1", epsilon: "1e-8" },
+  "RMSProp": { learningRate: "0.1", beta: "0.9", epsilon: "1e-8" },
+  "Adadelta": { beta: "0.9", epsilon: "1e-3" },
+  "Newton": {}
+}
+
+
+export default function AlgorithmControls({ settings, setSettings, onRandomInitialPoint, showInitialPoint = true }: {
+  settings: SettingsUi;
+  setSettings: (settings: SettingsUi) => void;
+  onRandomInitialPoint?: () => void;
+  showInitialPoint?: boolean;
+}) {
+  function updateSettings(key: keyof SettingsUi, value: string) {
+    if (key === "algorithm") {
+      const defaults = DEFAULT_HYPERPARAMETERS[value as keyof typeof DEFAULT_HYPERPARAMETERS];
+      setSettings({ mode: settings.mode, functionExpr: settings.functionExpr, x0: settings.x0, y0: settings.y0, algorithm: value as SettingsUi["algorithm"], ...defaults });
+    } else {
+      setSettings({ ...settings, [key]: value });
+    }
+  }
+
+  const [initialPointInput, setInitialPointInput] = useState<string>(() =>
+    [settings.x0 ?? "", settings.y0 ?? ""].filter((part) => part !== "").join(", ")
+  );
+
+  useEffect(() => {
+    if (settings.mode === "Bivariate") {
+      setInitialPointInput([settings.x0 ?? "", settings.y0 ?? ""].filter((part) => part !== "").join(", "));
+    }
+  }, [settings.mode, settings.x0, settings.y0]);
+
+  function handleInitialPointChange(value: string) {
+    setInitialPointInput(value);
+
+    if (settings.mode === "Bivariate") {
+      const parts = value.split(",").map((part) => part.trim());
+      const [xValue, yValue] = parts;
+
+      setSettings({
+        ...settings,
+        x0: xValue ?? "",
+        y0: yValue ?? settings.y0 ?? "",
+      });
+    } else {
+      updateSettings("x0", value);
+    }
+  }
+
+  return <>
+            <div className="grid grid-cols-[6rem_minmax(0,1fr)] items-center gap-0.5">
+              <label className="text-sm font-semibold whitespace-nowrap pr-0.25">Algorithm</label>
+              <div className="min-w-0">
+                <select
+                  value={settings.algorithm}
+                  onChange={(event) => updateSettings("algorithm", event.target.value as SettingsUi["algorithm"])}
+                  className="h-10 w-full rounded border border-stone-300 bg-white px-2 py-2 text-sm focus:outline-none focus:ring-2 focus:ring-stone-400"
+                >
+                  {SUPPORTED_ALGORITHMS.map((option) => (
+                    <option key={option} value={option}>
+                      {option}
+                    </option>
+                  ))}
+                </select>
+              </div>
+            </div>
+            {showInitialPoint && (settings.mode === "Bivariate" ? (
+              <div className="grid grid-cols-[6rem_minmax(0,1fr)] items-center gap-0.5">
+                <label className="text-sm font-medium whitespace-nowrap pr-0.25">Initial (X, Y)</label>
+                <div className="flex min-w-0 items-center gap-2">
+                  <input
+                    type="text"
+                    value={initialPointInput}
+                    onChange={(event) => handleInitialPointChange(event.target.value)}
+                    className="h-10 w-full rounded border border-stone-300 px-2 py-1 text-sm focus:outline-none focus:ring-2 focus:ring-stone-400"
+                  />
+                  <button
+                    type="button"
+                    onClick={onRandomInitialPoint}
+                    className="h-10 rounded border border-gray-300 bg-orange-200 px-3 py-1 text-sm text-stone-700 hover:bg-orange-300"
+                  >
+                    random
+                  </button>
+                </div>
+              </div>
+            ) : (
+              <div className="grid grid-cols-[6rem_minmax(0,1fr)] items-center gap-0.5">
+                <label className="text-sm font-medium whitespace-nowrap pr-0.25">Initial X</label>
+                <div className="flex min-w-0 items-center gap-2">
+                  <input
+                    type="text"
+                    value={settings.x0}
+                    onChange={(event) => updateSettings("x0", event.target.value)}
+                    className="h-10 w-full rounded border border-stone-300 px-2 py-1 text-sm focus:outline-none focus:ring-2 focus:ring-stone-400"
+                  />
+                  <button
+                    type="button"
+                    onClick={onRandomInitialPoint}
+                    className="h-10 rounded border border-gray-300 bg-orange-200 px-3 py-1 text-sm text-stone-700 hover:bg-orange-300"
+                  >
+                    random
+                  </button>
+                </div>
+              </div>
+            ))}
+            
+            <div className="grid grid-cols-2 gap-2">
+              {["Gradient Descent", "Nesterov", "Adam", "Adagrad", "RMSProp"].includes(settings.algorithm) && (
+                <>
+                  <InputField
+                    label="Learning Rate"
+                    value={settings.learningRate}
+                    onChange={(value) => updateSettings("learningRate", value)}
+                  />
+                </>
+              )}
+              {["Gradient Descent", "Nesterov"].includes(settings.algorithm) && (
+                <>
+                  <InputField
+                    label="Momentum"
+                    value={settings.momentum}
+                    onChange={(value) => updateSettings("momentum", value)}
+                  />
+                </>
+              )}
+              {settings.algorithm === "Adam" && (
+                <>
+                  <InputField
+                    label="Beta 1"
+                    value={settings.beta1}
+                    onChange={(value) => updateSettings("beta1", value)}
+                  />
+                  <InputField
+                    label="Beta 2"
+                    value={settings.beta2}
+                    onChange={(value) => updateSettings("beta2", value)}
+                  />
+                </>
+              )}
+              {["RMSProp", "Adadelta"].includes(settings.algorithm) && (
+                <>
+                  <InputField
+                    label="Beta"
+                    value={settings.beta}
+                    onChange={(value) => updateSettings("beta", value)}
+                  />
+                </>
+              )}
+              {["Adam", "Adagrad", "RMSProp", "Adadelta"].includes(settings.algorithm) && (
+                <>
+                  <InputField
+                    label="Epsilon"
+                    value={settings.epsilon}
+                    onChange={(value) => updateSettings("epsilon", value)}
+                  />
+                </>
+              )}
+            </div>
+  </>;
+}

frontends/react/src/App.tsx

@@ -1,7 +1,8 @@
 import { useEffect, useState, useRef } from "react";
 import OptimizationPlot from "./OptimizationPlot.tsx";
 import Sidebar from "./Sidebar.tsx";
-import type { SettingsUi } from "./types.ts";
+import ComparePanel from "./ComparePanel";
+import type { ComparisonEntry, SettingsUi } from "./types.ts";
 import usePyodide from "./usePyodide.ts";
 
 const INITIAL_SETTINGS_UI: SettingsUi = {
@@ -19,6 +20,11 @@ const INITIAL_YLIM: [number, number] = [-1, 1];
 
 export default function App() {
   const [settingsUi, setSettingsUi] = useState<SettingsUi>(INITIAL_SETTINGS_UI);
+  const [compareActive, setCompareActive] = useState(false);
+  const [entries, setEntries] = useState<ComparisonEntry[]>([]);
+  const [comparisonIteration, setComparisonIteration] = useState(0);
+  const [comparisonAnimating, setComparisonAnimating] = useState(false);
+  const nextId = useRef(1);
   const [isAnimating, setIsAnimating] = useState(false);
   const [showGradientField, setShowGradientField] = useState(false);
   const xlimRef = useRef<[number, number]>(INITIAL_XLIM);
@@ -27,6 +33,12 @@ export default function App() {
 
   function handleSettingsUiChange(newSettings: SettingsUi) {
     setIsAnimating(false);
+    if (newSettings.mode !== settingsUi.mode || newSettings.functionExpr !== settingsUi.functionExpr
+      || newSettings.x0 !== settingsUi.x0 || newSettings.y0 !== settingsUi.y0) {
+      setComparisonAnimating(false);
+      setComparisonIteration(0);
+      setEntries(previous => previous.map(entry => ({ ...entry, settings: { ...entry.settings, mode: newSettings.mode, functionExpr: newSettings.functionExpr } })));
+    }
     setSettingsUi(newSettings);
     api.sendInit({ ...newSettings, xlim: xlimRef.current, ylim: ylimRef.current });
   }
@@ -47,6 +59,17 @@ export default function App() {
   }
 
   const api = usePyodide(settings);
+  const { compare, comparisonBusy, isLoading } = api;
+  useEffect(() => {
+    if (!isLoading) compare(entries.map(entry => ({ ...entry.settings, xlim: xlimRef.current, ylim: ylimRef.current })), entries.map(entry => entry.id), comparisonIteration);
+  }, [entries, comparisonIteration, compare, isLoading]);
+
+  useEffect(() => {
+    if (!comparisonAnimating || comparisonBusy || isLoading) return;
+    const timeout = window.setTimeout(() => setComparisonIteration(value => value + 1), 200);
+    return () => window.clearTimeout(timeout);
+  }, [comparisonAnimating, comparisonBusy, isLoading, comparisonIteration]);
+
   const sendNextStep = api.sendNextStep;
   const currentIteration = api.currentIteration;
   const totalIterations = Math.max((api.plotData.trajectoryValues?.x.length ?? 1) - 1, 0);
@@ -81,7 +104,8 @@ export default function App() {
 
 				<div className="grid grid-cols-1 lg:grid-cols-[2fr_1fr] gap-12 flex-1 min-h-0 overflow-auto">
 					<OptimizationPlot 
-						data={api.plotData}
+						data={compareActive ? { functionValues: api.plotData.functionValues } : api.plotData}
+            comparisons={compareActive ? entries.map(entry => ({ ...entry, values: api.comparison.find(item => item.id === entry.id)?.values })) : undefined}
 						isLoading={api.isLoading}
 						xlim={xlimRef.current}
 						ylim={ylimRef.current}
@@ -89,7 +113,23 @@ export default function App() {
 						currentIteration={currentIteration}
 						showGradientField={showGradientField}
 					/>
-					<Sidebar 
+					<Sidebar
+            onTabChange={(tab) => { setCompareActive(tab === "Compare"); setIsAnimating(false); setComparisonAnimating(false); }}
+            comparison={<ComparePanel settings={settingsUi} entries={entries} trajectories={api.comparison}
+              iteration={comparisonIteration} busy={comparisonBusy} ready={!api.isLoading} animating={comparisonAnimating}
+              onAdd={(configured) => {
+                const id = nextId.current++;
+                setComparisonIteration(0);
+                setEntries(previous => [...previous, { id, settings: configured, color: `hsl(${(id - 1) * 137.508 % 360}, 70%, 45%)` }]);
+              }}
+              onRemove={(id) => { setComparisonAnimating(false); setEntries(previous => previous.filter(entry => entry.id !== id)); }}
+              onAction={(action) => {
+                if (action === "Animate") setComparisonAnimating(true);
+                else if (action === "Pause") setComparisonAnimating(false);
+                else if (action === "Reset") setComparisonIteration(0);
+                else setComparisonIteration(value => Math.max(0, value + (action === "Next" ? 1 : -1)));
+              }}
+            />}
 						settings={settingsUi} 
 						setSettings={handleSettingsUiChange} 
 						onRandomInitialPoint={handleRandomInitialPoint}

frontends/react/src/ComparePanel.tsx

@@ -0,0 +1,48 @@
+import { useState } from "react";
+import AlgorithmControls, { DEFAULT_HYPERPARAMETERS } from "./AlgorithmControls";
+import type { ComparisonEntry, ComparisonTrajectory, SettingsUi } from "./types";
+
+export default function ComparePanel({ settings, entries, trajectories, onAdd, onRemove, iteration, busy, ready, animating, onAction }: {
+  settings: SettingsUi;
+  entries: ComparisonEntry[];
+  trajectories: ComparisonTrajectory[];
+  onAdd: (settings: SettingsUi) => void;
+  onRemove: (id: number) => void;
+  iteration: number;
+  busy: boolean;
+  ready: boolean;
+  animating: boolean;
+  onAction: (action: string) => void;
+}) {
+  const [draft, setDraft] = useState(settings);
+  const configured: SettingsUi = { algorithm: draft.algorithm, x0: draft.x0, y0: draft.y0,
+    mode: settings.mode, functionExpr: settings.functionExpr,
+    ...Object.fromEntries(Object.entries(DEFAULT_HYPERPARAMETERS[draft.algorithm]).map(([key, fallback]) => [key, draft[key as keyof SettingsUi] ?? fallback])) };
+  const valid = [configured.x0, ...(configured.mode === "Bivariate" ? [configured.y0] : []),
+    ...Object.entries(configured).filter(([key]) => ["learningRate", "momentum", "beta", "beta1", "beta2", "epsilon"].includes(key)).map(([, value]) => value)
+  ].every(value => value !== undefined && value.trim() !== "" && Number.isFinite(Number(value)));
+  return <>
+    <AlgorithmControls settings={configured} setSettings={setDraft} onRandomInitialPoint={() => setDraft({ ...configured, x0: (Math.random() * 2 - 1).toFixed(2), y0: (Math.random() * 2 - 1).toFixed(2) })} />
+    <button className="rounded border border-gray-300 bg-orange-200 px-3 py-1 disabled:opacity-50" disabled={!valid || !ready || busy || animating} onClick={() => onAdd(configured)}>Add</button>
+    <div className="text-sm font-semibold">Selected algorithms</div>
+    {entries.length === 0 && <p className="text-sm text-stone-500">Add algorithms to compare their trajectories on the same objective.</p>}
+    <ul className="flex flex-col gap-2">
+      {entries.map((entry, index) => <li key={entry.id} className="rounded border border-stone-300 p-2 text-sm">
+        <div className="flex items-center gap-2">
+          <span className="h-3 w-3 rounded-full shrink-0" style={{ background: entry.color }} />
+          <span className="flex-1 font-semibold">{index + 1}. {entry.settings.algorithm}</span>
+          <button aria-label={`Remove ${index + 1}. ${entry.settings.algorithm}`} onClick={() => onRemove(entry.id)}>Remove</button>
+        </div>
+        <div className="text-xs text-stone-600">{Object.entries(entry.settings).filter(([key]) => !["mode", "functionExpr", "algorithm"].includes(key) && (key !== "y0" || settings.mode === "Bivariate")).map(([key, value]) => `${key}: ${value}`).join(", ")}</div>
+        {trajectories.find(item => item.id === entry.id)?.error && <p role="alert" className="text-red-700">Unable to compute this trajectory. Check its settings.</p>}
+      </li>)}
+    </ul>
+    <div className="text-sm" role="status">Iteration {iteration}{busy ? " · Computing…" : ""}</div>
+    <div className="flex flex-wrap gap-2">
+      {["Animate", "Previous", "Next", "Reset", "Pause"].map(action => <button key={action}
+        className="rounded border border-gray-300 bg-orange-200 px-3 py-1 text-sm disabled:opacity-50"
+        disabled={action === "Pause" ? !animating : !ready || !entries.length || busy || animating || ((action === "Previous" || action === "Reset") && iteration === 0)}
+        onClick={() => onAction(action)}>{action}</button>)}
+    </div>
+  </>;
+}

frontends/react/src/OptimizationPlot.tsx

@@ -1,9 +1,10 @@
 import { useMemo, useRef } from "react";
 import Plot from "react-plotly.js";
-import type { PlotData } from "./types";
+import type { ComparisonEntry, TrajectoryValues, PlotData } from "./types";
 import { Card } from "@elvis/ui";
 
 interface OptimizationPlotProps {
+  comparisons?: (ComparisonEntry & { values?: TrajectoryValues })[];
   data: PlotData;
   isLoading: boolean;
   xlim: [number, number];
@@ -13,8 +14,16 @@ interface OptimizationPlotProps {
   showGradientField: boolean;
 }
 
-export default function OptimizationPlot({ data, isLoading, xlim, ylim, setAxisLimits, currentIteration, showGradientField }: OptimizationPlotProps) {
+export default function OptimizationPlot({ comparisons, data, isLoading, xlim, ylim, setAxisLimits, currentIteration, showGradientField }: OptimizationPlotProps) {
 
+  const comparisonTraces = (comparisons ?? []).flatMap((entry, index) => [
+    { x: entry.values?.x ?? [], y: entry.values?.y ?? [], type: "scatter" as const, mode: "lines+markers" as const,
+      name: `${index + 1}. ${entry.settings.algorithm}`, legendgroup: String(entry.id), showlegend: true,
+      line: { color: entry.color, width: 2 }, marker: { color: entry.color, size: 6 } },
+    { x: entry.values?.x.slice(-1) ?? [], y: entry.values?.y.slice(-1) ?? [], type: "scatter" as const, mode: "markers" as const,
+      name: `${index + 1}. ${entry.settings.algorithm}`, legendgroup: String(entry.id), showlegend: false,
+      marker: { color: entry.color, size: 12, line: { color: "white", width: 2 } } }
+  ]);
   // data
   let x: number[] = data.functionValues ? data.functionValues.x : [];
   let y: number[] = data.functionValues ? data.functionValues.y : [];
@@ -178,6 +187,7 @@ export default function OptimizationPlot({ data, isLoading, xlim, ylim, setAxisL
               mode: 'lines',
               line: { color: '#1f77b4', width: 2 },
               hoverinfo: "skip",
+              showlegend: false,
             },
             {
               x: trajX,
@@ -187,6 +197,7 @@ export default function OptimizationPlot({ data, isLoading, xlim, ylim, setAxisL
               line: { color: '#d97871', width: 2 },
               marker: { color: '#d97871', size: 10 },
               hoverinfo: "skip",
+              showlegend: false,
             },
             {
               x: trajX[currentIteration] !== undefined ? [trajX[currentIteration]] : [],
@@ -195,9 +206,11 @@ export default function OptimizationPlot({ data, isLoading, xlim, ylim, setAxisL
               mode: 'markers',
               marker: { color: 'red', size: 12 },
               hoverinfo: "skip",
+              showlegend: false,
             }
+            ,...comparisonTraces
           ]}
-          layout={layoutRef.current}
+          layout={{ ...layoutRef.current, showlegend: comparisons !== undefined, legend: { x: 0.02, y: 0.98, xanchor: "left", yanchor: "top", bgcolor: "rgba(255,255,255,0.75)" } }}
           style={{ width: '100%', height: '100%' }}
           config={{ 
             responsive: true,
@@ -237,6 +250,7 @@ export default function OptimizationPlot({ data, isLoading, xlim, ylim, setAxisL
               type: 'contour',
               colorscale: 'Viridis',
               hoverinfo: "skip",
+              showlegend: false,
               contours: {
                 coloring: "heatmap",
                 showlines: false,
@@ -282,6 +296,7 @@ export default function OptimizationPlot({ data, isLoading, xlim, ylim, setAxisL
               line: { color: '#d97871', width: 2 },
               marker: { color: '#d97871', size: 10 },
               hoverinfo: "skip",
+              showlegend: false,
             },
             {
               x: trajX[currentIteration] !== undefined ? [trajX[currentIteration]] : [],
@@ -291,9 +306,11 @@ export default function OptimizationPlot({ data, isLoading, xlim, ylim, setAxisL
               mode: 'markers',
               marker: { color: 'red', size: 12 },
               hoverinfo: "skip",
+              showlegend: false,
             }
+            ,...comparisonTraces
           ]}
-          layout={{ ...layoutRef.current, annotations: [] }}
+          layout={{ ...layoutRef.current, annotations: [], showlegend: comparisons !== undefined, legend: { x: 0.02, y: 0.98, xanchor: "left", yanchor: "top", bgcolor: "rgba(255,255,255,0.75)" } }}
           style={{ width: '100%', height: '100%' }}
           config={{ 
             responsive: true,

frontends/react/src/Sidebar.tsx

@@ -1,22 +1,13 @@
+import type { ReactNode } from "react";
+import AlgorithmControls from "./AlgorithmControls";
 import { useCallback, useEffect, useRef, useState } from "react";
 import ReactMarkdown from "react-markdown";
 import { InputField, Tabs, Card } from "@elvis/ui";
-import { SUPPORTED_ALGORITHMS, type SettingsUi, type TrajectoryValues } from "./types.ts";
+import { type SettingsUi, type TrajectoryValues } from "./types.ts";
 import usageMarkdown from "./usage.md?raw";
 import IterationHistoryPlot from "./IterationHistoryPlot.tsx";
 
 
-const DEFAULT_HYPERPARAMETERS = {
-  "Gradient Descent": { learningRate: "0.1", momentum: "0.0" },
-  "Nesterov": { learningRate: "0.1", momentum: "0.0" },
-  "Adam": { learningRate: "0.1", beta1: "0.9", beta2: "0.999", epsilon: "1e-8" },
-  "Adagrad": { learningRate: "0.1", epsilon: "1e-8" },
-  "RMSProp": { learningRate: "0.1", beta: "0.9", epsilon: "1e-8" },
-  "Adadelta": { beta: "0.9", epsilon: "1e-3" },
-  "Newton": {}
-}
-
-
 const UNIVARIATE_FUNCTION_OPTIONS = {
   "--Custom--": "x^2",
   "Quadratic": "x^2",
@@ -35,6 +26,8 @@ const BIVARIATE_FUNCTION_OPTIONS = {
 
 
 interface SidebarProps {
+  comparison: ReactNode,
+  onTabChange: (tab: string) => void,
   settings: SettingsUi,
   setSettings: (settings: SettingsUi) => void,
   onRandomInitialPoint: () => void,
@@ -53,6 +46,8 @@ interface SidebarProps {
 }
 
 export default function Sidebar({ 
+  comparison,
+  onTabChange,
   settings, 
   setSettings,
   onRandomInitialPoint,
@@ -68,29 +63,14 @@ export default function Sidebar({
   showGradientField,
   onShowGradientFieldChange,
 }: SidebarProps) {
-  const tabs = ["Settings", "Optimize", "Usage"] as const;
+  const tabs = ["Settings", "Optimize", "Compare", "Usage"] as const;
   const [activeTab, setActiveTab] = useState<(typeof tabs)[number]>("Settings");
 
+  const [functionOption, setFunctionOption] = useState<string>("--Custom--");
   function updateSettings(key: keyof SettingsUi, value: string) {
-    if (key === "algorithm") {
-      const defaults = DEFAULT_HYPERPARAMETERS[value as keyof typeof DEFAULT_HYPERPARAMETERS];
-      setSettings({ ...settings, algorithm: value as SettingsUi["algorithm"], ...defaults });
-    } else {
-      setSettings({ ...settings, [key]: value });
-    }
+    setSettings({ ...settings, [key]: value });
   }
 
-  const [functionOption, setFunctionOption] = useState<string>("--Custom--");
-  const [initialPointInput, setInitialPointInput] = useState<string>(() =>
-    [settings.x0 ?? "", settings.y0 ?? ""].filter((part) => part !== "").join(", ")
-  );
-
-  useEffect(() => {
-    if (settings.mode === "Bivariate") {
-      setInitialPointInput([settings.x0 ?? "", settings.y0 ?? ""].filter((part) => part !== "").join(", "));
-    }
-  }, [settings.mode, settings.x0, settings.y0]);
-
   function handleProblemSettingChange(value: string) {
     const [mode, option] = value.split("::") as [SettingsUi["mode"], string];
     const selectedOption = option ?? "--Custom--";
@@ -106,23 +86,6 @@ export default function Sidebar({
     return values?.[currentIteration] ?? null;
   }
 
-  function handleInitialPointChange(value: string) {
-    setInitialPointInput(value);
-
-    if (settings.mode === "Bivariate") {
-      const parts = value.split(",").map((part) => part.trim());
-      const [xValue, yValue] = parts;
-
-      setSettings({
-        ...settings,
-        x0: xValue ?? "",
-        y0: yValue ?? settings.y0 ?? "",
-      });
-    } else {
-      updateSettings("x0", value);
-    }
-  }
-
   const currentX = getCurrentValue(trajectoryValues?.x);
   const currentY = getCurrentValue(trajectoryValues?.y);
 
@@ -182,7 +145,7 @@ export default function Sidebar({
 
   return (
     <Card className="flex flex-col h-full p-4 gap-2 min-w-0 min-h-0 overflow-auto">
-      <Tabs tabs={tabs} activeTab={activeTab} onChange={setActiveTab} />
+      <Tabs tabs={tabs} activeTab={activeTab} onChange={(tab) => { setActiveTab(tab); onTabChange(tab); }} />
 
       {/* Tab content */}
       <div className="flex flex-1 flex-col gap-4 min-h-0 min-w-0 overflow-auto">
@@ -247,114 +210,7 @@ export default function Sidebar({
               </fieldset>
             )}
 
-            <div className="grid grid-cols-[6rem_minmax(0,1fr)] items-center gap-0.5">
-              <label className="text-sm font-semibold whitespace-nowrap pr-0.25">Algorithm</label>
-              <div className="min-w-0">
-                <select
-                  value={settings.algorithm}
-                  onChange={(event) => updateSettings("algorithm", event.target.value as SettingsUi["algorithm"])}
-                  className="h-10 w-full rounded border border-stone-300 bg-white px-2 py-2 text-sm focus:outline-none focus:ring-2 focus:ring-stone-400"
-                >
-                  {SUPPORTED_ALGORITHMS.map((option) => (
-                    <option key={option} value={option}>
-                      {option}
-                    </option>
-                  ))}
-                </select>
-              </div>
-            </div>
-            {settings.mode === "Bivariate" ? (
-              <div className="grid grid-cols-[6rem_minmax(0,1fr)] items-center gap-0.5">
-                <label className="text-sm font-medium whitespace-nowrap pr-0.25">Initial (X, Y)</label>
-                <div className="flex min-w-0 items-center gap-2">
-                  <input
-                    type="text"
-                    value={initialPointInput}
-                    onChange={(event) => handleInitialPointChange(event.target.value)}
-                    className="h-10 w-full rounded border border-stone-300 px-2 py-1 text-sm focus:outline-none focus:ring-2 focus:ring-stone-400"
-                  />
-                  <button
-                    type="button"
-                    onClick={onRandomInitialPoint}
-                    className="h-10 rounded border border-gray-300 bg-orange-200 px-3 py-1 text-sm text-stone-700 hover:bg-orange-300"
-                  >
-                    random
-                  </button>
-                </div>
-              </div>
-            ) : (
-              <div className="grid grid-cols-[6rem_minmax(0,1fr)] items-center gap-0.5">
-                <label className="text-sm font-medium whitespace-nowrap pr-0.25">Initial X</label>
-                <div className="flex min-w-0 items-center gap-2">
-                  <input
-                    type="text"
-                    value={settings.x0}
-                    onChange={(event) => updateSettings("x0", event.target.value)}
-                    className="h-10 w-full rounded border border-stone-300 px-2 py-1 text-sm focus:outline-none focus:ring-2 focus:ring-stone-400"
-                  />
-                  <button
-                    type="button"
-                    onClick={onRandomInitialPoint}
-                    className="h-10 rounded border border-gray-300 bg-orange-200 px-3 py-1 text-sm text-stone-700 hover:bg-orange-300"
-                  >
-                    random
-                  </button>
-                </div>
-              </div>
-            )}
-            
-            <div className="grid grid-cols-2 gap-2">
-              {["Gradient Descent", "Nesterov", "Adam", "Adagrad", "RMSProp", "Adadelta"].includes(settings.algorithm) && (
-                <>
-                  <InputField
-                    label="Learning Rate"
-                    value={settings.learningRate}
-                    onChange={(value) => updateSettings("learningRate", value)}
-                  />
-                </>
-              )}
-              {["Gradient Descent", "Nesterov"].includes(settings.algorithm) && (
-                <>
-                  <InputField
-                    label="Momentum"
-                    value={settings.momentum}
-                    onChange={(value) => updateSettings("momentum", value)}
-                  />
-                </>
-              )}
-              {settings.algorithm === "Adam" && (
-                <>
-                  <InputField
-                    label="Beta 1"
-                    value={settings.beta1}
-                    onChange={(value) => updateSettings("beta1", value)}
-                  />
-                  <InputField
-                    label="Beta 2"
-                    value={settings.beta2}
-                    onChange={(value) => updateSettings("beta2", value)}
-                  />
-                </>
-              )}
-              {["RMSProp", "Adadelta"].includes(settings.algorithm) && (
-                <>
-                  <InputField
-                    label="Beta"
-                    value={settings.beta}
-                    onChange={(value) => updateSettings("beta", value)}
-                  />
-                </>
-              )}
-              {["Adam", "Adagrad", "RMSProp", "Adadelta"].includes(settings.algorithm) && (
-                <>
-                  <InputField
-                    label="Epsilon"
-                    value={settings.epsilon}
-                    onChange={(value) => updateSettings("epsilon", value)}
-                  />
-                </>
-              )}
-            </div>
+            <AlgorithmControls settings={settings} setSettings={setSettings} onRandomInitialPoint={onRandomInitialPoint} />
           </>
         )}
 
@@ -502,6 +358,8 @@ export default function Sidebar({
           </>
         )}
 
+        {activeTab === "Compare" && comparison}
+
         {activeTab === "Usage" && (
           <ReactMarkdown
             components={{

frontends/react/src/pyodide.worker.ts

@@ -58,6 +58,29 @@ self.onmessage = async (event) => {
   }
 
   switch (message.type) {
+    case "COMPARE": {
+      const trajectories = message.settings.map((settings, index) => {
+        const managerClass = pyodide.globals.get("OptimizationManager");
+        const comparisonManager = managerClass();
+        managerClass.destroy();
+        const pythonSettings = pyodide.toPy(settings);
+        try {
+          comparisonManager.handle_update_settings(pythonSettings)?.destroy();
+          comparisonManager._compute_trajectory_values(pythonSettings, message.iteration + 1);
+          const values = comparisonManager.trajectory_values;
+          try {
+            return { id: message.ids[index], values: values.toJs({ dict_converter: Object.fromEntries }) };
+          } finally { values.destroy(); }
+        } catch (error) {
+          return { id: message.ids[index], values: { x: [], y: [] }, error: String(error) };
+        } finally {
+          pythonSettings.destroy();
+          comparisonManager.destroy();
+        }
+      });
+      self.postMessage({ type: "COMPARISON_RESULT", requestId: message.requestId, trajectories });
+      break;
+    }
     case "INIT":
       const pythonSettings = pyodide.toPy(message.settings);
       handlePythonResult(manager.handle_update_settings(pythonSettings));

frontends/react/src/types.ts

@@ -65,9 +65,14 @@ export const SUPPORTED_ALGORITHMS = [
 ] as const;
 
 export type WorkerMessage =
+  | { type: "COMPARE"; requestId: number; settings: Settings[]; ids: number[]; iteration: number }
+  | { type: "COMPARISON_RESULT"; requestId: number; trajectories: ComparisonTrajectory[] }
   | { type: "READY" }
   | { type: "RESULT"; data: PlotData }
   | { type: "INIT"; settings: Settings }
   | { type: "NEXT_STEP" }
   | { type: "PREV_STEP" }
   | { type: "RESET" };
+
+export type ComparisonEntry = { id: number; settings: SettingsUi; color: string };
+export type ComparisonTrajectory = { id: number; values: TrajectoryValues; error?: string };

frontends/react/src/usage.md

@@ -25,3 +25,10 @@ The plot is interactive:
 
 - Click and drag to pan
 - Scroll to zoom
+
+
+## Compare algorithms
+
+Open **Compare** after **Optimize**. Choose an algorithm, configure its initial point and parameters, and click **Add**. Repeat to compare different algorithms or parameter choices. Each entry has a matching trajectory color and can be removed.
+
+**Animate** advances all selected algorithms together. **Pause** stops playback; **Previous** and **Next** step through iterations; **Reset** returns to the initial points. Adding an algorithm restarts the comparison at iteration zero. Each added algorithm keeps its own initial point, shown in the selected algorithms list. The objective is shared with Settings. Changing the objective or the initial point in Settings restarts the comparison while preserving each algorithm’s configured initial point.

frontends/react/src/usePyodide.ts

@@ -1,9 +1,16 @@
 import { useCallback, useEffect, useRef, useState } from "react";
 import PyodideWorker from "./pyodide.worker.ts?worker";
-import type { PlotData, Settings, WorkerMessage } from "./types.ts";
+import type { ComparisonTrajectory, PlotData, Settings, WorkerMessage } from "./types.ts";
 
 
 export default function usePyodide(initialSettings: Settings) {
+  const [comparison, setComparison] = useState<ComparisonTrajectory[]>([]);
+  const [comparisonBusy, setComparisonBusy] = useState(false);
+  const comparisonRequest = useRef(0);
+  const compare = useCallback((settings: Settings[], ids: number[], iteration: number) => {
+    setComparisonBusy(true);
+    workerRef.current?.postMessage({ type: "COMPARE", requestId: ++comparisonRequest.current, settings, ids, iteration });
+  }, []);
   const [plotData, setPlotData] = useState<PlotData>({});
   const [currentIteration, setCurrentIteration] = useState(0);
   const [isLoading, setIsLoading] = useState<boolean>(true);
@@ -47,7 +54,12 @@ export default function usePyodide(initialSettings: Settings) {
 
     worker.onmessage = (event) => {
       const message = event.data as WorkerMessage;
-      if (message.type === "READY") {
+      if (message.type === "COMPARISON_RESULT") {
+        if (message.requestId === comparisonRequest.current) {
+          setComparison(message.trajectories);
+          setComparisonBusy(false);
+        }
+      } else if (message.type === "READY") {
         console.log("Pyodide is ready");
         setIsLoading(false);
         sendInit(initialSettings);
@@ -78,6 +90,7 @@ export default function usePyodide(initialSettings: Settings) {
   }, []);
 
   return {
+    comparison, comparisonBusy, compare,
     isLoading,
     plotData,
     currentIteration,