content mederation screen

App/Backend/server.py

 import numpy as np
 from flask import Flask, request, jsonify, request
 from flask_cors import CORS
+import pymongo
 #import pickle
 
 from word_card_game import wordGameData
@@ -8,6 +9,10 @@ from word_generation import get_similar_words
 from flip_card_content import getFlipCardContent
 from content_filtration import check_word_safety
 
+client = pymongo.MongoClient("mongodb+srv://hearme:hearme678@cluster0.kz66vdr.mongodb.net")
+db = client['word_filtration']
+moderate_collection = db['moderate']
+whitelist_collection = db['whitelist']
 
 
 app = Flask(__name__)
@@ -53,6 +58,19 @@ def check_word():
 
     result = check_word_safety(word)
     return jsonify({"word": word, "status": result}), 200
+
+@app.route('/api/moderate-words', methods=['GET'])
+def get_words():
+    words = moderate_collection.find().limit(10)
+    return jsonify(words=[word['word'] for word in words])
+
+@app.route('/api/moderate-handle-word', methods=['POST'])
+def handle_word():
+    word = request.json.get('word')
+    score = request.json.get('score')
+    moderate_collection.delete_one({'word': word})
+    whitelist_collection.insert_one({'word': word, 'sensitivity_score': score})
+    return jsonify(success=True)
     
 if __name__ == '__main__':
     CORS(app.run(host='0.0.0.0', port=5000, debug=True))

App/Backend/word_generation.py

@@ -16,7 +16,9 @@ def get_similar_words(input_word, top_k=3):
     cursor = collection_0.find()
   
 
-    random_word = collection_0.aggregate([{'$sample': {'size': 1}}]).next()['object']
+    count = collection_0.estimated_document_count()
+    random_skip = random.randint(0, count - 1)
+    random_word = collection_0.find().skip(random_skip).next()['object']
     input_word = random_word.strip()
     print('---------------------------------------------------------')
     print('')

App/Frontend/App.js

@@ -11,6 +11,8 @@ import WordGameScreen from './screens/WordGameScreen';
 import PhoneticWordScreen from './screens/PhoneticWordsScreen';
 import FlipCardGameScreen from './screens/FlipCardGameScreen';
 import ContentFiltration from './screens/ContentFiltrationScreen';
+import PinEntryScreen from './screens/PinEntryScreen';
+import ContentModeration from './screens/ContentModerationScreen';
 
 const MainStack = createStackNavigator(
   {
@@ -44,6 +46,12 @@ const MainStack = createStackNavigator(
     ContentFiltration: {
       screen: ContentFiltration,
     },
+    PinEntry: {
+      screen: PinEntryScreen,
+    },
+    ContentModeration: {
+      screen: ContentModeration,
+    },
   },
   {
     initialRouteName: 'Login',

App/Frontend/package.json

@@ -12,15 +12,19 @@
     "@expo/vector-icons": "^13.0.0",
     "@react-navigation/native": "^6.1.6",
     "@react-navigation/stack": "^6.3.16",
+    "axios": "^1.4.0",
     "expo": "~48.0.9",
     "expo-av": "^13.2.1",
     "expo-screen-orientation": "~5.1.1",
     "expo-status-bar": "~1.4.4",
+    "mongodb": "^5.5.0",
     "react": "18.2.0",
     "react-native": "^0.71.6",
     "react-native-draggable": "^3.3.0",
     "react-native-draggable-flatlist": "^4.0.1",
+    "react-native-elements": "^3.4.3",
     "react-native-gesture-handler": "~2.9.0",
+    "react-native-numeric-input": "^1.9.1",
     "react-native-orientation-locker": "^1.5.0",
     "react-native-reanimated": "~2.14.4",
     "react-native-safe-area-context": "4.5.0",

App/Frontend/screens/ContentFiltrationScreen.js

 import React, { useState } from 'react';
-import { StyleSheet, Text, View, TextInput, Button, Alert } from 'react-native';
+import { StyleSheet, Text, View, TextInput, Button, Alert, ActivityIndicator } from 'react-native';
 
 export default function ContentFiltration() {
   const [word, setWord] = useState('');
   const [response, setResponse] = useState('');
+  const [loading, setLoading] = useState(false);
 
   const checkWord = async () => {
+    setLoading(true);
     try {
-      const response = await fetch('http://192.168.17.111:5000/check_word', {
+      const response = await fetch('http://192.168.8.194:5000/check_word', {
         method: 'POST',
         headers: {
           'Content-Type': 'application/json',
@@ -23,8 +25,11 @@ export default function ContentFiltration() {
       setResponse(result.status);
     } catch (error) {
       Alert.alert('Error', error.message);
+    } finally {
+      setLoading(false);
     }
   };
+
   return (
     <View style={styles.container}>
       <TextInput
@@ -34,7 +39,11 @@ export default function ContentFiltration() {
         placeholder="Enter a word"
       />
       <Button title="Check" onPress={checkWord} />
-      {response ? <Text style={styles.response}>Status: {response}</Text> : null}
+      {loading ? (
+        <ActivityIndicator size="large" color="#0000ff" />
+      ) : response ? (
+        <Text style={styles.response}>Status: {response}</Text>
+      ) : null}
     </View>
   );
 }

App/Frontend/screens/ContentModerationScreen.js

+import React, { useEffect, useState } from 'react';
+import { View, Text, Button, ImageBackground, StyleSheet, ScrollView } from 'react-native';
+import axios from 'axios';
+
+const ContentModerationScreen = ({ navigation }) => {
+  const [words, setWords] = useState([]);
+
+  useEffect(() => {
+    fetchWords();
+  }, []);
+
+  const fetchWords = async () => {
+    try {
+      const res = await axios.get('http://192.168.8.194:5000/api/moderate-words');
+      setWords(res.data.words);
+    } catch (error) {
+      console.error(error);
+    }
+  };
+
+  const handleWord = async (word, score) => {
+    try {
+      await axios.post('http://192.168.8.194:5000/api/moderate-handle-word', { word, score });
+      setWords(words.filter(w => w !== word));
+    } catch (error) {
+      console.error(error);
+    }
+  };
+
+  return (
+    <ImageBackground source={require('./assets/home/home_bg.png')} style={styles.background}>
+      <Text style={styles.title}>Mark safe words</Text>
+      <View style={styles.wordListBox} />
+      <View style={styles.overlay}>
+        <ScrollView contentContainerStyle={styles.wordList}>
+          {words.map((word, index) => (
+            <View key={index} style={styles.wordContainer}>
+              <Text style={styles.word}>{word}</Text>
+              <View style={styles.buttonContainer}>
+                <Button title="Safe" color="green" onPress={() => handleWord(word, 1)} />
+                <Button title="Unsafe" color="red" onPress={() => handleWord(word, -1)} />
+              </View>
+            </View>
+          ))}
+        </ScrollView>
+      </View>
+      <View style={styles.demoButton}>
+        <Button title="OPEN DEMO" onPress={() => navigation.navigate('ContentFiltration')} />
+      </View>
+    </ImageBackground>
+  );
+};
+
+const styles = StyleSheet.create({
+  background: {
+    flex: 1,
+    justifyContent: 'center',
+    alignItems: 'center',
+    padding: 20,
+  },
+  title: {
+    fontSize: 24,
+    fontWeight: 'bold',
+    position: 'absolute',
+    top: 10,
+    alignSelf: 'center',
+    top:100
+  },
+  wordListBox: {
+    backgroundColor: '#fff',
+    opacity: 0.5,
+    borderRadius: 20,
+    height: '60%',
+    width: '100%',
+    marginTop: 50,
+    marginBottom: 70,
+    position: 'absolute',
+  },
+  overlay: {
+    marginTop: 50,
+    marginBottom: 70,
+    width: '100%',
+    height: '60%',
+  },
+  wordList: {
+    width: '90%',
+    top:50,
+    left:20
+  },
+  wordContainer: {
+    flexDirection: 'row',
+    justifyContent: 'space-between',
+    alignItems: 'center',
+    width: '100%',
+    marginBottom: 20,
+  },
+  buttonContainer: {
+    flexDirection: 'row',
+    justifyContent: 'space-between',
+    width: '40%',
+    left: 5,
+    right: 5
+  },
+  word: {
+    fontSize: 28,
+  },
+  demoButton: {
+    position: 'absolute',
+    bottom: 40,
+    width: '100%',
+  },
+});
+
+export default ContentModerationScreen;

App/Frontend/screens/FlipCardGameScreen.js

@@ -42,7 +42,7 @@ const Card = ({ image, audio, onFlip, gameOver, correct, soundRef }) => {
       style={[styles.card, correct && gameOver ? styles.correctCard : null]}
       onPress={handleFlip}
     >
-      <Image source={isFlipped ? image : require('./assets/ST/owl.png')} style={styles.cardImage} />
+      <Image source={isFlipped ? image : require('./assets/FC/card_back.png')} style={styles.cardImage} />
     </TouchableOpacity>
   );
 };
@@ -112,7 +112,7 @@ export default function FlipCardGame() {
 
   const fetchImagesData = async () => {
     try {
-      const response = await fetch('http://192.168.17.111:5000/api/images_data');
+      const response = await fetch('http://192.168.8.194:5000/api/images_data');
       const data = await response.json();
       //console.log(data);
   

App/Frontend/screens/HomeScreen.js

@@ -28,7 +28,7 @@ const HomeScreen = ({ navigation }) => {
         <Text style={styles.buttonText}>Learn</Text>
       </TouchableOpacity>
 
-      <TouchableOpacity style={styles.buttonsettings} onPress={() => navigation.navigate('ContentFiltration')}>
+      <TouchableOpacity style={styles.buttonsettings} onPress={() => navigation.navigate('PinEntry')}>
         <Image source={require('./assets/settings_icon.png')} style={styles.buttonImage} resizeMode="cover" />
         <Text style={styles.buttonTextCensor}>Censor</Text>
       </TouchableOpacity>

App/Frontend/screens/PinEntryScreen.js

+import React, { useState, useRef } from 'react';
+import { View, Text, ImageBackground, Keyboard, StyleSheet } from 'react-native';
+import { Input } from 'react-native-elements';
+
+const PinEntryScreen = ({ navigation }) => {
+  const [pin, setPin] = useState(['', '', '', '']);
+  const refs = Array(4).fill(0).map((_, i) => useRef(null));
+
+  const onChange = (index, value) => {
+    if (value.length > 1) {
+      return;
+    }
+
+    const newPin = [...pin];
+    newPin[index] = value;
+    setPin(newPin);
+
+    if (value !== '') {
+      if (index < 3) {
+        refs[index + 1].current.focus();
+      }
+    }
+
+    if (newPin.join('') === '1122') {
+      Keyboard.dismiss();
+      navigation.navigate('ContentModeration');
+    }
+  };
+
+  return (
+    <ImageBackground source={require('./assets/home/home_bg.png')} style={styles.background}>
+      <Text style={styles.title}>Enter Pin</Text>
+      <View style={styles.inputContainer}>
+        {pin.map((p, i) => (
+          <Input
+            key={i}
+            ref={refs[i]}
+            value={p}
+            keyboardType='numeric'
+            onChangeText={(value) => onChange(i, value)}
+            maxLength={1}
+            containerStyle={styles.input}
+            inputContainerStyle={{ borderBottomWidth: 0 }}
+          />
+        ))}
+      </View>
+    </ImageBackground>
+  );
+};
+
+const styles = StyleSheet.create({
+  background: {
+    flex: 1,
+    justifyContent: 'center',
+    alignItems: 'center',
+  },
+  title: {
+    fontSize: 24,
+    marginBottom: 20,
+  },
+  inputContainer: {
+    flexDirection: 'row',
+    justifyContent: 'center',
+  },
+  input: {
+    width: 50,
+    height: 50,
+    backgroundColor: '#fff',
+    borderRadius: 5,
+    margin: 5,
+  },
+});
+
+export default PinEntryScreen;

App/Frontend/screens/WordGenerationScreen.js

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