Spaces:

deniztas
/

model

Running

App Files Files Community

deniztas commited on Jul 10, 2025

Commit

f1aaf2f

verified ·

1 Parent(s): 8e1bfbd

koyu mor gri tema ekle ve görünüşü değiştir - Follow Up Deployment

Browse files

Files changed (1) hide show

index.html +23 -22

index.html CHANGED Viewed

@@ -9,9 +9,10 @@
     <style>
         .prediction-bar {
             height: 24px;
-            background: linear-gradient(90deg, #3b82f6 0%, #8b5cf6 100%);
             border-radius: 12px;
             transition: width 0.3s ease;
         }
         .webcam-feed {
             border-radius: 16px;
@@ -28,52 +29,52 @@
         }
     </style>
 </head>
-<body class="bg-gradient-to-br from-gray-50 to-gray-100 min-h-screen">
     <div class="container mx-auto px-4 py-12">
         <div class="max-w-4xl mx-auto">
             <!-- Header -->
             <div class="text-center mb-12">
-                <h1 class="text-4xl font-bold text-gray-800 mb-2">
-                    <i class="fas fa-robot text-blue-500 mr-2"></i> AI Vision Classifier
                 </h1>
-                <p class="text-gray-600 max-w-lg mx-auto">
                     A real-time image classification system powered by Teachable Machine.
                     Point your camera at objects to see the AI's predictions.
                 </p>
             </div>
             <!-- Main Content -->
-            <div class="bg-white rounded-xl shadow-lg overflow-hidden">
                 <div class="p-6 md:p-8">
                     <!-- Webcam Container -->
                     <div class="flex flex-col md:flex-row gap-8">
                         <div class="flex-1">
                             <div class="mb-4 flex justify-between items-center">
-                                <h2 class="text-xl font-semibold text-gray-800">
-                                    <i class="fas fa-camera text-blue-500 mr-2"></i> Live Feed
                                 </h2>
                                 <div class="flex gap-2">
-                                    <button id="startBtn" onclick="init()" class="bg-blue-500 hover:bg-blue-600 text-white px-4 py-2 rounded-lg transition flex items-center">
                                         <i class="fas fa-play mr-2"></i> Start Camera
                                     </button>
-                                    <label for="fileUpload" class="bg-purple-500 hover:bg-purple-600 text-white px-4 py-2 rounded-lg transition flex items-center cursor-pointer">
                                         <i class="fas fa-upload mr-2"></i> Upload Image
                                         <input id="fileUpload" type="file" accept="image/*" class="hidden" onchange="handleImageUpload(this)">
                                     </label>
                                 </div>
                             </div>
-                            <div id="webcam-container" class="webcam-feed bg-gray-200 w-full aspect-square flex items-center justify-center rounded-lg overflow-hidden">
                                 <div class="text-center p-4">
-                                    <i class="fas fa-camera text-gray-400 text-4xl mb-2"></i>
-                                    <p class="text-gray-500">Camera feed will appear here</p>
                                 </div>
                             </div>
                         </div>
                         <!-- Predictions Container -->
                         <div class="flex-1">
-                            <h2 class="text-xl font-semibold text-gray-800 mb-4">
-                                <i class="fas fa-chart-bar text-purple-500 mr-2"></i> Predictions
                             </h2>
                             <div id="label-container" class="space-y-4">
                                 <div class="bg-gray-100 p-6 rounded-lg text-center">
@@ -86,11 +87,11 @@
                     </div>
                     <!-- Instructions -->
-                    <div class="mt-8 bg-blue-50 p-4 rounded-lg">
-                        <h3 class="font-medium text-blue-800 mb-2 flex items-center">
-                            <i class="fas fa-info-circle mr-2"></i> How to use
                         </h3>
-                        <ol class="list-decimal list-inside text-blue-700 space-y-1 text-sm">
                             <li>Click "Start Camera" and allow access to your webcam</li>
                             <li>Point your camera at objects you've trained the model to recognize</li>
                             <li>View real-time predictions with confidence percentages</li>
@@ -101,7 +102,7 @@
             </div>
             <!-- Footer -->
-            <div class="mt-8 text-center text-gray-500 text-sm">
                 <p>Powered by Teachable Machine and TensorFlow.js</p>
             </div>
         </div>
@@ -155,8 +156,8 @@
                 }
                 startBtn.innerHTML = '<i class="fas fa-check-circle mr-2"></i> Running';
-                startBtn.classList.remove('bg-blue-500', 'hover:bg-blue-600');
-                startBtn.classList.add('bg-green-500', 'hover:bg-green-600');
                 isRunning = true;
                 window.requestAnimationFrame(loop);

     <style>
         .prediction-bar {
             height: 24px;
+            background: linear-gradient(90deg, #7e22ce 0%, #a855f7 100%);
             border-radius: 12px;
             transition: width 0.3s ease;
+            box-shadow: 0 0 10px rgba(168, 85, 247, 0.5);
         }
         .webcam-feed {
             border-radius: 16px;
         }
     </style>
 </head>
+<body class="bg-gradient-to-br from-gray-900 to-purple-900 min-h-screen text-gray-100">
     <div class="container mx-auto px-4 py-12">
         <div class="max-w-4xl mx-auto">
             <!-- Header -->
             <div class="text-center mb-12">
+                <h1 class="text-4xl font-bold text-purple-300 mb-2">
+                    <i class="fas fa-robot text-purple-400 mr-2"></i> AI Vision Classifier
                 </h1>
+                <p class="text-gray-300 max-w-lg mx-auto">
                     A real-time image classification system powered by Teachable Machine.
                     Point your camera at objects to see the AI's predictions.
                 </p>
             </div>
             <!-- Main Content -->
+            <div class="bg-gray-800 rounded-xl shadow-lg overflow-hidden border border-purple-800">
                 <div class="p-6 md:p-8">
                     <!-- Webcam Container -->
                     <div class="flex flex-col md:flex-row gap-8">
                         <div class="flex-1">
                             <div class="mb-4 flex justify-between items-center">
+                                <h2 class="text-xl font-semibold text-purple-300">
+                                    <i class="fas fa-camera text-purple-400 mr-2"></i> Live Feed
                                 </h2>
                                 <div class="flex gap-2">
+                                    <button id="startBtn" onclick="init()" class="bg-purple-700 hover:bg-purple-600 text-white px-4 py-2 rounded-lg transition flex items-center">
                                         <i class="fas fa-play mr-2"></i> Start Camera
                                     </button>
+                                    <label for="fileUpload" class="bg-purple-800 hover:bg-purple-700 text-white px-4 py-2 rounded-lg transition flex items-center cursor-pointer">
                                         <i class="fas fa-upload mr-2"></i> Upload Image
                                         <input id="fileUpload" type="file" accept="image/*" class="hidden" onchange="handleImageUpload(this)">
                                     </label>
                                 </div>
                             </div>
+                            <div id="webcam-container" class="webcam-feed bg-gray-700 w-full aspect-square flex items-center justify-center rounded-lg overflow-hidden border border-purple-800">
                                 <div class="text-center p-4">
+                                    <i class="fas fa-camera text-purple-400 text-4xl mb-2"></i>
+                                    <p class="text-gray-300">Camera feed will appear here</p>
                                 </div>
                             </div>
                         </div>
                         <!-- Predictions Container -->
                         <div class="flex-1">
+                            <h2 class="text-xl font-semibold text-purple-300 mb-4">
+                                <i class="fas fa-chart-bar text-purple-400 mr-2"></i> Predictions
                             </h2>
                             <div id="label-container" class="space-y-4">
                                 <div class="bg-gray-100 p-6 rounded-lg text-center">
                     </div>
                     <!-- Instructions -->
+                    <div class="mt-8 bg-purple-900/30 p-4 rounded-lg border border-purple-800">
+                        <h3 class="font-medium text-purple-300 mb-2 flex items-center">
+                            <i class="fas fa-info-circle text-purple-400 mr-2"></i> How to use
                         </h3>
+                        <ol class="list-decimal list-inside text-purple-200 space-y-1 text-sm">
                             <li>Click "Start Camera" and allow access to your webcam</li>
                             <li>Point your camera at objects you've trained the model to recognize</li>
                             <li>View real-time predictions with confidence percentages</li>
             </div>
             <!-- Footer -->
+            <div class="mt-8 text-center text-gray-400 text-sm">
                 <p>Powered by Teachable Machine and TensorFlow.js</p>
             </div>
         </div>
                 }
                 startBtn.innerHTML = '<i class="fas fa-check-circle mr-2"></i> Running';
+                startBtn.classList.remove('bg-purple-700', 'hover:bg-purple-600');
+                startBtn.classList.add('bg-purple-600', 'hover:bg-purple-500');
                 isRunning = true;
                 window.requestAnimationFrame(loop);