Merge branch 'it19001708_p' into 'master'

It19001708 p

See merge request !17

App/Backend/requirements.txt

 Flask==2.2.3
 numpy==1.24.2
+transformers
+torch
\ No newline at end of file

App/Backend/server.py

 import numpy as np
 from flask import Flask, request, jsonify, request
-import pickle
+#import pickle
 from word_card_game import wordGameData
+from word_generation import get_similar_words
+from flask_cors import CORS
 
 
 app = Flask(__name__)
@@ -12,6 +14,7 @@ app = Flask(__name__)
 
 
 # send a json {'exp':1.8,} as a post request to make a prediction
+'''
 @app.route('/api/predict',methods=['POST'])
 def predict():
     data = request.get_json(force=True)
@@ -24,7 +27,29 @@ def predict():
 def default_get():
     return "<p>HereMe Backend !</p>"
 
+'''
+@app.route('/api/word-game', methods=['GET'])
+def word_game_api():
+    w1 = request.args.get('w1')
+    w2 = request.args.get('w2')
+    w3 = request.args.get('w3')
 
+    if not all([w1, w2, w3]):
+        return jsonify({'error': 'All three words must be provided'}), 400
+
+    data = wordGameData(w1, w2, w3)
+    return jsonify(data)
+
+@app.route('/api/similar-words', methods=['GET'])
+def similar_words_api():
+    word = request.args.get('word')
+
+    if not word:
+        return jsonify({'error': 'A word must be provided'}), 400
+
+    similar_words = get_similar_words(word)
+    return jsonify({'similar_words': similar_words})
 
 if __name__ == '__main__':
-    app.run(port=5000, debug=True)
\ No newline at end of file
+    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_generation.py

+import torch
+from transformers import RobertaTokenizer, RobertaForMaskedLM
+
+# Load the pretrained RoBERTa model and tokenizer
+tokenizer = RobertaTokenizer.from_pretrained('roberta-base')
+model = RobertaForMaskedLM.from_pretrained('roberta-base')
+
+def get_similar_words(input_word, top_k=3):
+    # Create a masked sentence with the input word
+    masked_sentence = f"The {input_word} is related to the {tokenizer.mask_token}."
+    
+    # Tokenize the masked sentence
+    inputs = tokenizer(masked_sentence, return_tensors='pt')
+    
+    # Get the index of the mask token
+    mask_token_index = torch.where(inputs['input_ids'][0] == tokenizer.mask_token_id)[0].item()
+    
+    # Predict words for the mask token
+    with torch.no_grad():
+        output = model(**inputs)
+        predictions = output.logits[0, mask_token_index]
+    
+    # Get the top k predicted words
+    top_k_indices = torch.topk(predictions, top_k).indices.tolist()
+    related_words = [tokenizer.decode(idx).strip() for idx in top_k_indices]
+    
+    # Create the result array
+    result = []
+    for word in related_words:
+        image_url = f'https://fyp-word-images.s3.us-east-2.amazonaws.com/{word}.png'
+        audio_url = f'https://fyp-word-audio.s3.us-east-2.amazonaws.com/{word}.m4a'
+        result.append({
+            'word': word,
+            'image': image_url,
+            'audio': audio_url
+        })
+    
+    return result

App/Frontend/screens/WordGenerationScreen.js

@@ -12,32 +12,37 @@ import {
 import { Audio } from "expo-av";
 import { MaterialIcons } from '@expo/vector-icons';
 import { Ionicons } from '@expo/vector-icons';
-const cards = [
-  {
-    word: "kitchen",
-    image: require("./assets/CG/content/kitchen.png"),
-    audio: require("./assets/CG/content/kitchen.m4a"),
-  },
-  {
-    word: "pot",
-    image: require("./assets/CG/content/pot.png"),
-    audio: require("./assets/CG/content/pot.m4a"),
-  },
-  {
-    word: "vegetable",
-    image: require("./assets/CG/content/vegetable.png"),
-    audio: require("./assets/CG/content/vegetable.m4a"),
-  },
-];
 
 const screenWidth = Dimensions.get("window").width;
 const screenHeight = Dimensions.get("window").height;
 
+const fetchCards = async () => {
+  try {
+    console.log("fetch cards 1")
+    const response = await fetch('http://192.168.216.111:5000/api/similar-words?word=school');
+    const data = await response.json();
+    console.log(data)
+    return data.similar_words;
+  } catch (error) {
+    console.error('Error fetching cards:', error);
+  }
+};
+
 export default function ContentGenerationScreen({ navigation }) {
   const [activeIndex, setActiveIndex] = useState(0);
+  const [cards, setCards] = useState([]);
   const scrollViewRef = useRef(null);
   const soundRef = useRef(new Audio.Sound());
 
+  useEffect(() => {
+    const loadCards = async () => {
+      const fetchedCards = await fetchCards();
+      setCards(fetchedCards);
+    };
+
+    loadCards();
+  }, []);
+
   useEffect(() => {
     const unloadAudio = async () => {
       await soundRef.current.unloadAsync();
@@ -50,7 +55,6 @@ export default function ContentGenerationScreen({ navigation }) {
     };
   }, []);
   
-
   const handleScroll = async (event) => {
     const newIndex = Math.round(
       event.nativeEvent.contentOffset.x / screenWidth
@@ -58,14 +62,14 @@ export default function ContentGenerationScreen({ navigation }) {
     if (newIndex !== activeIndex) {
       setActiveIndex(newIndex);
       await soundRef.current.unloadAsync();
-      await soundRef.current.loadAsync(cards[newIndex].audio);
+      await soundRef.current.loadAsync({ uri: cards[newIndex].audio });
       await soundRef.current.playAsync();
     }
   };
 
   const handleAudioPress = async () => {
     await soundRef.current.unloadAsync();
-    await soundRef.current.loadAsync(cards[activeIndex].audio);
+    await soundRef.current.loadAsync({ uri: cards[activeIndex].audio });
     await soundRef.current.playAsync();
   };
 
@@ -76,7 +80,6 @@ export default function ContentGenerationScreen({ navigation }) {
         style={styles.monkeyImage}
       />
 
-    
       <ScrollView
         horizontal
         pagingEnabled
@@ -92,19 +95,17 @@ export default function ContentGenerationScreen({ navigation }) {
               { width: screenWidth * 1, height: screenHeight * 0.8 , marginTop: screenHeight * 0.15},
             ]}
           >
-        
             <Image
               source={require("./assets/CG/card_bg_2.png")}
               style={styles.cardBackground}
             />
-          <Image source={card.image} style={styles.cardImage} />
+            <Image source={{ uri: card.image }} style={styles.cardImage} />
             <Text style={styles.cardText}>{card.word}</Text>
 
             <TouchableOpacity onPress={handleAudioPress} style={styles.audioButton}>
               <Ionicons name="volume-high-outline" size={50} color="#FFCE6D" />
             </TouchableOpacity>
 
-      
             {index === cards.length - 1 && (
               <TouchableOpacity
                 onPress={() => navigation.navigate('FlipCardGame')}
@@ -116,8 +117,9 @@ export default function ContentGenerationScreen({ navigation }) {
           </View>
         ))}
       </ScrollView>
+   
     </ImageBackground>
-);
+  );
 }
 
 const styles = StyleSheet.create({
@@ -134,24 +136,22 @@ const styles = StyleSheet.create({
     width: screenWidth * 0.6,
     zIndex: 1, 
   },
- 
-card: {
+  card: {
     justifyContent: "center",
     alignItems: "center",
-
-},
-cardBackground: {
+  },
+  cardBackground: {
     position: "absolute",
     width: "100%",
     height: "100%",
     resizeMode: "cover",
-},
-cardImage: {
+  },
+  cardImage: {
     width: "70%",
     height: "50%",
     resizeMode: "contain",
-},
-cardText: {
+  },
+  cardText: {
     fontSize: 55,
     fontWeight: "bold",
     marginTop: 20,
@@ -159,30 +159,30 @@ cardText: {
     textShadowColor: 'rgba(0, 0, 0, 1)',
     textShadowOffset: { width: -1, height: 1 },
     textShadowRadius: 10,
-},
-audioButton: {
+  },
+  audioButton: {
     paddingHorizontal: 20,
     paddingVertical: 10,
     borderRadius: 5,
     marginTop: 20,
     backgroundColor: 'transparent'
-},
-audioButtonText: {
+  },
+  audioButtonText: {
     color: "#FFFFFF",
     fontSize: 18,
-},
-nextButton: {
+  },
+  nextButton: {
     backgroundColor: "transparent",
     position: 'absolute',
     bottom: 20,
     right: 45,
     justifyContent: 'center',
     alignItems: 'center',
-},
-nextButtonText: {
+  },
+  nextButtonText: {
     color: "#000000",
     fontSize: 18,
     bottom: 10,
     right: 10,
-},
+  },
 });