diff --git a/blog/2025-02-06-creating-custom-models-with-ai-for-creative-street-scenes.md b/blog/2025-02-06-creating-custom-models-with-ai-for-creative-street-scenes.md index 28939959f..ffb56723c 100644 --- a/blog/2025-02-06-creating-custom-models-with-ai-for-creative-street-scenes.md +++ b/blog/2025-02-06-creating-custom-models-with-ai-for-creative-street-scenes.md @@ -77,7 +77,7 @@ Finally, let's bring your model into 3DStreet. Open the [3DStreet App](https://3 4. Paste your OptimizeGLB link URL 5. Adjust scale, position and rotation as needed after adding to the scene -See our [documentation on importing custom 3D models](/docs/3dstreet-editor/custom-models-and-images) for more details on this step. A 3DStreet Pro plan is required to use this feature. +See our [documentation on importing custom 3D models](/docs/editor-app/custom-models-and-images) for more details on this step. A 3DStreet Pro plan is required to use this feature. ## Tips for Success diff --git a/docs/3dstreet-editor/_category_.json b/docs/3dstreet-editor/_category_.json deleted file mode 100644 index d42f22b5b..000000000 --- a/docs/3dstreet-editor/_category_.json +++ /dev/null @@ -1,8 +0,0 @@ -{ - "label": "3DStreet Editor", - "position": 4, - "link": { - "type": "doc", - "id": "3dstreet-editor/overview-3dstreet-editor" - } -} diff --git a/docs/editor-app/_category_.json b/docs/editor-app/_category_.json new file mode 100644 index 000000000..4f03fe6c2 --- /dev/null +++ b/docs/editor-app/_category_.json @@ -0,0 +1,8 @@ +{ + "label": "Editor App", + "position": 3, + "link": { + "type": "doc", + "id": "editor-app/overview-3dstreet-editor" + } +} diff --git a/docs/3dstreet-editor/coordinate-systems.md b/docs/editor-app/coordinate-systems.md similarity index 100% rename from docs/3dstreet-editor/coordinate-systems.md rename to docs/editor-app/coordinate-systems.md diff --git a/docs/3dstreet-editor/custom-models-and-images.mdx b/docs/editor-app/custom-models-and-images.mdx similarity index 100% rename from docs/3dstreet-editor/custom-models-and-images.mdx rename to docs/editor-app/custom-models-and-images.mdx diff --git a/docs/3dstreet-editor/editing.md b/docs/editor-app/editing.md similarity index 100% rename from docs/3dstreet-editor/editing.md rename to docs/editor-app/editing.md diff --git a/docs/getting-started.mdx b/docs/editor-app/getting-started.mdx similarity index 84% rename from docs/getting-started.mdx rename to docs/editor-app/getting-started.mdx index e33f491ca..ba440e7a1 100644 --- a/docs/getting-started.mdx +++ b/docs/editor-app/getting-started.mdx @@ -1,13 +1,17 @@ --- -sidebar_position: 2 +sidebar_position: 1 title: Getting Started --- import MuxPlayer from '@mux/mux-player-react'; -# Getting Started with 3DStreet +# Getting Started with 3DStreet Editor -## Starting with Streetmix -This tutorial will guide you through the process of importing a [Streetmix.net](https://streetmix.net) street into 3DStreet, creating a 3D perspective image of your street, modifying aspects of the scene, creating an account and logging in, saving and sharing scenes, exporting scenes, and a preview of geospatial features such as 3D map tiles. +Create and customize detailed 3D street scenes with our interactive editor. + +## Quick Start + +### Starting with Streetmix +This tutorial will guide you through the process of importing a [Streetmix.net](https://streetmix.net) street into 3DStreet Editor, creating a 3D perspective image of your street, modifying aspects of the scene, creating an account and logging in, saving and sharing scenes, exporting scenes, and a preview of geospatial features such as 3D map tiles. Flux.1 [dev] > Flux.1 [schnell] + +2. **Image dimensions** + - Larger dimensions = more tokens + - 1440×1440 costs more than 512×512 + +3. **Steps** + - More steps = more tokens + - 50 steps costs more than 20 steps + +4. **Outpainting area** + - Larger expansions = more tokens + - 2048px expansion > 256px expansion + +5. **Inpainting mask size** + - Larger masked areas = more tokens + - Full image mask > small detail mask + +## Experimentation Guide + +### Systematic Testing + +**Goal: Find optimal settings for your use case** + +**Method:** +1. Choose one test prompt +2. Use fixed seed +3. Vary only ONE parameter at a time +4. Document results +5. Compare outcomes + +**Example experiment:** + +Test: Effect of steps on quality + +- Base: Flux.1 [dev], Guidance 3.0, 1024×1024, Seed 12345 +- Variable: Steps +- Tests: 20, 25, 30, 35, 40, 45, 50 +- Result: Determine diminishing returns point + +### A/B Comparison + +**Method:** +1. Generate with Setting A +2. Generate with Setting B (change ONE thing) +3. Compare directly +4. Choose winner +5. Continue refining + +**Example:** +- A: Flux.1 [dev], 30 steps +- B: Flux.1 [pro], 30 steps +- Question: Is quality improvement worth token cost? + +## Best Practices + +1. **Start fast, finish slow** + - Explore with Flux.1 [schnell] + - Refine with Flux.1 [dev] + - Finalize with Flux.1 [pro] + +2. **Match model to need** + - Don't use [pro] for tests + - Don't use [schnell] for finals + +3. **Use seeds strategically** + - Random for exploration + - Fixed for comparison + - Save successful seeds + +4. **Adjust one parameter at a time** + - Understand each effect + - Build systematic knowledge + - Avoid confusion + +5. **Document what works** + - Save successful settings + - Note model/parameter combinations + - Build personal best practices + +6. **Consider total cost** + - Factor in failed generations + - Account for iteration + - Balance quality vs. quantity + +## Next Steps + +- **[Text-to-Image](./text-to-image.md)** - Apply model knowledge to generation +- **[Inpainting](./inpainting.md)** - Use parameters for targeted edits +- **[Outpainting](./outpainting.md)** - Optimize expansion settings +- **[Tokens & Usage](./tokens-and-usage.md)** - Understand cost management diff --git a/docs/generator-app/outpainting.md b/docs/generator-app/outpainting.md new file mode 100644 index 000000000..b4529622f --- /dev/null +++ b/docs/generator-app/outpainting.md @@ -0,0 +1,449 @@ +# Outpainting + +Outpainting expands images beyond their original boundaries by generating new content in any direction. This powerful feature lets you extend scenes, create wider compositions, and add context around existing images. + +## What is Outpainting? + +Outpainting uses AI to generate new image content that extends seamlessly from your original image. Unlike inpainting (which replaces areas within an image), outpainting adds new areas outside the original boundaries. + +## When to Use Outpainting + +- **Expand scenes** - Add more context to cropped images +- **Change aspect ratios** - Convert square to landscape or portrait +- **Add context** - Show what's beyond the original frame +- **Create panoramas** - Extend street views horizontally +- **Vertical expansion** - Add sky above or ground below +- **Composition adjustment** - Reframe images for better layout + +## The Outpaint Interface + +### Main Components + +1. **Image Upload Area** - Load your source image +2. **Canvas Preview** - Shows original and expansion areas +3. **Direction Controls** - Choose which sides to expand +4. **Expansion Amount** - Set pixels to add in each direction +5. **Prompt Field** - Describe what should appear in new areas +6. **Generate Button** - Start outpainting + +### Supported Image Formats + +- PNG (recommended) +- JPEG/JPG +- Maximum file size: 10MB +- Recommended starting size: 512px - 1024px per side + +## How to Outpaint + +### Step 1: Upload Your Image + +Click **Upload Image** or drag and drop onto the canvas. + +**Good candidates for outpainting:** +- Images that feel cropped +- Scenes where you want more context +- Images you want to repurpose for different formats +- AI-generated images from text-to-image + +### Step 2: Choose Expansion Direction(s) + +Select which sides to expand using the direction buttons: + +**Direction Options:** +- **⬆ Up** - Add content above +- **⬇ Down** - Add content below +- **⬅ Left** - Add content to the left +- **➡ Right** - Add content to the right + +**Combinations:** +- Select multiple directions simultaneously +- Common combinations: + - Left + Right = horizontal panorama + - Up + Down = vertical extension + - All four = expand in all directions + +### Step 3: Set Expansion Amount + +For each selected direction, specify pixels to add: + +**Expansion Limits:** +- Minimum: 64 pixels +- Maximum: 2048 pixels per side +- Must be divisible by 32 + +**Recommendations:** +- **Small expansion (64-256px):** Minor framing adjustments +- **Medium expansion (256-512px):** Balanced addition +- **Large expansion (512-1024px):** Significant context +- **Maximum expansion (1024-2048px):** Dramatic extensions + +**Considerations:** +- Larger expansions cost more tokens +- Larger expansions take longer to generate +- Very large expansions may have less coherent results +- Final image dimensions = original + all expansions + +### Step 4: Write Your Prompt + +Describe what should appear in the expanded areas. + +**Outpainting prompts should:** +- Describe the new content specifically +- Reference what's already in the image +- Maintain style consistency +- Consider perspective and lighting + +**Example prompts:** + +*Expanding a street view horizontally:* +``` +Continue the urban street scene with similar buildings, sidewalks, +and street trees, maintaining the same architectural style and perspective +``` + +*Adding sky above:* +``` +Clear blue sky with scattered white clouds, continuing the daytime +lighting from the original scene +``` + +*Expanding downward:* +``` +Additional street-level detail including curbs, road markings, +and continuation of the bike lane visible in original +``` + +*All directions:* +``` +Expand the complete street design maintaining consistent style, +showing more of the urban context including adjacent buildings, +intersections, and streetscape elements +``` + +### Step 5: Adjust Parameters (Optional) + +**Prompt Strength (0.0-1.0)** +- **0.5-0.7:** Recommended for most cases +- Lower: More creative, less literal +- Higher: Stricter adherence to prompt + +**Guidance Scale (1.5-5.0)** +- **2.5-3.5:** Recommended range +- Controls prompt following +- Higher = less AI creativity + +**Seed** +- Set specific value for reproducible results +- Leave random for varied outputs + +**Safety Tolerance (0-6)** +- **3-4:** Standard default + +### Step 6: Generate + +Click **Outpaint** to begin. The AI will: +1. Analyze the original image edges +2. Generate content for expansion areas +3. Blend new content with original +4. Return the expanded image + +Generation time: 30-90 seconds (depending on expansion size) + +### Step 7: Review and Iterate + +Check the result: +- **Seams:** Are transitions smooth? +- **Consistency:** Does style match original? +- **Content:** Does it match your prompt? +- **Perspective:** Is geometry correct? + +If needed, adjust and regenerate. + +## Expansion Strategies + +### Single Direction Expansion + +**Use when:** +- You need specific additional context +- Adjusting composition asymmetrically +- Creating specific aspect ratio + +**Tips:** +- Be very specific about the new content +- Reference original image elements +- Consider how perspective continues + +### Symmetric Expansion + +**Use when:** +- Creating centered compositions +- Maintaining balance +- Converting aspect ratios (square → landscape) + +**Tips:** +- Expand left + right equally +- Or expand up + down equally +- Helps maintain visual balance + +### Progressive Expansion + +**Use when:** +- Creating very large expansions +- Maximum control over quality +- Building panoramas + +**Process:** +1. Outpaint moderately in one direction (512px) +2. Save result +3. Outpaint the result further +4. Repeat as needed + +**Benefits:** +- Better coherence than single large expansion +- More control at each step +- Can adjust prompts between iterations + +### Multi-directional Expansion + +**Use when:** +- Need context all around +- Creating much larger images +- Maximum flexibility + +**Tips:** +- Use consistent prompt for all directions +- May require more iterations to perfect +- Consider doing in stages (horizontal first, then vertical) + +## Advanced Techniques + +### Maintaining Perspective + +Include perspective keywords in prompts: + +``` +Continuation of the aerial 45-degree view showing additional street +blocks with consistent perspective and vanishing points +``` + +### Style Consistency + +Reference original visual characteristics: + +``` +Extend the scene maintaining the architectural visualization style, +same color palette, lighting, and level of detail as original +``` + +### Content Continuation + +Specifically mention what should continue: + +``` +Additional bike lane, sidewalk with street trees, and contemporary +buildings continuing the same urban design pattern +``` + +### Asymmetric Expansion + +Different amounts per direction: +- Up: 128px (just add some sky) +- Down: 0px (don't extend down) +- Left: 512px (significant extension) +- Right: 256px (moderate extension) + +### Blend Enhancement + +For smoother transitions: +- Overlap expansion slightly with original +- Use "seamlessly blended" in prompt +- Adjust prompt strength to 0.6 or lower +- Include context from original in prompt + +## Common Use Cases + +### Converting Square to Landscape + +**Starting:** 1024×1024 image +**Goal:** 1920×1080 landscape + +**Process:** +1. Expand left: 448px +2. Expand right: 448px +3. Crop vertically if needed +4. Prompt: "Continue the scene horizontally maintaining style" + +### Adding Sky to Street View + +**Starting:** Street view with limited sky +**Goal:** More dramatic sky + +**Process:** +1. Expand up: 512px +2. Prompt: "Expansive blue sky with dramatic clouds, golden hour lighting" +3. Keep original below unchanged + +### Creating Street Panorama + +**Starting:** 1024×576 street section +**Goal:** Wide panoramic view + +**Process:** +1. First iteration: Expand right 512px +2. Save result +3. Second iteration: Expand right another 512px +4. Final: 2048×576 panorama +5. Prompt: "Continuation of urban street with similar buildings and infrastructure" + +### Reframing Composition + +**Starting:** Subject too centered +**Goal:** Rule-of-thirds composition + +**Process:** +1. Expand more on one side than the other +2. Adds breathing room and improves composition +3. Prompt describes the direction's context + +## Troubleshooting + +### Visible Seams + +**Problem:** Clear lines where expansion meets original + +**Solutions:** +- Decrease prompt strength (0.4-0.6) +- Add "seamless blend" to prompt +- Try smaller expansion amounts +- Use progressive expansion approach + +### Perspective Mismatch + +**Problem:** New areas don't match original perspective + +**Solutions:** +- Explicitly state perspective in prompt +- Reference original viewpoint +- Try smaller expansions +- Include geometric consistency in prompt + +### Style Inconsistency + +**Problem:** Expanded areas look different from original + +**Solutions:** +- Describe original style in prompt +- Include "matching original style" language +- Adjust prompt strength +- Reference specific visual elements + +### Content Repetition + +**Problem:** AI repeats same elements in expansion + +**Solutions:** +- Make prompt more varied +- Describe progression or change +- Use different seed +- Try progressive expansion instead + +### Low Quality Expansion + +**Problem:** Expanded areas lack detail + +**Solutions:** +- Reduce expansion amount +- Increase guidance scale +- Make prompt more detailed +- Use progressive expansion for large areas + +## Combining Multiple Outpaint Operations + +### Sequential Expansion + +1. **First outpaint:** Expand right 512px +2. **Save result** +3. **Second outpaint:** Load saved image, expand right 512px more +4. **Save final:** Now 1024px wider total + +**Benefits:** +- Better quality for large expansions +- Can adjust approach between iterations +- More control over final result + +### Different Directions in Sequence + +1. **Horizontal expansion:** Left + right +2. **Save and reload** +3. **Vertical expansion:** Up + down + +**Benefits:** +- Focus on one dimension at a time +- Easier to control perspective +- Better coherence + +## Workflow Recommendations + +### Quick Aspect Ratio Change + +1. Upload image +2. Select directions for desired ratio +3. Set modest expansion (256-384px per side) +4. Simple prompt: "Continue scene maintaining style" +5. Generate once + +### High-Quality Panorama + +1. Upload image +2. Expand right 512px with detailed prompt +3. Save result +4. Reload and expand right 512px again +5. Repeat as needed +6. Each iteration uses previous result + +### Comprehensive Context Addition + +1. First: Expand horizontally (left + right 384px each) +2. Save +3. Second: Expand vertically (up + down 256px each) +4. Save final +5. Use consistent prompts across iterations + +## Tips for Success + +1. **Start conservative** - Test with smaller expansions first +2. **Be specific** - Detailed prompts yield better results +3. **Match the original** - Reference style, lighting, perspective +4. **Progressive over massive** - Multiple small expansions > one huge expansion +5. **Use Gallery images** - Generated images often outpaint well +6. **Experiment with strength** - 0.5-0.7 range usually works best +7. **Consider final dimensions** - Plan total size before starting +8. **Iterate** - First result rarely perfect, refine as needed + +## Integration with Other Tools + +### Generate → Outpaint + +1. Create image with text-to-image +2. Outpaint to expand it +3. Creates larger, more contextual scene + +### Outpaint → Inpaint + +1. Outpaint to add new areas +2. Inpaint to fix specific details in expansion +3. Best of both tools + +### Outpaint → Outpaint → Inpaint + +1. Outpaint for broad expansion +2. Outpaint again for more context +3. Inpaint to perfect specific areas +4. Final refined result + +## Next Steps + +- **[Inpainting](./inpainting.md)** - Edit specific areas of your outpainted images +- **[Text-to-Image](./text-to-image.md)** - Generate source images for outpainting +- **[Gallery](./gallery.md)** - Manage and track your expansions +- **[Models & Parameters](./models-and-parameters.md)** - Understand the settings in depth diff --git a/docs/generator-app/text-to-image.md b/docs/generator-app/text-to-image.md new file mode 100644 index 000000000..5369ea64c --- /dev/null +++ b/docs/generator-app/text-to-image.md @@ -0,0 +1,325 @@ +# Text-to-Image Generation + +Create stunning images from text descriptions using AI models. This guide covers everything from basic prompts to advanced techniques. + +## How Text-to-Image Works + +The Generator uses **Flux models** from Black Forest Labs to convert your text descriptions (prompts) into images. The AI has been trained on millions of images and can understand complex descriptions, artistic styles, and visual concepts. + +## The Generator Interface + +### Main Components + +1. **Model Selector** - Choose which AI model to use +2. **Prompt Field** - Enter your text description +3. **Dimensions Controls** - Set width and height +4. **Advanced Parameters** - Fine-tune generation settings +5. **Generate Button** - Start the creation process +6. **Preview Area** - See your generated image + +### Keyboard Shortcuts + +- **Cmd/Ctrl + Enter** - Generate image +- **Escape** - Cancel generation (if in progress) + +## Choosing the Right Model + +Each Flux model has unique characteristics: + +### Flux.1 [pro] +- **Best for:** High-quality, versatile generation +- **Speed:** Moderate (30-60 seconds) +- **Token cost:** Higher +- **Use when:** Quality is priority over speed + +### Flux.1.1 [pro] +- **Best for:** Enhanced detail and prompt adherence +- **Speed:** Moderate (30-60 seconds) +- **Token cost:** Higher +- **Use when:** You need maximum accuracy to your prompt + +### Flux.1 [dev] +- **Best for:** Balanced quality and speed +- **Speed:** Fast (15-30 seconds) +- **Token cost:** Moderate +- **Use when:** Iterating quickly on concepts + +### Flux.1 [schnell] +- **Best for:** Rapid prototyping +- **Speed:** Very fast (10-20 seconds) +- **Token cost:** Lower +- **Use when:** Testing ideas or generating many variations + +### Flux Realism [lora] +- **Best for:** Photorealistic images +- **Speed:** Moderate (30-60 seconds) +- **Token cost:** Higher +- **Use when:** You need lifelike, realistic results + +See [Models & Parameters](./models-and-parameters.md) for detailed specifications. + +## Writing Effective Prompts + +### Anatomy of a Good Prompt + +**Structure:** +``` +[Subject] + [Style/Medium] + [Details] + [Lighting/Atmosphere] + [Composition] +``` + +**Example:** +``` +A modern complete street with protected bike lanes [subject], +architectural visualization style [medium], +featuring street trees, pedestrian crossings, and outdoor seating [details], +golden hour lighting with soft shadows [lighting], +aerial 45-degree view [composition] +``` + +### Prompt Writing Tips + +**Be Specific** +- ❌ "A street" +- ✅ "A narrow European cobblestone street with outdoor cafes and flower boxes" + +**Use Descriptive Language** +- ❌ "Nice buildings" +- ✅ "Contemporary mixed-use buildings with ground-floor retail and large windows" + +**Specify Perspective** +- Street-level view +- Bird's eye view +- Isometric perspective +- 45-degree aerial view +- Eye-level pedestrian perspective + +**Include Atmosphere** +- Time of day (morning, golden hour, dusk, night) +- Weather (sunny, overcast, rainy, snowy) +- Season (spring blossoms, autumn leaves, winter snow) +- Mood (vibrant, calm, bustling, quiet) + +**Mention Style** +- Architectural visualization +- Photorealistic +- Watercolor painting +- Technical drawing +- Conceptual sketch +- Urban planning diagram + +### Example Prompts for Street Design + +**Protected Bike Lane:** +``` +Modern urban street with two-way protected bike lane separated by planters, +wide sidewalks with street trees, contemporary LED streetlights, +architectural visualization style, daytime with clear blue sky, straight-on view +``` + +**Complete Street Redesign:** +``` +Before and after comparison of complete street transformation, featuring +new bike infrastructure, enlarged sidewalks, bioswales, reduced car lanes, +contemporary street furniture, aerial view, photorealistic rendering +``` + +**Pedestrian Plaza:** +``` +Urban pedestrian plaza with decorative paving, movable seating, food vendors, +surrounding mixed-use buildings, string lights overhead, people walking and sitting, +warm evening atmosphere, eye-level perspective +``` + +**Greenway:** +``` +Multi-use greenway path through urban area, separated walking and cycling paths, +native plantings, educational signage, connection to park system, +spring season with blooming trees, drone perspective +``` + +## Setting Dimensions + +### Preset Aspect Ratios + +**1:1 (Square) - 1024×1024** +- Social media posts +- Profile images +- Balanced compositions + +**16:9 (Landscape) - 1024×576** +- Presentations +- Wide street views +- Panoramic scenes + +**9:16 (Portrait) - 576×1024** +- Mobile displays +- Vertical street views +- Tall building perspectives + +**Custom Dimensions** +- Minimum: 256px per side +- Maximum: 1440px per side +- Larger images cost more tokens +- Must be divisible by 32 + +### Choosing Dimensions + +Consider your output use: +- **Presentations:** 16:9 landscape +- **Reports:** 1:1 or 4:3 +- **Social media:** 1:1 or specific platform ratios +- **Print:** Custom dimensions based on final size + +## Advanced Parameters + +### Steps (20-50) + +Controls generation refinement: +- **20-25:** Fast, good quality +- **30-35:** Balanced (recommended) +- **40-50:** Maximum detail + +More steps = longer generation time and higher token cost. + +### Guidance Scale (1.5-5.0) + +How closely the AI follows your prompt: +- **1.5-2.5:** More creative interpretation +- **2.5-3.5:** Balanced adherence (recommended) +- **3.5-5.0:** Strict prompt following + +Higher guidance = less AI creativity, more literal interpretation. + +### Seed + +A number that controls randomness: +- **Random (default):** Different result each time +- **Fixed number:** Reproducible results + +Use cases for fixed seeds: +- Creating variations with slight prompt changes +- Reproducing successful generations +- Comparing different parameters + +### Safety Tolerance (0-6) + +Content filtering level: +- **0-2:** Strict filtering +- **3-4:** Moderate (recommended) +- **5-6:** Permissive + +Adjust if generations are unexpectedly blocked. + +### Interval (Flux.1.1 [pro] only) + +Time between diffusion steps: +- **Lower:** Faster, less refined +- **Higher:** Slower, more refined +- **Default:** 2 + +## Image Prompt / Remix Feature + +Upload an existing image to influence generation: + +### How to Use + +1. Click "Upload Image Prompt" +2. Select a reference image +3. Write your prompt describing desired changes +4. Generate + +### Use Cases + +- **Style transfer:** Match the style of a reference image +- **Variations:** Create similar but different images +- **Composition guide:** Use layout from existing image +- **Color palette:** Match colors from reference + +### Tips for Image Prompts + +- Combine with detailed text prompts for best results +- Reference image doesn't need to be AI-generated +- Works well with sketches or rough concepts +- Can upload previous generations for iteration + +## Generation Workflow + +### Recommended Process + +1. **Start broad** + - Use simple prompt with Flux.1 [schnell] + - Test multiple variations quickly + +2. **Refine concept** + - Add details to successful prompts + - Switch to Flux.1 [dev] for better quality + +3. **Finalize** + - Use Flux.1 [pro] or Flux.1.1 [pro] + - Increase steps to 40-50 + - Fine-tune guidance scale + +4. **Variations** + - Keep successful prompts + - Change seed for variations + - Adjust specific details + +### Iteration Tips + +- Generate multiple versions before committing to final +- Save prompts that work well for future use +- Use Gallery to compare results and track what works +- Copy parameters from successful generations + +## Troubleshooting + +### Image Doesn't Match Prompt + +- Increase guidance scale +- Add more specific details to prompt +- Try Flux.1.1 [pro] for better prompt adherence +- Increase steps for more refinement + +### Low Quality Results + +- Switch to higher-quality model (Flux.1 [pro]) +- Increase steps (40-50) +- Check image dimensions (larger may be better) +- Refine prompt with more details + +### Generation Blocked by Safety Filter + +- Adjust safety tolerance setting +- Rephrase prompt to be more specific +- Remove potentially ambiguous terms + +### Generation Takes Too Long + +- Use faster model (Flux.1 [schnell]) +- Reduce steps +- Decrease image dimensions +- Check internet connection + +### Results Too Similar + +- Change or randomize seed +- Modify prompt slightly +- Adjust guidance scale +- Try different model + +## Best Practices + +1. **Test fast, finalize slow** - Use Flux.1 [schnell] for testing, Flux.1 [pro] for finals +2. **Document successes** - Save prompts and parameters that work well +3. **Iterate methodically** - Change one variable at a time +4. **Use Gallery metadata** - Learn from past successful generations +5. **Start simple** - Add complexity gradually +6. **Consider token cost** - Balance quality needs with token usage +7. **Experiment** - Try different models and settings + +## Next Steps + +- **[Inpainting](./inpainting.md)** - Edit specific areas of generated images +- **[Outpainting](./outpainting.md)** - Expand your creations +- **[Gallery](./gallery.md)** - Organize and review your generations +- **[Models & Parameters](./models-and-parameters.md)** - Deep dive into settings diff --git a/docs/generator-app/tokens-and-usage.md b/docs/generator-app/tokens-and-usage.md new file mode 100644 index 000000000..7bd8a70e4 --- /dev/null +++ b/docs/generator-app/tokens-and-usage.md @@ -0,0 +1,516 @@ +# Tokens and Usage + +The Generator App uses a token-based system to manage AI generation costs fairly and transparently. This guide explains how tokens work, what affects costs, and how to use them efficiently. + +## What are Tokens? + +**Tokens** are credits used to pay for AI image generation. Each generation operation (text-to-image, inpainting, or outpainting) consumes tokens based on the computational resources required. + +## How Tokens Work + +### Token Consumption + +Every time you generate an image, tokens are deducted from your balance based on: + +1. **AI Model** - Different models have different costs +2. **Image Dimensions** - Larger images cost more +3. **Generation Steps** - More steps cost more tokens +4. **Operation Type** - Text-to-image, inpaint, or outpaint +5. **Expansion Size** - For outpainting, larger expansions cost more + +### Token Display + +**Before generation:** +- Token cost shown before you click Generate +- Displays exact amount that will be charged +- Updates when you change settings + +**After generation:** +- Tokens deducted from your balance +- New balance displayed +- Transaction recorded + +**Current balance:** +- Always visible in app header +- Updates in real-time +- Shows remaining tokens + +## Token Costs + +### By Model + +Approximate relative costs (actual costs may vary): + +| Model | Relative Cost | Notes | +|-------|---------------|-------| +| Flux.1 [schnell] | Lower | Fast, economical | +| Flux.1 [dev] | Moderate | Balanced | +| Flux.1 [pro] | Higher | Premium quality | +| Flux.1.1 [pro] | Higher | Premium with enhanced features | +| Flux Realism [lora] | Higher | Specialized photorealism | + +### By Image Size + +Larger dimensions = more tokens: + +| Dimensions | Relative Cost | +|------------|---------------| +| 512×512 | Lower | +| 768×768 | Moderate | +| 1024×1024 | Standard | +| 1024×1440 | Higher | +| 1440×1440 | Highest | + +**Formula concept:** +Cost generally scales with total pixels (width × height). + +### By Steps + +More refinement = more tokens: + +| Steps | Relative Cost | +|-------|---------------| +| 4 (Flux.1 [schnell]) | Lowest | +| 20-25 | Lower | +| 30-35 | Moderate | +| 40-50 | Higher | + +**General rule:** +Each additional step adds incremental token cost. + +### By Operation Type + +**Text-to-Image:** +- Base cost for full image generation +- Depends on model + dimensions + steps + +**Inpainting:** +- Cost based on total image size (not just masked area) +- Similar to text-to-image for same dimensions +- Masked area size has minor effect + +**Outpainting:** +- Cost based on final dimensions +- Larger expansions = higher cost +- Example: 1024×1024 expanded to 2048×1024 costs more than original + +## Purchasing Tokens + +### How to Buy + +1. Click **Purchase Tokens** button +2. Choose token package +3. Complete payment +4. Tokens added to account immediately + +### Token Packages + +*Actual packages and pricing set by 3DStreet - check app for current offers* + +**Typical structure:** +- Starter packages for trying out the service +- Standard packages for regular use +- Bulk packages for power users (better value) + +### Payment Methods + +Supported payment methods vary by implementation: +- Credit/debit cards +- Digital wallets +- Other payment processors + +Check the purchase modal for available options. + +## Optimizing Token Usage + +### Strategy 1: Choose the Right Model + +**For exploration:** +- Use Flux.1 [schnell] or Flux.1 [dev] +- Lower cost per generation +- Perfect for testing ideas + +**For finals:** +- Use Flux.1 [pro] or specialized models +- Higher cost but necessary quality +- Only for confirmed final outputs + +**Example savings:** +Generate 10 variations with [schnell], then 1 final with [pro] instead of 11 generations with [pro]. + +### Strategy 2: Start Small + +**Dimensions strategy:** +1. Test prompts at 512×512 or 768×768 +2. Refine prompt and settings +3. Generate final at 1024×1024 or larger + +**Example savings:** +Testing at 512×512 costs ~25% of 1024×1024 cost. + +### Strategy 3: Optimize Steps + +**Progressive refinement:** +1. Test with 20-25 steps +2. Evaluate if more refinement needed +3. Only use 40-50 steps for finals + +**Example savings:** +25 steps costs ~50% of 50 steps. + +### Strategy 4: Use Seeds Strategically + +**Reproducibility benefits:** +1. Find good result with random seed +2. Note the seed value +3. Make variations using same seed +4. Only change specific parameters + +**Benefit:** +Avoid generating many random variations hoping for success. + +### Strategy 5: Plan Outpainting + +**Incremental expansion:** +- Small expansion (256px): Lower cost +- Large expansion (1024px): Higher cost + +**Progressive approach:** +1. Expand 512px first +2. Review result +3. Expand again if needed + +**Benefit:** +Avoid wasted tokens on massive expansions that don't work. + +### Strategy 6: Batch Similar Work + +**Workflow efficiency:** +1. Gather all prompts needing similar settings +2. Configure once +3. Generate all in sequence +4. Review and iterate in batch + +**Benefit:** +Reduces trial-and-error waste. + +## Token Management Best Practices + +### 1. Monitor Your Balance + +**Why:** +- Avoid running out mid-project +- Plan purchases strategically +- Budget for projects + +**How:** +- Check balance regularly +- Estimate needs before starting +- Purchase before balance critical + +### 2. Track Usage Patterns + +**Why:** +- Understand your typical costs +- Identify inefficiencies +- Optimize spending + +**How:** +- Note costs for common operations +- Review Gallery to see what you generated +- Calculate average cost per useful output + +### 3. Budget by Project + +**Why:** +- Control spending +- Ensure sufficient tokens +- Avoid overspending + +**How:** +- Estimate tokens needed +- Add buffer for iterations +- Track actual vs. estimated + +**Example project budget:** +``` +Project: Main Street Redesign + +Exploration (Flux.1 [schnell], 512×512): +- 20 variations × 10 tokens = 200 tokens + +Refinement (Flux.1 [dev], 1024×1024): +- 10 iterations × 50 tokens = 500 tokens + +Finals (Flux.1 [pro], 1024×1024): +- 3 final versions × 100 tokens = 300 tokens + +Total estimated: 1,000 tokens +Add 20% buffer: 1,200 tokens +``` + +### 4. Minimize Failed Generations + +**Why:** +- Failed generations still cost tokens +- Wasted resources +- Delays projects + +**How:** +- Test prompts with cheap settings first +- Verify settings before generating +- Review similar successful generations +- Use proven prompts as templates + +### 5. Leverage Free Optimizations + +**Why:** +- Improve results without extra cost +- Maximize value per token + +**How:** +- Refine prompts (doesn't cost tokens) +- Study Gallery metadata (free) +- Learn from documentation (free) +- Plan before generating (free) + +### 6. Know When to Spend + +**Sometimes higher cost is worth it:** +- Client deliverables +- Final presentations +- Portfolio pieces +- Critical milestones + +**Don't over-optimize:** +- Spending 1000 tokens on finals is fine if quality needed +- Budget accordingly for important work + +## Understanding Token Costs + +### Cost Transparency + +The Generator App shows token cost **before** you generate: + +**Pre-generation display:** +``` +Generate +Cost: 75 tokens +``` + +**Benefits:** +- No surprises +- Informed decisions +- Budget control + +### Variable Costs + +Token costs can change based on: + +**User-controlled factors:** +- Model selection +- Dimension settings +- Step count +- Expansion size (outpaint) + +**Not user-controlled:** +- Base model pricing +- Platform costs +- Service fees + +### Refund Policy + +**Typical policies:** +- Successful generations: No refund (you got the image) +- Failed generations: Usually refunded automatically +- Service errors: Contact support + +Check 3DStreet's terms of service for specific policies. + +## Token Usage Scenarios + +### Scenario 1: Rapid Prototyping + +**Goal:** Test 20 different prompt ideas + +**Strategy:** +- Model: Flux.1 [schnell] +- Dimensions: 512×512 +- Steps: 4 +- Estimated: 10 tokens × 20 = 200 tokens + +**Outcome:** +- Quick exploration +- Low cost +- Identify best directions + +### Scenario 2: Client Presentation + +**Goal:** Deliver 3 high-quality options + +**Strategy:** +1. Explore with [schnell] (200 tokens) +2. Refine 5 candidates with [dev] (250 tokens) +3. Finalize 3 with [pro] (300 tokens) +4. Total: 750 tokens + +**Outcome:** +- Best possible quality +- Systematic refinement +- Controlled spending + +### Scenario 3: Personal Project + +**Goal:** Create street redesign visualization + +**Strategy:** +- Mix of models based on stage +- Start small, scale up +- Iterate based on results +- Budget: 500 tokens + +**Outcome:** +- Balanced approach +- Quality where needed +- Cost-effective + +### Scenario 4: Learning/Experimentation + +**Goal:** Learn how different settings work + +**Strategy:** +- Use cheapest settings +- Focus on learning, not outputs +- Document findings +- Budget: 300 tokens + +**Outcome:** +- Knowledge gained +- Minimal cost +- Better future results + +## Troubleshooting + +### Insufficient Tokens + +**Problem:** Can't generate due to low balance + +**Solution:** +1. Purchase additional tokens +2. Or reduce cost by: + - Smaller dimensions + - Fewer steps + - Cheaper model + +### Unexpected Costs + +**Problem:** Generation cost more than expected + +**Possible causes:** +- Large dimensions +- High step count +- Premium model +- Large outpaint expansion + +**Solution:** +- Check pre-generation cost display +- Adjust settings if too high +- Review Gallery to compare typical costs + +### Token Deduction Without Image + +**Problem:** Tokens deducted but no image generated + +**Possible causes:** +- Generation failed server-side +- Network interruption +- Content filter blocked generation + +**Solution:** +- Check if tokens refunded automatically +- Contact support if not +- Review error message +- Adjust prompt/settings and retry + +### Balance Not Updating + +**Problem:** Token balance not reflecting purchase or generation + +**Possible causes:** +- Display lag +- Sync issue +- Payment processing delay + +**Solution:** +- Refresh page +- Check payment confirmation +- Wait a few minutes +- Contact support if persists + +## Frequently Asked Questions + +**How many tokens do I need to get started?** +Start with a small package. 500-1000 tokens lets you explore features and understand costs before committing to larger purchases. + +**Do tokens expire?** +Check 3DStreet's terms. Typically tokens don't expire, but policies vary. + +**Can I get a refund on unused tokens?** +Check 3DStreet's refund policy. Generally, tokens are non-refundable once purchased. + +**What happens if generation fails?** +Failed generations are typically refunded automatically. If not, contact support. + +**Can I share tokens with team members?** +This depends on account type. Check if team/organizational accounts are available. + +**Are there subscription options instead of tokens?** +Check 3DStreet for current pricing models. Token packages may be supplemented by subscription options. + +**How do I track my token spending?** +Monitor your balance before/after generations. Consider keeping manual logs for budget tracking. + +**Can I see my token usage history?** +Check if the app provides transaction history. If not, use Gallery to estimate based on what you generated. + +## Cost-Benefit Analysis + +### When to Spend More Tokens + +**High-stakes deliverables:** +- Client presentations +- Public portfolio +- Marketing materials +- Final production assets + +**Justification:** +Quality directly impacts professional outcome. + +### When to Save Tokens + +**Exploration and testing:** +- Prompt experimentation +- Learning new features +- Personal projects +- Quick mockups + +**Justification:** +Lower quality acceptable for learning/testing purposes. + +### ROI Thinking + +**Consider:** +- Time saved vs. manual creation +- Quality improvement vs. alternatives +- Professional value of outputs +- Learning value of experimentation + +**Example:** +Spending 500 tokens to create a client-ready visualization in 1 hour vs. 8 hours in traditional software = excellent ROI. + +## Next Steps + +- **[Getting Started](./getting-started.md)** - Begin using your tokens effectively +- **[Models & Parameters](./models-and-parameters.md)** - Understand cost factors in depth +- **[Text-to-Image](./text-to-image.md)** - Learn efficient generation techniques +- **[Gallery](./gallery.md)** - Track and learn from your usage patterns diff --git a/docs/index.md b/docs/index.md index 87c4021ae..26566faed 100644 --- a/docs/index.md +++ b/docs/index.md @@ -4,25 +4,48 @@ id: index title: Overview --- -# 3DStreet Overview +# 3DStreet Overview Welcome to the 3DStreet documentation. -**3DStreet is an open-source web-based 3D platform to create and share highly detailed street scenes.** -
-
-**You can explore new scenes with 3DStreet Viewer or design new scenes with 3DStreet Editor.** A quick way to get started is to import a street from Streetmix and instantly generate a 3DStreet scene that you can modify and build from. [This step-by-step tutorial guides you through this process in 15 minutes or less.](/docs/getting-started) -
-
+**3DStreet is an open-source web-based platform for street design and visualization.** We provide two powerful applications to help you create, design, and visualize street scenes: + +## Our Applications + +### Editor App + +**Create and customize detailed 3D street scenes.** The Editor is a web-based 3D platform for designing highly detailed street configurations. + +- **Import and modify** streets from Streetmix +- **Customize scenes** with extensive object libraries +- **Export and share** your creations +- **View in AR** on mobile devices + +[Get started with the Editor →](./editor-app/overview-3dstreet-editor) + +### Generator App + +**AI-powered image generation and editing for street design.** The Generator uses state-of-the-art AI models to create and enhance street visualizations. + +- **Text-to-image** - Generate street scenes from descriptions +- **Inpainting** - Edit specific areas of images +- **Outpainting** - Expand images beyond their boundaries +- **Multiple AI models** - Choose the right tool for your needs + +[Get started with the Generator →](./generator-app/getting-started) + +## Quick Start + +New to 3DStreet? Check out our [Getting Started guide](/docs/getting-started) to learn the basics of both applications. ![Screenshot of 3 different camera perspectives from 3DStreet Editor.](/img/docs/3dstreet-editor-camera-combo-views.jpg) -
-
-**You can customize your street scene to match any configuration.** Use **3DStreet Editor** tools to modify, add, or clone objects to match an exisiting or future street configuration. [Check out the introductory Editor docs to learn the basic capabilities.](./3dstreet-editor/overview-3dstreet-editor) -
-
+## What You Can Do + +**Design street configurations** - Use the Editor to modify, add, or clone objects to match existing or future street layouts. + +**Generate visualizations** - Use the Generator to create street scene images from text descriptions or enhance existing designs. + +**Share your work** - Take snapshots, export 3D scenes, or download AI-generated images to share on social media or import into other applications. -**You can share your creation with others, or spice it up by importing into other apps.** -
-Take instant snapshots to share on social media, or export your entire detailed scene to use in other 3D rendering apps. +**Explore in AR** - View Editor scenes in augmented reality on mobile devices.