Upload components/LoRaCard.js with huggingface_hub

components/LoRaCard.js

@@ -0,0 +1,64 @@
+export default function LoRaCard({ model, onLoad, isLoading }) {
+  const formatSize = (bytes) => {
+    if (bytes === 0) return '0 Bytes';
+    const k = 1024;
+    const sizes = ['Bytes', 'KB', 'MB', 'GB'];
+    const i = Math.floor(Math.log(bytes) / Math.log(k));
+    return parseFloat((bytes / Math.pow(k, i)).toFixed(2)) + ' ' + sizes[i];
+  };
+
+  return (
+    <div className="bg-slate-800 rounded-xl border border-slate-700 overflow-hidden hover:border-purple-500 transition-all duration-300 shadow-lg hover:shadow-purple-900/20">
+      <div className="p-6">
+        <div className="flex items-start justify-between mb-4">
+          <div className="flex-1 min-w-0">
+            <h3 className="text-lg font-semibold text-white truncate" title={model.rfilename}>
+              {model.rfilename}
+            </h3>
+            <p className="text-slate-400 text-sm mt-1">
+              Size: {formatSize(model.size)}
+            </p>
+          </div>
+          <div className="ml-3 flex-shrink-0">
+            <span className="inline-flex items-center px-2.5 py-0.5 rounded-full text-xs font-medium bg-purple-900/50 text-purple-300 border border-purple-700">
+              LoRA
+            </span>
+          </div>
+        </div>
+        
+        <div className="bg-slate-900/50 rounded-lg p-3 mb-4">
+          <p className="text-xs text-slate-500 font-mono break-all">
+            SHA256: {model.oid ? model.oid.substring(0, 12) + '...' : 'Calculating...'}
+          </p>
+        </div>
+
+        <button
+          onClick={() => onLoad(model)}
+          disabled={isLoading}
+          className={`w-full py-2.5 px-4 rounded-lg font-medium text-sm transition-all duration-200 flex items-center justify-center gap-2
+            ${isLoading 
+              ? 'bg-slate-700 text-slate-400 cursor-not-allowed' 
+              : 'bg-gradient-to-r from-purple-600 to-indigo-600 hover:from-purple-500 hover:to-indigo-500 text-white shadow-lg hover:shadow-purple-500/25'
+            }`}
+        >
+          {isLoading ? (
+            <>
+              <svg className="animate-spin h-4 w-4 text-current" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24">
+                <circle className="opacity-25" cx="12" cy="12" r="10" stroke="currentColor" strokeWidth="4"></circle>
+                <path className="opacity-75" fill="currentColor" d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z"></path>
+              </svg>
+              Loading...
+            </>
+          ) : (
+            <>
+              <svg className="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+                <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M4 16v1a3 3 0 003 3h10a3 3 0 003-3v-1m-4-4l-4 4m0 0l-4-4m4 4V4" />
+              </svg>
+              Load Model
+            </>
+          )}
+        </button>
+      </div>
+    </div>
+  );
+}