From 360560af06338473c04ea00ee8266ffa05e11ccf Mon Sep 17 00:00:00 2001 From: Hashir Mehran Date: Mon, 25 May 2026 20:01:36 +0500 Subject: [PATCH] feat: complete spam detection system with dynamic API and docs --- README.md | 274 ++------ backend/api.py | 32 +- backend/package-lock.json | 66 +- backend/package.json | 7 +- backend/server.js | 6 +- frontend/index.html | 6 +- frontend/package-lock.json | 130 ++-- frontend/package.json | 1 + frontend/public/favicon.ico | Bin 0 -> 3716 bytes frontend/src/App.jsx | 106 +-- frontend/src/pages/SpamDetector.jsx | 371 ++++++++++ spamdetection/app/_layout.tsx | 10 +- spamdetection/app/index.tsx | 647 +++++++++++++++--- .../assets/images/android-icon-background.png | Bin 17549 -> 3716 bytes .../assets/images/android-icon-foreground.png | Bin 78796 -> 3716 bytes .../assets/images/android-icon-monochrome.png | Bin 4140 -> 3716 bytes spamdetection/assets/images/favicon.ico | Bin 0 -> 3716 bytes spamdetection/assets/images/favicon.png | Bin 1129 -> 0 bytes spamdetection/assets/images/icon.png | Bin 393493 -> 3716 bytes .../assets/images/partial-react-logo.png | Bin 5075 -> 0 bytes spamdetection/assets/images/react-logo.png | Bin 6341 -> 0 bytes spamdetection/assets/images/react-logo@2x.png | Bin 14225 -> 0 bytes spamdetection/assets/images/react-logo@3x.png | Bin 21252 -> 0 bytes spamdetection/assets/images/splash-icon.png | Bin 17547 -> 3716 bytes spamdetection/package-lock.json | 119 +++- spamdetection/package.json | 3 + 26 files changed, 1226 insertions(+), 552 deletions(-) create mode 100644 frontend/public/favicon.ico create mode 100644 frontend/src/pages/SpamDetector.jsx create mode 100644 spamdetection/assets/images/favicon.ico delete mode 100644 spamdetection/assets/images/favicon.png delete mode 100644 spamdetection/assets/images/partial-react-logo.png delete mode 100644 spamdetection/assets/images/react-logo.png delete mode 100644 spamdetection/assets/images/react-logo@2x.png delete mode 100644 spamdetection/assets/images/react-logo@3x.png diff --git a/README.md b/README.md index f32da32..b561643 100644 --- a/README.md +++ b/README.md @@ -1,19 +1,7 @@ -# 🚀 Spam Detection System +🚀 Spam Detection System +A full-stack application that detects Spam / Smishing / Offensive content using Machine Learning. The system includes a Python-based ML engine, a Node.js backend, a React web interface, and a cross-platform React Native mobile application. -A full-stack application that detects **Spam / Smishing / Offensive content** using Machine Learning. -The system includes: - -* 🧠 ML Model (Python) -* ⚡ Python API (Flask / FastAPI) -* 🌐 Node.js Backend -* 💻 React Web App -* 📱 React Native Mobile App (Android & iOS) - ---- - -## 📌 Project Architecture - -``` +📌 Project Architecture User Input (Web / Mobile) ↓ React / React Native UI @@ -23,79 +11,31 @@ Node.js Backend (API Gateway) Python ML API (Model Inference) ↓ Prediction (Spam / Ham / Offensive) -``` - ---- - -## 🧠 Machine Learning Model - -### 📊 Dataset +⚙️ Environment Configuration +To run this project, you need to configure your environment variables for different platforms. Create a .env file in the root directory: -* CSV format: +Plaintext +# For Mobile (Expo) +EXPO_PUBLIC_ANDROIDAPI=http://:5000/predict +EXPO_PUBLIC_IOSAPI=http://:5000/predict - * `text` / `message` - * `label` (spam / ham / offensive) +# For Web +VITE_API_URI=http://localhost:5000/predict +Note: Replace with your machine's local IPv4 address (e.g., 192.168.100.50). -### ⚙️ Algorithms Used +🧠 Machine Learning Model +📊 Dataset +CSV format: text / label (spam / ham / offensive). -* Logistic Regression -* Naive Bayes -* Linear SVM (Best Accuracy) - -### 📈 Performance - -* Accuracy: ~97–98% -* Metrics: - - * Precision - * Recall - * F1-score - * Confusion Matrix - ---- - -### 🏋️ Model Training (Python) - -```python -from sklearn.feature_extraction.text import TfidfVectorizer -from sklearn.svm import LinearSVC -import pickle +⚙️ Algorithms Used +Logistic Regression, Naive Bayes, Linear SVM (Best Accuracy). -# Load dataset -X = df['text'] -y = df['label'] - -# Vectorization -vectorizer = TfidfVectorizer() -X_vec = vectorizer.fit_transform(X) - -# Model -model = LinearSVC() -model.fit(X_vec, y) - -# Save -pickle.dump(model, open("model.pkl", "wb")) -pickle.dump(vectorizer, open("vectorizer.pkl", "wb")) -``` - ---- - -## 🐍 Python API (Flask) - -### 📦 Install Dependencies - -```bash -pip install flask scikit-learn -``` - -### 🚀 API Code - -```python +🐍 Python API (Flask) +Python from flask import Flask, request, jsonify import pickle app = Flask(__name__) - model = pickle.load(open("model.pkl", "rb")) vectorizer = pickle.load(open("vectorizer.pkl", "rb")) @@ -104,166 +44,60 @@ def predict(): data = request.json['text'] vec = vectorizer.transform([data]) prediction = model.predict(vec)[0] - return jsonify({"result": prediction}) + return jsonify({"prediction": prediction}) if __name__ == "__main__": app.run(port=5000) -``` - ---- - -## 🌐 Node.js Backend - -### 📦 Install - -```bash -npm install express axios cors -``` - -### ⚙️ Server Code - -```javascript -const express = require("express"); -const axios = require("axios"); -const cors = require("cors"); - -const app = express(); -app.use(cors()); -app.use(express.json()); +🌐 Node.js Backend +The Node.js server acts as an API gateway. Ensure your server is configured to listen on 0.0.0.0 for network accessibility. +JavaScript +// Ensure app.listen(PORT, '0.0.0.0', ...) app.post("/predict", async (req, res) => { try { - const response = await axios.post("http://localhost:5000/predict", { - text: req.body.text, - }); + const response = await axios.post("http://localhost:5000/predict", { text: req.body.text }); res.json(response.data); - } catch (err) { - res.status(500).send("Error"); - } + } catch (err) { res.status(500).send("Error"); } }); +📱 React Native App (Mobile) +We use a robust getApiUrl utility to handle dynamic environments across Web and Mobile platforms: -app.listen(3000, () => console.log("Node server running")); -``` - ---- - -## 💻 React Frontend - -### 📦 Setup - -```bash -npm create vite@latest -npm install axios -``` - -### ⚛️ Example Component - -```javascript -import { useState } from "react"; -import axios from "axios"; - -function App() { - const [text, setText] = useState(""); - const [result, setResult] = useState(""); - - const handlePredict = async () => { - const res = await axios.post("http://localhost:3000/predict", { text }); - setResult(res.data.result); - }; - - return ( -
-

Spam Detection

- setText(e.target.value)} /> - -

{result}

-
- ); -} - -export default App; -``` +JavaScript +const getApiUrl = () => { + const defaultUrl = "http://192.168.100.50:5000/predict"; + const androidUrl = process.env.EXPO_PUBLIC_ANDROIDAPI || defaultUrl; + const iosUrl = process.env.EXPO_PUBLIC_IOSAPI || defaultUrl; + + if (Platform.OS === 'web') return (process.env as any).VITE_API_URI; + return Platform.OS === 'android' ? androidUrl : iosUrl; +}; +🔐 Features +✅ Cross-Platform: Seamlessly works on Web, Android, and iOS. ---- +✅ Dynamic Connectivity: Automatic API URL resolution. -## 📱 React Native App (Android & iOS) +✅ Real-time Detection: Immediate classification of input text. -### 📦 Setup +✅ Diagnostic Logging: Tracks history and classification results. -```bash -npx create-expo-app -npm install axios -``` +🛠 Tech Stack +ML: Python, Scikit-learn, Flask -### 📲 Example Code +Backend: Node.js, Express, Axios -```javascript -import { useState } from "react"; -import { View, Text, TextInput, Button } from "react-native"; -import axios from "axios"; +Frontend: React, React Native (Expo) -export default function App() { - const [text, setText] = useState(""); - const [result, setResult] = useState(""); +📌 Future Improvements +Use Deep Learning (LSTM / BERT). - const predict = async () => { - const res = await axios.post("http://YOUR_IP:3000/predict", { text }); - setResult(res.data.result); - }; +Multilingual Support. - return ( - - Spam Detection - -