Add application file

app.js

@@ -1,314 +0,0 @@
-import React, { useState } from 'react';
-import { Upload, X, Loader2, Image } from 'lucide-react';
-
-export default function ModelTester() {
-  const [file, setFile] = useState(null);
-  const [preview, setPreview] = useState(null);
-  const [loading, setLoading] = useState(false);
-  const [result, setResult] = useState(null);
-  const [error, setError] = useState(null);
-  const [dragActive, setDragActive] = useState(false);
-
-  // Your model ID from the repo
-  const MODEL_ID = 'Meenu047/RGTB_Aerial_view_detection';
-
-  const handleDrag = (e) => {
-    e.preventDefault();
-    e.stopPropagation();
-    if (e.type === "dragenter" || e.type === "dragover") {
-      setDragActive(true);
-    } else if (e.type === "dragleave") {
-      setDragActive(false);
-    }
-  };
-
-  const handleDrop = (e) => {
-    e.preventDefault();
-    e.stopPropagation();
-    setDragActive(false);
-    
-    if (e.dataTransfer.files && e.dataTransfer.files[0]) {
-      handleFile(e.dataTransfer.files[0]);
-    }
-  };
-
-  const handleChange = (e) => {
-    e.preventDefault();
-    if (e.target.files && e.target.files[0]) {
-      handleFile(e.target.files[0]);
-    }
-  };
-
-  const handleFile = (uploadedFile) => {
-    const validTypes = ['image/jpeg', 'image/png', 'image/jpg', 'image/webp'];
-    
-    if (!validTypes.includes(uploadedFile.type)) {
-      setError('Please upload a valid image file (JPEG, PNG, WebP)');
-      return;
-    }
-
-    setFile(uploadedFile);
-    setError(null);
-    setResult(null);
-
-    const reader = new FileReader();
-    reader.onloadend = () => {
-      setPreview(reader.result);
-    };
-    reader.readAsDataURL(uploadedFile);
-  };
-
-  const handlePredict = async () => {
-    if (!file) {
-      setError('Please upload an image first');
-      return;
-    }
-
-    setLoading(true);
-    setError(null);
-    setResult(null);
-
-    try {
-      // Read file as blob
-      const formData = new FormData();
-      formData.append('file', file);
-
-      const response = await fetch(
-        `https://api-inference.huggingface.co/models/${MODEL_ID}`,
-        {
-          method: 'POST',
-          body: file,
-        }
-      );
-
-      if (!response.ok) {
-        if (response.status === 503) {
-          setError('Model is loading, please wait 20-30 seconds and try again');
-        } else {
-          const errorData = await response.json();
-          throw new Error(errorData.error || `HTTP error! status: ${response.status}`);
-        }
-        setLoading(false);
-        return;
-      }
-
-      const data = await response.json();
-      setResult(data);
-    } catch (err) {
-      setError(err.message || 'Failed to get prediction. Make sure the model is public and loaded.');
-    } finally {
-      setLoading(false);
-    }
-  };
-
-  const clearImage = () => {
-    setFile(null);
-    setPreview(null);
-    setResult(null);
-    setError(null);
-  };
-
-  return (
-    <div className="min-h-screen bg-gradient-to-br from-purple-50 via-blue-50 to-indigo-100 p-8">
-      <div className="max-w-5xl mx-auto">
-        <div className="bg-white rounded-2xl shadow-2xl p-8">
-          <div className="flex items-center justify-between mb-6">
-            <div className="flex items-center gap-3">
-              <Image className="w-8 h-8 text-indigo-600" />
-              <h1 className="text-3xl font-bold text-gray-800">
-                RGTB Aerial View Detection
-              </h1>
-            </div>
-            <div className="bg-indigo-100 px-4 py-2 rounded-lg">
-              <span className="text-sm font-medium text-indigo-700">Model Ready</span>
-            </div>
-          </div>
-
-          <div className="mb-6 p-4 bg-gray-50 rounded-lg border border-gray-200">
-            <p className="text-sm text-gray-600">
-              <span className="font-semibold">Model:</span> {MODEL_ID}
-            </p>
-          </div>
-
-          {/* Drag & Drop Area */}
-          {!preview ? (
-            <div
-              onDragEnter={handleDrag}
-              onDragLeave={handleDrag}
-              onDragOver={handleDrag}
-              onDrop={handleDrop}
-              className={`border-2 border-dashed rounded-xl p-16 text-center transition-all ${
-                dragActive
-                  ? 'border-indigo-600 bg-indigo-50 scale-105'
-                  : 'border-gray-300 bg-gray-50 hover:border-indigo-400'
-              }`}
-            >
-              <input
-                type="file"
-                id="file-upload"
-                className="hidden"
-                onChange={handleChange}
-                accept="image/*"
-              />
-              <label
-                htmlFor="file-upload"
-                className="cursor-pointer flex flex-col items-center"
-              >
-                <div className="w-20 h-20 bg-indigo-100 rounded-full flex items-center justify-center mb-4">
-                  <Upload className="w-10 h-10 text-indigo-600" />
-                </div>
-                <p className="text-xl font-semibold text-gray-700 mb-2">
-                  Drop your aerial image here
-                </p>
-                <p className="text-sm text-gray-500 mb-4">
-                  or click to browse files
-                </p>
-                <div className="flex gap-2 text-xs text-gray-400">
-                  <span className="px-3 py-1 bg-white rounded-full border border-gray-200">JPEG</span>
-                  <span className="px-3 py-1 bg-white rounded-full border border-gray-200">PNG</span>
-                  <span className="px-3 py-1 bg-white rounded-full border border-gray-200">WebP</span>
-                </div>
-              </label>
-            </div>
-          ) : (
-            <div className="space-y-4">
-              {/* Image Preview */}
-              <div className="relative rounded-xl overflow-hidden border-2 border-gray-200 bg-gray-900">
-                <img
-                  src={preview}
-                  alt="Preview"
-                  className="w-full h-auto max-h-[500px] object-contain"
-                />
-                <button
-                  onClick={clearImage}
-                  className="absolute top-4 right-4 bg-red-500 text-white p-2 rounded-full hover:bg-red-600 transition-all shadow-lg hover:scale-110"
-                >
-                  <X className="w-5 h-5" />
-                </button>
-                <div className="absolute bottom-4 left-4 bg-black/70 backdrop-blur-sm text-white px-4 py-2 rounded-lg text-sm">
-                  {file.name}
-                </div>
-              </div>
-
-              {/* Predict Button */}
-              <button
-                onClick={handlePredict}
-                disabled={loading}
-                className="w-full bg-gradient-to-r from-indigo-600 to-purple-600 text-white py-4 rounded-xl font-semibold hover:from-indigo-700 hover:to-purple-700 transition-all disabled:from-gray-400 disabled:to-gray-400 disabled:cursor-not-allowed flex items-center justify-center gap-3 shadow-lg hover:shadow-xl transform hover:scale-[1.02]"
-              >
-                {loading ? (
-                  <>
-                    <Loader2 className="w-6 h-6 animate-spin" />
-                    <span>Analyzing Image...</span>
-                  </>
-                ) : (
-                  <>
-                    <Image className="w-6 h-6" />
-                    <span>Run Detection</span>
-                  </>
-                )}
-              </button>
-            </div>
-          )}
-
-          {/* Error Display */}
-          {error && (
-            <div className="mt-6 bg-red-50 border-l-4 border-red-500 rounded-lg p-4">
-              <div className="flex items-start gap-3">
-                <div className="flex-shrink-0">
-                  <svg className="w-5 h-5 text-red-500 mt-0.5" fill="currentColor" viewBox="0 0 20 20">
-                    <path fillRule="evenodd" d="M10 18a8 8 0 100-16 8 8 0 000 16zM8.707 7.293a1 1 0 00-1.414 1.414L8.586 10l-1.293 1.293a1 1 0 101.414 1.414L10 11.414l1.293 1.293a1 1 0 001.414-1.414L11.414 10l1.293-1.293a1 1 0 00-1.414-1.414L10 8.586 8.707 7.293z" clipRule="evenodd"/>
-                  </svg>
-                </div>
-                <div>
-                  <p className="text-red-800 font-semibold">Error</p>
-                  <p className="text-red-700 text-sm mt-1">{error}</p>
-                </div>
-              </div>
-            </div>
-          )}
-
-          {/* Results Display */}
-          {result && (
-            <div className="mt-6 bg-gradient-to-br from-green-50 to-emerald-50 border-2 border-green-200 rounded-xl p-6 shadow-lg">
-              <h2 className="text-2xl font-bold text-gray-800 mb-4 flex items-center gap-2">
-                <svg className="w-6 h-6 text-green-600" fill="currentColor" viewBox="0 0 20 20">
-                  <path fillRule="evenodd" d="M10 18a8 8 0 100-16 8 8 0 000 16zm3.707-9.293a1 1 0 00-1.414-1.414L9 10.586 7.707 9.293a1 1 0 00-1.414 1.414l2 2a1 1 0 001.414 0l4-4z" clipRule="evenodd"/>
-                </svg>
-                Detection Results
-              </h2>
-              
-              {/* Check if it's object detection format (with boxes) */}
-              {Array.isArray(result) && result[0]?.box ? (
-                <div className="space-y-3">
-                  <p className="text-gray-700 font-medium mb-3">
-                    Detected {result.length} object(s):
-                  </p>
-                  {result.map((item, idx) => (
-                    <div key={idx} className="bg-white rounded-lg p-4 shadow border border-gray-200">
-                      <div className="flex justify-between items-center mb-2">
-                        <span className="font-bold text-lg text-gray-800">{item.label}</span>
-                        <span className="bg-green-100 text-green-800 px-3 py-1 rounded-full text-sm font-semibold">
-                          {(item.score * 100).toFixed(1)}%
-                        </span>
-                      </div>
-                      <div className="text-xs text-gray-500 grid grid-cols-2 gap-2">
-                        <div>Box: x={Math.round(item.box.xmin)}, y={Math.round(item.box.ymin)}</div>
-                        <div>Size: {Math.round(item.box.xmax - item.box.xmin)}×{Math.round(item.box.ymax - item.box.ymin)}</div>
-                      </div>
-                    </div>
-                  ))}
-                </div>
-              ) : Array.isArray(result) && result[0]?.label ? (
-                // Classification results
-                <div className="space-y-3">
-                  {result.slice(0, 5).map((item, idx) => (
-                    <div key={idx} className="bg-white rounded-lg p-3 shadow">
-                      <div className="flex items-center gap-3 mb-2">
-                        <span className="font-semibold text-gray-700 min-w-[100px]">
-                          {item.label}
-                        </span>
-                        <div className="flex-1 bg-gray-200 rounded-full h-8 overflow-hidden">
-                          <div
-                            className="bg-gradient-to-r from-indigo-500 to-purple-500 h-full rounded-full flex items-center justify-end px-3 transition-all duration-500"
-                            style={{ width: `${(item.score * 100).toFixed(1)}%` }}
-                          >
-                            <span className="text-xs text-white font-bold">
-                              {(item.score * 100).toFixed(1)}%
-                            </span>
-                          </div>
-                        </div>
-                      </div>
-                    </div>
-                  ))}
-                </div>
-              ) : (
-                // Raw JSON output
-                <div className="bg-white rounded-lg p-4 shadow max-h-96 overflow-auto">
-                  <pre className="text-sm text-gray-800 whitespace-pre-wrap">
-                    {JSON.stringify(result, null, 2)}
-                  </pre>
-                </div>
-              )}
-            </div>
-          )}
-        </div>
-
-        {/* Info Card */}
-        <div className="mt-6 bg-white rounded-xl shadow-lg p-6">
-          <h3 className="font-bold text-gray-800 mb-3 text-lg">How to use:</h3>
-          <ol className="list-decimal list-inside space-y-2 text-gray-600">
-            <li>Drag and drop an aerial image or click to upload</li>
-            <li>Click "Run Detection" to analyze the image</li>
-            <li>View detected objects with confidence scores and bounding boxes</li>
-          </ol>
-          <div className="mt-4 p-3 bg-blue-50 rounded-lg border border-blue-200">
-            <p className="text-sm text-blue-800">
-              <strong>Note:</strong> First run may take 20-30 seconds while the model loads
-            </p>
-          </div>
-        </div>
-      </div>
-    </div>
-  );
-}

app.py

@@ -0,0 +1,131 @@
+import gradio as gr
+from transformers import AutoImageProcessor, AutoModelForObjectDetection
+import torch
+from PIL import Image, ImageDraw, ImageFont
+import numpy as np
+
+# Load your model
+MODEL_ID = "Meenu047/RGTB_Aerial_view_detection"
+
+print("Loading model...")
+processor = AutoImageProcessor.from_pretrained(MODEL_ID)
+model = AutoModelForObjectDetection.from_pretrained(MODEL_ID)
+print("Model loaded successfully!")
+
+def predict(image):
+    """
+    Run object detection on the input image
+    """
+    if image is None:
+        return None, "Please upload an image"
+    
+    # Prepare image
+    inputs = processor(images=image, return_tensors="pt")
+    
+    # Run inference
+    with torch.no_grad():
+        outputs = model(**inputs)
+    
+    # Post-process results
+    target_sizes = torch.tensor([image.size[::-1]])
+    results = processor.post_process_object_detection(
+        outputs, 
+        target_sizes=target_sizes, 
+        threshold=0.5
+    )[0]
+    
+    # Draw bounding boxes
+    draw = ImageDraw.Draw(image)
+    
+    # Try to use a nice font, fallback to default if not available
+    try:
+        font = ImageFont.truetype("/usr/share/fonts/truetype/dejavu/DejaVuSans-Bold.ttf", 20)
+    except:
+        font = ImageFont.load_default()
+    
+    detections = []
+    colors = ['red', 'blue', 'green', 'yellow', 'purple', 'orange', 'pink', 'cyan']
+    
+    for idx, (score, label, box) in enumerate(zip(results["scores"], results["labels"], results["boxes"])):
+        box = [round(i, 2) for i in box.tolist()]
+        confidence = round(score.item(), 3)
+        label_name = model.config.id2label[label.item()]
+        
+        # Draw rectangle
+        color = colors[idx % len(colors)]
+        draw.rectangle(box, outline=color, width=3)
+        
+        # Draw label
+        text = f"{label_name}: {confidence:.2f}"
+        text_bbox = draw.textbbox((box[0], box[1]), text, font=font)
+        draw.rectangle(text_bbox, fill=color)
+        draw.text((box[0], box[1]), text, fill='white', font=font)
+        
+        detections.append({
+            "Label": label_name,
+            "Confidence": f"{confidence * 100:.1f}%",
+            "Box": f"({int(box[0])}, {int(box[1])}) - ({int(box[2])}, {int(box[3])})"
+        })
+    
+    # Create results text
+    if len(detections) == 0:
+        results_text = "No objects detected with confidence > 50%"
+    else:
+        results_text = f"**Detected {len(detections)} object(s):**\n\n"
+        for i, det in enumerate(detections, 1):
+            results_text += f"**{i}. {det['Label']}**\n"
+            results_text += f"   - Confidence: {det['Confidence']}\n"
+            results_text += f"   - Location: {det['Box']}\n\n"
+    
+    return image, results_text
+
+# Create Gradio interface
+with gr.Blocks(theme=gr.themes.Soft()) as demo:
+    gr.Markdown(
+        """
+        # 🚁 RGTB Aerial View Detection
+        Upload an aerial image to detect objects using the trained model.
+        """
+    )
+    
+    with gr.Row():
+        with gr.Column():
+            input_image = gr.Image(
+                type="pil", 
+                label="Upload Aerial Image",
+                height=400
+            )
+            predict_btn = gr.Button("🔍 Run Detection", variant="primary", size="lg")
+            
+        with gr.Column():
+            output_image = gr.Image(
+                type="pil", 
+                label="Detection Results",
+                height=400
+            )
+            output_text = gr.Markdown(label="Detected Objects")
+    
+    gr.Examples(
+        examples=[],  # Add example images here if you have any
+        inputs=input_image,
+    )
+    
+    predict_btn.click(
+        fn=predict,
+        inputs=input_image,
+        outputs=[output_image, output_text]
+    )
+    
+    gr.Markdown(
+        """
+        ### How to use:
+        1. Upload or drag & drop an aerial image
+        2. Click "Run Detection" button
+        3. View the detected objects with bounding boxes and confidence scores
+        
+        **Model:** `Meenu047/RGTB_Aerial_view_detection`
+        """
+    )
+
+if __name__ == "__main__":
+    demo.launch()

requirements.txt

@@ -0,0 +1,6 @@
+gradio
+transformers
+torch
+torchvision
+pillow
+numpy