feat: rearrange ui

Author: chvvkumar

templates/setup.html

@@ -1600,33 +1600,33 @@ <h3 style="color: rgb(248, 113, 113); font-size: 14px; font-weight: 600; margin-
                                     </div>
                                 </div>
 
-                                <button type="submit">💾 Save Configuration</button>
-                            </form>
-
-                            <!-- Model Confidence Insights (outside the config form) -->
-                            <div style="margin-top: 24px;">
-                                <button type="button" class="collapsible-btn" onclick="ciToggle('ci-content')">
-                                    <span><span class="icon">📊</span> Model Confidence Insights</span>
-                                    <span class="arrow">▼</span>
-                                </button>
-                                <div id="ci-content" class="collapsible-content">
-                                    <div class="collapsible-inner">
-                                        <p class="help-text" style="margin-bottom: 16px;">
-                                            This panel summarizes how confident the model is across each weather class. Low average confidence or low sample counts indicate classes where the model is uncertain or under-observed. Use it to decide which conditions need more captured and labeled training data.
-                                        </p>
-                                        <div id="ci-body" style="background: rgba(15, 23, 42, 0.6); border: 1px solid rgba(71, 85, 105, 0.5); border-radius: 8px; padding: 16px;">
-                                            <div id="ci-status" style="color: rgb(148, 163, 184); font-size: 13px;">Expand to load statistics.</div>
-                                            <div id="ci-header" style="display: none; margin-bottom: 16px; color: rgb(148, 163, 184); font-size: 12px;"></div>
-                                            <div id="ci-controls" style="display: none; gap: 10px; margin-bottom: 16px;">
-                                                <button type="button" id="ci-refresh" onclick="ciLoad()" style="padding: 6px 14px; background: rgba(6, 182, 212, 0.15); border: 1px solid rgb(6, 182, 212); border-radius: 6px; color: rgb(6, 182, 212); font-size: 12px; font-weight: 600; cursor: pointer;">↻ Refresh</button>
-                                                <button type="button" id="ci-reset" onclick="ciReset()" style="padding: 6px 14px; background: rgba(248, 113, 113, 0.12); border: 1px solid rgb(248, 113, 113); border-radius: 6px; color: rgb(248, 113, 113); font-size: 12px; font-weight: 600; cursor: pointer;">⟲ Reset Statistics</button>
+                                <!-- Model Confidence Insights (buttons use type="button" so they do not submit the form) -->
+                                <div style="margin-top: 24px; margin-bottom: 24px;">
+                                    <button type="button" class="collapsible-btn" onclick="ciToggle('ci-content')">
+                                        <span><span class="icon">📊</span> Model Confidence Insights</span>
+                                        <span class="arrow">▼</span>
+                                    </button>
+                                    <div id="ci-content" class="collapsible-content">
+                                        <div class="collapsible-inner">
+                                            <p class="help-text" style="margin-bottom: 16px;">
+                                                This panel summarizes how confident the model is across each class. Low average confidence or low sample counts indicate classes where the model is uncertain or under-observed. Use it to decide which conditions need more captured and labeled training data.
+                                            </p>
+                                            <div id="ci-body" style="background: rgba(15, 23, 42, 0.6); border: 1px solid rgba(71, 85, 105, 0.5); border-radius: 8px; padding: 16px;">
+                                                <div id="ci-status" style="color: rgb(148, 163, 184); font-size: 13px;">Expand to load statistics.</div>
+                                                <div id="ci-header" style="display: none; margin-bottom: 16px; color: rgb(148, 163, 184); font-size: 12px;"></div>
+                                                <div id="ci-controls" style="display: none; gap: 10px; margin-bottom: 16px;">
+                                                    <button type="button" id="ci-refresh" onclick="ciLoad()" style="padding: 6px 14px; background: rgba(6, 182, 212, 0.15); border: 1px solid rgb(6, 182, 212); border-radius: 6px; color: rgb(6, 182, 212); font-size: 12px; font-weight: 600; cursor: pointer;">↻ Refresh</button>
+                                                    <button type="button" id="ci-reset" onclick="ciReset()" style="padding: 6px 14px; background: rgba(248, 113, 113, 0.12); border: 1px solid rgb(248, 113, 113); border-radius: 6px; color: rgb(248, 113, 113); font-size: 12px; font-weight: 600; cursor: pointer;">⟲ Reset Statistics</button>
+                                                </div>
+                                                <div id="ci-classes"></div>
+                                                <div id="ci-advice" style="margin-top: 16px;"></div>
                                             </div>
-                                            <div id="ci-classes"></div>
-                                            <div id="ci-advice" style="margin-top: 16px;"></div>
                                         </div>
                                     </div>
                                 </div>
-                            </div>
+
+                                <button type="submit">💾 Save Configuration</button>
+                            </form>
 
                             <script>
                             var ciLoaded = false;