dewmetime/caption-wizard-trigger-words
0
1<!DOCTYPE html>2<html lang="en">3<head>4 <meta charset="UTF-8">5 <meta name="viewport" content="width=device-width, initial-scale=1.0">6 <title>AutoCaption Magic ✨</title>7 <link rel="stylesheet" href="style.css">8 <script src="https://cdn.tailwindcss.com"></script>9 <script src="https://unpkg.com/feather-icons"></script>10<script>11 tailwind.config = {12 theme: {13 extend: {14 colors: {15 primary: {16 500: '#6366f1',17 },18 secondary: {19 500: '#8b5cf6',20 }21 }22 }23 }24 }25 </script>26</head>27<body class="bg-gray-50 min-h-screen flex flex-col">28 <custom-navbar></custom-navbar>29 30 <main class="flex-grow container mx-auto px-4 py-12">31 <div class="max-w-4xl mx-auto bg-white rounded-xl shadow-md overflow-hidden p-8">32 <div class="text-center mb-10">33 <h1 class="text-4xl font-bold text-primary-500 mb-4">AutoCaption Magic ✨</h1>34 <p class="text-lg text-gray-600">Generate automatic captions for your LoRA training dataset</p>35 </div>36 37 <div class="space-y-8">38 <div class="bg-gray-50 p-6 rounded-lg border border-gray-200">39 <h2 class="text-2xl font-semibold text-gray-800 mb-4">Upload Your Images</h2>40 <div class="border-2 border-dashed border-gray-300 rounded-lg p-12 text-center cursor-pointer hover:bg-gray-100 transition" id="uploadArea">41 <i data-feather="upload-cloud" class="w-12 h-12 mx-auto text-primary-500 mb-4"></i>42 <p class="text-gray-600">Drag & drop your images here or click to browse</p>43 <p class="text-sm text-gray-500 mt-2">Supports JPG, PNG (max 100 images at once)</p>44 </div>45</div>46 <div class="bg-gray-50 p-6 rounded-lg border border-gray-200">47 <h2 class="text-2xl font-semibold text-gray-800 mb-4">Caption Settings</h2>48 <div class="grid md:grid-cols-2 gap-6">49 <div>50 <label class="block text-sm font-medium text-gray-700 mb-1">Trigger Word</label>51 <input type="text" placeholder="e.g. 'myLoraStyle'" class="w-full rounded-md border-gray-300 shadow-sm focus:border-primary-500 focus:ring-primary-500">52 <p class="text-xs text-gray-500 mt-1">This word will be prepended to all captions</p>53 </div>54<div>55 <label class="block text-sm font-medium text-gray-700 mb-1">Model Type</label>56 <select class="w-full rounded-md border-gray-300 shadow-sm focus:border-primary-500 focus:ring-primary-500">57 <option>BLIP (Default)</option>58 <option>CLIP Interrogator</option>59 <option>BLIP-2</option>60 </select>61 </div>62 <div>63 <label class="block text-sm font-medium text-gray-700 mb-1">Detail Level</label>64 <select class="w-full rounded-md border-gray-300 shadow-sm focus:border-primary-500 focus:ring-primary-500">65 <option>Medium (Recommended)</option>66 <option>Brief</option>67 <option>Detailed</option>68 </select>69 </div>70 <div>71 <label class="block text-sm font-medium text-gray-700 mb-1">Include Tags</label>72 <div class="flex items-center space-x-4">73 <label class="inline-flex items-center">74 <input type="checkbox" class="rounded border-gray-300 text-primary-500 shadow-sm focus:border-primary-500 focus:ring-primary-500">75 <span class="ml-2">Artistic Styles</span>76 </label>77 <label class="inline-flex items-center">78 <input type="checkbox" class="rounded border-gray-300 text-primary-500 shadow-sm focus:border-primary-500 focus:ring-primary-500">79 <span class="ml-2">Medium/Technique</span>80 </label>81 </div>82 </div>83 <div>84 <label class="block text-sm font-medium text-gray-700 mb-1">Custom Prefix</label>85 <input type="text" placeholder="e.g. 'a photo of'" class="w-full rounded-md border-gray-300 shadow-sm focus:border-primary-500 focus:ring-primary-500">86 </div>87 </div>88 </div>89 90 <div class="flex justify-center">91 <button class="px-8 py-3 bg-primary-500 hover:bg-primary-600 text-white font-medium rounded-lg shadow-md transition duration-300 flex items-center hovered-element" id="generateBtn">92 <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-zap w-5 h-5 mr-2"><polygon points="13 2 3 14 12 14 11 22 21 10 12 10 13 2"></polygon></svg>93 Generate Captions94 </button>95</div>96 </div>97 </div>98 </main>99 100 <custom-footer></custom-footer>101 102 <script src="components/navbar.js"></script>103 <script src="components/footer.js"></script>104 <script src="script.js"></script>105 <script>106 document.addEventListener('DOMContentLoaded', function() {107 feather.replace();108 109 // File upload functionality110 const uploadArea = document.getElementById('uploadArea');111 const generateBtn = document.getElementById('generateBtn');112 113 if (uploadArea) {114 uploadArea.addEventListener('click', function() {115 const fileInput = document.createElement('input');116 fileInput.type = 'file';117 fileInput.multiple = true;118 fileInput.accept = 'image/*';119 fileInput.click();120 121 fileInput.addEventListener('change', function(e) {122 if (e.target.files.length > 0) {123 uploadArea.innerHTML = `124 <i data-feather="check-circle" class="w-12 h-12 mx-auto text-green-500 mb-4"></i>125 <p class="text-gray-600">${e.target.files.length} images selected</p>126 <p class="text-sm text-gray-500 mt-2">Ready for caption generation</p>127 `;128 feather.replace();129 130 // Enable generate button131 if (generateBtn) {132 generateBtn.disabled = false;133 }134 }135 });136 });137 138 // Drag and drop functionality139 uploadArea.addEventListener('dragover', function(e) {140 e.preventDefault();141 uploadArea.classList.add('bg-primary-50', 'border-primary-300');142 });143 144 uploadArea.addEventListener('dragleave', function(e) {145 e.preventDefault();146 uploadArea.classList.remove('bg-primary-50', 'border-primary-300');147 });148 149 uploadArea.addEventListener('drop', function(e) {150 e.preventDefault();151 uploadArea.classList.remove('bg-primary-50', 'border-primary-300');152 153 if (e.dataTransfer.files.length > 0) {154 uploadArea.innerHTML = `155 <i data-feather="check-circle" class="w-12 h-12 mx-auto text-green-500 mb-4"></i>156 <p class="text-gray-600">${e.dataTransfer.files.length} images selected</p>157 <p class="text-sm text-gray-500 mt-2">Ready for caption generation</p>158 `;159 feather.replace();160 161 // Enable generate button162 if (generateBtn) {163 generateBtn.disabled = false;164 }165 }166 });167 }168 169 if (generateBtn) {170 generateBtn.addEventListener('click', function() {171 if (!this.disabled) {172 this.innerHTML = `173 <i data-feather="loader" class="w-5 h-5 mr-2 animate-spin"></i>174 Generating Captions...175 `;176 feather.replace();177 178 // Simulate caption generation179 setTimeout(() => {180 this.innerHTML = `181 <i data-feather="check-circle" class="w-5 h-5 mr-2"></i>182 Captions Generated!183 `;184 feather.replace();185 186 // Show download option187 setTimeout(() => {188 this.innerHTML = `189 <i data-feather="download" class="w-5 h-5 mr-2"></i>190 Download Results191 `;192 feather.replace();193 }, 3000);194 }195 });196 }197 });198 </script>199</body>200</html>