Prompt Details
Model
Chat - GPT-3.5 (gpt-3.5-turbo)
Token size
368 ($0.00184 / call)
Example input
[upload your own dataset]: Pima Indian Dataset
[Your Project name]: Diabetes prediction
Example output
Creating a full-fledged diabetes prediction web application using an SVM model involves the following key components:
Backend: Using Python to implement an SVM classifier for diabetes prediction.
Frontend: Designing a user-friendly web interface with logos, forms, and graphs.
Interactive GUI: Using a framework like Flask for backend handling and HTML/CSS/JavaScript for frontend.
Graph Integration: Displaying performance metrics (e.g., accuracy, ROC curve, etc.) using libraries like matplotlib or Plotly.
Breakdown:
SVM for Diabetes Prediction: Using a dataset like the PIMA Indian Diabetes dataset.
Backend: Implementing the SVM model, data processing, and prediction logic using Flask.
Frontend: HTML/CSS for the webpage layout and JavaScript for interactivity.
Visualization: Plotting graphs for data visualization and model performance.
Let’s start with the Python backend using Flask, HTML for frontend, and SVM for prediction.
Project Structure
scss
Copy code
diabetes_prediction/
│
├── app.py (Flask app backend)
├── templates/
│ └── index.html (Frontend HTML)
├── static/
│ ├── css/
│ │ └── style.css (Styling)
│ ├── img/
│ │ └── logo.png (Logo image)
│ └── js/
│ └── script.js (JavaScript for frontend)
└── svm_model.py (SVM Model)
1. SVM Model (svm_model.py):
Here, we train the SVM model using the PIMA dataset.
python
Copy code
import pandas as pd
from sklearn.model_selection import train_test_split
from sklearn.preprocessing import StandardScaler
from sklearn.svm import SVC
from sklearn.metrics import accuracy_score
import pickle
# Load dataset
def load_data():
data = pd.read_csv('diabetes.csv')
X = data.drop('Outcome', axis=1)
y = data['Outcome']
return X, y
# Train SVM model
def train_svm():
X, y = load_data()
X_train, X_test, y_train, y_test = train_test_split(X, y, test_size=0.2, random_state=42)
# Standardize features
scaler = StandardScaler()
X_train = scaler.fit_transform(X_train)
X_test = scaler.transform(X_test)
# SVM Classifier
classifier = SVC(kernel='linear', probability=True)
classifier.fit(X_train, y_train)
# Save model
with open('svm_model.pkl', 'wb') as f:
pickle.dump((classifier, scaler), f)
# Evaluate model
y_pred = classifier.predict(X_test)
accuracy = accuracy_score(y_test, y_pred)
return accuracy
if __name__ == '__main__':
accuracy = train_svm()
print(f'Model trained with accuracy: {accuracy}')
2. Flask Backend (app.py):
This serves the frontend and performs predictions.
python
Copy code
from flask import Flask, render_template, request, jsonify
import pickle
import numpy as np
app = Flask(__name__)
# Load the trained SVM model and scaler
with open('svm_model.pkl', 'rb') as f:
model, scaler = pickle.load(f)
# Home route (renders the HTML page)
@app.route('/')
def home():
return render_template('index.html')
# Prediction API
@app.route('/predict', methods=['POST'])
def predict():
if request.method == 'POST':
# Collect form data
form_data = [float(request.form[key]) for key in request.form]
input_data = np.array(form_data).reshape(1, -1)
input_data = scaler.transform(input_data)
# Predict
prediction = model.predict(input_data)[0]
probability = model.predict_proba(input_data)[0][1]
# Return result
result = 'Diabetic' if prediction == 1 else 'Non-Diabetic'
return jsonify({'result': result, 'probability': round(probability, 2)})
if __name__ == '__main__':
app.run(debug=True)
3. Frontend HTML (templates/index.html):
The user interface with form inputs for features like Glucose, BloodPressure, etc., and a button for prediction.
html
Copy code
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Diabetes Prediction</title>
<link rel="stylesheet" href="{{ url_for('static', filename='css/style.css') }}">
<script src="{{ url_for('static', filename='js/script.js') }}"></script>
</head>
<body>
<header>
<img src="{{ url_for('static', filename='img/logo.png') }}" alt="Logo" class="logo">
<h1>Diabetes Prediction System</h1>
</header>
<div class="form-container">
<form id="prediction-form">
<label>Glucose:</label><input type="number" name="Glucose" required>
<label>Blood Pressure:</label><input type="number" name="BloodPressure" required>
<label>Skin Thickness:</label><input type="number" name="SkinThickness" required>
<label>Insulin:</label><input type="number" name="Insulin" required>
<label>BMI:</label><input type="number" name="BMI" required>
<label>Diabetes Pedigree Function:</label><input type="number" name="DiabetesPedigreeFunction" required>
<label>Age:</label><input type="number" name="Age" required>
<button type="submit">Predict</button>
</form>
<div id="result"></div>
</div>
<footer>
<p>© 2024 Diabetes Prediction System</p>
</footer>
</body>
</html>
4. CSS Styling (static/css/style.css):
Basic styling for layout and design.
css
Copy code
body {
font-family: Arial, sans-serif;
background-color: #f4f4f4;
margin: 0;
padding: 0;
text-align: center;
}
header {
background-color: #2c3e50;
color: white;
padding: 10px 0;
}
.logo {
width: 80px;
height: auto;
}
.form-container {
margin: 20px auto;
padding: 20px;
max-width: 400px;
background-color: white;
border-radius: 8px;
box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
}
form input, form button {
display: block;
width: 100%;
margin: 10px 0;
padding: 8px;
font-size: 16px;
}
button {
background-color: #27ae60;
color: white;
border: none;
border-radius: 4px;
cursor: pointer;
}
5. JavaScript for Interactivity (static/js/script.js):
Handles form submission and interacts with the backend for prediction.
javascript
Copy code
document.getElementById('prediction-form').addEventListener('submit', function (e) {
e.preventDefault();
const formData = new FormData(this);
const formObject = {};
formData.forEach(function (value, key) {
formObject[key] = value;
});
fetch('/predict', {
method: 'POST',
headers: {
'Content-Type': 'application/json'
},
body: JSON.stringify(formObject)
})
.then(response => response.json())
.then(data => {
document.getElementById('result').innerHTML = `Prediction: ${data.result} (Probability: ${data.probability})`;
})
.catch(error => {
console.error('Error:', error);
});
});
6. Graph Integration (Optional):
For visualizing the model performance, use matplotlib or Plotly to generate graphs that can be embedded in the webpage.
This should give you a complete solution, from the SVM model to an interactive GUI with predictions and backend integration. You can further enhance this by adding logos, charts, and other customizations for better UX.
Or get it with Select10 Select prompts/mo — under $2 each
Learn more
Instant access
Commercial use
Money‑backBy purchasing this prompt, you agree to our terms of service
8
Views
GPT-3.5-TURBO
This prompt allows you to create a generic Machine Learning Web Application using a Flask backend and an interactive frontend. The project can be applied to a wide range of use cases by training a model on any dataset, whether it’s a classification or regression problem. The frontend enables users to input feature data through forms, and the backend returns predictions dynamically without page reloads. It also includes the integration of performance metrics like accuracy or ROC curves
...more
Added over 1 month ago
