V1

README.md

@@ -1,11 +0,0 @@
----
-title: Faceshapedetector
-emoji: 📈
-colorFrom: gray
-colorTo: yellow
-sdk: docker
-pinned: false
-short_description: face shape detector model
----
-
-Check out the configuration reference at https://huggingface.co/docs/hub/spaces-config-reference

app.py

@@ -0,0 +1,106 @@
+import os
+import requests
+from flask import Flask, render_template, request, jsonify
+from werkzeug.utils import secure_filename
+import torch
+import torchvision.transforms as T
+from PIL import Image
+import torch.nn.functional as F  # For softmax
+
+# Initialize Flask app
+app = Flask(__name__)
+
+# Define device
+device = "cuda" if torch.cuda.is_available() else "cpu"
+
+# Model and transformation setup
+def download_model_if_not_exists(url, model_path):
+    """Download model from Hugging Face repository if it doesn't exist locally."""
+    if not os.path.exists(model_path):
+        print("Model not found locally, downloading from Hugging Face...")
+        response = requests.get(url)
+        if response.status_code == 200:
+            with open(model_path, 'wb') as f:
+                f.write(response.content)
+            print(f"Model downloaded and saved to {model_path}")
+        else:
+            print("Failed to download model. Please check the URL.")
+    else:
+        print("Model already exists locally.")
+
+def load_model(model_path):
+    """Load model from the given path."""
+    model = torch.load(model_path, map_location=torch.device('cpu'))
+    model.eval()  # Set model to evaluation mode
+    model.to(device)
+    return model
+
+def preprocess_image(image_path):
+    transform = T.Compose([
+        T.Resize((224, 224)),  # Resize image to 224x224
+        T.ToTensor(),          # Convert image to Tensor
+        T.Normalize(mean=[0.485, 0.456, 0.406], std=[0.229, 0.224, 0.225])  # Normalize
+    ])
+    image = Image.open(image_path).convert("RGB")  # Open and convert image to RGB
+    return transform(image).unsqueeze(0)  # Add batch dimension
+
+def get_probabilities(logits):
+    """Apply softmax to get probabilities."""
+    probabilities = F.softmax(logits, dim=1)
+    percentages = probabilities * 100
+    return percentages
+
+def predict(image_path, model, class_names):
+    """Make prediction using the trained model."""
+    image_tensor = preprocess_image(image_path).to(device)
+    model.eval()
+    with torch.inference_mode():  # Disable gradient calculations
+        outputs = model(image_tensor)
+        percentages = get_probabilities(outputs)
+        _, predicted_class = torch.max(outputs, 1)  # Get the index of the highest logit
+    predicted_label = class_names[predicted_class.item()]
+    return predicted_label, percentages
+
+# Define class names
+class_names = ['Heart', 'Oblong', 'Oval', 'Round', 'Square']
+
+# Path to the model file
+model_path = r"model_85_nn_.pth"  # Update this with the correct model path
+model_url = "https://huggingface.co/fahd9999/model_85_nn_/resolve/main/model_85_nn_.pth?download=true"
+
+# Download the model only if it doesn't exist locally
+download_model_if_not_exists(model_url, model_path)
+
+# Load the model
+model = load_model(model_path)
+
+# API to render the index page
+@app.route('/')
+def index():
+    return render_template('index.html')
+
+# API to handle image upload and prediction
+@app.route('/predict', methods=['POST'])
+def predict_face_shape():
+    if 'file' not in request.files:
+        return jsonify({'error': 'No file part'})
+
+    file = request.files['file']
+    if file.filename == '':
+        return jsonify({'error': 'No selected file'})
+
+    if file:
+        os.makedirs('uploads',exist_ok=True)
+        filename = secure_filename(file.filename)
+        file_path = os.path.join('uploads', filename)
+        file.save(file_path)
+
+        predicted_label, percentages = predict(file_path, model, class_names)
+
+        result = {class_names[i]: percentages[0, i].item() for i in range(len(class_names))}
+        sorted_result = dict(sorted(result.items(), key=lambda item: item[1], reverse=True))
+        print(sorted_result)
+        return jsonify(sorted_result)
+
+if __name__ == '__main__':
+    app.run(debug=False)

requirements.txt

@@ -0,0 +1,5 @@
+Flask==3.0.3
+Werkzeug==3.0.2
+torch==2.5.1
+torchvision==0.20.1
+Pillow==10.3.0

templates/index.html

@@ -0,0 +1,114 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Face Shape Detection</title>
+    <script src="https://cdn.jsdelivr.net/npm/axios/dist/axios.min.js"></script>
+    <script src="https://cdn.tailwindcss.com"></script>
+</head>
+<body class="bg-gray-100">
+
+    <!-- Navbar -->
+    <nav class="bg-blue-600 text-white p-4 flex justify-between items-center">
+        <div class="text-lg font-bold">Face Shape Detect</div>
+        <div class="space-x-4">
+            <a href="#" class="hover:text-gray-300">Detect</a>
+            <a href="#" class="hover:text-gray-300">Blog</a>
+            <a href="#" class="hover:text-gray-300">About Us</a>
+        </div>
+    </nav>
+
+    <!-- Hero Section -->
+    <section class="hero bg-blue-500 text-white text-center py-16">
+        <h1 class="text-4xl font-semibold">Detect Your Face Shape with AI</h1>
+        <p class="mt-4 text-xl">Upload an image and let AI detect your face shape.</p>
+    </section>
+
+    <!-- Upload Section -->
+    <section class="upload-section text-center py-16">
+        <h2 class="text-3xl font-semibold">Upload Your Image</h2>
+        <input type="file" id="file-upload" class="mt-4 p-2 border rounded" />
+        <button onclick="uploadImage()" class="mt-4 bg-blue-600 text-white p-2 rounded">Upload and Detect</button>
+    </section>
+
+    <!-- Result Section -->
+    <section id="result-section" class="hidden py-16">
+        <h2 class="text-3xl font-semibold text-center">Detection Results</h2>
+        <!-- Display top result as heading -->
+        <h3 id="top-shape" class="text-2xl font-semibold text-center mt-4"></h3>
+        <p id="top-percentage" class="text-xl text-center mt-2"></p>
+        <div id="result-container" class="mt-8 max-w-xl mx-auto"></div>
+    </section>
+
+    <!-- Workflow Cards -->
+    <section class="workflow py-16 bg-gray-200">
+        <div class="text-center">
+            <h2 class="text-3xl font-semibold">How It Works</h2>
+        </div>
+        <div class="flex justify-around mt-8">
+            <div class="card p-6 bg-white shadow-lg rounded-lg max-w-xs">
+                <h3 class="text-xl font-semibold">Upload Image</h3>
+                <p>Choose an image from your device to upload.</p>
+            </div>
+            <div class="card p-6 bg-white shadow-lg rounded-lg max-w-xs">
+                <h3 class="text-xl font-semibold">AI Process</h3>
+                <p>Our AI, trained on 100 million faces, processes your image.</p>
+            </div>
+            <div class="card p-6 bg-white shadow-lg rounded-lg max-w-xs">
+                <h3 class="text-xl font-semibold">Get Your Face Shape</h3>
+                <p>Our AI returns the most accurate prediction with up to 99.9% accuracy.</p>
+            </div>
+        </div>
+    </section>
+
+    <!-- Footer -->
+    <footer class="bg-blue-600 text-white text-center py-4">
+        <p>&copy; 2024 Face Shape Detect. All rights reserved.</p>
+    </footer>
+
+    <script>
+        function uploadImage() {
+            const fileInput = document.getElementById('file-upload');
+            const formData = new FormData();
+            formData.append('file', fileInput.files[0]);
+
+            axios.post('/predict', formData)
+                .then(response => {
+                    const resultContainer = document.getElementById('result-container');
+                    resultContainer.innerHTML = '';
+                    const result = response.data;
+
+                    // Sort the results in descending order
+                    const sortedResult = Object.entries(result).sort((a, b) => b[1] - a[1]);
+
+                    // Get the highest percentage result
+                    const [topShape, topPercentage] = sortedResult[0];
+                    document.getElementById('top-shape').innerText = `Your face shape is: ${topShape}`;
+                    document.getElementById('top-percentage').innerText = `${topPercentage.toFixed(2)}%`;
+
+                    // Loop through the sorted result and create progress bars
+                    sortedResult.forEach(([key, value]) => {
+                        let progressBar = `
+                            <div class="mb-4">
+                                <span class="text-lg">${key}: ${value.toFixed(2)}%</span>
+                                <div class="w-full bg-gray-300 rounded-full h-2">
+                                    <div class="bg-green-500 h-2" style="width: ${value}%"></div>
+                                </div>
+                            </div>
+                        `;
+                        resultContainer.innerHTML += progressBar;
+                    });
+
+                    // Show result section
+                    document.getElementById('result-section').classList.remove('hidden');
+                })
+                .catch(error => {
+                    console.error('Error uploading image:', error);
+                });
+        }
+    </script>
+    
+    
+</body>
+</html>