Agents Are Thinking: анимация мыслительного процесса в вебе

TL;DR: Разбираем реализацию текстовой анимации для визуализации мыслительного процесса AI-агентов с использованием Rust, WebAssembly и CSS. Практическое применение для UX в чат-интерфейсах и статусных индикаторах.

Введение: зачем анимировать мышление?

В эпоху LLM и AI-agents пользовательские интерфейсы требуют новых способов визуальной коммуникации. Статический spinner или progress bar не передают сложность когнитивных процессов. Анимация “мыслительного процесса” (thinking animation) стала must-have для чат-ботов и интерактивных систем.

Мы разберем кросс-платформенное решение, оригинально написанное на Python, но переписанное на Rust с WASM-экспортом и Python-биндингами. Такой подход дает performance boost и универсальность использования.

Архитектура решения

Исходный проект предоставляет три варианта интеграции:

1. WASM-модуль для веб-приложений
2. Python-биндинги через PyO3
3. Чистый CSS вариант для простых случаев

Рассмотрим Rust-реализацию ядра:

use std::time::Duration;
use tokio::time::sleep;

pub struct ThinkingAnimation {
    phases: Vec<String>,
    current_phase: usize,
}

impl ThinkingAnimation {
    pub fn new(phases: Vec<String>) -> Self {
        Self {
            phases,
            current_phase: 0,
        }
    }

    pub async fn next_frame(&mut self) -> String {
        let phase = &self.phases[self.current_phase];
        self.current_phase = (self.current_phase + 1) % self.phases.len();
        sleep(Duration::from_millis(300)).await;
        phase.clone()
    }
}

WASM-интеграция

Для использования в браузере компилируем Rust-код в WASM с помощью wasm-pack:

use wasm_bindgen::prelude::*;

#[wasm_bindgen]
pub struct WasmThinkingAnimation {
    inner: ThinkingAnimation,
}

#[wasm_bindgen]
impl WasmThinkingAnimation {
    #[wasm_bindgen(constructor)]
    pub fn new(phases: Vec<String>) -> Self {
        Self {
            inner: ThinkingAnimation::new(phases),
        }
    }

    #[wasm_bindgen]
    pub async fn next_frame(&mut self) -> String {
        self.inner.next_frame().await
    }
}

CSS-альтернатива

Для простых случаев можно обойтись pure CSS-решением:

.thinking-animation::after {
  content: "...";
  animation: thinking 1.5s steps(5, end) infinite;
}

@keyframes thinking {
  0% { content: "."; }
  20% { content: ".."; }
  40% { content: "..."; }
  60% { content: "...."; }
  80% { content: "..."; }
  100% { content: ".."; }
}

Практическое применение

1. Чат-интерфейсы

Интеграция с React-компонентом:

import { useEffect, useState } from 'react';
import init, { WasmThinkingAnimation } from 'thinking-animation-wasm';

function ThinkingIndicator() {
  const [frame, setFrame] = useState('');
  
  useEffect(() => {
    (async () => {
      await init();
      const anim = new WasmThinkingAnimation([
        "Thinking.",
        "Thinking..",
        "Thinking...",
        "Analyzing..",
        "Processing."
      ]);
      
      while (true) {
        setFrame(await anim.next_frame());
      }
    })();
  }, []);

  return <div className="thinking-indicator">{frame}</div>;
}

2. Консольные приложения

Python-биндинги позволяют использовать анимацию в CLI:

from thinking_animation import ThinkingAnimation

with ThinkingAnimation(phases=["Processing", "Processing.", "Processing.."]) as anim:
    # Долгая операция
    result = perform_computation()
    anim.stop()

Перформанс и оптимизации

Rust-версия показывает значительное преимущество перед оригинальной Python-реализацией:

Для сложных анимаций с десятками фаз разница становится еще заметнее.

Кастомизация и расширение

Система легко расширяется добавлением новых шаблонов анимации:

impl ThinkingAnimation {
    pub fn dots() -> Self {
        Self::new(vec![
            ".".into(),
            "..".into(),
            "...".into(),
            " ..".into(),
            "  .".into(),
        ])
    }
    
    pub fn circle() -> Self {
        Self::new(vec![
            "◐".into(),
            "◓".into(),
            "◑".into(),
            "◒".into(),
        ])
    }
}

Заключение

Текстовая анимация мышления - небольшой, но важный элемент UX в современных AI-интерфейсах. Использование Rust и WASM дает:

1. Кросс-платформенность
2. Высокую производительность
3. Гибкость интеграции

Для простых случаев достаточно CSS-решения, но для сложных сценариев WASM-версия становится идеальным выбором. Проект открыт для контрибьюшена и уже поддерживает кастомизацию через конфигурационные файлы.

Источник: https://i.redd.it/tra0xiq96i1h1.gif