Upload components/ImageOutput.jsx with huggingface_hub

components/ImageOutput.jsx

@@ -0,0 +1,48 @@
+export default function ImageOutput({ image, loading, usedSeed }) {
+  return (
+    <div className="space-y-4">
+      <div className="bg-white rounded-xl shadow-md p-6">
+        <label className="block text-sm font-semibold text-slate-700 mb-4">
+          Generated Image
+        </label>
+        <div className="relative aspect-square bg-slate-100 rounded-lg overflow-hidden">
+          {loading ? (
+            <div className="absolute inset-0 flex items-center justify-center">
+              <div className="text-center">
+                <svg className="animate-spin h-12 w-12 text-primary-500 mx-auto mb-4" 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>
+                <p className="text-slate-600">Generating your image...</p>
+              </div>
+            </div>
+          ) : image ? (
+            <img
+              src={image}
+              alt="Generated"
+              className="w-full h-full object-contain"
+            />
+          ) : (
+            <div className="absolute inset-0 flex items-center justify-center text-slate-400">
+              <p>Your generated image will appear here</p>
+            </div>
+          )}
+        </div>
+      </div>
+
+      {usedSeed && (
+        <div className="bg-white rounded-xl shadow-md p-4">
+          <label className="block text-sm font-medium text-slate-700 mb-2">
+            🎲 Seed Used
+          </label>
+          <input
+            type="text"
+            value={usedSeed}
+            readOnly
+            className="w-full px-4 py-2 bg-slate-50 border border-slate-300 rounded-lg text-slate-700"
+          />
+        </div>
+      )}
+    </div>
+  );
+}