docs(en): complete stage-1 translation gaps and fixes
This commit is contained in:
sanbuphy
@@ -541,3 +541,298 @@ Through Xiao Ming's story, we learned a complete methodology:
|
||||
---
|
||||
|
||||
In the next chapter, we'll take our validated ideas and start learning how to use AI IDE to turn them into interactive product prototypes.
|
||||
|
||||
## Final Act: Your Action Plan
|
||||
|
||||
### Memory Mantra
|
||||
|
||||
**Start from one person, one concrete task, one entry point; segment broadly, drill deeply; refine with AI; validate in five steps before building.**
|
||||
|
||||
Interpretation:
|
||||
|
||||
- **One person**: Start from a user group you naturally understand
|
||||
- **One task**: Focus on one concrete problem, not everything at once
|
||||
- **One entry point**: Find a sharp initial wedge
|
||||
- **Horizontal segmentation**: Identify the user subgroup with strongest willingness to pay
|
||||
- **Vertical deep dive**: Understand the full user scenario and journey
|
||||
- **AI dialogue refinement**: Use AI to sharpen product concept and execution plan
|
||||
- **Five-step validation**: Verify demand before investing heavily
|
||||
|
||||
---
|
||||
|
||||
### Post-class Exercise
|
||||
|
||||
Pick one small but real annoyance from your daily life and apply this chapter's method:
|
||||
|
||||
::: tip Exercise Task
|
||||
|
||||
**1. Describe the annoyance in one sentence**
|
||||
- Example: "I want to build a budgeting app to help users track spending."
|
||||
|
||||
**2. Horizontal segmentation: list 3 user groups with different needs**
|
||||
- Example: small business owners, parents of overseas students, freelancers
|
||||
|
||||
**3. Choose one user group and perform a vertical deep dive**
|
||||
- Example: parents of overseas students worry about spending but cannot see detailed usage
|
||||
|
||||
**4. Reframe product concept: from one feature to one solution**
|
||||
- Example: "Overseas Spending Steward" instead of a generic bookkeeping app
|
||||
|
||||
**5. Evaluate your idea with the validation checklist (see Appendix F)**
|
||||
|
||||
Share your analysis with the community and discuss with others.
|
||||
|
||||
:::
|
||||
|
||||
---
|
||||
|
||||
## Appendix: SOP Methodology
|
||||
|
||||
### Appendix A: 5-Step Demand Validation Method
|
||||
|
||||
When you have an idea, how do you quickly judge whether it is worth building?
|
||||
|
||||
**Step 1: User validation (find 10 target users)**
|
||||
|
||||
Do **not** ask: "Would you use my product?"
|
||||
|
||||
Ask:
|
||||
1. "How do you solve this problem today?" (real behavior)
|
||||
2. "How many times did this bother you in the last week?" (frequency)
|
||||
3. "How much time/money do you currently spend to solve it?" (willingness to pay)
|
||||
4. "If a solution requires behavior change, would you do it?" (switching cost)
|
||||
|
||||
Evaluation hints:
|
||||
- If 3+ users say "this hurts me every day," it may be a pain point
|
||||
- If users say "interesting, but not urgent," it's likely an itch point
|
||||
- If users already use alternatives but remain unsatisfied, there is a real opening
|
||||
|
||||
**Key question:** what alternative are users using now?
|
||||
|
||||
| Alternative Type | What It Means | Opportunity |
|
||||
|------------|------|---------|
|
||||
| No alternative | Users endure silently | Big opportunity, but requires market education |
|
||||
| Very manual workaround | Excel/manual/multi-person patchwork | Good opportunity |
|
||||
| Tool stitching | A + B + C tools combined | Good integration opportunity |
|
||||
| Mature product, dissatisfied | Existing gap in experience | Opportunity with differentiation |
|
||||
| Mature product, satisfied | Need disruptive edge | Low probability opportunity |
|
||||
|
||||
::: tip What is "disruptive innovation"?
|
||||
It is not just "better features"; it is usually a simpler/cheaper way to serve ignored users, then expanding upward over time.
|
||||
:::
|
||||
|
||||
**Most direct validation method: pre-order/deposit**
|
||||
|
||||
1. Build a simple landing page
|
||||
2. Add a pre-order or reservation button
|
||||
3. Measure how many users actually pay (even a small deposit counts)
|
||||
|
||||
Decision threshold:
|
||||
- Deposit conversion > 10%: demand is likely real
|
||||
- Deposit conversion 5%-10%: demand exists but product needs refinement
|
||||
- Deposit conversion < 5%: concept likely not working yet
|
||||
|
||||
Simple market formula:
|
||||
|
||||
```text
|
||||
Market size = target user count × willingness to pay × average order value
|
||||
```
|
||||
|
||||
**Early-stage moat reality:**
|
||||
- Most early products do not start with a strong moat
|
||||
- That's normal; speed of execution matters first
|
||||
- Build traction first, then strengthen barriers
|
||||
|
||||
---
|
||||
|
||||
### Appendix B: Horizontal Segmentation Method
|
||||
|
||||
Do not target "all X users." Choose one specific segment with sharper pain and clearer willingness to pay.
|
||||
|
||||
Steps:
|
||||
1. List all possible subsegments
|
||||
2. Evaluate each segment
|
||||
3. Pick one and go deep
|
||||
|
||||
| Evaluation Dimension | Explanation |
|
||||
|---------|------|
|
||||
| Pain intensity | Pain point or itch point? |
|
||||
| Willingness to pay | How much would they pay? |
|
||||
| Market size | How many users are there? |
|
||||
| Competition | Are existing solutions already good enough? |
|
||||
| Your understanding | Do you understand this group and have access channels? |
|
||||
|
||||
Selection priority:
|
||||
- Highest pain intensity
|
||||
- Strongest payment intention
|
||||
- Best domain understanding from you
|
||||
- Relatively lower competitive pressure
|
||||
|
||||
---
|
||||
|
||||
### Appendix C: Vertical Scenario Deep-Dive Method
|
||||
|
||||
After choosing a segment, do not stop at features. Understand the full context and emotional journey.
|
||||
|
||||
Steps:
|
||||
1. Describe the user's day end-to-end
|
||||
2. Find pain points in each scenario
|
||||
3. Identify emotional triggers (fear, anxiety, helplessness, loneliness, frustration)
|
||||
4. Rebuild product value around scenario + emotion
|
||||
|
||||
The goal is to evolve from "tool feature" to "complete solution."
|
||||
|
||||
---
|
||||
|
||||
### Appendix D: More Examples of Idea Reframing
|
||||
|
||||
#### Example 1: From "Bookkeeping App" to "Overseas Spending Steward"
|
||||
|
||||
- Generic idea: automatic spending categorization
|
||||
- Core problem shift: not bookkeeping, but parents' loss of control over overseas spending visibility
|
||||
- Reframed value: real-time child spending sync + overspending alerts + monthly analysis + peer benchmark insights
|
||||
|
||||
#### Example 2: From "Pomodoro Tool" to "Remote Work Proof"
|
||||
|
||||
- Generic idea: focus timer
|
||||
- Core problem shift: not focus itself, but trust gap between remote worker and manager
|
||||
- Reframed value: time tracking + productivity reports + privacy-safe activity summaries + auto daily report
|
||||
|
||||
#### Example 3: From "Used Book Marketplace" to "Picture Book Subscription Library"
|
||||
|
||||
- Generic idea: used book trading
|
||||
- Core problem shift: short lifecycle of kids' picture books
|
||||
- Reframed value: monthly age-fit picture book rotation + progress tracking + hygiene guarantee
|
||||
|
||||
---
|
||||
|
||||
### Appendix E: 5-Step AI Dialogue Method for Concept Refinement
|
||||
|
||||
Use multi-round AI dialogue to turn rough ideas into executable plans.
|
||||
|
||||
**Step 1: Submit raw idea and concerns**
|
||||
|
||||
```text
|
||||
I want to build [product concept], but I found [problem/concern].
|
||||
```
|
||||
|
||||
**Step 2: Ask AI for MVP plan**
|
||||
|
||||
```text
|
||||
Please help me:
|
||||
1. Plan an MVP
|
||||
2. Provide concrete technical suggestions
|
||||
3. Estimate cost
|
||||
4. Define validation metrics
|
||||
```
|
||||
|
||||
**Step 3: Raise concrete concerns**
|
||||
|
||||
```text
|
||||
I worry about:
|
||||
1. [Concern 1]
|
||||
2. [Concern 2]
|
||||
3. [Concern 3]
|
||||
```
|
||||
|
||||
**Step 4: Request option comparison and solutions**
|
||||
|
||||
```text
|
||||
Please provide specific solutions for my concerns.
|
||||
```
|
||||
|
||||
**Step 5: Confirm final action plan**
|
||||
|
||||
```text
|
||||
Please help me organize a clear action plan.
|
||||
```
|
||||
|
||||
::: tip Key Techniques
|
||||
- Multi-round iteration: don't expect one perfect answer
|
||||
- Add context: your observations, lived experience, user feedback
|
||||
- Challenge weak AI suggestions when needed
|
||||
- Always end with an actionable execution plan
|
||||
:::
|
||||
|
||||
---
|
||||
|
||||
### Appendix F: Demand Validation Checklist
|
||||
|
||||
Before investing development time, verify this checklist. The core question is: **will users pay for this?**
|
||||
|
||||
::: tip Validation Checklist
|
||||
**1. User profile clarity**
|
||||
- ☐ Can you describe the target user in one sentence?
|
||||
- ☐ Do you know their current alternative?
|
||||
- ☐ Can you describe specific usage scenarios?
|
||||
- ☐ Does this group have purchasing power?
|
||||
|
||||
**2. Pain intensity**
|
||||
- ☐ What cost do users pay now (time/money/effort)?
|
||||
- ☐ What happens if this problem stays unsolved?
|
||||
- ☐ Are users actively searching for solutions?
|
||||
- ☐ How much are they willing to pay?
|
||||
|
||||
**3. Differentiation**
|
||||
- ☐ What is your advantage over existing options?
|
||||
- ☐ Is that advantage strong enough to trigger switching?
|
||||
- ☐ Is your capability hard to copy quickly?
|
||||
- ☐ Is differentiation strong enough to support payment?
|
||||
|
||||
**4. Business viability**
|
||||
- ☐ Will users really pay? How much? (must be tested)
|
||||
- ☐ What is approximate CAC?
|
||||
- ☐ Can LTV cover CAC?
|
||||
- ☐ Do you have additional monetization paths?
|
||||
|
||||
**5. Rapid validation**
|
||||
- ☐ Can you build a testable prototype in 1-2 weeks with minimum cost?
|
||||
- ☐ Can you interview 10 target users?
|
||||
- ☐ Can you design an experiment to test the core hypothesis?
|
||||
- ☐ Can you test willingness to pay with real deposits?
|
||||
:::
|
||||
|
||||
Do not ask "Would you use this?" It usually gives false positives.
|
||||
|
||||
Ask behavior-first questions:
|
||||
- "How do you solve this now?"
|
||||
- "How many times did this bother you in the last week?"
|
||||
- "If the solution requires behavior change, will you change?"
|
||||
- "Would you buy at price X?"
|
||||
|
||||
Best validation is still real prepaid commitment.
|
||||
|
||||
---
|
||||
|
||||
## Chapter Summary
|
||||
|
||||
In this chapter, through Xiao Ming's story, we learned to evaluate ideas with a product-manager mindset. The core question remained unchanged: **will users pay for this?**
|
||||
|
||||
::: info Core Points
|
||||
**1. Three standards of real demand**
|
||||
- Users are willing to pay
|
||||
- Users are willing to change behavior
|
||||
- Without a solution, users experience clear loss
|
||||
|
||||
**2. Path from ordinary idea to paid product**
|
||||
- Horizontal segmentation: find specific users with stronger payment intent
|
||||
- Vertical deep dive: understand complete scenario and emotional context
|
||||
- Value reframing: evolve from feature/tool to complete solution
|
||||
|
||||
**3. Avoid fake-demand traps**
|
||||
- Solving itch points instead of pain points
|
||||
- Market too small to support the business model
|
||||
- Solution complexity higher than problem value
|
||||
|
||||
**4. Validate payment intention early**
|
||||
- Interview 10 target users in depth
|
||||
- Use prepaid deposits to test real willingness
|
||||
- >10% deposit conversion is a practical signal to continue
|
||||
|
||||
**5. Use AI dialogue for refinement**
|
||||
- Iterate through multiple rounds
|
||||
- Stay execution-focused
|
||||
- Set measurable validation metrics and adjust quickly
|
||||
:::
|
||||
|
||||
**Remember:** strong product managers do not invent demand from thin air. They discover real needs that are ignored, underestimated, or poorly served, then build products users are willing to pay for.
|
||||
|
||||
@@ -657,7 +657,7 @@ When code "doesn't work," you can follow this fixed process to talk to AI:
|
||||
Avoid just saying "won't open" or "not working." You can describe it like this:
|
||||
|
||||
> After opening, the page is completely blank, not showing the welcome text you mentioned.
|
||||
> I opened the xxxx page, and the part I just mentioned isn't there, this doesn't work.
|
||||
> I opened the relevant page, and the part I just mentioned is not there, so this still doesn't work.
|
||||
|
||||
2. **Send AI your current complete code**
|
||||
Many times the problem is: you copied one line less, or mixed content from the previous and current times together.
|
||||
@@ -1140,7 +1140,7 @@ Can be understood as a "time machine" for projects:
|
||||
After enabling Git, that project folder with "version records" is called a "repository."
|
||||
|
||||
**Commit (Commit)**
|
||||
Every time you feel "this wave of modifications counts as a阶段性成果," you can:
|
||||
Every time you feel "this round of modifications counts as a meaningful milestone," you can:
|
||||
|
||||
- Write a description (such as: `Add score panel`);
|
||||
- Package all current modifications into a version;
|
||||
|
||||
@@ -36,7 +36,7 @@ This chapter may contain some business terminology. If you don't understand some
|
||||
<ClientOnly>
|
||||
<StepBar :active="0" :items="[
|
||||
{ title: 'Requirements Analysis', description: 'From vague to specific' },
|
||||
{ title: 'Single Page Validation', description: 'Core functionality落地' },
|
||||
{ title: 'Single Page Validation', description: 'Core functionality implementation' },
|
||||
{ title: 'Multi-page Expansion', description: 'Complete application structure' },
|
||||
{ title: 'Beautification', description: 'Improve user experience' }
|
||||
]" />
|
||||
@@ -74,7 +74,7 @@ At this point you might think: "Boss, you're dreaming again!" However, such vagu
|
||||
Since we've learned AI IDE, you think about it and this requirement is actually quite simple — just let AI give a prompt based on this, throw it to the Agent and we're done, right?
|
||||
|
||||
```
|
||||
Please refer to my requirements xxxx,
|
||||
Please refer to my requirements below,
|
||||
Help me design an e-commerce material workbench,
|
||||
Including generation and management functions for product descriptions, images, videos, and other materials.
|
||||
```
|
||||
@@ -243,7 +243,7 @@ This is what we need to figure out before writing code. Code is just a tool; **u
|
||||
<ClientOnly>
|
||||
<StepBar :active="1" :items="[
|
||||
{ title: 'Requirements Analysis', description: 'From vague to specific' },
|
||||
{ title: 'Single Page Validation', description: 'Core functionality落地' },
|
||||
{ title: 'Single Page Validation', description: 'Core functionality implementation' },
|
||||
{ title: 'Multi-page Expansion', description: 'Complete application structure' },
|
||||
{ title: 'Beautification', description: 'Improve user experience' }
|
||||
]" />
|
||||
@@ -300,7 +300,7 @@ Help me implement a single-page application based on business logic, for validat
|
||||
Business logic reference:
|
||||
1. Help operations batch generate first version of image and text drafts:
|
||||
- **Input (supports direct upload and batch import of materials):**
|
||||
- Product basic info: name, category, brand, material, size, color, applicable人群, etc.;
|
||||
- Product basic info: name, category, brand, material, size, color, target audience, etc.;
|
||||
- Product images: white background / simple scene images;
|
||||
- Each generation supports uploading additional historical bestseller screenshots or reference links, allowing for reference materials;
|
||||
- Supports batch import via Excel, or online entry/upload on the page.
|
||||
@@ -387,7 +387,7 @@ Now you can see the running effect in the browser. Next, we'll expand based on t
|
||||
<ClientOnly>
|
||||
<StepBar :active="2" :items="[
|
||||
{ title: 'Requirements Analysis', description: 'From vague to specific' },
|
||||
{ title: 'Single Page Validation', description: 'Core functionality落地' },
|
||||
{ title: 'Single Page Validation', description: 'Core functionality implementation' },
|
||||
{ title: 'Multi-page Expansion', description: 'Complete application structure' },
|
||||
{ title: 'Beautification', description: 'Improve user experience' }
|
||||
]" />
|
||||
@@ -439,7 +439,7 @@ AI IDE will help you complete these expansions. You just need to confirm and adj
|
||||
<ClientOnly>
|
||||
<StepBar :active="3" :items="[
|
||||
{ title: 'Requirements Analysis', description: 'From vague to specific' },
|
||||
{ title: 'Single Page Validation', description: 'Core functionality落地' },
|
||||
{ title: 'Single Page Validation', description: 'Core functionality implementation' },
|
||||
{ title: 'Multi-page Expansion', description: 'Complete application structure' },
|
||||
{ title: 'Beautification', description: 'Improve user experience' }
|
||||
]" />
|
||||
@@ -503,3 +503,44 @@ In this chapter, we learned:
|
||||
- Iterate based on feedback — keep improving
|
||||
|
||||
In the next chapter, we'll learn how to integrate real AI capabilities into our prototype.
|
||||
|
||||
## 5. 📚 Assignment: Recreate Your Own Douyin Ecommerce Workbench
|
||||
|
||||
<el-card shadow="hover" style="margin: 20px 0; border-radius: 12px;">
|
||||
<template #header>
|
||||
<div style="font-weight: bold; font-size: 16px;">🚀 Challenge: Recreate the Ecommerce Asset Workbench</div>
|
||||
</template>
|
||||
|
||||
<p>
|
||||
Use this chapter's prompts and workflow to complete a full end-to-end loop:
|
||||
</p>
|
||||
|
||||
<ul>
|
||||
<li>
|
||||
<strong>Full Loop Practice</strong>
|
||||
<ul>
|
||||
<li>Business requirement prompt generation → single-page prototype generation → multi-page prototype generation</li>
|
||||
</ul>
|
||||
</li>
|
||||
<li>
|
||||
<strong>Share Results</strong>
|
||||
<ul>
|
||||
<li>Take a screenshot of your app and share it with the community</li>
|
||||
</ul>
|
||||
</li>
|
||||
<li>
|
||||
<strong>Thinking Exercise</strong>
|
||||
<ul>
|
||||
<li>Reserve room for next chapter ("Integrating LLM and text-to-image capabilities"), and think ahead: how will you embed AI copywriting, image generation, and script generation in your workbench?</li>
|
||||
</ul>
|
||||
</li>
|
||||
</ul>
|
||||
</el-card>
|
||||
|
||||
## Next Step
|
||||
|
||||
In the next chapter, we will integrate concrete AI capabilities into this content production workbench (text-to-text, image-to-text, and text-to-image), for example:
|
||||
|
||||
- Automatically generate first-draft copy and multiple title options for a content task
|
||||
- Auto-generate visual drafts from task descriptions (text-to-image)
|
||||
- Auto-classify and summarize historical content tasks to help plan your next campaign
|
||||
|
||||
@@ -285,3 +285,320 @@ caption = caption_image(image_path)
|
||||
```
|
||||
|
||||
:::
|
||||
|
||||
For image-generation integration, failures can be noisy and hard to debug. Ask AI IDE to display full error details every time (instead of only "generation failed"), for example:
|
||||
|
||||
```text
|
||||
Don't only show "image generation failed." Please always display the full failure reason, such as model mismatch, request errors, or timeout details.
|
||||
```
|
||||
|
||||
If changes are not reflected in the page after multiple attempts, ask AI IDE to restart the project.
|
||||
|
||||
In ecommerce scenarios, you may want uploaded clothes to be automatically "worn" by virtual models, or automatically generate attractive product posters and promotional visuals. Here is an example prompt for generating an ecommerce poster:
|
||||
|
||||
|
||||
|
||||
You can combine text-to-image and image-to-image APIs based on your own business scenario ideas.
|
||||
|
||||
## 4. More Image Service Options
|
||||
|
||||
Below are additional choices. It's recommended to first run through a working Qwen image generation result, then replace with another service based on quality and cost.
|
||||
|
||||
### 4.1 Recraft Integration
|
||||
|
||||
If your prototype is more design-production oriented (for example brand-style illustrations, marketing posters, vector-style assets), Recraft is often a better fit. The integration method is exactly the same: **get a Key + find official examples + let AI IDE wire them into your page/button**.
|
||||
|
||||
::: details Learn More: What is Recraft?
|
||||
|
||||
> Recraft is an AI tool for designers, illustrators, and marketers, founded in 2022 (US) with headquarters in London. It supports generating and iterating visual content (images, vector art, and 3D graphics), with strengths in output quality, element-level control, and brand-consistent design.
|
||||
>
|
||||
> 
|
||||
> 
|
||||
|
||||
First, go to the [API entry](https://www.recraft.ai/profile/api) to obtain an API Key.
|
||||
|
||||
Recraft currently does not provide a free quota in this workflow, so you'll need to top up credits yourself.
|
||||
|
||||
|
||||
|
||||
Then follow the same process and use official documentation examples:
|
||||
|
||||
- <https://www.recraft.ai/docs/api-reference/getting-started>
|
||||
- <https://www.recraft.ai/docs/api-reference/usage>
|
||||
- <https://www.recraft.ai/docs/api-reference/guides>
|
||||
|
||||
:::
|
||||
|
||||
### 4.2 Qwen Image / Qwen Image Edit Integration
|
||||
|
||||
If you want a relatively simple way to integrate image generation, Qwen Image is also a good choice. The approach is unchanged: treat it as an image API and connect it to your prototype button.
|
||||
|
||||
::: details Learn More: What are Qwen Image and Qwen Image Edit?
|
||||
|
||||
**Qwen Image** is Alibaba Tongyi's image generation model family, mainly including two model types:
|
||||
|
||||
**1. Qwen Image: Text-to-Image**
|
||||
|
||||
Generate a brand-new image from text prompts. You provide a description, the model interprets it and generates matching visuals.
|
||||
|
||||
|
||||
|
||||
Main capabilities:
|
||||
|
||||
- **Text-to-image**: Supports multiple styles (realistic, cartoon, ink, cyberpunk, etc.)
|
||||
- **Style transfer**: Convert an image into a target artistic style
|
||||
- **Image variation**: Generate new images with similar style from references
|
||||
- **Resolution enhancement**: Improve clarity and details
|
||||
|
||||
**2. Qwen Image Edit: Image-to-Image**
|
||||
|
||||
Edit existing images through natural language instructions.
|
||||
|
||||
Main capabilities:
|
||||
|
||||
- **Local replacement**: Replace specific objects/characters (e.g. "change the background to a beach")
|
||||
- **Element removal**: Remove unwanted elements
|
||||
- **Style conversion**: Apply filters or artistic effects
|
||||
- **Image expansion**: Extend the image boundary and generate new content
|
||||
- **Smart retouching**: Auto-enhance quality, lighting, and defects
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
Why choose the Qwen Image series:
|
||||
|
||||
- Better Chinese prompt understanding
|
||||
- Lower cost compared with many global alternatives
|
||||
- Fast generation speed
|
||||
- Stable output quality in ecommerce and content scenarios
|
||||
- Rich style diversity
|
||||
|
||||
Typical use cases:
|
||||
|
||||
- Ecommerce: main images, detail-page images, promo posters
|
||||
- Social media: avatars, stickers, visual assets
|
||||
- Design: quick concept assets, background assets
|
||||
- Marketing: ad visuals, event banners, holiday posters
|
||||
:::
|
||||
|
||||
Open [SiliconFlow](https://siliconflow.cn/) and use the Playground (without calling APIs) to test model effects. Use the top "Filters" option to narrow to image-generation models and choose `Qwen/Qwen-Image`.
|
||||
|
||||
|
||||
|
||||
After confirming the model, check the official API reference and open the [image generation API section](https://docs.siliconflow.cn/cn/api-reference/images/images-generations). Then send the example request plus your API key to AI IDE.
|
||||
|
||||
```bash
|
||||
curl --request POST \
|
||||
--url https://api.siliconflow.cn/v1/images/generations \
|
||||
--header 'Authorization: Bearer <token>' \
|
||||
--header 'Content-Type: application/json' \
|
||||
--data '
|
||||
{
|
||||
"model": "Qwen/Qwen-Image-Edit-2509",
|
||||
"prompt": "an island near sea, with seagulls, moon shining over the sea, light house, boats in the background, fish flying over the sea"
|
||||
}
|
||||
'
|
||||
```
|
||||
|
||||
You can use either `Qwen/Qwen-Image` or `Qwen/Qwen-Image-Edit-2509`.
|
||||
|
||||
::: details Image Edit Reference Code
|
||||
|
||||
Copy the code below plus your key into AI IDE:
|
||||
|
||||
```python
|
||||
import requests
|
||||
import os
|
||||
from typing import Dict, Any, Optional
|
||||
|
||||
SILICONFLOW_API_KEY: str = ""
|
||||
SILICONFLOW_BASE_URL: str = "https://api.siliconflow.cn/v1/images/generations"
|
||||
QWEN_IMAGE_EDIT_MODEL: str = "Qwen/Qwen-Image-Edit-2509"
|
||||
|
||||
def generate_image_edit(
|
||||
prompt: str,
|
||||
image: Optional[str] = None,
|
||||
image2: Optional[str] = None,
|
||||
image3: Optional[str] = None,
|
||||
negative_prompt: Optional[str] = None,
|
||||
cfg: Optional[float] = 4.0,
|
||||
seed: Optional[int] = None
|
||||
) -> Optional[Dict[str, Any]]:
|
||||
payload: Dict[str, Any] = {
|
||||
"model": QWEN_IMAGE_EDIT_MODEL,
|
||||
"prompt": prompt,
|
||||
}
|
||||
if image:
|
||||
payload["image"] = image
|
||||
if image2:
|
||||
payload["image2"] = image2
|
||||
if image3:
|
||||
payload["image3"] = image3
|
||||
if negative_prompt:
|
||||
payload["negative_prompt"] = negative_prompt
|
||||
if cfg is not None:
|
||||
payload["cfg"] = cfg
|
||||
if seed is not None:
|
||||
payload["seed"] = seed
|
||||
|
||||
headers: Dict[str, str] = {
|
||||
"Authorization": f"Bearer {SILICONFLOW_API_KEY}",
|
||||
"Content-Type": "application/json"
|
||||
}
|
||||
|
||||
try:
|
||||
response = requests.post(SILICONFLOW_BASE_URL, json=payload, headers=headers)
|
||||
response.raise_for_status()
|
||||
return response.json()
|
||||
except requests.exceptions.RequestException as e:
|
||||
print(f"Error generating image: {e}")
|
||||
return None
|
||||
|
||||
def save_image_from_url(image_url: str, output_path: str = "image.png") -> bool:
|
||||
try:
|
||||
response = requests.get(image_url)
|
||||
response.raise_for_status()
|
||||
os.makedirs(os.path.dirname(output_path) if os.path.dirname(output_path) else ".", exist_ok=True)
|
||||
with open(output_path, "wb") as f:
|
||||
f.write(response.content)
|
||||
print(f"Image saved successfully to: {output_path}")
|
||||
return True
|
||||
except requests.exceptions.RequestException as e:
|
||||
print(f"Error downloading image: {e}")
|
||||
return False
|
||||
except Exception as e:
|
||||
print(f"Error saving image: {e}")
|
||||
return False
|
||||
|
||||
prompt: str = "Change the sky to dusk, add moon and stars, dreamy style"
|
||||
negative_prompt: str = "blur, low quality, distortion"
|
||||
image_url: str = "https://inews.gtimg.com/om_bt/Os3eJ8u3SgB3Kd-zrRRhgfR5hUvdwcVPKUTNO6O7sZfUwAA/641"
|
||||
image2_url: Optional[str] = None
|
||||
image3_url: Optional[str] = None
|
||||
|
||||
cfg: float = 4.0
|
||||
seed: int = 12345
|
||||
output_path: str = "edited_image.png"
|
||||
|
||||
print(f"Generating edited image with prompt: {prompt}")
|
||||
print(f"Input image: {image_url}")
|
||||
print(f"CFG: {cfg}, Seed: {seed}")
|
||||
print("-" * 50)
|
||||
|
||||
result = generate_image_edit(
|
||||
prompt=prompt,
|
||||
image=image_url,
|
||||
image2=image2_url,
|
||||
image3=image3_url,
|
||||
negative_prompt=negative_prompt,
|
||||
cfg=cfg,
|
||||
seed=seed
|
||||
)
|
||||
|
||||
if result and "images" in result:
|
||||
images = result["images"]
|
||||
if images and len(images) > 0:
|
||||
image_url_result = images[0]["url"]
|
||||
print(f"Image edit generated successfully. URL: {image_url_result}")
|
||||
success = save_image_from_url(image_url_result, output_path)
|
||||
if success:
|
||||
print(f"Image saved to: {output_path}")
|
||||
else:
|
||||
print("Failed to save image to local file")
|
||||
else:
|
||||
print("No images found in response")
|
||||
else:
|
||||
print("Image generation failed")
|
||||
if result:
|
||||
print(f"Response: {result}")
|
||||
```
|
||||
|
||||
:::
|
||||
|
||||
# Appendix: How to Find Stronger AI Models Today
|
||||
|
||||
Text model development moves quickly, so you should regularly verify whether your chosen model is still competitive. The two websites below are useful for tracking model quality, popularity, and cost-performance.
|
||||
|
||||
You can think of them as model arenas: they compare outputs from different models and let people vote or inspect benchmark dimensions.
|
||||
|
||||
## LMArena
|
||||
|
||||
Website: <https://lmarena.ai/>
|
||||
|
||||
LMArena is useful for seeing which model responses users generally prefer. More votes and higher scores usually suggest more stable quality in real usage.
|
||||
|
||||
A practical workflow:
|
||||
|
||||
1. Check the leaderboard
|
||||
2. Filter by your target task (general chat / coding / vision)
|
||||
3. Pick one model from the top candidates that meets your access, latency, and budget constraints
|
||||
|
||||
|
||||
|
||||
## Artificial Analysis
|
||||
|
||||
Website: <https://artificialanalysis.ai/>
|
||||
|
||||
Artificial Analysis is useful when you want to compare quality, price, and speed on one dashboard.
|
||||
|
||||
Common workflow:
|
||||
|
||||
1. Choose the model category you care about (text / image generation / etc.)
|
||||
2. Compare Quality + Price + Latency/Throughput
|
||||
3. Select the model with the best overall fit for your product constraints
|
||||
|
||||
::: tip ✅ Recommendation
|
||||
Do not argue model quality by feeling. A more reliable method is to test the same input set against 2-3 models, then decide with ranking and pricing data.
|
||||
:::
|
||||
|
||||
## Summary
|
||||
|
||||
When integrating AI services, you don't need to overcomplicate API concepts. Most scenarios can be solved if you lock onto these essentials:
|
||||
|
||||
- **API is a communication bridge**: you send requests, receive model responses
|
||||
- **SDK is an API wrapper**: it handles boilerplate (auth, request signing, error handling) and usually saves time
|
||||
- **When reading docs, focus on three things**: endpoint, API key, and required parameters
|
||||
|
||||
Once these are clear, modern IDEs and tooling can handle most implementation details while you focus on business logic.
|
||||
|
||||
# 5. 📚 Assignment: Integrate Your First AI Capability
|
||||
|
||||
<el-card shadow="hover" style="margin: 20px 0; border-radius: 12px;">
|
||||
<template #header>
|
||||
<div style="font-weight: bold; font-size: 16px;">🚀 Challenge: Integrate AI Capability into Your Workbench</div>
|
||||
</template>
|
||||
|
||||
<p>
|
||||
Follow this chapter's prompts and complete one full loop:
|
||||
</p>
|
||||
|
||||
<ul>
|
||||
<li>
|
||||
<strong>Full Loop Practice</strong>
|
||||
<ul>
|
||||
<li>Choose and integrate one AI service (LLM / text-to-image / image-to-image) → complete frontend/backend interaction → integrate into your prototype</li>
|
||||
</ul>
|
||||
</li>
|
||||
<li>
|
||||
<strong>Share Results</strong>
|
||||
<ul>
|
||||
<li>Take a screenshot of your feature page and share it</li>
|
||||
</ul>
|
||||
</li>
|
||||
<li>
|
||||
<strong>Thinking Exercise</strong>
|
||||
<ul>
|
||||
<li>For the next "Complete Project Practice" chapter, think ahead: how will you combine these AI capabilities into one practical and interesting workflow?</li>
|
||||
</ul>
|
||||
</li>
|
||||
</ul>
|
||||
</el-card>
|
||||
|
||||
## Next Step
|
||||
|
||||
In the next chapter, we will connect these separate AI capabilities into one complete product based on a real business scenario:
|
||||
|
||||
- Connect content planning, product listing, and data analysis into one end-to-end workflow
|
||||
- Embed this chapter's AI capabilities (LLM copywriting, text-to-image, image editing) into concrete business nodes
|
||||
- Build a truly usable "Ecommerce AI Workbench" instead of isolated demos
|
||||
|
||||
+1
-1
@@ -2,7 +2,7 @@
|
||||
|
||||
## Chapter Introduction
|
||||
|
||||
With so many AI programming tools available, which one is right for you? This chapter provides an in-depth横向 evaluation of 7 major Web Vibe Coding platforms including Lovable, Replit, and Z.ai through a unified hands-on task—developing a "Snake + AI Poem Writing" game. We'll compare them from multiple dimensions including beginner-friendliness, code controllability, and deployment convenience, helping you quickly choose the best development assistant tool.
|
||||
With so many AI programming tools available, which one is right for you? This chapter provides an in-depth comparative evaluation of 7 major Web Vibe Coding platforms, including Lovable, Replit, and Z.ai, through a unified hands-on task: developing a "Snake + AI Poem Writing" game. We'll compare them across multiple dimensions, including beginner-friendliness, code controllability, and deployment convenience, helping you quickly choose the best development assistant tool.
|
||||
|
||||
---
|
||||
|
||||
|
||||
@@ -48,7 +48,7 @@ All methods in this chapter are based on actual experience with AI IDEs like Cur
|
||||
|
||||
Many beginners' first reaction when encountering errors is:
|
||||
- Panic and start randomly modifying code
|
||||
- Spend half an hour searching "how to solve xxx error"
|
||||
- Spend half an hour searching "how to solve this specific error"
|
||||
- Try to understand what the error means yourself
|
||||
- Debug alone until late at night
|
||||
|
||||
|
||||
@@ -568,3 +568,55 @@ This document summarizes **LLM large model creative applications in C-End consum
|
||||
| 3 | Style Journey | Personal brand discovery |
|
||||
| 4 | Old Favorites Refresh | New life for old pieces |
|
||||
| 5 | Occasion Stylist | Perfect looks for events |
|
||||
|
||||
---
|
||||
|
||||
## Core Principles for Designing Consumer (C-End) Products
|
||||
|
||||
### 1. Shift from "Features" to "Feelings"
|
||||
|
||||
B-end products focus on "what problem this function solves." C-end products focus on "what feeling this function creates."
|
||||
|
||||
| B-End Thinking | C-End Thinking |
|
||||
|---------|---------|
|
||||
| Improve efficiency | Free up time for things users love |
|
||||
| Reduce cost | Make every dollar feel worthwhile |
|
||||
| Solve pain points | Create delightful experiences |
|
||||
| Functional completeness | Emotional resonance |
|
||||
|
||||
### 2. Three Layers of Atmosphere Design
|
||||
|
||||
**Sensory Layer**: Design for sight, sound, and interaction feel
|
||||
- Warm color palettes
|
||||
- Calming sound cues
|
||||
- Smooth and natural transitions
|
||||
|
||||
**Emotional Layer**: Emotional resonance and guidance
|
||||
- Understand the user's mood
|
||||
- Offer emotional support
|
||||
- Create positive emotional feedback
|
||||
|
||||
**Meaning Layer**: Identity and belonging
|
||||
- Make users feel understood
|
||||
- Build a sense of belonging
|
||||
- Give actions personal meaning
|
||||
|
||||
### 3. The Power of Psychological Cues
|
||||
|
||||
Copy and design in C-end products always carry psychological cues:
|
||||
|
||||
- **Positive cues**: "You're already doing great", "Take your time, it's okay"
|
||||
- **Belonging cues**: "Many people feel the same way", "You're not alone"
|
||||
- **Growth cues**: "Every attempt is progress", "You're getting better"
|
||||
|
||||
### 4. Help Users Become a Better Version of Themselves
|
||||
|
||||
The best C-end products do not force users to change; they help users become who they want to be.
|
||||
|
||||
- Not "You should...", but "You can..."
|
||||
- Not "You must...", but "If you want to..."
|
||||
- Not "You're still not enough...", but "You're already on your way..."
|
||||
|
||||
---
|
||||
|
||||
> 🌟 **Remember**: C-end users don't buy functions, they buy feelings; not tools, but companionship; not service, but understanding.
|
||||
|
||||
@@ -0,0 +1,14 @@
|
||||
---
|
||||
title: 'C-End Scenario Inspiration Direction Reference'
|
||||
description: 'This page provides an extended entry for C-end consumer scenario inspiration and links to the maintained English chapter for detailed industry-ready scenario references.'
|
||||
---
|
||||
|
||||
# C-End Scenario Inspiration Direction Reference
|
||||
|
||||
This chapter name exists in the Chinese track as an extended version of consumer-scenario inspiration content.
|
||||
|
||||
For the maintained English version with complete interactive selection and 16 scenario directions, use:
|
||||
|
||||
- [C-End Consumer Scenario Inspiration Reference](../appendix-c-consumer-scenarios/)
|
||||
|
||||
If you prefer to keep this page in your bookmarks, treat it as the English entry point for the same topic.
|
||||
@@ -1,6 +1,6 @@
|
||||
---
|
||||
title: 'B-End Industry Application Scenario Reference'
|
||||
description: 'This document summarizes the落地 applications of LLM large models in B-End enterprise scenarios, including specific application directions in industries such as manufacturing, intelligent customer service, education, intelligent programming, healthcare, network security, financial management, and enterprise services, providing reference for AI application developers targeting enterprise customers.'
|
||||
title: 'B2B Industry Application Scenario Reference'
|
||||
description: 'This document summarizes practical LLM applications in B2B enterprise scenarios, including specific directions in industries such as manufacturing, intelligent customer service, education, intelligent programming, healthcare, cybersecurity, financial services, and enterprise operations. It provides practical references for developers building AI applications for enterprise customers.'
|
||||
---
|
||||
|
||||
<script setup>
|
||||
@@ -129,7 +129,7 @@ const topicPool = {
|
||||
{ title: 'Video Background Noise AI Intelligent Separation & Voice Enhancement Assistant', desc: 'Audio separation model, remove background noise' },
|
||||
{ title: 'Old Image 4K Super-Resolution Repair & AI Intelligent Colorization Workstation', desc: 'Video super-resolution model, AI auto-colorization' },
|
||||
{ title: 'Text to Realistic TTS Voice & Emotion Control System', desc: 'Multi-voice TTS model, emotion control' },
|
||||
{ title: 'Meeting Recording AI Intelligent Transcription & Core TODO Extraction Assistant', desc: 'Multi-person meeting voice separation transcription' }
|
||||
{ title: 'Meeting Recording AI Intelligent Transcription & Action Item Extraction Assistant', desc: 'Multi-person meeting voice separation transcription' }
|
||||
],
|
||||
'ai-marketing': [
|
||||
{ title: 'Xiaohongshu Hit Copy AIGC Auto-Writing Engine', desc: 'Generate planting copy, emoji optimization' },
|
||||
@@ -371,6 +371,35 @@ This document summarizes **LLM large model applications in B-End enterprise scen
|
||||
|
||||
---
|
||||
|
||||
## Industry Quick Overview
|
||||
|
||||
### Mainstream Technology Choices
|
||||
|
||||
In AI application development, common technical directions include:
|
||||
|
||||
1. **LLM (Large Language Models)**: Strong in natural language tasks such as dialogue, text generation, summarization, and translation. Suitable for intelligent customer service, content creation, and knowledge Q&A applications.
|
||||
2. **VLM (Vision-Language Models)**: Combines visual understanding and language reasoning to support image description, visual Q&A, and multimodal generation. Useful for medical imaging analysis, industrial inspection, and creative design scenarios.
|
||||
3. **GenAI (Generative AI)**: Covers text generation, image generation (for example Stable Diffusion, DALL-E), video generation, and more. It rapidly produces creative outputs for design support, marketing asset creation, and training content.
|
||||
|
||||
### Selection Strategy
|
||||
|
||||
Learners can choose directions based on these dimensions:
|
||||
|
||||
1. **Interest-first**: Start from industries or technologies you are personally interested in to keep momentum.
|
||||
- Interested in creative design: Try content production or industrial design applications
|
||||
- Interested in technical challenge: Try cybersecurity or healthcare applications
|
||||
- Interested in social value: Try smart government or education applications
|
||||
2. **Industry fit**: Match your background and resource advantages.
|
||||
- Manufacturing practitioners: Prioritize manufacturing and enterprise-service applications
|
||||
- Educators: Prioritize education and content production applications
|
||||
- Healthcare practitioners: Explore healthcare and health management applications
|
||||
3. **Technical difficulty**: Pick complexity based on your current foundation.
|
||||
- Beginner: Intelligent customer service, content creation, basic Q&A systems
|
||||
- Intermediate: Industrial quality inspection, medical image analysis, coding assistants
|
||||
- Advanced: Financial risk control, cybersecurity, complex multimodal systems
|
||||
|
||||
---
|
||||
|
||||
## 1. Manufacturing Industry
|
||||
|
||||
> 💡 **Core Concept**: AI empowers traditional manufacturing to achieve intelligent transformation
|
||||
|
||||
Reference in New Issue
Block a user