File size: 9,457 Bytes
ae98c14 |
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 |
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>FlameGuardian - AI Integration Control</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;
}
.ai-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="brain" class="mr-2"></i>
AI Integration Control
</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>
</div>
</div>
<div class="grid grid-cols-1 lg:grid-cols-2 gap-6 mb-8">
<!-- AI Control Panel -->
<div class="bg-white rounded-xl shadow-md p-6">
<h2 class="text-lg font-semibold mb-4 flex items-center">
<i data-feather="cpu" class="mr-2"></i>
AI Model Control
</h2>
<div class="space-y-4">
<div>
<label class="block text-sm font-medium text-gray-700 mb-1">AI Model Selection</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>Qwen3-VL-235B-A22B-Thinking</option>
<option>GPT-4 Vision</option>
<option>Claude 3 Opus</option>
<option>Gemini Pro Vision</option>
</select>
</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" placeholder="hf_xxxxxxxxxxxxxxxx">
</div>
<div>
<label class="block text-sm font-medium text-gray-700 mb-1">OpenAI-Compatible Endpoint</label>
<input type="text" 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" value="https://router.huggingface.co/v1">
</div>
<div class="flex items-center">
<input type="checkbox" id="enableAI" class="h-4 w-4 text-blue-600 focus:ring-blue-500 border-gray-300 rounded" checked>
<label for="enableAI" class="ml-2 block text-sm text-gray-700">Enable AI Processing</label>
</div>
<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 AI Connection
</button>
</div>
</div>
<!-- Live AI Output -->
<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>
AI Vision Output
</h2>
<div class="bg-gray-200 rounded-lg overflow-hidden ai-output">
<img src="http://static.photos/technology/640x360" alt="AI Vision 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">
AI Analysis Output
</div>
</div>
<div class="mt-4 p-4 bg-gray-100 rounded-lg">
<h3 class="font-medium text-gray-800 mb-2">AI Response:</h3>
<p class="text-sm text-gray-600">The Statue of Liberty stands on Liberty Island in New York Harbor, a monumental sculpture gifted by France to the United States.</p>
</div>
</div>
</div>
<!-- API Configuration -->
<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="settings" class="mr-2"></i>
API Configuration
</h2>
<div class="grid grid-cols-1 md:grid-cols-2 gap-6">
<div>
<h3 class="font-medium text-gray-800 mb-3">OpenAI-Compatible API</h3>
<div class="space-y-4">
<div>
<label class="block text-sm font-medium text-gray-700 mb-1">Base URL</label>
<input type="text" 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" value="https://router.huggingface.co/v1">
</div>
<div>
<label class="block text-sm font-medium text-gray-700 mb-1">Model Name</label>
<input type="text" 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" value="Qwen/Qwen3-VL-235B-A22B-Thinking">
</div>
<div>
<label class="block text-sm font-medium text-gray-700 mb-1">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" placeholder="Enter your API key">
</div>
</div>
</div>
<div>
<h3 class="font-medium text-gray-800 mb-3">Stream Settings</h3>
<div class="space-y-4">
<div>
<label class="block text-sm font-medium text-gray-700 mb-1">Temperature</label>
<input type="range" min="0" max="1" step="0.1" value="0.7" class="w-full h-2 bg-gray-200 rounded-lg appearance-none cursor-pointer">
<div class="text-right text-sm text-gray-600">0.7</div>
</div>
<div>
<label class="block text-sm font-medium text-gray-700 mb-1">Max Tokens</label>
<input type="number" 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" value="1000">
</div>
<div class="flex items-center">
<input type="checkbox" id="enableStream" class="h-4 w-4 text-blue-600 focus:ring-blue-500 border-gray-300 rounded" checked>
<label for="enableStream" class="ml-2 block text-sm text-gray-700">Enable Streaming</label>
</div>
<button class="w-full bg-blue-600 text-white py-2 px-4 rounded-md hover:bg-blue-700 transition">
<i data-feather="play" class="inline mr-2"></i>
Test Connection
</button>
</div>
</div>
</div>
</div>
<!-- Code Example -->
<div class="bg-white rounded-xl shadow-md p-6">
<h2 class="text-lg font-semibold mb-4 flex items-center">
<i data-feather="code" class="mr-2"></i>
Integration Code Example
</h2>
<div class="bg-gray-900 text-gray-100 p-4 rounded-lg font-mono text-sm overflow-x-auto">
<pre><code>import os
from openai import OpenAI
client = OpenAI(
base_url="https://router.huggingface.co/v1",
api_key=os.environ["HF_TOKEN"],
)
stream = client.chat.completions.create(
model="Qwen/Qwen3-VL-235B-A22B-Thinking",
messages=[
{
"role": "user",
"content": [
{
"type": "text",
"text": "Describe this image in one sentence."
},
{
"type": "image_url",
"image_url": {
"url": "https://cdn.britannica.com/61/93061-050-99147DCE/Statue-of-Liberty-Island-New-York-Bay.jpg"
}
}
]
}
],
stream=True,
)
for chunk in stream:
print(chunk.choices[0].delta.content, end="")</code></pre>
</div>
</div>
</div>
<script>
feather.replace();
</script>
</body>
</html> |