Update index.html

index.html

@@ -4,22 +4,65 @@
     <meta charset="UTF-8">
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
     <title>Time Calculation for Dataset Training</title>
-    <script src="https://gradio.s3.amazonaws.com/gradio/2.4.1/gradio.min.js"></script>
+    <script src="https://cdnjs.cloudflare.com/ajax/libs/mathjax/2.7.7/MathJax.js?config=TeX-AMS_HTML"></script>
     <style>
         body {
             font-family: Arial, sans-serif;
-            margin: 20px;
-            padding: 20px;
-            background-color: #f9f9f9;
-            border: 1px solid #ddd;
+            margin: 0;
+            padding: 0;
+            background-color: #121212; /* Dark background */
+            color: #e0e0e0; /* Light text color */
+            display: flex;
+            flex-direction: column;
+            align-items: center;
+            justify-content: center;
+            height: 100vh;
+            transition: background-color 0.3s;
+        }
+        h1 {
+            margin-bottom: 20px;
+        }
+        label {
+            margin-top: 10px;
+        }
+        input[type="number"] {
+            padding: 10px;
+            margin: 10px 0;
+            border: none;
+            border-radius: 5px;
+            background-color: #1f1f1f; /* Darker input background */
+            color: #e0e0e0; /* Input text color */
+            width: 200px;
+            transition: background-color 0.3s;
+        }
+        input[type="number"]:focus {
+            background-color: #272727; /* Input focus color */
+            outline: none;
+        }
+        button {
+            padding: 10px 20px;
+            border: none;
             border-radius: 5px;
+            background-color: #6200ea; /* Button color */
+            color: white;
+            cursor: pointer;
+            transition: background-color 0.3s;
+        }
+        button:hover {
+            background-color: #3700b3; /* Button hover color */
         }
         .output {
             margin-top: 20px;
-            padding: 10px;
-            border: 1px solid #ccc;
+            padding: 15px;
+            border: 1px solid #444; /* Output border */
             border-radius: 4px;
-            background-color: #fff;
+            background-color: #1f1f1f; /* Output background */
+            width: 300px; /* Set width for output */
+            text-align: center;
+        }
+        .latex {
+            margin-top: 10px;
+            color: #90caf9; /* LaTeX output color */
         }
     </style>
 </head>
@@ -27,16 +70,16 @@
 
     <h1>Time Calculation for Dataset Training</h1>
     <label for="dataset_size">Dataset Size (kB):</label>
-    <input type="number" id="dataset_size" value="67.4" step="0.1"><br><br>
+    <input type="number" id="dataset_size" value="67.4" step="0.1"><br>
     
     <label for="epochs">Number of Epochs:</label>
-    <input type="number" id="epochs" value="1"><br><br>
+    <input type="number" id="epochs" value="1"><br>
     
     <button id="calculate_btn">Calculate</button>
 
     <div class="output">
         <h3 id="result_text"></h3>
-        <div id="result_latex"></div>
+        <div id="result_latex" class="latex"></div>
     </div>
 
     <script>
@@ -50,19 +93,17 @@
             const totalTime = timePerEpoch * epochs;
 
             // Create LaTeX representation
-            const latexEquation = `\\[ T = \\frac{S}{405} \\times n \\]`;
-            const latexOutput = `Total Time: ${totalTime.toFixed(4)} minutes<br>LaTeX Equation: ${latexEquation}`;
+            const latexEquation = `T = \\frac{S}{405} \\times n`;
+            const latexOutput = `Total Time: ${totalTime.toFixed(4)} minutes<br>LaTeX Equation: \\[${latexEquation}\\]`;
 
             // Update HTML elements
             document.getElementById("result_text").innerText = `Total Time: ${totalTime.toFixed(4)} minutes`;
             document.getElementById("result_latex").innerHTML = latexOutput;
 
             // Render LaTeX
-            MathJax.typeset();
+            MathJax.Hub.Queue(["Typeset", MathJax.Hub]);
         };
     </script>
 
-    <!-- Include MathJax for LaTeX rendering -->
-    <script src="https://cdnjs.cloudflare.com/ajax/libs/mathjax/2.7.7/MathJax.js?config=TeX-AMS_HTML"></script>
 </body>
 </html>