Add application file

app.js

@@ -0,0 +1,314 @@
+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>
+  );
+}