update

src/components/GenerateImg.vue

@@ -37,7 +37,7 @@ const beforeUpload = (file) => {
 
 const getTemplateIdsFromUrl = (response, url, index)=> {
   const filename = url.split('/').pop();
-  const matchedTemplate = faceTemplate.find(template => template.name === filename);
+  const matchedTemplate = faceTemplate.find(template => filename.includes(template.name));
   if (!matchedTemplate) {
     console.error(`No template found for filename: ${filename}`);
     return null;
@@ -387,7 +387,7 @@ import generateImg from '../assets/images/generate-img-bg.webp'
 </script>
 
 <template>
-  <div :show="show">
+  <div :show="show" class="main">
     <div class="home-wrapper" :style="{
       backgroundImage: displayScanModel 
         ? `url(${imgLoading})`
@@ -477,6 +477,10 @@ import generateImg from '../assets/images/generate-img-bg.webp'
 </template>
 
 <style scoped>
+.main {
+  height: 100%;
+  overflow-y: auto;
+}
 .moving-image {
   width: 100%;
   position: absolute;
@@ -574,8 +578,8 @@ import generateImg from '../assets/images/generate-img-bg.webp'
   outline: none !important;
 }
 .home-wrapper {
-  width: 100%;
-  height: 92vh;
+  width: 100vw;
+  height: 200vw;
   background-size: cover;
   background-repeat: no-repeat;
   display: flex;
@@ -583,7 +587,6 @@ import generateImg from '../assets/images/generate-img-bg.webp'
   justify-content: center;
   align-items: center;
   position: relative;
-  min-height: -webkit-fill-available;
 }
 .img-from-template {
   width: 75vw;