Update AB/index.html

AB/index.html

@@ -5,7 +5,8 @@
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
      <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/KaTeX/0.13.11/katex.min.css">
     <link href="https://fonts.googleapis.com/css2?family=Barlow+Condensed:wght@100&display=swap" rel="stylesheet">
-    <style>
+        <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.4/css/all.min.css" integrity="sha512-ztihjwR9kDkKOyp6iBBb8yuZCkz5+RE2KfoOq6x/TgHNiiRA2oG6MxR0CBnl/vHOrJWRwB2Cts/bUExZTfqjGw==" crossorigin="anonymous" referrerpolicy="no-referrer" />
+<style>
     	body {
     background-color: #121212;
     color: #FFFFFF;
@@ -272,15 +273,13 @@ label[for="simple"], label[for="complex"] {
 
  <button type="button" onclick="predict()">Generate </button>  <!-- Changed to type="button" and added onclick handler -->
   </form>
-<div id="resultImage">
-    <div id="loadingSpinner" style="display: none;"></div>
-    <div id="resultContainer"></div>
-    <a id="downloadLink" href="#" download="result_image.jpg" style="display: none;">
-        <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" width="24" height="24">
-            <path fill="currentColor" d="M13 4v3h3l-4 4-4-4h3v-3h-6v3l-5 5 5 5v3h10v-3l5-5-5-5v-3z"/>
-        </svg>
-    </a>
-</div>
+   <div id="resultImage">
+        <div id="loadingSpinner" style="display: none;"></div>
+        <div id="resultContainer"></div>
+        <a id="downloadLink" href="#" download="result_image.jpg" style="display: none;">
+            <i class="fas fa-download"></i>
+        </a>
+    </div>
 
 
 
@@ -338,7 +337,6 @@ formData.set('version', version);
     resultContainer.innerHTML = `<p>Oops! Something went wrong. Please try again later.</p>`;
 }
 
-
     } catch (error) {
         console.error('Error converting image to line drawing:', error);
         resultContainer.innerHTML = `<p>Oops! Something went wrong. Please try again later.</p>`;