mirror of
https://github.com/indentlabs/notebook.git
synced 2025-10-26 11:19:22 +00:00
656 lines
37 KiB
Plaintext
656 lines
37 KiB
Plaintext
<div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-8">
|
|
<!-- Header -->
|
|
<div class="flex items-center mb-8">
|
|
<%= link_to help_center_path, class: 'text-gray-500 hover:text-gray-700 mr-3', title: "Back to Help Center" do %>
|
|
<i class="material-icons">arrow_back</i>
|
|
<% end %>
|
|
<h1 class="text-3xl font-bold text-gray-800">Page Visualization with Basil</h1>
|
|
</div>
|
|
|
|
<!-- Introduction -->
|
|
<div class="bg-gradient-to-br from-purple-50 to-pink-50 border border-purple-200 rounded-xl p-8 mb-12">
|
|
<div class="flex items-start">
|
|
<div class="w-16 h-16 bg-gradient-to-br from-purple-200 to-pink-200 rounded-2xl flex items-center justify-center mr-6 flex-shrink-0 shadow-sm">
|
|
<i class="material-icons text-purple-700 text-2xl">visibility</i>
|
|
</div>
|
|
<div>
|
|
<h2 class="text-2xl font-bold text-gray-900 mb-4">Bring Your Pages to Life</h2>
|
|
<p class="text-lg text-gray-700 leading-relaxed mb-4">
|
|
Basil transforms the details you've written on your worldbuilding pages into stunning visual artwork. By analyzing your character descriptions, location details, and item specifications, Basil creates custom illustrations that perfectly match your vision.
|
|
</p>
|
|
<div class="bg-white rounded-lg p-4 border border-purple-200">
|
|
<p class="text-sm text-purple-800 font-medium">
|
|
<i class="material-icons text-purple-600 text-sm mr-2">info</i>
|
|
<strong>Premium Feature:</strong> Visualization requires a Premium subscription, but you get your first 100 visualizations free to try it out!
|
|
</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Main Content -->
|
|
<div class="space-y-12">
|
|
|
|
<!-- How It Works -->
|
|
<section>
|
|
<div class="flex items-center mb-6">
|
|
<div class="w-12 h-12 bg-gradient-to-br from-blue-100 to-blue-200 rounded-xl flex items-center justify-center mr-4 shadow-sm">
|
|
<i class="material-icons text-blue-700">auto_awesome</i>
|
|
</div>
|
|
<div>
|
|
<h2 class="text-2xl font-semibold text-gray-800">How Basil Works</h2>
|
|
<p class="text-gray-600">From your page details to stunning artwork</p>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="bg-white rounded-xl shadow-sm border border-gray-100 p-8">
|
|
<div class="grid grid-cols-1 lg:grid-cols-2 gap-8">
|
|
<div>
|
|
<h3 class="text-lg font-semibold text-gray-900 mb-4">The Magic Behind the Scenes</h3>
|
|
<p class="text-gray-600 mb-4">
|
|
Basil doesn't work with manual prompts—instead, it intelligently reads your page content and automatically selects the most visually relevant details to create artwork.
|
|
</p>
|
|
<div class="space-y-3">
|
|
<div class="flex items-start">
|
|
<i class="material-icons text-purple-500 text-sm mr-3 mt-1">search</i>
|
|
<div>
|
|
<h4 class="font-medium text-gray-900">Smart Field Selection</h4>
|
|
<p class="text-sm text-gray-600">Basil automatically picks visual fields like height, hair color, and appearance details</p>
|
|
</div>
|
|
</div>
|
|
<div class="flex items-start">
|
|
<i class="material-icons text-green-500 text-sm mr-3 mt-1">tune</i>
|
|
<div>
|
|
<h4 class="font-medium text-gray-900">Intelligent Processing</h4>
|
|
<p class="text-sm text-gray-600">Your page details are converted into an optimized prompt behind the scenes</p>
|
|
</div>
|
|
</div>
|
|
<div class="flex items-start">
|
|
<i class="material-icons text-blue-500 text-sm mr-3 mt-1">palette</i>
|
|
<div>
|
|
<h4 class="font-medium text-gray-900">Style Application</h4>
|
|
<p class="text-sm text-gray-600">Choose from curated art styles optimized for each content type</p>
|
|
</div>
|
|
</div>
|
|
<div class="flex items-start">
|
|
<i class="material-icons text-orange-500 text-sm mr-3 mt-1">image</i>
|
|
<div>
|
|
<h4 class="font-medium text-gray-900">Image Generation</h4>
|
|
<p class="text-sm text-gray-600">High-quality artwork is generated and delivered to your page</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="bg-gradient-to-br from-purple-50 to-pink-50 rounded-lg p-6 border border-purple-200">
|
|
<h4 class="font-semibold text-gray-900 mb-4">Real Example</h4>
|
|
<div class="text-sm text-gray-700 space-y-3">
|
|
<div class="bg-white rounded-lg p-3 border border-purple-100">
|
|
<p class="text-xs text-gray-500 mb-2">Your Character Page:</p>
|
|
<div class="space-y-1">
|
|
<p><strong>Name:</strong> Sarah Moonwhisper</p>
|
|
<p><strong>Age:</strong> 28 years old</p>
|
|
<p><strong>Hair:</strong> Long silver hair</p>
|
|
<p><strong>Eyes:</strong> Bright green eyes</p>
|
|
<p><strong>Build:</strong> Tall and graceful</p>
|
|
<p><strong>Clothing:</strong> Flowing blue robes</p>
|
|
</div>
|
|
</div>
|
|
<div class="text-center">
|
|
<i class="material-icons text-purple-500">arrow_downward</i>
|
|
<p class="text-xs text-purple-600 font-medium">Basil processes your details</p>
|
|
</div>
|
|
<div class="bg-white rounded-lg p-3 border border-purple-100">
|
|
<p class="text-xs text-gray-500 mb-2">Generated Image:</p>
|
|
<div class="bg-gray-100 rounded-lg p-4 text-center">
|
|
<i class="material-icons text-gray-400 text-3xl">image</i>
|
|
<p class="text-xs text-gray-500 mt-2">Portrait of Sarah with silver hair, green eyes, in blue robes</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
|
|
<!-- Getting Started -->
|
|
<section>
|
|
<div class="flex items-center mb-6">
|
|
<div class="w-12 h-12 bg-gradient-to-br from-green-100 to-green-200 rounded-xl flex items-center justify-center mr-4 shadow-sm">
|
|
<span class="text-green-700 font-bold text-lg">1</span>
|
|
</div>
|
|
<div>
|
|
<h2 class="text-2xl font-semibold text-gray-800">Getting Started with Visualization</h2>
|
|
<p class="text-gray-600">Your first steps to visual worldbuilding</p>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="bg-white rounded-xl shadow-sm border border-gray-100 p-8">
|
|
<div class="grid grid-cols-1 lg:grid-cols-2 gap-8">
|
|
<div>
|
|
<h3 class="text-lg font-semibold text-gray-900 mb-4">Step-by-Step Process</h3>
|
|
<div class="space-y-4">
|
|
<div class="flex items-start">
|
|
<span class="w-8 h-8 bg-green-100 rounded-full flex items-center justify-center text-green-600 text-sm font-bold mr-4 mt-1">1</span>
|
|
<div>
|
|
<h4 class="font-medium text-gray-900">Fill Out Your Page</h4>
|
|
<p class="text-sm text-gray-600">Add detailed descriptions to your character, location, or item page—especially visual details</p>
|
|
</div>
|
|
</div>
|
|
<div class="flex items-start">
|
|
<span class="w-8 h-8 bg-green-100 rounded-full flex items-center justify-center text-green-600 text-sm font-bold mr-4 mt-1">2</span>
|
|
<div>
|
|
<h4 class="font-medium text-gray-900">Visit Basil</h4>
|
|
<p class="text-sm text-gray-600">Go to <%= link_to "Basil Visualization", basil_path, class: "text-green-600 hover:text-green-800 font-medium" %> from your Data Vault</p>
|
|
</div>
|
|
</div>
|
|
<div class="flex items-start">
|
|
<span class="w-8 h-8 bg-green-100 rounded-full flex items-center justify-center text-green-600 text-sm font-bold mr-4 mt-1">3</span>
|
|
<div>
|
|
<h4 class="font-medium text-gray-900">Select Your Content</h4>
|
|
<p class="text-sm text-gray-600">Choose the character, location, or item you want to visualize</p>
|
|
</div>
|
|
</div>
|
|
<div class="flex items-start">
|
|
<span class="w-8 h-8 bg-green-100 rounded-full flex items-center justify-center text-green-600 text-sm font-bold mr-4 mt-1">4</span>
|
|
<div>
|
|
<h4 class="font-medium text-gray-900">Pick a Style & Generate</h4>
|
|
<p class="text-sm text-gray-600">Choose your preferred art style and start the generation process</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div>
|
|
<h3 class="text-lg font-semibold text-gray-900 mb-4">Supported Content Types</h3>
|
|
<div class="grid grid-cols-2 gap-3">
|
|
<div class="bg-blue-50 rounded-lg p-3 text-center">
|
|
<i class="material-icons text-blue-600 mb-2">person</i>
|
|
<div class="text-sm font-medium text-gray-900">Characters</div>
|
|
<div class="text-xs text-gray-600">Portraits & full body</div>
|
|
</div>
|
|
<div class="bg-green-50 rounded-lg p-3 text-center">
|
|
<i class="material-icons text-green-600 mb-2">place</i>
|
|
<div class="text-sm font-medium text-gray-900">Locations</div>
|
|
<div class="text-xs text-gray-600">Landscapes & buildings</div>
|
|
</div>
|
|
<div class="bg-orange-50 rounded-lg p-3 text-center">
|
|
<i class="material-icons text-orange-600 mb-2">inventory</i>
|
|
<div class="text-sm font-medium text-gray-900">Items</div>
|
|
<div class="text-xs text-gray-600">Weapons & artifacts</div>
|
|
</div>
|
|
<div class="bg-purple-50 rounded-lg p-3 text-center">
|
|
<i class="material-icons text-purple-600 mb-2">pets</i>
|
|
<div class="text-sm font-medium text-gray-900">Creatures</div>
|
|
<div class="text-xs text-gray-600">Beasts & monsters</div>
|
|
</div>
|
|
<div class="bg-pink-50 rounded-lg p-3 text-center">
|
|
<i class="material-icons text-pink-600 mb-2">local_florist</i>
|
|
<div class="text-sm font-medium text-gray-900">Flora</div>
|
|
<div class="text-xs text-gray-600">Plants & trees</div>
|
|
</div>
|
|
<div class="bg-indigo-50 rounded-lg p-3 text-center">
|
|
<i class="material-icons text-indigo-600 mb-2">more_horiz</i>
|
|
<div class="text-sm font-medium text-gray-900">& More!</div>
|
|
<div class="text-xs text-gray-600">Food, vehicles, etc.</div>
|
|
</div>
|
|
</div>
|
|
<div class="mt-4 bg-gradient-to-br from-green-50 to-blue-50 rounded-lg p-4 border border-green-200">
|
|
<h4 class="font-semibold text-gray-900 mb-2">💡 Pro Tip</h4>
|
|
<p class="text-sm text-gray-700">
|
|
The more visual details you add to your pages, the better Basil can capture your vision. Focus on appearance, colors, materials, and distinctive features.
|
|
</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
|
|
<!-- Art Styles -->
|
|
<section>
|
|
<div class="flex items-center mb-6">
|
|
<div class="w-12 h-12 bg-gradient-to-br from-purple-100 to-purple-200 rounded-xl flex items-center justify-center mr-4 shadow-sm">
|
|
<i class="material-icons text-purple-700">palette</i>
|
|
</div>
|
|
<div>
|
|
<h2 class="text-2xl font-semibold text-gray-800">Art Styles Available</h2>
|
|
<p class="text-gray-600">Choose the perfect artistic approach for your content</p>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="bg-white rounded-xl shadow-sm border border-gray-100 p-8">
|
|
<div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6">
|
|
|
|
<div class="text-center">
|
|
<div class="w-16 h-16 bg-gradient-to-br from-gray-100 to-gray-200 rounded-2xl flex items-center justify-center mx-auto mb-4 shadow-sm">
|
|
<i class="material-icons text-gray-700 text-2xl">photo_camera</i>
|
|
</div>
|
|
<h3 class="font-semibold text-gray-900 mb-2">Photograph</h3>
|
|
<p class="text-sm text-gray-600 mb-3">Photorealistic renders that look like actual photographs. Perfect for modern or realistic settings.</p>
|
|
<div class="text-xs text-blue-600 font-medium">Available for Characters & Items</div>
|
|
</div>
|
|
|
|
<div class="text-center">
|
|
<div class="w-16 h-16 bg-gradient-to-br from-amber-100 to-orange-200 rounded-2xl flex items-center justify-center mx-auto mb-4 shadow-sm">
|
|
<i class="material-icons text-amber-700 text-2xl">brush</i>
|
|
</div>
|
|
<h3 class="font-semibold text-gray-900 mb-2">Painting</h3>
|
|
<p class="text-sm text-gray-600 mb-3">Classical painted artwork with rich textures and artistic flair. Great for fantasy and historical settings.</p>
|
|
<div class="text-xs text-blue-600 font-medium">Available for Locations</div>
|
|
</div>
|
|
|
|
<div class="text-center">
|
|
<div class="w-16 h-16 bg-gradient-to-br from-blue-100 to-cyan-200 rounded-2xl flex items-center justify-center mx-auto mb-4 shadow-sm">
|
|
<i class="material-icons text-blue-700 text-2xl">water_drop</i>
|
|
</div>
|
|
<h3 class="font-semibold text-gray-900 mb-2">Watercolor Painting</h3>
|
|
<p class="text-sm text-gray-600 mb-3">Soft, flowing watercolor technique with gentle blending. Beautiful for landscapes and ethereal subjects.</p>
|
|
<div class="text-xs text-blue-600 font-medium">Available for All Content Types</div>
|
|
</div>
|
|
|
|
<div class="text-center">
|
|
<div class="w-16 h-16 bg-gradient-to-br from-gray-100 to-blue-200 rounded-2xl flex items-center justify-center mx-auto mb-4 shadow-sm">
|
|
<i class="material-icons text-gray-700 text-2xl">draw</i>
|
|
</div>
|
|
<h3 class="font-semibold text-gray-900 mb-2">Pencil Sketch</h3>
|
|
<p class="text-sm text-gray-600 mb-3">Hand-drawn pencil sketch appearance. Ideal for concept art and character studies.</p>
|
|
<div class="text-xs text-blue-600 font-medium">Available for Characters & Items</div>
|
|
</div>
|
|
|
|
<div class="text-center">
|
|
<div class="w-16 h-16 bg-gradient-to-br from-pink-100 to-purple-200 rounded-2xl flex items-center justify-center mx-auto mb-4 shadow-sm">
|
|
<i class="material-icons text-pink-700 text-2xl">star</i>
|
|
</div>
|
|
<h3 class="font-semibold text-gray-900 mb-2">Anime</h3>
|
|
<p class="text-sm text-gray-600 mb-3">Japanese animation style with vibrant colors and expressive features. Perfect for anime-inspired worlds.</p>
|
|
<div class="text-xs text-blue-600 font-medium">Available for Characters & Items</div>
|
|
</div>
|
|
|
|
<div class="text-center">
|
|
<div class="w-16 h-16 bg-gradient-to-br from-purple-100 to-pink-200 rounded-2xl flex items-center justify-center mx-auto mb-4 shadow-sm">
|
|
<i class="material-icons text-purple-700 text-2xl">auto_awesome</i>
|
|
</div>
|
|
<h3 class="font-semibold text-gray-900 mb-2">Fantasy</h3>
|
|
<p class="text-sm text-gray-600 mb-3">Epic fantasy illustration style with dramatic lighting and mythical elements. Perfect for magical characters.</p>
|
|
<div class="text-xs text-blue-600 font-medium">Available for Characters</div>
|
|
</div>
|
|
|
|
</div>
|
|
|
|
<div class="mt-8 bg-gradient-to-br from-purple-50 to-pink-50 rounded-lg p-6 border border-purple-200">
|
|
<h4 class="font-semibold text-gray-900 mb-3">🎨 Style Selection Strategy</h4>
|
|
<div class="grid grid-cols-1 md:grid-cols-2 gap-4 text-sm text-gray-700">
|
|
<div>
|
|
<strong>For Characters:</strong> Photograph for realism, Anime for stylized looks, Fantasy for epic heroes, Pencil Sketch for concept development
|
|
</div>
|
|
<div>
|
|
<strong>For Locations:</strong> Painting for grand landscapes, Watercolor for ethereal places, Sketch for architectural concepts
|
|
</div>
|
|
<div>
|
|
<strong>For Items:</strong> Photograph for modern objects, Pencil Sketch for design concepts, Anime for stylized weapons
|
|
</div>
|
|
<div>
|
|
<strong>Experiment:</strong> Try different styles for the same content to see which captures your vision best
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
|
|
<!-- Field Importance -->
|
|
<section>
|
|
<div class="flex items-center mb-6">
|
|
<div class="w-12 h-12 bg-gradient-to-br from-orange-100 to-orange-200 rounded-xl flex items-center justify-center mr-4 shadow-sm">
|
|
<i class="material-icons text-orange-700">tune</i>
|
|
</div>
|
|
<div>
|
|
<h2 class="text-2xl font-semibold text-gray-800">Fine-Tuning with Field Importance</h2>
|
|
<p class="text-gray-600">Control what Basil emphasizes in your visualizations</p>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="bg-white rounded-xl shadow-sm border border-gray-100 p-8">
|
|
<div class="grid grid-cols-1 lg:grid-cols-2 gap-8">
|
|
<div>
|
|
<h3 class="text-lg font-semibold text-gray-900 mb-4">Understanding Field Weights</h3>
|
|
<p class="text-gray-600 mb-4">
|
|
While Basil automatically selects relevant visual fields from your page, you can manually adjust how much emphasis each field gets in the final image.
|
|
</p>
|
|
<div class="space-y-3">
|
|
<div class="flex items-center">
|
|
<div class="w-4 h-4 bg-red-500 rounded-full mr-3"></div>
|
|
<span class="text-sm text-gray-700"><strong>High (1.1-1.3):</strong> Basil will strongly emphasize these details</span>
|
|
</div>
|
|
<div class="flex items-center">
|
|
<div class="w-4 h-4 bg-green-500 rounded-full mr-3"></div>
|
|
<span class="text-sm text-gray-700"><strong>Normal (1.0):</strong> Standard emphasis - the default for most fields</span>
|
|
</div>
|
|
<div class="flex items-center">
|
|
<div class="w-4 h-4 bg-yellow-500 rounded-full mr-3"></div>
|
|
<span class="text-sm text-gray-700"><strong>Low (0.1-0.9):</strong> Subtle influence, background details</span>
|
|
</div>
|
|
<div class="flex items-center">
|
|
<div class="w-4 h-4 bg-gray-400 rounded-full mr-3"></div>
|
|
<span class="text-sm text-gray-700"><strong>Off (0.0):</strong> Field is completely ignored</span>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="bg-gradient-to-br from-orange-50 to-red-50 rounded-lg p-6 border border-orange-200">
|
|
<h4 class="font-semibold text-gray-900 mb-4">Practical Example</h4>
|
|
<div class="space-y-4 text-sm text-gray-700">
|
|
<div class="bg-white rounded-lg p-3 border border-orange-100">
|
|
<strong>Character Portrait Focus:</strong>
|
|
<ul class="mt-2 space-y-1 text-xs">
|
|
<li>🔴 Hair Color: 1.2 (very important)</li>
|
|
<li>🔴 Eye Color: 1.1 (important)</li>
|
|
<li>🟢 Height: 1.0 (normal - may not show in portrait)</li>
|
|
<li>🟡 Clothing: 0.8 (less important)</li>
|
|
<li>⚪ Personality: 0.0 (ignore - not visual)</li>
|
|
</ul>
|
|
</div>
|
|
<div class="bg-white rounded-lg p-3 border border-orange-100">
|
|
<strong>Location Landscape Focus:</strong>
|
|
<ul class="mt-2 space-y-1 text-xs">
|
|
<li>🔴 Climate: 1.3 (sets the whole mood)</li>
|
|
<li>🔴 Terrain: 1.2 (defines the landscape)</li>
|
|
<li>🟢 Architecture: 1.0 (normal)</li>
|
|
<li>🟡 History: 0.5 (minimal visual impact)</li>
|
|
</ul>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
|
|
<!-- Generation Process -->
|
|
<section>
|
|
<div class="flex items-center mb-6">
|
|
<div class="w-12 h-12 bg-gradient-to-br from-teal-100 to-teal-200 rounded-xl flex items-center justify-center mr-4 shadow-sm">
|
|
<i class="material-icons text-teal-700">hourglass_empty</i>
|
|
</div>
|
|
<div>
|
|
<h2 class="text-2xl font-semibold text-gray-800">The Generation Process</h2>
|
|
<p class="text-gray-600">What happens when you click "Generate"</p>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="bg-white rounded-xl shadow-sm border border-gray-100 p-8">
|
|
<div class="grid grid-cols-1 md:grid-cols-4 gap-6 mb-8">
|
|
<div class="text-center">
|
|
<div class="w-12 h-12 bg-teal-100 rounded-xl flex items-center justify-center mx-auto mb-3">
|
|
<span class="text-teal-700 font-bold">1</span>
|
|
</div>
|
|
<h3 class="font-semibold text-gray-900 mb-2">Queue</h3>
|
|
<p class="text-sm text-gray-600">Your generation joins the queue with other users, first-come-first-served</p>
|
|
</div>
|
|
<div class="text-center">
|
|
<div class="w-12 h-12 bg-teal-100 rounded-xl flex items-center justify-center mx-auto mb-3">
|
|
<span class="text-teal-700 font-bold">2</span>
|
|
</div>
|
|
<h3 class="font-semibold text-gray-900 mb-2">Processing</h3>
|
|
<p class="text-sm text-gray-600">Basil processes your page details and creates the optimal prompt</p>
|
|
</div>
|
|
<div class="text-center">
|
|
<div class="w-12 h-12 bg-teal-100 rounded-xl flex items-center justify-center mx-auto mb-3">
|
|
<span class="text-teal-700 font-bold">3</span>
|
|
</div>
|
|
<h3 class="font-semibold text-gray-900 mb-2">Generation</h3>
|
|
<p class="text-sm text-gray-600">High-quality artwork is created using advanced image generation technology</p>
|
|
</div>
|
|
<div class="text-center">
|
|
<div class="w-12 h-12 bg-teal-100 rounded-xl flex items-center justify-center mx-auto mb-3">
|
|
<span class="text-teal-700 font-bold">4</span>
|
|
</div>
|
|
<h3 class="font-semibold text-gray-900 mb-2">Delivery</h3>
|
|
<p class="text-sm text-gray-600">Your finished artwork is delivered and ready to save to your page</p>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="grid grid-cols-1 md:grid-cols-2 gap-8">
|
|
<div class="bg-gradient-to-br from-teal-50 to-cyan-50 rounded-lg p-6 border border-teal-200">
|
|
<h4 class="font-semibold text-gray-900 mb-3">⏱️ Timing & Limits</h4>
|
|
<div class="space-y-2 text-sm text-gray-700">
|
|
<div><strong>Generation time:</strong> 30 seconds to 2 minutes depending on queue</div>
|
|
<div><strong>Queue limit:</strong> You can have up to 3 generations in progress at once</div>
|
|
<div><strong>Free generations:</strong> Your first 100 visualizations are free to try</div>
|
|
<div><strong>Unlimited access:</strong> Premium users get unlimited generations</div>
|
|
</div>
|
|
</div>
|
|
<div class="bg-gradient-to-br from-blue-50 to-indigo-50 rounded-lg p-6 border border-blue-200">
|
|
<h4 class="font-semibold text-gray-900 mb-3">🌍 Democratized Access</h4>
|
|
<p class="text-sm text-gray-700 mb-3">
|
|
We believe in making powerful creative tools accessible to everyone. That's why Basil uses a fair first-come-first-served queue system.
|
|
</p>
|
|
<div class="text-xs text-blue-800 bg-blue-100 rounded-lg p-2">
|
|
<strong>Fair for all:</strong> Whether you're generating your first image or your thousandth, everyone waits in the same queue.
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
|
|
<!-- Managing Results -->
|
|
<section>
|
|
<div class="flex items-center mb-6">
|
|
<div class="w-12 h-12 bg-gradient-to-br from-amber-100 to-amber-200 rounded-xl flex items-center justify-center mr-4 shadow-sm">
|
|
<i class="material-icons text-amber-700">photo_library</i>
|
|
</div>
|
|
<div>
|
|
<h2 class="text-2xl font-semibold text-gray-800">Managing Your Generated Images</h2>
|
|
<p class="text-gray-600">Save, rate, and organize your artwork</p>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="bg-white rounded-xl shadow-sm border border-gray-100 p-8">
|
|
<div class="grid grid-cols-1 lg:grid-cols-2 gap-8">
|
|
<div>
|
|
<h3 class="text-lg font-semibold text-gray-900 mb-4">Image Actions</h3>
|
|
<div class="space-y-4">
|
|
<div class="bg-green-50 rounded-lg p-4 border border-green-200">
|
|
<div class="flex items-center mb-2">
|
|
<i class="material-icons text-green-600 text-sm mr-2">save</i>
|
|
<h4 class="font-medium text-gray-900">Save to Page</h4>
|
|
</div>
|
|
<p class="text-sm text-gray-600">Click "Save to page" to permanently add the image to your content's gallery</p>
|
|
</div>
|
|
<div class="bg-blue-50 rounded-lg p-4 border border-blue-200">
|
|
<div class="flex items-center mb-2">
|
|
<i class="material-icons text-blue-600 text-sm mr-2">push_pin</i>
|
|
<h4 class="font-medium text-gray-900">Pin as Primary</h4>
|
|
</div>
|
|
<p class="text-sm text-gray-600">Pin your favorite image to make it the main image displayed for this content</p>
|
|
</div>
|
|
<div class="bg-yellow-50 rounded-lg p-4 border border-yellow-200">
|
|
<div class="flex items-center mb-2">
|
|
<i class="material-icons text-yellow-600 text-sm mr-2">star</i>
|
|
<h4 class="font-medium text-gray-900">Rate & Provide Feedback</h4>
|
|
</div>
|
|
<p class="text-sm text-gray-600">Rate images from 1-5 stars to help improve Basil's future generations</p>
|
|
</div>
|
|
<div class="bg-red-50 rounded-lg p-4 border border-red-200">
|
|
<div class="flex items-center mb-2">
|
|
<i class="material-icons text-red-600 text-sm mr-2">delete</i>
|
|
<h4 class="font-medium text-gray-900">Delete Unwanted Images</h4>
|
|
</div>
|
|
<p class="text-sm text-gray-600">Remove images you don't want to keep—they won't count against your storage</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div>
|
|
<h3 class="text-lg font-semibold text-gray-900 mb-4">Integration with Your Pages</h3>
|
|
<div class="space-y-3">
|
|
<div class="bg-amber-50 rounded-lg p-4 border border-amber-200">
|
|
<h4 class="font-medium text-gray-900 mb-2">🖼️ Gallery Integration</h4>
|
|
<p class="text-sm text-gray-600">Saved Basil images appear alongside your uploaded images in your content's gallery</p>
|
|
</div>
|
|
<div class="bg-amber-50 rounded-lg p-4 border border-amber-200">
|
|
<h4 class="font-medium text-gray-900 mb-2">📦 No Storage Cost</h4>
|
|
<p class="text-sm text-gray-600">Generated images don't count against your upload bandwidth or storage limits</p>
|
|
</div>
|
|
<div class="bg-amber-50 rounded-lg p-4 border border-amber-200">
|
|
<h4 class="font-medium text-gray-900 mb-2">🔗 Permanent Links</h4>
|
|
<p class="text-sm text-gray-600">Once saved, images get permanent URLs and can be shared just like uploaded images</p>
|
|
</div>
|
|
</div>
|
|
<div class="mt-6 bg-gradient-to-br from-purple-50 to-pink-50 rounded-lg p-4 border border-purple-200">
|
|
<h4 class="font-semibold text-gray-900 mb-2">💫 Pro Tip</h4>
|
|
<p class="text-sm text-gray-700">
|
|
Generate multiple variations of the same content with different styles or field weights, then save your favorites to build a comprehensive visual library!
|
|
</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
|
|
<!-- Best Practices -->
|
|
<section>
|
|
<div class="flex items-center mb-6">
|
|
<div class="w-12 h-12 bg-gradient-to-br from-indigo-100 to-indigo-200 rounded-xl flex items-center justify-center mr-4 shadow-sm">
|
|
<i class="material-icons text-indigo-700">tips_and_updates</i>
|
|
</div>
|
|
<div>
|
|
<h2 class="text-2xl font-semibold text-gray-800">Best Practices for Great Results</h2>
|
|
<p class="text-gray-600">Expert techniques to get the most out of Basil</p>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="bg-white rounded-xl shadow-sm border border-gray-100 p-8">
|
|
<div class="grid grid-cols-1 md:grid-cols-2 gap-8">
|
|
<div>
|
|
<h3 class="text-lg font-semibold text-gray-900 mb-4">✍️ Writing Better Page Content</h3>
|
|
<div class="space-y-4">
|
|
<div class="border-l-4 border-green-200 pl-4">
|
|
<h4 class="font-medium text-gray-900 text-sm">Be Visually Specific</h4>
|
|
<p class="text-sm text-gray-600">Instead of "attractive," try "sharp cheekbones and piercing blue eyes"</p>
|
|
</div>
|
|
<div class="border-l-4 border-green-200 pl-4">
|
|
<h4 class="font-medium text-gray-900 text-sm">Use Color and Texture</h4>
|
|
<p class="text-sm text-gray-600">Describe materials, colors, and textures: "worn leather armor with brass buckles"</p>
|
|
</div>
|
|
<div class="border-l-4 border-green-200 pl-4">
|
|
<h4 class="font-medium text-gray-900 text-sm">Include Key Details</h4>
|
|
<p class="text-sm text-gray-600">Focus on distinctive features that make your content unique</p>
|
|
</div>
|
|
<div class="border-l-4 border-green-200 pl-4">
|
|
<h4 class="font-medium text-gray-900 text-sm">Fill Visual Categories</h4>
|
|
<p class="text-sm text-gray-600">Complete appearance, looks, and physical description sections thoroughly</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div>
|
|
<h3 class="text-lg font-semibold text-gray-900 mb-4">⚙️ Technical Optimization</h3>
|
|
<div class="space-y-4">
|
|
<div class="border-l-4 border-blue-200 pl-4">
|
|
<h4 class="font-medium text-gray-900 text-sm">Start with Default Weights</h4>
|
|
<p class="text-sm text-gray-600">Generate with normal (1.0) weights first, then adjust if needed</p>
|
|
</div>
|
|
<div class="border-l-4 border-blue-200 pl-4">
|
|
<h4 class="font-medium text-gray-900 text-sm">Experiment with Styles</h4>
|
|
<p class="text-sm text-gray-600">Try different art styles for the same content to find the best match</p>
|
|
</div>
|
|
<div class="border-l-4 border-blue-200 pl-4">
|
|
<h4 class="font-medium text-gray-900 text-sm">Use Field Weights Strategically</h4>
|
|
<p class="text-sm text-gray-600">Boost important details that aren't showing up, reduce distracting elements</p>
|
|
</div>
|
|
<div class="border-l-4 border-blue-200 pl-4">
|
|
<h4 class="font-medium text-gray-900 text-sm">Generate Multiple Versions</h4>
|
|
<p class="text-sm text-gray-600">Create several variations to capture different aspects of your vision</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="mt-8 grid grid-cols-1 md:grid-cols-2 gap-6">
|
|
<div class="bg-gradient-to-br from-green-50 to-teal-50 rounded-lg p-6 border border-green-200">
|
|
<h4 class="font-semibold text-gray-900 mb-3">✅ Works Great With</h4>
|
|
<div class="space-y-2 text-sm text-gray-700">
|
|
<div>• Detailed physical descriptions</div>
|
|
<div>• Specific color and material mentions</div>
|
|
<div>• Distinctive clothing or accessories</div>
|
|
<div>• Clear architectural or landscape details</div>
|
|
<div>• Unique weapons or item designs</div>
|
|
</div>
|
|
</div>
|
|
<div class="bg-gradient-to-br from-red-50 to-pink-50 rounded-lg p-6 border border-red-200">
|
|
<h4 class="font-semibold text-gray-900 mb-3">⚠️ Less Effective With</h4>
|
|
<div class="space-y-2 text-sm text-gray-700">
|
|
<div>• Abstract personality traits</div>
|
|
<div>• Internal thoughts or emotions</div>
|
|
<div>• Complex action scenes</div>
|
|
<div>• Very specific poses or expressions</div>
|
|
<div>• Multiple characters in one image</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
|
|
<!-- Get Started -->
|
|
<section>
|
|
<div class="bg-gradient-to-br from-gray-50 to-purple-50 rounded-xl p-8 border border-gray-200">
|
|
<div class="text-center mb-6">
|
|
<h2 class="text-2xl font-semibold text-gray-800 mb-4">Ready to Visualize Your World?</h2>
|
|
<p class="text-lg text-gray-600 max-w-2xl mx-auto">
|
|
Start bringing your worldbuilding to life with Basil's intelligent visualization system.
|
|
</p>
|
|
</div>
|
|
|
|
<div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6 mb-8">
|
|
|
|
<% if user_signed_in? %>
|
|
<%= link_to basil_path, class: 'group block' do %>
|
|
<div class="bg-white rounded-lg p-6 shadow-sm border border-gray-200 hover:shadow-md transition-all duration-200 hover:border-purple-200">
|
|
<div class="w-12 h-12 bg-purple-100 rounded-lg flex items-center justify-center mb-4 group-hover:bg-purple-200 transition-colors">
|
|
<i class="material-icons text-purple-600">visibility</i>
|
|
</div>
|
|
<h3 class="font-semibold text-gray-900 mb-2">Try Basil Now</h3>
|
|
<p class="text-sm text-gray-600">Start visualizing your existing content with your free generations</p>
|
|
</div>
|
|
<% end %>
|
|
<% else %>
|
|
<%= link_to new_user_registration_path, class: 'group block' do %>
|
|
<div class="bg-white rounded-lg p-6 shadow-sm border border-gray-200 hover:shadow-md transition-all duration-200 hover:border-purple-200">
|
|
<div class="w-12 h-12 bg-purple-100 rounded-lg flex items-center justify-center mb-4 group-hover:bg-purple-200 transition-colors">
|
|
<i class="material-icons text-purple-600">person_add</i>
|
|
</div>
|
|
<h3 class="font-semibold text-gray-900 mb-2">Sign Up Free</h3>
|
|
<p class="text-sm text-gray-600">Get started with 100 free visualizations</p>
|
|
</div>
|
|
<% end %>
|
|
<% end %>
|
|
|
|
<%= link_to help_your_first_universe_path, class: 'group block' do %>
|
|
<div class="bg-white rounded-lg p-6 shadow-sm border border-gray-200 hover:shadow-md transition-all duration-200 hover:border-blue-200">
|
|
<div class="w-12 h-12 bg-blue-100 rounded-lg flex items-center justify-center mb-4 group-hover:bg-blue-200 transition-colors">
|
|
<i class="material-icons text-blue-600">language</i>
|
|
</div>
|
|
<h3 class="font-semibold text-gray-900 mb-2">Create Your Universe</h3>
|
|
<p class="text-sm text-gray-600">Start with the basics of worldbuilding before visualizing</p>
|
|
</div>
|
|
<% end %>
|
|
|
|
<% unless user_signed_in? && current_user.on_premium_plan? %>
|
|
<%= link_to subscription_path, class: 'group block' do %>
|
|
<div class="bg-white rounded-lg p-6 shadow-sm border border-gray-200 hover:shadow-md transition-all duration-200 hover:border-green-200">
|
|
<div class="w-12 h-12 bg-green-100 rounded-lg flex items-center justify-center mb-4 group-hover:bg-green-200 transition-colors">
|
|
<i class="material-icons text-green-600">upgrade</i>
|
|
</div>
|
|
<h3 class="font-semibold text-gray-900 mb-2">Upgrade to Premium</h3>
|
|
<p class="text-sm text-gray-600">Get unlimited visualizations and all premium features</p>
|
|
</div>
|
|
<% end %>
|
|
<% end %>
|
|
|
|
</div>
|
|
|
|
<div class="text-center">
|
|
<%= link_to help_center_path, class: 'inline-flex items-center justify-center px-8 py-4 border border-gray-300 text-lg font-medium rounded-xl text-gray-700 bg-white hover:bg-gray-50 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-purple-500 shadow-lg hover:shadow-xl transition-all duration-200' do %>
|
|
<i class="material-icons mr-3">help_center</i>
|
|
More Help Guides
|
|
<% end %>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
|
|
</div>
|
|
</div> |