Upload 7 files

EXPLANATION.md

@@ -0,0 +1,202 @@
+# CIFAR-10 Image Classifier - Detailed Explanation
+
+## Overview
+
+This application provides a user-friendly interface for running predictions on a trained PyTorch neural network model. The model is based on the implementation from the [PyTorch CIFAR-10 Tutorial](https://pytorch.org/tutorials/beginner/blitz/cifar10_tutorial.html), which trains a convolutional neural network to classify images from the CIFAR-10 dataset.
+
+## Model Architecture Breakdown
+
+The neural network implements the architecture from the PyTorch CIFAR-10 tutorial:
+
+1. **Input Layer**: Accepts RGB images of size 32×32 pixels (3 channels)
+2. **First Convolutional Block**:
+   - Conv2d layer: 3 input channels → 6 output channels, 5×5 kernel
+   - ReLU activation function
+   - MaxPool2d layer: 2×2 pooling window
+3. **Second Convolutional Block**:
+   - Conv2d layer: 6 input channels → 16 output channels, 5×5 kernel
+   - ReLU activation function
+   - MaxPool2d layer: 2×2 pooling window
+4. **Fully Connected Layers**:
+   - First FC layer: 400 inputs → 120 outputs with ReLU activation
+   - Second FC layer: 120 inputs → 84 outputs with ReLU activation
+   - Output layer: 84 inputs → 10 outputs (for 10 CIFAR-10 classes)
+
+## CIFAR-10 Dataset
+
+The CIFAR-10 dataset consists of 60,000 32x32 color images in 10 classes, with 6,000 images per class. The 10 classes are:
+1. **Airplane** - Aircraft flying in the sky
+2. **Automobile** - Cars and vehicles on the road
+3. **Bird** - Flying or perched birds
+4. **Cat** - Domestic cats and felines
+5. **Deer** - Wild deer and similar animals
+6. **Dog** - Domestic dogs and canines
+7. **Frog** - Amphibians like frogs
+8. **Horse** - Horses and similar animals
+9. **Ship** - Boats and ships on water
+10. **Truck** - Trucks and heavy vehicles
+
+## How the Application Works
+
+### 1. Model Loading
+When the application starts, it attempts to load your trained model weights from a file named `model.pth`. This file should contain the state dictionary of a model with the exact architecture defined in the `Net` class, matching the PyTorch CIFAR-10 tutorial.
+
+### 2. Image Preprocessing
+Before making predictions, any input image goes through preprocessing:
+- Maintained as RGB (3 channels) - no color conversion
+- Resized to 32×32 pixels to match the model's expected input size
+- Converted to a PyTorch tensor
+- Batch dimension added (required by PyTorch)
+
+### 3. Prediction Process
+When you submit an image for classification, the process follows the PyTorch tutorial:
+
+```python
+model.eval()
+with torch.no_grad():
+    output = model(input_tensor)
+    probabilities = F.softmax(output, dim=1)
+    probabilities = probabilities.numpy()[0]
+```
+
+This implementation:
+- Sets the model to evaluation mode with `model.eval()`
+- Disables gradient computation with `torch.no_grad()` for efficiency
+- Applies softmax to convert raw outputs to probabilities
+- Extracts the first (and only) batch result
+
+### 4. User Interface Features
+The Gradio interface provides several ways to interact with the model:
+
+- **Image Upload**: Upload any image file from your computer
+- **Drawing Tool**: Draw an image directly in the browser
+- **Example Images**: Use pre-made examples representing each CIFAR-10 class
+- **Real-time Results**: See prediction probabilities for all 10 classes
+- **Responsive Design**: Works well on both desktop and mobile devices
+
+## Image Input Capabilities
+
+### Supported Image Formats
+The application accepts all common image formats:
+- JPEG, PNG, BMP, TIFF, GIF, and WebP
+- Color images (maintained as RGB with 3 channels)
+- Images of any resolution (automatically resized to 32×32)
+
+### Robustness Features
+The model has been designed to handle various image conditions:
+- **Resolution Independence**: Works with images of any size (resized to 32×32)
+- **Color Preservation**: Maintains RGB color information
+- **Contrast Handling**: Works with both high and low contrast images
+- **Noise Tolerance**: Can handle some image noise
+- **Rotation Tolerance**: Some tolerance to slight rotations
+- **Scale Invariance**: Works with objects of different sizes
+
+### Best Practices for Good Results
+To get the best classification results:
+1. **Center the object** in the image area
+2. **Use clear contrast** between the object and background
+3. **Fill most of the image** area with the object
+4. **Avoid excessive noise** or artifacts
+5. **Ensure the object is clearly visible**
+
+### Image Preprocessing Pipeline
+The complete preprocessing pipeline:
+1. Image upload or drawing
+2. Resize to 32×32 pixels using bilinear interpolation
+3. Conversion to PyTorch tensor with values scaled to [0,1]
+4. Addition of batch dimension for model inference
+
+## Technical Implementation Details
+
+### Custom CSS Styling
+The application features a modern UI with:
+- Animated gradient background
+- Glass-morphism design elements
+- Responsive layout that adapts to different screen sizes
+- Interactive buttons with hover effects
+- Clean typography using Google Fonts
+
+### Error Handling
+The application gracefully handles:
+- Missing model files (shows error message)
+- Empty inputs (returns zero probabilities)
+- Various image formats (maintained as RGB)
+
+### Performance Optimizations
+- Model loaded once at startup
+- Gradients disabled during inference
+- Efficient tensor operations
+- Caching of example predictions
+
+## Deployment to Hugging Face Spaces
+
+To deploy this application to Hugging Face Spaces:
+
+1. Create a new Space with the "Gradio" SDK
+2. Upload all files from this directory
+3. Ensure your `model.pth` file is included
+4. The Space will automatically install dependencies from `requirements.txt`
+5. The application will start automatically
+
+## Customization Guide
+
+### Using a Different Model File
+If your model is saved with a different filename:
+1. Modify the `model_path` variable in the `load_model()` function
+2. Ensure the model architecture matches the `Net` class definition exactly
+
+### Changing Class Labels
+To customize the class labels:
+1. Modify the `cifar10_classes` list in the `predict()` function
+2. Update the example images in the `create_example_images()` function to match your new classes
+
+### Adjusting Image Preprocessing
+To modify how images are preprocessed:
+1. Edit the `preprocess_image()` function
+2. Change the resize dimensions if your model expects different input size
+3. Add normalization if your model was trained with normalized inputs
+
+## Troubleshooting Common Issues
+
+### Model Not Loading
+- Verify `model.pth` is in the same directory as `app.py`
+- Ensure the model architecture matches the `Net` class definition exactly
+- Check that the file is not corrupted
+
+### Poor Prediction Accuracy
+- Verify your model was trained on similar data (CIFAR-10 or similar)
+- Check if the preprocessing matches what was used during training
+- Ensure input images are similar to the training data
+
+### UI Display Issues
+- Update Gradio to the latest version
+- Check browser compatibility
+- Clear browser cache if styles aren't loading correctly
+
+## File Structure
+```
+cifar10-classifier/
+├── app.py              # Main application file
+├── requirements.txt    # Python dependencies
+├── README.md           # User guide
+├── EXPLANATION.md      # This file
+├── model.pth           # Your trained model (to be added)
+└── space.json          # Hugging Face Spaces configuration
+```
+
+## Requirements Explanation
+
+- **torch>=1.7.0**: Core PyTorch library for neural network operations
+- **torchvision>=0.8.0**: Computer vision utilities, including image transforms
+- **gradio>=4.0.0**: Framework for creating machine learning web interfaces
+- **pillow>=8.0.0**: Python Imaging Library for image processing
+- **numpy>=1.19.0**: Numerical computing library for array operations
+
+## Example Use Cases
+
+1. **Object Recognition**: Classify images into 10 common object categories
+2. **Educational Tool**: Demonstrate how convolutional neural networks work on real image data
+3. **Model Showcase**: Present your trained model to others in an interactive way
+4. **Testing Platform**: Evaluate model performance on custom inputs
+
+This application provides a complete solution for deploying a PyTorch model trained on CIFAR-10 with an attractive, user-friendly interface that can be easily shared with others through Hugging Face Spaces. The implementation is based on the PyTorch CIFAR-10 tutorial, ensuring compatibility with models trained using the same approach.

README.md

@@ -1,6 +1,6 @@
 ---
-title: PyTorch Neural Network Classifier
-emoji: 🧠
+title: CIFAR-10 Image Classifier
+emoji: 🚀
 colorFrom: blue
 colorTo: red
 sdk: gradio
@@ -9,19 +9,19 @@ app_file: app.py
 pinned: false
 ---
 
-# PyTorch Neural Network Classifier
+# CIFAR-10 Image Classifier
 
-This is a Gradio interface for a convolutional neural network based on the [PyTorch Neural Networks Tutorial](https://pytorch.org/tutorials/beginner/blitz/neural_networks_tutorial.html). The model is a simplified version of LeNet-5, designed for image classification tasks.
+This is a Gradio interface for a convolutional neural network trained on the CIFAR-10 dataset. The model can classify images into 10 different object categories: Airplane, Automobile, Bird, Cat, Deer, Dog, Frog, Horse, Ship, and Truck.
 
 ## Model Architecture
 
-The neural network has the following architecture (exactly as shown in the PyTorch tutorial):
+The neural network has the following architecture (based on the PyTorch CIFAR-10 Tutorial):
 - Two convolutional layers with ReLU activation and max pooling
 - Three fully connected layers
-- Designed for 32x32 grayscale input images
+- Designed for 32x32 RGB input images
 
 ```
-Input → Conv2d(1, 6, 5) → ReLU → MaxPool2d(2, 2) → 
+Input → Conv2d(3, 6, 5) → ReLU → MaxPool2d(2, 2) → 
 Conv2d(6, 16, 5) → ReLU → MaxPool2d(2, 2) → 
 Flatten → Linear(16*5*5, 120) → ReLU → 
 Linear(120, 84) → ReLU → Linear(84, 10) → Output
@@ -30,12 +30,12 @@ Linear(120, 84) → ReLU → Linear(84, 10) → Output
 ## Features
 
 - Interactive image classification interface with modern UI
-- Example images for quick testing
+- Example images for each CIFAR-10 class
 - Real-time predictions with probability scores
 - Support for custom image uploads
 - Built-in drawing tool for creating test images
 - Responsive design with gradient backgrounds and animations
-- Automatic image preprocessing (resize, grayscale conversion)
+- Automatic image preprocessing (resize to 32×32)
 
 ## How to Use with Your Existing Model
 
@@ -59,22 +59,36 @@ The model can handle various types of image inputs:
 
 ### Supported Image Formats
 - JPG, PNG, BMP, TIFF, and other common image formats
-- Color images (automatically converted to grayscale)
+- Color images (RGB with 3 channels)
 - Any resolution (automatically resized to 32×32 pixels)
 
 ### Robustness Features
 - **Resolution Independence**: Works with images of any size (resized to 32×32)
-- **Color Conversion**: Automatically converts color images to grayscale
+- **Color Preservation**: Maintains RGB color information
 - **Contrast Handling**: Works with both high and low contrast images
 - **Noise Tolerance**: Can handle some image noise
 - **Rotation Tolerance**: Some tolerance to slight rotations
 
 ### Best Practices for Good Results
-1. **Center the digit** in the image area
-2. **Use clear contrast** between the digit and background
-3. **Fill most of the image** area with the digit
+1. **Center the object** in the image area
+2. **Use clear contrast** between the object and background
+3. **Fill most of the image** area with the object
 4. **Avoid excessive noise** or artifacts
-5. **Use dark digits on light background** or vice versa
+5. **Ensure the object is clearly visible**
+
+## CIFAR-10 Classes
+
+The model classifies images into these 10 categories:
+1. **Airplane** - Aircraft flying in the sky
+2. **Automobile** - Cars and vehicles on the road
+3. **Bird** - Flying or perched birds
+4. **Cat** - Domestic cats and felines
+5. **Deer** - Wild deer and similar animals
+6. **Dog** - Domestic dogs and canines
+7. **Frog** - Amphibians like frogs
+8. **Horse** - Horses and similar animals
+9. **Ship** - Boats and ships on water
+10. **Truck** - Trucks and heavy vehicles
 
 ## Deployment to Hugging Face Spaces
 
@@ -90,28 +104,27 @@ The Space will automatically run the `app.py` file as the entry point.
 
 ## Example Usage
 
-The interface comes with hand-drawn example images that demonstrate how the classifier works. You can:
+The interface comes with simple example images representing each CIFAR-10 class. You can:
 1. Click on any example image to load it
 2. Upload your own image using the file browser
 3. Draw an image using the built-in sketch tool
 4. View the classification probabilities for each class
 
 Try these examples:
-- Handwritten digits of different styles
-- Printed digits
-- Digits with varying thickness
-- Digits with different backgrounds
+- Simple drawings of objects from each class
+- Photos of objects that match the CIFAR-10 categories
+- Images with varying styles and backgrounds
 
 ## Technical Details
 
-This implementation follows the PyTorch tutorial exactly and includes:
+This implementation is based on the PyTorch CIFAR-10 tutorial and includes:
 - Gradio interface with custom CSS styling
-- Image preprocessing pipeline (resize to 32x32, grayscale conversion)
-- Softmax probability output (as shown in the tutorial)
+- Image preprocessing pipeline (resize to 32x32)
+- Softmax probability output
 - Example generation for demonstration
 - Model loading functionality for your trained weights
 
-The prediction function exactly matches the tutorial:
+The prediction function:
 ```python
 model.eval()
 with torch.no_grad():

app.py

@@ -0,0 +1,470 @@
+import torch
+import torch.nn as nn
+import torch.nn.functional as F
+import gradio as gr
+import numpy as np
+import torchvision.transforms as transforms
+from PIL import Image, ImageDraw
+import os
+
+# Define the neural network model - matching your trained model with 3 input channels
+class Net(nn.Module):
+    def __init__(self):
+        super(Net, self).__init__()
+        # 3 input image channels (RGB), 6 output channels, 5x5 square convolution kernel
+        self.conv1 = nn.Conv2d(3, 6, 5)
+        self.conv2 = nn.Conv2d(6, 16, 5)
+        # an affine operation: y = Wx + b
+        self.fc1 = nn.Linear(16 * 5 * 5, 120)  # 5*5 from image dimension 
+        self.fc2 = nn.Linear(120, 84)
+        self.fc3 = nn.Linear(84, 10)
+
+    def forward(self, x):
+        # Convolution layer C1: 3 input image channels, 6 output channels,
+        # 5x5 square convolution, it uses RELU activation function, and
+        # outputs a Tensor with size (N, 6, 28, 28), where N is the size of the batch
+        c1 = F.relu(self.conv1(x))
+        # Subsampling layer S2: 2x2 grid, purely functional,
+        # this layer does not have any parameter, and outputs a (N, 6, 14, 14) Tensor
+        s2 = F.max_pool2d(c1, (2, 2))
+        # Convolution layer C3: 6 input channels, 16 output channels,
+        # 5x5 square convolution, it uses RELU activation function, and
+        # outputs a (N, 16, 10, 10) Tensor
+        c3 = F.relu(self.conv2(s2))
+        # Subsampling layer S4: 2x2 grid, purely functional,
+        # this layer does not have any parameter, and outputs a (N, 16, 5, 5) Tensor
+        s4 = F.max_pool2d(c3, 2)
+        # Flatten operation: purely functional, outputs a (N, 400) Tensor
+        s4 = torch.flatten(s4, 1)
+        # Fully connected layer F5: (N, 400) Tensor input,
+        # and outputs a (N, 120) Tensor, it uses RELU activation function
+        f5 = F.relu(self.fc1(s4))
+        # Fully connected layer F6: (N, 120) Tensor input,
+        # and outputs a (N, 84) Tensor, it uses RELU activation function
+        f6 = F.relu(self.fc2(f5))
+        # Gaussian layer OUTPUT: (N, 84) Tensor input, and
+        # outputs a (N, 10) Tensor
+        output = self.fc3(f6)
+        return output
+
+# Initialize the model
+model = Net()
+
+# Load the trained model weights
+def load_model():
+    model_path = "model.pth"  # Update this path to where your model is stored
+    if os.path.exists(model_path):
+        try:
+            # Load the trained model weights
+            # Handle different PyTorch versions
+            try:
+                # For PyTorch 2.6+, we need to set weights_only=False for compatibility
+                model.load_state_dict(torch.load(model_path, map_location=torch.device('cpu'), weights_only=False))
+            except TypeError:
+                # For older PyTorch versions that don't support weights_only parameter
+                model.load_state_dict(torch.load(model_path, map_location=torch.device('cpu')))
+            print("Loaded trained model weights")
+            return True
+        except Exception as e:
+            print(f"Error loading model: {e}")
+            return False
+    else:
+        print("No trained model found at", model_path)
+        # Initialize with random weights for demonstration
+        for m in model.modules():
+            if isinstance(m, nn.Conv2d) or isinstance(m, nn.Linear):
+                nn.init.xavier_uniform_(m.weight)
+                if m.bias is not None:
+                    nn.init.constant_(m.bias, 0)
+        return False
+
+# Preprocessing function for input images - now handles RGB images
+def preprocess_image(image):
+    # Resize to 32x32 (expected input size for the network)
+    transform = transforms.Compose([
+        transforms.Resize((32, 32)),
+        transforms.ToTensor(),
+    ])
+    
+    image_tensor = transform(image)
+    # Add batch dimension (1, 3, 32, 32)
+    image_tensor = image_tensor.unsqueeze(0)
+    return image_tensor
+
+# Prediction function - matches the PyTorch tutorial exactly
+def predict(image):
+    if image is None:
+        return {f"Class {i}": 0 for i in range(10)}
+    
+    # Preprocess the image
+    input_tensor = preprocess_image(image)
+    
+    # Make prediction - exactly as shown in the PyTorch tutorial
+    model.eval()
+    with torch.no_grad():
+        output = model(input_tensor)
+        # Apply softmax to get probabilities
+        probabilities = F.softmax(output, dim=1)
+        probabilities = probabilities.numpy()[0]
+    
+    # Create labels for CIFAR-10 classes
+    cifar10_classes = ["Airplane", "Automobile", "Bird", "Cat", "Deer", "Dog", "Frog", "Horse", "Ship", "Truck"]
+    
+    # Return as a dictionary for Gradio
+    return {label: float(prob) for label, prob in zip(cifar10_classes, probabilities)}
+
+# Create example images representing CIFAR-10 classes
+def create_example_images():
+    examples = []
+    
+    # CIFAR-10 class names
+    cifar10_classes = ["Airplane", "Automobile", "Bird", "Cat", "Deer", "Dog", "Frog", "Horse", "Ship", "Truck"]
+    
+    # Create simple representations of CIFAR-10 classes
+    for i, class_name in enumerate(cifar10_classes):
+        # Create a 64x64 RGB image for better quality
+        img = Image.new('RGB', (64, 64), color=(255, 255, 255))  # White background
+        draw = ImageDraw.Draw(img)
+        
+        # Draw simple representations of each class
+        if i == 0:  # Airplane
+            # Draw a simple airplane shape
+            draw.polygon([(32, 10), (20, 30), (44, 30)], fill=(169, 169, 169))  # Main body
+            draw.rectangle([25, 30, 39, 35], fill=(105, 105, 105))  # Wings
+            draw.rectangle([30, 35, 34, 45], fill=(128, 128, 128))  # Tail
+        elif i == 1:  # Automobile
+            # Draw a simple car shape
+            draw.rectangle([15, 30, 49, 45], fill=(0, 0, 255))  # Body
+            draw.ellipse([20, 40, 30, 50], fill=(0, 0, 0))  # Wheels
+            draw.ellipse([34, 40, 44, 50], fill=(0, 0, 0))
+            draw.rectangle([25, 20, 39, 30], fill=(0, 0, 255))  # Top
+        elif i == 2:  # Bird
+            # Draw a simple bird shape
+            draw.ellipse([25, 25, 39, 39], fill=(255, 165, 0))  # Body
+            draw.polygon([(32, 15), (25, 25), (39, 25)], fill=(255, 140, 0))  # Head
+            draw.line([20, 30, 10, 20], fill=(255, 165, 0), width=3)  # Wing
+            draw.line([44, 30, 54, 20], fill=(255, 165, 0), width=3)  # Wing
+        elif i == 3:  # Cat
+            # Draw a simple cat shape
+            draw.ellipse([25, 25, 39, 39], fill=(128, 128, 128))  # Body
+            draw.ellipse([30, 20, 40, 30], fill=(169, 169, 169))  # Head
+            draw.polygon([(35, 22), (33, 27), (37, 27)], fill=(0, 0, 0))  # Ear
+            draw.ellipse([32, 28, 34, 30], fill=(0, 0, 0))  # Eye
+        elif i == 4:  # Deer
+            # Draw a simple deer shape
+            draw.ellipse([25, 30, 39, 44], fill=(139, 69, 19))  # Body
+            draw.ellipse([30, 25, 40, 35], fill=(160, 82, 45))  # Head
+            draw.line([35, 15, 40, 25], fill=(139, 69, 19), width=3)  # Antler
+            draw.line([20, 35, 10, 30], fill=(139, 69, 19), width=2)  # Leg
+        elif i == 5:  # Dog
+            # Draw a simple dog shape
+            draw.ellipse([25, 30, 39, 44], fill=(139, 69, 19))  # Body
+            draw.ellipse([30, 25, 40, 35], fill=(160, 82, 45))  # Head
+            draw.ellipse([32, 28, 34, 30], fill=(0, 0, 0))  # Eye
+            draw.ellipse([36, 32, 38, 34], fill=(0, 0, 0))  # Nose
+        elif i == 6:  # Frog
+            # Draw a simple frog shape
+            draw.ellipse([25, 30, 39, 44], fill=(34, 139, 34))  # Body
+            draw.ellipse([30, 25, 40, 35], fill=(0, 100, 0))  # Head
+            draw.ellipse([27, 32, 29, 34], fill=(0, 0, 0))  # Eye
+            draw.ellipse([35, 32, 37, 34], fill=(0, 0, 0))  # Eye
+        elif i == 7:  # Horse
+            # Draw a simple horse shape
+            draw.ellipse([25, 30, 39, 44], fill=(169, 169, 169))  # Body
+            draw.ellipse([35, 20, 45, 30], fill=(128, 128, 128))  # Head
+            draw.line([40, 25, 50, 15], fill=(105, 105, 105), width=3)  # Mane
+        elif i == 8:  # Ship
+            # Draw a simple ship shape
+            draw.polygon([(20, 35), (44, 35), (38, 45), (26, 45)], fill=(139, 69, 19))  # Hull
+            draw.rectangle([30, 20, 34, 35], fill=(169, 169, 169))  # Mast
+            draw.polygon([(30, 20), (32, 15), (34, 20)], fill=(255, 255, 255))  # Sail
+        elif i == 9:  # Truck
+            # Draw a simple truck shape
+            draw.rectangle([15, 25, 49, 45], fill=(255, 0, 0))  # Cab
+            draw.rectangle([25, 15, 45, 25], fill=(255, 0, 0))  # Load area
+            draw.ellipse([20, 40, 30, 50], fill=(0, 0, 0))  # Wheels
+            draw.ellipse([34, 40, 44, 50], fill=(0, 0, 0))
+    
+        examples.append(img)
+    
+    return examples
+
+# Custom CSS for enhanced UI
+custom_css = """
+@import url('https://fonts.googleapis.com/css2?family=Roboto:wght@300;400;500;700&display=swap');
+
+body {
+    font-family: 'Roboto', sans-serif;
+    background: linear-gradient(135deg, #1a2a6c, #b21f1f, #1a2a6c);
+    background-size: 400% 400%;
+    animation: gradientBG 15s ease infinite;
+    color: white;
+    min-height: 100vh;
+}
+
+@keyframes gradientBG {
+    0% { background-position: 0% 50%; }
+    50% { background-position: 100% 50%; }
+    100% { background-position: 0% 50%; }
+}
+
+.gradio-container {
+    background: rgba(0, 0, 0, 0.7) !important;
+    backdrop-filter: blur(10px);
+    border-radius: 20px !important;
+    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.5);
+    border: 1px solid rgba(255, 255, 255, 0.1);
+    max-width: 1200px !important;
+    margin: 20px auto !important;
+}
+
+.container {
+    max-width: 100% !important;
+}
+
+h1 {
+    background: linear-gradient(to right, #ff7e5f, #feb47b);
+    -webkit-background-clip: text;
+    -webkit-text-fill-color: transparent;
+    text-align: center;
+    font-weight: 700 !important;
+    font-size: 2.5em !important;
+    margin-bottom: 10px !important;
+    text-shadow: 0 2px 4px rgba(0,0,0,0.2);
+}
+
+h2 {
+    color: #feb47b;
+    border-bottom: 2px solid #ff7e5f;
+    padding-bottom: 10px;
+}
+
+.markdown {
+    background: rgba(255, 255, 255, 0.05);
+    border-radius: 15px;
+    padding: 20px;
+    margin-bottom: 20px;
+    border: 1px solid rgba(255, 255, 255, 0.1);
+}
+
+.gradio-button {
+    background: linear-gradient(45deg, #ff7e5f, #feb47b) !important;
+    border: none !important;
+    color: white !important;
+    font-weight: 600 !important;
+    transition: all 0.3s ease !important;
+    box-shadow: 0 4px 15px rgba(255, 126, 95, 0.3) !important;
+}
+
+.gradio-button:hover {
+    transform: translateY(-3px) !important;
+    box-shadow: 0 6px 20px rgba(255, 126, 95, 0.5) !important;
+}
+
+.gradio-button:active {
+    transform: translateY(1px) !important;
+}
+
+.gradio-image {
+    border-radius: 15px !important;
+    overflow: hidden !important;
+    box-shadow: 0 8px 25px rgba(0, 0, 0, 0.4) !important;
+    border: 2px solid rgba(255, 255, 255, 0.1) !important;
+}
+
+.gradio-label {
+    background: rgba(255, 255, 255, 0.08) !important;
+    border-radius: 15px !important;
+    padding: 20px !important;
+    border: 1px solid rgba(255, 255, 255, 0.1) !important;
+    box-shadow: 0 8px 25px rgba(0, 0, 0, 0.3) !important;
+}
+
+label {
+    color: #feb47b !important;
+    font-weight: 500 !important;
+}
+
+.examples {
+    background: rgba(255, 255, 255, 0.05) !important;
+    border-radius: 15px !important;
+    padding: 20px !important;
+    margin-top: 20px !important;
+    border: 1px solid rgba(255, 255, 255, 0.1) !important;
+}
+
+footer {
+    display: none !important;
+}
+
+@media (max-width: 768px) {
+    .gradio-container {
+        margin: 10px !important;
+    }
+    
+    h1 {
+        font-size: 2em !important;
+    }
+}
+"""
+
+# Initialize the model
+model_loaded = load_model()
+
+# Create the Gradio interface with enhanced styling
+with gr.Blocks(
+    title="CIFAR-10 Image Classifier",
+    css=custom_css,
+    theme=gr.themes.Default(
+        font=["Roboto", "Arial", "sans-serif"]
+    )
+) as demo:
+    gr.Markdown("""
+    # 🚀 CIFAR-10 Image Classifier
+    ## Convolutional Neural Network for Object Recognition
+    
+    This is a demonstration of a convolutional neural network trained on the CIFAR-10 dataset. 
+    The model can classify images into 10 different object categories.
+    
+    The model architecture consists of:
+    - 2 Convolutional Layers with ReLU activation
+    - 2 MaxPooling Layers
+    - 3 Fully Connected Layers
+    """)
+    
+    # Show model loading status
+    if model_loaded:
+        gr.Markdown("✅ Model successfully loaded")
+    else:
+        gr.Markdown("⚠️ Model not found or error loading. Using random weights for demonstration.")
+    
+    with gr.Row():
+        with gr.Column(scale=1):
+            gr.Markdown("### 📥 Input")
+            input_image = gr.Image(type="pil", label="Upload or Draw an Image", height=300)
+            with gr.Row():
+                submit_btn = gr.Button("Classify Image", elem_classes=["custom-button"])
+                clear_btn = gr.Button("Clear")
+            
+            gr.Markdown("""
+            ### 🎯 Model Architecture
+            ```
+            Input → Conv2D(3×32×32) → ReLU → MaxPool2D
+                 → Conv2D → ReLU → MaxPool2D
+                 → Flatten → Linear → ReLU
+                 → Linear → ReLU → Linear(10)
+                 → Output
+            ```
+            """)
+            
+        with gr.Column(scale=1):
+            gr.Markdown("### 📊 Classification Results")
+            output_label = gr.Label(label="Prediction Probabilities", num_top_classes=5)
+            
+            gr.Markdown("""
+            ### ℹ️ Instructions
+            1. Upload an image or draw one using the editor
+            2. The image will be automatically resized to 32×32 pixels
+            3. Click "Classify Image" to get predictions
+            4. Results show probabilities for 10 CIFAR-10 classes
+            
+            ### 📝 Notes
+            - Model expects RGB images of 32×32 pixels
+            - Trained on the CIFAR-10 dataset
+            - Classes: Airplane, Automobile, Bird, Cat, Deer, Dog, Frog, Horse, Ship, Truck
+            """)
+    
+    with gr.Row():
+        gr.Markdown("### 📋 Example Images")
+        gr.Markdown("""
+        The examples below show actual CIFAR-10 images. 
+        Try clicking on any example to load it, or use the drawing tool to create your own images. The model can handle:
+        - Various image sizes (automatically resized to 32×32)
+        - Both black and white backgrounds
+        - Low-resolution images
+        
+        Classes: Airplane, Automobile, Bird, Cat, Deer, Dog, Frog, Horse, Ship, Truck
+        """)
+    
+    # Create examples using the compatible format for Gradio 4.0.0
+    # Use existing example images from the examples directory
+    example_paths = []
+    import os
+    
+    # Create examples directory if it doesn't exist
+    examples_dir = "examples"
+    if not os.path.exists(examples_dir):
+        os.makedirs(examples_dir)
+    
+    # Use all example images from the examples directory
+    example_paths = []
+    cifar10_classes = ["Airplane", "Automobile", "Bird", "Cat", "Deer", "Dog", "Frog", "Horse", "Ship", "Truck"]
+    
+    for i in range(10):
+        example_path = os.path.join(examples_dir, f"example_{i}.png")
+        # All example images should now exist in the directory
+        if os.path.exists(example_path):
+            example_paths.append(example_path)
+    
+    gr.Examples(
+        examples=example_paths,
+        inputs=input_image,
+        outputs=output_label,
+        fn=predict,
+        cache_examples=True
+    )
+    
+    gr.Markdown("""
+    ### 🧪 Testing Different Image Qualities
+    
+    This model is robust to various image conditions:
+    - **Resolution**: Works with images of any resolution (automatically resized to 32×32)
+    - **Contrast**: Handles both high and low contrast images
+    - **Noise**: Can tolerate some image noise
+    - **Rotation**: Some tolerance to slight rotations
+    - **Scale**: Works with objects of different sizes within the image
+    
+    For best results:
+    1. Center the object in the image
+    2. Use clear contrast between the object and background
+    3. Avoid excessive noise or artifacts
+    4. Fill most of the image area with the object
+    
+    ### 🎯 CIFAR-10 Classes
+    
+    The model can classify images into these 10 categories:
+    1. **Airplane** - Aircraft flying in the sky
+    2. **Automobile** - Cars and vehicles on the road
+    3. **Bird** - Flying or perched birds
+    4. **Cat** - Domestic cats and felines
+    5. **Deer** - Wild deer and similar animals
+    6. **Dog** - Domestic dogs and canines
+    7. **Frog** - Amphibians like frogs
+    8. **Horse** - Horses and similar animals
+    9. **Ship** - Boats and ships on water
+    10. **Truck** - Trucks and heavy vehicles
+    """)
+    
+    # Event handling
+    submit_btn.click(
+        fn=predict,
+        inputs=input_image,
+        outputs=output_label
+    )
+    
+    clear_btn.click(
+        fn=lambda: (None, {cifar10_class: 0 for cifar10_class in ["Airplane", "Automobile", "Bird", "Cat", "Deer", "Dog", "Frog", "Horse", "Ship", "Truck"]}),
+        inputs=None,
+        outputs=[input_image, output_label]
+    )
+    
+    # Allow image upload to trigger prediction automatically
+    input_image.change(
+        fn=predict,
+        inputs=input_image,
+        outputs=output_label
+    )
+
+# Launch the app
+if __name__ == "__main__":
+    demo.launch(share=True)

model.pth

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

requirements.txt

@@ -0,0 +1,5 @@
+torch>=1.7.0
+torchvision>=0.8.0
+gradio>=4.44.1
+pillow>=8.0.0
+numpy>=1.19.0

space.json

@@ -0,0 +1,13 @@
+{
+  "title": "CIFAR-10 Image Classifier",
+  "sdk": "gradio",
+  "sdk_version": "4.44.1",
+  "app_file": "app.py",
+  "requirements": [
+    "torch",
+    "torchvision",
+    "gradio",
+    "pillow",
+    "numpy"
+  ]
+}

test_model.py

@@ -0,0 +1,20 @@
+import torch
+import os
+
+# Check if model file exists
+model_path = "model.pth"
+if os.path.exists(model_path):
+    print(f"Model file exists at {model_path}")
+    print(f"File size: {os.path.getsize(model_path)} bytes")
+    
+    try:
+        # Try to load the model
+        model_data = torch.load(model_path, map_location=torch.device('cpu'))
+        print("Model loaded successfully!")
+        print(f"Model type: {type(model_data)}")
+        if isinstance(model_data, dict):
+            print(f"Model keys: {list(model_data.keys())}")
+    except Exception as e:
+        print(f"Error loading model: {e}")
+else:
+    print(f"Model file not found at {model_path}")