Add traffic sign application file

Dockerfile

@@ -0,0 +1,33 @@
+FROM python:3.9-slim
+
+WORKDIR /app
+
+# Install system dependencies for OpenCV
+RUN apt-get update && apt-get install -y \
+    libglib2.0-0 \
+    libsm6 \
+    libxext6 \
+    libxrender-dev \
+    libgomp1 \
+    libgl1 \
+    && rm -rf /var/lib/apt/lists/*
+
+# Copy requirements and install Python dependencies
+COPY requirements.txt .
+RUN pip install --no-cache-dir -r requirements.txt
+
+# Copy application files
+COPY app.py .
+COPY tabela_tespit.h5 .
+COPY labels.csv .
+COPY templates/ templates/
+COPY image.jpg .
+
+# Create uploads directory
+RUN mkdir -p uploads && chmod 777 uploads
+
+# Expose port
+EXPOSE 7860
+
+# Run the application
+CMD ["python", "app.py"]

app.py

@@ -0,0 +1,207 @@
+import os
+import cv2
+import numpy as np
+import pandas as pd
+import base64
+from flask import Flask, render_template, request, jsonify
+from werkzeug.utils import secure_filename
+from io import BytesIO
+from PIL import Image
+import tensorflow as tf
+from tensorflow.keras.models import load_model
+
+# Suppress warnings
+os.environ['TF_CPP_MIN_LOG_LEVEL'] = '3'
+os.environ['MPLCONFIGDIR'] = '/tmp/matplotlib'
+
+app = Flask(__name__)
+app.config['MAX_CONTENT_LENGTH'] = 16 * 1024 * 1024  # 16MB max
+app.config['UPLOAD_FOLDER'] = 'uploads'
+app.config['ALLOWED_EXTENSIONS'] = {'png', 'jpg', 'jpeg'}
+
+os.makedirs(app.config['UPLOAD_FOLDER'], mode=0o777, exist_ok=True)
+
+# Load model
+print("Loading traffic sign classification model...")
+model = load_model('tabela_tespit.h5', compile=False)
+model.compile(optimizer='adam', loss='categorical_crossentropy', metrics=['accuracy'])
+print("✓ Model loaded successfully!")
+
+# Load labels
+labels_df = pd.read_csv('labels.csv')
+print(f"✓ Loaded {len(labels_df)} traffic sign classes")
+
+def allowed_file(filename):
+    return '.' in filename and filename.rsplit('.', 1)[1].lower() in app.config['ALLOWED_EXTENSIONS']
+
+def preprocess_image(image_path):
+    """Preprocess image for CNN model (32x32 grayscale)"""
+    try:
+        # Read image as grayscale
+        img = cv2.imread(image_path, cv2.IMREAD_GRAYSCALE)
+        
+        if img is None:
+            raise ValueError("Could not read image")
+        
+        print(f"Original image shape: {img.shape}")
+        
+        # Resize to 32x32
+        img_resized = cv2.resize(img, (32, 32))
+        
+        # Apply histogram equalization
+        img_equalized = cv2.equalizeHist(img_resized)
+        
+        # Normalize to [0, 1]
+        img_normalized = img_equalized / 255.0
+        
+        # Add dimensions: (1, 32, 32, 1)
+        img_input = img_normalized.reshape(1, 32, 32, 1)
+        
+        print(f"Model input shape: {img_input.shape}")
+        
+        # For display - convert to RGB
+        img_display = cv2.cvtColor(img_resized, cv2.COLOR_GRAY2RGB)
+        
+        return img_input, img_display
+        
+    except Exception as e:
+        raise ValueError(f"Failed to preprocess image: {str(e)}")
+
+def img_to_base64(img):
+    """Convert numpy image to base64 string"""
+    img_pil = Image.fromarray(img.astype('uint8'))
+    buf = BytesIO()
+    img_pil.save(buf, format='PNG')
+    buf.seek(0)
+    img_base64 = base64.b64encode(buf.getvalue()).decode('utf-8')
+    return f'data:image/png;base64,{img_base64}'
+
+@app.route('/')
+def index():
+    return render_template('index.html')
+
+@app.route('/predict', methods=['POST'])
+def predict():
+    try:
+        if 'file' not in request.files:
+            return jsonify({'error': 'No file uploaded'}), 400
+        
+        file = request.files['file']
+        
+        if file.filename == '':
+            return jsonify({'error': 'No file selected'}), 400
+        
+        if not allowed_file(file.filename):
+            return jsonify({'error': 'Invalid file type. Please upload PNG, JPG, or JPEG'}), 400
+        
+        # Save file
+        filename = secure_filename(file.filename)
+        filepath = os.path.join(app.config['UPLOAD_FOLDER'], filename)
+        file.save(filepath)
+        
+        print(f"Processing: {filename}")
+        
+        # Preprocess
+        img_input, img_display = preprocess_image(filepath)
+        
+        # Predict
+        print("Making prediction...")
+        predictions = model.predict(img_input, verbose=0)
+        
+        # Get top prediction
+        class_id = np.argmax(predictions)
+        confidence = np.max(predictions)
+        class_name = labels_df.loc[class_id, 'Name']
+        
+        # Get top 5 predictions
+        top5_indices = np.argsort(predictions[0])[-5:][::-1]
+        top5_predictions = []
+        for idx in top5_indices:
+            top5_predictions.append({
+                'class_id': int(idx),
+                'class_name': labels_df.loc[idx, 'Name'],
+                'confidence': float(predictions[0][idx])
+            })
+        
+        # Convert image to base64
+        img_base64 = img_to_base64(img_display)
+        
+        # Clean up
+        os.remove(filepath)
+        
+        result = {
+            'predicted_class': class_name,
+            'class_id': int(class_id),
+            'confidence': float(confidence),
+            'top5_predictions': top5_predictions,
+            'image': img_base64
+        }
+        
+        print(f"✓ Prediction: {class_name} (Confidence: {confidence:.2%})")
+        
+        return jsonify(result)
+        
+    except Exception as e:
+        print(f"Error during prediction: {e}")
+        import traceback
+        traceback.print_exc()
+        if os.path.exists(filepath):
+            os.remove(filepath)
+        return jsonify({'error': str(e)}), 500
+
+@app.route('/test-example', methods=['POST'])
+def test_example():
+    """Test with example image"""
+    try:
+        example_path = 'image.jpg'
+        
+        if not os.path.exists(example_path):
+            return jsonify({'error': 'Example image not found'}), 404
+        
+        print(f"Testing with example: {example_path}")
+        
+        # Preprocess
+        img_input, img_display = preprocess_image(example_path)
+        
+        # Predict
+        print("Making prediction on example...")
+        predictions = model.predict(img_input, verbose=0)
+        
+        # Get top prediction
+        class_id = np.argmax(predictions)
+        confidence = np.max(predictions)
+        class_name = labels_df.loc[class_id, 'Name']
+        
+        # Get top 5 predictions
+        top5_indices = np.argsort(predictions[0])[-5:][::-1]
+        top5_predictions = []
+        for idx in top5_indices:
+            top5_predictions.append({
+                'class_id': int(idx),
+                'class_name': labels_df.loc[idx, 'Name'],
+                'confidence': float(predictions[0][idx])
+            })
+        
+        # Convert image to base64
+        img_base64 = img_to_base64(img_display)
+        
+        result = {
+            'predicted_class': class_name,
+            'class_id': int(class_id),
+            'confidence': float(confidence),
+            'top5_predictions': top5_predictions,
+            'image': img_base64
+        }
+        
+        print(f"✓ Example prediction: {class_name} (Confidence: {confidence:.2%})")
+        
+        return jsonify(result)
+        
+    except Exception as e:
+        print(f"Error during example prediction: {e}")
+        import traceback
+        traceback.print_exc()
+        return jsonify({'error': str(e)}), 500
+
+if __name__ == '__main__':
+    app.run(host='0.0.0.0', port=7860, debug=False)

labels.csv

@@ -0,0 +1,44 @@
+ClassId,Name
+0,Speed limit (20km/h)
+1,Speed limit (30km/h)
+2,Speed limit (50km/h)
+3,Speed limit (60km/h)
+4,Speed limit (70km/h)
+5,Speed limit (80km/h)
+6,End of speed limit (80km/h)
+7,Speed limit (100km/h)
+8,Speed limit (120km/h)
+9,No passing
+10,No passing veh over 3.5 tons
+11,Right-of-way at intersection
+12,Priority road
+13,Yield
+14,Stop
+15,No vehicles
+16,Veh > 3.5 tons prohibited
+17,No entry
+18,General caution
+19,Dangerous curve left
+20,Dangerous curve right
+21,Double curve
+22,Bumpy road
+23,Slippery road
+24,Road narrows on the right
+25,Road work
+26,Traffic signals
+27,Pedestrians
+28,Children crossing
+29,Bicycles crossing
+30,Beware of ice/snow
+31,Wild animals crossing
+32,End speed + passing limits
+33,Turn right ahead
+34,Turn left ahead
+35,Ahead only
+36,Go straight or right
+37,Go straight or left
+38,Keep right
+39,Keep left
+40,Roundabout mandatory
+41,End of no passing
+42,End no passing veh > 3.5 tons

requirements.txt

@@ -0,0 +1,7 @@
+flask==2.3.0
+tensorflow==2.13.0
+opencv-python-headless==4.8.0.74
+numpy==1.24.3
+pandas==2.0.3
+pillow==10.0.0
+werkzeug==2.3.0

tabela_tespit.h5

@@ -0,0 +1,3 @@
+version https://git-lfs.github.com/spec/v1
+oid sha256:20b34afbb88b23645c1bfe9060dbb48a04fe8729a16773663cd09a291f249704
+size 3212592

templates/index.html

@@ -0,0 +1,496 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Traffic Sign Classification</title>
+    <style>
+        * {
+            margin: 0;
+            padding: 0;
+            box-sizing: border-box;
+        }
+
+        body {
+            font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
+            background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
+            min-height: 100vh;
+            padding: 20px;
+        }
+
+        .container {
+            max-width: 1200px;
+            margin: 0 auto;
+            background: white;
+            border-radius: 20px;
+            box-shadow: 0 20px 60px rgba(0,0,0,0.3);
+            overflow: hidden;
+        }
+
+        .header {
+            background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
+            color: white;
+            padding: 40px;
+            text-align: center;
+        }
+
+        .header h1 {
+            font-size: 2.5em;
+            margin-bottom: 10px;
+        }
+
+        .header p {
+            font-size: 1.2em;
+            opacity: 0.9;
+            margin-bottom: 20px;
+        }
+
+        .github-link {
+            display: inline-flex;
+            align-items: center;
+            gap: 8px;
+            color: white;
+            text-decoration: none;
+            font-weight: 600;
+            font-size: 1.1em;
+            padding: 12px 24px;
+            background: rgba(255, 255, 255, 0.2);
+            border: 2px solid white;
+            border-radius: 10px;
+            transition: all 0.3s;
+        }
+
+        .github-link:hover {
+            background: white;
+            color: #667eea;
+            transform: translateY(-2px);
+            box-shadow: 0 5px 15px rgba(0,0,0,0.2);
+        }
+
+        .content {
+            padding: 40px;
+        }
+
+        .info-section {
+            background: #f8f9fa;
+            border-radius: 15px;
+            padding: 30px;
+            margin-bottom: 30px;
+            border-left: 5px solid #667eea;
+        }
+
+        .info-section h2 {
+            color: #667eea;
+            margin-bottom: 15px;
+            font-size: 1.8em;
+        }
+
+        .info-section p {
+            color: #495057;
+            line-height: 1.8;
+            font-size: 1.05em;
+        }
+
+        .upload-section {
+            background: #f8f9fa;
+            border-radius: 15px;
+            padding: 40px;
+            text-align: center;
+            margin-bottom: 30px;
+            border: 3px dashed #667eea;
+            transition: all 0.3s;
+        }
+
+        .upload-section:hover {
+            border-color: #764ba2;
+            background: #f0f2ff;
+        }
+
+        .upload-icon {
+            font-size: 4em;
+            color: #667eea;
+            margin-bottom: 20px;
+        }
+
+        .file-input {
+            display: none;
+        }
+
+        .upload-button {
+            background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
+            color: white;
+            padding: 15px 40px;
+            border: none;
+            border-radius: 30px;
+            font-size: 1.2em;
+            font-weight: bold;
+            cursor: pointer;
+            transition: transform 0.2s;
+            margin: 10px;
+        }
+
+        .upload-button:hover {
+            transform: scale(1.05);
+        }
+
+        .test-button {
+            background: #28a745;
+            color: white;
+            padding: 15px 40px;
+            border: none;
+            border-radius: 30px;
+            font-size: 1.2em;
+            font-weight: bold;
+            cursor: pointer;
+            transition: transform 0.2s;
+            margin: 10px;
+        }
+
+        .test-button:hover {
+            background: #218838;
+            transform: scale(1.05);
+        }
+
+        .results-section {
+            display: none;
+        }
+
+        .result-card {
+            background: white;
+            border-radius: 15px;
+            padding: 30px;
+            box-shadow: 0 5px 20px rgba(0,0,0,0.1);
+            margin-bottom: 30px;
+        }
+
+        .result-header {
+            text-align: center;
+            margin-bottom: 30px;
+        }
+
+        .result-image {
+            max-width: 200px;
+            border-radius: 10px;
+            box-shadow: 0 5px 15px rgba(0,0,0,0.2);
+            margin: 0 auto 20px;
+            display: block;
+        }
+
+        .prediction-main {
+            background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
+            color: white;
+            padding: 30px;
+            border-radius: 15px;
+            text-align: center;
+            margin-bottom: 30px;
+        }
+
+        .prediction-main h2 {
+            font-size: 2em;
+            margin-bottom: 10px;
+        }
+
+        .confidence {
+            font-size: 3em;
+            font-weight: bold;
+            margin: 20px 0;
+        }
+
+        .confidence-bar {
+            background: rgba(255,255,255,0.3);
+            height: 30px;
+            border-radius: 15px;
+            overflow: hidden;
+            margin-top: 20px;
+        }
+
+        .confidence-fill {
+            background: white;
+            height: 100%;
+            transition: width 0.5s;
+        }
+
+        .top5-predictions {
+            margin-top: 30px;
+        }
+
+        .top5-predictions h3 {
+            color: #667eea;
+            margin-bottom: 20px;
+            font-size: 1.5em;
+        }
+
+        .prediction-item {
+            display: flex;
+            justify-content: space-between;
+            align-items: center;
+            padding: 15px;
+            background: #f8f9fa;
+            border-radius: 10px;
+            margin-bottom: 10px;
+            transition: transform 0.2s;
+        }
+
+        .prediction-item:hover {
+            transform: translateX(5px);
+            background: #e9ecef;
+        }
+
+        .prediction-name {
+            font-weight: 600;
+            color: #495057;
+        }
+
+        .prediction-confidence {
+            font-size: 1.2em;
+            font-weight: bold;
+            color: #667eea;
+        }
+
+        .loading {
+            display: none;
+            text-align: center;
+            padding: 40px;
+        }
+
+        .spinner {
+            border: 5px solid #f3f3f3;
+            border-top: 5px solid #667eea;
+            border-radius: 50%;
+            width: 60px;
+            height: 60px;
+            animation: spin 1s linear infinite;
+            margin: 0 auto 20px;
+        }
+
+        @keyframes spin {
+            0% { transform: rotate(0deg); }
+            100% { transform: rotate(360deg); }
+        }
+
+        .error {
+            display: none;
+            background: #f8d7da;
+            color: #721c24;
+            padding: 20px;
+            border-radius: 10px;
+            border-left: 5px solid #dc3545;
+            margin-bottom: 20px;
+        }
+
+        .reset-button {
+            background: #6c757d;
+            color: white;
+            padding: 12px 30px;
+            border: none;
+            border-radius: 25px;
+            font-size: 1.1em;
+            cursor: pointer;
+            margin-top: 20px;
+            transition: transform 0.2s;
+        }
+
+        .reset-button:hover {
+            background: #5a6268;
+            transform: scale(1.05);
+        }
+    </style>
+</head>
+<body>
+    <div class="container">
+        <div class="header">
+            <h1>🚦 Traffic Sign Classification</h1>
+            <p>AI-Powered Recognition of 43 Traffic Sign Categories</p>
+            <a href="https://github.com/koesan/Traffic_Sign_Classification" target="_blank" class="github-link">
+                <svg width="24" height="24" viewBox="0 0 24 24" fill="currentColor">
+                    <path d="M12 0c-6.626 0-12 5.373-12 12 0 5.302 3.438 9.8 8.207 11.387.599.111.793-.261.793-.577v-2.234c-3.338.726-4.033-1.416-4.033-1.416-.546-1.387-1.333-1.756-1.333-1.756-1.089-.745.083-.729.083-.729 1.205.084 1.839 1.237 1.839 1.237 1.07 1.834 2.807 1.304 3.492.997.107-.775.418-1.305.762-1.604-2.665-.305-5.467-1.334-5.467-5.931 0-1.311.469-2.381 1.236-3.221-.124-.303-.535-1.524.117-3.176 0 0 1.008-.322 3.301 1.23.957-.266 1.983-.399 3.003-.404 1.02.005 2.047.138 3.006.404 2.291-1.552 3.297-1.23 3.297-1.23.653 1.653.242 2.874.118 3.176.77.84 1.235 1.911 1.235 3.221 0 4.609-2.807 5.624-5.479 5.921.43.372.823 1.102.823 2.222v3.293c0 .319.192.694.801.576 4.765-1.589 8.199-6.086 8.199-11.386 0-6.627-5.373-12-12-12z"/>
+                </svg>
+                View on GitHub
+            </a>
+        </div>
+
+        <div class="content">
+            <!-- Info Section -->
+            <div class="info-section">
+                <h2>📖 About</h2>
+                <p style="font-size: 1.1em; line-height: 1.8;">
+                    <strong>CNN-based traffic sign recognition</strong> system with 99.27% accuracy across 43 sign categories. 
+                    Upload an image and the AI model will identify the traffic sign type with confidence scores.
+                </p>
+                <p style="font-size: 1.05em; color: #6c757d; margin-top: 15px;">
+                    <strong>Usage:</strong> Click "Choose Image" or "Test Example" → View classification results
+                </p>
+            </div>
+
+            <!-- Error Message -->
+            <div class="error" id="errorMessage"></div>
+
+            <!-- Upload Section -->
+            <div class="upload-section" id="uploadSection">
+                <div class="upload-icon">📤</div>
+                <h2 style="color: #667eea; margin-bottom: 15px;">Upload Traffic Sign Image</h2>
+                <p style="color: #6c757d; margin-bottom: 20px;">
+                    Supported formats: PNG, JPG, JPEG<br>
+                    Images will be automatically resized to 32×32 pixels
+                </p>
+                <input type="file" id="fileInput" class="file-input" accept="image/*">
+                <button class="upload-button" onclick="document.getElementById('fileInput').click()">
+                    Choose Image
+                </button>
+                <button class="test-button" onclick="testExample()">
+                    🧪 Test Example
+                </button>
+            </div>
+
+            <!-- Loading -->
+            <div class="loading" id="loading">
+                <div class="spinner"></div>
+                <p style="color: #667eea; font-size: 1.2em;">Analyzing traffic sign...</p>
+            </div>
+
+            <!-- Results -->
+            <div class="results-section" id="resultsSection">
+                <div class="result-card">
+                    <div class="result-header">
+                        <img id="resultImage" class="result-image" alt="Traffic Sign">
+                    </div>
+
+                    <div class="prediction-main">
+                        <h2>🚦 Predicted Sign</h2>
+                        <h1 id="predictedClass" style="margin: 20px 0; font-size: 2.5em;"></h1>
+                        <div class="confidence" id="confidenceValue"></div>
+                        <div class="confidence-bar">
+                            <div class="confidence-fill" id="confidenceFill"></div>
+                        </div>
+                    </div>
+
+                    <div class="top5-predictions">
+                        <h3>📊 Top 5 Predictions</h3>
+                        <div id="top5List"></div>
+                    </div>
+
+                    <div style="text-align: center;">
+                        <button class="reset-button" onclick="reset()">
+                            🔄 Classify Another Image
+                        </button>
+                    </div>
+                </div>
+            </div>
+        </div>
+    </div>
+
+    <script>
+        document.getElementById('fileInput').addEventListener('change', function(e) {
+            const file = e.target.files[0];
+            if (file) {
+                analyzeImage(file);
+            }
+        });
+
+        async function analyzeImage(file) {
+            if (!file.type.startsWith('image/')) {
+                showError('Please upload a valid image file (PNG, JPG, JPEG)');
+                return;
+            }
+
+            // Show loading
+            document.getElementById('loading').style.display = 'block';
+            document.getElementById('uploadSection').style.display = 'none';
+            document.getElementById('resultsSection').style.display = 'none';
+            document.getElementById('errorMessage').style.display = 'none';
+
+            const formData = new FormData();
+            formData.append('file', file);
+
+            try {
+                const response = await fetch('/predict', {
+                    method: 'POST',
+                    body: formData
+                });
+
+                const data = await response.json();
+
+                document.getElementById('loading').style.display = 'none';
+
+                if (data.error) {
+                    showError(data.error);
+                } else {
+                    showResults(data);
+                }
+            } catch (error) {
+                document.getElementById('loading').style.display = 'none';
+                showError('An error occurred: ' + error.message);
+            }
+        }
+
+        async function testExample() {
+            // Show loading
+            document.getElementById('loading').style.display = 'block';
+            document.getElementById('uploadSection').style.display = 'none';
+            document.getElementById('resultsSection').style.display = 'none';
+            document.getElementById('errorMessage').style.display = 'none';
+
+            try {
+                const response = await fetch('/test-example', {
+                    method: 'POST'
+                });
+
+                const data = await response.json();
+
+                document.getElementById('loading').style.display = 'none';
+
+                if (data.error) {
+                    showError(data.error);
+                } else {
+                    showResults(data);
+                }
+            } catch (error) {
+                document.getElementById('loading').style.display = 'none';
+                showError('An error occurred: ' + error.message);
+            }
+        }
+
+        function showResults(data) {
+            document.getElementById('resultImage').src = data.image;
+            document.getElementById('predictedClass').textContent = data.predicted_class;
+            document.getElementById('confidenceValue').textContent = (data.confidence * 100).toFixed(1) + '%';
+            document.getElementById('confidenceFill').style.width = (data.confidence * 100) + '%';
+
+            // Show top 5 predictions
+            const top5List = document.getElementById('top5List');
+            top5List.innerHTML = '';
+            
+            data.top5_predictions.forEach((pred, index) => {
+                const item = document.createElement('div');
+                item.className = 'prediction-item';
+                item.innerHTML = `
+                    <span class="prediction-name">
+                        <strong>${index + 1}.</strong> ${pred.class_name}
+                    </span>
+                    <span class="prediction-confidence">
+                        ${(pred.confidence * 100).toFixed(1)}%
+                    </span>
+                `;
+                top5List.appendChild(item);
+            });
+
+            document.getElementById('resultsSection').style.display = 'block';
+        }
+
+        function showError(message) {
+            const errorElement = document.getElementById('errorMessage');
+            errorElement.textContent = '❌ Error: ' + message;
+            errorElement.style.display = 'block';
+            document.getElementById('uploadSection').style.display = 'block';
+        }
+
+        function reset() {
+            document.getElementById('fileInput').value = '';
+            document.getElementById('uploadSection').style.display = 'block';
+            document.getElementById('resultsSection').style.display = 'none';
+            document.getElementById('errorMessage').style.display = 'none';
+            document.getElementById('loading').style.display = 'none';
+        }
+    </script>
+</body>
+</html>