model과 백엔드 연결

@@ -103,7 +103,7 @@
               style="margin-left: 5px; margin-top: -18px; background-color: #fff; width: 110px; text-align: center;font-size: 14px; color: #5a5a5a; font-weight: 500"
               style="margin-left: 5px; margin-top: -18px; background-color: #fff; width: 110px; text-align: center;font-size: 14px; color: #5a5a5a; font-weight: 500"
             >Generated Tags</div>
             >Generated Tags</div>
             <v-chip-group column>
             <v-chip-group column>
-              <v-chip color="secondary" v-for="(tag, index) in generatedTag" :key="index">{{ tag.name }} : {{tag.accuracy}}</v-chip>
+              <v-chip color="secondary" v-for="(tag, index) in generatedTag" :key="index">{{ tag[0] }} : {{tag[1]}}</v-chip>
             </v-chip-group>
             </v-chip-group>
           </v-card>
           </v-card>
           <v-card outlined class="pa-3 mx-5 mt-8" elevation="0" min-height="67">
           <v-card outlined class="pa-3 mx-5 mt-8" elevation="0" min-height="67">
@@ -136,20 +136,8 @@ export default {
   data() {
   data() {
     return {
     return {
       videoFile: '',
       videoFile: '',
-      YoutubeUrl: [
-        'https://www.youtube.com/watch?v=8KrzgB1NWKI',
-        'https://www.youtube.com/watch?v=YfI7iQrqKGg',
-        'https://www.youtube.com/watch?v=AoO9vUCqgsw',
-        'https://www.youtube.com/watch?v=fRYDHLseGLg',
-        'https://www.youtube.com/watch?v=WOMUrZ9owhA',
-      ],
-      generatedTag: [
-        { name: 'mobile-phone', accuracy: '35%' },
-        { name: 'smartphone', accuracy: '33%' },
-        { name: 'concert', accuracy: '14%' },
-        { name: 'car', accuracy: '11%' },
-        { name: 'dance', accuracy: '5%' },
-      ],
+      YoutubeUrl: [],
+      generatedTag: [],
       threshold: 5,
       threshold: 5,
       successDialog: false,
       successDialog: false,
       errorDialog: false,
       errorDialog: false,
@@ -173,9 +161,15 @@ export default {
           headers: { 'Content-Type': 'multipart/form-data' },
           headers: { 'Content-Type': 'multipart/form-data' },
         })
         })
         .then((r) => {
         .then((r) => {
+          const tag = r.data.tag_result;
+          const url = r.data.video_result;
+          url.forEach((element) => {
+            this.YoutubeUrl.push(element.video_url);
+          });
+          this.generatedTag = tag;
           this.loadingProcess = false;
           this.loadingProcess = false;
           this.successDialog = true;
           this.successDialog = true;
-          console.log(r);
+          console.log(tag, url);
         })
         })
         .catch((e) => {
         .catch((e) => {
           this.errorDialog = true;
           this.errorDialog = true;