File size: 9,621 Bytes
06909b3 |
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 114 115 116 117 118 119 120 121 122 123 124 125 126 127 128 129 130 131 132 133 134 135 136 137 138 139 140 141 142 143 144 145 146 147 148 149 150 151 152 153 154 155 156 157 158 159 160 161 162 163 164 165 166 167 168 169 170 171 172 173 174 175 176 177 178 179 |
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>FlameGuardian - YOLOv11 Integration</title>
<script src="https://cdn.tailwindcss.com"></script>
<script src="https://unpkg.com/feather-icons"></script>
<style>
@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;500;600;700&display=swap');
body {
font-family: 'Poppins', sans-serif;
}
.model-output {
aspect-ratio: 16/9;
}
</style>
</head>
<body class="bg-gray-50 min-h-screen">
<div class="container mx-auto px-4 py-8">
<div class="flex justify-between items-center mb-8">
<h1 class="text-2xl font-bold text-gray-800 flex items-center">
<i data-feather="cpu" class="mr-2"></i>
YOLOv11 Model Integration
</h1>
<div class="flex space-x-4">
<a href="index.html" class="text-blue-600 hover:text-blue-800 flex items-center">
<i data-feather="arrow-left" class="mr-1"></i> Back to Dashboard
</a>
<a href="https://huggingface.co/spaces/Ultralytics/YOLO11" target="_blank" class="text-blue-600 hover:text-blue-800 flex items-center">
<i data-feather="external-link" class="mr-1"></i> View on HuggingFace
</a>
</div>
</div>
<div class="grid grid-cols-1 lg:grid-cols-2 gap-6 mb-8">
<!-- Model Demo -->
<div class="bg-white rounded-xl shadow-md p-6">
<h2 class="text-lg font-semibold mb-4 flex items-center">
<i data-feather="eye" class="mr-2"></i>
YOLOv11 Demo
</h2>
<div class="bg-gray-200 rounded-lg overflow-hidden model-output">
<img src="http://static.photos/technology/640x360" alt="YOLOv11 Output" class="w-full h-full object-cover">
<div class="bg-black/50 text-white px-2 py-1 absolute bottom-2 left-2 rounded text-xs">
Model Output Preview
</div>
</div>
<div class="mt-4 grid grid-cols-2 gap-3">
<button class="px-4 py-2 bg-blue-600 text-white rounded-lg hover:bg-blue-700 transition flex items-center justify-center">
<i data-feather="upload" class="mr-2"></i>
Upload Image
</button>
<button class="px-4 py-2 bg-purple-600 text-white rounded-lg hover:bg-purple-700 transition flex items-center justify-center">
<i data-feather="camera" class="mr-2"></i>
Use Webcam
</button>
</div>
</div>
<!-- Configuration -->
<div class="bg-white rounded-xl shadow-md p-6">
<h2 class="text-lg font-semibold mb-4 flex items-center">
<i data-feather="settings" class="mr-2"></i>
YOLOv11 Settings
</h2>
<div class="space-y-4">
<div>
<label class="block text-sm font-medium text-gray-700 mb-1">Model Version</label>
<select class="w-full px-3 py-2 border border-gray-300 rounded-md shadow-sm focus:outline-none focus:ring-blue-500 focus:border-blue-500">
<option>YOLOv11-Nano</option>
<option>YOLOv11-Small</option>
<option selected>YOLOv11-Medium</option>
<option>YOLOv11-Large</option>
<option>YOLOv11-Extra Large</option>
</select>
</div>
<div>
<label class="block text-sm font-medium text-gray-700 mb-1">Confidence Threshold</label>
<input type="range" min="50" max="95" value="85" class="w-full h-2 bg-gray-200 rounded-lg appearance-none cursor-pointer">
<div class="text-right text-sm text-gray-600">85%</div>
</div>
<div>
<label class="block text-sm font-medium text-gray-700 mb-1">HuggingFace API Key</label>
<input type="password" class="w-full px-3 py-2 border border-gray-300 rounded-md shadow-sm focus:outline-none focus:ring-blue-500 focus:border-blue-500">
</div>
<div class="pt-4">
<button class="w-full bg-green-600 text-white py-2 px-4 rounded-md hover:bg-green-700 transition flex items-center justify-center">
<i data-feather="refresh-cw" class="mr-2"></i>
Initialize Model
</button>
</div>
</div>
</div>
</div>
<!-- Features -->
<div class="bg-white rounded-xl shadow-md p-6 mb-8">
<h2 class="text-lg font-semibold mb-4 flex items-center">
<i data-feather="zap" class="mr-2"></i>
Key Features
</h2>
<div class="grid grid-cols-1 md:grid-cols-3 gap-4">
<div class="p-4 border border-gray-200 rounded-lg">
<div class="w-10 h-10 rounded-full bg-blue-100 flex items-center justify-center mb-3">
<i data-feather="activity" class="text-blue-500"></i>
</div>
<h3 class="font-medium mb-1">Enhanced Accuracy</h3>
<p class="text-sm text-gray-600">Improved detection performance</p>
</div>
<div class="p-4 border border-gray-200 rounded-lg">
<div class="w-10 h-10 rounded-full bg-purple-100 flex items-center justify-center mb-3">
<i data-feather="clock" class="text-purple-500"></i>
</div>
<h3 class="font-medium mb-1">Faster Inference</h3>
<p class="text-sm text-gray-600">Optimized for real-time processing</p>
</div>
<div class="p-4 border border-gray-200 rounded-lg">
<div class="w-10 h-10 rounded-full bg-green-100 flex items-center justify-center mb-3">
<i data-feather="layers" class="text-green-500"></i>
</div>
<h3 class="font-medium mb-1">Advanced Architecture</h3>
<p class="text-sm text-gray-600">Next-gen neural network design</p>
</div>
</div>
</div>
<!-- Documentation -->
<div class="bg-white rounded-xl shadow-md p-6">
<h2 class="text-lg font-semibold mb-4 flex items-center">
<i data-feather="book" class="mr-2"></i>
Resources
</h2>
<div class="grid grid-cols-1 md:grid-cols-2 gap-4">
<a href="https://huggingface.co/spaces/Ultralytics/YOLO11" target="_blank" class="p-4 border border-gray-200 rounded-lg hover:bg-gray-50 transition flex items-center">
<div class="w-10 h-10 rounded-full bg-blue-100 flex items-center justify-center mr-4">
<i data-feather="external-link" class="text-blue-500"></i>
</div>
<div>
<h3 class="font-medium">HuggingFace Space</h3>
<p class="text-sm text-gray-600">Official YOLOv11 implementation</p>
</div>
</a>
<a href="#" class="p-4 border border-gray-200 rounded-lg hover:bg-gray-50 transition flex items-center">
<div class="w-10 h-10 rounded-full bg-purple-100 flex items-center justify-center mr-4">
<i data-feather="github" class="text-purple-500"></i>
</div>
<div>
<h3 class="font-medium">GitHub Repository</h3>
<p class="text-sm text-gray-600">Source code and documentation</p>
</div>
</a>
<a href="yolov10.html" class="p-4 border border-gray-200 rounded-lg hover:bg-gray-50 transition flex items-center">
<div class="w-10 h-10 rounded-full bg-green-100 flex items-center justify-center mr-4">
<i data-feather="cpu" class="text-green-500"></i>
</div>
<div>
<h3 class="font-medium">Compare with YOLOv10</h3>
<p class="text-sm text-gray-600">Benchmark performance</p>
</div>
</a>
<a href="yoloworld.html" class="p-4 border border-gray-200 rounded-lg hover:bg-gray-50 transition flex items-center">
<div class="w-10 h-10 rounded-full bg-indigo-100 flex items-center justify-center mr-4">
<i data-feather="globe" class="text-indigo-500"></i>
</div>
<div>
<h3 class="font-medium">YOLO-World Integration</h3>
<p class="text-sm text-gray-600">Advanced object detection</p>
</div>
</a>
</div>
</div>
</div>
<script>
feather.replace();
</script>
</body>
</html> |