Комментарии 3
Ну такое. Я использую локальную ЛЛМку и локальный же SD. ллмке говорю "нарисуй малдера и скалли, фотореалистично", у нее системный промт довольно обьемный, там описаны правила построения промтов для SD, она разворачивает мою придумку в историю абзацев на 10, затем передает эту историю себе же как другому агенту с заданием "сократи, оставь значимое", получается все равно простыня, и эта простыня по api уже улетает в SD. Кто сказал что у них нет фантазии? Её есть. Результаты более чем, а если затачивать эту связку на определенный промт, то там шедевры. Всяко комп компа понимает издалека и с полуслова (принцип токенизации одинаков).
Но это долго, и требует двух инстансов на разных компах. На одном тоже можно. но там переключение и перезагрузки врама легко добавят 15 минут к ожиданию.
Я сначала офигел.
Напиши HTML-код, который рисует фрагмент из Футурамы на canvas размером 1200x600 пикселей. Рисунок создается программно с использованием только нативного JavaScript и Canvas, без внешних библиотек и изображений.
Claude 3.7 Sonnet:
Скрытый текст
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Futurama Canvas Scene</title>
<style>
body {
margin: 0;
padding: 0;
display: flex;
justify-content: center;
align-items: center;
height: 100vh;
background-color: #222;
}
canvas {
border: 3px solid #444;
background-color: #000;
}
</style>
</head>
<body>
<canvas id="futurama" width="1200" height="600"></canvas>
<script>
const canvas = document.getElementById('futurama');
const ctx = canvas.getContext('2d');
// Utility functions
function drawCircle(x, y, radius, color) {
ctx.fillStyle = color;
ctx.beginPath();
ctx.arc(x, y, radius, 0, Math.PI * 2);
ctx.fill();
}
function drawRect(x, y, width, height, color) {
ctx.fillStyle = color;
ctx.fillRect(x, y, width, height);
}
// Planet Express Building
function drawPlanetExpressBuilding() {
// Main building
ctx.fillStyle = '#3a9d23';
ctx.beginPath();
ctx.rect(50, 300, 350, 300);
ctx.fill();
// Windows
ctx.fillStyle = '#66d6ff';
for (let y = 330; y < 570; y += 60) {
for (let x = 80; x < 350; x += 70) {
ctx.fillRect(x, y, 30, 30);
}
}
// Sign
ctx.fillStyle = '#ff3333';
ctx.beginPath();
ctx.rect(100, 250, 250, 50);
ctx.fill();
ctx.fillStyle = 'white';
ctx.font = '30px Arial';
ctx.fillText('PLANET EXPRESS', 110, 285);
// Tower
ctx.fillStyle = '#348c1f';
ctx.beginPath();
ctx.rect(300, 150, 80, 150);
ctx.fill();
// Antenna
ctx.strokeStyle = '#999';
ctx.lineWidth = 8;
ctx.beginPath();
ctx.moveTo(340, 150);
ctx.lineTo(340, 50);
ctx.stroke();
ctx.beginPath();
ctx.arc(340, 30, 20, 0, Math.PI * 2);
ctx.strokeStyle = 'red';
ctx.stroke();
}
// Draw Futurama ship
function drawShip(x, y, scale = 1) {
// Ship body
ctx.fillStyle = '#34a853';
ctx.beginPath();
ctx.ellipse(x, y, 120 * scale, 40 * scale, 0, 0, Math.PI * 2);
ctx.fill();
// Cockpit
ctx.fillStyle = '#66d6ff';
ctx.beginPath();
ctx.ellipse(x + 90 * scale, y - 10 * scale, 30 * scale, 20 * scale, 0, 0, Math.PI * 2);
ctx.fill();
// Engines (back)
ctx.fillStyle = '#444';
ctx.beginPath();
ctx.rect(x - 140 * scale, y - 15 * scale, 30 * scale, 30 * scale);
ctx.fill();
// Engine fire
ctx.fillStyle = '#ff5722';
ctx.beginPath();
ctx.moveTo(x - 140 * scale, y - 10 * scale);
ctx.lineTo(x - 180 * scale, y);
ctx.lineTo(x - 140 * scale, y + 10 * scale);
ctx.fill();
// Planet Express text
ctx.fillStyle = 'white';
ctx.font = `${16 * scale}px Arial`;
ctx.fillText('PLANET EXPRESS', x - 60 * scale, y + 5 * scale);
// Fin on top
ctx.fillStyle = '#34a853';
ctx.beginPath();
ctx.moveTo(x - 40 * scale, y - 30 * scale);
ctx.lineTo(x + 20 * scale, y - 70 * scale);
ctx.lineTo(x + 40 * scale, y - 30 * scale);
ctx.closePath();
ctx.fill();
}
// Draw Fry
function drawFry(x, y, scale = 1) {
// Head
ctx.fillStyle = '#ffcc99';
ctx.beginPath();
ctx.arc(x, y, 25 * scale, 0, Math.PI * 2);
ctx.fill();
// Eyes
ctx.fillStyle = 'white';
ctx.beginPath();
ctx.arc(x - 8 * scale, y - 5 * scale, 6 * scale, 0, Math.PI * 2);
ctx.arc(x + 8 * scale, y - 5 * scale, 6 * scale, 0, Math.PI * 2);
ctx.fill();
ctx.fillStyle = 'black';
ctx.beginPath();
ctx.arc(x - 8 * scale, y - 5 * scale, 3 * scale, 0, Math.PI * 2);
ctx.arc(x + 8 * scale, y - 5 * scale, 3 * scale, 0, Math.PI * 2);
ctx.fill();
// Mouth
ctx.strokeStyle = 'black';
ctx.lineWidth = 2 * scale;
ctx.beginPath();
ctx.arc(x, y + 5 * scale, 10 * scale, 0.1 * Math.PI, 0.9 * Math.PI);
ctx.stroke();
// Red hair
ctx.fillStyle = '#ff6600';
ctx.beginPath();
ctx.ellipse(x, y - 20 * scale, 25 * scale, 15 * scale, 0, Math.PI, 0);
ctx.fill();
// Body/Jacket
ctx.fillStyle = '#ff3333';
ctx.beginPath();
ctx.rect(x - 20 * scale, y + 25 * scale, 40 * scale, 50 * scale);
ctx.fill();
// Pants
ctx.fillStyle = '#3366cc';
ctx.beginPath();
ctx.rect(x - 15 * scale, y + 75 * scale, 30 * scale, 40 * scale);
ctx.fill();
}
// Draw Leela
function drawLeela(x, y, scale = 1) {
// Head
ctx.fillStyle = '#ffcc99';
ctx.beginPath();
ctx.arc(x, y, 25 * scale, 0, Math.PI * 2);
ctx.fill();
// Single eye
ctx.fillStyle = 'white';
ctx.beginPath();
ctx.ellipse(x, y - 5 * scale, 14 * scale, 10 * scale, 0, 0, Math.PI * 2);
ctx.fill();
ctx.fillStyle = '#9900cc';
ctx.beginPath();
ctx.arc(x, y - 5 * scale, 8 * scale, 0, Math.PI * 2);
ctx.fill();
ctx.fillStyle = 'black';
ctx.beginPath();
ctx.arc(x, y - 5 * scale, 4 * scale, 0, Math.PI * 2);
ctx.fill();
// Mouth
ctx.strokeStyle = 'black';
ctx.lineWidth = 2 * scale;
ctx.beginPath();
ctx.arc(x, y + 10 * scale, 8 * scale, 0.1 * Math.PI, 0.9 * Math.PI);
ctx.stroke();
// Purple hair
ctx.fillStyle = '#9966cc';
ctx.beginPath();
ctx.ellipse(x, y - 23 * scale, 25 * scale, 12 * scale, 0, Math.PI, 0);
ctx.fill();
// Body/tank top
ctx.fillStyle = 'white';
ctx.beginPath();
ctx.rect(x - 20 * scale, y + 25 * scale, 40 * scale, 50 * scale);
ctx.fill();
// Pants
ctx.fillStyle = '#333';
ctx.beginPath();
ctx.rect(x - 15 * scale, y + 75 * scale, 30 * scale, 40 * scale);
ctx.fill();
}
// Draw Bender
function drawBender(x, y, scale = 1) {
// Head
ctx.fillStyle = '#aaaaaa';
ctx.beginPath();
ctx.arc(x, y - 20 * scale, 25 * scale, 0, Math.PI * 2);
ctx.fill();
// Eyes
ctx.fillStyle = '#ffcc00';
ctx.beginPath();
ctx.arc(x - 10 * scale, y - 25 * scale, 8 * scale, 0, Math.PI * 2);
ctx.arc(x + 10 * scale, y - 25 * scale, 8 * scale, 0, Math.PI * 2);
ctx.fill();
// Antenna
ctx.strokeStyle = '#666';
ctx.lineWidth = 3 * scale;
ctx.beginPath();
ctx.moveTo(x, y - 45 * scale);
ctx.lineTo(x, y - 65 * scale);
ctx.stroke();
ctx.fillStyle = '#ff3333';
ctx.beginPath();
ctx.arc(x, y - 70 * scale, 5 * scale, 0, Math.PI * 2);
ctx.fill();
// Mouth
ctx.fillStyle = '#666';
ctx.beginPath();
ctx.rect(x - 15 * scale, y - 10 * scale, 30 * scale, 5 * scale);
ctx.fill();
// Body
ctx.fillStyle = '#bbbbbb';
ctx.beginPath();
ctx.rect(x - 25 * scale, y, 50 * scale, 70 * scale);
ctx.fill();
// Door lines
ctx.strokeStyle = '#666';
ctx.lineWidth = 2 * scale;
ctx.beginPath();
ctx.rect(x - 15 * scale, y + 15 * scale, 30 * scale, 40 * scale);
ctx.stroke();
// Arms
ctx.fillStyle = '#999';
ctx.beginPath();
ctx.rect(x - 50 * scale, y + 15 * scale, 25 * scale, 10 * scale);
ctx.rect(x + 25 * scale, y + 15 * scale, 25 * scale, 10 * scale);
ctx.fill();
// Legs
ctx.fillStyle = '#aaa';
ctx.beginPath();
ctx.rect(x - 20 * scale, y + 70 * scale, 10 * scale, 30 * scale);
ctx.rect(x + 10 * scale, y + 70 * scale, 10 * scale, 30 * scale);
ctx.fill();
}
// Draw Professor Farnsworth
function drawProfessor(x, y, scale = 1) {
// Head
ctx.fillStyle = '#ffeecc';
ctx.beginPath();
ctx.arc(x, y, 22 * scale, 0, Math.PI * 2);
ctx.fill();
// Glasses
ctx.strokeStyle = 'black';
ctx.lineWidth = 2 * scale;
ctx.beginPath();
ctx.arc(x - 8 * scale, y - 5 * scale, 7 * scale, 0, Math.PI * 2);
ctx.arc(x + 8 * scale, y - 5 * scale, 7 * scale, 0, Math.PI * 2);
ctx.stroke();
// Hair (sparse)
ctx.strokeStyle = 'white';
ctx.lineWidth = 3 * scale;
ctx.beginPath();
ctx.moveTo(x - 15 * scale, y - 15 * scale);
ctx.lineTo(x - 12 * scale, y - 22 * scale);
ctx.moveTo(x, y - 22 * scale);
ctx.lineTo(x, y - 28 * scale);
ctx.moveTo(x + 15 * scale, y - 15 * scale);
ctx.lineTo(x + 12 * scale, y - 22 * scale);
ctx.stroke();
// Lab coat
ctx.fillStyle = 'white';
ctx.beginPath();
ctx.rect(x - 25 * scale, y + 22 * scale, 50 * scale, 60 * scale);
ctx.fill();
// Pants
ctx.fillStyle = '#776655';
ctx.beginPath();
ctx.rect(x - 15 * scale, y + 82 * scale, 30 * scale, 30 * scale);
ctx.fill();
// Arms (hunched)
ctx.strokeStyle = 'white';
ctx.lineWidth = 10 * scale;
ctx.beginPath();
ctx.moveTo(x - 25 * scale, y + 35 * scale);
ctx.lineTo(x - 40 * scale, y + 50 * scale);
ctx.moveTo(x + 25 * scale, y + 35 * scale);
ctx.lineTo(x + 40 * scale, y + 50 * scale);
ctx.stroke();
}
// Draw New New York skyline
function drawSkyline() {
// Background gradient (sky)
const skyGradient = ctx.createLinearGradient(0, 0, 0, 400);
skyGradient.addColorStop(0, '#000033');
skyGradient.addColorStop(1, '#3366cc');
ctx.fillStyle = skyGradient;
ctx.fillRect(0, 0, canvas.width, 400);
// Stars
ctx.fillStyle = 'white';
for (let i = 0; i < 200; i++) {
const size = Math.random() * 2 + 1;
ctx.beginPath();
ctx.arc(
Math.random() * canvas.width,
Math.random() * 350,
size,
0,
Math.PI * 2
);
ctx.fill();
}
// Ground
ctx.fillStyle = '#444';
ctx.fillRect(0, 400, canvas.width, 200);
// Buildings in the distance
for (let i = 0; i < 20; i++) {
const x = i * 70 + Math.random() * 30;
const height = 100 + Math.random() * 200;
const width = 40 + Math.random() * 40;
ctx.fillStyle = `rgba(50, 50, 70, ${0.7 + Math.random() * 0.3})`;
ctx.fillRect(x, 400 - height, width, height);
// Building windows
ctx.fillStyle = '#ffff99';
for (let wy = 410 - height; wy < 390; wy += 20) {
for (let wx = x + 5; wx < x + width - 5; wx += 10) {
if (Math.random() > 0.3) {
ctx.fillRect(wx, wy, 5, 10);
}
}
}
}
// Flying cars in background
for (let i = 0; i < 8; i++) {
const x = Math.random() * canvas.width;
const y = 100 + Math.random() * 200;
drawFlyingCar(x, y, 0.3 + Math.random() * 0.3);
}
}
// Draw a flying car
function drawFlyingCar(x, y, scale = 1) {
// Car body
ctx.fillStyle = `rgb(${Math.floor(Math.random() * 255)}, ${Math.floor(Math.random() * 255)}, ${Math.floor(Math.random() * 255)})`;
ctx.beginPath();
ctx.ellipse(x, y, 20 * scale, 10 * scale, 0, 0, Math.PI * 2);
ctx.fill();
// Dome
ctx.fillStyle = '#aaddff';
ctx.beginPath();
ctx.ellipse(x, y - 8 * scale, 15 * scale, 8 * scale, 0, Math.PI, 0);
ctx.fill();
// Lights
ctx.fillStyle = '#ffff00';
ctx.beginPath();
ctx.arc(x + 18 * scale, y, 3 * scale, 0, Math.PI * 2);
ctx.fill();
}
// Animation variables
let shipX = -200;
let shipDirection = 1;
let step = 0;
// Main drawing function
function draw() {
ctx.clearRect(0, 0, canvas.width, canvas.height);
// Draw background and skyline
drawSkyline();
// Draw Planet Express building
drawPlanetExpressBuilding();
// Draw ship - add small oscillation for hovering effect
const hoverY = 150 + Math.sin(step / 10) * 5;
drawShip(shipX, hoverY, 0.8);
// Move ship
shipX += shipDirection * 3;
if (shipX > canvas.width + 200) {
shipDirection = -1;
} else if (shipX < -200) {
shipDirection = 1;
}
// Draw characters
drawFry(600, 480, 0.9);
drawLeela(700, 470, 0.9);
drawBender(800, 470, 0.9);
drawProfessor(500, 470, 0.9);
// Update animation step
step++;
requestAnimationFrame(draw);
}
// Start animation
draw();
</script>
</body>
</html>Но при этом:
write an html page with rotating cube on canvas. The cube must rotate along its diagonal and rotation axe is vertical on the screen
и понадобилось ещё запроса 2-3 уточняющих, чтобы он наконец сделал то что хотел.
А потом до меня дошло: есть целые веб-ресурсы, где полно такого творчества и которые видимо попали в обучающую выборку.
Интересно, а сможет llm описать sdf: https://habr.com/ru/articles/880352/
Зарегистрируйтесь на Хабре, чтобы оставить комментарий
Создаю новое направление в изобразительном искусстве — программный LLM ART