The level of thought is too low, resulting in quality not being very good.

#5
by nocmt - opened

1、The generation_config.json configuration is as follows:

{
  "max_new_tokens": 24576,
  "do_sample": false,
  "use_cache": true,
  "eos_token_id": [
    248046,
    248044
  ],
  "pad_token_id": 248044,
  "transformers_version": "5.19.0",
  "bos_token_id": 248044,
  "presence_penalty": 0.9,
  "frequency_penalty": 0.0,
  "repetition_penalty": 1.05,
  "dllm_length_penalty": 10.0,
  "dllm_length_penalty_start": 32768,
  "dllm_length_penalty_window": 16384,
  "dllm_think_end_bias": 10.0,
  "dllm_think_end_start": 16384,
  "dllm_think_end_window": 8192,
  "dllm_think_end_token_id": 248069,
  "temperature": 1.0,
  "top_k": null,
  "top_p": 1.0
}

But it completed the thinking in 3.1 seconds, with a TPS of about 130.

image

image

2、Attempt to increase the constraint of prompt words:

Task: Create an HTML with an SVG that draws a pelican riding a bicycle in a 2D animation
Requirements: Think thoroughly and do your best to improve, beautify, and enrich this 2D animation HTML.

Better results:

image

3、Enhancing AI to assist in generating prompt words

You are a skilled graphic engineer proficient in SVG hand-drawing and front-end dynamic effects.

Create a 2D horizontal scrolling animation of a pelican riding a bicycle on a country road using a single HTML file (inline CSS + inline JS + inline SVG).

Output Constraints:
- Only output a single complete HTML file. No external resources (no CDN, no images, no font files) should be referenced.
- All graphics must be drawn using SVG primitives/path, and emojis are not allowed to replace characters or key elements.
- Do not leave TODO, placeholders, or "omitted here" notes.
- Code should be divided into sections with comments: CONFIG / Scene / Character / Animation Loop / Utility Functions.

Visual Requirements (must have):
1. Sky: multiple linear gradients + sun (with halo and slowly rotating light) + 3~5 clouds.
2. Background: silhouette of mountains (double layer, different opacity).
3. Middle ground: trees/shrubs.
4. Foreground: grass, a tarmac road with yellow dashed lines, scattered flowers.
5. Main Character: a pelican (white body, long beak + yellow throat pouch, webbed feet, optional scarf), sitting on the bicycle.
6. Bicycle: two wheels with spokes, red frame, handlebars, saddle, cranks + pedals on both sides.
7. Atmosphere: speed lines, floating particles, dust raised by the rear wheel.

Animation and Physics (mandatory requirements, check each item individually):
1. **Time Step**: Driven by `requestAnimationFrame` + `deltaTime`, all motion speeds are defined in `px/second`, and fixed position values for each frame are not allowed.
2. **Wheel Rolling without Sliding**: Wheel angular velocity ω = Linear Speed / Wheel Radius, so the wheel rotation must match the ground displacement strictly.
3. **Crank and Pedals**: The phase difference between the left and right cranks is π, and the pedals must rotate with the crank arm (using transform rotate), not just translate.
4. **Leg IK**: The pelican's legs use a two-stage inverse kinematics - given the hip point and foot point (foot point = center of pedal), solve the knee using the cosine rule, and ensure that the **thigh and shin lengths are constant**; the foot sole always sticks to the pedal.
5. **Parallax Scrolling Seamless Loop**: Each decorative layer uses 2~3 copies + modulo offset to achieve, and at any moment, there must not be any blank areas on the screen. Parallax speed levels: clouds < distant mountains < trees < road markings < foreground flowers.
6. **Main Character Secondary Animation**: The body rises and falls with the pedaling rhythm, the wings flutter slightly, and the throat pouch/scarf swings with speed.
7. **Dust Particles**: Dust particles are generated at the point of contact of the rear wheel, with speed, lifespan, and opacity decay; arrays and DOM nodes must correspond one-to-one, and the creation/destruction of particles must not delete other particles by mistake.

Code Quality (mandatory requirements):
- All DOM nodes are cached to variables in the initialization stage, and `getElementById` should not be called within the animation loop.
- Magic numbers are centralized in the CONFIG object with clear naming.
- Avoid unused variables and repeated `setAttribute` within the animation loop.
- Support `prefers-reduced-motion: reduce` by reducing or turning off animations.
- The page is responsive between 320px ~ 1920px width (use viewBox + percentage height for SVG).

Aesthetic Requirements:
- A unified color palette (not more than 12 main colors), use gradients and soft shadows to create depth.
- Character proportions should be coordinated, and the contact points of the pelican and bicycle (hip-saddle, foot-pedal, wing-handlebar) must be visually aligned.

Self-Check List (confirm each item individually after outputting the code and provide a brief report):
□ Do the wheels visually fit the ground?
□ Do the feet always stay on the pedals and the leg length remain unchanged during a full pedal revolution?
□ Does the background have any frame gaps or jitters during a 60-second camera roll?
□ Are all decorative layers implemented with parallax?
□ Is there any `getElementById` left in the animation loop?

Thought for 337.3 s

Effect:

image

The potential upper limit of intelligence may be here.

已经很好了,吹毛求疵没必要了

Try this for graphics. It works a lot better than this 35B.
https://huggingface.co/ccore/Qwen3.5-4B-3D-Coder

Sign up or log in to comment