Spaces:

deedrop1140
/

MachineLearningAlgorithms

Running

App Files Files Community

deedrop1140 commited on Dec 1, 2025

Commit

d79ded4

verified ·

1 Parent(s): a62ac7b

Update templates/Random_Forest_Classifier.html

Browse files

Files changed (1) hide show

templates/Random_Forest_Classifier.html +92 -70

templates/Random_Forest_Classifier.html CHANGED Viewed

@@ -5,9 +5,8 @@
 <head>
     <meta charset="UTF-8">
     <title>🔬 Visual Random Forest Classifier (2D)</title>
-   <script src="https://cdn.plot.ly/plotly-2.32.0.min.js"></script>
-      <script src="https://cdn.tailwindcss.com"></script>
     <script src="https://cdn.jsdelivr.net/npm/mathjax@3/es5/tex-mml-chtml.js"></script>
     <style>
         /* Basic styling for info icons and tooltips */
@@ -80,26 +79,52 @@
             justify-content: center;
         }
         /* --- Responsive adjustments for mobile --- */
         /* Ensure plot containers take full width but smaller height on narrow screens */
         #plot, #treeComparisonPlot {
             width: 100%;
-            /* default desktop height; Plotly layout height controls actual plot height */
             max-width: 100%;
         }
         /* On small screens make fonts and some paddings lighter so layout feels compact */
         @media (max-width: 640px) {
             body { font-size: 14px; }
-            .text-3xl { font-size: 1.5rem; } /* smaller headline on mobile */
-            .flow-box { padding: 1rem; min-height: 90px; }
-            .flow-box span.text-5xl { font-size: 2rem; } /* shrink emojis */
-            .flow-arrow { font-size: 1.8rem; margin: 0 .5rem; }
-            /* Give plots lower heights on small screens */
-            /* Plot height will be programmatically set via JS, but this gives a CSS fallback */
-            #plot { height: 320px !important; }
-            #treeComparisonPlot { height: 320px !important; }
         }
         /* End responsive adjustments */
     </style>
@@ -146,8 +171,11 @@
             </button>
         </div>
-        <div id="plot" class="border rounded-lg shadow-inner" style="height: 500px; width: 100%;"></div>
-        <p id="result" class="mt-4 font-bold text-lg text-center text-gray-800"></p>
         <div class="mt-10 p-6 bg-purple-50 rounded-xl border border-purple-200">
             <h2 class="text-2xl font-bold mb-6 text-center text-purple-700">How Random Forest Classifies Your Data</h2>
@@ -184,18 +212,22 @@
                 </div>
             </div>
             <p class="mt-6 text-center text-gray-600 text-sm">
                 Random Forest combines the power of many individual decision trees to make a more robust and accurate classification, leveraging collective intelligence.
             </p>
         </div>
         <div class="mt-8 text-center">
-<a href="/liar" class="bg-purple-600 text-white px-4 py-2 rounded hover:bg-purple-700">
-  🔍 Go to Liar Predictor
-</a>
         <div class="mt-8 p-6 bg-gray-50 rounded-lg border border-gray-200">
             <h2 class="text-2xl font-bold mb-4 text-center text-blue-700">Understanding Random Forest</h2>
@@ -381,7 +413,8 @@
             const w = window.innerWidth;
             // Choose smaller height on narrow screens
             const smallScreen = w <= 640;
-            const targetHeight = smallScreen ? 320 : 500;
             // Update main plot height
             Plotly.relayout('plot', {height: targetHeight});
@@ -406,7 +439,6 @@
             // reduce marker sizes in treeComparisonPlot traces on small screens
             const treeMarkerSize = smallScreen ? 18 : 30;
             try {
-                // forest traces start at index 1..n — update all scatter traces
                 Plotly.restyle('treeComparisonPlot', {'marker.size': treeMarkerSize});
             } catch (e) {
                 // ignore if restyle fails
@@ -440,9 +472,9 @@
                 showlegend: false,
                 xaxis: 'x1',
                 yaxis: 'y1'
-              };
-              const forestTraces = [
                 {
                   type: "scatter",
                   mode: "markers+lines+text",
@@ -482,9 +514,9 @@
                   xaxis: 'x2',
                   yaxis: 'y2'
                 }
-              ];
-              const layout = {
                 grid: { rows: 1, columns: 2, pattern: 'independent' },
                 xaxis: {
                   domain: [0, 0.45],
@@ -515,55 +547,45 @@
                   text: "📊 Visualizing Decision Tree vs Random Forest",
                   font: { size: 18 }
                 }
-              };
-              Plotly.newPlot('treeComparisonPlot', [singleTreeTrace, ...forestTraces], layout, {responsive: true});
-              // adapt its height/marker sizes immediately for current screen
-              adaptPlotForScreen();
         }
     </script>
-    <div class="mt-12 bg-white rounded-lg shadow-lg p-6 border border-gray-300">
- <h2 class="text-2xl font-bold text-center text-purple-700 mb-4">🌳 Single Tree vs Random Forest</h2>
- <div id="treeComparisonPlot" class="w-full" style="height: 500px;"></div>
-</div>
-<script>
-  // (No change here — the tree plot creation is moved into the onload above.)
-</script>
     <!-- 📚 Theory Section -->
-  <div class="mt-8 text-gray-800 space-y-4">
-    <h3 class="text-xl font-bold text-blue-700">🔍 Working of Random Forest Algorithm</h3>
-    <ul class="list-disc list-inside space-y-2">
-      <li><strong>Create Many Decision Trees:</strong> The algorithm makes many decision trees using different random parts of the data.</li>
-      <li><strong>Pick Random Features:</strong> Each tree picks a random subset of features to make splits. This keeps trees diverse.</li>
-      <li><strong>Each Tree Makes a Prediction:</strong> Every tree gives its own output.</li>
-      <li><strong>Combine the Predictions:</strong>
-        <ul class="ml-6 list-disc">
-          <li><em>Classification:</em> Uses majority voting across trees.</li>
-          <li><em>Regression:</em> Averages the outputs of all trees.</li>
         </ul>
-      </li>
-      <li><strong>Why It Works:</strong> Randomness prevents overfitting and improves overall prediction accuracy.</li>
-    </ul>
-    <h3 class="text-xl font-bold text-blue-700 mt-6">🌟 Key Features of Random Forest</h3>
-    <ul class="list-disc list-inside space-y-2">
-      <li><strong>Handles Missing Data:</strong> Works even with some missing values.</li>
-      <li><strong>Shows Feature Importance:</strong> Identifies most important features for prediction.</li>
-      <li><strong>Handles Complex Data:</strong> Efficient with large datasets and many features.</li>
-      <li><strong>Versatile:</strong> Works for both classification and regression tasks.</li>
-    </ul>
-    <h3 class="text-xl font-bold text-blue-700 mt-6">📌 Assumptions of Random Forest</h3>
-    <ul class="list-disc list-inside space-y-2">
-      <li>Each tree is independent and makes its own prediction.</li>
-      <li>Each tree is trained on random samples and features.</li>
-      <li>A large enough dataset is required for diverse learning.</li>
-      <li>Combining different trees improves accuracy.</li>
-    </ul>
-  </div>
-</div>
 </body>
 </html>
 {% endblock %}

 <head>
     <meta charset="UTF-8">
     <title>🔬 Visual Random Forest Classifier (2D)</title>
+    <script src="https://cdn.plot.ly/plotly-2.32.0.min.js"></script>
+    <script src="https://cdn.tailwindcss.com"></script>
     <script src="https://cdn.jsdelivr.net/npm/mathjax@3/es5/tex-mml-chtml.js"></script>
     <style>
         /* Basic styling for info icons and tooltips */
             justify-content: center;
         }
+        /* Plot card wrapper so we can style cards separately from content */
+        .plot-card {
+            background: white;
+            border: 1px solid #E5E7EB; /* gray-200 */
+            border-radius: 0.75rem;
+            padding: 1rem;
+            box-shadow: 0 2px 6px rgba(0,0,0,0.04);
+            margin-bottom: 1rem;
+        }
         /* --- Responsive adjustments for mobile --- */
         /* Ensure plot containers take full width but smaller height on narrow screens */
         #plot, #treeComparisonPlot {
             width: 100%;
             max-width: 100%;
         }
         /* On small screens make fonts and some paddings lighter so layout feels compact */
         @media (max-width: 640px) {
             body { font-size: 14px; }
+            .text-3xl { font-size: 1.25rem; } /* even smaller headline on narrow mobile */
+            .flow-box { padding: 0.75rem; min-height: 70px; }
+            .flow-box span.text-5xl { font-size: 1.6rem; } /* shrink emojis */
+            .flow-arrow { font-size: 1.4rem; margin: 0 .4rem; }
+            /* Card padding & border tighten for mobile - makes card look smaller */
+            .plot-card { padding: 0.5rem; border-radius: 0.5rem; margin-bottom: 0.75rem; }
+            /* Give plots lower heights on small screens (JS adapts too) */
+            #plot { height: 260px !important; }
+            #treeComparisonPlot { height: 260px !important; }
+            /* Shrink button and form input sizes */
+            button { padding: 0.45rem 0.75rem; font-size: 0.9rem; }
+            input[type="number"] { width: 4.5rem; padding: 0.35rem; font-size: 0.95rem; }
+            /* Reduce spacing around the main container so it feels compact */
+            .max-w-5xl { padding-left: 0.5rem; padding-right: 0.5rem; }
+            .mt-10 { margin-top: 0.75rem; }
+        }
+        /* Slight adjustments for small-tablet widths */
+        @media (min-width: 641px) and (max-width: 900px) {
+            #plot, #treeComparisonPlot { height: 380px !important; }
+            .plot-card { padding: 0.75rem; }
+            .flow-box { min-height: 90px; padding: 1rem; }
         }
         /* End responsive adjustments */
     </style>
             </button>
         </div>
+        <!-- Main plot card (made compact for mobile) -->
+        <div class="plot-card">
+            <div id="plot" class="border rounded-lg shadow-inner" style="height: 500px; width: 100%;"></div>
+            <p id="result" class="mt-4 font-bold text-lg text-center text-gray-800"></p>
+        </div>
         <div class="mt-10 p-6 bg-purple-50 rounded-xl border border-purple-200">
             <h2 class="text-2xl font-bold mb-6 text-center text-purple-700">How Random Forest Classifies Your Data</h2>
                 </div>
             </div>
             <p class="mt-6 text-center text-gray-600 text-sm">
                 Random Forest combines the power of many individual decision trees to make a more robust and accurate classification, leveraging collective intelligence.
             </p>
         </div>
         <div class="mt-8 text-center">
+            <a href="/liar" class="bg-purple-600 text-white px-4 py-2 rounded hover:bg-purple-700">
+              🔍 Go to Liar Predictor
+            </a>
+            <!-- Tree comparison card: also compact on mobile -->
+            <div class="plot-card mt-8">
+                <h2 class="text-2xl font-bold text-center text-purple-700 mb-4">🌳 Single Tree vs Random Forest</h2>
+                <div id="treeComparisonPlot" class="w-full" style="height: 500px;"></div>
+            </div>
+        </div>
         <div class="mt-8 p-6 bg-gray-50 rounded-lg border border-gray-200">
             <h2 class="text-2xl font-bold mb-4 text-center text-blue-700">Understanding Random Forest</h2>
             const w = window.innerWidth;
             // Choose smaller height on narrow screens
             const smallScreen = w <= 640;
+            const tabletScreen = (w > 640 && w <= 900);
+            const targetHeight = smallScreen ? 260 : (tabletScreen ? 380 : 500);
             // Update main plot height
             Plotly.relayout('plot', {height: targetHeight});
             // reduce marker sizes in treeComparisonPlot traces on small screens
             const treeMarkerSize = smallScreen ? 18 : 30;
             try {
                 Plotly.restyle('treeComparisonPlot', {'marker.size': treeMarkerSize});
             } catch (e) {
                 // ignore if restyle fails
                 showlegend: false,
                 xaxis: 'x1',
                 yaxis: 'y1'
+            };
+            const forestTraces = [
                 {
                   type: "scatter",
                   mode: "markers+lines+text",
                   xaxis: 'x2',
                   yaxis: 'y2'
                 }
+            ];
+            const layout = {
                 grid: { rows: 1, columns: 2, pattern: 'independent' },
                 xaxis: {
                   domain: [0, 0.45],
                   text: "📊 Visualizing Decision Tree vs Random Forest",
                   font: { size: 18 }
                 }
+            };
+            Plotly.newPlot('treeComparisonPlot', [singleTreeTrace, ...forestTraces], layout, {responsive: true});
+            // adapt its height/marker sizes immediately for current screen
+            adaptPlotForScreen();
         }
     </script>
     <!-- 📚 Theory Section -->
+    <div class="mt-8 text-gray-800 space-y-4">
+        <h3 class="text-xl font-bold text-blue-700">🔍 Working of Random Forest Algorithm</h3>
+        <ul class="list-disc list-inside space-y-2">
+            <li><strong>Create Many Decision Trees:</strong> The algorithm makes many decision trees using different random parts of the data.</li>
+            <li><strong>Pick Random Features:</strong> Each tree picks a random subset of features to make splits. This keeps trees diverse.</li>
+            <li><strong>Each Tree Makes a Prediction:</strong> Every tree gives its own output.</li>
+            <li><strong>Combine the Predictions:</strong>
+                <ul class="ml-6 list-disc">
+                    <li><em>Classification:</em> Uses majority voting across trees.</li>
+                    <li><em>Regression:</em> Averages the outputs of all trees.</li>
+                </ul>
+            </li>
+            <li><strong>Why It Works:</strong> Randomness prevents overfitting and improves overall prediction accuracy.</li>
+        </ul>
+        <h3 class="text-xl font-bold text-blue-700 mt-6">🌟 Key Features of Random Forest</h3>
+        <ul class="list-disc list-inside space-y-2">
+            <li><strong>Handles Missing Data:</strong> Works even with some missing values.</li>
+            <li><strong>Shows Feature Importance:</strong> Identifies most important features for prediction.</li>
+            <li><strong>Handles Complex Data:</strong> Efficient with large datasets and many features.</li>
+            <li><strong>Versatile:</strong> Works for both classification and regression tasks.</li>
         </ul>
+        <h3 class="text-xl font-bold text-blue-700 mt-6">📌 Assumptions of Random Forest</h3>
+        <ul class="list-disc list-inside space-y-2">
+            <li>Each tree is independent and makes its own prediction.</li>
+            <li>Each tree is trained on random samples and features.</li>
+            <li>A large enough dataset is required for diverse learning.</li>
+            <li>Combining different trees improves accuracy.</li>
+        </ul>
+    </div>
 </body>
 </html>
 {% endblock %}