Implementación de la similitud

src/components/svelte/AnalyzeSimilitud.svelte

@@ -0,0 +1,31 @@
+<script>
+import { img1, img2 } from "../../store";
+let resultados = { docs: [] }; 
+async function EvSimilitud() {
+    const formData = new FormData()
+    formData.append('file1',$img1)
+    formData.append('file2', $img2)
+    try {
+        const resImgDarks = await fetch('http://localhost:8001/similitud/', {
+            method: "POST",
+            body: formData
+        });
+        
+        // if (!resImgDarks.ok) {
+        //     console.error('Ocurrió un error durante la solicitud:', Error);
+        //     throw new Error('La solicitud no fue exitosa');
+        // }
+        
+        resultados = await resImgDarks.json();
+    } catch {
+        console.error('Ocurrió un error durante la solicitud:', Error);
+    }
+}
+EvSimilitud()
+</script>
+
+{#if resultados.docs.length > 0}
+    {#each resultados.docs as resultado}
+        <div> La similitud es del {Math.trunc(resultado.Mach)}%</div>
+    {/each}
+{/if}

src/components/svelte/App.svelte

@@ -1,6 +1,6 @@
 <script>
     import { Alert, P } from 'flowbite-svelte';
-    import { APP_STATUS, appStatus } from '../../store'
+    import { APP_STATUS, appStatus, StatusImg1, StatusImg2 } from '../../store'
     import StepLoading from './StepLoading.svelte';
     import StepUpload from './StepUpload.svelte';
     import StepAccepted from './StepAccepted.svelte';
@@ -23,6 +23,11 @@
     <StepAnalyze/>
 {:else if $appStatus == APP_STATUS.BASE64}
     <StepBase64/>
+{:else if $StatusImg1 == true && $StatusImg2 == true}
+<Alert class="mb-10">
+    <span class="font-medium">Empezar a evaluar similitud</span>
+
+</Alert>
 {:else if $appStatus == APP_STATUS.ERROR}
     <Alert class="mb-10">
         <span class="font-medium">Algo malo a pasado!</span>

src/components/svelte/App2.svelte

@@ -1,6 +1,6 @@
 <script>
-    import { Alert, P } from 'flowbite-svelte';
-    import { APP_STATUS2, appStatus2 } from '../../store'
+    import { Alert } from 'flowbite-svelte';
+    import { APP_STATUS2, appStatus2, StatusImg1, StatusImg2 } from '../../store'
     import StepLoading2 from './app2/StepLoading2.svelte';
     import StepUpload2 from './app2/StepUpload2.svelte';
     import StepAccepted2 from './app2/StepAccepted2.svelte';
@@ -23,6 +23,11 @@
     <StepAnalyze2/>
 {:else if $appStatus2 == APP_STATUS2.BASE64}
     <StepBase642/>
+{:else if $StatusImg1 == true && $StatusImg2 == true}
+    <Alert class="mb-10">
+        <span class="font-medium">Empezar a evaluar similitud</span>
+
+    </Alert>
 {:else if $appStatus2 == APP_STATUS2.ERROR}
     <Alert class="mb-10">
         <span class="font-medium">Algo malo a pasado!</span>

src/components/svelte/Similitud.svelte

@@ -0,0 +1,19 @@
+<script>
+    import { Alert } from 'flowbite-svelte';
+    import { APP_STATUS, appStatus, StatusImg1, StatusImg2 } from '../../store'
+    import AnalyzeSimilitud from './AnalyzeSimilitud.svelte';
+</script>
+
+<!-- EL $ en la store es para observar el valor que tienen -->
+
+{#if $StatusImg1 == true && $StatusImg2 == true}
+    <AnalyzeSimilitud/>
+{:else if $appStatus == APP_STATUS.ERROR}
+    <Alert class="mb-10">
+        <span class="font-medium">Algo malo a pasado!</span>
+        Hay un error en la aplicación
+    </Alert>
+{:else}
+    <div></div>
+{/if}
+

src/store.ts

@@ -8,6 +8,8 @@ export const APP_STATUS={
     ACCEPTED:3,
     REFUSED:4,
     BASE64:5,
+    ACCEPTEDIMG1:false,
+    ACCEPTEDIMG2:false,
     ERROR:-1
 }
 
@@ -52,6 +54,10 @@ const ejemploresults = {
 export const resultsEv = writable(ejemploresults)
 
 export const appStatus = writable(APP_STATUS.INIT)
+export const StatusImg1 = writable(false)
+export const StatusImg2 = writable(false)
+export const img1 = writable()
+export const img2 = writable()
 
 export const setAppStatusLoading = () => {
     appStatus.set(APP_STATUS.LOADING)
@@ -73,9 +79,21 @@ export const setAppStatusRefused = () => {
 export const setAppStatusError = () => {
     appStatus.set(APP_STATUS.ERROR)
 }
+export const setAppStatusImg1 = () => {
+    StatusImg1.set(true)
+}
+export const setAppStatusImg2 = () => {
+    StatusImg2.set(true)
+}
 export const setAppStatusBase64 = () => {
     appStatus.set(APP_STATUS.BASE64)
 }
+export const setImg1 = (imagen1:File) => {
+    img1.set(imagen1)
+}
+export const setImg2 = (imagen2:File) => {
+    img2.set(imagen2)
+}
 //Para APP2
 export const APP_STATUS2={
     INIT:0,