Doubao Seed API for Reasoning and Coding

Crea una página HTML completa en un solo archivo: un documento .html con todo el CSS y JavaScript incrustados, cero dependencias externas, sin enlaces CDN, sin fuentes web, sin archivos de imagen ni data URIs. Todos los elementos visuales deben dibujarse procedimentalmente en tiempo de ejecución con Canvas 2D API o inline SVG; no debe haber bitmaps, fotografías ni emoji en ninguna parte. La página es un lienzo generativo en tiempo real titulado algo como "Campo de cosecha — Estudio de geometría aérea", y todo el concepto es una vista cenital, desde arriba, de una tierra de cultivo que el usuario moldea con sliders mientras una única cosechadora pixelada avanza lentamente por ella, borrando franjas ordenadas del cultivo en bruto: ese momento silencioso y satisfactorio en que el orden se recorta del caos. Composición y renderizado: llena todo el viewport con una cuadrícula rectangular regular de parcelas de campo similares al centeno, construidas con formas vectoriales planas y un sutil relieve isométrico / falso 2.5D, de modo que cada parcela se lea como un bloque bajo, no como un rectángulo plano. Ilumina la escena con un único sol direccional de atardecer que entra rasante desde una esquina (cálido, de ángulo bajo); cada parcela y la cosechadora deben proyectar una sombra larga y suave en la dirección opuesta para reforzar la solidez geométrica y modular del campo. La paleta debe ser una familia sobria y elegante de tonos tierra: amarillo mostaza, ocre, verde oliva y un único acento de tierra labrada color sombra tostada para el suelo recién removido; nada de neón, nada de primarios puros, que se mantenga sofisticado y apagado. El estilo general es vector plano combinado con microrrelieve isométrico, preciso y arquitectónico. Comportamiento vivo: dentro de cada parcela, renderiza hileras finas de siembra en línea (líneas paralelas delgadas) cuya densidad sea ajustable. Una cosechadora pixelada —un pequeño sprite de bloques dibujado con unos pocos rectángulos— es el ÚNICO elemento en movimiento y lo único que rompe la simetría de la cuadrícula. Avanza lentamente siguiendo una ruta en espiral hacia dentro o una ruta serpenteante boustrophedon (回字 / de ida y vuelta) a través de las parcelas. A medida que se mueve debe "borrar" el cultivo en pie justo en su franja de corte y dejar detrás, en tiempo real, franjas de cosecha: bandas cortadas alternas claras y oscuras, como un césped recién segado o el rastro del cabezal de una cosechadora real, pintadas de forma permanente sobre el campo hasta que se reinicie. La cosecha es una animación continua y autónoma mediante requestAnimationFrame; verla llenar el campo debe sentirse tranquila e hipnótica. Interactividad: todos los controles son sliders (más un par de pequeños toggles/botones) en un panel lateral o inferior limpio y minimalista, y todos deben responder en vivo sin recargar la página: un slider para el número de parcelas del campo (resolución de la cuadrícula, por ejemplo de 3×3 a 12×12), un slider para la densidad de hileras de siembra, un slider para el matiz del cultivo (desplazando el cultivo en pie por la gama mostaza-ocre-oliva), un slider para el progreso de la cosecha o la velocidad de la cosechadora, y un toggle para cambiar la ruta de la cosechadora entre espiral y boustrophedon. Incluye un botón sutil Restablecer/Replantar que regenere el campo y reinicie la pasada. Cambiar el recuento de parcelas o la densidad debe regenerar el diseño con suavidad; arrastrar el matiz debe retintar en tiempo real. Hazlo totalmente responsive para que la cuadrícula y las sombras se recalculen al cambiar el tamaño de la ventana, mantén una tasa de fotogramas fluida y asegúrate de que el código sea limpio y autónomo para que se abra correctamente con doble clic en el archivo. Esto no es un juego ni un dashboard: es un instrumento de arte generativo. Lleva la geometría procedimental, la animación de la ruta y la vinculación de parámetros tan lejos como sea posible; la calidad del sombreado isométrico, las largas sombras de atardecer y la nitidez de las franjas de cosecha son lo que debe hacer que este render destaque.

Crea un único archivo HTML autónomo (solo CSS y JavaScript inline: absolutamente ninguna biblioteca externa, CDN, framework, fuente ni URL de imagen) que renderice un banco interactivo y físicamente plausible de desmontaje de un mecanismo de reloj de bolsillo, dibujado por completo con SVG y/o Canvas. La página debe abrirse y ejecutarse correctamente con doble clic en cualquier navegador moderno, con todo calculado y animado en tiempo real. LA ESCENA. Una vista cenital de un mecanismo de reloj de latón desmontado y dispuesto sobre un banco de taller. Renderiza, como arte vectorial vivo, un barrilete del muelle real, un tren de engranajes apilado (rueda de barrilete → rueda central → tercera rueda → cuarta rueda → rueda de escape), un áncora que oscila de un lado a otro, un volante con una espiral, y manecillas de hora/minuto/segundo barriendo sobre un sutil anillo horario. Dibuja dientes de engranaje reales (flancos de estilo evolvente, no simples círculos), engrane correcto en los círculos primitivos y ejes, rubíes, puentes y tornillos visibles. Todo el conjunto está compuesto concéntricamente alrededor del núcleo del mecanismo; el panel de control queda recogido en una esquina oscura. LA MECÁNICA (este es el punto: haz que simule de verdad, no que lo finja). Modela el tren de engranajes con relaciones de transmisión reales: la velocidad angular de cada rueda equivale a la de su vecina multiplicada por la relación negativa de sus números de dientes, de modo que las ruedas engranadas contrarroten visiblemente a velocidades proporcionales y los dientes encajen sin solaparse ni deslizarse. El escape debe hacer tic de verdad: la rueda de escape avanza diente a diente en pasos discretos, bloqueada y liberada por el áncora oscilante, que está impulsada por el volante oscilando a un ritmo fijo. Cada liberación ("tic") produce un paso nítido en la rueda de escape y un tic audible usando Web Audio API (sintetizado, sin archivos de audio). La manecilla de segundos avanza al compás del escape; las de minutos y horas se derivan de ella mediante las relaciones de transmisión. Impulsa la animación con requestAnimationFrame y tiempo transcurrido real para que la temporización se mantenga precisa. LAS INTERACCIONES (todas deben responder en vivo). - Una corona/perilla de cuerda arrastrable: arrástrala (con ratón o toque) para dar cuerda al muelle real; un indicador de cuerda se llena y la espiral del muelle se tensa visiblemente. Al soltar, deja que la energía almacenada se descargue y alimente el tren; el mecanismo funciona hasta que el muelle se descarga y luego se detiene por inercia. - Un slider de "ritmo" que escala el beat/la velocidad de marcha para poder verlo hacer tic lentamente o acelerarse. - Un slider de "explosión" que separa continuamente los componentes apilados a lo largo de sus ejes, desde completamente ensamblados hasta un diagrama explotado en abanico, con interpolación suave, líneas guía de conexión entre piezas separadas, y todo aún rotando correctamente en cualquier nivel de explosión. - Al pasar el cursor (o tocar) cualquier componente, debe actuar como una lupa de joyero: resalta esa pieza, atenúa el resto y muestra un callout flotante con el nombre de la pieza y una descripción de una línea de su función. - Botones: Dar cuerda, Liberar, Restablecer. EL ASPECTO. Estética industrial realista de taller de relojería: latón envejecido cálido, gris acero desgastado, fondo negro tinta profundo, reflejos metálicos nítidos, dientes de engranaje finamente grabados y puentes biselados. Simula un único haz de luz de ventana entrando rasante desde la parte superior izquierda sobre el banco para que las piezas proyecten sombras suaves y alargadas, y deja que los reflejos especulares recorran las caras de los engranajes mientras giran. Usa degradados, filtros y un grano sutil para dar profundidad. Controles y etiquetas de estilo HUD limpios y legibles en la esquina oscura. REQUISITOS. Todo en un único archivo .html; layout responsive que se escale al viewport; animación fluida a 60fps; sin gráficos de marcador de posición: el mecanismo debe dibujarse procedimentalmente y estar genuinamente acoplado de forma mecánica, de modo que un modelo capaz produzca un reloj que realmente se dé cuerda, engrane y haga tic, mientras que uno débil colapse en círculos giratorios estáticos. Añade breves comentarios inline que nombren las relaciones de transmisión y la lógica del escape.