wehub-resource-sync
172 lines
15 KiB
HTML
172 lines
15 KiB
HTML
<!DOCTYPE html>
|
|
<html lang="en" class="dark">
|
|
<head>
|
|
<meta charset="UTF-8">
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
|
<title>V-Start</title>
|
|
<script src="https://cdn.tailwindcss.com"></script>
|
|
<script>
|
|
// Tailwind dark mode configuration
|
|
tailwind.config = {
|
|
darkMode: 'class',
|
|
}
|
|
</script>
|
|
<link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;900&display=swap" rel="stylesheet">
|
|
<link rel="stylesheet" href="/style.css">
|
|
</head>
|
|
<body class="bg-gray-100 dark:bg-gray-900 text-gray-800 dark:text-gray-200 transition-colors duration-300">
|
|
|
|
<header id="main-header" class="bg-gradient-to-r from-gray-800 to-gray-900 dark:from-gray-900 dark:to-black text-white shadow-2xl">
|
|
<div class="container mx-auto px-4 sm:px-6 lg:px-8 py-8">
|
|
<div class="flex justify-between items-start">
|
|
<div>
|
|
<h1 class="text-4xl md:text-5xl font-black tracking-tight">V-Start</h1>
|
|
<p class="mt-2 text-lg text-gray-300">A Toolkit for Veo Prompting and Evaluation</p>
|
|
</div>
|
|
<div class="flex items-center space-x-4">
|
|
<button id="theme-toggle" class="p-2 rounded-lg bg-gray-700 hover:bg-gray-600 dark:bg-gray-800 dark:hover:bg-gray-700 transition-colors duration-200" title="Switch theme">
|
|
<svg id="theme-toggle-light-icon" class="w-5 h-5 text-yellow-400" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg" style="display: none;">
|
|
<path fill-rule="evenodd" d="M10 2a1 1 0 011 1v1a1 1 0 11-2 0V3a1 1 0 011-1zm4 8a4 4 0 11-8 0 4 4 0 018 0zm-.464 4.95l.707.707a1 1 0 001.414-1.414l-.707-.707a1 1 0 00-1.414 1.414zm2.12-10.607a1 1 0 010 1.414l-.706.707a1 1 0 11-1.414-1.414l.707-.707a1 1 0 011.414 0zM17 11a1 1 0 100-2h-1a1 1 0 100 2h1zm-7 4a1 1 0 011 1v1a1 1 0 11-2 0v-1a1 1 0 011-1zM5.05 6.464A1 1 0 106.465 5.05l-.708-.707a1 1 0 00-1.414 1.414l.707.707zm1.414 8.486l-.707.707a1 1 0 01-1.414-1.414l.707-.707a1 1 0 011.414 1.414zM4 11a1 1 0 100-2H3a1 1 0 000 2h1z" clip-rule="evenodd"></path>
|
|
</svg>
|
|
<svg id="theme-toggle-dark-icon" class="w-5 h-5 text-gray-400" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg" style="display: block;">
|
|
<path d="M17.293 13.293A8 8 0 016.707 2.707a8.001 8.001 0 1010.586 10.586z"></path>
|
|
</svg>
|
|
</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</header>
|
|
|
|
<main class="container mx-auto px-4 sm:px-6 lg:px-8 py-8">
|
|
<div class="flex flex-col md:flex-row gap-8">
|
|
<nav class="md:w-64">
|
|
<div class="space-y-6">
|
|
<div>
|
|
<h4 class="px-4 mb-2 text-lg font-bold text-gray-700 dark:text-gray-300">Prompting</h4>
|
|
<div class="space-y-2 bg-gray-200 dark:bg-gray-800 p-1.5 rounded-xl">
|
|
<button id="generator-main-tab" class="main-tab flex items-center justify-center md:justify-start w-full py-2.5 px-4 font-bold rounded-lg text-sm">
|
|
<svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5 mr-2" viewBox="0 0 20 20" fill="currentColor"><path fill-rule="evenodd" d="M11.3 1.046A1 1 0 0112 2v5h4a1 1 0 01.82 1.573l-7 10A1 1 0 018 18v-5H4a1 1 0 01-.82-1.573l7-10a1 1 0 011.12-.38z" clip-rule="evenodd" /></svg>
|
|
<span class="truncate">Generator</span>
|
|
</button>
|
|
<button id="enhancer-main-tab" class="main-tab flex items-center justify-center md:justify-start w-full py-2.5 px-4 font-bold rounded-lg text-sm">
|
|
<svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5 mr-2" viewBox="0 0 20 20" fill="currentColor"><path fill-rule="evenodd" d="M5 2a1 1 0 011 1v1h1a1 1 0 010 2H6v1a1 1 0 01-2 0V6H3a1 1 0 010-2h1V3a1 1 0 011-1zm0 10a1 1 0 011 1v1h1a1 1 0 110 2H6v1a1 1 0 11-2 0v-1H3a1 1 0 110-2h1v-1a1 1 0 011-1zM12 2a1 1 0 01.967.744L14.146 7.2 17.5 9.134a1 1 0 010 1.732l-3.354 1.935-1.18 4.455a1 1 0 01-1.933 0L9.854 12.8l-3.354-1.935a1 1 0 010-1.732L10.146 7.2A1 1 0 0112 2z" clip-rule="evenodd" /></svg>
|
|
<span class="truncate">Enhancer</span>
|
|
</button>
|
|
<button id="converter-main-tab" class="main-tab flex items-center justify-center md:justify-start w-full py-2.5 px-4 font-bold rounded-lg text-sm">
|
|
<svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5 mr-2" viewBox="0 0 20 20" fill="currentColor"><path fill-rule="evenodd" d="M15.28 4.72a.75.75 0 010 1.06l-4.25 4.25a.75.75 0 000 1.06l4.25 4.25a.75.75 0 11-1.06 1.06l-4.25-4.25a2.25 2.25 0 010-3.18l4.25-4.25a.75.75 0 011.06 0zm-8.56 0a.75.75 0 011.06 0l4.25 4.25a2.25 2.25 0 010 3.18l-4.25 4.25a.75.75 0 11-1.06-1.06l4.25-4.25a.75.75 0 000-1.06L4.72 5.78a.75.75 0 010-1.06z" clip-rule="evenodd" /></svg>
|
|
<span class="truncate">Converter</span>
|
|
</button>
|
|
<button id="timeline-main-tab" class="main-tab flex items-center justify-center md:justify-start w-full py-2.5 px-4 font-bold rounded-lg text-sm">
|
|
<svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5 mr-2" viewBox="0 0 20 20" fill="currentColor"><path fill-rule="evenodd" d="M10 18a8 8 0 100-16 8 8 0 000 16zm1-12a1 1 0 10-2 0v4a1 1 0 00.293.707l2.828 2.829a1 1 0 101.414-1.415L11 10.586V6z" clip-rule="evenodd" /></svg>
|
|
<span class="truncate">Timeline</span>
|
|
</button>
|
|
<button id="gallery-main-tab" class="main-tab flex items-center justify-center md:justify-start w-full py-2.5 px-4 font-bold rounded-lg text-sm">
|
|
<svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5 mr-2" viewBox="0 0 20 20" fill="currentColor"><path d="M7 3a1 1 0 000 2h6a1 1 0 100-2H7zM4 7a1 1 0 011-1h10a1 1 0 110 2H5a1 1 0 01-1-1zM2 11a2 2 0 012-2h12a2 2 0 012 2v4a2 2 0 01-2 2H4a2 2 0 01-2-2v-4z" /></svg>
|
|
<span class="truncate">Gallery</span>
|
|
</button>
|
|
</div>
|
|
</div>
|
|
<div>
|
|
<h4 class="px-4 mb-2 text-lg font-bold text-gray-700 dark:text-gray-300">Evaluation</h4>
|
|
<div class="space-y-2 bg-gray-200 dark:bg-gray-800 p-1.5 rounded-xl">
|
|
<button id="alignment-eval-main-tab" class="main-tab flex items-center justify-center md:justify-start w-full py-2.5 px-4 font-bold rounded-lg text-sm">
|
|
<svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5 mr-2" viewBox="0 0 20 20" fill="currentColor"><path fill-rule="evenodd" d="M10 18a8 8 0 100-16 8 8 0 000 16zm3.707-9.293a1 1 0 00-1.414-1.414L9 10.586 7.707 9.293a1 1 0 00-1.414 1.414l2 2a1 1 0 001.414 0l4-4z" clip-rule="evenodd" /></svg>
|
|
<span class="truncate">Alignment Eval</span>
|
|
</button>
|
|
<button id="eval-main-tab" class="main-tab flex items-center justify-center md:justify-start w-full py-2.5 px-4 font-bold rounded-lg text-sm">
|
|
<svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5 mr-2" viewBox="0 0 20 20" fill="currentColor"><path d="M17.414 2.586a2 2 0 00-2.828 0L7 10.172V13h2.828l7.586-7.586a2 2 0 000-2.828z" /><path fill-rule="evenodd" d="M2 6a2 2 0 012-2h4a1 1 0 010 2H4v10h10v-4a1 1 0 112 0v4a2 2 0 01-2 2H4a2 2 0 01-2-2V6z" clip-rule="evenodd" /></svg>
|
|
<span class="truncate">A/B Eval</span>
|
|
</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</nav>
|
|
|
|
<div class="flex-1">
|
|
<div id="auth-section-container" class="mb-8 bg-white dark:bg-gray-800 rounded-2xl shadow-xl border-l-4 border-indigo-500 dark:border-indigo-400 overflow-hidden">
|
|
<div id="auth-header" class="flex justify-between items-center p-4 cursor-pointer hover:bg-gray-50 dark:hover:bg-gray-700">
|
|
<h3 class="text-xl font-bold text-gray-800 dark:text-gray-200">Authentication</h3>
|
|
<div class="flex items-center">
|
|
<p class="text-sm text-gray-500 dark:text-gray-400 italic mr-2">(Click to hide)</p>
|
|
<svg id="auth-chevron" class="h-6 w-6 text-gray-600 dark:text-gray-300 transform transition-transform" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor">
|
|
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 9l-7 7-7-7" />
|
|
</svg>
|
|
</div>
|
|
</div>
|
|
<div id="auth-content" class="px-6 pb-6 border-t border-gray-200 dark:border-gray-700 transition-all duration-300">
|
|
<div class="grid grid-cols-1 md:grid-cols-2 gap-6 pt-6">
|
|
<div>
|
|
<label for="auth-method-select" class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-1">Method</label>
|
|
<select id="auth-method-select" class="w-full p-2 border border-gray-300 dark:border-gray-600 rounded-md shadow-sm bg-white dark:bg-gray-700 text-gray-900 dark:text-gray-100">
|
|
<option value="access-token" selected>gcloud Access Token</option>
|
|
<option value="api-key">API Key</option>
|
|
</select>
|
|
</div>
|
|
<div id="api-key-auth-section" style="display: none;">
|
|
<label class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-1">API Key Status</label>
|
|
<p class="text-sm text-gray-600 dark:text-gray-400 p-2">The application will securely use the API key configured on the server.</p>
|
|
</div>
|
|
<div id="access-token-auth-section">
|
|
<div class="mb-4">
|
|
<label for="project-id-input" class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-1">Your Google Cloud Project ID</label>
|
|
<input type="text" id="project-id-input" class="w-full p-2 border border-gray-300 dark:border-gray-600 rounded-md shadow-sm bg-white dark:bg-gray-700 text-gray-900 dark:text-gray-100" placeholder="e.g., my-gcp-project" autocomplete="off">
|
|
</div>
|
|
<div class="mb-4">
|
|
<label for="location-input" class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-1">Vertex AI Location</label>
|
|
<select id="location-input" class="w-full p-2 border border-gray-300 dark:border-gray-600 rounded-md shadow-sm bg-white dark:bg-gray-700 text-gray-900 dark:text-gray-100">
|
|
<option value="us-central1" selected>us-central1 (Iowa)</option>
|
|
<option value="us-east1">us-east1 (South Carolina)</option>
|
|
<option value="us-east4">us-east4 (Virginia)</option>
|
|
<option value="us-west1">us-west1 (Oregon)</option>
|
|
<option value="us-west2">us-west2 (Los Angeles)</option>
|
|
<option value="us-west3">us-west3 (Salt Lake City)</option>
|
|
<option value="us-west4">us-west4 (Las Vegas)</option>
|
|
<option value="northamerica-northeast1">northamerica-northeast1 (Montreal)</option>
|
|
<option value="europe-west1">europe-west1 (Belgium)</option>
|
|
<option value="europe-west2">europe-west2 (London)</option>
|
|
<option value="europe-west3">europe-west3 (Frankfurt)</option>
|
|
<option value="europe-west4">europe-west4 (Netherlands)</option>
|
|
<option value="europe-west6">europe-west6 (Zurich)</option>
|
|
<option value="asia-east1">asia-east1 (Taiwan)</option>
|
|
<option value="asia-northeast1">asia-northeast1 (Tokyo)</option>
|
|
<option value="asia-northeast3">asia-northeast3 (Seoul)</option>
|
|
<option value="asia-south1">asia-south1 (Mumbai)</option>
|
|
<option value="asia-southeast1">asia-southeast1 (Singapore)</option>
|
|
<option value="australia-southeast1">australia-southeast1 (Sydney)</option>
|
|
</select>
|
|
<p class="text-xs text-gray-500 dark:text-gray-400 mt-1">
|
|
Select the region where your Vertex AI API is enabled
|
|
</p>
|
|
</div>
|
|
<div>
|
|
<label for="access-token-input" class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-1">Your gcloud Access Token</label>
|
|
<div class="flex items-center gap-2">
|
|
<input type="password" id="access-token-input" class="flex-grow w-full p-2 border border-gray-300 dark:border-gray-600 rounded-md shadow-sm bg-white dark:bg-gray-700 text-gray-900 dark:text-gray-100" placeholder="Paste your access token" autocomplete="off">
|
|
<button id="validate-token-btn" class="py-2 px-4 bg-gray-600 dark:bg-gray-700 text-white rounded-md font-semibold hover:bg-gray-700 dark:hover:bg-gray-600">Validate</button>
|
|
</div>
|
|
<div id="access-token-status" class="text-xs mt-2 h-4"></div>
|
|
<p class="text-xs text-gray-500 dark:text-gray-400 mt-1">
|
|
Run <code class="bg-gray-200 dark:bg-gray-600 p-1 rounded">gcloud auth print-access-token</code> in your terminal to get a new token.
|
|
</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div id="main-content"></div>
|
|
</div>
|
|
</div>
|
|
</main>
|
|
|
|
<footer class="bg-gray-800 dark:bg-black text-gray-400 dark:text-gray-500 mt-12">
|
|
<div class="container mx-auto px-6 py-4 text-center text-sm">
|
|
<p>Made by wafaeb@ with 💙 | <a href="mailto:wafaeb@google.com" class="hover:text-white underline">wafaeb@google.com</a></p>
|
|
</div>
|
|
</footer>
|
|
|
|
<div id="notification-toast"></div>
|
|
|
|
<script type="module" src="/src/main.js"></script>
|
|
</body>
|
|
</html> |