Update templates/index.html

templates/index.html

@@ -13,31 +13,66 @@
         <h1>🛡️ Microsoft Security Attack Classifier</h1>
         <p>Select values and see if the model detects an attack based on the security update.</p>
 
-        <form method="POST"> <!-- טופס שישלח בקשת POST לשרת -->
-            {% for feature in features %} <!-- לולאה שעוברת על כל שם פיצ'ר -->
-                <label for="{{ feature }}">{{ feature }}</label><br> <!-- תווית לפיצ'ר עם שם דינמי -->
-                <select name="{{ feature }}" required> <!-- תיבת בחירה עם שם שווה לפיצ'ר, חובה למלא -->
-                    {% for option in options_dict[feature] %} <!-- לולאה על כל האפשרויות לפיצ'ר זה -->
-                        <option value="{{ option }}">{{ option }}</option> <!-- אופציה לבחירה, גם ערך גם תצוגה זהה -->
+        <form id="predictForm" method="POST">
+            {% for feature in features %}
+                <label for="{{ feature }}">{{ feature }}</label><br>
+                <select name="{{ feature }}" required>
+                    {% for option in options_dict[feature] %}
+                        <option value="{{ option }}">{{ option }}</option>
                     {% endfor %}
-                </select><br><br> <!-- שורה ריקה בין הבחירות -->
+                </select><br><br>
             {% endfor %}
 
-            <button type="submit">🔍 Predict </button> <!-- כפתור לשליחת הטופס -->
+            <button type="submit">🔍 Predict </button>
         </form>
 
-
-        {% if prediction %} <!-- אם המשתנה prediction קיים ומכיל ערך -->
-            <div class="result"> <!-- תיבה לעיצוב התוצאה -->
-                <h2>{{ prediction }}</h2> <!-- הצגת טקסט התחזית שהשרת החזיר -->
+        {% if prediction %}
+            <div class="result">
+                <h2>{{ prediction }}</h2>
+                <button id="downloadBtn">⬇️ Download Prediction</button>
             </div>
         {% endif %}
 
-
         <footer>
             ⚡ Built by <a href="https://github.com/ss331144" target="_blank">Sahar Yaccov</a> and <a href="https://github.com/BarCohen-dot" target="_blank">Bar Cohen</a>
         </footer>
-
     </div>
+
+    <script>
+        {% if prediction %}
+        document.getElementById('downloadBtn').addEventListener('click', function() {
+            // אסוף את הערכים מהטופס
+            const form = document.getElementById('predictForm');
+            const formData = new FormData(form);
+            let content = '';
+
+            // הוסף תאריך ושעה
+            const now = new Date();
+            content += `Date: ${now.toISOString().slice(0,10)}\n`;
+            content += `Time: ${now.toTimeString().slice(0,8)}\n\n`;
+
+            // הוסף כל שדה מהטופס
+            for (let [key, value] of formData.entries()) {
+                content += `${key}: ${value}\n`;
+            }
+
+            // הוסף את החיזוי
+            content += `\nPrediction: {{ prediction | e }}\n`;
+
+            // צור בלוב טקסט
+            const blob = new Blob([content], { type: 'text/plain' });
+            const url = URL.createObjectURL(blob);
+
+            // צור קישור להורדה ו"קליק" עליו
+            const a = document.createElement('a');
+            a.href = url;
+            a.download = 'prediction.txt';
+            a.click();
+
+            // שחרר את האובייקט
+            URL.revokeObjectURL(url);
+        });
+        {% endif %}
+    </script>
 </body>
 </html>