File size: 10,619 Bytes
4ad8973 1604de1 06909b3 1604de1 4ad8973 |
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 180 181 182 183 184 185 186 187 188 189 190 191 192 193 194 195 |
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>FlameGuardian - YOLO-World 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="globe" class="mr-2"></i>
YOLO-World 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/MakiAi/YOLO-World" 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>
YOLO-World Demo
</h2>
<div class="bg-gray-200 rounded-lg overflow-hidden model-output">
<img src="http://static.photos/technology/640x360" alt="YOLO-World 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>
Integration Settings
</h2>
<div class="space-y-4">
<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>
<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>YOLO-World-S</option>
<option selected>YOLO-World-M</option>
<option>YOLO-World-L</option>
</select>
</div>
<div>
<label class="block text-sm font-medium text-gray-700 mb-1">Detection Threshold</label>
<input type="range" min="50" max="95" value="75" class="w-full h-2 bg-gray-200 rounded-lg appearance-none cursor-pointer">
<div class="text-right text-sm text-gray-600">75%</div>
</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>
Test Connection
</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="compass" class="text-blue-500"></i>
</div>
<h3 class="font-medium mb-1">Open-Vocabulary Detection</h3>
<p class="text-sm text-gray-600">Detect objects beyond predefined categories</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="cpu" class="text-purple-500"></i>
</div>
<h3 class="font-medium mb-1">Real-time Performance</h3>
<p class="text-sm text-gray-600">Optimized for high-speed inference</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="box" class="text-green-500"></i>
</div>
<h3 class="font-medium mb-1">Zero-shot Transfer</h3>
<p class="text-sm text-gray-600">Works without fine-tuning on new categories</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/MakiAi/YOLO-World" 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 YOLO-World implementation</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-teal-100 flex items-center justify-center mr-4">
<i data-feather="cpu" class="text-teal-500"></i>
</div>
<div>
<h3 class="font-medium">YOLOv10 Comparison</h3>
<p class="text-sm text-gray-600">Benchmark against YOLOv10</p>
</div>
</a>
<a href="yolov11.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-pink-100 flex items-center justify-center mr-4">
<i data-feather="cpu" class="text-pink-500"></i>
</div>
<div>
<h3 class="font-medium">YOLOv11 Comparison</h3>
<p class="text-sm text-gray-600">Benchmark against YOLOv11</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="#" 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="book-open" class="text-green-500"></i>
</div>
<div>
<h3 class="font-medium">Research Paper</h3>
<p class="text-sm text-gray-600">Technical details and benchmarks</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-red-100 flex items-center justify-center mr-4">
<i data-feather="youtube" class="text-red-500"></i>
</div>
<div>
<h3 class="font-medium">Demo Video</h3>
<p class="text-sm text-gray-600">See YOLO-World in action</p>
</div>
</a>
</div>
</div>
</div>
<script>
feather.replace();
</script>
</body>
</html> |