backend api call for flip card contents

App/Backend/flip_card_content.py

+import pymongo
+
+def getFlipCardContent():
+    client = pymongo.MongoClient("mongodb+srv://hearme:hearme678@cluster0.kz66vdr.mongodb.net")
+    db = client['word_card']
+    collection = db['card']
+
+    card_data = collection.find_one()
+
+    if card_data:
+        main_image_data = {
+            'isMainImage': True,
+            'image': card_data['image'],
+            'audio': card_data['audio']
+        }
+
+        other_images_data = [
+            {
+                'isMainImage': False,
+                'image': card['image'],
+                'audio': card['audio']
+            } for card in card_data['card_0']
+        ]
+
+        images_data = [main_image_data] + other_images_data
+
+        return images_data
+
+    return []

App/Backend/server.py

 import numpy as np
 from flask import Flask, request, jsonify, request
+from flask_cors import CORS
 #import pickle
+
 from word_card_game import wordGameData
 from word_generation import get_similar_words
-from flask_cors import CORS
-import pymongo
+from flip_card_content import getFlipCardContent
+
 
 
 app = Flask(__name__)
@@ -51,6 +53,16 @@ def similar_words_api():
     similar_words = get_similar_words(word)
     return jsonify({'similar_words': similar_words})
 
+@app.route('/api/flip-card-content')
+def flip_card_content():
+    data = getFlipCardContent()
+    return jsonify(data)
+
+@app.route('/api/images_data', methods=['GET'])
+def get_images_data():
+    images_data = wordGameData()
+    return jsonify(images_data)
+
 if __name__ == '__main__':
     CORS(app.run(host='0.0.0.0', port=5000, debug=True))
     #app.run(host='0.0.0.0', port=5000, debug=True)
\ No newline at end of file

App/Backend/word_card_game.py

 import random
+import pymongo
 
-def wordGameData(w1, w2, w3):
-    words = [w1, w2, w3]
-    main_word = random.choice(words)
-    card_words = random.sample(words, len(words))
+client = pymongo.MongoClient("mongodb+srv://hearme:hearme678@cluster0.kz66vdr.mongodb.net")
+db = client['word_card']
+collection = db['card']
 
-    card_word1, card_word2, card_word3 = card_words
+def get_words():
+    doc = collection.find_one()
+    if doc and 'card_0' in doc:
+        words = doc['card_0']
+        #print(words)
+        return words
+    else:
+        return []
 
-    def create_links(word):
-        image_link = f'https://fyp-word-images.s3.us-east-2.amazonaws.com/{word}.png'
-        audio_link = f'https://fyp-word-audio.s3.us-east-2.amazonaws.com/{word}.m4a'
-        return {'word': word, 'image_link': image_link, 'audio_link': audio_link}
+
+
+def wordGameData():
+    words_data = get_words()
+    main_word_data = random.choice(words_data)
+    card_words_data = random.sample(words_data, len(words_data))
+
+    def create_links(word_data):
+        return {'word': word_data['word'], 'image_link': word_data['image'], 'audio_link': word_data['audio']}
 
     return {
-        'main_word': create_links(main_word),
-        'card_word1': create_links(card_word1),
-        'card_word2': create_links(card_word2),
-        'card_word3': create_links(card_word3)
-    }
\ No newline at end of file
+        'main_word': create_links(main_word_data),
+        'card_word1': create_links(card_words_data[0]),
+        'card_word2': create_links(card_words_data[1]),
+        'card_word3': create_links(card_words_data[2])
+    }

App/Backend/word_generation.py

@@ -36,15 +36,16 @@ def get_similar_words(input_word, top_k=3):
             'audio': audio_url
         })
     
-    print(result)
-
+    
     #connect mongo
     client = pymongo.MongoClient("mongodb+srv://hearme:hearme678@cluster0.kz66vdr.mongodb.net")
     db = client['word_card']
     collection = db['card']
 
     document = {"card_0": result}
-    
+    print('---------------')
+    print(document)
+
     collection.delete_many({})
     collection.insert_one(document)
 

App/Frontend/screens/FlipCardGameScreen.js

 import React, { useState, useEffect } from 'react';
-import { StyleSheet, View, TouchableOpacity, Image, Text, Modal, Button  } from 'react-native';
+import { StyleSheet, View, TouchableOpacity, Image, Text, Modal, Button } from 'react-native';
 import { Audio } from 'expo-av';
 
 const Card = ({ image, audio, onFlip, gameOver, correct }) => {
-    const [isFlipped, setIsFlipped] = useState(false);
+  const [isFlipped, setIsFlipped] = useState(false);
 
-    useEffect(() => {
-      if (gameOver) {
-        setIsFlipped(true);
-      }
-    }, [gameOver]);
-  
-    const handleFlip = async () => {
-      if (!isFlipped && !gameOver) {
+  useEffect(() => {
+    if (gameOver) {
+      setIsFlipped(true);
+    }
+  }, [gameOver]);
+
+  const handleFlip = async () => {
+    if (!isFlipped && !gameOver) {
+      setIsFlipped(true);
+      await Audio.Sound.createAsync(audio, { shouldPlay: true });
+      onFlip(image);
+
+      setTimeout(() => {
         setIsFlipped(true);
-        await Audio.Sound.createAsync(audio, { shouldPlay: true });
-        onFlip(image);
-  
-        setTimeout(() => {
-          setIsFlipped(true);
-        }, 800);
-      }
-    };
-    return (
-        <TouchableOpacity
-          style={[styles.card, correct && gameOver ? styles.correctCard : null]}
-          onPress={handleFlip}
-        >
-          <Image source={isFlipped ? image : require('./assets/ST/owl.png')} style={styles.cardImage} />
-        </TouchableOpacity>
-      );
-    };
+      }, 800);
+    }
+  };
+  return (
+    <TouchableOpacity
+      style={[styles.card, correct && gameOver ? styles.correctCard : null]}
+      onPress={handleFlip}
+    >
+      <Image source={isFlipped ? image : require('./assets/ST/owl.png')} style={styles.cardImage} />
+    </TouchableOpacity>
+  );
+};
 
 const MessageBox = ({ visible, onClose }) => {
-    return (
-      <Modal animationType="slide" transparent={true} visible={visible}>
-        <View style={styles.modalContainer}>
-          <View style={styles.modalContent}>
-            <Text style={styles.modalText}>Game Over</Text>
-            <Button title="Close" onPress={onClose} />
-          </View>
+  return (
+    <Modal animationType="slide" transparent={true} visible={visible}>
+      <View style={styles.modalContainer}>
+        <View style={styles.modalContent}>
+          <Text style={styles.modalText}>Game Over</Text>
+          <Button title="Close" onPress={onClose} />
         </View>
-      </Modal>
-    );
-  };
+      </View>
+    </Modal>
+  );
+};
 
 export default function FlipCardGame({ route }) {
   const [gameOver, setGameOver] = useState(false);
-  const { cards } = route.params;
-  console.log(route.params);
+  const [imagesData, setImagesData] = useState([]);
+  //const { cards } = route.params;
+  //console.log(route.params);
 
-  const handleScroll = async (event) => {
-    const newIndex = Math.round(
-      event.nativeEvent.contentOffset.x / screenWidth
-    );
-    if (newIndex !== activeIndex) {
-      setActiveIndex(newIndex);
-      if (cards.length > 0) {
-        await soundRef.current.unloadAsync();
-        await soundRef.current.loadAsync({ uri: cards[newIndex].audio });
-        await soundRef.current.playAsync();
-      }
-    }
-  };
-  
-  const handleAudioPress = async () => {
-    if (cards.length > 0) {
-      await soundRef.current.unloadAsync();
-      await soundRef.current.loadAsync({ uri: cards[activeIndex].audio });
-      await soundRef.current.playAsync();
+  const fetchImagesData = async () => {
+    try {
+      const response = await fetch('http://192.168.137.111:5000/api/images_data');
+      const data = await response.json();
+      setImagesData(data);
+    } catch (error) {
+      console.error('Error fetching images data:', error);
     }
   };
 
-  const images = [
-    { image: require('./assets/CG/content/vegetable.png'), audio: require('./assets/CG/content/vegetable.m4a') },
-    { image: require('./assets/CG/content/kitchen.png'), audio: require('./assets/CG/content/kitchen.m4a') },
-    { image: require('./assets/CG/content/pot.png'), audio: require('./assets/CG/content/pot.m4a') },
-  ];
+  useEffect(() => {
+    fetchImagesData();
+  }, []);
 
-  const mainImage = require('./assets/CG/content/kitchen.png');
+  const mainImage = imagesData.find((img) => img.isMainImage);
 
   const handleCardFlip = (image) => {
     if (image === mainImage) {
@@ -88,16 +75,16 @@ export default function FlipCardGame({ route }) {
 
   return (
     <View style={styles.container}>
-      <Image source={mainImage} style={styles.mainImage} />
+      {mainImage && <Image source={{ uri: mainImage.image }} style={styles.mainImage} />}
       <View style={styles.cardsContainer}>
-        {images.map((img, index) => (
+        {imagesData.map((img, index) => (
           <Card
             key={index}
-            image={img.image}
-            audio={img.audio}
+            image={{ uri: img.image }}
+            audio={{ uri: img.audio }}
             onFlip={handleCardFlip}
             gameOver={gameOver}
-            correct={img.image === mainImage}
+            correct={img.isMainImage}
           />
         ))}
       </View>
@@ -105,7 +92,6 @@ export default function FlipCardGame({ route }) {
     </View>
   );
 }
-
 const styles = StyleSheet.create({
   container: {
     flex: 1,

App/Frontend/screens/WordGenerationScreen.js

@@ -19,7 +19,7 @@ const screenHeight = Dimensions.get("window").height;
 
 const fetchCards = async () => {
   try {
-    const response = await fetch('http://192.168.216.111:5000/api/similar-words?word=school');
+    const response = await fetch('http://192.168.137.111:5000/api/similar-words?word=school');
     const data = await response.json();
     console.log(data)
     return data.similar_words;