├── .gitignore ├── README.md ├── client ├── .gitignore ├── App.js ├── app.json ├── assets │ ├── adaptive-icon.png │ ├── favicon.png │ ├── icon.png │ └── splash.png ├── babel.config.js ├── components │ ├── Footer.jsx │ ├── ImageButtons.jsx │ ├── SendButton.jsx │ └── Welcome.jsx ├── package-lock.json └── package.json └── server ├── mlapi.py ├── model ├── dir_manipulation.py ├── img_manipulation.py ├── interface.py ├── model.py ├── pre_processing.py └── saved_model.pb └── requirements.txt /.gitignore: -------------------------------------------------------------------------------- 1 | __pycache__ -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 | # Cancer Detection App 📸💻 2 | 3 | ## Project Overview 4 | Welcome to my most exciting computer science project! 🚀 I've developed a Cancer Detection App using React Native for the frontend and TensorFlow, NumPy, and Python for the backend. The app empowers users to check if a naevus (mole) is benign or malignant. 5 | 6 | ## Features 7 | - 📷 **Camera Integration:** Capture photos directly from your phone's camera. 8 | - 🔄 **Real-time Detection:** Instantly send the photo to the TensorFlow model for analysis. 9 | - 🤖 **Machine Learning Magic:** Utilizing TensorFlow, NumPy, and Python to distinguish between benign and malignant moles. 10 | 11 | ## How It Works 12 | 1. 📱 **User Permission:** The app prompts the user for camera permissions. 13 | 2. 📸 **Capture Photo:** Users can take a photo of the naevus they want to analyze. 14 | 3. 🚀 **Model Processing:** The app sends the photo to the TensorFlow model for analysis. 15 | 4. 🩺 **Diagnosis Result:** The model processes the image and provides feedback on whether the naevus is benign or malignant. 16 | 17 | ## Technologies Used 18 | - ⚛️ **React Native:** For the frontend development. 19 | - 🧠 **TensorFlow:** Powering the machine learning model. 20 | - 🐍 **Python:** Backend development and model training. 21 | - 📊 **NumPy:** Handling numerical operations efficiently. 22 | - 📷 **Camera Permissions:** Leveraging the device's camera for photo capture. 23 | 24 | ## Training Data 25 | - 📊 **Kaggle Dataset:** The model has been trained on a curated dataset from Kaggle, ensuring robust and accurate predictions. 26 | 27 | ## Future Enhancements 28 | - 🌐 **Web Deployment:** I am considering deploying the app on the web for broader accessibility. 29 | - 🌈 **Improved UX/UI:** I plan to enhance the user interface with nativewind. 30 | 31 | ## Acknowledgments 32 | A big shoutout to the open-source community and the incredible tools and libraries that made this project possible. 🎉 33 | 34 | Happy Coding! 🚀👩‍💻👨‍💻 35 | 36 | ## Requirements 37 | 38 | - Android or iOS device with a camera 39 | - Internet connection for TensorFlow.js model updates (if applicable) 40 | 41 | ## Installation 42 | 43 | 1. Clone the repository: 44 | 45 | ```bash 46 | git clone https://github.com/VukIG/Cancer-Detection-App.git 47 | ``` 48 | 49 | 2. Install dependencies: 50 | 51 | ```bash 52 | cd Cancer-Detection-App 53 | npm install 54 | ``` 55 | 56 | 3. Run the app and Scan the QR code with the Expo app from Play Store : 57 | 58 | ```bash 59 | npx expo start --tunnel 60 | ``` 61 | 4. Run the app on your emulator ( Optional if you don't want to use the expo app ): 62 | ```bash 63 | Press w for web, a for android emulator ( Requires the AndroidSDK setup ) or i for ios emulator ( requires xcode ) 64 | ``` 65 | ## How to Contribute 66 | Feel free to fork the repository and contribute to the development. Your suggestions and enhancements are more than welcome! 🙌 67 | 68 | 69 | We welcome contributions! If you have suggestions, found a bug, or want to improve the app, please open an issue or submit a pull request. 70 | 71 | ## License 72 | 73 | This project is licensed under the [MIT License](LICENSE). 74 | -------------------------------------------------------------------------------- /client/.gitignore: -------------------------------------------------------------------------------- 1 | # Learn more https://docs.github.com/en/get-started/getting-started-with-git/ignoring-files 2 | 3 | # dependencies 4 | node_modules/ 5 | 6 | # Expo 7 | .expo/ 8 | dist/ 9 | web-build/ 10 | 11 | # Native 12 | *.orig.* 13 | *.jks 14 | *.p8 15 | *.p12 16 | *.key 17 | *.mobileprovision 18 | 19 | # Metro 20 | .metro-health-check* 21 | 22 | # debug 23 | npm-debug.* 24 | yarn-debug.* 25 | yarn-error.* 26 | 27 | # macOS 28 | .DS_Store 29 | *.pem 30 | 31 | # local env files 32 | .env*.local 33 | 34 | # typescript 35 | *.tsbuildinfo 36 | -------------------------------------------------------------------------------- /client/App.js: -------------------------------------------------------------------------------- 1 | import { View, Image, StyleSheet } from "react-native"; 2 | import Welcome from "./components/Welcome"; 3 | import Footer from "./components/Footer"; 4 | import SendButton from "./components/SendButton"; 5 | import ImageButtons from "./components/ImageButtons"; 6 | import { useState } from "react"; 7 | 8 | export default function App() { 9 | const [image, setImage] = useState(null); 10 | const [prediction, setPrediction] = useState(null); 11 | console.log(image); 12 | return ( 13 | 14 | 15 | {image ? ( 16 | 17 | 18 | {prediction ? 19 | {prediction}: 20 | 21 | } 22 | 23 | ) : ( 24 | 25 | )} 26 | 27 | 28 |