Update web

.vscode/launch.json

@@ -0,0 +1,15 @@
+{
+    // Use IntelliSense to learn about possible attributes.
+    // Hover to view descriptions of existing attributes.
+    // For more information, visit: https://go.microsoft.com/fwlink/?linkid=830387
+    "version": "0.2.0",
+    "configurations": [
+        {
+            "type": "pwa-chrome",
+            "request": "launch",
+            "name": "Launch Chrome against localhost",
+            "url": "http://localhost:8080",
+            "webRoot": "${workspaceFolder}"
+        }
+    ]
+}

docs/css/page.css

@@ -22,6 +22,7 @@
     margin: 1% 1% 1% 1%;
     width: 100%;
     height: auto;
+
 }
 
 .which-image img {
@@ -29,7 +30,20 @@
     width: 100%;
 }
 
-.image-display img {
+.image-display2 img {
     float: right;
-    width: 65%;
+    width: 100%;
+}
+/* .image-display{
+    align-items: center;
+}
+.image-display2{
+    align-items: center;
+} */
+.select-show {
+    border-style: dashed;
+    border-width: 2px;
+    border-color: purple;
+
+    /* padding: 2px; */
 }

docs/index.html

@@ -150,19 +150,19 @@
                 <h3>Single Face Video Swap</h3>
             </div>
         </div>
-        <div class="row">
+        <div class="row select-show">
             <div class="col-md-12">
                 <div class="col-md-3 which-image-container">
                     <div class="which-image" id=anni>
                         <img src="./img/id/anni.jpg" onclick="select_source(0)" />
                     </div>
                     <div class="which-image" id=chenglong>
-                        <img src="./img/id/chenglong.jpg" onclick="select_source(1)" />
+                        <img src="./img/id/zhoujielun.jpg" onclick="select_source(1)" />
                     </div>
                 </div>
                 <div class="col-md-3 which-image-container">
                     <div class="which-image" id=zhoujielun>
-                        <img src="./img/id/zhoujielun.jpg" onclick="select_source(2)" />
+                        <img src="./img/id/chenglong.jpg" onclick="select_source(2)" />
                     </div>
                     <div class="which-image" id=zhuyin>
                         <img src="./img/id/zhuyin.jpg" onclick="select_source(3)" />
@@ -172,11 +172,23 @@
                     <img id=jiroujinlun src="./img/anni.webp" />
                 </div>
             </div>
-
-
-            <!-- <img width=24% src="./img/chenglong.webp" />
-            <img width=24% src="./img/zhoujielun.webp" />
-            <img width=24% src="./img/zhuyin.webp" /> -->
+        </div>
+        <div class="row select-show" style="margin-top: 10px;">
+            <div class="col-md-12">
+                <div class="col-md-3 which-image-container">
+                    <div class="which-image" id=Iron_man>
+                        <img src="./img/id/Iron_man.jpg" onclick="select_source2(0)" />
+                    </div>
+                </div>
+                <div class="col-md-3 which-image-container">
+                    <div class="which-image" id=wuyifan>
+                        <img src="./img/id/wuyifan.png" onclick="select_source2(1)" />
+                    </div>
+                </div>
+                <div class="col-md-6 image-display2">
+                    <img id=mama src="./img/mama_mask_Trim_short.webp" />
+                </div>
+            </div>
         </div>
         <div class="row">
             <div class="col-md-*">
@@ -319,6 +331,15 @@
     <script src="./js/bootstrap.min.js"></script>
     <!-- IE10 viewport hack for Surface/desktop Windows 8 bug -->
     <script src="./js/ie10-viewport-bug-workaround.js"></script>
+    <script>
+        document.getElementById('Iron_man').style.borderWidth = '5px';
+        document.getElementById('Iron_man').style.borderColor = 'red';
+        document.getElementById('Iron_man').style.borderStyle = 'outset';
+
+        document.getElementById('anni').style.borderWidth = '5px';
+        document.getElementById('anni').style.borderColor = 'red';
+        document.getElementById('anni').style.borderStyle = 'outset';
+    </script>
 </body>
 
 </html>

docs/js/which-image.js

@@ -2,8 +2,8 @@
  * @FilePath: \SimSwap\docs\js\which-image.js
  * @Author: Ziang Liu
  * @Date: 2021-07-03 16:34:56
- * @LastEditors: Ziang Liu
- * @LastEditTime: 2021-07-03 16:44:10
+ * @LastEditors: AceSix
+ * @LastEditTime: 2021-07-20 00:23:27
  * Copyright (C) 2021 SJTU. All rights reserved.
  */
 
@@ -24,4 +24,27 @@ function select_source(number) {
     }
     document.getElementById('jiroujinlun').src = './img/' + item_id + '.webp';
 
+}
+
+function select_source2(number) {
+    var items = ['Iron_man', 'wuyifan'];
+    var item_id = items[number];
+
+    for (i = 0; i < 2; i++) {
+        if (number == i) {
+            document.getElementById(items[i]).style.borderWidth = '5px';
+            document.getElementById(items[i]).style.borderColor = 'red';
+            document.getElementById(items[i]).style.borderStyle = 'outset';
+        } else {
+            document.getElementById(items[i]).style.border = 'none';
+        }
+    }
+    if (item_id=='Iron_man'){
+        document.getElementById('mama').src = './img/mama_mask_Trim_short.webp';
+    }
+    else{
+        document.getElementById('mama').src = './img/mama_mask_wuyifan_Trim_short.webp';
+
+    }
+    
 }